@elabs-ai/components-ui 4.0.0

package/src/components/dialog/use-dialog-dismiss-guard.test.tsx

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useDialogDismissGuard } from "./use-dialog-dismiss-guard";
+
+describe("useDialogDismissGuard", () => {
+  it("holds the dialog open and raises the confirmation when dirty", () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() => useDialogDismissGuard({ dirty: true, onClose }));
+
+    act(() => result.current.onOpenChange(false));
+
+    expect(result.current.confirmOpen).toBe(true);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("confirmDiscard() closes both the confirmation and the dialog", () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() => useDialogDismissGuard({ dirty: true, onClose }));
+
+    act(() => result.current.onOpenChange(false));
+    act(() => result.current.confirmDiscard());
+
+    expect(result.current.confirmOpen).toBe(false);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes immediately and never confirms when not dirty", () => {
+    const onClose = vi.fn();
+    const { result } = renderHook(() => useDialogDismissGuard({ dirty: false, onClose }));
+
+    act(() => result.current.onOpenChange(false));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(result.current.confirmOpen).toBe(false);
+  });
+
+  it("never treats opening as a dismissal", () => {
+    const onClose = vi.fn();
+    const onOpen = vi.fn();
+    const { result } = renderHook(() => useDialogDismissGuard({ dirty: true, onClose, onOpen }));
+
+    act(() => result.current.onOpenChange(true));
+
+    expect(onOpen).toHaveBeenCalledTimes(1);
+    expect(onClose).not.toHaveBeenCalled();
+    expect(result.current.confirmOpen).toBe(false);
+  });
+
+  // The AC's asymmetry: a save path that closes the dialog by setting the app's
+  // own `open` to false never reaches the guard, so it cannot prompt. This test
+  // documents that it is structural — there is no "skip the guard" flag to get
+  // wrong — by asserting the hook stays inert across a dirty rerender.
+  it("is unobservable to a programmatic close (the save path)", () => {
+    const onClose = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ dirty }) => useDialogDismissGuard({ dirty, onClose }),
+      { initialProps: { dirty: true } },
+    );
+
+    // The app saved, cleared its dirty flag and closed the dialog itself.
+    rerender({ dirty: false });
+
+    expect(onClose).not.toHaveBeenCalled();
+    expect(result.current.confirmOpen).toBe(false);
+  });
+
+  it("reads the CURRENT dirty value, not the one captured at mount", () => {
+    const onClose = vi.fn();
+    const { result, rerender } = renderHook(
+      ({ dirty }) => useDialogDismissGuard({ dirty, onClose }),
+      { initialProps: { dirty: true } },
+    );
+
+    rerender({ dirty: false });
+    act(() => result.current.onOpenChange(false));
+
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(result.current.confirmOpen).toBe(false);
+  });
+});

package/src/components/dialog/use-dialog-dismiss-guard.ts

