banhaten 0.3.0 → 0.5.0

package/docs/design-system/components/thinking-state.md

@@ -0,0 +1,67 @@
+# Thinking State
+
+`ThinkingState` is the smallest AI status surface: a shimmering label that tells the user the agent is working before its first token arrives. The shimmer comes from [Shimmer Text](./shimmer-text.md), so labels, active task rows, and enhancing prompts all move the same way.
+
+Use Thinking State for the pre-response beat in a conversation. Use Thinking Reasoning when the agent exposes intermediate reasoning, and Spinner for ordinary non-AI loading.
+
+## API
+
+```tsx
+import { ThinkingState } from "@/components/ui/thinking-state"
+
+<ThinkingState />
+<ThinkingState status="done">Thought</ThinkingState>
+<ThinkingState>جارٍ التفكير</ThinkingState>
+```
+
+`ThinkingState` renders a polite live region with `role="status"`. Its `status` prop matches Thinking Reasoning's, so one flag drives both.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `status` | `"thinking" \| "done"` | `"thinking"` | Thinking runs the brightness sweep; done leaves the label as static text. |
+| `tone` | `"subtle" \| "default"` | `"subtle"` | Secondary or primary text color pair for the sweep. |
+| `children` | `React.ReactNode` | `"Thinking"` | Localized label text. |
+
+## Install
+
+```bash
+npx banhaten add thinking-state
+```
+
+## Examples
+
+Primary registry example: `examples/thinking-state-demo.tsx`.
+
+## Token Contract
+
+Typography uses the `body-xs-medium` scale in `--bh-content-subtle`. The shimmer colors and sweep come from the `shimmer-text` registry dependency.
+
+Covered source files: `components/thinking-state.tsx`, `components/thinking-state.css`, and the `shimmer-text` registry dependency.
+
+## RTL Rules
+
+- The label inherits document direction.
+- The shine sweeps from the reading start to the reading end, so RTL text uses mirrored keyframes automatically.
+
+## Accessibility
+
+`ThinkingState` announces once through `aria-live="polite"`. The shimmer is purely decorative: under `prefers-reduced-motion` it renders as static text in the base color with no gradient.
+
+<!-- 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/thinking-state.tsx: ThinkingState` |
+| `parts` | `ThinkingState` |
+| `registryDependencies` | `shimmer-text` |
+| `props.status` | `"thinking" \| "done"; default "thinking"; Thinking runs the brightness sweep; done leaves the label as static text.` |
+| `props.tone` | `"subtle" \| "default"; default "subtle"; Secondary or primary text color pair for the sweep.` |
+| `props.children` | `React.ReactNode; default "\"Thinking\""; Localized label text.` |
+| `states` | `thinking`, `done` |
+| `tokens` | `--bh-content-subtle`, `--bh-font-family`, `--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` |
+| `tones` | `subtle`, `default` |
+<!-- registry-contract:end -->

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

@@ -1,85 +1,85 @@
-# Timeline
-
-Timelines show ordered progress or dated events. Use `Timeline` for a complete sequence and `TimelineItem` when a consumer needs to compose a custom layout.
-
-Figma references:
-
-- `TimelineVetical`, node `572:6768`
-- `TimeLineHorizontal`, node `584:4501`
-- `TimelineVerticalItem`, node `572:6444`
-- `TimelineHorizontalItem`, node `582:4214`
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `orientation` | `vertical`, `horizontal` |
-| `variant` | `default`, `icon` |
-| `state` | `finished`, `active`, `inactive` |
-| `dir` | `ltr`, `rtl` |
-
-The Figma source includes vertical timelines with seven steps and horizontal timelines with six steps. Code accepts any `steps` array.
-
-## API
-
-```tsx
-<Timeline
-  orientation="vertical"
-  variant="default"
-  dir="ltr"
-  steps={[
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "finished" },
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "active" },
-    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "inactive" },
-  ]}
-/>
-```
-
-`TimelineStep` supports `label`, `caption`, `date`, `topDate`, `bottomDate`, `state`, `icon`, and visibility flags for leading/top/bottom dates, caption, connector line, and bottom padding.
-
-## Token Contract
-
-- `--bg-brand-default`: filled icon marker
-- `--bg-default`: default marker center
-- `--bg-muted`: inactive icon marker
-- `--border-brand-strong`: finished connector line
-- `--border-default`: active and inactive connector line
-- `--content-default`: labels and inactive check
-- `--content-subtle`: dates and captions
-- `--radius-full`: marker and line radius
-
-## Pixel Rules
-
-- Dates are `12px / 16px`, regular.
-- Labels are `15px / 24px`, semibold.
-- Captions are `14px / 20px`, regular.
-- Default markers reserve a `20px` box with a small circular ring.
-- Icon markers are `28px` circles with an 18px check glyph.
-- Vertical item gaps use `12px`; horizontal item body spacing uses `10px`.
-- Finished connector lines use the brand border color.
-- Active and inactive connector lines use the default border color.
-- RTL mirrors the date/content placement while preserving source step order.
-
-## Install
-
-```bash
-npx banhaten add timeline
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/timeline-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs timeline` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
-## Accessibility
-
-Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
-
+# Timeline
+
+Timelines show ordered progress or dated events. Use `Timeline` for a complete sequence and `TimelineItem` when a consumer needs to compose a custom layout.
+
+Figma references:
+
+- `TimelineVetical`, node `572:6768`
+- `TimeLineHorizontal`, node `584:4501`
+- `TimelineVerticalItem`, node `572:6444`
+- `TimelineHorizontalItem`, node `582:4214`
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `orientation` | `vertical`, `horizontal` |
+| `variant` | `default`, `icon` |
+| `state` | `finished`, `active`, `inactive` |
+| `dir` | `ltr`, `rtl` |
+
+The Figma source includes vertical timelines with seven steps and horizontal timelines with six steps. Code accepts any `steps` array.
+
+## API
+
+```tsx
+<Timeline
+  orientation="vertical"
+  variant="default"
+  dir="ltr"
+  steps={[
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "finished" },
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "active" },
+    { label: "Label", caption: "Caption", date: "Mar 15. 2050", state: "inactive" },
+  ]}
+/>
+```
+
+`TimelineStep` supports `label`, `caption`, `date`, `topDate`, `bottomDate`, `state`, `icon`, and visibility flags for leading/top/bottom dates, caption, connector line, and bottom padding.
+
+## Token Contract
+
+- `--bg-brand-default`: filled icon marker
+- `--bg-default`: default marker center
+- `--bg-muted`: inactive icon marker
+- `--border-brand-strong`: finished connector line
+- `--border-default`: active and inactive connector line
+- `--content-default`: labels and inactive check
+- `--content-subtle`: dates and captions
+- `--radius-full`: marker and line radius
+
+## Pixel Rules
+
+- Dates are `12px / 16px`, regular.
+- Labels are `15px / 24px`, semibold.
+- Captions are `14px / 20px`, regular.
+- Default markers reserve a `20px` box with a small circular ring.
+- Icon markers are `28px` circles with an 18px check glyph.
+- Vertical item gaps use `12px`; horizontal item body spacing uses `10px`.
+- Finished connector lines use the brand border color.
+- Active and inactive connector lines use the default border color.
+- RTL mirrors the date/content placement while preserving source step order.
+
+## Install
+
+```bash
+npx banhaten add timeline
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/timeline-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs timeline` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
+## Accessibility
+
+Keep native semantics, accessible names, keyboard reachability, focus-visible treatment, and status/error announcements intact when composing this component.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -93,6 +93,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `orientations` | `vertical`, `horizontal` |
 | `states` | `finished`, `active`, `inactive` |
-| `tokens` | `--bh-bg-brand-default`, `--bh-bg-default`, `--bh-bg-muted`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-stroke-300`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-timeline-grid-width`, `--bh-timeline-narrow-width`, `--bh-timeline-sidebar-width`, `--shadow-component-focus-ring` |
+| `tokens` | `--bh-bg-brand-default`, `--bh-bg-default`, `--bh-bg-muted`, `--bh-border-brand-strong`, `--bh-border-default`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-stroke-300`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-5xl-24`, `--bh-space-9xl-64`, `--bh-space-lg-10`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-base-letter-spacing`, `--bh-text-body-2xs-regular-font-size`, `--bh-text-body-2xs-regular-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height`, `--bh-text-body-sm-regular-font-size`, `--bh-text-body-sm-regular-line-height`, `--bh-timeline-grid-width`, `--bh-timeline-narrow-width`, `--bh-timeline-sidebar-width`, `--elevation-component-focus-ring` |
 | `variants` | `default`, `icon` |
 <!-- registry-contract:end -->

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

