@elabs-ai/components-ui 4.0.0

package/src/components/select/index.ts

@@ -0,0 +1,10 @@
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "./select";

package/src/components/select/select.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+const meta = { title: "Forms/Select", component: Select, tags: ["autodocs"] } satisfies Meta<
+  typeof Select
+>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Select defaultValue="prod">
+      <SelectTrigger className="w-56">
+        <SelectValue placeholder="Environment" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="prod">Production</SelectItem>
+        <SelectItem value="staging">Staging</SelectItem>
+        <SelectItem value="dev">Dev</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  // Opens the listbox (Radix portal), picks a different option, and confirms the
+  // trigger now reflects the new selection.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByRole("combobox");
+    await expect(trigger).toHaveTextContent("Production");
+    await userEvent.click(trigger);
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("option", { name: "Staging" }));
+    await expect(trigger).toHaveTextContent("Staging");
+    // A value that FITS gains no native `title` (#332): an unconditional one
+    // would silently become this combobox's accessible name — a field named
+    // after its own value is not a named field.
+    await expect(trigger).not.toHaveAttribute("title");
+  },
+};
+
+const LONG_LABEL = "prod-eu-west-1 · 2026-08-01 · 12 tools";
+
+/**
+ * A long, composed value clipped by `line-clamp-1`, recovered on mouse hover
+ * by the automatic native `title` — the zero-extra-code path. The trigger
+ * measures its own content, so the `title` appears here and NOT on a short
+ * value (see `Default`, which has none).
+ *
+ * `aria-label` is on the trigger because the value is not a name: the `title`
+ * is a hover affordance, never the field's label.
+ */
+export const ClippedValueGetsTitle: Story = {
+  render: () => (
+    <Select defaultValue={LONG_LABEL}>
+      <SelectTrigger className="w-56" aria-label="Environment">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value={LONG_LABEL}>{LONG_LABEL}</SelectItem>
+        <SelectItem value="dev">Dev</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole("combobox");
+    await waitFor(() => expect(trigger).toHaveAttribute("title", LONG_LABEL));
+  },
+};
+
+/**
+ * The keyboard-reachable recovery: a `Tooltip` composition, which Radix opens
+ * on focus as well as hover. `autoTitle={false}` is REQUIRED here — otherwise
+ * the native `title` and the Radix tooltip both appear on hover, one on top of
+ * the other.
+ */
+export const LongComposedLabel: Story = {
+  render: () => (
+    <TooltipProvider delayDuration={0}>
+      <Select defaultValue={LONG_LABEL}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <SelectTrigger className="w-56" aria-label="Environment" autoTitle={false}>
+              <SelectValue />
+            </SelectTrigger>
+          </TooltipTrigger>
+          <TooltipContent>{LONG_LABEL}</TooltipContent>
+        </Tooltip>
+        <SelectContent>
+          <SelectItem value={LONG_LABEL}>{LONG_LABEL}</SelectItem>
+          <SelectItem value="staging">Staging</SelectItem>
+        </SelectContent>
+      </Select>
+    </TooltipProvider>
+  ),
+  // Focus the trigger directly (the keyboard path, not a click) and confirm the
+  // tooltip content becomes visible — and that no competing native `title` was
+  // left behind.
+  play: async ({ canvas, canvasElement }) => {
+    const trigger = canvas.getByRole("combobox");
+    await expect(trigger).not.toHaveAttribute("title");
+
+    trigger.focus();
+    await expect(trigger).toHaveFocus();
+    const body = within(canvasElement.ownerDocument.body);
+    const content = await body.findByText(LONG_LABEL, { selector: "[data-side]" });
+    await waitFor(() => expect(content).toBeVisible());
+  },
+};

package/src/components/select/select.test.tsx

