@bearmenu/ui 0.8.35 → 0.8.36

package/dist/components/responsive-overlay.d.ts

@@ -23,6 +23,32 @@ type ResponsiveOverlayProps = {
     closeLabel?: string;
     /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
     size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+    /**
+     * The container on a wide screen. `dialog` (the default) is the centred box.
+     * `sheet` is a right rail: an inset panel held 12px off the top, right and
+     * bottom, 420px wide — the booking pages' table sheet, booking details,
+     * guest panel and create forms (floor/14-w1, calendar/07-n1, guests/07-g6).
+     * Narrow screens get the bottom drawer either way.
+     */
+    desktop?: "dialog" | "sheet";
+    /**
+     * Whether the wide `sheet` dims and locks the page. `true` (the default)
+     * is a form rail: a scrim, focus held inside, the page inert. `false` is a
+     * working rail: no scrim, no focus trap, and the page behind stays live —
+     * clicking another table on the floor does NOT close it, so the caller can
+     * swap what it shows. Escape and the close button still close it.
+     *
+     * Applies to `desktop="sheet"` only. The dialog is always modal, and so is
+     * the phone drawer: at 390 the rail covers most of the page, and a page
+     * that stays live under a sheet the thumb cannot see past is a trap.
+     */
+    modal?: boolean;
+    /**
+     * Where the wide container takes over from the drawer. `md` (768, the
+     * default) for most overlays; `lg` (1024) where the page beside the rail
+     * needs the room — the floor plan's rails switch there.
+     */
+    wideFrom?: "md" | "lg";
     /** Classes for the panel itself — the dialog box or the drawer sheet. */
     className?: string;
     /** Classes for the scrolling body. */
@@ -30,7 +56,9 @@ type ResponsiveOverlayProps = {
 };
 /**
  * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
- * `Dialog` from md.
+ * `Dialog` from md — or, with `desktop="sheet"`, an inset right rail that can
+ * leave the page live (`modal={false}`), switching at md or at lg
+ * (`wideFrom`).
  *
  * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
  * (16-shared-table.html) and the two widths never disagree about it: the

package/dist/components/responsive-overlay.js

@@ -1,13 +1,20 @@
-import { useMediaQuery } from '../chunk-OPVKL4VS.js';
+import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
+import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
 import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-XLHMF6F5.js';
 import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-TVEIUTBQ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import '../chunk-MMUBH76A.js';
+import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
 import { X } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var MD_MEDIA_QUERY = "(min-width: 768px)";
+var CONTAINER_TITLE = { drawer: DrawerTitle, dialog: DialogTitle, sheet: SheetTitle };
+var CONTAINER_DESCRIPTION = {
+  drawer: DrawerDescription,
+  dialog: DialogDescription,
+  sheet: SheetDescription
+};
 function useFocusReturn(open) {
   const openerRef = React.useRef(null);
   const wasOpen = React.useRef(false);
@@ -44,17 +51,23 @@ var ResponsiveOverlay = React.forwardRef(
     footer,
     closeLabel = "Close",
     size = "lg",
+    desktop = "dialog",
+    modal = true,
+    wideFrom = "md",
     className,
     bodyClassName
   }, ref) => {
-    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
+    const container = isWide ? desktop : "drawer";
     const titleId = React.useId();
     const subtitleId = React.useId();
     useFocusReturn(open);
+    const Title = CONTAINER_TITLE[container];
+    const Description = CONTAINER_DESCRIPTION[container];
     const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        isWide ? /* @__PURE__ */ jsx(DialogTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }) : /* @__PURE__ */ jsx(DrawerTitle, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
-        subtitle ? isWide ? /* @__PURE__ */ jsx(DialogDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : /* @__PURE__ */ jsx(DrawerDescription, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
+        /* @__PURE__ */ jsx(Title, { id: titleId, className: "text-[19px] font-bold leading-tight", children: title }),
+        subtitle ? /* @__PURE__ */ jsx(Description, { id: subtitleId, className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
       ] }),
       /* @__PURE__ */ jsxs(
         "button",
@@ -86,7 +99,33 @@ var ResponsiveOverlay = React.forwardRef(
         children: footer
       }
     ) : null;
-    if (isWide) {
+    if (container === "sheet") {
+      return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal, children: /* @__PURE__ */ jsxs(
+        SheetContent,
+        __spreadProps(__spreadValues({
+          ref,
+          side: "right",
+          attachment: "inset",
+          hideClose: true,
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          "aria-labelledby": titleId,
+          "aria-describedby": subtitle ? subtitleId : void 0,
+          "data-slot": "responsive-overlay-sheet",
+          "data-modal": modal ? "true" : "false"
+        }, modal ? {} : { onInteractOutside: (event) => event.preventDefault() }), {
+          className: cn(
+            "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
+            className
+          ),
+          children: [
+            header,
+            body,
+            foot
+          ]
+        })
+      ) });
+    }
+    if (container === "dialog") {
       return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
         DialogContent,
         {

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/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

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/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

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.36",
   "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." },