banhaten 0.5.0 → 0.6.0

package/docs/design-system/components/input-group.md

@@ -1,60 +1,60 @@
-# Input Group
-
-Input Group provides a tokenized shell for text inputs with protocol add-ons, prefixes, suffixes, and inline actions.
-
-## API
-
-```tsx
-<InputGroup>
-  <InputGroupAddon>https://</InputGroupAddon>
-  <InputGroupInput aria-label="Workspace URL" />
-  <InputGroupButton>Save</InputGroupButton>
-</InputGroup>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `InputGroup` | shared input shell |
-| `InputGroupAddon` | prefix or suffix content |
-| `InputGroupInput` | native input |
-| `InputGroupButton` | inline action |
-
-| Prop | Values |
-| --- | --- |
-| `size` | `md`, `lg` |
-| `variant` | `default`, `soft` |
-| `state` | `default`, `error` |
-
-## Token Contract
-
-Input Group reuses Banhaten input width, height, radius, border, shadow, typography, and focus tokens.
-
-## RTL
-
-Use logical add-on order. Border placement uses logical inline sides.
-
-## Accessibility
-
-Give `InputGroupInput` an accessible label through `aria-label`, `aria-labelledby`, or a surrounding Field.
-
-## Install
-
-```bash
-npx banhaten add input-group
-```
-
-## Examples
-
-Primary registry example: `examples/input-group-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs input-group` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Add-ons and input segments use logical borders and inherited direction.
-- `textDirection`: Input text uses text-start so mixed Arabic and English values align naturally.
-
+# Input Group
+
+Input Group provides a tokenized shell for text inputs with protocol add-ons, prefixes, suffixes, and inline actions.
+
+## API
+
+```tsx
+<InputGroup>
+  <InputGroupAddon>https://</InputGroupAddon>
+  <InputGroupInput aria-label="Workspace URL" />
+  <InputGroupButton>Save</InputGroupButton>
+</InputGroup>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `InputGroup` | shared input shell |
+| `InputGroupAddon` | prefix or suffix content |
+| `InputGroupInput` | native input |
+| `InputGroupButton` | inline action |
+
+| Prop | Values |
+| --- | --- |
+| `size` | `md`, `lg` |
+| `variant` | `default`, `soft` |
+| `state` | `default`, `error` |
+
+## Token Contract
+
+Input Group reuses Banhaten input width, height, radius, border, shadow, typography, and focus tokens.
+
+## RTL
+
+Use logical add-on order. Border placement uses logical inline sides.
+
+## Accessibility
+
+Give `InputGroupInput` an accessible label through `aria-label`, `aria-labelledby`, or a surrounding Field.
+
+## Install
+
+```bash
+npx banhaten add input-group
+```
+
+## Examples
+
+Primary registry example: `examples/input-group-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs input-group` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Add-ons and input segments use logical borders and inherited direction.
+- `textDirection`: Input text uses text-start so mixed Arabic and English values align naturally.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/input-otp.md