@@ -1,60 +1,60 @@
-# Toast
-
-Toast provides transient feedback for saves, errors, warnings, background work, and undoable actions. It uses a Sonner-style API with Banhaten token styling, semantic intents, action support, and logical LTR/RTL placement.
-
-## API
-
-```tsx
-<Toaster />
-
-toast.success("Project saved")
-toast.danger("Unable to publish", {
-  action: { label: "Retry", onClick: retry },
-})
-```
-
-| Export | Purpose |
-| --- | --- |
-| `Toaster` | app-level toast viewport |
-| `toast` | imperative toast API |
-| `toast.success`, `toast.info`, `toast.warning`, `toast.danger` | semantic shortcuts |
-
-| Prop | Values |
-| --- | --- |
-| `dir` | `ltr`, `rtl` |
-| `side` | `start`, `end` |
-| `position` | Sonner position override |
-
-## Token Contract
-
-Toast uses Banhaten raised surface, border, shadow, radius, body typography, action, danger, warning, success, info, and content tokens.
-
-## RTL
-
-`side="end"` resolves to top-right in LTR and top-left in RTL. Use `side="start"` for the opposite logical edge.
-
-## Accessibility
-
-Keep toast copy short and pair destructive failures with a visible retry or recovery path when possible. Do not use toasts as the only place for critical validation errors.
-
-## Install
-
-```bash
-npx banhaten add toast
-```
-
-## Examples
-
-Primary registry example: `examples/toast-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs toast` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `placement`: side="end" resolves to top-right in LTR and top-left in RTL; side="start" resolves to the opposite edge.
-- `textDirection`: Toast content inherits the Toaster direction and uses tokenized typography classes.
-
+# Toast
+
+Toast provides transient feedback for saves, errors, warnings, background work, and undoable actions. It uses a Sonner-style API with Banhaten token styling, semantic intents, action support, and logical LTR/RTL placement.
+
+## API
+
+```tsx
+<Toaster />
+
+toast.success("Project saved")
+toast.danger("Unable to publish", {
+  action: { label: "Retry", onClick: retry },
+})
+```
+
+| Export | Purpose |
+| --- | --- |
+| `Toaster` | app-level toast viewport |
+| `toast` | imperative toast API |
+| `toast.success`, `toast.info`, `toast.warning`, `toast.danger` | semantic shortcuts |
+
+| Prop | Values |
+| --- | --- |
+| `dir` | `ltr`, `rtl` |
+| `side` | `start`, `end` |
+| `position` | Sonner position override |
+
+## Token Contract
+
+Toast uses Banhaten raised surface, border, shadow, radius, body typography, action, danger, warning, success, info, and content tokens.
+
+## RTL
+
+`side="end"` resolves to top-right in LTR and top-left in RTL. Use `side="start"` for the opposite logical edge.
+
+## Accessibility
+
+Keep toast copy short and pair destructive failures with a visible retry or recovery path when possible. Do not use toasts as the only place for critical validation errors.
+
+## Install
+
+```bash
+npx banhaten add toast
+```
+
+## Examples
+
+Primary registry example: `examples/toast-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs toast` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `placement`: side="end" resolves to top-right in LTR and top-left in RTL; side="start" resolves to the opposite edge.
+- `textDirection`: Toast content inherits the Toaster direction and uses tokenized typography classes.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -69,5 +69,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `semantic shortcuts`, `action slot`, `close button`, `logical placement`, `toast promise support` |
 | `intents` | `default`, `success`, `danger`, `warning`, `info` |
 | `sides` | `start`, `end` |
