@antadesign/anta 0.3.15 → 0.3.17

package/README.md

@@ -10,45 +10,51 @@ One constraint shapes the architecture. Antithesis runs most of its UI in a Work
 npm install @antadesign/anta   # or pnpm / bun
 ```
 
-Pin an exact version in your `package.json` (`"@antadesign/anta": "0.3.12"`) rather than a floating tag like `"latest"`, which can change between installs.
+Pin an exact version in `package.json` (`"@antadesign/anta": "0.3.16"`) instead
+of a floating tag such as `"latest"`.
 
 ### Usage
 
 ```tsx
-import '@antadesign/anta/tokens.css'  // CSS custom properties (colors, sizes, fonts)
-import '@antadesign/anta/reset.css'   // small reset + Anta's typography opinions
-import '@antadesign/anta/elements'    // registers <a-progress> et al.
+import '@antadesign/anta/tokens.css'  // CSS custom properties
+import '@antadesign/anta/reset.css'   // reset and typography defaults
+import '@antadesign/anta/elements'    // registers <a-*> elements
 import { Progress } from '@antadesign/anta'
 
-<Progress value={42} label="uploaded.." hint="3 of 7" />
+<Progress value={42} label="Uploaded" hint="3 of 7" />
 ```
 
 ### What you import (and why)
 
-Five imports, listed in the order you'd add them. Tokens + elements + the JSX layer render a styled component; the reset is recommended; the theme is opt-in.
+Tokens, elements, and the JSX layer render a styled component. The reset is
+recommended; the reference theme is optional.
 
 | Import | Provides | Skip if… |
 |---|---|---|
-| `@antadesign/anta/tokens.css` | The CSS custom properties: six tone seeds (`--anta-seed-neutral`, `--anta-seed-brand`, …), the role scales derived from them (`--bg-1…5`, `--text-1…5`, `--border-1…5`), the `.dark` ancestor toggle, and the base `font-size: 15px`. Also declares the `@layer base, anta, components, utilities` order. Override a seed to reskin its whole tone. | You're supplying your own values for the same variables. |
-| `@antadesign/anta/reset.css` | Small modern reset (box-sizing, margins, form-control font inheritance) plus Anta's typography for headings, lists, and links. Lives in `@layer anta`. | You already have a reset and don't want Anta's typography defaults. |
-| `@antadesign/anta/elements` | Side-effect import: registers every `<a-*>` element and attaches its CSS (also `@layer anta`). Per-element entries register just one — see [Registering elements](#registering-elements). | You render only on the server, or you import per-element entries instead. |
-| `@antadesign/anta` | The JSX wrappers (`Progress`, `Text`, `Icon`, …): typed React/Preact components that emit `<a-*>` tags. | You write the `<a-*>` elements by hand. |
-| `@antadesign/anta/theme-anta.css` *(optional)* | Anta's hand-tuned reference palette. The default palette is seed-derived; import this last for the exact hand-tuned values. | The seed-derived default, or your own palette, is what you want. |
+| `@antadesign/anta/tokens.css` | Six seed tokens, derived role scales (`--bg-1…5`, `--text-1…5`, `--border-1…5`), `.dark`, the 15px root size, and layer order. Override a seed to reskin its tone. | You provide those variables. |
+| `@antadesign/anta/reset.css` | A small reset plus Anta's heading, list, and link typography in `@layer anta`. | You use another reset and typography. |
+| `@antadesign/anta/elements` | Registers every `<a-*>` element and its CSS. Per-element entries register one; see [Registering elements](#registering-elements). | You render only on the server or register elements individually. |
+| `@antadesign/anta` | Typed React/Preact wrappers such as `Progress`, `Text`, and `Icon`. | You write `<a-*>` elements directly. |
+| `@antadesign/anta/theme-anta.css` *(optional)* | The hand-tuned reference palette. Import last to replace the seed-derived default. | You want the seed-derived or your own palette. |
 
-The order matters at the top: the element CSS reads `var(--text-1)`, `var(--bg-2)`, and friends, and only `tokens.css` defines them. Skip the tokens import and components render unstyled.
+Load `tokens.css` before element CSS. Elements read its variables; without it,
+they render unstyled.
 
 ### Cascade layers
 
-Anta's reset and element CSS live in `@layer anta`. `tokens.css` pre-declares `@layer base, anta, components, utilities;`: Anta's defaults sit above preflight resets (Tailwind's `@layer base`, Normalize) and below your `@layer components` rules and utility frameworks.
+Anta's reset and element CSS live in `@layer anta`. `tokens.css` declares
+`@layer base, anta, components, utilities`, placing Anta above preflight resets
+and below your component and utility layers.
 
-For a different order, declare it in your own CSS loaded **before** `tokens.css` — the first mention of each layer name fixes its position:
+To change that order, declare it in CSS loaded **before** `tokens.css`. The
+first declaration fixes a layer's position:
 
 ```css
 /* your global.css, loaded before anta */
 @layer reset, anta, my-components, utilities;
 ```
 
-CSS custom properties (the `:root { --… }` declarations in `tokens.css`) stay unlayered so they take effect everywhere unconditionally.
+Token custom properties stay unlayered so they apply everywhere.
 
 > **Gotcha: an unlayered hard reset defeats Anta's element rules.**
 >
@@ -57,26 +63,32 @@ CSS custom properties (the `:root { --… }` declarations in `tokens.css`) stay
 > * { margin: 0; }
 > ```
 >
