banhaten 0.5.0 → 0.6.0

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

@@ -1,18 +1,18 @@
-# Typography
-
-Banhaten exposes text utility classes generated from the design token contract. Use `.bh-text-*` classes when you need token-exact typography without pulling in a React component.
-
-## Usage
-
-```html
-<h1 class="bh-text-heading-lg-semibold">Workspace overview</h1>
-<p class="bh-text-body-md-regular">Review project status and owners.</p>
-```
-
-## Families
-
-The classes mirror token names across Display, Heading, and Body styles. Each class applies font size, line height, font weight, and letter spacing from `registry/styles/globals.css`.
-
-## RTL
-
-Typography classes do not set direction. Use `dir`, `lang`, and logical text alignment on the surrounding element.
+# Typography
+
+Banhaten exposes text utility classes generated from the design token contract. Use `.bh-text-*` classes when you need token-exact typography without pulling in a React component.
+
+## Usage
+
+```html
+<h1 class="bh-text-heading-lg-semibold">Workspace overview</h1>
+<p class="bh-text-body-md-regular">Review project status and owners.</p>
+```
+
+## Families
+
+The classes mirror token names across Display, Heading, and Body styles. Each class applies font size, line height, font weight, and letter spacing from `registry/styles/globals.css`.
+
+## RTL
+
+Typography classes do not set direction. Use `dir`, `lang`, and logical text alignment on the surrounding element.

package/docs/design-system/density-and-elevation.md

