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

package/AGENTS.md

@@ -14,7 +14,7 @@ Rules of engagement for AI agents building with `@trading-game/design-intelligen
 8. **Dark is not a mirror.** Never build a light-theme construction and assume it inverts. If a token pair doesn't exist for what you need, stop and ask — don't improvise per-theme values in a component.
 9. **Typography via type classes.** Component text uses its `.type-<component>-*` class (backed by private `--<component>-*` tokens). No `text-sm`, no `text-[13px]`, no `font-bold`.
 10. **`.type-*` classes are plain CSS, not utilities**: variants can't gate them (`data-[x]:type-foo` does nothing — pick the class in JSX or write a CSS data-attribute rule), and they beat layered `font-*` utilities.
-11. **Radius encodes element class** — buttons/chips `rounded-full`, icon buttons circles, cards/dialogs `rounded-2xl`, menus `rounded-lg`, menu rows `rounded-md`, inputs `rounded-xs` (deliberate, don't "fix" it).
+11. **Radius encodes element class** — buttons/chips `rounded-full`, icon buttons circles, cards/dialogs **and Item** `rounded-2xl`, menus `rounded-lg`, menu rows `rounded-md`, inputs `rounded-xs` (deliberate, don't "fix" it). `rounded-md` means a row *inside* a menu or list panel (menu items, Tabs triggers, Sidebar rows, Numpad keys). An `Item` is a content shell in its own right, so it takes the card corner — don't "correct" it back to 8px.
 12. **Sizes sit on the 32/40/48 rail**, default `md` (40px). Button padding-x = height/2 − 4, gap 8, and padding never changes when icons are hidden.
 13. **Disabled is chosen per variant and per theme.** There is no single rule; each cell is a deliberate decision and changing one must not disturb the others. The default construction is the token trio — `text-disabled-default` for ink, `background-disabled-default` for the surface, `border-disabled-default` for the edge — where the background token is a **glaze**, laid on `background-image` (`[background-image:linear-gradient(var(--background-disabled-default),var(--background-disabled-default))]`) so the variant's own fill stays underneath and each variant keeps its identity. Fill-less variants (`tertiary`, ghost rows, menu items) take the ink only. On-brand surfaces stay on the static white ladder with `text-on-brand-disabled-default`. **Sanctioned `opacity` exceptions**, by explicit decision (2026-09-09): Button `primary` in both themes and Button `secondary` in light take `opacity-(--opacity-disabled)` (24%); Button `secondary` in dark keeps full opacity and takes a black-24% glaze instead; Button `frosted` fades to `opacity-(--opacity-disabled-frosted)` (40%) in both themes, keeping its brand ink — 24% left almost nothing visible on a fill that is already only a 10–24% brand tint, so the strength is per-variant and lives in its own token. Button's `loading` also stays on `opacity-24`. Be aware of what element `opacity` costs: it dims a fill and the ink on top of it by the same factor, so their relationship collapses — the light disabled `primary` label lands at 1.14:1 on its own washed fill and is not readable. WCAG 1.4.3 exempts inactive controls, so this is a legibility trade accepted on purpose, not a compliance break. Do not extend `opacity` to other components without the same explicit decision.
 14. **Focus** = `focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong` (controls) or `ring-ring-focus-soft` (text fields). Error ring = `ring-ring-error-soft`. Every colour must be a plain named token — no alpha-modified constructions, no colour primitives outside the sanctioned glass-ladder set; `npm run check:tokens` enforces both and diffs the Colors page against styles.css.
@@ -48,7 +48,7 @@ Docs: `docs/components/<kebab-name>.md` for every entry.
 | Alert Dialog | Blocking confirm/cancel decisions (destructive actions) |
 | Aspect Ratio | Fixed-ratio media containers |
 | Avatar | User images with fallback initials, groups, count overflow |
-| Badge | Small status/category markers (solid, tint, outline; status = 600 fills) |
+| Badge | Small status/category markers (`solid` / `tint` families, meaning as the suffix; status = 600 fills). `size="count"` is the 18px numeric disc — circle at one digit, pill beyond; caller owns zero-hiding, the 99+ cap and any knockout ring |
 | Banner | Editorial gradient promo panel with art, copy, white pill CTA |
 | Bottom Navigation | Mobile bottom nav, max 4 destinations (3 is the norm) — chrome frost bar, liquid selection bubble; the phone counterpart of Sidebar |
 | Breadcrumb | Hierarchical location trail |
@@ -60,6 +60,7 @@ Docs: `docs/components/<kebab-name>.md` for every entry.
 | Checkbox | Boolean form input |
 | Command | Searchable command palette (menu family) |
 | Context Menu | Right-click menus (menu family) |
+| Date Wheel Picker | Phone date picking: day / month / year scroll wheels behind one selected-family band, `min`/`max` greyed and skipped. Owns no surface: compose it into a Drawer with a title and Save. Desktop uses Calendar in a Popover. Never pair it with a field that repeats the date |
 | Dialog | Centred modal panels for tasks/forms |
 | Drawer | Bottom/top/side sheets on mobile (vaul); `dismiss="handle"` grab handle on bottom (default) or `dismiss="close"` for the Dialog/Sheet close button in any direction |
 | Dropdown Menu | Click-triggered action menus (menu family) |
@@ -69,7 +70,7 @@ Docs: `docs/components/<kebab-name>.md` for every entry.
 | Input | Single-line text field; sizes sm/md/lg; `on-brand` variant |
 | Input Group | Things inside a field: prefix/suffix text, icons, pill buttons |
 | Input OTP | Segmented one-time-code entry |
-| Item | List rows with media/title/description/actions (default, outline, muted) |
+| Item | List rows with media/title/description/actions. `default` transparent, `outline` hairline only, `fill` hairline + solid surface (the ledger pattern — use it on the page canvas, where `outline` lets the canvas through), `muted` secondary surface |
 | Label | Form label (14/medium); colour inherits so Field error ink flows through |
 | Link | Inline/standalone links — quiet at rest, underline + darker ink on hover; `tone="on-brand"` |
 | Menubar | Horizontal app menu bar (menu family) |

package/README.md

@@ -1,6 +1,6 @@
 # Champion Trade Design System
 
-The component library and token architecture for **Champion Trade** (formerly Trading Game) — a Tailwind CSS v4 + React design system with a strict semantic token layer, per-component typography tokens, light and dark themes, and 59 production components.
+The component library and token architecture for **Champion Trade** (formerly Trading Game) — a Tailwind CSS v4 + React design system with a strict semantic token layer, per-component typography tokens, light and dark themes, and 60 production components.
 
 > **Package name:** published as `@trading-game/design-intelligence-layer`. The Champion Trade npm scope rename is parked for a future major — install and import under the current name below.
 
@@ -74,7 +74,7 @@ React 18+, ReactDOM, Tailwind CSS v4+.
 
 ## What's inside
 
-- **59 components** — forms, overlays, menus, navigation, data display, plus trading-specific pieces (Numpad, the Stepper amount tray, Slide to Confirm, Steps timelines, Bottom Navigation with its liquid selection bubble + AI circle, Profile Photo, and the Result Snackbar for a settled win or loss)
+- **60 components** — forms, overlays, menus, navigation, data display, plus trading-specific pieces (Numpad, the Date Wheel Picker for phone date entry, the Stepper amount tray, Slide to Confirm, Steps timelines, Bottom Navigation with its liquid selection bubble + AI circle, Profile Photo, and the Result Snackbar for a settled win or loss)
 - **Three-layer token architecture** — primitives → semantics → component type tokens; components consume semantic colour tokens only, and `npm run check:tokens` fails the build on any drift (undocumented tokens, primitives in components, alpha-modified colour constructions)
 - **Three-layer motion system** — duration/easing primitives → semantic roles (hover, press, surface, overlay) → named signature moves (the liquid travel spring, the arrival pop); overlay animations ship with the package
 - **Light + dark themes** — dark is designed, not mirrored: its own surface mixes, selection fills, and ink steps; every selected/current-state marker (calendar today, breadcrumb page, links, radio, nav bubble) speaks the brand-selected ink family in dark
@@ -85,7 +85,7 @@ React 18+, ReactDOM, Tailwind CSS v4+.
 - **Position indicators** — Pagination ships three forms of "which of N am I on": numbered cells, `PaginationDots` (active dot widens to a pill) and `PaginationBar` (segmented). Carousel exposes its index and composes them via `CarouselDots`, so there is exactly one indicator implementation
 - **No shadows** — elevation is hairlines and surface steps, with two sanctioned shadows: the floating-chrome lift (Bottom Navigation, Result Snackbar) and the Slide to Confirm handle's brand glow
 - **Pill shape system** — buttons and chips are pills, icon buttons are circles, cards 18px, menus 10px, form fields 4px; every control on the 32/40/48 rail
-- **AI-readable in `node_modules`** — AGENTS.md, all 58 component pages (Toggle and Toggle Group share one), foundations, and patterns ship inside the npm tarball
+- **AI-readable in `node_modules`** — AGENTS.md, all 59 component pages (Toggle and Toggle Group share one), foundations, and patterns ship inside the npm tarball
 - **TypeScript, ESM + CJS**
 
 ## Documentation
@@ -112,4 +112,6 @@ npm run dev   # Next.js demo at http://localhost:4000 — every component, light
 npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
 ```
 
+**1.2.0** adds the Date Wheel Picker (`DateWheelPicker`) — day / month / year scroll wheels for picking dates on a phone, composed into a Drawer. It also fixes 1.1.0's Toaster, which imported `next-themes` and broke any app that didn't have it installed (`Can't resolve 'next-themes'`). The Toaster no longer needs a theme provider. If you pinned to 1.1.0 or added `next-themes` only to work around that, you can upgrade and remove it.
+
 Deprecated token aliases and component aliases (e.g. Button `variant="glass"` → `frosted-on-brand`, Input `variant="inverse"`, NativeSelect `size="default"`) keep working throughout 1.x; they are removed in one breaking sweep at the **next major**, alongside the Champion Trade package rename.