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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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 {