@trading-game/design-intelligence-layer 1.0.1 → 1.0.2

package/docs/components/toggle.md

@@ -1,40 +1,70 @@
 # Toggle
 
-Two-state pressable button (Radix Toggle) whose on-state uses the hover glaze plus brand-selected ink.
+Two-state pressable button (Radix Toggle) wearing the Chip colour treatment on its rectangle: bordered primary surface at rest, solid brand with on-brand ink when on. Same shape as always — only the colours are chip. **Toggle Group** joins several of them into a segmented set and is documented here — one look, shared geometry, one page.
 
 ## When to use
 
 - A single on/off tool control — bold in an editor, favourite a market, show/hide an overlay.
+- A group for exclusive or multi-select among a few peer options that stay visible — chart interval (1m/5m/1h), order side, view density.
 
-**When not:** For exclusive or multiple selection across several options use [Toggle Group](./toggle-group.md). For settings that apply immediately use [Switch](./switch.md).
+**When not:** For switching content panels use [Tabs](./tabs.md). For settings that apply immediately use [Switch](./switch.md). For 5+ options use [Select](./select.md).
 
 ## Anatomy
 
-- `Toggle` — Radix root styled by `toggleVariants` (cva, exported and reused by Toggle Group); `data-slot="toggle"`, `data-state="on|off"`.
+- `Toggle` — Radix root styled by `toggleVariants` (cva, exported); `data-slot="toggle"`, `data-state="on|off"`.
+- `ToggleGroup` — Radix root; publishes `size`/`spacing` through context and sets `--gap`; `data-slot="toggle-group"` with `data-size`, `data-spacing`.
+- `ToggleGroupItem` — one segment, styled by the shared `toggleVariants`; `data-slot="toggle-group-item"`, `data-state="on|off"`.
 
 ## API
 
+### Toggle
+
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `variant` | `"default" \| "outline"` | `"default"` | default is transparent at rest; outline adds `border-border-prominent-default`. |
 | `size` | `"default" \| "sm" \| "lg"` | `"default"` | default `h-10 min-w-10 px-2.5` (40px), sm `h-8 min-w-8 px-1.5` (32px), lg `h-12 min-w-12 px-3` (48px) — on the 32/40/48 rail. |
 | `pressed` / `defaultPressed` | `boolean` | — | Controlled / uncontrolled. |
 | `onPressedChange` | `(pressed: boolean) => void` | — | Radix callback. |
 
-## Variants & sizes
+### ToggleGroup
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `type` | `"single" \| "multiple"` | — | Radix prop; required. |
+| `size` | as Toggle | — | Inherited by every item via context; context wins over per-item values. |
+| `spacing` | `number` | `0` | Tailwind spacing units between items; `0` = joined segments. |
+| `value` / `defaultValue`, `onValueChange` | Radix props | — | `string` for single, `string[]` for multiple. |
+
+### ToggleGroupItem
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `value` | `string` | — | Required item identity. |
 
 ```tsx
-import { Toggle } from "@trading-game/design-intelligence-layer"
+import { Toggle, ToggleGroup, ToggleGroupItem } from "@trading-game/design-intelligence-layer"
 import { Star } from "lucide-react"
 
 <Toggle aria-label="Favourite"><Star /></Toggle>
-<Toggle variant="outline" size="sm">1H</Toggle>
 <Toggle size="lg" pressed={on} onPressedChange={setOn}>Overlay</Toggle>
+
+// joined segments (default)
+<ToggleGroup type="single" defaultValue="1h">
+  <ToggleGroupItem value="1m">1M</ToggleGroupItem>
+  <ToggleGroupItem value="5m">5M</ToggleGroupItem>
+  <ToggleGroupItem value="1h">1H</ToggleGroupItem>
+</ToggleGroup>
+
+// spaced multiple-select
+<ToggleGroup type="multiple" spacing={2} size="sm">
+  <ToggleGroupItem value="ema">EMA</ToggleGroupItem>
+  <ToggleGroupItem value="vol">VOL</ToggleGroupItem>
+</ToggleGroup>
 ```
 
 ## Tokens
 
