@elabs-ai/components-ui 4.0.0 → 4.2.0

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

@@ -1,3 +1,5 @@
+"use client";
+
 // a2ui.exposed: yes
 import {
   forwardRef,
@@ -10,6 +12,7 @@ import {
 } from "react";
 import { cn } from "../../lib/cn";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { useLocale } from "../locale-provider";
 
 // ---------------------------------------------------------------------------
 // Token vocabulary
@@ -120,7 +123,7 @@ const Swatch = forwardRef<HTMLButtonElement, SwatchProps>(function Swatch(
         selected
           ? "border-foreground ring-2 ring-ring ring-offset-1 ring-offset-background"
           : "border-transparent hover:border-foreground/40",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
         className,
       )}
       {...props}
@@ -194,12 +197,14 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
     onValueChange,
     swatches = COLOR_TOKENS,
     allowCustom = false,
-    "aria-label": ariaLabel = "Pick color",
+    "aria-label": ariaLabel,
     className,
     ...props
   },
   ref,
 ) {
+  const { t } = useLocale();
+  const resolvedAriaLabel = ariaLabel ?? t("ui.colorPicker.pickColor");
   const isControlled = valueProp !== undefined;
   const [internalValue, setInternalValue] = useState<ColorToken | string>(
     defaultValue ?? "chart-1",
@@ -259,19 +264,19 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
         <PopoverTrigger asChild>
           <button
             type="button"
-            aria-label={ariaLabel}
+            aria-label={resolvedAriaLabel}
             aria-haspopup="dialog"
             aria-expanded={open}
             className={cn(
-              "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm",
+              "inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-body shadow-sm",
               "transition-[color,box-shadow] duration-fast",
               "hover:bg-accent hover:text-accent-foreground",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+              "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
             <TriggerSwatch value={current} />
-            <span className="text-muted-foreground">{current || "None"}</span>
+            <span className="text-muted-foreground">{current || t("ui.colorPicker.none")}</span>
           </button>
         </PopoverTrigger>
 
@@ -279,7 +284,7 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
           <div
             ref={groupRef}
             role="radiogroup"
-            aria-label="Color swatches"
+            aria-label={t("ui.colorPicker.swatches")}
             className="flex flex-wrap gap-1.5"
             onKeyDown={handleGroupKeyDown}
           >
@@ -296,17 +301,19 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
           {allowCustom && (
             <div className="mt-3 border-t border-border pt-3">
               {/* Custom hex is NOT theme-aware — it will not adapt to theme changes. */}
-              <p className="mb-1.5 text-xs text-muted-foreground">
-                Custom hex <span className="text-warning">(not theme-aware)</span>
+              <p className="mb-1.5 text-meta text-muted-foreground">
+                {/* #124: inline running text — ink rung, not the 3:1 mark rung. */}
+                {t("ui.colorPicker.customHexLabel")}{" "}
+                <span className="text-warning-text">{t("ui.colorPicker.notThemeAware")}</span>
               </p>
               <div className="flex gap-2">
                 <input
                   type="text"
                   value={customHex}
-                  placeholder="#3b82f6"
+                  placeholder="#3b82f6" // i18n-exempt: example hex value, not prose
                   maxLength={7}
                   spellCheck={false}
-                  aria-label="Custom hex color"
+                  aria-label={t("ui.colorPicker.customHex")}
                   onChange={(e) => setCustomHex(e.target.value)}
                   onKeyDown={(e) => {
                     if (e.key === "Enter") {
@@ -315,8 +322,8 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
                     }
                   }}
                   className={cn(
-                    "h-8 w-28 rounded-md border border-input bg-background px-2 text-sm",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                    "h-8 w-28 rounded-md border border-input bg-background px-2 text-body",
+                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
                     "placeholder:text-muted-foreground",
                   )}
                 />
@@ -324,9 +331,9 @@ export const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(function
                   type="button"
                   onClick={handleCustomSubmit}
                   className={cn(
-                    "h-8 rounded-md border border-input bg-background px-2 text-sm",
+                    "h-8 rounded-md border border-input bg-background px-2 text-body",
                     "hover:bg-accent hover:text-accent-foreground",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                    "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
                   )}
                 >
                   Apply

package/src/components/combobox/combobox.stories.tsx

@@ -5,6 +5,16 @@ const meta = {
   title: "Forms/Combobox",
   component: Combobox,
   tags: ["autodocs"],
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width instead of letting it
+  // stretch the full autodocs page.
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-md">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     options: {
       description: "Array of `{ label, value }` options.",

package/src/components/combobox/combobox.test.tsx

@@ -66,6 +66,60 @@ describe("Combobox", () => {
     );
     expect(screen.getByRole("combobox")).toHaveTextContent("Custom Value");
   });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<Combobox options={[{ label: "A", value: "a" }]} />);
+    expect(screen.getByRole("combobox").className).not.toMatch(/\bw-56\b/);
+  });
+});
+
+// jsdom doesn't implement Element.scrollIntoView, which cmdk calls internally
+// to keep the auto-highlighted item visible — see the comment on the
+// `allowCustomValue` describe below for the full explanation.
+describe("Combobox (options interaction)", () => {
+  let originalScrollIntoView: typeof Element.prototype.scrollIntoView;
+
+  beforeEach(() => {
+    originalScrollIntoView = Element.prototype.scrollIntoView;
+    Element.prototype.scrollIntoView = vi.fn();
+  });
+
+  afterEach(() => {
+    Element.prototype.scrollIntoView = originalScrollIntoView;
+  });
+
+  // #reviewed 1.7 — a hand-rolled `onValueChange ? onValueChange(v) : setInternal(v)`
+  // never updates internal state once a listener is attached, so an
+  // uncontrolled Combobox with an onValueChange handler never shows its own
+  // selection on the trigger.
+  it("updates the trigger's own displayed value when uncontrolled even with an onValueChange listener", async () => {
+    const onValueChange = vi.fn();
+    render(<Combobox options={[{ label: "Alpha", value: "a" }]} onValueChange={onValueChange} />);
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.click(await screen.findByRole("option", { name: "Alpha" }));
+    expect(onValueChange).toHaveBeenCalledWith("a");
+    expect(screen.getByRole("combobox")).toHaveTextContent("Alpha");
+  });
+
+  // Duplicate labels used to collide because CommandItem's `value` (cmdk's
+  // identity/scoring key) was the LABEL, not the unique option value.
+  it("distinguishes options that share the same label", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        options={[
+          { label: "Production", value: "prod-us" },
+          { label: "Production", value: "prod-eu" },
+        ]}
+        onValueChange={onValueChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole("combobox"));
+    const options = await screen.findAllByRole("option", { name: "Production" });
+    expect(options).toHaveLength(2);
+    await userEvent.click(options[1]!);
+    expect(onValueChange).toHaveBeenCalledWith("prod-eu");
+  });
 });
 
 // #359 — allowCustomValue. A nested describe because these tests TYPE into the

package/src/components/combobox/combobox.tsx

@@ -1,7 +1,10 @@
+"use client";
+
 import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 import { defaultFilter } from "cmdk";
 import { Check, ChevronsUpDown, Plus } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
 import { Button } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 import { useLocale } from "../locale-provider";
@@ -20,6 +23,12 @@ export interface ComboboxOption {
 }
 
 export interface ComboboxProps {
+  /**
+   * The option list — every option is mounted in the DOM (cmdk has no built-in
+   * windowing), so this is fine for typical form/menu-sized lists but not for
+   * open-ended data. For thousands of options, use `VirtualSelect` instead,
+   * which windows rendering via `@tanstack/react-virtual`.
+   */
   options: ComboboxOption[];
   value?: string;
   onValueChange?: (value: string) => void;
@@ -97,8 +106,8 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
     options,
     value,
     onValueChange,
-    placeholder = "Select…",
-    searchPlaceholder = "Search…",
+    placeholder,
+    searchPlaceholder,
     emptyText,
     className,
     disabled = false,
@@ -111,11 +120,11 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
   ref,
 ) {
   const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.combobox.placeholder");
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t("ui.combobox.searchPlaceholder");
   const [open, setOpen] = useState(false);
-  const [internal, setInternal] = useState("");
+  const [selected, setValue] = useControllableState(value, "", onValueChange);
   const [search, setSearch] = useState("");
-  const selected = value ?? internal;
-  const setValue = (v: string) => (onValueChange ? onValueChange(v) : setInternal(v));
   const current = options.find((o) => o.value === selected);
 
   const trimmedSearch = search.trim();
@@ -150,30 +159,35 @@ export const Combobox = forwardRef<HTMLButtonElement, ComboboxProps>(function Co
           aria-expanded={open}
           disabled={disabled}
           data-slot="combobox"
-          className={cn("w-56 justify-between font-normal", triggerProps?.className, className)}
+          className={cn("w-full justify-between font-normal", triggerProps?.className, className)}
         >
-          {current ? current.label : selected || placeholder}
+          {current ? current.label : selected || resolvedPlaceholder}
           <ChevronsUpDown className="ms-2 size-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="w-56 p-0"
+        className="w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
         data-slot="combobox-content"
         // Radix Popover.Content renders role="dialog"; without a name axe's
         // aria-dialog-name rule (rightly) flags it. Reuse the trigger's own
         // purpose label when the consumer set one, else fall back to the
         // (already-translatable) search placeholder — no new hardcoded copy.
-        aria-label={ariaLabel ?? searchPlaceholder}
+        aria-label={ariaLabel ?? resolvedSearchPlaceholder}
       >
         <Command filter={allowCustomValue ? customValueFilter : undefined}>
-          <CommandInput placeholder={searchPlaceholder} value={search} onValueChange={setSearch} />
+          <CommandInput
+            placeholder={resolvedSearchPlaceholder}
+            value={search}
+            onValueChange={setSearch}
+          />
           <CommandList>
             <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             <CommandGroup>
               {options.map((o) => (
                 <CommandItem
                   key={o.value}
-                  value={o.label}
+                  value={o.value}
+                  keywords={[o.label]}
                   onSelect={() => {
                     setValue(o.value === selected ? "" : o.value);
                     setOpen(false);

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

@@ -3,7 +3,6 @@ import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent }
 import { expect, waitFor, within } from "storybook/test";
 import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
 import { Button } from "../button";
-import { DialogTitle } from "../dialog";
 import {
   Command,
   CommandDialog,
@@ -19,6 +18,20 @@ const meta = {
   title: "Overlays/Command",
   component: Command,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A grouped, searchable, keyboard-driven list (cmdk). Render it inline, or wrap it " +
+          "in `CommandDialog` for a full ⌘K palette — pass `CommandDialog`'s optional `title` " +
+          "for the dialog's `sr-only` accessible name.\n\n" +
+          "**Choosing between the two model/target pickers.** A full ⌘K palette → compose " +
+          "`CommandDialog` + `Command*` from `@elabs-ai/components-ui` directly; there is no " +
+          "separate selector component. An inline pill in a composer footer that opens the " +
+          "same grouped list anchored under itself → `ModelPicker`.",
+      },
+    },
+  },
   argTypes: {
     label: {
       description: "Accessible label for the command palette (cmdk `label` prop).",
@@ -113,10 +126,7 @@ function CommandPaletteDemo() {
         Open command palette
       </Button>
 
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        {/* CommandDialog doesn't ship a built-in title, so supply an sr-only one
-            for the dialog's accessible name. */}
-        <DialogTitle className="sr-only">Command palette</DialogTitle>
+      <CommandDialog open={open} onOpenChange={setOpen} title="Command palette">
         <CommandInput placeholder="Type a command or search…" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
@@ -291,7 +301,7 @@ function ExternalInputComboboxDemo() {
         role="combobox"
         onKeyDown={forwardKey}
         placeholder="Type @ to mention…"
-        className="flex h-10 w-full rounded-md border border-input bg-background px-3 text-body outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 text-body focus-ring"
       />
       <Command
         id="mention-list"

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

@@ -4,12 +4,16 @@ import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {
   Command,
+  CommandDialog,
+  CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
+  CommandSeparator,
   useCommandActiveItemId,
 } from "./command";
+import { DialogTitle } from "../dialog";
 
 // jsdom does not implement `Element.prototype.scrollIntoView`, and `cmdk`
 // calls it unconditionally (not feature-detected — it's a third-party
@@ -278,3 +282,87 @@ describe("Command — external combobox input wiring (integration)", () => {
     });
   });
 });
+
+/**
+ * RM-010 — `CommandDialog` grew a `title` prop when the `ModelSelector` alias
+ * shell in `@elabs-ai/components-ai` was deleted; the `sr-only` `DialogTitle`
+ * was the one capability that shell had and `ui` lacked.
+ *
+ * It MUST stay optional. `@elabs-ai/components-ai`'s `VoiceSelectorDialog`
+ * spreads `ComponentProps<typeof CommandDialog>` straight through, and callers
+ * that already render their own `DialogTitle` in `children` must not be forced
+ * to move it. Both branches are asserted so a later "make it required" change
+ * fails here rather than in a downstream package.
+ */
+describe("CommandDialog — optional title (RM-010)", () => {
+  it("names the dialog from `title`, rendered sr-only", () => {
+    render(
+      <CommandDialog open title="Command palette">
+        <CommandList>
+          <CommandItem>Calendar</CommandItem>
+        </CommandList>
+      </CommandDialog>,
+    );
+
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveAccessibleName("Command palette");
+    expect(screen.getByText("Command palette")).toHaveClass("sr-only");
+  });
+
+  it("renders no title of its own when `title` is omitted — a caller's own DialogTitle still wins", () => {
+    render(
+      <CommandDialog open>
+        <DialogTitle>Caller-owned title</DialogTitle>
+        <CommandList>
+          <CommandItem>Calendar</CommandItem>
+        </CommandList>
+      </CommandDialog>,
+    );
+
+    expect(screen.getByRole("dialog")).toHaveAccessibleName("Caller-owned title");
+    // Exactly one heading — CommandDialog did not add a second, competing one.
+    expect(screen.getAllByText(/title/i)).toHaveLength(1);
+  });
+});
+
+/** #157 — `CommandSeparator` is `cmdk`'s divider between groups, rendered as a
+ * direct child of `CommandList`'s `role="listbox"`. A listbox may only own
+ * `option`/`group` children (WCAG 1.3.1); a bare `role="separator"` there is
+ * neither. */
+describe("Command — CommandSeparator a11y (#157)", () => {
+  it("stays in the DOM for sighted users but is removed from the accessibility tree", () => {
+    render(
+      <Command>
+        <CommandList>
+          <CommandGroup heading="Fruit">
+            <CommandItem value="apple">Apple</CommandItem>
+          </CommandGroup>
+          <CommandSeparator />
+          <CommandGroup heading="Veg">
+            <CommandItem value="carrot">Carrot</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>,
+    );
+
+    // Still rendered — cmdk owns the visual divider.
+    expect(document.querySelector("[cmdk-separator]")).not.toBeNull();
+    // Never exposed with its `role="separator"` — a listbox can't own one.
+    expect(screen.queryByRole("separator")).toBeNull();
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+});
+
+describe("CommandEmpty — merges className instead of replacing it", () => {
+  it("keeps the base py-6/text-center classes alongside a caller className", () => {
+    render(
+      <Command>
+        <CommandList>
+          <CommandEmpty className="custom-empty">No results</CommandEmpty>
+        </CommandList>
+      </Command>,
+    );
+    const empty = screen.getByText("No results");
+    expect(empty).toHaveClass("py-6", "text-center", "custom-empty");
+  });
+});

package/src/components/command/command.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   createContext,
   forwardRef,
@@ -16,7 +18,7 @@ import { Command as CommandPrimitive, useCommandState } from "cmdk";
 import { Search } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { mergeRefs } from "../../lib/merge-refs";
-import { Dialog, DialogContent } from "../dialog";
+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"]';
@@ -149,17 +151,34 @@ export function useCommandActiveItemId(): string | undefined {
   return id === NO_COMMAND_PROVIDER ? undefined : id;
 }
 
-export function CommandDialog({
-  children,
-  filter,
-  ...props
-}: ComponentPropsWithoutRef<typeof Dialog> & {
+export type CommandDialogProps = ComponentPropsWithoutRef<typeof Dialog> & {
   /** Custom cmdk ranking (e.g. strict substring instead of fuzzy). */
   filter?: ComponentPropsWithoutRef<typeof CommandPrimitive>["filter"];
-}) {
+  /**
+   * The dialog's accessible name, rendered `sr-only`.
+   *
+   * OPTIONAL, and deliberately so: callers that already render their own
+   * `DialogTitle` in `children` must not be forced to move it, and
+   * `@elabs-ai/components-ai`'s `VoiceSelectorDialog` passes this whole prop
+   * type straight through. Supply it when you have no visible title — a
+   * `Dialog` with no accessible name is a Radix warning and an axe violation.
+   */
+  title?: ReactNode;
+};
+
+/**
+ * A ⌘K command palette in a modal `Dialog`.
+ *
+ * This IS the palette presentation of `Command` — there is no separate
+ * "selector" component. For an inline pill that opens the same grouped,
+ * searchable list anchored under itself (a composer footer), reach for
+ * `ModelPicker` instead.
+ */
+export function CommandDialog({ children, filter, title, ...props }: CommandDialogProps) {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
+        {title === undefined ? null : <DialogTitle className="sr-only">{title}</DialogTitle>}
         <Command
           filter={filter}
           className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3"
@@ -182,7 +201,7 @@ export const CommandInput = forwardRef<
         ref={ref}
         data-slot="command-input"
         className={cn(
-          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-body outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
@@ -208,12 +227,12 @@ export const CommandList = forwardRef<
 export const CommandEmpty = forwardRef<
   ElementRef<typeof CommandPrimitive.Empty>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->(function CommandEmpty(props, ref) {
+>(function CommandEmpty({ className, ...props }, ref) {
   return (
     <CommandPrimitive.Empty
       ref={ref}
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-body", className)}
       {...props}
     />
   );
@@ -228,7 +247,7 @@ export const CommandGroup = forwardRef<
       ref={ref}
       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-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        "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",
         className,
       )}
       {...props}
@@ -244,6 +263,12 @@ export const CommandSeparator = forwardRef<
     <CommandPrimitive.Separator
       ref={ref}
       data-slot="command-separator"
+      // `cmdk` renders this as a direct child of its `role="listbox"`
+      // (`CommandList`), which may only own `option`/`group` (WCAG 1.3.1,
+      // #157) — a purely visual divider between groups, so `aria-hidden`
+      // removes it from the accessibility tree instead of asking the listbox
+      // to own a role it can't. `{...props}` still lets a caller override it.
+      aria-hidden="true"
       className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
@@ -282,7 +307,7 @@ export const CommandItem = forwardRef<
       ref={ref}
       data-slot="command-item"
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm 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",
+        "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",
         className,
       )}
       {...props}
@@ -294,7 +319,7 @@ export function CommandShortcut({ className, ...props }: HTMLAttributes<HTMLSpan
   return (
     <span
       data-slot="command-shortcut"
-      className={cn("ms-auto text-xs tracking-widest text-muted-foreground", className)}
+      className={cn("ms-auto text-meta tracking-widest text-muted-foreground", className)}
       {...props}
     />
   );

package/src/components/command/index.ts

@@ -10,4 +10,5 @@ export {
   CommandShortcut,
   useCommandActiveItemId,
   type CommandProps,
+  type CommandDialogProps,
 } from "./command";

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { CommandTrigger } from "./command-trigger";
+
+const meta = {
+  title: "Navigation/CommandTrigger",
+  component: CommandTrigger,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The command-palette opener a top bar reaches for: shaped like a search field, " +
+          "collapsing to just the icon under `sm`. The visible label and the shortcut `Kbd` are " +
+          "both decorative — the accessible name is authored with `aria-label` so the shortcut " +
+          "glyph never concatenates into it (#117).",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CommandTrigger>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default label and platform-detected shortcut. */
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const button = within(canvasElement).getByRole("button");
+    // #117: the Kbd's shortcut glyph must not pollute the computed name.
+    await expect(button).toHaveAccessibleName("Search");
+  },
+};
+
+/** A caller-supplied label and shortcut — useful when the platform guess is wrong. */
+export const WithCustomShortcut: Story = {
+  args: {
+    label: "Find anything",
+    shortcut: "Ctrl K",
+  },
+};

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

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { CommandTrigger } from "./command-trigger";
+
+describe("CommandTrigger", () => {
+  it("announces only its label — the shortcut glyph must not pollute the accessible name", () => {
+    render(<CommandTrigger />);
+    // #117: a Kbd inside a control concatenates into the computed name. Assert the
+    // EXACT name; a regex match would happily pass on the polluted string.
+    expect(screen.getByRole("button")).toHaveAccessibleName("Search");
+  });
+
+  it("takes a custom label and shortcut", () => {
+    render(<CommandTrigger label="Find anything" shortcut="Ctrl K" />);
+    expect(screen.getByRole("button")).toHaveAccessibleName("Find anything");
+    expect(screen.getByText("Ctrl K")).toBeInTheDocument();
+  });
+});