@d4gger/design-system 2.7.0 → 3.0.0

package/dist/docs/{sonner.md → components/sonner.md}

@@ -3,20 +3,13 @@ title: Sonner
 status: canonical
 category: Components
 archetype: adapter-backed
-package_path: packages/d4gger-design-system/src/components/sonner/Sonner.tsx
-css_path: packages/d4gger-design-system/src/styles/components/sonner.css
-props_path: packages/d4gger-design-system/src/components/sonner/sonner.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Sonner.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/overlay.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - sonner
 ---
 
 # Sonner
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{sortable-list.md → components/sortable-list.md}

@@ -3,8 +3,6 @@ title: SortableList
 status: canonical
 category: Components
 archetype: adapter-backed
-package_path: packages/d4gger-design-system/src/components/sortableList/SortableList.tsx
-css_path: packages/d4gger-design-system/src/styles/components/sortable-list.css
 depends_on: ["@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities"]
 ---
 
@@ -18,6 +16,15 @@ Optional dnd-kit-backed vertical reordering for pointer, touch, and keyboard sen
 
 `SortableList.Root`, `Item`, `Handle`, and `Overlay`. Root receives ordered `ids`, optional `disabledIds`, localized announcements, and emits `{ ids, activeIndex, overIndex }`. Handles are visible named buttons. Cancellation does not emit, successful moves announce position, restore handle focus, and respect reduced motion. Persistence is consumer-owned.
 
+Reorder announcements render through the package `VisuallyHidden` primitive so
+the assertive live region remains available to assistive technology without
+creating a second package-owned hiding utility.
+
+The drag overlay renders the dragged item's own content (falling back to the
+raw id when the item cannot be resolved). Disabled items keep a focusable
+handle marked `aria-disabled`; the handle shows `cursor: not-allowed` and the
+row stays dimmed, and dnd-kit never lifts a disabled item.
+
 Import `SortableList` from `@d4gger/design-system/sortable-list`. It is intentionally absent from the root and `components` barrels so consumers that do not use reordering are not required to install the optional `@dnd-kit/*` peers.
 
 ## Playground demo spec

package/dist/docs/{spinner.md → components/spinner.md}

@@ -3,20 +3,13 @@ title: Spinner
 status: canonical
 category: Primitives
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/spinner/Spinner.tsx
-css_path: packages/d4gger-design-system/src/styles/components/spinner.css
-props_path: packages/d4gger-design-system/src/components/spinner/spinner.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Spinner.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/display.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Icon (loader)
 ---
 
 # Spinner
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -43,7 +36,9 @@ The icon is internal. The public surface is a single `Spinner` component.
 |---|---|---|---|---|---|
 | `asChild` | `boolean` | `false` | no | Renders the host through `Slot` from `@radix-ui/react-slot`; consumer supplies the host element. | no |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Selects the size modifier class and the icon size; writes `data-size` on the host. | no |