-**Colour (semantic):** `bg-background-hover-default` (hover fill, and the on-state fill — the glaze does double duty), `text-text-prominent-default` (hover ink, outline resting ink), `text-text-brand-selected` (on-state ink), `border-border-prominent-default` (outline variant border; on-state sets `border-transparent`), focus `border-ring-focus-default` + `ring-ring-focus-strong` at 3px, `border-border-error-default` + `ring-error-soft` ring (aria-invalid).
+**Colour (semantic):** the Chip treatment — `border-border-default-default` + `bg-background-primary-surface` + `text-text-prominent-default` (rest), `bg-background-secondary-surface` (hover), `bg-background-secondary-wash` (pressed), on-state `bg-background-brand-default` + `text-text-on-brand-static` with `border-transparent` (the brand flip in dark is the design), focus `border-ring-focus-default` + `ring-ring-focus-strong` at 3px, `border-border-error-default` + `ring-error-soft` ring (aria-invalid).
+
 **Type (private):**
 
 | Token | Value |
@@ -43,18 +73,21 @@ import { Star } from "lucide-react"
 
 ## Behaviour
 
-- On-state = `bg-background-hover-default` fill + `text-text-brand-selected` ink + transparent border. There is no separate pressed surface token — the hover glaze is reused deliberately.
+- On-state = solid `bg-background-brand-default` fill + `text-text-on-brand-static` ink + transparent border — the Chip selected look.
 - Radius is `rounded-md` (8px, the row radius); icons default to `size-4`.
+- `spacing={0}` (default) joins segments: items lose their own radius (`rounded-none`), the first/last regain `rounded-l-md`/`rounded-r-md`, and segments share hairlines by dropping `border-l` on all but the first; any positive `spacing` separates them and each keeps `rounded-md`.
+- Items are `w-auto min-w-0 shrink-0 px-3` and raise `z-10` on focus so the ring is never clipped by neighbours.
 - Disabled: `pointer-events-none opacity-24`.
 
 ## Do / Don't
 
 **Do**
 - Give icon-only toggles an `aria-label`.
-- Use `outline` when the toggle sits on a busy surface and needs a resting boundary.
+- Keep the group's default `spacing={0}` for segmented-control semantics; use spacing only when items act as independent toggles.
+- Use `type="single"` with a `defaultValue` for interval/side pickers so one option is always on.
 - Let the exported `toggleVariants` style any custom toggle-like control instead of re-deriving classes.
 
 **Don't**
-- Don't give the on-state a solid brand fill — the system on-state is glaze + brand-selected ink only.
-- Don't exceed medium 500 for the label; the type token is fixed at 14/medium/20.
-- Don't use a Toggle where the action navigates or submits — that is a Button.
+- Don't invent variants — one look, three states (rest / hover / on); the former `outline` variant is removed.
+- Don't mix sizes inside one group; the shared border geometry assumes uniform height.
+- Don't use a Toggle where the action navigates or submits — that is a Button; a joined group used for navigation is [Tabs](./tabs.md).

package/docs/foundations/colors.md

@@ -16,7 +16,7 @@ Token grammar (Quill style): `{element}-{role}-{variant}` — e.g. `background-b
 2. **Surfaces are always solid.** Alpha values are for *state layers on top of* a solid base (hover glazes, pressed glazes, glass, scrims, washes) — never for a resting surface. Dark surfaces are built as `color-mix()` of white over the canvas, producing a solid colour.
 3. **Dark is not a mirror.** When a light construction fails on near-black (a 10% wash disappears, mid-blue ink loses contrast), the dark value diverges — that's what the `.dark` block is for. Never hardcode a light construction and assume it flips.
 4. **Selection states use the `*-brand-selected` family** — never `brand-default/10` washes or `text-brand-default` ink for a selected/active element.
-5. **No shadows anywhere.** Elevation is hairline borders and surface steps.
+5. **No shadows anywhere,** bar two named exceptions (`shadow-chrome-default` on floating mobile chrome, `shadow-brand-glow` on the Slide to Confirm handle). Elevation is hairline borders and surface steps.
 
 ## Primitive scales
 

package/docs/foundations/shape-layout.md

@@ -53,4 +53,4 @@ Tokens: `--semantic-layout-grid-columns`, `--semantic-layout-gutter`, `--semanti
 
 ## Elevation
 
