banhaten 0.4.0 → 0.6.0

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

@@ -14,8 +14,22 @@ Collapsible wraps Radix Collapsible for disclosure sections with Banhaten trigge
 | Part | Purpose |
 | --- | --- |
 | `Collapsible` | Radix root |
-| `CollapsibleTrigger` | disclosure button |
+| `CollapsibleTrigger` | disclosure button; with `asChild` your own element becomes the unstyled trigger |
 | `CollapsibleContent` | expandable content region |
+| `CollapsiblePanel` | unstyled content that animates its height open and closed |
+
+Components with their own disclosure design compose the unstyled pieces:
+
+```tsx
+<Collapsible open={open} onOpenChange={setOpen}>
+  <CollapsibleTrigger asChild>
+    <button type="button">Show details</button>
+  </CollapsibleTrigger>
+  <CollapsiblePanel>…</CollapsiblePanel>
+</Collapsible>
+```
+
+`CollapsiblePanel` animates on `--collapsible-panel-duration` (default `--bh-duration-moderate`) and `--collapsible-panel-easing` (default `--bh-easing-emphasized`); set them on the panel to tune the motion.
 
 ## Token Contract
 
@@ -27,7 +41,7 @@ The trigger and content use logical text alignment and inherit document directio
 
 ## Accessibility
 
-Radix manages expanded state, trigger attributes, and content relationships.
+Radix manages expanded state, trigger attributes, and content relationships. Closed content unmounts after its closing animation, so nothing inside a closed section can be focused or read.
 
 ## Install
 
@@ -55,9 +69,9 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 
 | Field | Values |
 | --- | --- |
-| `supportedExports` | `components/collapsible.tsx: Collapsible, CollapsibleContent, CollapsibleTrigger` |
-| `parts` | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` |
+| `supportedExports` | `components/collapsible.tsx: Collapsible, CollapsibleContent, CollapsiblePanel, CollapsibleTrigger` |
+| `parts` | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`, `CollapsiblePanel` |
 | `registryDependencies` | None |
-| `features` | `controlled state`, `uncontrolled state`, `keyboard trigger`, `RTL` |
-| `tokens` | `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--shadow-button-focus` |
+| `features` | `controlled state`, `uncontrolled state`, `keyboard trigger`, `RTL`, `animated panel`, `custom trigger with asChild` |
+| `tokens` | `--bh-content-default`, `--bh-content-subtle`, `--bh-duration-moderate`, `--bh-easing-emphasized`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--elevation-button-focus` |
 <!-- registry-contract:end -->

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

@@ -71,5 +71,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
 | `registryDependencies` | None |
 | `features` | `search filtering`, `keyboard navigation`, `grouped results`, `shortcut slot`, `empty state` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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`, `--shadow-menu` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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`, `--elevation-menu` |
 <!-- registry-contract:end -->

package/docs/design-system/components/context-menu.md

@@ -55,5 +55,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, `ContextMenuLabel`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubTrigger`, `ContextMenuSubContent` |
 | `registryDependencies` | None |
 | `features` | `right click trigger`, `submenus`, `checkbox items`, `radio items`, `shortcuts` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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-z-popover`, `--shadow-menu` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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-z-popover`, `--elevation-menu` |
 <!-- registry-contract:end -->

package/docs/design-system/components/date-picker.md

@@ -95,5 +95,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `densities` | `compact`, `default`, `comfortable` |
 | `modes` | `single-calendar`, `single-month-year`, `double-calendar`, `double-calendar-with-presets`, `single-range-calendar`, `date-picker`, `date-range-picker` |
 | `states` | `open`, `closed` |
-| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-subtle`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-raised`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-button-sm-height`, `--bh-button-xs-height`, `--bh-content-brand-default`, `--bh-content-brand-strong`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-date-day-cell-height`, `--bh-date-event-dot-offset-bottom`, `--bh-date-event-dot-size`, `--bh-date-list-item-height`, `--bh-date-month-year-item-height`, `--bh-date-month-year-list-top`, `--bh-date-month-year-list-width`, `--bh-date-month-year-spacer-height`, `--bh-date-nav-button-size`, `--bh-date-nav-icon-size`, `--bh-date-nav-icon-slot-size`, `--bh-date-picker-width`, `--bh-date-presets-width`, `--bh-date-range-month-width`, `--bh-date-range-surface-max-width`, `--bh-date-surface-border`, `--bh-date-surface-width-calendar`, `--bh-date-surface-width-picker`, `--bh-date-time-input-min-height`, `--bh-date-title-chevron-size`, `--bh-date-title-height`, `--bh-date-trigger-border`, `--bh-date-trigger-height`, `--bh-date-trigger-icon-size`, `--bh-date-trigger-icon-slot-size`, `--bh-date-trigger-shadow`, `--bh-date-trigger-width`, `--bh-icon-stroke-180`, `--bh-interactive-ghost-hover`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-soft-default`, `--bh-interactive-soft-hover`, `--bh-opacity-0`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--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-z-raised`, `--shadow-button-focus`, `--shadow-component-default`, `--shadow-date-month-year-list`, `--shadow-date-surface`, `--shadow-date-time-input`, `--shadow-input-focus-ring` |
+| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-subtle`, `--bh-bg-default`, `--bh-bg-default-hover`, `--bh-bg-raised`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-button-sm-height`, `--bh-button-xs-height`, `--bh-content-brand-default`, `--bh-content-brand-strong`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-control-default`, `--bh-date-day-cell-height`, `--bh-date-event-dot-offset-bottom`, `--bh-date-event-dot-size`, `--bh-date-list-item-height`, `--bh-date-month-year-item-height`, `--bh-date-month-year-list-top`, `--bh-date-month-year-list-width`, `--bh-date-month-year-spacer-height`, `--bh-date-nav-button-size`, `--bh-date-nav-icon-size`, `--bh-date-nav-icon-slot-size`, `--bh-date-picker-width`, `--bh-date-presets-width`, `--bh-date-range-month-width`, `--bh-date-range-surface-max-width`, `--bh-date-surface-border`, `--bh-date-surface-width-calendar`, `--bh-date-surface-width-picker`, `--bh-date-time-input-min-height`, `--bh-date-title-chevron-size`, `--bh-date-title-height`, `--bh-date-trigger-border`, `--bh-date-trigger-elevation`, `--bh-date-trigger-height`, `--bh-date-trigger-icon-size`, `--bh-date-trigger-icon-slot-size`, `--bh-date-trigger-width`, `--bh-icon-stroke-180`, `--bh-interactive-ghost-hover`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-soft-default`, `--bh-interactive-soft-hover`, `--bh-opacity-0`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--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-z-raised`, `--elevation-button-focus`, `--elevation-component-default`, `--elevation-date-month-year-list`, `--elevation-date-surface`, `--elevation-date-time-input`, `--elevation-input-focus-ring` |
 <!-- registry-contract:end -->

package/docs/design-system/components/file-upload.md

@@ -198,6 +198,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `single`, `multiple` |
 | `sizes` | `lg`, `sm` |
 | `states` | `default`, `hover`, `disabled`, `uploaded`, `uploading`, `uploading-progress`, `error` |
-| `tokens` | `--bh-bg-accent-amber-default`, `--bh-bg-accent-aqua-default`, `--bh-bg-accent-blue-default`, `--bh-bg-accent-fuchsia-default`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-green-default`, `--bh-bg-accent-lime-default`, `--bh-bg-accent-purple-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-rose-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-neutral-default`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-subtle`, `--bh-bg-success-default`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-border-width-strong`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-link`, `--bh-content-link-hover`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-file-upload-content-max-width`, `--bh-file-upload-root-max-width`, `--bh-file-upload-spin-duration`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-bold`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-13xl-160`, `--bh-space-16xl-256`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-lg-semibold-font-size`, `--bh-text-body-lg-semibold-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--bh-underline-offset-default`, `--shadow-component-default`, `--shadow-sm` |
+| `tokens` | `--bh-bg-accent-amber-default`, `--bh-bg-accent-aqua-default`, `--bh-bg-accent-blue-default`, `--bh-bg-accent-fuchsia-default`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-green-default`, `--bh-bg-accent-lime-default`, `--bh-bg-accent-purple-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-rose-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-neutral-default`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-subtle`, `--bh-bg-success-default`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-border-width-strong`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-link`, `--bh-content-link-hover`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-file-upload-content-max-width`, `--bh-file-upload-root-max-width`, `--bh-file-upload-spin-duration`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-bold`, `--bh-font-weight-medium`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-13xl-160`, `--bh-space-16xl-256`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-lg-semibold-font-size`, `--bh-text-body-lg-semibold-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-sm-medium-font-size`, `--bh-text-body-sm-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-text-body-xs-regular-font-size`, `--bh-text-body-xs-regular-line-height`, `--bh-underline-offset-default`, `--elevation-02`, `--elevation-component-default` |
 | `variants` | `default`, `button` |
 <!-- registry-contract:end -->

package/docs/design-system/components/hover-card.md

@@ -57,5 +57,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `HoverCard`, `HoverCardTrigger`, `HoverCardContent`, `HoverCardPortal` |
 | `registryDependencies` | None |
 | `features` | `hover preview`, `focus preview`, `open delay`, `close delay` |
-| `tokens` | `--bh-bg-raised`, `--bh-content-default`, `--bh-radius-2xl-12`, `--bh-space-18xl-320`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-z-popover`, `--shadow-popover` |
+| `tokens` | `--bh-bg-raised`, `--bh-content-default`, `--bh-radius-2xl-12`, `--bh-space-18xl-320`, `--bh-space-3xl-16`, `--bh-space-md-8`, `--bh-z-popover`, `--elevation-popover` |
 <!-- registry-contract:end -->