@@ -1,65 +1,65 @@
-# Density and Elevation
-
-## Density
-
-Banhaten exposes one semantic density contract for controls that must align in a
-product surface:
-
-| Density | Height | Typical use |
-| --- | ---: | --- |
-| `compact` | 32px | Dense desktop tables and constrained toolbars |
-| `default` | 36px | Standard forms, search, filters, and actions |
-| `comfortable` | 40px | Prominent forms and less dense product areas |
-
-Use `density` when Input, Select, Date Picker, Button, Button Group, Segmented
-Control, or Toolbar controls sit in the same row. The semantic prop overrides
-the component's legacy `size` prop. Existing `size` values remain supported for
-compatibility and for component-specific variants outside the shared 32/36/40
-control family.
-
-```tsx
-<Input density="default" />
-<Select density="default" />
-<DatePicker density="default" />
-<Button density="default">Apply</Button>
-<ToggleGroup density="default" />
-```
-
-Do not align controls by adding raw `h-*`, padding, radius, or font-size
-utilities. Choose one semantic density at the containing form or toolbar and
-pass it to every control. Compact controls are intended for pointer-led desktop
-interfaces; products with touch requirements should prefer `comfortable` or
-provide a larger interaction target around the control.
-
-This is a component composition contract, not a global scale transform. It does
-not silently resize navigation, cards, typography, or unrelated layout spacing.
-
-## Elevation
-
-Elevation uses two layers in one public namespace:
-
-- General steps: `--elevation-01` through `--elevation-07`.
-- Semantic aliases: `--elevation-component-*`, focus/danger rings, menus, controls, and component-specific treatments.
-
-The seven general steps mirror the current Figma `elevation/01` through
-`elevation/07` effect styles in [Shadow tests → With Variables](https://www.figma.com/design/LVAWtr5A5oEcAvsBmk6vdt/Banhaten-Design-system-3.0?node-id=6436-13190).
-The geometry is shared across modes. Figma's bound shadow color variables make
-the dark-mode drops, rings, and highlights stronger, so Banhaten publishes a
-separate exact recipe for each mode.
-
-| CSS token | Figma style | Current component roles |
-| --- | --- | --- |
-| `--elevation-01` | `elevation/01` | Flat surfaces with an ambient ring only |
-| `--elevation-02` | `elevation/02` | Subtle lift for inner cards, inset panels, and compact raised details |
-| `--elevation-03` | `elevation/03` | Cards, surfaces, slider thumbs, and toggle handles |
-| `--elevation-04` | `elevation/04` | Menus, select menus, popovers, tooltips, and date surfaces |
-| `--elevation-05` | `elevation/05` | Sticky and floating surfaces, including floating banners |
-| `--elevation-06` | `elevation/06` | Modals and dialogs |
-| `--elevation-07` | `elevation/07` | Full-overlay surfaces that require maximum depth |
-
-Components consume the semantic alias that describes purpose rather than
-selecting a visual step directly. Focus rings and inset borders remain distinct
-effect recipes, but they share the `--elevation-*` public namespace so there is
-no parallel shadow-token API. CSS `box-shadow` is only the browser rendering
-mechanism. The Elevation documentation distinguishes surface depth, control
-strokes, focus rings, overlay elevation, and intentional `none` values.
+# Density and Elevation
+
+## Density
+
+Banhaten exposes one semantic density contract for controls that must align in a
+product surface:
+
+| Density | Height | Typical use |
+| --- | ---: | --- |
+| `compact` | 32px | Dense desktop tables and constrained toolbars |
+| `default` | 36px | Standard forms, search, filters, and actions |
+| `comfortable` | 40px | Prominent forms and less dense product areas |
+
+Use `density` when Input, Select, Date Picker, Button, Button Group, Segmented
+Control, or Toolbar controls sit in the same row. The semantic prop overrides
+the component's legacy `size` prop. Existing `size` values remain supported for
+compatibility and for component-specific variants outside the shared 32/36/40
+control family.
+
+```tsx
+<Input density="default" />
+<Select density="default" />
+<DatePicker density="default" />
+<Button density="default">Apply</Button>
+<ToggleGroup density="default" />
+```
+
+Do not align controls by adding raw `h-*`, padding, radius, or font-size
+utilities. Choose one semantic density at the containing form or toolbar and
+pass it to every control. Compact controls are intended for pointer-led desktop
+interfaces; products with touch requirements should prefer `comfortable` or
+provide a larger interaction target around the control.
+
+This is a component composition contract, not a global scale transform. It does
+not silently resize navigation, cards, typography, or unrelated layout spacing.
+
+## Elevation
+
+Elevation uses two layers in one public namespace:
+
+- General steps: `--elevation-01` through `--elevation-07`.
+- Semantic aliases: `--elevation-component-*`, focus/danger rings, menus, controls, and component-specific treatments.
+
+The seven general steps mirror the current Figma `elevation/01` through
+`elevation/07` effect styles in [Shadow tests → With Variables](https://www.figma.com/design/LVAWtr5A5oEcAvsBmk6vdt/Banhaten-Design-system-3.0?node-id=6436-13190).
+The geometry is shared across modes. Figma's bound shadow color variables make
+the dark-mode drops, rings, and highlights stronger, so Banhaten publishes a
+separate exact recipe for each mode.
+
+| CSS token | Figma style | Current component roles |
+| --- | --- | --- |
+| `--elevation-01` | `elevation/01` | Flat surfaces with an ambient ring only |
+| `--elevation-02` | `elevation/02` | Subtle lift for inner cards, inset panels, and compact raised details |
+| `--elevation-03` | `elevation/03` | Cards, surfaces, slider thumbs, and toggle handles |
+| `--elevation-04` | `elevation/04` | Menus, select menus, popovers, tooltips, and date surfaces |
+| `--elevation-05` | `elevation/05` | Sticky and floating surfaces, including floating banners |
+| `--elevation-06` | `elevation/06` | Modals and dialogs |
+| `--elevation-07` | `elevation/07` | Full-overlay surfaces that require maximum depth |
+
+Components consume the semantic alias that describes purpose rather than
+selecting a visual step directly. Focus rings and inset borders remain distinct
+effect recipes, but they share the `--elevation-*` public namespace so there is
+no parallel shadow-token API. CSS `box-shadow` is only the browser rendering
+mechanism. The Elevation documentation distinguishes surface depth, control
+strokes, focus rings, overlay elevation, and intentional `none` values.