banhaten 0.3.0 → 0.5.0

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

@@ -1,62 +1,62 @@
-# Popover
-
-Popover presents contextual controls, filters, actions, settings, and short help content near a trigger. It supports controlled and uncontrolled state, click, focus, and hover-capable triggers, positioned content, optional arrow, alignment, offsets, sizes, close affordance, and RTL-safe composition.
-
-## API
-
-```tsx
-<Popover>
-  <PopoverTrigger>Filters</PopoverTrigger>
-  <PopoverContent side="bottom" align="start">
-    <PopoverHeader>
-      <PopoverTitle>Filters</PopoverTitle>
-      <PopoverClose />
-    </PopoverHeader>
-    <PopoverBody>Filter controls go here.</PopoverBody>
-  </PopoverContent>
-</Popover>
-```
-
-| Prop | Values |
-| --- | --- |
-| `open`, `defaultOpen`, `onOpenChange` | controlled or uncontrolled state |
-| `side` | `top`, `right`, `bottom`, `left` |
-| `align` | `start`, `center`, `end` |
-| `size` | `sm`, `md`, `lg`, `auto` |
-| `offset` | `tight`, `default`, `loose` |
-| `showArrow` | `boolean` |
-
-## Token Contract
-
-Popover uses Banhaten popover width, padding, arrow, offset, surface, border, radius, shadow, trigger, typography, and z-index tokens.
-
-## RTL
-
-Top and bottom alignment use logical start/end behavior. Title and description slots use `dir="auto"` and product content can inherit the nearest direction.
-
-## Accessibility
-
-Use popovers for non-modal contextual content. Use Dialog or Sheet for workflows that require focus trapping or stronger dismissal semantics.
-
-## Install
-
-```bash
-npx banhaten add popover
-```
-
-## Examples
-
-Primary registry example: `examples/popover-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs popover` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `alignment`: Top and bottom alignments use logical start/end so the panel edge and arrow align correctly in LTR and RTL.
-- `spacing`: Uses logical layout and Banhaten spacing tokens for headers, bodies, footers, arrows, and trigger gaps.
-- `textDirection`: Title and description slots use dir="auto" while product content can inherit the nearest direction.
-
+# Popover
+
+Popover presents contextual controls, filters, actions, settings, and short help content near a trigger. It supports controlled and uncontrolled state, click, focus, and hover-capable triggers, positioned content, optional arrow, alignment, offsets, sizes, close affordance, and RTL-safe composition.
+
+## API
+
+```tsx
+<Popover>
+  <PopoverTrigger>Filters</PopoverTrigger>
+  <PopoverContent side="bottom" align="start">
+    <PopoverHeader>
+      <PopoverTitle>Filters</PopoverTitle>
+      <PopoverClose />
+    </PopoverHeader>
+    <PopoverBody>Filter controls go here.</PopoverBody>
+  </PopoverContent>
+</Popover>
+```
+
+| Prop | Values |
+| --- | --- |
+| `open`, `defaultOpen`, `onOpenChange` | controlled or uncontrolled state |
+| `side` | `top`, `right`, `bottom`, `left` |
+| `align` | `start`, `center`, `end` |
+| `size` | `sm`, `md`, `lg`, `auto` |
+| `offset` | `tight`, `default`, `loose` |
+| `showArrow` | `boolean` |
+
+## Token Contract
+
+Popover uses Banhaten popover width, padding, arrow, offset, surface, border, radius, shadow, trigger, typography, and z-index tokens.
+
+## RTL
+
+Top and bottom alignment use logical start/end behavior. Title and description slots use `dir="auto"` and product content can inherit the nearest direction.
+
+## Accessibility
+
+Use popovers for non-modal contextual content. Use Dialog or Sheet for workflows that require focus trapping or stronger dismissal semantics.
+
+## Install
+
+```bash
+npx banhaten add popover
+```
+
+## Examples
+
+Primary registry example: `examples/popover-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs popover` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `alignment`: Top and bottom alignments use logical start/end so the panel edge and arrow align correctly in LTR and RTL.
+- `spacing`: Uses logical layout and Banhaten spacing tokens for headers, bodies, footers, arrows, and trigger gaps.
+- `textDirection`: Title and description slots use dir="auto" while product content can inherit the nearest direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -73,5 +73,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `offsets` | `tight`, `default`, `loose` |
 | `sides` | `top`, `right`, `bottom`, `left` |
 | `sizes` | `sm`, `md`, `lg`, `auto` |
-| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-popover-arrow-depth`, `--bh-popover-arrow-width`, `--bh-popover-bg`, `--bh-popover-body-gap`, `--bh-popover-border`, `--bh-popover-close-icon-size`, `--bh-popover-close-size`, `--bh-popover-content-gap`, `--bh-popover-footer-gap`, `--bh-popover-header-gap`, `--bh-popover-lg-width`, `--bh-popover-max-width`, `--bh-popover-md-width`, `--bh-popover-offset`, `--bh-popover-offset-default`, `--bh-popover-offset-loose`, `--bh-popover-offset-tight`, `--bh-popover-padding`, `--bh-popover-radius`, `--bh-popover-sm-width`, `--bh-popover-trigger-gap`, `--bh-radius-full`, `--bh-text-base-letter-spacing`, `--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-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-popover`, `--shadow-button-focus`, `--shadow-popover` |
+| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-control-default`, `--bh-font-family`, `--bh-icon-stroke-200`, `--bh-interactive-ghost-hover`, `--bh-popover-arrow-depth`, `--bh-popover-arrow-width`, `--bh-popover-bg`, `--bh-popover-body-gap`, `--bh-popover-border`, `--bh-popover-close-icon-size`, `--bh-popover-close-size`, `--bh-popover-content-gap`, `--bh-popover-footer-gap`, `--bh-popover-header-gap`, `--bh-popover-lg-width`, `--bh-popover-max-width`, `--bh-popover-md-width`, `--bh-popover-offset`, `--bh-popover-offset-default`, `--bh-popover-offset-loose`, `--bh-popover-offset-tight`, `--bh-popover-padding`, `--bh-popover-radius`, `--bh-popover-sm-width`, `--bh-popover-trigger-gap`, `--bh-radius-full`, `--bh-text-base-letter-spacing`, `--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-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-popover`, `--elevation-button-focus`, `--elevation-popover` |
 <!-- registry-contract:end -->

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

@@ -1,52 +1,52 @@
-# Progress Slider
-
-Progress Slider is an adjustable, start-anchored progress control. It is built on Radix Slider and keeps the filled surface growing from the logical start edge while the grip handle remains at the active value edge.
-
-## API
-
-```tsx
-<ProgressSlider value={[45]} aria-label="Upload progress" />
-<ProgressSlider defaultValue={[70]} tone="success" showTicks />
-```
-
-| Prop | Values |
-| --- | --- |
-| `value`, `defaultValue` | Radix slider value array |
-| `size` | `default`, `lg` |
-| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
-| `disabled` | `boolean` |
-| `showTicks` | `boolean` |
-
-## Token Contract
-
-Progress Slider uses Banhaten slider, progress, semantic tone, track, handle, pill radius, focus, and disabled tokens. Keep tone styling semantic so alert and status palettes can theme consistently.
-
-## RTL
-
-Radix receives the inherited `dir` attribute for keyboard and value direction. The fill stays anchored to the logical start edge in both LTR and RTL.
-
-## Accessibility
-
-Provide an accessible name through `aria-label` or `aria-labelledby`. Use `aria-valuetext` when the numeric value needs domain-specific phrasing.
-
-## Install
-
-```bash
-npx banhaten add progress-slider
-```
-
-## Examples
-
-Primary registry example: `examples/progress-slider-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs progress-slider` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute; the fill stays anchored to the logical start edge.
-- `spacing`: Uses tokenized pill geometry and logical direction through Radix.
-
+# Progress Slider
+
+Progress Slider is an adjustable, start-anchored progress control. It is built on Radix Slider and keeps the filled surface growing from the logical start edge while the grip handle remains at the active value edge.
+
+## API
+
+```tsx
+<ProgressSlider value={[45]} aria-label="Upload progress" />
+<ProgressSlider defaultValue={[70]} tone="success" showTicks />
+```
+
+| Prop | Values |
+| --- | --- |
+| `value`, `defaultValue` | Radix slider value array |
+| `size` | `default`, `lg` |
+| `tone` | `brand`, `neutral`, `success`, `warning`, `danger` |
+| `disabled` | `boolean` |
+| `showTicks` | `boolean` |
+
+## Token Contract
+
+Progress Slider uses Banhaten slider, progress, semantic tone, track, handle, pill radius, focus, and disabled tokens. Keep tone styling semantic so alert and status palettes can theme consistently.
+
+## RTL
+
+Radix receives the inherited `dir` attribute for keyboard and value direction. The fill stays anchored to the logical start edge in both LTR and RTL.
+
+## Accessibility
+
+Provide an accessible name through `aria-label` or `aria-labelledby`. Use `aria-valuetext` when the numeric value needs domain-specific phrasing.
+
+## Install
+
+```bash
+npx banhaten add progress-slider
+```
+
+## Examples
+
+Primary registry example: `examples/progress-slider-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs progress-slider` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: Radix Slider handles direction and keyboard behavior through the inherited dir attribute; the fill stays anchored to the logical start edge.
+- `spacing`: Uses tokenized pill geometry and logical direction through Radix.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -61,6 +61,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `start-anchored fill`, `grip handle`, `ticks` |
 | `sizes` | `default`, `lg` |
 | `states` | `default`, `disabled` |
