banhaten 0.3.0 → 0.5.0

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

@@ -1,100 +1,100 @@
-# Button Group
-
-Button Group is a connected set of related button actions. It supports text buttons and icon-only buttons, three sizes, inherited LTR/RTL direction, logical dividers, and tokenized interaction states.
-
-The implementation follows the Figma component at `Design system 3.0 Copy / Button Group Item 1.2` (`390:12399`).
-
-## API
-
-Use `ButtonGroup` as the connected container and `ButtonGroupItem` for each action.
-
-```tsx
-<ButtonGroup aria-label="View options" size="md">
-  <ButtonGroupItem>
-    <PlusIcon data-icon="inline-start" />
-    Button
-    <PlusIcon data-icon="inline-end" />
-  </ButtonGroupItem>
-  <ButtonGroupItem aria-pressed>
-    <PlusIcon data-icon="inline-start" />
-    Active
-    <PlusIcon data-icon="inline-end" />
-  </ButtonGroupItem>
-</ButtonGroup>
-```
-
-Use `ToggleGroup` when the connected controls own a single or multiple pressed-value model. It includes controlled and uncontrolled state plus Home, End, and direction-aware arrow-key focus movement.
-
-```tsx
-<ToggleGroup aria-label="Text alignment" defaultValue="start">
-  <ToggleGroupItem value="start">Start</ToggleGroupItem>
-  <ToggleGroupItem value="center">Center</ToggleGroupItem>
-  <ToggleGroupItem value="end">End</ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `size` | `md`, `sm`, `xs` |
-| `mode` | `default`, `iconOnly` |
-| `ButtonGroupItem aria-pressed` | `true`, `false` |
-| `ButtonGroupItem disabled` | `boolean` |
-| `ToggleGroup type` | `single`, `multiple` |
-| `ToggleGroup value`, `defaultValue` | `string`, `string[]` |
-| `ToggleGroupItem value` | `string` |
-
-Interaction styling is applied through native CSS pseudo states: `:hover`, `:active`, `:focus-visible`, `:disabled`, and `aria-pressed="true"`.
-
-## States
-
-| State | Background | Content |
-| --- | --- | --- |
-| Default | `--bh-button-group-item-bg` | `--bh-button-group-content-default` |
-| Hover | `--bh-button-group-item-hover-bg` | `--bh-button-group-content-default` |
-| Pressed | `--bh-button-group-item-pressed-bg` | `--bh-button-group-content-default` |
-| Active | `--bh-button-group-item-active-bg` | `--bh-button-group-content-active` |
-| Disabled | `--bh-button-group-item-disabled-bg` | `--bh-button-group-content-disabled` |
-
-## Dimensions
-
-| Size | Height | LTR text item | RTL text item | Icon-only item |
-| --- | ---: | ---: | ---: | ---: |
-| `md` | 40px | 128px | 124px | 40px |
-| `sm` | 36px | 120px | 116px | 36px |
-| `xs` | 32px | 112px | 108px | 32px |
-
-Text buttons use the design-system button typography tokens. Icon-only buttons require an accessible label.
-
-## Install
-
-```bash
-npx banhaten add button-group
-```
-
-## Examples
-
-Primary registry example: `examples/button-group-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs button-group` 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/button-group.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `itemSizing`: LTR and RTL default items keep their fixed Figma matrix widths. Icon-only groups keep the same square dimensions.
-- `spacing`: Uses logical dividers and inherited flex direction so item order, icon order, padding, and separators follow LTR or RTL.
-
-## Accessibility
-
-This component relies on `@radix-ui/react-slot` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
-
+# Button Group
+
+Button Group is a connected set of related button actions. It supports text buttons and icon-only buttons, three sizes, inherited LTR/RTL direction, logical dividers, and tokenized interaction states.
+
+The implementation follows the Figma component at `Design system 3.0 Copy / Button Group Item 1.2` (`390:12399`).
+
+## API
+
+Use `ButtonGroup` as the connected container and `ButtonGroupItem` for each action.
+
+```tsx
+<ButtonGroup aria-label="View options" size="md">
+  <ButtonGroupItem>
+    <PlusIcon data-icon="inline-start" />
+    Button
+    <PlusIcon data-icon="inline-end" />
+  </ButtonGroupItem>
+  <ButtonGroupItem aria-pressed>
+    <PlusIcon data-icon="inline-start" />
+    Active
+    <PlusIcon data-icon="inline-end" />
+  </ButtonGroupItem>
+</ButtonGroup>
+```
+
+Use `ToggleGroup` when the connected controls own a single or multiple pressed-value model. It includes controlled and uncontrolled state plus Home, End, and direction-aware arrow-key focus movement.
+
+```tsx
+<ToggleGroup aria-label="Text alignment" defaultValue="start">
+  <ToggleGroupItem value="start">Start</ToggleGroupItem>
+  <ToggleGroupItem value="center">Center</ToggleGroupItem>
+  <ToggleGroupItem value="end">End</ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `size` | `md`, `sm`, `xs` |
+| `mode` | `default`, `iconOnly` |
+| `ButtonGroupItem aria-pressed` | `true`, `false` |
+| `ButtonGroupItem disabled` | `boolean` |
+| `ToggleGroup type` | `single`, `multiple` |
+| `ToggleGroup value`, `defaultValue` | `string`, `string[]` |
+| `ToggleGroupItem value` | `string` |
+
+Interaction styling is applied through native CSS pseudo states: `:hover`, `:active`, `:focus-visible`, `:disabled`, and `aria-pressed="true"`.
+
+## States
+
+| State | Background | Content |
+| --- | --- | --- |
+| Default | `--bh-button-group-item-bg` | `--bh-button-group-content-default` |
+| Hover | `--bh-button-group-item-hover-bg` | `--bh-button-group-content-default` |
+| Pressed | `--bh-button-group-item-pressed-bg` | `--bh-button-group-content-default` |
+| Active | `--bh-button-group-item-active-bg` | `--bh-button-group-content-active` |
+| Disabled | `--bh-button-group-item-disabled-bg` | `--bh-button-group-content-disabled` |
+
+## Dimensions
+
+| Size | Height | LTR text item | RTL text item | Icon-only item |
+| --- | ---: | ---: | ---: | ---: |
+| `md` | 40px | 128px | 124px | 40px |
+| `sm` | 36px | 120px | 116px | 36px |
+| `xs` | 32px | 112px | 108px | 32px |
+
+Text buttons use the design-system button typography tokens. Default glyphs are 18px inside preserved 20px slots. Icon-only buttons require an accessible label.
+
+## Install
+
+```bash
+npx banhaten add button-group
+```
+
+## Examples
+
+Primary registry example: `examples/button-group-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs button-group` 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/button-group.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `itemSizing`: LTR and RTL default items keep their fixed Figma matrix widths. Icon-only groups keep the same square dimensions.
+- `spacing`: Uses logical dividers and inherited flex direction so item order, icon order, padding, and separators follow LTR or RTL.
+
+## Accessibility
+
+This component relies on `@radix-ui/react-slot` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -113,6 +113,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `default`, `iconOnly` |
 | `selectionTypes` | `single`, `multiple` |
 | `sizes` | `md`, `sm`, `xs` |