@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { Select, SelectTrigger, SelectValue } from "./select";
+
+const LONG_LABEL = "prod-eu-west-1 · 2026-08-01 · 12 tools";
+
+/**
+ * jsdom has no layout: every element reports `scrollWidth`/`clientWidth` 0, so
+ * nothing is ever "clipped" there. Fake the one measurement the component
+ * makes so the clipped branch is exercisable in a unit test; the real-layout
+ * behaviour is covered by the `ClippedValueGetsTitle` Storybook story.
+ */
+function fakeClippedLayout() {
+  Object.defineProperty(HTMLElement.prototype, "scrollWidth", {
+    configurable: true,
+    get: () => 400,
+  });
+  Object.defineProperty(HTMLElement.prototype, "clientWidth", {
+    configurable: true,
+    get: () => 100,
+  });
+}
+
+afterEach(() => {
+  // Restore jsdom's own getters (they live on the Element.prototype below).
+  Reflect.deleteProperty(HTMLElement.prototype, "scrollWidth");
+  Reflect.deleteProperty(HTMLElement.prototype, "clientWidth");
+});
+
+describe("SelectTrigger", () => {
+  it("sets no title while the rendered text fits (an unconditional title names the field after its own value)", async () => {
+    render(
+      <Select>
+        <SelectTrigger aria-label="Environment">
+          <SelectValue placeholder={LONG_LABEL} />
+        </SelectTrigger>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox");
+    // Let the mount effect and its observers run before asserting the absence.
+    await waitFor(() => expect(trigger).toHaveAttribute("data-size", "default"));
+    expect(trigger).not.toHaveAttribute("title");
+  });
+
+  it("auto-sets title from the rendered text once that text is clipped", async () => {
+    fakeClippedLayout();
+    render(
+      <Select>
+        <SelectTrigger aria-label="Environment">
+          <SelectValue placeholder={LONG_LABEL} />
+        </SelectTrigger>
+      </Select>,
+    );
+    await waitFor(() => expect(screen.getByRole("combobox")).toHaveAttribute("title", LONG_LABEL));
+  });
+
+  it("separates composed trigger content instead of concatenating it", async () => {
+    fakeClippedLayout();
+    render(
+      <Select>
+        <SelectTrigger aria-label="Environment">
+          <span>Env:</span>
+          <SelectValue placeholder="Staging" />
+        </SelectTrigger>
+      </Select>,
+    );
+    await waitFor(() =>
+      expect(screen.getByRole("combobox")).toHaveAttribute("title", "Env: Staging"),
+    );
+  });
+
+  it("never overrides a caller-supplied title", async () => {
+    fakeClippedLayout();
+    render(
+      <Select>
+        <SelectTrigger title="Custom title" aria-label="Environment">
+          <SelectValue placeholder="Environment" />
+        </SelectTrigger>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox");
+    await waitFor(() => expect(trigger).toHaveAttribute("title", "Custom title"));
+  });
+
+  it("sets no title when autoTitle is disabled, even while clipped", async () => {
+    fakeClippedLayout();
+    render(
+      <Select>
+        <SelectTrigger autoTitle={false} aria-label="Environment">
+          <SelectValue placeholder={LONG_LABEL} />
+        </SelectTrigger>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox");
+    await waitFor(() => expect(trigger).toHaveAttribute("data-size", "default"));
+    expect(trigger).not.toHaveAttribute("title");
+  });
+});

package/src/components/select/select.tsx

@@ -0,0 +1,230 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+} from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { mergeRefs } from "../../lib/merge-refs";
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+/** Sub-pixel layout rounding — an element is only "clipped" beyond this. */
+const CLIP_SLACK_PX = 1;
+
+function isClipped(el: Element) {
+  return (
+    el.scrollWidth > el.clientWidth + CLIP_SLACK_PX ||
+    el.scrollHeight > el.clientHeight + CLIP_SLACK_PX
+  );
+}
+
+/**
+ * The trigger's visible text, ONE SEGMENT PER CHILD NODE joined by a space, so
+ * a prefix/badge beside `SelectValue` reads `"Env: Staging"` — a bare
+ * `textContent` read concatenates the DOM's text nodes with no separator and
+ * produces `"Env:Staging"`.
+ */
+function composeTriggerText(node: HTMLElement) {
+  return Array.from(node.childNodes)
+    .map((child) => child.textContent?.replace(/\s+/gu, " ").trim() ?? "")
+    .filter(Boolean)
+    .join(" ");
+}
+
+export type SelectTriggerProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+  /**
+   * Auto-set a native `title` from the trigger's rendered text — but ONLY
+   * while that text is actually clipped (default `true`).
+   *
+   * Set `false` when the trigger is a `TooltipTrigger`: the native tooltip and
+   * the Radix one would otherwise both appear on hover. A caller-supplied
+   * `title` also disables it (an explicit `title` is never overridden).
+   */
+  autoTitle?: boolean;
+};
+
+/**
+ * `[&>span]:line-clamp-1` clips the rendered `SelectValue` — necessary so a
+ * long/composed label doesn't blow out the trigger's width. To keep clipped
+ * text recoverable, the trigger MEASURES its content and sets a native `title`
+ * only while something is genuinely cut off, so it's readable on mouse hover
+ * with zero extra code.
+ *
+ * The measurement is not cosmetic: an unconditional `title` becomes the
+ * button's accessible name, which would paper over a real "this combobox has
+ * no name" a11y failure with the field's own VALUE — a value is not a name.
+ * Label the trigger properly (`aria-label`/`aria-labelledby`) regardless.
+ *
+ * `title` also never reaches keyboard users — for that, wrap the trigger in
+ * `Tooltip`/`TooltipTrigger asChild`/`TooltipContent` and pass
+ * `autoTitle={false}` (see the `LongComposedLabel` story), which Radix opens
+ * on keyboard focus too.
+ */
+export const SelectTrigger = forwardRef<
+  ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(function SelectTrigger(
+  { className, children, size = "default", title, autoTitle = true, ...props },
+  ref,
+) {
+  const innerRef = useRef<HTMLButtonElement>(null);
+  const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
+
+  useEffect(() => {
+    if (!autoTitle) return;
+    if (title !== undefined) return; // caller owns `title` — never override it
+    const node = innerRef.current;
+    if (!node) return;
+
+    const sync = () => {
+      // The clamp lives on the child spans, but a long unbroken value can also
+      // overflow the trigger box itself — check both.
+      const clipped = isClipped(node) || Array.from(node.children).some(isClipped);
+      const text = clipped ? composeTriggerText(node) : "";
+      if (text) node.title = text;
+      else node.removeAttribute("title");
+    };
+    sync();
+
+    // The selected item's text isn't a React child of this component — Radix
+    // portals it into the (child) `SelectValue` node from `SelectContent`
+    // asynchronously, on its OWN commit, so a one-shot read here can run
+    // before that text lands. Observe the subtree instead of trusting this
+    // component's own render cycle. (Attributes are deliberately NOT observed:
+    // `sync` writes `title`, which would otherwise re-enter.)
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { childList: true, subtree: true, characterData: true });
+
+    // Clipping is a function of WIDTH, so it has to be re-measured when the
+    // trigger resizes, not only when its text changes.
+    const resizeObserver =
+      typeof ResizeObserver === "function" ? new ResizeObserver(sync) : undefined;
+    resizeObserver?.observe(node);
+
+    return () => {
+      observer.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [autoTitle, title]);
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={mergedRef}
+      data-size={size}
+      title={title}
+      className={cn(
+        "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm",
+        size === "sm" ? "h-8" : "h-9",
+        "placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background",
+        // No `disabled:cursor-*` override — disabled controls keep the arrow
+        // automatically (interaction-guidelines.md), matching Combobox's
+        // Button-based trigger (`disabled:pointer-events-none`) (#343).
+        "disabled:opacity-50 disabled:border-border [&>span]:line-clamp-1",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+});
+
+export const SelectContent = forwardRef<
+  ElementRef<typeof SelectPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent({ className, children, position = "popper", ...props }, ref) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        position={position}
+        className={cn(
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md bg-popover text-popover-foreground shadow-ring-md",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        {...props}
+      >
+        <SelectPrimitive.ScrollUpButton className="flex cursor-default items-center justify-center py-1">
+          <ChevronUp className="size-4" />
+        </SelectPrimitive.ScrollUpButton>
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectPrimitive.ScrollDownButton className="flex cursor-default items-center justify-center py-1">
+          <ChevronDown className="size-4" />
+        </SelectPrimitive.ScrollDownButton>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+
+export const SelectLabel = forwardRef<
+  ElementRef<typeof SelectPrimitive.Label>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={cn("px-2 py-1.5 text-xs font-semibold text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+
+export const SelectItem = forwardRef<
+  ElementRef<typeof SelectPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(function SelectItem({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-2 pe-8 text-sm outline-none transition-colors duration-fast",
+        "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute end-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Check className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+});
+
+export const SelectSeparator = forwardRef<
+  ElementRef<typeof SelectPrimitive.Separator>,
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(function SelectSeparator({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+});

package/src/components/separator/index.ts

@@ -0,0 +1,2 @@
+export { Separator } from "./separator";
+export type { SeparatorProps } from "./separator";

package/src/components/separator/separator.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "./separator";
+const meta = {
+  title: "Display/Separator",
+  component: Separator,
+  tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      description: "Direction of the line.",
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      table: { category: "Appearance" },
+    },
+    tone: {
+      description:
+        "`subtle` uses `--border` (decorative/redundant); `strong` uses `--border-strong` (≥3:1, sole structural cue).",
+      control: { type: "radio" },
+      options: ["subtle", "strong"],
+      table: { category: "Appearance" },
+    },
+    decorative: {
+      description: "When true the separator is hidden from the accessibility tree (role=none).",
+      control: "boolean",
+      table: { category: "Behavior" },
+    },
+    className: {
+      description: "Extra Tailwind classes merged via cn().",
+      control: "text",
+      table: { category: "Appearance" },
+    },
+  },
+} satisfies Meta<typeof Separator>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default (subtle) — uses `--border`. The boundary is a decorative/redundant
+ * cue (surrounding fill, elevation, or spacing already signals the edge).
+ * WCAG 1.4.11 redundant-boundary exemption applies.
+ */
+export const Default: Story = {
+  render: () => (
+    <div className="w-64 text-body">
+      <p>Above</p>
+      <Separator className="my-3" />
+      <p>Below</p>
+    </div>
+  ),
+};
+
+/**
+ * Strong — uses `--border-strong` (≥3:1 vs `--card`/`--background`). Use when
+ * the separator is the ONLY structural cue between two same-surface regions.
+ * Decision test: "If I deleted this line, could a sighted user still tell the
+ * two regions apart?" No → `tone="strong"`.
+ */
+export const Strong: Story = {
+  render: () => (
+    <div className="w-64 rounded-lg bg-card p-4 text-body">
+      <p className="font-medium">Section A</p>
+      <Separator tone="strong" className="my-3" />
+      <p className="font-medium">Section B</p>
+    </div>
+  ),
+};
+
+/** Vertical orientation, default (subtle) tone. */
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-8 items-center gap-4 text-body">
+      <span>Left</span>
+      <Separator orientation="vertical" />
+      <span>Right</span>
+    </div>
+  ),
+};
+
+/** Vertical orientation, strong tone — the only structural cue between columns. */
+export const VerticalStrong: Story = {
+  render: () => (
+    <div className="flex h-8 items-center gap-4 text-body">
+      <span>Left</span>
+      <Separator orientation="vertical" tone="strong" />
+      <span>Right</span>
+    </div>
+  ),
+};

package/src/components/separator/separator.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/cn";
+
+const separatorVariants = cva("shrink-0", {
+  variants: {
+    /**
+     * `subtle` (default) — uses `--border` (a decorative/redundant boundary;
+     * compliant because the edge is also signalled by surrounding fill, elevation
+     * or spacing — WCAG 1.4.11 redundant-boundary exemption).
+     *
+     * `strong` — uses `--border-strong` (≥3:1 vs `--card`/`--background`).
+     * Use when the separator is the ONLY structural cue between two same-surface
+     * regions (no fill, elevation or spacing change to fall back on).
+     * Decision test: "If I deleted this line, could a sighted user still tell
+     * the two regions apart?" No → `strong`.
+     */
+    tone: {
+      subtle: "bg-border",
+      strong: "bg-border-strong",
+    },
+  },
+  defaultVariants: {
+    tone: "subtle",
+  },
+});
+
+export type SeparatorProps = ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> &
+  VariantProps<typeof separatorVariants>;
+
+export const Separator = forwardRef<ElementRef<typeof SeparatorPrimitive.Root>, SeparatorProps>(
+  function Separator(
+    { className, orientation = "horizontal", decorative = true, tone, ...props },
+    ref,
+  ) {
+    return (
+      <SeparatorPrimitive.Root
+        ref={ref}
+        decorative={decorative}
+        orientation={orientation}
+        className={cn(
+          separatorVariants({ tone }),
+          orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/sheet/index.ts

@@ -0,0 +1,12 @@
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  type SheetContentProps,
+} from "./sheet";

package/src/components/sheet/sheet.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Button } from "../button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+const meta = {
+  title: "Overlays/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      description: "Controlled open state of the sheet.",
+      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" },
+    },
+    modal: {
+      description: "Whether the sheet is modal (disables outside interaction). Default true.",
+      control: "boolean",
+      table: { category: "Behaviour" },
+    },
+  },
+} satisfies Meta<typeof Sheet>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Settings</SheetTitle>
+          <SheetDescription>Manage your workspace.</SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  ),
+  // Opens the sheet (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 sheet/i }));
+    const body = within(canvasElement.ownerDocument.body);
+    const sheet = await body.findByRole("dialog");
+    await waitFor(() => expect(within(sheet).getByText("Settings")).toBeVisible());
+    await waitFor(() => expect(within(sheet).getByText("Manage your workspace.")).toBeVisible());
+    await userEvent.keyboard("{Escape}");
+  },
+};