package/docs/design-system/components/inline-citations.md

@@ -0,0 +1,93 @@
+# Inline Citations
+
+`InlineCitations` renders prose with superscript numbered chips that link to their sources and reveal the reference name in a Tooltip on hover, followed by a compact source list showing the number, label, host, and an external-link arrow.
+
+Compose the prose from `CitationProse` paragraphs and place a `CitationMark` wherever a claim needs support. Each mark finds its source by number, so nothing is parsed out of the text: a literal "[1]" stays text, and a mark whose number has no source renders nothing instead of a dead chip. Outside `InlineCitations`, give a mark its own `href` and `label`.
+
+Citation URLs usually come from model output or search results, so only web addresses become links: `http:` and `https:` URLs, relative links included. A source with any other URL, such as `javascript:` or `data:`, gets no chip in the prose and a plain, unlinked row in the source list. This holds on React 18, which still renders `javascript:` links, as well as on React 19.
+
+## API
+
+```tsx
+import {
+  CitationMark,
+  CitationProse,
+  InlineCitations,
+  type CitationSource,
+} from "@/components/ui/inline-citations"
+
+const sources: CitationSource[] = [
+  { host: "arxiv.org", label: "Attention Is All You Need", url: "https://arxiv.org/abs/1706.03762" },
+]
+
+<InlineCitations sources={sources}>
+  <CitationProse>
+    Transformers scale well with data and compute<CitationMark n={1} />.
+  </CitationProse>
+</InlineCitations>
+```
+
+Model output that attaches citations to spans of text maps straight onto marks:
+
+```tsx
+<CitationProse>
+  {segments.map((segment, index) => (
+    <React.Fragment key={index}>
+      {segment.text}
+      {segment.cite ? <CitationMark n={segment.cite} /> : null}
+    </React.Fragment>
+  ))}
+</CitationProse>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `React.ReactNode` | – | Cited prose: `CitationProse` paragraphs with `CitationMark` markers. |
+| `sources` | `readonly CitationSource[]` | – | `label`, `url`, optional `host`, and optional `n` (defaults to position). Only `http:` and `https:` URLs link. |
+| `showSources` | `boolean` | `true` | Renders the source list under the prose whenever there are sources to list. |
+| `labels` | `Partial<InlineCitationsLabels>` | English | `citation(n, label)` accessible name and the `sources` list name. |
+
+`CitationMark` takes the marker number `n`; its optional `href` and `label` override the matching source. `CitationList` and `CitationItem` render the reference list on their own.
+
+## Install
+
+```bash
+npx banhaten add inline-citations
+```
+
+## Examples
+
+Primary registry example: `examples/inline-citations-demo.tsx`.
+
+## Token Contract
+
+Chips are `--bh-citation-mark-size` squares (aliasing `--bh-space-2xl-14`) with `--bh-radius-sm-4`, `--bh-interactive-soft-default` fill, `--bh-content-subtle` text on the `body-3xs-semibold` scale, and `--bh-interactive-soft-hover` on hover. The list separates with `--bh-border-subtle`, uses the `body-2xs` scale, and reveals a `--bh-space-lg-10` arrow. Tooltips reuse the Tooltip primitive tokens.
+
+Covered source files: `components/inline-citations.tsx`, `components/inline-citations.css`, and the `tooltip` registry dependency.
+
+## RTL Rules
+
+- Prose and list rows inherit document direction and use logical margins and gaps.
+- Hosts stay LTR; the external arrow mirrors horizontally in RTL.
+
+## Accessibility
+
+Every chip is a link with an accessible name that includes the number and the reference label, opening in a new tab with `rel="noreferrer"`. The source list is a `nav` landmark named by `labels.sources`. Hover-only affordances (tooltip, arrow) also appear on keyboard focus.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/inline-citations.tsx: CitationItem, CitationList, CitationMark, CitationProse, InlineCitations` |
+| `parts` | `InlineCitations`, `CitationProse`, `CitationMark`, `CitationList`, `CitationItem` |
+| `registryDependencies` | `tooltip` |
+| `props.children` | `React.ReactNode; default null; Cited prose: CitationProse paragraphs with CitationMark markers that find their source by number.` |
+| `props.sources` | `readonly CitationSource[]; default null; Cited sources with label, url, optional host, and optional marker number. Only http and https URLs become links.` |
+| `props.showSources` | `boolean; default "true"; Renders the compact source list under the prose when there are sources.` |
+| `props.labels` | `Partial<InlineCitationsLabels>; default "English"; Localized accessible names for markers and the source list.` |
+| `tokens` | `--bh-border-subtle`, `--bh-border-width-default`, `--bh-citation-mark-size`, `--bh-content-default`, `--bh-content-subtle`, `--bh-duration-default`, `--bh-duration-fast`, `--bh-easing-standard`, `--bh-font-family`, `--bh-icon-stroke-180`, `--bh-interactive-soft-default`, `--bh-interactive-soft-hover`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radius-sm-4`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-semibold-font-size`, `--bh-text-body-3xs-semibold-font-weight`, `--bh-text-body-3xs-semibold-letter-spacing`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--elevation-component-focus-ring` |
+<!-- registry-contract:end -->

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

@@ -68,6 +68,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | `button` |
 | `sizes` | `md`, `lg` |
 | `states` | `default`, `error` |
-| `tokens` | `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-input-border`, `--bh-input-lg-height`, `--bh-input-lg-padding-x`, `--bh-input-md-height`, `--bh-input-radius`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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`, `--shadow-component-default`, `--shadow-input`, `--shadow-input-focus-ring` |
+| `tokens` | `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-input-border`, `--bh-input-lg-height`, `--bh-input-lg-padding-x`, `--bh-input-md-height`, `--bh-input-radius`, `--bh-input-width`, `--bh-interactive-input-default`, `--bh-interactive-input-disabled`, `--bh-interactive-input-soft`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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`, `--elevation-component-default`, `--elevation-input`, `--elevation-input-focus-ring` |
 | `variants` | `default`, `soft` |
 <!-- registry-contract:end -->

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

@@ -6,6 +6,7 @@ Input is the text-entry field primitive for forms, filters, search, numeric entr
 
 ```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" />
 ```
 
@@ -16,20 +17,69 @@ Input is the text-entry field primitive for forms, filters, search, numeric entr
 | `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); 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.
