@antadesign/anta 0.3.26 → 0.3.28

package/docs/normalization.md

@@ -16,9 +16,9 @@ import '@antadesign/anta/elements'      // web components (client-side only)
 
 ### Structural reset
 
-- `html` uses `--sans-serif`, `--text-2`, 22px leading, and `color-scheme`.
-  `.dark` selects dark mode; `.light` restores it in a dark subtree. `body` paints
-  `--bg-2`, including the browser canvas.
+- `html` uses `--sans-serif`, `--text-2`, and 22px leading. `body` paints
+  `--bg-2`, including the browser canvas. `color-scheme` comes from `tokens.css`,
+  where `.dark` selects dark mode and `.light` restores it in a dark subtree.
 - `box-sizing: border-box` on every element (and `::before` / `::after`).
 - `margin: 0` on everything — apps build spacing from explicit values.
 - Replaced elements (`img`, `picture`, `video`, `canvas`, `svg`) → `display: block` + `max-width: 100%`, so a stray large asset can't blow out the layout.
@@ -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

@@ -1,21 +1,86 @@
 # Theming
 
-## Reference palette
+Anta works without a theme. Customize individual components through their props
+or with classes in your application CSS.
 
-`@antadesign/anta` ships an optional hand-tuned reference palette at
-`@antadesign/anta/theme-anta.css`. Import it after the tokens, reset, and element
-registration imports to replace the seed-derived default:
+When an application needs many customizations or a global change to Anta's look
+and feel, add a theme stylesheet. Import one theme after the package styles:
 
 ```ts
-import '@antadesign/anta/tokens.css'
-import '@antadesign/anta/reset.css'
-import '@antadesign/anta/elements'
-import '@antadesign/anta/theme-anta.css'
+import '@antadesign/anta/theme-antune.css' // Choose one theme included in the package.
 ```
 
-Omit the final import to use the default palette, or define your own theme.
+<a id="fonts-in-a-theme"></a>
 
-Anta's palette is generative. Every color in the system derives from six tone seeds (`--anta-seed-neutral`, `--anta-seed-brand`, `--anta-seed-info`, …), and a seed contributes only its hue: the lightness and chroma of every background, text, border, and component state come from Anta's formulas, tuned per role and per theme. Reskinning a tone is one custom property, and the whole scale re-derives in both light and dark:
+## Fonts in a theme
+
+Without a reference theme, `tokens.css` defines three system font stacks:
+
+```css
+:root, .light {
+  --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
+    Consolas, "Liberation Mono", monospace;
+}
+```
+
+Components and theme rules choose which variable to use. For example, body text
+can use `--sans-serif` while a particular title style uses `--serif`. Without a
+theme, Anta does not force font-specific stylistic sets or variable-font axes.
+
+You can register your fonts and redefine the stacks in a custom theme stylesheet
+such as `theme.css`:
+
+```css
+/* theme.css */
+@font-face {
+  font-family: "App Sans";
+  src: url("/fonts/app-sans.woff2") format("woff2");
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+:root {
+  --sans-serif: "App Sans", system-ui, sans-serif;
+  --serif: Georgia, serif;
+  --monospace: ui-monospace, monospace;
+}
+```
+
+The **Antune** and **Antithesis** themes included with Anta use custom fonts that
+require separate licenses. If your application does not have those licenses,
+redefine all three font variables as shown above.
+
+```css
+/* theme.css */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&family=Source+Serif+4:wght@400;600&display=swap");
+
+:root {
+  --sans-serif: "Inter", sans-serif;
+  --serif: "Source Serif 4", serif;
+  --monospace: "JetBrains Mono", monospace;
+}
+```
+
+After you redefine these three variables, the theme fonts are not used or
+downloaded (exactly what we want in this case).
+
+<a id="color-seeds"></a>
+
+## Color seeds
+
+In your custom theme, override any of Anta's six seed color tokens to recolor
+components. These overrides can live in any application stylesheet:
+
+- `--anta-seed-neutral`
+- `--anta-seed-brand`
+- `--anta-seed-info`
+- `--anta-seed-success`
+- `--anta-seed-warning`
+- `--anta-seed-critical`
 
 ```css
 :root {
@@ -23,9 +88,292 @@ Anta's palette is generative. Every color in the system derives from six tone se
 }
 ```
 
