banhaten 0.3.0 → 0.5.0

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

@@ -1,91 +1,91 @@
-# Attribute
-
-Attribute is a semantic description-list component for key-value information. It supports card headers, inline rows, right-aligned values, stacked mobile rows, two-column summaries, row dividers, bordered row groups, compact density, and RTL direction.
-
-The implementation follows the Figma component at `Design system 3.0 Copy / Attribute Card` (`255:123238`) and uses only existing Banhaten tokens.
-
-## API
-
-Use `AttributeCard` for the surface, `AttributeHeader` for optional title and description content, `AttributeList` for the `dl`, and `AttributeItem` for each `dt`/`dd` pair.
-
-```tsx
-<AttributeCard>
-  <AttributeHeader
-    title="Company profile"
-    description="Key-value information in a scannable card."
-  />
-  <AttributeList>
-    <AttributeItem label="Name">Acme Corporation</AttributeItem>
-    <AttributeItem label="Type">Business</AttributeItem>
-    <AttributeItem label="Industry">Software</AttributeItem>
-  </AttributeList>
-</AttributeCard>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `AttributeCard padding` | `default`, `compact` |
-| `AttributeList layout` | `inline`, `end`, `stacked`, `two-column` |
-| `AttributeList density` | `compact`, `default`, `comfortable` |
-| `AttributeList dividers` | `boolean` |
-| `AttributeList bordered` | `boolean` |
-| `AttributeList labelWidth` | CSS length, default `220px` |
-| `AttributeItem fullSpan` | `boolean`, useful in `two-column` layouts |
-| `AttributeItem truncate` | `boolean` |
-
-## Composition
-
-Values are open React slots. Compose existing primitives for status badges, copy buttons, file rows, progress bars, skeleton bars, links, and custom details.
-
-```tsx
-<AttributeList layout="end" dividers>
-  <AttributeItem label="Subscription">
-    <Badge color="green" type="dot">Active</Badge>
-  </AttributeItem>
-  <AttributeItem label="API key" truncate>
-    sk_live_************1234
-    <Button aria-label="Copy API key" size="icon-xs" variant="outline">
-      <CopyIcon />
-    </Button>
-  </AttributeItem>
-</AttributeList>
-```
-
-## RTL
-
-Attribute inherits direction from any parent. The component uses logical text alignment and `dir="auto"` wrappers for string labels and values, so Arabic and English content can sit in the same card without manual left/right classes.
-
-## Install
-
-```bash
-npx banhaten add attribute
-```
-
-## Examples
-
-Primary registry example: `examples/attribute-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs attribute` 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/attribute.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `layout`: Uses logical text alignment and inherited direction so label and value columns mirror naturally.
-- `textDirection`: String labels and values use dir="auto" wrappers while custom slots can control their own direction.
-- `composition`: Rows accept ReactNode values, so badges, buttons, links, progress bars, skeletons, files, and custom content can be composed from existing Banhaten primitives.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Attribute
+
+Attribute is a semantic description-list component for key-value information. It supports card headers, inline rows, right-aligned values, stacked mobile rows, two-column summaries, row dividers, bordered row groups, compact density, and RTL direction.
+
+The implementation follows the Figma component at `Design system 3.0 Copy / Attribute Card` (`255:123238`) and uses only existing Banhaten tokens.
+
+## API
+
+Use `AttributeCard` for the surface, `AttributeHeader` for optional title and description content, `AttributeList` for the `dl`, and `AttributeItem` for each `dt`/`dd` pair.
+
+```tsx
+<AttributeCard>
+  <AttributeHeader
+    title="Company profile"
+    description="Key-value information in a scannable card."
+  />
+  <AttributeList>
+    <AttributeItem label="Name">Acme Corporation</AttributeItem>
+    <AttributeItem label="Type">Business</AttributeItem>
+    <AttributeItem label="Industry">Software</AttributeItem>
+  </AttributeList>
+</AttributeCard>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `AttributeCard padding` | `default`, `compact` |
+| `AttributeList layout` | `inline`, `end`, `stacked`, `two-column` |
+| `AttributeList density` | `compact`, `default`, `comfortable` |
+| `AttributeList dividers` | `boolean` |
+| `AttributeList bordered` | `boolean` |
+| `AttributeList labelWidth` | CSS length, default `220px` |
+| `AttributeItem fullSpan` | `boolean`, useful in `two-column` layouts |
+| `AttributeItem truncate` | `boolean` |
+
+## Composition
+
+Values are open React slots. Compose existing primitives for status badges, copy buttons, file rows, progress bars, skeleton bars, links, and custom details.
+
+```tsx
+<AttributeList layout="end" dividers>
+  <AttributeItem label="Subscription">
+    <Badge color="green" type="dot">Active</Badge>
+  </AttributeItem>
+  <AttributeItem label="API key" truncate>
+    sk_live_************1234
+    <Button aria-label="Copy API key" size="icon-xs" variant="outline">
+      <CopyIcon />
+    </Button>
+  </AttributeItem>
+</AttributeList>
+```
+
+## RTL
+
+Attribute inherits direction from any parent. The component uses logical text alignment and `dir="auto"` wrappers for string labels and values, so Arabic and English content can sit in the same card without manual left/right classes.
+
+## Install
+
+```bash
+npx banhaten add attribute
+```
+
+## Examples
+
+Primary registry example: `examples/attribute-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs attribute` 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/attribute.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `layout`: Uses logical text alignment and inherited direction so label and value columns mirror naturally.
+- `textDirection`: String labels and values use dir="auto" wrappers while custom slots can control their own direction.
+- `composition`: Rows accept ReactNode values, so badges, buttons, links, progress bars, skeletons, files, and custom content can be composed from existing Banhaten primitives.
+
+## 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
 
