@bearmenu/ui 0.8.35 → 0.8.37

package/dist/components/searchable-select.js

@@ -1,6 +1,6 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-VCRXL7H5.js';
-import '../chunk-TVEIUTBQ.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
+import '../chunk-IQIJCMG2.js';
 import { Button } from '../chunk-5SGKGFMN.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
@@ -99,7 +99,7 @@ function SearchableSelect({
           e.stopPropagation();
           onValueChange(void 0);
         },
-        className: "absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors",
+        className: "absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors",
         children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
       }
     )

package/dist/components/select.js

@@ -118,12 +118,12 @@ var SelectItem = React.forwardRef((_a, ref) => {
       ref,
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-semibold",
+        "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent-subtle data-[highlighted]:text-foreground data-[state=checked]:font-semibold",
         className
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4 text-accent" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
     })

package/dist/components/selection-bar.js

@@ -43,7 +43,7 @@ var SelectionBar = React.forwardRef(
                 type: "button",
                 "aria-label": "Clear selection",
                 onClick: onClear,
-                className: "inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                className: "inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 children: /* @__PURE__ */ jsx(X, { className: "size-4" })
               }
             ),

package/dist/components/sheet.d.ts

@@ -36,6 +36,12 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof Dialog
      * buttons in the same corner.
      */
     hideClose?: boolean;
+    /**
+     * Classes for the scrim. The default `bg-black/50` is kept for every
+     * existing caller; pass `bg-scrim-overlay` for the themed dim, as `Drawer`
+     * and `Dialog` already allow. A non-modal sheet renders no scrim at all.
+     */
+    overlayClassName?: string;
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {

package/dist/components/sheet.js

@@ -1,133 +1,3 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
-import * as React from 'react';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { cva } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var Sheet = SheetPrimitive.Root;
-var SheetTrigger = SheetPrimitive.Trigger;
-var SheetClose = SheetPrimitive.Close;
-var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Overlay,
-    __spreadProps(__spreadValues({
-      className: cn(
-        "fixed inset-0 z-[1000] bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        className
-      )
-    }, props), {
-      ref
-    })
-  );
-});
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = cva(
-  "fixed z-[1000] gap-4 bg-background border-border shadow-[var(--shadow-overlay)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
-        right: "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
-      },
-      attachment: {
-        edge: "p-6",
-        // Padding is the caller's business here: a detail surface runs a gallery
-        // and a sticky action bar to the panel edge, and a fixed p-6 would inset
-        // both. `edge` keeps its p-6 so nothing already shipped shifts.
-        inset: "rounded-2xl overflow-hidden"
-      }
-    },
-    compoundVariants: [
-      // `edge` restates exactly what each side carried before `attachment`
-      // existed — the seam border and the two inward-facing corners. Kept as
-      // compounds rather than left on `side` so `inset` is not fighting them
-      // through class-merge order.
-      // `sm:max-w-sm` lives here, not on `side`: an inset panel is sized by its
-      // caller, and a responsive cap left on `side` cannot be overridden from
-      // className — tailwind-merge scopes `sm:max-w-*` and `max-w-*` to
-      // different groups, so `max-w-none` loses to it at every width ≥ sm.
-      { side: "top", attachment: "edge", class: "border-b" },
-      { side: "bottom", attachment: "edge", class: "border-t rounded-t-2xl" },
-      { side: "left", attachment: "edge", class: "border-r rounded-r-2xl sm:max-w-sm" },
-      { side: "right", attachment: "edge", class: "border-l rounded-l-2xl sm:max-w-sm" },
-      // The inset offsets live here rather than on `attachment` because each
-      // side has to give up its own edge: a right-side panel clears top, right
-      // and bottom but is still anchored to the right.
-      { side: "right", attachment: "inset", class: "inset-y-3 right-3 h-auto" },
-      { side: "left", attachment: "inset", class: "inset-y-3 left-3 h-auto" },
-      { side: "top", attachment: "inset", class: "inset-x-3 top-3" },
-      { side: "bottom", attachment: "inset", class: "inset-x-3 bottom-3" }
-    ],
-    defaultVariants: {
-      side: "right",
-      attachment: "edge"
-    }
-  }
-);
-var SheetContent = React.forwardRef((_a, ref) => {
-  var _b = _a, { side = "right", attachment = "edge", className, children, hideClose } = _b, props = __objRest(_b, ["side", "attachment", "className", "children", "hideClose"]);
-  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-    /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(
-      SheetPrimitive.Content,
-      __spreadProps(__spreadValues({
-        ref,
-        className: cn(sheetVariants({ side, attachment }), className)
-      }, props), {
-        children: [
-          children,
-          !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2", children: [
-            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] })
-        ]
-      })
-    )
-  ] });
-});
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetHeader = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx("div", __spreadValues({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props));
-};
-SheetHeader.displayName = "SheetHeader";
-var SheetFooter = (_a) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    __spreadValues({
-      className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)
-    }, props)
-  );
-};
-SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Title,
-    __spreadValues({
-      ref,
-      className: cn("text-lg font-semibold text-foreground", className)
-    }, props)
-  );
-});
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    SheetPrimitive.Description,
-    __spreadValues({
-      ref,
-      className: cn("text-sm text-muted-foreground", className)
-    }, props)
-  );
-});
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from '../chunk-LAEVMNJN.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-6W25S5CF.js';
-import '../chunk-NIAL4ZU2.js';
+export { SignatureChip } from '../chunk-KGXTBTCJ.js';
+import '../chunk-FQAIYKAS.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/tabs.d.ts