@@ -0,0 +1,109 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+export interface UseDialogDismissGuardOptions {
+  /**
+   * Does the dialog currently hold unsaved changes? **App-owned** — brand-ui is
+   * a presentation layer (`docs/DECISIONS.md` §D5) and cannot know what "dirty"
+   * means for your form. Compute it (a `react-hook-form` `isDirty`, a deep
+   * compare, a store flag) and pass it in.
+   */
+  dirty: boolean;
+  /** Close the dialog — the app sets its own `open` state to `false`. */
+  onClose: () => void;
+  /**
+   * Open the dialog. Only needed when a `DialogTrigger` (rather than the app)
+   * opens it, because Radix routes that through the same `onOpenChange`.
+   */
+  onOpen?: () => void;
+}
+
+export interface DialogDismissGuard {
+  /**
+   * Spread onto `<Dialog onOpenChange={…}>`. Intercepts EVERY user dismissal —
+   * Escape, overlay click, the built-in close ✕ and any `DialogClose` — because
+   * Radix funnels all four through `onOpenChange(false)`.
+   */
+  onOpenChange: (open: boolean) => void;
+  /** Controlled `open` for the discard confirmation. */
+  confirmOpen: boolean;
+  /** Controlled `onOpenChange` for the discard confirmation. */
+  onConfirmOpenChange: (open: boolean) => void;
+  /** Confirm the discard: closes the confirmation AND calls `onClose()`. */
+  confirmDiscard: () => void;
+}
+
+/**
+ * Warn before a dialog with unsaved changes is dismissed (#341).
+ *
+ * `.claude/rules/interaction-guidelines.md` (Forms) requires warning before
+ * navigating away from unsaved changes; this is that rule for dialogs, as a HOOK
+ * rather than a prop because the component must not own app state — the app owns
+ * `open` and decides what `dirty` means (D5).
+ *
+ * ## The asymmetry is structural, not a flag
+ *
+ * A **user dismissal** reaches Radix's `onOpenChange`, so the guard sees it and
+ * can hold the dialog open. A **programmatic close** (the app setting its own
+ * `open` to `false` after a successful save) never touches the guard, so it is
+ * unobservable here and closes silently. That is exactly the wanted behaviour,
+ * and it falls out of the wiring — there is no "skip the guard" option to get
+ * wrong.
+ *
+ * The name is literal: it guards DISMISSALS routed through the returned
+ * `onOpenChange`. It is not a navigation blocker and it cannot intercept a tab
+ * close, a router navigation, or an `open` prop that the app flips itself.
+ *
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * const guard = useDialogDismissGuard({
+ *   dirty,
+ *   onClose: () => setOpen(false),
+ *   onOpen: () => setOpen(true),
+ * });
+ *
+ * <Dialog open={open} onOpenChange={guard.onOpenChange}>…</Dialog>
+ * <ConfirmDialog
+ *   open={guard.confirmOpen}
+ *   onOpenChange={guard.onConfirmOpenChange}
+ *   onConfirm={guard.confirmDiscard}
+ *   tone="destructive"
+ *   title="Discard changes?"
+ *   description="Your edits to this project have not been saved."
+ *   confirmLabel="Discard"
+ * />
+ * ```
+ *
+ * The `ConfirmDialog` is a SIBLING of the guarded dialog, not a child of it.
+ */
+export function useDialogDismissGuard({
+  dirty,
+  onClose,
+  onOpen,
+}: UseDialogDismissGuardOptions): DialogDismissGuard {
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      // Opening is never guarded; a `DialogTrigger` routes through here too.
+      if (open) {
+        onOpen?.();
+        return;
+      }
+      if (dirty) {
+        setConfirmOpen(true);
+        return;
+      }
+      onClose();
+    },
+    [dirty, onClose, onOpen],
+  );
+
+  const confirmDiscard = useCallback(() => {
+    setConfirmOpen(false);
+    onClose();
+  }, [onClose]);
+
+  return { onOpenChange, confirmOpen, onConfirmOpenChange: setConfirmOpen, confirmDiscard };
+}

package/src/components/drawer/drawer.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Button } from "../button";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+const meta = {
+  title: "Overlays/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      description: "Controlled open state of the drawer.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    defaultOpen: {
+      description: "Uncontrolled initial open state.",
+      control: "boolean",
+      table: { category: "State" },
+    },
+    onOpenChange: {
+      description: "Callback when the open state changes.",
+      control: false,
+      table: { category: "Events" },
+    },
+    shouldScaleBackground: {
+      description: "Scale the background element behind the drawer when open. Default true.",
+      control: "boolean",
+      table: { category: "Behaviour" },
+    },
+    modal: {
+      description: "Whether the drawer is modal (disables interaction outside). Default true.",
+      control: "boolean",
+      table: { category: "Behaviour" },
+    },
+    direction: {
+      description: "Which edge the drawer slides in from.",
+      control: { type: "select" },
+      options: ["bottom", "top", "left", "right"],
+      table: { category: "Behaviour" },
+    },
+  },
+} satisfies Meta<typeof Drawer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Confirm</DrawerTitle>
+          <DrawerDescription>Swipe down to dismiss.</DrawerDescription>
+        </DrawerHeader>
+      </DrawerContent>
+    </Drawer>
+  ),
+  // Opens the drawer (portalled to body), confirms the title and description
+  // are visible, then presses Escape to dismiss it.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /open drawer/i }));
+    const body = within(canvasElement.ownerDocument.body);
+    const drawer = await body.findByRole("dialog");
+    await waitFor(() => expect(within(drawer).getByText("Confirm")).toBeVisible());
+    await waitFor(() => expect(within(drawer).getByText("Swipe down to dismiss.")).toBeVisible());
+    await userEvent.keyboard("{Escape}");
+  },
+};

package/src/components/drawer/drawer.tsx

