@primitiv-ui/react 0.1.0

package/src/Dropdown/__tests__/Dropdown.keyboard-interaction.test.tsx

@@ -0,0 +1,310 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown keyboard interaction", () => {
+  it("focuses the first menu item when the dropdown opens", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+          <Dropdown.Item>Delete</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Act
+    await user.click(screen.getByRole("button", { name: "Options" }));
+
+    // Assert
+    expect(
+      screen.getByRole("menuitem", { name: "Rename", hidden: true }),
+    ).toHaveFocus();
+  });
+
+  it("moves focus between items with ArrowDown and ArrowUp, wrapping at both ends", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+          <Dropdown.Item>Delete</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const rename = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    const duplicate = screen.getByRole("menuitem", {
+      name: "Duplicate",
+      hidden: true,
+    });
+    const del = screen.getByRole("menuitem", { name: "Delete", hidden: true });
+    expect(rename).toHaveFocus();
+
+    // Act + Assert: forward
+    await user.keyboard("{ArrowDown}");
+    expect(duplicate).toHaveFocus();
+    await user.keyboard("{ArrowDown}");
+    expect(del).toHaveFocus();
+    // wrap around forward
+    await user.keyboard("{ArrowDown}");
+    expect(rename).toHaveFocus();
+
+    // Act + Assert: backward + wrap
+    await user.keyboard("{ArrowUp}");
+    expect(del).toHaveFocus();
+    await user.keyboard("{ArrowUp}");
+    expect(duplicate).toHaveFocus();
+  });
+
+  it("activates the focused item on Enter and closes the dropdown", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item onSelect={onSelect}>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const menu = screen.getByRole("menu", { hidden: true });
+
+    // Act
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(menu).not.toHaveAttribute("data-popover-open");
+  });
+
+  it("activates the focused item on Space and closes the dropdown", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item onSelect={onSelect}>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const menu = screen.getByRole("menu", { hidden: true });
+
+    // Act — literal space, not "{Space}" (which emits key="Space")
+    await user.keyboard(" ");
+
+    // Assert
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(menu).not.toHaveAttribute("data-popover-open");
+  });
+
+  it("closes the dropdown on Escape and returns focus to the trigger", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Options" });
+    const menu = screen.getByRole("menu", { hidden: true });
+    expect(menu).toHaveAttribute("data-popover-open");
+
+    // Act
+    await user.keyboard("{Escape}");
+
+    // Assert
+    expect(menu).not.toHaveAttribute("data-popover-open");
+    expect(trigger).toHaveFocus();
+  });
+
+  it("returns focus to the trigger after activating an item with Enter", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const trigger = screen.getByRole("button", { name: "Options" });
+
+    // Act
+    await user.keyboard("{Enter}");
+
+    // Assert
+    expect(trigger).toHaveFocus();
+  });
+
+  it("jumps to the first item on Home and the last item on End", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+          <Dropdown.Item>Duplicate</Dropdown.Item>
+          <Dropdown.Item>Delete</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const rename = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+    const del = screen.getByRole("menuitem", { name: "Delete", hidden: true });
+
+    // Act
+    await user.keyboard("{End}");
+
+    // Assert
+    expect(del).toHaveFocus();
+
+    // Act
+    await user.keyboard("{Home}");
+
+    // Assert
+    expect(rename).toHaveFocus();
+  });
+
+  it("skips items inside a closed sub-content popover when ArrowDown moves past a SubTrigger", async () => {
+    // Arrange — the parent Content's items are queried via querySelectorAll,
+    // which by default also matches menuitems inside any descendant
+    // SubContent popover. Those are not focusable while the sub is closed
+    // (display: none), so the user gets stuck on the SubTrigger. Arrow
+    // navigation must scope itself to the active popover.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>New</Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+              <Dropdown.Item>Project B</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Separator />
+          <Dropdown.CheckboxItem>Show bookmarks</Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const showBookmarks = screen.getByRole("menuitemcheckbox", {
+      name: "Show bookmarks",
+      hidden: true,
+    });
+
+    // Act — focus starts on "New" (first item); ArrowDown lands on the
+    // SubTrigger; another ArrowDown must jump past the closed SubContent's
+    // items and land on the next parent-level item.
+    await user.keyboard("{ArrowDown}");
+    expect(subTrigger).toHaveFocus();
+
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(showBookmarks).toHaveFocus();
+  });
+
+  it("skips items inside a closed sub-content popover when ArrowUp moves past a SubTrigger", async () => {
+    // Arrange — the inverse of the ArrowDown case: ArrowUp from the item
+    // after the Sub must land on the SubTrigger, not on a sub item.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>New</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const newItem = screen.getByRole("menuitem", {
+      name: "New",
+      hidden: true,
+    });
+
+    // Act — focus starts on the SubTrigger; move down to "New" then back up
+    await user.keyboard("{ArrowDown}");
+    expect(newItem).toHaveFocus();
+
+    await user.keyboard("{ArrowUp}");
+
+    // Assert
+    expect(subTrigger).toHaveFocus();
+  });
+
+  it("scopes ArrowDown navigation to items inside the open SubContent rather than wrapping into the parent menu", async () => {
+    // Arrange — when focus lives inside an open SubContent, ArrowDown must
+    // wrap within the sub's own items and never escape into siblings of
+    // the SubTrigger in the parent menu.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+              <Dropdown.Item>Project B</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Item>New</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const projectA = screen.getByRole("menuitem", {
+      name: "Project A",
+      hidden: true,
+    });
+    const projectB = screen.getByRole("menuitem", {
+      name: "Project B",
+      hidden: true,
+    });
+
+    // Sub auto-focuses its first item on open
+    expect(projectA).toHaveFocus();
+
+    // Act — ArrowDown advances within the sub
+    await user.keyboard("{ArrowDown}");
+    expect(projectB).toHaveFocus();
+
+    // Act — ArrowDown again: wraps within the sub, NOT into "New" in the parent
+    await user.keyboard("{ArrowDown}");
+
+    // Assert
+    expect(projectA).toHaveFocus();
+  });
+});

