banhaten 0.3.0 → 0.5.0

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

@@ -1,67 +1,67 @@
-# Slideout
-
-`Slideout` renders a right- or left-aligned panel for focused secondary workflows. It supports desktop and mobile breakpoints, three desktop widths, optional header action, optional footer actions, and LTR/RTL direction.
-
-Figma reference: `Slideout`, node `256:19065`.
-
-## Examples
-
-The local implementation includes these Figma slot-content examples:
-
-| Example | Figma node |
-| --- | --- |
-| Filters | `256:18779` |
-| User profile activity | `256:18872` |
-| Payment detail | `256:18901` |
-| Payment detail 02 | `256:18964` |
-
-## API
-
-```tsx
-<Slideout size="small" breakpoint="desktop" dir="ltr">
-  <SlideoutFiltersExample />
-</Slideout>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `size` | `small`, `medium`, `large` | `small` |
-| `breakpoint` | `desktop`, `mobile` | `desktop` |
-| `dir` | `ltr`, `rtl` | `ltr` |
-| `title` | `string` | none |
-| `headerAction` | `boolean` | `true` |
-| `footer` | `boolean` | `true` |
-| `secondaryAction` | `boolean` | `true` |
-
-## Layout
-
-- Desktop outer sizes match the Figma matrix: small `356px`, medium `416px`, and large `516px`, each at `900px` height.
-- Mobile uses `375px x 812px` and removes the desktop panel corner radius.
-- Header and footer are fixed-height regions; the body owns vertical scrolling.
-- Slot content is passed as children so product workflows can compose filters, activity, payment details, forms, or custom content without changing the panel API.
-
-## Accessibility
-
-- The panel uses `role="dialog"` with the current title as its accessible label.
-- Close and action controls are real buttons.
-- Slot examples keep text content as real text and mirror layout through `dir="rtl"` rather than separate component APIs.
-
-## Install
-
-```bash
-npx banhaten add slideout
-```
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/expanded/slideout.css`, `components/expanded/Slideout.tsx`.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Slideout
+
+`Slideout` renders a right- or left-aligned panel for focused secondary workflows. It supports desktop and mobile breakpoints, three desktop widths, optional header action, optional footer actions, and LTR/RTL direction.
+
+Figma reference: `Slideout`, node `256:19065`.
+
+## Examples
+
+The local implementation includes these Figma slot-content examples:
+
+| Example | Figma node |
+| --- | --- |
+| Filters | `256:18779` |
+| User profile activity | `256:18872` |
+| Payment detail | `256:18901` |
+| Payment detail 02 | `256:18964` |
+
+## API
+
+```tsx
+<Slideout size="small" breakpoint="desktop" dir="ltr">
+  <SlideoutFiltersExample />
+</Slideout>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `size` | `small`, `medium`, `large` | `small` |
+| `breakpoint` | `desktop`, `mobile` | `desktop` |
+| `dir` | `ltr`, `rtl` | `ltr` |
+| `title` | `string` | none |
+| `headerAction` | `boolean` | `true` |
+| `footer` | `boolean` | `true` |
+| `secondaryAction` | `boolean` | `true` |
+
+## Layout
+
+- Desktop outer sizes match the Figma matrix: small `356px`, medium `416px`, and large `516px`, each at `900px` height.
+- Mobile uses `375px x 812px` and removes the desktop panel corner radius.
+- Header and footer are fixed-height regions; the body owns vertical scrolling.
+- Slot content is passed as children so product workflows can compose filters, activity, payment details, forms, or custom content without changing the panel API.
+
+## Accessibility
+
+- The panel uses `role="dialog"` with the current title as its accessible label.
+- Close and action controls are real buttons.
+- Slot examples keep text content as real text and mirror layout through `dir="rtl"` rather than separate component APIs.
+
+## Install
+
+```bash
+npx banhaten add slideout
+```
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/expanded/slideout.css`, `components/expanded/Slideout.tsx`.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -76,5 +76,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `desktop`, `mobile` |
 | `sizes` | `small`, `medium`, `large` |
 | `states` | `header-action`, `footer-actions`, `without-footer`, `primary-only` |