@@ -0,0 +1,85 @@
+import {
+  forwardRef,
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+} from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../../lib/cn";
+
+export function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
+}
+export const DrawerTrigger = DrawerPrimitive.Trigger;
+export const DrawerPortal = DrawerPrimitive.Portal;
+export const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(function DrawerOverlay({ className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Overlay
+      ref={ref}
+      className={cn("fixed inset-0 z-50 bg-foreground/50", className)}
+      {...props}
+    />
+  );
+});
+
+export const DrawerContent = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(function DrawerContent({ className, children, ...props }, ref) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground",
+          className,
+        )}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+});
+
+export function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)} {...props} />;
+}
+export function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />;
+}
+export const DrawerTitle = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(function DrawerTitle({ className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Title
+      ref={ref}
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+});
+export const DrawerDescription = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(function DrawerDescription({ className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Description
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});

package/src/components/drawer/index.ts

@@ -0,0 +1,11 @@
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from "./drawer";

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

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { useState } from "react";
+import { ThemeProvider } from "@elabs-ai/components-tokens";
+import { Button } from "../button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const meta = {
+  title: "Overlays/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Account</DropdownMenuLabel>
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Sign out</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+  // Opening the menu sets the trigger aria-expanded and mounts the menu items
+  // into the Radix portal (on document.body, outside the canvas).
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /open menu/i });
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    const body = within(canvasElement.ownerDocument.body);
+    const profile = await body.findByRole("menuitem", { name: "Profile" });
+    // waitFor rides out the entrance animation (opacity starts at 0).
+    await waitFor(() => expect(profile).toBeVisible());
+  },
+};
+
+/**
+ * The submenu / radio-group / checkbox-item parts (`DropdownMenuSub` +
+ * `DropdownMenuSubTrigger` + `DropdownMenuSubContent`, `DropdownMenuRadioGroup` +
+ * `DropdownMenuRadioItem`, `DropdownMenuCheckboxItem`) — the same building blocks
+ * `ContextMenu` already ships, mirrored here so `DropdownMenu` has them too (the
+ * iteration node-menu's "Change layout" submenu renders into either surface from
+ * one shared item list).
+ */
+export const SubmenuRadioAndCheckbox: Story = {
+  name: "Submenu, radio group and checkbox item",
+  render: function SubmenuStory() {
+    const [bold, setBold] = useState(false);
+    const [align, setAlign] = useState("left");
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline">Format</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuCheckboxItem checked={bold} onCheckedChange={setBold}>
+            Bold
+          </DropdownMenuCheckboxItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Align</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuRadioGroup value={align} onValueChange={setAlign}>
+                <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="center">Center</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+  // Opens the menu, toggles the checkbox item, reopens (selecting an item
+  // closes the menu by default), then hovers into the submenu (Radix's pointer
+  // path — the same precedent as the iteration node-menu's "Change layout"
+  // story) and picks a radio option.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /format/i });
+    const body = within(canvasElement.ownerDocument.body);
+
+    await userEvent.click(trigger);
+    const boldItem = await body.findByRole("menuitemcheckbox", { name: "Bold" });
+    await waitFor(() => expect(boldItem).toBeVisible());
+    await userEvent.click(boldItem);
+    // Selecting a checkbox item closes the menu (Radix default).
+    await waitFor(() => expect(body.queryByRole("menu")).toBeNull());
+
+    await userEvent.click(trigger);
+    const boldItem2 = await body.findByRole("menuitemcheckbox", { name: "Bold" });
+    await waitFor(() => expect(boldItem2).toHaveAttribute("aria-checked", "true"));
+
+    await userEvent.hover(body.getByText("Align"));
+    const centerOption = await body.findByRole(
+      "menuitemradio",
+      { name: "Center" },
+      { timeout: 8000 },
+    );
+    await waitFor(() => expect(centerOption).toBeVisible());
+    await userEvent.click(centerOption);
+    await waitFor(() => expect(body.queryByRole("menu")).toBeNull());
+
+    // Reopen once more to confirm the radio selection persisted.
+    await userEvent.click(trigger);
+    await userEvent.hover(body.getByText("Align"));
+    const centerOption2 = await body.findByRole(
+      "menuitemradio",
+      { name: "Center" },
+      { timeout: 8000 },
+    );
+    await waitFor(() => expect(centerOption2).toHaveAttribute("aria-checked", "true"));
+
+    // Escape dismisses the whole menu — a real behavioural assertion AND the
+    // reason this story is green (#386). A Radix MODAL menu marks the rest of
+    // the document `aria-hidden` while it is open; leaving it open meant axe
+    // saw focusable content inside an `aria-hidden` subtree
+    // (`aria-hidden-focus`), and the marker survived into the next story in
+    // this file, breaking its `queryByRole` lookups. Every menu story must
+    // hand the document back unmarked.
+    await userEvent.keyboard("{Escape}"); // submenu
+    await userEvent.keyboard("{Escape}"); // root menu
+    await waitFor(() => expect(body.queryByRole("menu")).toBeNull());
+    await waitFor(() =>
+      expect(canvasElement.ownerDocument.querySelector('[data-aria-hidden="true"]')).toBeNull(),
+    );
+  },
+};
+
+/**
+ * Three-theme sweep (a durable, `test-storybook`-run artifact rather than a
+ * one-off manual `preview.tsx` toggle). `<ThemeProvider>` (not a plain
+ * `data-theme` wrapper `<div>`) because it writes the attribute onto the
+ * DOCUMENT ROOT — this menu's Radix `Portal` mounts its content on
+ * `document.body`, outside any local wrapper, so only a document-level
+ * attribute actually themes it. `storageKey={null}` keeps the override from
+ * persisting to localStorage across runs.
+ */
+export const SubmenuRadioAndCheckboxDark: Story = {
+  name: "Submenu, radio group and checkbox item — dark",
+  decorators: [
+    (Story) => (
+      <ThemeProvider defaultTheme="dark" storageKey={null}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+  render: SubmenuRadioAndCheckbox.render,
+  play: SubmenuRadioAndCheckbox.play,
+};
+
+export const SubmenuRadioAndCheckboxHighDecoration: Story = {
+  name: "Submenu, radio group and checkbox item — high decoration",
+  globals: { decoration: "10" },
+  render: SubmenuRadioAndCheckbox.render,
+  play: SubmenuRadioAndCheckbox.play,
+};

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

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+describe("DropdownMenu", () => {
+  it("opens content on trigger click and fires onSelect", async () => {
+    const onSelect = vi.fn();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem onSelect={onSelect}>Profile</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await userEvent.click(screen.getByText("Open"));
+    const item = await screen.findByText("Profile");
+    await userEvent.click(item);
+    expect(onSelect).toHaveBeenCalled();
+  });
+
+  it("toggles a checkbox item's checked state (DropdownMenuCheckboxItem)", async () => {
+    function Harness() {
+      const [checked, setChecked] = useState(false);
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
+              Bold
+            </DropdownMenuCheckboxItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+    render(<Harness />);
+
+    await userEvent.click(screen.getByText("Open"));
+    const item = await screen.findByRole("menuitemcheckbox", { name: "Bold" });
+    expect(item).toHaveAttribute("aria-checked", "false");
+
+    await userEvent.click(item);
+    // Selecting an item closes the menu (Radix default) — reopen to observe state.
+    await userEvent.click(screen.getByText("Open"));
+    const reopened = await screen.findByRole("menuitemcheckbox", { name: "Bold" });
+    expect(reopened).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("a radio group (DropdownMenuRadioGroup + DropdownMenuRadioItem) selects one option", async () => {
+    function Harness() {
+      const [value, setValue] = useState("left");
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
+              <DropdownMenuRadioItem value="left">Left</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="center">Center</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+    render(<Harness />);
+
+    await userEvent.click(screen.getByText("Open"));
+    const centerOption = await screen.findByRole("menuitemradio", { name: "Center" });
+    expect(centerOption).toHaveAttribute("aria-checked", "false");
+    await userEvent.click(centerOption);
+
+    await userEvent.click(screen.getByText("Open"));
+    const reopened = await screen.findByRole("menuitemradio", { name: "Center" });
+    expect(reopened).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("a submenu (DropdownMenuSub + DropdownMenuSubTrigger + DropdownMenuSubContent) opens on hover", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Nested action</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    await userEvent.click(screen.getByText("Open"));
+    const subTrigger = await screen.findByText("More");
+    await userEvent.hover(subTrigger);
+    expect(await screen.findByText("Nested action")).toBeInTheDocument();
+  });
+});