@bearmenu/ui 0.8.43 → 0.8.45

package/dist/{chunk-CLFE4U5T.js → chunk-6PQINSAA.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-WHUG6QEI.js';
+import { Badge } from './chunk-RYPPN2GZ.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-K6ACNU2L.js → chunk-GHKTVHQG.js}

@@ -25,7 +25,7 @@ var buttonVariants = cva(
          * surface: the fill darkens a notch, the border firms up, the type
          * stays put. `--accent-subtle` is that step; `active:` goes one more.
          */
-        outline: "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+        outline: "border border-input bg-card hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary: "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         ghost: "hover:bg-accent-subtle active:bg-muted",
         link: "text-primary underline-offset-4 hover:underline",

package/dist/{chunk-AHL45DD2.js → chunk-HJTENOB2.js}

@@ -36,35 +36,50 @@ function DriftRail({
     observer.observe(node);
     return () => observer.disconnect();
   }, []);
+  const half = useRef(0);
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(() => {
+      half.current = track.scrollWidth / 2;
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return void 0;
+    const onScroll = () => {
+      if (half.current > 0 && scroller.scrollLeft >= half.current) {
+        scroller.scrollLeft -= half.current;
+      }
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, []);
   useEffect(() => {
     const scroller = scrollerRef.current;
     const track = trackRef.current;
     if (!scroller || !track) return void 0;
+    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (!drifting) return void 0;
     let frame = 0;
     let last = performance.now();
-    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
-    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
     position.current = scroller.scrollLeft;
     const tick = (now) => {
-      const half = track.scrollWidth / 2;
-      if (half > 0) {
-        const driftingNow = drifting && now >= heldUntil.current;
-        if (driftingNow) {
-          const perSecond = half / durationSeconds;
+      const width = half.current;
+      if (width > 0) {
+        if (now >= heldUntil.current) {
+          const perSecond = width / durationSeconds;
           const delta = perSecond * (now - last) / 1e3;
           position.current += reverse ? -delta : delta;
+          if (position.current >= width) position.current -= width;
+          else if (position.current < 0) position.current += width;
+          scroller.scrollLeft = position.current;
         } else {
           position.current = scroller.scrollLeft;
         }
-        let wrapped = false;
-        if (position.current >= half) {
-          position.current -= half;
-          wrapped = true;
-        } else if (position.current < 0) {
-          position.current += half;
-          wrapped = true;
-        }
-        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
       }
       last = now;
       frame = requestAnimationFrame(tick);

package/dist/{chunk-WHUG6QEI.js → chunk-RYPPN2GZ.js}

@@ -79,8 +79,9 @@ var badgeVariants = cva(
        * coming after the variant classes.
        */
       size: {
-        chip: "",
-        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold"
+        chip: "rounded-sm",
+        // measured: status badge radius 7px, no token
+        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold rounded-[7px]"
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).
@@ -89,6 +90,15 @@ var badgeVariants = cva(
         false: ""
       }
     },
+    // `size` sets a radius meant for the plain variants (default, outline,
+    // success, …), which otherwise leak the base `rounded-lg` (10px). The
+    // pill (`rounded-full`) and soft (`rounded-md`) variants already draw
+    // their own measured radius — reassert it here so `cn`'s tailwind-merge
+    // doesn't let the size-level radius clobber it.
+    compoundVariants: [
+      { variant: ["confirmed", "pending", "code", "completed", "assignee"], class: "rounded-full" },
+      { variant: ["softSuccess", "softWarning", "softDestructive", "softNeutral"], class: "rounded-md" }
+    ],
     defaultVariants: {
       variant: "default",
       size: "chip",

package/dist/{chunk-RQPUBKFU.js → chunk-VXGIDKXV.js}

@@ -1,4 +1,4 @@
-import { SignatureChip } from './chunk-CLFE4U5T.js';
+import { SignatureChip } from './chunk-6PQINSAA.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';

package/dist/components/alert-dialog.js

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

package/dist/components/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from '../chunk-WHUG6QEI.js';
+export { Badge, badgeVariants } from '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/booking-row.js

@@ -1,4 +1,4 @@
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/button.js

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

package/dist/components/calendar.js

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

package/dist/components/carousel.js

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

package/dist/components/coach-marks.js

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

package/dist/components/combobox.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandLoading, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/concept-convergence.js

@@ -1,7 +1,7 @@
 import { PhotoGround } from '../chunk-SWD6CJ35.js';
 import { Convergence } from '../chunk-4XDJXMLF.js';
 import '../chunk-OIV7B44M.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/components/drift-rail.js

@@ -1,3 +1,3 @@
-export { DriftRail } from '../chunk-AHL45DD2.js';
+export { DriftRail } from '../chunk-HJTENOB2.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/empty-state.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { Text } from '../chunk-ZLMRVBD7.js';

package/dist/components/event-detail-panel.js

@@ -2,7 +2,7 @@ import { resolveEventEntryFee } from '../chunk-DNSXMHYX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/event-index-row.js

@@ -29,7 +29,7 @@ function EventIndexRow({
   const dot = /* @__PURE__ */ jsx("span", { className: "px-1 text-border", "aria-hidden": true, children: "\xB7" });
   return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
     !hideRule && /* @__PURE__ */ jsx(Separator, { className: "absolute inset-x-0 top-0" }),
-    /* @__PURE__ */ jsxs("div", { className: "relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 active:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5", children: [
       /* @__PURE__ */ jsxs("div", { className: "relative aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted md:w-[104px]", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: fallback }),
         posterUrl && // eslint-disable-next-line @next/next/no-img-element
@@ -49,7 +49,7 @@ function EventIndexRow({
           LinkComponent,
           {
             href,
-            className: "rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className: "rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary active:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             children: title
           }
         ) }),
@@ -61,7 +61,7 @@ function EventIndexRow({
               LinkComponent,
               {
                 href: venueHref,
-                className: "relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                className: "relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary active:text-primary active:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                 children: venue
               }
             ) : /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground/85", children: venue })

package/dist/components/event-list-row-wide.js

@@ -3,7 +3,7 @@ import { Tag } from '../chunk-MWB7S54O.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/filter-category-row.js

@@ -1,5 +1,5 @@
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { ChevronRight } from 'lucide-react';

package/dist/components/link-button.js

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

package/dist/components/menu-family-block.js

@@ -3,7 +3,7 @@ import { HueChip } from '../chunk-6VOWT4YR.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-SWD6CJ35.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { buttonVariants } from '../chunk-K6ACNU2L.js';
+import { buttonVariants } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/menu-index-list.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';
@@ -52,7 +52,7 @@ function MenuIndexList({
                   LinkComponent,
                   {
                     href: entry.href,
-                    className: "group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
+                    className: "group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent active:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none",
                     children: [
                       /* @__PURE__ */ jsx(
                         "span",
@@ -67,7 +67,7 @@ function MenuIndexList({
                       /* @__PURE__ */ jsx(
                         ChevronRight,
                         {
-                          className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none",
+                          className: "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent group-active:text-accent motion-reduce:transition-none",
                           "aria-hidden": true
                         }
                       )

package/dist/components/menu-item.js

@@ -1,5 +1,5 @@
-export { MentionSignal, MenuItem } from '../chunk-RQPUBKFU.js';
-import '../chunk-CLFE4U5T.js';
-import '../chunk-WHUG6QEI.js';
+export { MentionSignal, MenuItem } from '../chunk-VXGIDKXV.js';
+import '../chunk-6PQINSAA.js';
+import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/multi-select-combobox.js

@@ -2,10 +2,10 @@ import { Checkbox } from '../chunk-L3CDXVEP.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';

package/dist/components/pagination.js

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

package/dist/components/pan-zoom-viewport.js

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

package/dist/components/place-card.js

@@ -6,7 +6,7 @@ import { showsGradeAtom } from '../chunk-I5V446BX.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-WHUG6QEI.js';
+import { Badge } from '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/poster-stack.d.ts

@@ -50,6 +50,9 @@ type PosterStackPoster = {
     caption?: string;
     /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
     fallback?: React.ReactNode;
+    /** Load now at high priority instead of lazily. For the poster that is the
+     *  page's LCP element; every other poster stays lazy. */
+    eager?: boolean;
 };
 type PosterStackProps = {
     /** Candidates in order. The first three whose image loads are shown, so

package/dist/components/poster-stack.js

@@ -85,7 +85,8 @@ function PosterStack({
                 {
                   src: poster.src,
                   alt: poster.caption ? "" : poster.alt,
-                  loading: "lazy",
+                  loading: poster.eager ? "eager" : "lazy",
+                  fetchPriority: poster.eager ? "high" : void 0,
                   decoding: "async",
                   className: cn(
                     "h-full w-full object-cover",

package/dist/components/poster-tape.js

@@ -1,4 +1,4 @@
-import { DriftRail } from '../chunk-AHL45DD2.js';
+import { DriftRail } from '../chunk-HJTENOB2.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/dist/components/responsive-overlay.js

@@ -81,6 +81,29 @@ var ResponsiveOverlay = React.forwardRef(
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
     const isDrawer = container === "drawer";
+    const closeButton = isDrawer ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "responsive-overlay-close",
+        "aria-label": closeLabel,
+        onClick: () => onOpenChange(false),
+        className: "sr-only rounded-full text-muted-foreground transition-colors focus-visible:not-sr-only focus-visible:-m-1.5 focus-visible:grid focus-visible:size-11 focus-visible:shrink-0 focus-visible:place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-slot": "responsive-overlay-close",
+        onClick: () => onOpenChange(false),
+        className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
+        ]
+      }
+    );
     const header = /* @__PURE__ */ jsxs(
       "div",
       {
@@ -91,19 +114,7 @@ var ResponsiveOverlay = React.forwardRef(
             /* @__PURE__ */ jsx(Title, { className: cn("font-bold leading-tight", isDrawer ? "text-[22px]" : "text-[19px]"), children: title }),
             subtitle ? /* @__PURE__ */ jsx(Description, { className: "mt-1 text-[13px] text-muted-foreground", children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              "data-slot": "responsive-overlay-close",
-              onClick: () => onOpenChange(false),
-              className: "-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted", children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": true }) }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
-              ]
-            }
-          )
+          closeButton
         ]
       }
     );

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PGQXVJXW.js';
 import '../chunk-IQIJCMG2.js';
-import { Button } from '../chunk-K6ACNU2L.js';
+import { Button } from '../chunk-GHKTVHQG.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/section-header.js

@@ -14,10 +14,10 @@ var ACTION_BASE_CLASSES = cn(
   "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
 );
 var ACTION_TONE_CLASSES = {
-  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  muted: "text-[14px] text-muted-foreground hover:text-foreground active:text-foreground",
   app: cn(
-    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
-    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80 active:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground lg:active:text-foreground"
   )
 };
 function SectionHeader({

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-CLFE4U5T.js';
-import '../chunk-WHUG6QEI.js';
+export { SignatureChip } from '../chunk-6PQINSAA.js';
+import '../chunk-RYPPN2GZ.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/sliding-panels.js

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

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-RQPUBKFU.js';
-import '../chunk-CLFE4U5T.js';
+import { MenuItem } from '../chunk-VXGIDKXV.js';
+import '../chunk-6PQINSAA.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-WHUG6QEI.js';
+import '../chunk-RYPPN2GZ.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.43",
+  "version": "0.8.45",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -112,6 +112,26 @@ export const StatusSize: Story = {
   ),
 };
 
+/**
+ * The two plain-variant radii: `size="chip"` (the inline default) draws
+ * `rounded-sm` (6px), `size="status"` draws the measured 7px the frames use
+ * for the taller pill. Pill (`confirmed`/`pending`/…) and soft
+ * (`softSuccess`/…) variants keep their own `rounded-full` / `rounded-md`
+ * regardless of size — see `Assignee` and `SoftTones` below.
+ */
+export const Radius: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="outline" size="chip">
+        chip · 6px
+      </Badge>
+      <Badge variant="outline" size="status">
+        status · 7px
+      </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

@@ -79,4 +79,63 @@ describe("Badge", () => {
       expect(badge).toHaveClass("py-[3px]", "text-[10.5px]", "font-bold");
     });
   });
+
+  describe("radius", () => {
+    // A plain variant (no radius of its own) leaks the base rounded-lg
+    // (10px) without a size-level radius. `chip` measures 6px, `status` 7px
+    // — the frames' status pill has no token for it.
+    it('size="chip" (the default) draws 6px, not the base 10px', () => {
+      render(<Badge variant="outline">Outline</Badge>);
+      const badge = screen.getByText("Outline");
+      expect(badge).toHaveClass("rounded-sm");
+      expect(badge.className).not.toContain("rounded-lg");
+    });
+
+    it('size="status" draws the measured 7px, not the base 10px', () => {
+      render(
+        <Badge variant="outline" size="status">
+          Outline
+        </Badge>
+      );
+      const badge = screen.getByText("Outline");
+      expect(badge).toHaveClass("rounded-[7px]");
+      expect(badge.className).not.toContain("rounded-lg");
+    });
+
+    it.each(["confirmed", "pending", "code", "completed", "assignee"] as const)(
+      "%s keeps its own rounded-full at both sizes",
+      (variant) => {
+        render(<Badge variant={variant}>Label</Badge>);
+        expect(screen.getByText("Label")).toHaveClass("rounded-full");
+
+        render(
+          <Badge variant={variant} size="status">
+            Label
+          </Badge>
+        );
+        const withStatus = screen.getAllByText("Label")[1];
+        expect(withStatus).toHaveClass("rounded-full");
+        expect(withStatus.className).not.toContain("rounded-sm");
+        expect(withStatus.className).not.toContain("rounded-[7px]");
+      }
+    );
+
+    it.each(["softSuccess", "softWarning", "softDestructive", "softNeutral"] as const)(
+      "%s keeps its own rounded-md at both sizes",
+      (variant) => {
+        render(<Badge variant={variant}>Label</Badge>);
+        expect(screen.getByText("Label")).toHaveClass("rounded-md");
+
+        render(
+          <Badge variant={variant} size="status">
+            Label
+          </Badge>
+        );
+        const withStatus = screen.getAllByText("Label")[1];
+        expect(withStatus).toHaveClass("rounded-md");
+        expect(withStatus.className).not.toContain("rounded-sm");
+        expect(withStatus.className).not.toContain("rounded-[7px]");
+      }
+    );
+  });
 });

package/src/components/badge.tsx

@@ -87,8 +87,9 @@ const badgeVariants = cva(
        * coming after the variant classes.
        */
       size: {
-        chip: "",
-        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold",
+        chip: "rounded-sm",
+        // measured: status badge radius 7px, no token
+        status: "gap-1 px-2 py-[3px] text-xs leading-[18px] font-semibold rounded-[7px]",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).
@@ -97,6 +98,15 @@ const badgeVariants = cva(
         false: "",
       },
     },
+    // `size` sets a radius meant for the plain variants (default, outline,
+    // success, …), which otherwise leak the base `rounded-lg` (10px). The
+    // pill (`rounded-full`) and soft (`rounded-md`) variants already draw
+    // their own measured radius — reassert it here so `cn`'s tailwind-merge
+    // doesn't let the size-level radius clobber it.
+    compoundVariants: [
+      { variant: ["confirmed", "pending", "code", "completed", "assignee"], class: "rounded-full" },
+      { variant: ["softSuccess", "softWarning", "softDestructive", "softNeutral"], class: "rounded-md" },
+    ],
     defaultVariants: {
       variant: "default",
       size: "chip",

package/src/components/button.test.tsx

@@ -16,7 +16,8 @@ describe("buttonVariants", () => {
   it("maps variant prop to correct classes", () => {
     expect(buttonVariants({ variant: "default" })).toContain("bg-primary");
     expect(buttonVariants({ variant: "destructive" })).toContain("bg-destructive");
-    expect(buttonVariants({ variant: "outline" })).toContain("border-border");
+    expect(buttonVariants({ variant: "outline" })).toContain("border-input");
+    expect(buttonVariants({ variant: "outline" })).toContain("bg-card");
     expect(buttonVariants({ variant: "secondary" })).toContain("bg-secondary");
     expect(buttonVariants({ variant: "ghost" })).toContain("hover:bg-accent");
     expect(buttonVariants({ variant: "link" })).toContain("text-primary");

package/src/components/button.tsx

@@ -26,7 +26,7 @@ const buttonVariants = cva(
          * stays put. `--accent-subtle` is that step; `active:` goes one more.
          */
         outline:
-          "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+          "border border-input bg-card hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         ghost: "hover:bg-accent-subtle active:bg-muted",

package/src/components/drift-rail.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { act, fireEvent, render } from "@testing-library/react";
+import { DriftRail } from "./drift-rail";
+
+let intersect: (isIntersecting: boolean) => void = () => {};
+let resize: () => void = () => {};
+let frames = new Map<number, (now: number) => void>();
+let nextFrame = 0;
+
+beforeEach(() => {
+  frames = new Map();
+  vi.stubGlobal("matchMedia", () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+  vi.stubGlobal(
+    "IntersectionObserver",
+    class {
+      constructor(callback: (entries: Array<{ isIntersecting: boolean }>) => void) {
+        intersect = (isIntersecting) => callback([{ isIntersecting }]);
+      }
+      observe() {}
+      disconnect() {}
+    }
+  );
+  vi.stubGlobal(
+    "ResizeObserver",
+    class {
+      constructor(callback: () => void) {
+        resize = callback;
+      }
+      observe() {}
+      disconnect() {}
+    }
+  );
+  vi.stubGlobal("requestAnimationFrame", (callback: (now: number) => void) => {
+    nextFrame += 1;
+    frames.set(nextFrame, callback);
+    return nextFrame;
+  });
+  vi.stubGlobal("cancelAnimationFrame", (id: number) => frames.delete(id));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+/** A rail whose track is 1000px wide (two 500px copies). */
+function renderRail() {
+  const { container } = render(
+    <DriftRail durationSeconds={10}>
+      <span>a</span>
+      <span>b</span>
+    </DriftRail>
+  );
+  const scroller = container.firstElementChild as HTMLDivElement;
+  const track = scroller.firstElementChild as HTMLDivElement;
+  const scrollWidth = vi.fn(() => 1000);
+  Object.defineProperty(track, "scrollWidth", { get: scrollWidth });
+  act(() => resize());
+  return { scroller, scrollWidth };
+}
+
+function runFrame(now: number) {
+  const pending = [...frames.values()];
+  frames.clear();
+  pending.forEach((frame) => frame(now));
+}
+
+describe("DriftRail", () => {
+  it("drifts at one copy per duration without measuring the track each frame", () => {
+    const { scroller, scrollWidth } = renderRail();
+    const readsAfterMount = scrollWidth.mock.calls.length;
+    const start = performance.now();
+
+    runFrame(start + 1000);
+    runFrame(start + 2000);
+
+    // 500px per 10s is 50px per second.
+    expect(scroller.scrollLeft).toBeGreaterThan(0);
+    expect(scrollWidth.mock.calls.length).toBe(readsAfterMount);
+  });
+
+  it("stops the frame loop entirely while off screen", () => {
+    renderRail();
+    act(() => intersect(false));
+    runFrame(performance.now() + 16);
+    expect(frames.size).toBe(0);
+
+    act(() => intersect(true));
+    expect(frames.size).toBeGreaterThan(0);
+  });
+
+  it("wraps the reader's own scroll by one copy, with no frame loop running", () => {
+    const { scroller } = renderRail();
+    act(() => intersect(false));
+    scroller.scrollLeft = 620;
+    fireEvent.scroll(scroller);
+    expect(scroller.scrollLeft).toBe(120);
+  });
+});

package/src/components/drift-rail.tsx

@@ -88,44 +88,66 @@ export function DriftRail({
     return () => observer.disconnect();
   }, []);
 
-  // The drift, and the wrap. Runs while mounted; the wrap has to run even
-  // while the reader holds the rail, so the loop never pauses — it only stops
-  // ADDING distance when something says it should.
+  // One copy's width, kept by a ResizeObserver. Read off the track on every
+  // frame, it forced a style and layout pass per frame (measured on /events at
+  // up to 558ms of recalc per second).
+  const half = useRef(0);
+  useEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return undefined;
+    const observer = new ResizeObserver(() => {
+      half.current = track.scrollWidth / 2;
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, []);
+
+  // The wrap, for the reader's own scrolling: the two copies are identical,
+  // so jumping by exactly one copy's width is invisible even mid-swipe. On a
+  // scroll event rather than in the frame loop, so the loop can stop.
+  useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return undefined;
+    const onScroll = () => {
+      if (half.current > 0 && scroller.scrollLeft >= half.current) {
+        scroller.scrollLeft -= half.current;
+      }
+    };
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => scroller.removeEventListener("scroll", onScroll);
+  }, []);
+
+  // The drift. The frame loop runs only while the rail can drift: on screen,
+  // motion allowed, not hovered. Otherwise it does no work at all.
   useEffect(() => {
     const scroller = scrollerRef.current;
     const track = trackRef.current;
     if (!scroller || !track) return undefined;
 
-    let frame = 0;
-    let last = performance.now();
-    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
-
     // Start the reverse loop inside the second copy so it has room to travel.
     if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (!drifting) return undefined;
+
+    let frame = 0;
+    let last = performance.now();
     position.current = scroller.scrollLeft;
 
     const tick = (now: number) => {
-      const half = track.scrollWidth / 2;
-      if (half > 0) {
-        const driftingNow = drifting && now >= heldUntil.current;
-        if (driftingNow) {
-          const perSecond = half / durationSeconds;
+      const width = half.current;
+      if (width > 0) {
+        if (now >= heldUntil.current) {
+          const perSecond = width / durationSeconds;
           const delta = (perSecond * (now - last)) / 1000;
           position.current += reverse ? -delta : delta;
+          if (position.current >= width) position.current -= width;
+          else if (position.current < 0) position.current += width;
+          scroller.scrollLeft = position.current;
         } else {
+          // Held: follow the reader, never fight the finger.
           position.current = scroller.scrollLeft;
         }
-        // The wrap applies in both modes: the two copies are identical, so
-        // jumping by exactly one copy's width is invisible even mid-swipe.
-        let wrapped = false;
-        if (position.current >= half) {
-          position.current -= half;
-          wrapped = true;
-        } else if (position.current < 0) {
-          position.current += half;
-          wrapped = true;
-        }
-        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
       }
       last = now;
       frame = requestAnimationFrame(tick);

package/src/components/empty-state.test.tsx

@@ -9,12 +9,12 @@ const retry = { label: "Try again", onClick: () => {} };
 describe("EmptyState", () => {
   it("draws a retry on an error as an outline button", () => {
     render(<ErrorEmptyState title="Couldn't load this report" description="On our side." action={retry} />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("draws a clear-filters on a search as an outline button", () => {
     render(<SearchEmptyState title="No results" description="Try another name." action={retry} />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("keeps the plain empty state's create action filled", () => {
@@ -24,7 +24,7 @@ describe("EmptyState", () => {
 
   it("lets the caller choose the action style", () => {
     render(<EmptyState title="Nothing" description="Here." action={retry} actionVariant="outline" />);
-    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-border", "bg-background");
+    expect(screen.getByRole("button", { name: "Try again" })).toHaveClass("border-input", "bg-card");
   });
 
   it("calls the action", async () => {

package/src/components/event-index-row.tsx

@@ -100,7 +100,7 @@ export function EventIndexRow({
     <div className={cn("relative", className)}>
       {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
 
-      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
+      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 active:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
         {/* Square poster at the same 72/104 the rest of the row family uses —
             the editorial surfaces above this one are 4:3, but a third ratio
             inside the ROW family would break the sibling-shape rule for one
@@ -125,7 +125,7 @@ export function EventIndexRow({
           <Heading className="text-[15px] font-bold leading-snug tracking-[-0.01em] text-foreground md:text-[16.5px]">
             <LinkComponent
               href={href}
-              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary active:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
             >
               {title}
             </LinkComponent>
@@ -139,7 +139,7 @@ export function EventIndexRow({
                 {venueHref ? (
                   <LinkComponent
                     href={venueHref}
-                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary active:text-primary active:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   >
                     {venue}
                   </LinkComponent>

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

@@ -112,7 +112,7 @@ export function MenuIndexList({
               <Separator />
               <LinkComponent
                 href={entry.href}
-                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+                className="group flex items-center gap-2.5 py-2.5 transition-colors hover:text-accent active:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
               >
                 {/* The family's mark: a dot in its hue. */}
                 <span
@@ -131,7 +131,7 @@ export function MenuIndexList({
                   {entry.countLabel ?? String(entry.count)}
                 </span>
                 <ChevronRight
-                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent motion-reduce:transition-none"
+                  className="h-3.5 w-3.5 shrink-0 text-muted-foreground transition-colors group-hover:text-accent group-active:text-accent motion-reduce:transition-none"
                   aria-hidden
                 />
               </LinkComponent>

package/src/components/poster-stack.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { PosterStack } from "./poster-stack";
+
+// jsdom has neither; the stack checks reduced motion, then observes itself.
+beforeEach(() => {
+  vi.stubGlobal("matchMedia", () => ({ matches: false }));
+  vi.stubGlobal(
+    "IntersectionObserver",
+    class {
+      observe() {}
+      disconnect() {}
+    }
+  );
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+const posters = [
+  { src: "/a.jpg", alt: "A", eager: true },
+  { src: "/b.jpg", alt: "B" },
+  { src: "/c.jpg", alt: "C" },
+];
+
+describe("PosterStack eager", () => {
+  it("loads only the eager poster now, at high priority", () => {
+    const { container } = render(<PosterStack posters={posters} />);
+    const [first, ...rest] = Array.from(container.querySelectorAll("img"));
+
+    expect(first.getAttribute("loading")).toBe("eager");
+    expect(first.getAttribute("fetchpriority")).toBe("high");
+    for (const img of rest) {
+      expect(img.getAttribute("loading")).toBe("lazy");
+      expect(img.hasAttribute("fetchpriority")).toBe(false);
+    }
+  });
+
+  it("stays lazy when no poster opts in", () => {
+    const { container } = render(
+      <PosterStack posters={posters.map(({ src, alt }) => ({ src, alt }))} />
+    );
+    for (const img of container.querySelectorAll("img")) {
+      expect(img.getAttribute("loading")).toBe("lazy");
+    }
+  });
+});

package/src/components/poster-stack.tsx

@@ -60,6 +60,9 @@ export type PosterStackPoster = {
   caption?: string;
   /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
   fallback?: React.ReactNode;
+  /** Load now at high priority instead of lazily. For the poster that is the
+   *  page's LCP element; every other poster stays lazy. */
+  eager?: boolean;
 };
 
 export type PosterStackProps = {
@@ -182,7 +185,8 @@ export function PosterStack({
               <img
                 src={poster.src}
                 alt={poster.caption ? "" : poster.alt}
-                loading="lazy"
+                loading={poster.eager ? "eager" : "lazy"}
+                fetchPriority={poster.eager ? "high" : undefined}
                 decoding="async"
                 className={cn(
                   "h-full w-full object-cover",

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

@@ -13,7 +13,7 @@ const meta: Meta<typeof ResponsiveOverlay> = {
     docs: {
       description: {
         component:
-          "One overlay authored once: a Drawer under md, a Dialog from md. The chrome is the same at both widths — title, one-line subtitle, round close, body, footer band. Resize the preview across 768px to see it change container. The scrim is `--scrim-overlay`, never `--scrim`.",
+          "One overlay authored once: a Drawer under md, a Dialog from md. The chrome is the same at both widths — title, one-line subtitle, round close, body, footer band. Resize the preview across 768px to see it change container. The scrim is `--scrim-overlay`, never `--scrim`. The drawer's round close button is keyboard-only: it stays `sr-only` (in the a11y tree and the tab order, never `display:none`) until it is `:focus-visible`, since the drawer already closes on a drag-down or a backdrop tap. Tab into the drawer below to see it appear. Dialog and sheet keep the always-visible close button.",
       },
     },
   },
@@ -58,6 +58,31 @@ export const AddAnItem: Story = {
   },
 };
 
+/**
+ * The drawer's close button (below 768px) has no visible circular X by
+ * default — a drag down or a backdrop tap already dismiss it. Tab through
+ * the open drawer to reveal the keyboard-only close button, drawn as the
+ * same disc dialog/sheet show at all times, with a visible focus ring.
+ */
+export const DrawerCloseIsKeyboardOnly: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(true);
+    return (
+      <ResponsiveOverlay
+        open={open}
+        onOpenChange={setOpen}
+        title="Add an item"
+        subtitle="Table 18 · from the menu"
+        closeLabel="Close"
+      >
+        <p className="text-[14px] text-muted-foreground">
+          Press Tab to move focus onto the close button — it is invisible until then.
+        </p>
+      </ResponsiveOverlay>
+    );
+  },
+};
+
 /**
  * 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

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

@@ -474,6 +474,55 @@ describe("ResponsiveOverlay", () => {
     });
   });
 
+  describe("close button", () => {
+    // The drawer already closes on a drag-down and a backdrop tap; the
+    // circular X is a mouse-only affordance the frames never draw there, so
+    // it stays out of view until a keyboard user tabs to it.
+    it("drawer: has no visible close — sr-only, not display:none", () => {
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close).toHaveClass("sr-only");
+      expect(close.className).not.toMatch(/\bhidden\b/);
+      expect(close).not.toHaveAttribute("hidden");
+      expect(close.style.display).not.toBe("none");
+    });
+
+    it("drawer: the close button is in the a11y tree with its label", () => {
+      open();
+      expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+    });
+
+    it("drawer: the close button is tabbable", () => {
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close).not.toHaveAttribute("tabindex", "-1");
+      expect(close).not.toBeDisabled();
+    });
+
+    it("drawer: clicking the close button closes it", async () => {
+      const onOpenChange = vi.fn();
+      open({ onOpenChange });
+      await userEvent.click(screen.getByRole("button", { name: "Close" }));
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("dialog: keeps the always-visible close button", () => {
+      setWidth(true);
+      open();
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close.className).not.toContain("sr-only");
+      expect(close).toHaveClass("size-11");
+    });
+
+    it("sheet: keeps the always-visible close button", () => {
+      setWidth(true);
+      open({ desktop: "sheet" });
+      const close = screen.getByRole("button", { name: "Close" });
+      expect(close.className).not.toContain("sr-only");
+      expect(close).toHaveClass("size-11");
+    });
+  });
+
   it("stays out of the DOM while closed", () => {
     render(
       <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">

package/src/components/responsive-overlay.tsx

@@ -249,6 +249,50 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
     // the desktop containers (already frames-checked elsewhere) don't move.
     const isDrawer = container === "drawer";
 
+    /**
+     * The drawer already has two ways to dismiss it that don't need a visible
+     * target — a drag down (vaul's `dismissible`) and the backdrop tap — and
+     * the frames never draw a circular X on the phone sheet. Drawing one
+     * anyway put a mouse-only affordance in a mode designed around touch and
+     * gravity.
+     *
+     * A keyboard user still needs one: `sr-only` (`clip-path`, not
+     * `display:none`, so the element stays in the a11y tree and the tab
+     * order) keeps it invisible until `:focus-visible` flips it back with
+     * `not-sr-only` — at which point it draws as the same 44×44 disc, in the
+     * same trailing header slot, that dialog and sheet show all the time.
+     * The disc's own box classes (`size-11`, `-m-1.5`, …) are gated behind
+     * `focus-visible:` too, not left unconditional, so nothing here fights
+     * `sr-only`'s 1px box for specificity while it is hidden.
+     */
+    const closeButton = isDrawer ? (
+      <button
+        type="button"
+        data-slot="responsive-overlay-close"
+        aria-label={closeLabel}
+        onClick={() => onOpenChange(false)}
+        className="sr-only rounded-full text-muted-foreground transition-colors focus-visible:not-sr-only focus-visible:-m-1.5 focus-visible:grid focus-visible:size-11 focus-visible:shrink-0 focus-visible:place-items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+          <X className="size-4" aria-hidden />
+        </span>
+      </button>
+    ) : (
+      <button
+        type="button"
+        data-slot="responsive-overlay-close"
+        onClick={() => onOpenChange(false)}
+        // 32px disc, 44px of tap target around it — the frames draw the disc,
+        // the accessibility floor asks for the target.
+        className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      >
+        <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+          <X className="size-4" aria-hidden />
+        </span>
+        <span className="sr-only">{closeLabel}</span>
+      </button>
+    );
+
     const header = (
       <div
         data-slot="responsive-overlay-header"
@@ -264,19 +308,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             </Description>
           ) : null}
         </div>
-        <button
-          type="button"
-          data-slot="responsive-overlay-close"
-          onClick={() => onOpenChange(false)}
-          // 32px disc, 44px of tap target around it — the frames draw the disc,
-          // the accessibility floor asks for the target.
-          className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-        >
-          <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
-            <X className="size-4" aria-hidden />
-          </span>
-          <span className="sr-only">{closeLabel}</span>
-        </button>
+        {closeButton}
       </div>
     );
 

package/src/components/section-header.tsx

@@ -79,10 +79,10 @@ const ACTION_BASE_CLASSES = cn(
 );
 
 const ACTION_TONE_CLASSES = {
-  muted: "text-[14px] text-muted-foreground hover:text-foreground",
+  muted: "text-[14px] text-muted-foreground hover:text-foreground active:text-foreground",
   app: cn(
-    "text-[12.5px] font-semibold text-accent hover:text-accent/80",
-    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground"
+    "text-[12.5px] font-semibold text-accent hover:text-accent/80 active:text-accent/80",
+    "lg:text-[14px] lg:font-normal lg:text-muted-foreground lg:hover:text-foreground lg:active:text-foreground"
   ),
 } as const;
 

package/src/globals.css

@@ -108,7 +108,11 @@ h6 {
    */
   --warning-deep: oklch(0.62 0.15 70);
   --border: oklch(0.895 0 0);
-  --input: oklch(0.895 0 0);
+  /* Measured off the boards' edge: the outline button and inputs share this
+     line. Slightly darker and warmer than --border on purpose — a hairline
+     that only separates (border) can sit lighter than one that also has to
+     read as an interactive edge (input). */
+  --input: oklch(0.86 0.015 60);
   --ring: oklch(0.25 0.05 35);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);