@elabs-ai/components-ui 4.0.0 → 4.2.0

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

@@ -51,6 +51,15 @@ const meta = {
   title: "Forms/TreeSelect",
   component: TreeSelect,
   tags: ["autodocs"],
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     nodes: {
       description: "Hierarchical tree data (`TreeNode[]`).",

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

@@ -37,4 +37,9 @@ describe("TreeSelect", () => {
     render(<TreeSelect nodes={nodes} multiple value={["apple", "banana", "carrot"]} />);
     expect(screen.getByText("+1")).toBeInTheDocument();
   });
+
+  it("does not hard-fix the trigger width — fills its container by default", () => {
+    render(<TreeSelect nodes={nodes} />);
+    expect(screen.getByRole("combobox").className).not.toMatch(/\bw-64\b/);
+  });
 });

package/src/components/tree-select/tree-select.tsx

@@ -7,6 +7,7 @@ import { cn } from "../../lib/cn";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { useLocale } from "../locale-provider";
 import { Tree, type TreeNode } from "../tree";
 
 export interface TreeSelectProps<T = unknown> extends Omit<
@@ -47,18 +48,11 @@ function findLabel<T>(nodes: TreeNode<T>[], id: string): ReactNode | undefined {
  * selection; composes `Tree` for all keyboard/SR behaviour.
  */
 export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(function TreeSelect(
-  {
-    nodes,
-    value,
-    defaultValue,
-    onValueChange,
-    multiple = false,
-    placeholder = "Select…",
-    className,
-    ...props
-  },
+  { nodes, value, defaultValue, onValueChange, multiple = false, placeholder, className, ...props },
   ref,
 ) {
+  const { t } = useLocale();
+  const resolvedPlaceholder = placeholder ?? t("ui.treeSelect.placeholder");
   const [open, setOpen] = useState(false);
   const treeId = useId();
   const isControlled = value !== undefined;
@@ -88,12 +82,12 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
           aria-haspopup="tree"
           aria-expanded={open}
           aria-controls={treeId}
-          className={cn("h-auto min-h-9 w-64 justify-between font-normal", className)}
+          className={cn("h-auto min-h-9 w-full justify-between font-normal", className)}
           {...props}
         >
           <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1 text-start">
             {labels.length === 0 ? (
-              <span className="text-muted-foreground">{placeholder}</span>
+              <span className="text-muted-foreground">{resolvedPlaceholder}</span>
             ) : multiple ? (
               <>
                 {labels.slice(0, 2).map((l) => (
@@ -106,7 +100,10 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
                   </Badge>
                 ))}
                 {labels.length > 2 ? (
-                  <Badge variant="secondary" aria-label={`and ${labels.length - 2} more selected`}>
+                  <Badge
+                    variant="secondary"
+                    aria-label={t("ui.treeSelect.moreSelected", { count: labels.length - 2 })}
+                  >
                     +{labels.length - 2}
                   </Badge>
                 ) : null}
@@ -118,7 +115,7 @@ export const TreeSelect = forwardRef<HTMLButtonElement, TreeSelectProps>(functio
           <ChevronsUpDown className="ms-2 size-4 shrink-0 opacity-50" aria-hidden="true" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-64 p-1" align="start">
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] min-w-64 p-1" align="start">
         <Tree
           id={treeId}
           nodes={nodes}

package/src/components/typography/prose.test.tsx

@@ -20,12 +20,13 @@ import { ProseLink } from "./prose";
 afterEach(cleanup);
 
 describe("ProseLink — #399 on-surface brand-accent rung", () => {
-  it("renders text-primary-text, never the text-primary fill rung", () => {
+  // `text-link` reads `--link`, which the reference themes alias to `--primary-text`.
+  it("renders the link ink, never the text-primary fill rung", () => {
     render(<ProseLink href="https://example.com">docs</ProseLink>);
 
     const link = screen.getByRole("link", { name: "docs" });
     const classes = link.className.split(/\s+/);
-    expect(classes).toContain("text-primary-text");
+    expect(classes).toContain("text-link");
     expect(classes).not.toContain("text-primary");
   });
 

package/src/components/typography/prose.tsx

@@ -116,10 +116,10 @@ export const ProseLink = forwardRef<HTMLAnchorElement, ProseLinkProps>(function
       ref={ref}
       href={href}
       className={cn(
-        // #399 — `text-primary-text`, not the `text-primary` FILL rung: a prose
-        // link is ordinary body text and owes WCAG 1.4.3 AA (4.5:1), which the
+        // #399 — `text-link` (defaults to `--primary-text`), not the `text-primary`
+        // FILL rung: a prose link is ordinary body text and owes WCAG 1.4.3 AA (4.5:1), which the
         // fill only guarantees at the 1.4.11 mark bar (3:1).
-        "font-medium text-primary-text underline underline-offset-4 hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "font-medium text-link underline underline-offset-4 hover:no-underline focus-ring",
         className,
       )}
       {...(isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {})}

package/src/components/typography/typography.stories.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
+import { cn } from "../../lib/cn";
 import { Heading, Text } from "./typography";
 import {
   ProseBlockquote,
@@ -242,3 +243,230 @@ export const Prose: Story = {
     </div>
   ),
 };
+
+/**
+ * The CJK FONT FALLBACK + LINE-BREAKING seam (#15). `--font-cjk-sans` is a
+ * dedicated tail in `--font-sans` (system faces only — never bundled; a CJK
+ * face is megabytes and every target platform already ships one) that
+ * `:lang(zh)` / `:lang(ko)` re-point per locale (`ja` is the root default);
+ * `:lang(ja)`/`:lang(zh)` also get `line-break: strict` and `:lang(ko)` gets
+ * `word-break: keep-all` (`themes.css` §§ "CJK PER-LOCALE FONT SEAM" / "CJK
+ * line-breaking"). Before this story, no story anywhere rendered CJK text, so
+ * none of this was exercised.
+ *
+ * The designed real-world shape is `<html lang="zh">` for a whole document,
+ * with `font-family: var(--font-sans)` declared ONCE at that same theme-root
+ * element. That matters for how this story has to be built: a custom
+ * property's `var()` references are substituted at the element that declares
+ * the property, and the RESULT — not the raw token stream — is what
+ * descendants inherit. So `--font-sans`'s `var(--font-cjk-sans)` is resolved
+ * once, at the theme root, using whatever `lang` is active THERE; a nested
+ * `:lang(zh)` further down only re-points `--font-cjk-sans` on that
+ * descendant — it does nothing for `--font-sans`, which the descendant never
+ * redeclares, only inherits pre-resolved. To show all three locales side by
+ * side under one shared theme root (whose own `lang` cannot be three things
+ * at once), each "with the seam" sample below redeclares the SAME expansion
+ * `--font-sans` itself uses (see `themes/light.css`/`themes/dark.css`)
+ * directly in its `style`, so the `var(--font-cjk-sans)` substitution happens
+ * fresh, at that element, against the `--font-cjk-sans` value its own `lang`
+ * cascades in via `:lang()`.
+ */
+type CjkSample = {
+  lang: "ja" | "zh" | "ko";
+  label: string;
+  rule: string;
+  text: string;
+  width?: string; // Optional custom width, defaults to w-56
+};
+
+const CJK_SAMPLES: readonly CjkSample[] = [
+  {
+    lang: "ja",
+    label: "Japanese (ja)",
+    rule: "line-break: strict",
+    text:
+      "この文章は十分に長く、コンテナの幅を超えるとブラウザが自動的に折り返しを行います。" +
+      "折り返しの際に句読点や閉じ括弧（このように）が行頭に来ないようにするのが、" +
+      "line-break: strict の役割です。",
+  },
+  {
+    lang: "zh",
+    label: "Chinese (zh)",
+    rule: "line-break: strict",
+    text:
+      "这段文字足够长，当容器宽度不足时浏览器会自动换行。line-break: strict 的作用是避免" +
+      "标点符号（例如逗号、句号或右括号）出现在行首，让排版更符合中文书写习惯。",
+  },
+  {
+    lang: "ko",
+    label: "Korean (ko)",
+    rule: "word-break: keep-all",
+    text:
+      "소프트웨어개발환경구축및정보통신기술표준화를위한국제협력과연구개발사업이진행되고있습니다. " +
+      "word-break: keep-all 속성은 긴 복합어 중간에서 줄이 바뀌지 않도록 보장하여 " +
+      "가독성을 지켜 줍니다.",
+    width: "w-36",
+  },
+];
+
+/** One locale panel: the seam ON (real `lang`) next to the seam forced OFF, for comparison. */
+function CjkPanel({ sample }: { sample: CjkSample }) {
+  const { lang, label, rule, text, width = "w-56" } = sample;
+  const withSeamRef = useRef<HTMLParagraphElement>(null);
+  const [measured, setMeasured] = useState("");
+  useLayoutEffect(() => {
+    const el = withSeamRef.current;
+    if (!el) return;
+    const { lineBreak, wordBreak, fontFamily } = getComputedStyle(el);
+    setMeasured(`line-break: ${lineBreak} · word-break: ${wordBreak} · font-family: ${fontFamily}`);
+  }, []);
+  return (
+    <section aria-labelledby={`cjk-${lang}`} className="space-y-2">
+      <h3 id={`cjk-${lang}`} className="text-subtitle text-foreground">
+        {label} — <code className="text-code">{rule}</code>
+      </h3>
+      <div className="grid gap-4 sm:grid-cols-2">
+        <figure className="m-0 space-y-1">
+          <figcaption className="text-meta text-muted-foreground">
+            Without the seam (comparison only — line-break/word-break forced to the CSS-initial
+            default)
+          </figcaption>
+          {/* Comparison-only override to show what the seam replaces; a real
+              consumer never does this. Font-family is left alone here — this
+              column isolates the LINE-BREAKING half of the seam. */}
+          <p
+            lang={lang}
+            style={{ fontFamily: "var(--font-sans)", lineBreak: "auto", wordBreak: "normal" }}
+            className={cn("m-0 rounded-md border border-border bg-card p-3 text-body", width)}
+          >
+            {text}
+          </p>
+        </figure>
+        <figure className="m-0 space-y-1">
+          <figcaption className="text-meta text-muted-foreground">
+            With the seam (the default result of{" "}
+            <code className="text-code">lang=&quot;{lang}&quot;</code>)
+          </figcaption>
+          <p
+            ref={withSeamRef}
+            lang={lang}
+            data-testid={`cjk-with-seam-${lang}`}
+            // Redeclares --font-sans's own expansion (themes/light.css,
+            // themes/dark.css) directly, rather than using
+            // `var(--font-sans)`, because --font-sans is inherited from the
+            // shared theme root as an ALREADY-substituted string — see the
+            // comment above CjkSample. Writing the expansion here forces the
+            // `var(--font-cjk-sans)` substitution to happen at THIS element,
+            // against the value its own `lang` cascades in.
+            style={{
+              fontFamily:
+                'Inter, var(--font-cjk-sans), "Helvetica Neue", Helvetica, Arial, sans-serif',
+            }}
+            className={cn("m-0 rounded-md border border-border bg-card p-3 text-body", width)}
+          >
+            {text}
+          </p>
+        </figure>
+      </div>
+      {/* The declared (not rendered) values — a real, un-bundled system CJK
+          face never looks identical across two machines, so THIS is what a
+          reviewer can actually verify: the correct stack is being asked for.
+
+          NOTE: document.fonts.check() is NOT used to verify font resolution
+          (issue #62). That API reports load status, not face existence — it
+          returns true even for nonexistent font names. The measured values
+          instead read the browser's own getComputedStyle output, which is
+          verifiable. */}
+      <p className="m-0 text-meta text-muted-foreground" data-testid={`cjk-measured-${lang}`}>
+        {measured || "measuring…"}
+      </p>
+    </section>
+  );
+}
+
+export const CJKFontAndLineBreaking: Story = {
+  name: "CJK font fallback + line-breaking (#15)",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Japanese, Chinese and Korean samples, each wrapped in a narrow (14rem) column so " +
+          "the text wraps across multiple lines — the line-breaking rules need a real wrap " +
+          "point to have anything to do.\n\n" +
+          "**Verification by locale:**\n" +
+          "* **Japanese (`ja`) and Chinese (`zh`):** `line-break: strict` is verified via " +
+          "computed style only; no empirically-validated visual wrap difference has been found at " +
+          "this column width for any practical sample text in chromium or webkit, so the rendered " +
+          "layout is NOT asserted to differ. The rule is confirmed present via `getComputedStyle`.\n" +
+          "* **Korean (`ko`):** `word-break: keep-all` is verified both via computed style AND " +
+          "an actual rendered wrap-position difference assertion in the play function.\n\n" +
+          "The measured line under each pair reads the browser's OWN computed `line-break` / " +
+          "`word-break` / `font-family`, live. Rendered glyph shape depends on which CJK system " +
+          "fonts are installed on the machine viewing this story (none are bundled, by design " +
+          "— #15); the declared font STACK is what is verifiable everywhere.",
+      },
+    },
+  },
+  render: () => (
+    <div className="max-w-3xl space-y-8">
+      {CJK_SAMPLES.map((s) => (
+        <CjkPanel key={s.lang} sample={s} />
+      ))}
+    </div>
+  ),
+  // Asserts the seam on the REAL rendered surface, mirroring the DensityScale
+  // play function above: read the browser's actual computed style rather than
+  // re-deriving the CSS by hand.
+  play: async ({ canvas }) => {
+    const ja = canvas.getByTestId("cjk-with-seam-ja");
+    const zh = canvas.getByTestId("cjk-with-seam-zh");
+    const ko = canvas.getByTestId("cjk-with-seam-ko");
+
+    // :lang(ja), :lang(zh) => line-break: strict. :lang(ko) is NOT in that
+    // rule, so it stays at the CSS-initial value ("auto").
+    expect(getComputedStyle(ja).lineBreak).toBe("strict");
+    expect(getComputedStyle(zh).lineBreak).toBe("strict");
+    expect(getComputedStyle(ko).lineBreak).toBe("auto");
+
+    // :lang(ko) => word-break: keep-all. ja/zh are NOT in that rule, so they
+    // stay at the CSS-initial value ("normal").
+    expect(getComputedStyle(ko).wordBreak).toBe("keep-all");
+    expect(getComputedStyle(ja).wordBreak).toBe("normal");
+    expect(getComputedStyle(zh).wordBreak).toBe("normal");
+
+    // --font-cjk-sans is re-pointed per :lang() — the DECLARED face list
+    // differs by locale, which is what the fallback seam actually ships.
+    expect(getComputedStyle(ja).fontFamily).toContain("Hiragino Sans");
+    expect(getComputedStyle(zh).fontFamily).toContain("PingFang SC");
+    expect(getComputedStyle(ko).fontFamily).toContain("Apple SD Gothic Neo");
+
+    // Korean's word-break: keep-all must produce a RENDERED wrap-position
+    // difference. Measure bounding height via getClientRects — if the seam
+    // (word-break: keep-all) doesn't change the wrap, the height stays the
+    // same. Find the corresponding "without the seam" panel by the section's
+    // sibling figure.
+    const koSection = canvas.getByTestId("cjk-with-seam-ko").closest("section");
+    if (!koSection) throw new Error("Korean section not found");
+    const koFigures = Array.from(koSection.querySelectorAll("figure"));
+    if (koFigures.length < 2) throw new Error("Korean figures not found");
+
+    const withSeamFigure = koFigures[1]; // "With the seam" is the second figure
+    const withoutSeamFigure = koFigures[0]; // "Without the seam" is the first figure
+
+    const withSeamP = withSeamFigure.querySelector("p");
+    const withoutSeamP = withoutSeamFigure.querySelector("p");
+
+    if (!withSeamP || !withoutSeamP) {
+      throw new Error("Korean paragraph elements not found");
+    }
+
+    // Measure bounding height: the word-break property should change how the
+    // text wraps, resulting in a different total height.
+    const withSeamHeight = withSeamP.getBoundingClientRect().height;
+    const withoutSeamHeight = withoutSeamP.getBoundingClientRect().height;
+
+    // Assert they differ — word-break: keep-all should prevent word breaks
+    // that would otherwise occur, changing the layout.
+    expect(withSeamHeight).not.toBe(withoutSeamHeight);
+  },
+};

package/src/components/view-toolbar/view-toolbar.stories.tsx

@@ -11,7 +11,15 @@ const meta = {
   title: "Layout/ViewToolbar",
   component: ViewToolbar,
   tags: ["autodocs"],
-  parameters: { layout: "padded" },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "The row above a list, table or board — filters and context on the left, actions on the right. Its controls are ordinary tab stops on purpose: a dense secondary control row that should cost ONE tab stop with arrow-key roving is `Layout/Toolbar`, the component that actually claims the `toolbar` ARIA role. See [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs) and [Docs / View Toolbar Contract](?path=/docs/docs-view-toolbar-contract--docs) (rule R10) for the filter-chip, result-count and control-height rules of this row.",
+      },
+    },
+  },
   argTypes: {
     info: {
       description: "What this view is — shown in a tooltip on the ⓘ trigger.",
@@ -313,6 +321,38 @@ export const KeyboardRemoval: Story = {
   },
 };
 
+/**
+ * `FilterChip`'s `trailing` slot (#284) — a short, non-shrinking secondary
+ * text segment (a count) that CSS truncation can never reach, unlike `label`.
+ * In a narrow container the label truncates with an ellipsis; the count
+ * stays fully visible in its own element.
+ */
+export const FilterChipWithTrailing: Story = {
+  render: () => (
+    <div className="w-[220px]">
+      <FilterChip
+        label="Status: Awaiting downstream reconciliation review"
+        trailing="excluded 1,204"
+        onRemove={() => undefined}
+      />
+    </div>
+  ),
+  play: async ({ canvas, canvasElement }) => {
+    const trailing = await canvas.findByText("excluded 1,204");
+    await expect(trailing).toBeInTheDocument();
+
+    const truncating = canvasElement.querySelector('[class*="truncate"]');
+    await expect(truncating).not.toBeNull();
+    await expect(truncating?.contains(trailing)).toBe(false);
+
+    await expect(
+      canvas.getByRole("button", {
+        name: "Remove filter: Status: Awaiting downstream reconciliation review · excluded 1,204",
+      }),
+    ).toBeInTheDocument();
+  },
+};
+
 /** The same row on `dark`. */
 export const DarkTheme: Story = {
   globals: { theme: "dark" },

package/src/components/view-toolbar/view-toolbar.test.tsx

@@ -208,6 +208,39 @@ describe("FilterChip", () => {
     expect(chip).not.toBeNull();
     expect(ref.current).toBe(chip);
   });
+
+  describe("trailing slot", () => {
+    it("renders trailing in its own element, separate from the truncating label span (#284)", () => {
+      const { container } = render(
+        <FilterChip label="Status: Failed" trailing="excluded 1,204" onRemove={() => undefined} />,
+      );
+      const label = container.querySelector("[data-slot='view-toolbar-filter-chip-label']");
+      const trailing = container.querySelector("[data-slot='view-toolbar-filter-chip-trailing']");
+      expect(label).not.toBeNull();
+      expect(trailing).not.toBeNull();
+      expect(label?.textContent).toBe("Status: Failed");
+      expect(trailing?.textContent).toBe("excluded 1,204");
+      expect(label?.className).toContain("truncate");
+      expect(trailing?.contains(label)).toBe(false);
+      expect(label?.contains(trailing as Node)).toBe(false);
+    });
+
+    it("composes label and trailing into the accessible name", () => {
+      render(
+        <FilterChip label="Status: Failed" trailing="excluded 1,204" onRemove={() => undefined} />,
+      );
+      expect(
+        screen.getByRole("button", { name: "Remove filter: Status: Failed · excluded 1,204" }),
+      ).toBeInTheDocument();
+    });
+
+    it("renders no trailing element when trailing is omitted", () => {
+      const { container } = render(
+        <FilterChip label="Status: Failed" onRemove={() => undefined} />,
+      );
+      expect(container.querySelector("[data-slot='view-toolbar-filter-chip-trailing']")).toBeNull();
+    });
+  });
 });
 
 describe("ResultCount", () => {

package/src/components/view-toolbar/view-toolbar.tsx

@@ -200,6 +200,22 @@ export interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
    * as a sentence fragment out of context (and in a screen reader).
    */
   label: string;
+  /**
+   * Short, non-shrinking secondary text — a count, a unit (`"excluded 1,204"`).
+   * A second text slot rather than folding it into `label` (#284): `label` is
+   * the shrinkable, safe-to-truncate part; `trailing` is short and fixed-width
+   * and must never lose characters to the ellipsis. Same shape as
+   * `TurnStatus`'s and `TerminalWorking`'s `trailing` slot — a fixed-width
+   * companion beside a truncating label. Composed into the accessible name
+   * after `label` (`"Remove filter: <label> · <trailing>"`), so the byte-
+   * identical name from before this slot existed is unchanged.
+   *
+   * Trade-off: `trailing` is `shrink-0`, so an extremely narrow container now
+   * truncates `label` down to nothing before it touches `trailing`. That is
+   * the right default — the count is short and fixed, the label is the long,
+   * prose-shaped part — but it is a choice, not a free win.
+   */
+  trailing?: string;
   /** Remove this filter. The WHOLE chip is the remove control — see below. */
   onRemove: () => void;
 }
@@ -217,7 +233,7 @@ export interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
  * reach for `FacetFilter` (`@elabs-ai/components-data`), not a variant of this.
  */
 export const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip(
-  { label, onRemove, className, onClick, ...props },
+  { label, trailing, onRemove, className, onClick, ...props },
   ref,
 ) {
   const { t } = useLocale();
@@ -227,14 +243,16 @@ export const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(functio
       ref={ref}
       type="button"
       data-slot="view-toolbar-filter-chip"
-      aria-label={t("ui.viewToolbar.removeFilter", { label })}
+      aria-label={t("ui.viewToolbar.removeFilter", {
+        label: trailing ? `${label} · ${trailing}` : label,
+      })}
       className={cn(
         badgeVariants({ variant: "secondary" }),
         "group min-h-6 max-w-full gap-1 ps-2.5 pe-1.5",
         "transition-colors duration-fast ease-standard hover:bg-secondary/70",
         // Badge's own `focus:` ring is dead weight on a <span> but would fire on
         // every MOUSE click here; neutralise it and keep the focus-visible ring.
-        "focus:ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "focus:ring-0 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         "disabled:pointer-events-none disabled:opacity-50",
         className,
       )}
@@ -244,7 +262,22 @@ export const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(functio
       }}
       {...props}
     >
-      <span className="truncate">{label}</span>
+      <span data-slot="view-toolbar-filter-chip-label" className="min-w-0 truncate">
+        {label}
+      </span>
+      {trailing ? (
+        <>
+          <span aria-hidden="true" className="shrink-0 text-muted-foreground">
+            ·
+          </span>
+          <span
+            data-slot="view-toolbar-filter-chip-trailing"
+            className="shrink-0 whitespace-nowrap tabular-nums"
+          >
+            {trailing}
+          </span>
+        </>
+      ) : null}
       <X
         aria-hidden="true"
         className="size-3 shrink-0 opacity-60 transition-opacity duration-fast ease-standard group-hover:opacity-100"

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

@@ -58,6 +58,15 @@ const meta = {
       },
     },
   },
+  // The trigger fills its container by default (no hard-fixed width) — cap
+  // the docs canvas to a realistic form-field width.
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     options: {
       description:

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

@@ -10,10 +10,10 @@
  *   - Search filtering while open
  *   - Keyboard navigation (ArrowDown/Up/Enter/Escape) driving aria-activedescendant
  *   - Virtualizer scroll behavior with 10,000 options
- *   - Six-theme visual correctness
+ *   - Cross-theme visual correctness
  */
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { VirtualSelect } from "./virtual-select";
 import type { VirtualSelectOption } from "./virtual-select";
 
@@ -104,3 +104,29 @@ describe("VirtualSelect defaultValue (uncontrolled)", () => {
     expect(screen.getByText("Gamma")).toBeInTheDocument();
   });
 });
+
+// ---------------------------------------------------------------------------
+// Deferred autofocus timer — cancelled on unmount (#reviewed)
+// ---------------------------------------------------------------------------
+
+describe("VirtualSelect autofocus timer cleanup", () => {
+  it("cancels the pending search-input autofocus timeout when unmounted before it fires", () => {
+    vi.useFakeTimers();
+    try {
+      const { unmount } = render(<VirtualSelect options={OPTIONS} />);
+      const trigger = screen.getByRole("combobox");
+      // Opening schedules a deferred `searchRef.current?.focus()`.
+      fireEvent.click(trigger);
+      const pendingBeforeUnmount = vi.getTimerCount();
+      expect(pendingBeforeUnmount).toBeGreaterThan(0);
+
+      unmount();
+
+      // The pending timer must be cancelled on unmount — left uncancelled, it
+      // stays scheduled and fires later against a torn-down `searchRef`.
+      expect(vi.getTimerCount()).toBeLessThan(pendingBeforeUnmount);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});