@bearmenu/ui 0.8.35 → 0.8.37

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

@@ -58,6 +58,67 @@ 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.
+ */
+export const WorkingRail: Story = {
+  render: () => {
+    const [table, setTable] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-wrap gap-2">
+        {["T1", "T2", "T3", "T4", "T5"].map((label) => (
+          <Button key={label} variant="outline" onClick={() => setTable(label)}>
+            {label}
+          </Button>
+        ))}
+        <ResponsiveOverlay
+          open={table !== null}
+          onOpenChange={(next) => {
+            if (!next) setTable(null);
+          }}
+          title={table ?? ""}
+          subtitle="6 seats · Inside"
+          desktop="sheet"
+          modal={false}
+          wideFrom="lg"
+          closeLabel="Close"
+        >
+          <p className="text-[14px] text-muted-foreground">
+            Tonight on {table}: Familia Rusu, seated 36 min.
+          </p>
+        </ResponsiveOverlay>
+      </div>
+    );
+  },
+};
+
+/** calendar/07-n1 — a form rail: the same right rail, dimming the page. */
+export const FormRail: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <Button variant="cta" onClick={() => setOpen(true)}>
+          New reservation
+        </Button>
+        <ResponsiveOverlay
+          open={open}
+          onOpenChange={setOpen}
+          title="New reservation"
+          subtitle="Wed 23 Sep"
+          desktop="sheet"
+          closeLabel="Close"
+          footer={<ActionBar primary={<Button variant="cta">Add reservation</Button>} />}
+        >
+          <p className="text-[14px] text-muted-foreground">Guest, party, time and table.</p>
+        </ResponsiveOverlay>
+      </>
+    );
+  },
+};
+
 /** 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

@@ -151,6 +151,110 @@ describe("ResponsiveOverlay", () => {
     await waitFor(() => expect(opener).toHaveFocus());
   });
 
+  describe('desktop="sheet"', () => {
+    /** A width-aware matchMedia, for the md / lg split. */
+    function setViewport(px: number) {
+      window.matchMedia = ((query: string) => {
+        const min = Number(/min-width:\s*(\d+)px/.exec(query)?.[1] ?? Infinity);
+        return {
+          matches: px >= min,
+          media: query,
+          onchange: null,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+          addListener: () => {},
+          removeListener: () => {},
+          dispatchEvent: () => false,
+        } as unknown as MediaQueryList;
+      }) as typeof window.matchMedia;
+    }
+
+    const sheet = () => document.querySelector('[data-slot="responsive-overlay-sheet"]');
+
+    it("is an inset right rail from md, named by its title", () => {
+      setWidth(true);
+      open({ desktop: "sheet" });
+      expect(sheet()).toBeInTheDocument();
+      expect(document.querySelector('[data-slot="dialog-content"]')).toBeNull();
+      expect(document.querySelector('[data-slot="drawer-content"]')).toBeNull();
+      expect(sheet()).toHaveClass("right-3", "rounded-2xl");
+      const dialog = screen.getByRole("dialog");
+      expect(dialog).toHaveAccessibleName("Add an item");
+      expect(dialog).toHaveAccessibleDescription("Table 18 · from the menu");
+    });
+
+    it("is still the drawer on a phone", () => {
+      open({ desktop: "sheet", modal: false });
+      expect(document.querySelector('[data-slot="drawer-content"]')).toBeInTheDocument();
+      expect(sheet()).toBeNull();
+    });
+
+    it("dims the page with the overlay token when modal", () => {
+      setWidth(true);
+      open({ desktop: "sheet" });
+      expect(sheet()).toHaveAttribute("data-modal", "true");
+      const scrim = document.querySelector(".bg-scrim-overlay");
+      expect(scrim).toBeInTheDocument();
+      expect(scrim?.className).not.toContain("bg-black/50");
+    });
+
+    it("leaves the page live when non-modal: no scrim, and a click behind it does not close it", async () => {
+      setWidth(true);
+      const onOpenChange = vi.fn();
+      const onPageClick = vi.fn();
+      render(
+        <>
+          <button type="button" onClick={onPageClick}>
+            T4
+          </button>
+          <ResponsiveOverlay
+            open
+            onOpenChange={onOpenChange}
+            title="T5"
+            desktop="sheet"
+            modal={false}
+            closeLabel="Close"
+          >
+            <p>body</p>
+          </ResponsiveOverlay>
+        </>
+      );
+      expect(sheet()).toHaveAttribute("data-modal", "false");
+      expect(document.querySelector(".bg-scrim-overlay")).toBeNull();
+      await userEvent.click(screen.getByRole("button", { name: "T4" }));
+      expect(onPageClick).toHaveBeenCalledOnce();
+      expect(onOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("still closes a non-modal rail on Escape and through the round button", async () => {
+      setWidth(true);
+      const onOpenChange = vi.fn();
+      open({ desktop: "sheet", modal: false, onOpenChange });
+      await userEvent.keyboard("{Escape}");
+      expect(onOpenChange).toHaveBeenLastCalledWith(false);
+      onOpenChange.mockClear();
+      await userEvent.click(screen.getByRole("button", { name: "Close" }));
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('switches at lg with wideFrom="lg"', () => {
+      setViewport(900);
+      const tablet = open({ desktop: "sheet", wideFrom: "lg" });
+      expect(document.querySelector('[data-slot="drawer-content"]')).toBeInTheDocument();
+      tablet.unmount();
+
+      setViewport(1280);
+      open({ desktop: "sheet", wideFrom: "lg" });
+      expect(sheet()).toBeInTheDocument();
+    });
+
+    it("keeps switching at md by default", () => {
+      setViewport(900);
+      open({ desktop: "sheet" });
+      expect(sheet()).toBeInTheDocument();
+    });
+  });
+
   it("stays out of the DOM while closed", () => {
     render(
       <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">

package/src/components/responsive-overlay.tsx

@@ -2,14 +2,23 @@
 
 import * as React from "react";
 import { X } from "lucide-react";
-import { useMediaQuery } from "../hooks/use-media-query";
+import { DESKTOP_MEDIA_QUERY, useMediaQuery } from "../hooks/use-media-query";
 import { cn } from "../lib/utils";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./drawer";
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from "./sheet";
 
 /** The board switches container at Tailwind's `md`, not at the library's `lg`. */
 const MD_MEDIA_QUERY = "(min-width: 768px)";
 
+/** Each container's own title and description, so Radix / vaul wire the names. */
+const CONTAINER_TITLE = { drawer: DrawerTitle, dialog: DialogTitle, sheet: SheetTitle } as const;
+const CONTAINER_DESCRIPTION = {
+  drawer: DrawerDescription,
+  dialog: DialogDescription,
+  sheet: SheetDescription,
+} as const;
+
 /**
  * Sends focus back to whatever opened the overlay once it closes.
  *
@@ -74,6 +83,32 @@ export type ResponsiveOverlayProps = {
   closeLabel?: string;
   /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
   size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+  /**
+   * The container on a wide screen. `dialog` (the default) is the centred box.
+   * `sheet` is a right rail: an inset panel held 12px off the top, right and
+   * bottom, 420px wide — the booking pages' table sheet, booking details,
+   * guest panel and create forms (floor/14-w1, calendar/07-n1, guests/07-g6).
+   * Narrow screens get the bottom drawer either way.
+   */
+  desktop?: "dialog" | "sheet";
+  /**
+   * Whether the wide `sheet` dims and locks the page. `true` (the default)
+   * is a form rail: a scrim, focus held inside, the page inert. `false` is a
+   * working rail: no scrim, no focus trap, and the page behind stays live —
+   * clicking another table on the floor does NOT close it, so the caller can
+   * swap what it shows. Escape and the close button still close it.
+   *
+   * Applies to `desktop="sheet"` only. The dialog is always modal, and so is
+   * the phone drawer: at 390 the rail covers most of the page, and a page
+   * that stays live under a sheet the thumb cannot see past is a trap.
+   */
+  modal?: boolean;
+  /**
+   * Where the wide container takes over from the drawer. `md` (768, the
+   * default) for most overlays; `lg` (1024) where the page beside the rail
+   * needs the room — the floor plan's rails switch there.
+   */
+  wideFrom?: "md" | "lg";
   /** Classes for the panel itself — the dialog box or the drawer sheet. */
   className?: string;
   /** Classes for the scrolling body. */
@@ -82,7 +117,9 @@ export type ResponsiveOverlayProps = {
 
 /**
  * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
- * `Dialog` from md.
+ * `Dialog` from md — or, with `desktop="sheet"`, an inset right rail that can
+ * leave the page live (`modal={false}`), switching at md or at lg
+ * (`wideFrom`).
  *
  * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
  * (16-shared-table.html) and the two widths never disagree about it: the
@@ -117,38 +154,33 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       footer,
       closeLabel = "Close",
       size = "lg",
+      desktop = "dialog",
+      modal = true,
+      wideFrom = "md",
       className,
       bodyClassName,
     },
     ref
   ) => {
-    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
+    const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
     const titleId = React.useId();
     const subtitleId = React.useId();
     useFocusReturn(open);
 
+    const Title = CONTAINER_TITLE[container];
+    const Description = CONTAINER_DESCRIPTION[container];
+
     const header = (
       <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
         <div className="min-w-0 flex-1">
-          {isWide ? (
-            <DialogTitle id={titleId} className="text-[19px] font-bold leading-tight">
-              {title}
-            </DialogTitle>
-          ) : (
-            <DrawerTitle id={titleId} className="text-[19px] font-bold leading-tight">
-              {title}
-            </DrawerTitle>
-          )}
+          <Title id={titleId} className="text-[19px] font-bold leading-tight">
+            {title}
+          </Title>
           {subtitle ? (
-            isWide ? (
-              <DialogDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
-                {subtitle}
-              </DialogDescription>
-            ) : (
-              <DrawerDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
-                {subtitle}
-              </DrawerDescription>
-            )
+            <Description id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+              {subtitle}
+            </Description>
           ) : null}
         </div>
         <button
@@ -185,7 +217,40 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
       </div>
     ) : null;
 
-    if (isWide) {
+    if (container === "sheet") {
+      return (
+        <Sheet open={open} onOpenChange={onOpenChange} modal={modal}>
+          <SheetContent
+            ref={ref}
+            side="right"
+            attachment="inset"
+            hideClose
+            overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            aria-labelledby={titleId}
+            aria-describedby={subtitle ? subtitleId : undefined}
+            data-slot="responsive-overlay-sheet"
+            data-modal={modal ? "true" : "false"}
+            // A working rail must survive the page being used: a click on the
+            // floor behind it is the user choosing the next table, not
+            // dismissing the rail. Radix's non-modal dialog closes on any
+            // outside interaction unless told otherwise.
+            // Spread, not `={modal ? undefined : …}`: the admin compiles this
+            // source under exactOptionalPropertyTypes.
+            {...(modal ? {} : { onInteractOutside: (event: Event) => event.preventDefault() })}
+            className={cn(
+              "flex w-[420px] max-w-[calc(100vw-1.5rem)] flex-col gap-0 bg-card p-0",
+              className
+            )}
+          >
+            {header}
+            {body}
+            {foot}
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    if (container === "dialog") {
       return (
         <Dialog open={open} onOpenChange={onOpenChange}>
           <DialogContent

package/src/components/searchable-select.tsx

@@ -120,7 +120,7 @@ export function SearchableSelect({
             e.stopPropagation();
             onValueChange(undefined);
           }}
-          className="absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
+          className="absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
         >
           <X className="size-3.5" />
         </button>

package/src/components/select.tsx

@@ -126,14 +126,14 @@ const SelectItem = React.forwardRef<
     ref={ref}
     data-slot="select-item"
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-semibold",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent-subtle data-[highlighted]:text-foreground data-[state=checked]:font-semibold",
       className
     )}
     {...props}
   >
     <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="size-4" />
+        <Check className="size-4 text-accent" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

package/src/components/selection-bar.tsx

@@ -46,7 +46,7 @@ const SelectionBar = React.forwardRef<HTMLDivElement, SelectionBarProps>(
               type="button"
               aria-label="Clear selection"
               onClick={onClear}
-              className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent-subtle hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
               <X className="size-4" />
             </button>

package/src/components/sheet.tsx

@@ -103,14 +103,24 @@ interface SheetContentProps
    * buttons in the same corner.
    */
   hideClose?: boolean;
+  /**
+   * Classes for the scrim. The default `bg-black/50` is kept for every
+   * existing caller; pass `bg-scrim-overlay` for the themed dim, as `Drawer`
+   * and `Dialog` already allow. A non-modal sheet renders no scrim at all.
+   */
+  overlayClassName?: string;
 }
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = "right", attachment = "edge", className, children, hideClose, ...props }, ref) => (
+>(
+  (
+    { side = "right", attachment = "edge", className, children, hideClose, overlayClassName, ...props },
+    ref
+  ) => (
   <SheetPortal>
-    <SheetOverlay />
+    <SheetOverlay className={overlayClassName} />
     <SheetPrimitive.Content
       ref={ref}
       className={cn(sheetVariants({ side, attachment }), className)}
@@ -127,7 +137,8 @@ const SheetContent = React.forwardRef<
       )}
     </SheetPrimitive.Content>
   </SheetPortal>
-));
+  )
+);
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (

package/src/components/tabs.stories.tsx

@@ -31,6 +31,29 @@ export const Pill: Story = {
   ),
 };
 
+/**
+ * A count after each label — the booking strip (today/03-d0). `null` is a
+ * count that did not load and draws a dash (today/04-d3, "Queue —").
+ */
+export const WithCounts: Story = {
+  render: () => (
+    <Tabs defaultValue="today" className="w-[520px]">
+      <TabsList variant="underline">
+        <TabsTrigger value="floor">Floor</TabsTrigger>
+        <TabsTrigger value="today" count={3}>
+          Today
+        </TabsTrigger>
+        <TabsTrigger value="calendar" count={5}>
+          Calendar
+        </TabsTrigger>
+        <TabsTrigger value="queue" count={null} countLabel="count unavailable">
+          Queue
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  ),
+};
+
 export const Underline: Story = {
   render: () => (
     <Tabs defaultValue="overview" className="w-[400px]">

package/src/components/tabs.test.tsx

@@ -85,6 +85,70 @@ describe("Tabs", () => {
     expect(onValueChange).toHaveBeenCalledWith("b");
   });
 
+  it("draws a count after the label and reads it as part of the name", () => {
+    render(
+      <Tabs defaultValue="today">
+        <TabsList variant="underline">
+          <TabsTrigger value="today" count={3}>
+            Today
+          </TabsTrigger>
+          <TabsTrigger value="floor">Floor</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    );
+    const today = screen.getByRole("tab", { name: "Today 3" });
+    const count = today.querySelector('[data-slot="tabs-trigger-count"]');
+    expect(count).toHaveTextContent("3");
+    expect(count).toHaveClass("tabular-nums");
+    expect(
+      screen.getByRole("tab", { name: "Floor" }).querySelector('[data-slot="tabs-trigger-count"]')
+    ).toBeNull();
+  });
+
+  it("draws an unknown count as a dash that a screen reader skips", () => {
+    render(
+      <Tabs defaultValue="queue">
+        <TabsList variant="underline">
+          <TabsTrigger value="queue" count={null}>
+            Queue
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    );
+    const queue = screen.getByRole("tab", { name: "Queue" });
+    expect(queue.querySelector('[data-slot="tabs-trigger-count"]')).toHaveTextContent("—");
+  });
+
+  it("reads the injected count label in place of the figure", () => {
+    render(
+      <Tabs defaultValue="queue">
+        <TabsList variant="underline">
+          <TabsTrigger value="queue" count={2} countLabel="2 waiting">
+            Queue
+          </TabsTrigger>
+          <TabsTrigger value="calendar" count={null} countLabel="count unavailable">
+            Calendar
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    );
+    expect(screen.getByRole("tab", { name: "Queue 2 waiting" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Calendar count unavailable" })).toBeInTheDocument();
+  });
+
+  it("draws a zero count, not nothing", () => {
+    render(
+      <Tabs defaultValue="queue">
+        <TabsList>
+          <TabsTrigger value="queue" count={0}>
+            Queue
+          </TabsTrigger>
+        </TabsList>
+      </Tabs>
+    );
+    expect(screen.getByRole("tab", { name: "Queue 0" })).toBeInTheDocument();
+  });
+
   it("supports disabled triggers", async () => {
     const user = userEvent.setup();
     render(

package/src/components/tabs.tsx

@@ -79,10 +79,27 @@ const TabsList = React.forwardRef<
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 
+type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+  /**
+   * A count after the label — "Today 3", "Queue 2" (today/03-d0). `null`
+   * means the count is unknown (still loading, or its read failed) and draws
+   * an em dash, "Queue —" (today/04-d3); `undefined` draws nothing.
+   * Tabular figures, so the strip does not shift as a count ticks.
+   */
+  count?: number | null;
+  /**
+   * What a screen reader hears for the count, in place of the bare figure —
+   * "3 waiting", "count unavailable". Injected, like every label here: the
+   * design system holds no copy. Without it the figure is read as is and the
+   * dash is silent.
+   */
+  countLabel?: string;
+};
+
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, children, ...props }, ref) => {
+  TabsTriggerProps
+>(({ className, children, count, countLabel, ...props }, ref) => {
   const { variant, orientation, indicatorId } = React.useContext(TabsContext);
   // Inspect data-state at render to know whether to render the indicator.
   // Radix sets data-state="active" | "inactive" on the trigger via its primitive.
@@ -154,7 +171,23 @@ const TabsTrigger = React.forwardRef<
           )}
         />
       )}
-      <span className="relative z-10 flex items-center gap-2">{children}</span>
+      <span className="relative z-10 flex items-center gap-2">
+        {children}
+        {count !== undefined ? (
+          <>
+            {/* A flex row drops a whitespace-only node from the layout, but the
+                accessible name keeps it: "Today 3", not "Today3". */}{" "}
+            <span
+              data-slot="tabs-trigger-count"
+              aria-hidden={countLabel !== undefined || count === null ? true : undefined}
+              className="tabular-nums"
+            >
+              {count === null ? "—" : count}
+            </span>
+            {countLabel !== undefined ? <span className="sr-only"> {countLabel}</span> : null}
+          </>
+        ) : null}
+      </span>
     </TabsPrimitive.Trigger>
   );
 });

package/src/components/toggle.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+
+import { toggleVariants } from "./toggle";
+
+describe("toggleVariants", () => {
+  // White on a half-strength terracotta measured 2.2:1. Hover steps the
+  // surface instead, as Button's quiet variants do; the on-state keeps the fill.
+  it("default and outline tint on hover and keep the accent fill for the on-state", () => {
+    for (const variant of ["default", "outline"] as const) {
+      const classes = toggleVariants({ variant });
+      expect(classes).toContain("hover:bg-accent-subtle");
+      expect(classes).toContain("hover:text-foreground");
+      expect(classes).not.toContain("hover:bg-accent/50");
+      expect(classes).not.toContain("hover:text-accent-foreground");
+      expect(classes).toContain("data-[state=on]:bg-accent");
+      expect(classes).toContain("data-[state=on]:text-accent-foreground");
+    }
+  });
+});

package/src/components/toggle.tsx

@@ -6,14 +6,20 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
 
+/**
+ * Hover is a step of the surface (`--accent-subtle`), as Button's quiet
+ * variants do. The shadcn default, `hover:bg-accent/50 hover:text-accent-foreground`,
+ * put white type on a half-strength terracotta: 2.2:1. The on-state's
+ * `data-[state=on]:` utilities sort after `hover:` and still win while on.
+ */
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-semibold hover:bg-accent/50 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors aria-invalid:ring-2 aria-invalid:ring-destructive/40 whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-semibold hover:bg-accent-subtle hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors aria-invalid:ring-2 aria-invalid:ring-destructive/40 whitespace-nowrap",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:border-primary",
+          "border border-border bg-transparent hover:bg-accent-subtle hover:text-foreground data-[state=on]:border-primary",
         /**
          * One cell of a segmented control: a raised card on the group's
          * muted capsule when on, quiet type when off. The group