A chip stands for one value the reader is holding: a filter that is applied, a person assigned,
a tag on an article, a file attached. It is the member of this family that can be acted on,
pressed when it represents a choice, removed when it represents a selection, where a `Badge`
only reports a condition and an `Avatar` stands in for an entity.

Its content is the label, and everything else is optional: a node before it (`avatar` or
`startIcon`), a status `dot`, a node after it (`endIcon`), and the remove control `onClose`
adds. Remove that control and the chip is a label again; that one prop is what changes what the
component is rather than how it looks.

```tsx demo="data-display/chip-preview"
```

## Usage

```tsx
import { Chip } from "@asheeui/web";

<Chip onClose={() => remove("Billing")} closeLabel="Remove Billing">
  Billing
</Chip>
```

Without `onClose` the same chip is a token with no dismissal, which is what a category or a
topic wants. `dot` takes `true` for the current text colour or a CSS colour string; `avatar`
replaces `startIcon` rather than sitting beside it; and a count is content, not a prop,
`<Chip>12 open</Chip>`.

## What a chip holds

Three nodes and a dot, resolved against the chip's own density: the box an icon sits in and the
dot beside it scale with the text, and the slot sizes the inline SVG it holds, so the icon does
not need `className="size-full"` to fit. The `avatar` slot has a scale of its own, larger than an
icon's because a portrait is not a glyph, and a node that states its own diameter is scaled into
that circle rather than cropped.

```tsx demo="data-display/chip-content"
```

`avatar` takes precedence over `startIcon`: a chip shows who it is about or what it is about, not
both. `endIcon` is dropped when `onClose` is given, because the trailing slot belongs to the
remove control then. `dot` renders a circle of half an em in the current colour, or in the CSS
colour the instance states.

## Removing a chip

`onClose` adds a real remove control after the label and fires on press. The label it announces
comes from `closeLabel`, which defaults to `Remove chip`, a row of chips is a row of identically
named buttons unless each one says what it removes.

```tsx demo="data-display/chip-removable"
```

The chip does not remove itself: the page owns the list, and `onClose` is the event that tells it
to. `isDisabled` refuses both the press and the close, so a chip marked unavailable cannot be
taken away by accident. `closeIcon` replaces the glyph when the product has its own.

## Props

```props Chip
```

`size` and `radius` are registered by the component as `md` and `full`; `variant` and `color`
are deliberately not, so they resolve from the application's `defaultVariant` and `defaultColor`
and then from `bordered` and `primary`. Because `radius` is registered, `full` beats the
application's `defaultRadius`: chips are pills in a boxy product too, unless
`components.chip.radius` or the instance says otherwise. A treatment the chip cannot draw is
landed on one it can, so an application whose `defaultVariant` is `underlined` gets `bordered`
chips.

`isDisabled`, `onClose`, `closeLabel`, `closeIcon`, `dot`, `avatar`, `startIcon`, `endIcon` and
`children` are instance-only: they describe one token rather than the design. `closeLabel` is not
a cascade value either, it is a component default, `Remove chip`, and a list of chips should
almost always override it.

## Accessibility

- The root is a `div`. A chip with `onClick` becomes `role="button"` and a tab stop on its own, so
  a pressable chip needs nothing from the caller; a chip that is only a label carries neither a
  role nor a tab stop, because a decorative chip has nothing to operate. The focus ring is drawn
  with `focus-visible`, so it appears for a keyboard and not for a mouse.
- <kbd>Enter</kbd> and <kbd>Space</kbd> activate a pressable chip, and only when the key is pressed
  on the chip itself: the remove control is a real button, so its own keys close the chip and never
  reach the press handler.
- `isDisabled` sets `aria-disabled`, emitted only while the state applies, drops a *pressable*
  chip from the tab order (`tabindex="-1"`), dims it and removes pointer events; the remove control
  is `disabled` as well, so the chip cannot be changed while it is unavailable.
- The remove control is a real `<button type="button">` named by `closeLabel`, so it is announced
  as a button that says what it removes rather than as a second `Remove chip`.

## Related

```related badge, avatar, button
```