@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/command/command.stories.tsx

@@ -321,8 +321,71 @@ function ExternalInputComboboxDemo() {
   );
 }
 
+/* -------------------------------------------------------------------------- */
+/*  Below the fold — mount-time auto-select must never scroll the page (#541) */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Reproduces #541: cmdk auto-selects the first item on mount and calls its
+ * native `scrollIntoView({ block: "nearest" })` — unpatched, that walks every
+ * scrollable ancestor including the window. A tall spacer pushes the list
+ * below the fold so a regression here scrolls `window.scrollY` away from 0.
+ */
+export const BelowTheFold: Story = {
+  name: "Inline list below the fold never scrolls the page",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div>
+      <div className="flex h-[150vh] items-end justify-center p-6 text-body text-muted-foreground">
+        Scroll spacer — the command list below starts off-screen.
+      </div>
+      <div className="flex justify-center pb-24">
+        <Command className="w-80 rounded-lg shadow-ring-md">
+          <CommandInput placeholder="Search framework…" />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Frameworks">
+              {FRAMEWORKS.map((framework) => (
+                <CommandItem key={framework}>{framework}</CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+    </div>
+  ),
+  play: async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+
+    // Mount-time auto-select must never move the page — even though the list
+    // starts entirely below the fold.
+    await waitFor(() => {
+      expect(canvasElement.querySelector('[aria-selected="true"]')).not.toBeNull();
+    });
+    expect(window.scrollY).toBe(0);
+
+    // Bring the list into view the way a real visitor would — by scrolling
+    // the page themselves. `scrollIntoView` on the INPUT (an element this
+    // fix never touches) is an ordinary, expected page scroll, not the bug
+    // under test.
+    const list = canvasElement.querySelector('[data-slot="command-list"]') as HTMLElement;
+    const input = canvas.getByPlaceholderText("Search framework…");
+    input.scrollIntoView();
+    const scrollYOnceVisible = window.scrollY;
+    expect(scrollYOnceVisible).toBeGreaterThan(0);
+
+    // Keyboard navigation in the now-visible, overflowing list must keep the
+    // active item visible by scrolling the LIST itself — never nudging the
+    // page any further.
+    await userEvent.type(input, "{ArrowDown}".repeat(12));
+
+    await waitFor(() => expect(list.scrollTop).toBeGreaterThan(0));
+    expect(window.scrollY).toBe(scrollYOnceVisible);
+  },
+};
+
 export const ExternalInputCombobox: Story = {
-  name: "External input combobox (aria-activedescendant, #365)",
+  name: "External input combobox (aria-activedescendant)",
   parameters: {
     docs: {
       description: {

package/src/components/command/command.test.tsx

@@ -185,6 +185,79 @@ describe("Command — onActiveItemIdChange (#365)", () => {
   });
 });
 
+/**
+ * #541 — cmdk auto-highlights the first item on mount and calls the native
+ * `Element.prototype.scrollIntoView({ block: "nearest" })` on it, which walks
+ * every scrollable ancestor including the window. `overrideItemScrollIntoView`
+ * (`command.tsx`) shadows `scrollIntoView` as an OWN property on each item, so
+ * the file-level `beforeEach` stub above — standing in for the native,
+ * jsdom-less method on `Element.prototype` — must never be reached at all:
+ * own-property lookups win over the prototype every time.
+ */
+describe("Command — inline list never scrolls the page (#541)", () => {
+  function TallHarness() {
+    return (
+      <div>
+        <div style={{ height: 2000 }} data-testid="spacer" />
+        <Command>
+          <CommandInput placeholder="Search…" />
+          <CommandList>
+            <CommandGroup heading="Fruit">
+              {Array.from({ length: 20 }, (_, i) => (
+                <CommandItem key={i} value={`fruit-${i}`}>{`Fruit ${i}`}</CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+    );
+  }
+
+  it("never reaches the native scrollIntoView on mount, and leaves window.scrollY at 0", async () => {
+    const { container } = render(<TallHarness />);
+
+    await waitFor(() => {
+      expect(container.querySelector('[aria-selected="true"]')).not.toBeNull();
+    });
+
+    expect(Element.prototype.scrollIntoView).not.toHaveBeenCalled();
+    expect(window.scrollY).toBe(0);
+  });
+
+  it("keyboard navigation scrolls the CommandList itself, never the window", async () => {
+    const { container } = render(<TallHarness />);
+    const list = container.querySelector('[data-slot="command-list"]') as HTMLElement;
+    const input = screen.getByPlaceholderText("Search…");
+
+    // jsdom has no layout engine (every rect is 0,0,0,0) — fake an
+    // overflowing list so the "nearest" edge math this fix replicates has
+    // something real to compute against.
+    const fakeRect = (top: number, height: number): DOMRect =>
+      ({
+        top,
+        bottom: top + height,
+        left: 0,
+        right: 300,
+        width: 300,
+        height,
+        x: 0,
+        y: top,
+        toJSON: () => ({}),
+      }) as DOMRect;
+
+    vi.spyOn(list, "getBoundingClientRect").mockReturnValue(fakeRect(0, 300));
+    const items = Array.from(container.querySelectorAll('[cmdk-item=""]'));
+    items.forEach((item, i) => {
+      vi.spyOn(item as HTMLElement, "getBoundingClientRect").mockReturnValue(fakeRect(i * 32, 32));
+    });
+
+    await userEvent.type(input, "{ArrowDown}".repeat(15));
+
+    await waitFor(() => expect(list.scrollTop).toBeGreaterThan(0));
+    expect(window.scrollY).toBe(0);
+  });
+});
+
 describe("CommandItem — dev-only warning for cmdk-overridden props", () => {
   it("warns when a consumer passes id, role, or aria-selected", () => {
     const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);

package/src/components/command/command.tsx

@@ -23,6 +23,68 @@ import { Dialog, DialogContent, DialogTitle } from "../dialog";
 /** cmdk's own marker attribute on an item row — the scope for the id lookup. */
 const CMDK_ITEM_SELECTOR = '[cmdk-item=""][aria-selected="true"]';
 
+/**
+ * Brings `element` fully into view within its nearest `CommandList` ancestor
+ * — and ONLY that ancestor — by writing `scrollTop` directly. Replicates the
+ * minimal-movement edge math `Element.scrollIntoView({ block: "nearest" })`
+ * itself uses, without ever calling the native method (which walks every
+ * further scrollable ancestor, the window included — see
+ * `overrideItemScrollIntoView` below for why that matters). A no-op when
+ * `element` has no `CommandList` ancestor: never falls back to the native
+ * call, which would reopen #541.
+ */
+function scrollElementIntoCommandList(element: HTMLElement) {
+  const list = element.closest<HTMLElement>('[data-slot="command-list"]');
+  if (!list) return;
+  const elementRect = element.getBoundingClientRect();
+  const listRect = list.getBoundingClientRect();
+  if (elementRect.top < listRect.top) {
+    list.scrollTop -= listRect.top - elementRect.top;
+  } else if (elementRect.bottom > listRect.bottom) {
+    list.scrollTop += elementRect.bottom - listRect.bottom;
+  }
+}
+
+/**
+ * cmdk auto-highlights the first item on mount, on every filter keystroke
+ * and on every keyboard navigation (ArrowDown/ArrowUp/Home/End), then calls
+ * the highlighted item's — and, when it is the first item in a group, that
+ * group's heading's — native `Element.prototype.scrollIntoView({ block:
+ * "nearest" })` to keep it visible. See `cmdk@1.1.1`'s
+ * `node_modules/cmdk/dist/index.mjs:1` (and the CJS twin
+ * `dist/index.js:1` — esbuild minifies each entire module onto a single
+ * line), function `ne` (`ce` in the CJS build): every `setState("value", …)`
+ * call that does not pass the internal "don't scroll" flag (pointer hover
+ * selection is the one call site that does) schedules it, and the root
+ * component's own mount effect schedules it unconditionally too.
+ *
+ * `{ block: "nearest" }` walks EVERY scrollable ancestor, the window
+ * included — so mounting a `Command` whose list sits below the fold scrolls
+ * the whole page (#541), for every consumer of an inline list, not only a
+ * modal `CommandDialog`. cmdk has no prop to opt out (checked its public
+ * API — no `scrollBehavior`/`disableScroll`/similar).
+ *
+ * The fix shadows `scrollIntoView` as an OWN property on the specific
+ * item/heading element cmdk will call it on — never `Element.prototype`,
+ * which would silently change the behaviour of every OTHER element on the
+ * page, not just cmdk's — with `scrollElementIntoCommandList` above. A ref
+ * callback runs during React's DOM-mutation commit phase, which always
+ * completes (for the whole tree) before any layout effect fires — including
+ * cmdk's own scheduled scroll — so the override is guaranteed to be in place
+ * before cmdk can ever reach the native method.
+ */
+function overrideItemScrollIntoView(node: HTMLElement | null) {
+  if (node) node.scrollIntoView = () => scrollElementIntoCommandList(node);
+}
+
+/** Same override as `overrideItemScrollIntoView`, for a group's heading —
+ * the DOM node cmdk creates internally for `CommandGroup`'s `heading` prop,
+ * so unlike an item it isn't a ref target we're handed directly. */
+function overrideGroupHeadingScrollIntoView(node: HTMLElement | null) {
+  const heading = node?.querySelector<HTMLElement>("[cmdk-group-heading]");
+  if (heading) heading.scrollIntoView = () => scrollElementIntoCommandList(heading);
+}
+
 /** Distinguishes "no `<Command>` ancestor" from "nothing is highlighted". */
 const NO_COMMAND_PROVIDER = Symbol("no-command-provider");
 
@@ -242,9 +304,13 @@ export const CommandGroup = forwardRef<
   ElementRef<typeof CommandPrimitive.Group>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(function CommandGroup({ className, ...props }, ref) {
+  const mergedRef = useMemo(
+    () => mergeRefs<HTMLDivElement>(ref, overrideGroupHeadingScrollIntoView),
+    [ref],
+  );
   return (
     <CommandPrimitive.Group
-      ref={ref}
+      ref={mergedRef}
       data-slot="command-group"
       className={cn(
         "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-meta [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
@@ -287,6 +353,11 @@ export const CommandItem = forwardRef<
   ElementRef<typeof CommandPrimitive.Item>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(function CommandItem({ className, ...props }, ref) {
+  const mergedRef = useMemo(
+    () => mergeRefs<HTMLDivElement>(ref, overrideItemScrollIntoView),
+    [ref],
+  );
+
   if (process.env.NODE_ENV !== "production") {
     for (const key of CMDK_OVERRIDDEN_ITEM_PROPS) {
       if (key in props && !warnedAboutOverriddenItemProps.has(key)) {
@@ -304,7 +375,7 @@ export const CommandItem = forwardRef<
 
   return (
     <CommandPrimitive.Item
-      ref={ref}
+      ref={mergedRef}
       data-slot="command-item"
       className={cn(
         "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:size-4",

package/src/components/command-chip/command-chip.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import { CommandChip, type CommandChipHost } from "./command-chip";
+
+const HOSTS: CommandChipHost[] = [
+  {
+    id: "claude-code",
+    label: "Claude Code",
+    command: "claude mcp add --transport http brand-ui https://elabs-ai.com/mcp",
+  },
+  { id: "cursor", label: "Cursor", command: "npx -y @elabs-ai/components-cli mcp" },
+  { id: "any", label: "Any MCP host (URL)", command: "https://elabs-ai.com/mcp" },
+];
+
+const meta = {
+  title: "Display/CommandChip",
+  component: CommandChip,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An install command in a monospace chip: pick the host from the menu, copy the exact command. Without clipboard access the command is selected for a manual copy; both outcomes are announced.",
+      },
+    },
+  },
+  args: { hosts: HOSTS, onCopyCommand: fn() },
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-xl">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CommandChip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** A host picked up front (uncontrolled `defaultValue`). */
+export const CursorSelected: Story = { args: { defaultValue: "cursor" } };
+
+/** One host only: no menu, just the command and the copy button. */
+export const SingleHost: Story = { args: { hosts: [HOSTS[0]!] } };
+
+/** Copy writes the exact command and announces “Copied”. */
+export const CopyCommand: Story = {
+  play: async ({ canvasElement, args }) => {
+    const writeText = fn(() => Promise.resolve());
+    Object.defineProperty(navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: "Copy command" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(HOSTS[0]!.command));
+    await waitFor(() => expect(canvas.getByRole("status")).toHaveTextContent("Copied"));
+    await expect(args.onCopyCommand).toHaveBeenCalledWith(HOSTS[0]!.command, true);
+  },
+};
+
+/** Choosing another host swaps the command. */
+export const SwitchHost: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: /Install for/ }));
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.click(await body.findByRole("menuitemradio", { name: "Cursor" }));
+    await waitFor(() => expect(canvas.getByText(HOSTS[1]!.command)).toBeInTheDocument());
+    // The menu hides the rest of the page from assistive tech while it is open. Wait for it to
+    // close fully, so the post-play axe check sees the page a user sees, not the exit frame.
+    await waitFor(() => expect(body.queryByRole("menu")).toBeNull());
+    await waitFor(() => expect(canvasElement.closest('[aria-hidden="true"]')).toBeNull());
+  },
+};

package/src/components/command-chip/command-chip.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { CommandChip, type CommandChipHost } from "./command-chip";
+
+const HOSTS: CommandChipHost[] = [
+  { id: "claude-code", label: "Claude Code", command: "claude mcp add brand-ui" },
+  { id: "cursor", label: "Cursor", command: "npx -y @elabs-ai/components-cli mcp" },
+];
+
+function stubClipboard(impl: () => Promise<void> = () => Promise.resolve()) {
+  const writeText = vi.fn(impl);
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+    writable: true,
+  });
+  return writeText;
+}
+
+describe("CommandChip", () => {
+  it("shows the first host's command with its data-slot", () => {
+    const { container } = render(<CommandChip hosts={HOSTS} />);
+    expect(container.querySelector('[data-slot="command-chip"]')).not.toBeNull();
+    expect(screen.getByText(HOSTS[0]!.command)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Install for: Claude Code" })).toBeInTheDocument();
+  });
+
+  it("honours defaultValue", () => {
+    render(<CommandChip hosts={HOSTS} defaultValue="cursor" />);
+    expect(screen.getByText(HOSTS[1]!.command)).toBeInTheDocument();
+  });
+
+  it("copies the exact command and announces it", async () => {
+    const writeText = stubClipboard();
+    const onCopyCommand = vi.fn();
+    render(<CommandChip hosts={HOSTS} onCopyCommand={onCopyCommand} />);
+    const status = screen.getByRole("status");
+    expect(status).toHaveTextContent("");
+    fireEvent.click(screen.getByRole("button", { name: "Copy command" }));
+    await waitFor(() => expect(status).toHaveTextContent("Copied"));
+    expect(writeText).toHaveBeenCalledWith(HOSTS[0]!.command);
+    expect(onCopyCommand).toHaveBeenCalledWith(HOSTS[0]!.command, true);
+  });
+
+  it("selects the command when the clipboard is unavailable", async () => {
+    stubClipboard(() => Promise.reject(new Error("denied")));
+    render(<CommandChip hosts={HOSTS} />);
+    fireEvent.click(screen.getByRole("button", { name: "Copy command" }));
+    await waitFor(() => expect(screen.getByRole("status")).toHaveTextContent("Command selected"));
+    expect(window.getSelection()?.toString()).toBe(HOSTS[0]!.command);
+  });
+
+  it("renders no menu for a single host", () => {
+    render(<CommandChip hosts={[HOSTS[0]!]} />);
+    expect(screen.queryByRole("button", { name: /Install for/ })).toBeNull();
+  });
+});

package/src/components/command-chip/command-chip.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { forwardRef, useRef, useState, type HTMLAttributes } from "react";
+import { Check, ChevronDown, Copy } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { useCopyToClipboard } from "../../lib/use-copy-to-clipboard";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+
+/** One install target: the host a visitor runs the command in, and the exact command. */
+export interface CommandChipHost {
+  /** Stable id, reported to `onValueChange`. */
+  id: string;
+  /** Host name shown in the menu and on the trigger. */
+  label: string;
+  /** The exact text shown in the chip and written to the clipboard. */
+  command: string;
+}
+
+/** Every string the chip renders — pass your own to localize it. */
+export interface CommandChipLabels {
+  /** Accessible name of the copy button. */
+  copy: string;
+  /** Announced (and shown to sighted users as the check icon) after a successful copy. */
+  copied: string;
+  /** Announced when the clipboard is unavailable and the command is selected instead. */
+  selectFallback: string;
+  /** Accessible name prefix of the host trigger (the current host follows it). */
+  chooseHost: string;
+  /** Heading of the host menu. */
+  menuLabel: string;
+}
+
+export const DEFAULT_COMMAND_CHIP_LABELS: CommandChipLabels = {
+  copy: "Copy command",
+  copied: "Copied",
+  selectFallback: "Command selected — press Ctrl+C or ⌘C to copy",
+  chooseHost: "Install for",
+  menuLabel: "Install for",
+};
+
+export interface CommandChipProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy"> {
+  /** The hosts to choose between; the first is the default selection. */
+  hosts: CommandChipHost[];
+  /** Selected host id (controlled). */
+  value?: string;
+  /** Initially selected host id (uncontrolled). Default: the first host. */
+  defaultValue?: string;
+  /** Fires when the visitor picks another host. */
+  onValueChange?: (id: string) => void;
+  /** Fires after a copy attempt with the command and whether the clipboard accepted it. */
+  onCopyCommand?: (command: string, copied: boolean) => void;
+  /** Override any rendered string. */
+  labels?: Partial<CommandChipLabels>;
+}
+
+/**
+ * A one-line install command in a monospace chip: pick the host (Claude Code, Cursor, …) from a
+ * menu, copy the exact command. When the page has no clipboard access (insecure origin, denied
+ * permission) the command text is selected instead so the visitor can copy it by hand; either
+ * outcome is announced through an always-mounted live region.
+ */
+export const CommandChip = forwardRef<HTMLDivElement, CommandChipProps>(function CommandChip(
+  {
+    hosts,
+    value,
+    defaultValue,
+    onValueChange,
+    onCopyCommand,
+    labels: labelsProp,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const labels = { ...DEFAULT_COMMAND_CHIP_LABELS, ...labelsProp };
+  const [selectedId, setSelectedId] = useControllableState(
+    value,
+    defaultValue ?? hosts[0]?.id ?? "",
+    onValueChange,
+  );
+  const host = hosts.find((h) => h.id === selectedId) ?? hosts[0];
+  const { copied, copy } = useCopyToClipboard();
+  const commandRef = useRef<HTMLElement>(null);
+  const [selectedManually, setSelectedManually] = useState(false);
+
+  if (!host) return null;
+
+  const onCopy = () => {
+    void copy(host.command).then((ok) => {
+      setSelectedManually(!ok);
+      if (!ok && commandRef.current && typeof window !== "undefined") {
+        // No clipboard here: select the command so a manual copy takes one keystroke.
+        const selection = window.getSelection();
+        selection?.selectAllChildren(commandRef.current);
+      }
+      onCopyCommand?.(host.command, ok);
+    });
+  };
+
+  return (
+    <div
+      ref={ref}
+      data-slot="command-chip"
+      data-copied={copied ? "" : undefined}
+      className={cn(
+        "inline-flex max-w-full min-w-0 items-center gap-1 rounded-md border border-input bg-card p-1 shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      {hosts.length > 1 ? (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            data-slot="command-chip-host"
+            aria-label={`${labels.chooseHost}: ${host.label}`}
+            className="inline-flex shrink-0 items-center gap-1 rounded-sm px-2 py-1 text-meta text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-ring"
+          >
+            {host.label}
+            <ChevronDown aria-hidden="true" className="size-3.5" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            <DropdownMenuLabel>{labels.menuLabel}</DropdownMenuLabel>
+            <DropdownMenuRadioGroup value={host.id} onValueChange={setSelectedId}>
+              {hosts.map((h) => (
+                <DropdownMenuRadioItem key={h.id} value={h.id}>
+                  {h.label}
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : null}
+      <code
+        ref={commandRef}
+        data-slot="command-chip-command"
+        className="min-w-0 flex-1 truncate px-2 font-mono text-code text-foreground"
+        title={host.command}
+      >
+        {host.command}
+      </code>
+      <button
+        type="button"
+        data-slot="command-chip-copy"
+        aria-label={labels.copy}
+        onClick={onCopy}
+        className="inline-flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-ring"
+      >
+        {copied ? (
+          <Check aria-hidden="true" className="size-4" />
+        ) : (
+          <Copy aria-hidden="true" className="size-4" />
+        )}
+      </button>
+      {/* Always mounted so the announcement is not missed (ARIA22); only its text changes. */}
+      <span role="status" aria-live="polite" className="sr-only" data-slot="command-chip-status">
+        {copied ? labels.copied : selectedManually ? labels.selectFallback : ""}
+      </span>
+    </div>
+  );
+});

package/src/components/command-chip/index.ts

@@ -0,0 +1,7 @@
+export {
+  CommandChip,
+  DEFAULT_COMMAND_CHIP_LABELS,
+  type CommandChipHost,
+  type CommandChipLabels,
+  type CommandChipProps,
+} from "./command-chip";

package/src/components/command-trigger/command-trigger.tsx

@@ -49,7 +49,7 @@ export const CommandTrigger = forwardRef<HTMLButtonElement, CommandTriggerProps>
         aria-label={label}
         className={cn(
           "inline-flex h-8 items-center gap-2 rounded-md border border-input bg-background px-2 text-body text-muted-foreground",
-          "hover:bg-accent hover:text-accent-foreground focus-ring",
+          "hover:bg-accent hover:text-accent-foreground focus-ring focus-visible:border-input-focus",
           "sm:w-56 sm:justify-between sm:ps-2 sm:pe-1.5",
           className,
         )}

package/src/components/confirm-dialog/confirm-dialog.stories.tsx

@@ -163,6 +163,7 @@ export const NeutralTone: Story = {
  * dark sweep and the workaround is retired.
  */
 export const DestructiveDark: Story = {
+  tags: ["!dev"],
   name: "Destructive — dark",
   decorators: [
     (Story) => (
@@ -176,6 +177,7 @@ export const DestructiveDark: Story = {
 };
 
 export const DestructiveHighDecoration: Story = {
+  tags: ["!dev"],
   name: "Destructive — high decoration",
   globals: { decoration: "10" },
   render: () => <DestructiveConfirm />,

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

@@ -68,3 +68,29 @@ export const Default: Story = {
     await userEvent.keyboard("{Escape}");
   },
 };
+
+/**
+ * Locks WCAG 1.4.11 keyboard-focus contrast (#308): a menu item's
+ * `focus:bg-accent` fill alone is not a visible indicator (~1.17–1.40:1
+ * against `--popover`). Moving focus with the keyboard must additionally
+ * paint a compound ring (`focus-ring-inset`): a real `boxShadow` layer, or a
+ * non-zero, non-`none` `outline`.
+ */
+export const KeyboardFocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: Default.render,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const trigger = canvas.getByText("Right-click here");
+    await userEvent.pointer({ target: trigger, keys: "[MouseRight]" });
+    const body = within(canvasElement.ownerDocument.body);
+    await body.findByRole("menu");
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = canvasElement.ownerDocument.activeElement as HTMLElement;
+    await expect(focused).toHaveAttribute("role", "menuitem");
+    const style = getComputedStyle(focused);
+    const hasRing = style.boxShadow !== "none";
+    const hasOutline = style.outlineStyle !== "none" && parseFloat(style.outlineWidth) > 0;
+    await expect(hasRing || hasOutline).toBe(true);
+    await userEvent.keyboard("{Escape}");
+  },
+};