-| `tokens` | `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-default`, `--bh-border-input`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-stroke-220`, `--bh-interactive-brand-default`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-18xl-320`, `--bh-space-19xl-384`, `--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-9xl-64`, `--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-space-xxxs-1`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-line-height`, `--bh-text-heading-xs-medium-font-size`, `--bh-text-heading-xs-medium-line-height`, `--shadow-button-raised`, `--shadow-button-soft`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-default`, `--bh-bg-dim`, `--bh-bg-muted`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-default`, `--bh-border-input`, `--bh-border-subtle`, `--bh-content-brand-default`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-control-default`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-stroke-220`, `--bh-interactive-brand-default`, `--bh-interactive-ghost-hover`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-11xl-96`, `--bh-space-12xl-128`, `--bh-space-18xl-320`, `--bh-space-19xl-384`, `--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-9xl-64`, `--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-space-xxxs-1`, `--bh-text-body-md-medium-line-height`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-heading-sm-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-line-height`, `--bh-text-heading-xs-medium-font-size`, `--bh-text-heading-xs-medium-line-height`, `--elevation-button-raised`, `--elevation-button-soft`, `--elevation-component-default` |
 <!-- registry-contract:end -->

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

@@ -1,65 +1,65 @@
-# Slider
-
-Slider is an accessible value and range control built on Radix Slider. It matches the Figma single-node and double-node slider sets, including text and tooltip indicators above or below the thumb, RTL, tick marks, disabled state, vertical orientation, and the large pill treatment used by the investment savings background.
-
-## API
-
-```tsx
-<Slider aria-label="Investment amount" defaultValue={[45]} />
-
-<Slider
-  aria-label="Savings range"
-  ariaLabels={["Minimum savings", "Maximum savings"]}
-  defaultValue={[25, 72]}
-  indicator="lower-text"
-  minStepsBetweenThumbs={4}
-/>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `variant` | `default`, `pill` |
-| `size` | `sm`, `default`, `lg` |
-| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
-| `indicator` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
-| `orientation` | `horizontal`, `vertical` |
-
-Use `showTicks` and `tickCount` for dotted track markers. Use `indicator` for Figma text/tooltip markers, `thumbLabel` or `thumbLabels` to customize marker text, `showThumbGrip` for pill controls, and `ariaValueText` for assistive value formatting.
-
-## Tokens
-
-Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb shadows, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
-
-## Install
-
-```bash
-npx banhaten add slider
-```
-
-## Examples
-
-Primary registry example: `examples/slider-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs slider` to inspect source files, install command, and examples.
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/slider.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute.
-- `spacing`: Uses logical thumb content spacing and tokenized track/thumb geometry.
-
-## Accessibility
-
-This component relies on `@radix-ui/react-slider` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
-
+# Slider
+
+Slider is an accessible value and range control built on Radix Slider. It matches the Figma single-node and double-node slider sets, including text and tooltip indicators above or below the thumb, RTL, tick marks, disabled state, vertical orientation, and the large pill treatment used by the investment savings background.
+
+## API
+
+```tsx
+<Slider aria-label="Investment amount" defaultValue={[45]} />
+
+<Slider
+  aria-label="Savings range"
+  ariaLabels={["Minimum savings", "Maximum savings"]}
+  defaultValue={[25, 72]}
+  indicator="lower-text"
+  minStepsBetweenThumbs={4}
+/>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `variant` | `default`, `pill` |
+| `size` | `sm`, `default`, `lg` |
+| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
+| `indicator` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
+| `orientation` | `horizontal`, `vertical` |
+
+Use `showTicks` and `tickCount` for dotted track markers. Use `indicator` for Figma text/tooltip markers, `thumbLabel` or `thumbLabels` to customize marker text, `showThumbGrip` for pill controls, and `ariaValueText` for assistive value formatting.
+
+## Tokens
+
+Slider consumes component aliases for track size, thumb size, pill height, tick geometry, thumb elevation, and semantic color roles. Tones map to semantic brand/status/accent tokens so color theme changes are inherited automatically.
+
+## Install
+
+```bash
+npx banhaten add slider
+```
+
+## Examples
+
+Primary registry example: `examples/slider-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs slider` to inspect source files, install command, and examples.
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/slider.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute.
+- `spacing`: Uses logical thumb content spacing and tokenized track/thumb geometry.
+
+## Accessibility
+
+This component relies on `@radix-ui/react-slider` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -75,7 +75,7 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `indicators` | `none`, `lower-text`, `upper-text`, `lower-tooltip`, `upper-tooltip` |
 | `sizes` | `sm`, `default`, `lg` |
 | `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-always-white`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--bh-bg-warning-soft`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-brand-subtle`, `--bh-border-danger-strong`, `--bh-border-danger-subtle`, `--bh-border-disabled`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-indicator-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-slider-indicator-gap`, `--bh-slider-pill-height`, `--bh-slider-pill-radius`, `--bh-slider-pill-thumb-border-width`, `--bh-slider-pill-thumb-width`, `--bh-slider-pill-track-bg`, `--bh-slider-range-bg`, `--bh-slider-thumb-bg`, `--bh-slider-thumb-grip-bg`, `--bh-slider-thumb-grip-width`, `--bh-slider-thumb-pill-bg`, `--bh-slider-thumb-pill-border`, `--bh-slider-thumb-radius`, `--bh-slider-thumb-ring-bg`, `--bh-slider-thumb-ring-width-current`, `--bh-slider-thumb-ring-width-lg`, `--bh-slider-thumb-ring-width-md`, `--bh-slider-thumb-ring-width-sm`, `--bh-slider-thumb-size-current`, `--bh-slider-thumb-size-lg`, `--bh-slider-thumb-size-md`, `--bh-slider-thumb-size-sm`, `--bh-slider-tick-bg`, `--bh-slider-tick-gap`, `--bh-slider-tick-size`, `--bh-slider-track-bg`, `--bh-slider-track-radius`, `--bh-slider-track-size-current`, `--bh-slider-track-size-lg`, `--bh-slider-track-size-md`, `--bh-slider-track-size-sm`, `--bh-slider-vertical-height`, `--bh-slider-width`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--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-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-z-base`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-slider-thumb`, `--shadow-slider-thumb-focus`, `--shadow-slider-tooltip` |
