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

package/README.md

@@ -103,7 +103,7 @@ npm install react react-dom tailwindcss
 | Aspect Ratio | `AspectRatio` |
 | Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
 | Badge | `Badge, badgeVariants` |
-| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue circular `IconBadge` (40 px) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
+| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue square `IconBadge` (40 px, `rounded-xs`) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
 | Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
 | Button | `Button, buttonVariants` |
 | Calendar | `Calendar, CalendarDayButton` |
@@ -337,8 +337,9 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
 ```
 
 **Visual:**
-- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-md`.
-- 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.
+- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-sm` (6 px — matches Card and Alert).
+- Default icon: 40 px brand-blue **square** (`rounded-xs bg-primary`, 4 px corners) 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.
+- **Multi-line layout** (description set, or `layout="card"`): the leading icon top-aligns with the title (grid uses `items-start`) so it sits beside the headline rather than floating mid-body. Single-line banners stay vertically centred (`items-center`).
 - 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 (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`.
@@ -722,7 +723,10 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 ### 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.
+- **Banner — outer corner radius unified with Card / Alert:** outer surface `rounded-md` (8 px) → `rounded-sm` (6 px). Brand `IconBadge` reverted to `rounded-xs` (4 px square) after a brief detour through `rounded-full` — the square reads better against the surface.
+- **Banner — multi-line icon top-alignment:** when a description is present (or `layout="card"`), the grid switches from `items-center` to `items-start` so the leading icon aligns with the title's top instead of sliding to the middle of the body block as it wraps.
+- **Banner — class-order fix for `pr-12`:** in the card branch, `pr-12` was being merged before `SURFACE_CLASSES`'s `px-4`, so tailwind-merge kept the smaller right padding and long descriptions wrapped under the absolute-positioned close X. Re-ordering the `cn()` arguments puts `pr-12` after `SURFACE_CLASSES` so it wins (48 px right padding).
+- **Alert — card layout body/close cell overlap fixed:** card body changed from `col-span-2 col-start-2` to `col-start-2 min-w-0`. Previously the body spanned cols 2-3 (same cell as the close X), so long descriptions slid under the close. Now the body lives in col 2 only and the close owns col 3.
 - **Tooltip — `max-w-xs` + `whitespace-normal` built into the primitive:** Desktop tooltips now cap at 320 px by default with natural-word wrapping; consumers no longer need to pass these classes. Mobile drawers (the responsive Tooltip mode) keep the full sheet width — the consumer `className` is no longer applied to the drawer's inner content wrapper, so passing `max-w-xs` on `TooltipContent` for desktop tuning no longer leaks into and shrinks the mobile drawer text.
 - **Naming note:** the v0.14.0 entry below claimed a `fill-credit` → `fill-boost` and `CreditTicketCard` → `BoostTicketCard` rename. **Those renames were not landed** — the current shipped names are still `fill-credit`, `CreditTicketCard`, and `--semantic-boost-surface` / `--on-semantic-boost` (the boost tokens stayed, the variant/component names didn't get renamed alongside them).
 

package/dist/index.cjs

@@ -813,7 +813,7 @@ function Alert(_a) {
     }, props), {
       children: [
         iconColumn,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-2 col-start-2 row-start-1", children: body }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-start-3 row-start-1", children: closeButton }),
         actions && actions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-3 col-start-2 row-start-2 mt-2 flex flex-wrap items-center justify-start gap-2", children: actions.slice(0, 2).map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(React.Fragment, { children: wrapAction(node, buttonVariant) }, i)) }) : null
       ]
@@ -1178,9 +1178,9 @@ function Badge(_a) {
 var React2 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SURFACE_CLASSES = "w-full rounded-md border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
+var SURFACE_CLASSES = "w-full rounded-sm border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
 function IconBadge({ glyph }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -1290,7 +1290,11 @@ function Banner(_a) {
         "data-layout": "inline",
         "data-clickable": isClickable ? "true" : void 0,
         className: cn(
-          "grid items-center gap-x-4",
+          "grid gap-x-4",
+          // Single-line banners vertically-centre the row (icon + title);
+          // multi-line banners top-align so the leading icon sits next to
+          // the title instead of floating mid-body.
+          hasDescription ? "items-start" : "items-center",
           gridCols,
           rowTemplate,
           SURFACE_CLASSES,
@@ -1315,8 +1319,10 @@ function Banner(_a) {
       "data-layout": "card",
       "data-clickable": isClickable ? "true" : void 0,
       className: cn(
-        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3 pr-12",
+        // Card layout is always multi-row — top-align the icon with the title.
+        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-start gap-x-4 gap-y-3",
         SURFACE_CLASSES,
+        "pr-12",
         clickableClasses,
         className
       )