@@ -1,59 +1,59 @@
-# Input OTP
-
-Input OTP captures one-time passcodes and short verification codes. It reuses the Banhaten Input surface and typography while adding grouped slots, paste distribution, hidden form value, masking, custom length, and RTL-aware keyboard navigation.
-
-## API
-
-```tsx
-<InputOTP
-  label="Verification code"
-  length={6}
-  name="code"
-  onValueChange={setCode}
-/>
-```
-
-| Prop | Values |
-| --- | --- |
-| `value`, `defaultValue` | controlled or uncontrolled string |
-| `length` | slot count |
-| `groupPattern` | array of slot group sizes |
-| `masked` | `boolean` |
-| `variant` | `default`, `soft` |
-| `size` | `md`, `lg` |
-| `state` | `default`, `filled`, `error`, `disabled` |
-
-## Token Contract
-
-Input OTP uses Input field tokens for surfaces, typography, focus, border, error, helper text, labels, slot gaps, and disabled states.
-
-## RTL
-
-Slot groups inherit direction. Arrow navigation mirrors in RTL so visual previous and next follow the rendered direction.
-
-## Accessibility
-
-Provide a clear label and helper text describing how many digits are expected. The hidden form value lets the component participate in standard form submission.
-
-## Install
-
-```bash
-npx banhaten add input-otp
-```
-
-## Examples
-
-Primary registry example: `examples/input-otp-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs input-otp` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `keyboard`: Arrow navigation mirrors for RTL: visual previous and next follow the inherited direction.
-- `spacing`: Slot groups, separators, labels, and helper text use inherited direction plus Input spacing tokens.
-- `composition`: Each slot reuses the Banhaten Input surface and control typography instead of a separate field style.
-
+# Input OTP
+
+Input OTP captures one-time passcodes and short verification codes. It reuses the Banhaten Input surface and typography while adding grouped slots, paste distribution, hidden form value, masking, custom length, and RTL-aware keyboard navigation.
+
+## API
+
+```tsx
+<InputOTP
+  label="Verification code"
+  length={6}
+  name="code"
+  onValueChange={setCode}
+/>
+```
+
+| Prop | Values |
+| --- | --- |
+| `value`, `defaultValue` | controlled or uncontrolled string |
+| `length` | slot count |
+| `groupPattern` | array of slot group sizes |
+| `masked` | `boolean` |
+| `variant` | `default`, `soft` |
+| `size` | `md`, `lg` |
+| `state` | `default`, `filled`, `error`, `disabled` |
+
+## Token Contract
+
+Input OTP uses Input field tokens for surfaces, typography, focus, border, error, helper text, labels, slot gaps, and disabled states.
+
+## RTL
+
+Slot groups inherit direction. Arrow navigation mirrors in RTL so visual previous and next follow the rendered direction.
+
+## Accessibility
+
+Provide a clear label and helper text describing how many digits are expected. The hidden form value lets the component participate in standard form submission.
+
+## Install
+
+```bash
+npx banhaten add input-otp
+```
+
+## Examples
+
+Primary registry example: `examples/input-otp-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs input-otp` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `keyboard`: Arrow navigation mirrors for RTL: visual previous and next follow the inherited direction.
+- `spacing`: Slot groups, separators, labels, and helper text use inherited direction plus Input spacing tokens.
+- `composition`: Each slot reuses the Banhaten Input surface and control typography instead of a separate field style.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

package/docs/design-system/components/input.md