-> Unlayered styles beat layered ones regardless of specificity, so this common copy-paste outranks every per-element default Anta ships (`p` margins, list padding, and the rest). `reset.css` already does the same universal reset inside `@layer anta` — delete the duplicate from your global CSS, or wrap your own reset in `@layer base { … }` so Anta's element rules still win.
+> Unlayered styles beat layered ones regardless of specificity. This reset
+> overrides Anta's element defaults. Delete the duplicate, or put your reset in
+> `@layer base { … }`; `reset.css` already applies the same universal reset in
+> `@layer anta`.
 
 ## Registering elements
 
-The JSX wrappers render `<a-*>` tags, and the classes behind those tags must be registered **before** they appear in the DOM. Registration needs `HTMLElement`, which exists only in the UI thread of a real browser; in Node.js (SSR) and Worker threads the import is a silent no-op that costs nothing but bundle size.
+JSX wrappers render `<a-*>` tags. Register their classes before those tags reach
+the DOM. Registration needs `HTMLElement`, so the import is a no-op in Node.js
+and Worker threads.
 
 ```ts
 import '@antadesign/anta/elements'  // auto-registers all elements
 ```
 
-**Register only what you use.** `/elements` registers everything; per-element entry points register one element and load just its CSS, keeping unused elements (and their dependencies) out of your bundle:
+`/elements` registers everything. Per-element entries register one element and
+load only its CSS:
 
 ```ts
 import '@antadesign/anta/elements/a-tooltip'  // only <a-tooltip> + its CSS
 import '@antadesign/anta/elements/a-button'   // only <a-button> + its CSS
 ```
 
-Both forms are side-effect imports, idempotent, and SSR-safe.
+Both are idempotent, side-effect imports and safe during SSR.
 
-The cleanest pattern is a static import at your app's entry file, outside any component or hook:
+Use a static import in your app entry, outside components and hooks:
 
 ```ts
 // src/main.tsx (or wherever your root render lives)
@@ -86,18 +98,22 @@ import App from './App'
 createRoot(document.getElementById('root')!).render(<App />)
 ```
 
-Bundlers resolve this at module-init time, so the element classes are registered before anything renders: no flash of un-upgraded elements.
+Module initialisation registers the classes before the first render, avoiding a
+flash of un-upgraded elements.
 
 > **Why not `useEffect(() => import('@antadesign/anta/elements'), [])`?**
-> `useEffect` fires after paint and the dynamic import resolves later still, so the browser paints unregistered elements (which collapse to nothing) until the upgrade catches up. `useLayoutEffect` doesn't help: the import is still async, and it warns during SSR hydration.
+> `useEffect` runs after paint and the import resolves later. The browser can
+> paint unregistered elements first. `useLayoutEffect` is still asynchronous and
+> warns during SSR hydration.
 
-Where the static import goes depends on the runtime:
+Choose the entry point for your runtime:
 
