banhaten 0.3.0 → 0.5.0

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

@@ -1,46 +1,46 @@
-# Resizable
-
-Resizable wraps `react-resizable-panels` for split panes and workbench layouts.
-
-## API
-
-```tsx
-<ResizablePanelGroup direction="horizontal">
-  <ResizablePanel defaultSize={30}>Sidebar</ResizablePanel>
-  <ResizableHandle withHandle />
-  <ResizablePanel defaultSize={70}>Content</ResizablePanel>
-</ResizablePanelGroup>
-```
-
-## Token Contract
-
-Resizable uses Banhaten border, focus, raised surface, radius, and icon sizing tokens.
-
-## RTL
-
-Panel order follows DOM order. Use logical layout around the panel group for RTL shells.
-
-## Accessibility
-
-`react-resizable-panels` provides keyboard-adjustable resize handles.
-
-## Install
-
-```bash
-npx banhaten add resizable
-```
-
-## Examples
-
-Primary registry example: `examples/resizable-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs resizable` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `layout`: Panel order follows DOM order; use logical shell layout for RTL workspaces.
-
+# Resizable
+
+Resizable wraps `react-resizable-panels` for split panes and workbench layouts.
+
+## API
+
+```tsx
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel defaultSize={30}>Sidebar</ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={70}>Content</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Token Contract
+
+Resizable uses Banhaten border, focus, raised surface, radius, and icon sizing tokens.
+
+## RTL
+
+Panel order follows DOM order. Use logical layout around the panel group for RTL shells.
+
+## Accessibility
+
+`react-resizable-panels` provides keyboard-adjustable resize handles.
+
+## Install
+
+```bash
+npx banhaten add resizable
+```
+
+## Examples
+
+Primary registry example: `examples/resizable-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs resizable` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `layout`: Panel order follows DOM order; use logical shell layout for RTL workspaces.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -53,5 +53,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
 | `registryDependencies` | None |
 | `features` | `horizontal panels`, `vertical panels`, `keyboard resize handle` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-muted`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-z-raised`, `--shadow-button-focus`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-muted`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-6xl-32`, `--bh-z-raised`, `--elevation-button-focus`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

package/docs/design-system/components/rolling-count.md

@@ -0,0 +1,61 @@
+# Rolling Count
+
+`RollingCount` shows tabular figures where each changed character rolls into place like an odometer: the old glyph slides out as the new one slides in, up when a digit grows and down when it shrinks, with 9 to 0 continuing upward. Task List uses it for its progress counter and Approval Card for its step badge and countdown seconds.
+
+## API
+
+```tsx
+import { RollingCount } from "@/components/ui/rolling-count"
+
+<RollingCount value={`${done}/${total}`} aria-label={`${done} of ${total} done`} />
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | – | Text to show. Only the characters that change roll; a value that grows a digit keeps the existing glyphs in place. |
+| `aria-label` | `string` | `value` | What assistive technology reads instead of the plain value. |
+| `dir` | `"ltr" \| "rtl"` | `"ltr"` | Glyph order. Stays left-to-right by default so values like 2/5 keep their order inside RTL copy. |
+
+Any other `span` prop passes through.
+
+## Install
+
+```bash
+npx banhaten add rolling-count
+```
+
+## Examples
+
+Primary registry example: `examples/rolling-count-demo.tsx`.
+
+## Token Contract
+
+Glyphs use tabular figures and inherit the surrounding type scale and color. Each roll runs on the `--bh-duration-slow` foundation duration with `--bh-easing-standard`, and a digit returns to plain text when its roll transition ends.
+
+Covered source files: `components/rolling-count.tsx` and `components/rolling-count.css`.
+
+## RTL Rules
+
+- Digits keep left-to-right order inside RTL copy, so separators such as 2/5 stay in reading order.
+- The counter isolates its bidi context so it never reorders surrounding Arabic text.
+
+## Accessibility
+
+Assistive technology reads the plain value, or `aria-label` when given, from a visually hidden span; the rolling glyphs are hidden from it. Under `prefers-reduced-motion` the roll collapses to an instant change.
+
+<!-- registry-contract:start -->
+## Registry Contract
+
+This table is generated from `registry/index.json`; edit the component-owned source under `registry/catalog/components/`, not this table or the compiled index.
+`supportedExports` is the exhaustive runtime import contract grouped by source module. `parts` is an ordered, non-exhaustive anatomy list.
+
+| Field | Values |
+| --- | --- |
+| `supportedExports` | `components/rolling-count.tsx: RollingCount` |
+| `parts` | `RollingCount` |
+| `registryDependencies` | None |
+| `props.value` | `string; default null; Text to show; each changed character rolls up or down into place.` |
+| `props.aria-label` | `string; default null; What assistive technology reads instead of the value, for example 2 of 5 done.` |
+| `props.dir` | `"ltr" \| "rtl"; default "ltr"; Glyph order. Stays left-to-right by default so values like 2/5 keep their order inside RTL copy.` |
+| `tokens` | `--bh-duration-slow`, `--bh-easing-standard` |
+<!-- registry-contract:end -->

package/docs/design-system/components/scroll-area.md

@@ -1,53 +1,53 @@
-# Scroll Area
-
-Scroll Area wraps Radix ScrollArea with tokenized viewport, scrollbar, thumb, and corner styling.
-
-## API
-
-```tsx
-<ScrollArea className="h-48">
-  <div>Scrollable content</div>
-</ScrollArea>
-
-<ScrollArea className="h-48" orientation="both">
-  <div className="h-max w-max">Two-axis content</div>
-</ScrollArea>
-```
-
-| Part | Purpose |
-| --- | --- |
-| `ScrollArea` | root and viewport; `orientation` accepts `vertical`, `horizontal`, or `both` |
-| `ScrollBar` | vertical or horizontal scrollbar |
-
-## Token Contract
-
-Scroll Area uses Banhaten radius, border, and neutral thumb tokens.
-
-## RTL
-
-Scroll Area inherits direction from its parent. Use logical padding inside the viewport content.
-
-## Accessibility
-
-Use Scroll Area for visual scrollbars around already accessible content, not for hiding essential controls.
-
-## Install
-
-```bash
-npx banhaten add scroll-area
-```
-
-## Examples
-
-Primary registry example: `examples/scroll-area-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs scroll-area` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `spacing`: Viewport content should use logical padding so scrollable regions mirror with document direction.
-
+# Scroll Area
+
+Scroll Area wraps Radix ScrollArea with tokenized viewport, scrollbar, thumb, and corner styling.
+
+## API
+
+```tsx
+<ScrollArea className="h-48">
+  <div>Scrollable content</div>
+</ScrollArea>
+
+<ScrollArea className="h-48" orientation="both">
+  <div className="h-max w-max">Two-axis content</div>
+</ScrollArea>
+```
+
+| Part | Purpose |
+| --- | --- |
+| `ScrollArea` | root and viewport; `orientation` accepts `vertical`, `horizontal`, or `both` |
+| `ScrollBar` | vertical or horizontal scrollbar |
+
+## Token Contract
+
+Scroll Area uses Banhaten radius, border, and neutral thumb tokens.
+
+## RTL
+
+Scroll Area inherits direction from its parent. Use logical padding inside the viewport content.
+
+## Accessibility
+
+Use Scroll Area for visual scrollbars around already accessible content, not for hiding essential controls.
+
+## Install
+
+```bash
+npx banhaten add scroll-area
+```
+
+## Examples
+
+Primary registry example: `examples/scroll-area-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs scroll-area` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `spacing`: Viewport content should use logical padding so scrollable regions mirror with document direction.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -60,5 +60,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `parts` | `ScrollArea`, `ScrollBar` |
 | `registryDependencies` | None |
 | `features` | `vertical scrollbar`, `horizontal scrollbar`, `two-axis scrollbar composition`, `viewport clipping`, `keyboard-focusable viewport`, `viewportProps escape hatch` |