-| `tokens` | `--bh-border-width-default`, `--bh-button-group-bg`, `--bh-button-group-border`, `--bh-button-group-content`, `--bh-button-group-content-active`, `--bh-button-group-content-disabled`, `--bh-button-group-divider`, `--bh-button-group-icon-size`, `--bh-button-group-item-active-bg`, `--bh-button-group-item-bg`, `--bh-button-group-item-disabled-bg`, `--bh-button-group-item-hover-bg`, `--bh-button-group-item-pressed-bg`, `--bh-button-group-label-padding-x`, `--bh-button-group-md-gap`, `--bh-button-group-md-height`, `--bh-button-group-md-icon-padding-x`, `--bh-button-group-md-item-rtl-width`, `--bh-button-group-md-item-width`, `--bh-button-group-md-padding-x`, `--bh-button-group-radius`, `--bh-button-group-sm-gap`, `--bh-button-group-sm-height`, `--bh-button-group-sm-icon-padding-x`, `--bh-button-group-sm-item-rtl-width`, `--bh-button-group-sm-item-width`, `--bh-button-group-sm-padding-x`, `--bh-button-group-xs-gap`, `--bh-button-group-xs-height`, `--bh-button-group-xs-icon-padding-x`, `--bh-button-group-xs-item-rtl-width`, `--bh-button-group-xs-item-width`, `--bh-button-group-xs-padding-x`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--bh-z-raised`, `--shadow-button-group`, `--shadow-button-group-focus`, `--shadow-component-default` |
+| `tokens` | `--bh-border-width-default`, `--bh-button-group-bg`, `--bh-button-group-border`, `--bh-button-group-content`, `--bh-button-group-content-active`, `--bh-button-group-content-disabled`, `--bh-button-group-divider`, `--bh-button-group-icon-size`, `--bh-button-group-icon-slot-size`, `--bh-button-group-item-active-bg`, `--bh-button-group-item-bg`, `--bh-button-group-item-disabled-bg`, `--bh-button-group-item-hover-bg`, `--bh-button-group-item-pressed-bg`, `--bh-button-group-label-padding-x`, `--bh-button-group-md-gap`, `--bh-button-group-md-height`, `--bh-button-group-md-icon-padding-x`, `--bh-button-group-md-item-rtl-width`, `--bh-button-group-md-item-width`, `--bh-button-group-md-padding-x`, `--bh-button-group-radius`, `--bh-button-group-sm-gap`, `--bh-button-group-sm-height`, `--bh-button-group-sm-icon-padding-x`, `--bh-button-group-sm-item-rtl-width`, `--bh-button-group-sm-item-width`, `--bh-button-group-sm-padding-x`, `--bh-button-group-xs-gap`, `--bh-button-group-xs-height`, `--bh-button-group-xs-icon-padding-x`, `--bh-button-group-xs-item-rtl-width`, `--bh-button-group-xs-item-width`, `--bh-button-group-xs-padding-x`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--bh-z-raised`, `--elevation-button-group`, `--elevation-button-group-focus`, `--elevation-component-default` |
 | `widths` | `fixed`, `content` |
 <!-- registry-contract:end -->

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