-**Plain HTML / static sites** — a `<script type="module">` tag in the document head.
-
-**SSR frameworks (Astro, Next.js)** — a script the framework ships only to the client. In Astro: `<script>import '@antadesign/anta/elements'</script>` (Astro `<script>` tags are client-side by default). In Next.js: a top-level import in a `'use client'` file, which only enters the client chunk.
-
-**UI in a Worker thread (the Antithesis setup)** — the UI-thread bootstrap, the script that owns the real DOM. The Worker has no `HTMLElement`, so the import must not run there.
+- **Plain HTML or static sites:** a `<script type="module">` in the document head.
+- **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`.
 
 ## Framework setup
 
@@ -107,7 +123,7 @@ Works out of the box.
 
 ### Preact with compat
 
-If your bundler aliases `react` → `preact/compat`, anta works automatically — no extra setup.
+If your bundler aliases `react` to `preact/compat`, Anta works without setup.
 
 ### Preact without compat
 
@@ -121,17 +137,21 @@ configure(h, Fragment)
 
 ### TypeScript: typing raw `<a-*>` tags in JSX
 
-If you only use the JSX wrappers (`<Button>`, `<Progress>`, …) you need no setup — they're typed like any React component. This section is only for writing the raw `<a-*>` tags directly in JSX.
+JSX wrappers such as `<Button>` and `<Progress>` need no extra typing. Configure
+JSX only when you write raw `<a-*>` tags.
 
-**Option A (preferred)** — point your JSX types at anta in `tsconfig.json`:
+**Option A (preferred)** — point JSX types at Anta in `tsconfig.json`:
 
 ```jsonc
 { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@antadesign/anta" } }
 ```
 
-Every `a-*` tag type-checks, all standard HTML tags keep working, and importing anything from `@antadesign/stickers` adds the sticker tags automatically.
+Every `a-*` tag type-checks, standard HTML tags keep working, and importing
+`@antadesign/stickers` adds its tags automatically.
 
-**Option B** — if you can't change `jsxImportSource` (a shared tsconfig, Emotion's `@emotion/react` source), merge anta's tag map into your JSX namespace yourself: anta exports it as `AntaIntrinsicElements` (and `@antadesign/stickers` as `StickerIntrinsicElements`), one `extends` in any `.d.ts` your tsconfig covers:
+**Option B** — if `jsxImportSource` cannot change, merge Anta's tag map into
+your JSX namespace with `AntaIntrinsicElements` (and `StickerIntrinsicElements`
+when needed):
 
 ```ts
 import type { AntaIntrinsicElements } from '@antadesign/anta'
@@ -144,7 +164,8 @@ declare global {
 }
 ```
 
-On modern `@types/react` (≥18) with `jsx: "react-jsx"`, the JSX namespace is module-scoped and the global declaration above is silently ignored — target the `react` module instead:
+With `@types/react` 18+ and `jsx: "react-jsx"`, JSX is module-scoped. Extend
+the `react` module instead:
 
 ```ts
 import type { AntaIntrinsicElements } from '@antadesign/anta'
@@ -156,11 +177,13 @@ declare module 'react' {
 }
 ```
 
-Either way the tags stay fully typed — unknown `a-*` tags and wrong prop types are still errors. New tags arrive automatically when you upgrade anta; there's no per-tag list to maintain.
+Both options reject unknown tags and invalid props. New tags arrive with Anta
+upgrades; there is no per-tag list to maintain.
 
 ### Raw web components (no JSX)
 
-The elements work in plain HTML; registering them also loads their CSS. The bare specifier needs a bundler or an import map to resolve.
+Elements also work in plain HTML. Registration loads their CSS; resolve the bare
+specifier with a bundler or import map.
 
 ```html
 <script type="module">
@@ -182,7 +205,7 @@ Add the `dark` class to any ancestor element:
 
 ## Fonts
 
-Anta is designed for a customized <a href="https://typetype.org/fonts/tt-interphases-pro" target="_blank" rel="noopener noreferrer">TT Interphases Pro</a> but ships no font binaries. Components reference families through the `--sans-serif` and `--monospace` variables and fall back to system stacks. The base size is `font-size: 15px` on `:root` (so `1rem = 15px`), a deliberate step down from the browser's 16px for Antithesis's information-dense layouts. Both live in `tokens.css`.
+Anta is designed for a customized <a href="https://typetype.org/fonts/tt-interphases-pro" target="_blank" rel="noopener noreferrer">TT Interphases Pro</a>, 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:
 
@@ -201,14 +224,21 @@ To use the Antithesis fonts, register your own `@font-face` declarations and ove
 
 ## Browser support
 
-Anta targets evergreen browsers and ships **no polyfills and no feature detection** for its baseline. The floor is set by the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) (used by `<a-menu>` and `<a-tooltip>` for top-layer rendering):
+Anta targets evergreen browsers and ships **no baseline polyfills**. Its floor is [custom-element states](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet), used throughout the components for their internal CSS state, alongside the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API):
 
 | Browser | Minimum version |
 | --- | --- |
