@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/model-picker/model-picker.tsx

@@ -52,6 +52,13 @@ export interface ModelPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "
   open?: boolean;
   /** Fires whenever the popover would open/close — a trigger click, or a row select. */
   onOpenChange?: (open: boolean) => void;
+  /**
+   * Rendered inside the popover BELOW the list — a persistent action row that is
+   * not one of the options (a free-text entry, a "browse…" affordance).
+   * Outside `CommandList` on purpose: it must not be filtered by the search query
+   * and must not participate in cmdk's roving selection.
+   */
+  footer?: ReactNode;
 }
 
 function Row({
@@ -101,9 +108,10 @@ function Row({
  * A compact pill that opens a grouped, searchable target list anchored under
  * itself — sized to sit in a composer footer.
  *
- * The inline sibling of `@elabs-ai/components-ai`'s `ModelSelector`,
- * which is the same `Command` internals in a modal `Dialog`. Reach for that one
- * for a full command palette; reach for this one for an in-place picker.
+ * **Which one to reach for.** An inline pill in a composer footer, anchored
+ * under itself → this component. A full ⌘K palette → compose `CommandDialog` +
+ * `Command*` from this package directly; there is no separate "selector"
+ * component wrapping them.
  *
  * **`Command` lives inside a `Popover`, never a `DropdownMenu`, and that is not
  * a stylistic choice.** `DropdownMenuContent` owns roving tabindex and its own
@@ -127,6 +135,7 @@ export const ModelPicker = forwardRef<HTMLDivElement, ModelPickerProps>(function
     className,
     open: openProp,
     onOpenChange,
+    footer,
     ...props
   },
   ref,
@@ -205,37 +214,20 @@ export const ModelPicker = forwardRef<HTMLDivElement, ModelPickerProps>(function
               </div>
             ) : null}
 
+            {/*
+              #121 — `CommandList` IS the ARIA listbox (cmdk hardcodes
+              role="listbox" on it); ARIA only lets a listbox own `option`/
+              `group`. It stays MOUNTED in every body (never conditionally
+              removed — `CommandInput` hardcodes `aria-controls` to its id,
+              and axe's aria-valid-attr-value only tolerates a dangling
+              reference when aria-expanded="false"), but every non-option
+              body — loading, error/empty, and `CommandEmpty` — renders as a
+              SIBLING below it, in the same visual slot an empty `CommandList`
+              (which collapses to zero height) would otherwise occupy.
+            */}
             <CommandList>
-              {body === "loading" ? (
-                <div className="space-y-2 p-3" data-slot="model-picker-loading">
-                  <span className="sr-only" role="status">
-                    {t("loading")}
-                  </span>
-                  <Skeleton className="h-6 w-full" />
-                  <Skeleton className="h-6 w-4/5" />
-                  <Skeleton className="h-6 w-3/5" />
-                </div>
-              ) : null}
-
-              {body === "error" || body === "empty" ? (
-                <div className="space-y-2 p-4 text-center" data-slot="model-picker-state">
-                  <p className="text-body">
-                    {body === "error"
-                      ? t("ui.modelPicker.loadFailed")
-                      : t("ui.modelPicker.nothingYet")}
-                  </p>
-                  {onRetry ? (
-                    <Button variant="outline" size="sm" onClick={onRetry}>
-                      {t("ui.modelPicker.retry")}
-                    </Button>
-                  ) : null}
-                </div>
-              ) : null}
-
-              {body === "list" ? (
-                <>
-                  <CommandEmpty>{t("noResults")}</CommandEmpty>
-                  {groups.map((group) => (
+              {body === "list"
+                ? groups.map((group) => (
                     <CommandGroup key={group.key} heading={group.label}>
                       {group.items.map((item) => (
                         <Row
@@ -249,10 +241,44 @@ export const ModelPicker = forwardRef<HTMLDivElement, ModelPickerProps>(function
                         />
                       ))}
                     </CommandGroup>
-                  ))}
-                </>
-              ) : null}
+                  ))
+                : null}
             </CommandList>
+
+            {/*
+              cmdk's `Command.Empty` reads `filtered.count` off the `Command`
+              root store, not off a `CommandList` ancestor — it renders
+              correctly as a sibling of the list it used to nest inside.
+            */}
+            {body === "list" ? <CommandEmpty>{t("noResults")}</CommandEmpty> : null}
+
+            {body === "loading" ? (
+              <div className="space-y-2 p-3" data-slot="model-picker-loading">
+                <span className="sr-only" role="status">
+                  {t("loading")}
+                </span>
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-6 w-4/5" />
+                <Skeleton className="h-6 w-3/5" />
+              </div>
+            ) : null}
+
+            {body === "error" || body === "empty" ? (
+              <div className="space-y-2 p-4 text-center" data-slot="model-picker-state">
+                <p className="text-body">
+                  {body === "error"
+                    ? t("ui.modelPicker.loadFailed")
+                    : t("ui.modelPicker.nothingYet")}
+                </p>
+                {onRetry ? (
+                  <Button variant="outline" size="sm" onClick={onRetry}>
+                    {t("ui.modelPicker.retry")}
+                  </Button>
+                ) : null}
+              </div>
+            ) : null}
+
+            {footer}
           </Command>
         </PopoverContent>
       </Popover>

package/src/components/nav-main/nav-main.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 /**
  * Shared collapsible sidebar navigation primitive (issue #99).
- * Promoted from `packages/ui/src/blocks/sidebar-02/nav-main.tsx`.
+ * Promoted from `registry/blocks/sidebar-02/nav-main.tsx`.
  *
  * Renders a `SidebarMenu` of routes; each route with sub-items uses a
  * `Collapsible` expand/collapse affordance. Collapses icon-only when the
@@ -90,7 +92,7 @@ export function NavMain({ routes, className }: NavMainProps) {
                   >
                     {route.icon}
                     {!isCollapsed && (
-                      <span className="ms-2 flex-1 text-sm font-medium">{route.title}</span>
+                      <span className="ms-2 flex-1 text-body font-medium">{route.title}</span>
                     )}
                     {!isCollapsed && (
                       <span className="ms-auto">
@@ -114,7 +116,7 @@ export function NavMain({ routes, className }: NavMainProps) {
                           <SidebarMenuSubButton asChild>
                             <a
                               href={subRoute.link}
-                              className="flex items-center rounded-md px-4 py-1.5 text-sm font-medium text-sidebar-muted-foreground"
+                              className="flex items-center rounded-md px-4 py-1.5 text-body font-medium text-sidebar-muted-foreground"
                             >
                               {subRoute.title}
                             </a>
@@ -135,7 +137,9 @@ export function NavMain({ routes, className }: NavMainProps) {
                   )}
                 >
                   {route.icon}
-                  {!isCollapsed && <span className="ms-2 text-sm font-medium">{route.title}</span>}
+                  {!isCollapsed && (
+                    <span className="ms-2 text-body font-medium">{route.title}</span>
+                  )}
                 </a>
               </SidebarMenuButton>
             )}

package/src/components/nav-notifications/nav-notifications.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { NavNotifications } from "./nav-notifications";
+
+const meta = {
+  title: "Navigation/NavNotifications",
+  component: NavNotifications,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A bell button that opens a short list of recent notifications. Placement is the caller\'s decision, not the component\'s: the defaults (`side="right"`, the `my-6` inset) suit a bell sitting in a left-hand nav rail, while a bell at the end of a top bar passes `side="bottom" align="end"` so the menu hangs below its trigger instead of being collision-flipped back across the controls beside it.',
+      },
+    },
+  },
+  argTypes: {
+    notifications: { control: false, table: { category: "Content" } },
+    viewAllLabel: { control: "text", table: { category: "Content" } },
+    side: { control: "inline-radio", table: { category: "Placement" } },
+    align: { control: "inline-radio", table: { category: "Placement" } },
+    className: { control: "text", table: { category: "Styling" } },
+  },
+} satisfies Meta<typeof NavNotifications>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const NOTIFICATIONS = [
+  { id: "n1", fallback: "OR", text: "Order 4821 is waiting on stock.", time: "10m ago" },
+  { id: "n2", fallback: "PY", text: "This week’s payout cleared.", time: "1h ago" },
+  { id: "n3", fallback: "CS", text: "Three customers asked about delivery.", time: "2h ago" },
+];
+
+/** The rail placement — the shipped defaults, unchanged. */
+export const Default: Story = {
+  args: { notifications: NOTIFICATIONS },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Open notifications" }));
+    // The menu is portalled to <body>, so it is reached through the document,
+    // not the canvas.
+    await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeVisible());
+    await expect(document.querySelector('[role="menu"]')).toHaveAttribute("data-side", "right");
+    // Close it before the story settles. While a Radix menu is open its
+    // siblings carry `aria-hidden`, and the trigger inside one of them is
+    // still focusable — which axe reports as `aria-hidden-focus` against the
+    // ANCESTOR, not against anything this component authored. Leaving the menu
+    // open would fail the a11y pass on library behaviour the story is not
+    // testing.
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeNull());
+  },
+};
+
+/**
+ * The top-bar placement: `side="bottom" align="end"` puts the menu under the
+ * bell and flush with its outer edge. The caller passes NOTHING else — the
+ * rail's 24px vertical inset is derived from `side` inside the component, so a
+ * bottom-side menu drops it on its own and there is no inset to cancel here.
+ * (`className` styles the bell TRIGGER, not the portalled menu, so a `my-0`
+ * override would land on the wrong element anyway.)
+ *
+ * Asserted on Radix's own resolved `data-side`/`data-align`, which report where
+ * the menu ACTUALLY landed after collision handling — a class-name assertion
+ * would pass on a menu that flipped back across the controls beside it.
+ */
+export const TopBarPlacement: Story = {
+  args: {
+    notifications: NOTIFICATIONS,
+    side: "bottom",
+    align: "end",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Open notifications" }));
+    const content = await waitFor(() => {
+      const node = document.querySelector('[role="menu"]');
+      expect(node).toBeVisible();
+      return node;
+    });
+    await expect(content).toHaveAttribute("data-side", "bottom");
+    await expect(content).toHaveAttribute("data-align", "end");
+    // Closed for the same reason as `Default` — see the note there.
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() => expect(document.querySelector('[role="menu"]')).toBeNull());
+  },
+};
+
+/**
+ * `className` styles the component ROOT — the bell trigger — and merges LAST, so
+ * a caller-supplied radius replaces the shipped `rounded-full`.
+ */
+export const CustomTriggerClass: Story = {
+  args: { notifications: NOTIFICATIONS, className: "rounded-md" },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Open notifications" });
+    // WHERE it landed: on the trigger, not on the portalled menu.
+    await expect(trigger).toHaveClass("rounded-md");
+    // …and it WON. `cn`'s tailwind-merge drops the losing radius outright, so
+    // the shipped `rounded-full` is gone from the class list rather than merely
+    // ordered behind it.
+    await expect(trigger).not.toHaveClass("rounded-full");
+    // Asserted on the painted result too, because a class list says nothing
+    // about what the browser resolved. `rounded-full` computes to a huge radius
+    // (the pill); the token radius is single-digit px.
+    const radius = Number.parseFloat(getComputedStyle(trigger).borderTopLeftRadius);
+    await expect(radius).toBeLessThan(100);
+  },
+};

