@antadesign/anta 0.3.18 → 0.3.20

package/README.md

@@ -1,244 +1,40 @@
 # @antadesign/anta
 
-<a href="https://antithesis.com" target="_blank" rel="noopener noreferrer">Antithesis</a> design system, **Anta**, has three layers: global CSS tokens with swappable themes, framework-agnostic web components that work in plain HTML, and JSX wrappers for React and Preact.
-
-One constraint shapes the architecture. Antithesis runs most of its UI in a Worker thread, driven by a custom reactive engine, and a component that mutates its own attributes would desync the Worker from the UI thread. So Anta's web components are **fully declarative**: they never touch their own attributes, and internal state lives in Shadow DOM, invisible to the outer document. The components carry the styling without imposing a framework, and most are stateless; the JSX wrappers exist for dynamic state and conditional rendering.
-
-## Installation
-
-```sh
-npm install @antadesign/anta   # or pnpm / bun
-```
-
-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
-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" />
-```
-
-### What you import (and why)
-
-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` | 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 focus, 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. |
-
-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` declares
-`@layer base, anta, components, utilities`, placing Anta above preflight resets
-and below your component and utility layers.
-
-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;
-```
-
-Token custom properties stay unlayered so they apply everywhere.
-
-> **Gotcha: an unlayered hard reset defeats Anta's element rules.**
->
-> ```css
-> *, *::before, *::after { box-sizing: border-box; }
-> * { margin: 0; }
-> ```
->
-> 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
-
-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
-```
-
-`/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 are idempotent, side-effect imports and safe during SSR.
-
-Use a static import in your app entry, outside components and hooks:
-
-```ts
-// src/main.tsx (or wherever your root render lives)
-import '@antadesign/anta/elements'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-createRoot(document.getElementById('root')!).render(<App />)
-```
-
-Module initialisation registers the classes before the first render, avoiding a
-flash of un-upgraded elements.
-
-> **Why not `useEffect(() => import('@antadesign/anta/elements'), [])`?**
-> `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.
-
-Choose the entry point for your runtime:
-
-- **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
-
-### React
-
-Works out of the box.
-
-### Preact with compat
-
-If your bundler aliases `react` to `preact/compat`, Anta works without setup.
-
-### Preact without compat
-
-Call `configure()` before rendering any anta components:
-
-```ts
-import { configure } from '@antadesign/anta'
-import { h, Fragment } from 'preact'
-configure(h, Fragment)
-```
-
-### TypeScript: typing raw `<a-*>` tags 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 JSX types at Anta in `tsconfig.json`:
-
-```jsonc
-{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@antadesign/anta" } }
-```
-
-Every `a-*` tag type-checks, standard HTML tags keep working, and importing
-`@antadesign/stickers` adds its tags automatically.
-
-**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'
-import type { StickerIntrinsicElements } from '@antadesign/stickers' // only if you use stickers
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements extends AntaIntrinsicElements, StickerIntrinsicElements {}
-  }
-}
-```
-
-With `@types/react` 18+ and `jsx: "react-jsx"`, JSX is module-scoped. Extend
-the `react` module instead:
-
-```ts
-import type { AntaIntrinsicElements } from '@antadesign/anta'
-
-declare module 'react' {
-  namespace JSX {
-    interface IntrinsicElements extends AntaIntrinsicElements {}
-  }
-}
-```
-
-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)
-
-Elements also work in plain HTML. Registration loads their CSS; resolve the bare
-specifier with a bundler or import map.
-
-```html
-<script type="module">
-  import '@antadesign/anta/elements'
-</script>
-
-<a-progress value="42" max="100" tone="info"></a-progress>
-```
-
-## Dark mode
-
-Add the `dark` class to any ancestor element:
-
-```html
-<div class="dark">
-  <Progress value={50} />
-</div>
-```
-
-## 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 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:
-
-```css
-@font-face {
-  font-family: "Antithesis sans";
-  src: url("/path/to/your/sans.woff2") format("woff2");
-  /* ... */
-}
-
-:root {
-  --sans-serif: "Antithesis sans", sans-serif;
-  --monospace: "Antithesis mono", monospace;
-}
-```
-
-## Browser support
-
-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 | 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`.
+**Anta** is an opinionated design system. It provides
+design tokens, declarative web components, and typed JSX wrappers. Use the same
+components in React, Preact via compat, plain HTML, and custom JSX runtimes via
+`configure()`.
+
+## Documentation for coding agents
+
+Start with [`./docs/index.md`](./docs/index.md). This path is relative to the
+root of the installed Anta package, not to the consuming application.
+
+This package includes version-specific documentation inside the installed npm
+package.
+
+Example:
+
+```text
+node_modules/
+└── @antadesign/
+    └── anta/
+        ├── README.md
+        ├── docs/
+        │   ├── index.md
+        │   ├── install-config.md
+        │   ├── theming.md
+        │   └── components/
+        │       ├── button.md
+        │       ├── dialog.md
+        │       └── ...
+        └── dist/
+```
+
+When working with Anta components:
+
+1. Read `./docs/index.md` from the installed `@antadesign/anta` package.
+2. Open only the documentation relevant to the component or feature you are using.
+3. Do **not** guess component names, props, or behavior from similarly named component libraries (e.g. MUI, Chakra UI, Radix UI, Mantine, shadcn/ui, Ant Design, etc.).
+4. Use the installed package's TypeScript declarations (`*.d.ts`) as the source of truth for the installed package version.
+5. If the Markdown documentation and TypeScript declarations disagree, prefer the TypeScript declarations, as they always correspond to the installed version.

package/dist/anta_helpers.d.ts

@@ -65,10 +65,10 @@ export declare function parseOpenState(v: string | null): 'open' | 'closed';
  *  (e.g. skipping `[disabled]` triggers) lands for every element at once. */
 export declare function installDismissTrigger(host: HTMLElement, attr: string, onDismiss: () => void): void;
 /** The six named tones every toned component shares. Anything else is a literal
- *  CSS colour the element resolves through its `--{component}-tone-source` var. */
+ *  CSS color the element resolves through its `--{component}-tone-source` var. */
 export declare const NAMED_TONES: Set<string>;
 /**
- * Inline-style helper for a custom (non-named) tone: hands the literal colour to
+ * Inline-style helper for a custom (non-named) tone: hands the literal color to
  * the element via `varName` (e.g. `--radio-tone-source`) so the element's CSS
  * derives the fill/text/border curve in oklch. Named tones return `base` unchanged.
  */

package/dist/components/Banner.d.ts

@@ -12,7 +12,7 @@ export interface BannerProps extends BaseProps {
     children?: React.ReactNode;
     /** 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.
      *  @defaultValue 'neutral' */
     tone?: "neutral" | "brand" | "info" | "success" | "warning" | "critical" | (string & {});
@@ -22,7 +22,7 @@ export interface BannerProps extends BaseProps {
     round?: boolean | number | string;
     /** 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.
      *  @defaultValue true */
     closable?: boolean;
     /** ARIA role for the strip host. `'status'` (a polite live region, so the notice
@@ -39,7 +39,7 @@ export interface BannerProps extends BaseProps {
     /** Initial dismissed state for the uncontrolled case (read once on mount). */
     defaultDismissed?: boolean;
     /** 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. */
     onDismiss?: () => void;

package/dist/components/Button.d.ts

@@ -58,7 +58,7 @@ export type ContentMode = {
  *  don't carry anchor props. (Copy is no longer a Button concern — `ButtonCopy`
  *  composes a `<a-copy>` child; see `copy-props.ts`.)
  *
- *  `href` is **optional** so a conditional URL just works: `href={maybeUrl}`
+ *  `href` is **optional**, so you can pass a conditional URL: `href={maybeUrl}`
  *  (`string | undefined`) type-checks, and a falsy href degrades to a plain
  *  button — a definite string renders `<a role="button">`, an absent / `undefined`
  *  href renders `<a-button>`, mirroring the `href != null` runtime check. Keeping

package/dist/components/Calendar.d.ts

@@ -14,8 +14,8 @@ export interface CalendarChangeAttrs {
 }
 /** Public props for `<Calendar>` — the single-date month grid. */
 export interface CalendarProps extends Omit<BaseProps, "children" | "onChange"> {
-    /** Controlled selected date — ISO `YYYY-MM-DD`. When provided, the consumer owns
-     *  selection: the grid follows this prop and a pick only *requests* a change via
+    /** Controlled selected date — ISO `YYYY-MM-DD`. When provided, the application
+     *  controls selection: the grid follows this prop and a pick only *requests* a change via
      *  `onStateChange`. Leave undefined for uncontrolled. */
     value?: string;
     /** Initial selected date for the uncontrolled case (ISO `YYYY-MM-DD`). */
@@ -53,23 +53,22 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
     /** Fired *after* the selection changes (post-apply). Not cancelable; for a
      *  controlled calendar it fires once you've updated `value`. */
     onChange?: (event: Event) => void;
-    /** Like `onChange`, but with a `{ value, name }` snapshot — the ergonomic
-     *  "just give me the new date" callback (mirrors `Input`). */
+    /** Like `onChange`, but with a `{ value, name }` snapshot as the second argument,
+     *  matching `Input`. */
     onValueChange?: (event: Event, attrs: CalendarChangeAttrs) => void;
 }
 /**
- * `<Calendar>` — a single-date month grid you pick a day from, **composed from
- * Anta components in light DOM** (nothing is hidden in a shadow root): days and
- * the prev/next chevrons are `<Button>`s, so they inherit the design system's
- * states for free — a selected day is literally a `tertiary` Button in its
- * `selected` state, toned `brand` so the active date reads in the brand color.
+ * `<Calendar>` is a single-date month grid. It uses Anta components in light DOM.
+ * Days and the previous/next chevrons are `<Button>`s, so they use the design
+ * system's button states. A selected day is a `tertiary` Button in its `selected`
+ * state, using the `brand` tone so the active date uses the brand color.
  * All date math runs on the Temporal engine
  * (`@antadesign/anta` exports `buildMonth` & friends), and the value is an ISO
  * `YYYY-MM-DD` string.
  *
- * The grid lives in a form-associated `<a-calendar>` element (which owns the
- * submitted value + reset/restore); the wrapper owns view-month, selection,
- * keyboard, and roving `tabindex` — the `RadioGroup` model. The month switcher
+ * The grid lives in a form-associated `<a-calendar>` element, which manages the
+ * submitted value, reset, and restore. The wrapper manages view month, selection,
+ * keyboard, and roving `tabindex`. The month switcher
  * is a sibling rendered *outside* the grid, so it can be extended (month/year
  * pickers) independently.
  *

package/dist/components/Card.d.ts

@@ -93,7 +93,7 @@ export interface CardProps extends BaseProps {
  * @example Link card
  * ```tsx
  * <Card href="/docs/ci" header="CI integration guide">
