banhaten 0.3.0 → 0.5.0

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
 
@@ -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

@@ -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 a `20px` success check-circle icon 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
 
@@ -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-stroke-225`, `--bh-space-17xl-288`, `--bh-space-2xl-14`, `--bh-space-4xl-20`, `--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 -->

package/docs/design-system/components/page-header.md

@@ -1,88 +1,94 @@
-# Page Header
-
-Page headers introduce a page or section with optional hierarchy, title metadata, actions, description, and local tabs.
-
-Figma reference: `Page Header`, node `1154:2816` in `Design system 3.0 Copy`.
-
-## API
-
-```tsx
-<PageHeader
-  title="Section Tile"
-  metaInfo="Meta info"
-  description="Section description"
-  breadcrumbs={[{ label: "Home" }, { label: "Home" }]}
-  actions={[{ label: "Button" }, { label: "Button" }]}
-  tabs={{ items: ["Tab item", "Tab item", "Tab item"] }}
-/>
-```
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| `title` | `string` | `Section Tile` |
-| `metaInfo` | `string` | `Meta info` |
-| `description` | `string` | `Section description` |
-| `icon` | `ReactNode` or `false` | home icon |
-| `breadcrumbs` | `PageHeaderBreadcrumb[]` or `false` | four `Home` items |
-| `actions` | `PageHeaderAction[]` or `false` | four `Button` actions |
-| `tabs` | `PageHeaderTabs` or `false` | underline `Tabs` |
-| `dir` | `ltr` or `rtl` | `ltr` |
-
-## Structure
-
-The implementation follows the Figma hierarchy:
-
-- Breadcrumb navigation above the section body.
-- Title row with optional icon, title, and meta text.
-- Action group aligned to the end of the title row.
-- Optional body description below the title row.
-- Underline `Tabs` spanning the full header width.
-
-`PageHeader` reuses the existing `Tabs` component instead of duplicating tab behavior.
-
-## 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.
-
-- Borders: `--bh-border-default`
-- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-heading`, `--bh-content-muted`, `--bh-content-subtle`
-- Interactive: `--bh-interactive-secondary-default`
-- Shape: `--bh-control-default`
-
-## Pixel Rules
-
-- Header root is vertically padded by `20px`.
-- Breadcrumb and body text use `15px / 24px`.
-- Title uses `24px / 28px` at weight `600`.
-- Meta text uses `12px / 16px`.
-- Title row and action group are separated by `40px`.
-- Action buttons are `36px` high with an `8px` radius, subtle border, drop shadow, and inner bottom shadow.
-- Tabs use the existing `underline`, `md`, `fullWidth` tab treatment.
-
-## Accessibility
-
-- Breadcrumbs render as `<nav aria-label="Breadcrumb">` with an ordered list.
-- Mark the current breadcrumb with `current: true` so it receives `aria-current="page"`.
-- Separators are decorative and hidden from assistive technology.
-- Action items render as real buttons or anchors.
-- Focus states use the brand token and remain visible for keyboard users.
-
-## Install
-
-```bash
-npx banhaten add page-header
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/page-header-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs page-header` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Page Header
+
+Page headers introduce a page or section with optional hierarchy, title metadata, actions, description, and local tabs.
+
+Figma reference: `Page Header`, node `1154:2816` in `Design system 3.0 Copy`.
+
+## API
+
+```tsx
+<PageHeader
+  title="Section Tile"
+  metaInfo="Meta info"
+  description="Section description"
+  breadcrumbs={[{ label: "Home" }, { label: "Home" }]}
+  actions={[{ label: "Button" }, { label: "Button" }]}
+  tabs={{ items: ["Tab item", "Tab item", "Tab item"] }}
+/>
+```
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` | `string` | `Section Tile` |
+| `metaInfo` | `string` | `Meta info` |
+| `description` | `string` | `Section description` |
+| `icon` | `ReactNode` or `false` | home icon |
+| `breadcrumbs` | `PageHeaderBreadcrumb[]` or `false` | four `Home` items |
+| `actions` | `PageHeaderAction[]` or `false` | four `Button` actions |
+| `tabs` | `PageHeaderTabs` or `false` | underline `Tabs` |
+| `tabs.fullWidth` | `boolean` | `true`; set `false` for content-width triggers |
+| `dir` | `ltr` or `rtl` | `ltr` |
+
+## Structure
+
+The implementation follows the Figma hierarchy:
+
+- Breadcrumb navigation above the section body.
+- Title row with optional icon, title, and meta text.
+- Action group aligned to the end of the title row.
+- Optional body description below the title row.
+- Underline `Tabs` spanning the full header width. Triggers take equal shares by default and can opt into content width with `tabs.fullWidth: false`.
+
+The title and description each resolve their own content direction. This keeps punctuation attached to the content when its script opposes the surrounding page direction, without changing the mirrored header layout.
+
+`PageHeader` reuses the existing `Button` and `Tabs` components instead of duplicating their behavior or visual contracts. Action descriptors render as `secondary`, default-density Buttons; PageHeader owns only their grouping and placement.
+
+Breadcrumb items retain Breadcrumbs' icon-slot contract: populated slots use the canonical icon geometry, while empty slots collapse instead of reserving space inside the header.
+
+## 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.
+
+- Content: `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-heading`, `--bh-content-muted`, `--bh-content-subtle`
+- Actions inherit Button's secondary surface, border, typography, focus, and disabled tokens instead of redeclaring them in PageHeader.
+- Breadcrumb icon visibility and geometry remain owned by Breadcrumbs.
+
+## Pixel Rules
+
+- Header root is vertically padded by `20px`.
+- Breadcrumb and body text use `15px / 24px`.
+- Title uses `24px / 28px` at weight `600`.
+- Meta text uses `12px / 16px`.
+- Title row and action group are separated by `40px`.
+- Populated breadcrumb icon slots remain `20px`; empty slots collapse to `0px`.
+- Actions use Button's `secondary`, `density="default"` contract (`36px` high, resolving to `sm`); PageHeader owns only action-group placement and gap.
+- Tabs use the existing `underline`, `md`, `fullWidth` treatment by default. Full-width triggers keep equal shares while labels fit; both full and content-width modes preserve intrinsic label width and scroll horizontally when the row is narrower than its labels.
+
+## Accessibility
+
+- Breadcrumbs render as `<nav aria-label="Breadcrumb">` with an ordered list.
+- Mark the current breadcrumb with `current: true` so it receives `aria-current="page"`.
+- Separators are decorative and hidden from assistive technology.
+- Action items render as real buttons or anchors.
+- Action focus and disabled states come from Button; breadcrumb focus remains visible for keyboard users.
+- Tab labels remain complete and non-overlapping; constrained rows scroll locally instead of truncating or painting one label over another.
+
+## Install
+
+```bash
+npx banhaten add page-header
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/page-header-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs page-header` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+The header layout inherits document direction and uses logical spacing. The title and description independently use `dir="auto"`, so Latin copy in an RTL header (and Arabic copy in an LTR header) keeps neutral punctuation at its content end while breadcrumbs, actions, metadata, and tabs retain the header direction. Horizontal tab overflow follows that inherited direction without changing or truncating label copy.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -94,7 +100,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/expanded/PageHeader.tsx: PageHeader` |
 | `parts` | `PageHeader` |
 | `registryDependencies` | `breadcrumbs`, `button`, `tabs` |
+| `features` | `Breadcrumb-owned icon-slot visibility`, `Button-owned default-density secondary action styling`, `content-safe horizontal tab overflow`, `full-width tab opt-out` |
 | `modes` | `breadcrumbs`, `metadata`, `description`, `actions`, `tabs` |
 | `states` | `default`, `without-icon`, `without-actions`, `without-tabs` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-default`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-control-default`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-icon-stroke-190`, `--bh-interactive-secondary-default`, `--bh-opacity-muted`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--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-heading-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-line-height`, `--shadow-button-secondary` |
+| `tokens` | `--bh-button-label-padding-x`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-icon-stroke-190`, `--bh-space-2xl-14`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--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-line-height`, `--bh-text-body-md-medium-font-size`, `--bh-text-body-md-medium-font-weight`, `--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-heading-md-semibold-font-size`, `--bh-text-heading-md-semibold-font-weight`, `--bh-text-heading-md-semibold-line-height` |
 <!-- registry-contract:end -->

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

@@ -1,59 +1,59 @@
-# Pagination
-
-Pagination navigates paged result sets, tables, and long lists. It supports numeric, simple, and summary layouts, soft and ghost styles, exact control geometry, captions, RTL layout, and explicit localized messages.
-
-## API
-
-```tsx
-<Pagination page={3} pages={[1, 2, 3, "ellipsis", 12]} type="numeric" />
-<Pagination
-  dir="rtl"
-  messages={{ previous: "הקודם", next: "הבא" }}
-  page={2}
-  type="summary"
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `type` | `numeric`, `simple`, `summary` | `numeric` |
-| `variant` | `soft`, `ghost` | `soft` |
-| `page` | number | `2` |
-| `pages` | page numbers, page descriptors, `ellipsis` | built-in demo sequence |
-| `messages` | partial localized message catalog | English defaults |
-| `caption`, `summary`, previous/next label and ARIA props | direct overrides | matching message value |
-
-## Token Contract
-
-Pagination uses Banhaten control height, radius, border, background, content, focus, icon, caption, and shadow tokens.
-
-## RTL
-
-Passing `dir="rtl"` mirrors previous/next directional icons with `data-rtl-flip="true"` and leaves the selected message catalog unchanged. Use `arabicPaginationMessages` or product-owned messages when the locale is Arabic.
-
-## Accessibility
-
-Wrap pagination in a navigation landmark with a descriptive label. Current page controls should expose current state, and previous/next buttons should have readable labels.
-
-## Install
-
-```bash
-npx banhaten add pagination
-```
-
-## Examples
-
-Primary registry example: `examples/pagination-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs pagination` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `messages`: Direction does not select language. English defaults are stable; pass messages for Arabic, Hebrew, Persian, Urdu, or another locale.
-- `directionalIconFlip`: Inline Figma arrow vectors use data-rtl-flip="true" so previous and next controls mirror in RTL.
-- `spacing`: Uses logical flex direction, gap, and text direction so English and Arabic captions align naturally.
-
+# Pagination
+
+Pagination navigates paged result sets, tables, and long lists. It supports numeric, simple, and summary layouts, soft and ghost styles, exact control geometry, captions, RTL layout, and explicit localized messages.
+
+## API
+
+```tsx
+<Pagination page={3} pages={[1, 2, 3, "ellipsis", 12]} type="numeric" />
+<Pagination
+  dir="rtl"
+  messages={{ previous: "הקודם", next: "הבא" }}
+  page={2}
+  type="summary"
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `type` | `numeric`, `simple`, `summary` | `numeric` |
+| `variant` | `soft`, `ghost` | `soft` |
+| `page` | number | `2` |
+| `pages` | page numbers, page descriptors, `ellipsis` | built-in demo sequence |
+| `messages` | partial localized message catalog | English defaults |
+| `caption`, `summary`, previous/next label and ARIA props | direct overrides | matching message value |
+
+## Token Contract
+
+Pagination uses Banhaten control height, radius, border, background, content, focus, icon, caption, and elevation tokens. Previous/next glyphs are 18px inside 20px slots.
+
+## RTL
+
+Passing `dir="rtl"` mirrors previous/next directional icons with `data-rtl-flip="true"` and leaves the selected message catalog unchanged. Use `arabicPaginationMessages` or product-owned messages when the locale is Arabic.
+
+## Accessibility
+
+Wrap pagination in a navigation landmark with a descriptive label. Current page controls should expose current state, and previous/next buttons should have readable labels.
+
+## Install
+
+```bash
+npx banhaten add pagination
+```
+
+## Examples
+
+Primary registry example: `examples/pagination-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs pagination` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `messages`: Direction does not select language. English defaults are stable; pass messages for Arabic, Hebrew, Persian, Urdu, or another locale.
+- `directionalIconFlip`: Inline Figma arrow vectors use data-rtl-flip="true" so previous and next controls mirror in RTL.
+- `spacing`: Uses logical flex direction, gap, and text direction so English and Arabic captions align naturally.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -66,7 +66,7 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `Pagination` |
 | `registryDependencies` | None |
 | `features` | `container-aware compact numeric pages`, `contained horizontal control scrolling`, `wrapping captions and summaries` |
-| `tokens` | `--bh-border-brand-strong`, `--bh-content-disabled`, `--bh-icon-stroke-225`, `--bh-pagination-action-gap`, `--bh-pagination-active-bg`, `--bh-pagination-active-border`, `--bh-pagination-active-content`, `--bh-pagination-caption-content`, `--bh-pagination-caption-font-weight`, `--bh-pagination-caption-width`, `--bh-pagination-control-content`, `--bh-pagination-control-gap`, `--bh-pagination-control-ghost-bg`, `--bh-pagination-control-ghost-hover`, `--bh-pagination-control-ghost-pressed`, `--bh-pagination-control-label-padding-x`, `--bh-pagination-control-label-rtl-padding-x`, `--bh-pagination-control-soft-bg`, `--bh-pagination-control-soft-hover`, `--bh-pagination-control-soft-pressed`, `--bh-pagination-control-text-gap`, `--bh-pagination-control-text-padding-x`, `--bh-pagination-control-text-rtl-gap`, `--bh-pagination-control-text-rtl-padding-x`, `--bh-pagination-font-size`, `--bh-pagination-icon-size`, `--bh-pagination-item-size`, `--bh-pagination-label-font-weight`, `--bh-pagination-letter-spacing`, `--bh-pagination-line-height`, `--bh-pagination-numeric-width`, `--bh-pagination-page-bg`, `--bh-pagination-page-content`, `--bh-pagination-page-gap`, `--bh-pagination-page-hover`, `--bh-pagination-page-pressed`, `--bh-pagination-radius`, `--bh-pagination-root-gap`, `--bh-pagination-simple-width`, `--bh-space-md-8`, `--shadow-pagination-active`, `--shadow-pagination-control`, `--shadow-pagination-focus` |
+| `tokens` | `--bh-border-brand-strong`, `--bh-content-disabled`, `--bh-icon-stroke-225`, `--bh-pagination-action-gap`, `--bh-pagination-active-bg`, `--bh-pagination-active-border`, `--bh-pagination-active-content`, `--bh-pagination-caption-content`, `--bh-pagination-caption-font-weight`, `--bh-pagination-caption-width`, `--bh-pagination-control-content`, `--bh-pagination-control-gap`, `--bh-pagination-control-ghost-bg`, `--bh-pagination-control-ghost-hover`, `--bh-pagination-control-ghost-pressed`, `--bh-pagination-control-label-padding-x`, `--bh-pagination-control-label-rtl-padding-x`, `--bh-pagination-control-soft-bg`, `--bh-pagination-control-soft-hover`, `--bh-pagination-control-soft-pressed`, `--bh-pagination-control-text-gap`, `--bh-pagination-control-text-padding-x`, `--bh-pagination-control-text-rtl-gap`, `--bh-pagination-control-text-rtl-padding-x`, `--bh-pagination-font-size`, `--bh-pagination-icon-size`, `--bh-pagination-icon-slot-size`, `--bh-pagination-item-size`, `--bh-pagination-label-font-weight`, `--bh-pagination-letter-spacing`, `--bh-pagination-line-height`, `--bh-pagination-numeric-width`, `--bh-pagination-page-bg`, `--bh-pagination-page-content`, `--bh-pagination-page-gap`, `--bh-pagination-page-hover`, `--bh-pagination-page-pressed`, `--bh-pagination-radius`, `--bh-pagination-root-gap`, `--bh-pagination-simple-width`, `--bh-space-md-8`, `--elevation-pagination-active`, `--elevation-pagination-control`, `--elevation-pagination-focus` |
 | `types` | `numeric`, `simple`, `summary` |
 | `variants` | `soft`, `ghost` |
 <!-- registry-contract:end -->