@@ -1,81 +1,83 @@
-# Button
-
-Button is the primary action primitive for forms, workflows, navigation actions, and destructive confirmations. It supports semantic variants, text and icon sizes, loading composition, link composition through `asChild`, and RTL-safe icon behavior.
-
-## API
-
-```tsx
-<Button variant="default" size="default">
-  Save changes
-</Button>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `variant` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white` | `default` |
-| `size` | `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-xl` | `default` |
-| `asChild` | `boolean` | `false` |
-| `disabled` | `boolean` | `false` |
-| `aria-busy` | `boolean` | none |
-
-## Examples
-
-```tsx
-<Button>
-  <PlusIcon data-icon="inline-start" />
-  New item
-</Button>
-
-<Button variant="outline">
-  Continue
-  <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
-</Button>
-
-<Button disabled aria-busy="true">
-  <Spinner data-icon="inline-start" />
-  Loading
-</Button>
-```
-
-```tsx
-<div dir="rtl">
-  <Button>إرسال</Button>
-  <Button variant="outline">
-    متابعة
-    <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
-  </Button>
-</div>
-```
-
-## Token Contract
-
-Button consumes semantic interaction, content, border, radius, typography, spacing, opacity, and shadow tokens. Component source should not hard-code Figma color, spacing, radius, or shadow literals.
-
-- Typography: `--bh-text-button-font-size`, `--bh-text-button-line-height`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`
-- Shape: `--bh-control-default`
-- Heights and padding: `--bh-button-*-height`, `--bh-button-*-padding-x`, `--bh-button-*-padding-y`
-- Icon rhythm: `--bh-button-icon-size`, `--bh-button-icon-offset`, `--bh-button-label-padding-x`
-- Effects: `--shadow-button-raised`, `--shadow-button-secondary`, `--shadow-button-soft`, `--shadow-button-focus`, `--shadow-button-danger-focus`
-
-## RTL Rules
-
-- Button inherits `dir` from the nearest parent.
-- Text labels render with `dir="auto"` so Arabic and English labels resolve naturally.
-- Use `data-icon="inline-start"` and `data-icon="inline-end"` for optical icon offsets.
-- Use `data-rtl-flip="true"` only for directional icons that should mirror, such as arrows and chevrons.
-
-## Accessibility
-
-- Use native `type`, `disabled`, and `aria-busy` attributes for behavior.
-- Icon-only buttons must have an accessible name through `aria-label`.
-- Use `asChild` for anchors or router links instead of nesting interactive elements.
-
-## Install
-
-```bash
-npx banhaten add button
-```
-
+# Button
+
+Button is the primary action primitive for forms, workflows, navigation actions, and destructive confirmations. It supports semantic variants, text and icon sizes, loading composition, link composition through `asChild`, and RTL-safe icon behavior.
+
+## API
+
+```tsx
+<Button variant="default" size="default">
+  Save changes
+</Button>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `variant` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white`, `success`, `warning`, `link` | `default` |
+| `size` | `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-xl` | `default` |
+| `asChild` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `aria-busy` | `boolean` | none |
+
+`destructive` and `soft-destructive` remain accepted as deprecated compatibility aliases. Replace them with `danger` and `soft-danger`, respectively; the aliases are not separate visual treatments and will remain available for the repository's documented deprecation window.
+
+## Examples
+
+```tsx
+<Button>
+  <PlusIcon data-icon="inline-start" />
+  New item
+</Button>
+
+<Button variant="outline">
+  Continue
+  <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+</Button>
+
+<Button disabled aria-busy="true">
+  <Spinner data-icon="inline-start" />
+  Loading
+</Button>
+```
+
+```tsx
+<div dir="rtl">
+  <Button>إرسال</Button>
+  <Button variant="outline">
+    متابعة
+    <ArrowRightIcon data-icon="inline-end" data-rtl-flip="true" />
+  </Button>
+</div>
+```
+
+## Token Contract
+
+Button consumes semantic interaction, content, border, radius, typography, spacing, opacity, and elevation tokens. Component source should not hard-code Figma color, spacing, radius, or elevation recipes.
+
+- Typography: `--bh-text-button-font-size`, `--bh-text-button-line-height`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`
+- Shape: `--bh-control-default`
+- Heights and padding: `--bh-button-*-height`, `--bh-button-*-padding-x`, `--bh-button-*-padding-y`
+- Icon rhythm: `--bh-button-icon-size` is an 18px glyph inside `--bh-button-icon-slot-size` at 20px; `--bh-button-icon-offset` and `--bh-button-label-padding-x` preserve optical alignment.
+- Effects: `--elevation-button-raised`, `--elevation-button-secondary`, `--elevation-button-soft`, `--elevation-button-focus`, `--elevation-button-danger-focus`
+
+## RTL Rules
+
+- Button inherits `dir` from the nearest parent.
+- Text labels render with `dir="auto"` so Arabic and English labels resolve naturally.
+- Use `data-icon="inline-start"` and `data-icon="inline-end"` for optical icon offsets.
+- Use `data-rtl-flip="true"` only for directional icons that should mirror, such as arrows and chevrons.
+
+## Accessibility
+
+- Use native `type`, `disabled`, and `aria-busy` attributes for behavior.
+- Icon-only buttons must have an accessible name through `aria-label`.
+- Use `asChild` for anchors or router links instead of nesting interactive elements.
+
+## Install
+
+```bash
+npx banhaten add button
+```
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -87,9 +89,10 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/button.tsx: Button, buttonVariants` |
 | `parts` | `Button` |
 | `registryDependencies` | `spinner` |
+| `props.variant` | `"default" \| "secondary" \| "soft" \| "outline" \| "ghost" \| "ghost-primary" \| "danger" \| "soft-danger" \| "white" \| "success" \| "warning" \| "link" \| "destructive" \| "soft-destructive"; default "default"; Twelve canonical semantic treatments. The deprecated destructive and soft-destructive compatibility aliases remain accepted and map to danger and soft-danger, respectively.` |
 | `props.density` | `"compact" \| "default" \| "comfortable"; default "comfortable"; Preferred cross-component sizing contract. Maps to legacy xs, sm, or default sizes while preserving icon-only sizing.` |
 | `densities` | `compact`, `default`, `comfortable` |
 | `sizes` | `xs`, `sm`, `default`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`, `icon-xl` |
