@bearmenu/ui 0.8.43 → 0.8.44

package/dist/{chunk-CLFE4U5T.js → chunk-6PQINSAA.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-WHUG6QEI.js';
+import { Badge } from './chunk-RYPPN2GZ.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-K6ACNU2L.js → chunk-GHKTVHQG.js}

@@ -25,7 +25,7 @@ var buttonVariants = cva(
          * surface: the fill darkens a notch, the border firms up, the type
          * stays put. `--accent-subtle` is that step; `active:` goes one more.
          */
-        outline: "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+        outline: "border border-input bg-card hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary: "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         ghost: "hover:bg-accent-subtle active:bg-muted",
         link: "text-primary underline-offset-4 hover:underline",

package/dist/{chunk-WHUG6QEI.js → chunk-RYPPN2GZ.js}

@@ -79,8 +79,9 @@ var badgeVariants = cva(
        * coming after the variant classes.
        */
       size: {
-        chip: "",
-        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold"
+        chip: "rounded-sm",
+        // measured: status badge radius 7px, no token
+        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold rounded-[7px]"
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).
@@ -89,6 +90,15 @@ var badgeVariants = cva(
         false: ""
       }
     },
+    // `size` sets a radius meant for the plain variants (default, outline,
+    // success, …), which otherwise leak the base `rounded-lg` (10px). The
+    // pill (`rounded-full`) and soft (`rounded-md`) variants already draw
+    // their own measured radius — reassert it here so `cn`'s tailwind-merge
+    // doesn't let the size-level radius clobber it.
+    compoundVariants: [
+      { variant: ["confirmed", "pending", "code", "completed", "assignee"], class: "rounded-full" },
+      { variant: ["softSuccess", "softWarning", "softDestructive", "softNeutral"], class: "rounded-md" }
+    ],
     defaultVariants: {
       variant: "default",
       size: "chip",

package/dist/{chunk-RQPUBKFU.js → chunk-VXGIDKXV.js}

@@ -1,4 +1,4 @@
-import { SignatureChip } from './chunk-CLFE4U5T.js';
+import { SignatureChip } from './chunk-6PQINSAA.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';

package/dist/components/alert-dialog.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from '../chunk-WHUG6QEI.js';
+export { Badge, badgeVariants } from '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/booking-row.js

@@ -1,4 +1,4 @@
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/button.js

@@ -1,4 +1,4 @@
-export { Button, buttonVariants } from '../chunk-K6ACNU2L.js';
+export { Button, buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/calendar.js

@@ -1,4 +1,4 @@
-import { buttonVariants, Button } from '../chunk-K6ACNU2L.js';
+import { buttonVariants, Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/carousel.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/coach-marks.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/concept-convergence.js

@@ -1,7 +1,7 @@
 import { PhotoGround } from '../chunk-SWD6CJ35.js';
 import { Convergence } from '../chunk-4XDJXMLF.js';
 import '../chunk-OIV7B44M.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/components/empty-state.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { Text } from '../chunk-ZLMRVBD7.js';

package/dist/components/event-detail-panel.js

@@ -2,7 +2,7 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/event-list-row-wide.js

@@ -3,7 +3,7 @@ import { Tag } from '../chunk-MWB7S54O.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/filter-category-row.js

@@ -1,5 +1,5 @@
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { ChevronRight } from 'lucide-react';

package/dist/components/link-button.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import '../chunk-FEK5XGZW.js';

package/dist/components/menu-family-block.js

@@ -3,7 +3,7 @@ import { HueChip } from '../chunk-6VOWT4YR.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/menu-index-list.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/menu-item.js

@@ -1,5 +1,5 @@
-export { MentionSignal, MenuItem } from '../chunk-RQPUBKFU.js';
-import '../chunk-CLFE4U5T.js';
-import '../chunk-WHUG6QEI.js';
+export { MentionSignal, MenuItem } from '../chunk-VXGIDKXV.js';
+import '../chunk-6PQINSAA.js';
+import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/multi-select-combobox.js

@@ -2,10 +2,10 @@ import { Checkbox } from '../chunk-L3CDXVEP.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/pagination.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/pan-zoom-viewport.js

@@ -1,5 +1,5 @@
 import { ButtonGroup } from '../chunk-EGU6EG73.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/place-card.js

@@ -6,7 +6,7 @@ import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/responsive-overlay.js

@@ -81,6 +81,29 @@ var ResponsiveOverlay = React.forwardRef(
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
     const isDrawer = container === "drawer";
+    const closeButton = isDrawer ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "responsive-overlay-close",
+        "aria-label": closeLabel,
+        onClick: () => onOpenChange(false),
+        className: "sr-only rounded-full text-muted-foreground transition-colors focus-visible:not-sr-only focus-visible:-m-1.5 focus-visible:grid focus-visible:size-11 focus-visible:shrink-0 focus-visible:place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "responsive-overlay-close",
+        onClick: () => onOpenChange(false),
+        className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
+        ]
+      }
+    );
     const header = /* @__PURE__ */ jsxs(
       "div",
       {
@@ -91,19 +114,7 @@ var ResponsiveOverlay = React.forwardRef(
             /* @__PURE__ */ jsx(Title, { className: cn("font-bold leading-tight", isDrawer ? "text-[22px]" : "text-[19px]"), children: title }),
             subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              "data-slot": "responsive-overlay-close",
-              onClick: () => onOpenChange(false),
-              className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
-              ]
-            }
-          )
+          closeButton
         ]
       }
     );

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-CLFE4U5T.js';
-import '../chunk-WHUG6QEI.js';
+export { SignatureChip } from '../chunk-6PQINSAA.js';
+import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

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

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-RQPUBKFU.js';
-import '../chunk-CLFE4U5T.js';
+import { MenuItem } from '../chunk-VXGIDKXV.js';
+import '../chunk-6PQINSAA.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-WHUG6QEI.js';
+import '../chunk-RYPPN2GZ.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.43",
+  "version": "0.8.44",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -112,6 +112,26 @@ export const StatusSize: Story = {
   ),
 };
 
