@trading-game/design-intelligence-layer 0.16.8 → 0.17.0

package/README.md

@@ -341,7 +341,7 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
 - Default icon: 40 px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className="size-5" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.
 - Default action button: `Button variant="secondary"` size `sm` for every slot (inline `action` and both `actions[]` in card). Pass `<Button>` elements explicitly to override variant/size.
 - Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.
-- Close X (32px) hovers to `bg-secondary-hover`.
+- Close X (32 px): vertically-centred in the grid for single-line banners; pinned to the **top-right corner** (`absolute top-3 right-3`) when the banner is multi-line (`description` set) or `layout="card"` — so it reads as a true corner dismiss instead of floating mid-body. Hovers to `bg-secondary-hover`.
 
 ## Component behaviour notes
 
@@ -377,6 +377,21 @@ The `lg` variant of `Link` uses `text-base` (16px). The `md` and `sm` variants u
 ### Tabs — line variant hover
 On the `line` variant, hover state shows `text-primary` (blue) with no background fill. On the `default` (pill) variant, hover shows a grey background with `text-on-prominent`.
 
+### Link — underline
+Underline is **always visible** (not hover-only). Class chain: `underline decoration-2 underline-offset-4 text-primary`.
+
+### Switch — pill + circle
+Track is a pill (`rounded-full`); thumb is always a white circle (`rounded-full bg-prominent`). Checked track: `bg-primary`. Unchecked track: `bg-input`.
+
+### Tooltip — default surface
+Default variant uses a **black** surface (`bg-prominent-inverse text-on-prominent-inverse`) with a matching arrow. Use `variant="inverse"` for a white tooltip when the trigger sits on a saturated coloured surface. The primitive bakes in `max-w-xs` + `whitespace-normal`, so consumers no longer 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 receive `space-y-1.5` for breathing room.
+
+### Sidebar — selection + padding
+`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 collapsed icon rail tightens to 8 px. Active selection: `bg-primary/10` + `text-primary` + `font-semibold`. For `size="lg"` menu buttons (typical brand-block + label or profile pattern), the collapsed state uses `p-0! justify-center` so a 32 px brand block fills the rail while a 16 px lucide icon still centres on the same vertical line.
+
+### Button — bg transition
+The button base sets `transition-[color,border-color,opacity,box-shadow,transform]` (not `transition-all`), so `background-color` flips instantly on hover instead of fading in over 150 ms. This prevents the brief partially-transparent phase where surrounding surface tints (e.g. an Alert) could bleed through a hovered secondary button.
+
 ---
 
 ## Design tokens
@@ -695,7 +710,16 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
-### v0.16.7 (current)
+### Unreleased
+- **Tooltip — black surface by default:** `variant="default"` switched from brand-blue to black (`bg-prominent-inverse` + `text-on-prominent-inverse`). The arrow follows. `variant="inverse"` (white) is unchanged. Default primitive now bakes in `max-w-xs whitespace-normal`, so consumers no longer pass these classes.
+- **Tooltip — keyboard-shortcut breathing room:** when the tooltip contains a `Kbd` (detected via `:has([data-slot=kbd])`), padding bumps to `px-3.5 py-2` and child elements get `space-y-1.5` so the title / kbd-row pair doesn't crowd.
+- **Switch — pill + white circle knob:** track switched from `rounded-[6px]` to `rounded-full`, thumb from `rounded-[3px]` to `rounded-full`. Thumb is always `bg-prominent` (white) in both states. Checked track: `bg-primary`. Unchecked track: `bg-input`. No API change.
+- **Link — underline always visible:** swapped `hover:underline` → `underline` so the underline reads at rest, not only on hover.
+- **Sidebar — primary-tinted selection + 16 px padding rails:** active menu items now use `bg-primary/10` (brand-blue tint) instead of `bg-secondary-hover` (grey). `SidebarHeader` / `SidebarFooter` / `SidebarGroup` use `px-layout-margin-inline py-2` (16 px horizontal) when expanded; the icon-collapsed rail falls back to `px-2` so the icons still centre. The `lg`-size menu button gets `p-0! justify-center` when collapsed so a 32 px brand block fills the rail while a 16 px lucide icon still centres in the same column.
+- **Banner — close X corner anchor:** the close `X` stays grid-centred on single-line banners but pins to `absolute top-3 right-3` whenever `description` is set or `layout="card"` — so it reads as a true corner dismiss instead of floating mid-body.
+- **Button — instant bg-color hover:** the button base now uses `transition-[color,border-color,opacity,box-shadow,transform]` instead of `transition-all`. `background-color` flips instantly on hover so the brief partially-transparent fade phase (which let surrounding surface tints bleed through a hovered secondary button) is gone.
+
+### v0.16.7
 - **Credit badge readability pass:** `<Badge variant="fill-credit">` and the credit pill inside `CreditTicketCard` now sit on a deeper peach surface and use a bold deep-amber text for crisper read on the grey `bg-subtle` ticket card and on white / brand-blue surfaces alike. Token chain: `--primitive-amber-100` (#FEEBD9) → `--primitive-amber-300` (#FDCA8A) and `--primitive-amber-800` (#713813) → `--primitive-amber-900` (#521900). `--semantic-boost-surface` and `--on-semantic-boost` are repointed automatically. Variant class also bumps to `!font-bold`.
 - **CreditTicketCard — responsive compact layout:** Compact variant now keeps the credit badge inline next to the value when there's room and only wraps to a second line when balance + badge would overflow into the deposit stub (`flex-wrap` on the value/badge row, with `whitespace-nowrap` on the value so the number itself never splits). Non-compact keeps the existing inline behavior.
 - **Banner — brand `IconBadge` is now a circle:** The 40 px brand-blue icon badge (visible when the consumer passes a `glyph` prop) is now `rounded-full` instead of `rounded-xs`. No API change.

package/dist/index.cjs

@@ -522,7 +522,7 @@ function Spinner(_a) {
 // components/ui/button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[color,border-color,opacity,box-shadow,transform] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-24 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 font-display font-bold",
   {
     variants: {
       variant: {
@@ -1280,7 +1280,9 @@ function Banner(_a) {
   const iconColumn = showIcon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "aria-hidden": true, className: "inline-flex shrink-0 translate-y-px", children: resolvedIcon }) : null;
   if (isInline) {
     const hasAction = Boolean(effectiveAction);
+    const hasDescription = Boolean(description);
     const rowTemplate = hasAction ? "grid-rows-[auto_auto] gap-y-3 sm:grid-rows-1 sm:gap-y-0" : "grid-rows-1 gap-y-0";
+    const gridCols = hasDescription ? "grid-cols-[auto_1fr] sm:grid-cols-[auto_1fr_auto]" : "grid-cols-[auto_1fr_auto] sm:grid-cols-[auto_1fr_auto_auto]";
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "div",
       __spreadProps(__spreadValues(__spreadValues({
@@ -1288,9 +1290,11 @@ function Banner(_a) {
         "data-layout": "inline",
         "data-clickable": isClickable ? "true" : void 0,
         className: cn(
-          "grid grid-cols-[auto_1fr_auto] items-center gap-x-4 sm:grid-cols-[auto_1fr_auto_auto]",
+          "grid items-center gap-x-4",
+          gridCols,
           rowTemplate,
           SURFACE_CLASSES,
+          hasDescription && "relative pr-12",
           clickableClasses,
           className
         )
@@ -1298,7 +1302,7 @@ function Banner(_a) {
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-1 row-start-1", children: iconColumn }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-3 row-start-1 sm:col-start-4", children: closeButton }),
+          hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute top-3 right-3", children: closeButton }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-3 row-start-1 self-center sm:col-start-4", children: closeButton }),
           hasAction ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-2 justify-self-start sm:col-start-3 sm:row-start-1 sm:self-center sm:justify-self-end", children: wrapAction2(effectiveAction) }) : null
         ]
       })
@@ -1311,7 +1315,7 @@ function Banner(_a) {
       "data-layout": "card",
       "data-clickable": isClickable ? "true" : void 0,
       className: cn(
-        "grid grid-cols-[auto_1fr_auto] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3",
+        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3 pr-12",
         SURFACE_CLASSES,
         clickableClasses,
         className
@@ -1320,8 +1324,8 @@ function Banner(_a) {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-1 row-start-1", children: iconColumn }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-3 row-start-1", children: closeButton }),
-        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-span-3 col-start-2 row-start-2 flex flex-wrap items-center justify-start gap-2", children: effectiveActions.slice(0, 2).map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React2.Fragment, { children: wrapAction2(node) }, i)) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute top-3 right-3", children: closeButton }),
+        effectiveActions && effectiveActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "col-start-2 row-start-2 flex flex-wrap items-center justify-start gap-2", children: effectiveActions.slice(0, 2).map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React2.Fragment, { children: wrapAction2(node) }, i)) }) : null
       ]
     })
   );
@@ -1944,7 +1948,7 @@ function Chip(_a) {
       disabled,
       className: cn(
         chipVariants({ size }),
-        selected ? "border-[1.5px] border-primary bg-primary/10 text-primary font-semibold pointer-events-none cursor-default" : "border border-border-subtle bg-transparent text-on-prominent hover:bg-secondary-hover active:bg-secondary-hover/80",
+        selected ? "border-[1.5px] border-primary bg-primary/10 text-primary font-semibold pointer-events-none cursor-default" : "border border-border-subtle bg-transparent text-on-prominent transition-colors hover:bg-secondary-hover active:bg-secondary-hover/80",
         className
       )
     }, props), {
@@ -4511,7 +4515,7 @@ var import_class_variance_authority10 = require("class-variance-authority");
 var import_radix_ui19 = require("radix-ui");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority10.cva)(
-  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary hover:underline decoration-2 underline-offset-4",
+  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary underline decoration-2 underline-offset-4",
   {
     variants: {
       size: {
@@ -5847,8 +5851,8 @@ function TooltipContent(_a) {
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DrawerFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DrawerClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { variant: "primary", size: "md", children: closeLabel }) }) })
     ] });
   }
-  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-primary text-on-primary";
-  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-primary";
+  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-prominent-inverse text-on-prominent-inverse";
+  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-prominent-inverse";
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_radix_ui29.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     import_radix_ui29.Tooltip.Content,
     __spreadProps(__spreadValues({
@@ -5856,7 +5860,7 @@ function TooltipContent(_a) {
       "data-variant": variant,
       sideOffset,
       className: cn(
-        "z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 text-sm font-medium text-balance whitespace-normal fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 has-[[data-slot=kbd]]:px-3.5 has-[[data-slot=kbd]]:py-2 has-[[data-slot=kbd]]:space-y-1.5 text-sm font-medium text-balance whitespace-normal fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
         surfaceClasses,
         className
       )
@@ -6149,7 +6153,10 @@ function SidebarHeader(_a) {
     __spreadValues({
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
-      className: cn("flex flex-col gap-2 p-2", className)
+      className: cn(
+        "flex flex-col gap-2 px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -6160,7 +6167,10 @@ function SidebarFooter(_a) {
     __spreadValues({
       "data-slot": "sidebar-footer",
       "data-sidebar": "footer",
-      className: cn("flex flex-col gap-2 p-2", className)
+      className: cn(
+        "flex flex-col gap-2 px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -6200,7 +6210,10 @@ function SidebarGroup(_a) {
     __spreadValues({
       "data-slot": "sidebar-group",
       "data-sidebar": "group",
-      className: cn("relative flex w-full min-w-0 flex-col p-2", className)
+      className: cn(
+        "relative flex w-full min-w-0 flex-col px-layout-margin-inline py-2 group-data-[collapsible=icon]:px-2",
+        className
+      )
     }, props)
   );
 }
@@ -6288,7 +6301,7 @@ function SidebarMenuItem(_a) {
   );
 }
 var sidebarMenuButtonVariants = (0, import_class_variance_authority13.cva)(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-sm p-2 text-left text-sidebar-foreground text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-secondary-hover data-[active=true]:font-semibold data-[active=true]:text-primary data-[active=true]:hover:bg-secondary-hover data-[active=true]:hover:text-primary data-[state=open]:hover:bg-secondary-hover data-[state=open]:hover:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-sm p-2 text-left text-sidebar-foreground text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-primary/10 data-[active=true]:font-semibold data-[active=true]:text-primary data-[active=true]:hover:bg-primary/10 data-[active=true]:hover:text-primary data-[state=open]:hover:bg-secondary-hover data-[state=open]:hover:text-primary [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
   {
     variants: {
       variant: {
@@ -6298,7 +6311,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority13.cva)(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0! group-data-[collapsible=icon]:justify-center"
       }
     },
     defaultVariants: {
@@ -6498,7 +6511,7 @@ function SidebarMenuSubButton(_a) {
       "data-active": isActive,
       className: cn(
         "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-sm px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden hover:bg-secondary-hover hover:text-primary focus-visible:ring-2 active:bg-secondary-hover active:text-primary disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 data-[active=true]:[&>svg]:text-primary",
-        "data-[active=true]:bg-secondary-hover data-[active=true]:text-primary",
+        "data-[active=true]:bg-primary/10 data-[active=true]:text-primary",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
         "group-data-[collapsible=icon]:hidden",
@@ -6789,7 +6802,7 @@ function Switch(_a) {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-[6px] border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-slider-range data-[state=unchecked]:bg-input",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent p-[3px] shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className
       )
     }, props), {
@@ -6798,7 +6811,7 @@ function Switch(_a) {
         {
           "data-slot": "switch-thumb",
           className: cn(
-            "pointer-events-none block rounded-[3px] ring-0 transition-transform group-data-[size=default]/switch:size-[18px] group-data-[size=sm]/switch:size-[14px] data-[state=checked]:translate-x-[calc(100%+1px)] data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary data-[state=unchecked]:bg-on-subtle"
+            "pointer-events-none block rounded-full bg-prominent ring-0 transition-transform group-data-[size=default]/switch:size-[18px] group-data-[size=sm]/switch:size-[14px] data-[state=checked]:translate-x-[calc(100%+1px)] data-[state=unchecked]:translate-x-0"
           )
         }
       )