@antadesign/anta 0.3.19 → 0.3.20

package/docs/components/tabs.md

@@ -23,9 +23,9 @@ selectable strip that emits the chosen value; add matching `<TabPanel>` children
 ## Tones
 
 Six named tones: `neutral` (default), `brand`, `info`, `success`, `warning`,
-`critical`. Any CSS colour works for a one-off custom tone. The tone runs through the
+`critical`. Any CSS color works for a one-off custom tone. The tone runs through the
 strip's labels, indicator, and track at every priority. Rows are tones (the last is a
-custom colour); columns are priorities.
+custom color); columns are priorities.
 
 **Primary**
 
@@ -35,14 +35,14 @@ custom colour); columns are priorities.
 
 ```tsx
 <Tabs tone="brand" priority="secondary" defaultValue="a">…</Tabs>
-<Tabs tone="#e0457b" priority="tertiary" defaultValue="a">…</Tabs>  {/* any CSS colour */}
+<Tabs tone="#e0457b" priority="tertiary" defaultValue="a">…</Tabs>  {/* any CSS color */}
 ```
 
 **Per-tab tone.** A `tone` on an individual option overrides the strip's tone for that one
-tab: it colours the label and icons in every mode, and the indicator when it's the active tab.
-A named tone colours the sliding indicator too; a custom literal colour tones the label
+tab: it colors the label and icons in every mode, and the indicator when it's the active tab.
+A named tone colors the sliding indicator too; a custom literal color tones the label
 everywhere but the indicator only under `noslide` (the single shared sliding element can't
-read a descendant's colour).
+read a descendant's color).
 
 ```tsx
 <Tabs
@@ -93,7 +93,7 @@ and panels are siblings; see [Panels](#panels)). Vertical works at every priorit
 />
 ```
 
-## Icons & content
+## Icons and content
 
 A tab option takes a leading **`icon`** and a trailing **`iconTrailing`**; here the
 trailing dot flags an unsaved file. For more than text, give the option **`children`**
@@ -137,7 +137,7 @@ tabs above to see it.
 
 ```tsx
 {/* The strip and panels are flat siblings — you arrange them. A flex column gaps
-    them; the strip centres itself (a <Tabs> `style` lands on <a-tabs>). */}
+    them; the strip centers itself (a <Tabs> `style` lands on <a-tabs>). */}
 <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
   <Tabs
     defaultValue="account"
@@ -160,7 +160,7 @@ Add a `<TabPanel value="…">` child for each option; each panel shows itself wh
 its value is active. The panel names its tab as its accessible label
 (`aria-labelledby`, off-DOM). Panel content is arbitrary React, so it renders normally.
 
-Panels are **optional**. With none, `Tabs` is just the strip: listen to
+Panels are **optional**. Without panels, `Tabs` renders the strip. Listen to
 `onStateChange` / `onValueChange` and render the content yourself.
 
 The strip renders from the `options` array; each `<TabPanel>` renders a
@@ -228,12 +228,12 @@ content wherever you like, switching on the value yourself.
 
 ## Controlled vs. uncontrolled
 
-The active tab is named by a single **value string**, the `value` of one of your
-`options`. Whatever value is active, `Tabs` marks that tab selected and reveals the
-`<TabPanel value="…">` that shares it (if any). You choose who owns that value:
+The active tab is identified by one option's **value string**. Tabs marks the
+matching tab selected and shows the corresponding `<TabPanel value="…">`, when
+one exists. Choose either uncontrolled or controlled state:
 
-**Uncontrolled.** Pass `defaultValue` (an option's `value`) and let `Tabs` own the
-active tab from there:
+**Uncontrolled.** Pass `defaultValue` (an option's `value`). Tabs then updates
+the active tab after interaction:
 
 ```tsx
 <Tabs
@@ -245,9 +245,9 @@ active tab from there:
 />
 ```
 
-**Controlled.** Pass `value` (an option's `value`) + `onStateChange` and own it
-yourself. `onStateChange` fires *before* the pick applies: set `value` to the new tab
-to accept, or do nothing to reject.
+**Controlled.** Pass `value` (an option's `value`) and `onStateChange`.
+`onStateChange` fires before the change applies. Set `value` to the new tab to
+accept it, or leave it unchanged to reject it.
 
 ```tsx
 const [tab, setTab] = useState('overview')
@@ -347,7 +347,7 @@ so those suit an uncontrolled strip reacting to its own pick. **`onFocus`** /
 | `priority?` | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Visual priority. `primary` is the raised pill on a recessed track (the
  segmented-control look); `secondary` keeps that sizing but drops the track, marking
  the selected tab with a subtle active background fill; `tertiary` is a bottom-underline
- indicator under the selected tab (no track, no rest line). `tone` colours `secondary` +
+ indicator under the selected tab (no track, no rest line). `tone` colors `secondary` +
  `tertiary`; `primary` stays neutral. |
 | `round?` | boolean \| number \| string | — | Fully-round the tabs and the sliding indicator (and the primary track
  well). Applies strip-wide; a single tab's `round` rounds just that tab. A
@@ -363,7 +363,7 @@ so those suit an uncontrolled strip reacting to its own pick. **`onFocus`** /
  *requests* a change via `onStateChange` — apply it by updating this prop.
  Leave undefined (and use `defaultValue`) for uncontrolled. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Keep the tab strip and panels as siblings under one parent. Panels read the active
 value from `<a-tabs>`.
@@ -387,7 +387,7 @@ tab (its text wrapped in `<a-tab-label>`), `<a-tabpanel>` a panel, and the movin
 indicator is `<a-tabs>`'s `::before`. Target them with ordinary CSS (an un-layered rule
 beats `@layer anta` without `!important`) and reach for real properties
 (`border-radius`, `padding`, `background`, …), **not** the internal `--*` output tokens.