-| `tokens` | `--bh-bg-brand-subtle`, `--bh-bg-danger-subtle`, `--bh-bg-info-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-raised`, `--bh-bg-success-subtle`, `--bh-bg-warning-subtle`, `--bh-border-danger-subtle`, `--bh-border-info-subtle`, `--bh-border-subtle`, `--bh-border-success-subtle`, `--bh-border-warning-subtle`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-content-warning-default`, `--bh-control-default`, `--bh-font-family`, `--bh-interactive-brand-default`, `--bh-radius-xl-10`, `--bh-space-lg-10`, `--bh-space-xs-4`, `--bh-text-body-sm-semibold-font-size`, `--bh-text-body-sm-semibold-font-weight`, `--bh-text-body-sm-semibold-letter-spacing`, `--bh-text-body-sm-semibold-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-toast-accent`, `--bh-toast-accent-bg`, `--shadow-component-default` |
+| `tokens` | `--bh-bg-brand-subtle`, `--bh-bg-danger-subtle`, `--bh-bg-info-subtle`, `--bh-bg-neutral-soft`, `--bh-bg-raised`, `--bh-bg-success-subtle`, `--bh-bg-warning-subtle`, `--bh-border-danger-subtle`, `--bh-border-info-subtle`, `--bh-border-subtle`, `--bh-border-success-subtle`, `--bh-border-warning-subtle`, `--bh-content-brand-default`, `--bh-content-danger-default`, `--bh-content-default`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-content-success-default`, `--bh-content-warning-default`, `--bh-control-default`, `--bh-font-family`, `--bh-interactive-brand-default`, `--bh-radius-xl-10`, `--bh-space-lg-10`, `--bh-space-xs-4`, `--bh-text-body-sm-semibold-font-size`, `--bh-text-body-sm-semibold-font-weight`, `--bh-text-body-sm-semibold-letter-spacing`, `--bh-text-body-sm-semibold-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-toast-accent`, `--bh-toast-accent-bg`, `--elevation-component-default` |
 <!-- registry-contract:end -->

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

