@trading-game/design-intelligence-layer 0.15.3 → 0.16.0

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

@@ -520,7 +520,7 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Component | Tag | Sub-components |
 |-----------|-----|----------------|
 | Accordion | [composed] | AccordionItem, AccordionTrigger, AccordionContent |
-| Alert | [composed] | AlertTitle, AlertDescription |
+| Alert | [simple] | — (flat-prop API: `variant`, `layout`, `title`, `description`, `icon`, `action`, `actions`, `onDismiss`, `dismissLabel`) |
 | AlertDialog | [complex] | AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogMedia |
 | AspectRatio | [simple] | — |
 | Avatar | [composed] | AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount |
@@ -604,6 +604,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Slider | Thumb: square `rounded-[4px]`, `bg-primary`. Track range: `bg-slider-range` |
 | Dialog/Sheet | Footer buttons should use `size="md"`. Overlay: `bg-overlay` |
 | Menubar | Hover: `bg-primary/[0.08]`. Open state: `bg-primary/10` |
+| Alert | Dismissible in-page notification. Flat-prop API — pass `title` / `description` / `icon` / `action` / `actions` / `onDismiss` directly; no sub-components. **Variants:** `default` (white surface + `border-border-subtle`), `brand` (solid `bg-primary`, white text), `info` (`bg-semantic-info/10`), `warning` (`bg-semantic-warning/10`), `danger` (`bg-semantic-error/10`), `success` (`bg-semantic-win/10`). **Layouts:** `inline` (single row: icon · body · optional action · close X) and `card` (icon · body · close X top-right; up to 2 buttons at bottom-left). **Buttons:** `action` (inline, max 1) and `actions` (card, max 2). Strings get wrapped automatically; React elements pass through. Brand uses `Button variant="primary-inverse"`; every other variant uses `Button variant="secondary"` at `size="sm"`. **Title colour:** `text-on-prominent` for every variant except `brand` (uses `text-on-primary`). **Icon colour:** the variant accent (`text-semantic-info` etc.) so the icon carries the severity signal; pass `icon={null}` to omit, or any `ReactNode` to override the per-variant default (`Info`, `Sparkles`, `Info`, `AlertTriangle`, `XCircle`, `CheckCircle2`). **Single-line height:** `h-12` (48px) fixed, all elements centered when only `title` or only `description` is provided in inline layout. **Dismiss:** controlled — `onDismiss` callback; parent owns visibility. **A11y:** `role="alert"` + `aria-live="assertive"` for `danger`/`warning`; `role="status"` + `aria-live="polite"` for the rest. |
 | Badge | Variants: `default` (solid blue), `default-success`, `default-fail`, `default-warning` (all use `bg-semantic-*` + matching `text-on-semantic-*` foreground); `fill` (blue tint), `fill-success`, `fill-fail`, `fill-warning`; `fill-boost` (amber-orange tint — `bg-semantic-boost/16` bg + `text-on-semantic-boost` foreground — use for boost/bonus labels, always pair with a `Rocket` icon); `outline`; `ghost`, `ghost-success`, `ghost-fail`. Base class no longer applies `tracking-wide` — letter spacing is default. |
 | TicketCard | **Icon:** pass any `ReactNode` via `icon`. Icon container: `size-10` rounded-full, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) render in sentence case — do NOT apply `uppercase` or `tracking-widest`. Stub: `w-[100px]` `bg-primary` button, `text-on-primary`, shimmer sweep animation. Disabled stub: `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box — do NOT put `overflow-hidden` on the card wrapper. **`compact`** (default `false`): `true` = mobile layout — reduces left-content horizontal padding from `px-4 gap-4` to `px-2 gap-2`. **For boost use cases:** use `BoostTicketCard` instead — it renders a `<Badge variant="fill-boost">` inline below the value. |
 | BoostTicketCard | Same visual shell as `TicketCard` (perforation notches, tear-line, shimmer stub). The card height is **variable** (grows with content via `py-4`) rather than fixed at `h-20`. The boost is displayed as an inline `<Badge variant="fill-boost" size="sm">` with a leading `Rocket` icon and a trailing `Info` icon: *"Boost: {boostAmount} {boostCurrency}"*. Tokens used: `bg-subtle`, `bg-primary`, `bg-primary-hover`, `text-on-primary`, `bg-semantic-boost/16`, `text-on-semantic-boost`. Supports `compact` prop for mobile layout (same padding reduction as `TicketCard`). |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.15.3",
+  "version": "0.16.0",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -57,6 +57,7 @@
   --color-semantic-win: var(--semantic-win);
   --color-semantic-loss: var(--semantic-loss);
   --color-semantic-warning: var(--semantic-warning);
+  --color-semantic-error: var(--semantic-error);
   --color-semantic-boost: var(--semantic-boost);
   --color-semantic-boost-surface: var(--semantic-boost-surface);
   --color-alert-info-text: var(--alert-info-text);
@@ -158,7 +159,7 @@
   /* #008832 */
 
   /* ── Sky ── */
-  --primitive-sky-600: #3DAAFF;
+  --primitive-sky-600: oklch(0.6 0.18 245);
   /* #3DAAFF */
 
   /* ── Red ── */
@@ -185,6 +186,10 @@
   --primitive-amber-800: oklch(0.40 0.10 52);
   /* #713813 — dark amber/brown; ticket boost label text */
 
+  /* ── Yellow ── */
+  --primitive-yellow-500: oklch(0.65 0.16 82);
+  /* #E0AE00 — golden warning yellow; clearly distinct from orange/red */
+
   /* ── Violet ── */
   --primitive-violet-500: oklch(0.601 0.263 301.6);
   /* #A040FF */
@@ -297,7 +302,7 @@
   /* #FFFFFF — text/icon color for use on semantic-loss surfaces */
   --semantic-info: var(--primitive-sky-600);
   --semantic-error: var(--primitive-red-600);
-  --semantic-warning: var(--primitive-orange-500);
+  --semantic-warning: var(--primitive-yellow-500);
   --on-semantic-warning: var(--primitive-mono-50);
   /* #FFFFFF — text/icon color for use on semantic-warning surfaces */
   --semantic-boost: var(--primitive-amber-600);