@@ -8,7 +8,22 @@ declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsL
     /** Make horizontal lists scrollable when overflowing. Default true for underline, false for pill. */
     scrollable?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    /**
+     * A count after the label — "Today 3", "Queue 2" (today/03-d0). `null`
+     * means the count is unknown (still loading, or its read failed) and draws
+     * an em dash, "Queue —" (today/04-d3); `undefined` draws nothing.
+     * Tabular figures, so the strip does not shift as a count ticks.
+     */
+    count?: number | null;
+    /**
+     * What a screen reader hears for the count, in place of the bare figure —
+     * "3 waiting", "count unavailable". Injected, like every label here: the
+     * design system holds no copy. Without it the figure is read as is and the
+     * dash is silent.
+     */
+    countLabel?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/tabs.js

@@ -4,7 +4,7 @@ import { __objRest, __spreadValues, __spreadProps } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { motion } from 'framer-motion';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var TabsContext = React.createContext({
   variant: "pill",
@@ -50,7 +50,7 @@ var TabsList = React.forwardRef((_a, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _b = _a, { className, children, count, countLabel } = _b, props = __objRest(_b, ["className", "children", "count", "countLabel"]);
   const { variant, orientation, indicatorId } = React.useContext(TabsContext);
   const triggerRef = React.useRef(null);
   const [isActive, setIsActive] = React.useState(false);
@@ -111,7 +111,25 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center gap-2", children })
+        /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex items-center gap-2", children: [
+          children,
+          count !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-slot": "tabs-trigger-count",
+                "aria-hidden": countLabel !== void 0 || count === null ? true : void 0,
+                className: "tabular-nums",
+                children: count === null ? "\u2014" : count
+              }
+            ),
+            countLabel !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+              " ",
+              countLabel
+            ] }) : null
+          ] }) : null
+        ] })
       ]
     })
   );

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-F3XK34DV.js';
+import { toggleVariants } from '../chunk-TB2K5JN3.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/toggle.d.ts

@@ -4,6 +4,12 @@ import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * Hover is a step of the surface (`--accent-subtle`), as Button's quiet
+ * variants do. The shadcn default, `hover:bg-accent/50 hover:text-accent-foreground`,
+ * put white type on a half-strength terracotta: 2.2:1. The on-state's
+ * `data-[state=on]:` utilities sort after `hover:` and still win while on.
+ */
 declare const toggleVariants: (props?: ({
     variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-F3XK34DV.js';
+export { Toggle, toggleVariants } from '../chunk-TB2K5JN3.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-XNBDACL7.js';
-import '../chunk-6W25S5CF.js';
+import { MenuItem } from '../chunk-ZUBBMLBD.js';
+import '../chunk-KGXTBTCJ.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-NIAL4ZU2.js';
+import '../chunk-FQAIYKAS.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.35",
+  "version": "0.8.37",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ChevronDown, Users } from "lucide-react";
+import { Armchair, Check, ChevronDown, CircleHelp, Clock, Users } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -22,6 +22,10 @@ const meta = {
         "warning",
         "brown",
         "onPrimary",
+        "softSuccess",
+        "softWarning",
+        "softDestructive",
+        "softNeutral",
       ],
     },
   },