- *   Wire Antithesis into your pipeline in a few minutes.
+ *   Connect your CI pipeline in a few minutes.
  * </Card>
  * ```
  */

package/dist/components/Card.js

@@ -75,7 +75,7 @@ const Card = ({
         /* @__PURE__ */ jsx(Text, { slot: "header", size: "small", priority: "tertiary", tone: toneAttr, children: subtitle }),
         typeof children === "string" || typeof children === "number" ? (
           // A string / number body becomes a <Text> at secondary priority (text-2,
-          // the body colour) — stated explicitly rather than leaning on the default —
+          // the body color) — stated explicitly rather than leaning on the default —
           // following the card's tone and size. Anything else is a node the caller
           // owns, passed through untouched.
           /* @__PURE__ */ jsx(Text, { priority: "secondary", tone: toneAttr, size, children })

package/dist/components/Checkbox.d.ts

@@ -37,7 +37,7 @@ export interface CheckboxProps extends BaseProps {
      *  visual precedence; clicking it requests `true`. */
     checked?: CheckboxValue;
     /** 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.
      *  @defaultValue false */
     defaultChecked?: CheckboxValue;
     /** Disable the checkbox (no interaction, dropped from the tab order). */
@@ -51,16 +51,16 @@ export interface CheckboxProps extends BaseProps {
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Colour of the **mark** in every state — the checked-box fill *and* the
+    /** 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.
      *  @defaultValue 'neutral' */
     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 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.
@@ -82,13 +82,12 @@ export interface CheckboxProps extends BaseProps {
      *  checkbox this fires once you've updated `checked`. */
     onChange?: (event: Event) => 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`. */
     onValueChange?: (event: Event, attrs: CheckboxChangeAttrs) => void;
 }
 /**
- * Checkbox. Renders an `<a-checkbox>` web component that owns the visual
- * state; controlled via `checked` + `onStateChange`, or uncontrolled via
+ * Checkbox. Renders an `<a-checkbox>` web component that provides visual
+ * state; use `checked` with `onStateChange` for controlled use, or
  * `defaultChecked`. Label is `label` (or `children`); `hint` adds secondary
  * text under the label. Requires `@antadesign/anta/elements`.
  *

package/dist/components/Dialog.d.ts

@@ -18,7 +18,7 @@ export interface DialogProps extends Omit<BaseProps, "title"> {
     position?: "center" | "left" | "right" | "top" | "bottom" | "fullscreen";
     /** Whether the top-right ✕ button is present. It's one way to close the dialog,
      *  alongside Esc, the backdrop, a `data-dialog-close` / footer action, and your
-     *  own code; `false` just removes the ✕, it doesn't make the dialog un-closable.
+     *  own code; `false` removes the ✕ without making the dialog unclosable.
      *  @defaultValue true */
     closable?: boolean;
     /** Turn off light-dismiss: a backdrop click and Esc no longer close the dialog.

package/dist/components/Expander.d.ts

@@ -44,10 +44,9 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
      *  `number` (px) or CSS length string for a *fixed* radius that overrides the
      *  measurement (and skips it) in both states. */
     round?: boolean | number | string;
