@trading-game/design-intelligence-layer 1.0.7 → 1.2.0

package/docs/components/badge.md

@@ -21,7 +21,7 @@ Non-interactive status pill — emphasis (solid or tint) crossed with meaning (b
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
 | `variant` | `"solid" \| "solid-demo" \| "solid-neutral" \| "solid-success" \| "solid-fail" \| "solid-warning" \| "tint" \| "tint-demo" \| "tint-neutral" \| "tint-success" \| "tint-fail" \| "tint-warning"` | `"solid"` | Emphasis + meaning grid; brand is the unsuffixed default. |
-| `size` | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | Heights 20 / 24 / 32 / 40. |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "count"` | `"md"` | Heights 20 / 24 / 32 / 40. |
 | `asChild` | `boolean` | `false` | Render onto a caller element. Badges are read-only markers — no hover states exist (interactive pills are Chips). |
 
 The `glass` variant was removed (breaking change); there is no replacement — use `tint` on imagery-free surfaces.
@@ -46,11 +46,29 @@ import { Badge } from "@trading-game/design-intelligence-layer"
 | `md` | 32px | `px-3 py-1` | 14/20 |
 | `lg` | 40px | `px-4 py-1.5` | 16/24 |
 
+### `count`
+
+`size="count"` is a shape, not a step on the xs/sm/md/lg rail: an 18px disc whose minimum
+width equals its height, so one digit is a circle and more digits grow it into a pill at the
+same height. `tabular-nums` fixes the digit width, so a ticking count only resizes when the
+number of digits changes, not on every update.
+
+Conventions the caller owns, not the component: hide the badge at zero, and cap above 99 as
+`99+`. Pinning it over other chrome needs a knockout ring in the colour of whatever is
+behind it — Badge cannot know that, so the caller adds it:
+
+```tsx
+<Badge aria-hidden size="count"
+  className="absolute -top-0.5 -right-0.5 ring-2 ring-background-primary-canvas">
+  {count > 99 ? "99+" : count}
+</Badge>
+```
+
 ## Tokens
 
 **Colour (semantic):**
 - Solid: `background-brand-default` + `text-on-brand-static`; `background-demo-solid`; `background-inverse-surface` + `text-prominent-inverse`; `background-success-solid` / `background-error-solid` / `background-warning-solid`, all with `text-on-status-static`.
-- Tint: `--background-brand-container` (layered static recipe, painted via `[background:…]`) + `text-brand-container-static`; `background-demo-default` + `text-demo-default`; `background-secondary-surface` + `text-prominent-default`; `background-success/error/warning-default` + matching `text-*` status tokens. All tints are borderless — the tinted fill alone carries the meaning.
+- Tint: `background-brand-selected` + `text-brand-selected` (the theme-aware selection family, same recipe as Calendar's range band); `background-demo-default` + `text-demo-default`; `background-secondary-surface` + `text-prominent-default`; `background-success/error/warning-default` + matching `text-*` status tokens. All tints are borderless — the tinted fill alone carries the meaning.
 - The `tint-demo` / `tint-success` / `tint-fail` / `tint-warning` fills are one family by construction: a light `-50` step in light, and the hue's base step at **24% over the canvas** in dark. `tint-demo` gained its dark override so it stops reading as a light chip beside Won/Lost/Pending; note ember's base step is 500, not 600, because it is a game accent rather than a status colour.
 - Focus: `ring-focus-strong`.
 
@@ -59,8 +77,7 @@ import { Badge } from "@trading-game/design-intelligence-layer"
 ## Behaviour
 
 - Status solids use the bright 600 fills with shared static white ink (`text-on-status-static`) — deliberately below AA on green and amber; a style call, not an oversight.
-- `tint` (brand) paints the layered `--background-brand-container` value via arbitrary `background`, so a `bg-*` utility cannot override it — replace the whole `[background:…]` if you must.
-- `tint` (brand) is the one tint that stays light in dark, because `--background-brand-container` is a deliberately static icy panel shared with Calendar's selection. It sits outside the status/demo tint family on purpose.
+- `tint` (brand) flips with the theme like every other tint: `blue-600 @ 10%` over white in light, `blue-400 @ 24%` over the canvas in dark, with `blue-200` ink. It was the last variant on the static `--background-brand-container`; that token now has no consumers.
 - No hover states — badges are read-only markers; if it needs to be clickable, it's a [Chip](./chip.md).
 - `rounded-full`, `border-transparent` on every variant — no outlines, no shadow.
 

package/docs/components/calendar.md

@@ -6,7 +6,7 @@ Date and date-range picker built on react-day-picker, restyled with circular day
 
 - Picking expiry dates, statement ranges, or tournament windows — single dates or ranges.
 
-**When not:** For choosing from a short list of preset periods use [Chip](./chip.md) rows or a Select. Embed the calendar in a Popover for input-triggered pickers.
+**When not:** For choosing from a short list of preset periods use [Chip](./chip.md) rows or a Select. Embed the calendar in a Popover for input-triggered pickers. On phones, use [Date Wheel Picker](./date-wheel-picker.md) in a Drawer instead. The month grid is cramped at phone width and slow for dates years away.
 
 ## Anatomy
 

package/docs/components/date-wheel-picker.md

@@ -0,0 +1,106 @@
+# Date Wheel Picker
+
+The phone's date picker: three scroll-snap wheels (day / month / year) behind one selection band. The band is the only place the date shows.
+
+## When to use
+
+- Picking a date on a phone, especially far from today: date of birth, document expiry, an order's end date.
+- Inside a [Drawer](./drawer.md): the phone pattern. The picker owns no surface, header, or button, so the Drawer supplies the title and the footer supplies Save.
+
+**When not:** On desktop, or for picking near dates where seeing the week matters, use [Calendar](./calendar.md) (in a [Popover](./popover.md)). For a date range use Calendar `mode="range"`. Don't pair the wheels with a text field showing the same date. The band already shows it, and two readouts of one value is the redundancy this component exists to remove.
+
+## Anatomy
+
+- `DateWheelPicker`: `role="group"`, `aria-label="Date"`, a 200px row of three wheels with a 4px gap. `data-slot="date-wheel-picker"`.
+- Band: a 40px `rounded-md` row in `bg-background-brand-selected`, fixed behind the middle row. `data-slot="date-wheel-picker-band"`.
+- Wheels: one per part, `role="spinbutton"` with `aria-label` Day / Month / Year and `aria-valuetext` the visible label. `data-slot="date-wheel-picker-wheel"`. Five 40px rows show; edges fade with a mask.
+- Rows: `type-date-wheel-picker-item`, `data-selected` on the row under the band, `data-disabled` on rows outside the range.
+
+## API
+
+### DateWheelPicker
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `value` | `Date` | — | Controlled date. The wheels always show a date. |
+| `defaultValue` | `Date` | today | Uncontrolled start. Clamped to the range. |
+| `onValueChange` | `(date: Date) => void` | — | Fires once a wheel settles (~120ms after scrolling stops). It never fires mid-spin. |
+| `min` | `Date` | 1 Jan 1900 | Earliest selectable day (time ignored). |
+| `max` | `Date` | 31 Dec, 10 years ahead | Latest selectable day (time ignored). |
+| `order` | `"dmy" \| "mdy" \| "ymd"` | `"dmy"` | Wheel order, left to right. |
+| `monthFormat` | `"long" \| "short" \| "numeric"` | `"long"` | `January` / `Jan` / `01`. Long months get a wider wheel. |
+| `locale` | `string` | runtime locale | BCP 47 tag for month names. |
+
+`defaultValue` and `onChange` are omitted from the div props; everything else passes through.
+
+## Variants & sizes
+
+No variants and no sizes. The picker always uses the 40px row rail, five rows tall (200px), and fills its container's width.
+
+```tsx
+import {
+  Button,
+  DateWheelPicker,
+  Drawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@trading-game/design-intelligence-layer"
+
+// The profile pattern: "Add" opens a Drawer holding only the wheels and Save.
+const today = new Date()
+const adultCutoff = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate())
+
+const [draft, setDraft] = React.useState<Date>(dob ?? adultCutoff)
+
+<Drawer open={open} onOpenChange={setOpen}>
+  <DrawerContent dismiss="close">
+    <DrawerHeader>
+      <DrawerTitle>{dob ? "Edit" : "Add"} date of birth</DrawerTitle>
+    </DrawerHeader>
+    <div className="px-4">
+      <DateWheelPicker value={draft} onValueChange={setDraft} max={adultCutoff} />
+    </div>
+    <DrawerFooter>
+      <Button onClick={() => save(draft)}>Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+
+// A future range, year first, numeric months:
+<DateWheelPicker value={expiry} onValueChange={setExpiry} min={new Date()} order="ymd" monthFormat="numeric" />
+```
+
+**Responsive:** render the wheels in a Drawer on phones and [Calendar](./calendar.md) in a Popover on desktop, switching on `useIsMobile()`. The demo app's Date Wheel Picker page shows both behind the screen-mode toggle.
+
+## Tokens
+
+**Colour (semantic):**
+- band: `bg-background-brand-selected`
+- selected row: `text-text-brand-selected`. Other rows: `text-text-subtle-default`. Out of range: `text-text-disabled-default`
+- focus: 3px `ring-ring-focus-strong` around the focused wheel
+
+**Type (private):** `--date-wheel-picker-item-*`: 16 / 24, regular, with the selected row stepping to semibold (`--date-wheel-picker-item-selected-font-weight`) through a CSS data-attribute rule on `.type-date-wheel-picker-item[data-selected]`.
+
+## Behaviour
+
+- **Settling.** Rows snap to the band. The highlight follows the finger live, and `onValueChange` fires only after the wheel has rested for ~120ms.
+- **Range.** Dates outside `min`/`max` stay visible but greyed. A wheel that settles on one springs back to the nearest allowed row, and the highlight moves straight away rather than waiting for the animation. A month is disabled only when none of its days are in range. The year wheel lists only years in range.
+- **Clamping.** Changing month or year clamps the day to the month's length (31 → 30, Feb 28/29 in leap years) and then to the range.
+- **Always a value.** The wheels always show a date. To let people save without spinning, start the controlled value at the date the picker opens on, as the profile does with the 18-years-ago cutoff.
+- **Keyboard.** Each wheel is a spinbutton: Arrow Up/Down step one allowed row, Page Up/Down step five, Home/End jump to the first or last allowed row.
+- **Motion.** Smooth scrolling and the selected row's 4% scale both turn off under `prefers-reduced-motion`. On Android, each row passed gives a light vibration tick. iOS ignores it.
+
+## Do / Don't
+
+**Do**
+- Put it in a Drawer with a clear title ("Add date of birth") and a Save button in the footer.
+- Set `max` for age rules and `min` for future-only dates, so impossible dates never reach validation.
+- Open on a sensible date (the age cutoff, today, or the saved value) so most people spin a few rows, not decades.
+
+**Don't**
+- Don't add a text field or a readout that repeats the selected date.
+- Don't use it on desktop. The calendar grid is faster with a mouse.
+- Don't wrap it in its own card or border inside a Drawer. The Drawer is the surface.
+- Don't restyle the band with brand washes (`bg-brand-default/10`). The selected family is what keeps it legible in dark.

package/docs/components/item.md

@@ -13,7 +13,7 @@ Generic list row — media, title/description, and actions in one flex shell, wi
 
 - `ItemGroup` — `role="list"` column; auto-divider mode on by default. `data-slot="item-group"`, `data-divider`.
 - `ItemSeparator` — manual hairline (`Separator`). `data-slot="item-separator"`.
-- `Item` — the row (`rounded-md`, transparent hairline border for state changes). `data-slot="item"`, `data-variant`, `data-size`.
+- `Item` — the row (`rounded-2xl`, transparent hairline border for state changes). `data-slot="item"`, `data-variant`, `data-size`.
 - `ItemMedia` — leading icon/image slot; top-aligns itself when a description is present. `data-slot="item-media"`, `data-variant`.
 - `ItemContent` — flex-1 column for title + description. `data-slot="item-content"`.
 - `ItemTitle` — 14/medium/20 prominent ink. `data-slot="item-title"`.
@@ -27,13 +27,13 @@ Generic list row — media, title/description, and actions in one flex shell, wi
 
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `divider` | `boolean` | `true` | Draws a 1px `border-default-default` line (inset `inset-x-4`) after each non-last **default-variant** Item, in a 4px gap. `outline`/`muted` items are skipped so borders don't double. Pass `false` for flush stacks or manual `ItemSeparator`. |
+| `divider` | `boolean` | `true` | Draws a 1px `border-default-default` line (inset `inset-x-4`) after each non-last **default-variant** Item, in a 4px gap. `outline`/`fill`/`muted` items are skipped so borders don't double. Pass `false` for flush stacks or manual `ItemSeparator`. |
 
 ### Item
 
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `variant` | `"default" \| "outline" \| "muted"` | `"default"` | default transparent; outline = hairline `border-border-default-default` + hover fill; muted = `bg-background-secondary-surface`. |
+| `variant` | `"default" \| "outline" \| "fill" \| "muted"` | `"default"` | default transparent; outline = hairline `border-border-default-default` + hover glaze, no fill; **fill** = solid `bg-background-primary-surface` + the same hairline, hover steps to `background-secondary-surface`; muted = `bg-background-secondary-surface`, no border. |
 | `size` | `"default" \| "sm"` | `"default"` | default `gap-4 p-4`; sm `gap-2.5 px-4 py-3`. |
 | `asChild` | `boolean` | `false` | Render as link/button via Radix Slot; anchors get `hover:bg-background-hover-default`. |
 
@@ -73,11 +73,29 @@ import { BellIcon } from "lucide-react"
 </ItemGroup>
 ```
 
+### Picking between `outline` and `fill`
+
+Both draw the same hairline. They differ only on a **non-white** background:
+
+- On a Card, Sheet or Popover they are identical at rest — pick either.
+- On `background-primary-canvas` (a game screen, a ledger page), `outline` lets the canvas
+  show through and the row reads as part of the page. `fill` gives the row its own solid
+  plane — the wallet-ledger pattern, and the right default for trade lists.
+
+Every variant sits on `rounded-2xl` (18px) — the card radius Card, Dialog and Popover use.
+An Item is a content shell, not a menu row, so it takes the card corner rather than the
+tighter `rounded-md` it used previously.
+
+`fill` hover steps `primary-surface` -> `secondary-surface` rather than using the shared
+`background-hover-default` glaze, which is translucent and would let the canvas through a
+filled row instead of darkening it. The same override is repeated for `[a]:` because the
+base link hover uses that glaze and outranks a plain `hover:` on an anchor.
+
 ## Tokens
 
 **Colour (semantic):**
 - title `text-text-prominent-default`; description `text-text-subtle-default` (links underline, hover `text-text-brand-selected`)
-- outline: `border-border-default-default`, hover `bg-background-hover-default`; muted: `bg-background-secondary-surface`
+- outline: `border-border-default-default`, hover `bg-background-hover-default`; fill: `bg-background-primary-surface` + `border-border-default-default`, hover `bg-background-secondary-surface`; muted: `bg-background-secondary-surface`
 - group divider: `bg-border-default-default`
 - focus: `border-ring-focus-default` + 3px `ring-ring-focus-strong` (control ring)
 - icon media: `bg-background-secondary-surface` + `text-icon-prominent-default`
@@ -96,10 +114,10 @@ import { BellIcon } from "lucide-react"
 
 **Do**
 - Let `ItemGroup` draw dividers; only reach for `ItemSeparator` with `divider={false}`.
-- Use `rounded-md` rows as-is — 8px is the row radius tier.
+- Leave the radius alone — Item is `rounded-2xl` (18px), the card tier, not the 8px row tier.
 - Use `asChild` with a real `<a>`/`<button>` when the whole row navigates.
 
 **Don't**
-- Don't mix `variant="outline"` items into a dividered group expecting dividers — they are deliberately skipped.
+- Don't mix `variant="outline"` or `variant="fill"` items into a dividered group expecting dividers — they are deliberately skipped.
 - Don't push the title past medium 500; row titles never reach semibold, and bold does not exist in components.
-- Don't add shadows to muted/outline rows; state is shown by fill and hairline only.
+- Don't add shadows to muted/outline/fill rows; state is shown by fill and hairline only.

package/docs/components/toast.md

@@ -21,7 +21,7 @@ Transient notification system — a themed wrapper around `sonner` on the invers
 | --- | --- | --- | --- |
 | ...props | sonner `ToasterProps` | — | All pass through; the wrapper presets the values below (overridable). |
 
-Preset defaults: `theme` from `next-themes` (`useTheme`, fallback `"system"`); `position` `"top-center"` on mobile / `"bottom-right"` on desktop (`useIsMobile`); `visibleToasts` 1 mobile / 3 desktop; `duration` 4000ms; status icons CircleCheck / Info / TriangleAlert / OctagonX / spinning Loader2, all `size-4`.
+Preset defaults: `theme` `"system"` (no theme-provider dependency); `position` `"top-center"` on mobile / `"bottom-right"` on desktop (`useIsMobile`); `visibleToasts` 1 mobile / 3 desktop; `duration` 4000ms; status icons CircleCheck / Info / TriangleAlert / OctagonX / spinning Loader2, all `size-4`.
 
 ## Variants & sizes
 
@@ -49,7 +49,7 @@ toast.error("Deposit failed", {
 
 - Renders on the inverse surface: dark card on the light theme, light card on dark — with no border and no shadow class of its own.
 - Position and stack depth adapt to viewport: mobile shows a single toast top-center; desktop stacks up to three bottom-right.
-- Theme sync comes from `next-themes`, so the app must be inside a `ThemeProvider` for correct light/dark toasts.
+- No theme provider needed: the toast paints from inverse tokens, which already follow the app's `dark` class. Sonner's `theme` prop only reaches its cancel and close buttons, so apps that use those can pass `theme` explicitly.
 - Every toast auto-dismisses after 4 seconds unless overridden per call.
 - All sonner options (promise toasts, custom duration, `richColors` off by default) remain available through the `toast` API and `Toaster` props.
 

package/docs/foundations/colors.md

@@ -53,7 +53,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | `background-brand-hover` | black 16% over brand | (same recipe, re-derives) | Primary button hover — a state layer, not a scale step |
 | `background-brand-pressed` | black 32% over brand | (same recipe) | Primary button pressed |
 | `background-brand-selected` | blue-600 10% over white ≈ `#E9E9FF` | blue-400 24% over canvas ≈ `#121A55` | Selected/active fills: active nav row, current page, checked choice card |
-| `background-brand-container` | white 92% glaze over blue-600 (layered) | static — same | The icy brand panel (calendar selection). **Layered value — paint with `background:`, never `bg-*`** |
+| `background-brand-container` | white 92% glaze over blue-600 (layered) | static — same | The icy brand panel. **No current consumers** — Calendar's range band and Badge `tint` both moved to `background-brand-selected` because a static value cannot carry dark. Retained for the v1.0 sweep. **Layered value — paint with `background:`, never `bg-*`** |
 | `background-inverse-surface` | mono-1100 `#1C1C1C` | mono-50 `#FFFFFF` | The flipped surface (tooltips, toasts) |
 | `background-overlay-default` | black-alpha-50 | black-alpha-64 | Modal scrims |
 | `background-success-default` | green-50 | green-600 24% over canvas | Status tint surface (Section Message) |
@@ -80,7 +80,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | `text-on-brand-static` | mono-50 | static | White text on brand fills — never flips |
 | `text-on-brand-subtle-static` | white-alpha-64 | static | Secondary copy on a brand fill. On brand the ladder **inverts** — it descends from white through the alpha rungs instead of climbing the mono ramp (3.8:1 on blue-600, 2.7:1 on blue-400) |
 | `text-on-brand-disabled-default` | white-alpha-32 | white-alpha-24 | Disabled ink on a brand fill — 1.8:1 over blue-600, 1.5:1 over blue-400. **Not static**, unlike the rest of the on-brand family: the fill itself flips blue-600 → blue-400, and blue-400 caps white at 4.3:1, so the rung comes down with it. Replaces the `opacity-24` wash on on-brand variants |
-| `text-brand-container-static` | blue-600 | static | Ink on `background-brand-container` |
+| `text-brand-container-static` | blue-600 | static | Brand ink on a **static white** surface — Button `on-brand`, Toast's action button, Input selection. Still in use; do not retire with `background-brand-container` |
 | `text-static-black` | mono-1100 | static | Ink on `background-static-white` |
 | `text-success-default` / `-error-` / `-warning-` / `-information-` | status 600 | **static — same in both themes** (deliberate call) | Status text |
 | `text-on-status-static` | mono-50 | static | White on solid status fills (below AA on green/amber — deliberate style call) |
@@ -109,7 +109,7 @@ Several values are **recipes, not scale steps** — a solid base with a fixed la
 - **State layers**: hover = black 16% / pressed = black 32% mixed over the brand fill (`color-mix`), so any brand colour derives its own states.
 - **Dark surfaces**: white 6% / 12% mixed over the dark canvas — solid results, no translucency.
 - **Dark status tints**: status-600 at 24% mixed over the canvas — solid.
-- **Brand container**: a real two-layer paint (white 92% glaze over blue-600) — consume via `background: var(--background-brand-container)`.
+- **Brand container**: a real two-layer paint (white 92% glaze over blue-600) — consume via `background: var(--background-brand-container)`. Nothing consumes it today: it is static by construction, so anything needing a brand tint that survives dark takes `background-brand-selected` instead.
 - **On-brand sunken fields** (Input/InputGroup `variant="on-brand"`): `black-alpha-32` glaze fill + `white-alpha-24` border over whatever brand colour the consumer painted.
 - **Glass** (Button/NavigationButton `glass`, Card `glass`): `white-alpha-24` fill + border + `backdrop-blur-md`; hover 32, press 16. Theme-independent.
 

package/docs/foundations/shape-layout.md

@@ -24,9 +24,9 @@ Radius encodes the element's *class*, not taste:
 |---|---|---|
 | Actions — buttons, chips, pills, toggle pills | `rounded-full` | Button, Chip, Pagination cells, Bottom Navigation, badges, glass circles |
 | Icon buttons | circles (`rounded-full` on a square) | Navigation Button, Button icon sizes, Input Group icon buttons |
-| Cards & panels | `rounded-2xl` = **18px** | Card, Dialog, Alert Dialog, Popover, Hover Card, Empty shell, Drawer's attached edge (`rounded-t-2xl`) |
+| Cards & panels | `rounded-2xl` = **18px** | Card, Dialog, Alert Dialog, Popover, Hover Card, Empty shell, **Item** (every variant — a content shell, not a menu row), Drawer's attached edge (`rounded-t-2xl`) |
 | Menus & floating lists | `rounded-lg` = **10px** | Dropdown/Context/Menubar/Select panels, Menubar bar, Navigation Menu viewport |
-| Rows inside menus/lists | `rounded-md` = **8px** | Menu items, Item rows, Tabs triggers, Sidebar rows, Numpad keys |
+| Rows inside menus/lists | `rounded-md` = **8px** | Menu items, Tabs triggers, Sidebar rows, Numpad keys |
 | Form fields | `rounded-xs` = **4px** — deliberate, unchanged | Input, Textarea, Native Select, Input Group frame, OTP slot end caps — the whole text-entry family |
 | Checkboxes | `rounded-2xs` | Checkbox |
 

package/guides/brand-voice/trading-game-brand-voice.md

@@ -1,6 +1,6 @@
 # trading.game — Brand voice
 
-**Version:** 2.0 · April 2026
+**Version:** 2.1 · September 2026
 **Adds:** Channel-specific voice application per persona mode; anti-AI writing rules for all copy
 
 ---
@@ -106,7 +106,7 @@ The tone is not the same for all three modes. Edge Seekers respond to validation
 Give them something to be early on. Frame the product as a read, not a game.
 
 > "Vol 100 has been oscillating inside a 12-point range for three sessions.
-> Rise & Fall is pricing that in. If you've been watching it, now's the time."
+> Rise-Fall is pricing that in. If you've been watching it, now's the time."
 
 > "The fastest feedback loop on a market read.
 > Five ticks. Real price data. No waiting for a daily close."
@@ -163,7 +163,7 @@ Subject lines that work are different by mode:
 
 **Edge Seeker:**
 - "Your read on V_100 paid out."
-- "Rise & Fall is running on Vol 200. Your call."
+- "Rise-Fall is running on Vol 200. Your call."
 - "The chart moved where you said it would."
 
 **System Runner:**
@@ -228,7 +228,7 @@ State the thing. Then the implication for the player. Don't lead with your feeli
 
 | ✅ | ❌ |
 |---|---|
-| "Rise & Fall now runs on V_200. Higher vol, wider payout range. Check the multiplier before you trade." | "We're excited to announce an exciting new instrument! Amazing opportunity for all traders!" |
+| "Rise-Fall now runs on V_200. Higher vol, wider payout range. Check the multiplier before you trade." | "We're excited to announce an exciting new instrument! Amazing opportunity for all traders!" |
 | "Digits is live. Tick-based prediction on the last digit of a price feed. 1–10 ticks, six contract types." | "Introducing Digits, our innovative new game that revolutionises the prediction experience!" |
 | "Withdrawal processing is now instant. Not 'faster.' Instant." | "We've made some improvements to our withdrawal process for a more seamless experience." |
 
@@ -266,9 +266,9 @@ The other difference: HyperSwap assumes DeFi fluency. We can't. Some players hav
 
 | HyperSwap register | trading.game register |
 |---|---|
-| "SWAP Genesis is live. Early believers get rewarded 🔥" | "Rise & Fall is live on V_100. Edge is 2%. The rest is skill." |
+| "SWAP Genesis is live. Early believers get rewarded 🔥" | "Rise-Fall is live on V_100. Edge is 2%. The rest is skill." |
 | "Swappies, the airdrop is coming 🚀" | "Your win rate this week: 54%. Baseline is 50%. You're ahead." |
-| "Earn boosted rewards for LPs 💰" | "Transferred 20 USDT to GridRush. Your capital, your call." |
+| "Earn boosted rewards for LPs 💰" | "Transferred 20 USDT to Box-O. Your capital, your call." |
 
 ---
 
@@ -292,11 +292,10 @@ The other difference: HyperSwap assumes DeFi fluency. We can't. Some players hav
 
 | Correct | Not |
 |---|---|
-| Rise & Fall | Rise and Fall / Rise/Fall |
-| GridRush | Grid Rush / Grid rush |
-| Swipe Cards | Swipe-Cards / SwipeCards |
+| Rise-Fall | Rise & Fall / Rise and Fall / Rise/Fall |
+| Box-O | BoxO / Box O / GridRush |
+| Swipe | Swipe Cards / Swipe-Cards / SwipeCards |
 | Digits | The Digits game |
-| Dice | The Dice game |
 
 ### Formatting
 
@@ -322,4 +321,4 @@ Before publishing anything:
 
 ---
 
-*trading.game Brand Voice — v2.0*
+*trading.game Brand Voice — v2.1*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.0.7",
+  "version": "1.2.0",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -25,12 +25,13 @@
   "scripts": {
     "dev": "next dev -H 127.0.0.1 -p 4000",
     "generate:registry": "node scripts/generate-component-registry.mjs",
-    "build": "tsup",
+    "build": "tsup && npm run check:dist",
     "build:next": "next build",
     "start": "next start",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
     "check:tokens": "node scripts/check-token-docs.mjs",
+    "check:dist": "node scripts/check-dist-imports.mjs",
     "predev": "rm -rf .next"
   },
   "files": [

package/src/styles.css

@@ -1245,6 +1245,10 @@
   --numpad-font-size: var(--primitive-font-size-20);
   --numpad-font-weight: var(--primitive-font-weight-medium);
   --numpad-line-height: var(--primitive-line-height-28);
+  --date-wheel-picker-item-font-size: var(--primitive-font-size-16);
+  --date-wheel-picker-item-line-height: var(--primitive-line-height-24);
+  --date-wheel-picker-item-font-weight: var(--primitive-font-weight-regular);
+  --date-wheel-picker-item-selected-font-weight: var(--primitive-font-weight-semibold);
   /* ── Pagination — component type tokens (private) ── */
   --pagination-font-size: var(--primitive-font-size-14);
   --pagination-font-weight: var(--primitive-font-weight-semibold);
@@ -1820,6 +1824,17 @@
   font-weight: var(--numpad-font-weight);
 }
 
+/* Date Wheel Picker rows — the selected row steps to semibold. A data-attribute
+   rule, not a variant: .type-* classes can't be gated by utilities. */
+.type-date-wheel-picker-item {
+  font-size: var(--date-wheel-picker-item-font-size);
+  line-height: var(--date-wheel-picker-item-line-height);
+  font-weight: var(--date-wheel-picker-item-font-weight);
+}
+.type-date-wheel-picker-item[data-selected] {
+  font-weight: var(--date-wheel-picker-item-selected-font-weight);
+}
+
 .type-pagination {
   font-size: var(--pagination-font-size);
   line-height: var(--pagination-line-height);