+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
 
@@ -37,7 +87,7 @@ Input uses logical start/end slots and `text-start`. Labels, values, add-ons, ta
 
 ## Accessibility
 
-Connect labels and helper/error text through the component props when possible. Use `state="error"` with visible error copy instead of relying only on red borders.
+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
 
@@ -48,6 +98,7 @@ 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.
 
@@ -68,10 +119,15 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/input-content.ts: getInputDefaultValue, getInputHelperText, getInputPlaceholder, getInputTags, inputCopy`, `components/input.tsx: Input, inputContent, inputControl, inputRoot, inputSurface` |
 | `parts` | `Input` |
 | `registryDependencies` | `kbd` |
+| `props.buttonProps` | `InputActionButtonProps; default null; Native button props for leading/trailing button and dropdown kinds, including onClick, keyboard handlers, ref, disabled, and ARIA attributes. Defaults to type=button; consumers supply the action or popup.` |
+| `props.decreaseButtonProps` | `InputStepperButtonProps; default null; Native props for the decrease button, excluding children and type. Supports localized aria-label, ref, and onClick; preventDefault cancels the step. Field disabled and readOnly always disable the stepper.` |
+| `props.increaseButtonProps` | `InputStepperButtonProps; default null; Native props for the increase button, excluding children and type. Supports localized aria-label, ref, and onClick; preventDefault cancels the step. Field disabled and readOnly always disable the stepper.` |
+| `props.onChange` | `React.ChangeEventHandler<HTMLInputElement>; default null; Receives native input changes from typing and quantity buttons. Quantity kinds use type=number, respect min/max/step, and support controlled value or uncontrolled defaultValue. step=any uses one-unit button increments.` |
 | `props.density` | `"compact" \| "default" \| "comfortable"; default "default"; Preferred cross-component sizing contract. Overrides the legacy size prop with 32px, 36px, or 40px control heights.` |
 | `props.hasLeadingIcon` | `boolean; default false; Deprecated compatibility alias for showAtSign.` |
 | `props.leadingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom 16px glyph inside the shared 20px leading slot; false always removes the slot.` |
 | `props.hasInformationIcon` | `boolean; default false; Deprecated compatibility alias for showInfo.` |
+| `props.isRequired` | `boolean; default false; Shows the required marker and exposes aria-required on the input without enabling native browser validation. Use the native required prop when constraint validation is intended.` |
 | `props.trailingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom trailing icon; false always removes the information slot.` |
 | `props.showAtSign` | `boolean; default false; Explicitly shows the semantic at-sign affordance when no leadingIcon is supplied.` |
 | `props.showInfo` | `boolean; default false; Explicitly shows the semantic information affordance when no trailingIcon is supplied.` |
@@ -81,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`, `--shadow-component-default`, `--shadow-input`, `--shadow-input-disabled-overlay`, `--shadow-input-focus-overlay`, `--shadow-input-focus-ring`, `--shadow-input-focus-surface`, `--shadow-input-overlay`, `--shadow-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

@@ -69,6 +69,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `features` | `media slot`, `content slots`, `action slot`, `asChild composition`, `disabled semantics` |
 | `sizes` | `sm`, `md`, `lg` |
-| `tokens` | `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-interactive-ghost-hover`, `--bh-item-actions-gap`, `--bh-item-content-gap`, `--bh-item-gap`, `--bh-item-group-gap`, `--bh-item-icon-size`, `--bh-item-icon-slot-size`, `--bh-item-media-radius`, `--bh-item-media-size`, `--bh-item-min-height-lg`, `--bh-item-min-height-md`, `--bh-item-min-height-sm`, `--bh-item-padding-x`, `--bh-item-padding-y`, `--bh-item-radius`, `--bh-radius-full`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--shadow-button-focus` |
+| `tokens` | `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-interactive-ghost-hover`, `--bh-item-actions-gap`, `--bh-item-content-gap`, `--bh-item-gap`, `--bh-item-group-gap`, `--bh-item-icon-size`, `--bh-item-icon-slot-size`, `--bh-item-media-radius`, `--bh-item-media-size`, `--bh-item-min-height-lg`, `--bh-item-min-height-md`, `--bh-item-min-height-sm`, `--bh-item-padding-x`, `--bh-item-padding-y`, `--bh-item-radius`, `--bh-radius-full`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--elevation-button-focus` |
 | `variants` | `default`, `muted`, `outline` |
 <!-- registry-contract:end -->

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

@@ -13,17 +13,18 @@ Kbd renders physical keyboard keys. Shortcut renders a compact combined hint for
 
 | Prop | Values |
 | --- | --- |
+| `dir` | `ltr` by default on Kbd; override only for localized non-shortcut key names |
 | `size` | `sm`, `md` |
 | `keys` | `readonly string[]`; use `Mod` for Command on Apple platforms and Control elsewhere |
 | `platform` | `auto`, `mac`, `windows`, `linux` |
 
 ## Token Contract
 
-Kbd uses Banhaten border, soft interactive background, radius, body-xs typography, and button shadow tokens. Shortcut uses the Figma compact contract: 20px height/minimum width, 4px inline padding and radius, body-2xs medium typography, and no keycap shadow.
+Kbd uses Banhaten border, soft interactive background, radius, body-xs typography, and button elevation tokens. Shortcut uses the Figma compact contract: 20px height/minimum width, 4px inline padding and radius, body-2xs medium typography, and no keycap elevation.
 
 ## RTL
 
-Kbd is direction-neutral. Use surrounding text direction for shortcut descriptions.
+Kbd defaults to `dir="ltr"` so physical modifiers and keys keep their canonical order inside RTL interfaces. Surrounding shortcut descriptions retain their own text direction; pass an explicit `dir` only for localized, non-shortcut key names.
 
 ## Accessibility
 
@@ -44,7 +45,7 @@ Open the live component page or run `npx banhaten docs kbd` to inspect source fi
 ## RTL Rules
 
 - `inheritsDirection`: false
-- `semantics`: Kbd is direction-neutral and should be paired with surrounding text labels.
+- `semantics`: Kbd defaults to dir="ltr" so physical key order stays stable, while surrounding shortcut descriptions keep their own text direction.
 
 <!-- registry-contract:start -->
 ## Registry Contract
@@ -57,9 +58,10 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/kbd.tsx: Kbd, KbdShortcut, Shortcut, kbdVariants, shortcutVariants` |
 | `parts` | `Kbd`, `KbdShortcut`, `Shortcut` |
 | `registryDependencies` | None |