-    /** Controlled open state. When provided, the consumer owns open/close:
-     *  the expander only follows this prop, and clicking the summary just
-     *  requests a change via `onStateChange` (so a toggle can be rejected by
-     *  not updating). Leave undefined for uncontrolled. */
+    /** Controlled open state. When provided, the consumer owns open/close. Selecting
+     *  the summary requests a change through `onStateChange`; omit `open` for
+     *  uncontrolled use. */
     open?: boolean;
     /** Initial open state for the uncontrolled case. */
     defaultOpen?: boolean;
@@ -64,12 +63,12 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
 /**
  * `<Expander>` — a collapsible disclosure section.
  *
- * A pure, stateless pass-through to `<a-expander>`: the element owns all
+ * A pure, stateless pass-through to `<a-expander>`: the element handles all
  * interaction (toggle, keyboard, ARIA, animation), so the wrapper holds
  * no state and grabs no ref — it only maps props to attributes (safe
  * wherever the host DOM is reconciled, incl. off the UI thread).
  *
- * Uncontrolled (`defaultOpen`): the element owns its open state. The wrapper
+ * Uncontrolled (`defaultOpen`): the element updates its open state. The wrapper
  * emits `default-state="open"` — never `state` — so the DOM carries no stale
  * controlled attribute. Controlled (`open` + `onStateChange`): the wrapper
  * emits `state="open" | "closed"`; the element treats the attribute as the

package/dist/components/Input.d.ts

@@ -19,7 +19,7 @@ export interface InputChangeAttrs {
 export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Extra content rendered directly under the field, above the hint/error (it
      *  pushes the message down). A no-box child like an Anta `<Tooltip>` takes no
-     *  space and just anchors to the field — consistent with how tooltips attach
+     *  space and anchors to the field — consistent with how tooltips attach
      *  to any other element. Use the named `leading` / `trailing` props for
      *  in-field content. */
     children?: React.ReactNode;