-| Chrome / Edge | 114 (May 2023) |
-| Safari | 17 (Sep 2023) |
-| Firefox | 125 (Apr 2024) |
-
-This corresponds roughly to [Baseline 2024](https://web.dev/baseline). Within that floor, anta freely relies on: `popover` / `showPopover()` / `:popover-open`, `color-mix(in oklch, …)` and relative `oklch(from …)` colors, `:has()`, `dvh` units, CSS cascade layers, and constructable shadow DOM. On an older browser these fail hard (e.g. `showPopover()` throws) — there is no degraded mode by design; gate anta usage on your own support matrix instead.
-
-Two features are used as **progressive enhancement** with explicit fallbacks: `checkVisibility()` (falls back to `getClientRects()`), and CSS typed `attr()` for `<a-icon size>` (Chrome 133+ / Safari 18.2+; elsewhere use the `<Icon size>` wrapper or the `--icon-size` variable, see the `a-icon` docs).
+| Chrome / Edge | 125 (May 2024) |
+| Safari | 17.4 (Mar 2024) |
+| Firefox | 126 (May 2024) |
+
+This is [Baseline 2024](https://web.dev/baseline). Anta also relies on relative
+OKLCH, `:has()`, `dvh`, cascade layers, and constructable shadow DOM. Older
+browsers can fail hard, including `:state()` being unrecognized or
+`showPopover()` throwing. Gate Anta on your own support matrix when you support
+older browsers.
+
+Two features progressively enhance with fallbacks: `checkVisibility()` falls
+back to `getClientRects()`, and typed CSS `attr()` supports raw
+`<a-icon size>` in Chrome 133+ and Safari 18.2+. Elsewhere use `<Icon size>`
+or `--icon-size`.

package/dist/anta_helpers.d.ts

@@ -34,7 +34,7 @@ export declare function wrapLabel(kids: React.ReactNode, tag: string): React.Rea
  * `CustomEvent` in a synthetic event (`.nativeEvent`); Preact passes it directly. `D`
  * is the per-component `detail` vocabulary. Pair with `nativeStateChange` to unwrap.
  * Exported so the stateful wrappers (`Banner`, and future ones) don't each re-declare
- * this union — the CLAUDE.md "reuse shared wrapper helpers" rule.
+ * this union — the AGENTS.md "reuse shared wrapper helpers" rule.
  */
 export type StateChangeEvent<D> = CustomEvent<D> | {
     nativeEvent: CustomEvent<D>;
@@ -73,18 +73,13 @@ export declare const NAMED_TONES: Set<string>;
  * derives the fill/text/border curve in oklch. Named tones return `base` unchanged.
  */
 export declare function toneStyle(tone: string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
-/**
- * Inline-style helper for a valued `round` — the polymorphic corner-radius prop
- * (`true` = fully round, a `number`/length = a custom radius). Mirrors `toneStyle`:
- * a custom value is handed to the element via `varName` (e.g. `--button-round`), so
- * the element's CSS resolves `border-radius: var(--{c}-round, <default>)`. This is
- * the portable path — the element's `attr(round type(<length>), …)` default only
- * resolves on newer engines, exactly like the tone-source `attr()`.
- *
- * A `number` becomes `<n>px`; a non-empty `string` is used verbatim (so `'1rem'` /
- * `'50%'` work). `true` / `false` / `undefined` add nothing (presence alone → the
- * element's default full-round). Returns `base` unchanged when there's no value.
- */
+/** Converts a numeric or string length to CSS text. Numbers become pixels. */
+export declare function cssLength(length: number | string | undefined): string | undefined;
+/** Adds a CSS length to an inline custom property. Numbers become pixels; a
+ * non-empty string is used verbatim. Returns `base` unchanged when absent. */
+export declare function lengthStyle(length: number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
+/** Inline-style helper for a valued `round`. Its boolean form leaves the
+ * element's default full-round radius in place. */
 export declare function roundStyle(round: boolean | number | string | undefined, varName: string, base?: React.CSSProperties): React.CSSProperties | undefined;
 /**
  * Presence flag for a `round` attribute: `''` when a radius applies, else

package/dist/anta_helpers.js

@@ -40,10 +40,16 @@ const NAMED_TONES = /* @__PURE__ */ new Set([
 function toneStyle(tone, varName, base) {
   return tone != null && !NAMED_TONES.has(tone) ? { ...base, [varName]: tone } : base;
 }
+function cssLength(length) {
+  if (typeof length === "number") return `${length}px`;
+  return length || void 0;
+}
+function lengthStyle(length, varName, base) {
+  const value = cssLength(length);
+  return value ? { ...base, [varName]: value } : base;
+}
 function roundStyle(round, varName, base) {
-  if (typeof round === "number") return { ...base, [varName]: `${round}px` };
-  if (typeof round === "string" && round !== "") return { ...base, [varName]: round };
-  return base;
+  return lengthStyle(typeof round === "number" || typeof round === "string" ? round : void 0, varName, base);
 }
 function roundAttr(round) {
   return round || round === 0 ? "" : void 0;
@@ -145,10 +151,12 @@ export {
   NAMED_TONES,
   SelectableChildElement,
   anchorRect,
+  cssLength,
   hasChildren,
   installDismissTrigger,
   isInsideOpenMenu,
   isMenuOpen,
+  lengthStyle,
   nativeStateChange,
   parseOpenState,
   roundAttr,

package/dist/components/Banner.js

@@ -55,6 +55,7 @@ const Banner = ({
           {
             priority: "quaternary",
             icon: "x",
+            round,
             tone,
             "aria-label": "Dismiss",
             "data-custom-event": "dismissrequest"

package/dist/components/ButtonCopy.d.ts

@@ -20,11 +20,14 @@ export type ButtonCopyProps = ButtonProps & {
     form?: never;
     iconTrailing?: never;
 } & CopyTarget & {
-    /** Where the copy glyph sits relative to the label — or `'none'` to omit it,
-     *  in which case the feedback is a ghost of the label floating up (`toast`)
-     *  plus a brief success / failure tone flash.
+    /** Where the copy glyph sits relative to the label — or `'none'` to omit it.
+     *  Without a glyph, a successful copy shows a small confirmation label near
+     *  the pointer and leaves the button unchanged.
      *  @defaultValue 'leading' */
     iconPlacement?: 'leading' | 'trailing' | 'none';
+    /** Text in the successful no-icon confirmation.
+     *  @defaultValue Copied */
+    copiedLabel?: string;
 };
 /**
  * Copy button — a `Button` preset for copy-to-clipboard. Set `copy` for a literal
@@ -37,7 +40,7 @@ export type ButtonCopyProps = ButtonProps & {
  * copy glyph to a check (success) or ✕ (failure) and retones to `success` /
  * `critical` for ~2s (a re-render, no element state — see `useCopyFeedback`).
  * `iconPlacement` puts that glyph leading (default), trailing, or `'none'`; with
- * `'none'` the `<a-copy>` floats a ghost of the label upward instead.
+ * `'none'`, `<a-copy>` shows its `Copied` confirmation instead.
  *
  * With a `label` it's a labeled button; without one it's an icon-only copy button
  * (named "Copy" for assistive tech). Everything else is a normal `Button` prop —
@@ -48,9 +51,9 @@ export type ButtonCopyProps = ButtonProps & {
  * <ButtonCopy copy="npm i @antadesign/anta" label="Copy install" />
  * <ButtonCopy copy="https://anta.design" />                     // icon-only
  * <ButtonCopy copy={code} label="Copy" iconPlacement="trailing" />
- * <ButtonCopy copy={code} label="Copy snippet" iconPlacement="none" />  // ghost feedback
+ * <ButtonCopy copy={code} label="Copy snippet" iconPlacement="none" copiedLabel="Copied" />
  * <ButtonCopy copyNode=".snippet" label="Copy block" priority="tertiary" />
  * <ButtonCopy copyUrl label="Copy link" />                      // copies location.href
  * ```
  */
-export declare const ButtonCopy: ({ icon, iconPlacement, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children, "aria-label": ariaLabel, ...rest }: ButtonCopyProps) => any;
+export declare const ButtonCopy: ({ icon, iconPlacement, copiedLabel, tone, onCopied, onCopyRequest, copy, copyNode, copyUrl, copyWithUrl, label, children, "aria-label": ariaLabel, ...rest }: ButtonCopyProps) => any;

package/dist/components/ButtonCopy.js

@@ -5,6 +5,7 @@ import { copyElementProps, isNodeCopy } from "./copy-props";
 const ButtonCopy = ({
   icon,
   iconPlacement = "leading",
+  copiedLabel,
   tone,
   onCopied,
   onCopyRequest,
@@ -28,15 +29,16 @@ const ButtonCopy = ({
     copyWithUrl,
     onCopyRequest,
     onCopied: handleCopied,
-    // Ghost feedback only makes sense when there's no glyph to swap.
-    toast: iconPlacement === "none"
+    // The top-layer confirmation only appears when there is no glyph to swap.
+    toast: iconPlacement === "none",
+    copiedLabel
   });
   return /* @__PURE__ */ jsxs(
     Button,
     {
       ...iconSlot,
       label,
-      tone: shownTone,
+      tone: iconPlacement === "none" ? tone : shownTone,
       "aria-label": ariaLabel ?? (hasText ? void 0 : "Copy"),
       "data-copy-node-button": isNodeCopy({ copyNode }) ? "" : void 0,
       ...rest,

package/dist/components/Card.js

@@ -57,21 +57,7 @@ const Card = ({
         (typeof icon === "string" ? (
           // A shape string → the icon centered in a circular chip, sized per the
           // card via --card-icon-size (32 / 40 / 44 for small / medium / large).
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              slot: "icon",
-              style: {
-                width: "var(--card-icon-size, 40px)",
-                height: "var(--card-icon-size, 40px)",
-                borderRadius: "50%",
-                background: "var(--card-icon-bg)",
-                display: "grid",
-                placeItems: "center"
-              },
-              children: /* @__PURE__ */ jsx(Icon, { shape: icon })
-            }
-          )
+          /* @__PURE__ */ jsx("a-card-icon-chip", { slot: "icon", children: /* @__PURE__ */ jsx(Icon, { shape: icon }) })
         ) : (
           // Any node → used as-is (no chip).
           /* @__PURE__ */ jsx("div", { slot: "icon", children: icon })

package/dist/components/InputAutocomplete.js

@@ -54,7 +54,7 @@ const InputAutocomplete = (props) => {
           setOpen(true);
         },
         onKeyDown: (e) => {
-          if (e.key === "Enter") setOpen(false);
+          if (e.key === "Enter" && !e.defaultPrevented) setOpen(false);
         }
       }
     ),

package/dist/components/InputTime.d.ts

@@ -84,10 +84,11 @@ export interface InputTimeProps extends BaseProps, DOMEventHandlers {
 /**
  * `<InputTime>` — a segmented wall-clock time field. One boxed input (matching
  * the other inputs) with separate hour / minute / (12-hour) AM-PM sections that
- * behave as one control: each is a `role="spinbutton"` — ↑/↓ steps with wrap,
- * ←/→ moves between them, typing digits auto-advances, and AM/PM toggles with
- * ↑/↓ or `a`/`p`. Renders an `<a-input-time>` web component that owns the
- * segments, keyboard, and form value (via `ElementInternals`).
+ * behave as one control: each is a native text input — ↑/↓ steps with wrap,
+ * ←/→ crosses segments at caret boundaries, typing digits auto-advances, and
+ * AM/PM accepts its locale text or `a`/`p`. Renders an `<a-input-time>` web
+ * component that owns the segments, navigation, and form value (via
+ * `ElementInternals`).
  *
  * The clock and layout follow the locale (`en-US` → 12-hour, most others 24),
  * overridable with `hour12`. The value is a 24-hour `"HH:mm"` string; controlled

package/dist/components/Slider.d.ts

@@ -0,0 +1,89 @@
+import type { BaseProps, DOMEventHandlers } from '../general_types';
+/** A text marker displayed below the slider rail. Markers are labels only; they
+ * do not add dots or ticks to the rail. */
+export interface SliderMarker {
+    value: number;
+    label: React.ReactNode;
+}
+/** Snapshot passed to `onValueChange` and `onValueCommit`. */
+export interface SliderChangeAttrs {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    name?: string;
+}
+export interface SliderProps extends BaseProps, DOMEventHandlers {
+    /** Visible field label, shown above the rail. A string supplies the slider's
+     * accessible name; give a rich label an explicit `aria-label`. */
+    label?: React.ReactNode;
+    /** Controlled value. Update it from `onValueChange`. */
+    value?: number;
+    /** Initial uncontrolled value.
+     * @defaultValue 0 */
+    defaultValue?: number;
+    /** Lowest permitted value.
+     * @defaultValue 0 */
+    min?: number;
+    /** Highest permitted value.
+     * @defaultValue 100 */
+    max?: number;
+    /** Smallest keyboard and drag increment.
+     * @defaultValue 1 */
+    step?: number;
+    /** Form field name. The current numeric value submits under this name. */
+    name?: string;
+    /** Disables pointer and keyboard interaction. */
+    disabled?: boolean;
+    /** Colour of the filled rail. Pass a named tone or a literal CSS colour for a
+     * one-off custom tone. The unfilled rail stays neutral.
+     * @defaultValue 'neutral' */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Colour of the thumb stroke. Pass a named tone or a literal CSS colour for a
+     * one-off custom tone. Omit it to keep the thumb neutral.
+     * @defaultValue 'neutral' */
+    thumbTone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium=28px, large=32px tall.
+     * @defaultValue 'medium' */
+    size?: 'small' | 'medium' | 'large';
+    /** Thickness of both rail segments. Numbers use pixels; strings are CSS
+     * lengths. Keep it no larger than the thumb diameter.
+     * @defaultValue 2 */
+    trackSize?: number | string;
+    /** Diameter of the thumb. Numbers use pixels; strings are CSS lengths. Keep
+     * it at least as large as `trackSize`.
+     * @defaultValue 18 */
+    thumbSize?: number | string;
+    /** Fill the thumb with its resolved border colour. This follows `thumbTone`
+     * and interactive states.
+     * @defaultValue false */
+    thumbFill?: boolean;
+    /** Fully round the rail and thumb. Pass a number (px) or CSS length string
+     * for a shared custom radius. */
+    round?: boolean | number | string;
+    /** Where the live value appears. `end` puts it at the right edge of the label
+     * row. `inline` renders `Label: value`. `thumb` keeps it above the thumb.
+     * @defaultValue 'end' */
+    valueDisplay?: 'end' | 'inline' | 'thumb' | 'none';
+    /** Text inserted before the live numeric value, such as `$`. */
+    valuePrefix?: string;
+    /** Text inserted after the live numeric value, such as `%` or `°C`. */
+    valueSuffix?: string;
+    /** Compact text labels positioned below the rail. They do not add dots or
+     * ticks to the rail. */
+    markers?: SliderMarker[];
+    /** Track press behaviour. `drag-only` starts a relative grab from the current
+     * value; `jump` first moves to the press position.
+     * @defaultValue 'drag-only' */
+    trackClick?: 'drag-only' | 'jump';
+    /** Fires on every keyboard or pointer value change. */
+    onValueChange?: (event: any, attrs: SliderChangeAttrs) => void;
+    /** Fires after a drag ends and after each keyboard value change. */
+    onValueCommit?: (event: any, attrs: SliderChangeAttrs) => void;
+}
+/**
+ * Slider selects one numeric value from a range. Pressing anywhere on its rail
+ * starts a relative drag by default, so the thumb never jumps to the press point.
+ * Requires `@antadesign/anta/elements` on the client.
+ */
+export declare const Slider: ({ label, value, defaultValue, min: minProp, max: maxProp, step: stepProp, name, disabled, tone, thumbTone, size, trackSize, thumbSize, thumbFill, round, valueDisplay, valuePrefix, valueSuffix, markers, trackClick, onInput, onChange, onValueChange, onValueCommit, className, style, children, tabIndex, ...rest }: SliderProps) => any;