banhaten 0.3.0 → 0.5.0

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

@@ -1,89 +1,89 @@
-# Banner
-
-`Banner` presents short product announcements, notices, or lightweight calls to action.
-
-Figma reference: `Design system 3.0 Copy / Banner`, node `237:39513`.
-
-## Variants
-
-The implementation covers the Banner matrix from Figma:
-
-| Prop | Values |
-| --- | --- |
-| `type` | `slim`, `single-action-inline`, `single-action`, `input` |
-| `size` | `floating`, `full-width` |
-| `content` | `title`, `title-description` |
-| `color` | `brand`, `grey`, `brand-light` |
-| `dir` | `ltr`, `rtl` |
-
-## API
-
-```tsx
-<Banner
-  type="single-action"
-  size="floating"
-  content="title"
-  color="brand"
-  dir="ltr"
-/>
-```
-
-| Prop | Default |
-| --- | --- |
-| `title` | localized demo title |
-| `description` | localized demo description |
-| `linkLabel` | `Link button` |
-| `actionLabel` | `Button` |
-| `inputPlaceholder` | `Placeholder` |
-| `showIcon` | `true` |
-| `showInlineAction` | `true` |
-| `onAction` | none |
-| `onClose` | none |
-
-## Pixel Rules
-
-- Root padding is `12px 16px`.
-- Slim title rows are `48px`; slim title-description rows are `52px`.
-- Single-action, inline-action, and input rows are `60px`.
-- Floating rows use `10px` radius; full-width rows have square edges.
-- Leading icon is `20px`; close icon is `16px`.
-- Action controls and text inputs are `36px` tall with `8px` radius.
-- LTR body text uses `15px / 24px`. RTL title-only body text uses `12px / 16px`.
-- Title-description content uses a semibold title, a `17px / 28px` separator dot, and regular description text.
-
-## Token Contract
-
-The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
-
-- Backgrounds: `--bh-bg-brand-default`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-bg-always-white`
-- Content: `--bh-content-default`, `--bh-content-inverse`, `--bh-content-link`, `--bh-content-muted`, `--bh-content-subtle`
-- Borders: `--bh-border-subtle`, `--bh-border-input`
-- Shape: `--bh-control-default`, `--bh-radius-lg-8`, `--bh-radius-xl-10`
-- Space: `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`, `--bh-space-3xl-16`
-
-## Accessibility
-
-- The banner root exposes an `aria-label`.
-- Link, action, and close affordances are real buttons.
-- The input variant uses a real text input with an `aria-label`.
-- RTL is controlled through `dir="rtl"` so icon, text, action, input, and close placement mirror logically.
-
-## Install
-
-```bash
-npx banhaten add banner
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/banner-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs banner` to inspect source files, install command, and examples.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Banner
+
+`Banner` presents short product announcements, notices, or lightweight calls to action.
+
+Figma reference: `Design system 3.0 Copy / Banner`, node `237:39513`.
+
+## Variants
+
+The implementation covers the Banner matrix from Figma:
+
+| Prop | Values |
+| --- | --- |
+| `type` | `slim`, `single-action-inline`, `single-action`, `input` |
+| `size` | `floating`, `full-width` |
+| `content` | `title`, `title-description` |
+| `color` | `brand`, `grey`, `brand-light` |
+| `dir` | `ltr`, `rtl` |
+
+## API
+
+```tsx
+<Banner
+  type="single-action"
+  size="floating"
+  content="title"
+  color="brand"
+  dir="ltr"
+/>
+```
+
+| Prop | Default |
+| --- | --- |
+| `title` | localized demo title |
+| `description` | localized demo description |
+| `linkLabel` | `Link button` |
+| `actionLabel` | `Button` |
+| `inputPlaceholder` | `Placeholder` |
+| `showIcon` | `true` |
+| `showInlineAction` | `true` |
+| `onAction` | none |
+| `onClose` | none |
+
+## Pixel Rules
+
+- Root padding is `12px 16px`.
+- Slim title rows are `48px`; slim title-description rows are `52px`.
+- Single-action, inline-action, and input rows are `60px`.
+- Floating rows use `10px` radius; full-width rows have square edges.
+- The leading glyph is `18px` in a `20px` slot; the close glyph remains `16px`.
+- Action controls and text inputs are `36px` tall with `8px` radius.
+- LTR body text uses `15px / 24px`. RTL title-only body text uses `12px / 16px`.
+- Title-description content uses a semibold title, a `17px / 28px` separator dot, and regular description text.
+
+## Token Contract
+
+The component consumes Banhaten semantic tokens and component aliases. Do not hard-code Figma fallback literals in component source; promote any Figma value into its owned `tokens/source/` fragment as a `--bh-*` token or alias first.
+
+- Backgrounds: `--bh-bg-brand-default`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-bg-always-white`
+- Content: `--bh-content-default`, `--bh-content-inverse`, `--bh-content-link`, `--bh-content-muted`, `--bh-content-subtle`
+- Borders: `--bh-border-subtle`, `--bh-border-input`
+- Shape: `--bh-control-default`, `--bh-radius-lg-8`, `--bh-radius-xl-10`
+- Space: `--bh-space-xs-4`, `--bh-space-md-8`, `--bh-space-lg-10`, `--bh-space-xl-12`, `--bh-space-3xl-16`
+
+## Accessibility
+
+- The banner root exposes an `aria-label`.
+- Link, action, and close affordances are real buttons.
+- The input variant uses a real text input with an `aria-label`.
+- RTL is controlled through `dir="rtl"` so icon, text, action, input, and close placement mirror logically.
+
+## Install
+
+```bash
+npx banhaten add banner
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/banner-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs banner` to inspect source files, install command, and examples.
+
+## RTL Rules
+
+This component has no special RTL contract beyond inherited document direction and logical spacing.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -98,6 +98,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `modes` | `slim`, `single-action-inline`, `single-action`, `input` |
 | `sizes` | `floating`, `full-width` |
 | `states` | `title`, `title-description` |
-| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-stroke-210`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-radius-xl-10`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-lg-medium-font-size`, `--bh-text-body-lg-medium-font-weight`, `--bh-text-body-lg-medium-line-height`, `--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`, `--shadow-md` |
+| `tokens` | `--bh-bg-brand-bold`, `--bh-bg-brand-soft`, `--bh-bg-muted`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-link`, `--bh-content-on-brand`, `--bh-content-subtle`, `--bh-font-family`, `--bh-font-weight-regular`, `--bh-font-weight-semibold`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-210`, `--bh-icon-stroke-225`, `--bh-input-width`, `--bh-radius-xl-10`, `--bh-space-17xl-288`, `--bh-space-19xl-384`, `--bh-space-3xl-16`, `--bh-space-8xl-48`, `--bh-space-lg-10`, `--bh-space-md-8`, `--bh-space-xl-12`, `--bh-space-xs-4`, `--bh-space-xxs-2`, `--bh-space-xxxs-1`, `--bh-text-body-2xs-medium-font-size`, `--bh-text-body-2xs-medium-font-weight`, `--bh-text-body-2xs-medium-line-height`, `--bh-text-body-lg-medium-font-size`, `--bh-text-body-lg-medium-font-weight`, `--bh-text-body-lg-medium-line-height`, `--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`, `--elevation-05` |
 | `variants` | `brand`, `grey`, `brand-light` |
 <!-- registry-contract:end -->

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

@@ -1,178 +1,179 @@
-# Breadcrumbs
-
-Breadcrumbs show a user's location in a hierarchy and provide a quick path back to parent pages. Use `Breadcrumbs` for page-level navigation, not for step progress, tabs, or filters.
-
-Figma reference: `Breadcrumbs`, node `238:7987`.
-
-## Variants
-
-The Figma component defines these variants:
-
-| Type | Style | Separator type | Direction |
-| --- | --- | --- | --- |
-| `Default` | `Default` | `Slash` | LTR and RTL |
-| `Default` | `Default` | `Chevron` | LTR and RTL |
-| `Default` | `Raised` | `Slash` | LTR and RTL |
-| `Default` | `Raised` | `Chevron` | LTR and RTL |
-| `Only Icon` | `Default` | `Slash` | LTR and RTL |
-| `Only Icon` | `Default` | `Chevron` | LTR and RTL |
-| `Only Icon` | `Raised` | `Slash` | LTR and RTL |
-| `Only Icon` | `Raised` | `Chevron` | LTR and RTL |
-
-The Figma source supports up to six visible breadcrumb items. Code should model this as an `items` collection instead of positional booleans such as `showBreadcrumb01`.
-
-## API
-
-Use semantic names in code even if the Figma variant labels are title-cased.
-
-```ts
-type BreadcrumbSeparator = "slash" | "chevron";
-type BreadcrumbStyle = "default" | "raised";
-
-type BreadcrumbItem = {
-  label: string;
-  href?: string;
-  icon?: React.ReactNode;
-  current?: boolean;
-};
-
-type BreadcrumbsProps = {
-  items: BreadcrumbItem[];
-  separator?: BreadcrumbSeparator;
-  style?: BreadcrumbStyle;
-  iconOnly?: boolean;
-  dir?: "ltr" | "rtl" | "auto";
-  maxItems?: number;
-  "aria-label"?: string;
-};
-```
-
-`items` should be ordered from root to current page in logical reading order. RTL rendering should mirror the visual order through layout direction, not by reversing the source data.
-
-## Layout
-
-- The root is a horizontal flex row with centered alignment.
-- The default style has no container background and uses a compact inline gap.
-- The raised style adds a surface fill, a 1px border, 12px padding, and an 8px radius in the Figma source.
-- Text items use `Body/body-md (base)/medium` with a 15px size and 24px line height.
-- Item icons are 20px square.
-- Slash and chevron separators are 16px square and should be decorative.
-- LTR chevrons point right; RTL chevrons point left.
-- The icon-only type keeps the same item and separator rhythm but hides visible labels.
-- Do not allow wrapping inside individual breadcrumb labels unless the component has a deliberate collapsed or overflow mode.
-
-## Tokens
-
-Breadcrumbs should consume existing semantic tokens:
-
-```ts
-export const breadcrumbsTokens = {
-  itemColor: "content.subtle",
-  currentItemColor: "content.default",
-  iconColor: "content.subtle",
-  separatorColor: "content.subtle",
-  raisedBackground: "background.card",
-  raisedBorder: "border.subtle",
-  raisedRadius: "shape.control",
-  inlineGap: "space.xs-4",
-  raisedGap: "space.md-8",
-  raisedPadding: "space.xl-12",
-};
-```
-
-Do not hard-code Figma fallback values in component code. The current Figma fallbacks include `content/subtle` as `#4e596e`, `bg/raised` as white, `border/subtle` as `rgba(55, 83, 122, 0.13)`, and `radius/lg-8` as 8px. Implementations should resolve those through semantic tokens.
-
-If the design system later adds a dedicated `background.raised` token, the raised style can map to it. Until then, use the closest raised surface token such as `background.card`.
-
-## Accessibility
-
-- Render the component as navigation, usually `<nav aria-label="Breadcrumb">`.
-- Use an ordered list so the hierarchy is exposed to assistive technology.
-- Render linked ancestors as anchors.
-- Mark the current page with `aria-current="page"` and do not require it to be a link.
-- Hide separators from assistive technology with `aria-hidden="true"`.
-- Icon-only breadcrumbs must provide an accessible label for every item, even when visible text is hidden.
-- Preserve logical item order for screen readers in RTL contexts.
-- Provide keyboard focus treatment through the link or action primitive, not on decorative separators.
-
-## Usage
-
-```tsx
-<Breadcrumbs
-  items={[
-    { label: "Home", href: "/", icon: <HomeIcon /> },
-    { label: "Products", href: "/products" },
-    { label: "Analytics", current: true },
-  ]}
-/>
-
-<Breadcrumbs
-  separator="chevron"
-  style="raised"
-  items={[
-    { label: "Home", href: "/", icon: <HomeIcon /> },
-    { label: "Reports", href: "/reports" },
-    { label: "Monthly", current: true },
-  ]}
-/>
-
-<Breadcrumbs
-  iconOnly
-  aria-label="Breadcrumb"
-  items={[
-    { label: "Home", href: "/", icon: <HomeIcon /> },
-    { label: "Settings", href: "/settings", icon: <SettingsIcon /> },
-    { label: "Profile", current: true, icon: <UserIcon /> },
-  ]}
-/>
-
-<Breadcrumbs
-  dir="rtl"
-  separator="chevron"
-  items={[
-    { label: "Home", href: "/", icon: <HomeIcon /> },
-    { label: "Account", href: "/account" },
-    { label: "Security", current: true },
-  ]}
-/>
-```
-
-## Preset Impact
-
-- `default`: inline breadcrumbs remain quiet, and raised breadcrumbs use a modest surface radius with subtle border separation.
-- `rounded`: raised breadcrumbs can use the softer control radius and slightly more relaxed spacing.
-- `sharp`: raised breadcrumbs should use square or near-square corners and tighter horizontal rhythm.
-
-## Implementation Notes
-
-- Use the design system's icon primitive for home and chevron icons. The Figma source uses Remix Icon `home-5-line`, `arrow-right-s-line`, and `arrow-left-s-line`.
-- Generate separators between items instead of requiring callers to include separator items.
-- Keep overflow behavior explicit. If the trail is too long, collapse middle items behind an overflow control instead of silently hiding the current page.
-- Prefer `dir` or logical CSS properties for RTL behavior rather than maintaining separate RTL item arrays.
-- The raised style is a navigation surface, not a card. Keep elevation at `elevation.none` unless a consuming product places it inside an overlay.
-
-## Install
-
-```bash
-npx banhaten add breadcrumbs
-```
-
-## Examples
-
-Primary registry example: `examples/expanded/breadcrumbs-demo.tsx`.
-
-Open the live component page or run `npx banhaten docs breadcrumbs` 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/expanded/breadcrumbs.css`, `components/expanded/Breadcrumbs.tsx`.
-
-## RTL Rules
-
-This component has no special RTL contract beyond inherited document direction and logical spacing.
-
+# Breadcrumbs
+
+Breadcrumbs show a user's location in a hierarchy and provide a quick path back to parent pages. Use `Breadcrumbs` for page-level navigation, not for step progress, tabs, or filters.
+
+Figma reference: `Breadcrumbs`, node `238:7987`.
+
+## Variants
+
+The Figma component defines these variants:
+
+| Type | Style | Separator type | Direction |
+| --- | --- | --- | --- |
+| `Default` | `Default` | `Slash` | LTR and RTL |
+| `Default` | `Default` | `Chevron` | LTR and RTL |
+| `Default` | `Raised` | `Slash` | LTR and RTL |
+| `Default` | `Raised` | `Chevron` | LTR and RTL |
+| `Only Icon` | `Default` | `Slash` | LTR and RTL |
+| `Only Icon` | `Default` | `Chevron` | LTR and RTL |
+| `Only Icon` | `Raised` | `Slash` | LTR and RTL |
+| `Only Icon` | `Raised` | `Chevron` | LTR and RTL |
+
+The Figma source supports up to six visible breadcrumb items. Code should model this as an `items` collection instead of positional booleans such as `showBreadcrumb01`.
+
+## API
+
+Use semantic names in code even if the Figma variant labels are title-cased.
+
+```ts
+type BreadcrumbSeparator = "slash" | "chevron";
+type BreadcrumbStyle = "default" | "raised";
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+  current?: boolean;
+};
+
+type BreadcrumbsProps = {
+  items: BreadcrumbItem[];
+  separator?: BreadcrumbSeparator;
+  style?: BreadcrumbStyle;
+  iconOnly?: boolean;
+  dir?: "ltr" | "rtl" | "auto";
+  maxItems?: number;
+  "aria-label"?: string;
+};
+```
+
+`items` should be ordered from root to current page in logical reading order. RTL rendering should mirror the visual order through layout direction, not by reversing the source data.
+
+## Layout
+
+- The root is a horizontal flex row with centered alignment.
+- The default style has no container background and uses a compact inline gap.
+- The raised style adds a surface fill, a 1px border, 12px padding, and an 8px radius in the Figma source.
+- Text items use `Body/body-md (base)/medium` with a 15px size and 24px line height.
+- Item glyphs are 18px square inside 20px slots.
+- Slash and chevron separators are 16px square and should be decorative.
+- LTR chevrons point right; RTL chevrons point left.
+- Each label resolves its own content direction, so an opposing script truncates at its actual end while the trail keeps the inherited layout direction.
+- The icon-only type keeps the same item and separator rhythm but hides visible labels.
+- Do not allow wrapping inside individual breadcrumb labels unless the component has a deliberate collapsed or overflow mode.
+
+## Tokens
+
+Breadcrumbs should consume existing semantic tokens:
+
+```ts
+export const breadcrumbsTokens = {
+  itemColor: "content.subtle",
+  currentItemColor: "content.default",
+  iconColor: "content.subtle",
+  separatorColor: "content.subtle",
+  raisedBackground: "background.card",
+  raisedBorder: "border.subtle",
+  raisedRadius: "shape.control",
+  inlineGap: "space.xs-4",
+  raisedGap: "space.md-8",
+  raisedPadding: "space.xl-12",
+};
+```
+
+Do not hard-code Figma fallback values in component code. The current Figma fallbacks include `content/subtle` as `#4e596e`, `bg/raised` as white, `border/subtle` as `rgba(55, 83, 122, 0.13)`, and `radius/lg-8` as 8px. Implementations should resolve those through semantic tokens.
+
+If the design system later adds a dedicated `background.raised` token, the raised style can map to it. Until then, use the closest raised surface token such as `background.card`.
+
+## Accessibility
+
+- Render the component as navigation, usually `<nav aria-label="Breadcrumb">`.
+- Use an ordered list so the hierarchy is exposed to assistive technology.
+- Render linked ancestors as anchors.
+- Mark the current page with `aria-current="page"` and do not require it to be a link.
+- Hide separators from assistive technology with `aria-hidden="true"`.
+- Icon-only breadcrumbs must provide an accessible label for every item, even when visible text is hidden.
+- Preserve logical item order for screen readers in RTL contexts.
+- Provide keyboard focus treatment through the link or action primitive, not on decorative separators.
+
+## Usage
+
+```tsx
+<Breadcrumbs
+  items={[
+    { label: "Home", href: "/", icon: <HomeIcon /> },
+    { label: "Products", href: "/products" },
+    { label: "Analytics", current: true },
+  ]}
+/>
+
+<Breadcrumbs
+  separator="chevron"
+  style="raised"
+  items={[
+    { label: "Home", href: "/", icon: <HomeIcon /> },
+    { label: "Reports", href: "/reports" },
+    { label: "Monthly", current: true },
+  ]}
+/>
+
+<Breadcrumbs
+  iconOnly
+  aria-label="Breadcrumb"
+  items={[
+    { label: "Home", href: "/", icon: <HomeIcon /> },
+    { label: "Settings", href: "/settings", icon: <SettingsIcon /> },
+    { label: "Profile", current: true, icon: <UserIcon /> },
+  ]}
+/>
+
+<Breadcrumbs
+  dir="rtl"
+  separator="chevron"
+  items={[
+    { label: "Home", href: "/", icon: <HomeIcon /> },
+    { label: "Account", href: "/account" },
+    { label: "Security", current: true },
+  ]}
+/>
+```
+
+## Preset Impact
+
+- `default`: inline breadcrumbs remain quiet, and raised breadcrumbs use a modest surface radius with subtle border separation.
+- `rounded`: raised breadcrumbs can use the softer control radius and slightly more relaxed spacing.
+- `sharp`: raised breadcrumbs should use square or near-square corners and tighter horizontal rhythm.
+
+## Implementation Notes
+
+- Use the design system's icon primitive for home and chevron icons. The Figma source uses Remix Icon `home-5-line`, `arrow-right-s-line`, and `arrow-left-s-line`.
+- Generate separators between items instead of requiring callers to include separator items.
+- Keep overflow behavior explicit. If the trail is too long, collapse middle items behind an overflow control instead of silently hiding the current page.
+- Prefer `dir` or logical CSS properties for RTL behavior rather than maintaining separate RTL item arrays.
+- The raised style is a navigation surface, not a card. Keep elevation at `elevation.none` unless a consuming product places it inside an overlay.
+
+## Install
+
+```bash
+npx banhaten add breadcrumbs
+```
+
+## Examples
+
+Primary registry example: `examples/expanded/breadcrumbs-demo.tsx`.
+
+Open the live component page or run `npx banhaten docs breadcrumbs` 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/expanded/breadcrumbs.css`, `components/expanded/Breadcrumbs.tsx`.
+
+## RTL Rules
+
+The ordered trail inherits document direction and uses logical spacing. Each independently truncated label uses `dir="auto"`, preserving the identifying start of Latin content in an RTL trail (and Arabic content in an LTR trail) without changing item order, icon placement, or separator mirroring.
+
 <!-- registry-contract:start -->
 ## Registry Contract
 
@@ -186,6 +187,6 @@ This table is generated from `registry/index.json`; edit the component-owned sou
 | `registryDependencies` | None |
 | `modes` | `text`, `icon-only`, `slash`, `chevron` |
 | `states` | `link`, `current`, `overflow` |
-| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-stroke-190`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-4xl-20`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--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-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height` |
+| `tokens` | `--bh-bg-raised`, `--bh-border-focus`, `--bh-border-subtle`, `--bh-content-default`, `--bh-content-subtle`, `--bh-focus-ring-width`, `--bh-font-family`, `--bh-font-weight-medium`, `--bh-icon-size-default`, `--bh-icon-slot-size-default`, `--bh-icon-stroke-190`, `--bh-icon-stroke-200`, `--bh-icon-stroke-225`, `--bh-interactive-ghost-hover`, `--bh-radius-lg-8`, `--bh-radius-sm-4`, `--bh-space-3xl-16`, `--bh-space-6xl-32`, `--bh-space-md-8`, `--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-line-height`, `--bh-text-body-md-font-size`, `--bh-text-body-md-line-height` |
 | `variants` | `default`, `raised` |
 <!-- registry-contract:end -->