-| `label` | `string` | `'Loading'` | no | Accessible label forwarded to `aria-label` on the host. Override for locale or context. | no |
+| `label` | `string` | `'Loading'` | no | Accessible label forwarded to `aria-label` on the host. Override for locale or context. With `value`, announces `"${label} ${value}%"`. Terminal states announce `Done` / `Error`. | no |
+| `value` | `number` | `undefined` | no | Determinate progress 0–100; renders the ring arc instead of the spinning icon. Read off props directly (not in the prop-def bag — same pattern as CopyButton's `value`). `>= 100` completes to `done`. | no |
+| `state` | `'loading' \| 'done' \| 'error'` | `'loading'` | no | Terminal states render a static check (success tones) or x (error tones) with no animation; writes `data-state`. | no |
 | `className` | `string` | `undefined` | no | Extra classes appended to `dsx-spinner`. | no |
 | `style` | `React.CSSProperties` | `undefined` | no | Extra inline style forwarded to the host. | no |
 | `children` | `React.ReactNode` | `undefined` | no | Optional slotted content when `asChild` is set. | no |
@@ -66,12 +61,14 @@ Rules that apply to this row:
 | Attribute | Allowed values | Class | CSS file |
 |---|---|---|---|
 | `data-size` | `sm`, `md`, `lg` | `dsx-spinner--sm`, `dsx-spinner--md`, `dsx-spinner--lg` | `spinner.css` |
+| `data-state` | `loading`, `done`, `error` | `.dsx-spinner[data-state='done']` (success tones, static icon), `.dsx-spinner[data-state='error']` (error tones, static icon) | `spinner.css` |
 
 **Slot classes:**
 
 | Slot | Class | CSS file |
 |---|---|---|
 | Spinner icon | `dsx-spinner__icon` | `spinner.css` |
+| Determinate ring | `dsx-spinner__ring`, `dsx-spinner__ring-track`, `dsx-spinner__ring-fill` | `spinner.css` |
 
 **Responsive behavior:**
 
@@ -79,7 +76,9 @@ Rules that apply to this row:
 
 **Reduced motion:**
 
-- The CSS file does not declare a reduced-motion block for the spin animation. The component relies on the global `prefers-reduced-motion` stylesheet. Consumers that need to fully pause the animation should layer a media-query override or replace `Spinner` with a static placeholder for the affected users.
+- `spinner.css` collapses the indeterminate spin to `animation: none` under
+  `@media (prefers-reduced-motion: reduce)`. Determinate, done, and error states are
+  static and need no guard.
 
 ## Token mapping
 

package/dist/docs/{stack.md → components/stack.md}

@@ -3,13 +3,6 @@ title: Stack
 status: canonical
 category: Foundations
 archetype: layout-primitive
-package_path: packages/d4gger-design-system/src/layout/Layout.tsx
-css_path: packages/d4gger-design-system/src/styles/components/flex.css
-props_path: packages/d4gger-design-system/src/layout/layout.props.ts
-test_path: packages/d4gger-design-system/src/test/foundations/Layout.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/layout.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Box
   - Flex
@@ -17,11 +10,11 @@ depends_on:
 
 # Stack
 
-> Source of truth: the package source at `package_path`. The spec mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
-A flex-based stack primitive with a single `gap` token and a `direction` default of `column`. `Stack` is a thin extension of `Flex` optimized for vertical or horizontal child stacking in product surfaces. It is the only layout primitive that does not have a `components/` mirror; it lives exclusively under `foundations/`.
+A flex-based stack primitive with a single `gap` token and a `direction` default of `column`. `Stack` is a thin extension of `Flex` optimized for vertical or horizontal child stacking in product surfaces. It is the only layout primitive that does not have a `components/` mirror; it lives in `src/layout/Layout.tsx` (re-exported via `src/foundations/index.ts`).
 
 ## Anatomy & slots
 

package/dist/docs/{stat-card.md → components/stat-card.md}

@@ -3,13 +3,6 @@ title: StatCard
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/statCard/StatCard.tsx
-css_path: packages/d4gger-design-system/src/styles/components/stat-card.css
-props_path: packages/d4gger-design-system/src/components/statCard/statCard.props.ts
-test_path: packages/d4gger-design-system/src/test/components/StatCard.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/display.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Card
   - Text
@@ -19,7 +12,7 @@ depends_on:
 
 # StatCard
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{status.md → components/status.md}

@@ -3,17 +3,12 @@ title: Status
 status: canonical
 category: Components
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/status/Status.tsx
-css_path: packages/d4gger-design-system/src/styles/components/status.css
-props_path: packages/d4gger-design-system/src/components/status/status.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Status.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on: []
 ---
 
 # Status
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{stepper.md → components/stepper.md}

@@ -3,13 +3,6 @@ title: Stepper
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/stepper/Stepper.tsx
-css_path: packages/d4gger-design-system/src/styles/components/stepper.css
-props_path: packages/d4gger-design-system/src/components/stepper/stepper.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Stepper.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/navigation.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - Progress
   - Separator
@@ -19,7 +12,7 @@ depends_on:
 
 # Stepper
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{strong.md → components/strong.md}

@@ -3,17 +3,12 @@ title: Strong
 status: canonical
 category: Primitives
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/strong/Strong.tsx
-css_path: packages/d4gger-design-system/src/styles/components/strong.css
-props_path: packages/d4gger-design-system/src/components/strong/strong.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Strong.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on: []
 ---
 
 # Strong
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -110,7 +105,7 @@ Rules:
 
 ## Playground demo spec
 
-The demo file at `demo_path` exposes the component to the playground. The playground lives at `apps/playground/app/` (Next.js app router, no per-component routes today). The `demo_path` recorded here is the current playground root; the spec assumes a single shared page that renders all components. Per-component routes are an aspirational target and not yet present in the repo.
+`Strong` is registered in `apps/playground/lib/registry/typography.tsx` under the `strong` key. The registry entry imports `strongPropDefs` and renders the component with a sample strong span. Per-component route: `/docs/strong`.
 
 **Default story:**
 
@@ -126,7 +121,7 @@ The demo file at `demo_path` exposes the component to the playground. The playgr
 
 **Token story:**
 
-- Renders inside a `Theme` wrapper. Strong has no accent-color or surface dependencies, so the story asserts the bold weight is visually unchanged between `accentColor="amber"`, `accentColor="silver"`, and `accentColor="bronze"`.
+- Renders inside a `Theme` wrapper. Strong has no accent-color or surface dependencies, so the story asserts the bold weight is visually unchanged between `accentColor="rift"`, `accentColor="warp"`, and `accentColor="ray"`.
 
 **A11y story:**
 

package/dist/docs/{switch.md → components/switch.md}

@@ -3,19 +3,12 @@ title: Switch
 status: canonical
 category: Primitives
 archetype: radix-compound
-package_path: packages/d4gger-design-system/src/components/switch/Switch.tsx
-css_path: packages/d4gger-design-system/src/styles/components/switch.css
-props_path: packages/d4gger-design-system/src/components/switch/switch.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Switch.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/forms.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on: []
 ---
 
 # Switch
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{tab-nav.md → components/tab-nav.md}

@@ -2,18 +2,13 @@
 title: TabNav
 status: canonical
 category: Components
-archetype: primitive
-package_path: packages/d4gger-design-system/src/components/tabNav/TabNav.tsx
-css_path: packages/d4gger-design-system/src/styles/components/tab-nav.css
-props_path: packages/d4gger-design-system/src/components/tabNav/tabNav.props.ts
-test_path: packages/d4gger-design-system/src/test/components/TabNav.test.tsx
-demo_path: apps/playground/app/page.tsx
+archetype: composite
 depends_on: []
 ---
 
 # TabNav
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{table-of-contents.md → components/table-of-contents.md}

@@ -3,8 +3,6 @@ title: TableOfContents
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/tableOfContents/TableOfContents.tsx
-css_path: packages/d4gger-design-system/src/styles/components/table-of-contents.css
 ---
 
 # TableOfContents

package/dist/docs/{table.md → components/table.md}

@@ -3,21 +3,14 @@ title: Table
 status: canonical
 category: Components
 archetype: composite
-package_path: packages/d4gger-design-system/src/components/table/Table.tsx
-css_path: packages/d4gger-design-system/src/styles/components/table.css
 responsive_css_path: packages/d4gger-design-system/src/styles/responsive/tableLayout.css
-props_path: packages/d4gger-design-system/src/components/table/table.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Table.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/data.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - ScrollArea
 ---
 
 # Table
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/{tabs.md → components/tabs.md}

@@ -3,22 +3,14 @@ title: Tabs
 status: canonical
 category: Components
 archetype: radix-compound
-package_path: packages/d4gger-design-system/src/components/tabs/Tabs.tsx
-css_path: packages/d4gger-design-system/src/styles/components/tabs.css
-props_path: packages/d4gger-design-system/src/components/tabs/tabs.props.ts
-test_path: packages/d4gger-design-system/src/test/components/Tabs.test.tsx
-demo_path: apps/playground/app/(themeable)/docs/[component]/page.tsx
-playground_registry_path: apps/playground/lib/registry/navigation.tsx
-playground_manifest_path: apps/playground/lib/component-manifest.ts
 depends_on:
   - "@radix-ui/react-tabs (the underlying Radix primitive; `Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, `Tabs.Content` proxy to it)"
   - "Slot (the DS-local `Slot` re-export used by `Tabs.Indicator` and `Tabs.ContentGroup` for `asChild`)"
-  - _internal/helpers/extractProps (turns the prop defs on `Tabs`, `Tabs.List`, `Tabs.Trigger`, and `Tabs.Content` into merged class + style output)
 ---
 
 # Tabs
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 

package/dist/docs/components/tag.md

@@ -0,0 +1,88 @@
+---
+title: Tag
+status: canonical
+category: Primitives
+archetype: primitive
+depends_on:
+  - Icon
+---
+
+# Tag
+
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
+
+## Purpose
+
+The single dismissible label chip. Badge is the static status/metadata token; Pills is the
+filter cluster; Status is the dot indicator; Tag is the one interactive chip with an
+optional remove action. Use for active filters, selected values, and removable labels.
+
+## Anatomy & slots
+
+**Parent:** `Tag` (flat export with internal slots).
+
+**Slots:**
+
+| Slot | Class | Role |
+|---|---|---|
+| label | `dsx-tag__label` | Visible text. |
+| remove | `dsx-tag__remove` | Dismiss button, rendered only when `onRemove` is set. |
+
+## Props contract
+
+| Prop | Type | Default | Required | Description | Responsive |
+|---|---|---|---|---|---|
+| `variant` | `'default' \| 'soft' \| 'outline'` | `'default'` | no | Visual treatment; writes `data-variant`. `soft` is the accent-3 family recipe. | no |
+| `size` | `'sm' \| 'md'` | `'md'` | no | Height scale; writes `data-size`. | no |
+| `color` | `string` | `undefined` | no | Accent color; writes `data-accent-color`. | no |
+| `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `undefined` | no | Corner roundness; writes `data-radius`. Root defaults to pill. | no |
+| `highContrast` | `boolean` | `false` | no | High-contrast fill; writes `data-high-contrast="true"`. | no |
+| `onRemove` | `() => void` | `undefined` | no | When set, renders the remove button. Read off props directly (not in the prop-def bag). | no |
+| `removeLabel` | `string` | `'Remove'` | no | Accessible name for the remove button. Read off props directly. | no |
+| `asChild` | `boolean` | `false` | no | Renders through `Slot`. Remove button is suppressed in this mode. | no |
+
+## CSS class contract
+
+**Root class:** `dsx-tag`
+
+| Attribute | Allowed values | Class | CSS file |
+|---|---|---|---|
+| `data-variant` | `default`, `outline` | `.dsx-tag`, `.dsx-tag:where([data-variant='outline'])` | `tag.css` |
+| `data-size` | `sm`, `md` | `.dsx-tag:where([data-size='sm'])` etc. | `tag.css` |
+| `data-radius` | `none`, `sm`, `md`, `lg`, `full` | `.dsx-tag:where([data-radius='...'])` | `tag.css` |
+| `data-high-contrast` | `true` | `.dsx-tag:where([data-high-contrast='true'])` | `tag.css` |
+
+## Token mapping
+
+| Property | Token | Role |
+|---|---|---|
+| Background (default) | `var(--dsx-color-accent-surface)` | Soft accent fill. |
+| Text (default) | `var(--dsx-color-accent-indicator)` | Accent foreground. |
+| Background (outline) | `transparent` | Outline fill. |
+| Border (outline) | `var(--dsx-color-outline)` | Outline edge. |
+| Background (HC) | `var(--dsx-color-high-contrast)` | High-contrast fill. |
+| Remove hover | `var(--dsx-effect-hover-ghost)` | Dismiss hover wash. |
+| Focus (remove) | `var(--dsx-shadow-focus-ring)` | Visible focus ring. |
+
+Rules:
+
+- No raw color, spacing, radius, or motion values in `tag.css`.
+- All variant/size selectors use `:where()` (specificity gate 0,2,0).
+
+## Motion contract
+
+| Region | Token | Default | Reduced |
+|---|---|---|---|
+| Remove hover (`background-color`) | `var(--dsx-motion-duration-fast, 150ms)` | Washes the dismiss button on hover. | `transition: none` inside `@media (prefers-reduced-motion: reduce)`. |
+
+## Accessibility
+
+- Host is a `<span>`; the remove control is a real `<button type="button">` with an
+  accessible name (`removeLabel`, default `'Remove'`).
+- Remove button is keyboard-focusable with a visible focus ring.
+- `asChild` suppresses the remove button — the consumer owns dismissal semantics there.
+
+## Playground demo spec
+
+- Variants row (default, outline), sizes row (sm, md), removable row (with `onRemove`),
+  high-contrast row.

package/dist/docs/{tags-input.md → components/tags-input.md}

@@ -3,11 +3,6 @@ title: TagsInput
 status: canonical
 category: Components
 archetype: primitive
-package_path: packages/d4gger-design-system/src/components/tagsInput/TagsInput.tsx
-css_path: packages/d4gger-design-system/src/styles/components/tags-input.css
-props_path: packages/d4gger-design-system/src/components/tagsInput/tagsInput.props.ts
-test_path: packages/d4gger-design-system/src/test/components/TagsInput.test.tsx
-demo_path: apps/playground/app/page.tsx
 depends_on:
   - Input (token-aligned input shell; the visual treatment is reused via `dsx-input-shell`-adjacent classes but the runtime does not import the `Input` component)
   - Badge (the per-tag chip uses the same surface tokens as `Badge` and shares the label-small typography ramp)
@@ -17,7 +12,7 @@ depends_on:
 
 # TagsInput
 
-> Source of truth: the package source at `package_path`. The spec file mirrors the source. Edits to the spec must land in the source in the same change, or the QA flags will fire.
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
 
 ## Purpose
 
@@ -42,6 +37,11 @@ The implementation is intentionally written in source rather than by composing t
 | `onChange` | `(value: string[]) => void` | `undefined` | no | Called with the next tag array on every change. | no |
 | `placeholder` | `string` | `'Add tag...'` | no | Placeholder text for the input. Only shown when there are zero tags. | no |
 | `maxTags` | `number` | `undefined` | no | Maximum number of tags. Adding a tag that would exceed `maxTags` is a no-op. | no |
+| `delimiter` | `string` | `','` | no | Split character: typing it commits the current text as tags, and paste splits on it. Single-character delimiters commit on keypress. | no |
+| `addOnPaste` | `boolean` | `false` | no | When `true`, pasting text splits it on the delimiter into multiple tags. | no |
+| `addOnBlur` | `boolean` | `false` | no | When `true`, blur commits the current text as a tag instead of discarding it. | no |
+| `disabled` | `boolean` | `false` | no | Disables input and remove buttons; root takes `dsx-tags-input--disabled` + `data-disabled`. | no |
+| `invalid` | `boolean` | `false` | no | Error state: container paints the error border, input carries `aria-invalid`. | no |
 | `variant` | `'surface' \| 'classic' \| 'ghost'` | `'surface'` | no | Visual treatment for the container. `'classic'` adds an elevated surface; `'ghost'` removes border and background until focused. | no |
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Control height and inner padding. Drives the `data-size` attribute and the size-specific CSS overrides. | no |
 | `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `undefined` | no | Container corner radius override. Drives the `data-radius` attribute. | no |