@@ -99,5 +99,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `densities` | `compact`, `default`, `comfortable` |
 | `layouts` | `inline`, `end`, `stacked`, `two-column` |
-| `tokens` | `--bh-attribute-header-icon-size`, `--bh-attribute-header-icon-size-lg`, `--bh-attribute-label-width`, `--bh-bg-default`, `--bh-bg-neutral-soft`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-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-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-letter-spacing`, `--bh-text-heading-sm-medium-line-height` |
+| `tokens` | `--bh-attribute-header-icon-size`, `--bh-attribute-header-icon-size-lg`, `--bh-attribute-label-width`, `--bh-bg-default`, `--bh-bg-neutral-soft`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-radius-2xl-12`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--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-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-medium-font-size`, `--bh-text-heading-sm-medium-font-weight`, `--bh-text-heading-sm-medium-letter-spacing`, `--bh-text-heading-sm-medium-line-height` |
 <!-- registry-contract:end -->

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

@@ -1,78 +1,78 @@
-# Autocomplete
-
-Autocomplete is a searchable combobox field for choosing one or many known options.
-
-The implementation is intentionally composed from existing Banhaten primitives: `Input` owns the field surface, `SelectMenu` and `SelectMenuItem` own the result list, and `Tag` owns selected multi-value chips. The component adds filtering, selected-value state, keyboard navigation, ARIA combobox wiring, and controlled or uncontrolled APIs.
-
-## API
-
-```tsx
-<Autocomplete
-  label="Owner"
-  placeholder="Search people"
-  options={[
-    { value: "ahmed", label: "Ahmed Galal", addonText: "Design system" },
-    { value: "nora", label: "Nora Ali", addonText: "Product" },
-  ]}
-/>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `options` | `{ value, label, addonText, itemType, media, keywords, disabled }[]` | required |
-| `selectionMode` | `single`, `multiple` | `single` |
-| `value` / `defaultValue` | `string` or `string[]` | none |
-| `inputValue` / `defaultInputValue` | `string` | inferred from selected single value |
-| `open` / `defaultOpen` | `boolean` | `false` |
-| `filterOptions` | custom filtering function | label, value, and keywords filter |
-| `size` | `md`, `lg` | `lg` |
-| `variant` | `default`, `soft` | `default` |
-| `state` | `default`, `filled`, `error`, `disabled` | inferred |
-| `dir` | `ltr`, `rtl`, `auto` | inherited |
-
-## Composition Rules
-
-- Use autocomplete for known option sets that benefit from search.
-- Use `Select` when the option set is short and browsing is faster than typing.
-- Use `selectionMode="multiple"` when selected options need removable chips; chips render with `Tag`.
-- Keep async fetching, debouncing, and remote loading in product code by controlling `inputValue`, `open`, and `options`.
-- Keep option labels concise. Use `addonText` for secondary metadata.
-
-## Accessibility
-
-- The input uses `role="combobox"`, `aria-autocomplete="list"`, `aria-expanded`, `aria-controls`, and `aria-activedescendant`.
-- Results render as a `listbox` using Select menu rows.
-- Arrow keys move the active option, `Enter` selects, `Escape` closes, and `Backspace` removes the last selected tag in multiple mode when the search field is empty.
-- Labels and helper text are associated with the input, and error state maps to `aria-invalid`.
-
-## Token Contract
-
-Autocomplete consumes tokens through the primitives it composes:
-
-- Field surface, typography, icon sizing, focus ring, and disabled/error states from `Input`.
-- Menu surface, item rows, hover state, selected check, and item media slots from `Select`.
-- Removable selected chips from `Tag`.
-- Additional layout uses spacing, content, and z-index tokens only.
-
-## Install
-
-```bash
-npx banhaten add autocomplete
-```
-
-## Examples
-
-Primary registry example: `examples/autocomplete-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs autocomplete` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `composition`: Uses the existing Input field, Select menu and menu item rows, and Tag chips instead of introducing new visual primitives.
-- `spacing`: Uses logical positioning, logical gaps, and inherited direction so the input, menu rows, checks, helper text, and selected tags mirror naturally.
-- `textDirection`: Labels, option text, helper text, and tag labels use dir="auto" through the composed primitives.
-
+# Autocomplete
+
+Autocomplete is a searchable combobox field for choosing one or many known options.
+
+The implementation is intentionally composed from existing Banhaten primitives: `Input` owns the field surface, `SelectMenu` and `SelectMenuItem` own the result list, and `Tag` owns selected multi-value chips. The component adds filtering, selected-value state, keyboard navigation, ARIA combobox wiring, and controlled or uncontrolled APIs.
+
+## API
+
+```tsx
+<Autocomplete
+  label="Owner"
+  placeholder="Search people"
+  options={[
+    { value: "ahmed", label: "Ahmed Galal", addonText: "Design system" },
+    { value: "nora", label: "Nora Ali", addonText: "Product" },
+  ]}
+/>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `options` | `{ value, label, addonText, itemType, media, keywords, disabled }[]` | required |
+| `selectionMode` | `single`, `multiple` | `single` |
+| `value` / `defaultValue` | `string` or `string[]` | none |
+| `inputValue` / `defaultInputValue` | `string` | inferred from selected single value |
+| `open` / `defaultOpen` | `boolean` | `false` |
+| `filterOptions` | custom filtering function | label, value, and keywords filter |
+| `size` | `md`, `lg` | `lg` |
+| `variant` | `default`, `soft` | `default` |
+| `state` | `default`, `filled`, `error`, `disabled` | inferred |
+| `dir` | `ltr`, `rtl`, `auto` | inherited |
+
+## Composition Rules
+
+- Use autocomplete for known option sets that benefit from search.
+- Use `Select` when the option set is short and browsing is faster than typing.
+- Use `selectionMode="multiple"` when selected options need removable chips; chips render with `Tag`.
+- Keep async fetching, debouncing, and remote loading in product code by controlling `inputValue`, `open`, and `options`.
+- Keep option labels concise. Use `addonText` for secondary metadata.
+
+## Accessibility
+
+- The input uses `role="combobox"`, `aria-autocomplete="list"`, `aria-expanded`, `aria-controls`, and `aria-activedescendant`.
+- Results render as a `listbox` using Select menu rows.
+- Arrow keys move the active option, `Enter` selects, `Escape` closes, and `Backspace` removes the last selected tag in multiple mode when the search field is empty.
+- Labels and helper text are associated with the input, and error state maps to `aria-invalid`.
+
+## Token Contract
+
+Autocomplete consumes tokens through the primitives it composes:
+
+- Field surface, typography, icon sizing, focus ring, and disabled/error states from `Input`.
+- Menu surface, item rows, hover state, selected check, and item media slots from `Select`.
+- Removable selected chips from `Tag`.
+- Additional layout uses spacing, content, and z-index tokens only.
+
+## Install
+
+```bash
+npx banhaten add autocomplete
+```
+
+## Examples
+
+Primary registry example: `examples/autocomplete-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs autocomplete` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `composition`: Uses the existing Input field, Select menu and menu item rows, and Tag chips instead of introducing new visual primitives.
+- `spacing`: Uses logical positioning, logical gaps, and inherited direction so the input, menu rows, checks, helper text, and selected tags mirror naturally.
+- `textDirection`: Labels, option text, helper text, and tag labels use dir="auto" through the composed primitives.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,56 +1,56 @@
-# Avatar
-
-Avatar represents people, accounts, teams, and system actors. It supports images, initials, icon fallback, circular or rounded forms, status dots, action overlays, stacked groups, group counts, size scale, and RTL-safe overlap.
-
-## API
-
-```tsx
-<Avatar name="Ahmed Galal" src="/avatars/avatar-01.jpg" status="available" />
-
-<AvatarGroup>
-  <Avatar name="Nora" />
-  <Avatar name="Omar" />
-  <AvatarGroupCount>+4</AvatarGroupCount>
-</AvatarGroup>
-```
-
-| Prop | Values |
-| --- | --- |
-| `size` | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` |
-| `form` | `circular`, `rounded` |
-| `status` | `offline`, `busy`, `blocked`, `available`, `away` |
-| `action` | `custom`, `edit`, `verified`, `remove` |
-
-## Token Contract
-
-Avatar consumes Banhaten radius, sizing, border, shadow, status, background, and content tokens. Status and action markers should stay token-bound so themes and dark mode remain consistent.
-
-## RTL
-
-Avatar groups use logical negative margin so overlap reverses naturally in RTL. Status and action affordances use logical end placement.
-
-## Accessibility
-
-Use `name` or accessible image alt text for user avatars. Decorative grouped avatars can be hidden from assistive tech when the surrounding row already names the people.
-
-## Install
-
-```bash
-npx banhaten add avatar
-```
-
-## Examples
-
-Primary registry example: `examples/avatar-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs avatar` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `groupOverlap`: Uses logical -ms spacing so overlap reverses naturally in RTL.
-- `badgePlacement`: Status dots use logical end/bottom positioning; avatar actions use logical end/top positioning.
-
+# Avatar
+
+Avatar represents people, accounts, teams, and system actors. It supports images, initials, icon fallback, circular or rounded forms, status dots, action overlays, stacked groups, group counts, size scale, and RTL-safe overlap.
+
+## API
+
+```tsx
+<Avatar name="Ahmed Galal" src="/avatars/avatar-01.jpg" status="available" />
+
+<AvatarGroup>
+  <Avatar name="Nora" />
+  <Avatar name="Omar" />
+  <AvatarGroupCount>+4</AvatarGroupCount>
+</AvatarGroup>
+```
+
+| Prop | Values |
+| --- | --- |
+| `size` | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` |
+| `form` | `circular`, `rounded` |
+| `status` | `offline`, `busy`, `blocked`, `available`, `away` |
+| `action` | `custom`, `edit`, `verified`, `remove` |
+
+## Token Contract
+
+Avatar consumes Banhaten radius, sizing, border, shadow, status, background, and content tokens. The `md` and `lg` icon fallbacks use 18px glyphs in 20px slots; other avatar sizes keep their existing scale. Status and action markers should stay token-bound so themes and dark mode remain consistent.
+
+## RTL
+
+Avatar groups use logical negative margin so overlap reverses naturally in RTL. Status and action affordances use logical end placement.
+
+## Accessibility
+
+Use `name` or accessible image alt text for user avatars. Decorative grouped avatars can be hidden from assistive tech when the surrounding row already names the people.
+
+## Install
+
+```bash
+npx banhaten add avatar
+```
+
+## Examples
+
+Primary registry example: `examples/avatar-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs avatar` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `groupOverlap`: Uses logical -ms spacing so overlap reverses naturally in RTL.
+- `badgePlacement`: Status dots use logical end/bottom positioning; avatar actions use logical end/top positioning.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -66,5 +66,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `forms` | `circular`, `rounded` |
 | `sizes` | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl` |
 | `statusColors` | `offline`, `busy`, `blocked`, `available`, `away` |