+| `props.dir` | `"ltr" \| "rtl" \| "auto"; default "ltr"; Keeps physical key and modifier order stable inside RTL interfaces. Override only for localized non-shortcut key names.` |
 | `props.keys` | `readonly string[]; default null; Used by KbdShortcut and Shortcut. Use Mod for the platform primary modifier; KbdShortcut separates keys while Shortcut combines them.` |
 | `props.platform` | `"auto" \| "mac" \| "windows" \| "linux"; default "auto"; Resolves Mod to Command on Apple platforms and Control elsewhere.` |
 | `props.disabled` | `boolean; default false; Uses disabled border, surface, content, and shadow tokens for shortcuts inside disabled controls.` |
 | `sizes` | `sm`, `md` |
-| `tokens` | `--bh-border-default`, `--bh-border-disabled`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-font-family`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-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`, `--shadow-button-soft` |
+| `tokens` | `--bh-border-default`, `--bh-border-disabled`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-font-family`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-radius-md-6`, `--bh-radius-sm-4`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-letter-spacing`, `--bh-text-body-2xs-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`, `--elevation-button-soft` |
 <!-- registry-contract:end -->

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

@@ -19,6 +19,7 @@ Menu is a Radix DropdownMenu-backed action surface for contextual commands, navi
 | --- | --- |
 | `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal` | Radix-backed menu shell |
 | `MenuItem`, `MenuItemContent`, media slots | interactive rows |
+| `MenuRadioGroup`, `MenuRadioItem` | one choice among items, such as a display time zone |
 | `MenuSub`, `MenuSubTrigger`, `MenuSubContent` | nested menus |
 | `MenuLabel`, `MenuCaption`, `MenuSeparator` | non-interactive structure |
 
@@ -26,6 +27,33 @@ Menu is a Radix DropdownMenu-backed action surface for contextual commands, navi
 | --- | --- |
 | `width` | `menu`, `default`, `multiline`, `action`, `auto` |
 | `kind` | `default`, `multiline`, `action`, `progress`, `button` |
+| `MenuItem.onSelect` | `(event: Event) => void` |
+| `MenuRadioGroup.value`, `MenuRadioGroup.onValueChange` | the chosen value; `(value: string) => void` |
+| `MenuRadioItem.value` | the value the item stands for |
+
+`MenuItem.onSelect` uses Radix's native selection `Event`, not React's DOM text-selection event. Selection closes the menu by default; prevent it when a toggle or multi-select flow should remain open:
+
+```tsx
+<MenuItem onSelect={(event: Event) => event.preventDefault()}>
+  Keep this menu open
+</MenuItem>
+```
+
+Use `MenuRadioGroup` and `MenuRadioItem` when the menu sets one value. Items are `menuitemradio` with `aria-checked`, and the chosen one shows a trailing check. Choosing an item closes the menu and calls `onValueChange`. They also render in `MenuPreview`, where the group's `value` marks the chosen item.
+
+```tsx
+<MenuRoot>
+  <MenuTrigger asChild>
+    <Button variant="outline">Riyadh · UTC+3</Button>
+  </MenuTrigger>
+  <MenuContent align="end">
+    <MenuRadioGroup value={zone} onValueChange={setZone}>
+      <MenuRadioItem value="Asia/Riyadh">Riyadh · UTC+3</MenuRadioItem>
+      <MenuRadioItem value="Asia/Dubai">Dubai · UTC+4</MenuRadioItem>
+    </MenuRadioGroup>
+  </MenuContent>
+</MenuRoot>
+```
 
 ## Token Contract
 
@@ -66,11 +94,14 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 
 | Field | Values |
 | --- | --- |
-| `supportedExports` | `components/menu.tsx: Menu, MenuCaption, MenuContent, MenuItem, MenuItemAction, MenuItemAvatar, MenuItemBadge, MenuItemContent, MenuItemDescription, MenuItemIcon, MenuItemMeta, MenuItemSwitch, MenuItemText, MenuItemTitle, MenuLabel, MenuPortal, MenuPreview, MenuProgress, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuSurface, MenuTrigger, menuItemContentVariants, menuItemIconVariants, menuItemVariants, menuVariants` |
-| `parts` | `Menu`, `MenuPreview`, `MenuSurface`, `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`, `MenuItem`, `MenuItemContent`, `MenuItemIcon`, `MenuItemAvatar`, `MenuItemText`, `MenuItemTitle`, `MenuItemDescription`, `MenuItemMeta`, `MenuItemBadge`, `MenuItemSwitch`, `MenuItemAction`, `MenuProgress`, `MenuSeparator`, `MenuLabel`, `MenuCaption` |
+| `supportedExports` | `components/menu.tsx: Menu, MenuCaption, MenuContent, MenuItem, MenuItemAction, MenuItemAvatar, MenuItemBadge, MenuItemContent, MenuItemDescription, MenuItemIcon, MenuItemMeta, MenuItemSwitch, MenuItemText, MenuItemTitle, MenuLabel, MenuPortal, MenuPreview, MenuProgress, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuSurface, MenuTrigger, menuItemContentVariants, menuItemIconVariants, menuItemVariants, menuVariants` |
+| `parts` | `Menu`, `MenuPreview`, `MenuSurface`, `MenuRoot`, `MenuTrigger`, `MenuContent`, `MenuPortal`, `MenuSub`, `MenuSubTrigger`, `MenuSubContent`, `MenuItem`, `MenuItemContent`, `MenuItemIcon`, `MenuItemAvatar`, `MenuItemText`, `MenuItemTitle`, `MenuItemDescription`, `MenuItemMeta`, `MenuItemBadge`, `MenuItemSwitch`, `MenuItemAction`, `MenuRadioGroup`, `MenuRadioItem`, `MenuProgress`, `MenuSeparator`, `MenuLabel`, `MenuCaption` |
 | `registryDependencies` | None |
+| `props.onSelect` | `(event: Event) => void; default null; MenuItem selection handler. Uses Radix's native selection Event, not React's DOM text-selection event; call event.preventDefault() to keep toggle or multi-select menus open.` |
+| `props.onValueChange` | `(value: string) => void; default null; MenuRadioGroup only. Receives the value of the MenuRadioItem that was chosen.` |
+| `props.value` | `string; default null; MenuRadioGroup: the chosen value. MenuRadioItem: the value the item stands for; the item matching its group's value is checked, with role menuitemradio, aria-checked and a trailing check.` |
 | `itemKinds` | `default`, `multiline`, `action`, `progress`, `button` |