+/**
+ * The two plain-variant radii: `size="chip"` (the inline default) draws
+ * `rounded-sm` (6px), `size="status"` draws the measured 7px the frames use
+ * for the taller pill. Pill (`confirmed`/`pending`/…) and soft
+ * (`softSuccess`/…) variants keep their own `rounded-full` / `rounded-md`
+ * regardless of size — see `Assignee` and `SoftTones` below.
+ */
+export const Radius: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="outline" size="chip">
+        chip · 6px
+      </Badge>
+      <Badge variant="outline" size="status">
+        status · 7px
+      </Badge>
+    </div>
+  ),
+};
+
 /**
  * `assignee` — who an item belongs to, in the shared table's organise view. It
  * is a control, not a status: the whole pill opens "Who had this?", so it keeps

package/src/components/badge.test.tsx

@@ -79,4 +79,63 @@ describe("Badge", () => {
       expect(badge).toHaveClass("py-[3px]", "text-[10.5px]", "font-bold");
     });
   });
+
+  describe("radius", () => {
+    // A plain variant (no radius of its own) leaks the base rounded-lg
+    // (10px) without a size-level radius. `chip` measures 6px, `status` 7px
+    // — the frames' status pill has no token for it.
+    it('size="chip" (the default) draws 6px, not the base 10px', () => {
+      render(<Badge variant="outline">Outline</Badge>);
+      const badge = screen.getByText("Outline");
+      expect(badge).toHaveClass("rounded-sm");
+      expect(badge.className).not.toContain("rounded-lg");
+    });
+
+    it('size="status" draws the measured 7px, not the base 10px', () => {
+      render(
+        <Badge variant="outline" size="status">
+          Outline
+        </Badge>
+      );
+      const badge = screen.getByText("Outline");
+      expect(badge).toHaveClass("rounded-[7px]");
+      expect(badge.className).not.toContain("rounded-lg");
+    });
+
+    it.each(["confirmed", "pending", "code", "completed", "assignee"] as const)(
+      "%s keeps its own rounded-full at both sizes",
+      (variant) => {
+        render(<Badge variant={variant}>Label</Badge>);
+        expect(screen.getByText("Label")).toHaveClass("rounded-full");
+
+        render(
+          <Badge variant={variant} size="status">
+            Label
+          </Badge>
+        );
+        const withStatus = screen.getAllByText("Label")[1];
+        expect(withStatus).toHaveClass("rounded-full");
+        expect(withStatus.className).not.toContain("rounded-sm");
+        expect(withStatus.className).not.toContain("rounded-[7px]");
+      }
+    );
+
+    it.each(["softSuccess", "softWarning", "softDestructive", "softNeutral"] as const)(
+      "%s keeps its own rounded-md at both sizes",
+      (variant) => {
+        render(<Badge variant={variant}>Label</Badge>);
+        expect(screen.getByText("Label")).toHaveClass("rounded-md");
+
+        render(
+          <Badge variant={variant} size="status">
+            Label
+          </Badge>
+        );
+        const withStatus = screen.getAllByText("Label")[1];
+        expect(withStatus).toHaveClass("rounded-md");
+        expect(withStatus.className).not.toContain("rounded-sm");
+        expect(withStatus.className).not.toContain("rounded-[7px]");
+      }
+    );
+  });
 });

package/src/components/badge.tsx

@@ -87,8 +87,9 @@ const badgeVariants = cva(
        * coming after the variant classes.
        */
       size: {
-        chip: "",
-        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold",
+        chip: "rounded-sm",
+        // measured: status badge radius 7px, no token
+        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold rounded-[7px]",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).
@@ -97,6 +98,15 @@ const badgeVariants = cva(
         false: "",
       },
     },