@@ -126,6 +130,33 @@ export const Assignee: Story = {
   ),
 };
 
+/**
+ * Soft tones with an icon — a booking's live status in a table row
+ * (calendar/11-dp): a wash of the status colour, its ink on top, a 14px glyph
+ * so the status never rests on colour alone.
+ */
+export const SoftTones: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge as="span" variant="softSuccess" icon={<Armchair />}>
+        Seated
+      </Badge>
+      <Badge as="span" variant="softDestructive" icon={<Clock />}>
+        25 min late
+      </Badge>
+      <Badge as="span" variant="softWarning" icon={<CircleHelp />}>
+        Needs an answer
+      </Badge>
+      <Badge as="span" variant="softNeutral" icon={<Check />}>
+        Confirmed
+      </Badge>
+      <Badge as="span" variant="softNeutral">
+        Now
+      </Badge>
+    </div>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">

package/src/components/badge.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Armchair } from "lucide-react";
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders the icon before the label and hides it from assistive tech", () => {
+    render(
+      <Badge variant="softSuccess" icon={<Armchair data-testid="glyph" />}>
+        Seated
+      </Badge>
+    );
+    const badge = screen.getByText("Seated");
+    const icon = badge.querySelector('[data-slot="badge-icon"]');
+    expect(icon).toHaveAttribute("aria-hidden", "true");
+    expect(icon).toContainElement(screen.getByTestId("glyph"));
+    expect(badge.firstElementChild).toBe(icon);
+    expect(badge).toHaveClass("gap-1");
+  });
+
+  it("renders no icon slot and no gap when there is no icon", () => {
+    render(<Badge variant="softNeutral">Confirmed</Badge>);
+    const badge = screen.getByText("Confirmed");
+    expect(badge.querySelector('[data-slot="badge-icon"]')).toBeNull();
+    expect(badge).not.toHaveClass("gap-1");
+  });
+
+  it.each([
+    ["softSuccess", "bg-success/15", "text-success-ink"],
+    ["softWarning", "bg-warning/20", "text-warning-ink"],
+    ["softDestructive", "bg-destructive/12", "text-destructive-ink"],
+    ["softNeutral", "bg-surface-2", "text-ink-secondary"],
+  ] as const)("%s paints a wash with the tone's ink token", (variant, wash, ink) => {
+    render(<Badge variant={variant}>Status</Badge>);
+    const badge = screen.getByText("Status");
+    expect(badge).toHaveClass(wash, ink);
+    // The solid fill tokens fall short of AA as text on their own wash.
+    expect(badge.className).not.toMatch(/\btext-(success|warning|destructive)\b(?!-)/);
+  });
+
+  it("keeps an existing variant unchanged", () => {
+    render(<Badge variant="success">Solid</Badge>);
+    expect(screen.getByText("Solid")).toHaveClass("bg-success", "text-success-foreground");
+  });
+});

package/src/components/badge.tsx

@@ -58,6 +58,22 @@ const badgeVariants = cva(
          */
         assignee:
           "rounded-full border-0 bg-surface-2 py-1 pl-1 pr-2 gap-1.5 text-[12px] leading-[1.2] font-semibold text-foreground",
+        /**
+         * Soft tones — a wash of the status colour with its INK on top, for a
+         * status that sits in a list and should not shout: the booking
+         * design's "Seated" (success), "25 min late" (destructive), "Needs an
+         * answer" (warning) and "Confirmed" (neutral) pills in a table row
+         * (calendar/11-dp, floor/14-w1, queue/02-q0).
+         *
+         * The ink tokens, not the solid ones: `--success` / `--warning` /
+         * `--destructive` are tuned as fills and fall short of AA as text on
+         * their own wash; `--*-ink` exists for exactly that. Usually paired
+         * with an `icon`, so the status does not rest on colour alone.
+         */
+        softSuccess: "rounded-md border-0 bg-success/15 px-2 py-1 text-success-ink",
+        softWarning: "rounded-md border-0 bg-warning/20 px-2 py-1 text-warning-ink",
+        softDestructive: "rounded-md border-0 bg-destructive/12 px-2 py-1 text-destructive-ink",
+        softNeutral: "rounded-md border-0 bg-surface-2 px-2 py-1 text-ink-secondary",
       },
       /**
        * `status` is the taller pill the booking design draws beside a
@@ -94,15 +110,37 @@ export interface BadgeProps
    * clickable row.
    */
   as?: "div" | "span";