-| `tokens` | `--bh-avatar-action-icon-size`, `--bh-avatar-action-icon-size-2xl`, `--bh-avatar-action-icon-size-3xl`, `--bh-avatar-action-icon-size-4xl`, `--bh-avatar-action-icon-size-large`, `--bh-avatar-action-icon-size-medium`, `--bh-avatar-action-icon-size-small`, `--bh-avatar-action-icon-size-tiny`, `--bh-avatar-action-icon-size-xlarge`, `--bh-avatar-action-icon-size-xsmall`, `--bh-avatar-action-size`, `--bh-avatar-action-size-2xl`, `--bh-avatar-action-size-3xl`, `--bh-avatar-action-size-4xl`, `--bh-avatar-action-size-large`, `--bh-avatar-action-size-medium`, `--bh-avatar-action-size-small`, `--bh-avatar-action-size-tiny`, `--bh-avatar-action-size-xlarge`, `--bh-avatar-action-size-xsmall`, `--bh-avatar-fallback-font-size-2xl`, `--bh-avatar-fallback-font-size-2xs`, `--bh-avatar-fallback-font-size-3xl`, `--bh-avatar-fallback-font-size-4xl`, `--bh-avatar-fallback-font-size-lg`, `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-sm`, `--bh-avatar-fallback-font-size-xl`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-fallback-size`, `--bh-avatar-icon-size`, `--bh-avatar-icon-size-2xl`, `--bh-avatar-icon-size-2xs`, `--bh-avatar-icon-size-3xl`, `--bh-avatar-icon-size-4xl`, `--bh-avatar-icon-size-lg`, `--bh-avatar-icon-size-md`, `--bh-avatar-icon-size-sm`, `--bh-avatar-icon-size-xl`, `--bh-avatar-icon-size-xs`, `--bh-avatar-radius`, `--bh-avatar-size`, `--bh-avatar-size-2xl`, `--bh-avatar-size-2xs`, `--bh-avatar-size-3xl`, `--bh-avatar-size-4xl`, `--bh-avatar-size-lg`, `--bh-avatar-size-md`, `--bh-avatar-size-sm`, `--bh-avatar-size-xl`, `--bh-avatar-size-xs`, `--bh-avatar-status-ring`, `--bh-avatar-status-ring-default`, `--bh-avatar-status-ring-thin`, `--bh-avatar-status-size`, `--bh-avatar-status-size-large`, `--bh-avatar-status-size-medium`, `--bh-avatar-status-size-small`, `--bh-avatar-status-size-tiny`, `--bh-avatar-status-size-xlarge`, `--bh-avatar-status-size-xsmall`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-success-default`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-font-weight-semibold`, `--bh-icon-stroke-210`, `--bh-icon-stroke-240`, `--bh-icon-stroke-260`, `--bh-icon-stroke-280`, `--bh-interactive-brand-default`, `--bh-interactive-danger-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-sm-medium-font-size`, `--shadow-avatar-badge` |
+| `tokens` | `--bh-avatar-action-icon-size`, `--bh-avatar-action-icon-size-2xl`, `--bh-avatar-action-icon-size-3xl`, `--bh-avatar-action-icon-size-4xl`, `--bh-avatar-action-icon-size-large`, `--bh-avatar-action-icon-size-medium`, `--bh-avatar-action-icon-size-small`, `--bh-avatar-action-icon-size-tiny`, `--bh-avatar-action-icon-size-xlarge`, `--bh-avatar-action-icon-size-xsmall`, `--bh-avatar-action-size`, `--bh-avatar-action-size-2xl`, `--bh-avatar-action-size-3xl`, `--bh-avatar-action-size-4xl`, `--bh-avatar-action-size-large`, `--bh-avatar-action-size-medium`, `--bh-avatar-action-size-small`, `--bh-avatar-action-size-tiny`, `--bh-avatar-action-size-xlarge`, `--bh-avatar-action-size-xsmall`, `--bh-avatar-fallback-font-size-2xl`, `--bh-avatar-fallback-font-size-2xs`, `--bh-avatar-fallback-font-size-3xl`, `--bh-avatar-fallback-font-size-4xl`, `--bh-avatar-fallback-font-size-lg`, `--bh-avatar-fallback-font-size-md`, `--bh-avatar-fallback-font-size-sm`, `--bh-avatar-fallback-font-size-xl`, `--bh-avatar-fallback-font-size-xs`, `--bh-avatar-fallback-size`, `--bh-avatar-icon-size`, `--bh-avatar-icon-size-2xl`, `--bh-avatar-icon-size-2xs`, `--bh-avatar-icon-size-3xl`, `--bh-avatar-icon-size-4xl`, `--bh-avatar-icon-size-lg`, `--bh-avatar-icon-size-md`, `--bh-avatar-icon-size-sm`, `--bh-avatar-icon-size-xl`, `--bh-avatar-icon-size-xs`, `--bh-avatar-icon-slot-size`, `--bh-avatar-radius`, `--bh-avatar-size`, `--bh-avatar-size-2xl`, `--bh-avatar-size-2xs`, `--bh-avatar-size-3xl`, `--bh-avatar-size-4xl`, `--bh-avatar-size-lg`, `--bh-avatar-size-md`, `--bh-avatar-size-sm`, `--bh-avatar-size-xl`, `--bh-avatar-size-xs`, `--bh-avatar-status-ring`, `--bh-avatar-status-ring-default`, `--bh-avatar-status-ring-thin`, `--bh-avatar-status-size`, `--bh-avatar-status-size-large`, `--bh-avatar-status-size-medium`, `--bh-avatar-status-size-small`, `--bh-avatar-status-size-tiny`, `--bh-avatar-status-size-xlarge`, `--bh-avatar-status-size-xsmall`, `--bh-bg-accent-golden-default`, `--bh-bg-accent-red-default`, `--bh-bg-accent-sky-base`, `--bh-bg-default`, `--bh-bg-neutral-default`, `--bh-bg-neutral-medium`, `--bh-bg-neutral-subtle`, `--bh-bg-success-default`, `--bh-border-width-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-font-weight-semibold`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-240`, `--bh-icon-stroke-260`, `--bh-icon-stroke-280`, `--bh-interactive-brand-default`, `--bh-interactive-danger-default`, `--bh-radius-full`, `--bh-radius-lg-8`, `--bh-space-md-8`, `--bh-space-none`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-sm-medium-font-size`, `--elevation-avatar-badge` |
 <!-- registry-contract:end -->

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

@@ -1,57 +1,57 @@
-# Badge
-
-Badge is a compact status, count, classification, or metadata primitive. It supports light, outline, and solid styles; semantic color families; dot, flag, leading icon, trailing icon, numeric, and split-action compositions; and RTL-safe layout.
-
-## API
-
-```tsx
-<Badge color="green">Active</Badge>
-<Badge color="blue" type="dot">New</Badge>
-<Badge color="neutral" type="trailing-icon" splitAction>
-  Filter
-</Badge>
-```
-
-| Prop | Values | Default |
-| --- | --- | --- |
-| `style` | `light`, `outline`, `solid` | `light` |
-| `color` | `neutral`, `blue`, `green`, `amber`, `danger`, `purple`, `fuchsia`, `rose`, `sky`, `golden` | `neutral` |
-| `type` | `default`, `leading-icon`, `trailing-icon`, `dot`, `flag` | `default` |
-| `size` | `sm`, `lg` | `sm` |
-| `splitAction` | `boolean` | `false` |
-
-## Token Contract
-
-Badge uses semantic content, background, border, radius, typography, icon, opacity, and focus tokens. Provider or brand colors should be added through semantic aliases, not raw literals.
-
-## RTL
-
-Use `data-icon="inline-start"` or `data-icon="inline-end"` on icons. Directional arrows should also set `data-rtl-flip="true"`.
-
-## Accessibility
-
-Badges are usually descriptive text. Do not use color alone for critical status; include a readable label such as `Failed`, `Warning`, or `Active`.
-
-## Install
-
-```bash
-npx banhaten add badge
-```
-
-## Examples
-
-Primary registry example: `examples/badge-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs badge` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `iconPlacement`: Set type="leading-icon" or type="trailing-icon" and use data-icon="inline-start" or data-icon="inline-end". Add splitAction to give a trailing icon its own token-sized compartment.
-- `directionalIconFlip`: Use data-rtl-flip="true" on arrows that should mirror.
-- `textDirection`: Uses dir="auto" by default for short Arabic and English labels.
-- `legacyVariants`: The previous variant prop is still accepted as a compatibility shim.
-
+# Badge
+
+Badge is a compact status, count, classification, or metadata primitive. It supports light, outline, and solid styles; semantic color families; dot, flag, leading icon, trailing icon, numeric, and split-action compositions; and RTL-safe layout.
+
+## API
+
+```tsx
+<Badge color="green">Active</Badge>
+<Badge color="blue" type="dot">New</Badge>
+<Badge color="neutral" type="trailing-icon" splitAction>
+  Filter
+</Badge>
+```
+
+| Prop | Values | Default |
+| --- | --- | --- |
+| `style` | `light`, `outline`, `solid` | `light` |
+| `color` | `neutral`, `blue`, `green`, `amber`, `danger`, `purple`, `fuchsia`, `rose`, `sky`, `golden` | `neutral` |
+| `type` | `default`, `leading-icon`, `trailing-icon`, `dot`, `flag` | `default` |
+| `size` | `sm`, `lg` | `sm` |
+| `splitAction` | `boolean` | `false` |
+
+## Token Contract
+
+Badge uses semantic content, background, border, radius, typography, icon, opacity, and focus tokens. Provider or brand colors should be added through semantic aliases, not raw literals.
+
+## RTL
+
+Use `data-icon="inline-start"` or `data-icon="inline-end"` on icons. Directional arrows should also set `data-rtl-flip="true"`.
+
+## Accessibility
+
+Badges are usually descriptive text. Do not use color alone for critical status; include a readable label such as `Failed`, `Warning`, or `Active`.
+
+## Install
+
+```bash
+npx banhaten add badge
+```
+
+## Examples
+
+Primary registry example: `examples/badge-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs badge` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `iconPlacement`: Set type="leading-icon" or type="trailing-icon" and use data-icon="inline-start" or data-icon="inline-end". Add splitAction to give a trailing icon its own token-sized compartment.
+- `directionalIconFlip`: Use data-rtl-flip="true" on arrows that should mirror.
+- `textDirection`: Uses dir="auto" by default for short Arabic and English labels.
+- `legacyVariants`: The previous variant prop is still accepted as a compatibility shim.
+
 <!-- registry-contract:start -->
 ## Registry Contract