-| `tokens` | `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--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-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-disabled`, `--bh-opacity-60`, `--bh-progress-slider-border-width-current`, `--bh-progress-slider-border-width-lg`, `--bh-progress-slider-border-width-md`, `--bh-progress-slider-fill-bg`, `--bh-progress-slider-fill-border`, `--bh-progress-slider-grip-bg`, `--bh-progress-slider-grip-height-current`, `--bh-progress-slider-grip-height-lg`, `--bh-progress-slider-grip-height-md`, `--bh-progress-slider-grip-width`, `--bh-progress-slider-handle-width-current`, `--bh-progress-slider-handle-width-lg`, `--bh-progress-slider-handle-width-md`, `--bh-progress-slider-height-current`, `--bh-progress-slider-height-lg`, `--bh-progress-slider-height-md`, `--bh-progress-slider-radius`, `--bh-progress-slider-tick-bg`, `--bh-progress-slider-tick-gap`, `--bh-progress-slider-tick-padding`, `--bh-progress-slider-tick-size`, `--bh-progress-slider-track-bg`, `--bh-progress-slider-width-current`, `--bh-progress-slider-width-lg`, `--bh-progress-slider-width-md`, `--bh-radius-full`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--shadow-progress-slider-thumb-focus` |
+| `tokens` | `--bh-bg-brand-soft`, `--bh-bg-brand-subtle`, `--bh-bg-danger-soft`, `--bh-bg-danger-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-neutral-subtle`, `--bh-bg-success-soft`, `--bh-bg-success-subtle`, `--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-strong`, `--bh-border-subtle`, `--bh-border-success-strong`, `--bh-border-success-subtle`, `--bh-border-warning-strong`, `--bh-border-warning-subtle`, `--bh-content-disabled`, `--bh-opacity-60`, `--bh-progress-slider-border-width-current`, `--bh-progress-slider-border-width-lg`, `--bh-progress-slider-border-width-md`, `--bh-progress-slider-fill-bg`, `--bh-progress-slider-fill-border`, `--bh-progress-slider-grip-bg`, `--bh-progress-slider-grip-height-current`, `--bh-progress-slider-grip-height-lg`, `--bh-progress-slider-grip-height-md`, `--bh-progress-slider-grip-width`, `--bh-progress-slider-handle-width-current`, `--bh-progress-slider-handle-width-lg`, `--bh-progress-slider-handle-width-md`, `--bh-progress-slider-height-current`, `--bh-progress-slider-height-lg`, `--bh-progress-slider-height-md`, `--bh-progress-slider-radius`, `--bh-progress-slider-tick-bg`, `--bh-progress-slider-tick-gap`, `--bh-progress-slider-tick-padding`, `--bh-progress-slider-tick-size`, `--bh-progress-slider-track-bg`, `--bh-progress-slider-width-current`, `--bh-progress-slider-width-lg`, `--bh-progress-slider-width-md`, `--bh-radius-full`, `--bh-z-overlay`, `--bh-z-popover`, `--bh-z-raised`, `--elevation-progress-slider-thumb-focus` |
 | `tones` | `brand`, `neutral`, `success`, `warning`, `danger` |
 <!-- registry-contract:end -->

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

@@ -1,79 +1,79 @@
-# Progress
-
-Progress is a read-only progress meter for upload, setup, usage, and completion states. It supports top label, bottom label, helper-only, and inline indicator layouts, two track sizes, helper text, optional label text, an information icon, a spinner indicator, and inherited LTR/RTL direction.
-
-The implementation follows the Figma progress components at `Design system 3.0 Copy / Progress` (`177:7992`) and `Progress Label` (`177:8141`).
-
-## API
-
-```tsx
-<Progress
-  aria-label="Upload progress"
-  helperText="Preparing the final file"
-  label="Upload"
-  optional="(Optional)"
-  showInfo
-  showSpinner
-  value={40}
-/>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `size` | `lg`, `sm` |
-| `labelPosition` | `top`, `bottom`, `none`, `inline` |
-| `value` | number clamped between `min` and `max` |
-| `showIndicator` | `boolean` |
-| `showInfo` | `boolean` |
-| `showSpinner` | `boolean` |
-
-## Tokens
-
-Progress uses existing Banhaten tokens only:
-
-| Part | Token |
-| --- | --- |
-| Fill | `--bh-interactive-indicator-default` |
-| Track | `--bh-bg-neutral-soft` |
-| Radius | `--bh-radius-full` |
-| Label | `--bh-text-body-xs-medium-*`, `--bh-content-default` |
-| Optional and indicator | `--bh-text-body-xs-regular-*`, `--bh-text-body-2xs-regular-*`, `--bh-content-subtle` |
-| Track height | `--bh-space-md-8`, `--bh-space-xs-4` |
-
-## RTL
-
-Progress inherits `dir` from its parent. The fill is anchored to the logical start edge, so LTR fills from the left and RTL fills from the right. Text nodes use `dir="auto"` and tokenized body styles.
-
-## Install
-
-```bash
-npx banhaten add progress
-```
-
-## Examples
-
-Primary registry example: `examples/progress-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs progress` 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/progress.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `valueDirection`: The fill is anchored with logical start positioning, so LTR fills from left and RTL fills from right.
-- `spacing`: Label, optional text, indicator, and helper copy use inherited direction, logical text alignment, and tokenized gaps.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Progress
+
+Progress is a read-only progress meter for upload, setup, usage, and completion states. It supports top label, bottom label, helper-only, and inline indicator layouts, two track sizes, helper text, optional label text, an information icon, a spinner indicator, and inherited LTR/RTL direction.
+
+The implementation follows the Figma progress components at `Design system 3.0 Copy / Progress` (`177:7992`) and `Progress Label` (`177:8141`).
+
+## API
+
+```tsx
+<Progress
+  aria-label="Upload progress"
+  helperText="Preparing the final file"
+  label="Upload"
+  optional="(Optional)"
+  showInfo
+  showSpinner
+  value={40}
+/>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `size` | `lg`, `sm` |
+| `labelPosition` | `top`, `bottom`, `none`, `inline` |
+| `value` | number clamped between `min` and `max` |
+| `showIndicator` | `boolean` |
+| `showInfo` | `boolean` |
+| `showSpinner` | `boolean` |
+
+## Tokens
+
+Progress uses existing Banhaten tokens only:
+
+| Part | Token |
+| --- | --- |
+| Fill | `--bh-interactive-indicator-default` |
+| Track | `--bh-bg-neutral-soft` |
+| Radius | `--bh-radius-full` |
+| Label | `--bh-text-body-xs-medium-*`, `--bh-content-default` |
+| Optional and indicator | `--bh-text-body-xs-regular-*`, `--bh-text-body-2xs-regular-*`, `--bh-content-subtle` |
+| Track height | `--bh-space-md-8`, `--bh-space-xs-4` |
+
+## RTL
+
+Progress inherits `dir` from its parent. The fill is anchored to the logical start edge, so LTR fills from the left and RTL fills from the right. Text nodes use `dir="auto"` and tokenized body styles.
+
+## Install
+
+```bash
+npx banhaten add progress
+```
+
+## Examples
+
+Primary registry example: `examples/progress-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs progress` 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/progress.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `valueDirection`: The fill is anchored with logical start positioning, so LTR fills from left and RTL fills from right.
+- `spacing`: Label, optional text, indicator, and helper copy use inherited direction, logical text alignment, and tokenized gaps.
+
+## 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
 

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

@@ -1,53 +1,53 @@
-# Radio Card
-
-Radio Card is a Figma-matched option card for richer single-choice selections. It supports icon, payment, avatar, company, support-label, icon-radio-left, icon-radio-right, and label-only layouts across default, active, disabled, LTR, and RTL states.
-
-## API
-
-```tsx
-<RadioCard
-  title="Business"
-  description="For teams and advanced permissions."
-  type="with-icon"
-/>
-```
-
-| Prop | Values |
-| --- | --- |
-| `type` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
-| `state` | `default`, `active`, `disabled` |
-| `dir` | `ltr`, `rtl` |
-
-## Token Contract
-
-Radio Card consumes Banhaten card spacing, border, radius, shadow, typography, radio-control, hover, active, disabled, and semantic content tokens.
-
-## RTL
-
-Radio Card follows the explicit Figma RTL ordering for each card type. Text nodes render in RTL and right alignment where the variant requires physical RTL composition.
-
-## Accessibility
-
-Use Radio Card inside a semantic radio group or connect it to a native radio input in product code. Do not rely on the visual active state alone for form submission.
-
-## Install
-
-```bash
-npx banhaten add radio-card
-```
-
-## Examples
-
-Primary registry example: `examples/radio-card-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs radio-card` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: false
-- `layout`: Uses the explicit Figma RTL physical order while text nodes use RTL direction and right alignment.
-- `spacing`: Company icon and icon-radio-left RTL variants use the Figma 12px card gap; other variants use the 10px card gap.
-
+# Radio Card
+
+Radio Card is a Figma-matched option card for richer single-choice selections. It supports icon, payment, avatar, company, support-label, icon-radio-left, icon-radio-right, and label-only layouts across default, active, disabled, LTR, and RTL states.
+
+## API
+
+```tsx
+<RadioCard
+  title="Business"
+  description="For teams and advanced permissions."
+  type="with-icon"
+/>
+```
+
+| Prop | Values |
+| --- | --- |
+| `type` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
+| `state` | `default`, `active`, `disabled` |
+| `dir` | `ltr`, `rtl` |
+
+## Token Contract
+
+Radio Card consumes Banhaten card spacing, border, radius, shadow, typography, radio-control, hover, active, disabled, and semantic content tokens.
+
+## RTL
+
+Radio Card follows the explicit Figma RTL ordering for each card type. Text nodes render in RTL and right alignment where the variant requires physical RTL composition.
+
+## Accessibility
+
+Use Radio Card inside a semantic radio group or connect it to a native radio input in product code. Do not rely on the visual active state alone for form submission.
+
+## Install
+
+```bash
+npx banhaten add radio-card
+```
+
+## Examples
+
+Primary registry example: `examples/radio-card-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs radio-card` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: false
+- `layout`: Uses the explicit Figma RTL physical order while text nodes use RTL direction and right alignment.
+- `spacing`: Company icon and icon-radio-left RTL variants use the Figma 12px card gap; other variants use the 10px card gap.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -60,6 +60,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `RadioCard` |
 | `registryDependencies` | None |
 | `states` | `default`, `active`, `disabled` |
-| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-always-white`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-interactive-radiobutton-default`, `--bh-opacity-disabled-media`, `--bh-radio-card-bg`, `--bh-radio-card-border`, `--bh-radio-card-border-width`, `--bh-radio-card-border-width-active`, `--bh-radio-card-company-mark-color`, `--bh-radio-card-payment-height`, `--bh-radio-card-payment-logo-color`, `--bh-radio-card-payment-logo-height`, `--bh-radio-card-payment-logo-width`, `--bh-radio-card-payment-width`, `--bh-radio-card-width`, `--bh-radio-control-border`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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-component-default`, `--shadow-radio-card`, `--shadow-radio-card-current`, `--shadow-radio-card-disabled`, `--shadow-radio-control` |
+| `tokens` | `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-always-white`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-bg-raised-hover`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-180`, `--bh-icon-stroke-200`, `--bh-interactive-radiobutton-default`, `--bh-opacity-disabled-media`, `--bh-radio-card-bg`, `--bh-radio-card-border`, `--bh-radio-card-border-width`, `--bh-radio-card-border-width-active`, `--bh-radio-card-company-mark-color`, `--bh-radio-card-payment-height`, `--bh-radio-card-payment-logo-color`, `--bh-radio-card-payment-logo-height`, `--bh-radio-card-payment-logo-width`, `--bh-radio-card-payment-width`, `--bh-radio-card-width`, `--bh-radio-control-border`, `--bh-radius-full`, `--bh-radius-md-6`, `--bh-radius-xl-10`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-7xl-40`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--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-component-default`, `--elevation-radio-card`, `--elevation-radio-card-current`, `--elevation-radio-card-disabled`, `--elevation-radio-control` |
 | `types` | `with-icon`, `icon-radio-right`, `payment`, `with-avatar`, `company-icon`, `icon-radio-left`, `radio-label` |
 <!-- registry-contract:end -->

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