-| `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-icon-stroke-300`, `--bh-interactive-indicator-default`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-hover`, `--bh-interactive-switch-active`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-menu-action-gap`, `--bh-menu-action-height`, `--bh-menu-action-padding-x`, `--bh-menu-badge-height`, `--bh-menu-badge-padding-x`, `--bh-menu-bg`, `--bh-menu-divider-padding-y`, `--bh-menu-gap`, `--bh-menu-icon-padding`, `--bh-menu-item-action-height`, `--bh-menu-item-action-width`, `--bh-menu-item-bg`, `--bh-menu-item-button-height`, `--bh-menu-item-caption-height`, `--bh-menu-item-content-compact-padding-y`, `--bh-menu-item-content-padding`, `--bh-menu-item-default-height`, `--bh-menu-item-default-width`, `--bh-menu-item-divider-height`, `--bh-menu-item-gap`, `--bh-menu-item-hover-bg`, `--bh-menu-item-label-height`, `--bh-menu-item-multiline-height`, `--bh-menu-item-multiline-width`, `--bh-menu-item-padding-x`, `--bh-menu-item-progress-height`, `--bh-menu-item-radius`, `--bh-menu-item-slot-gap`, `--bh-menu-label-padding-x`, `--bh-menu-leading-icon-size`, `--bh-menu-leading-icon-slot-size`, `--bh-menu-padding-y`, `--bh-menu-progress-gap`, `--bh-menu-progress-height`, `--bh-menu-radius`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-menu-trailing-icon-size`, `--bh-menu-width`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-md-8`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--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-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`, `--shadow-menu` |
+| `states` | `default`, `disabled`, `checked` |
+| `tokens` | `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-300`, `--bh-interactive-indicator-default`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-hover`, `--bh-interactive-switch-active`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-menu-action-gap`, `--bh-menu-action-height`, `--bh-menu-action-padding-x`, `--bh-menu-badge-height`, `--bh-menu-badge-padding-x`, `--bh-menu-bg`, `--bh-menu-divider-padding-y`, `--bh-menu-gap`, `--bh-menu-icon-padding`, `--bh-menu-item-action-height`, `--bh-menu-item-action-width`, `--bh-menu-item-bg`, `--bh-menu-item-button-height`, `--bh-menu-item-caption-height`, `--bh-menu-item-content-compact-padding-y`, `--bh-menu-item-content-padding`, `--bh-menu-item-default-height`, `--bh-menu-item-default-width`, `--bh-menu-item-divider-height`, `--bh-menu-item-gap`, `--bh-menu-item-hover-bg`, `--bh-menu-item-label-height`, `--bh-menu-item-multiline-height`, `--bh-menu-item-multiline-width`, `--bh-menu-item-padding-x`, `--bh-menu-item-progress-height`, `--bh-menu-item-radius`, `--bh-menu-item-slot-gap`, `--bh-menu-label-padding-x`, `--bh-menu-leading-icon-size`, `--bh-menu-leading-icon-slot-size`, `--bh-menu-padding-y`, `--bh-menu-progress-gap`, `--bh-menu-progress-height`, `--bh-menu-radius`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-menu-trailing-icon-size`, `--bh-menu-width`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-md-8`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-3xs-medium-font-size`, `--bh-text-body-3xs-medium-font-weight`, `--bh-text-body-3xs-medium-letter-spacing`, `--bh-text-body-3xs-medium-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--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-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`, `--elevation-menu` |
 | `widths` | `menu`, `default`, `multiline`, `action`, `auto` |
 <!-- registry-contract:end -->

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