+  /**
+   * A lucide glyph drawn at 14px before the label — the armchair on
+   * "Seated", the clock on "25 min late". Decorative: the label carries the
+   * meaning, so the slot is `aria-hidden`.
+   */
+  icon?: React.ReactNode;
 }
 
-function Badge({ className, variant, size, live, as: Tag = "div", ...props }: BadgeProps) {
+function Badge({
+  className,
+  variant,
+  size,
+  live,
+  as: Tag = "div",
+  icon,
+  children,
+  ...props
+}: BadgeProps) {
   return (
     <Tag
       data-slot="badge"
-      className={cn(badgeVariants({ variant, size, live }), className)}
+      className={cn(badgeVariants({ variant, size, live }), icon ? "gap-1" : undefined, className)}
       {...props}
-    />
+    >
+      {icon ? (
+        <span data-slot="badge-icon" aria-hidden className="inline-flex shrink-0 [&>svg]:size-3.5">
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </Tag>
   );
 }
 

package/src/components/banner.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TriangleAlert } from "lucide-react";
 import { Banner } from "./banner";
+import { Button } from "./button";
 
 const meta: Meta<typeof Banner> = {
   title: "Booking/Banner",
@@ -30,6 +31,37 @@ export const Warning: Story = {
   },
 };
 
+/** today/04-d3: a read that failed, on a page that is otherwise live. */
+export const Destructive: Story = {
+  args: {
+    tone: "destructive",
+    children: (
+      <>
+        <b className="font-bold">The queue didn&apos;t load.</b> This is on our side; everything
+        else is live.
+      </>
+    ),
+  },
+};
+
+/** reports/03-p9: the failure carries its own way out. */
+export const DestructiveWithAction: Story = {
+  args: {
+    tone: "destructive",
+    children: (
+      <>
+        <b className="font-bold">Walk-ins didn&apos;t load.</b> Covers and walk-in figures read —
+        until they do.
+      </>
+    ),
+    action: (
+      <Button variant="link" className="h-auto p-0 font-bold text-destructive-ink">
+        Retry
+      </Button>
+    ),
+  },
+};
+
 /** B0c: a venue that takes no bookings. */
 export const Info: Story = {
   args: { tone: "info", children: "This venue does not take bookings. Walk-ins only." },

package/src/components/banner.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Banner } from "./banner";
+
+describe("Banner", () => {
+  it("paints the destructive tone with the ink token and a hairline", () => {
+    render(<Banner tone="destructive">The queue didn&apos;t load.</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).toHaveClass("bg-destructive/10", "text-destructive-ink", "border");
+  });
+
+  it("draws the destructive tone's own glyph unless told otherwise", () => {
+    const { rerender } = render(<Banner tone="destructive">Failed</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner?.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+    rerender(
+      <Banner tone="destructive" icon={null}>
+        Failed
+      </Banner>
+    );
+    expect(banner?.querySelector("svg")).toBeNull();
+  });
+
+  it("places the action after the text and leaves it working", async () => {
+    const onRetry = vi.fn();
+    render(
+      <Banner
+        tone="destructive"
+        action={
+          <button type="button" onClick={onRetry}>
+            Retry
+          </button>
+        }
+      >
+        Walk-ins didn&apos;t load.
+      </Banner>
+    );
+    const banner = document.querySelector('[data-slot="banner"]');
+    const slot = document.querySelector('[data-slot="banner-action"]');
+    expect(banner?.lastElementChild).toBe(slot);
+    await userEvent.click(screen.getByRole("button", { name: "Retry" }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("renders no action slot without an action", () => {
+    render(<Banner>Walk-ins only.</Banner>);
+    expect(document.querySelector('[data-slot="banner-action"]')).toBeNull();
+  });
+
+  it("keeps the info and warning tones borderless", () => {
+    const { rerender } = render(<Banner tone="info">Note</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).not.toHaveClass("border");
+    rerender(<Banner tone="warning">Note</Banner>);
+    expect(banner).not.toHaveClass("border");
+  });
+});