@trading-game/design-intelligence-layer 0.17.3 → 0.17.4

package/guides/design-system-guide/trading-game-ds-guide.md

@@ -415,7 +415,7 @@ The design system uses a custom radius scale (base = 10px). Use these named toke
 | `primary-inverse`    | `bg-primary-inverse` | `text-on-primary-inverse`   | none                                     | `bg-primary-inverse/80`     | Dark/coloured surfaces |
 | `secondary`          | transparent          | `text-on-prominent`         | `border-[1.5px] border-border-prominent` | `bg-secondary-hover`        | Light surfaces         |
 | `secondary-inverse`  | transparent          | `text-on-prominent-inverse` | `border-[1.5px] border-primary-inverse`  | `bg-primary-inverse/10`     | Dark/coloured surfaces |
-| `tertiary`           | transparent          | `text-primary`              | none                                     | `bg-primary/[0.08]`         | Light surfaces         |
+| `tertiary`           | transparent          | `text-on-prominent`         | none                                     | `bg-secondary-hover`        | Light surfaces         |
 | `tertiary-inverse`   | transparent          | `text-on-primary`           | none                                     | `bg-on-primary/[0.10]`      | Dark/coloured surfaces |
 
 ### 6.2 — Sizes
@@ -589,9 +589,9 @@ These are styling behaviors you can't discover from TypeScript types alone:
 
 | Component | Note |
 |-----------|------|
-| Button | `font-display font-bold`, sentence case (no `uppercase`). **Variants:** `primary` (blue fill, light surfaces), `primary-inverse` (white fill + blue text, dark/coloured surfaces), `secondary` (black outline, light surfaces), `secondary-inverse` (white outline + white text, dark/coloured surfaces), `tertiary` (text-only, light surfaces). **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner`, hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
+| Button | `font-display font-bold`, sentence case (no `uppercase`). **Variants:** `primary` (blue fill, light surfaces), `primary-inverse` (white fill + blue text, dark/coloured surfaces), `secondary` (black outline, light surfaces), `secondary-inverse` (white outline + white text, dark/coloured surfaces), `tertiary` (text-only, black text, light surfaces — `text-on-prominent` hover `bg-secondary-hover`). **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner`, hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
 | Card | Flat by default (no shadow). Add elevation manually: `className="shadow-sm"` |
-| Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px) |
+| Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px). **Read-only:** pass the native `readOnly` prop — renders with `border-transparent bg-subtle/60`, `pointer-events-none` (non-interactive, non-focusable). Use to display a value that the user should not be able to edit. |
 | InputGroup | Wraps `Input` with inline addons (icons, buttons, text). **Sizes:** `sm` (h-8) / `md` (h-10, default) / `lg` (h-12) — pass `size` to `InputGroup`, it flows to `InputGroupInput` via context. **Padding:** when any `inline-start` or `inline-end` addon is present, input text gets equal `pl-2 pr-2` (8px) on both sides for visual symmetry. Without addons, Input's default `px-3`/`px-4` applies. |
 | InputOTP | **Variants:** OTP 4 digits (single group, 4 slots), OTP 6 digits (single group, 6 slots), OTP 6 split (two groups of 3 with `InputOTPSeparator`), OTP 8 digits (single group, 8 slots), OTP 6 separated (each slot in its own `InputOTPGroup` for individually spaced boxes). Slot: `h-9 w-9`, `border-border-subtle`, `rounded-sm` on first/last. Focus: `border-primary` + `ring-primary/[0.08]`. |
 | NavigationButton | Icon-only tertiary button for navigation. `text-on-prominent` (black icons), `hover:bg-secondary-hover`. **Sizes (8-point grid):** `lg` 48px / 24px icon, `md` 40px / 20px icon, `sm` 32px / 20px icon, `xs` 24px / 16px icon. States: focus `ring-ring/50`, active `opacity-60`, disabled `opacity-24`. Supports `asChild`. |
@@ -915,3 +915,19 @@ import { ResultDialog } from "@trading-game/design-intelligence-layer"
 ```tsx
 <Input type="email" placeholder="Enter your email" />
 ```
+
+**Read-only input:**
+```tsx
+<Input value="Read-only value" readOnly />
+```
+
+---
+
+## 11 — Release Notes
+
+### v0.17.4
+
+- **Button `tertiary` variant** — text color changed from `text-primary` (blue) to `text-on-prominent` (black). Hover changed from `bg-primary/[0.08]` to `bg-secondary-hover`. Use `tertiary-inverse` for white text on dark/coloured surfaces (unchanged).
+- **Input `readOnly` state** — native `readOnly` prop now has a distinct visual treatment: `border-transparent`, `bg-subtle/60`, `pointer-events-none`. Renders as a non-interactive display field. Clearly distinguishable from both the default (bordered) and `disabled` (faded/greyed) states.
+- **Demo page sidebar** — replaced custom `<aside>` + plain buttons with the design system `Sidebar` component (`SidebarProvider`, `SidebarMenu`, `SidebarMenuButton` with `isActive`).
+- **Demo page layout** — removed `max-w-5xl` content cap; content now uses the full available width.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,7 +23,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "dev": "next dev -H 127.0.0.1 -p 3000",
+    "dev": "next dev -H 127.0.0.1 -p 4000",
     "generate:registry": "node scripts/generate-component-registry.mjs",
     "build": "tsup",
     "build:next": "next build",