@trading-game/design-intelligence-layer 0.16.9 → 0.17.1

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

@@ -594,20 +594,20 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | 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`. |
-| Tooltip | Bubble: `bg-primary` + `text-on-primary` (not `bg-popover`). Always wrap in `<TooltipProvider>` |
-| Sidebar | Menu buttons use `rounded-sm`. Selection: `bg-secondary-hover` + `text-primary` + `font-semibold` |
+| Tooltip | Bubble (default variant): `bg-prominent-inverse` + `text-on-prominent-inverse` (black surface, white text). `inverse` variant: `bg-prominent` + `text-on-prominent` (white surface for use over saturated coloured surfaces). Default primitive includes `max-w-xs` + `whitespace-normal` so consumers don't need to pass them. When a `Kbd` is detected inside via `:has([data-slot=kbd])`, padding bumps to `px-3.5 py-2` and siblings get `space-y-1.5` for breathing room. Always wrap in `<TooltipProvider>`. |
+| Sidebar | `SidebarHeader` / `SidebarFooter` / `SidebarGroup` use `px-layout-margin-inline py-2` (16 px horizontal via `--semantic-layout-margin-inline`), with `group-data-[collapsible=icon]:px-2` so the icon-collapsed rail tightens to 8 px. Menu buttons: `rounded-sm`. Selection: `bg-primary/10` + `text-primary` + `font-semibold`. `lg`-size buttons get `group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center` so a 32-px brand block fills the collapsed rail and a 16-px lucide icon still centers in the same row. |
 | Breadcrumb | Active page: `text-primary font-medium`. Links: `text-on-subtle` |
 | Tabs | **Variants:** `default` (pill, `bg-tabs`) and `line` (underline, transparent bg). **Sizes:** `sm` (h-8, text-xs), `md` (h-10, text-sm, default), `lg` (h-12, text-base). **Icon position:** `inline` (default) or `top` (stacks icon above label). **Orientation:** `horizontal` (default) or `vertical` (line variant renders left-edge indicator). Hover: `bg-secondary-hover` (default) / `text-primary` (line). Selected: `bg-tabs-active` + `text-primary font-semibold`. Line variant underline: `bg-primary`. |
 | Select | **Sizes:** `SelectTrigger` accepts `size` prop: `"sm"` (h-8, text-xs) / `"md"` (h-10, text-sm, **default**) / `"lg"` (h-12, text-base) — matches `Input` and `InputGroup` height scale. Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark. `SelectTrigger` also accepts `readOnly` prop: blocks interaction, retains full default appearance, chevron renders at `opacity-30`. |
 | Progress | Track: `bg-primary/20`. Indicator: `bg-primary`. Radius: `rounded-2xs` |
 | Spinner | Inherits parent text color. **Always pass `text-primary` for standalone use** |
 | Stepper | Numeric input flanked by `−` / `+` `secondary` `icon-xs` buttons. Composes `InputGroup` internally. Props: `value`, `defaultValue`, `onValueChange`, `min`, `max`, `step` (default 1), `size` (`"sm" \| "md" \| "lg"`, default `"md"`), `disabled`, `placeholder`. **Sizes:** `sm` — h-8 (32px), `icon-xs` buttons, `size-3` icons; `md` — h-10 (40px), `icon-xs` buttons, `size-3.5` icons; `lg` — h-12 (48px), `icon-sm` buttons, `size-4` icons. Matches `Input` and `InputGroup` height scale exactly. Supports controlled & uncontrolled modes, keyboard Arrow Up/Down, and floating-point steps. Default width: `w-32`. An `InputGroupText` unit label (e.g. `USDT`) can be placed in the `inline-end` addon alongside the `+` button — use `font-normal text-on-subtle` for regular weight and subtle colour. Exports `StepperSize` type. |
-| Switch | Checked track: `bg-slider-range`. Checked thumb: `bg-primary` |
+| Switch | Pill track (`rounded-full`) with a circle knob (`rounded-full`). Checked track: `bg-primary`. Unchecked track: `bg-input`. Thumb is always `bg-prominent` (white) in both states. Sizes: `default` (h-6 w-11, 18 px knob) / `sm` (h-5 w-9, 14 px knob). |
 | 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 **status** notification. Flat-prop API — pass `title` / `description` / `icon` / `action` / `actions` / `onDismiss` directly; no sub-components. (Promotional / marketing surfaces belong on `Banner`.) **Variants:** `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 as `Button variant="secondary" size="sm"`; React elements pass through. **Title colour:** `text-on-prominent` across all variants. **Icon colour:** the variant accent (`text-semantic-info` etc.) carries the severity signal; pass `icon={null}` to omit, or any `ReactNode` to override the per-variant default (`Info`, `AlertTriangle`, `XCircle`, `CheckCircle2`). **Single-line height:** `min-h-12` (48px floor) when only `title` or only `description` is provided in inline layout; grows when content wraps on narrow viewports. **Dismiss:** controlled — `onDismiss` callback; parent owns visibility. **A11y:** `role="alert"` + `aria-live="assertive"` for `danger`/`warning`; `role="status"` + `aria-live="polite"` for `info`/`success`. |
