@antadesign/anta 0.3.25 → 0.3.27

package/dist/general_types.d.ts

@@ -1,4 +1,6 @@
 import type { IconShape } from './elements/a-icon.shapes';
+import type { BoxContextChange, BoxDisplay, BoxMeasurementChange } from './box-types';
+import type { CaptureInputModifier, CapturePanInput, CapturePointerInput, CaptureWheelActivation, CaptureWheelInput } from './capture-types';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
     /** CSS class on the component's root element (merged with the component's own
@@ -267,6 +269,74 @@ export interface ATextAttributes extends BaseAttributes {
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
+/** Attributes for the opt-in light-DOM capture surface. */
+export interface ACaptureAttributes extends BaseAttributes {
+    /** Space-separated accepted wheel directions. Bare means all; `none` preserves settling while declining input. */
+    'wheel-capture'?: string;
+    'wheel-activation'?: CaptureWheelActivation;
+    'wheel-modifier'?: CaptureInputModifier;
+    'wheel-delay'?: number | string;
+    'wheel-tolerance'?: number | string;
+    'wheel-reset-on-move'?: boolean | '';
+    /** Space-separated pointer types. Bare means mouse, pen, and touch. */
+    'pointer-capture'?: string;
+    'pointer-buttons'?: string;
+    'pointer-threshold'?: number | string;
+    'pointer-modifier'?: CaptureInputModifier;
+    'pointer-include-interactive'?: boolean | '';
+    /** Enable custom panning on the selected axes. */
+    pan?: '' | 'x' | 'y' | 'both';
+    'pan-pointer-types'?: string;
+    'pan-threshold'?: number | string;
+    'pan-directions'?: string;
+    'pan-inertia'?: boolean | '';
+    'pan-time-constant'?: number | string;
+    'pan-min-velocity'?: number | string;
+    onwheelinput?: (event: CustomEvent<CaptureWheelInput> | {
+        nativeEvent: CustomEvent<CaptureWheelInput>;
+    }) => void;
+    onpointerinput?: (event: CustomEvent<CapturePointerInput> | {
+        nativeEvent: CustomEvent<CapturePointerInput>;
+    }) => void;
+    onpaninput?: (event: CustomEvent<CapturePanInput> | {
+        nativeEvent: CustomEvent<CapturePanInput>;
+    }) => void;
+}
+/** Attributes for the light-DOM `<a-box>` observing container. For the JSX
+ * wrapper with cross-renderer event unwrapping, use `Box` from
+ * `@antadesign/anta`. */
+export interface ABoxAttributes extends BaseAttributes {
+    /** Host display mode. Omit for the default block box. */
+    display?: BoxDisplay;
+    /** Fully-round corners (`border-radius: 999px`), or a custom radius via a
+     *  length value (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Gap between children, as a length value (`gap="8px"`). Engines without
+     *  typed `attr()` read it from `--box-gap` in the host's inline style
+     *  instead, which is what the JSX wrapper always sets. */
+    gap?: boolean | '' | number | string;
+    /** Masks every edge that currently hides clipped content. */
+    fade?: boolean | '';
+    /** What the box watches. `size` reports geometry and overflow through
+     *  `measurechange` and the CSS states; `context` reports the rendering
+     *  environment through `contextchange`; `all`, or a bare `observe`, does both.
+     *  A box without it (and without `fade`) runs no observers, so a listener
+     *  alone reports nothing. The JSX wrapper sets it from `observe` and from the
+     *  handlers you pass. */
+    observe?: 'size' | 'context' | 'all' | '';
+    /** Depth of that mask, as a length value (`fade-size="2rem"`). Engines
+     *  without typed `attr()` read it from `--box-fade-size` in the host's
+     *  inline style instead, which is what the JSX wrapper always sets. */
+    'fade-size'?: number | string;
+    /** Native event fired when geometry or overflow changes. */
+    onmeasurechange?: (event: CustomEvent<BoxMeasurementChange> | {
+        nativeEvent: CustomEvent<BoxMeasurementChange>;
+    }) => void;
+    /** Native event fired when rendering context or focus-within changes. */
+    oncontextchange?: (event: CustomEvent<BoxContextChange> | {
+        nativeEvent: CustomEvent<BoxContextChange>;
+    }) => void;
+}
 /**
  * Attributes for the `<a-title>` styled tag.
  *

package/dist/index.d.ts

@@ -26,6 +26,12 @@ export { Loader } from './components/Loader';
 export type { LoaderProps } from './components/Loader';
 export { Text } from './components/Text';
 export type { TextProps, ExpandMode } from './components/Text';
+export { Box } from './components/Box';
+export type { BoxProps } from './components/Box';
+export { Capture } from './components/Capture';
+export type { CaptureProps } from './components/Capture';
+export type { CaptureInputCancelReason, CaptureInputDirection, CaptureInputDirections, CaptureInputGeometry, CaptureInputModifier, CapturePan, CapturePanInertia, CapturePanInput, CapturePointerActivationReason, CapturePointerCapture, CapturePointerInput, CapturePointerStart, CapturePointerType, CaptureWheelActivation, CaptureWheelActivationReason, CaptureWheelInput, CaptureWheelSettle, SerializedMouseEvent, SerializedPointerEvent, SerializedWheelEvent, } from './capture-types';
+export type { BoxChange, BoxContext, BoxContextChange, BoxDisplay, BoxFont, BoxInset, BoxMeasurement, BoxMeasurementChange, BoxMode, BoxOS, BoxBrowser, BoxPointer, } from './box-types';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';

package/dist/index.js

@@ -15,6 +15,8 @@ import {
 import { Progress } from "./components/Progress";
 import { Loader } from "./components/Loader";
 import { Text } from "./components/Text";
+import { Box } from "./components/Box";
+import { Capture } from "./components/Capture";
 import { Title } from "./components/Title";
 import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
@@ -67,10 +69,12 @@ import { configure } from "./jsx-runtime";
 export {
   Avatar,
   Banner,
+  Box,
   Breadcrumbs,
   Button,
   ButtonCopy,
   Calendar,
+  Capture,
   Card,
   Checkbox,
   DEFAULT_CONFIG,

package/dist/jsx-runtime.d.ts

@@ -44,7 +44,7 @@ export declare function useSyncExternalStore<T>(subscribe: (onChange: () => void
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
+import type { AAvatarAttributes, AProgressAttributes, ALoaderAttributes, ATextAttributes, ABoxAttributes, ACaptureAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ASwitchAttributes, ATooltipAttributes, AInputAttributes, ASliderAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, AToasterAttributes, AToastAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -60,6 +60,8 @@ export interface AntaIntrinsicElements {
     'a-progress-text': BaseAttributes;
     'a-progress-hint': BaseAttributes;
     'a-text': ATextAttributes;
+    'a-box': ABoxAttributes;
+    'a-capture': ACaptureAttributes;
     'a-title': ATitleAttributes;
     'a-tag': ATagAttributes;
     'a-tag-label': BaseAttributes;

package/docs/accessibility.md

@@ -6,9 +6,33 @@ A few guidelines for designers and engineers using Anta.
 
 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.
 
+The interactive matrix compares all five text levels with all five background levels for each tone in light and dark mode. It resolves the active CSS palette in the browser, composites transparent text over its background, and reports WCAG 2 contrast and APCA Lc.
+
+Choose the application's palette, tone, font size, and font weight before evaluating a pair. Recheck after changing a theme or seed. The [Colors reference](./colors.md) lists the source declarations for both shipped palettes.
+
+Vision simulations change the displayed sample; contrast results continue to use normal-vision colors. Use simulations alongside text labels and other non-color signals.
+
+Computed contrast cells depend on the selected palette and settings. Evaluate the actual application colors with the [interactive accessibility matrix](https://anta.design/accessibility/).
+
+## System colors
+
 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.
 
+| System colors | Use |
+| --- | --- |
+| `Canvas`, `CanvasText` | Document background and text |
+| `ButtonFace`, `ButtonText`, `ButtonBorder` | Control surface, text, and edge |
+| `Field`, `FieldText` | Input field background and text |
+| `Highlight`, `HighlightText` | Selected text |
+| `SelectedItem`, `SelectedItemText` | Selected control or list item |
+| `Mark`, `MarkText` | Marked text, such as <mark> |
+| `AccentColor`, `AccentColorText` | Accented control |
+| `LinkText` | Unvisited link text |
+| `VisitedText` | Visited link text |
+| `ActiveText` | Active link text |
+| `GrayText` | Disabled text |
+
 ## Color is not a unique communication channel
 
 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.

package/docs/changelog.md

@@ -3,6 +3,48 @@
 This page tracks changes that ship in `@antadesign/anta`. Documentation-only
 changes are not listed.
 
+## 0.3.27 — September 6, 2026
+
+### Added
+
+- Added `Capture` / `<a-capture>`, a new input container for custom wheel,
+  pointer, and pan gestures. Each capability is opt-in and emits serialized
+  input with coordinates relative to the component.
+
+### Fixed
+
+- Packaged Markdown includes comparison tables, color and system-color references,
+  icon and sticker catalogs, and theming-lab inputs.
+- `Slider` stops dragging after lost pointer capture or a missed button release,
+  so moving back over it without pressing cannot move the thumb.
+- `Checkbox` sets its ARIA state and form value in Safari 16.4-17.3 and Firefox
+  93-125, where `ElementInternals` lacks `CustomStateSet`.
+- `Box` removes its per-window store only when that store is the one still
+  registered, so a page that mounts and unmounts boxes repeatedly keeps one
+  document-wide class observer instead of accumulating them.
+- `Box` ships its TSDoc in `dist/components/Box.d.ts`, so editors show the
+  description and example on hover.
+
+## 0.3.26 — September 4, 2026
+
+### Added
+
+- Added `Box` / `<a-box>`, a light-DOM container with layout props, overflow
+  states, optional edge fades, and measurement and context events. Set
+  `observe` to update states or receive events; the JSX wrapper derives it from
+  handlers, while a hand-written `<a-box>` sets it directly.
+
+### Fixed
+
+- `Box` applies its fade mask only to edges that hide content, preserving an
+  outset box shadow and focus ring when all content is visible.
+- `Tooltip` with `truncatedOnly` detects clipping on its own `Box` anchor when
+  child labels do not truncate.
+- Raw custom-element length and color attributes work in Firefox and Safari,
+  which do not support typed `attr()`.
+- Custom states work in Safari 16.4-17.3 and Firefox 93-125, where
+  `ElementInternals` lacks `CustomStateSet`.
+
 ## 0.3.25 — September 2, 2026
 
 ### Added
@@ -14,9 +56,9 @@ changes are not listed.
 
 - `Banner` content starts at the inline edge by default; pass `align="center"` to
   center it.
-- `reset.css` now applies Anta page and prose defaults; `body` backgrounds paint the
-  browser canvas. For page-wide dark mode, put `class="dark"` on `<html>`; use
-  `class="light"` in a dark subtree.
+- `reset.css` now applies Anta page and prose defaults; `body` backgrounds paint
+  the browser canvas. For page-wide dark mode, put `class="dark"` on `<html>`;
+  use `class="light"` in a dark subtree.
 
 ### Fixed
 

package/docs/colors.md

@@ -2,6 +2,147 @@
 
 Anta doesn't offer a global color palette — there are no raw scales like `blue-500` or `gray-900` to pick from. Color ships only as a small set of **role tokens**, grouped by where they apply — background, text, and border — each with a neutral set plus five tones (brand, info, success, critical, warning) that already pair light and dark. You compose from these roles instead of arbitrary swatches; anything app-specific lives in component tokens or your own [semantic aliases](#custom-semantic-tokens).
 
+Values are CSS declarations from the shipped default palette and optional `theme-anta.css` reference palette. Resolve them in the application's theme to obtain displayed colors. Toned backgrounds share the neutral `--bg-1`; there is no `--bg-1-{tone}`.
+
+## Background
+
+Background tokens establish surface hierarchy.
+
+Background numbers describe a lightness scale. Give surfaces meaningful names in your application by defining semantic aliases for these tokens.
+
+| Token | Default light | Default dark | Reference light | Reference dark |
+| --- | --- | --- | --- | --- |
+| `--bg-1` | `oklch(from var(--anta-seed-neutral) 1 0 h)` | `oklch(from var(--anta-seed-neutral) 0 0 h)` | `#ffffff` | `#000000` |
+| `--bg-2` | `oklch(from var(--anta-seed-neutral) 0.985 0.002 h)` | `oklch(from var(--anta-seed-neutral) 0.16 0.002 h)` | `#fbfafb` | `#0e0d0f` |
+| `--bg-3` | `oklch(from var(--anta-seed-neutral) 0.97 0.004 h)` | `oklch(from var(--anta-seed-neutral) 0.177 0.005 h)` | `#f6f4f6` | `#121014` |
+| `--bg-4` | `oklch(from var(--anta-seed-neutral) 0.954 0.004 h)` | `oklch(from var(--anta-seed-neutral) 0.191 0.006 h)` | `#f1eff1` | `#161316` |
+| `--bg-5` | `oklch(from var(--anta-seed-neutral) 0.935 0.006 h)` | `oklch(from var(--anta-seed-neutral) 0.2 0.009 h)` | `#ece9ec` | `#1a171b` |
+| `--bg-2-brand` | `oklch(from var(--anta-seed-brand) 0.99 0.004 h)` | `oklch(from var(--anta-seed-brand) 0.13 0.02 h)` | `#fcfcfe` | `#08060e` |
+| `--bg-3-brand` | `oklch(from var(--anta-seed-brand) 0.972 0.011 h)` | `oklch(from var(--anta-seed-brand) 0.17 0.035 h)` | `#f7f6fd` | `#0f0c1d` |
+| `--bg-4-brand` | `oklch(from var(--anta-seed-brand) 0.955 0.02 h)` | `oklch(from var(--anta-seed-brand) 0.185 0.05 h)` | `#efeefc` | `#130f24` |
+| `--bg-5-brand` | `oklch(from var(--anta-seed-brand) 0.935 0.03 h)` | `oklch(from var(--anta-seed-brand) 0.205 0.055 h)` | `#e9e5fa` | `#16132b` |
+| `--bg-2-info` | `oklch(from var(--anta-seed-info) 0.99 0.004 h)` | `oklch(from var(--anta-seed-info) 0.13 0.02 h)` | `#fbfcfe` | `#020a12` |
+| `--bg-3-info` | `oklch(from var(--anta-seed-info) 0.972 0.011 h)` | `oklch(from var(--anta-seed-info) 0.17 0.035 h)` | `#f2f7fd` | `#05131f` |
+| `--bg-4-info` | `oklch(from var(--anta-seed-info) 0.955 0.02 h)` | `oklch(from var(--anta-seed-info) 0.185 0.05 h)` | `#e9f3fb` | `#071725` |
+| `--bg-5-info` | `oklch(from var(--anta-seed-info) 0.935 0.03 h)` | `oklch(from var(--anta-seed-info) 0.205 0.055 h)` | `#e1eefa` | `#0c2337` |
+| `--bg-2-success` | `oklch(from var(--anta-seed-success) 0.99 0.004 h)` | `oklch(from var(--anta-seed-success) 0.13 0.02 h)` | `#f7fcf9` | `#030b06` |
+| `--bg-3-success` | `oklch(from var(--anta-seed-success) 0.972 0.011 h)` | `oklch(from var(--anta-seed-success) 0.17 0.035 h)` | `#ecf9f0` | `#051209` |
+| `--bg-4-success` | `oklch(from var(--anta-seed-success) 0.955 0.02 h)` | `oklch(from var(--anta-seed-success) 0.185 0.05 h)` | `#e2f5e8` | `#06160b` |
+| `--bg-5-success` | `oklch(from var(--anta-seed-success) 0.935 0.03 h)` | `oklch(from var(--anta-seed-success) 0.205 0.055 h)` | `#d9f2e0` | `#081b0e` |
+| `--bg-2-warning` | `oklch(from var(--anta-seed-warning) 0.99 0.004 h)` | `oklch(from var(--anta-seed-warning) 0.13 0.02 h)` | `#fefbf6` | `#110a03` |
+| `--bg-3-warning` | `oklch(from var(--anta-seed-warning) 0.972 0.011 h)` | `oklch(from var(--anta-seed-warning) 0.17 0.035 h)` | `#fcf4e8` | `#1c1105` |
+| `--bg-4-warning` | `oklch(from var(--anta-seed-warning) 0.955 0.02 h)` | `oklch(from var(--anta-seed-warning) 0.185 0.05 h)` | `#fbeeda` | `#231406` |
+| `--bg-5-warning` | `oklch(from var(--anta-seed-warning) 0.935 0.03 h)` | `oklch(from var(--anta-seed-warning) 0.205 0.055 h)` | `#f9e7cd` | `#2b1a08` |
+| `--bg-2-critical` | `oklch(from var(--anta-seed-critical) 0.99 0.004 h)` | `oklch(from var(--anta-seed-critical) 0.13 0.02 h)` | `#fefbfb` | `#120303` |
+| `--bg-3-critical` | `oklch(from var(--anta-seed-critical) 0.972 0.011 h)` | `oklch(from var(--anta-seed-critical) 0.17 0.035 h)` | `#fdf2f2` | `#210606` |
+| `--bg-4-critical` | `oklch(from var(--anta-seed-critical) 0.955 0.02 h)` | `oklch(from var(--anta-seed-critical) 0.185 0.05 h)` | `#fcebeb` | `#260808` |
+| `--bg-5-critical` | `oklch(from var(--anta-seed-critical) 0.935 0.03 h)` | `oklch(from var(--anta-seed-critical) 0.205 0.055 h)` | `#fae5e5` | `#2e0a0b` |
+
+## Text
+
+Text tokens establish content priority and contrast.
+
+| Token | Use |
+| --- | --- |
+| `--text-1` | Primary text, for headings and key content. |
+| `--text-2` | Secondary text, for descriptions and supporting content. |
+| `--text-3` | Subdued text, for labels, statuses, and secondary data. |
+| `--text-4` | Minor text, for timestamps, counters, and metadata. |
+| `--text-5` | Placeholder text, for hints and non-critical information. |
+
+### Link color
+
+Links use `--link-color` at rest and `--link-color-hover` on hover. Both tokens pair light and dark values independently of the text scale.
+
+| Token | Default light | Default dark | Reference light | Reference dark |
+| --- | --- | --- | --- | --- |
+| `--text-1` | `oklch(from var(--anta-seed-neutral) 0.1 0.01 h)` | `oklch(from var(--anta-seed-neutral) 0.94 0.008 h)` | `#050306` | `#ece9ec` |
+| `--text-2` | `oklch(from var(--anta-seed-neutral) 0.3 0.015 h)` | `oklch(from var(--anta-seed-neutral) 0.8 0.015 h)` | `#302b31` | `#c1b9c1` |
+| `--text-3` | `color-mix(in oklch, var(--text-2) 82%, transparent)` | `color-mix(in oklch, var(--text-2) 80%, transparent)` | `#635b65` | `#9f99a1` |
+| `--text-4` | `color-mix(in oklch, var(--text-2) 60%, transparent)` | `color-mix(in oklch, var(--text-2) 60%, transparent)` | `#878089` | `#776e77` |
+| `--text-5` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `color-mix(in oklch, var(--text-2) 40%, transparent)` | `#9f99a1` | `#635b65` |
+| `--text-1-brand` | `oklch(from var(--anta-seed-brand) 0.38 0.11 h)` | `oklch(from var(--anta-seed-brand) 0.85 0.1 h)` | `#2e1e7b` | `#c5baff` |
+| `--text-2-brand` | `oklch(from var(--anta-seed-brand) 0.43 0.15 h)` | `oklch(from var(--anta-seed-brand) 0.77 0.11 h)` | `#483493` | `#ada0ee` |
+| `--text-3-brand` | `color-mix(in oklch, var(--text-2-brand) 82%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 80%, transparent)` | `#483493cc` | `#ada0eecc` |
+| `--text-4-brand` | `color-mix(in oklch, var(--text-2-brand) 60%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 60%, transparent)` | `#48349399` | `#ada0ee99` |
+| `--text-5-brand` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `color-mix(in oklch, var(--text-2-brand) 40%, transparent)` | `#48349366` | `#ada0ee66` |
+| `--text-1-info` | `oklch(from var(--anta-seed-info) 0.38 0.11 h)` | `oklch(from var(--anta-seed-info) 0.85 0.1 h)` | `#003969` | `#9ed2ff` |
+| `--text-2-info` | `oklch(from var(--anta-seed-info) 0.43 0.15 h)` | `oklch(from var(--anta-seed-info) 0.77 0.11 h)` | `#175082` | `#7db6e8` |
+| `--text-3-info` | `color-mix(in oklch, var(--text-2-info) 82%, transparent)` | `color-mix(in oklch, var(--text-2-info) 80%, transparent)` | `#175082cc` | `#7db6e8cc` |
+| `--text-4-info` | `color-mix(in oklch, var(--text-2-info) 60%, transparent)` | `color-mix(in oklch, var(--text-2-info) 60%, transparent)` | `#175082b2` | `#7db6e899` |
+| `--text-5-info` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `color-mix(in oklch, var(--text-2-info) 40%, transparent)` | `#17508280` | `#7db6e866` |
+| `--text-1-success` | `oklch(from var(--anta-seed-success) 0.38 0.11 h)` | `oklch(from var(--anta-seed-success) 0.85 0.1 h)` | `#004618` | `#9ddeb1` |
+| `--text-2-success` | `oklch(from var(--anta-seed-success) 0.43 0.15 h)` | `oklch(from var(--anta-seed-success) 0.77 0.11 h)` | `#1f5c31` | `#74cd8e` |
+| `--text-3-success` | `color-mix(in oklch, var(--text-2-success) 82%, transparent)` | `color-mix(in oklch, var(--text-2-success) 80%, transparent)` | `#1f5c31cc` | `#74cd8ecc` |
+| `--text-4-success` | `color-mix(in oklch, var(--text-2-success) 60%, transparent)` | `color-mix(in oklch, var(--text-2-success) 60%, transparent)` | `#1f5c3199` | `#74cd8e99` |
+| `--text-5-success` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `color-mix(in oklch, var(--text-2-success) 40%, transparent)` | `#1f5c3166` | `#74cd8e66` |
+| `--text-1-warning` | `oklch(from var(--anta-seed-warning) 0.38 0.11 h)` | `oklch(from var(--anta-seed-warning) 0.85 0.1 h)` | `#7f410b` | `#f0bf75` |
+| `--text-2-warning` | `oklch(from var(--anta-seed-warning) 0.43 0.15 h)` | `oklch(from var(--anta-seed-warning) 0.77 0.11 h)` | `#995200` | `#e1a452` |
+| `--text-3-warning` | `color-mix(in oklch, var(--text-2-warning) 82%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 80%, transparent)` | `#995200cc` | `#e1a452cc` |
+| `--text-4-warning` | `color-mix(in oklch, var(--text-2-warning) 60%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 60%, transparent)` | `#99520099` | `#e1a45299` |
+| `--text-5-warning` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `color-mix(in oklch, var(--text-2-warning) 40%, transparent)` | `#99520066` | `#e1a45266` |
+| `--text-1-critical` | `oklch(from var(--anta-seed-critical) 0.38 0.11 h)` | `oklch(from var(--anta-seed-critical) 0.85 0.1 h)` | `#8f1014` | `#ffabac` |
+| `--text-2-critical` | `oklch(from var(--anta-seed-critical) 0.43 0.15 h)` | `oklch(from var(--anta-seed-critical) 0.77 0.11 h)` | `#a01c1c` | `#e78e90` |
+| `--text-3-critical` | `color-mix(in oklch, var(--text-2-critical) 82%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 80%, transparent)` | `#a01c1ccc` | `#e78e90cc` |
+| `--text-4-critical` | `color-mix(in oklch, var(--text-2-critical) 60%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 60%, transparent)` | `#a01c1c99` | `#e78e9099` |
+| `--text-5-critical` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `color-mix(in oklch, var(--text-2-critical) 40%, transparent)` | `#a01c1c66` | `#e78e9066` |
+
+## Border
+
+Border tokens separate and group elements.
+
+Use border tokens according to the surface and the separation it needs:
+
+- `border-1` and `border-2` define strong boundaries, including on `bg-4` and `bg-5`.
+- `border-3` provides a visible, moderate boundary.
+- `border-4` separates `bg-2` and `bg-3`.
+- `border-5` provides subtle separation between `bg-2` and `bg-1`.
+
+### Focus ring
+
+`--focus-ring` supplies the keyboard-focus outline color across components. It pairs light and dark values. Components use this global token directly.
+
+| Token | Default light | Default dark | Reference light | Reference dark |
+| --- | --- | --- | --- | --- |
+| `--border-1` | `oklch(from var(--anta-seed-neutral) 0.67 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.52 0.008 h)` | `#938d96` | `hsl(288deg 5.21% 42%)` |
+| `--border-2` | `oklch(from var(--anta-seed-neutral) 0.8 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.41 0.008 h)` | `#c1b9c1` | `hsl(282deg 7.04% 28%)` |
+| `--border-3` | `oklch(from var(--anta-seed-neutral) 0.86 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.33 0.008 h)` | `#d4ced4` | `hsl(277.5deg 6.56% 20%)` |
+| `--border-4` | `oklch(from var(--anta-seed-neutral) 0.9 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.26 0.008 h)` | `#e0dce0` | `hsl(290deg 6.52% 14%)` |
+| `--border-5` | `oklch(from var(--anta-seed-neutral) 0.935 0.008 h)` | `oklch(from var(--anta-seed-neutral) 0.21 0.008 h)` | `#ece9ec` | `hsl(285deg 7.14% 10%)` |
+| `--border-1-brand` | `oklch(from var(--anta-seed-brand) 0.67 0.13 h)` | `oklch(from var(--anta-seed-brand) 0.52 0.15 h)` | `#9081df` | `hsl(250.08deg 59.8% 58%)` |
+| `--border-2-brand` | `oklch(from var(--anta-seed-brand) 0.8 0.09 h)` | `oklch(from var(--anta-seed-brand) 0.41 0.12 h)` | `#bcb1f1` | `hsl(250deg 50% 42%)` |
+| `--border-3-brand` | `oklch(from var(--anta-seed-brand) 0.86 0.055 h)` | `oklch(from var(--anta-seed-brand) 0.33 0.09 h)` | `#d2cbf6` | `hsl(252.63deg 47.74% 30%)` |
+| `--border-4-brand` | `oklch(from var(--anta-seed-brand) 0.9 0.04 h)` | `oklch(from var(--anta-seed-brand) 0.26 0.06 h)` | `#ddd8f8` | `hsl(249.8deg 39.84% 19%)` |
+| `--border-5-brand` | `oklch(from var(--anta-seed-brand) 0.935 0.028 h)` | `oklch(from var(--anta-seed-brand) 0.21 0.045 h)` | `#e9e5fa` | `hsl(249deg 39.22% 14%)` |
+| `--border-1-info` | `oklch(from var(--anta-seed-info) 0.67 0.13 h)` | `oklch(from var(--anta-seed-info) 0.52 0.15 h)` | `#56a1e1` | `hsl(207.82deg 70.2% 40%)` |
+| `--border-2-info` | `oklch(from var(--anta-seed-info) 0.8 0.09 h)` | `oklch(from var(--anta-seed-info) 0.41 0.12 h)` | `#93c5ec` | `hsl(207.77deg 69.94% 29%)` |
+| `--border-3-info` | `oklch(from var(--anta-seed-info) 0.86 0.055 h)` | `oklch(from var(--anta-seed-info) 0.33 0.09 h)` | `#bad6f3` | `hsl(208.04deg 69.93% 21%)` |
+| `--border-4-info` | `oklch(from var(--anta-seed-info) 0.9 0.04 h)` | `oklch(from var(--anta-seed-info) 0.26 0.06 h)` | `#cfe3f7` | `hsl(208.52deg 62.89% 14%)` |
+| `--border-5-info` | `oklch(from var(--anta-seed-info) 0.935 0.028 h)` | `oklch(from var(--anta-seed-info) 0.21 0.045 h)` | `#e1eefa` | `hsl(207.78deg 65.85% 10.5%)` |
+| `--border-1-success` | `oklch(from var(--anta-seed-success) 0.67 0.13 h)` | `oklch(from var(--anta-seed-success) 0.52 0.15 h)` | `#44c169` | `hsl(138.18deg 49.75% 29%)` |
+| `--border-2-success` | `oklch(from var(--anta-seed-success) 0.8 0.09 h)` | `oklch(from var(--anta-seed-success) 0.41 0.12 h)` | `#88d7a0` | `hsl(138.26deg 50.36% 20%)` |
+| `--border-3-success` | `oklch(from var(--anta-seed-success) 0.86 0.055 h)` | `oklch(from var(--anta-seed-success) 0.33 0.09 h)` | `#b3e5c2` | `hsl(137.7deg 49.59% 16%)` |
+| `--border-4-success` | `oklch(from var(--anta-seed-success) 0.9 0.04 h)` | `oklch(from var(--anta-seed-success) 0.26 0.06 h)` | `#c6ecd1` | `hsl(138.46deg 52% 10%)` |
+| `--border-5-success` | `oklch(from var(--anta-seed-success) 0.935 0.028 h)` | `oklch(from var(--anta-seed-success) 0.21 0.045 h)` | `#d9f2e0` | `hsl(138.86deg 53.85% 7.5%)` |
+| `--border-1-warning` | `oklch(from var(--anta-seed-warning) 0.67 0.13 h)` | `oklch(from var(--anta-seed-warning) 0.52 0.15 h)` | `#d88118` | `hsl(32.13deg 80.31% 34%)` |
+| `--border-2-warning` | `oklch(from var(--anta-seed-warning) 0.8 0.09 h)` | `oklch(from var(--anta-seed-warning) 0.41 0.12 h)` | `#edb25a` | `hsl(27.93deg 84.06% 24%)` |
+| `--border-3-warning` | `oklch(from var(--anta-seed-warning) 0.86 0.055 h)` | `oklch(from var(--anta-seed-warning) 0.33 0.09 h)` | `#f3cc91` | `hsl(30deg 79.66% 17%)` |
+| `--border-4-warning` | `oklch(from var(--anta-seed-warning) 0.9 0.04 h)` | `oklch(from var(--anta-seed-warning) 0.26 0.06 h)` | `#f6dbb1` | `hsl(28.75deg 63.16% 12%)` |
+| `--border-5-warning` | `oklch(from var(--anta-seed-warning) 0.935 0.028 h)` | `oklch(from var(--anta-seed-warning) 0.21 0.045 h)` | `#f9e7cd` | `hsl(28.64deg 66.67% 9%)` |
+| `--border-1-critical` | `oklch(from var(--anta-seed-critical) 0.67 0.13 h)` | `oklch(from var(--anta-seed-critical) 0.52 0.15 h)` | `#e56c6c` | `hsl(0deg 56% 46%)` |
+| `--border-2-critical` | `oklch(from var(--anta-seed-critical) 0.8 0.09 h)` | `oklch(from var(--anta-seed-critical) 0.41 0.12 h)` | `#efa4a4` | `hsl(0.42deg 63% 30%)` |
+| `--border-3-critical` | `oklch(from var(--anta-seed-critical) 0.86 0.055 h)` | `oklch(from var(--anta-seed-critical) 0.33 0.09 h)` | `#f4c2c2` | `hsl(0deg 62.21% 23%)` |
+| `--border-4-critical` | `oklch(from var(--anta-seed-critical) 0.9 0.04 h)` | `oklch(from var(--anta-seed-critical) 0.26 0.06 h)` | `#f7d4d4` | `hsl(359.13deg 59% 15%)` |
+| `--border-5-critical` | `oklch(from var(--anta-seed-critical) 0.935 0.028 h)` | `oklch(from var(--anta-seed-critical) 0.21 0.045 h)` | `#fae5e5` | `hsl(359.06deg 63% 11%)` |
+
+### Link and focus values
+
+| Token | Default light | Default dark | Reference light | Reference dark |
+| --- | --- | --- | --- | --- |
+| `--link-color` | `#1466d4` | `#7baee9` | Uses default | Uses default |
+| `--link-color-hover` | `#2674e6` | `#90bdee` | Uses default | Uses default |
+| `--focus-ring` | `oklch(0.55 0.2 284.15)` | `#a897fc` | `oklch(0.55 0.2 284.15)` | `#a897fc` |
+
 ## Custom semantic tokens
 
 Because the numeric tokens are role-free, the convenient pattern is to alias them to **semantic tokens** that describe how *your* app uses each surface. Define the names once, then reference those instead of the raw numbers. For example: