@antadesign/anta 0.3.26 → 0.3.27

package/docs/components/text.md

@@ -97,34 +97,19 @@ more" and "Show less". `collapsible` takes effect only with `expandable`.
 <Text truncate={3} expandable collapsible>{longSentence}</Text>
 ```
 
-### Props
+## Component props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `collapsible?` | boolean | — | Let the reader collapse back after expanding: the chevron becomes a
- "Show more" / "Show less" toggle that stays visible while expanded.
- Only takes effect together with `expandable`. |
-| `expandable?` | boolean | — | Show a fade hint and chevron over the truncated text and let the user
- expand it by clicking the chevron region or pressing Enter while the
- chevron has keyboard focus. Only takes effect together with `truncate`.
- On its own, expanding is **one-way** — the control is removed once
- expanded; add `collapsible` for a two-way toggle. |
+| `collapsible?` | boolean | — | Let the reader collapse back after expanding: the chevron becomes a "Show more" / "Show less" toggle that stays visible while expanded. Only takes effect together with `expandable`. |
+| `expandable?` | boolean | — | Show a fade hint and chevron over the truncated text and let the user expand it by clicking the chevron region or pressing Enter while the chevron has keyboard focus. Only takes effect together with `truncate`. On its own, expanding is **one-way** — the control is removed once expanded; add `collapsible` for a two-way toggle. |
 | `inline?` | boolean | — | Render as inline-block instead of the default block element. |
-| `priority?` | 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' | secondary | Visual priority. Maps to text-1..text-4 (`primary` = text-1, the
- strongest). The default is `secondary` (text-2) — body text reads a
- step softer than the strongest foreground; pass `primary` for emphasis. |
+| `priority?` | 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' | secondary | Visual priority. Maps to text-1..text-4 (`primary` = text-1, the strongest). The default is `secondary` (text-2) — body text reads a step softer than the strongest foreground; pass `primary` for emphasis. |
 | `size?` | 'small' \| 'medium' \| 'large' | medium | Type scale. `small` = 13/16, `medium` = 15/20, `large` = 17/24. |
-| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a
- named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS
- color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
- kept while lightness/chroma are pinned per priority in oklch. |
-| `truncate?` | boolean \| number | — | Truncate with a trailing ellipsis. `true` (or `1`) clamps to a
- single line; any integer ≥ 2 clamps to that many lines; `0` or a
- negative value means no truncation. A clipped, non-expandable JSX
- `Text` shows its text content in a tooltip by default. Nest a
- `<Tooltip>` to provide your own tooltip instead. Uses the
- `-webkit-line-clamp` technique, supported in all major browsers
- (Firefox 68+, Chrome, Safari, Edge). |
+| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is kept while lightness/chroma are pinned per priority in oklch. |
+| `truncate?` | boolean \| number | — | Truncate with a trailing ellipsis. `true` (or `1`) clamps to a single line; any integer ≥ 2 clamps to that many lines; `0` or a negative value means no truncation. A clipped, non-expandable JSX `Text` shows its text content in a tooltip by default. Nest a `<Tooltip>` to provide your own tooltip instead. Uses the `-webkit-line-clamp` technique, supported in all major browsers (Firefox 68+, Chrome, Safari, Edge). |
+
+## Web Component
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
@@ -136,6 +121,8 @@ Use `<a-text>` directly for a block that carries the text priority and tone.
 </a-text>
 ```
 
+## Styling
+
 Color comes from **`priority`** (the neutral text level) and **`tone`** (the tint);
 `size` and the type props set the rest. For a named tone, `Text` consumes the
 global **text role tokens** (`--text-1` … `--text-5`, the `-{tone}` tints,

package/docs/components/title.md

@@ -93,18 +93,15 @@ The four priorities are shown across every named tone at `level={3}`. Omit
 document outline or SEO needs heading elements; the reset applies the same type
 scale.
 
-### Props
+## Component props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `level?` | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 2 | Heading level, 1-6. Drives font-size, line-height, and vertical
- rhythm. Also surfaced to assistive tech via `aria-level`
- (h1 is typically reserved for the page title). |
+| `level?` | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 2 | Heading level, 1-6. Drives font-size, line-height, and vertical rhythm. Also surfaced to assistive tech via `aria-level` (h1 is typically reserved for the page title). |
 | `priority?` | 'primary' \| 'secondary' \| 'tertiary' \| 'quaternary' | primary | Visual priority. Maps to text-1..text-4 (`primary` = text-1). |
-| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a
- named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS
- color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
- kept while lightness/chroma are pinned per priority in oklch. |
+| `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | neutral | Color tint. `neutral` (the default) is the untinted `--text-{N}` scale; a named tone applies the matching `--text-{N}-{tone}` palette. Any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is kept while lightness/chroma are pinned per priority in oklch. |
+
+## Web Component
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
@@ -116,6 +113,8 @@ Set the heading role and level when writing `<a-title>` directly.
 </a-title>
 ```
 
+## Styling
+
 `priority` selects a neutral text level. Named `tone`s use the matching global
 text tokens. A literal `tone` is stored in `--title-tone-source` and resolved
 into the four priority levels.

package/docs/components/toaster.md

@@ -222,13 +222,14 @@ Toaster.manager.add(() => <Banner tone="critical" message="Connection lost" />,
 })
 ```
 
-### Props
+## Component props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `label?` | string | 'Notifications' | Accessible label for the region landmark. |
-| `toaster?` | Toaster | — | The store this region renders. Omit to bind the default store driven by
- `Toaster.manager`; pass a `createToaster()` for an isolated region. |
+| `toaster?` | Toaster | — | The store this region renders. Omit to bind the default store driven by `Toaster.manager`; pass a `createToaster()` for an isolated region. |
+
+## Web Component
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
@@ -266,6 +267,8 @@ remove the toast from the DOM.
 </script>
 ```
 
