@elabs-ai/components-data 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elabs-ai/components-data",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,9 +34,9 @@
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "@elabs-ai/components-icons": "4.1.0",
-    "@elabs-ai/components-ui": "4.1.0",
-    "@elabs-ai/components-tokens": "4.1.0"
+    "@elabs-ai/components-icons": "4.2.0",
+    "@elabs-ai/components-tokens": "4.2.0",
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -51,11 +51,11 @@
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "vitest": "^3.0.2",
-    "@elabs-ai/components-icons": "4.1.0",
-    "@elabs-ai/components-tokens": "4.1.0",
     "@elabs-ai/components-eslint-config": "0.1.0",
+    "@elabs-ai/components-icons": "4.2.0",
+    "@elabs-ai/components-tokens": "4.2.0",
     "@elabs-ai/components-typescript-config": "0.1.0",
-    "@elabs-ai/components-ui": "4.1.0"
+    "@elabs-ai/components-ui": "4.2.0"
   },
   "scripts": {
     "build": "tsup",

package/src/__contract__/filter-chip.contract.test.tsx

@@ -0,0 +1,49 @@
+// GENERATED by scripts/gen-contract-tests.mjs — do not edit; re-run the generator instead.
+/**
+ * Contract probe for FilterChip (`packages/data/src/filter-bar/filter-chip.tsx`), derived from its
+ * `Default` story (packages/data/src/filter-bar/filter-chip.stories.tsx). See scripts/gen-contract-tests.mjs.
+ */
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { createRef } from "react";
+import * as stories from "../filter-bar/filter-chip.stories";
+import knownFailuresJson from "../../../../scripts/check/contract-known-failures.json";
+
+afterEach(cleanup);
+
+// Every component here has its own prop/ref/element shape; a generated probe
+// stays generic on purpose (loosely typed, not untyped — see
+// scripts/gen-contract-tests.mjs) rather than re-deriving each one.
+const KNOWN_FAILURES: Record<string, string> = knownFailuresJson;
+const meta = stories.default as { component?: unknown; args?: Record<string, unknown> };
+const Default = (stories as { Default?: { args?: Record<string, unknown> } }).Default;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- probe target; see comment above
+const Component = meta.component as any;
+const args = { ...(meta.args ?? {}), ...(Default?.args ?? {}) };
+const isForwardRefComponent = Component?.["$$typeof"] === Symbol.for("react.forward_ref");
+
+/** Wrap a known, tracked failure in `it.fails` so fixing it forces the key's removal. */
+function contractIt(assertion: string, name: string, fn: () => void) {
+  const key = `data-filterbar-filterchip--default|jsdom|jsdom|${assertion}`;
+  const reason = KNOWN_FAILURES[key];
+  if (reason) return it.fails(`${name} (known failure: ${reason})`, fn);
+  return it(name, fn);
+}
+
+describe("FilterChip contract", () => {
+  it.skipIf(!isForwardRefComponent)("forwards a ref to a DOM element", () => {
+    const ref = createRef<Element>();
+    render(<Component {...args} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(Element);
+  });
+
+  contractIt("className", "merges a caller className onto the root", () => {
+    const { container } = render(<Component {...args} className="contract-probe" />);
+    expect(container.querySelector(".contract-probe")).not.toBeNull();
+  });
+
+  contractIt("data-slot", 'exposes data-slot="filter-chip" on its root', () => {
+    const { container } = render(<Component {...args} />);
+    expect(container.querySelector('[data-slot="filter-chip"]')).not.toBeNull();
+  });
+});

package/src/column-picker/column-picker.tsx

@@ -20,16 +20,17 @@ export interface ColumnPickerProps<TData> extends ButtonHTMLAttributes<HTMLButto
 }
 
 function ColumnPickerInner<TData>(
-  { table, label = "Columns", className, ...props }: ColumnPickerProps<TData>,
+  { table, label, className, ...props }: ColumnPickerProps<TData>,
   ref: Ref<HTMLButtonElement>,
 ) {
   const { t } = useLocale();
+  const resolvedLabel = label ?? t("data.columnPicker.label");
   const columns = table.getAllColumns().filter((c) => c.getCanHide());
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button ref={ref} variant="outline" size="sm" className={cn(className)} {...props}>
-          {label}
+          {resolvedLabel}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="min-w-[12rem]">

package/src/data-table/data-table.stories.tsx

@@ -98,6 +98,21 @@ export const Lines: Story = {
   render: () => <DataTable columns={columns} data={rows} zebra={false} />,
 };
 
+// ─── Column dividers ────────────────────────────────────────────────────────
+
+/**
+ * `columnDividers` adds a quiet `--rule` hairline between columns, in the header
+ * and the body. Off by default; pinned columns keep their own seam instead.
+ */
+export const ColumnDividers: Story = {
+  render: () => <DataTable columns={columns} data={rows} zebra={false} columnDividers />,
+  play: async ({ canvasElement }) => {
+    const header = canvasElement.querySelector("thead th");
+    await expect(header).not.toBeNull();
+    await expect(getComputedStyle(header as Element).borderInlineEndWidth).toBe("1px");
+  },
+};
+
 // ─── Sorted ───────────────────────────────────────────────────────────────────
 
 export const Sorted: Story = {

package/src/data-table/data-table.test.tsx

@@ -592,11 +592,35 @@ describe("DataTable — zebra striping (default) vs lines", () => {
     const rows = container.querySelectorAll("tbody tr");
     expect(rows.length).toBe(3);
     // 2nd row (index 1) is striped; 1st/3rd are not — the stripe is the cue.
-    expect(rows[0]?.className).not.toContain("bg-foreground/5");
-    expect(rows[1]?.className).toContain("bg-foreground/5");
-    expect(rows[2]?.className).not.toContain("bg-foreground/5");
-    // No row carries a divider (a border on a striped region would be redundant).
-    rows.forEach((r) => expect(r.className).not.toContain("border-b"));
+    expect(rows[0]?.className).not.toContain("bg-table-stripe");
+    expect(rows[1]?.className).toContain("bg-table-stripe");
+    expect(rows[2]?.className).not.toContain("bg-table-stripe");
+    // No row carries a fixed divider (a border on a striped region would be
+    // redundant). The only row rule is the theme-gated width, `0px` by default,
+    // for a theme that turns the stripe off.
+    rows.forEach((r) => {
+      const classes = r.className.split(/\s+/);
+      expect(classes).not.toContain("border-b");
+      expect(classes).toContain("border-b-(length:--table-row-rule-width)");
+    });
+  });
+
+  it("draws column dividers only when asked", () => {
+    const plain = render(<DataTable columns={columns} data={data} />);
+    plain.container
+      .querySelectorAll("th, td")
+      .forEach((c) => expect(c.className.split(/\s+/)).not.toContain("border-e"));
+    plain.unmount();
+
+    const { container } = render(<DataTable columns={columns} data={data} columnDividers />);
+    const cells = container.querySelectorAll("thead th, tbody td");
+    expect(cells.length).toBeGreaterThan(0);
+    cells.forEach((c) => {
+      const classes = c.className.split(/\s+/);
+      expect(classes).toContain("border-e");
+      expect(classes).toContain("border-rule");
+      expect(classes).toContain("last:border-e-0");
+    });
   });
 
   it("draws border-strong dividers and no stripes when zebra is disabled", () => {
@@ -605,7 +629,7 @@ describe("DataTable — zebra striping (default) vs lines", () => {
     rows.forEach((r) => {
       expect(r.className).toContain("border-b");
       expect(r.className).toContain("border-border-strong");
-      expect(r.className).not.toContain("bg-foreground/5");
+      expect(r.className).not.toContain("bg-table-stripe");
     });
     // Last row drops its divider so it doesn't double with the container border.
     expect(rows[rows.length - 1]?.className).toContain("last:border-b-0");
@@ -866,6 +890,32 @@ describe("DataTable — #330 the scroll tab stop exists only while the region ov
     simulateScrollMetrics(scrollRegion, { scrollWidth: 800, clientWidth: 900, scrollLeft: 0 });
     expect(scrollRegion).not.toHaveAttribute("tabindex");
   });
+
+  it('gains role="group" once it overflows — a named, non-landmark stop', () => {
+    const { container } = render(<DataTable columns={columns} data={data} />);
+    const scrollRegion = scrollRegionOf(container);
+    // `aria-label` on a plain `<div>` (role `generic`) is not guaranteed to
+    // produce an accessible name at all — the stop needs a naming-capable
+    // role, and `group` (not the `region` landmark, which collides under axe
+    // `landmark-unique` across tables) is it.
+    expect(scrollRegion).not.toHaveAttribute("role");
+    simulateScrollMetrics(scrollRegion, { scrollWidth: 800, clientWidth: 300, scrollLeft: 0 });
+    expect(scrollRegion).toHaveAttribute("role", "group");
+  });
+});
+
+describe("DataTable — virtualized scroll region has a naming-capable role", () => {
+  it('the always-focusable virtualized scroll container carries role="group"', () => {
+    const { container } = render(
+      <DataTable columns={columns} data={data} enableRowVirtualization />,
+    );
+    const scroll = container.querySelector(".overflow-auto");
+    expect(scroll).toHaveAttribute("tabindex", "0");
+    expect(scroll).toHaveAttribute("aria-label");
+    // Same reasoning as the non-virtualized branch above: `aria-label` alone
+    // on a role-less `<div>` is not guaranteed to compute an accessible name.
+    expect(scroll).toHaveAttribute("role", "group");
+  });
 });
 
 describe("DataTable — #330 horizontal-scroll edge-fade affordance", () => {
@@ -1177,7 +1227,7 @@ describe("DataTable — #337 onRowClick + rowClassName", () => {
     const betaRow = screen.getByText("Beta").closest("tr")!;
     expect(betaRow).toHaveClass("is-highlighted");
     // Beta is row index 1 — the zebra stripe class must still be present.
-    expect(betaRow.className).toContain("bg-foreground/5");
+    expect(betaRow.className).toContain("bg-table-stripe");
   });
 
   it("gives a clickable row a pointer cursor and a focus ring driven by its activation button", () => {
@@ -1393,10 +1443,10 @@ describe("DataTable — #333 pinned cells compose with the row wash, not overpai
     expect(odd!.className).toContain("bg-card");
     // Only the striped row re-applies the wash, on the decorative ::before layer
     // — this is the bug #333 reports: a single opaque fill erased the stripe.
-    expect(odd!.className).toContain("before:bg-foreground/5");
-    expect(even!.className).not.toContain("before:bg-foreground/5");
+    expect(odd!.className).toContain("before:bg-table-stripe");
+    expect(even!.className).not.toContain("before:bg-table-stripe");
     // Hover/selected are re-applied from the row group in both cases.
-    expect(even!.className).toContain("group-hover/row:before:bg-foreground/10");
+    expect(even!.className).toContain("group-hover/row:before:bg-table-row-hover");
     expect(container.querySelector("tbody tr")!.className).toContain("group/row");
   });
 
@@ -1411,7 +1461,7 @@ describe("DataTable — #333 pinned cells compose with the row wash, not overpai
     );
     for (const cell of pinned(container, "left")) {
       expect(cell.className).toContain("bg-card");
-      expect(cell.className).not.toContain("before:bg-foreground/5");
+      expect(cell.className).not.toContain("before:bg-table-stripe");
     }
     // The row divider is still the separation cue and is untouched by pinning.
     expect(container.querySelector("tbody tr")!.className).toContain("border-border-strong");

package/src/data-table/data-table.tsx

@@ -415,6 +415,12 @@ export interface DataTableProps<TData, TValue> extends Omit<
    */
   zebra?: boolean;
 
+  /**
+   * Draw a quiet `--rule` hairline between columns (header and body). Off by
+   * default. Pinned cells keep their own seam and never take a divider.
+   */
+  columnDividers?: boolean;
+
   // ── Row drag-reorder (#13) ───────────────────────────────────────────────
   /**
    * Opt-in row drag-reorder. Off by default — an existing table renders
@@ -538,6 +544,14 @@ function isActiveTextSelection(): boolean {
 const PINNED_SEAM_CLASS =
   "after:pointer-events-none after:absolute after:inset-y-0 after:w-px after:bg-border-strong after:content-['']";
 
+/**
+ * Opt-in `columnDividers` hairline. `--rule`, not `--border-strong`: the column
+ * is already told apart by alignment and whitespace, so this line is a
+ * redundant boundary (ADR 0010). A real border is fine here, unlike the pinned
+ * seam above — pinned cells never take it.
+ */
+const COLUMN_DIVIDER_CLASS = "border-e border-rule last:border-e-0";
+
 /**
  * Ids of leaf columns whose ORIGINAL `ColumnDef` declares no `size` (#333).
  *
@@ -835,6 +849,7 @@ function DataTableInner<TData, TValue>(
     maxBodyHeight = "32rem",
 
     zebra = true,
+    columnDividers = false,
 
     // Row drag-reorder (#13)
     enableRowReorder = false,
@@ -1776,7 +1791,7 @@ function DataTableInner<TData, TValue>(
                     // must stay byte-identical to the body's so an
                     // end-aligned numeric column's header lines up with its
                     // own values.
-                    "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
+                    "h-10 px-3 text-start align-middle font-table-header text-muted-foreground",
                     // #69: a numeric column's `meta` overrides the default
                     // `text-start` — placed right after the base string so
                     // tailwind-merge lets it win over that default.
@@ -1811,6 +1826,7 @@ function DataTableInner<TData, TValue>(
                     // it must not read as a "boundary + fill in one class string"
                     // redundancy (separation:check).
                     geometry?.edgeClass,
+                    columnDividers && !geometry && COLUMN_DIVIDER_CLASS,
                   )}
                 >
                   {header.isPlaceholder ? null : canSort ? (
@@ -1967,17 +1983,25 @@ function DataTableInner<TData, TValue>(
    * under virtualization (a CSS `even:`/`odd:` variant would "swim" as the
    * windowed `<tr>`s recycle).
    *
-   * - zebra (default): a gentle `foreground/5` wash on alternate rows is the ONE
+   * - zebra (default): a gentle `--table-stripe` wash on alternate rows is the ONE
    *   separation gesture; rows carry NO divider (#173's strong divider was the cue
    *   only because nothing else was — the stripe replaces it, so a border would now
-   *   be redundant per the surface-separation rule).
+   *   be redundant per the surface-separation rule). A theme that turns the stripe
+   *   off (`--table-stripe: transparent`) sets `--table-row-rule-width` to put the
+   *   strong divider back as the sole cue; it is `0px` by default, so the stock
+   *   stripe carries no border and no extra pixel.
    * - lines (`zebra={false}`): the classic `border-border-strong` divider between
    *   rows; `last:border-b-0` so the final divider doesn't double with the
    *   container's own bottom border (which reads as a heavy edge / shadow).
    */
   function rowSeparationClass(rowIndex: number): string {
     if (!zebra) return "border-b border-border-strong last:border-b-0";
-    return rowIndex % 2 === 1 ? "bg-foreground/5" : "";
+    return cn(
+      "border-b-(length:--table-row-rule-width) border-border-strong last:border-b-0",
+      // Separate cn() argument: the stripe and the (theme-gated) rule are
+      // alternative cues, never both at once — see the jsdoc above.
+      rowIndex % 2 === 1 && "bg-table-stripe",
+    );
   }
 
   /**
@@ -2015,8 +2039,8 @@ function DataTableInner<TData, TValue>(
     return cn(
       "bg-card",
       "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
-      zebra && rowIndex % 2 === 1 && "before:bg-foreground/5",
-      "group-hover/row:before:bg-foreground/10",
+      zebra && rowIndex % 2 === 1 && "before:bg-table-stripe",
+      "group-hover/row:before:bg-table-row-hover",
       "group-data-[state=selected]/row:before:bg-accent",
     );
   }
@@ -2084,7 +2108,7 @@ function DataTableInner<TData, TValue>(
           // (only movement is neutralized); the gated duration-fast/ease-standard
           // pair already collapses toward ~0ms via --motion-factor when the user
           // or OS asks for reduced motion, matching the header sort button.
-          "transition-colors duration-fast ease-standard hover:bg-foreground/10 data-[state=selected]:bg-accent",
+          "transition-colors duration-fast ease-standard hover:bg-table-row-hover data-[state=selected]:bg-accent",
           // #13: the dragged row's live `transform` (set inline via `extras.style`,
           // see `SortableDataRow`) is what actually MOVES it — this class only
           // makes that movement glide instead of snapping, through the gated
@@ -2153,6 +2177,7 @@ function DataTableInner<TData, TValue>(
                 geometry && pinnedCellFillClass(rowIndex),
                 // Separate cn() argument — see pinnedCellGeometry's edgeClass.
                 geometry?.edgeClass,
+                columnDividers && !geometry && COLUMN_DIVIDER_CLASS,
               )}
             >
               {clickable && cellIndex === 0 && (
@@ -2199,7 +2224,11 @@ function DataTableInner<TData, TValue>(
         {visibleColumns.map((column) => (
           <td
             key={column.id}
-            className={cn("px-3 py-2 align-middle", numericColumnClasses(column.columnDef.meta))}
+            className={cn(
+              "px-3 py-2 align-middle",
+              numericColumnClasses(column.columnDef.meta),
+              columnDividers && COLUMN_DIVIDER_CLASS,
+            )}
           >
             <Skeleton className="h-4 w-full" />
           </td>
@@ -2403,8 +2432,13 @@ function DataTableInner<TData, TValue>(
         <div
           ref={scrollRef}
           tabIndex={0}
-          // Names the focus stop (WCAG 4.1.2) without a landmark role — a `role="region"`
-          // here would add a redundant landmark over the inner real <table>.
+          // Names the focus stop (WCAG 4.1.2). A naming-capable role is required
+          // for that name to compute at all — `aria-label` on a plain `<div>`
+          // (role `generic`) is not guaranteed to produce an accessible name.
+          // `group`, not `region`: a landmark per table would be redundant over
+          // the real <table> and collide under axe `landmark-unique` when two
+          // tables share a page.
+          role="group"
           aria-label={t("data.table.scrollRegion")}
           aria-busy={loading || undefined}
           className="relative overflow-auto rounded-lg border bg-card focus-ring"
@@ -2422,7 +2456,7 @@ function DataTableInner<TData, TValue>(
               className="absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80"
             >
               <Spinner aria-hidden="true" className="text-foreground" />
-              <span className="sr-only">Loading table data…</span>
+              <span className="sr-only">{t("data.table.loading")}</span>
             </div>
           )}
           <table
@@ -2468,7 +2502,7 @@ function DataTableInner<TData, TValue>(
             className="absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80"
           >
             <Spinner aria-hidden="true" className="text-foreground" />
-            <span className="sr-only">Loading table data…</span>
+            <span className="sr-only">{t("data.table.loading")}</span>
           </div>
         )}
         {/* The tab stop exists ONLY while the region measurably overflows: without
@@ -2476,13 +2510,18 @@ function DataTableInner<TData, TValue>(
             axe `scrollable-region-focusable`) — but adding it unconditionally would
             give every table that FITS a focus stop that does nothing and announces
             "scrollable" when it isn't. `aria-label` moves with it (WCAG 4.1.2:
-            a name for a stop that exists, none for one that doesn't). No
-            `role="region"` — that would add a redundant landmark over the real
-            <table> inside it. */}
+            a name for a stop that exists, none for one that doesn't) — and
+            `role="group"` moves with BOTH of them: `aria-label` on a plain
+            `<div>` (role `generic`) is not guaranteed to compute into an
+            accessible name, so the stop needs a naming-capable role. `group`,
+            never the `region` landmark: that would be redundant over the real
+            <table> and collide (axe `landmark-unique`) with every other
+            overflowing table on the page. */}
         <div
           ref={plainScrollRef}
           data-slot="data-table-scroll-region"
           tabIndex={scrollOverflows ? 0 : undefined}
+          role={scrollOverflows ? "group" : undefined}
           aria-label={scrollOverflows ? t("data.table.scrollRegion") : undefined}
           onScroll={updateScrollAffordance}
           className="overflow-auto rounded-lg focus-ring-inset"

package/src/facet-filter/facet-filter.stories.tsx

@@ -95,7 +95,10 @@ export const ToolbarAlignment: Story = {
           <SelectItem value="staging">Staging</SelectItem>
         </SelectContent>
       </Select>
-      <DatePicker placeholder="Pick a date" />
+      {/* DatePicker's trigger fills its container by default (`w-full`, like Input), which
+          in a wrapping flex row claims a line of its own. In a toolbar it sizes to its
+          content instead — the same per-toolbar sizing Select and Input get here. */}
+      <DatePicker placeholder="Pick a date" className="w-auto" />
       <Input className="w-40" aria-label="Search services" placeholder="e.g. billing…" />
       <Button variant="outline">Reset</Button>
     </div>

package/src/facet-filter/facet-filter.test.tsx

@@ -57,7 +57,7 @@ describe("FacetFilter — trigger", () => {
 
   /**
    * #346 — the trigger must take Button's DEFAULT size rung, not `sm`, so a
-   * toolbar mixing FacetFilter with Select/Input/DatePicker (all h-9) lines up.
+   * toolbar mixing FacetFilter with Select/Input/DatePicker (all `h-control`) lines up.
    * jsdom applies no Tailwind, so the class rung is what is assertable here; the
    * MEASURED proof lives in the `ToolbarAlignment` story's play function, which
    * compares real `getBoundingClientRect()` boxes in a browser.
@@ -67,8 +67,8 @@ describe("FacetFilter — trigger", () => {
       <FacetFilter title="Status" options={options} selected={[]} onSelectedChange={vi.fn()} />,
     );
     const trigger = screen.getByRole("button", { name: "Status" });
-    expect(trigger).toHaveClass("h-9");
-    expect(trigger).not.toHaveClass("h-8");
+    expect(trigger).toHaveClass("h-control");
+    expect(trigger).not.toHaveClass("h-control-sm");
   });
 });
 

package/src/search-input/search-input.test.tsx

@@ -7,6 +7,7 @@
  * `<input>` (no placeholder-as-label), every keystroke reported to the caller,
  * and a named clear affordance that only exists when there is something to clear.
  */
+import { createRef, useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
 import { SearchInput } from "./search-input";
@@ -29,6 +30,26 @@ describe("SearchInput — accessible name", () => {
     expect(label).not.toBeNull();
     expect(label).toHaveAttribute("for", input.getAttribute("id"));
   });
+
+  it("keeps the label wired to a consumer-supplied id instead of a stale generated one", () => {
+    render(<SearchInput value="" onValueChange={vi.fn()} id="deployment-search" />);
+    const input = screen.getByRole("textbox", { name: "Search" });
+    // The consumer's own `id` used to reach the <input> (via the trailing
+    // `...props` spread) while the <label>'s `htmlFor` kept pointing at an
+    // internally-generated id that no element actually had — breaking the
+    // label/input association `getByRole({ name })` above depends on.
+    expect(input).toHaveAttribute("id", "deployment-search");
+    expect(document.querySelector("label")).toHaveAttribute("for", "deployment-search");
+  });
+});
+
+describe("SearchInput — ref", () => {
+  it("forwards a ref to the underlying <input>", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<SearchInput ref={ref} value="" onValueChange={vi.fn()} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current).toBe(screen.getByRole("textbox", { name: "Search" }));
+  });
 });
 
 describe("SearchInput — value reporting", () => {
@@ -72,6 +93,20 @@ describe("SearchInput — clear affordance", () => {
     const svg = screen.getByRole("button", { name: "Clear search" }).querySelector("svg");
     expect(svg).toHaveAttribute("aria-hidden", "true");
   });
+
+  it("returns keyboard focus to the input after clearing (the button itself unmounts)", () => {
+    function Harness() {
+      const [value, setValue] = useState("billing");
+      return <SearchInput value={value} onValueChange={setValue} />;
+    }
+    render(<Harness />);
+    const clearButton = screen.getByRole("button", { name: "Clear search" });
+    clearButton.focus();
+    fireEvent.click(clearButton);
+    // The clear button is conditionally rendered on `value` — once it
+    // disappears, a browser drops focus to <body> unless something claims it.
+    expect(screen.getByRole("textbox", { name: "Search" })).toHaveFocus();
+  });
 });
 
 describe("SearchInput — composability", () => {

package/src/search-input/search-input.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useId, type InputHTMLAttributes } from "react";
-import { Input } from "@elabs-ai/components-ui";
+import { forwardRef, useId, useRef, type InputHTMLAttributes } from "react";
+import { Input, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { SearchIcon } from "@elabs-ai/components-icons";
 
@@ -11,7 +11,7 @@ export interface SearchInputProps extends Omit<
 > {
   value: string;
   onValueChange: (value: string) => void;
-  /** Visually-hidden accessible label. Defaults to "Search". */
+  /** Visually-hidden accessible label. Defaults to the localized "Search" microcopy. */
   label?: string;
   containerClassName?: string;
 }
@@ -25,31 +25,56 @@ export interface SearchInputProps extends Omit<
  * `<Input>` explicitly AND gates the clear button — while disabled the clear
  * affordance is hidden so it can't mutate the filter mid-request (#269/#8).
  */
-export function SearchInput({
-  value,
-  onValueChange,
-  label = "Search",
-  placeholder = "Search…",
-  className,
-  containerClassName,
-  disabled,
-  ...props
-}: SearchInputProps) {
-  const id = useId();
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(
+  {
+    value,
+    onValueChange,
+    label,
+    placeholder,
+    className,
+    containerClassName,
+    disabled,
+    id: idProp,
+    ...props
+  },
+  forwardedRef,
+) {
+  const { t } = useLocale();
+  const resolvedLabel = label ?? t("data.searchInput.label");
+  const resolvedPlaceholder = placeholder ?? t("data.searchInput.placeholder");
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const setRefs = (node: HTMLInputElement | null) => {
+    inputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+
+  const handleClear = () => {
+    onValueChange("");
+    // The clear button unmounts the instant `value` becomes falsy — without
+    // this, the browser drops focus to <body> instead of leaving it
+    // somewhere the keyboard user can keep typing.
+    inputRef.current?.focus();
+  };
+
   return (
     <div className={cn("relative w-full max-w-xs", containerClassName)}>
       <label htmlFor={id} className="sr-only">
-        {label}
+        {resolvedLabel}
       </label>
       <SearchIcon
         size={16}
         className="pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
       />
       <Input
+        ref={setRefs}
         id={id}
         value={value}
         onChange={(e) => onValueChange(e.target.value)}
-        placeholder={placeholder}
+        placeholder={resolvedPlaceholder}
         disabled={disabled}
         className={cn("ps-8", value && "pe-8", className)}
         {...props}
@@ -57,8 +82,8 @@ export function SearchInput({
       {value && !disabled ? (
         <button
           type="button"
-          onClick={() => onValueChange("")}
-          aria-label="Clear search"
+          onClick={handleClear}
+          aria-label={t("data.searchInput.clear")}
           className="absolute end-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-fast ease-standard hover:text-foreground focus-ring animate-in fade-in zoom-in-95 duration-fast ease-entrance"
         >
           <svg
@@ -78,4 +103,4 @@ export function SearchInput({
       ) : null}
     </div>
   );
-}
+});

package/src/to-csv.test.ts

@@ -82,6 +82,19 @@ describe("toCsv", () => {
     expect(csv).toContain("'@baz");
   });
 
+  it("does NOT quote a plain negative number as an injection risk (#review false positive)", () => {
+    const rows = [{ val: -5 } as unknown as Row];
+    const csv = toCsv(rows);
+    expect(csv).toContain("-5");
+    expect(csv).not.toContain("'-5");
+  });
+
+  it("does not quote a leading-plus number either", () => {
+    const rows = [{ val: "+12.5" } as Row];
+    const csv = toCsv(rows);
+    expect(csv).not.toContain("'+12.5");
+  });
+
   it("null → empty string", () => {
     const rows = [{ val: null } as Row];
     const csv = toCsv(rows);