@antadesign/anta 0.3.25 → 0.3.27

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)
@@ -47,6 +45,11 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 - [Card](./components/card.md)
 - [Dialog](./components/dialog.md)
 - [Toaster](./components/toaster.md)
+- [Expander](./components/expander.md)
+- [Menu](./components/menu.md)
+
+- [Box](./components/box.md)
+- [Capture](./components/capture.md)
 
 ## Packages
 

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.25",
+  "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",