@@ -56,5 +56,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioItem`, `MenubarLabel`, `MenubarSeparator`, `MenubarShortcut` |
 | `registryDependencies` | None |
 | `features` | `top menu`, `keyboard navigation`, `checkbox items`, `radio items`, `shortcuts` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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-z-popover`, `--shadow-component-default`, `--shadow-menu` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-menu-item-default-height`, `--bh-menu-item-hover-bg`, `--bh-menu-width`, `--bh-radius-lg-8`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-8xl-48`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-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-z-popover`, `--elevation-component-default`, `--elevation-menu` |
 <!-- registry-contract:end -->

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

@@ -71,7 +71,7 @@ The component consumes existing Banhaten variables:
 - Shape: `--bh-radius-2xl-12`, `--bh-radius-full`
 - Space: `--bh-space-xs-4`, `--bh-space-sm-6`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`
 - Type: `--bh-text-heading-sm-semibold-*`, `--bh-text-body-md-regular-*`
-- Elevation: `--shadow-component-default`, `--shadow-button-focus`, `--shadow-button-danger-focus`
+- Elevation: `--elevation-component-default`, `--elevation-button-focus`, `--elevation-button-danger-focus`
 
 ## Accessibility
 
@@ -115,5 +115,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | `alert-dialog`, `button`, `checkbox`, `spinner` |
 | `intents` | `default`, `warning`, `danger` |
 | `sizes` | `sm`, `default`, `lg` |
