@bearmenu/ui 0.8.40 → 0.8.42

package/dist/components/responsive-overlay.js

@@ -1,12 +1,12 @@
 import { useMediaQuery, DESKTOP_MEDIA_QUERY } from '../chunk-OPVKL4VS.js';
-import { Sheet, SheetContent, SheetTitle, SheetDescription } from '../chunk-LAEVMNJN.js';
-import { Drawer, DrawerContent, DrawerTitle, DrawerDescription } from '../chunk-NF5UMLSL.js';
-import { Dialog, DialogContent, DialogTitle, DialogDescription } from '../chunk-IQIJCMG2.js';
+import { SheetTitle, SheetDescription, Sheet, SheetContent } from '../chunk-LAEVMNJN.js';
+import { DrawerTitle, DrawerDescription, Drawer, DrawerContent } from '../chunk-FVFAOW36.js';
+import { DialogTitle, DialogDescription, Dialog, DialogContent } from '../chunk-IQIJCMG2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
 import { X } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var MD_MEDIA_QUERY = "(min-width: 768px)";
 var CONTAINER_TITLE = { drawer: DrawerTitle, dialog: DialogTitle, sheet: SheetTitle };
@@ -55,38 +55,60 @@ var ResponsiveOverlay = React.forwardRef(
     modal = true,
     wideFrom = "md",
     className,
-    bodyClassName
+    bodyClassName,
+    initialFocusRef,
+    drawerHeight
   }, ref) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container = isWide ? desktop : "drawer";
     useFocusReturn(open);
+    const handleOpenAutoFocus = React.useCallback(
+      (event) => {
+        if (!(initialFocusRef == null ? void 0 : initialFocusRef.current)) return;
+        event.preventDefault();
+        initialFocusRef.current.focus();
+      },
+      [initialFocusRef]
+    );
     const describedBy = subtitle ? {} : { "aria-describedby": void 0 };
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
-    const header = /* @__PURE__ */ jsxs("div", { "data-slot": "responsive-overlay-header", className: "flex items-start gap-3 px-5 pt-5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx(Title, { className: "text-[19px] font-bold leading-tight", 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 })
-          ]
-        }
-      )
-    ] });
+    const isDrawer = container === "drawer";
+    const header = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "responsive-overlay-header",
+        className: cn("flex items-start gap-3", isDrawer ? "px-4 pt-4" : "px-5 pt-5"),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__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 })
+              ]
+            }
+          )
+        ]
+      }
+    );
     const body = /* @__PURE__ */ jsx(
       "div",
       {
         "data-slot": "responsive-overlay-body",
-        className: cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName),
+        className: cn(
+          "min-h-0 flex-1 overflow-y-auto py-4",
+          isDrawer ? "px-4" : "px-5",
+          bodyClassName
+        ),
         children
       }
     );
@@ -106,7 +128,8 @@ var ResponsiveOverlay = React.forwardRef(
           side: "right",
           attachment: "inset",
           hideClose: true,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          onOpenAutoFocus: handleOpenAutoFocus
         }, describedBy), {
           "data-slot": "responsive-overlay-sheet",
           "data-modal": modal ? "true" : "false"
@@ -130,7 +153,8 @@ var ResponsiveOverlay = React.forwardRef(
           ref,
           size,
           showCloseButton: false,
-          overlayClassName: "bg-scrim-overlay backdrop-blur-none"
+          overlayClassName: "bg-scrim-overlay backdrop-blur-none",
+          onOpenAutoFocus: handleOpenAutoFocus
         }, describedBy), {
           className: cn(
             // The dialog's own `grid gap-4 p-6` would put air between the
@@ -148,10 +172,11 @@ var ResponsiveOverlay = React.forwardRef(
     }
     return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
       DrawerContent,
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref,
-        overlayClassName: "bg-scrim-overlay"
-      }, describedBy), {
+        overlayClassName: "bg-scrim-overlay",
+        onOpenAutoFocus: handleOpenAutoFocus
+      }, drawerHeight !== void 0 ? { snapHeight: drawerHeight } : {}), describedBy), {
         className: cn("flex max-h-[85vh] flex-col p-0", className),
         children: [
           header,

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-5SGKGFMN.js';
+import { Button } from '../chunk-K6ACNU2L.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-KGXTBTCJ.js';
-import '../chunk-FQAIYKAS.js';
+export { SignatureChip } from '../chunk-CLFE4U5T.js';
+import '../chunk-WHUG6QEI.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/sliding-panels.js

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

package/dist/components/spinner.d.ts

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

package/dist/components/tag.d.ts

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

package/dist/components/text.d.ts

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

package/dist/components/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.40",
+  "version": "0.8.42",
   "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/button.test.tsx

@@ -158,6 +158,16 @@ describe("Button component", () => {
     expect(screen.getByRole("button").className).toContain("h-9");
   });
 
+  // The booking frames' 44px controls (Reports/02-p4 "Try again" + its report-
+  // range trigger, Calendar/08-r0 "New reservation") draw a 10px radius, not
+  // the base `rounded-xl` (12px) this size otherwise inherits.
+  it("draws the default size at a 10px radius, not the base rounded-xl", () => {
+    render(<Button>x</Button>);
+    const classes = screen.getByRole("button").className;
+    expect(classes).toContain("rounded-[10px]");
+    expect(classes).not.toMatch(/(^|\s)rounded-xl(\s|$)/);
+  });
+
   it("applies fullWidth class when fullWidth is true", () => {
     render(<Button fullWidth>x</Button>);
     expect(screen.getByRole("button").className).toContain("w-full");

package/src/components/button.tsx

@@ -75,7 +75,12 @@ const buttonVariants = cva(
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
         sm: "h-9 rounded-lg px-4",
-        default: "h-11 px-6 py-2",
+        /**
+         * The booking frames' 44px controls (Reports/02-p4 "Try again" and its
+         * report-range trigger, Calendar/08-r0 "New reservation") all draw
+         * 10px, not the base `rounded-xl` (12px) this size otherwise inherits.
+         */
+        default: "h-11 rounded-[10px] px-6 py-2",
         lg: "h-12 rounded-2xl px-8",
         /** The `ink` action's shape. Owns the radius so no variant fights it. */
         pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",

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("");
+    });
+  });
 });