-| `tokens` | `--bh-border-default`, `--bh-radius-full`, `--bh-space-lg-10`, `--bh-space-xxs-2`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-border-default`, `--bh-radius-full`, `--bh-space-lg-10`, `--bh-space-xxs-2`, `--elevation-component-focus-ring` |
 <!-- registry-contract:end -->

package/docs/design-system/components/segmented-control.md

@@ -1,57 +1,57 @@
-# Segmented Control
-
-Segmented Control presents a small set of related choices on one connected, content-width surface. It is the preferred primitive for view, density, period, and numeric display choices such as “Cards per row”.
-
-Use Select or Radio Group when labels are long or the option set is large. Use Button Group when the items are actions rather than values.
-
-## API
-
-Give the group an accessible name, give every item a stable value, and use `SegmentedControlLabel` only for non-interactive context.
-
-```tsx
-<SegmentedControl
-  aria-label="Cards per row"
-  density="default"
-  defaultValue="4"
->
-  <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
-  <SegmentedControlItem value="3">3</SegmentedControlItem>
-  <SegmentedControlItem value="4">4</SegmentedControlItem>
-  <SegmentedControlItem value="5">5</SegmentedControlItem>
-  <SegmentedControlItem value="6">6</SegmentedControlItem>
-</SegmentedControl>
-```
-
-The default density is `default` (36px). Use `compact` for 32px control rows and `comfortable` for 40px controls. Keep adjacent controls on the same density contract.
-
-## Install
-
-```bash
-npx banhaten add segmented-control
-```
-
-## Examples
-
-Primary registry example: `examples/segmented-control-demo.tsx`.
-
-The results-toolbar recipe demonstrates the labeled cards-per-row composition alongside a Select action.
-
-## Token Contract
-
-Segmented Control reuses Button Group surface, divider, interaction, typography, and density tokens. Do not replace its height, padding, radius, color, or shadow with local literal values.
-
-Covered source files: `components/segmented-control.tsx` and its `button-group` registry dependency.
-
-## RTL Rules
-
-- The group inherits document direction.
-- Content-width items and logical dividers follow inherited direction without alternate markup.
-- Horizontal arrow-key navigation resolves the computed direction through the underlying Toggle Group.
-
-## Accessibility
-
-Provide `aria-label` on every Segmented Control. Items expose pressed state through the underlying Toggle Group, support single or multiple selection, and retain Home, End, and direction-aware arrow-key navigation. The label segment is descriptive and never focusable.
-
+# Segmented Control
+
+Segmented Control presents a small set of related choices on one connected, content-width surface. It is the preferred primitive for view, density, period, and numeric display choices such as “Cards per row”.
+
+Use Select or Radio Group when labels are long or the option set is large. Use Button Group when the items are actions rather than values.
+
+## API
+
+Give the group an accessible name, give every item a stable value, and use `SegmentedControlLabel` only for non-interactive context.
+
+```tsx
+<SegmentedControl
+  aria-label="Cards per row"
+  density="default"
+  defaultValue="4"
+>
+  <SegmentedControlLabel>Cards / row</SegmentedControlLabel>
+  <SegmentedControlItem value="3">3</SegmentedControlItem>
+  <SegmentedControlItem value="4">4</SegmentedControlItem>
+  <SegmentedControlItem value="5">5</SegmentedControlItem>
+  <SegmentedControlItem value="6">6</SegmentedControlItem>
+</SegmentedControl>
+```
+
+The default density is `default` (36px). Use `compact` for 32px control rows and `comfortable` for 40px controls. Keep adjacent controls on the same density contract.
+
+## Install
+
+```bash
+npx banhaten add segmented-control
+```
+
+## Examples
+
+Primary registry example: `examples/segmented-control-demo.tsx`.
+
+The results-toolbar recipe demonstrates the labeled cards-per-row composition alongside a Select action.
+
+## Token Contract
+
+Segmented Control reuses Button Group surface, divider, interaction, typography, and density tokens. Do not replace its height, padding, radius, color, or shadow with local literal values.
+
+Covered source files: `components/segmented-control.tsx` and its `button-group` registry dependency.
+
+## RTL Rules
+
+- The group inherits document direction.
+- Content-width items and logical dividers follow inherited direction without alternate markup.
+- Horizontal arrow-key navigation resolves the computed direction through the underlying Toggle Group.
+
+## Accessibility
+
+Provide `aria-label` on every Segmented Control. Items expose pressed state through the underlying Toggle Group, support single or multiple selection, and retain Home, End, and direction-aware arrow-key navigation. The label segment is descriptive and never focusable.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 

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

@@ -1,64 +1,67 @@
-# Select
-
-Select is a Radix Select-backed field and menu system. It supports default and soft trigger styles, md/lg sizing, error, filled and disabled states, menu surfaces, checkbox or check selection, and item media for text, icons, avatars, companies, payment methods, and status dots.
-
-## API
-
-```tsx
-<Select label="Country" placeholder="Choose country">
-  <SelectMenuItem value="eg">Egypt</SelectMenuItem>
-  <SelectMenuItem value="sa">Saudi Arabia</SelectMenuItem>
-</Select>
-```
-
-| Prop | Type / values | Default | Notes |
-| --- | --- | --- | --- |
-| `variant` | `default`, `soft` | `default` | Selects the trigger surface. |
-| `size` | `lg`, `md` | `lg` | Selects the trigger height. |
-| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
-| `itemType` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` | `default` | Selects menu-item media. |
-| `selectionType` | `default`, `checkbox` | `default` | Selects the menu-item selection indicator. |
-| `hasInformationIcon` | `boolean` | `false` | Shows an information icon beside the field label. |
-| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default user icon. |
-| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the leading slot; false always removes it. |
-| `hasTrailingIcon` | `boolean` | `false` | Set true to show the default information icon inside the trigger. |
-| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
-| `expandIcon` | `ReactNode \| false` | `chevron-down` | Replaces the expand icon, or removes it when false. |
-
-## Migration
-
-Select now renders only its expand chevron when optional trigger-icon props are omitted. Add `hasLeadingIcon` or `hasTrailingIcon` to retain the previous default user or information icon. A supplied icon enables its slot, while explicit `false` always removes it.
-
-## Token Contract
-
-Select consumes Banhaten field, trigger, menu, item, checkbox, status, avatar, payment, typography, spacing, border, radius, shadow, and focus tokens.
-
-## RTL
-
-Values, labels, helper text, and menu item text use `text-start` and `dir="auto"`. Trigger icons and selected checks use logical placement so they mirror in RTL.
-
-## Accessibility
-
-Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Use visible helper or error text for validation states.
-
-## Install
-
-```bash
-npx banhaten add select
-```
-
-## Examples
-
-Primary registry example: `examples/select-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs select` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `textAlignment`: Uses text-start and dir="auto" for values, labels, helper text, and menu item text.
-- `spacing`: Uses logical padding, start/end positioning, and inherited flex direction so trigger icons and selected checks mirror in RTL.
-
+# Select
+
+Select is a Radix Select-backed field and menu system. It supports default and soft trigger styles, md/lg sizing, error, filled and disabled states, menu surfaces, checkbox or check selection, and item media for text, icons, avatars, companies, payment methods, and status dots.
+
+## API
+
+```tsx
+<Select label="Country" placeholder="Choose country">
+  <SelectMenuItem value="eg">Egypt</SelectMenuItem>
+  <SelectMenuItem value="sa">Saudi Arabia</SelectMenuItem>
+</Select>
+```
+
+| Prop | Type / values | Default | Notes |
+| --- | --- | --- | --- |
+| `aria-label` | `string` | — | Gives a label-less trigger a stable purpose-based name. It is forwarded to the trigger, not the root. |
+| `aria-labelledby` | `string` | — | Names the trigger from external text. It is forwarded to the trigger, not the root. |
+| `variant` | `default`, `soft` | `default` | Selects the trigger surface. |
+| `size` | `lg`, `md` | `lg` | Selects the trigger height. |
+| `state` | `default`, `filled`, `error`, `disabled` | `default` | Selects the visual state. |
+| `itemType` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` | `default` | Selects menu-item media. |
+| `selectionType` | `default`, `checkbox` | `default` | Selects the menu-item selection indicator. |
+| `hasInformationIcon` | `boolean` | `false` | Shows an information icon beside the field label. |
+| `hasLeadingIcon` | `boolean` | `false` | Set true to show the default user icon. |
+| `leadingIcon` | `ReactNode \| false` | `null` | A node enables the leading slot; false always removes it. |
+| `hasTrailingIcon` | `boolean` | `false` | Set true to show the default information icon inside the trigger. |
+| `trailingIcon` | `ReactNode \| false` | `null` | A node enables the trailing slot; false always removes it. |
+| `expandIcon` | `ReactNode \| false` | `chevron-down` | Replaces the expand icon, or removes it when false. |
+| `triggerProps` | `React.ComponentProps<"button">` | — | Advanced trigger attributes, spread last so matching values override top-level trigger defaults. |
+
+## Migration
+
+Select now renders only its expand chevron when optional trigger-icon props are omitted. Add `hasLeadingIcon` or `hasTrailingIcon` to retain the previous default user or information icon. A supplied icon enables its slot, while explicit `false` always removes it.
+
+## Token Contract
+
+Select consumes Banhaten field, trigger, menu, item, checkbox, status, avatar, payment, typography, spacing, border, radius, shadow, and focus tokens.
+
+## RTL
+
+Values, labels, helper text, and menu item text use `text-start` and `dir="auto"`. Trigger icons and selected checks use logical placement so they mirror in RTL.
+
+## Accessibility
+
+Radix provides listbox semantics, focus management, typeahead, selection state, and keyboard behavior. Every Select needs a stable name that describes its purpose rather than its current value. Prefer a visible `label`; for a visually label-less control, pass `aria-label`, `aria-labelledby`, a text `label` with `hasLabel={false}`, or associate an external `<label>` through `triggerId`. Top-level ARIA naming props are forwarded to the trigger. `triggerProps` remains the advanced override path. Do not rely on `value` or `placeholder` as the control name. Use visible helper or error text for validation states.
+
+## Install
+
+```bash
+npx banhaten add select
+```
+
+## Examples
+
+Primary registry example: `examples/select-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs select` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `textAlignment`: Uses text-start and dir="auto" for values, labels, helper text, and menu item text.
+- `spacing`: Uses logical padding, start/end positioning, and inherited flex direction so trigger icons and selected checks mirror in RTL.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -70,6 +73,8 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `supportedExports` | `components/select-content.tsx: SelectIcon, SelectItemAvatar, SelectItemCompanyLogo, SelectItemPaymentIcon, SelectItemStatusDot, getDefaultSelectItemMedia`, `components/select.tsx: Select, SelectCheckboxIndicator, SelectHelperText, SelectItemAvatar, SelectItemCompanyLogo, SelectItemPaymentIcon, SelectItemStatusDot, SelectLabel, SelectMenu, SelectMenuItem, SelectRoot, SelectTrigger, selectMenu, selectMenuItem, selectRoot, selectTrigger` |
 | `parts` | `Select`, `SelectRoot`, `SelectLabel`, `SelectTrigger`, `SelectHelperText`, `SelectMenu`, `SelectMenuItem`, `SelectCheckboxIndicator`, `SelectItemAvatar`, `SelectItemCompanyLogo`, `SelectItemPaymentIcon`, `SelectItemStatusDot` |
 | `registryDependencies` | None |
+| `props.aria-label` | `string; default null; Provides a stable purpose-based accessible name for a label-less Select and is forwarded to its trigger.` |
+| `props.aria-labelledby` | `string; default null; Names a label-less Select trigger from external text without placing the relationship on the inert root.` |
 | `props.density` | `"compact" \| "default" \| "comfortable"; default "default"; Preferred cross-component sizing contract. Overrides the legacy size prop with 32px, 36px, or 40px control heights.` |
 | `props.hasInformationIcon` | `boolean; default false; Shows an information icon beside the field label.` |
 | `props.hasLeadingIcon` | `boolean; default false; Shows the default user leading icon when no leadingIcon is supplied.` |
@@ -77,11 +82,12 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `props.hasTrailingIcon` | `boolean; default false; Shows the default information trailing icon when no trailingIcon is supplied.` |
 | `props.trailingIcon` | `React.ReactNode \| false; default null; Supplies and enables a custom trailing icon; false always removes the trailing slot.` |
 | `props.expandIcon` | `React.ReactNode \| false; default "chevron-down"; Uses the default expand chevron when omitted, accepts a replacement node, and hides the slot when false.` |
+| `props.triggerProps` | `React.ComponentProps<"button">; default null; Forwards advanced trigger attributes and is spread last, so matching attributes override the top-level trigger defaults.` |
 | `densities` | `compact`, `default`, `comfortable` |
 | `itemTypes` | `default`, `icon`, `avatar`, `company`, `payment`, `dot` |
 | `selectionTypes` | `default`, `checkbox` |
 | `sizes` | `lg`, `md`, `comfortable` |
 | `states` | `default`, `filled`, `error`, `disabled` |
-| `tokens` | `--bh-bg-accent-blue-default`, `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-red-default`, `--bh-bg-always-white`, `--bh-bg-brand-default`, `--bh-bg-danger-default`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-info-default`, `--bh-bg-neutral-default`, `--bh-bg-success-default`, `--bh-bg-warning-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-purple-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-on-color`, `--bh-content-subtle`, `--bh-font-weight-semibold`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-interactive-checkbox-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-select-avatar-font-size`, `--bh-select-check-color`, `--bh-select-checkbox-border`, `--bh-select-checkbox-icon-size`, `--bh-select-checkbox-radius`, `--bh-select-checkbox-size`, `--bh-select-company-icon-size`, `--bh-select-content-gap`, `--bh-select-field-gap`, `--bh-select-icon-size`, `--bh-select-icon-slot-size`, `--bh-select-item-check-offset`, `--bh-select-item-content-padding`, `--bh-select-item-gap`, `--bh-select-item-hover-bg`, `--bh-select-item-min-height`, `--bh-select-item-padding-x`, `--bh-select-item-radius`, `--bh-select-item-selected-padding-end`, `--bh-select-item-value-padding-x`, `--bh-select-label-gap`, `--bh-select-media-inset`, `--bh-select-menu-bg`, `--bh-select-menu-list-gap`, `--bh-select-menu-offset`, `--bh-select-menu-padding-y`, `--bh-select-menu-radius`, `--bh-select-menu-width`, `--bh-select-payment-height`, `--bh-select-payment-mark-offset`, `--bh-select-payment-mark-size`, `--bh-select-payment-radius`, `--bh-select-payment-width`, `--bh-select-status-dot-size`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-gap`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-padding-y-comfortable`, `--bh-select-trigger-padding-y-lg`, `--bh-select-trigger-padding-y-md`, `--bh-select-trigger-radius`, `--bh-select-value-padding-inline`, `--bh-select-width`, `--bh-space-md-8`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-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-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-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-component-default`, `--shadow-select-checkbox`, `--shadow-select-danger-focus-ring`, `--shadow-select-focus-ring`, `--shadow-select-menu`, `--shadow-select-trigger` |
+| `tokens` | `--bh-bg-accent-blue-default`, `--bh-bg-accent-blue-soft`, `--bh-bg-accent-purple-soft`, `--bh-bg-accent-red-default`, `--bh-bg-always-white`, `--bh-bg-brand-default`, `--bh-bg-danger-default`, `--bh-bg-default`, `--bh-bg-disabled`, `--bh-bg-info-default`, `--bh-bg-neutral-default`, `--bh-bg-success-default`, `--bh-bg-warning-default`, `--bh-border-disabled`, `--bh-border-input`, `--bh-border-subtle`, `--bh-border-width-default`, `--bh-content-accent-blue-strong`, `--bh-content-accent-purple-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-disabled`, `--bh-content-muted`, `--bh-content-subtle`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-stroke-200`, `--bh-icon-stroke-220`, `--bh-interactive-checkbox-content`, `--bh-interactive-checkbox-default`, `--bh-opacity-60`, `--bh-radius-full`, `--bh-select-avatar-font-size`, `--bh-select-check-color`, `--bh-select-checkbox-border`, `--bh-select-checkbox-icon-size`, `--bh-select-checkbox-radius`, `--bh-select-checkbox-size`, `--bh-select-company-icon-size`, `--bh-select-content-gap`, `--bh-select-field-gap`, `--bh-select-icon-size`, `--bh-select-icon-slot-size`, `--bh-select-item-check-offset`, `--bh-select-item-content-padding`, `--bh-select-item-gap`, `--bh-select-item-hover-bg`, `--bh-select-item-min-height`, `--bh-select-item-padding-x`, `--bh-select-item-radius`, `--bh-select-item-selected-padding-end`, `--bh-select-item-value-padding-x`, `--bh-select-label-gap`, `--bh-select-media-inset`, `--bh-select-menu-bg`, `--bh-select-menu-list-gap`, `--bh-select-menu-offset`, `--bh-select-menu-padding-y`, `--bh-select-menu-radius`, `--bh-select-menu-width`, `--bh-select-payment-height`, `--bh-select-payment-mark-offset`, `--bh-select-payment-mark-size`, `--bh-select-payment-radius`, `--bh-select-payment-width`, `--bh-select-status-dot-size`, `--bh-select-trigger-bg`, `--bh-select-trigger-bg-disabled`, `--bh-select-trigger-bg-soft`, `--bh-select-trigger-border`, `--bh-select-trigger-border-current`, `--bh-select-trigger-border-disabled`, `--bh-select-trigger-border-error`, `--bh-select-trigger-border-focus`, `--bh-select-trigger-gap`, `--bh-select-trigger-icon-color`, `--bh-select-trigger-padding-x`, `--bh-select-trigger-padding-y-comfortable`, `--bh-select-trigger-padding-y-lg`, `--bh-select-trigger-padding-y-md`, `--bh-select-trigger-radius`, `--bh-select-value-padding-inline`, `--bh-select-width`, `--bh-space-md-8`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-font-weight`, `--bh-text-body-2xs-regular-letter-spacing`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-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-xs-medium-font-size`, `--bh-text-body-xs-medium-font-weight`, `--bh-text-body-xs-medium-letter-spacing`, `--bh-text-body-xs-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-component-default`, `--elevation-select-checkbox`, `--elevation-select-danger-focus-ring`, `--elevation-select-focus-ring`, `--elevation-select-menu`, `--elevation-select-trigger` |
 | `variants` | `default`, `soft` |
 <!-- registry-contract:end -->