+## Styling
+
 The region and item are plain custom elements — style them with ordinary CSS
 (`@layer anta`, so an un-layered rule of yours wins without `!important`).
 

package/docs/components/tooltip.md

@@ -117,32 +117,20 @@ arrives later works normally; a bubble whose content is cleared while it's open
 closes itself. Content that's a single icon or image (an element, no text) still
 shows.
 
-### Props
+## Component props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `children?` | ReactNode | — | Tooltip content. Renders anything — text, markup, an icon + text.
- Lives in the light DOM, so it's styleable with your own plain CSS. |
-| `delay?` | number | 300 | Show delay in milliseconds after hover / focus. Never use `0` — use
- ~`50` for a near-instant tooltip (0 has caused issues in practice). |
-| `follow?` | boolean | — | Follow the cursor instead of pinning under the anchor. The bubble is
- pinned (anchored beneath the target) by default; pass `follow` for the
- cursor-tracking behavior, which fades by distance as the cursor leaves. |
-| `interactive?` | boolean | — | Make the bubble hoverable and clickable — enables pointer events and
- keeps it open while the cursor is over it, so its content (links,
- buttons) can be interacted with. Always pinned (an interactive bubble
- can't follow the cursor, even with `follow`). |
-| `placement?` | 'top' \| 'bottom' | bottom | Which side of the anchor the bubble prefers. Auto-flips to the other
- side when there isn't room. |
-| `round?` | boolean \| number \| string | — | Round the bubble to a 20px radius (matching a round menu). Pass a `number`
- (px) or a CSS length string for a custom radius. |
-| `truncatedOnly?` | boolean | — | Only show when the target is actually truncated (its text overflows and is
- ellipsized); a label that fits gets no tooltip. The check is a UI-thread
- layout read, re-measured on each show. By default it measures every Anta
- ellipsizing label part inside the anchor, then the anchor itself —
- override with `truncatedSelector`. |
-| `truncatedSelector?` | string | — | CSS selector (resolved within the anchor) for the element or elements
- whose overflow decides whether a `truncatedOnly` tooltip shows. |
+| `children?` | ReactNode | — | Tooltip content. Renders anything — text, markup, an icon + text. Lives in the light DOM, so it's styleable with your own plain CSS. |
+| `delay?` | number | 300 | Show delay in milliseconds after hover / focus. Never use `0` — use ~`50` for a near-instant tooltip (0 has caused issues in practice). |
+| `follow?` | boolean | — | Follow the cursor instead of pinning under the anchor. The bubble is pinned (anchored beneath the target) by default; pass `follow` for the cursor-tracking behavior, which fades by distance as the cursor leaves. |
+| `interactive?` | boolean | — | Make the bubble hoverable and clickable — enables pointer events and keeps it open while the cursor is over it, so its content (links, buttons) can be interacted with. Always pinned (an interactive bubble can't follow the cursor, even with `follow`). |
+| `placement?` | 'top' \| 'bottom' | bottom | Which side of the anchor the bubble prefers. Auto-flips to the other side when there isn't room. |
+| `round?` | boolean \| number \| string | — | Round the bubble to a 20px radius (matching a round menu). Pass a `number` (px) or a CSS length string for a custom radius. |
+| `truncatedOnly?` | boolean | — | Only show when the target is actually truncated (its text overflows and is ellipsized); a label that fits gets no tooltip. The check is a UI-thread layout read, re-measured on each show. By default it measures every Anta ellipsizing label part inside the anchor, then the anchor itself — override with `truncatedSelector`. |
+| `truncatedSelector?` | string | — | CSS selector (resolved within the anchor) for the element or elements whose overflow decides whether a `truncatedOnly` tooltip shows. |
+
+## Web Component
 
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
@@ -155,6 +143,8 @@ Place `<a-tooltip>` inside the element it describes.
 </a-button>
 ```
 
+## Styling
+
 The bubble lives in shadow DOM and is exposed as a single **part** — style the box
 (background, frost, shadow, radius, padding, a border) with `::part(bubble)`. Its
 *content* is slotted light DOM with a **normalized text baseline** (Anta body

package/docs/index.md

@@ -41,7 +41,6 @@ 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)
@@ -49,6 +48,9 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 - [Expander](./components/expander.md)
 - [Menu](./components/menu.md)
 
+- [Box](./components/box.md)
+- [Capture](./components/capture.md)
+
 ## Packages
 
 - [Table](./packages/table.md)

package/docs/install-config.md

@@ -93,6 +93,30 @@ Token custom properties stay unlayered so they apply everywhere.
 > `@layer base { … }`; `reset.css` already applies the same universal reset in
 > `@layer anta.reset`.
 
+## AI setup
+
+Anta includes version-matched Markdown documentation in its npm package.
+Append this section to your application's agent instruction file, such as
+`AGENTS.md`, `CLAUDE.md`, or your tool's equivalent. Keep existing project rules:
+
+```md
+## Anta
+
+Before Anta UI work, read
+`node_modules/@antadesign/anta/docs/index.md`
+and the pages relevant to the task.
+Verify component names, imports, props, and event signatures against the
+installed documentation and TypeScript declarations. Do not infer Anta APIs
+from similarly named components in other libraries.
+```
+
+The path is relative to the application directory where Anta is installed.
+Adjust it for your workspace or package-manager layout. Installing Anta does
+not modify your agent configuration.
+
+For tools without local file access, provide the [web documentation index](https://anta.design/llms.txt)
+and your installed Anta version. Web documentation may describe a newer release.
+
 ## Registering elements
 
 JSX wrappers render `<a-*>` tags. Register their classes before those tags reach

package/docs/normalization.md

@@ -105,7 +105,52 @@ Or import both and override only the pieces you want (unlayered, or in a later l
 The reset gives headings, lists, links, and tables the same baseline as Anta
 components. Omit it when your own reset should control them.
 
+## Default HTML tags
+
 Tags styled by the reset, rendered live.
 
+This specimen shows the native tags styled by `reset.css`:
+
+```html
+<div class="specimen">
+  <h2>Heading two</h2>
+  <h3>Heading three</h3>
+  <h4>Heading four</h4>
+  <p>
+    Body text with <a href="/normalization">a link</a>, <strong>strong</strong>,
+    <em>em</em>, <code>inline code</code>, <kbd>Ctrl</kbd>, <samp>samp output</samp>,
+    <dfn>a defined term</dfn>, <small>small print</small>, <mark>mark</mark>,
+    <abbr title="Cascading Style Sheets">abbr</abbr>, <del>deleted</del>,
+    <ins>inserted</ins>, the variable <var>w</var>, H<sub>2</sub>O and x<sup>2</sup>.
+  </p>
+  <blockquote>A blockquote, marked by a rule rather than an indent.</blockquote>
+  <ul>
+    <li>Unordered item</li>
+    <li>Second item</li>
+  </ul>
+  <ol>
+    <li>Ordered item</li>
+    <li>Second item</li>
+  </ol>
+  <dl>
+    <dt>Term</dt>
+    <dd>Definition</dd>
+  </dl>
+  <pre><code>a code block</code></pre>
+  <table>
+    <caption>Table caption</caption>
+    <thead>
+      <tr><th>Header</th><th>Another</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Cell</td><td>Cell</td></tr>
+      <tr><td>Cell</td><td>Cell</td></tr>
+    </tbody>
+  </table>
+  <figure><figcaption>A figcaption</figcaption></figure>
+  <hr />
+</div>
+```
+
 `abbr`, `q`, and `cite` keep browser typographic styles. `dd` has no browser indent
 because the reset clears margins. The reset adds no `kbd` typography.

package/docs/packages/stickers.md

@@ -21,6 +21,60 @@ npm install @antadesign/stickers   # pulls @antadesign/anta + lottie-web
 
 The full set is also published as a [Telegram sticker pack](https://t.me/addstickers/SnoutyAntithesis).
 
+## Available stickers
+
+| Name | Static export | Animated export | Asset imports |
+| --- | --- | --- | --- |
+| Angry | `StickerAngry` | `StickerAngryAnimated` | `@antadesign/stickers/angry`, `@antadesign/stickers/angry-animated` |
+| Ask | `StickerAsk` | `StickerAskAnimated` | `@antadesign/stickers/ask`, `@antadesign/stickers/ask-animated` |
+| Balance | `StickerBalance` | `StickerBalanceAnimated` | `@antadesign/stickers/balance`, `@antadesign/stickers/balance-animated` |
+| Butterfly | `StickerButterfly` | `StickerButterflyAnimated` | `@antadesign/stickers/butterfly`, `@antadesign/stickers/butterfly-animated` |
+| ButterflySnake | `StickerButterflySnake` | `StickerButterflySnakeAnimated` | `@antadesign/stickers/butterfly-snake`, `@antadesign/stickers/butterfly-snake-animated` |
+| Catch | `StickerCatch` | `StickerCatchAnimated` | `@antadesign/stickers/catch`, `@antadesign/stickers/catch-animated` |
+| Clap | `StickerClap` | `StickerClapAnimated` | `@antadesign/stickers/clap`, `@antadesign/stickers/clap-animated` |
+| Coding | `StickerCoding` | `StickerCodingAnimated` | `@antadesign/stickers/coding`, `@antadesign/stickers/coding-animated` |
+| Cowboy | `StickerCowboy` | `StickerCowboyAnimated` | `@antadesign/stickers/cowboy`, `@antadesign/stickers/cowboy-animated` |
+| Dance | `StickerDance` | `StickerDanceAnimated` | `@antadesign/stickers/dance`, `@antadesign/stickers/dance-animated` |
+| Detective | `StickerDetective` | `StickerDetectiveAnimated` | `@antadesign/stickers/detective`, `@antadesign/stickers/detective-animated` |
+| Disapprove | `StickerDisapprove` | `StickerDisapproveAnimated` | `@antadesign/stickers/disapprove`, `@antadesign/stickers/disapprove-animated` |
+| Distracted | `StickerDistracted` | `StickerDistractedAnimated` | `@antadesign/stickers/distracted`, `@antadesign/stickers/distracted-animated` |
+| Dive | `StickerDive` | `StickerDiveAnimated` | `@antadesign/stickers/dive`, `@antadesign/stickers/dive-animated` |
+| Eat | `StickerEat` | `StickerEatAnimated` | `@antadesign/stickers/eat`, `@antadesign/stickers/eat-animated` |
+| Facepalm | `StickerFacepalm` | `StickerFacepalmAnimated` | `@antadesign/stickers/facepalm`, `@antadesign/stickers/facepalm-animated` |
+| Failed | `StickerFailed` | `StickerFailedAnimated` | `@antadesign/stickers/failed`, `@antadesign/stickers/failed-animated` |
+| Found | `StickerFound` | `StickerFoundAnimated` | `@antadesign/stickers/found`, `@antadesign/stickers/found-animated` |
+| Grow | `StickerGrow` | `StickerGrowAnimated` | `@antadesign/stickers/grow`, `@antadesign/stickers/grow-animated` |
+| Handstand | `StickerHandstand` | `StickerHandstandAnimated` | `@antadesign/stickers/handstand`, `@antadesign/stickers/handstand-animated` |
+| Heart | `StickerHeart` | `StickerHeartAnimated` | `@antadesign/stickers/heart`, `@antadesign/stickers/heart-animated` |
+| Hello | `StickerHello` | `StickerHelloAnimated` | `@antadesign/stickers/hello`, `@antadesign/stickers/hello-animated` |
+| Idea | `StickerIdea` | `StickerIdeaAnimated` | `@antadesign/stickers/idea`, `@antadesign/stickers/idea-animated` |
+| Laugh | `StickerLaugh` | `StickerLaughAnimated` | `@antadesign/stickers/laugh`, `@antadesign/stickers/laugh-animated` |
+| Love | `StickerLove` | `StickerLoveAnimated` | `@antadesign/stickers/love`, `@antadesign/stickers/love-animated` |
+| Nap | `StickerNap` | `StickerNapAnimated` | `@antadesign/stickers/nap`, `@antadesign/stickers/nap-animated` |
+| Party | `StickerParty` | `StickerPartyAnimated` | `@antadesign/stickers/party`, `@antadesign/stickers/party-animated` |
+| Passed | `StickerPassed` | `StickerPassedAnimated` | `@antadesign/stickers/passed`, `@antadesign/stickers/passed-animated` |
+| Peekaboo | `StickerPeekaboo` | `StickerPeekabooAnimated` | `@antadesign/stickers/peekaboo`, `@antadesign/stickers/peekaboo-animated` |
+| Pizza | `StickerPizza` | `StickerPizzaAnimated` | `@antadesign/stickers/pizza`, `@antadesign/stickers/pizza-animated` |
+| Puzzle | `StickerPuzzle` | `StickerPuzzleAnimated` | `@antadesign/stickers/puzzle`, `@antadesign/stickers/puzzle-animated` |
+| Sad | `StickerSad` | `StickerSadAnimated` | `@antadesign/stickers/sad`, `@antadesign/stickers/sad-animated` |
+| Scared | `StickerScared` | `StickerScaredAnimated` | `@antadesign/stickers/scared`, `@antadesign/stickers/scared-animated` |
+| Scroll | `StickerScroll` | `StickerScrollAnimated` | `@antadesign/stickers/scroll`, `@antadesign/stickers/scroll-animated` |
+| Search | `StickerSearch` | `StickerSearchAnimated` | `@antadesign/stickers/search`, `@antadesign/stickers/search-animated` |
+| Shield | `StickerShield` | `StickerShieldAnimated` | `@antadesign/stickers/shield`, `@antadesign/stickers/shield-animated` |
+| Shocked | `StickerShocked` | `StickerShockedAnimated` | `@antadesign/stickers/shocked`, `@antadesign/stickers/shocked-animated` |
+| Sleep | `StickerSleep` | `StickerSleepAnimated` | `@antadesign/stickers/sleep`, `@antadesign/stickers/sleep-animated` |
+| Stressed | `StickerStressed` | `StickerStressedAnimated` | `@antadesign/stickers/stressed`, `@antadesign/stickers/stressed-animated` |
+| Suspicious | `StickerSuspicious` | `StickerSuspiciousAnimated` | `@antadesign/stickers/suspicious`, `@antadesign/stickers/suspicious-animated` |
+| Thanks | `StickerThanks` | `StickerThanksAnimated` | `@antadesign/stickers/thanks`, `@antadesign/stickers/thanks-animated` |
+| Think | `StickerThink` | `StickerThinkAnimated` | `@antadesign/stickers/think`, `@antadesign/stickers/think-animated` |
+| ThinkOfYou | `StickerThinkOfYou` | `StickerThinkOfYouAnimated` | `@antadesign/stickers/think-of-you`, `@antadesign/stickers/think-of-you-animated` |
+| ThumbsUp | `StickerThumbsUp` | `StickerThumbsUpAnimated` | `@antadesign/stickers/thumbs-up`, `@antadesign/stickers/thumbs-up-animated` |
+| Vacation | `StickerVacation` | `StickerVacationAnimated` | `@antadesign/stickers/vacation`, `@antadesign/stickers/vacation-animated` |
+| Wait | `StickerWait` | `StickerWaitAnimated` | `@antadesign/stickers/wait`, `@antadesign/stickers/wait-animated` |
+| Wink | `StickerWink` | `StickerWinkAnimated` | `@antadesign/stickers/wink`, `@antadesign/stickers/wink-animated` |
+| Work | `StickerWork` | `StickerWorkAnimated` | `@antadesign/stickers/work`, `@antadesign/stickers/work-animated` |
+| Zen | `StickerZen` | `StickerZenAnimated` | `@antadesign/stickers/zen`, `@antadesign/stickers/zen-animated` |
+
 ## Props
 
 Both flavors share the same base props; the animated flavor adds playback props.
@@ -45,6 +99,8 @@ Same as the static base, plus:
 | `playOnce?` | `boolean` | Plays once and holds the final frame instead of looping. |
 | `replayOnClick?` | `boolean` | With `playOnce`, lets people click or press Enter/Space to replay the animation. The sticker becomes a labeled button. |
 
+## Web Component
+
 Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Pass the generated SVG payload to `<a-sticker>` and set a size through

package/docs/theming.md

@@ -29,3 +29,273 @@ overrides them without `!important`, and shadow-DOM components expose
 its rest, hover, and active values. Each component page lists its styling hooks.
 
 The lab below shows the derivation live. For each toned component, the shipped Default sits next to a Custom preview driven by the seed picker, with the formula constants editable and the resolved CSS shown.
+
+## Theming lab reference
+
+The lab varies a tone seed and formula inputs in light and dark mode. These inputs describe the lab's calculations. For application styling, use tone props, global role tokens, CSS, and the parts documented on each component page.
+
+| Tone | Seed property | Initial lab seed |
+| --- | --- | --- |
+| neutral | `--anta-seed-neutral` | `#635b65` |
+| brand | `--anta-seed-brand` | `#5f4bc3` |
+| info | `--anta-seed-info` | `#1f6eb2` |
+| success | `--anta-seed-success` | `#2a7e43` |
+| warning | `--anta-seed-warning` | `#c37416` |
+| critical | `--anta-seed-critical` | `#c9302c` |
+
+### Background and Borders
+
+The container background and border role scales, derived from the source hue. Backgrounds sit near the page lightness with a faint tint that grows per step; borders step down in lightness from a saturated edge (border-1) to the faint bg-5, chroma easing off as they lighten. Neutral zeroes chroma to stay grey.
+
+#### Background
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| bg-1 L | 1 | 0 | 1 | 0 | 0–1 | 0.005 |  |
+| bg-2 L | 0.99 | 0.13 | 0.985 | 0.16 | 0–1 | 0.005 |  |
+| bg-2 C | 0.004 | 0.02 | 0.002 | 0.002 | 0–0.4 | 0.005 |  |
+| bg-3 L | 0.972 | 0.17 | 0.97 | 0.177 | 0–1 | 0.005 |  |
+| bg-3 C | 0.011 | 0.035 | 0.004 | 0.005 | 0–0.4 | 0.005 |  |
+| bg-4 L | 0.955 | 0.185 | 0.954 | 0.191 | 0–1 | 0.005 |  |
+| bg-4 C | 0.02 | 0.05 | 0.004 | 0.006 | 0–0.4 | 0.005 |  |
+| bg-5 L | 0.935 | 0.205 | 0.935 | 0.2 | 0–1 | 0.005 |  |
+| bg-5 C | 0.03 | 0.055 | 0.006 | 0.009 | 0–0.4 | 0.005 |  |
+
+#### Border
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| border-1 L | 0.67 | 0.52 | 0.67 | 0.52 | 0–1 | 0.005 |  |
+| border-1 C | 0.13 | 0.15 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+| border-2 L | 0.8 | 0.41 | 0.8 | 0.41 | 0–1 | 0.005 |  |
+| border-2 C | 0.09 | 0.12 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+| border-3 L | 0.86 | 0.33 | 0.86 | 0.33 | 0–1 | 0.005 |  |
+| border-3 C | 0.055 | 0.09 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+| border-4 L | 0.9 | 0.26 | 0.9 | 0.26 | 0–1 | 0.005 |  |
+| border-4 C | 0.04 | 0.06 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+| border-5 L | 0.935 | 0.21 | 0.935 | 0.21 | 0–1 | 0.005 |  |
+| border-5 C | 0.028 | 0.045 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+
+### Text
+
+The text color role scale, derived from the source hue. text-1 is the strong primary; text-2 the base (secondary); text-3/4 step text-2 down by alpha — Title and Text read text-1..4 as their priorities. text-5 is the faintest step (text-2 at a lower alpha), used for disabled / hint text across components, not a Title/Text priority.
+
+#### Primary
+
+text-1.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| text-1 L | 0.38 | 0.85 | 0.1 | 0.94 | 0–1 | 0.005 |  |
+| text-1 C | 0.11 | 0.1 | 0.01 | 0.008 | 0–0.4 | 0.005 |  |
+
+#### Secondary
+
+text-2 base.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| text-2 L | 0.43 | 0.77 | 0.3 | 0.8 | 0–1 | 0.005 |  |
+| text-2 C | 0.15 | 0.11 | 0.015 | 0.015 | 0–0.4 | 0.005 |  |
+
+#### Tertiary
+
+text-2 base at this alpha (→ text-3).
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| text-3 α % | 82 | 80 | 82 | 80 | 0–100 | 1 |  |
+
+#### Quaternary
+
+text-2 base at this alpha (→ text-4).
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| text-4 α % | 60 | 60 | 60 | 60 | 0–100 | 1 |  |
+
+#### Faint (text-5)
+
+text-2 base at this alpha (→ text-5) — the disabled / hint step, not a Title/Text priority.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| text-5 α % | 40 | 40 | 40 | 40 | 0–100 | 1 |  |
+
+### Buttons
+
+Primary is the source fill at three lightnesses. Secondary, tertiary, and quaternary share one foreground; secondary and tertiary share an alpha-tinted fill (tertiary a step softer, transparent at rest), quaternary has none. Secondary’s label subtracts an l-shift to read a step stronger than its tint.
+
+#### Primary
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| L rest | 0.51 | 0.4 | 0.5 | 0.4 | 0–1 | 0.005 |  |
+| L hover | 0.46 | 0.44 | 0.45 | 0.44 | 0–1 | 0.005 |  |
+| L active | 0.41 | 0.48 | 0.4 | 0.48 | 0–1 | 0.005 |  |
+| fill C | 0.17 | 0.16 | 0.02 | 0.015 | 0–0.4 | 0.005 | One chroma for the primary fill across rest/hover/active. Neutral pins it near-grey; toned versions set the saturation here instead of inheriting the seed’s own chroma. |
+
+#### Secondary
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| fg L | 0.46 | 0.86 | 0.46 | 0.86 | 0–1 | 0.005 |  |
+| fg L hover | 0.4 | 0.86 | 0.4 | 0.86 | 0–1 | 0.005 |  |
+| fg C | 0.17 | 0.13 | 0.008 | 0.015 | 0–0.4 | 0.005 |  |
+| fg l-shift | 0.05 | 0 | 0.05 | 0 | 0–0.3 | 0.005 | Subtracted from the secondary label’s OKLCH lightness so it reads one step stronger than the tint behind it. |
+| tint L | 0.54 | 0.58 | 0.54 | 0.44 | 0–1 | 0.005 |  |
+| tint C | 0.17 | 0.16 | 0.03 | 0.01 | 0–0.4 | 0.005 |  |
+| α rest | 0.1 | 0.215 | 0.1 | 0.24 | 0–1 | 0.005 |  |
+| α hover | 0.15 | 0.29 | 0.15 | 0.34 | 0–1 | 0.005 |  |
+| α active | 0.2 | 0.34 | 0.2 | 0.44 | 0–1 | 0.005 |  |
+
+#### Tertiary
+
+Reuses the secondary foreground + tint (no separate Anta constant).
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| fg L | 0.46 | 0.86 | 0.46 | 0.86 | 0–1 | 0.005 |  |
+| fg L hover | 0.4 | 0.86 | 0.4 | 0.86 | 0–1 | 0.005 |  |
+| fg C | 0.17 | 0.13 | 0.008 | 0.015 | 0–0.4 | 0.005 |  |
+| tint L | 0.54 | 0.58 | 0.54 | 0.44 | 0–1 | 0.005 |  |
+| tint C | 0.17 | 0.16 | 0.03 | 0.01 | 0–0.4 | 0.005 |  |
+| α rest | 0.1 | 0.215 | 0.1 | 0.24 | 0–1 | 0.005 |  |
+| α hover | 0.15 | 0.29 | 0.15 | 0.34 | 0–1 | 0.005 |  |
+
+#### Quaternary
+
+Rest (and active) is the tertiary foreground at the rest α; hover uses its own detached lightness at full opacity. No fill.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| fg L | 0.46 | 0.86 | 0.46 | 0.86 | 0–1 | 0.005 |  |
+| fg C | 0.17 | 0.13 | 0.008 | 0.015 | 0–0.4 | 0.005 |  |
+| hover L | 0.38 | 0.9 | 0.38 | 0.9 | 0–1 | 0.005 | Quaternary hover lightness, detached from tertiary — its own value, not the shared secondary fg-hover. Rest and active carry the rest α; hover is opaque. |
+| α rest | 0.85 | 0.85 | 0.85 | 0.85 | 0–1 | 0.005 | Alpha on the quaternary rest (and active) foreground. Light-mode neutral needs ≈0.83 to clear WCAG AA (4.5:1) over bg-2. |
+
+### Tags
+
+Primary is a solid fill; secondary an alpha tint of the tint hue; tertiary an outline. The label and edge are the Text scale — edge = --text-2, label = --text-2 at the label α (80 → --text-3), tunable per Tag (e.g. raise it for small-text contrast). The tint and solid fill are the Tag’s own (source hue at these L/C); alphas set each priority’s strength.
+
+#### Primary
+
+Solid fill; white label.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| solid L | 0.58 | 0.46 | 0.55 | 0.48 | 0–1 | 0.005 |  |
+| solid C | 0.175 | 0.165 | 0.015 | 0.015 | 0–0.4 | 0.005 | Chroma of the primary solid fill, independent of the secondary tint’s C. Neutral pins it near-grey. |
+
+#### Secondary
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| tint L | 0.57 | 0.63 | 0.55 | 0.63 | 0–1 | 0.005 |  |
+| tint C | 0.16 | 0.17 | 0.03 | 0.04 | 0–0.4 | 0.005 |  |
+| fill α % | 10 | 20 | 10 | 20 | 0–100 | 1 |  |
+| border α % | 15 | 25 | 15 | 25 | 0–100 | 1 |  |
+
+#### Tertiary
+
+Outline alpha; the edge color is --text-2.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| edge α % | 20 | 30 | 20 | 30 | 0–100 | 1 |  |
+
+#### Label
+
+Label = --text-2 at this alpha (80 → --text-3). Raise for small-text contrast.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| label α % | 80 | 80 | 80 | 80 | 0–100 | 1 |  |
+
+### Tabs
+
+The strip’s primary/secondary/tertiary differ structurally (filled track vs subtle vs underline). Labels and rings are the role scale: selected/hover = --text-1, rest = --text-2 at the rest α (80 → --text-3), tertiary hover = --text-2, track ring = --border-4, selected ring = --border-2, selected pill = --bg-1. Only the recessed track tint, secondary fill, and the rest α are the Tabs’ own — the knobs below.
+
+#### Track & fill
+
+The recessed track tint (primary) and the selected secondary fill — a faint overlay of the source hue.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| fill L | 0.55 | 0.8 | 0.55 | 0.8 | 0–1 | 0.005 |  |
+| fill C | 0.14 | 0.12 | 0.008 | 0.008 | 0–0.4 | 0.005 |  |
+| track α | 0.06 | 0.07 | 0.06 | 0.07 | 0–1 | 0.005 |  |
+| fill α | 0.03 | 0.08 | 0.03 | 0.08 | 0–1 | 0.005 |  |
+
+#### Rest label
+
+Non-selected label = --text-2 at this alpha (80 → --text-3). Selected/hover use full --text-1.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| rest α % | 80 | 80 | 80 | 80 | 0–100 | 1 |  |
+
+### Checkboxes
+
+Hoisted to --_tone-l-* inputs: the checked fill is the source at three lightnesses. The off-state box border ramps off that fill mixed toward neutral grey. On = toneSelected; off = tone.
+
+#### Fill
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| L rest | 0.5 | 0.45 | 0.6 | 0.42 | 0–1 | 0.005 |  |
+| L hover | 0.45 | 0.5 | 0.45 | 0.45 | 0–1 | 0.005 |  |
+| L active | 0.4 | 0.57 | 0.4 | 0.5 | 0–1 | 0.005 |  |
+
+### Radio
+
+Identical fill curve to Checkbox: --_tone-l-* set the selected dot at three lightnesses, and the off-ring border ramps off it. Group toneSelected drives the picked option.
+
+#### Fill
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| L rest | 0.5 | 0.45 | 0.6 | 0.42 | 0–1 | 0.005 |  |
+| L hover | 0.45 | 0.5 | 0.45 | 0.45 | 0–1 | 0.005 |  |
+| L active | 0.4 | 0.57 | 0.4 | 0.5 | 0–1 | 0.005 |  |
+
+### Expander
+
+Every color is a role token; the Expander defines none of its own. Label: rest --text-2, hover --text-1 (Title’s secondary/primary). Fill and border are the surface scale (secondary --bg-2 / --border-5, primary --bg-4 / --border-4), and the fill lightens a step on hover. Tertiary is text only, all themed per tone.
+
+### Input
+
+One border color from the seed hue at a tunable L/C — the goal is a single L/C per theme that works across every tone. Hover thickens the edge 0.5→1px (no recolor). Neutral overrides pin it grey (≈ --border-2). Applies to Input and the InputDate trigger (both compose <a-input>).
+
+#### Border
+
+Seed hue at this L/C (hover thickens the edge, no recolor). Toned starts at the average of today’s per-status literals; neutral pins grey ≈ --border-2.
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| border L | 0.58 | 0.52 | 0.8 | 0.4 | 0–1 | 0.005 |  |
+| border C | 0.18 | 0.15 | 0.015 | 0.019 | 0–0.4 | 0.005 |  |
+
+### Menu items
+
+The item label is --text-2; the hint and icon are --text-2 at the hint α (80 → --text-3), so the text follows the Text spec while the hint strength stays tunable. The selected row holds a persistent tint of the label color — its alpha is the Menu’s own knob too.
+
+#### Text
+
+Label is full --text-2; hint + icon are --text-2 at this alpha (80 → --text-3).
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| hint α % | 80 | 80 | 80 | 80 | 0–100 | 1 |  |
+
+#### Selected
+
+Tint held on the selected row — a % of the item color (--text-2).
+
+| Input | Toned light | Toned dark | Neutral light | Neutral dark | Range | Step | Meaning |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| selected α % | 9 | 12 | 9 | 12 | 0–100 | 1 |  |
+
+### Progress
+
+Every color is a role token; Progress defines none of its own. Track = --bg-4, border = --border-4, the fill indicator = --bg-5, the label = --text-2, and the right-aligned hint = --text-3. Named tones swap in the matching -{tone} role variant (so dark mode is free), and the fill’s right-edge fades from --bg-5 to --border-4. Follows the Text and Background & Borders panels live.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -62,6 +62,8 @@
     "dev:run": "echo $$ > \"$ANTA_DEV_PID_FILE\"; trap 'rm -f \"$ANTA_DEV_PID_FILE\"' EXIT; pnpm run build:dev && pnpm --filter @antadesign/stickers run build:dev && pnpm --filter anta-site run docs && (node scripts/dev-watch.mjs & pnpm --filter anta-site run dev:server & wait)",
     "stop": "node scripts/dev-stop.mjs",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
+    "test": "node --test tests/*.test.mjs",
+    "test:capture-input": "node --test tests/capture-input.test.mjs",
     "lint": "node scripts/lint-getters.mjs && node scripts/lint-css-layers.mjs",
     "verify": "pnpm run lint && pnpm run typecheck && pnpm --filter anta-site run docs:api",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",