+| `tokens` | `--bh-bg-always-white`, `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-default`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-neutral-bold`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-success-default`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--bh-bg-warning-default`, `--bh-bg-warning-soft`, `--bh-bg-warning-subtle`, `--bh-border-brand-strong`, `--bh-border-brand-subtle`, `--bh-border-danger-strong`, `--bh-border-danger-subtle`, `--bh-border-disabled`, `--bh-border-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-indicator-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-slider-indicator-gap`, `--bh-slider-pill-height`, `--bh-slider-pill-radius`, `--bh-slider-pill-thumb-border-width`, `--bh-slider-pill-thumb-width`, `--bh-slider-pill-track-bg`, `--bh-slider-range-bg`, `--bh-slider-thumb-bg`, `--bh-slider-thumb-grip-bg`, `--bh-slider-thumb-grip-width`, `--bh-slider-thumb-pill-bg`, `--bh-slider-thumb-pill-border`, `--bh-slider-thumb-radius`, `--bh-slider-thumb-ring-bg`, `--bh-slider-thumb-ring-width-current`, `--bh-slider-thumb-ring-width-lg`, `--bh-slider-thumb-ring-width-md`, `--bh-slider-thumb-ring-width-sm`, `--bh-slider-thumb-size-current`, `--bh-slider-thumb-size-lg`, `--bh-slider-thumb-size-md`, `--bh-slider-thumb-size-sm`, `--bh-slider-tick-bg`, `--bh-slider-tick-gap`, `--bh-slider-tick-size`, `--bh-slider-track-bg`, `--bh-slider-track-radius`, `--bh-slider-track-size-current`, `--bh-slider-track-size-lg`, `--bh-slider-track-size-md`, `--bh-slider-track-size-sm`, `--bh-slider-vertical-height`, `--bh-slider-width`, `--bh-space-6xl-32`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--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-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-z-base`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--elevation-slider-thumb`, `--elevation-slider-thumb-focus`, `--elevation-slider-tooltip` |
 | `tones` | `brand`, `neutral`, `success`, `warning`, `danger` |
 | `valueModes` | `single`, `range`, `multi-thumb` |
 <!-- registry-contract:end -->

package/docs/design-system/components/social-button.md

@@ -1,52 +1,52 @@
-# Social Button
-
-Social Button is the sign-in action primitive for supported identity providers. It includes Figma-matched platform styling, solid and outlined variants, icon-only mode, native focus-visible styling, RTL layout, and explicit localized messages.
-
-## API
-
-```tsx
-<SocialButton platform="google">Continue with Google</SocialButton>
-<SocialButton platform="apple" variant="outline" size="icon" aria-label="Continue with Apple" />
-```
-
-| Prop | Values |
-| --- | --- |
-| `platform` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
-| `variant` | `solid`, `outline` |
-| `size` | `default`, `icon` |
-| `label` | localized label override |
-| `messages` | partial provider-label catalog selected by product locale |
-
-## Token Contract
-
-Social Button uses Banhaten control, typography, radius, focus, spacing, and shadow tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
-
-## RTL
-
-Icon and label spacing uses logical flex rhythm in RTL. Labels remain English unless `messages`, `label`, or text children select another language; `arabicSocialButtonMessages` is available for an explicit Arabic locale.
-
-## Accessibility
-
-Icon-only social buttons must provide `aria-label`. Button text should name the provider and the action, such as `Continue with Google`.
-
-## Install
-
-```bash
-npx banhaten add social-button
-```
-
-## Examples
-
-Primary registry example: `examples/social-button-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs social-button` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `messages`: Direction controls layout only. Pass label, children, aria-label, or messages to localize provider names.
-- `spacing`: Uses logical label padding and flex gap so the icon/label order follows inherited direction.
-
+# Social Button
+
+Social Button is the sign-in action primitive for supported identity providers. It includes Figma-matched platform styling, solid and outlined variants, icon-only mode, native focus-visible styling, RTL layout, and explicit localized messages.
+
+## API
+
+```tsx
+<SocialButton platform="google">Continue with Google</SocialButton>
+<SocialButton platform="apple" variant="outline" size="icon" aria-label="Continue with Apple" />
+```
+
+| Prop | Values |
+| --- | --- |
+| `platform` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
+| `variant` | `solid`, `outline` |
+| `size` | `default`, `icon` |
+| `label` | localized label override |
+| `messages` | partial provider-label catalog selected by product locale |
+
+## Token Contract
+
+Social Button uses Banhaten control, typography, radius, focus, spacing, and elevation tokens. Provider colors are the limited brand-color exception and should stay scoped to this component.
+
+## RTL
+
+Icon and label spacing uses logical flex rhythm in RTL. Labels remain English unless `messages`, `label`, or text children select another language; `arabicSocialButtonMessages` is available for an explicit Arabic locale.
+
+## Accessibility
+
+Icon-only social buttons must provide `aria-label`. Button text should name the provider and the action, such as `Continue with Google`.
+
+## Install
+
+```bash
+npx banhaten add social-button
+```
+
+## Examples
+
+Primary registry example: `examples/social-button-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs social-button` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `messages`: Direction controls layout only. Pass label, children, aria-label, or messages to localize provider names.
+- `spacing`: Uses logical label padding and flex gap so the icon/label order follows inherited direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -60,6 +60,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `platforms` | `apple`, `facebook`, `google`, `linkedin`, `twitter`, `whatsapp` |
 | `sizes` | `default`, `icon` |
-| `tokens` | `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-content-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-opacity-50`, `--bh-social-apple-bg`, `--bh-social-apple-border`, `--bh-social-apple-fg`, `--bh-social-apple-hover`, `--bh-social-apple-icon`, `--bh-social-apple-icon-border`, `--bh-social-apple-outline-icon`, `--bh-social-apple-width`, `--bh-social-apple-width-rtl`, `--bh-social-button-bg`, `--bh-social-button-bg-hover`, `--bh-social-button-border`, `--bh-social-button-current-border`, `--bh-social-button-fg`, `--bh-social-button-focus-border`, `--bh-social-button-gap`, `--bh-social-button-height`, `--bh-social-button-icon`, `--bh-social-button-icon-size`, `--bh-social-button-label-padding-inline-end`, `--bh-social-button-padding-x`, `--bh-social-button-padding-y`, `--bh-social-button-radius`, `--bh-social-button-width`, `--bh-social-button-width-rtl`, `--bh-social-facebook-bg`, `--bh-social-facebook-fg`, `--bh-social-facebook-hover`, `--bh-social-facebook-icon`, `--bh-social-facebook-outline-icon`, `--bh-social-facebook-width`, `--bh-social-facebook-width-rtl`, `--bh-social-google-bg`, `--bh-social-google-border`, `--bh-social-google-fg`, `--bh-social-google-hover`, `--bh-social-google-width`, `--bh-social-google-width-rtl`, `--bh-social-linkedin-bg`, `--bh-social-linkedin-fg`, `--bh-social-linkedin-hover`, `--bh-social-linkedin-icon`, `--bh-social-linkedin-outline-icon`, `--bh-social-linkedin-width`, `--bh-social-linkedin-width-rtl`, `--bh-social-twitter-bg`, `--bh-social-twitter-border`, `--bh-social-twitter-fg`, `--bh-social-twitter-hover`, `--bh-social-twitter-icon`, `--bh-social-twitter-icon-border`, `--bh-social-twitter-outline-icon`, `--bh-social-twitter-width`, `--bh-social-twitter-width-rtl`, `--bh-social-whatsapp-bg`, `--bh-social-whatsapp-fg`, `--bh-social-whatsapp-hover`, `--bh-social-whatsapp-icon`, `--bh-social-whatsapp-outline-icon`, `--bh-social-whatsapp-width`, `--bh-social-whatsapp-width-rtl`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--shadow-component-default`, `--shadow-social-button`, `--shadow-social-button-focus` |
+| `tokens` | `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-default`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-content-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-opacity-50`, `--bh-social-apple-bg`, `--bh-social-apple-border`, `--bh-social-apple-fg`, `--bh-social-apple-hover`, `--bh-social-apple-icon`, `--bh-social-apple-icon-border`, `--bh-social-apple-outline-icon`, `--bh-social-apple-width`, `--bh-social-apple-width-rtl`, `--bh-social-button-bg`, `--bh-social-button-bg-hover`, `--bh-social-button-border`, `--bh-social-button-current-border`, `--bh-social-button-fg`, `--bh-social-button-focus-border`, `--bh-social-button-gap`, `--bh-social-button-height`, `--bh-social-button-icon`, `--bh-social-button-icon-size`, `--bh-social-button-label-padding-inline-end`, `--bh-social-button-padding-x`, `--bh-social-button-padding-y`, `--bh-social-button-radius`, `--bh-social-button-width`, `--bh-social-button-width-rtl`, `--bh-social-facebook-bg`, `--bh-social-facebook-fg`, `--bh-social-facebook-hover`, `--bh-social-facebook-icon`, `--bh-social-facebook-outline-icon`, `--bh-social-facebook-width`, `--bh-social-facebook-width-rtl`, `--bh-social-google-bg`, `--bh-social-google-border`, `--bh-social-google-fg`, `--bh-social-google-hover`, `--bh-social-google-width`, `--bh-social-google-width-rtl`, `--bh-social-linkedin-bg`, `--bh-social-linkedin-fg`, `--bh-social-linkedin-hover`, `--bh-social-linkedin-icon`, `--bh-social-linkedin-outline-icon`, `--bh-social-linkedin-width`, `--bh-social-linkedin-width-rtl`, `--bh-social-twitter-bg`, `--bh-social-twitter-border`, `--bh-social-twitter-fg`, `--bh-social-twitter-hover`, `--bh-social-twitter-icon`, `--bh-social-twitter-icon-border`, `--bh-social-twitter-outline-icon`, `--bh-social-twitter-width`, `--bh-social-twitter-width-rtl`, `--bh-social-whatsapp-bg`, `--bh-social-whatsapp-fg`, `--bh-social-whatsapp-hover`, `--bh-social-whatsapp-icon`, `--bh-social-whatsapp-outline-icon`, `--bh-social-whatsapp-width`, `--bh-social-whatsapp-width-rtl`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--elevation-component-default`, `--elevation-social-button`, `--elevation-social-button-focus` |
 | `variants` | `solid`, `outline` |
 <!-- registry-contract:end -->

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