-The demo classes below (`.square-tabs`, `.glow-tabs`, …) are just hooks; swap your own.
+The demo classes (`.square-tabs`, `.glow-tabs`, …) are hooks. Replace them with selectors you own.
 
 **Roomier track.** The strip hugs its tabs by default (0 padding), so it's exactly a
 same-size button tall. For a gap around the selected pill (the classic "well" look), add
@@ -409,7 +409,7 @@ a-tabs.square-tabs         { border-radius: 0; padding: 4px; box-shadow: none; }
 a-tabs.square-tabs::before { border-radius: 0; box-shadow: 0 0 0 1px light-dark(#cfcfd6, #46464e); }  /* 1px square pill ring */
 ```
 
-**Tertiary glowing underline.** Recolour the sliding underline and add a radial highlight
+**Tertiary glowing underline.** Recolor the sliding underline and add a radial highlight
 rising from it. The slider is a full-cover box whose `border-bottom` is the line, so a
 `background` gradient on it fills the tab behind the label. Because it's one element, the
 glow **slides with the line** between tabs, with no `noslide` and no separate per-tab
@@ -417,11 +417,11 @@ background.
 
 ```css
 /* The class is on the <a-tabs> element itself, so target a-tabs.glow-tabs (not a descendant).
-   The tertiary slider is a full-cover box with a border-bottom line — recolour the border and
+   The tertiary slider is a full-cover box with a border-bottom line — recolor the border and
    fill it with a gradient; both slide together. Where CSS anchor positioning isn't supported
    there's no slider — tertiary falls back to the per-tab ::after underline (a plain line). */
 a-tabs.glow-tabs::before {
-  border-bottom-color: light-dark(#8067ff, #907aff);   /* recolour the sliding line */
+  border-bottom-color: light-dark(#8067ff, #907aff);   /* recolor the sliding line */
   background:                                          /* highlight rising from the line, slides with it */
     radial-gradient(80% 100% at 50% 100%,
       color-mix(in oklch, light-dark(#8067ff, #907aff) 30%, transparent), transparent 70%);

package/docs/components/tag.md

@@ -62,7 +62,7 @@ clipped.
 <Tag allcaps tone="info" size="large" label="Large" />
 ```
 
-## Icon, label & value
+## Icon, label, and value
 
 Set `icon` / `iconTrailing` for a leading or trailing glyph (scaled to
 the pill), and pair `label` with `value` for a two-part tag. `value` is
@@ -145,7 +145,7 @@ down 1px, since caps read larger than mixed case at the same size.
  Rendered in the default color and weight, with no divider from the
  label; the color + weight contrast does the separating. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Use `a-tag-label` for the key and `a-tag-value` for its value.
 
@@ -157,7 +157,7 @@ Use `a-tag-label` for the key and `a-tag-value` for its value.
 </a-tag>
 ```
 
-Reach for the props first: **`tone`** sets the colour (any CSS colour for a custom
+Reach for the props first: **`tone`** sets the color (any CSS color for a custom
 tone — it derives the fill / border / text in oklch), **`priority`** the fill style,
 **`size`** the dimensions.
 
@@ -167,7 +167,7 @@ tone — it derives the fill / border / text in oklch), **`priority`** the fill
 
 `<a-tag>` is light-DOM, so for anything a tone can't give you it's plain CSS (an
 un-layered rule beats `@layer anta` without `!important`). The `.badge` class below
-takes a **gradient** background (impossible from `tone`, which is a solid colour),
+takes a **gradient** background (impossible from `tone`, which is a solid color),
 **1px** corners, and taller vertical padding so it reads completely differently:
 
 ```css
@@ -181,5 +181,5 @@ a-tag.badge {
 a-tag.badge a-tag-label { font-weight: 600; letter-spacing: 0.15ch; }
 ```
 
-For a *solid* recolour, prefer `tone` / `priority` — don't reach for the resolved
+For a *solid* recolor, prefer `tone` / `priority` — don't reach for the resolved
 `--tag-bg` / `--tag-border` / `--tag-text` (they're recomputed per priority and tone).

package/docs/components/text.md

@@ -36,7 +36,7 @@ underline to full alpha.
 
 ## Demo
 
-## Truncation & expansion
+## Truncation and expansion
 
 `truncate` takes `true` (or `1`) for a single-line ellipsis, any integer
 ≥ 2 for multi-line clamping, and `0` or a negative value for no
@@ -102,7 +102,7 @@ more" and "Show less". `collapsible` takes effect only with `expandable`.
  technique, supported in all major browsers (Firefox 68+, Chrome,
  Safari, Edge). |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Use `<a-text>` directly for a block that carries the text priority and tone.
 
@@ -112,10 +112,10 @@ Use `<a-text>` directly for a block that carries the text priority and tone.
 </a-text>
 ```
 
-Colour comes from **`priority`** (the neutral text level) and **`tone`** (the tint);
+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,
-`--link-color`), so retuning those once on `:root` / `.dark` shifts text colour
+`--link-color`), so retuning those once on `:root` / `.dark` shifts text color
 everywhere (see [Colors](../colors.md)). A custom `tone` (any CSS color) is derived in
 oklch from **`--text-tone-source`** — the same one-off knob as `Button` / `Tag`.
 

package/docs/components/title.md

@@ -106,7 +106,7 @@ scale.
  color (`'#ff1493'`, `'rebeccapurple'`) is a one-off custom tone — its hue is
  kept while lightness/chroma are pinned per priority in oklch. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Set the heading role and level when writing `<a-title>` directly.
 

package/docs/components/toaster.md

@@ -100,7 +100,7 @@ depending on what you toast:
 - **A string** auto-wraps in a `Banner`, so its ✕ is there for free.
 - **Any control carrying `data-toast-dismiss`** dismisses the toast on click. This is
   the simplest path — no handler, no `id`, no `onDismiss`; the render function doesn't
-  even take an argument. Just add the attribute to a button, link, or menu item inside
+  even take an argument. Add the attribute to a button, link, or menu item inside
   the content (the same convention as `<a-banner>`'s `data-banner-dismiss` and
   `<a-dialog>`'s `data-dialog-close`):
 
@@ -178,8 +178,8 @@ whole toast — the Banner, its ✕, everything — many times a second, which c
 focus, text selection, or an in-progress animation inside the content. `--toast-remaining`
 updates a single inherited value the browser interpolates on the compositor: the
 content renders **once**, nothing reconciles, and it's smooth at display refresh rate
-instead of your tick interval. The toast already owns the timer and its pause, so
-exposing the value keeps one source of truth.
+instead of the application's tick interval. The toast already tracks its timer
+and pause state, so exposing the value keeps one source of truth.
 
 `--toast-remaining` is display only — the real dismissal is the toast's own timer — so
 where a browser can't animate a custom property it simply stays full. A **sticky**
@@ -230,7 +230,7 @@ Toaster.manager.add(() => <Banner tone="critical" message="Connection lost" />,
 | `toaster?` | Toaster | — | The store this region renders. Omit to bind the default store driven by
  `Toaster.manager`; pass a `createToaster()` for an isolated region. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Place each `<a-toast>` in a positional slot. This button clones the toast template
 into the toaster. `data-toast-dismiss` requests removal; listen for `dismiss` and

package/docs/components/tooltip.md

@@ -127,7 +127,7 @@ shows.
  ~`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 behaviour, which fades by distance as the cursor leaves. |
+ 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
@@ -144,7 +144,7 @@ shows.
 | `truncatedSelector?` | string | — | CSS selector (resolved within the anchor) for the element whose overflow
  decides whether a `truncatedOnly` tooltip shows. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+Use the web component directly when you are not using React or Preact and a native control does not fit.
 
 Place `<a-tooltip>` inside the element it describes.
 

package/docs/credits.md

@@ -1,9 +1,5 @@
 # Credits
 
-## Consumers
-
-Anta is the design system behind Antithesis, its primary and main consumer.
-
 ## Maintainers
 
 - Vlad Korobov — designer, engineer, manager

package/docs/index.md

@@ -6,7 +6,7 @@ Anta is designed for a clean DOM. Prefer the props and attributes exposed by eac
 
 - [Overview](./overview.md)
 - [Comparison](./comparison.md)
-- [Install & Config](./install-config.md)
+- [Install and configure](./install-config.md)
 - [Normalization](./normalization.md)
 - [Colors](./colors.md)
 - [Theming](./theming.md)

package/docs/install-config.md

@@ -1,4 +1,4 @@
-# Install & Config
+# Install and configure
 
 ## Installation
 
@@ -108,8 +108,8 @@ Choose the entry point for your runtime:
 - **Astro or Next.js:** a client-only script. In Astro, use
   `<script>import '@antadesign/anta/elements'</script>`; in Next.js, import it
   from a `'use client'` file.
-- **Worker-rendered UI:** the UI-thread bootstrap that owns the DOM. A Worker
-  has no `HTMLElement`.
+- **Worker-rendered UI:** code that runs on the UI thread and initializes the
+  DOM. A Worker has no `HTMLElement`.
 
 ## Framework setup
 
@@ -203,18 +203,18 @@ Add the `dark` class to any ancestor element:
 
 Anta is designed for a customized TT Interphases Pro, but ships no font binaries. Components use `--sans-serif` and `--monospace` with system fallbacks. `tokens.css` sets a 15px root size (`1rem = 15px`).
 
-To use the Antithesis fonts, register your own `@font-face` declarations and override the variables:
+To use your own fonts, register `@font-face` declarations and override the variables:
 
 ```css
 @font-face {
-  font-family: "Antithesis sans";
+  font-family: "App Sans";
   src: url("/path/to/your/sans.woff2") format("woff2");
   /* ... */
 }
 
 :root {
-  --sans-serif: "Antithesis sans", sans-serif;
-  --monospace: "Antithesis mono", monospace;
+  --sans-serif: "App Sans", sans-serif;
+  --monospace: ui-monospace, monospace;
 }
 ```
 

package/docs/normalization.md

@@ -5,8 +5,8 @@ HTML (`<h2>`, `<ul>`, `<a>`, `<table>`…) renders in the same visual language a
 components — no per-page restyling to make prose match a `<Title>` or a `<Table>`.
 
 It's a **separate import**, and every rule lives in a single cascade layer
-(`@layer anta`), so it's easy to layer your own reset around it or override any
-piece. If you'd rather bring your own reset, just don't import this one.
+(`@layer anta`), so it is easy to override individual rules or use a different
+reset. Omit this import when another reset provides the baseline.
 
 ```js
 import '@antadesign/anta/tokens.css'   // design tokens
@@ -37,7 +37,7 @@ This is **not** a neutral normalize — these defaults make raw markup match the
 - **Lists** (`ul` / `ol`): `3ch` left padding so markers hug the text; a small bottom margin between items; markers toned to `--text-5`.
 - `menu` is stripped to a clean semantic container (no disc markers / default padding).
 - **Links** get `--link-color` with a hairline underline (75% alpha, `0.5px`); hover only thickens it to `1px` (no color repaint). Anchor-buttons (`<a role="button">`) are excluded so they keep button styling.
-- `::selection` → the focus-ring colour, tuned per theme (20% alpha in light, 30% in dark).
+- `::selection` → the focus-ring color, tuned per theme (20% alpha in light, 30% in dark).
 - **Tables**: `border-collapse`, `tabular-nums`, and a polite cell baseline; opt into a framed look with `<table data-bordered>` (outer frame + column dividers + rounded corners).
 
 Everything above is defined in `src/reset.css`, inside `@layer anta` — read that file
@@ -77,10 +77,9 @@ Write the rule unlayered (or in a layer after `anta`) — targeting a **specific
 h2 { letter-spacing: -0.01em; }
 ```
 
-### Bring your own reset
+### Use a different reset
 
-Because `reset.css` is a separate import, you can simply **not import it** and let your
-own reset govern typography — keep the tokens and elements:
+Because `reset.css` is a separate import, omit it when your own reset governs typography. Keep the tokens and elements:
 
 ```js
 import '@antadesign/anta/tokens.css'   // keep — tokens
@@ -90,9 +89,7 @@ import '@antadesign/anta/elements'      // keep — components
 
 **One dependency to keep:** Anta's elements don't set their own `box-sizing` — they
 assume the global `* { box-sizing: border-box }` that this reset provides. Every common
-reset (normalize.css, Tailwind's preflight, etc.) sets it too, so swapping resets is
-normally seamless; but if yours doesn't, keep that one rule or component padding,
-`max-width`, and icon-button sizing will be slightly off.
+reset (normalize.css, Tailwind's preflight, and others) sets it too. If yours does not, keep that rule or component padding, `max-width`, and icon-button sizing will be slightly off.
 
 Or import both and override only the pieces you want (unlayered, or in a later layer).
 

package/docs/overview.md

@@ -1,6 +1,6 @@
 # Overview
 
-Anta is Antithesis's design system. It combines global CSS tokens,
+Anta is an opinionated design system. It combines global CSS tokens,
 framework-agnostic declarative web components, and JSX wrappers for dynamic
 state and conditional composition.
 

package/docs/packages/stickers.md

@@ -45,7 +45,7 @@ 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. |
 
-Use this when you are not using the React or Preact wrapper and a native HTML control does not fit: construct the equivalent Anta web component from the elements below.
+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
 `--sticker-size`. The animated element takes its generated Lottie JSON through

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",