@@ -41,7 +41,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  success → `circle-check`, info → `info`, brand → `circle-small-solid`); pass a
      *  shape to override, or `false` to drop it. `neutral` has no default glyph. */
     statusIcon?: IconShape | (string & {}) | false;
-    /** Custom accent colour — any literal CSS colour tints the resting + hover
+    /** Custom accent color — any literal CSS color tints the resting + hover
      *  border (focus ring stays the global `--focus-ring`). For consistency with the
      *  other controls' custom-tone knob; a `status` still overrides for validation. */
     tone?: string;
@@ -92,6 +92,9 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     name?: string;
     /** Placeholder shown when empty. */
     placeholder?: string;
+    /** Ellipsize an overflowing single-line value. Read-only inputs already do
+     * this; use `truncate` when an editable field should keep the same treatment. */
+    truncate?: boolean;
     /** Disable the field. */
     disabled?: boolean;
     /** Make the field read-only. */
@@ -167,4 +170,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, truncate, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -51,6 +51,7 @@ const Input = ({
   inputMode,
   name,
   placeholder,
+  truncate,
   disabled,
   readOnly,
   required,
@@ -93,6 +94,7 @@ const Input = ({
       type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,
+      truncate: presence(truncate),
       disabled: presence(disabled),
       readonly: presence(readOnly),
       required: presence(required),
@@ -124,7 +126,7 @@ const Input = ({
         label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
         resolvedLeading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: resolvedLeading }),
         resolvedClearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
-        // the element's `clear` slot — the element owns its visibility (shown
+        // the element's `clear` slot — the element controls its visibility (shown
         // only when filled + editable). It fires the bubbling `clearrequest`
         // event via a-button's global listener, so clearing works even without
         // framework hydration; the element turns that into clearclick→clear().

package/dist/components/InputAutocomplete.d.ts

@@ -8,7 +8,7 @@ export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
     /** Controlled value: the field's text, a **free** string not constrained to a
      *  suggestion. Leave undefined for uncontrolled. */
     value?: string;
-    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    /** Initial value for uncontrolled use. */
     defaultValue?: string;
     /** Fires as the text changes (typing, picking a suggestion, or clearing) with
      *  the new field text. */
@@ -17,8 +17,8 @@ export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
     onSelect?: (option: SelectOption) => void;
     /** How suggestions match the text. `true` uses the built-in case-insensitive
      *  substring match on `value` / `label` / `hint`; a function `(option, query) =>
-     *  boolean` does custom matching; `false` shows `suggestions` verbatim so you
-     *  can filter them yourself (async / remote).
+     *  boolean` uses a custom matcher; `false` shows `suggestions` unchanged for
+     *  application-provided async or remote filtering.
      *  @defaultValue true */
     filter?: boolean | ((option: SelectOption, query: string) => boolean);
     /** Placeholder text. */
@@ -30,7 +30,7 @@ export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Status icon override, or `false` to drop it. */
     statusIcon?: IconShape | (string & {}) | false;
-    /** Custom accent colour — a named tone or any CSS colour. */
+    /** Custom accent color — a named tone or any CSS color. */
     tone?: string;
     /** Show a clear button while the field has text. */
     clearable?: boolean;
@@ -48,10 +48,10 @@ export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
     trailing?: React.ReactNode;
 }
 /**
- * `<InputAutocomplete>` — a text field whose value is a free string, with a
- * suggestion dropdown that assists without constraining. Typing something not in
- * the list is valid and stays the value; picking a suggestion just fills the
- * field. For a value that MUST be one of the options, use `Select` with `filter`.
+ * `<InputAutocomplete>` is a text field with a suggestion dropdown. Its value is
+ * a free-form string. Text not in the list remains valid, and choosing a
+ * suggestion fills the field. Use `Select` with `filter` when the value must be
+ * one of the options.
  *
  * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
  * Requires `@antadesign/anta/elements` (client-side only).

package/dist/components/InputDate.css

@@ -0,0 +1 @@
+@layer anta{a-input-date-time-container{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}}

package/dist/components/InputDate.d.ts

@@ -1,6 +1,7 @@
 import type { BaseProps } from '../general_types';
 import type { IconShape } from '../elements/a-icon.shapes';
 import { type MenuProps } from './Menu';
+import './InputDate.css';
 /** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO value
  *  (`''` when cleared) plus the field name (mirrors `Input` / `Calendar`). */
 export interface InputDateChangeAttrs {