@bearmenu/ui 0.8.40 → 0.8.42

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/empty-state.test.tsx

@@ -47,6 +47,14 @@ describe("EmptyState", () => {
     expect(tile).toHaveClass("size-16", "sm:size-18", "[&_svg]:size-7");
   });
 
+  // reports/02-p4, calendar/02-c2: the tile draws the shadow alone, no border.
+  it("draws the icon tile borderless, with the shadow alone", () => {
+    render(<EmptyState title="Empty" description="" />);
+    const tile = document.querySelector('[data-slot="empty-state-icon"]');
+    expect(tile).toHaveClass("shadow-sm");
+    expect(tile).not.toHaveClass("border", "border-border");
+  });
+
   it("renders no empty paragraph when there is no body", () => {
     render(<EmptyState title="Empty" description="" />);
     expect(screen.getByRole("status").querySelector("p")).toBeNull();

package/src/components/empty-state.tsx

@@ -118,7 +118,9 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             className={cn(
               // The glyph size is the tile's, whatever size the caller's icon
               // node asked for — a 40px icon in a 64px tile has no margin.
-              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
+              // No border: the frames (reports/02-p4, calendar/02-c2) draw the
+              // tile with the shadow alone.
+              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
               variant === "error" ? "bg-destructive/5" : "bg-card"
             )}
           >

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">

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

@@ -295,6 +295,99 @@ describe("ResponsiveOverlay", () => {
     });
   });
 
