@antadesign/anta 0.3.19 → 0.3.20

package/dist/general_types.d.ts

@@ -151,7 +151,7 @@ export interface AProgressAttributes extends BaseAttributes {
     value?: number | string | false;
     /** Maximum value. Defaults to 100. */
     max?: number | string;
-    /** Colour variant, or any literal CSS colour for a custom tone (derived in
+    /** Color variant, or any literal CSS color for a custom tone (derived in
      *  oklch). Named tones track light/dark automatically. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `medium` is the default. */
@@ -435,12 +435,12 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark colour in every state — checked fill *and* unselected box border — or any
+    /** Mark color in every state — checked fill *and* unselected box border — or any
      *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
      *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
-     *  stay neutral — recolour them in plain CSS via the `--text-N-{tone}` tokens. */
+     *  stay neutral — recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the checked mark only — the empty box stays
+    /** Like `tone`, but colored onto the checked mark only — the empty box stays
      *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
      *  off-state border and `tone-selected` the checked fill. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
@@ -489,9 +489,9 @@ export interface ACheckboxAttributes extends BaseAttributes {
  * wrapper supplies both.
  */
 export interface ASwitchAttributes extends BaseAttributes {
-    /** Track and thumb colour. A tinted tone also colours the unchecked chrome. */
+    /** Track and thumb color. A tinted tone also colors the unchecked chrome. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Checked-track-only colour. The unchecked track and thumb stay neutral. */
+    /** Checked-track-only color. The unchecked track and thumb stay neutral. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 26×16px, `medium` (default) = 30×18px, `large` = 34×20px. */
     size?: 'small' | 'medium' | 'large';
@@ -547,7 +547,7 @@ export interface AInputAttributes extends BaseAttributes {
      *  wrapper) the glyph. Only `critical` carries validity weight (`aria-invalid`
      *  + `:state(invalid)`); the others are advisory. Omit for the neutral field. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Custom accent colour (any literal CSS colour) — tints the resting + hover
+    /** Custom accent color (any literal CSS color) — tints the resting + hover
      *  border via an oklch derivation. `status` overrides it for validation. */
     tone?: string;
     /** Disabled state. Presence-based. */
@@ -614,9 +614,9 @@ export interface ASliderAttributes extends BaseAttributes {
     name?: string;
     /** Disables pointer and keyboard interaction. Presence-based. */
     disabled?: boolean | '';
-    /** Colour of the filled rail. Named tones or a literal CSS colour. */
+    /** Color of the filled rail. Named tones or a literal CSS color. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Colour of the thumb stroke. Named tones or a literal CSS colour. */
+    /** Color of the thumb stroke. Named tones or a literal CSS color. */
     'thumb-tone'?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=24px, medium=28px, large=32px tall. */
     size?: 'small' | 'medium' | 'large';
@@ -624,7 +624,7 @@ export interface ASliderAttributes extends BaseAttributes {
     'track-size'?: string;
     /** Diameter of the thumb as a CSS length, such as `'20px'`. */
     'thumb-size'?: string;
-    /** Fill the thumb with its resolved border colour. Presence-based. */
+    /** Fill the thumb with its resolved border color. Presence-based. */
     'thumb-fill'?: boolean | '';
     /** Fully round the rail and thumb, or set both to a custom radius. */
     round?: boolean | number | string;
@@ -668,7 +668,7 @@ export interface AInputTimeAttributes extends BaseAttributes {
     max?: string;
     /** Validation/feedback tone. Only `critical` carries validity weight. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
-    /** Custom accent colour (any literal CSS colour) — tints the resting + hover
+    /** Custom accent color (any literal CSS color) — tints the resting + hover
      *  border via an oklch derivation; `status` overrides for validation. */
     tone?: string;
     /** Disabled state. Presence-based. */
@@ -940,12 +940,12 @@ export interface ACopyAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark colour in every state — selected ring fill + dot *and* unselected ring
+    /** Mark color in every state — selected ring fill + dot *and* unselected ring
      *  border — or any literal CSS color for a one-off custom tone. Named tones track
      *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
-     *  recolour them in plain CSS via the `--text-N-{tone}` tokens. */
+     *  recolor them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the selected mark only — an unselected ring stays
+    /** Like `tone`, but colored onto the selected mark only — an unselected ring stays
      *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
      *  off-state border and `tone-selected` the selected fill. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
@@ -991,17 +991,17 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Colours every child's ring fill + dot *and*
-     *  unselected border. The option text stays neutral — recolour it in plain CSS via
+     *  color for a one-off custom tone. Colors every child's ring fill + dot *and*
+     *  unselected border. The option text stays neutral — recolor it in plain CSS via
      *  the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Like `tone`, but coloured onto the selected option only — every unselected ring
+    /** Like `tone`, but colored onto the selected option only — every unselected ring
      *  stays neutral grey. Cascaded to children that don't set their own. */
     'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
-     *  `status`. Recolours `<a-radio-group-hint>`; omit for the neutral default. */
+     *  `status`. Recolors `<a-radio-group-hint>`; omit for the neutral default. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Disable the whole group. Presence-based. */
     disabled?: boolean | '';
@@ -1046,9 +1046,9 @@ export interface ARadioGroupAttributes extends BaseAttributes {
 export interface ATabAttributes extends BaseAttributes {
     /** This tab's identity / the value reported when it's selected. */
     value?: string;
-    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colours this tab's
+    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colors this tab's
      *  label + icons and, when selected, its indicator. Named tones tone the sliding
-     *  indicator too; a custom literal colour tones the indicator only in `noslide`.
+     *  indicator too; a custom literal color tones the indicator only in `noslide`.
      *  Custom tones also set `--tabs-tone-source` on the tab (via the wrapper's style). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Selected state — connect-time seed for the standalone render path (no tablist).
@@ -1178,7 +1178,7 @@ export interface ACardAttributes extends BaseAttributes {
     size?: 'small' | 'medium' | 'large';
     /** Which edge the full-bleed `media` slot sits on. `top` is the default. */
     'media-position'?: 'top' | 'bottom' | 'left' | 'right';
-    /** Selected / chosen state — an inset ring in the tone colour. Presence-based
+    /** Selected / chosen state — an inset ring in the tone color. Presence-based
      *  (`''` on, omit off). */
     selected?: boolean | '';
     /** Loading state — skeleton pulse, `aria-busy`, and (in link mode) navigation is
@@ -1222,7 +1222,7 @@ export interface ABannerAttributes extends BaseAttributes {
      *  `'closed'` starts it dismissed. */
     'default-state'?: 'open' | 'closed';
     /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
-     *  re-point the surface + text + border colour (used if you opt into a border); a
+     *  re-point the surface + text + border color (used if you opt into a border); a
      *  custom color keeps its hue with lightness/chroma pinned. `'neutral'` is the
      *  default (same as omitting it). */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * @antadesign/anta — Antithesis Design System
+ * @antadesign/anta — Anta design system
  *
  * Portable UI components with web component internals and JSX wrappers.
  * Works with React, Preact (via compat or `configure()`), or any custom JSX runtime.
@@ -43,7 +43,7 @@ export type { SwitchProps, SwitchChangeAttrs } from './components/Switch';
 export { Menu } from './components/Menu';
 export type { MenuProps } from './components/Menu';
 export { MenuItem } from './components/MenuItem';
-export type { MenuItemProps } from './components/MenuItem';
+export type { MenuItemProps, MenuItemCommonProps, MenuItemLinkMode, MenuItemActionMode, } from './components/MenuItem';
 export { MenuItemCopy } from './components/MenuItemCopy';
 export type { MenuItemCopyProps } from './components/MenuItemCopy';
 export { MenuSeparator } from './components/MenuSeparator';
@@ -71,7 +71,7 @@ export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
 export { Select, optionsWithSelection } from './components/Select';
 export type { SelectProps, SelectCommonProps, OptionValue, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } from './components/Select';
 export { SelectFaceted } from './components/SelectFaceted';
-export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
+export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, FacetFilter, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
 export type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';

package/docs/accessibility.md

@@ -1,19 +1,19 @@
 # Accessibility
 
-A few pieces of guidance for designers and engineers using Anta.
+A few guidelines for designers and engineers using Anta.
 
 ## Colors
 
-The matrix below renders every text level on every background for the selected tone, in the current theme. Each cell shows the WCAG 2 contrast ratio (with AA / AAA pass marks for the chosen size and weight) and the APCA Lc value. The toggles change rendering only — the underlying ratios are properties of the color pair and don't shift with size or weight; what shifts is the threshold used for pass/fail. The vision tabs apply CVD or other-condition simulations via SVG filters and CSS masks; numbers reflect normal-vision math.
+The matrix renders every text level on every background for the selected tone and theme. Each cell shows the WCAG 2 contrast ratio, AA or AAA result for the selected size and weight, and APCA Lc value. The controls change rendering and pass thresholds, not the color-pair ratios. Vision tabs apply SVG-filter and CSS-mask simulations; the numbers use normal-vision math.
 
 This table uses the browser's system colors directly. It changes with the active
 forced-colors palette, so it shows the values a component can use in that mode.
 
 ## Color is not a unique communication channel
 
-Communicating something with just a color is an accessibility problem — the message is lost under color blindness, low contrast, low brightness, monochrome printing, sun glare, and OS dark/light flips.
+A color-only message fails when a reader cannot distinguish its color. This includes color blindness, low contrast, low brightness, monochrome printing, glare, and theme changes.
 
-Anta's `tone` prop on `Progress` and `Text` (and tinted backgrounds, borders, etc.) is a **secondary** signal. Pair it with words and, when possible, with shape distinctions (icons that are visually distinct, not just colored differently — e.g. checkmark vs. cross, not green-circle vs. red-circle).
+`tone` on `Progress`, `Text`, backgrounds, and borders is a secondary signal. Pair it with text and, where useful, a distinct icon shape such as a checkmark or cross.
 
 The simulator above makes it easy to check a candidate combination across the most common color-vision deficiencies and a handful of other vision conditions.
 

package/docs/changelog.md

@@ -3,6 +3,16 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.20 — August 4, 2026
+
+### Changed
+
+- Package documentation and source comments use clearer, more concise language.
+
+### Fixed
+
+- Expander titles can be selected without toggling the disclosure.
+
 ## 0.3.19 — August 3, 2026
 
 ### Added
@@ -13,7 +23,7 @@ changes are not listed.
 ### Changed
 
 - Native `data-anta` select popups now follow Menu styling for their surface,
-  option sizing, colours, and 1px item spacing when customizable selects are
+  option sizing, colors, and 1px item spacing when customizable selects are
   supported.
 
 ### Fixed
@@ -81,7 +91,7 @@ changes are not listed.
 
 ### Changed
 
-- In forced-colors mode, Anta controls and surfaces use system colours and
+- In forced-colors mode, Anta controls and surfaces use system colors and
   visible borders for their interactive, selected, and disabled states,
   including icons, inputs, buttons, tags, choice controls, tabs, Expanders,
   Cards, Dialogs, Banners, Progress, and Tooltips.
@@ -90,7 +100,7 @@ changes are not listed.
 ### Fixed
 
 - No-icon `ButtonCopy` feedback now keeps a wrapping label's width and line breaks.
-- Native HTML radio labels use Anta's 8px control gap and vertically centred
+- Native HTML radio labels use Anta's 8px control gap and vertically centered
   alignment.
 - `InputAutocomplete` now commits the highlighted suggestion when users press
   Arrow keys then Enter.
@@ -133,7 +143,7 @@ changes are not listed.
 ### Added
 
 - Seed tokens for the neutral, brand, info, success, warning, and critical
-  colour scales.
+  color scales.
 - `theme-anta.css`, an opt-in stylesheet that restores the former palette.
 - Default styling for raw `dfn` elements.
 
@@ -160,7 +170,7 @@ changes are not listed.
 
 ### Breaking
 
-- Copy behaviour moved from `Button` and `MenuItem` to `a-copy`. Replace
+- Copy behavior moved from `Button` and `MenuItem` to `a-copy`. Replace
   `<Button copy={value}>` with `<ButtonCopy copy={value}>`, or compose
   `<a-copy>` inside a control.
 
@@ -232,7 +242,7 @@ changes are not listed.
 
 ### Changed
 
-- `Text` and `Title` accept custom CSS colours as `tone` values.
+- `Text` and `Title` accept custom CSS colors as `tone` values.
 
 ### Fixed
 
@@ -315,7 +325,7 @@ changes are not listed.
 ### Added
 
 - `InputDate`, `Calendar`, and `Select`.
-- Searchable Menu combobox behaviour, selectable MenuItem rows, and Menu header
+- Searchable Menu combobox behavior, selectable MenuItem rows, and Menu header
   and footer slots.
 - `round` across core components, `Tabs.options`, `toneSelected` for selection
   controls, `Input type="search"`, and more icon shapes.
@@ -334,7 +344,7 @@ changes are not listed.
 
 ### Fixed
 
-- Menus, Select, and Inputs retain keyboard and focus behaviour in iframes,
+- Menus, Select, and Inputs retain keyboard and focus behavior in iframes,
   flyouts, and grouped rows.
 - Empty tooltips do not open. Buttons keep their configured size with non-text
   content.
@@ -354,7 +364,7 @@ changes are not listed.
 ### Changed
 
 - Checkbox and RadioGroup `tone` styles their mark. `toneText` controls label
-  colour.
+  color.
 - Components use tabular figures by default. Button exposes `role="button"`.
 
 ### Fixed
@@ -413,8 +423,8 @@ changes are not listed.
 ### Breaking
 
 - Rename `list-detail-view` to `list-collapse`.
-- Tooltips are pinned by default. Remove `static`; pass `follow` for
-  cursor-following behaviour.
+- Tooltips are pinned by default. Remove `static`; pass `follow` to position a
+  tooltip next to the pointer.
 
 ### Added
 
@@ -495,11 +505,11 @@ changes are not listed.
 
 - Button defaults to `tone="neutral"`. Pass `tone="brand"` to preserve the
   former default.
-- `tone="custom"` is removed. Pass a CSS colour directly to `tone`.
+- `tone="custom"` is removed. Pass a CSS color directly to `tone`.
 
 ### Changed
 
-- Button accepts custom CSS colour tones and holds its width in flex layouts.
+- Button accepts custom CSS color tones and holds its width in flex layouts.
 
 ## 0.1.1-dev.4 — May 6, 2026
 

package/docs/comparison.md

@@ -25,4 +25,4 @@ stable releases in this snapshot.
 
 Rows group components by job, so Dialog, Modal, and Drawer share one mark.
 Anta covers the common controls but remains narrower than full suites. Base UI
-intentionally focuses on behaviour rather than styled components.
+intentionally focuses on behavior rather than styled components.

package/docs/components/banner.md

@@ -14,7 +14,7 @@ same opt-in as `Progress` ([Styling](#styling)).
 ## Tones
 
 Pick a semantic `tone` to tint the surface and text together — and the ✕ adopts the
-same tone (it also sets the border colour, used if you opt into a border). The set
+same tone (it also sets the border color, used if you opt into a border). The set
 matches `Expander` / `Tag`: `neutral` (the default) plus `brand`, `info`, `success`,
 `warning`, and `critical`. Color comes from the theme tokens, so every tone tracks
 light and dark mode automatically.
@@ -49,7 +49,7 @@ pass a `number` (px) or a CSS length string for a custom radius.
 <Banner round={12} tone="success" message="A custom 12px radius." />
 ```
 
-## Message & content
+## Message and content
 
 `message` is the leading content — a string (rendered at the banner type scale) or
 any node. `children` sit between the message and the actions, for a chip, a link,
@@ -150,17 +150,17 @@ result through `dismissed` (below).
 
 ## Controlled vs uncontrolled
 
-Dismissal follows Anta's shared **state contract**. Leave it *uncontrolled* (seed
-with `defaultDismissed`) and the banner owns its visibility — the ✕ self-dismisses.
-Pass `dismissed` + `onDismiss` to *control* it: the banner follows `dismissed` only,
-and clicking the ✕ *requests* a dismissal you apply to accept or ignore to reject.
-The wrapper takes booleans, the element takes a `state` string enum (closed =
-dismissed), and the wrapper maps between them:
+Dismissal follows Anta's shared **state contract**. For uncontrolled use, pass
+`defaultDismissed`; clicking ✕ then dismisses the banner. For controlled use,
+pass `dismissed` and `onDismiss`. The banner follows `dismissed` and reports a
+dismissal request when ✕ is clicked. Update `dismissed` to accept the request,
+or leave it unchanged to reject it. The wrapper uses booleans, while the element
+uses a `state` string (`closed` means dismissed):
 
 | | `<Banner>` (JSX) | `<a-banner>` (element) |
 |---|---|---|
-| **Uncontrolled** (element owns it) | `defaultDismissed` | `default-state="open" \| "closed"` |
-| **Controlled** (you own it) | `dismissed` + `onDismiss` | `state="open" \| "closed"` + `statechange` |
+| **Uncontrolled** | `defaultDismissed` | `default-state="open" \| "closed"` |
+| **Controlled** | `dismissed` + `onDismiss` | `state="open" \| "closed"` + `statechange` |
 | **Change signal** | `onDismiss()`, fired on a dismiss request | `statechange`, a cancelable `CustomEvent<{ next, prev }>` of `'open'` / `'closed'` |
 
 Controlling it is how you persist a dismissal (write it to storage) or re-show the
@@ -195,7 +195,7 @@ through `dismissed` instead.
 | `children?` | ReactNode | — | Free content placed BETWEEN the message and the actions. |
 | `closable?` | boolean | true | Whether the trailing ✕ dismiss button is present. `false` removes it — drive
  dismissal yourself (a controlled `dismissed`, or your own control) instead.
- It doesn't make the banner un-dismissible, it just drops the built-in ✕. |
+ It removes the built-in ✕ without making the banner un-dismissible. |
 | `defaultDismissed?` | boolean | — | Initial dismissed state for the uncontrolled case (read once on mount). |
 | `dismissed?` | boolean | — | Controlled dismissed state. When provided, the consumer owns visibility: the
  banner follows this prop only, and clicking ✕ *requests* dismissal (reject by
@@ -205,7 +205,7 @@ through `dismissed` instead.
 | `message?` | ReactNode | — | Leading message — a string (rendered at the banner type scale) or any node.
  Centered in the bar, followed by `children` and then `actions`. |
 | `onDismiss?` | () => void | — | Fired when the user dismisses the banner (clicks ✕). Uncontrolled, the banner
- hides itself and this just notifies. Controlled, it's how you accept the
+ hides itself and this notifies. Controlled, use it to accept the
  request — set `dismissed` to `true` (or ignore to reject); pair it with
  `dismissed`, or the banner can't be closed. |
 | `role?` | string | 'status' | ARIA role for the strip host. `'status'` (a polite live region, so the notice
@@ -216,10 +216,10 @@ through `dismissed` instead.
  by default. Pass a `number` (px) or a CSS length string for a custom radius. |
 | `tone?` | 'neutral' \| 'brand' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for
  a one-off custom tone. Named tones re-point the surface, text, and border
- colour (used if you opt into a border); a custom color keeps its hue while
+ color (used if you opt into a border); a custom color keeps its hue while
  lightness/chroma are pinned. `'neutral'` (the default) is the same as omitting it. |
 
-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.
 
 Slots hold the message, actions, and close control. A close button dispatches
 `dismissrequest` through `data-custom-event`.
@@ -236,7 +236,7 @@ Slots hold the message, actions, and close control. A close button dispatches
 ```
 
 Reach for the props first: **`tone`** sets the color (any CSS color for a custom
-tone — it derives the surface, text, and border colour in oklch), **`round`** the
+tone — it derives the surface, text, and border color in oklch), **`round`** the
 corners. The one knob worth keeping is **`--banner-tone-source`** — the color a
 custom `tone` derives from, so set it to drive the palette from your own variable.
 Everything else is plain CSS on the host: `min-height` for a taller bar, a
@@ -247,9 +247,9 @@ Everything else is plain CSS on the host: `min-height` for a taller bar, a
 ```
 
 **Add a border.** The banner is borderless by default, but its border style and
-colour are preset at `0` width (the `Progress` reset), so you opt in by setting only
+color are preset at `0` width (the `Progress` reset), so you opt in by setting only
 the **width** — `border-bottom-width` for a rule under the strip, `border-width` for
-a full outline. The colour is already tone-aware (`--banner-border`), so a toned
+a full outline. The color is already tone-aware (`--banner-border`), so a toned
 banner's border matches its tone with no extra work.
 
 ```tsx

package/docs/components/button.md

@@ -471,7 +471,7 @@ without taking ownership of `onClick`.
 
 ### Props
 
-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 `role="button"` and `tabindex="0"` when authoring `<a-button>` directly.
 
@@ -506,7 +506,7 @@ wrapper sets them for you). A native `<button>` also carries its own default
 <button data-anta tone="critical" priority="tertiary">Delete</button>
 ```
 
-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 whole tone × priority × state curve in oklch), **`priority`**
 the emphasis, **`size`** the dimensions. The focus ring is the global
 [`--focus-ring`](../colors.md#focus-ring).
@@ -520,7 +520,7 @@ CSS (an un-layered rule beats `@layer anta` without `!important`). Set
 `background-color` / `color` **per state**, plus full type control (size,
 line-height, letter-spacing, `font-feature-settings`), padding, radius, even a
 frosted `backdrop-filter` — no need to touch a single token. **`light-dark()`** works
-too (Anta sets `color-scheme` from its theme toggle), so colours adapt to dark mode
+too (Anta sets `color-scheme` from its theme toggle), so colors adapt to dark mode
 with no `.dark` selector. The classes below are just for the demos:
 
 ```css
@@ -537,14 +537,14 @@ a-button.checkout {
 }
 a-button.checkout:hover  { background: linear-gradient(140deg, light-dark(#3a3a42, #fff), light-dark(#161618, #cacace)); }
 a-button.checkout:active { background: linear-gradient(140deg, light-dark(#000, #ececf0), light-dark(#1a1a1c, #fff)); }
-a-button.checkout a-button-label {            /* customised label */
+a-button.checkout a-button-label {            /* customized label */
   text-transform: uppercase;
   letter-spacing: 0.14em;
   font-weight: 600;
 }
 
 /* Second — liquid glass: frost + translucent tint + a diagonal specular sheen,
-   a top/bottom bevel, and a soft lift. Sits on a colourful backdrop so it reads. */
+   a top/bottom bevel, and a soft lift. Sits on a colorful backdrop so it reads. */
 a-button.glass {
   color: #fff;
   background-color: rgba(255, 255, 255, 0.12);
@@ -600,4 +600,4 @@ beyond the button so it can rotate behind the label without exposing an edge.
 
 Don't reach for the resolved `--button-fg` / `--button-bg`: they're recomputed per
 state, so setting one only catches a single state — restyle per state as above, or
-use `tone` for a full custom-colour curve.
+use `tone` for a full custom-color curve.

package/docs/components/card.md

@@ -116,10 +116,9 @@ round (`999px`, clamped to the box). Omit it for the default (`--card-radius`, 8
 
 ## Header controls
 
-There's no dedicated actions slot. For a control at the top-right of the header — a
-"more" button, a tag — pass a laid-out node as the `header` and put the title and
-the control in it yourself (a flex row). You own the layout, so the title and
-control sit exactly where you place them.
+There is no dedicated actions slot. To place a control in the top-right of the
+header, pass a layout node as `header`. For example, use a flex row containing
+the title and a "more" button. That layout determines where both items appear.
 
 ```tsx
 <Card
@@ -179,7 +178,7 @@ out of it — its text is non-selectable and the whole surface navigates.
   href="/docs/ci"
   header={<><Icon shape="book-open" /> CI integration guide</>}
 >
-  Wire Antithesis into your pipeline in a few minutes.
+  Connect your CI pipeline in a few minutes.
 </Card>
 ```
 
@@ -254,7 +253,7 @@ it also blocks navigation until the load resolves.
  color keeps its hue while lightness/chroma are pinned. `'neutral'` (the
  default) is the same as omitting it. |
 
-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.
 
 Slots hold media, header, and footer content. Unslotted content is the card body.
 

package/docs/components/checkbox.md

@@ -6,7 +6,7 @@ The `Checkbox` wrapper renders an `<a-checkbox>` element that manages its own st
 
 ## Tone
 
-`tone` colours the **mark** — the checked-box fill and, for a tinted tone, the
+`tone` colors the **mark** — the checked-box fill and, for a tinted tone, the
 unselected box border (a light shade of the fill that darkens on hover and active,
 like the neutral border; `neutral` keeps a grey border). The label and hint stay
 neutral. Six named tones (`neutral` default), or pass any CSS color for a custom tone.
@@ -29,7 +29,7 @@ read as a validation error. Same value set as `tone`.
 <Checkbox defaultChecked toneSelected="critical">Checked mark tinted</Checkbox>
 ```
 
-## Colouring the text
+## Coloring the text
 
 There's no text-tone prop. To tint the **label**, set `color` on the checkbox with a
 theme-aware `--text-N-{tone}` token (the label inherits it); for the **hint**, add a
@@ -38,7 +38,7 @@ to tint the whole control.
 
 ```css
 /* Mark via the prop, text via a plain color rule — the label inherits the host
-   colour, the hint is targeted directly. The class is just for the demo — swap
+   color, the hint is targeted directly. The class is just for the demo — swap
    your own selector. */
 a-checkbox.toned-text { color: var(--text-1-critical); }
 a-checkbox.toned-text a-checkbox-hint { color: var(--text-3-critical); }
@@ -56,7 +56,7 @@ Three sizes scale the box **and** the label + hint type together: `small`
 <Checkbox defaultChecked size="large">Large</Checkbox>
 ```
 
-## Label & hint
+## Label and hint
 
 Pass the label as `children` or the `label` prop. Add a `hint` for a secondary line beneath. For a label-less checkbox (e.g. a table "select all"), pass `aria-label`.
 
@@ -177,7 +177,7 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
  uncontrolled checkbox. `'indeterminate'` shows the minus glyph and takes
  visual precedence; clicking it requests `true`. |
 | `defaultChecked?` | CheckboxValue | false | Initial checked state for an uncontrolled checkbox. Read once; later
- changes ignored (the element then owns the state). |
+ changes are ignored and the element updates its state after interaction. |
 | `disabled?` | boolean | — | Disable the checkbox (no interaction, dropped from the tab order). |
 | `hint?` | ReactNode | — | Secondary text rendered under the label — explanatory copy, like
  Input's hint. Not part of the accessible name. |
@@ -196,25 +196,24 @@ Space toggles the checkbox. Follows the [WAI-ARIA checkbox pattern](https://www.
  `detail` carries `{ next, prev }`. In controlled mode the element never
  self-applies — answer by updating `checked`, reject by doing nothing. |
 | `onValueChange?` | (event, attrs) => void | — | Like `onChange`, but with a `{ checked, indeterminate, name, value }` snapshot
- as the 2nd argument — the ergonomic "just give me the new value" callback
- (mirrors `Input`'s `onValueChange`). |
+ as the second argument, matching `Input`'s `onValueChange`. |
 | `round?` | boolean \| number \| string | — | Round the checkbox mark to a circle (`border-radius: 999px` on the box). Pass
  a `number` (px) or a CSS length string for a rounded-square mark instead. |
 | `size?` | 'small' \| 'medium' \| 'large' | 'medium' | Size variant. small=14px, medium=16px, large=18px box. |
-| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Colour of the **mark** in every state — the checked-box fill *and* the
+| `tone?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Color of the **mark** in every state — the checked-box fill *and* the
  unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
  `'rebeccapurple'`) for a one-off custom tone. Named tones track light/dark mode
- automatically; a custom colour keeps its hue + chroma and pins lightness to the
+ automatically; a custom color keeps its hue + chroma and pins lightness to the
  fill curve. Use `toneSelected` instead to tone only the checked mark and leave
- the empty box neutral. The label + hint stay neutral — recolour them in plain
+ the empty box neutral. The label + hint stay neutral — recolor them in plain
  CSS via the theme-aware `--text-N-{tone}` tokens. |
-| `toneSelected?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Like `tone`, but coloured onto the **checked mark only** — the empty box stays
+| `toneSelected?` | 'brand' \| 'neutral' \| 'info' \| 'success' \| 'warning' \| 'critical' \| (string & {}) | 'neutral' | Like `tone`, but colored onto the **checked mark only** — the empty box stays
  neutral grey until it's checked. Prefer this over `tone` when a resting tinted
  border would read as a validation state. Same value set as `tone`; if both are
  set, `tone` governs the off-state border and `toneSelected` the checked fill. |
 | `value?` | string | "on" | Value submitted with the form when checked — like a native checkbox. |
 
-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.
 
 The focusable host carries the state. Label and hint are light-DOM children.
 
@@ -242,8 +241,8 @@ treatments.
 </div>
 ```
 
-Reach for the props first: **`tone`** colours the mark in every state,
-**`toneSelected`** only the checked mark (any CSS colour for a custom tone — it
+Reach for the props first: **`tone`** colors the mark in every state,
+**`toneSelected`** only the checked mark (any CSS color for a custom tone — it
 derives the full rest/hover/active curve in oklch), **`size`** the dimensions + type.
 To tint the label + hint, add a `color` rule (on the host for the label, on
 `a-checkbox-hint` for the hint) with the `--text-N-{tone}` tokens — there's no
@@ -251,7 +250,7 @@ text-tone prop. The focus ring is the global
 [`--focus-ring`](../colors.md#focus-ring).
 
 ```tsx
-<Checkbox tone="#e0457b" defaultChecked>Custom colour</Checkbox>
+<Checkbox tone="#e0457b" defaultChecked>Custom color</Checkbox>
 ```
 
 For anything else, `<a-checkbox>` is light-DOM — the **box is `::before`**, the
@@ -262,7 +261,7 @@ without `!important`). The classes below are just for the demos:
 
 ```css
 /* Outlined — an unfilled box: the checked box keeps its background and paints the
-   border + checkmark in the tone colour (light-dark() tunes both themes at once). */
+   border + checkmark in the tone color (light-dark() tunes both themes at once). */
 a-checkbox.outlined:state(checked)::before {
   background: var(--checkbox-bg);
   border-color: light-dark(#5f4bc3, #7460d7);
@@ -272,7 +271,7 @@ a-checkbox.outlined:state(checked)::after {
 }
 
 /* Customized — bold label, bigger circular box, bigger checkmark.
-   Colours use light-dark() so they're tuned for both themes at once. */
+   Colors use light-dark() so they're tuned for both themes at once. */
 a-checkbox.customized { font-weight: 700; }
 a-checkbox.customized::before,
 a-checkbox.customized::after { inline-size: 24px; block-size: 24px; margin-block-start: -2px; }
@@ -284,7 +283,7 @@ a-checkbox.customized:state(checked)::before {
 }
 
 /* Beautified — a full white heart mark swapped in via --checkbox-mask-check
-   (centred by the default mask-position), sized down a touch, on a pink fill */
+   (centered by the default mask-position), sized down a touch, on a pink fill */
 a-checkbox.beautified {
   --checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E");
 }