-Inline components carry none — **no shadows** — every component's `shadow-*` has been removed. The one sanctioned exception is **floating mobile chrome** (Bottom Navigation): a soft ambient lift (`shadow-chrome-default`, `0 12px 30px`) separates chrome from the content scrolling beneath it, per the Refined Mobile file. Elevation reads through the hairline (`border-default-default`) and surface steps (canvas → primary surface → secondary surface). On dark this is why surfaces are solid white-mixes: the step between `#00001F`, `#0F0F2C`, `#1F1F3A` is the elevation.
+Inline components carry none — **no shadows** — every component's `shadow-*` has been removed. There are exactly two sanctioned exceptions, both per the Refined Mobile file. **Floating mobile chrome** (Bottom Navigation): a soft ambient lift (`shadow-chrome-default`, `0 12px 30px`) separates chrome from the content scrolling beneath it. **The Slide to Confirm handle**: a brand glow (`shadow-brand-glow`, `0 6px 16px` of `background-brand-default` at 35%, so it re-derives per theme) so a committed money action reads as liftable off its track. Neither token may be reused elsewhere. Elevation reads through the hairline (`border-default-default`) and surface steps (canvas → primary surface → secondary surface). On dark this is why surfaces are solid white-mixes: the step between `#00001F`, `#0F0F2C`, `#1F1F3A` is the elevation.

package/docs/patterns/forms.md