@@ -1,83 +1,83 @@
-# Toggle
-
-Toggle is a Radix Switch-backed boolean control. It supports sm and md switch geometry, active and disabled states, optional handle icons, labeled leading or trailing compositions, supporting text, and inherited RTL direction.
-
-The implementation follows the Figma components at `Design system 3.0 Copy / Toogle` (`175:23379`) and `Toggle label` (`175:23443`).
-
-## API
-
-Use `Toggle` for standalone controls with an accessible label.
-
-```tsx
-<Toggle aria-label="Enable notifications" defaultChecked />
-```
-
-Use `ToggleField` when the visible label and supporting text should name the switch.
-
-```tsx
-<ToggleField
-  defaultChecked
-  controlPosition="end"
-  label="Email notifications"
-  description="Send product updates and billing activity."
-/>
-```
-
-## Variants
-
-| Prop | Values |
-| --- | --- |
-| `size` | `sm`, `md` |
-| `showIcon` | `boolean` |
-| `ToggleField controlPosition` | `start`, `end` |
-| `disabled` | `boolean` |
-
-## Tokens
-
-Toggle uses the existing Banhaten switch aliases:
-
-| Purpose | Token |
-| --- | --- |
-| Default track | `--bh-interactive-switch-default` |
-| Hover track | `--bh-interactive-switch-hover` |
-| Active track | `--bh-interactive-switch-active` |
-| Active hover track | `--bh-interactive-switch-active-hover` |
-| Disabled track | `--bh-interactive-switch-disabled` |
-| Handle | `--bh-interactive-switch-handle` |
-| Disabled handle | `--bh-interactive-switch-handle-disabled` |
-| Focus ring | `--shadow-social-button-focus-ring` |
-
-Text uses body-md for labels and body-xs for supporting text. ToggleField uses logical start/end placement so label order and thumb motion mirror in RTL.
-
-## Install
-
-```bash
-npx banhaten add toggle
-```
-
-## Examples
-
-Primary registry example: `examples/toggle-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs toggle` 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/toggle.tsx`.
-
-## RTL Rules
-
-- `inheritsDirection`: true
-- `controlPlacement`: ToggleField uses start/end control placement so the switch and text order mirror in RTL.
-- `handleMotion`: The thumb translates with logical direction, so checked state moves to the visual end edge in LTR and RTL.
-- `textDirection`: Labels and descriptions use dir="auto" with tokenized body-md/body-xs typography.
-
-## Accessibility
-
-This component relies on `@radix-ui/react-switch` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
-
+# Toggle
+
+Toggle is a Radix Switch-backed boolean control. It supports sm and md switch geometry, active and disabled states, optional handle icons, labeled leading or trailing compositions, supporting text, and inherited RTL direction.
+
+The implementation follows the Figma components at `Design system 3.0 Copy / Toogle` (`175:23379`) and `Toggle label` (`175:23443`).
+
+## API
+
+Use `Toggle` for standalone controls with an accessible label.
+
+```tsx
+<Toggle aria-label="Enable notifications" defaultChecked />
+```
+
+Use `ToggleField` when the visible label and supporting text should name the switch.
+
+```tsx
+<ToggleField
+  defaultChecked
+  controlPosition="end"
+  label="Email notifications"
+  description="Send product updates and billing activity."
+/>
+```
+
+## Variants
+
+| Prop | Values |
+| --- | --- |
+| `size` | `sm`, `md` |
+| `showIcon` | `boolean` |
+| `ToggleField controlPosition` | `start`, `end` |
+| `disabled` | `boolean` |
+
+## Tokens
+
+Toggle uses the existing Banhaten switch aliases:
+
+| Purpose | Token |
+| --- | --- |
+| Default track | `--bh-interactive-switch-default` |
+| Hover track | `--bh-interactive-switch-hover` |
+| Active track | `--bh-interactive-switch-active` |
+| Active hover track | `--bh-interactive-switch-active-hover` |
+| Disabled track | `--bh-interactive-switch-disabled` |
+| Handle | `--bh-interactive-switch-handle` |
+| Disabled handle | `--bh-interactive-switch-handle-disabled` |
+| Focus ring | `--elevation-social-button-focus-ring` |
+
+Text uses body-md for labels and body-xs for supporting text. ToggleField uses logical start/end placement so label order and thumb motion mirror in RTL.
+
+## Install
+
+```bash
+npx banhaten add toggle
+```
+
+## Examples
+
+Primary registry example: `examples/toggle-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs toggle` 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/toggle.tsx`.
+
+## RTL Rules
+
+- `inheritsDirection`: true
+- `controlPlacement`: ToggleField uses start/end control placement so the switch and text order mirror in RTL.
+- `handleMotion`: The thumb translates with logical direction, so checked state moves to the visual end edge in LTR and RTL.
+- `textDirection`: Labels and descriptions use dir="auto" with tokenized body-md/body-xs typography.
+
+## Accessibility
+
+This component relies on `@radix-ui/react-switch` for its base accessibility behavior. Keep required labels, titles, descriptions, and focusable trigger/content relationships intact when composing it.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -92,5 +92,5 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `features` | `optional handle icons`, `leading label`, `trailing label`, `supporting text` |
 | `sizes` | `sm`, `md` |
 | `states` | `unchecked`, `checked`, `hover`, `focused`, `disabled` |
-| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-light`, `--bh-content-subtle`, `--bh-icon-stroke-250`, `--bh-interactive-switch-active`, `--bh-interactive-switch-active-disabled`, `--bh-interactive-switch-active-hover`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-interactive-switch-hover`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-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-toggle-handle-size`, `--bh-toggle-icon-size-md`, `--bh-toggle-icon-size-sm`, `--bh-toggle-offset`, `--shadow-md`, `--shadow-social-button-focus-ring` |
+| `tokens` | `--bh-content-default`, `--bh-content-disabled`, `--bh-content-on-light`, `--bh-content-subtle`, `--bh-icon-stroke-250`, `--bh-interactive-switch-active`, `--bh-interactive-switch-active-disabled`, `--bh-interactive-switch-active-hover`, `--bh-interactive-switch-default`, `--bh-interactive-switch-disabled`, `--bh-interactive-switch-handle`, `--bh-interactive-switch-handle-disabled`, `--bh-interactive-switch-hover`, `--bh-menu-switch-handle-size`, `--bh-menu-switch-height`, `--bh-menu-switch-padding`, `--bh-menu-switch-width`, `--bh-radius-full`, `--bh-space-3xl-16`, `--bh-space-5xl-24`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-sm-6`, `--bh-space-xl-12`, `--bh-space-xxs-2`, `--bh-text-body-md-medium-font-weight`, `--bh-text-body-md-regular-font-size`, `--bh-text-body-md-regular-font-weight`, `--bh-text-body-md-regular-letter-spacing`, `--bh-text-body-md-regular-line-height`, `--bh-text-body-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-toggle-handle-size`, `--bh-toggle-icon-size-md`, `--bh-toggle-icon-size-sm`, `--bh-toggle-offset`, `--elevation-03`, `--elevation-social-button-focus-ring` |
 <!-- registry-contract:end -->