-| Banner | Dismissible **promotional / marketing** surface — feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use `Alert`. Flat-prop API: `layout`, `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `dismissLabel`, `onClick`. **Surface:** tinted primary surface (`bg-primary/[0.08]`) with `border-primary/[0.16]` edge, `rounded-md`, `px-4 py-3.5`. **Layouts:** `inline` (icon · body · optional action · close X, single row) and `card` (body row + actions row beneath, bottom-left, max 2 buttons). **Buttons:** strings get wrapped in `Button variant="secondary" size="sm"` across every slot (inline `action` and card `actions`). React elements pass through unchanged. **Title:** `text-sm font-bold text-on-prominent`; wrap emphasis in `<b>` for an in-line brand-blue accent (`[&>b]:text-primary`). **Description:** `text-xs font-medium text-on-subtle`, `mt-0.5` from title. **Default icon:** built-in 40px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Two ways to customise: `glyph` swaps just the inner icon while keeping the brand-circle shell intact (use this for "different symbol, same brand badge"); `icon` replaces the entire wrapper (use for fully custom artwork). `icon={null}` omits the column. `icon` wins if both are set — a dev warning fires. **`onClick`:** when set, the whole surface becomes the CTA (cursor-pointer, hover/focus states, keyboard activation). Mutually exclusive with `action`/`actions` — buttons are silently dropped and a dev warning fires. Close X stops propagation so dismissing never triggers the surface click. **A11y:** no `role`/`aria-live` (Banner is not a status surface). |
+| Banner | Dismissible **promotional / marketing** surface — feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use `Alert`. Flat-prop API: `layout`, `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `dismissLabel`, `onClick`. **Surface:** tinted primary surface (`bg-primary/[0.08]`) with `border-primary/[0.16]` edge, `rounded-sm` (6 px — matches Card / Alert), `px-4 py-3.5`. **Layouts:** `inline` (icon · body · optional action · close X, single row) and `card` (body row + actions row beneath, bottom-left, max 2 buttons). When the body is multi-line (description set, or `layout="card"`), the grid switches to `items-start` so the leading icon top-aligns with the title; single-line banners stay `items-center`. Multi-line banners also pin the close X to `absolute top-3 right-3` and apply `pr-12` to the surface so the body never wraps under the corner. **Buttons:** strings get wrapped in `Button variant="secondary" size="sm"` across every slot (inline `action` and card `actions`). React elements pass through unchanged. **Title:** `text-sm font-bold text-on-prominent`; wrap emphasis in `<b>` for an in-line brand-blue accent (`[&>b]:text-primary`). **Description:** `text-xs font-medium text-on-subtle`, `mt-0.5` from title. **Default icon:** built-in 40 px brand-blue **square** (`rounded-xs bg-primary`, 4 px corners) with a white `Gift` glyph inside. Two ways to customise: `glyph` swaps just the inner icon while keeping the brand-badge shell intact (use this for "different symbol, same brand badge"); `icon` replaces the entire wrapper (use for fully custom artwork). `icon={null}` omits the column. `icon` wins if both are set — a dev warning fires. **`onClick`:** when set, the whole surface becomes the CTA (cursor-pointer, hover/focus states, keyboard activation). Mutually exclusive with `action`/`actions` — buttons are silently dropped and a dev warning fires. Close X stops propagation so dismissing never triggers the surface click. **A11y:** no `role`/`aria-live` (Banner is not a status surface). |
 | 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-credit` (light-peach solid `bg-semantic-boost-surface` + `text-on-semantic-boost` foreground — use for credit/bonus labels); `fill-demo` (red-orange tint — `bg-semantic-demo/10` + `text-semantic-demo` — dedicated to "demo account" / "test mode" flags, **not** a severity signal); `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 Welcome credit / bonus use cases:** use `CreditTicketCard` instead — it renders a `<Badge variant="fill-credit">` next to (or below, on narrow compact widths) the value. |
 | CreditTicketCard | 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 credit is displayed as an inline `<Badge variant="fill-credit" size="sm">` formatted as *"{badgeValue} {badgeCurrency}"* (e.g. `10.00 USDT`). The badge composes optional `badgeIcon` (e.g. `<Gift />`) on the left and an info trigger on the right that opens `badgeInfo` (desktop: `Tooltip variant="inverse"`; mobile: `Drawer`). Tokens used: `bg-subtle`, `bg-primary`, `bg-primary-hover`, `text-on-primary`, `bg-semantic-boost-surface` (`#FDCA8A`), `text-on-semantic-boost` (`#521900`, bold). `compact` shrinks padding and lets the badge wrap to a second line under the value only when balance + badge would otherwise overflow into the deposit stub (responsive `flex-wrap`). |

package/package.json

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