banhaten 0.5.0 → 0.6.0

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

@@ -1,107 +1,107 @@
-# Modal
-
-`Modal` presents a focused dialog surface for decisions and blocking workflows. `ConfirmModal` adds the constrained alert-dialog/confirm pattern for consequential actions.
-
-Figma reference: `Design system 3.0 Copy / Modal`, node `227:5480`.
-
-## Variants
-
-The implementation covers the six-node Modal matrix from Figma:
-
-| Prop | Values |
-| --- | --- |
-| `size` | `sm`, `default`, `lg` |
-| `dir` | `ltr`, `rtl` |
-
-## API
-
-```tsx
-<Modal size="default" />
-<Modal dir="rtl" messages={arabicModalMessages} size="lg" />
-<ConfirmModal intent="danger" confirmLabel="Delete project" />
-```
-
-| Prop | Default |
-| --- | --- |
-| `size` | `sm` |
-| `dir` | inherited |
-| `title` | English default; overrides `messages.title` |
-| `description` | English default; overrides `messages.description` |
-| `messages` | partial localized Modal message catalog |
-| `closeLabel` | overrides `messages.closeLabel` |
-| `showIcon` | `true` |
-| `showCloseButton` | `true` |
-| `showDivider` | `true` |
-| `showFooter` | `true` |
-| `showCheckbox` | `true` |
-| `footer` | none |
-
-`ConfirmModal` also accepts:
-
-| Prop | Default |
-| --- | --- |
-| `intent` | `danger` |
-| `messages` | partial localized ConfirmModal message catalog |
-| `confirmLabel` / `cancelLabel` | English; direct props override `messages` |
-| `confirmLoading` | `false` |
-| `confirmDisabled` | `false` |
-| `preventOutsideDismiss` | `true` |
-| `closeOnConfirm` / `closeOnCancel` | `true` |
-| `onConfirm` / `onCancel` | none |
-
-## Pixel Rules
-
-- Small, Default, and Large modal widths are `440px`, `560px`, and `700px`.
-- The shell uses `--bh-radius-2xl-12`.
-- Header padding is `20px 20px 8px`, with logical end padding reserved for the close button.
-- Body padding is `10px 20px 20px`.
-- Footer padding is `16px 20px`, with a `10px` gap.
-- Actions reuse `Button` with `size="sm"`, `variant="soft"` for the secondary action, and the default variant for the primary action.
-- Confirm actions reuse `Button` with `variant="danger"`, `variant="warning"`, or `variant="default"` from the selected intent.
-- The opt-out control reuses `Checkbox`.
-- Loading confirm actions reuse the Banhaten `Spinner` component.
-
-## Token Contract
-
-The component consumes existing Banhaten variables:
-
-- Surface: `--bh-bg-raised`, `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-warning-subtle`
-- Border: `--bh-border-subtle`
-- Content: `--bh-content-default`, `--bh-content-subtle`, `--bh-content-danger-default`, `--bh-content-warning-default`
-- 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: `--elevation-component-default`, `--elevation-button-focus`, `--elevation-button-danger-focus`
-
-## Accessibility
-
-- `ModalContent` is backed by Radix Dialog for focus trap, Escape, outside-click dismissal, and ARIA dialog semantics.
-- `ModalTitle` and `ModalDescription` map to Radix dialog title and description primitives.
-- The close affordance is a real button through `ModalCloseButton`.
-- `ConfirmModal` sets `role="alertdialog"`, focuses the cancel action first when present, disables outside-pointer dismissal by default, and can optionally prevent Escape dismissal.
-- `ModalSurface` is presentational and intended for static documentation or visual comparison, not live modal behavior.
-- Direction never selects modal copy. Choose `messages` from the product locale; direct title, description, action, and close-label props have highest precedence.
-
-## Install
-
-```bash
-npx banhaten add modal
-```
-
-## Examples
-
-Primary registry example: `examples/modal-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs modal` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `closePlacement`: Close uses logical inline-end placement so it moves to the left side in RTL.
-- `footerOrder`: The checkbox and action cluster use inherited direction and logical gaps so their order mirrors naturally.
-- `messages`: Direction does not select language. Modal and ConfirmModal accept explicit message catalogs plus direct label overrides.
-- `textDirection`: Title, description, checkbox label, confirm labels, and actions use dir="auto" for Arabic and English copy.
-
+# Modal
+
+`Modal` presents a focused dialog surface for decisions and blocking workflows. `ConfirmModal` adds the constrained alert-dialog/confirm pattern for consequential actions.
+
+Figma reference: `Design system 3.0 Copy / Modal`, node `227:5480`.
+
+## Variants
+
+The implementation covers the six-node Modal matrix from Figma:
+
+| Prop | Values |
+| --- | --- |
+| `size` | `sm`, `default`, `lg` |
+| `dir` | `ltr`, `rtl` |
+
+## API
+
+```tsx
+<Modal size="default" />
+<Modal dir="rtl" messages={arabicModalMessages} size="lg" />
+<ConfirmModal intent="danger" confirmLabel="Delete project" />
+```
+
+| Prop | Default |
+| --- | --- |
+| `size` | `sm` |
+| `dir` | inherited |
+| `title` | English default; overrides `messages.title` |
+| `description` | English default; overrides `messages.description` |
+| `messages` | partial localized Modal message catalog |
+| `closeLabel` | overrides `messages.closeLabel` |
+| `showIcon` | `true` |
+| `showCloseButton` | `true` |
+| `showDivider` | `true` |
+| `showFooter` | `true` |
+| `showCheckbox` | `true` |
+| `footer` | none |
+
+`ConfirmModal` also accepts:
+
+| Prop | Default |
+| --- | --- |
+| `intent` | `danger` |
+| `messages` | partial localized ConfirmModal message catalog |
+| `confirmLabel` / `cancelLabel` | English; direct props override `messages` |
+| `confirmLoading` | `false` |
+| `confirmDisabled` | `false` |
+| `preventOutsideDismiss` | `true` |
+| `closeOnConfirm` / `closeOnCancel` | `true` |
+| `onConfirm` / `onCancel` | none |
+
+## Pixel Rules
+
+- Small, Default, and Large modal widths are `440px`, `560px`, and `700px`.
+- The shell uses `--bh-radius-2xl-12`.
+- Header padding is `20px 20px 8px`, with logical end padding reserved for the close button.
+- Body padding is `10px 20px 20px`.
+- Footer padding is `16px 20px`, with a `10px` gap.
+- Actions reuse `Button` with `size="sm"`, `variant="soft"` for the secondary action, and the default variant for the primary action.
+- Confirm actions reuse `Button` with `variant="danger"`, `variant="warning"`, or `variant="default"` from the selected intent.
+- The opt-out control reuses `Checkbox`.
+- Loading confirm actions reuse the Banhaten `Spinner` component.
+
+## Token Contract
+
+The component consumes existing Banhaten variables:
+
+- Surface: `--bh-bg-raised`, `--bh-bg-backdrop`, `--bh-bg-danger-subtle`, `--bh-bg-warning-subtle`
+- Border: `--bh-border-subtle`
+- Content: `--bh-content-default`, `--bh-content-subtle`, `--bh-content-danger-default`, `--bh-content-warning-default`
+- 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: `--elevation-component-default`, `--elevation-button-focus`, `--elevation-button-danger-focus`
+
+## Accessibility
+
+- `ModalContent` is backed by Radix Dialog for focus trap, Escape, outside-click dismissal, and ARIA dialog semantics.
+- `ModalTitle` and `ModalDescription` map to Radix dialog title and description primitives.
+- The close affordance is a real button through `ModalCloseButton`.
+- `ConfirmModal` sets `role="alertdialog"`, focuses the cancel action first when present, disables outside-pointer dismissal by default, and can optionally prevent Escape dismissal.
+- `ModalSurface` is presentational and intended for static documentation or visual comparison, not live modal behavior.
+- Direction never selects modal copy. Choose `messages` from the product locale; direct title, description, action, and close-label props have highest precedence.
+
+## Install
+
+```bash
+npx banhaten add modal
+```
+
+## Examples
+
+Primary registry example: `examples/modal-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs modal` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `closePlacement`: Close uses logical inline-end placement so it moves to the left side in RTL.
+- `footerOrder`: The checkbox and action cluster use inherited direction and logical gaps so their order mirrors naturally.
+- `messages`: Direction does not select language. Modal and ConfirmModal accept explicit message catalogs plus direct label overrides.
+- `textDirection`: Title, description, checkbox label, confirm labels, and actions use dir="auto" for Arabic and English copy.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,56 +1,56 @@
-# Native Select
-
-Native Select is a tokenized native `<select>` field for platform forms, mobile fallback, and lightweight option sets.
-
-## API
-
-```tsx
-<NativeSelect
-  label="Workspace"
-  options={[
-    { label: "Design", value: "design" },
-    { label: "Engineering", value: "engineering" },
-  ]}
-/>
-```
-
-| Prop | Values |
-| --- | --- |
-| `size` | `md`, `lg` |
-| `variant` | `default`, `soft` |
-| `state` | `default`, `filled`, `error`, `disabled` |
-| `options` | array of `{ label, value, disabled }` |
-
-## Token Contract
-
-Native Select reuses Banhaten select width, label, helper, trigger, border, focus, icon, and validation tokens.
-
-## RTL
-
-Native Select accepts `dir` and uses logical padding plus an inline-end chevron.
-
-## Accessibility
-
-Prefer `label` or an external `<Label htmlFor>` and use helper or error copy for validation context.
-
-## Install
-
-```bash
-npx banhaten add native-select
-```
-
-## Examples
-
-Primary registry example: `examples/native-select-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs native-select` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Uses logical padding and inline-end chevron placement.
-- `textDirection`: Label and helper copy use dir="auto" through Label and helper text.
-
+# Native Select
+
+Native Select is a tokenized native `<select>` field for platform forms, mobile fallback, and lightweight option sets.
+
+## API
+
+```tsx
+<NativeSelect
+  label="Workspace"
+  options={[
+    { label: "Design", value: "design" },
+    { label: "Engineering", value: "engineering" },
+  ]}
+/>
+```
+
+| Prop | Values |
+| --- | --- |
+| `size` | `md`, `lg` |
+| `variant` | `default`, `soft` |
+| `state` | `default`, `filled`, `error`, `disabled` |
+| `options` | array of `{ label, value, disabled }` |
+
+## Token Contract
+
+Native Select reuses Banhaten select width, label, helper, trigger, border, focus, icon, and validation tokens.
+
+## RTL
+
+Native Select accepts `dir` and uses logical padding plus an inline-end chevron.
+
+## Accessibility
+
+Prefer `label` or an external `<Label htmlFor>` and use helper or error copy for validation context.
+
+## Install
+
+```bash
+npx banhaten add native-select
+```
+
+## Examples
+
+Primary registry example: `examples/native-select-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs native-select` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Uses logical padding and inline-end chevron placement.
+- `textDirection`: Label and helper copy use dir="auto" through Label and helper text.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,52 +1,52 @@
-# Navigation Menu
-
-Navigation Menu wraps Radix NavigationMenu for top navigation with trigger, content, link, viewport, and indicator parts.
-
-## API
-
-```tsx
-<NavigationMenu>
-  <NavigationMenuList>
-    <NavigationMenuItem>
-      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
-      <NavigationMenuContent>
-        <NavigationMenuLink href="#">Components</NavigationMenuLink>
-      </NavigationMenuContent>
-    </NavigationMenuItem>
-  </NavigationMenuList>
-  <NavigationMenuViewport />
-</NavigationMenu>
-```
-
-## Token Contract
-
-Navigation Menu uses Banhaten ghost hover, soft active state, raised content, popover shadow, radius, and body typography tokens.
-
-## RTL
-
-The list and content inherit direction. Links use logical text alignment.
-
-## Accessibility
-
-Radix handles trigger relationships, viewport sizing, keyboard navigation, and focus.
-
-## Install
-
-```bash
-npx banhaten add navigation-menu
-```
-
-## Examples
-
-Primary registry example: `examples/navigation-menu-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs navigation-menu` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Triggers, links, and content use logical layout and inherited direction.
-
+# Navigation Menu
+
+Navigation Menu wraps Radix NavigationMenu for top navigation with trigger, content, link, viewport, and indicator parts.
+
+## API
+
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="#">Components</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+  <NavigationMenuViewport />
+</NavigationMenu>
+```
+
+## Token Contract
+
+Navigation Menu uses Banhaten ghost hover, soft active state, raised content, popover shadow, radius, and body typography tokens.
+
+## RTL
+
+The list and content inherit direction. Links use logical text alignment.
+
+## Accessibility
+
+Radix handles trigger relationships, viewport sizing, keyboard navigation, and focus.
+
+## Install
+
+```bash
+npx banhaten add navigation-menu
+```
+
+## Examples
+
+Primary registry example: `examples/navigation-menu-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs navigation-menu` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Triggers, links, and content use logical layout and inherited direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,84 +1,84 @@
-# Onboarding Step List Item
-
-`OnboardingStepListItem` renders one vertical progress-list row for onboarding, setup, or guided task flows. It should be composed into a list by the parent flow, which controls line visibility for first and last items.
-
-Figma reference: `OnboardingStepListItem`, node `587:27227`.
-
-## Variants
-
-The Figma component defines these variants:
-
-| State | Direction |
-| --- | --- |
-| `Finished` | LTR and RTL |
-| `Active` | LTR and RTL |
-| `inactive` | LTR and RTL |
-
-Code uses lowercase semantic state values: `finished`, `active`, and `inactive`.
-
-## API
-
-```tsx
-<OnboardingStepListItem
-  state="finished"
-  label="Label"
-  dir="ltr"
-  showLeadingLine
-  showTrailingLine
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `state` | `finished`, `active`, `inactive` | `finished` |
-| `label` | `string` | `Label` |
-| `dir` | `ltr`, `rtl` | `ltr` |
-| `showLeadingLine` | `boolean` | `true` |
-| `showTrailingLine` | `boolean` | `true` |
-
-## Token Contract
-
-The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
-
-- Backgrounds: `--bh-bg-raised`
-- Borders: `--bh-border-brand-strong`, `--bh-border-default`
-- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`
-- Shape: `--bh-control-default`
-- Space: `--bh-space-lg-10`, `--bh-space-xl-12`
-
-## Pixel Rules
-
-- The row is `280px` wide and `40px` tall.
-- Padding is `8px 12px` with a `10px` gap between the line wrap and label.
-- Text uses Inter Medium `15px / 24px` with zero letter spacing.
-- The line wrap is `24px` square.
-- Finished uses an `18px` success check-circle glyph in a `20px` slot with `2px` default connector lines.
-- Active uses a `2px x 20px` brand line, a default border, white raised fill, `8px` radius, and component shadow.
-- Inactive uses a `2px x 40px` default connector line and subtle content color.
-- RTL mirrors visual order through `dir="rtl"` and right-aligns the label.
-
-## Accessibility
-
-- Connector lines and the finished icon are decorative in this primitive and are hidden from assistive technology.
-- Parent onboarding lists should expose the overall progress semantics, current step, and completion status.
-- Keep labels as real text and avoid using this row as the only status announcement.
-
-## Install
-
-```bash
-npx banhaten add onboarding-step
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/onboarding-step-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs onboarding-step` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Onboarding Step List Item
+
+`OnboardingStepListItem` renders one vertical progress-list row for onboarding, setup, or guided task flows. It should be composed into a list by the parent flow, which controls line visibility for first and last items.
+
+Figma reference: `OnboardingStepListItem`, node `587:27227`.
+
+## Variants
+
+The Figma component defines these variants:
+
+| State | Direction |
+| --- | --- |
+| `Finished` | LTR and RTL |
+| `Active` | LTR and RTL |
+| `inactive` | LTR and RTL |
+
+Code uses lowercase semantic state values: `finished`, `active`, and `inactive`.
+
+## API
+
+```tsx
+<OnboardingStepListItem
+  state="finished"
+  label="Label"
+  dir="ltr"
+  showLeadingLine
+  showTrailingLine
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `state` | `finished`, `active`, `inactive` | `finished` |
+| `label` | `string` | `Label` |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `showLeadingLine` | `boolean` | `true` |
+| `showTrailingLine` | `boolean` | `true` |
+
+## Token Contract
+
+The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
+
+- Backgrounds: `--bh-bg-raised`
+- Borders: `--bh-border-brand-strong`, `--bh-border-default`
+- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-subtle`, `--bh-content-success-default`
+- Shape: `--bh-control-default`
+- Space: `--bh-space-lg-10`, `--bh-space-xl-12`
+
+## Pixel Rules
+
+- The row is `280px` wide and `40px` tall.
+- Padding is `8px 12px` with a `10px` gap between the line wrap and label.
+- Text uses Inter Medium `15px / 24px` with zero letter spacing.
+- The line wrap is `24px` square.
+- Finished uses an `18px` success check-circle glyph in a `20px` slot with `2px` default connector lines.
+- Active uses a `2px x 20px` brand line, a default border, white raised fill, `8px` radius, and component shadow.
+- Inactive uses a `2px x 40px` default connector line and subtle content color.
+- RTL mirrors visual order through `dir="rtl"` and right-aligns the label.
+
+## Accessibility
+
+- Connector lines and the finished icon are decorative in this primitive and are hidden from assistive technology.
+- Parent onboarding lists should expose the overall progress semantics, current step, and completion status.
+- Keep labels as real text and avoid using this row as the only status announcement.
+
+## Install
+
+```bash
+npx banhaten add onboarding-step
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/onboarding-step-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs onboarding-step` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract