@elabs-ai/components-ui 4.0.0 → 4.1.0

package/src/components/mention-input/mention-input.tsx

@@ -20,6 +20,7 @@ import {
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn";
 import { mergeRefs } from "../../lib/merge-refs";
+import { findTriggerQuery } from "../../lib/trigger-query";
 import { useLocale } from "../locale-provider";
 import { Popover, PopoverAnchor, PopoverContent } from "../popover";
 import { Textarea } from "../textarea";
@@ -88,43 +89,6 @@ export function useMentionInput(): MentionInputContextValue {
 // Query detection
 // ---------------------------------------------------------------------------
 
-/** A trigger only starts a query at the start of a word — never inside one. */
-function isWordBoundary(text: string, index: number): boolean {
-  if (index === 0) return true;
-  const previous = text[index - 1] ?? "";
-  return /\s/.test(previous) || previous === "(" || previous === "[";
-}
-
-/**
- * Is the caret currently sitting in a `trigger + query` run?
- *
- * Derived from the committed text + caret rather than intercepted at keydown,
- * on purpose: a keydown-driven trigger would have to `preventDefault()` every
- * printable character and re-insert it by hand, which is exactly what destroys
- * IME composition, native undo, spellcheck and paste — the things a real
- * `<textarea>` gives us for free. Deriving instead means the popup opens
- * identically whether the trigger arrived by typing, pasting, an IME commit or
- * a mouse click that moved the caret back into a half-typed query.
- */
-function findQuery(
-  value: MentionValue,
-  caret: number,
-  trigger: string,
-): { start: number; query: string } | null {
-  const { text } = value;
-  if (caret < trigger.length) return null;
-  const start = text.lastIndexOf(trigger, caret - trigger.length);
-  if (start < 0) return null;
-
-  const query = text.slice(start + trigger.length, caret);
-  if (/\s/.test(query)) return null;
-  if (!isWordBoundary(text, start)) return null;
-  // The trigger char of an ALREADY-inserted mention must not re-open the popup.
-  if (mentionAt(value, start, trigger)) return null;
-
-  return { start, query };
-}
-
 /** Next enabled index in `list`, wrapping; `-1` when none is selectable. */
 function step(list: MentionOption[], from: number, direction: 1 | -1): number {
   const count = list.length;
@@ -354,7 +318,13 @@ export const MentionInput = forwardRef<HTMLDivElement, MentionInputProps>(functi
   // ------------------------------------------------------------------
   // Query / open state
   // ------------------------------------------------------------------
-  const queryInfo = useMemo(() => findQuery(value, caret, trigger), [value, caret, trigger]);
+  const queryInfo = useMemo(
+    () =>
+      findTriggerQuery(value.text, caret, trigger, {
+        isTriggerConsumed: (start) => mentionAt(value, start, trigger) !== undefined,
+      }),
+    [value, caret, trigger],
+  );
 
   // Escape (and an outside dismissal) suppress the popup for the run it was
   // dismissed on, without touching the text — the query is still there, the

package/src/components/mention-input/mention-value.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { replaceTriggerRun } from "../../lib/trigger-query";
 
 /**
  * The pure offset algebra behind `MentionInput`.
@@ -138,7 +139,12 @@ export function insertMention(
   caret: number,
 ): InsertMentionResult {
   const inserted = `${trigger}${option.label} `;
-  const nextText = value.text.slice(0, queryStart) + inserted + value.text.slice(caret);
+  const { text: nextText, caret: nextCaret } = replaceTriggerRun(
+    value.text,
+    queryStart,
+    caret,
+    inserted,
+  );
   const delta = inserted.length - (caret - queryStart);
 
   const mentions: Mention[] = [];
@@ -160,7 +166,7 @@ export function insertMention(
         (m) => nextText.slice(m.start, mentionEnd(m, trigger)) === trigger + m.label,
       ),
     },
-    caret: queryStart + inserted.length,
+    caret: nextCaret,
   };
 }
 

package/src/components/metric-card/metric-card.stories.tsx

@@ -11,9 +11,11 @@ const meta = {
     docs: {
       description: {
         component:
-          "The canonical KPI tile, owned by @elabs-ai/components-ui (ADR 0012). @elabs-ai/components-charts re-exports this exact " +
-          "component as Charts/MetricCard — they are the same component, so import from @elabs-ai/components-ui for app " +
-          "UI, or from @elabs-ai/components-charts when already in a charts context. Don't fork a second KPI tile.",
+          "The canonical KPI tile, owned by @elabs-ai/components-ui (ADR 0012). @elabs-ai/components-charts re-exports this " +
+          "EXACT component, so import it from @elabs-ai/components-ui for app UI, or from @elabs-ai/components-charts when " +
+          "you are already in a charts context — both resolve to the component documented here, which is why the " +
+          "sidebar carries one MetricCard entry and not two. Don't fork a second KPI tile. The `visual` slot is " +
+          "shown by the WithSparkline story, which fills it with a real @elabs-ai/components-charts mini-chart.",
       },
     },
   },

package/src/components/metric-card/metric-card.tsx

@@ -166,9 +166,28 @@ export const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(function M
           {loading ? (
             <Skeleton className="h-4 w-24" />
           ) : (
-            <span className="text-body font-medium text-muted-foreground">{label}</span>
+            /* `min-w-0` + `truncate`, not just the text utility: a flex child's
+               default `min-width: auto` refuses to shrink below its content, so
+               without it the label OVERFLOWS the row and `Card`'s own
+               `overflow-hidden` hard-clips it — characters lost mid-word, no
+               ellipsis, no title. Measured on a 230px pane: "Awaiting approval"
+               rendered as "Awaiting approva". See interaction-guidelines.md
+               § Content handling ("flex children need `min-w-0`"). `title` only
+               when the label is a string — there is nothing to put in the
+               attribute otherwise, and the ellipsis needs a way back to the
+               full words. */
+            <span
+              className="min-w-0 truncate text-body font-medium text-muted-foreground"
+              title={typeof label === "string" ? label : undefined}
+            >
+              {label}
+            </span>
           )}
-          {icon ? <span className="text-muted-foreground [&_svg]:size-4">{icon}</span> : null}
+          {/* `shrink-0`: the icon is a fixed 16px mark, so the LABEL is what
+              gives way when the row runs out of width. */}
+          {icon ? (
+            <span className="shrink-0 text-muted-foreground [&_svg]:size-4">{icon}</span>
+          ) : null}
         </div>
         <div className="flex items-baseline gap-2">
           {loading ? (

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { AppWindow, Bot, Sparkles } from "lucide-react";
 import { useState } from "react";
+import { within } from "storybook/test";
 import { ModelPicker } from "./model-picker";
 import type { ModelPickerGroup } from "./model-picker-state";
 
@@ -61,9 +62,15 @@ const meta = {
     docs: {
       description: {
         component:
+          "The INLINE composer pill; a full palette in a dialog is a `CommandDialog` " +
+          "you compose yourself — see " +
+          "[Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). " +
           "A compact pill that opens a grouped, searchable target list anchored under itself — " +
-          "sized for a composer footer. The inline sibling of `@elabs-ai/components-ai`'s " +
-          "`ModelSelector`, which is the same `Command` internals in a modal `Dialog`.\n\n" +
+          "sized for a composer footer.\n\n" +
+          "**Which one to reach for.** An inline pill in a composer footer → this component. " +
+          "A full ⌘K palette → compose `CommandDialog` + `Command*` from " +
+          "`@elabs-ai/components-ui` directly; there is no separate selector component " +
+          "wrapping them.\n\n" +
           "**`Command` lives in a `Popover`, never a `DropdownMenu`.** `DropdownMenuContent` owns " +
           "roving tabindex and its own typeahead; both fight a real `<input>` in its subtree, so " +
           "arrow keys move the menu's focus instead of cmdk's highlight and typing never reaches " +
@@ -80,9 +87,19 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-/** Skeleton rows while the first load is in flight. */
+/**
+ * Skeleton rows while the first load is in flight.
+ *
+ * The `play` opens the popover — issue #121: axe never rendered `CommandList`
+ * (cmdk's `role="listbox"`) until a story actually opened it, which is how a
+ * structural `aria-required-children` violation shipped unnoticed.
+ */
 export const Loading: Story = {
   args: { groups: [], status: "loading", triggerLabel: "Loading…", value: undefined },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    await within(canvasElement.ownerDocument.body).findByRole("dialog");
+  },
 };
 
 /**
@@ -103,11 +120,54 @@ export const ErrorState: Story = {
     value: undefined,
     onRetry: () => {},
   },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    await within(canvasElement.ownerDocument.body).findByRole("dialog");
+  },
 };
 
 /** Nothing to show, but nothing went wrong — a different message, deliberately. */
 export const Empty: Story = {
   args: { groups: [], status: "empty", triggerLabel: "No targets", value: undefined },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    await within(canvasElement.ownerDocument.body).findByRole("dialog");
+  },
+};
+
+/**
+ * Nothing to show, nothing went wrong, AND a retry is offered — the empty
+ * panel's `Retry` button, the specific case where the button previously
+ * landed inside `role="listbox"` (issue #121).
+ */
+export const EmptyWithRetry: Story = {
+  args: {
+    groups: [],
+    status: "empty",
+    triggerLabel: "No targets",
+    value: undefined,
+    onRetry: () => {},
+  },
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    await within(canvasElement.ownerDocument.body).findByRole("dialog");
+  },
+};
+
+/**
+ * The everyday path issue #121 was really about: a fully-populated, working
+ * list where the search query happens to match nothing. `CommandEmpty`
+ * renders while the list itself stays mounted with zero options — the case
+ * that shipped broken because no story ever typed a non-matching query.
+ */
+export const ListNoSearchResults: Story = {
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox"));
+    const body = within(canvasElement.ownerDocument.body);
+    await body.findByRole("dialog");
+    await userEvent.type(body.getByPlaceholderText("Search…"), "zzzzzznomatch");
+    await body.findByText("No results.");
+  },
 };
 
 export const Disabled: Story = { args: { disabled: true } };

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

@@ -228,6 +228,69 @@ describe("ModelPicker", () => {
     });
   });
 
+  // Issue #121 — `CommandList` IS the ARIA listbox (cmdk hardcodes
+  // role="listbox" on it); ARIA only allows a listbox to own `option`/`group`.
+  // This asserts the CAUSE (no disallowed descendant), not axe's message, so
+  // it survives an axe-core upgrade — the story-level `play` functions run
+  // the actual blocking axe rule.
+  describe("CommandList owns only option/group content (ARIA listbox contract)", () => {
+    const disallowedSelector =
+      '[role]:not([role="option"]):not([role="group"]):not([role="presentation"])';
+
+    const assertListClean = () => {
+      const list = document.querySelector('[data-slot="command-list"]')!;
+      expect(list).not.toBeNull();
+      expect(list.querySelector(disallowedSelector)).toBeNull();
+      return list as HTMLElement;
+    };
+
+    it("loading body: no role=status descendant inside the listbox", async () => {
+      render(<ModelPicker groups={[]} status="loading" triggerLabel="Pick" />);
+      await open();
+      // The list stays mounted (so CommandInput's aria-controls still
+      // resolves) but owns no option/group content while loading — the
+      // loading panel is a sibling, not a child.
+      assertListClean();
+      expect(document.querySelector('[data-slot="model-picker-loading"]')).not.toBeNull();
+    });
+
+    it("error body: the retry button is not a descendant of the listbox", async () => {
+      const onRetry = vi.fn();
+      render(<ModelPicker groups={[]} status="error" triggerLabel="Pick" onRetry={onRetry} />);
+      await open();
+      const list = assertListClean();
+      const retryButton = screen.getByRole("button", { name: "Retry" });
+      expect(list).not.toContainElement(retryButton);
+    });
+
+    it("empty body (with retry): the retry button is not a descendant of the listbox", async () => {
+      const onRetry = vi.fn();
+      render(<ModelPicker groups={[]} status="empty" triggerLabel="Pick" onRetry={onRetry} />);
+      await open();
+      const list = assertListClean();
+      const retryButton = screen.getByRole("button", { name: "Retry" });
+      expect(list).not.toContainElement(retryButton);
+    });
+
+    it("populated list with a non-matching search: CommandEmpty is not a descendant of the listbox", async () => {
+      render(<ModelPicker groups={groups} triggerLabel="Pick" />);
+      await open();
+      await userEvent.type(screen.getByPlaceholderText("Search…"), "zzzzzznomatch");
+      const noResults = await screen.findByText("No results.");
+      const list = assertListClean();
+      expect(list).not.toContainElement(noResults);
+    });
+
+    it("CommandInput's aria-controls still resolves to the mounted (empty) listbox", async () => {
+      render(<ModelPicker groups={[]} status="empty" triggerLabel="Pick" />);
+      await open();
+      const input = screen.getByPlaceholderText("Search…");
+      const controlsId = input.getAttribute("aria-controls");
+      expect(controlsId).toBeTruthy();
+      expect(document.getElementById(controlsId!)).not.toBeNull();
+    });
+  });
+
   it("uncontrolled mode: trigger click still opens and closes on its own (regression)", async () => {
     const onSelect = vi.fn();
     render(<ModelPicker groups={groups} triggerLabel="Pick" onSelect={onSelect} />);

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

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

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

@@ -1,6 +1,6 @@
 /**
  * Shared collapsible sidebar navigation primitive (issue #99).
- * Promoted from `packages/ui/src/blocks/sidebar-02/nav-main.tsx`.
+ * Promoted from `registry/blocks/sidebar-02/nav-main.tsx`.
  *
  * Renders a `SidebarMenu` of routes; each route with sub-items uses a
  * `Collapsible` expand/collapse affordance. Collapses icon-only when the

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

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