@bearmenu/ui 0.8.41 → 0.8.43

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-TB2K5JN3.js';
+import { toggleVariants, SegmentedToggleContent } from '../chunk-BFS4M7KD.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -30,8 +30,12 @@ function ToggleGroup(_a) {
       className: cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
         // The segmented control's capsule: muted ground, the on cell a raised
-        // card inside it (see `toggleVariants.segmented`). 44px tall.
-        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
+        // card inside it (see `toggleVariants.segmented`). No padding here —
+        // each cell is the full 44px capsule height (the hit target), and
+        // draws its own smaller 36px card centred inside
+        // (`SegmentedToggleContent`), so the capsule stays the 44px the
+        // booking frames draw it at.
+        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted",
         // Chips wrap onto as many rows as they need, 7px apart.
         "data-[variant=chip]:flex-wrap data-[variant=chip]:gap-[7px] data-[variant=chip]:rounded-none",
         // The tab bar spans its container: a muted capsule, 4px inset.
@@ -71,7 +75,7 @@ function ToggleGroupItem(_a) {
           size: context.size || size
         }),
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : (
+        resolved === "segmented" ? "rounded-full" : (
           // Tabs and chips size themselves (`toggleVariants`' compounds);
           // the item's own rounding must not square them off.
           resolved === "tab" ? "rounded-full" : resolved === "chip" ? (
@@ -82,7 +86,7 @@ function ToggleGroupItem(_a) {
         className
       )
     }, props), {
-      children
+      children: resolved === "segmented" ? /* @__PURE__ */ jsx(SegmentedToggleContent, { children }) : children
     })
   );
 }

package/dist/components/toggle.d.ts