-| `tokens` | `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-raised`, `--bh-bg-warning-subtle`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-warning-default`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-modal-action-label-padding-x`, `--bh-modal-border`, `--bh-modal-width`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-heading-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--bh-z-overlay`, `--shadow-2xl`, `--shadow-button-focus`, `--shadow-modal` |
+| `tokens` | `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-raised`, `--bh-bg-warning-subtle`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-warning-default`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-modal-action-label-padding-x`, `--bh-modal-border`, `--bh-modal-width`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-space-12xl-128`, `--bh-space-16xl-256`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-8xl-48`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-heading-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--bh-z-overlay`, `--elevation-06`, `--elevation-button-focus`, `--elevation-modal` |
 <!-- registry-contract:end -->

package/docs/design-system/components/native-select.md

@@ -65,6 +65,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `options array`, `native children`, `label`, `helper text`, `error text` |
 | `sizes` | `md`, `lg` |
 | `states` | `default`, `filled`, `error`, `disabled` |
-| `tokens` | `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-input-lg-height`, `--bh-input-md-height`, `--bh-select-field-gap`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-radius`, `--bh-select-width`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-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`, `--shadow-component-default`, `--shadow-select-danger-focus-ring`, `--shadow-select-focus-ring`, `--shadow-select-trigger` |
+| `tokens` | `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-200`, `--bh-input-lg-height`, `--bh-input-md-height`, `--bh-select-field-gap`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-radius`, `--bh-select-width`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-sm-6`, `--bh-space-xs-4`, `--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-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`, `--elevation-component-default`, `--elevation-select-danger-focus-ring`, `--elevation-select-focus-ring`, `--elevation-select-trigger` |
 | `variants` | `default`, `soft` |
 <!-- registry-contract:end -->

package/docs/design-system/components/navigation-menu.md

@@ -59,5 +59,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuViewport`, `NavigationMenuIndicator` |
 | `registryDependencies` | None |
 | `features` | `top navigation`, `viewport`, `indicator`, `dropdown content` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-popover` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-soft-default`, `--bh-radius-2xl-12`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-sm-regular-font-size`, `--bh-text-body-sm-regular-font-weight`, `--bh-text-body-sm-regular-letter-spacing`, `--bh-text-body-sm-regular-line-height`, `--bh-z-popover`, `--bh-z-raised`, `--elevation-popover` |
 <!-- registry-contract:end -->

package/docs/design-system/components/onboarding-step-list-item.md

@@ -91,5 +91,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `OnboardingStepListItem` |
 | `registryDependencies` | None |
 | `states` | `finished`, `active`, `inactive` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-225`, `--bh-space-17xl-288`, `--bh-space-2xl-14`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-225`, `--bh-space-17xl-288`, `--bh-space-2xl-14`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-medium-letter-spacing`, `--bh-text-body-md-medium-line-height`, `--elevation-component-default` |
 <!-- registry-contract:end -->