@robomous/ui-core 0.1.1 → 0.2.0

package/src/{primitives → components}/combobox.test.tsx

@@ -1,7 +1,14 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { describe, expect, it } from "vitest";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "./combobox";
 
 const FRUIT = ["apple", "banana", "cherry"];
 
@@ -11,7 +18,13 @@ function Demo() {
       <ComboboxInput placeholder="Pick" aria-label="Fruit" />
       <ComboboxContent>
         <ComboboxEmpty>No matches</ComboboxEmpty>
-        <ComboboxList>{(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
+        <ComboboxList>
+          {(item: string) => (
+            <ComboboxItem key={item} value={item}>
+              {item}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
       </ComboboxContent>
     </Combobox>
   );

package/src/{primitives → components}/combobox.tsx

@@ -1,29 +1,20 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Combobox as ComboboxPrimitive } from "@base-ui/react"
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 
-import { cn } from "../lib/cn.js"
-import { Button } from "./button.js"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "./input-group.js"
-import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+import { cn } from "cn";
+import { Button } from "./button.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react";
 
-const Combobox = ComboboxPrimitive.Root
+const Combobox = ComboboxPrimitive.Root;
 
 function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
-  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
 }
 
-function ComboboxTrigger({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Trigger.Props) {
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
@@ -33,7 +24,7 @@ function ComboboxTrigger({
       {children}
       <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
-  )
+  );
 }
 
 function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
@@ -46,7 +37,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
     >
       <XIcon className="pointer-events-none" />
     </ComboboxPrimitive.Clear>
-  )
+  );
 }
 
 function ComboboxInput({
@@ -57,15 +48,12 @@ function ComboboxInput({
   showClear = false,
   ...props
 }: ComboboxPrimitive.Input.Props & {
-  showTrigger?: boolean
-  showClear?: boolean
+  showTrigger?: boolean;
+  showClear?: boolean;
 }) {
   return (
     <InputGroup className={cn("w-auto", className)}>
-      <ComboboxPrimitive.Input
-        render={<InputGroupInput disabled={disabled} />}
-        {...props}
-      />
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
           <InputGroupButton
@@ -83,7 +71,7 @@ function ComboboxInput({
       </InputGroupAddon>
       {children}
     </InputGroup>
-  )
+  );
 }
 
 function ComboboxContent({
@@ -112,12 +100,15 @@ function ComboboxContent({
         <ComboboxPrimitive.Popup
           data-slot="combobox-content"
           data-chips={!!anchor}
-          className={cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn(
+            "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
           {...props}
         />
       </ComboboxPrimitive.Positioner>
     </ComboboxPrimitive.Portal>
-  )
+  );
 }
 
 function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
@@ -126,24 +117,20 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
       data-slot="combobox-list"
       className={cn(
         "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ComboboxItem({
-  className,
-  children,
-  ...props
-}: ComboboxPrimitive.Item.Props) {
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
   return (
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
@@ -156,36 +143,27 @@ function ComboboxItem({
         <CheckIcon className="pointer-events-none" />
       </ComboboxPrimitive.ItemIndicator>
     </ComboboxPrimitive.Item>
-  )
+  );
 }
 
 function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
   return (
-    <ComboboxPrimitive.Group
-      data-slot="combobox-group"
-      className={cn(className)}
-      {...props}
-    />
-  )
+    <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
+  );
 }
 
-function ComboboxLabel({
-  className,
-  ...props
-}: ComboboxPrimitive.GroupLabel.Props) {
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
       className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
-  return (
-    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
-  )
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
 }
 
 function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
@@ -194,41 +172,37 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
       data-slot="combobox-empty"
       className={cn(
         "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ComboboxSeparator({
-  className,
-  ...props
-}: ComboboxPrimitive.Separator.Props) {
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
       className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChips({
   className,
   ...props
-}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
-  ComboboxPrimitive.Chips.Props) {
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
   return (
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
         "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ComboboxChip({
@@ -237,14 +211,14 @@ function ComboboxChip({
   showRemove = true,
   ...props
 }: ComboboxPrimitive.Chip.Props & {
-  showRemove?: boolean
+  showRemove?: boolean;
 }) {
   return (
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
         "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
-        className
+        className,
       )}
       {...props}
     >
@@ -259,24 +233,21 @@ function ComboboxChip({
         </ComboboxPrimitive.ChipRemove>
       )}
     </ComboboxPrimitive.Chip>
-  )
+  );
 }
 
-function ComboboxChipsInput({
-  className,
-  ...props
-}: ComboboxPrimitive.Input.Props) {
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
   return (
     <ComboboxPrimitive.Input
       data-slot="combobox-chip-input"
       className={cn("min-w-16 flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
 function useComboboxAnchor() {
-  return React.useRef<HTMLDivElement | null>(null)
+  return React.useRef<HTMLDivElement | null>(null);
 }
 
 export {
@@ -296,4 +267,4 @@ export {
   ComboboxTrigger,
   ComboboxValue,
   useComboboxAnchor,
-}
+};

package/src/{primitives/primitives.test.tsx → components/components.test.tsx}

@@ -1,20 +1,16 @@
 /**
- * The component harness, proved on the primitives that carry a decision.
+ * The component harness, proved on the components that carry a decision.
  *
- * Not a snapshot of every class string — that would pin the design system to
- * whatever it happened to be on the day. What is asserted here is the handful of behaviours a screen
- * would silently lose: the merge that makes `className` a real override — and the
- * two geometry overrides that ride on it, `inlineLink` and `menuSurface`, whose
- * whole job is to beat a canonical utility — the `asChild` that keeps a link a
- * link, and the role an error is announced with.
+ * Deliberately not an echo of every class string: pinning the design system to
+ * whatever it looked like on the day is the mistake this repository just spent
+ * a restructure undoing, and a restyle is coming. What is asserted here is the
+ * handful of behaviours a screen would silently lose — the merge that makes
+ * `className` a real override, the `asChild` that keeps a link a link, the role
+ * an error is announced with, and the value a `Progress` reports without being
+ * asked.
  *
- * The button no longer defaults `type`, so nothing here stops a "Cancel"
- * submitting a form; that is a call-site property now, and
- * `tests/scripts/form_buttons.test.mjs` is what holds it.
- *
- * This file is also the reason the jsdom harness exists at all: standing the
- * environment up once here is cheaper than the first screen that needs it doing so
- * under deadline.
+ * The button does not default `type`, so nothing here stops a "Cancel"
+ * submitting a form; that is a call-site property, gated in the consumer.
  */
 
 import { render, screen } from "@testing-library/react";
@@ -22,10 +18,6 @@ import userEvent from "@testing-library/user-event";
 import type { JSX } from "react";
 import { describe, expect, it } from "vitest";
 
-import { inlineLink } from "../lib/button";
-import { menuSurface } from "../lib/menu";
-import { progressAria } from "../lib/progress";
-import { twoLineTrigger } from "../lib/select";
 import { Alert, AlertDescription, AlertTitle } from "./alert";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -41,13 +33,7 @@ import { Progress } from "./progress";
 import { FieldError } from "./field";
 import { Input } from "./input";
 import { Label } from "./label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet";
 import { Table, TableBody, TableHead, TableHeader, TableRow } from "./table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
@@ -59,14 +45,14 @@ describe("Button", () => {
   });
 
   it("lets a caller override a conflicting utility rather than emitting both", () => {
-    // Without `tailwind-merge` both `px-4` and `px-6` survive and which one wins is
+    // Without `tailwind-merge` both `px-2.5` and `px-6` survive and which one wins is
     // decided by the order Tailwind wrote them into the stylesheet — a rule nobody
     // can see from the call site. This is what makes `className` an extension
     // point rather than a suggestion.
     render(<Button className="px-6">Wide</Button>);
     const className = screen.getByRole("button", { name: "Wide" }).className;
     expect(className).toContain("px-6");
-    expect(className).not.toContain("px-4");
+    expect(className).not.toContain("px-2.5");
   });
 
   it("renders the child element with asChild, so a link stays a link", () => {
@@ -95,21 +81,31 @@ describe("Button", () => {
     expect(classes).not.toMatch(/(^|\s)underline(\s|$)/);
   });
 
-  it("hands back the height and padding a link button in prose cannot keep", () => {
+  it("lets a caller's className outrank the inline size", () => {
     render(
-      <Button variant="link" className={inlineLink}>
+      <Button variant="link" size="inline" className="h-8">
         More
       </Button>,
     );
 
-    // `Button` merges `className` over `buttonVariants` with tailwind-merge, so
-    // this is the merge itself: canonical's `h-8 px-2.5` is gone from the
-    // rendered attribute rather than merely outranked by a later rule.
+    // `h-auto` and `h-8` are the same utility group, so tailwind-merge has to
+    // drop the one the variant supplied. Without the merge both survive and
+    // which wins is decided by stylesheet order — a rule the call site cannot see.
     const classes = screen.getByRole("button").className.split(" ");
-    expect(classes).toContain("h-auto");
-    expect(classes).toContain("p-0");
-    expect(classes).not.toContain("h-8");
-    expect(classes).not.toContain("px-2.5");
+    expect(classes).toContain("h-8");
+    expect(classes).not.toContain("h-auto");
+  });
+
+  it("has an inline size that keeps a link button inside a sentence", () => {
+    render(
+      <Button variant="link" size="inline">
+        Read the docs
+      </Button>,
+    );
+    const button = screen.getByRole("button", { name: "Read the docs" });
+    expect(button.getAttribute("data-size")).toBe("inline");
+    expect(button.className).toContain("h-auto");
+    expect(button.className).toContain("p-0");
   });
 });
 
@@ -132,13 +128,16 @@ describe("Alert and Badge", () => {
     expect(screen.getByText("done").getAttribute("data-slot")).toBe("badge");
   });
 
-  it.each(["success", "warning", "info", "quiet"] as const)("%s is a Badge variant keyed on data", (variant) => {
-    render(<Badge variant={variant}>x</Badge>);
-    const el = screen.getByText("x");
-    expect(el.getAttribute("data-variant")).toBe(variant);
-    expect(el.className).toContain("border-transparent");
-    expect(el.className).not.toMatch(/border-(emerald|amber|sky)/);
-  });
+  it.each(["success", "warning", "info", "quiet"] as const)(
+    "%s is a Badge variant keyed on data",
+    (variant) => {
+      render(<Badge variant={variant}>x</Badge>);
+      const el = screen.getByText("x");
+      expect(el.getAttribute("data-variant")).toBe(variant);
+      expect(el.className).toContain("border-transparent");
+      expect(el.className).not.toMatch(/border-(emerald|amber|sky)/);
+    },
+  );
 });
 
 describe("fields", () => {
@@ -159,9 +158,10 @@ describe("fields", () => {
 });
 
 /**
- * The two-line option — composed at the call site rather than a primitive prop,
- * which is why what is asserted here is the trigger's own behaviour and not a
- * layout this file would otherwise have to keep in step with a call site.
+ * The two-line option — a `multiline` prop on the trigger itself rather than a
+ * class string composed at the call site, which is why what is asserted here
+ * is the trigger's own behaviour and not a layout this file would otherwise
+ * have to keep in step with a call site.
  *
  * The claim worth a test is the one that is easy to lose: the trigger shows the
  * *same* two lines the list does, because Radix renders the selected item's own
@@ -172,7 +172,7 @@ describe("Select", () => {
   function pickOne(): JSX.Element {
     return (
       <Select defaultValue="a">
-        <SelectTrigger data-testid="model" className={twoLineTrigger}>
+        <SelectTrigger data-testid="model" multiline>
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
@@ -202,15 +202,16 @@ describe("Select", () => {
 
   it("grows rather than clipping, and leaves a one-line option where it was", () => {
     render(pickOne());
-    // `h-8` would fix the height and squash the second line; `min-h-8` keeps the
-    // one-line control on Nova's contract height and lets a two-line one grow.
+    // `h-8` would fix the height and squash the second line; `min-h-8` keeps a
+    // one-line control at the trigger's usual height and lets a two-line one grow.
     const trigger = screen.getByTestId("model");
     expect(trigger.className).toContain("min-h-8");
     // Nothing truncates: half a model id is not a model id.
     expect(trigger.className).not.toContain("truncate");
-    // `twoLineTrigger` names canonical's own modifier chains, so `cn`'s merge
-    // replaces the fixed height and the value clamp rather than stacking beside
-    // them — a real check of the merge at render, not an echo of the constant.
+    // `multiline` is a prop, not a class string arriving from outside, so it
+    // does not need to outrank anything — but `cn`'s merge still has to replace
+    // the fixed height and the value clamp rather than stack beside them, which
+    // is what this checks at render, not an echo of the prop's own classes.
     expect(trigger.className).toContain("data-[size=default]:h-auto");
     expect(trigger.className).toContain("line-clamp-none");
     expect(trigger.className).not.toContain("data-[size=default]:h-8");
@@ -226,6 +227,21 @@ describe("Select", () => {
     expect(className).toContain("w-full");
     expect(className).toContain("min-w-(--radix-select-trigger-width)");
   });
+
+  it("grows and stops clamping its value when multiline", () => {
+    render(
+      <Select>
+        <SelectTrigger multiline aria-label="Export target">
+          <SelectValue placeholder="Pick one" />
+        </SelectTrigger>
+      </Select>,
+    );
+    const trigger = screen.getByRole("combobox", { name: "Export target" });
+    expect(trigger.className).toContain("data-[size=default]:h-auto");
+    expect(trigger.className).not.toContain("data-[size=default]:h-8");
+    expect(trigger.className).toContain("line-clamp-none");
+    expect(trigger.className).not.toContain("line-clamp-1");
+  });
 });
 
 describe("Card and Table", () => {
@@ -323,18 +339,15 @@ describe("Tabs", () => {
 });
 
 describe("Progress", () => {
-  it("reports its value to assistive technology, not only as a width", () => {
-    // Canonical `Progress` reads `value` only to size the indicator and never
-    // forwards it to Radix's `Root`, so `progressAria` says it again — every
-    // caller in the product spreads it beside `value` for exactly this reason.
-    render(<Progress value={42} {...progressAria(42)} aria-label="Ingest" />);
-    expect(screen.getByRole("progressbar", { name: "Ingest" }).getAttribute("aria-valuenow")).toBe(
-      "42",
-    );
+  it("reports its value to assistive technology without help from the caller", () => {
+    render(<Progress value={42} aria-label="Ingest" />);
+    const bar = screen.getByRole("progressbar", { name: "Ingest" });
+    expect(bar.getAttribute("aria-valuenow")).toBe("42");
+    expect(bar.getAttribute("data-state")).not.toBe("indeterminate");
   });
 
   it("fills with the functional colour, and carries the data-slot a caller can restyle from", () => {
-    // Canonical `Progress` has no `variant` prop and no notion of status — a
+    // `Progress` has no `variant` prop and no notion of status — a
     // batch's completion is an amount, not a polarity, so the indicator is
     // always `bg-primary`. A caller who needs to reach it targets the
     // `data-slot` it renders with, from its own `className` on `Root`.
@@ -402,7 +415,16 @@ describe("Dialog", () => {
 
 describe("sheet", () => {
   it("renders a dialog with its title and description wired by Radix", async () => {
-    render(<Sheet open><SheetContent><SheetHeader><SheetTitle>Filters</SheetTitle><SheetDescription>Narrow the list</SheetDescription></SheetHeader></SheetContent></Sheet>);
+    render(
+      <Sheet open>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Filters</SheetTitle>
+            <SheetDescription>Narrow the list</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
     const dialog = await screen.findByRole("dialog");
     expect(dialog.getAttribute("data-slot")).toBe("sheet-content");
     expect(dialog.getAttribute("data-side")).toBe("right");
@@ -418,23 +440,38 @@ describe("DropdownMenu", () => {
         <DropdownMenuTrigger asChild>
           <Button variant="ghost" size="icon" aria-label="Actions" />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className={menuSurface}>
+        <DropdownMenuContent>
           <DropdownMenuItem>Check integrity of this connection</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>,
     );
     await user.click(screen.getByRole("button", { name: "Actions" }));
     const classes = (await screen.findByRole("menu")).className.split(" ");
-    // Canonical pins the surface to the trigger with
-    // `w-(--radix-dropdown-menu-trigger-width)`, which behind this icon-sized
-    // button is the 128px floor — long items wrap. `menuSurface` is in the same
-    // utility group, so tailwind-merge drops canonical's at render and the
-    // rendered class list is the assertion: this is the merge, not a hope about
-    // cascade order.
+    // The default sizes to items, not to the trigger: behind this icon-sized
+    // button, pinning to the trigger width would be a 128px ceiling that wraps
+    // every longer item. `min-w-32` is what is asserted below, surviving as
+    // the floor it was meant to be.
     expect(classes).toContain("w-auto");
     expect(classes).not.toContain("w-(--radix-dropdown-menu-trigger-width)");
     // The floor is a different group and survives, which is what keeps a
     // one-word menu from collapsing to its widest item.
     expect(classes).toContain("min-w-32");
   });
+
+  it("sizes to its items and leaves on the frame it is dismissed", async () => {
+    const user = userEvent.setup();
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Duplicate this model</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    await user.click(screen.getByRole("button", { name: "Actions" }));
+    const menu = await screen.findByRole("menu");
+    expect(menu.className).toContain("w-auto");
+    expect(menu.className).not.toContain("--radix-dropdown-menu-trigger-width");
+    expect(menu.className).not.toContain("data-closed:animate-out");
+  });
 });