@@ -14,6 +14,15 @@ declare const toggleVariants: (props?: ({
     variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * The segmented variant's drawn pill — 36px tall, centred in the cell's 44px
+ * hit box. Painted here, on `group-data-[state=on]/segment:`, so the outer
+ * button (`toggleVariants({variant: "segmented"})`) can stay unpainted and
+ * full height. Shared by `Toggle` and `ToggleGroupItem`.
+ */
+declare function SegmentedToggleContent({ children }: {
+    children?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function Toggle({ className, variant, size, children, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 
-export { Toggle, toggleVariants };
+export { SegmentedToggleContent, Toggle, toggleVariants };

package/dist/components/toggle.js

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

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

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-ZUBBMLBD.js';
-import '../chunk-KGXTBTCJ.js';
+import { MenuItem } from '../chunk-RQPUBKFU.js';
+import '../chunk-CLFE4U5T.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-FQAIYKAS.js';
+import '../chunk-WHUG6QEI.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.41",
+  "version": "0.8.43",
   "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 { Armchair, Check, ChevronDown, CircleHelp, Clock, Users } from "lucide-react";
+import { Armchair, Check, ChevronDown, CircleCheck, CircleHelp, Clock, Users } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -91,6 +91,27 @@ export const BookingStatus: Story = {
   ),
 };
 
+/**
+ * `size="status"` — the taller pill beside a summary, not the inline row chip
+ * `BookingStatus` above draws. Measured off the booking details panel
+ * (Bookings Calendar 09): a 24px pill at 12px semibold, icon included.
+ */
+export const StatusSize: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge as="span" variant="confirmed" size="status" icon={<CircleCheck />} className="gap-[5px]">
+        Confirmed
+      </Badge>
+      <Badge as="span" variant="pending" size="status">
+        Pending
+      </Badge>
+      <Badge as="span" variant="completed" size="status">
+        Completed
+      </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

@@ -42,4 +42,41 @@ describe("Badge", () => {
     render(<Badge variant="success">Solid</Badge>);
     expect(screen.getByText("Solid")).toHaveClass("bg-success", "text-success-foreground");
   });
+
+  describe('size="status"', () => {
+    // Measured off the booking details panel (Bookings Calendar 09): a 24px
+    // pill (18px line-height + 3px top/bottom), not the old py-[11px]'s 38px.
+    it("draws a 24px pill, not the old 38px one", () => {
+      render(<Badge size="status">Confirmed</Badge>);
+      const badge = screen.getByText("Confirmed");
+      expect(badge).toHaveClass("py-[3px]", "leading-[18px]");
+      expect(badge).not.toHaveClass("py-[11px]");
+    });
+
+    it("overrides a colour variant's compact, inline-row type scale", () => {
+      // `confirmed` alone is the small 10.5px bold row chip; `status` is the
+      // taller 12px semibold scale the booking details header draws, and
+      // must win since it is applied after the variant in the merge.
+      render(<Badge size="status">Confirmed</Badge>);
+      const badge = screen.getByText("Confirmed");
+      expect(badge).toHaveClass("text-xs", "font-semibold");
+      expect(badge.className).not.toContain("text-[10.5px]");
+
+      render(
+        <Badge variant="confirmed" size="status">
+          Confirmed
+        </Badge>
+      );
+      const withVariant = screen.getAllByText("Confirmed")[1];
+      expect(withVariant).toHaveClass("text-xs", "font-semibold", "py-[3px]");
+      expect(withVariant.className).not.toContain("text-[10.5px]");
+      expect(withVariant.className).not.toContain("font-bold");
+    });
+
+    it("leaves the default chip size's compact padding alone", () => {
+      render(<Badge variant="confirmed">Confirmed</Badge>);
+      const badge = screen.getByText("Confirmed");
+      expect(badge).toHaveClass("py-[3px]", "text-[10.5px]", "font-bold");
+    });
+  });
 });

package/src/components/badge.tsx

@@ -78,11 +78,17 @@ const badgeVariants = cva(
       /**
        * `status` is the taller pill the booking design draws beside a
        * summary — the same ink and radius, more air. `chip` (the default) is
-       * the inline one that sits in a row of text.
+       * the inline one that sits in a row of text. Measured off the booking
+       * details panel (Bookings Calendar 09, the header status badge): a 24px
+       * pill, not the 38px `py-[11px]` previously drew. Resets text size and
+       * weight too, because the colour variants (`confirmed`/`pending`/…)
+       * tune those for their compact, inline-with-a-row scale (10.5px bold);
+       * `status` is a different scale (12px semibold) and wins the merge by
+       * coming after the variant classes.
        */
       size: {
         chip: "",
-        status: "py-[11px]",
+        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).

package/src/components/drawer.stories.tsx

@@ -45,3 +45,28 @@ export const Default: Story = {
     </Drawer>
   ),
 };
+
+/**
+ * `snapHeight` — a fixed sheet instead of one that grows with its content,
+ * for a phone drawer the frames draw at a set height (the floor plan's table
+ * sheet, ~640px). Opt-in: every other drawer keeps sizing to its content.
+ */
+export const FixedHeight: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open table sheet</Button>
+      </DrawerTrigger>
+      <DrawerContent snapHeight={420}>
+        <DrawerHeader>
+          <DrawerTitle>T5</DrawerTitle>
+          <DrawerDescription>6 seats · Inside</DrawerDescription>
+        </DrawerHeader>
+        <div className="flex-1 p-4 text-muted-foreground">
+          The sheet holds this height regardless of how little content sits
+          inside it.
+        </div>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/src/components/drawer.test.tsx

@@ -52,4 +52,54 @@ describe("Drawer", () => {
     await new Promise((resolve) => requestAnimationFrame(resolve));
     expect(dialog.contains(document.activeElement)).toBe(false);
   });
+
+  // Measured off the booking frames' table sheet (floor/14-w1): a 40×4px
+  // handle, not the previous 60×6.
+  it("draws the smaller handle by default", () => {
+    render(<Harness />);
+    const handle = document.querySelector('[data-slot="drawer-content"] > [aria-hidden]');
+    expect(handle).toHaveClass("h-1", "w-10");
+    expect(handle).not.toHaveClass("h-1.5", "w-[60px]");
+  });
+
+  describe("snapHeight", () => {
+    it("is content-sized (no inline height) when omitted", () => {
+      render(<Harness />);
+      const dialog = screen.getByRole("dialog");
+      expect(dialog.style.height).toBe("");
+    });
+
+    it("sets a fixed pixel height from a number", () => {
+      render(
+        <Drawer open onOpenChange={() => {}}>
+          <DrawerContent snapHeight={640}>
+            <DrawerTitle>T5</DrawerTitle>
+          </DrawerContent>
+        </Drawer>
+      );
+      expect(screen.getByRole("dialog").style.height).toBe("640px");
+    });
+
+    it("passes a string height through as-is", () => {
+      render(
+        <Drawer open onOpenChange={() => {}}>
+          <DrawerContent snapHeight="70vh">
+            <DrawerTitle>T5</DrawerTitle>
+          </DrawerContent>
+        </Drawer>
+      );
+      expect(screen.getByRole("dialog").style.height).toBe("70vh");
+    });
+
+    it("is ignored on a horizontal (left/right) drawer", () => {
+      render(
+        <Drawer open onOpenChange={() => {}} direction="right">
+          <DrawerContent snapHeight={640}>
+            <DrawerTitle>T5</DrawerTitle>
+          </DrawerContent>
+        </Drawer>
+      );
+      expect(screen.getByRole("dialog").style.height).toBe("");
+    });
+  });
 });

package/src/components/drawer.tsx

@@ -68,58 +68,81 @@ type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.
    * `--scrim-overlay` in globals.css, and why it is not `--scrim`).
    */
   overlayClassName?: string;
+  /**
+   * A fixed sheet height instead of sizing to content — the booking frames'
+   * ~640px table sheet (floor/14-w1) draws one instead of growing with its
+   * content. A number is px; a string is passed through (`"70vh"`). Only
+   * meaningful on a vertical (`top`/`bottom`) drawer, and always capped by the
+   * shared `max-h-[85vh]` on short viewports. Omit it to keep every existing
+   * caller's content-sized sheet — this is opt-in, not a new default.
+   */
+  snapHeight?: number | string;
 };
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
->(({ className, variant = "flush", showHandle, overlayClassName, children, ...props }, ref) => {
-  const { direction, modal } = React.useContext(DrawerContext);
-  const isVertical = direction === "top" || direction === "bottom";
-  const handleEnabled = showHandle ?? (direction === "bottom");
-
-  const positionClasses =
-    direction === "bottom"
-      ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]"
-      : direction === "top"
-        ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]"
-        : direction === "left"
-          ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]"
-          : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
-
-  return (
-    <DrawerPortal>
-      <DrawerOverlay className={overlayClassName} />
-      <DrawerPrimitive.Content
-        ref={ref}
-        data-slot="drawer-content"
-        // Radix hides the page from assistive tech but never says so on the
-        // dialog itself; `aria-modal` is what tells a screen reader to stay in.
-        aria-modal={modal ? true : undefined}
-        className={cn(
-          "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
-          positionClasses,
-          // The single height cap for every vertical drawer. Consumers should
-          // NOT restate it: six app call sites carried an identical
-          // `!max-h-[90vh]`, so this default governed nothing and changing it
-          // here would have reached none of them.
-          isVertical ? "max-h-[85vh]" : "",
-          variant === "floating" && "m-3 rounded-2xl border",
-          className
-        )}
-        {...props}
-      >
-        {handleEnabled && (
-          <div
-            aria-hidden
-            className="mx-auto mt-2 h-1.5 w-[60px] shrink-0 rounded-full bg-muted-foreground/30"
-          />
-        )}
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
-  );
-});
+>(
+  (
+    { className, variant = "flush", showHandle, overlayClassName, snapHeight, style, children, ...props },
+    ref
+  ) => {
+    const { direction, modal } = React.useContext(DrawerContext);
+    const isVertical = direction === "top" || direction === "bottom";
+    const handleEnabled = showHandle ?? (direction === "bottom");
+    const fixedHeight =
+      isVertical && snapHeight !== undefined
+        ? typeof snapHeight === "number"
+          ? `${snapHeight}px`
+          : snapHeight
+        : undefined;
+
+    const positionClasses =
+      direction === "bottom"
+        ? "inset-x-0 bottom-0 flex-col rounded-t-2xl border-t [padding-bottom:max(env(safe-area-inset-bottom),0px)]"
+        : direction === "top"
+          ? "inset-x-0 top-0 flex-col rounded-b-2xl border-b [padding-top:max(env(safe-area-inset-top),0px)]"
+          : direction === "left"
+            ? "inset-y-0 left-0 h-full w-3/4 max-w-sm flex-col rounded-r-2xl border-r [padding-left:max(env(safe-area-inset-left),0px)]"
+            : "inset-y-0 right-0 h-full w-3/4 max-w-sm flex-col rounded-l-2xl border-l [padding-right:max(env(safe-area-inset-right),0px)]";
+
+    return (
+      <DrawerPortal>
+        <DrawerOverlay className={overlayClassName} />
+        <DrawerPrimitive.Content
+          ref={ref}
+          data-slot="drawer-content"
+          // Radix hides the page from assistive tech but never says so on the
+          // dialog itself; `aria-modal` is what tells a screen reader to stay in.
+          aria-modal={modal ? true : undefined}
+          style={fixedHeight !== undefined ? { ...style, height: fixedHeight } : style}
+          className={cn(
+            "fixed z-[1000] flex border-border bg-card shadow-[var(--shadow-overlay)]",
+            positionClasses,
+            // The single height cap for every vertical drawer, fixed height or
+            // not (a `snapHeight` taller than the viewport still backs off to
+            // this on a short phone). Consumers should NOT restate it: six app
+            // call sites carried an identical `!max-h-[90vh]`, so this default
+            // governed nothing and changing it here would have reached none of
+            // them.
+            isVertical ? "max-h-[85vh]" : "",
+            variant === "floating" && "m-3 rounded-2xl border",
+            className
+          )}
+          {...props}
+        >
+          {handleEnabled && (
+            <div
+              aria-hidden
+              className="mx-auto mt-2 h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30"
+            />
+          )}
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
+    );
+  }
+);
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (

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

@@ -62,6 +62,8 @@ export const AddAnItem: Story = {
  * 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
  * the rail shows that one instead of closing); under 1024 it is the drawer.
+ * `drawerHeight={640}` matches the frame's fixed-height phone sheet — resize
+ * the preview under 1024px and open a table to see it hold its height.
  */
 export const WorkingRail: Story = {
   render: () => {
@@ -83,6 +85,7 @@ export const WorkingRail: Story = {
           desktop="sheet"
           modal={false}
           wideFrom="lg"
+          drawerHeight={640}
           closeLabel="Close"
         >
           <p className="text-[14px] text-muted-foreground">
@@ -119,6 +122,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) {
@@ -340,6 +426,54 @@ describe("ResponsiveOverlay", () => {
     });
   });
 
+  describe("phone drawer chrome", () => {
+    // Measured off the booking frames' table sheet (floor/14-w1): 16px
+    // gutter and a 22px title on the phone drawer; the desktop dialog/sheet
+    // keep their existing 20px / 19px.
+    it("tightens the gutter and grows the title on the drawer only", () => {
+      open();
+      const header = document.querySelector('[data-slot="responsive-overlay-header"]');
+      expect(header).toHaveClass("px-4", "pt-4");
+      expect(screen.getByText("Add an item")).toHaveClass("text-[22px]");
+      const body = document.querySelector('[data-slot="responsive-overlay-body"]');
+      expect(body).toHaveClass("px-4");
+    });
+
+    it("leaves the desktop dialog's gutter and title alone", () => {
+      setWidth(true);
+      open();
+      const header = document.querySelector('[data-slot="responsive-overlay-header"]');
+      expect(header).toHaveClass("px-5", "pt-5");
+      expect(screen.getByText("Add an item")).toHaveClass("text-[19px]");
+    });
+
+    it("leaves the desktop sheet's gutter and title alone", () => {
+      setWidth(true);
+      open({ desktop: "sheet" });
+      const header = document.querySelector('[data-slot="responsive-overlay-header"]');
+      expect(header).toHaveClass("px-5", "pt-5");
+      expect(screen.getByText("Add an item")).toHaveClass("text-[19px]");
+    });
+  });
+
+  describe("drawerHeight", () => {
+    it("is content-sized when omitted", () => {
+      open();
+      expect(screen.getByRole("dialog").style.height).toBe("");
+    });
+
+    it("fixes the drawer's height when given", () => {
+      open({ drawerHeight: 640 });
+      expect(screen.getByRole("dialog").style.height).toBe("640px");
+    });
+
+    it("does not affect the desktop dialog", () => {
+      setWidth(true);
+      open({ drawerHeight: 640 });
+      expect(screen.getByRole("dialog").style.height).toBe("");
+    });
+  });
+
   it("stays out of the DOM while closed", () => {
     render(
       <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">