+  describe("initialFocusRef", () => {
+    function WithTarget(props: Partial<React.ComponentProps<typeof ResponsiveOverlay>> = {}) {
+      const targetRef = React.useRef<HTMLButtonElement>(null);
+      return (
+        <ResponsiveOverlay
+          open
+          onOpenChange={() => {}}
+          title="Add an item"
+          closeLabel="Close"
+          initialFocusRef={targetRef}
+          {...props}
+        >
+          <button ref={targetRef} type="button">
+            Confirm
+          </button>
+        </ResponsiveOverlay>
+      );
+    }
+
+    it("dialog: focuses the given element instead of the Close button", async () => {
+      setWidth(true);
+      render(<WithTarget />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+      expect(screen.getByRole("button", { name: "Close" })).not.toHaveFocus();
+    });
+
+    it("sheet: focuses the given element instead of the Close button", async () => {
+      setWidth(true);
+      render(<WithTarget desktop="sheet" />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+    });
+
+    it("drawer: focuses the given element instead of the Close button", async () => {
+      setWidth(false);
+      render(<WithTarget />);
+      await waitFor(() => expect(screen.getByRole("button", { name: "Confirm" })).toHaveFocus());
+    });
+
+    it("keeps today's default (first tabbable) when the prop is omitted", async () => {
+      setWidth(true);
+      open();
+      await waitFor(() => expect(screen.getByRole("button", { name: "Close" })).toHaveFocus());
+    });
+  });
+
+  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">

package/src/components/responsive-overlay.tsx

@@ -113,6 +113,24 @@ export type ResponsiveOverlayProps = {
   className?: string;
   /** Classes for the scrolling body. */
   bodyClassName?: string;
+  /**
+   * Focus this element on open instead of Radix's default — the first
+   * tabbable in DOM order, which in every mode here is the header's round
+   * Close button, since the header renders before the body. That is the
+   * right target for most overlays, but a confirm-style body (a primary
+   * action, a field that should be pre-filled) wants focus lower down.
+   * Passing a ref calls `event.preventDefault()` on Radix's
+   * `onOpenAutoFocus` and focuses this element instead; omitting the prop
+   * keeps today's default in every mode (dialog, sheet, drawer).
+   */
+  initialFocusRef?: React.RefObject<HTMLElement | null>;
+  /**
+   * A fixed height for the phone drawer instead of sizing to its content —
+   * `DrawerContent`'s `snapHeight` (the frames' ~640px table sheet). Applies
+   * only when the narrow drawer is showing; the desktop dialog/sheet are
+   * unaffected. Omit to keep today's content-sized drawer.
+   */
+  drawerHeight?: number | string;
 };
 
 /**
@@ -159,6 +177,8 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       wideFrom = "md",
       className,
       bodyClassName,
+      initialFocusRef,
+      drawerHeight,
     },
     ref
   ) => {
@@ -166,6 +186,18 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
     useFocusReturn(open);
 
+    // Radix (and vaul, underneath the drawer) call this before moving focus
+    // themselves; preventing the default there is what stops the first-
+    // tabbable fallback from ever running.
+    const handleOpenAutoFocus = React.useCallback(
+      (event: Event) => {
+        if (!initialFocusRef?.current) return;
+        event.preventDefault();
+        initialFocusRef.current.focus();
+      },
+      [initialFocusRef]
+    );
+
     // 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
@@ -177,10 +209,19 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
 
+    // The phone drawer draws a tighter gutter and a smaller title than the
+    // desktop dialog/sheet — measured off the booking frames' table sheet
+    // (floor/14-w1): 16px, not 20; 22px, not 19. Scoped to `drawer` only, so
+    // the desktop containers (already frames-checked elsewhere) don't move.
+    const isDrawer = container === "drawer";
+
     const header = (
-      <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
+      <div
+        data-slot="responsive-overlay-header"
+        className={cn("flex items-start gap-3", isDrawer ? "px-4 pt-4" : "px-5 pt-5")}
+      >
         <div className="min-w-0 flex-1">
-          <Title className="text-[19px] font-bold leading-tight">
+          <Title className={cn("font-bold leading-tight", isDrawer ? "text-[22px]" : "text-[19px]")}>
             {title}
           </Title>
           {subtitle ? (
@@ -208,7 +249,11 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     const body = (
       <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}
       </div>
@@ -232,6 +277,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             attachment="inset"
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            onOpenAutoFocus={handleOpenAutoFocus}
             {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
@@ -263,6 +309,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             size={size}
             showCloseButton={false}
             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
@@ -284,6 +331,8 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
         <DrawerContent
           ref={ref}
           overlayClassName="bg-scrim-overlay"
+          onOpenAutoFocus={handleOpenAutoFocus}
+          {...(drawerHeight !== undefined ? { snapHeight: drawerHeight } : {})}
           {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}
         >

package/src/components/toggle-group.stories.tsx

@@ -95,6 +95,23 @@ export const Segmented: Story = {
   ),
 };
 
+/**
+ * Text-label cells — the calendar toolbar's Timeline/List, the reservation
+ * sheet's booked-by source, the rules confirmation mode. Each cell is a full
+ * 44px hit target (the accessibility floor); the raised card it draws stays
+ * the frames' 36px, centred inside.
+ */
+export const SegmentedLabels: Story = {
+  render: () => (
+    <div className="w-[220px]">
+      <ToggleGroup type="single" variant="segmented" defaultValue="list" aria-label="View">
+        <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+        <ToggleGroupItem value="list">List</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};
+
 /** Choice chips that wrap: the booking flow's seating preference (B2). */
 export const Chips: Story = {
   render: () => (

package/src/components/toggle-group.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+describe("ToggleGroup segmented variant", () => {
+  it("gives each cell a 44px hit target with a smaller pill drawn inside it", () => {
+    render(
+      <ToggleGroup type="single" variant="segmented" value="timeline" aria-label="View">
+        <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+        <ToggleGroupItem value="list">List</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const timeline = screen.getByRole("radio", { name: "Timeline" });
+    expect(timeline).toHaveClass("h-11");
+    const pill = timeline.querySelector('[class*="group-data-[state=on]/segment:bg-card"]');
+    expect(pill).not.toBeNull();
+    expect(pill).toHaveClass("h-9", "w-full");
+    expect(pill).toContainElement(screen.getByText("Timeline"));
+  });
+
+  it("keeps the group's own capsule padding-free — the cell fills its full height", () => {
+    render(
+      <ToggleGroup type="single" variant="segmented" value="light" aria-label="Theme">
+        <ToggleGroupItem value="light">Light</ToggleGroupItem>
+        <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const group = document.querySelector('[data-slot="toggle-group"]');
+    expect(group).not.toHaveClass("data-[variant=segmented]:p-0.5");
+    expect(group).toHaveClass("data-[variant=segmented]:gap-0.5");
+  });
+
+  it("toggling selection moves the on-state to the newly active cell only", async () => {
+    const user = userEvent.setup();
+    function Harness() {
+      return (
+        <ToggleGroup type="single" defaultValue="timeline" variant="segmented" aria-label="View">
+          <ToggleGroupItem value="timeline">Timeline</ToggleGroupItem>
+          <ToggleGroupItem value="list">List</ToggleGroupItem>
+        </ToggleGroup>
+      );
+    }
+    render(<Harness />);
+    const timeline = screen.getByRole("radio", { name: "Timeline" });
+    const list = screen.getByRole("radio", { name: "List" });
+    expect(timeline).toHaveAttribute("data-state", "on");
+    expect(list).toHaveAttribute("data-state", "off");
+    await user.click(list);
+    expect(list).toHaveAttribute("data-state", "on");
+    expect(timeline).toHaveAttribute("data-state", "off");
+  });
+
+  it("does not wrap a non-segmented cell's children in a pill", () => {
+    render(
+      <ToggleGroup type="single" variant="chip" value="a" aria-label="Choice">
+        <ToggleGroupItem value="a">No preference</ToggleGroupItem>
+      </ToggleGroup>
+    );
+    const item = screen.getByRole("radio", { name: "No preference" });
+    expect(item.querySelector('[class*="group-data-[state=on]/segment"]')).toBeNull();
+    expect(item.firstChild?.textContent).toBe("No preference");
+  });
+});

package/src/components/toggle-group.tsx

@@ -5,7 +5,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
-import { toggleVariants } from "./toggle";
+import { SegmentedToggleContent, toggleVariants } from "./toggle";
 
 const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
   size: "default",
@@ -27,8 +27,12 @@ function ToggleGroup({
       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.
@@ -66,7 +70,7 @@ function ToggleGroupItem({
         }),
         "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)]"
+          ? "rounded-full"
           : // Tabs and chips size themselves (`toggleVariants`' compounds);
             // the item's own rounding must not square them off.
             resolved === "tab"
@@ -79,7 +83,11 @@ function ToggleGroupItem({
       )}
       {...props}
     >
-      {children}
+      {resolved === "segmented" ? (
+        <SegmentedToggleContent>{children}</SegmentedToggleContent>
+      ) : (
+        children
+      )}
     </ToggleGroupPrimitive.Item>
   );
 }

package/src/components/toggle.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
 
-import { toggleVariants } from "./toggle";
+import { Toggle, toggleVariants } from "./toggle";
 
 describe("toggleVariants", () => {
   // White on a half-strength terracotta measured 2.2:1. Hover steps the
@@ -16,4 +17,52 @@ describe("toggleVariants", () => {
       expect(classes).toContain("data-[state=on]:text-accent-foreground");
     }
   });
+
+  // The 44px floor: the cell's own box is the hit target, not just the card
+  // it draws. `size` must never shrink it back below 44 — that is exactly the
+  // merge order chip/tab already guard against. `toggleVariants` alone is
+  // pre-merge (real callers run it through `cn`/twMerge), so render it.
+  it("holds the segmented cell at the 44px hit-target floor for every size", () => {
+    for (const size of ["sm", "default", "lg"] as const) {
+      render(
+        <Toggle variant="segmented" size={size} aria-label={`toggle-${size}`}>
+          X
+        </Toggle>
+      );
+      expect(screen.getByRole("button", { name: `toggle-${size}` })).toHaveClass("h-11");
+    }
+  });
+
+  // The cell itself no longer paints the card or the shadow — that moved to
+  // `SegmentedToggleContent`'s inner pill, so the outer 44px box stays
+  // invisible and only the pill it wraps is 36px and shows the "on" state.
+  it("leaves the segmented cell unpainted; the base accent fill is neutralised", () => {
+    const classes = toggleVariants({ variant: "segmented" });
+    expect(classes).not.toContain("data-[state=on]:bg-card");
+    expect(classes).not.toContain("shadow-[var(--shadow-card)]");
+    expect(classes).toContain("data-[state=on]:bg-transparent");
+  });
+});
+
+describe("Toggle", () => {
+  it("wraps a segmented toggle's content in the 36px pill", () => {
+    render(
+      <Toggle variant="segmented" aria-label="Light">
+        Light
+      </Toggle>
+    );
+    const button = screen.getByRole("button", { name: "Light" });
+    expect(button).toHaveClass("h-11", "group/segment");
+    const pill = button.querySelector('[class*="group-data-[state=on]/segment:bg-card"]');
+    expect(pill).not.toBeNull();
+    expect(pill).toHaveClass("h-9");
+    expect(pill).toContainElement(screen.getByText("Light"));
+  });
+
+  it("renders other variants' children directly, with no inner pill", () => {
+    render(<Toggle aria-label="Bold">B</Toggle>);
+    const button = screen.getByRole("button", { name: "Bold" });
+    expect(button.querySelector('[class*="group-data-[state=on]/segment"]')).toBeNull();
+    expect(button.firstChild?.textContent).toBe("B");
+  });
 });