-| `tokens` | `--bh-bg-always-white`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-button-gap`, `--bh-button-gap-xs`, `--bh-button-icon-offset`, `--bh-button-icon-size`, `--bh-button-label-padding-x`, `--bh-button-lg-height`, `--bh-button-lg-padding-x`, `--bh-button-lg-padding-y`, `--bh-button-md-height`, `--bh-button-md-padding-x`, `--bh-button-secondary-border`, `--bh-button-secondary-focus-border`, `--bh-button-sm-height`, `--bh-button-sm-padding-x`, `--bh-button-sm-padding-y`, `--bh-button-xl-height`, `--bh-button-xl-padding-y`, `--bh-button-xs-height`, `--bh-button-xs-padding-x`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-success`, `--bh-content-on-warning`, `--bh-control-default`, `--bh-interactive-brand-default`, `--bh-interactive-brand-disabled`, `--bh-interactive-brand-hover`, `--bh-interactive-brand-pressed`, `--bh-interactive-danger-default`, `--bh-interactive-danger-disabled`, `--bh-interactive-danger-hover`, `--bh-interactive-danger-pressed`, `--bh-interactive-danger-soft-default`, `--bh-interactive-danger-soft-disabled`, `--bh-interactive-danger-soft-hover`, `--bh-interactive-danger-soft-pressed`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-ghost-pressed`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-disabled`, `--bh-interactive-outlined-hover`, `--bh-interactive-outlined-pressed`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-interactive-secondary-pressed`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-interactive-soft-hover`, `--bh-interactive-soft-pressed`, `--bh-interactive-success-default`, `--bh-interactive-success-hover`, `--bh-interactive-success-pressed`, `--bh-interactive-warning-default`, `--bh-interactive-warning-hover`, `--bh-interactive-warning-pressed`, `--bh-opacity-30`, `--bh-space-none`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--shadow-button-danger-focus`, `--shadow-button-focus`, `--shadow-button-raised`, `--shadow-button-secondary`, `--shadow-button-secondary-focus`, `--shadow-button-soft` |
-| `variants` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white` |
+| `tokens` | `--bh-bg-always-white`, `--bh-border-brand-strong`, `--bh-border-danger-strong`, `--bh-border-default`, `--bh-border-disabled`, `--bh-border-focus`, `--bh-border-width-default`, `--bh-button-gap`, `--bh-button-gap-xs`, `--bh-button-icon-offset`, `--bh-button-icon-size`, `--bh-button-icon-slot-size`, `--bh-button-label-padding-x`, `--bh-button-lg-height`, `--bh-button-lg-padding-x`, `--bh-button-lg-padding-y`, `--bh-button-md-height`, `--bh-button-md-padding-x`, `--bh-button-secondary-border`, `--bh-button-secondary-focus-border`, `--bh-button-sm-height`, `--bh-button-sm-padding-x`, `--bh-button-sm-padding-y`, `--bh-button-xl-height`, `--bh-button-xl-padding-y`, `--bh-button-xs-height`, `--bh-button-xs-padding-x`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-brand`, `--bh-content-on-color`, `--bh-content-on-light`, `--bh-content-on-success`, `--bh-content-on-warning`, `--bh-control-default`, `--bh-interactive-brand-default`, `--bh-interactive-brand-disabled`, `--bh-interactive-brand-hover`, `--bh-interactive-brand-pressed`, `--bh-interactive-danger-default`, `--bh-interactive-danger-disabled`, `--bh-interactive-danger-hover`, `--bh-interactive-danger-pressed`, `--bh-interactive-danger-soft-default`, `--bh-interactive-danger-soft-disabled`, `--bh-interactive-danger-soft-hover`, `--bh-interactive-danger-soft-pressed`, `--bh-interactive-ghost-default`, `--bh-interactive-ghost-disabled`, `--bh-interactive-ghost-hover`, `--bh-interactive-ghost-pressed`, `--bh-interactive-outlined-default`, `--bh-interactive-outlined-disabled`, `--bh-interactive-outlined-hover`, `--bh-interactive-outlined-pressed`, `--bh-interactive-secondary-default`, `--bh-interactive-secondary-disabled`, `--bh-interactive-secondary-hover`, `--bh-interactive-secondary-pressed`, `--bh-interactive-soft-default`, `--bh-interactive-soft-disabled`, `--bh-interactive-soft-hover`, `--bh-interactive-soft-pressed`, `--bh-interactive-success-default`, `--bh-interactive-success-hover`, `--bh-interactive-success-pressed`, `--bh-interactive-warning-default`, `--bh-interactive-warning-hover`, `--bh-interactive-warning-pressed`, `--bh-opacity-30`, `--bh-space-none`, `--bh-text-button-font-size`, `--bh-text-button-font-weight`, `--bh-text-button-letter-spacing`, `--bh-text-button-line-height`, `--elevation-button-danger-focus`, `--elevation-button-focus`, `--elevation-button-raised`, `--elevation-button-secondary`, `--elevation-button-secondary-focus`, `--elevation-button-soft` |
+| `variants` | `default`, `secondary`, `soft`, `outline`, `ghost`, `ghost-primary`, `danger`, `soft-danger`, `white`, `success`, `warning`, `link` |
 <!-- registry-contract:end -->

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

@@ -1,90 +1,90 @@
-# Card
-
-Card is a token-built surface primitive for product summaries, media tiles, and action panels. It supports vertical and horizontal layouts, leading and trailing image treatments, full-image cards, desktop/mobile spacing, footer actions, and RTL-safe text.
-
-Use `CardSurface` when a product-specific composition needs the owned Banhaten card surface while supplying its own internal layout.
-
-```tsx
-<CardSurface>
-  <h3>Custom metric content</h3>
-</CardSurface>
-```
-
-## Install
-
-```bash
-npx banhaten add card
-```
-
-## Anatomy
-
-- `Card`: root surface with title, subtitle, description, media, and optional footer composition.
-- `CardMedia`: image/media slot with leading, trailing, or full-image treatment.
-- `CardFooter`: supporting metadata or action area.
-- `CardActions`: Button-composed primary and secondary actions.
-
-## Example
-
-```tsx
-import { Card } from "@/components/ui/card"
-
-export function Example() {
-  return (
-    <Card
-      title="Project activity"
-      subtitle="Updated 2 minutes ago"
-      description="A compact summary of the latest workspace changes."
-      orientation="horizontal"
-      type="leading-image"
-    />
-  )
-}
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `orientation` | `vertical`, `horizontal` |
-| `type` | `leading-image`, `trailing-image`, `full-image` |
-| `breakpoint` | `desktop`, `mobile` |
-| `dir` | inherited, `ltr`, `rtl` |
-
-## RTL
-
-Card uses logical spacing, inherited direction, and `dir="auto"` copy wrappers so title, subtitle, description, footer actions, and menu affordances mirror naturally.
-
-## API
-
-Supported runtime exports: `Card`, `CardActions`, `CardFooter`, `CardMedia`, `CardSurface`, `cardVariants`.
-
-| Contract | Values |
-| --- | --- |
-| `types` | `leading-image`, `trailing-image`, `full-image` |
-| `orientations` | `vertical`, `horizontal` |
-
-## Examples
-
-Primary registry example: `examples/card-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs card` 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/card.tsx`, `assets/images/art-01.jpg`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Uses logical direction, text-start behavior, and dir="auto" copy so title, subtitle, description, footer actions, and menu affordance mirror naturally.
-- `actions`: The default footer composes the existing Button primitive and keeps action order logical in LTR and RTL.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Card
+
+Card is a token-built surface primitive for product summaries, media tiles, and action panels. It supports vertical and horizontal layouts, leading and trailing image treatments, full-image cards, desktop/mobile spacing, footer actions, and RTL-safe text.
+
+Use `CardSurface` when a product-specific composition needs the owned Banhaten card surface while supplying its own internal layout.
+
+```tsx
+<CardSurface>
+  <h3>Custom metric content</h3>
+</CardSurface>
+```
+
+## Install
+
+```bash
+npx banhaten add card
+```
+
+## Anatomy
+
+- `Card`: root surface with title, subtitle, description, media, and optional footer composition.
+- `CardMedia`: image/media slot with leading, trailing, or full-image treatment.
+- `CardFooter`: supporting metadata or action area.
+- `CardActions`: Button-composed primary and secondary actions.
+
+## Example
+
+```tsx
+import { Card } from "@/components/ui/card"
+
+export function Example() {
+  return (
+    <Card
+      title="Project activity"
+      subtitle="Updated 2 minutes ago"
+      description="A compact summary of the latest workspace changes."
+      orientation="horizontal"
+      type="leading-image"
+    />
+  )
+}
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `orientation` | `vertical`, `horizontal` |
+| `type` | `leading-image`, `trailing-image`, `full-image` |
+| `breakpoint` | `desktop`, `mobile` |
+| `dir` | inherited, `ltr`, `rtl` |
+
+## RTL
+
+Card uses logical spacing, inherited direction, and `dir="auto"` copy wrappers so title, subtitle, description, footer actions, and menu affordances mirror naturally.
+
+## API
+
+Supported runtime exports: `Card`, `CardActions`, `CardFooter`, `CardMedia`, `CardSurface`, `cardVariants`.
+
+| Contract | Values |
+| --- | --- |
+| `types` | `leading-image`, `trailing-image`, `full-image` |
+| `orientations` | `vertical`, `horizontal` |
+
+## Examples
+
+Primary registry example: `examples/card-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs card` 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/card.tsx`, `assets/images/art-01.jpg`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Uses logical direction, text-start behavior, and dir="auto" copy so title, subtitle, description, footer actions, and menu affordance mirror naturally.
+- `actions`: The default footer composes the existing Button primitive and keeps action order logical in LTR and RTL.
+
+## 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
 
@@ -98,6 +98,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | `button` |
 | `breakpoints` | `desktop`, `mobile` |
 | `orientations` | `vertical`, `horizontal` |
-| `tokens` | `--bh-bg-accent-green-subtle`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-card-actions-max-width`, `--bh-card-bg`, `--bh-card-border`, `--bh-card-content-padding`, `--bh-card-desktop-content-padding`, `--bh-card-desktop-full-height`, `--bh-card-desktop-horizontal-padding`, `--bh-card-desktop-media-height`, `--bh-card-full-height`, `--bh-card-horizontal-media-width`, `--bh-card-horizontal-min-height`, `--bh-card-horizontal-padding`, `--bh-card-horizontal-width`, `--bh-card-media-height`, `--bh-card-media-overlay`, `--bh-card-mobile-content-padding`, `--bh-card-mobile-full-height`, `--bh-card-mobile-horizontal-padding`, `--bh-card-mobile-media-height`, `--bh-card-more-icon-size`, `--bh-card-more-size`, `--bh-card-radius`, `--bh-card-vertical-width`, `--bh-content-default`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-control-default`, `--bh-interactive-ghost-hover`, `--bh-radius-3xl-16`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-lg-regular-font-size`, `--bh-text-body-lg-regular-font-weight`, `--bh-text-body-lg-regular-letter-spacing`, `--bh-text-body-lg-regular-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-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--shadow-button-focus` |
+| `tokens` | `--bh-bg-accent-green-subtle`, `--bh-bg-accent-sky-subtle`, `--bh-bg-neutral-subtle`, `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-card-actions-max-width`, `--bh-card-bg`, `--bh-card-border`, `--bh-card-content-padding`, `--bh-card-desktop-content-padding`, `--bh-card-desktop-full-height`, `--bh-card-desktop-horizontal-padding`, `--bh-card-desktop-media-height`, `--bh-card-full-height`, `--bh-card-horizontal-media-width`, `--bh-card-horizontal-min-height`, `--bh-card-horizontal-padding`, `--bh-card-horizontal-width`, `--bh-card-media-height`, `--bh-card-media-overlay`, `--bh-card-mobile-content-padding`, `--bh-card-mobile-full-height`, `--bh-card-mobile-horizontal-padding`, `--bh-card-mobile-media-height`, `--bh-card-more-icon-size`, `--bh-card-more-size`, `--bh-card-radius`, `--bh-card-vertical-width`, `--bh-content-default`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-control-default`, `--bh-interactive-ghost-hover`, `--bh-radius-3xl-16`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-lg-regular-font-size`, `--bh-text-body-lg-regular-font-weight`, `--bh-text-body-lg-regular-letter-spacing`, `--bh-text-body-lg-regular-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-sm-semibold-font-size`, `--bh-text-heading-sm-semibold-font-weight`, `--bh-text-heading-sm-semibold-letter-spacing`, `--bh-text-heading-sm-semibold-line-height`, `--elevation-button-focus` |
 | `types` | `leading-image`, `trailing-image`, `full-image` |
 <!-- registry-contract:end -->