+    // `size` sets a radius meant for the plain variants (default, outline,
+    // success, …), which otherwise leak the base `rounded-lg` (10px). The
+    // pill (`rounded-full`) and soft (`rounded-md`) variants already draw
+    // their own measured radius — reassert it here so `cn`'s tailwind-merge
+    // doesn't let the size-level radius clobber it.
+    compoundVariants: [
+      { variant: ["confirmed", "pending", "code", "completed", "assignee"], class: "rounded-full" },
+      { variant: ["softSuccess", "softWarning", "softDestructive", "softNeutral"], class: "rounded-md" },
+    ],
     defaultVariants: {
       variant: "default",
       size: "chip",

package/src/components/button.test.tsx

@@ -16,7 +16,8 @@ describe("buttonVariants", () => {
   it("maps variant prop to correct classes", () => {
     expect(buttonVariants({ variant: "default" })).toContain("bg-primary");
     expect(buttonVariants({ variant: "destructive" })).toContain("bg-destructive");
-    expect(buttonVariants({ variant: "outline" })).toContain("border-border");
+    expect(buttonVariants({ variant: "outline" })).toContain("border-input");
+    expect(buttonVariants({ variant: "outline" })).toContain("bg-card");
     expect(buttonVariants({ variant: "secondary" })).toContain("bg-secondary");
     expect(buttonVariants({ variant: "ghost" })).toContain("hover:bg-accent");
     expect(buttonVariants({ variant: "link" })).toContain("text-primary");

package/src/components/button.tsx

@@ -26,7 +26,7 @@ const buttonVariants = cva(
          * stays put. `--accent-subtle` is that step; `active:` goes one more.
          */
         outline:
-          "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+          "border border-input bg-card hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         ghost: "hover:bg-accent-subtle active:bg-muted",

package/src/components/empty-state.test.tsx

@@ -9,12 +9,12 @@ const retry = { label: "Try again", onClick: () => {} };
 describe("EmptyState", () => {
   it("draws a retry on an error as an outline button", () => {
     render(<ErrorEmptyState title="Couldn't load this report" description="On our side." action={retry} />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("draws a clear-filters on a search as an outline button", () => {
     render(<SearchEmptyState title="No results" description="Try another name." action={retry} />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("keeps the plain empty state's create action filled", () => {
@@ -24,7 +24,7 @@ describe("EmptyState", () => {
 
   it("lets the caller choose the action style", () => {
     render(<EmptyState title="Nothing" description="Here." action={retry} actionVariant="outline" />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("calls the action", async () => {

package/src/components/responsive-overlay.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof ResponsiveOverlay> = {
     docs: {
       description: {
         component:
-          "One overlay authored once: a Drawer under md, a Dialog from md. The chrome is the same at both widths — title, one-line subtitle, round close, body, footer band. Resize the preview across 768px to see it change container. The scrim is `--scrim-overlay`, never `--scrim`.",
+          "One overlay authored once: a Drawer under md, a Dialog from md. The chrome is the same at both widths — title, one-line subtitle, round close, body, footer band. Resize the preview across 768px to see it change container. The scrim is `--scrim-overlay`, never `--scrim`. The drawer's round close button is keyboard-only: it stays `sr-only` (in the a11y tree and the tab order, never `display:none`) until it is `:focus-visible`, since the drawer already closes on a drag-down or a backdrop tap. Tab into the drawer below to see it appear. Dialog and sheet keep the always-visible close button.",
       },
     },
   },
@@ -58,6 +58,31 @@ export const AddAnItem: Story = {
   },
 };
 
+/**
+ * The drawer's close button (below 768px) has no visible circular X by
+ * default — a drag down or a backdrop tap already dismiss it. Tab through
+ * the open drawer to reveal the keyboard-only close button, drawn as the
+ * same disc dialog/sheet show at all times, with a visible focus ring.
+ */
+export const DrawerCloseIsKeyboardOnly: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(true);
+    return (
+      <ResponsiveOverlay
+        open={open}
+        onOpenChange={setOpen}
+        title="Add an item"
+        subtitle="Table 18 · from the menu"
+        closeLabel="Close"
+      >
+        <p className="text-[14px] text-muted-foreground">
+          Press Tab to move focus onto the close button — it is invisible until then.
+        </p>
+      </ResponsiveOverlay>
+    );
+  },
+};
+
 /**
  * floor/14-w1 — a working rail. `desktop="sheet"` with `modal={false}` and
  * `wideFrom="lg"`: from 1024 the page stays live beside it (click a table and

package/src/components/responsive-overlay.test.tsx

@@ -474,6 +474,55 @@ describe("ResponsiveOverlay", () => {
     });
   });
 
+  describe("close button", () => {
+    // The drawer already closes on a drag-down and a backdrop tap; the
+    // circular X is a mouse-only affordance the frames never draw there, so
+    // it stays out of view until a keyboard user tabs to it.
+    it("drawer: has no visible close — sr-only, not display:none", () => {
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close).toHaveClass("sr-only");
+      expect(close.className).not.toMatch(/\bhidden\b/);
+      expect(close).not.toHaveAttribute("hidden");
+      expect(close.style.display).not.toBe("none");
+    });
+
+    it("drawer: the close button is in the a11y tree with its label", () => {
+      open();
+      expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+    });
+
+    it("drawer: the close button is tabbable", () => {
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close).not.toHaveAttribute("tabindex", "-1");
+      expect(close).not.toBeDisabled();
+    });
+
+    it("drawer: clicking the close button closes it", async () => {
+      const onOpenChange = vi.fn();
+      open({ onOpenChange });
+      await userEvent.click(screen.getByRole("button", { name: "Close" }));
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("dialog: keeps the always-visible close button", () => {
+      setWidth(true);
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close.className).not.toContain("sr-only");
+      expect(close).toHaveClass("size-11");
+    });
+
+    it("sheet: keeps the always-visible close button", () => {
+      setWidth(true);
+      open({ desktop: "sheet" });
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close.className).not.toContain("sr-only");
+      expect(close).toHaveClass("size-11");
+    });
+  });
+
   it("stays out of the DOM while closed", () => {
     render(
       <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">

package/src/components/responsive-overlay.tsx

@@ -249,6 +249,50 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     // the desktop containers (already frames-checked elsewhere) don't move.
     const isDrawer = container === "drawer";
 
+    /**
+     * The drawer already has two ways to dismiss it that don't need a visible
+     * target — a drag down (vaul's `dismissible`) and the backdrop tap — and
+     * the frames never draw a circular X on the phone sheet. Drawing one
+     * anyway put a mouse-only affordance in a mode designed around touch and
+     * gravity.
+     *
+     * A keyboard user still needs one: `sr-only` (`clip-path`, not
+     * `display:none`, so the element stays in the a11y tree and the tab
+     * order) keeps it invisible until `:focus-visible` flips it back with
+     * `not-sr-only` — at which point it draws as the same 44×44 disc, in the
+     * same trailing header slot, that dialog and sheet show all the time.
+     * The disc's own box classes (`size-11`, `-m-1.5`, …) are gated behind
+     * `focus-visible:` too, not left unconditional, so nothing here fights
+     * `sr-only`'s 1px box for specificity while it is hidden.
+     */
+    const closeButton = isDrawer ? (
+      <button
+        type="button"
+        data-slot="responsive-overlay-close"
+        aria-label={closeLabel}
+        onClick={() => onOpenChange(false)}
+        className="sr-only rounded-full text-muted-foreground transition-colors focus-visible:not-sr-only focus-visible:-m-1.5 focus-visible:grid focus-visible:size-11 focus-visible:shrink-0 focus-visible:place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+          <X className="size-4" aria-hidden />
+        </span>
+      </button>
+    ) : (
+      <button
+        type="button"
+        data-slot="responsive-overlay-close"
+        onClick={() => onOpenChange(false)}
+        // 32px disc, 44px of tap target around it — the frames draw the disc,
+        // the accessibility floor asks for the target.
+        className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+          <X className="size-4" aria-hidden />
+        </span>
+        <span className="sr-only">{closeLabel}</span>
+      </button>
+    );
+
     const header = (
       <div
         data-slot="responsive-overlay-header"
@@ -264,19 +308,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             </Description>
           ) : null}
         </div>
-        <button
-          type="button"
-          data-slot="responsive-overlay-close"
-          onClick={() => onOpenChange(false)}
-          // 32px disc, 44px of tap target around it — the frames draw the disc,
-          // the accessibility floor asks for the target.
-          className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-        >
-          <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
-            <X className="size-4" aria-hidden />
-          </span>
-          <span className="sr-only">{closeLabel}</span>
-        </button>
+        {closeButton}
       </div>
     );
 

package/src/globals.css

@@ -108,7 +108,11 @@ h6 {
    */
   --warning-deep: oklch(0.62 0.15 70);
   --border: oklch(0.895 0 0);
-  --input: oklch(0.895 0 0);
+  /* Measured off the boards' edge: the outline button and inputs share this
+     line. Slightly darker and warmer than --border on purpose — a hairline
+     that only separates (border) can sit lighter than one that also has to
+     read as an interactive edge (input). */
+  --input: oklch(0.86 0.015 60);
   --ring: oklch(0.25 0.05 35);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);