@bearmenu/ui 0.8.42 → 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.d.ts

@@ -64,6 +64,22 @@ type ResponsiveOverlayProps = {
      * keeps today's default in every mode (dialog, sheet, drawer).
      */
     initialFocusRef?: React.RefObject<HTMLElement | null>;
+    /**
+     * Whether closing the overlay returns focus to whatever had it before the
+     * overlay opened. Two things do that today: Radix's `onCloseAutoFocus` —
+     * the FocusScope's own auto-focus-on-unmount, refocusing the element that
+     * was active before the overlay trapped focus — and this component's own
+     * `useFocusReturn`, which refocuses that same element a frame later so it
+     * survives the overlay's own unmount. `true` (the default) keeps today's
+     * behaviour in every mode (dialog, sheet, drawer): the opener gets focus
+     * back.
+     *
+     * Pass `false` when closing hands focus to another surface that takes it
+     * itself — a pick-mode bar docking over the header, say. Both paths are
+     * disabled and focus stays wherever the consumer puts it (typically inside
+     * the same `onOpenChange(false)` handler that closes the overlay).
+     */
+    returnFocus?: boolean;
     /**
      * A fixed height for the phone drawer instead of sizing to its content —
      * `DrawerContent`'s `snapHeight` (the frames' ~640px table sheet). Applies

package/dist/components/responsive-overlay.js

@@ -15,7 +15,7 @@ var CONTAINER_DESCRIPTION = {
   dialog: DialogDescription,
   sheet: SheetDescription
 };
-function useFocusReturn(open) {
+function useFocusReturn(open, returnFocus) {
   const openerRef = React.useRef(null);
   const wasOpen = React.useRef(false);
   React.useEffect(() => {
@@ -26,7 +26,7 @@ function useFocusReturn(open) {
     if (wasOpen.current) {
       wasOpen.current = false;
       const opener = openerRef.current;
-      if (opener && opener.isConnected) {
+      if (returnFocus && opener && opener.isConnected) {
         requestAnimationFrame(() => opener.focus());
       }
     }
@@ -39,7 +39,7 @@ function useFocusReturn(open) {
     }
     document.addEventListener("focusin", track);
     return () => document.removeEventListener("focusin", track);
-  }, [open]);
+  }, [open, returnFocus]);
 }
 var ResponsiveOverlay = React.forwardRef(
   ({
@@ -57,11 +57,12 @@ var ResponsiveOverlay = React.forwardRef(
     className,
     bodyClassName,
     initialFocusRef,
+    returnFocus = true,
     drawerHeight
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
-    useFocusReturn(open);
+    useFocusReturn(open, returnFocus);
     const handleOpenAutoFocus = React.useCallback(
       (event) => {
         if (!(initialFocusRef == null ? void 0 : initialFocusRef.current)) return;
@@ -70,10 +71,39 @@ var ResponsiveOverlay = React.forwardRef(
       },
       [initialFocusRef]
     );
+    const handleCloseAutoFocus = React.useCallback(
+      (event) => {
+        if (!returnFocus) event.preventDefault();
+      },
+      [returnFocus]
+    );
     const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     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",
       {
@@ -84,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
         ]
       }
     );
@@ -129,7 +147,8 @@ var ResponsiveOverlay = React.forwardRef(
           attachment: "inset",
           hideClose: true,
           overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          onOpenAutoFocus: handleOpenAutoFocus
+          onOpenAutoFocus: handleOpenAutoFocus,
+          onCloseAutoFocus: handleCloseAutoFocus
         }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
@@ -154,7 +173,8 @@ var ResponsiveOverlay = React.forwardRef(
           size,
           showCloseButton: false,
           overlayClassName: "bg-scrim-overlay backdrop-blur-none",
-          onOpenAutoFocus: handleOpenAutoFocus
+          onOpenAutoFocus: handleOpenAutoFocus,
+          onCloseAutoFocus: handleCloseAutoFocus
         }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
@@ -175,7 +195,8 @@ var ResponsiveOverlay = React.forwardRef(
       __spreadProps(__spreadValues(__spreadValues({
         ref,
         overlayClassName: "bg-scrim-overlay",
-        onOpenAutoFocus: handleOpenAutoFocus
+        onOpenAutoFocus: handleOpenAutoFocus,
+        onCloseAutoFocus: handleCloseAutoFocus
       }, drawerHeight !== void 0 ? { snapHeight: drawerHeight } : {}), describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [

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.42",
+  "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
@@ -122,6 +147,65 @@ export const FormRail: Story = {
   },
 };
 
+/**
+ * `returnFocus={false}` — closing hands off to a surface that takes focus
+ * itself, rather than returning it to the opener. Here that surface is a
+ * pick-mode bar docking over the header: click "Add item", then "Pick a
+ * table" inside it — focus lands on the bar's own button, not back on
+ * "Add item".
+ */
+export const HandsOffFocusOnClose: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    const [pickMode, setPickMode] = React.useState(false);
+    const pickButtonRef = React.useRef<HTMLButtonElement>(null);
+
+    return (
+      <div className="relative">
+        {pickMode ? (
+          <div className="mb-3 flex items-center justify-between rounded-lg border border-border bg-surface-2 p-3">
+            <span className="text-[14px] font-medium">Pick a table on the floor</span>
+            <Button ref={pickButtonRef} variant="outline" onClick={() => setPickMode(false)}>
+              Cancel
+            </Button>
+          </div>
+        ) : null}
+        <Button variant="cta" onClick={() => setOpen(true)}>
+          Add item
+        </Button>
+        <ResponsiveOverlay
+          open={open}
+          onOpenChange={(next) => {
+            if (!next) {
+              // The overlay hands off to the pick-mode bar itself — it moves
+              // focus into its own "Cancel" button before the overlay even
+              // starts unmounting, so the overlay must not fight it back.
+              setPickMode(true);
+              requestAnimationFrame(() => pickButtonRef.current?.focus());
+            }
+            setOpen(next);
+          }}
+          title="Add an item"
+          subtitle="Table 18 · from the menu"
+          closeLabel="Close"
+          returnFocus={false}
+          footer={
+            <ActionBar
+              secondary={<Button variant="outline">Pick a table</Button>}
+              primary={<Button variant="cta">Add 1 item</Button>}
+            />
+          }
+        >
+          <p className="text-[14px] text-muted-foreground">
+            Closing this does not return focus to "Add item" — the pick-mode bar above takes it
+            instead.
+          </p>
+        </ResponsiveOverlay>
+      </div>
+    );
+  },
+};
+
 /** T1 — an overlay with no footer note: the two actions divide the band. */
 export const JoinTheTable: Story = {
   render: () => {

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

@@ -191,6 +191,92 @@ describe("ResponsiveOverlay", () => {
     await waitFor(() => expect(opener).toHaveFocus());
   });
 
+  describe("returnFocus", () => {
+    /**
+     * Mirrors a pick-mode bar docking over the header: the consumer decides,
+     * from inside the same `onOpenChange(false)` handler that closes the
+     * overlay, to move focus itself — scheduled a frame out, same as a bar
+     * that focuses itself once it mounts. The overlay is still trapping
+     * focus synchronously at the moment `onOpenChange` fires (it hasn't
+     * unmounted yet), so an immediate `.focus()` call here would just be
+     * bounced back inside by that trap; that is Radix's ordinary modal
+     * behaviour, unrelated to `returnFocus`, which is what a caller works
+     * around by deferring.
+     */
+    function Harness({
+      returnFocus,
+      ...props
+    }: Partial<React.ComponentProps<typeof ResponsiveOverlay>>) {
+      const [isOpen, setIsOpen] = React.useState(false);
+      const elsewhereRef = React.useRef<HTMLButtonElement>(null);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Add item
+          </button>
+          <button type="button" ref={elsewhereRef}>
+            Elsewhere
+          </button>
+          <ResponsiveOverlay
+            open={isOpen}
+            onOpenChange={(next) => {
+              if (!next && returnFocus === false) {
+                requestAnimationFrame(() => elsewhereRef.current?.focus());
+              }
+              setIsOpen(next);
+            }}
+            title="Add an item"
+            closeLabel="Close"
+            returnFocus={returnFocus}
+            {...props}
+          >
+            <p>body</p>
+          </ResponsiveOverlay>
+        </>
+      );
+    }
+
+    /** Two rAF ticks — where `useFocusReturn`'s own refocus would land. */
+    async function nextFrames(count: number) {
+      for (let i = 0; i < count; i++) {
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+      }
+    }
+
+    const MODES: Array<{
+      name: string;
+      wide: boolean;
+      props: Partial<React.ComponentProps<typeof ResponsiveOverlay>>;
+    }> = [
+      { name: "drawer", wide: false, props: {} },
+      { name: "dialog", wide: true, props: {} },
+      { name: "sheet", wide: true, props: { desktop: "sheet" } },
+    ];
+
+    for (const mode of MODES) {
+      it(`${mode.name}: default (true) returns focus to the opener`, async () => {
+        setWidth(mode.wide);
+        render(<Harness {...mode.props} />);
+        const opener = screen.getByRole("button", { name: "Add item" });
+        await userEvent.click(opener);
+        await userEvent.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => expect(opener).toHaveFocus());
+      });
+
+      it(`${mode.name}: returnFocus={false} leaves focus where the consumer puts it`, async () => {
+        setWidth(mode.wide);
+        render(<Harness {...mode.props} returnFocus={false} />);
+        const opener = screen.getByRole("button", { name: "Add item" });
+        const elsewhere = screen.getByRole("button", { name: "Elsewhere" });
+        await userEvent.click(opener);
+        await userEvent.click(screen.getByRole("button", { name: "Close" }));
+        await nextFrames(2);
+        expect(elsewhere).toHaveFocus();
+        expect(opener).not.toHaveFocus();
+      });
+    }
+  });
+
   describe('desktop="sheet"', () => {
     /** A width-aware matchMedia, for the md / lg split. */
     function setViewport(px: number) {
@@ -388,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

@@ -32,8 +32,12 @@ const CONTAINER_DESCRIPTION = {
  * The opener is tracked while the overlay is CLOSED rather than captured when
  * it opens: by the time an effect could run on the opening render, the dialog
  * has already mounted and pulled focus into itself.
+ *
+ * `returnFocus={false}` disables the `requestAnimationFrame` refocus below,
+ * but tracking keeps running regardless — cheap, and it means flipping the
+ * prop back on mid-lifecycle has an opener ready immediately.
  */
-function useFocusReturn(open: boolean) {
+function useFocusReturn(open: boolean, returnFocus: boolean) {
   const openerRef = React.useRef<HTMLElement | null>(null);
   const wasOpen = React.useRef(false);
 
@@ -48,7 +52,7 @@ function useFocusReturn(open: boolean) {
       const opener = openerRef.current;
       // The overlay is still unmounting on this tick, and it takes focus with
       // it; restoring on the next frame lands after that.
-      if (opener && opener.isConnected) {
+      if (returnFocus && opener && opener.isConnected) {
         requestAnimationFrame(() => opener.focus());
       }
     }
@@ -62,7 +66,7 @@ function useFocusReturn(open: boolean) {
     }
     document.addEventListener("focusin", track);
     return () => document.removeEventListener("focusin", track);
-  }, [open]);
+  }, [open, returnFocus]);
 }
 
 export type ResponsiveOverlayProps = {
@@ -124,6 +128,22 @@ export type ResponsiveOverlayProps = {
    * keeps today's default in every mode (dialog, sheet, drawer).
    */
   initialFocusRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * Whether closing the overlay returns focus to whatever had it before the
+   * overlay opened. Two things do that today: Radix's `onCloseAutoFocus` —
+   * the FocusScope's own auto-focus-on-unmount, refocusing the element that
+   * was active before the overlay trapped focus — and this component's own
+   * `useFocusReturn`, which refocuses that same element a frame later so it
+   * survives the overlay's own unmount. `true` (the default) keeps today's
+   * behaviour in every mode (dialog, sheet, drawer): the opener gets focus
+   * back.
+   *
+   * Pass `false` when closing hands focus to another surface that takes it
+   * itself — a pick-mode bar docking over the header, say. Both paths are
+   * disabled and focus stays wherever the consumer puts it (typically inside
+   * the same `onOpenChange(false)` handler that closes the overlay).
+   */
+  returnFocus?: boolean;
   /**
    * A fixed height for the phone drawer instead of sizing to its content —
    * `DrawerContent`'s `snapHeight` (the frames' ~640px table sheet). Applies
@@ -178,13 +198,14 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       className,
       bodyClassName,
       initialFocusRef,
+      returnFocus = true,
       drawerHeight,
     },
     ref
   ) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
-    useFocusReturn(open);
+    useFocusReturn(open, returnFocus);
 
     // Radix (and vaul, underneath the drawer) call this before moving focus
     // themselves; preventing the default there is what stops the first-
@@ -198,6 +219,19 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       [initialFocusRef]
     );
 
+    // Radix's FocusScope calls this on unmount before it runs its own default
+    // action — refocusing whatever was active before the scope trapped focus,
+    // i.e. the opener. Vaul forwards it straight through to the same Radix
+    // primitive underneath the drawer, so one handler covers all three modes.
+    // Leaving it a no-op when `returnFocus` is true reproduces today's
+    // behaviour exactly: the prop was never passed before this change.
+    const handleCloseAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (!returnFocus) event.preventDefault();
+      },
+      [returnFocus]
+    );
+
     // The name and the description are Radix's own: its `Title` and
     // `Description` register ids in the dialog context and `Content` points
     // `aria-labelledby` / `aria-describedby` at them. Passing our own ids
@@ -215,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"
@@ -230,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>
     );
 
@@ -278,6 +344,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
             onOpenAutoFocus={handleOpenAutoFocus}
+            onCloseAutoFocus={handleCloseAutoFocus}
             {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
@@ -310,6 +377,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             showCloseButton={false}
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
             onOpenAutoFocus={handleOpenAutoFocus}
+            onCloseAutoFocus={handleCloseAutoFocus}
             {...describedBy}
             className={cn(
               // The dialog's own `grid gap-4 p-6` would put air between the
@@ -332,6 +400,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
           ref={ref}
           overlayClassName="bg-scrim-overlay"
           onOpenAutoFocus={handleOpenAutoFocus}
+          onCloseAutoFocus={handleCloseAutoFocus}
           {...(drawerHeight !== undefined ? { snapHeight: drawerHeight } : {})}
           {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}

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);