@trading-game/design-intelligence-layer 1.0.6 → 1.1.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/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/stepper.md

@@ -12,17 +12,17 @@ The mobile amount tray — a centred amount with frosted − / + circles either
 
 - Container — full-width row, `data-slot="stepper"`, `data-disabled`.
 - − / + — composed `<Button variant="frosted" size="icon-lg">` (48px brand-selected tint circles); each disables at its bound.
-- Two rows — the optional uppercase `label` spans the whole control, then a 4px gap, then the `−` / amount / `+` row. The label is deliberately **not** nested in the value column: doing so made the buttons centre against the label-plus-amount stack, which dropped them off the amount's centre line.
+- Two rows — the optional sentence-case `label` spans the whole control, then a 4px gap, then the `−` / amount / `+` row. The label is deliberately **not** nested in the value column: doing so made the buttons centre against the label-plus-amount stack, which dropped them off the amount's centre line.
 - Centre of the row — the editable amount (`role="spinbutton"`, tabular semibold figure), flanked by the two circles.
 
 ## API
 
 | Prop | Type | Default | Notes |
 | --- | --- | --- | --- |
-| `label` | `ReactNode` | — | Uppercase label above the amount, e.g. `"Stake (USDT)"`. |
+| `label` | `ReactNode` | — | Sentence-case caption above the amount, e.g. `"Stake (USDT)"`. Renders in the shared `caption` type style, so a Stepper sits level with other captioned controls in a form row. |
 | `value` / `defaultValue` | `number` | `0` | Controlled / uncontrolled. |
 | `onValueChange` | `(n: number) => void` | — | |
-| `min` / `max` | `number` | ±∞ | Buttons disable at the bounds; typed values clamp on commit. |
+| `min` / `max` | `number` | ±∞ | Buttons disable at the bounds; typed values clamp on commit. Bounds need not sit on the step grid — `min={0.5} step={1}` is legal and `0.5` is exactly reachable. |
 | `step` | `number` | `1` | Decimal steps set the display precision (0.5 → "2.50"). |
 | `disabled` | `boolean` | `false` | Pointer events off; the `+`/`−` render Button's own disabled state and the label and amount switch to `text-disabled-default`. No wash on the wrapper — stacking one over the Buttons' own dim multiplied to ~6% and made them invisible. |
 | `placeholder`, `id`, `name`, `aria-label` | | — | Pass-through to the amount input. |
@@ -41,12 +41,13 @@ import { Stepper } from "@trading-game/design-intelligence-layer"
 
 | Token | Value |
 | --- | --- |
-| `--stepper-stake-label-*` | 12 / medium / 16, tracked uppercase |
-| `--stepper-stake-amount-*` | 24 / semibold / 32, tabular |
+| `--stepper-stake-label-*` | Aliases `--type-caption-*` — 12 / medium / 16 / `tracking-loose`, sentence case |
+| `--stepper-stake-amount-*` | 20 / semibold / 28, tabular — matches [Numpad](./numpad.md)'s digit size |
 
 ## Behaviour
 
-- The amount is directly editable: type, then blur or Enter commits (clamped to min/max, rounded to the step's precision); ArrowUp/ArrowDown step the value.
+- The amount is directly editable: type, then blur or Enter commits; ArrowUp/ArrowDown step the value.
+- **The bounds are exempt from step rounding.** A value at or past a bound commits as exactly that bound; only values strictly inside the range are rounded to the step's precision (then clamped as a backstop). So `min`/`max` are both exactly *reachable* and *stable* even when they sit off the step grid: with `min={0.5} step={1}`, decrementing from `1` lands on `0.5` and stays there across blur and re-commit. Rounding a bound would move the value off it — `Math.round(0.5)` is `1` — and a clamp afterwards can't undo that, since `1` is inside the range; the pre-1.0.7 component rounded after clamping and so returned `1` forever, making `min` unreachable.
 - `onValueChange` fires with the committed number.
 - Full-width by default — constrain with `className` (`max-w-90` in the demo).
 
@@ -54,8 +55,10 @@ import { Stepper } from "@trading-game/design-intelligence-layer"
 
 **Do**
 - Put the unit in the `label` ("Stake (USDT)").
+- Write `label` copy in sentence case; currency codes stay capitalised as proper nouns.
 - Pair with [Numpad](./numpad.md) on mobile amount screens.
 
 **Don't**
 - Don't use it for long-range values — that's [Slider](./slider.md).
 - Don't hide the label on money amounts; the unit matters.
+- Don't hand-roll a caption above a Stepper to dodge the label's case — use `label`.

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/docs/foundations/typography.md

@@ -68,6 +68,18 @@ Recurring ladders:
 - **Overlay titles** (Dialog, Alert Dialog, Drawer, Sheet, Empty): 18/semibold/24; their descriptions 14/regular/20.
 - **Small labels** (Badge sm, Kbd-like chips, Sidebar labels, Bottom Navigation, menu headings): 12/16, medium.
 - **Helper text** (Field description/error): fixed **12/16 at every field size** — help text never scales with the control.
+- **Standalone figures** (Stepper amount, Input OTP, Numpad keys): **20/28**. Weight varies with the job — the Stepper amount and OTP are semibold, Numpad keys medium — but the size is fixed, so a value typed on the pad reads at the same size in the tray above it. Only the Stepper amount adds `tabular-nums`, since it is the one that changes in place while the user holds `−` / `+`.
+
+### Aliasing a foundation style
+
+A component token normally points at a **primitive** step. Point it at a **semantic** `--type-*` instead when the component's text does the same job as a foundation style, so the two cannot drift apart:
+
+```css
+--stepper-stake-label-font-size: var(--type-caption-size);
+--stepper-stake-label-tracking: var(--type-caption-tracking);
+```
+
+The Stepper's `label` names the control beneath it — a caption's job — so it aliases `--type-caption-*` rather than re-declaring 12/16. Reserve this for a genuine role match: aliasing because two things happen to share a size today just couples them by accident.
 
 ## The one shared family: `--menu-*`
 

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.6",
+  "version": "1.1.0",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -1165,12 +1165,13 @@
   --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-label-font-size: var(--type-caption-size);
+  --stepper-stake-label-font-weight: var(--type-caption-weight);
+  --stepper-stake-label-line-height: var(--type-caption-line);
+  --stepper-stake-label-tracking: var(--type-caption-tracking);
+  --stepper-stake-amount-font-size: var(--primitive-font-size-20);
   --stepper-stake-amount-font-weight: var(--primitive-font-weight-semibold);
-  --stepper-stake-amount-line-height: var(--primitive-line-height-32);
+  --stepper-stake-amount-line-height: var(--primitive-line-height-28);
 
 /* ── Progress — component type tokens (private) ── */
   --progress-label-font-size: var(--primitive-font-size-12);
@@ -1981,8 +1982,7 @@
   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;
+  letter-spacing: var(--stepper-stake-label-tracking);
 }
 
 .type-stepper-stake-amount {