@antadesign/anta 0.3.24 → 0.3.26

package/docs/components/banner.md

@@ -1,15 +1,12 @@
 # Banner
 
-A full-width message strip for a page- or section-level notice: an announcement, a
-status change, a promotion. The `Banner` JSX wrapper renders an `<a-banner>` whose
-content is a single centered row — `message`, optional `children`, then `actions` —
-with a dismiss ✕ on the right edge. It's **closable** by default.
+A full-width notice for an announcement, status change, or promotion. `Banner`
+renders an `<a-banner>` with `message`, optional `children`, `actions`, and a dismiss
+control. Content starts at the inline edge; pass `align="center"` to center it
+([Align](#align)). `closable` defaults to `true`.
 
-Its surface reuses `Expander`'s primary vocabulary — a toned box that tracks light
-and dark — but laid out as a short horizontal strip sitting edge to edge, about
-twice the resting height of `Progress`. It's **borderless by default**; add a rule
-under it or an outline around it with `border-bottom-width` / `border-width`, the
-same opt-in as `Progress` ([Styling](#styling)).
+`Banner` is borderless. Set `border-bottom-width` for a rule or `border-width` for
+an outline ([Styling](#styling)).
 
 ## Tone
 
@@ -49,11 +46,24 @@ pass a `number` (px) or a CSS length string for a custom radius.
 <Banner round={12} tone="success" message="A custom 12px radius." />
 ```
 
+## Align
+
+`align` places the content row. `start` (the default) aligns it to the inline edge
+and reserves space for the dismiss control. `center` centers it in the bar. Wrapped
+message text follows the selected alignment.
+
+```tsx
+<Banner tone="info" message="Start-aligned content." /> {/* start is the default */}
+<Banner align="center" tone="info" message="Centered content." />
+```
+
+The layout follows `direction: rtl`.
+
 ## Message and content
 
-`message` is the leading content — a string (rendered at the banner type scale) or
-any node. `children` sit between the message and the actions, for a chip, a link,
-or a secondary line. Both are centered as one row.
+`message` is the leading content: a string at the banner type scale or any node.
+`children` sit between the message and actions, for example a chip, link, or
+secondary line.
 
 ```tsx
 <Banner tone="info" message="Deployment complete.">
@@ -192,6 +202,8 @@ through `dismissed` instead.
 |------|------|---------|-------------|
 | `actions?` | ReactNode | — | Trailing controls (buttons, links) rendered as a compact row after the
  message and `children`. |
+| `align?` | 'start' \| 'center' | 'start' | Positions the content row. `'start'` aligns it to the inline edge; `'center'`
+ centers it. Wrapped message text follows the selected alignment. |
 | `children?` | ReactNode | — | Free content placed BETWEEN the message and the actions. |
 | `closable?` | boolean | true | Whether the trailing ✕ dismiss button is present. `false` removes it — drive
  dismissal yourself (a controlled `dismissed`, or your own control) instead.
@@ -202,8 +214,7 @@ through `dismissed` instead.
  not updating). **Requires `onDismiss`** — controlled mode never self-hides, so
  without a handler to set `dismissed` the ✕ can't close the banner. Leave
  undefined for uncontrolled. |
-| `message?` | ReactNode | — | Leading message — a string (rendered at the banner type scale) or any node.
- Centered in the bar, followed by `children` and then `actions`. |
+| `message?` | ReactNode | — | Leading message: a string at the banner type scale or any node. |
 | `onDismiss?` | () => void | — | Fired when the user dismisses the banner (clicks ✕). Uncontrolled, the banner
  hides itself and this notifies. Controlled, use it to accept the
  request — set `dismissed` to `true` (or ignore to reject); pair it with
@@ -257,7 +268,7 @@ banner's border matches its tone with no extra work.
 <Banner round tone="success" message="A full outline on a round banner." style={{ borderWidth: 1 }} />
 ```
 
-The host `a-banner` **is** the centered bar — its surface, text, border, and layout
+The host `a-banner` **is** the bar — its surface, text, border, and layout
 are all plain CSS on the host (`@layer anta`, so an un-layered rule of yours wins
 without `!important`). For the individual regions, `<a-banner>` exposes
 `::part(message)` / `::part(content)` / `::part(actions)` / `::part(close)`.

package/docs/components/box.md

@@ -0,0 +1,282 @@
+# Box
+
+`Box` is a DOM container that adds layout props, overflow states, and browser
+context events.
+
+## Display
+
+`display` and `gap` set the matching CSS properties. A numeric `gap` uses
+pixels. A string accepts any CSS length.
+
+```tsx
+<Box round={8}><span /></Box>
+<Box display="flex" round={8} gap={6}><span /></Box>
+<Box display="grid" round={8} gap="0.5rem" style={{ gridTemplateColumns: '1fr 1fr' }}><span /></Box>
+```
+
+`round` accepts the same values. Pass `round` for fully rounded corners. Omit
+it for square corners.
+
+`display`, `gap`, and `round` use the `anta.components` layer. Your
+`className` and `style` override them.
+
+## Overflow
+
+Box reports when content exceeds its bounds (`overflowX` and `overflowY`), when
+CSS clips it (`clippedX` and `clippedY`), and when it can scroll (`scrollableX`
+and `scrollableY`). It exposes each measurement as a CSS state, so CSS can react
+without JSX state or a measurement ref.
+
+A Box measures for `fade`, `onMeasureChange`, or `observe="size"`. Use
+`observe="size"` when CSS reads its states. A Box with none of these attaches no
+observers. Measurement pauses off screen, except `fade`, which measures on
+connection so it can paint its mask.
+
+`observe` accepts `"size"`, `"context"`, or `"all"`. A bare `observe` means
+`"all"`. The JSX `Box` derives the needed value from its handlers. When you use
+`a-box` directly, set it yourself; `addEventListener` does not start reporting:
+
+```html
+<a-box observe="size">Content</a-box>
+<a-box observe="all">Content</a-box>
+```
+
+The attribute works with listeners added before upgrade, removed with `once` or
+`AbortSignal`, and replaced during React renders.
+
+`.edge` is a demo class name. Use your own selector.
+
+```tsx
+<Box observe="size" round={8} className="edge" style={{ width: 150 }}>Content that fits.</Box>
+
+<Box observe="size" round={8} className="edge" style={{ width: 150, overflow: 'hidden', whiteSpace: 'nowrap' }}>
+  A label too long for this box.
+</Box>
+
+<Box observe="size" round={8} className="edge" style={{ width: 150, height: 56, overflowY: 'auto' }}>
+  One. Two. Three. Four. Five. Six. Seven. Eight. Nine. Ten.
+</Box>
+```
+
+```css
+.edge:state(clipped-x) { border-color: var(--border-3-warning); }
+.edge:state(scrollable-y) { border-color: var(--border-3-info); }
+```
+
+### Fading a clipped edge
+
+`fade` masks each edge that hides content. Scrolling moves the mask to the edge
+that still hides content and removes it at the end. `fadeSize` sets its depth.
+
+```tsx
+<Box fade fadeSize={32} round display="flex" gap={6} style={{ overflowX: 'auto' }}>
+  {TAGS.map((t) => <Tag key={t} size="small" label={t} />)}
+</Box>
+```
+
+The mask clips to the padding box. It preserves the Box border, shadows, and
+focus ring when no edge is hidden.
+
+The four edge states are `hidden-start-x`, `hidden-end-x`, `hidden-start-y`, and
+`hidden-end-y`. Use `hiddenStartX` and its siblings in JSX. To style the states
+without `fade`, add `observe="size"`.
+
+```css
+/* <Box observe="size" className="my-box"> */
+.my-box:state(hidden-end-x) {
+  mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
+}
+```
+
+### Tooltip on clipped content
+
+`Tooltip truncatedOnly` uses Box's `isTruncated` getter. It shows when the Box
+clips on either axis, including wrapped children.
+
+```tsx
+const TAGS = ['frontend', 'design-system', 'a11y', 'performance']
+
+<Box display="flex" round={8} gap={6} className="tag-box" style={{ height: 34 }}>
+  {TAGS.map((t) => <Tag key={t} size="small" label={t} />)}
+  <Tooltip truncatedOnly>{TAGS.join(' · ')}</Tooltip>
+</Box>
+```
+
+```css
+.tag-box { flex-wrap: wrap; padding: 6px; overflow: hidden; }
+```
+
+## Measurements
+
+`measurechange` fires one frame after observation starts and after the Box or its
+content changes. `changed` contains the moved fields, and `current` is the full
+snapshot. The event pauses off screen and reports again when the Box returns.
+
+```tsx title="measurechange"
+<Box
+  style={{ maxWidth: 210, overflow: 'hidden', whiteSpace: 'nowrap' }}
+  onMeasureChange={(_, { changed, current }) => {
+    // changed → { clippedX: true, scrollWidth: 412 }
+    if (changed.clippedX) setShowOverflowHint(current.clippedX)
+  }}
+>
+  Long account name
+</Box>
+```
+
+The preview updates as you resize or scroll the Box. Tags mark `true` values.
+
+[`BoxMeasurement`](#boxmeasurement) lists every field. Box maps each overflow
+field to a kebab-case CSS state, such as `overflow-x`, `clipped-y`,
+`scrollable-x`, and `hidden-end-y`. These states are not host attributes. They
+remain current only while `fade`, `observe="size"`, or `onMeasureChange` enables
+measurement.
+
+## Context
+
+`contextchange` uses the same `{ changed, current }` shape. Boxes share one
+context observer per window, which stops when the last context reader
+disconnects.
+
+[`BoxContext`](#boxcontext) lists every field. `contextchange` sets no CSS
+states. Use `:focus-within`, mode classes, and media queries when CSS is the
+reader.
+
+Every value in the following preview is live. Switch the site theme, resize the
+window, zoom the page, or use a touch device. Treat `osVersion` and
+`browserVersion` as hints because browsers freeze parts of these values. Use
+`pointer`, `hover`, or a feature test to gate behavior. The second Box is in a
+`.light` scope, so its `mode` remains `light` on a dark page while `globalMode`
+follows the document.
+
+`context.font` is the Box's resolved text style, `context.inset` measures from
+the border edge to the content edge, and `devicePixelRatio` provides the canvas
+scale. Use them to align canvas text with the DOM.
+
+`measurement` cannot derive the inset: `width` is the border box, and
+`clientWidth` is the padding box.
+
+Set `ctx.font` from `font.shorthand` first. Chromium and Firefox reset
+`fontStretch`, `fontVariantCaps`, `fontKerning`, and `textRendering` when
+`ctx.font` changes. `stretch` and `variantCaps` stay out of the shorthand because
+a percentage `font-stretch` invalidates it.
+
+```tsx title="canvas"
+<Box
+  onContextChange={(_, { current }) => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!ctx) return
+
+    const { font, devicePixelRatio: dpr } = current
+    canvas.width = 300 * dpr
+    canvas.height = 80 * dpr
+    ctx.scale(dpr, dpr)
+
+    ctx.font = font.shorthand
+    ctx.fontStretch = font.stretch
+    ctx.fontVariantCaps = font.variantCaps
+    ctx.fontKerning = font.kerning
+    ctx.textRendering = font.textRendering
+    ctx.letterSpacing = font.letterSpacing
+    ctx.wordSpacing = font.wordSpacing
+    ctx.direction = font.direction
+    ctx.fillStyle = font.color
+
+    const x = current.inset.borderLeft + current.inset.paddingLeft
+    const y = current.inset.borderTop + current.inset.paddingTop
+    ctx.fillText('Matches the DOM', x, y + (font.lineHeight ?? font.size))
+  }}
+>
+  <canvas ref={canvasRef} />
+</Box>
+```
+
+`getComputedStyle(element).font` is empty in Chromium, Firefox, and WebKit, so
+Box assembles the shorthand.
+
+```tsx title="contextchange"
+<Box onContextChange={(_, { changed, current }) => {
+  if (changed.mode) updatePreviewTheme(current.mode)
+  if (changed.focusWithin) announceFocus(current.focusWithin)
+}}>
+  <span>Preview content</span>
+</Box>
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `display?` | BoxDisplay | block | Layout model for the host. All other layout, sizing, mask, and shadow
+properties stay ordinary `className` / `style` CSS on the Box itself. |
+| `fade?` | boolean | — | Fades out every edge that currently hides clipped content, and drops the
+fade from an edge once the reader scrolls to it. |
+| `fadeSize?` | number \| string | 24 | Depth of the `fade` gradient. A `number` is pixels; a string is any CSS
+length. |
+| `gap?` | number \| string | — | Gap between children, matching the CSS `gap` property. A `number` is
+pixels; a string is any CSS length or two-value gap (`'1rem'`,
+`'8px 16px'`). Applies while the Box is a flex or grid container. |
+| `observe?` | 'size' \| 'context' \| 'all' | — | What the Box watches, when a handler is not what turns it on. `'size'`
+keeps the overflow CSS states (`:state(clipped-x)`, `:state(scrollable-y)`,
+…) current — reach for it when your own CSS is the only reader. `'context'`
+and `'all'` are there for symmetry; passing `onMeasureChange` or
+`onContextChange` already turns the matching half on. |
+| `onContextChange?` | (event, detail) => void | — | Fired after Box's browser and local rendering context changes. `detail`
+contains the changed fields and a full current snapshot. |
+| `onMeasureChange?` | (event, detail) => void | — | Fired after Box geometry or its content-overflow state changes. `detail`
+contains the changed fields and a full current snapshot. |
+| `round?` | boolean \| number \| string | — | Fully-round corners (`border-radius: 999px`, clamped to the box). Pass a
+`number` (px) or a CSS length string (`'1rem'`) for a custom radius. Omit
+for square corners. |
+
+### BoxMeasurement
+
+The `measurechange` payload, as `changed` (only what moved) and `current` (the
+whole snapshot).
+
+### BoxContext
+
+The `contextchange` payload, in the same two shapes.
+
+### BoxFont
+
+`context.font`, the resolved text style.
+
+### BoxInset
+
+`context.inset`, the distance from the border edge to the content edge.
+
+Use `<a-box>` when you assemble DOM without a JSX wrapper. Both events are
+ordinary, non-bubbling `CustomEvent`s carrying the same detail object.
+
+```html title="a-box"
+<a-box display="grid" gap="8px" round="12px" observe="all" id="summary"
+       style="overflow: auto; max-height: 16rem">
+  <p>Summary content</p>
+</a-box>
+
+<script type="module">
+  import '@antadesign/anta/elements/a-box'
+
+  const box = document.querySelector('#summary')
+  box.addEventListener('measurechange', ({ detail }) => {
+    console.log(detail.changed, detail.current.scrollableY)
+  })
+  box.addEventListener('contextchange', ({ detail }) => {
+    console.log(detail.changed, detail.current.mode)
+  })
+</script>
+```
+
+`gap`, `round`, and `fade-size` read their length through typed `attr()`, which
+today only Chrome supports. The matching custom properties in the host's inline
+style work everywhere and take precedence, so that is what the JSX wrapper sets:
+
+```html
+<a-box gap round fade
+       style="--box-gap: 8px; --box-round: 12px; --box-fade-size: 32px">Content</a-box>
+```
+
+`box.measurement`, `box.context`, and `box.isTruncated` read the same values
+synchronously.

package/docs/components/breadcrumbs.md

@@ -108,8 +108,8 @@ copying final item `current` when it represents the current page.
 ```
 
 Use `copyUrl` to copy `location.href`, `copyNode` to copy a marked rendered
-region, or `copy` for a known string. `onCopyRequest` refreshes a reactive string
-before copying, and `onCopied` receives the result.
+region, or `copy` for a known string. For dynamic text, pass a controlled `copy`
+string and set it from `onCopyRequest`. `onCopied` receives the result.
 
 ### Props
 

package/docs/components/button.md

@@ -288,11 +288,11 @@ carries a link back to where it came from.
 <ButtonCopy copy={snippet} copyWithUrl label="Copy snippet" />  {/* snippet + source URL */}
 ```
 
-### Lazy content
+### Copy dynamic text
 
-When the content is expensive to compute or changes over time, keep `copy`
-reactive and refresh it in **`onCopyRequest`**, which fires on **pointerdown** —
-the click that follows copies the latest value.
+`copy` is a controlled string. Start it at `''`, then set the new text in
+`onCopyRequest`. The next render updates `copy`, and activation writes that value.
+`onCopyRequest` does not return text. It does not add a polling loop.
 
 ```tsx
 const [report, setReport] = useState('')
@@ -300,16 +300,28 @@ const [report, setReport] = useState('')
 <ButtonCopy
   copy={report}
   label="Copy report"
-  onCopyRequest={() => setReport(generateReport())} // recomputed on pointerdown
+  onCopyRequest={() => setReport(generateReport())}
 />
 ```
 
-The value is recomputed on pointerdown and read on the click a moment later, so
-the pointerdown→click gap absorbs the work — including an update that arrives from
-another thread. Only the serializable `copy` string crosses, through the normal
-re-render, so this holds in off-UI-thread runtimes (a worker-rendered app) where a
-callback couldn't. The clipboard API's user-gesture requirement is preserved
-because the write happens on the click.
+`onCopyRequest` fires on pointerdown or Enter/Space keydown, before the click or
+menu selection that writes to the clipboard.
+
+#### Why `copy` is controlled
+
+In a usual React or Preact app, an `onClick` handler can calculate a string and
+call the Clipboard API itself. `ButtonCopy` also supports applications rendered
+from a worker. The DOM copy control and Clipboard API are on the browser UI
+thread, but the application's JSX code can be elsewhere. A function cannot cross
+that boundary as a callable reference.
+
+The request tells the application to calculate the text. Its state update makes
+the renderer send the string as the `copy` attribute. The control then writes that
+attribute during activation, when the browser permits clipboard access. A
+`lazyCopy: () => string` prop could only hide this same state update inside the
+wrapper. A generic return value would also need a defined clipboard format and
+serialization; Anta supports text (`copy`), a DOM region (`copyNode`), and the
+current URL (`copyUrl`).
 
 ### Props
 
@@ -342,10 +354,9 @@ because the write happens on the click.
  activation, and removes the button from the tab order while active. |
 | `onClick?` | (e) => void | — | Click handler. |
 | `onCopied?` | (ok) => void | — | Fires after the copy attempt with whether it succeeded. |
-| `onCopyRequest?` | () => void | — | Compute the copy content lazily. Fires on pointerdown / keydown; update
- `copy` (a state change) here and the activation copies the latest value.
- The gap lets the update land even off the UI thread — only the
- serializable `copy` string crosses. |
+| `onCopyRequest?` | () => void | — | Refresh a dynamic `copy` value before activation. Set the new string in
+ application state so the next render updates `copy`. Return values are
+ ignored. Fires on pointerdown and Enter/Space keydown. |
 | `paddingless?` | boolean | — | Drops outer padding to zero. |
 | `ping?` | string | — | Space-separated URLs the browser pings on navigation. |
 | `priority?` | 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' | secondary | Visual emphasis. |

package/docs/components/input.md

@@ -545,6 +545,10 @@ file name, with an Anta-styled chooser button. `submit` and `reset` inputs use t
 matching Anta button chrome; set `priority="primary"` on a submit control when it
 is the form's main action.
 
+`<textarea data-anta>` uses the same field chrome. Set `rows` for its height; one
+field-height is the minimum, and it resizes vertically. Native textareas do not
+autogrow; use Input's [`multiline`](#multiline) instead.
+
 Use `data-anta-size="small"` or `"large"` for field sizing. Native inputs own
 their `size` attribute, so Anta does not reuse it. `round` and a custom-color
 `tone` work the same way as Input.
@@ -557,6 +561,7 @@ their `size` attribute, so Anta does not reuse it. `round` and a custom-color
 <input data-anta round type="url" name="site" placeholder="Rounded URL">
 <input data-anta type="password" name="password" value="password">
 <input data-anta tone="rebeccapurple" type="number" name="seats" value="3" min="1">
+<textarea data-anta rows="3" name="notes" placeholder="Notes"></textarea>
 <input data-anta type="file" name="attachment" accept=".pdf,.docx">
 
 <input data-anta type="submit" value="Submit" priority="primary">

package/docs/components/menu.md

@@ -366,12 +366,12 @@ chevron stay centered on the row, so it composes with a trailing counter.
 </Menu>
 ```
 
-`MenuItemCopy` is a row that copies to the clipboard when chosen — `copy` for a
-literal string, `copyNode` for a DOM region. It composes a `<MenuItem>` with a
-slotted `<a-copy>` element that performs the write, and keeps the menu open on
-select so the check / retone feedback shows. `onCopied(ok)` fires after each
-attempt. `iconPlacement="trailing"` moves the feedback glyph to the end of the
-row; `"none"` shows a cursor-near confirmation instead.
+`MenuItemCopy` is a row that copies to the clipboard when chosen: `copy` for a
+string, `copyNode` for a DOM region, or `copyUrl` for the current URL. It composes
+a `<MenuItem>` with a slotted `<a-copy>` element that performs the write, and
+keeps the menu open on select so the check / retone feedback shows. `onCopied(ok)`
+fires after each attempt. `iconPlacement="trailing"` moves the feedback glyph to
+the end of the row; `"none"` shows a cursor-near confirmation instead.
 
 Copy sits alongside normal items, so a "Share" menu can mix a copy-link row with
 navigating links.
@@ -421,15 +421,18 @@ navigating links.
  carries `role` + `aria-checked`; only the drawn mark changes. Suppresses the
  built-in checkbox / radio and the trailing `check` glyph. The node is made
  passive (aria-hidden, no pointer events) so the row receives the click. |
-| `kbd?` | string | — | A trailing keyboard-shortcut hint, e.g. `"⌘E"`. |
+| `kbd?` | string | — | Trailing shortcut hint, e.g. `"⌘E"`. Anta translates it to
+ `aria-keyshortcuts` and hides the visual glyphs from assistive technology.
+ Use `+` within a chord and spaces between shortcuts (`"⌘K ⌘S"` becomes
+ `"Meta+K Meta+S"`). Pass `aria-keyshortcuts` to override the translation.
+ This does not bind the shortcut. |
 | `label?` | ReactNode | — | The item's text. Usually a string, but any node is accepted — e.g. a filtered
  `Select` bolds the matched substring. Omit and pass `children` for richer
  content. |
 | `onCopied?` | (ok) => void | — | Fires after the copy attempt with whether it succeeded. |
-| `onCopyRequest?` | () => void | — | Compute the copy content lazily. Fires on pointerdown / keydown; update
- `copy` (a state change) here and the activation copies the latest value.
- The gap lets the update land even off the UI thread — only the
- serializable `copy` string crosses. |
+| `onCopyRequest?` | () => void | — | Refresh a dynamic `copy` value before activation. Set the new string in
+ application state so the next render updates `copy`. Return values are
+ ignored. Fires on pointerdown and Enter/Space keydown. |
 | `onMouseDown?` | (event) => void | — | Raw `mousedown` on the row. Mainly to `preventDefault()` so the row doesn't
  take focus on a mouse press — e.g. a combobox option keeping focus in its
  input field while the click still selects. |

package/docs/components/tag.md

@@ -183,3 +183,50 @@ a-tag.badge a-tag-label { font-weight: 600; letter-spacing: 0.15ch; }
 
 For a *solid* recolor, prefer `tone` / `priority` — don't reach for the resolved
 `--tag-bg` / `--tag-border` / `--tag-text` (they're recomputed per priority and tone).
+
+### Interactive tags
+
+`Tag` is presentational. Wrap it in an anchor for navigation or a native button
+for an action. The outer control receives focus and keyboard activation.
+
+```tsx
+<a className="tag-link" href="/builds/42">
+  <Tag tone="info" icon="external-link" label="Build" value="#42" />
+</a>
+```
+
+```css
+a.tag-link {
+  display: inline-flex;
+  text-decoration: none;
+  cursor: pointer;
+}
+```
+
+A removable tag has one interactive child: its remove `Button`. Keep the label
+as tag content, give the button an accessible name, and let the segment divider
+separate it. Remove the tag's block padding so the small button keeps its target
+size. The negative focus offset keeps its focus ring inside the tag's clipped edge.
+
+```tsx
+<Tag className="removable-tag" tone="info">
+  <span>Frontend</span>
+  <Button priority="quaternary" size="small" icon="x" aria-label="Remove Frontend" />
+</Tag>
+```
+
+```css
+a-tag.removable-tag {
+  padding-block: 0;
+}
+a-tag.removable-tag > a-button {
+  align-self: stretch;
+}
+a-tag.removable-tag > a-button:focus-visible {
+  outline-offset: -2px;
+}
+```
+
+When a tag both opens something and removes it, render two sibling controls in a
+compound layout. Do not place a remove button inside an anchor or button that
+wraps the tag.

package/docs/index.md

@@ -21,6 +21,7 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 - [Tag](./components/tag.md)
 - [Tooltip](./components/tooltip.md)
 - [Icon](./components/icon.md)
+- [Avatar](./components/avatar.md)
 - [Loader](./components/loader.md)
 - [Progress](./components/progress.md)
 
@@ -33,9 +34,6 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 - [Tabs](./components/tabs.md)
 - [Steps](./components/steps.md)
 
-- [Expander](./components/expander.md)
-- [Menu](./components/menu.md)
-
 - [Input](./components/input.md)
 - [InputAutocomplete](./components/input-autocomplete.md)
 - [InputDate](./components/input-date.md)
@@ -43,10 +41,13 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 - [Select](./components/select.md)
 - [SelectFaceted](./components/select-faceted.md)
 
+- [Box](./components/box.md)
 - [Banner](./components/banner.md)
 - [Card](./components/card.md)
 - [Dialog](./components/dialog.md)
 - [Toaster](./components/toaster.md)
+- [Expander](./components/expander.md)
+- [Menu](./components/menu.md)
 
 ## Packages