@@ -1,59 +1,59 @@
-# Radio Group
-
-Radio Group is the native-input single-choice primitive. It includes `Radio`, `RadioField`, `RadioGroup`, and `RadioGroupItem` for grouped labels, descriptions, errors, disabled state, controlled or uncontrolled values, and horizontal or vertical layout.
-
-## API
-
-```tsx
-<RadioGroup
-  label="Billing interval"
-  defaultValue="monthly"
-  orientation="vertical"
->
-  <RadioGroupItem value="monthly" label="Monthly" />
-  <RadioGroupItem value="annual" label="Annual" />
-</RadioGroup>
-```
-
-| Prop | Values |
-| --- | --- |
-| `value`, `defaultValue` | controlled or uncontrolled value |
-| `orientation` | `vertical`, `horizontal` |
-| `state` | `default`, `error`, `disabled` |
-| `label`, `description`, `errorMessage` | `ReactNode` |
-| `controlPosition` | `start`, `end` on field/item rows |
-
-## Token Contract
-
-Radio Group uses Banhaten radio control, field gap, group spacing, text, helper, error, disabled, border, and focus tokens.
-
-## RTL
-
-`RadioField` and `RadioGroupItem` use logical start/end control placement. Labels, descriptions, and error text use `dir="auto"` and tokenized typography.
-
-## Accessibility
-
-The group uses `fieldset`, shared native radio names, label wrapping, and platform keyboard behavior. Provide visible error text when the group is invalid.
-
-## Install
-
-```bash
-npx banhaten add radio-group
-```
-
-## Examples
-
-Primary registry example: `examples/radio-group-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs radio-group` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `controlPlacement`: RadioField and RadioGroupItem use start/end control placement so the radio mirrors correctly in RTL.
-- `textDirection`: Group labels, item labels, descriptions, and error text use dir="auto" with tokenized body typography.
-- `semantics`: Uses native radio inputs with a shared group name, fieldset grouping, and label wrapping for platform keyboard and form behavior.
-
+# Radio Group
+
+Radio Group is the native-input single-choice primitive. It includes `Radio`, `RadioField`, `RadioGroup`, and `RadioGroupItem` for grouped labels, descriptions, errors, disabled state, controlled or uncontrolled values, and horizontal or vertical layout.
+
+## API
+
+```tsx
+<RadioGroup
+  label="Billing interval"
+  defaultValue="monthly"
+  orientation="vertical"
+>
+  <RadioGroupItem value="monthly" label="Monthly" />
+  <RadioGroupItem value="annual" label="Annual" />
+</RadioGroup>
+```
+
+| Prop | Values |
+| --- | --- |
+| `value`, `defaultValue` | controlled or uncontrolled value |
+| `orientation` | `vertical`, `horizontal` |
+| `state` | `default`, `error`, `disabled` |
+| `label`, `description`, `errorMessage` | `ReactNode` |
+| `controlPosition` | `start`, `end` on field/item rows |
+
+## Token Contract
+
+Radio Group uses Banhaten radio control, field gap, group spacing, text, helper, error, disabled, border, and focus tokens.
+
+## RTL
+
+`RadioField` and `RadioGroupItem` use logical start/end control placement. Labels, descriptions, and error text use `dir="auto"` and tokenized typography.
+
+## Accessibility
+
+The group uses `fieldset`, shared native radio names, label wrapping, and platform keyboard behavior. Provide visible error text when the group is invalid.
+
+## Install
+
+```bash
+npx banhaten add radio-group
+```
+
+## Examples
+
+Primary registry example: `examples/radio-group-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs radio-group` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `controlPlacement`: RadioField and RadioGroupItem use start/end control placement so the radio mirrors correctly in RTL.
+- `textDirection`: Group labels, item labels, descriptions, and error text use dir="auto" with tokenized body typography.
+- `semantics`: Uses native radio inputs with a shared group name, fieldset grouping, and label wrapping for platform keyboard and form behavior.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -68,5 +68,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `controlPositions` | `start`, `end` |
 | `orientations` | `vertical`, `horizontal` |
 | `states` | `default`, `error`, `disabled` |
-| `tokens` | `--bh-bg-always-white`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-radiobutton-default`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radio-control-border`, `--bh-radio-group-message-max-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--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-md-medium-font-weight`, `--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-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-button-focus`, `--shadow-radio-control` |
+| `tokens` | `--bh-bg-always-white`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-width-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-subtle`, `--bh-interactive-radiobutton-default`, `--bh-opacity-0`, `--bh-opacity-100`, `--bh-radio-control-border`, `--bh-radio-group-message-max-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--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-md-medium-font-weight`, `--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-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-button-focus`, `--elevation-radio-control` |
 <!-- registry-contract:end -->