@bearmenu/ui 0.8.15 → 0.8.17

package/src/components/item.tsx

@@ -20,7 +20,10 @@ const itemVariants = cva(
         lg: "px-5 py-4",
       },
       interactive: {
-        true: "cursor-pointer hover:bg-accent hover:text-accent-foreground active:scale-[0.99]",
+        // The surface tint a hover is, not the brand fill: `bg-accent` here is
+        // the brown, and a row that inverts under the cursor loses its muted
+        // description. Same step the buttons take (`--accent-subtle`).
+        true: "cursor-pointer hover:bg-accent-subtle hover:border-accent/40 active:bg-muted active:scale-[0.99]",
         false: "",
       },
     },

package/src/components/menu-family-block.stories.tsx

@@ -61,6 +61,18 @@ export const Default: Story = {
   args: { family: { ...mockFamilyBlock, photoUrls: PHOTOS } },
 };
 
+/** The phone card at every width — for a desktop rail where the two-column card is too wide to scan. */
+export const Compact: Story = {
+  args: { family: { ...mockFamilyBlock, photoUrls: PHOTOS }, variant: "compact" },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px] bg-background p-4">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
 /**
  * No photographs: the mosaic ground with the family's initial, never a grey box.
  * A missing photograph is not a broken image, and a placeholder makes a real

package/src/components/menu-family-block.tsx

@@ -99,6 +99,13 @@ export type MenuFamilyBlockProps = {
   hue?: string;
   /** Finished CSS gradient — the family's colour over the mosaic. */
   gradient?: string;
+  /**
+   * `wide` (default): the phone card below `lg`, the two-column card — photo
+   * third, rows beside it — from `lg`. `compact`: the phone card at every
+   * width, for a rail on a desktop page where the two-column card is too much
+   * to scan across (the browse page's concept rail).
+   */
+  variant?: "wide" | "compact";
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -108,17 +115,20 @@ const GROUND = PHOTO_GROUND;
 
 /**
  * The ink. Nearly absent at the top, heavier at the foot on the phone — the
- * top 40% is the photograph, the rows sit on 0.92+; a to-right ramp from
- * `lg`, where the row column brings its own opaque paper anyway. It is the
- * layer the contrast rests on. Literal rather than `var(--scrim)`: that token
- * lives in the app's stylesheet, not this package's, so a DS component reading
- * it renders nothing in Storybook and the other three consumers.
+ * top 40% is the photograph, the rows sit on 0.92+. It is the layer the
+ * contrast rests on. Literal rather than `var(--scrim)`: that token lives in
+ * the app's stylesheet, not this package's, so a DS component reading it
+ * renders nothing in Storybook and the other three consumers.
  */
-const INK =
-  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)] lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.38)_0%,oklch(0.16_0.012_55_/_0.6)_30%,oklch(0.16_0.012_55_/_0.92)_46%,oklch(0.16_0.012_55_/_0.96)_100%)]";
-
-/** The row column's paper from `lg`: the card's dark, opaque. */
-const PAPER = "lg:bg-[oklch(0.21_0.012_55)]";
+const INK_PHONE =
+  "bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.12)_0%,oklch(0.16_0.012_55_/_0.55)_38%,oklch(0.16_0.012_55_/_0.92)_62%,oklch(0.16_0.012_55_/_0.96)_100%)]";
+/**
+ * From `lg` the ramp runs to the right: clear over the photo third, dark
+ * under the rows — the rows sit on the ink itself, no opaque paper, so the
+ * photograph still reads through the ramp's shoulder.
+ */
+const INK_WIDE =
+  "lg:bg-[linear-gradient(to_right,oklch(0.16_0.012_55_/_0.32)_0%,oklch(0.16_0.012_55_/_0.62)_34%,oklch(0.16_0.012_55_/_0.9)_52%,oklch(0.16_0.012_55_/_0.96)_100%)]";
 
 /**
  * A second, LOCAL scrim under the name, count and action — the photo column's
@@ -144,9 +154,11 @@ export function MenuFamilyBlock({
   formatCount = String,
   hue,
   gradient,
+  variant = "wide",
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: MenuFamilyBlockProps) {
+  const wide = variant === "wide";
   const [photo] = family.photoUrls ?? [];
   // "+N more" counts past the rows shown, which are the venues the reader can
   // see — the photograph is one of them, not a venue on its own.
@@ -161,7 +173,9 @@ export function MenuFamilyBlock({
       className={cn(
         /* `isolate` confines the blend and the backdrop-filter to this card.
            `dark` scopes every token inside to its dark-theme value. */