@@ -1,111 +1,113 @@
-# Input
-
-Input is the text-entry field primitive for forms, filters, search, numeric entry, tags, shortcuts, add-ons, and action-adorned fields. It supports default and soft variants, md/lg sizing, helper and error text, and RTL-safe slot placement.
-
-## API
-
-```tsx
-<Input label="Email" placeholder="name@example.com" />
-<Input label="Email" isRequired placeholder="name@example.com" />
-<Input state="error" label="Amount" message="Enter a valid amount" />
-```
-
-| Prop | Type / values | Default | Notes |
-| --- | --- | --- | --- |
-| `kind` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` | `default` | Selects the input composition. |
-| `variant` | `default`, `soft` | `default` | Selects the input surface. |
-| `size` | `md`, `lg` | `lg` | Selects the control height. |
-| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
-| `label`, `message` | `ReactNode` | `null` | Their presence enables the corresponding text rows unless explicitly disabled. |
-| `isRequired` | `boolean` | `false` | Shows the required marker and sets `aria-required="true"` without enabling native browser validation. Use the native `required` prop when constraint validation is intended. |
-| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default at-sign icon. |
-| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the 20px leading slot; direct SVG/image glyphs normalize to 16px. `false` removes it. |
-| `hasInformationIcon` | `boolean` | `false` | Set true to show the default information icon. |
-| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
-| `shortcutKeys` | `readonly string[]` | `["Mod", "K"]` | For `kind="shortcut"`, renders one compact, platform-aware Shortcut chip. |
-| `shortcut` | `ReactNode` | `null` | Deprecated compact-chip content escape hatch; prefer `shortcutKeys`. |
-| `buttonProps` | `InputActionButtonProps` | `undefined` | Native button events, ref, disabled state, class name, and ARIA attributes for button and dropdown kinds. Defaults to `type="button"`. |
-| `decreaseButtonProps`, `increaseButtonProps` | `InputStepperButtonProps` | `undefined` | Native stepper-button props, excluding children and type. Override `aria-label` for localization. Calling `preventDefault()` in `onClick` cancels the step. |
-| `value`, `defaultValue`, `onChange` | Native input props | `undefined` | Quantity buttons and typing use the same `onChange` contract. Use `value` with `onChange` for controlled fields, or `defaultValue` for uncontrolled fields. |
-| `min`, `max`, `step` | Native number-input props | Native defaults | Quantity kinds always render `type="number"` and use browser stepping rules. With `step="any"`, the buttons step by one while typing remains unrestricted. |
-
-## Quantity and actions
-
-```tsx
-const [quantity, setQuantity] = React.useState("1")
-
-<Input
-  kind="quantity"
-  label="Quantity"
-  quantityLabel="Quantity"
-  min={0}
-  max={10}
-  step={1}
-  value={quantity}
-  onChange={(event) => setQuantity(event.currentTarget.value)}
-/>
-
-<Input
-  kind="trailing-button"
-  label="Search"
-  buttonLabel="Search"
-  value={query}
-  onChange={(event) => setQuery(event.currentTarget.value)}
-  buttonProps={{ onClick: () => runSearch(query) }}
-/>
-```
-
-Quantity buttons do not submit forms. They update uncontrolled values directly,
-notify `onInput` and `onChange`, and let the parent accept or reject a controlled
-change. Steps that cannot move within the bounds emit no change. `disabled`,
-`state="disabled"`, and `readOnly` disable both steppers; per-button `disabled`
-can restrict one direction.
-
-Dropdown kinds expose a trigger. Connect the popup action and its accessibility
-state through `buttonProps.onClick`, `aria-haspopup`, `aria-expanded`,
-`aria-controls`, and `ref`. For a menu library that composes its trigger with
-`asChild`, use `InputGroup` with `InputGroupButton` and the library's trigger.
-Button events bubble normally and retain button focus.
-
-## Migration
-
-Input no longer adds the default at-sign or information icon when their props are omitted. Add `hasLeadingIcon` or `hasInformationIcon` to retain either previous default, or supply a custom `leadingIcon` or `trailingIcon` to enable that slot. Explicit `false` always removes the corresponding slot.
-
-## Sizing rule
-
-Use Input without a `size` or `density` override in standard product UI. The inherited default is `lg` (36px), and it is the expected treatment for forms, search, filters, and verification flows. Use `density="compact"` only when the surrounding context is genuinely constrained, such as a dense desktop table or a compact toolbar, and apply the same semantic density to the other controls in that row. Do not reduce inputs merely to make a preview or card composition fit.
-
-## Token Contract
-
-Input consumes Banhaten field, control, typography, spacing, border, radius, content, disabled, error, and focus tokens. Its default size is `lg` (36px); shortcut Inputs use the Figma 8px inline padding, 20px icon slot, 16px glyph, and shared compact Shortcut. Add-on and button segments should use logical borders and shared field tokens.
-
-## RTL
-
-Input uses logical start/end slots and `text-start`. Labels, values, add-ons, tags, and helper text use `dir="auto"` where string copy is rendered.
-
-## Accessibility
-
-Connect labels and helper/error text through the component props when possible. `isRequired` communicates the required state to assistive technology without changing form-submission behavior; use native `required` when the browser should enforce the constraint. Use `state="error"` with visible error copy instead of relying only on red borders.
-
-## Install
-
-```bash
-npx banhaten add input
-```
-
-## Examples
-
-Primary registry example: `examples/input-demo.tsx`.
-Controlled quantity and action example: `examples/input-actions-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs input` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" so Arabic and English labels, values, add-ons, tags, and helper text align naturally.
-- `spacing`: Uses logical start/end borders and inherited direction so leading and trailing segments mirror in RTL.
-
+# Input
+
+Input is the text-entry field primitive for forms, filters, search, numeric entry, tags, shortcuts, add-ons, and action-adorned fields. It supports default and soft variants, md/lg sizing, helper and error text, and RTL-safe slot placement.
+
+## API
+
+```tsx
+<Input label="Email" placeholder="name@example.com" />
+<Input label="Email" isRequired placeholder="name@example.com" />
+<Input state="error" label="Amount" message="Enter a valid amount" />
+```
+
+| Prop | Type / values | Default | Notes |
+| --- | --- | --- | --- |
+| `kind` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` | `default` | Selects the input composition. |
+| `variant` | `default`, `soft` | `default` | Selects the input surface. |
+| `size` | `md`, `lg` | `lg` | Selects the control height. |
+| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
+| `label`, `message` | `ReactNode` | `null` | Their presence enables the corresponding text rows unless explicitly disabled. |
+| `isRequired` | `boolean` | `false` | Shows the required marker and sets `aria-required="true"` without enabling native browser validation. Use the native `required` prop when constraint validation is intended. |
+| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default at-sign icon. |
+| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the 20px leading slot; direct SVG/image glyphs normalize to 16px. `false` removes it. |
+| `hasInformationIcon` | `boolean` | `false` | Set true to show the default information icon. |
+| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
+| `shortcutKeys` | `readonly string[]` | `["Mod", "K"]` | For `kind="shortcut"`, renders one compact, platform-aware Shortcut chip. |
+| `shortcut` | `ReactNode` | `null` | Deprecated compact-chip content escape hatch; prefer `shortcutKeys`. |
+| `buttonProps` | `InputActionButtonProps` | `undefined` | Native button events, ref, disabled state, class name, and ARIA attributes for button and dropdown kinds. Defaults to `type="button"`. |
+| `decreaseButtonProps`, `increaseButtonProps` | `InputStepperButtonProps` | `undefined` | Native stepper-button props, excluding children and type. Override `aria-label` for localization. Calling `preventDefault()` in `onClick` cancels the step. |
+| `value`, `defaultValue`, `onChange` | Native input props | `undefined` | Quantity buttons and typing use the same `onChange` contract. Use `value` with `onChange` for controlled fields, or `defaultValue` for uncontrolled fields. |
+| `min`, `max`, `step` | Native number-input props | Native defaults | Quantity kinds always render `type="number"` and use browser stepping rules. With `step="any"`, the buttons step by one while typing remains unrestricted. |
+
+## Quantity and actions
+
+```tsx
+const [quantity, setQuantity] = React.useState("1")
+
+<Input
+  kind="quantity"
+  label="Quantity"
+  quantityLabel="Quantity"
+  min={0}
+  max={10}
+  step={1}
+  value={quantity}
+  onChange={(event) => setQuantity(event.currentTarget.value)}
+/>
+
+<Input
+  kind="trailing-button"
+  label="Search"
+  buttonLabel="Search"
+  value={query}
+  onChange={(event) => setQuery(event.currentTarget.value)}
+  buttonProps={{ onClick: () => runSearch(query) }}
+/>
+```
+
+Quantity buttons do not submit forms. They update uncontrolled values directly,
+notify `onInput` and `onChange`, and let the parent accept or reject a controlled
+change. Steps that cannot move within the bounds emit no change. `disabled`,
+`state="disabled"`, and `readOnly` disable both steppers; per-button `disabled`
+can restrict one direction.
+
+Dropdown kinds expose a trigger. Connect the popup action and its accessibility
+state through `buttonProps.onClick`, `aria-haspopup`, `aria-expanded`,
+`aria-controls`, and `ref`. For a menu library that composes its trigger with
+`asChild`, use `InputGroup` with `InputGroupButton` and the library's trigger.
+Button events bubble normally and retain button focus.
+
+## Migration
+
+Input no longer adds the default at-sign or information icon when their props are omitted. Add `hasLeadingIcon` or `hasInformationIcon` to retain either previous default, or supply a custom `leadingIcon` or `trailingIcon` to enable that slot. Explicit `false` always removes the corresponding slot.
+
+## Sizing rule
+
+Use Input without a `size` or `density` override in standard product UI. The inherited default is `lg` (36px), and it is the expected treatment for forms, search, filters, and verification flows. Use `density="compact"` only when the surrounding context is genuinely constrained, such as a dense desktop table or a compact toolbar, and apply the same semantic density to the other controls in that row. Do not reduce inputs merely to make a preview or card composition fit.
+
+Input is `320px` wide by default (`--bh-input-width`), the width of the library Input frame. In a form grid or form card, make each field fill its column: pass `className="w-full"`, or set `--bh-input-width: 100%` on the field. Keep the default for a field that stands on its own.
+
+## Token Contract
+
+Input consumes Banhaten field, control, typography, spacing, border, radius, content, disabled, error, and focus tokens. Its default size is `lg` (36px). The `md` and `lg` sizes follow the library Input frame: the field content is padded `8px`, and the value starts `4px` further in when nothing precedes it. So text starts `12px` from the edge, text after a leading icon at `34px`, and trailing icons sit `8px` from the edge. The `comfortable` size keeps `12px` padding. Shortcut Inputs use the same 8px inline padding, 20px icon slot, 16px glyph, and shared compact Shortcut. Add-on and button segments should use logical borders and shared field tokens.
+
+## RTL
+
+Input uses logical start/end slots and `text-start`. Labels, values, add-ons, tags, and helper text use `dir="auto"` where string copy is rendered.
+
+## Accessibility
+
+Connect labels and helper/error text through the component props when possible. `isRequired` communicates the required state to assistive technology without changing form-submission behavior; use native `required` when the browser should enforce the constraint. Use `state="error"` with visible error copy instead of relying only on red borders.
+
+## Install
+
+```bash
+npx banhaten add input
+```
+
+## Examples
+
+Primary registry example: `examples/input-demo.tsx`.
+Controlled quantity and action example: `examples/input-actions-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs input` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" so Arabic and English labels, values, add-ons, tags, and helper text align naturally.
+- `spacing`: Uses logical start/end borders and inherited direction so leading and trailing segments mirror in RTL.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -135,6 +137,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `kinds` | `default`, `shortcut`, `add-on`, `inline-add-on`, `tags`, `inline-tags`, `trailing-dropdown`, `leading-dropdown`, `quantity`, `quantity-2`, `trailing-button`, `leading-button` |
 | `sizes` | `md`, `lg`, `comfortable` |
 | `states` | `default`, `filled`, `error`, `disabled` |