-Anta's styles use ordered child layers inside `@layer anta`. Your unlayered CSS
-overrides them without `!important`, and shadow-DOM components expose
-`::part(...)`. A component's `tone` accepts a named tone or CSS color and derives
-its rest, hover, and active values. Each component page lists its styling hooks.
+For more control, customize the `--text-*`, `--bg-*`, and `--border-*` tokens
+separately for light and dark modes.
+
+Anta's styles use ordered child layers inside `@layer anta`. Your regular
+unlayered CSS overrides them without `!important`.
+
+<a id="themes"></a>
+
+## Themes
+
+Compare the same components across themes. Select a tab to preview the theme and
+read its stylesheet.
+
+<a id="theming-lab"></a>
+
+## Theming lab
 
 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. In all scope, the off-state box border ramps off that fill mixed toward neutral grey; selected scope keeps it neutral.
+
+#### 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. All scope also ramps the off-ring border from it; selected scope keeps unpicked options neutral.
+
+#### 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.28",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -42,7 +42,8 @@
     "./tokens.css": "./dist/tokens.css",
     "./reset.css": "./dist/reset.css",
     "./bundle.css": "./dist/bundle.css",
-    "./theme-anta.css": "./dist/theme-anta.css",
+    "./theme-antune.css": "./dist/theme-antune.css",
+    "./theme-antithesis.css": "./dist/theme-antithesis.css",
     "./generate-icons.mjs": "./dist/generate-icons.mjs",
     "./*": {
       "types": "./dist/*.d.ts",
@@ -50,7 +51,7 @@
     }
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run build:bundle && pnpm run build:types && pnpm run build:docs",
+    "build": "rm -rf dist && pnpm run build:js && pnpm run build:css && pnpm run build:bundle && pnpm run build:types && pnpm run build:docs",
     "build:dev": "pnpm run build:js && pnpm run build:css:dev && pnpm run build:bundle && pnpm run build:types",
     "build:css": "esbuild $(find src -name '*.css') --minify --outdir=dist --outbase=src && cp scripts/generate-icons.mjs dist/",
     "build:css:dev": "find src -name '*.css' | while IFS= read -r f; do d=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$d\")\"; cp \"$f\" \"$d\"; done && cp scripts/generate-icons.mjs dist/",
@@ -59,9 +60,11 @@
     "build:types": "tsc -p src/tsconfig.json",
     "build:docs": "pnpm --filter anta-site run docs:api && pnpm --filter anta-site run docs:pages && node scripts/generate-package-docs.mjs",
     "dev": "node scripts/dev.mjs",
-    "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)",
+    "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 @antadesign/plot run build:dev && pnpm --filter anta-site run docs && (node scripts/dev-watch.mjs & pnpm --filter anta-site run dev:server & pnpm --filter anta-site run dev:search & 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",

package/dist/components/InputDate.module.css

@@ -1 +0,0 @@
-.calendarMenu{--menu-padding: 8px}.timeRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}.dateField::part(input){text-overflow:ellipsis}

package/dist/components/Select.module.css

@@ -1 +0,0 @@
-.chevron{transition:transform .15s ease}.chevron.open{transform:rotate(180deg)}.filter{padding:4px 4px 0}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}

package/dist/components/SelectFaceted.module.css

@@ -1 +0,0 @@
-.search{padding:var(--menu-padding, 4px)}.summary{display:block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer{padding:var(--menu-padding, 4px);border-top:1px solid var(--border-4)}