@trading-game/design-intelligence-layer 1.0.5 → 1.0.6

package/AGENTS.md

@@ -16,7 +16,7 @@ Rules of engagement for AI agents building with `@trading-game/design-intelligen
 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).
 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 tokens, never `opacity`.** An element `opacity` dims the fill and the ink on top of it by the same factor, so the relationship between them collapses — a disabled `primary` Button used to render its white label at ~1.6:1 on its own washed fill and vanish. Use the trio: `text-disabled-default` for ink, `background-disabled-default` for the surface, `border-disabled-default` for the edge. The background token is a **glaze** — lay it 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`. The only sanctioned `opacity-24` left is Button's `loading`.
+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.
 
 ## Composition patterns
@@ -61,7 +61,7 @@ Docs: `docs/components/<kebab-name>.md` for every entry.
 | Command | Searchable command palette (menu family) |
 | Context Menu | Right-click menus (menu family) |
 | Dialog | Centred modal panels for tasks/forms |
-| Drawer | Bottom/top/side sheets on mobile (vaul); grab handle on bottom |
+| 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) |
 | Empty | Zero-state placeholder with icon tile, title, action |
 | Field | Form field wrapper: label + control + helper/error, size cascade |
@@ -103,7 +103,7 @@ Docs: `docs/components/<kebab-name>.md` for every entry.
 | Toggle / Toggle Group | Chip-treatment pressed buttons; the group joins them into segmented sets — one docs page (`toggle.md`) |
 | Tooltip | Hover hints; inverse surface default, bordered-white `inverse` variant; renders as a Drawer on mobile |
 
-**Blocks** (`components/blocks/`: NavBar, Hero, Auth, FAQ, Header Navigation, Open Positions, Result, Game Loading) are pre-composed sections — currently awaiting their token-migration pass; prefer components until then.
+**Blocks** (`components/blocks/`: NavBar, Hero, Auth, FAQ, Header Navigation, Open Positions, Result, Game Loading) are pre-composed sections — most are still awaiting their token-migration pass, so prefer components until then. **Game Loading is migrated**: it sits on `background-tinted-canvas`, takes its ink from the page ladder, and needs a `logoSrc` prop because a packaged block cannot reach into a consuming app's asset folder — pass the theme-matched mark. That same URL draws the resting mark and cuts the hole its exit reveal grows, so the two always agree.
 
 ## Demo & source of truth
 

package/README.md

@@ -81,7 +81,7 @@ React 18+, ReactDOM, Tailwind CSS v4+.
 - **A tuned ink ladder** — prominent → subtle → disabled is set by the *gap* between steps rather than by matching ramp positions, and the inverse family is defined as the opposite theme's page ladder rather than a bespoke construction. On a brand fill the ladder inverts, descending from white through the sanctioned alpha rungs (`text-on-brand-subtle-static`, `text-on-brand-disabled-default`)
 - **Tinted canvas** — the signature screen background (`--background-tinted-canvas`): a blue aurora melting into the canvas, pure token math, applied once on the page root
 - **The frosted family** — `variant="frosted"` (brand-tinted glass on page surfaces) and `variant="frosted-on-brand"` (white frost on art) across Button, NavigationButton, and Card
-- **Disabled is tokenised, not dimmed** — no element `opacity` anywhere: `text-disabled-default` ink, a `background-disabled-default` *glaze* laid over each variant's own fill (white 24% in light, black 50% in dark), and `border-disabled-default` for the edge. So a disabled `primary` still reads as a filled brand button rather than losing its label, and disabled states never compound through nested elements
+- **Disabled is decided per variant and per theme** — the default construction is tokenised rather than dimmed: `text-disabled-default` ink, a `background-disabled-default` *glaze* laid over each variant's own fill (white 24% in light, black 24% in dark), and `border-disabled-default` for the edge, so a control drains without losing its identity and never compounds through nested elements. A named set of exceptions uses element `opacity` where the fade reads better than a glaze: Button `primary` and the selection controls at 24%, Button `frosted` at 40% on its already-tinted fill, and Button `secondary` at 24% in light while dark keeps a black-24% glaze. The trade is explicit — opacity drains a fill and its ink together, so a faded label loses contrast against its own surface
 - **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