package/src/components/nav-notifications/nav-notifications.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { NavNotifications } from "./nav-notifications";
 
 describe("NavNotifications", () => {
@@ -12,4 +13,14 @@ describe("NavNotifications", () => {
     render(<NavNotifications notifications={notifications} />);
     expect(screen.getByRole("button", { name: "Open notifications" })).toBeInTheDocument();
   });
+
+  it("caps the menu width so it never overflows a narrow viewport", async () => {
+    const user = userEvent.setup();
+    render(<NavNotifications notifications={notifications} />);
+    await user.click(screen.getByRole("button", { name: "Open notifications" }));
+    const menu = await screen.findByRole("menu");
+    // Without a max-width cap, the fixed `w-80` (320px) menu forces horizontal
+    // overflow on any viewport narrower than ~336px.
+    expect(menu.className).toContain("max-w-[calc(100vw-2rem)]");
+  });
 });

package/src/components/nav-notifications/nav-notifications.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { ComponentProps } from "react";
 import { BellIcon } from "lucide-react";
 import { Avatar, AvatarFallback } from "../avatar";
 import { Button } from "../button";
@@ -11,6 +12,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../dropdown-menu";
+import { useLocale } from "../locale-provider";
+import { cn } from "../../lib/cn";
 
 export interface NavNotification {
   id: string;
@@ -24,30 +27,85 @@ export interface NavNotificationsProps {
   notifications: NavNotification[];
   /** Label for the "view all" footer item. @default "View all notifications" */
   viewAllLabel?: string;
+  /**
+   * Which side of the trigger the menu opens on.
+   *
+   * The default is `"right"`, which is right for the surface this component was
+   * extracted from — a bell sitting in a left-hand nav rail. It is WRONG for a
+   * trigger at the end of a top bar: Radix collision-handling then flips the
+   * menu back across the trigger and it covers the controls beside it. Set
+   * `side="bottom"` (usually with `align="end"`) for a top-bar bell.
+   *
+   * @default "right"
+   */
+  side?: ComponentProps<typeof DropdownMenuContent>["side"];
+  /**
+   * How the menu aligns along that side. Radix's own default is `"center"`;
+   * pass `"end"` so a top-bar menu hangs from the trigger's outer edge instead
+   * of straddling it.
+   */
+  align?: ComponentProps<typeof DropdownMenuContent>["align"];
+  /**
+   * Extra classes for the component ROOT — the bell trigger — merged last, so a
+   * caller can override the shipped `rounded-full` (`component-api.md`).
+   *
+   * There is deliberately NO seam for the portalled menu surface: nothing needs
+   * one today, and an unused prop is a worse API than a missing one. The one
+   * thing a caller used to reach for it (dropping the rail's vertical inset for
+   * a top-bar menu) is now derived from `side` instead — see below.
+   */
+  className?: string;
 }
 
 /**
- * Sidebar notifications dropdown button. Shared primitive from sidebar-02 (issue #99).
- * Renders a bell-icon ghost button that opens a dropdown listing recent notifications.
+ * Notifications dropdown button. Shared primitive from sidebar-02 (issue #99).
+ * Renders a bell-icon ghost button that opens a dropdown listing recent
+ * notifications.
+ *
+ * Placement is caller-owned via `side`/`align`; the defaults are the original
+ * rail placement, so every existing call site renders unchanged. `className`
+ * styles the trigger, not the menu.
  */
 export function NavNotifications({
   notifications,
   viewAllLabel = "View all notifications",
+  side = "right",
+  align,
+  className,
 }: NavNotificationsProps) {
+  const { t } = useLocale();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           variant="ghost"
           size="icon"
-          className="rounded-full"
-          aria-label="Open notifications"
+          className={cn("rounded-full", className)}
+          aria-label={t("ui.navNotifications.trigger")}
         >
           <BellIcon className="size-5" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent side="right" className="my-6 w-80">
-        <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+      <DropdownMenuContent
+        side={side}
+        align={align}
+        // Keeps the menu clear of the viewport edge instead of sitting flush
+        // against it on a narrow phone screen.
+        collisionPadding={16}
+        className={cn(
+          // The vertical inset belongs to the SIDE-opening rail placement, where
+          // the menu runs alongside its trigger and needs clearance from it. A
+          // menu that opens above or below the trigger is already clear of it,
+          // and the inset would just hang it 24px off the bar. Derived from
+          // `side` rather than exposed as a second className seam.
+          (side === "left" || side === "right") && "my-6",
+          // `w-80` (320px) is wider than some phone viewports once the 16px
+          // collision padding on both sides is subtracted — cap it so the menu
+          // shrinks instead of forcing horizontal overflow.
+          "w-80 max-w-[calc(100vw-2rem)]",
+        )}
+      >
+        <DropdownMenuLabel>{t("ui.navNotifications.label")}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {notifications.map(({ id, fallback, text, time }) => (
           <DropdownMenuItem key={id} className="flex items-start gap-3">
@@ -55,13 +113,13 @@ export function NavNotifications({
               <AvatarFallback>{fallback}</AvatarFallback>
             </Avatar>
             <div className="flex flex-col">
-              <span className="text-sm font-medium">{text}</span>
-              <span className="text-xs text-muted-foreground">{time}</span>
+              <span className="text-body font-medium">{text}</span>
+              <span className="text-meta text-muted-foreground">{time}</span>
             </div>
           </DropdownMenuItem>
         ))}
         <DropdownMenuSeparator />
-        <DropdownMenuItem className="justify-center text-sm text-muted-foreground">
+        <DropdownMenuItem className="justify-center text-body text-muted-foreground">
           {viewAllLabel}
         </DropdownMenuItem>
       </DropdownMenuContent>

package/src/components/nav-user/nav-user.tsx

@@ -54,9 +54,9 @@ export function NavUser({ user }: NavUserProps) {
                 {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
                 <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
               </Avatar>
-              <div className="grid flex-1 text-start text-sm leading-tight">
+              <div className="grid flex-1 text-start text-body leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
+                <span className="truncate text-meta">{user.email}</span>
               </div>
               <ChevronsUpDown className="ms-auto size-4" />
             </SidebarMenuButton>
@@ -68,14 +68,14 @@ export function NavUser({ user }: NavUserProps) {
             sideOffset={4}
           >
             <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-start text-body">
                 <Avatar className="h-8 w-8 rounded-lg">
                   {user.avatar && <AvatarImage src={user.avatar} alt={user.name} />}
                   <AvatarFallback className="rounded-lg">{initials}</AvatarFallback>
                 </Avatar>
-                <div className="grid flex-1 text-start text-sm leading-tight">
+                <div className="grid flex-1 text-start text-body leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
+                  <span className="truncate text-meta">{user.email}</span>
                 </div>
               </div>
             </DropdownMenuLabel>

package/src/components/navigation-menu/navigation-menu.stories.tsx

@@ -86,7 +86,29 @@ export const Default: Story = {
     const analytics = await canvas.findByText("Analytics");
     await waitFor(() => expect(analytics).toBeVisible());
     await waitFor(() => expect(canvas.getByText("Data Integration")).toBeVisible());
+    // userEvent.click() synthesizes a real pointer sequence (pointerenter +
+    // pointermove before the click), which — independently of the click's own
+    // open — arms Radix's hover-intent open timer inside
+    // @radix-ui/react-navigation-menu's NavigationMenu root (delayDuration,
+    // default 200ms). That timer is cleared only by a subsequent pointer
+    // leave/enter, never by the click-open path or by Escape's dismiss path,
+    // so left alone it fires ~200ms after this interaction regardless of the
+    // explicit Escape below — silently reopening the menu well after play()
+    // has returned (confirmed via instrumentation: aria-expanded flips back
+    // to "true" at ~t+207ms). That reopen is what axe's afterEach scan was
+    // intermittently catching — a real defect in the underlying menu, not a
+    // wrong wait condition; filed separately (residual, not fixed here).
+    // Unhovering cancels that stray timer through Radix's own cancellation
+    // path (onTriggerLeave), the same way a real user moving the pointer away
+    // before dismissing would.
+    await userEvent.unhover(trigger);
     // Escape dismisses the open panel
     await userEvent.keyboard("{Escape}");
+    // Wait for the close transition to complete via a real post-condition:
+    // aria-expanded flips to "false" in the same React commit that removes
+    // the trigger's aria-hidden focus-proxy span (both derive from the same
+    // `open` value in NavigationMenuTrigger's render), so this dominates the
+    // axe scan that runs immediately after play() resolves.
+    await waitFor(() => expect(trigger).toHaveAttribute("aria-expanded", "false"));
   },
 };

package/src/components/navigation-menu/navigation-menu.test.tsx

@@ -0,0 +1,174 @@
+import { act, cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "./navigation-menu";
+
+afterEach(cleanup);
+
+function renderMenu() {
+  render(
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="#">Analytics</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>,
+  );
+}
+
+describe("NavigationMenuTrigger", () => {
+  /**
+   * Residual of #54 (issue #85). `userEvent.click()` — like a real mouse click
+   * — synthesizes a pointer move onto the trigger before the click itself,
+   * which arms `@radix-ui/react-navigation-menu`'s root-level hover-intent
+   * open timer (`openTimerRef`, default `delayDuration` 200ms). Neither the
+   * click-open path (`onItemSelect`) nor any dismiss path (Escape /
+   * outside-click / focus-out, all funnelled through one
+   * `ROOT_CONTENT_DISMISS` handler) clears that timer, so — left unpatched —
+   * it fires ~200ms later and silently reopens the panel even though the user
+   * already dismissed it.
+   *
+   * Fake timers are load-bearing here, not incidental: asserting
+   * `aria-expanded` immediately after Escape passes on the UNPATCHED wrapper
+   * too, because the stray timer has not fired yet. The lock only means
+   * anything once the assertion runs from INSIDE the delay window.
+   */
+  it("does not spontaneously reopen after Escape dismisses it inside the hover-intent delay window", async () => {
+    // `shouldAdvanceTime` keeps the fake clock ticking in step with real time
+    // (in addition to responding to explicit `advanceTimersByTime` calls)
+    // so React's own scheduler — which falls back to a real `setTimeout` for
+    // its internal flush in this jsdom environment — is never left waiting
+    // on a fake timer nothing ever advances; plain `vi.useFakeTimers()` here
+    // hangs `userEvent.click()` indefinitely for exactly that reason.
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const user = userEvent.setup({ delay: null, advanceTimers: vi.advanceTimersByTime });
+      renderMenu();
+      const trigger = screen.getByRole("button", { name: /products/i });
+
+      // Deliberately the opposite of #54's story-level unhover() workaround:
+      // hover-then-click with NO intervening pointer-leave, so the real
+      // click-then-dismiss sequence is exercised instead of routed around it.
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      await user.keyboard("{Escape}");
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+      // Advance past delayDuration (200ms) + a margin so the stray timer, if
+      // still armed, fires.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(300);
+      });
+
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  /**
+   * Acceptance criterion from #85: the fix must not regress ordinary
+   * click-to-toggle behaviour into the "menu never opens" failure mode hit by
+   * an earlier, abandoned `delayDuration={0}` attempt. Several rapid
+   * open/close/open cycles, entirely via click (no hover), must all still
+   * land the menu in the expected state.
+   */
+  it("still opens and closes normally across rapid repeated click cycles", async () => {
+    const user = userEvent.setup();
+    renderMenu();
+    const trigger = screen.getByRole("button", { name: /products/i });
+
+    for (let cycle = 0; cycle < 3; cycle += 1) {
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    }
+  });
+
+  /**
+   * Fix-round-1 regression (validator finding): a synthetic pointer-leave
+   * dispatched on every click — the first attempt at fixing #85 — runs
+   * Radix's real `onTriggerLeave`, which does two things, not one: it clears
+   * the stray open timer (wanted) AND unconditionally arms Radix's 150ms
+   * close timer (`startCloseTimer`/`closeTimerRef`, unwanted) via
+   * `context.onTriggerLeave` (`@radix-ui/react-navigation-menu@1.2.14 and
+   * 1.2.22`'s index.mjs, root `onTriggerLeave`). Since a click-opened menu
+   * never gets a real pointerenter on its content, nothing ever clears that
+   * close timer, so it silently closes itself ~150ms after every click-open
+   * unless the mouse happens to move onto the panel — breaking keyboard and
+   * touch entry entirely, and any mouse user who pauses before reaching the
+   * panel. This test opens the menu via click and asserts it is STILL OPEN
+   * well past that delay with no further pointer interaction at all.
+   */
+  it("stays open past the close-timer delay when opened by click with no further pointer movement", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const user = userEvent.setup({ delay: null, advanceTimers: vi.advanceTimersByTime });
+      renderMenu();
+      const trigger = screen.getByRole("button", { name: /products/i });
+
+      await user.click(trigger);
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      // Advance well past both Radix's 150ms close-timer delay and its
+      // 200ms open-timer delay, with no further interaction of any kind.
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(400);
+      });
+
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  /**
+   * Fix-round-1 requirement: the guard against #85's stray reopen must be
+   * scoped to genuine, still-hovering pointer dismissals — it must never
+   * interfere with a pure keyboard sequence (no mouse involved at all).
+   * Opening and dismissing via keyboard alone must behave exactly as an
+   * unpatched menu would: the panel closes on Escape, focus returns to the
+   * trigger (Radix's own `triggerRef.current?.focus()` on dismiss), and
+   * nothing reopens it afterward.
+   */
+  it("keyboard: Escape dismisses, returns focus to the trigger, and does not reopen", async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    try {
+      const user = userEvent.setup({ delay: null, advanceTimers: vi.advanceTimersByTime });
+      renderMenu();
+      const trigger = screen.getByRole("button", { name: /products/i });
+
+      act(() => {
+        trigger.focus();
+      });
+      await user.keyboard("{Enter}");
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+      await user.keyboard("{Escape}");
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+      expect(trigger).toHaveFocus();
+
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(300);
+      });
+
+      expect(trigger).toHaveAttribute("aria-expanded", "false");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});