@@ -58,7 +58,7 @@ All text-entry controls share one construction: **hairline border (`border-defau
 | [Native Select](../components/native-select.md) | OS-native option list, same rail |
 | [Select](../components/select.md) | custom popup (opens below the trigger) |
 | [Input OTP](../components/input-otp.md) | segmented code entry |
-| [Stepper](../components/stepper.md) | numeric +/− built on Input Group |
+| [Stepper](../components/stepper.md) | the amount tray — frosted −/+ circles, centred editable amount |
 | [Numpad](../components/numpad.md) | mobile amount entry — pairs with a display figure, not an input |
 
 ## Choice cards

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -30,7 +30,8 @@
     "start": "next start",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
-    "check:tokens": "node scripts/check-token-docs.mjs"
+    "check:tokens": "node scripts/check-token-docs.mjs",
+    "predev": "rm -rf .next"
   },
   "files": [
     "dist/",

package/src/styles.css

@@ -173,6 +173,9 @@
   /* ── Named animations ── */
   --animate-button-shimmer: button-shimmer 4s linear infinite;
   --animate-skeleton-sweep: skeleton-sweep 1.6s var(--primitive-ease-standard) infinite;
+  /* Slide-to-confirm idle nudge — the handle drifts 10px and back, hinting
+     the gesture without moving far enough to read as progress. */
+  --animate-slide-confirm-nudge: slide-confirm-nudge 1.8s var(--primitive-ease-standard) infinite;
 }
 
 /* ══════════════════════════════════════════════════════════════
@@ -601,6 +604,10 @@
   --background-chrome-default: rgb(255 255 255 / 78%);
   --border-chrome-default: rgb(10 10 60 / 8%);
   --shadow-chrome-default: 0 12px 30px rgb(10 10 60 / 14%);
+  /* Brand-action glow — the second (and only other) sanctioned shadow
+     besides floating chrome. Reserved for a committed primary action that
+     must read as lifted off its track: the Slide to Confirm handle. */
+  --shadow-brand-glow: 0 6px 16px color-mix(in srgb, var(--background-brand-default) 35%, transparent);
   --text-chrome-subtle: var(--text-subtle-default);
   --background-chrome-selected:
     linear-gradient(rgb(255 255 255 / 55%), rgb(255 255 255 / 15%)),
@@ -777,7 +784,7 @@
   /* Border */
   --border-default-default: var(--primitive-white-alpha-12);
   --border-prominent-default: var(--primitive-mono-50);
-  --border-neutral-default: var(--primitive-white-alpha-12);
+  --border-neutral-default: var(--primitive-white-alpha-24);
 
   /* Text */
   --text-prominent-default: var(--primitive-mono-50);
@@ -803,10 +810,10 @@
   --shadow-chrome-default: 0 12px 30px rgb(0 0 20 / 50%);
   --text-chrome-subtle: var(--text-subtle-default);
   --background-chrome-selected:
-    linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 0%)),
-    var(--background-brand-selected);
-  --chrome-highlight-default: var(--primitive-white-alpha-24);
-  --text-chrome-selected: var(--primitive-mono-50);
+    linear-gradient(rgb(255 255 255 / 14%), rgb(255 255 255 / 0%)),
+    color-mix(in srgb, var(--primitive-blue-400) 45%, var(--primitive-blue-1000));
+  --chrome-highlight-default: var(--primitive-white-alpha-32);
+  --text-chrome-selected: var(--primitive-blue-100);
 
   /* @deprecated aliases that don't resolve through a flipping token */
   --primary-inverse: var(--primitive-mono-50);
@@ -1007,10 +1014,11 @@
   --input-line-height-lg: var(--primitive-line-height-24);
   --input-font-weight: var(--primitive-font-weight-regular);
   /* ── Input OTP — component type tokens (private) ──
-     Digits ride the input md step (14/regular/20). */
-  --input-otp-font-size: var(--primitive-font-size-14);
-  --input-otp-font-weight: var(--primitive-font-weight-regular);
-  --input-otp-line-height: var(--primitive-line-height-20);
+     Digits ride 20/semibold/28 — larger than the input md step so a
+     6-digit code reads at a glance. */
+  --input-otp-font-size: var(--primitive-font-size-20);
+  --input-otp-font-weight: var(--primitive-font-weight-semibold);
+  --input-otp-line-height: var(--primitive-line-height-28);
   /* ── Native Select — component type tokens (private) ──
      Same ladder as Input (12/14/16, regular). */
   --native-select-font-size-sm: var(--primitive-font-size-12);
@@ -1054,6 +1062,43 @@
   --bottom-navigation-label-font-weight: var(--primitive-font-weight-medium);
   --bottom-navigation-label-line-height: var(--primitive-line-height-16);
   --bottom-navigation-label-active-font-weight: var(--primitive-font-weight-semibold);
+
+  /* ── Stepper (stake variant) — component type tokens (private) ── */
+  --stepper-stake-label-font-size: var(--primitive-font-size-12);
+  --stepper-stake-label-font-weight: var(--primitive-font-weight-medium);
+  --stepper-stake-label-line-height: var(--primitive-line-height-16);
+  --stepper-stake-amount-font-size: var(--primitive-font-size-24);
+  --stepper-stake-amount-font-weight: var(--primitive-font-weight-semibold);
+  --stepper-stake-amount-line-height: var(--primitive-line-height-32);
+
+/* ── Progress — component type tokens (private) ── */
+  --progress-label-font-size: var(--primitive-font-size-12);
+  --progress-label-font-weight: var(--primitive-font-weight-semibold);
+  --progress-label-line-height: var(--primitive-line-height-16);
+  --progress-value-font-size: var(--primitive-font-size-14);
+  --progress-value-font-weight: var(--primitive-font-weight-semibold);
+  --progress-value-line-height: var(--primitive-line-height-20);
+
+  /* ── Slide to Confirm — component type tokens (private) ── */
+  --slide-to-confirm-label-font-size: var(--primitive-font-size-14);
+  --slide-to-confirm-label-font-weight: var(--primitive-font-weight-medium);
+  --slide-to-confirm-label-line-height: var(--primitive-line-height-20);
+  --slide-to-confirm-label-confirmed-font-weight: var(--primitive-font-weight-semibold);
+
+  /* ── Steps — component type tokens (private) ── */
+  --steps-indicator-font-size: var(--primitive-font-size-14);
+  --steps-indicator-font-weight: var(--primitive-font-weight-semibold);
+  --steps-indicator-line-height: var(--primitive-line-height-20);
+  --steps-title-font-size: var(--primitive-font-size-14);
+  --steps-title-font-weight: var(--primitive-font-weight-semibold);
+  --steps-title-line-height: var(--primitive-line-height-20);
+  --steps-description-font-size: var(--primitive-font-size-14);
+  --steps-description-font-weight: var(--primitive-font-weight-regular);
+  --steps-description-line-height: var(--primitive-line-height-20);
+  --steps-tag-font-size: var(--primitive-font-size-10);
+  --steps-tag-font-weight: var(--primitive-font-weight-semibold);
+  --steps-tag-line-height: var(--primitive-line-height-16);
+
   /* ── Sidebar — component type tokens (private) ──
      Menu rows 14/regular/20 (sm 12/16); labels + badges 12/medium/16.
      Active rows go semibold via the data-active rule below. */
@@ -1196,6 +1241,18 @@
 }
 
 /* Skeleton — directional loading sweep (replaces the generic pulse) */
+/* Slide to Confirm — the confirmed check pops on the overshoot spring */
+@keyframes slide-confirm-pop {
+  from { transform: scale(0); }
+  to   { transform: scale(1); }
+}
+
+/* Slide to Confirm — idle nudge on the handle, per the Refined spec */
+@keyframes slide-confirm-nudge {
+  0%, 100% { transform: translateX(0); }
+  50%      { transform: translateX(10px); }
+}
+
 @keyframes skeleton-sweep {
   from { transform: translateX(-100%); }
   to   { transform: translateX(100%); }
@@ -1691,6 +1748,94 @@
   font-weight: var(--bottom-navigation-label-font-weight);
 }
 
+.type-stepper-stake-label {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--stepper-stake-label-font-size);
+  line-height: var(--stepper-stake-label-line-height);
+  font-weight: var(--stepper-stake-label-font-weight);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.type-stepper-stake-amount {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--stepper-stake-amount-font-size);
+  line-height: var(--stepper-stake-amount-line-height);
+  font-weight: var(--stepper-stake-amount-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.type-progress-label {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--progress-label-font-size);
+  line-height: var(--progress-label-line-height);
+  font-weight: var(--progress-label-font-weight);
+}
+
+.type-progress-value {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--progress-value-font-size);
+  line-height: var(--progress-value-line-height);
+  font-weight: var(--progress-value-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.type-slide-to-confirm {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--slide-to-confirm-label-font-size);
+  line-height: var(--slide-to-confirm-label-line-height);
+  font-weight: var(--slide-to-confirm-label-font-weight);
+}
+
+/* Confirmed label steps up to semibold via a data-attribute rule —
+   .type-* classes can't be variant-gated. */
+[data-slot="slide-to-confirm"][data-confirmed] .type-slide-to-confirm {
+  font-weight: var(--slide-to-confirm-label-confirmed-font-weight);
+}
+
+.type-steps-indicator {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--steps-indicator-font-size);
+  line-height: var(--steps-indicator-line-height);
+  font-weight: var(--steps-indicator-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.type-steps-title {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--steps-title-font-size);
+  line-height: var(--steps-title-line-height);
+  font-weight: var(--steps-title-font-weight);
+}
+
+.type-steps-description {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--steps-description-font-size);
+  line-height: var(--steps-description-line-height);
+  font-weight: var(--steps-description-font-weight);
+}
+
+.type-steps-tag {
+  font-family: var(--font-plus-jakarta-sans);
+  font-size: var(--steps-tag-font-size);
+  line-height: var(--steps-tag-line-height);
+  font-weight: var(--steps-tag-font-weight);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* Steps sm — re-point the private type tokens at the 12/16 primitives */
+[data-slot="steps"][data-size="sm"] {
+  --steps-indicator-font-size: var(--primitive-font-size-12);
+  --steps-indicator-line-height: var(--primitive-line-height-16);
+  --steps-title-font-size: var(--primitive-font-size-12);
+  --steps-title-line-height: var(--primitive-line-height-16);
+  --steps-description-font-size: var(--primitive-font-size-12);
+  --steps-description-line-height: var(--primitive-line-height-16);
+}
+
+
+
 /* Bottom Navigation — the arriving icon pops on an overshoot spring; the
    label never moves. */
 [data-slot="bottom-navigation-item"] svg {

package/docs/components/toggle-group.md

@@ -1,77 +0,0 @@
-# Toggle Group
-
-A set of related toggles (Radix ToggleGroup) sharing size/variant, rendered joined by default.
-
-## When to use
-
-- Exclusive or multi-select among a few peer options that stay visible — chart interval (1m/5m/1h), order side, view density.
-
-**When not:** For switching content panels use [Tabs](./tabs.md). For a single independent control use [Toggle](./toggle.md). For 5+ options use [Select](./select.md).
-
-## Anatomy
-
-- `ToggleGroup` — Radix root; publishes `variant`/`size`/`spacing` through context and sets `--gap`; `data-slot="toggle-group"` with `data-variant`, `data-size`, `data-spacing`.
-- `ToggleGroupItem` — one segment, styled by the shared `toggleVariants` from Toggle; `data-slot="toggle-group-item"`, `data-state="on|off"`.
-
-## API
-
-### ToggleGroup
-
-| Prop | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `type` | `"single" \| "multiple"` | — | Radix prop; required. |
-| `variant` | `"default" \| "outline"` | — | Inherited by every item via context. |
-| `size` | `"default" \| "sm" \| "lg"` | — | Same rail as Toggle (36/32/40px). |
-| `spacing` | `number` | `0` | Tailwind spacing units between items; `0` = joined segments. |
-| `value` / `defaultValue`, `onValueChange` | Radix props | — | `string` for single, `string[]` for multiple. |
-
-### ToggleGroupItem
-
-| Prop | Type | Default | Notes |
-| --- | --- | --- | --- |
-| `value` | `string` | — | Required item identity. |
-| `variant` / `size` | as Toggle | — | Context wins: group-level values override per-item ones. |
-
-## Variants & sizes
-
-```tsx
-import { ToggleGroup, ToggleGroupItem } from "@trading-game/design-intelligence-layer"
-
-// joined segments (default)
-<ToggleGroup type="single" variant="outline" defaultValue="1h">
-  <ToggleGroupItem value="1m">1M</ToggleGroupItem>
-  <ToggleGroupItem value="5m">5M</ToggleGroupItem>
-  <ToggleGroupItem value="1h">1H</ToggleGroupItem>
-</ToggleGroup>
-
-// spaced multiple-select
-<ToggleGroup type="multiple" spacing={2} size="sm">
-  <ToggleGroupItem value="ema">EMA</ToggleGroupItem>
-  <ToggleGroupItem value="vol">VOL</ToggleGroupItem>
-</ToggleGroup>
-```
-
-## Tokens
-
-**Colour (semantic):** everything from Toggle (`bg-background-hover-default` on-fill/hover, `text-text-brand-selected` on-ink, `border-border-prominent-default` outline), plus `border-border-brand-selected` on an on-segment's border in joined outline groups.
-**Type (private):** shared `--toggle-*` family — 14 / medium (500) / 20.
-
-## Behaviour
-
-- `spacing={0}` (default) joins segments: items lose their own radius (`rounded-none`), the first/last regain `rounded-l-md`/`rounded-r-md`, and outline items share borders by dropping `border-l` on all but the first.
-- In a joined outline group, an on segment restores its left border and colours its full border `border-border-brand-selected`, so the selected segment reads as outlined in brand.
-- Group-level `variant`/`size` override per-item props through context (`context.variant || variant`).
-- Items are `w-auto min-w-0 shrink-0 px-3` and raise `z-10` on focus so the ring is never clipped by neighbours.
-- Any positive `spacing` separates the items and each keeps its own `rounded-md` shape.
-
-## Do / Don't
-
-**Do**
-- Keep the default `spacing={0}` for segmented-control semantics; use spacing only when items act as independent toggles.
-- Set `variant`/`size` on the group once; per-item overrides are ignored when the group sets them.
-- Use `type="single"` with a `defaultValue` for interval/side pickers so one option is always on.
-
-**Don't**
-- Don't give on-segments a solid brand fill — selection is glaze + `text-brand-selected` ink, with `border-brand-selected` in joined outline groups.
-- Don't mix sizes inside one group; the shared border geometry assumes uniform height.
-- Don't use a joined group for navigation — that is [Tabs](./tabs.md).