package/src/Dropdown/__tests__/Dropdown.mouse-interaction.test.tsx

@@ -0,0 +1,347 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Dropdown } from "../Dropdown";
+
+describe("Dropdown mouse interaction", () => {
+  it("adds data-highlighted to an Item when the pointer enters it", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    await user.hover(item);
+
+    // Assert
+    expect(item).toHaveAttribute("data-highlighted");
+  });
+
+  it("removes data-highlighted from an Item when the pointer leaves", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Rename</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitem", { name: "Rename", hidden: true });
+
+    // Act
+    await user.hover(item);
+    await user.unhover(item);
+
+    // Assert
+    expect(item).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("removes data-highlighted from a CheckboxItem when the pointer leaves", async () => {
+    // Arrange — mirrors the plain-Item unhover contract for the tri-state
+    // checkbox variant, which has its own setHighlighted(false) path.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.CheckboxItem>Show bookmarks</Dropdown.CheckboxItem>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitemcheckbox", {
+      name: "Show bookmarks",
+      hidden: true,
+    });
+
+    // Act
+    await user.hover(item);
+    expect(item).toHaveAttribute("data-highlighted");
+    await user.unhover(item);
+
+    // Assert
+    expect(item).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("removes data-highlighted from a RadioItem when the pointer leaves", async () => {
+    // Arrange — mirrors the plain-Item unhover contract for the radio
+    // variant, which has its own setHighlighted(false) path.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>Options</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.RadioGroup>
+            <Dropdown.RadioItem value="light">Light</Dropdown.RadioItem>
+          </Dropdown.RadioGroup>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const item = screen.getByRole("menuitemradio", {
+      name: "Light",
+      hidden: true,
+    });
+
+    // Act
+    await user.hover(item);
+    expect(item).toHaveAttribute("data-highlighted");
+    await user.unhover(item);
+
+    // Assert
+    expect(item).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("adds data-highlighted to a SubTrigger when the pointer enters it", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act
+    await user.hover(subTrigger);
+
+    // Assert
+    expect(subTrigger).toHaveAttribute("data-highlighted");
+  });
+
+  it("opens the sub-menu and sets aria-expanded when the pointer enters the SubTrigger", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+    expect(subMenu).not.toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+
+    // Act
+    await user.hover(subTrigger);
+
+    // Assert
+    expect(subMenu).toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("keeps data-highlighted on a SubTrigger after the pointer leaves while its sub-menu stays open", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+
+    // Act — hover then move the pointer away; sub-menu remains open
+    await user.hover(subTrigger);
+    await user.unhover(subTrigger);
+
+    // Assert — sub.open is true, so data-highlighted must persist
+    expect(subTrigger).toHaveAttribute("data-highlighted");
+  });
+
+  it("removes data-highlighted from a SubTrigger when the sub-menu closes and the pointer is not over it", async () => {
+    // Arrange — render with sub already open; focus auto-lands in sub-content
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    // sub.open=true on render, so data-highlighted is present without any hover
+    expect(subTrigger).toHaveAttribute("data-highlighted");
+
+    // Act — ArrowLeft from inside the sub-content closes the sub-menu;
+    // focus never passes through the sub-trigger so hovered stays false
+    await user.keyboard("{ArrowLeft}");
+
+    // Assert — sub.open is now false and pointer never hovered the trigger
+    expect(subTrigger).not.toHaveAttribute("data-highlighted");
+  });
+
+  it("keeps data-highlighted on all ancestor SubTriggers while nested sub-menus are open", async () => {
+    // Arrange
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub defaultOpen>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Sub defaultOpen>
+                <Dropdown.SubTrigger>From Cloud</Dropdown.SubTrigger>
+                <Dropdown.SubContent>
+                  <Dropdown.Item>Dropbox</Dropdown.Item>
+                </Dropdown.SubContent>
+              </Dropdown.Sub>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+
+    // Assert — both levels are open, so both sub-triggers must be highlighted
+    const outerTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const innerTrigger = screen.getByRole("menuitem", {
+      name: "From Cloud",
+      hidden: true,
+    });
+    expect(outerTrigger).toHaveAttribute("data-highlighted");
+    expect(innerTrigger).toHaveAttribute("data-highlighted");
+  });
+
+  it("closes an open sub-menu when the pointer moves onto a sibling item in the parent menu", async () => {
+    // Mirrors the keyboard behaviour (ArrowLeft returns focus to the parent
+    // and closes the sub). With the mouse, moving off the sub-trigger and
+    // onto another item in the same parent menu must likewise close the sub
+    // and clear the sub-trigger's data-highlighted, while the newly hovered
+    // item picks up data-highlighted.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>New</Dropdown.Item>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTrigger = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const sibling = screen.getByRole("menuitem", {
+      name: "New",
+      hidden: true,
+    });
+    const [, subMenu] = screen.getAllByRole("menu", { hidden: true });
+
+    // Act — hover sub-trigger to open, then move onto a sibling item
+    await user.hover(subTrigger);
+    expect(subMenu).toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "true");
+    expect(subTrigger).toHaveAttribute("data-highlighted");
+
+    await user.hover(sibling);
+
+    // Assert — sub has closed, its trigger is no longer highlighted, and the
+    // sibling owns data-highlighted.
+    expect(subMenu).not.toHaveAttribute("data-popover-open");
+    expect(subTrigger).toHaveAttribute("aria-expanded", "false");
+    expect(subTrigger).not.toHaveAttribute("data-highlighted");
+    expect(sibling).toHaveAttribute("data-highlighted");
+  });
+
+  it("supplants an open sibling sub when the pointer hovers a second SubTrigger", async () => {
+    // Two sibling subs in the same parent menu. Hovering A opens A, then
+    // hovering B must close A and open B — the new sub's registration
+    // invokes the previously-registered close callback on the way in,
+    // rather than waiting for a separate "leave A" event.
+    const user = userEvent.setup();
+    render(
+      <Dropdown.Root defaultOpen>
+        <Dropdown.Trigger>File</Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Open Recent</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Project A</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+          <Dropdown.Sub>
+            <Dropdown.SubTrigger>Share</Dropdown.SubTrigger>
+            <Dropdown.SubContent>
+              <Dropdown.Item>Email</Dropdown.Item>
+            </Dropdown.SubContent>
+          </Dropdown.Sub>
+        </Dropdown.Content>
+      </Dropdown.Root>,
+    );
+    const subTriggerA = screen.getByRole("menuitem", {
+      name: "Open Recent",
+      hidden: true,
+    });
+    const subTriggerB = screen.getByRole("menuitem", {
+      name: "Share",
+      hidden: true,
+    });
+
+    // Act — open A via hover, then move onto B's trigger
+    await user.hover(subTriggerA);
+    expect(subTriggerA).toHaveAttribute("aria-expanded", "true");
+    await user.hover(subTriggerB);
+
+    // Assert — A has been supplanted by B without any sibling-item
+    // bouncing, proving B's registration ran the previous close callback.
+    expect(subTriggerA).toHaveAttribute("aria-expanded", "false");
+    expect(subTriggerB).toHaveAttribute("aria-expanded", "true");
+  });
+});