@bearmenu/ui 0.8.41 → 0.8.42

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

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

@@ -340,6 +340,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">

package/src/components/responsive-overlay.tsx

@@ -124,6 +124,13 @@ export type ResponsiveOverlayProps = {
    * 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;
 };
 
 /**
@@ -171,6 +178,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       className,
       bodyClassName,
       initialFocusRef,
+      drawerHeight,
     },
     ref
   ) => {
@@ -201,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 ? (
@@ -232,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>
@@ -311,6 +332,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
           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");
+  });
 });