-| `tokens` | `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-md`, `--bh-icon-stroke-225`, `--bh-input-border`, `--bh-input-chevron-size`, `--bh-input-comfortable-height`, `--bh-input-comfortable-padding-x`, `--bh-input-content-gap`, `--bh-input-helper-gap`, `--bh-input-icon-size`, `--bh-input-icon-slot-size`, `--bh-input-info-icon-size`, `--bh-input-inline-gap`, `--bh-input-inline-tags-gap`, `--bh-input-label-gap`, `--bh-input-lg-height`, `--bh-input-lg-padding-x`, `--bh-input-md-height`, `--bh-input-md-padding-x`, `--bh-input-radius`, `--bh-input-segment-gap`, `--bh-input-segment-padding-x`, `--bh-input-stepper-icon-size`, `--bh-input-stepper-width`, `--bh-input-tag-height`, `--bh-input-tag-padding-x`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-interactive-input-soft-disabled`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--bh-z-raised`, `--elevation-component-default`, `--elevation-input`, `--elevation-input-disabled-overlay`, `--elevation-input-focus-overlay`, `--elevation-input-focus-ring`, `--elevation-input-focus-surface`, `--elevation-input-overlay`, `--elevation-input-surface` |
+| `tokens` | `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-md`, `--bh-icon-stroke-225`, `--bh-input-border`, `--bh-input-chevron-size`, `--bh-input-comfortable-height`, `--bh-input-comfortable-padding-x`, `--bh-input-content-gap`, `--bh-input-content-padding-x`, `--bh-input-helper-gap`, `--bh-input-icon-size`, `--bh-input-icon-slot-size`, `--bh-input-info-icon-size`, `--bh-input-inline-gap`, `--bh-input-inline-tags-gap`, `--bh-input-label-gap`, `--bh-input-lg-height`, `--bh-input-md-height`, `--bh-input-md-padding-x`, `--bh-input-radius`, `--bh-input-segment-gap`, `--bh-input-segment-padding-x`, `--bh-input-stepper-icon-size`, `--bh-input-stepper-width`, `--bh-input-tag-height`, `--bh-input-tag-padding-x`, `--bh-input-value-inset`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-interactive-input-soft-disabled`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-font-weight`, `--bh-text-body-sm-medium-letter-spacing`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-medium-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-font-weight`, `--bh-text-body-xs-regular-letter-spacing`, `--bh-text-body-xs-regular-line-height`, `--bh-z-raised`, `--elevation-component-default`, `--elevation-input`, `--elevation-input-disabled-overlay`, `--elevation-input-focus-overlay`, `--elevation-input-focus-ring`, `--elevation-input-focus-surface`, `--elevation-input-overlay`, `--elevation-input-surface` |
 | `variants` | `default`, `soft` |
 <!-- registry-contract:end -->

package/docs/design-system/components/item.md

@@ -1,61 +1,61 @@
-# Item
-
-Item is Banhaten’s composable row primitive for lists, settings, search results, files, and compact summaries. It keeps media, copy, and actions on one logical layout contract without embedding product behavior or placeholder content.
-
-## API
-
-```tsx
-<ItemGroup aria-label="Recent documents">
-  <Item role="listitem" variant="outline">
-    <ItemMedia><FileTextIcon aria-hidden="true" /></ItemMedia>
-    <ItemContent>
-      <ItemTitle>Launch checklist</ItemTitle>
-      <ItemDescription>Updated five minutes ago</ItemDescription>
-    </ItemContent>
-    <ItemActions>{/* real controls */}</ItemActions>
-  </Item>
-</ItemGroup>
-```
-
-Use `asChild` when the whole row should be a native link or button. Interactive controls inside `ItemActions` must retain their own accessible names.
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `variant` | `default`, `muted`, `outline` |
-| `size` | `sm`, `md`, `lg` |
-| `disabled` | `boolean` |
-| `ItemMedia variant` | `icon`, `avatar`, `image` |
-
-Default `ItemMedia` glyphs are 18px while their 20px layout footprint remains stable inside the media container.
-
-## Install
-
-```bash
-npx banhaten add item
-```
-
-## Accessibility
-
-`ItemGroup` defaults to `role="list"`; give rows `role="listitem"` when using the default non-semantic `div`. Prefer native anchors or buttons through `asChild` for interactive rows. Disabled styling maps to `aria-disabled` and does not invent click behavior.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `layout`: media, content, and actions follow logical flex order.
-- `textDirection`: title and description use `dir="auto"`.
-
-## Token Contract
-
-Every dimension, surface, color, radius, type style, focus treatment, and transition resolves through Banhaten tokens. Covered source file: `components/item.tsx`.
-
-## Examples
-
-Primary registry example: `examples/item-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs item` to inspect source files, install command, and examples.
-
+# Item
+
+Item is Banhaten’s composable row primitive for lists, settings, search results, files, and compact summaries. It keeps media, copy, and actions on one logical layout contract without embedding product behavior or placeholder content.
+
+## API
+
+```tsx
+<ItemGroup aria-label="Recent documents">
+  <Item role="listitem" variant="outline">
+    <ItemMedia><FileTextIcon aria-hidden="true" /></ItemMedia>
+    <ItemContent>
+      <ItemTitle>Launch checklist</ItemTitle>
+      <ItemDescription>Updated five minutes ago</ItemDescription>
+    </ItemContent>
+    <ItemActions>{/* real controls */}</ItemActions>
+  </Item>
+</ItemGroup>
+```
+
+Use `asChild` when the whole row should be a native link or button. Interactive controls inside `ItemActions` must retain their own accessible names.
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `variant` | `default`, `muted`, `outline` |
+| `size` | `sm`, `md`, `lg` |
+| `disabled` | `boolean` |
+| `ItemMedia variant` | `icon`, `avatar`, `image` |
+
+Default `ItemMedia` glyphs are 18px while their 20px layout footprint remains stable inside the media container.
+
+## Install
+
+```bash
+npx banhaten add item
+```
+
+## Accessibility
+
+`ItemGroup` defaults to `role="list"`; give rows `role="listitem"` when using the default non-semantic `div`. Prefer native anchors or buttons through `asChild` for interactive rows. Disabled styling maps to `aria-disabled` and does not invent click behavior.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `layout`: media, content, and actions follow logical flex order.
+- `textDirection`: title and description use `dir="auto"`.
+
+## Token Contract
+
+Every dimension, surface, color, radius, type style, focus treatment, and transition resolves through Banhaten tokens. Covered source file: `components/item.tsx`.
+
+## Examples
+
+Primary registry example: `examples/item-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs item` to inspect source files, install command, and examples.
+
 <!-- registry-contract:start -->
 ## Registry Contract