-        "dark relative isolate overflow-hidden rounded-[14px] text-foreground",
+        /* A flex column, so a `h-full` card in a rail fills its row: siblings
+           with two rows and with three end on the same baseline. */
+        "dark relative isolate flex flex-col overflow-hidden rounded-[14px] text-foreground",
         GROUND,
         className
       )}
@@ -171,21 +185,32 @@ export function MenuFamilyBlock({
       <PhotoGround photos={[photo]} initials={initial} mode="stack" gradient={gradient} />
 
       {/* ── Layer 2: the ink ────────────────────────────────────────────── */}
-      <span aria-hidden className={cn("absolute inset-0", INK)} />
+      <span aria-hidden className={cn("absolute inset-0", INK_PHONE, wide && INK_WIDE)} />
 
       {/* ── The content, floating ───────────────────────────────────────── */}
-      <div className="relative grid grid-cols-1 lg:grid-cols-[34%_1fr]">
+      <div
+        className={cn(
+          "relative grid flex-1 grid-cols-1 grid-rows-[auto_1fr]",
+          wide && "lg:grid-cols-[34%_1fr] lg:grid-rows-1"
+        )}
+      >
         {/* The photo column. On the phone it is the card's head, with the
             overflow pill pinned to the corner and the photograph clear above
             the name; on desktop the left third, its stack anchored to the foot. */}
         <div
           className={cn(
-            "relative flex min-h-[220px] flex-col justify-end p-3.5 lg:min-h-[320px] lg:p-5",
+            "relative flex min-h-[220px] flex-col justify-end p-3.5",
+            wide && "lg:min-h-[320px] lg:p-5",
             TEXT_SCRIM
           )}
         >
           {pill && (
-            <span className="absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white lg:static lg:mb-3 lg:self-start">
+            <span
+              className={cn(
+                "absolute right-3.5 top-3.5 rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-2.5 py-1 text-[11px] font-semibold text-white",
+                wide && "lg:static lg:mb-3 lg:self-start"
+              )}
+            >
               {pill}
             </span>
           )}
@@ -195,7 +220,12 @@ export function MenuFamilyBlock({
               {family.kicker}
             </span>
           )}
-          <h3 className="text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[30px]">
+          <h3
+            className={cn(
+              "text-balance font-serif text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white",
+              wide && "lg:text-[30px]"
+            )}
+          >
             {family.name}
           </h3>
           {/* The count, the facts and the band on one line: a few facts about
@@ -230,7 +260,7 @@ export function MenuFamilyBlock({
             aria-label={labels.browse}
             className={cn(buttonVariants({ variant: "ink", size: "pill" }), "mt-3.5 w-max max-w-full")}
           >
-            {labels.browseShort ? (
+            {labels.browseShort && wide ? (
               <>
                 <span className="lg:hidden">{labels.browse}</span>
                 <span className="hidden lg:inline">{labels.browseShort}</span>
@@ -241,10 +271,10 @@ export function MenuFamilyBlock({
           </LinkComponent>
         </div>
 
-        {/* The row column: chips, then the rows, on paper from `lg`. */}
-        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5 lg:p-5", PAPER)}>
+        {/* The row column: chips, then the rows, on the ink's dark shoulder. */}
+        <div className={cn("flex min-w-0 flex-col px-3.5 pb-3.5", wide && "lg:p-5")}>
           {family.chips && family.chips.length > 0 && (
-            <ul className="flex flex-wrap items-center gap-1.5 lg:justify-end">
+            <ul className={cn("flex flex-wrap items-center gap-1.5", wide && "lg:justify-end")}>
               {family.chips.map((chip) => (
                 /* Label only. The counts are VENUES beside a dish group's name,
                    which every reader takes for dishes. */
@@ -261,6 +291,9 @@ export function MenuFamilyBlock({
               <MenuKitchenList
                 kitchens={venues}
                 labels={labels.kitchens}
+                /* A half-width column: the dish goes under the venue, not
+                   beside it. The compact card is the phone row throughout. */
+                layout={wide ? "stacked" : "phone"}
                 linkComponent={LinkComponent}
               />
             </>

package/src/components/menu-filter-chips.tsx

@@ -59,11 +59,19 @@ export type MenuFilterChipsProps = {
   onMorePointerDown?: () => void;
   /** Locale-aware integer formatter for the counts. Defaults to `String`. */
   formatCount?: (value: number) => string;
+  /**
+   * `sm` (36px) is the row under a page header. `lg` (44px) is for a row
+   * inside a sticky bar, where the chips are the only thing the thumb can
+   * reach and 36px sits under the target floor.
+   */
+  chipSize?: MenuFilterChipSize;
   /** Accessible name for the row. */
   ariaLabel?: string;
   className?: string;
 };
 
+export type MenuFilterChipSize = "sm" | "lg";
+
 export function MenuFilterChips({
   chips,
   onToggle,
@@ -73,6 +81,7 @@ export function MenuFilterChips({
   moreIcon,
   onMorePointerDown,
   formatCount = String,
+  chipSize = "sm",
   ariaLabel,
   className,
 }: MenuFilterChipsProps) {
@@ -99,6 +108,7 @@ export function MenuFilterChips({
             <Chip
               key={chip.key}
               chip={chip}
+              size={chipSize}
               onToggle={() => onToggle(chip.key)}
               formatCount={formatCount}
             />
@@ -120,7 +130,11 @@ export function MenuFilterChips({
               onPointerDown={onMorePointerDown}
               aria-label={moreLabel}
               aria-haspopup="dialog"
-              className="inline-flex size-10 shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden"
+              className={cn(
+                "inline-flex shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
+                // The one control that never scrolls keeps the chips' height.
+                chipSize === "lg" ? "size-11" : "size-10"
+              )}
             >
               {moreIcon}
             </button>
@@ -143,10 +157,12 @@ export function MenuFilterChips({
 
 function Chip({
   chip,
+  size,
   onToggle,
   formatCount,
 }: {
   chip: MenuFilterChip;
+  size: MenuFilterChipSize;
   onToggle: () => void;
   formatCount: (value: number) => string;
 }) {
@@ -156,7 +172,8 @@ function Chip({
       onClick={onToggle}
       aria-pressed={chip.active}
       className={cn(
-        "inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+        size === "lg" ? "h-11" : "h-9",
         chip.active
           ? "border-accent font-semibold text-accent shadow-[0_1px_2px_oklch(0.51_0.095_45_/_0.08)]"
           : "border-border bg-card text-foreground hover:border-accent/40",
@@ -226,12 +243,23 @@ export function MenuFilterSummary({
  */
 const CHIP_WIDTHS = [128, 104, 96, 148, 112, 88];
 
-export function MenuFilterChipsSkeleton({ className }: { className?: string }) {
+export function MenuFilterChipsSkeleton({
+  className,
+  chipSize = "sm",
+}: {
+  className?: string;
+  /** Match the row it stands in for, so the chips do not jump 8px on load. */
+  chipSize?: MenuFilterChipSize;
+}) {
   return (
     <div className={cn("flex items-center gap-2 overflow-hidden", className)} aria-hidden>
       <Skeleton className="h-3 w-[92px] shrink-0" />
       {CHIP_WIDTHS.map((width, index) => (
-        <Skeleton key={index} className="h-9 shrink-0 rounded-full" style={{ width }} />
+        <Skeleton
+          key={index}
+          className={cn("shrink-0 rounded-full", chipSize === "lg" ? "h-11" : "h-9")}
+          style={{ width }}
+        />
       ))}
     </div>
   );

package/src/components/menu-kitchen-list.tsx

@@ -61,6 +61,18 @@ export type MenuKitchenListLabels = {
   showMore?: string;
 };
 
+/**
+ * `wide` (default): the intent page's full-width list — from `lg` the venue
+ * takes a fixed 226px column and the dish stands beside it in a column of its
+ * own. `stacked`: the list sits in a narrow column (a concept card's row
+ * half), so the venue keeps the row and the dish takes a SECOND LINE under it
+ * from `lg`; in a half-width card the dish column had ~100px and its kicker,
+ * name and meta wrapped into a stack of single words. `phone`: the phone row
+ * at every width — no dish line, the venue and its price only — for a card
+ * that keeps its phone form on a desktop rail.
+ */
+export type MenuKitchenListLayout = "wide" | "stacked" | "phone";
+
 export type MenuKitchenListProps = {
   kitchens: MenuKitchenPreview[];
   labels: MenuKitchenListLabels;
@@ -69,6 +81,7 @@ export type MenuKitchenListProps = {
    * navigates for the eleventh — the list is the page.
    */
   onShowMore?: () => void;
+  layout?: MenuKitchenListLayout;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -77,6 +90,7 @@ export function MenuKitchenList({
   kitchens,
   labels,
   onShowMore,
+  layout = "wide",
   linkComponent = DefaultLink,
   className,
 }: MenuKitchenListProps) {
@@ -90,7 +104,12 @@ export function MenuKitchenList({
                 because `<ol>` admits only list items, so a sibling element
                 between them would be invalid markup. */}
             {index > 0 && <Separator />}
-            <KitchenRow kitchen={kitchen} labels={labels} linkComponent={linkComponent} />
+            <KitchenRow
+              kitchen={kitchen}
+              labels={labels}
+              layout={layout}
+              linkComponent={linkComponent}
+            />
           </li>
         ))}
       </ol>
@@ -111,17 +130,25 @@ export function MenuKitchenList({
 function KitchenRow({
   kitchen,
   labels,
+  layout,
   linkComponent: LinkComponent,
 }: {
   kitchen: MenuKitchenPreview;
   labels: MenuKitchenListLabels;
+  layout: MenuKitchenListLayout;
   linkComponent: MenuLinkComponent;
 }) {
   const { place, dish } = kitchen;
   const openNow = place.open_now === true;
+  const wide = layout === "wide";
 
   return (
-    <div className="relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:flex-nowrap lg:gap-4 lg:py-3.5">
+    <div
+      className={cn(
+        "relative flex flex-wrap items-center gap-[11px] py-3 transition-colors hover:bg-muted/30 motion-reduce:transition-none lg:gap-4 lg:py-3.5",
+        wide && "lg:flex-nowrap"
+      )}
+    >
       {/* The venue link, stretched. `z-[1]` — the dish link sits above it. */}
       <LinkComponent
         href={kitchen.href}
@@ -149,7 +176,12 @@ function KitchenRow({
         />
       </span>
 
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 flex-col gap-0.5",
+          wide && "lg:w-[226px] lg:flex-none"
+        )}
+      >
         {/* One line with an ellipsis on a phone, where the row is the whole
             width; two lines from `lg`, where the column is 226px and
             "ADRIATICA GELATERIA ITALIANA" would otherwise lose its half. */}
@@ -190,8 +222,15 @@ function KitchenRow({
            one tap away on the venue's own page, with room to state it.
 
            `order-5` puts it last in the visual order without moving it in the
-           DOM, where it belongs to the venue. */
-        <div className="hidden min-w-0 basis-full pl-[57px] lg:order-none lg:block lg:flex-1 lg:basis-auto lg:pl-0">
+           DOM, where it belongs to the venue. In the `stacked` layout it is a
+           second LINE under the venue, indented past the thumbnail. */
+        <div
+          className={cn(
+            "hidden min-w-0 basis-full pl-[57px]",
+            layout !== "phone" && "lg:block",
+            wide ? "lg:order-none lg:flex-1 lg:basis-auto lg:pl-0" : "lg:order-5 lg:pl-[74px]"
+          )}
+        >
           <span
             className={cn(
               "flex items-center gap-1.5 text-[9px] font-extrabold uppercase tracking-[0.1em]",
@@ -230,7 +269,7 @@ function KitchenRow({
         </div>
       )}
 
-      <div className="ml-auto flex shrink-0 items-center gap-[11px] lg:ml-0">
+      <div className={cn("ml-auto flex shrink-0 items-center gap-[11px]", wide && "lg:ml-0")}>
         {kitchen.priceLabel && (
           <span className="text-base font-extrabold tabular-nums text-accent">
             {kitchen.priceLabel}

package/src/components/photo-ground.tsx

@@ -38,6 +38,13 @@ import { cn } from "../lib/utils";
 /** The ground under the photography. Fixed, and deliberately not a token. */
 export const PHOTO_GROUND = "bg-[oklch(0.21_0.012_55)]";
 
+/**
+ * The shadow a glyph wears when it stands on `PHOTO_GROUND` in a photograph's
+ * place — the card family's fallback treatment: a ground and a lifted glyph,
+ * never a bare icon on a flat fill. Same literal family as the ground.
+ */
+export const PHOTO_GLYPH_SHADOW = "drop-shadow-[0_2px_6px_oklch(0.16_0.012_55_/_0.6)]";
+
 /** The uniform dark overlay a card may put over every photograph. */
 const OVERLAY = "absolute inset-0 bg-[oklch(0.16_0.012_55_/_0.5)]";
 

package/src/components/section-header.test.tsx

@@ -25,4 +25,19 @@ describe("SectionHeader", () => {
     expect(screen.getByText("Still to start").className).toContain("hidden");
     expect(screen.getByText("Still to start").className).toContain("lg:block");
   });
+
+  it("holds trailing controls at the row's end, beside the action", () => {
+    render(
+      <SectionHeader
+        title="Concepts"
+        action="See all"
+        actionHref="/concepts"
+        trailing={<button type="button">Next</button>}
+      />
+    );
+    const next = screen.getByRole("button", { name: "Next" });
+    const action = screen.getByRole("link", { name: "See all" });
+    expect(next.parentElement).toBe(action.parentElement);
+    expect(next.parentElement).not.toContainElement(screen.getByText("Concepts"));
+  });
 });

package/src/components/section-header.tsx

@@ -60,6 +60,12 @@ export type SectionHeaderProps = {
    * would dilute the headings that matter. Defaults to `"h2"`.
    */
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
+  /**
+   * Controls at the end of the title row, after `action` — a rail's
+   * previous / next pair on desktop. The header owns none of their
+   * behaviour; it only holds the slot.
+   */
+  trailing?: React.ReactNode;
   className?: string;
 };
 
@@ -91,6 +97,7 @@ export function SectionHeader({
   linkComponent: LinkComponent = DefaultLink,
   onAction,
   as: Heading = "h2",
+  trailing,
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
@@ -110,18 +117,25 @@ export function SectionHeader({
           )}
         </div>
 
-        {action &&
-          (actionHref ? (
-            <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
-              {action}
-              {actionIcon}
-            </LinkComponent>
-          ) : onAction ? (
-            <button type="button" className={actionClasses} onClick={onAction}>
-              {action}
-              {actionIcon}
-            </button>
-          ) : null)}
+        {/* The action and the trailing controls share the row's end, so the
+            action never floats to the middle when both are present. */}
+        {(action || trailing) && (
+          <div className="flex shrink-0 items-center gap-3">
+            {action &&
+              (actionHref ? (
+                <LinkComponent href={actionHref} className={actionClasses} onClick={onAction}>
+                  {action}
+                  {actionIcon}
+                </LinkComponent>
+              ) : onAction ? (
+                <button type="button" className={actionClasses} onClick={onAction}>
+                  {action}
+                  {actionIcon}
+                </button>
+              ) : null)}
+            {trailing}
+          </div>
+        )}
       </div>
 
       {subtitle && (

package/src/components/switch.tsx

@@ -3,27 +3,38 @@
 import * as React from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { cn } from "../lib/utils";
+import { HapticSwitch } from "./haptic-switch";
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root
-    ref={ref}
-    data-slot="switch"
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
-      className
-    )}
-    {...props}
-  >
-    <SwitchPrimitive.Thumb
+type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> & {
+  /**
+   * Tick on iOS through a `HapticSwitch` laid over the control. Off by default;
+   * a switch that writes a persisted setting opts in.
+   */
+  haptic?: boolean;
+};
+
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(
+  ({ className, haptic = false, disabled, ...props }, ref) => (
+    <SwitchPrimitive.Root
+      ref={ref}
+      data-slot="switch"
+      disabled={disabled}
       className={cn(
-        "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input aria-invalid:ring-2 aria-invalid:ring-destructive/40",
+        haptic && "relative",
+        className
       )}
-    />
-  </SwitchPrimitive.Root>
-));
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          "pointer-events-none block size-5 rounded-full bg-background shadow-md ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground"
+        )}
+      />
+      {haptic && <HapticSwitch disabled={disabled} />}
+    </SwitchPrimitive.Root>
+  )
+);
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 export { Switch };

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

@@ -1,6 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  LayoutGrid,
+  List,
+} from "lucide-react";
+import { Button } from "./button";
 
 const meta = {
   title: "Components/ToggleGroup",
@@ -58,3 +68,29 @@ export const Outline: Story = {
     </ToggleGroup>
   ),
 };
+
+/**
+ * The segmented control: one 44px muted capsule, the on cell a raised card.
+ * Sits beside pill buttons at the same height — the browse toolbar's view
+ * switch. Single, always one on.
+ */
+export const Segmented: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Button variant="outline" size="pill">
+        Filters
+      </Button>
+      <Button variant="outline" size="pill">
+        Sort
+      </Button>
+      <ToggleGroup type="single" variant="segmented" defaultValue="list" aria-label="View">
+        <ToggleGroupItem value="list" aria-label="Rows">
+          <List />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="grid" aria-label="Cards">
+          <LayoutGrid />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/src/components/toggle-group.tsx

@@ -26,13 +26,14 @@ function ToggleGroup({
       data-size={size}
       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",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
   );
 }
@@ -45,18 +46,22 @@ function ToggleGroupItem({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
   const context = React.useContext(ToggleGroupContext);
+  const resolved = context.variant || variant;
 
   return (
     <ToggleGroupPrimitive.Item
       data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
+      data-variant={resolved}
       data-size={context.size || size}
       className={cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: resolved,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "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-none first:rounded-l-md last:rounded-r-md",
         className
       )}
       {...props}

package/src/components/toggle.tsx

@@ -14,6 +14,14 @@ const toggleVariants = cva(
         default: "bg-transparent",
         outline:
           "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-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
+         * (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
+         * never fills with the accent, which would read as a primary button.
+         */
+        segmented:
+          "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
       },
       size: {
         default: "h-9 px-2 min-w-9",