@@ -1,65 +1,65 @@
-# Spinner
-
-Spinner is a compact loading indicator for buttons, inline feedback, status rows, and pending regions. `Spinner` is the simple steady loader, while `DynamicSpinner` uses the smoother variable-arc motion for moments that benefit from a more organic loading state.
-
-## Usage
-
-```tsx
-import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
-
-export function LoadingLabel() {
-  return (
-    <span className="inline-flex items-center gap-2" role="status">
-      <Spinner />
-      Loading
-
-      <DynamicSpinner />
-      Syncing
-    </span>
-  )
-}
-```
-
-## API
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `className` | `string` | - | Sets color, layout, or other SVG classes. |
-| `style` | `React.CSSProperties` | - | Override `--bh-spinner-size` when a local size is needed. |
-
-## Guidance
-
-- Pair the decorative spinner with visible status text or a loading button label.
-- Use `Spinner` for ordinary button and inline loading.
-- Use `DynamicSpinner` when the loading state is prominent enough to benefit from variable arc motion.
-- Keep sizing token-based by setting `--bh-spinner-size` rather than hardcoding SVG geometry.
-
-## Install
-
-```bash
-npx banhaten add spinner
-```
-
-## Examples
-
-Primary registry example: `examples/spinner-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs spinner` to inspect source files, install command, and examples.
-
-## Token Contract
-
-Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
-Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
-Covered source files: `components/spinner.tsx`.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Spinner
+
+Spinner is a compact loading indicator for buttons, inline feedback, status rows, and pending regions. `Spinner` is the simple steady loader, while `DynamicSpinner` uses the smoother variable-arc motion for moments that benefit from a more organic loading state.
+
+## Usage
+
+```tsx
+import { DynamicSpinner, Spinner } from "@/components/ui/spinner"
+
+export function LoadingLabel() {
+  return (
+    <span className="inline-flex items-center gap-2" role="status">
+      <Spinner />
+      Loading
+
+      <DynamicSpinner />
+      Syncing
+    </span>
+  )
+}
+```
+
+## API
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | - | Sets color, layout, or other SVG classes. |
+| `style` | `React.CSSProperties` | - | Override `--bh-spinner-size` when a local size is needed. |
+
+## Guidance
+
+- Pair the decorative spinner with visible status text or a loading button label.
+- Use `Spinner` for ordinary button and inline loading.
+- Use `DynamicSpinner` when the loading state is prominent enough to benefit from variable arc motion.
+- Keep sizing token-based by setting `--bh-spinner-size` rather than hardcoding SVG geometry.
+
+## Install
+
+```bash
+npx banhaten add spinner
+```
+
+## Examples
+
+Primary registry example: `examples/spinner-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs spinner` to inspect source files, install command, and examples.
+
+## Token Contract
+
+Component styles must resolve through Banhaten semantic tokens, component aliases, or documented exception-ledger values.
+Do not add raw colors, pixel values, opacity utilities, z-index values, durations, or shadow literals directly to component source.
+Covered source files: `components/spinner.tsx`.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
+## Accessibility
+
+Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
+
 <!-- registry-contract:start -->
 ## Registry Contract