From 565b46f28783271fa613bc744cb19fbd4373b193 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 08:06:34 -0700
Subject: [PATCH 01/20] =?UTF-8?q?docs:=20spec=20for=20components=20SP3=20?=
 =?UTF-8?q?=E2=80=94=20TextInput=20and=20Checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 ...2026-09-07-components-sp3-inputs-design.md | 222 ++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-09-07-components-sp3-inputs-design.md

diff --git a/docs/superpowers/specs/2026-09-07-components-sp3-inputs-design.md b/docs/superpowers/specs/2026-09-07-components-sp3-inputs-design.md
new file mode 100644
index 00000000..19f19979
--- /dev/null
+++ b/docs/superpowers/specs/2026-09-07-components-sp3-inputs-design.md
@@ -0,0 +1,222 @@
+# Components SP3: TextInput and Checkbox
+
+Date: 2026-09-07
+Status: approved, ready for planning
+
+## Purpose
+
+The third sub-project of the component kit (program and contract:
+`2026-09-04-components-sp1-button-design.md`; the list primitive and the
+select: `2026-09-05-components-sp2-select-design.md`). The grid still renders
+seven native text-like fields in its chrome and seven checkboxes drawn five
+different ways — three native `<input type="checkbox">`s and four hand-built
+`<button role="checkbox">`s that share one stylesheet rule. This spec puts all
+fourteen on two kit components, `PretableTextInput` and `PretableCheckbox`, so
+a consumer styles or replaces every field and every checkbox once.
+
+## Decisions (each confirmed with the user)
+
+1. **Chrome fields only.** The seven filter/search fields migrate. The five
+   cell-editor inputs (text, number, date, the enum editor's combobox input,
+   the multiline `<textarea>`) do not: they are cell-sized, run the editor
+   lifecycle, and the date editor's native popup is its own decision. A later
+   sub-project adopts the kit inside editors.
+2. **Checkbox on `button[role="checkbox"]`, all seven sites.** The model four
+   sites already use (row-select header and row, the Columns section's
+   visibility toggle, the boolean cell control). One kit `Checkbox` absorbs
+   those four and replaces the three native inputs (the filter dialog's enum
+   checklist, the builder's enum checklist, the grouping section's "hide
+   grouped columns"). Mixed state is `aria-checked="mixed"`.
+3. **No Textarea in SP3.** Its only consumer is the multiline cell editor,
+   which is out of scope; a component with no site ships untested against a
+   placement and unmeasured. It lands with the cell-editor sub-project.
+4. **Thin wrappers; sites keep their labels.** Neither component owns a label
+   element. A `<button>` is a labelable element, so the checklist sites keep
+   `<label><Checkbox/>text</label>`: the text names the control and clicking it
+   activates the control. No adornment slots, no clear button, no error slot —
+   nothing in the grid needs them.
+5. **The placement union is renamed.** `PretableButtonSite` →
+   `PretableSite`, `PretableBuiltInButtonSite` → `PretableBuiltInSite`. It
+   names where any kit control sits, not a button's. Pre-1.0, no alias.
+
+Inherited from SP1/SP2 without re-deciding: placement in
+`packages/react/src/components/`; one `components` slot per type, read from
+context as the first statement of a component body; `site` lands as
+`data-pretable-site`; attributes + tokens + `className`/`style` passthrough;
+kit base rules first in `grid.css`, kit state rules last; every migrated site
+keeps its original `data-pretable-*` attribute; the pixel must not move; the
+`createElement`/`Fragment` imports the classic JSX build needs (guarded).
+
+## `PretableTextInput`
+
+`packages/react/src/components/text-input.tsx`, public.
+
+```ts
+export interface PretableTextInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "children"
+> {
+  /** Where in the grid this field is; lands as `data-pretable-site`. */
+  site?: PretableSite;
+}
+```
+
+Renders `<input data-pretable-text-input data-pretable-site={site} …props>`
+with `forwardRef` to the input. It is deliberately the native element: `type`
+(`text`, `number`, `date`, `search`), `inputMode`, `value`, `onChange(e)`,
+`placeholder`, `disabled`, `aria-*` pass straight through. The native date
+picker on `type="date"` stays native (the SP2 "native fallback" that was put
+out of scope; the themes' `color-scheme` still exists for it).
+
+Accessible name: a field may be named by `aria-label`, `aria-labelledby`, or
+a `<label for>`. The kit cannot see the third from props, so it warns in
+development (`warnOnce`) only when the rendered input has none of `aria-label`,
+`aria-labelledby`, or an `id` — checked once after mount through the ref.
+
+## `PretableCheckbox`
+
+`packages/react/src/components/checkbox.tsx`, public.
+
+```ts
+export interface PretableCheckboxProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "type" | "role" | "aria-checked" | "onChange" | "children"
+> {
+  checked: boolean | "mixed";
+  /** The next value. `mixed` toggles to `true`, as the header select-all does. */
+  onCheckedChange: (next: boolean) => void;
+  site?: PretableSite;
+}
+```
+
+Renders `<button type="button" role="checkbox" aria-checked={checked}
+data-pretable-checkbox data-pretable-site={site} …props>` containing
+`<CheckIcon/>` when `true`, `<MinusIcon/>` when `"mixed"`, nothing when
+`false`. `onClick`: the consumer's handler runs first; unless it called
+`preventDefault()`, the kit then calls `onCheckedChange(checked !== true)`.
+That veto is how the row-select cell keeps its shift-click range branch
+without a double toggle. Keyboard is the native button's (Space, Enter); the
+component adds no key handler. `tabIndex`, `disabled`, `aria-busy`,
+`aria-invalid`, `aria-errormessage`, `aria-label` pass through — the boolean
+cell and the row-select roving model need them.
+
+Accessible name: `aria-label` when given, otherwise the wrapping `<label>`.
+The dev warning checks the DOM once after mount: warn when the button has no
+`aria-label`, no `aria-labelledby`, and no `closest("label")`.
+
+## Slots and the site vocabulary
+
+`PretableComponents` gains `TextInput?: PretableTextInputComponent`
+(`ComponentType<PretableTextInputProps & RefAttributes<HTMLInputElement>>`)
+and `Checkbox?: PretableCheckboxComponent`
+(`ComponentType<PretableCheckboxProps & RefAttributes<HTMLButtonElement>>`).
+`useResolvedComponents` gains both — comparison, defaults, literal, deps —
+and the changed-slot test covers each.
+
+`PretableBuiltInSite` gains: `filter-value`, `filter-row-value`,
+`tool-search`, `row-select`, `row-select-all`, `bool-cell`,
+`tool-column-toggle`, `hide-grouped`, `filter-choice`, `filter-row-choice`.
+`PretableButtonProps.site` and `PretableSelectProps.site` retype to
+`PretableSite`. The docs guard's `STRING_UNIONS` entry, the type tests and the
+Components page follow the rename.
+
+## Migration
+
+| site                        | today                                                                                    | becomes                                                                                             |
+| --------------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| filter dialog value/min/max | `<input type={inputType} {...numericProps} data-pretable-filter-value/-min/-max …>`      | `<TextInput site="filter-value" …same props>`                                                       |
+| builder value/min/max       | `<input {...fieldProps} data-pretable-filter-row-value …>`                               | `<TextInput site="filter-row-value" …>`                                                             |
+| Columns search              | `<input data-pretable-tool-search …>`                                                    | `<TextInput site="tool-search" …>`                                                                  |
+| row-select header           | `<button role="checkbox" aria-checked data-pretable-row-select-all onClick={announce…}>` | `<Checkbox site="row-select-all" checked onCheckedChange onClick={existing}>`                       |
+| row-select row              | same, `tabIndex={-1}`, shift-click range in `onClick`                                    | `<Checkbox site="row-select" tabIndex={-1} onClick={…}>`; the range branch calls `preventDefault()` |
+| boolean cell                | `BooleanCellControl`'s button (busy/invalid/disabled/tabIndex -1)                        | `<Checkbox site="bool-cell" …>`; `data-pretable-bool-cell` and its state rules stay                 |
+| column visibility toggle    | `<button role="checkbox" data-pretable-tool-column-toggle>`                              | `<Checkbox site="tool-column-toggle">`                                                              |
+| hide grouped columns        | `<label><input type="checkbox" data-pretable-hide-grouped/>text</label>`                 | `<label><Checkbox site="hide-grouped" data-pretable-hide-grouped/>text</label>`                     |
+| dialog enum checklist       | `<label><input type="checkbox"/>text</label>`                                            | `<label><Checkbox site="filter-choice" data-pretable-filter-choice data-value={…}/>text</label>`    |
+| builder enum checklist      | same                                                                                     | `site="filter-row-choice"`, `data-pretable-filter-row-choice`                                       |
+
+Every existing attribute is kept; the two checklists gain one each. The
+row-select and boolean-cell sites live in `pretable-surface.tsx`, which reads
+the same context (the provider wraps both surface return paths since SP1).
+
+**Test drivers migrate with the sites, once.** Native-checkbox drivers
+(`fireEvent.click(input)`, `.checked`) become a click on the button and a
+shared `checkboxState(el): boolean | "mixed"` helper reading `aria-checked`.
+Text-field drivers are unchanged (`fireEvent.change` on an `<input>` still
+works). In Playwright, `toBeChecked()` reads `aria-checked` on
+`role="checkbox"`, so those assertions survive; `.check()`/`.uncheck()` do not
+and move to a `toggleCheckbox` helper in `e2e/helpers.ts`. No test loses a
+claim.
+
+## CSS
+
+- Kit, first: `[data-pretable-text-input]` takes the field box the select
+  trigger already draws — `box-sizing: border-box`, `border: 1px solid
+var(--pretable-rule)`, `border-radius: var(--pretable-radius-control)`,
+  `background: var(--pretable-bg-grid)`, `color: var(--pretable-text-cell)`,
+  `font: inherit`, `padding-inline: 6px`. `[data-pretable-checkbox]` takes the
+  existing four-site rule verbatim (the 16px square, `--pretable-checkbox-*`
+  tokens, the `[aria-checked="true"]`/`"mixed"` fills, the glyph sizing).
+- State, last: `:focus-visible` ring and `:disabled` ink for both; the
+  forced-colours rule for the checked square retargeted from the four button
+  selectors to `[data-pretable-checkbox][aria-checked]`.
+- Sites keep size, flex and placement only: dialog fields `block-size: 28px;
+padding-inline: 7px; width: 100%`; builder fields `flex: 1 1 auto;
+min-inline-size: 24px; block-size: 24px`; the search box its inset. The
+  checklist checkboxes keep their positive-offset ring override as a site state
+  rule (its comment argues why); `bool-cell` keeps its busy/invalid/disabled
+  reveals.
+- The per-site checkbox selector list and every `input[data-pretable-…]` /
+  `[…] input` type selector are deleted: an element-type selector stops
+  matching after a migration (the SP2 lesson), and the kit attribute is the
+  hook now.
+- Guards: `TEXT_INPUT_SITES` and `CHECKBOX_SITES` join the site guard with
+  their owned lists and OWN entries; kit guards for both components assert the
+  declarations above; the bracket guard anchors on both base rules with
+  `/selector\s*\{/`; all mutation-checked.
+
+## Measurement
+
+Before any code changes: the seven fields and the seven checkboxes — computed
+longhands, box, and the focus ring under a real Tab (not `el.focus()`, which
+does not match `:focus-visible` on a button) — plus the checked and mixed
+boxes for the checkboxes. Definition of done: no pixel moves. None is
+expected: the checkbox rule is copied verbatim and the field box matches the
+select trigger's.
+
+## Testing
+
+- **Components** (jsdom): TextInput — attributes, passthrough of `type`,
+  `value`/`onChange`, ref, the name warning (fires with no name, silent with
+  `aria-label`, silent with `id`); Checkbox — attributes and glyph per state,
+  `onCheckedChange` from false/true/mixed, consumer `onClick` veto, ref,
+  `disabled` does not toggle, the name warning (silent inside a `<label>`).
+- **Slots**: both resolve like the others; the deps mutation fails the test.
+- **Override**: `components.TextInput`/`.Checkbox` replace all fourteen sites,
+  including inside the portalled dialog and inside a body cell; all fourteen
+  pinned to the kit component and site name.
+- **Migrated suites**: enum checklists, hide-grouped, row selection
+  (shift-click range still selects a range), boolean cell — re-expressed with
+  no lost claim.
+- **Browser** (`/fixtures/components` gains both): keyboard toggle via Space
+  in webkit, label-click toggles, shift-click row range, a `type="date"` field
+  is still an `input[type=date]`. `bench:e2e` and the website suites the
+  migration touches.
+- The `jsx-runtime-imports` guard covers the new files automatically.
+
+## Docs
+
+The Components page gains TextInput and Checkbox sections (prop tables
+registered with the api-surface guard, `complete: true`), and the site rename
+lands in its prose and in the guard's `STRING_UNIONS` entry. Sentences that
+describe "a native checkbox" or "the search input" are checked. Changeset:
+minor `@pretable/react` (new exports and slots; the site-type rename; the
+three checklist/hide-grouped checkboxes are `button[role="checkbox"]` now, so
+`.checked`/`.check()` drivers must move to `aria-checked`), patch
+`@pretable/ui`.
+
+## Out of scope
+
+Cell-editor inputs and the textarea, a switch component (hide-grouped stays a
+checkbox), radio, the DOM `indeterminate` property (aria only), form
+association (`name`/`value` submission), adornment slots.

From 288e74b3269c6bc7e19101ad3a4b516c9db7c333 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 13:50:10 -0700
Subject: [PATCH 02/20] docs: components SP3 implementation plan

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../plans/2026-09-07-components-sp3-inputs.md | 580 ++++++++++++++++++
 1 file changed, 580 insertions(+)
 create mode 100644 docs/superpowers/plans/2026-09-07-components-sp3-inputs.md

diff --git a/docs/superpowers/plans/2026-09-07-components-sp3-inputs.md b/docs/superpowers/plans/2026-09-07-components-sp3-inputs.md
new file mode 100644
index 00000000..bfaba6e1
--- /dev/null
+++ b/docs/superpowers/plans/2026-09-07-components-sp3-inputs.md
@@ -0,0 +1,580 @@
+# Components SP3: TextInput and Checkbox Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Put the grid's seven chrome text fields and seven checkboxes on two kit components, `PretableTextInput` and `PretableCheckbox`, on the SP1/SP2 contract — every site keeps its attribute, every test keeps its claim, and no pixel moves except the three native checkboxes that deliberately become the kit's 16px square.
+
+**Architecture:** `components/text-input.tsx` is the native `<input>` plus `data-pretable-text-input`/`data-pretable-site` and a dev name-warning that inspects the DOM after mount (a `<label for>` cannot be seen from props). `components/checkbox.tsx` is `<button type="button" role="checkbox" aria-checked>` with the check/minus glyph, `checked: boolean | "mixed"`, `onCheckedChange(next)`, and a consumer `onClick` that runs first and can veto with `preventDefault()` (the row-select shift-range branch). `PretableComponents` gains `TextInput` and `Checkbox` slots. The placement union is renamed `PretableSite` / `PretableBuiltInSite` and gains ten names. Kit CSS: `[data-pretable-text-input]` takes the field box; `[data-pretable-checkbox]` takes the existing four-site checkbox rule verbatim; site rules keep size/flex/placement; element-type selectors (`input[...]`, `button[...]`) are deleted.
+
+**Tech Stack:** React 18/19 (`forwardRef`), TypeScript, vitest + testing-library (jsdom), Playwright (website + bench), api-extractor, changesets. Vanilla CSS in `packages/*`.
+
+**Spec:** `docs/superpowers/specs/2026-09-07-components-sp3-inputs-design.md`. Contract and traps: `2026-09-04-components-sp1-button-design.md`, `2026-09-05-components-sp2-select-design.md`, memory notes `project-components-kit-sp1/sp2`, `reference-classic-jsx-fragment-trap`.
+
+**Repo rules that bite here:**
+
+- Repo root for every verification. `pnpm build` before `pnpm api`. Only ONE agent builds at a time. `apps/website` reads `packages/react/dist`: rebuild the package before `next build` or an e2e "regression" is a stale dist.
+- `packages/react`'s `pnpm test` supplies `--environment jsdom`; a bare `vitest run` fails on `document`.
+- Classic JSX build: keep `createElement` (and `Fragment` where `<>` is used) imported in every shipped `.tsx` — `jsx-runtime-imports.test.ts` enforces it.
+- `useEffect(() => setState(...))` is a lint ERROR; adjust state during render or use refs.
+- Mutation-check every guard and say so in the commit. Revert probes by re-editing, never `git checkout -- file`.
+- `usePretableComponents()` is the FIRST statement of a component body.
+- A programmatic `el.focus()` does not match `:focus-visible` on a button; measure rings with a real Tab.
+- Never `git stash`; never touch `~/repos/pretable`. Attribution: `Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>`.
+
+---
+
+## File structure
+
+**Create**
+
+| file | responsibility |
+| --- | --- |
+| `packages/react/src/components/checkbox.tsx` | `PretableCheckbox`, `PretableCheckboxProps` — public |
+| `packages/react/src/components/text-input.tsx` | `PretableTextInput`, `PretableTextInputProps` — public |
+| `packages/react/src/components/accessible-name.ts` | `hasAccessibleName(el)` — the DOM check both dev warnings share (internal) |
+| `packages/react/src/__tests__/components-checkbox.test.tsx`, `components-text-input.test.tsx` | component behaviour |
+| `packages/react/src/__tests__/checkbox-helpers.ts` | `checkboxState(el)` for jsdom drivers (not a test file) |
+| `type-tests/react/components-inputs.types.tsx` | the compile-time contract |
+
+**Modify**
+
+| file | change |
+| --- | --- |
+| `packages/react/src/components/button.tsx` | `PretableBuiltInButtonSite` → `PretableBuiltInSite`, `PretableButtonSite` → `PretableSite`, ten new names |
+| `packages/react/src/components/select.tsx`, `context.ts`, `public_api.ts`, `react.api.md` | rename; slots; exports |
+| `packages/react/src/filter-menu/FilterMenu.tsx` | 3 fields → `TextInput`; checklist → `Checkbox` |
+| `packages/react/src/tool-panel/filters/FilterRow.tsx` | 3 fields → `TextInput`; checklist → `Checkbox` |
+| `packages/react/src/tool-panel/ColumnsSection.tsx` | search → `TextInput`; column toggle → `Checkbox` |
+| `packages/react/src/tool-panel/grouping/GroupingSection.tsx` | hide-grouped → `Checkbox` |
+| `packages/react/src/editors/BooleanCellControl.tsx` | renders `Checkbox` |
+| `packages/react/src/pretable-surface.tsx` | row-select header + row → `Checkbox` |
+| `packages/ui/grid.css`, `packages/ui/src/__tests__/css-cascade.test.ts` | kit rules, site collapse, guards |
+| jsdom suites: `pretable-surface-boolean`, `scoped-labels`, `filter-menu`, `tool-panel`, `tool-panel-grouping-controls`, `row-selection-callback`, `indexed-rendering`, `hidden-column-grouping-roundtrip`, `filter-builder`, `attribute-contract`, `tool-panel-aggregates-picker`, `row-select-streaming-layout-cost`, `components-override`, `components-button` | drivers; slot/site pins |
+| `apps/website/e2e/helpers.ts` + `smoke`, `tool-panel`, `grid-keyboard-a11y`, `server-data`, `grouping`, `csv-export` specs; `apps/website/app/fixtures/components/page.tsx`; `apps/website/e2e/components.spec.ts` | `toggleCheckbox`; driver migration; fixture proof |
+| `apps/website/content/docs/grid/components.mdx` (+ any page naming the site type or "native checkbox"), `apps/website/lib/docs/__tests__/docs-api-surface.test.ts` | sections; rename; registrations |
+| `type-tests/react/components-button.types.tsx`, `components-select.types.tsx` | rename |
+| `.changeset/components-sp3-inputs.md` | minor react, patch ui |
+
+---
+
+### Task 1: Baseline the fourteen controls before anything moves
+
+**Files:** scratch only — `<scratchpad>/measure-inputs.mjs`, `<scratchpad>/inputs-before.json`. (`<scratchpad>` = the session scratch dir given to the agent.) `<scratchpad>/measure-selects.mjs` from SP2 is the navigation precedent: read it.
+
+- [ ] **Step 1: Build and serve** — `pnpm build`, then `(cd apps/website && pnpm exec next start -p 3117 > /tmp/pt-server.log 2>&1 &)`; curl `/` → 200.
+
+- [ ] **Step 2: Write the script.** For each control record `rest` (the PROPS list from SP2's script plus `width`, `height`, `minWidth`, `margin*`, `padding*`, `outline*`, `accentColor`, `appearance`), `box`, and — for checkboxes — the `checked` and `mixed` boxes where the site can show them, and the focus outline under a REAL Tab: focus a neighbour, `page.keyboard.press("Tab")` (or `Shift+Tab`) until `document.activeElement` is the target, then read `outline`/`outlineOffset`. Targets and navigation:
+
+| key | page / steps | selector |
+| --- | --- | --- |
+| `filter-value` | `/` → hover header → click "Filter Symbol" funnel | `[data-pretable-filter-value]` |
+| `filter-min`, `filter-max` | `/` → funnel on a NUMBER column (find one whose dialog shows min/max; `/fixtures/grouping` has `qty`) | `[data-pretable-filter-min]`, `[data-pretable-filter-max]` |
+| `filter-choice` | funnel on an ENUM column (the fixture with a `type: "enum"` column — grep `apps/website/app/fixtures` for `enum`) | `[data-pretable-filter-set] input[type="checkbox"]` (first) |
+| `filter-row-value` | `/docs/grid/tool-panel` figure "The filters section" (pane pre-open) → "+ filter" | `input[data-pretable-filter-row-value]` |
+| `filter-row-choice` | same page: change the row's column picker to an enum column via `[data-pretable-listbox] [data-value=…]` | `div[data-pretable-filter-row-value] input[type="checkbox"]` (first) |
+| `tool-search` | any tool panel, Columns tab | `[data-pretable-tool-search]` |
+| `tool-column-toggle` | Columns tab | `[data-pretable-tool-column-toggle]` (first) — also record one with `aria-checked="true"` and one `"false"` |
+| `hide-grouped` | `/fixtures/grouping` grouping tab | `input[data-pretable-hide-grouped]` |
+| `row-select`, `row-select-all` | a page with row selection on (grep fixtures/e2e for `data-pretable-row-select`; `smoke.spec.ts` knows one) | `[data-pretable-row-select]` first row; `[data-pretable-row-select-all]`; click one row to get `true`, click all for header `true`, one for `mixed` |
+| `bool-cell` | a page with a boolean column (`pretable-surface-boolean` fixture in e2e/docs — grep `data-pretable-bool-cell` in apps/website) | `[data-pretable-bool-cell]` checked and unchecked |
+
+Print `MISSING: …` for any null; a baseline with a hole proves nothing. Accept an `AFTER=1` env that swaps the three native checkbox selectors to `[data-pretable-filter-choice]`, `[data-pretable-filter-row-choice]`, `[data-pretable-hide-grouped]` (the button form) so Task 10 runs the identical script.
+
+- [ ] **Step 3: Run** — `cp <scratchpad>/measure-inputs.mjs apps/website/measure.tmp.mjs && (cd apps/website && node measure.tmp.mjs <scratchpad>/inputs-before.json); rm -f apps/website/measure.tmp.mjs` → `all 14 controls measured`. Stop the server; `git status --short` clean. No commit.
+
+---
+
+### Task 2: Rename the site vocabulary and add the ten names
+
+**Files:** `packages/react/src/components/button.tsx`, `select.tsx`, `public_api.ts`; `type-tests/react/components-button.types.tsx`, `components-select.types.tsx`; `apps/website/lib/docs/__tests__/docs-api-surface.test.ts` (the `STRING_UNIONS` entry `react/PretableBuiltInButtonSite` → `react/PretableBuiltInSite`, its comment "sixteen names" → "twenty-six", naming the ten); `apps/website/content/docs/grid/components.mdx` (every `PretableButtonSite`/`PretableBuiltInButtonSite` mention); `packages/react/react.api.md` via `pnpm api`.
+
+- [ ] **Step 1:** In `button.tsx` rename both types (keep the JSDoc; retitle it "where a kit control sits") and append to the union, with a comment "the input and checkbox sites (SP3)":
+```ts
+  | "filter-value"
+  | "filter-row-value"
+  | "tool-search"
+  | "row-select"
+  | "row-select-all"
+  | "bool-cell"
+  | "tool-column-toggle"
+  | "hide-grouped"
+  | "filter-choice"
+  | "filter-row-choice";
+```
+`PretableButtonProps.site?: PretableSite`; in `select.tsx` `site?: PretableSite`. `public_api.ts`: export the new names. Grep the whole repo (`git grep -n "ButtonSite"`) and rename every hit outside CHANGELOGs and `docs/superpowers`.
+- [ ] **Step 2:** In `components-button.types.tsx` the open-union assertion becomes `Expect<Equal<PretableSite, PretableBuiltInSite | (string & {})>>`; in `components-select.types.tsx` the `Extract<PretableBuiltInSite, …four…>` assertion stays and gains the ten (mutation-check by removing one name → tsc fails; restore).
+- [ ] **Step 3:** `pnpm build && pnpm api && pnpm api:check && pnpm typecheck && pnpm typecheck:public; echo exit:$?` → 0; api.md diff shows the rename and the ten names only. `cd apps/website && pnpm exec vitest run --environment jsdom lib/docs` green (fix the guard's entry name, never loosen).
+- [ ] **Step 4:** Commit `refactor(react): the site vocabulary is PretableSite, and it names the input and checkbox sites`.
+
+---
+
+### Task 3: `PretableCheckbox`
+
+**Files:** create `packages/react/src/components/accessible-name.ts`, `components/checkbox.tsx`, `src/__tests__/components-checkbox.test.tsx`, `src/__tests__/checkbox-helpers.ts`.
+
+- [ ] **Step 1: the helpers**
+
+```ts
+// packages/react/src/components/accessible-name.ts
+/**
+ * Whether a rendered control has an accessible name from the sources the kit
+ * cannot see in props: `aria-label`, `aria-labelledby`, or a wrapping/for
+ * `<label>`. Called once after mount by the dev warnings; never in a hot path.
+ */
+export function hasAccessibleName(el: HTMLElement): boolean {
+  if ((el.getAttribute("aria-label") ?? "").trim() !== "") return true;
+  if ((el.getAttribute("aria-labelledby") ?? "").trim() !== "") return true;
+  if (el.closest("label")) return true;
+  const id = el.id;
+  if (id && el.ownerDocument.querySelector(`label[for="${CSS.escape(id)}"]`)) return true;
+  return false;
+}
+```
+(jsdom has `CSS.escape`? Check; if not, fall back to a simple quote-escape and say so.)
+
+```ts
+// packages/react/src/__tests__/checkbox-helpers.ts
+/** The kit checkbox's state, from the attribute it renders for exactly this. */
+export function checkboxState(el: Element): boolean | "mixed" {
+  const v = el.getAttribute("aria-checked");
+  return v === "mixed" ? "mixed" : v === "true";
+}
+```
+
+- [ ] **Step 2: failing tests**
+
+```tsx
+// packages/react/src/__tests__/components-checkbox.test.tsx
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { createElement, createRef } from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { PretableCheckbox } from "../components/checkbox";
+import { resetDevWarnings } from "../dev-warn";
+import { checkboxState } from "./checkbox-helpers";
+
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+beforeEach(() => { resetDevWarnings(); });
+
+describe("PretableCheckbox", () => {
+  test("is a button with the checkbox role, the kit attributes and the glyph per state", () => {
+    const { rerender, getByRole } = render(
+      <PretableCheckbox aria-label="Pick" checked={false} onCheckedChange={() => {}} site="hide-grouped" data-pretable-hide-grouped="" />,
+    );
+    const box = getByRole("checkbox", { name: "Pick" });
+    expect(box.tagName).toBe("BUTTON");
+    expect(box).toHaveAttribute("type", "button");
+    expect(box).toHaveAttribute("aria-checked", "false");
+    expect(box).toHaveAttribute("data-pretable-checkbox", "");
+    expect(box).toHaveAttribute("data-pretable-site", "hide-grouped");
+    expect(box).toHaveAttribute("data-pretable-hide-grouped", "");
+    expect(box.querySelector("[data-pretable-icon]")).toBeNull();
+    rerender(<PretableCheckbox aria-label="Pick" checked onCheckedChange={() => {}} />);
+    expect(checkboxState(box)).toBe(true);
+    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+    rerender(<PretableCheckbox aria-label="Pick" checked="mixed" onCheckedChange={() => {}} />);
+    expect(box).toHaveAttribute("aria-checked", "mixed");
+    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+  });
+
+  test("a click reports the next value: false→true, true→false, mixed→true", () => {
+    const onCheckedChange = vi.fn();
+    const { rerender, getByRole } = render(<PretableCheckbox aria-label="Pick" checked={false} onCheckedChange={onCheckedChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onCheckedChange).toHaveBeenLastCalledWith(true);
+    rerender(<PretableCheckbox aria-label="Pick" checked onCheckedChange={onCheckedChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onCheckedChange).toHaveBeenLastCalledWith(false);
+    rerender(<PretableCheckbox aria-label="Pick" checked="mixed" onCheckedChange={onCheckedChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onCheckedChange).toHaveBeenLastCalledWith(true);
+    expect(onCheckedChange).toHaveBeenCalledTimes(3);
+  });
+
+  test("a consumer onClick runs first and can veto the toggle with preventDefault", () => {
+    const onCheckedChange = vi.fn();
+    const order: string[] = [];
+    const { getByRole } = render(
+      <PretableCheckbox aria-label="Pick" checked={false} onCheckedChange={() => { order.push("toggle"); onCheckedChange(); }}
+        onClick={(e) => { order.push("consumer"); if (e.shiftKey) e.preventDefault(); }} />,
+    );
+    fireEvent.click(getByRole("checkbox"));
+    expect(order).toEqual(["consumer", "toggle"]);
+    fireEvent.click(getByRole("checkbox"), { shiftKey: true });
+    expect(onCheckedChange).toHaveBeenCalledTimes(1); // vetoed
+  });
+
+  test("disabled does not toggle; tabIndex and aria state attributes pass through", () => {
+    const onCheckedChange = vi.fn();
+    const { getByRole } = render(
+      <PretableCheckbox aria-label="Pick" checked={false} onCheckedChange={onCheckedChange} disabled tabIndex={-1} aria-busy="true" aria-invalid="true" />,
+    );
+    const box = getByRole("checkbox");
+    expect(box).toBeDisabled();
+    fireEvent.click(box);
+    expect(onCheckedChange).not.toHaveBeenCalled();
+    expect(box).toHaveAttribute("tabindex", "-1");
+    expect(box).toHaveAttribute("aria-busy", "true");
+    expect(box).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("forwards its ref; className and style pass through", () => {
+    const ref = createRef<HTMLButtonElement>();
+    const { getByRole } = render(<PretableCheckbox ref={ref} aria-label="Pick" checked={false} onCheckedChange={() => {}} className="mine" style={{ margin: 2 }} />);
+    expect(ref.current).toBe(getByRole("checkbox"));
+    expect(ref.current).toHaveClass("mine");
+    expect(ref.current?.style.margin).toBe("2px");
+  });
+
+  test("a wrapping label names it and clicking the label toggles it", () => {
+    const onCheckedChange = vi.fn();
+    const { getByRole, getByText } = render(
+      <label><PretableCheckbox checked={false} onCheckedChange={onCheckedChange} />Hide grouped</label>,
+    );
+    expect(getByRole("checkbox", { name: "Hide grouped" })).toBeInTheDocument();
+    fireEvent.click(getByText("Hide grouped"));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  test("warns in development when nothing names it, and not when a label or aria-label does", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(<PretableCheckbox checked={false} onCheckedChange={() => {}} />);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toMatch(/PretableCheckbox/);
+    warn.mockClear(); resetDevWarnings();
+    render(<label><PretableCheckbox checked={false} onCheckedChange={() => {}} />Named</label>);
+    render(<PretableCheckbox aria-label="Named" checked={false} onCheckedChange={() => {}} />);
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+```
+(jsdom: does clicking a `<label>` dispatch a click on a wrapped `<button>`? It does for labelable elements — verify; if jsdom does not, assert via `label.control === button` instead and keep the click claim for the browser test in Task 12.)
+
+- [ ] **Step 3: run → fails** (`Cannot find module '../components/checkbox'`).
+
+- [ ] **Step 4: implement**
+
+```tsx
+// packages/react/src/components/checkbox.tsx
+/**
+ * The kit's checkbox: a `button[role="checkbox"]`, the model the row-select
+ * cell, the column toggle and the boolean cell already used, now one
+ * component for every site — the three native inputs included. A button
+ * rather than a styled native input because mixed state, the roving
+ * tabindex in body cells and a glyph that takes the theme's tokens are all
+ * plain on a button and fights on an `<input>`.
+ *
+ * Styled by grid.css through `data-pretable-checkbox` and `aria-checked`;
+ * a site's own attribute arrives through the spread. The glyph is the grid's
+ * CheckIcon / MinusIcon. Keyboard is the native button's (Space, Enter): no
+ * key handler here. The consumer's `onClick` runs first and may
+ * `preventDefault()` to veto the toggle — how a shift-click range select
+ * keeps the click without a second write.
+ */
+import { createElement, forwardRef, useEffect, useRef, type ButtonHTMLAttributes, type ReactElement } from "react";
+
+import { warnOnce } from "../dev-warn";
+import { CheckIcon, MinusIcon } from "../icons";
+import { hasAccessibleName } from "./accessible-name";
+import type { PretableSite } from "./button";
+
+/**
+ * Props for {@link PretableCheckbox}.
+ *
+ * @public
+ */
+export interface PretableCheckboxProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "aria-checked" | "onChange" | "children"> {
+  /** The state. `"mixed"` is the header select-all's partial selection. */
+  checked: boolean | "mixed";
+  /** The next value after a click. `"mixed"` toggles to `true`. */
+  onCheckedChange: (next: boolean) => void;
+  /** Where in the grid this checkbox is; lands as `data-pretable-site`. */
+  site?: PretableSite;
+}
+
+/**
+ * A checkbox in the grid's own chrome.
+ *
+ * ```tsx
+ * <label>
+ *   <PretableCheckbox checked={hide} onCheckedChange={setHide} />
+ *   Hide grouped columns
+ * </label>
+ * ```
+ *
+ * @public
+ */
+export const PretableCheckbox = forwardRef<HTMLButtonElement, PretableCheckboxProps>(
+  function PretableCheckbox({ checked, onCheckedChange, site, onClick, ...buttonProps }, ref): ReactElement {
+    const ownRef = useRef<HTMLButtonElement>(null);
+    const setRef = (node: HTMLButtonElement | null) => {
+      ownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    // The name may come from a wrapping <label>, which props cannot see:
+    // check the DOM once, after mount.
+    useEffect(() => {
+      const el = ownRef.current;
+      if (el && !hasAccessibleName(el)) {
+        warnOnce("checkbox-empty-name",
+          "[pretable] <PretableCheckbox> rendered with no accessible name. Give it an aria-label or wrap it in a <label> with text.");
+      }
+    }, []);
+    return (
+      <button
+        {...buttonProps}
+        ref={setRef}
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        data-pretable-checkbox=""
+        data-pretable-site={site}
+        onClick={(e) => {
+          onClick?.(e);
+          if (e.defaultPrevented) return;
+          onCheckedChange(checked !== true);
+        }}
+      >
+        {checked === true ? <CheckIcon /> : checked === "mixed" ? <MinusIcon /> : null}
+      </button>
+    );
+  },
+);
+```
+`MinusIcon` exists in `icons.tsx` (the header uses it) — confirm the export name.
+
+- [ ] **Step 5: run → pass; mutation-check** the veto (remove `if (e.defaultPrevented) return;` → veto test fails) and the mixed→true rule (change to `!checked` → mixed test fails); restore. eslint 0, typecheck 0. Commit `feat(react): PretableCheckbox`.
+
+---
+
+### Task 4: `PretableTextInput`
+
+**Files:** create `components/text-input.tsx`, `__tests__/components-text-input.test.tsx`.
+
+- [ ] **Step 1: failing tests**
+
+```tsx
+// packages/react/src/__tests__/components-text-input.test.tsx
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { createElement, createRef } from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { PretableTextInput } from "../components/text-input";
+import { resetDevWarnings } from "../dev-warn";
+
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+beforeEach(() => { resetDevWarnings(); });
+
+describe("PretableTextInput", () => {
+  test("is the native input carrying the kit attributes; type/inputMode/value/onChange pass through", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <PretableTextInput aria-label="Filter value" site="filter-value" data-pretable-filter-value="" type="text" inputMode="decimal" value="4" onChange={onChange} />,
+    );
+    const input = getByRole("textbox", { name: "Filter value" }) as HTMLInputElement;
+    expect(input.tagName).toBe("INPUT");
+    expect(input).toHaveAttribute("data-pretable-text-input", "");
+    expect(input).toHaveAttribute("data-pretable-site", "filter-value");
+    expect(input).toHaveAttribute("data-pretable-filter-value", "");
+    expect(input).toHaveAttribute("inputmode", "decimal");
+    expect(input.value).toBe("4");
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test("a date field stays a native date input", () => {
+    const { container } = render(<PretableTextInput aria-label="Min" type="date" value="" onChange={() => {}} />);
+    expect(container.querySelector('input[type="date"]')).not.toBeNull();
+  });
+
+  test("forwards its ref; className, style and disabled pass through", () => {
+    const ref = createRef<HTMLInputElement>();
+    const { getByRole } = render(<PretableTextInput ref={ref} aria-label="Q" className="mine" style={{ width: 80 }} disabled />);
+    expect(ref.current).toBe(getByRole("textbox"));
+    expect(ref.current).toHaveClass("mine");
+    expect(ref.current?.style.width).toBe("80px");
+    expect(ref.current).toBeDisabled();
+  });
+
+  test("warns in development when nothing can name it; silent for aria-label, aria-labelledby, or a label-for", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    render(<PretableTextInput />);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(warn.mock.calls[0]?.[0]).toMatch(/PretableTextInput/);
+    warn.mockClear(); resetDevWarnings();
+    render(<PretableTextInput aria-label="A" />);
+    render(<><span id="lbl">B</span><PretableTextInput aria-labelledby="lbl" /></>);
+    render(<><label htmlFor="q">C</label><PretableTextInput id="q" /></>);
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+```
+
+- [ ] **Step 2: run → fails. Step 3: implement**
+
+```tsx
+// packages/react/src/components/text-input.tsx
+/**
+ * The kit's text field: the native `<input>`, no more. Deliberately — the
+ * native element is the accessible one, the date type keeps its native
+ * picker, and what a theme needs is only the box, which grid.css draws
+ * through `data-pretable-text-input`. A site's own attribute arrives through
+ * the spread; `site` lands as `data-pretable-site`.
+ */
+import { createElement, forwardRef, useEffect, useRef, type InputHTMLAttributes, type ReactElement } from "react";
+
+import { warnOnce } from "../dev-warn";
+import { hasAccessibleName } from "./accessible-name";
+import type { PretableSite } from "./button";
+
+/**
+ * Props for {@link PretableTextInput}: the native input's, plus `site`.
+ *
+ * @public
+ */
+export interface PretableTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+  /** Where in the grid this field is; lands as `data-pretable-site`. */
+  site?: PretableSite;
+}
+
+/**
+ * A text field in the grid's own chrome.
+ *
+ * ```tsx
+ * <PretableTextInput aria-label="Filter value" value={text} onChange={(e) => setText(e.target.value)} />
+ * ```
+ *
+ * @public
+ */
+export const PretableTextInput = forwardRef<HTMLInputElement, PretableTextInputProps>(
+  function PretableTextInput({ site, ...inputProps }, ref): ReactElement {
+    const ownRef = useRef<HTMLInputElement>(null);
+    const setRef = (node: HTMLInputElement | null) => {
+      ownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    // A <label for> names it and props cannot see one: check the DOM once.
+    useEffect(() => {
+      const el = ownRef.current;
+      if (el && !hasAccessibleName(el)) {
+        warnOnce("text-input-empty-name",
+          "[pretable] <PretableTextInput> rendered with no accessible name. Give it an aria-label, aria-labelledby, or a <label for> its id.");
+      }
+    }, []);
+    return <input {...inputProps} ref={setRef} data-pretable-text-input="" data-pretable-site={site} />;
+  },
+);
+```
+- [ ] **Step 4: run → pass; mutation-check** the warning (make `hasAccessibleName` ignore `label[for]` → the label-for case warns → test fails; restore). Commit `feat(react): PretableTextInput`.
+
+---
+
+### Task 5: The type contract
+
+**Files:** create `type-tests/react/components-inputs.types.tsx` (imports from SOURCE with the `TEMPORARY … Task 9` marker, as SP2 did). Assert: Checkbox requires `checked` and `onCheckedChange` (`@ts-expect-error` twins), `checked` accepts `"mixed"` and rejects `"yes"`, `type="submit"`/`role`/`children` are errors, `site="row-select"` and `site="mine"` compile, ref is `HTMLButtonElement`; TextInput accepts `type="date"`, `inputMode`, `value`+`onChange`, rejects `children`, ref is `HTMLInputElement`; `Expect<Equal<Extract<PretableBuiltInSite, ten>, ten>>` (mutation-check by removing one). `// prettier-ignore` on single-line directive pairs (SP2 lesson). Commit `test(react): pin the TextInput and Checkbox type contracts`.
+
+---
+
+### Task 6: The two slots
+
+**Files:** `context.ts`, `__tests__/components-button.test.tsx`.
+- [ ] Add `PretableTextInputComponent = ComponentType<PretableTextInputProps & RefAttributes<HTMLInputElement>>` and `PretableCheckboxComponent = ComponentType<PretableCheckboxProps & RefAttributes<HTMLButtonElement>>` (`@public`, JSDoc: a replacement owes a forwarded ref — the boolean cell and row-select are reached through refs? no: say "the search box is focused through its ref by the Columns section" only if true — check `ColumnsSection.tsx`; otherwise say the ref is the styling/measurement handle). `PretableComponents.TextInput?`/`.Checkbox?` with member JSDoc; `Resolved…` required; `DEFAULT_COMPONENTS` both; `useResolvedComponents` four-part edit for each. Tests: two copies of SP2's changed-slot test (one per slot); mutation-check by dropping each dep. Commit `feat(react): the TextInput and Checkbox slots`.
+
+---
+
+### Task 7: Kit CSS and the guards (site guard red by design)
+
+**Files:** `packages/ui/grid.css`, `packages/ui/src/__tests__/css-cascade.test.ts`.
+
+- [ ] **Step 1: guards first.** Add `TEXT_INPUT_SITES = ["filter-value", "filter-row-value", "tool-search"]` and `CHECKBOX_SITES = ["row-select", "row-select-all", "bool-cell", "tool-column-toggle", "hide-grouped", "filter-choice", "filter-row-choice"]`. Site attributes for lookup: the site name suffix (`data-pretable-filter-value` covers the dialog's three fields via the min/max twins — extend the lookup so `filter-value` also matches `[data-pretable-filter-min]`/`[-max]`; `filter-row-value` matches `input[data-pretable-filter-row-value]` — NOTE the builder's checklist wrapper is `div[data-pretable-filter-row-value]`: the guard must look at rules whose selector names the attribute, and the wrapper's rules (`flex-basis: 100%` etc.) are that DIV's own — keep them out of the field's OWN check by matching `input[data-pretable-filter-row-value]`… no: after migration there is no `input` type selector. Resolution: rename the WRAPPER's attribute to `data-pretable-filter-row-set` in FilterRow.tsx and grid.css in Task 8 (grep tests/e2e for `div[data-pretable-filter-row-value]` and update), so the field attribute names only fields. Record this in the commit.) `TEXT_INPUT_OWNED` (forbidden at a site: `border: 1px solid var(--pretable-rule)`, `border-radius`, `background: var(--pretable-bg-grid)`, `color: var(--pretable-text-cell)`, `font: inherit`, `box-sizing`), `CHECKBOX_OWNED` (`width: 16px`, `height: 16px`, `border: 1px solid var(--pretable-checkbox-border)`, `background: var(--pretable-checkbox-bg)`, `border-radius: 3px`, `cursor: pointer`, `display: inline-flex`). OWN: `filter-value` `/block-size:\s*28px/`, `filter-row-value` `/block-size:\s*24px/`, `tool-search` `/inline-size:\s*100%/`, `bool-cell` `/margin:\s*0 auto/`; the other five checkbox sites have NO site rule of their own — the guard's OWN map gets `null` for them meaning "no base rule may exist for this attribute" (a state rule like `:focus-visible` with a positive offset is allowed: exclude `:` pseudo selectors from the base lookup as the loop already does). Kit guards: "the kit text input carries the field box" (the six declarations + `padding-inline: 6px`), "the kit checkbox carries the square" (the CHECKBOX_OWNED list + `[aria-checked="true"]` and `"mixed"` fills + the icon sizing rule), state section has `[data-pretable-text-input]:focus-visible`, `[data-pretable-checkbox]:focus-visible` (ring), `:disabled` for both; forced colours: `[data-pretable-checkbox][aria-checked="true"]`/`"mixed"` → `forced-color-adjust: none; background-color: Highlight; color: HighlightText` (mirror the option rule), and `[data-pretable-text-input]:disabled` in the GrayText list. Bracket guard: anchor both base rules with `/:where\(\[data-pretable-text-input\]\)\s*\{/` and `/:where\(\[data-pretable-checkbox\]\)\s*\{/`; add both site lists. Also assert no element-type selector for these controls remains: `expect(rulesSelecting(css, s => /(^|[\s,(])input\[data-pretable-|(^|[\s,(])button\[data-pretable-(row-select|bool-cell|tool-column-toggle)/.test(s))).toHaveLength(0)` — RED now, green after Task 8.
+- [ ] **Step 2: rules.** In the kit section after the select rules:
+```css
+  /* ---- Kit components: text input --------------------------------------
+     The native input in the grid's box: the same rule border, grid surface
+     and cell ink the select trigger draws, so a field and the picker beside
+     it are one family. Sites keep their size, inset and flex participation. */
+  :where([data-pretable-text-input]) {
+    box-sizing: border-box;
+    padding-inline: 6px;
+    border: 1px solid var(--pretable-rule);
+    border-radius: var(--pretable-radius-control);
+    background: var(--pretable-bg-grid);
+    color: var(--pretable-text-cell);
+    font: inherit;
+  }
+  /* ---- Kit components: checkbox ----------------------------------------
+     The 16px square every checkbox in the grid is — the row-select cell, the
+     header select-all, the boolean cell, the column toggle, the checklists
+     and the hide-grouped switch — from one rule, so a theme edit reaches all
+     of them. aria-checked is the state channel; the glyph is the kit icon. */
+  :where([data-pretable-checkbox]) {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--pretable-checkbox-border);
+    background: var(--pretable-checkbox-bg);
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--pretable-checkbox-checked-fg);
+  }
+  :where([data-pretable-checkbox][aria-checked="true"]),
+  :where([data-pretable-checkbox][aria-checked="mixed"]) {
+    background: var(--pretable-checkbox-checked-bg);
+    border-color: var(--pretable-checkbox-checked-bg);
+    color: var(--pretable-checkbox-checked-fg);
+  }
+```
+Delete the old four-site checkbox rules (lines ~866-905) — the comment above them ("The tool panel's visibility toggle is enrolled here…") moves to the kit rule. State section: add both to the ring and disabled lists; forced-colours rules as above; the `GrayText` list gains `[data-pretable-text-input]:disabled`, `[data-pretable-checkbox]:disabled`. Run the ui suite: exactly the site guard + the no-type-selector assertion red. Mutation-check the kit checkbox guard (delete `border-radius: 3px` → fails). Commit `feat(ui): the kit text-input and checkbox rules; the site guard learns fourteen controls`.
+
+---
+
+### Task 8: Migrate the fourteen sites, collapse their CSS, move the drivers
+
+**Files:** the six site files, `grid.css`, `css-cascade.test.ts`, the jsdom suites listed in the file table.
+
+- [ ] **Step 1: text fields.** FilterMenu: `const { Button, Select, TextInput, Checkbox } = usePretableComponents();` — the three `<input type={inputType} {...numericProps} …>` become `<TextInput site="filter-value" type={inputType} {...numericProps} data-pretable-filter-value="" aria-label … value onChange />` (min/max keep `data-pretable-filter-min/-max`). FilterRow: `<TextInput site="filter-row-value" {...fieldProps} data-pretable-filter-row-value="" …>` ×3; the checklist WRAPPER `<div data-pretable-filter-row-value>` → `data-pretable-filter-row-set` (grep `div[data-pretable-filter-row-value]` in grid.css, tests, e2e — update each). ColumnsSection: `<TextInput site="tool-search" data-pretable-tool-search="" …>`.
+- [ ] **Step 2: checkboxes.** FilterMenu checklist: `<label key><Checkbox site="filter-choice" data-pretable-filter-choice="" data-value={opt.value} checked={checked} onCheckedChange={(next) => toggleSelected(opt.value, next)} />{label}</label>`. FilterRow checklist likewise with `filter-row-choice`. GroupingSection: `<label><Checkbox site="hide-grouped" data-pretable-hide-grouped="" checked={hideGroupedColumns} onCheckedChange={() => grid.setHideGroupedColumns(!hideGroupedColumns)} />{label}</label>`. ColumnsSection toggle: `<Checkbox site="tool-column-toggle" data-pretable-tool-column-toggle="" checked={visible} aria-label={…} onCheckedChange={(next) => grid.setColumnVisible(entry.id, next)} />` (delete the manual `<CheckIcon/>` child and the "row-select checkbox's exact recipe" comment — it IS the kit now). BooleanCellControl: `const { Checkbox } = usePretableComponents();` first; render `<Checkbox site="bool-cell" data-pretable-bool-cell="" checked={checked} aria-label={label} aria-busy aria-invalid aria-errormessage disabled={!editable || busy} tabIndex={-1} onClick={(e) => e.stopPropagation()} onCheckedChange={() => onToggle()} />`. pretable-surface header: `<Checkbox site="row-select-all" data-pretable-row-select-all="true" checked={headerCheckState === "true" ? true : headerCheckState === "mixed" ? "mixed" : false} aria-label onClick={(event) => { event.stopPropagation(); …existing body… }} onCheckedChange={() => {}} />` — hmm: the existing onClick DOES the write (`grid.setSelectAllVisible`). Keep the write in `onClick` and call `event.preventDefault()` at its end so the kit toggle is a no-op? Cleaner: move the write into `onCheckedChange(next)` (`setSelectAllVisible(next)`, then the emit/announce logic which reads `setting = next`) and keep `onClick={(e) => e.stopPropagation()}`. Do the cleaner form; the row cell likewise: `onCheckedChange={() => grid.toggleRowSelection(rowId)}` with `onClick` keeping `stopPropagation`, the shift-range branch (`selectRowRange` + `preventDefault()`), and `lastCheckedRowAnchorRef.current = rowId`. Read both blocks fully first; preserve every comment. The surface reads components from context already for Buttons — find that destructure and add `Checkbox`.
+- [ ] **Step 3: CSS collapse.** Dialog: the `input[type="text"], input[type="date"], input:not([type])` rule → `:where([data-pretable-filter-value], [data-pretable-filter-min], [data-pretable-filter-max]) { width: 100%; block-size: 28px; padding-inline: 7px; }` (comment: size and the dialog's 7px inset; the kit draws the box); its focus rule → delete the `input:focus-visible` entry (kit ring). Builder: `input[data-pretable-filter-row-value]` rule → `:where([data-pretable-filter-row-value]) { flex: 1 1 auto; min-inline-size: 24px; block-size: 24px; }`; the checklist wrapper selectors → `[data-pretable-filter-row-set]`; the checklist ring rule `div[…] input:focus-visible` → `:where([data-pretable-filter-row-choice]:focus-visible) { outline-offset: 1px; }` (keep its comment; only the offset is the site's — the ring itself is the kit's); hide-grouped ring likewise → `[data-pretable-hide-grouped]:focus-visible { outline-offset: 1px }`; dialog checklist gets the same positive-offset rule on `[data-pretable-filter-choice]`. `tool-search` rule keeps `inline-size: 100%; margin-block-end: 6px; padding: 5px 7px;` only (comment updated). `bool-cell`: keep `margin: 0 auto; display: flex` (display: flex overrides the kit's inline-flex — allowed? It is a placement declaration; add `display` to the bool-cell OWN allowance rather than the forbidden list, and say why in the guard). Delete every `button[data-pretable-row-select…]` selector. Run the ui suite → all green including Task 7's red guards. Mutation-check: add `border: 1px solid var(--pretable-rule)` to the builder field rule → site guard fails; restore.
+- [ ] **Step 4: jsdom drivers.** For each suite in the table: native `input[type=checkbox]` queries → `[role="checkbox"]`/the site attribute; `fireEvent.click(input)` stays a click (now on the button); `.checked` → `checkboxState(el)`; `toBeChecked()` works on `aria-checked` (testing-library supports role=checkbox); `fireEvent.change(checkbox, …)` (if any) → `fireEvent.click`. `pretable-surface-boolean` (14 hits) and `scoped-labels` (10) are the biggest — read each assertion and re-express with the SAME claim; count `expect(` before/after per file. `components-override.test.tsx`: `kind` gains `"text-input" | "checkbox"`; pin all fourteen sites; override test replaces `TextInput` and `Checkbox` (a `MyCheckbox` that destructures `checked/onCheckedChange/site` away) and proves it inside the portalled dialog (filter-value + filter-choice on an enum column), inside the body (row-select cell, bool cell) and in the pane. `attribute-contract.test.tsx`: add the two new attributes + `data-pretable-filter-row-set`.
+- [ ] **Step 5: run the FULL react suite** (`cd packages/react && pnpm test`), eslint, `pnpm typecheck`. A claim failure is a behaviour change — fix the site. Commit `refactor(react,ui): the fourteen fields and checkboxes render the kit`, listing the wrapper rename and the header select-all write moving into onCheckedChange.
+
+---
+
+### Task 9: Public API + type tests against the package
+- [ ] `public_api.ts`: export `PretableCheckbox`, `PretableTextInput`, their props, `PretableCheckboxComponent`, `PretableTextInputComponent`. `components-inputs.types.tsx` → `@pretable/react` imports + `const c: PretableComponents = { TextInput: PretableTextInput, Checkbox: PretableCheckbox }`. `pnpm build && pnpm api && pnpm api:check && pnpm typecheck:public` → 0; no `(undocumented)` on new symbols (member JSDoc on `checked`, `onCheckedChange`, `site`). Commit.
+
+---
+
+### Task 10: Re-measure and classify
+- [ ] Rebuild, serve, run the Task 1 script with `AFTER=1` → `inputs-after.json`; diff per control/property. Expected classes: (a) rendered-equal on the seven fields (box/padding/border/colours/font unchanged; `display` may read the same); (b) DELIBERATE on the three ex-native checkboxes (`filter-choice`, `filter-row-choice`, `hide-grouped`): UA ~13px box → 16px kit square, UA colours → `--pretable-checkbox-*`, `appearance auto → none`-equivalent — record every value; their labels' row height may change by ≤3px — measure the `<label>` box too and report; (c) FINDING on anything else, esp. the four button checkboxes (must be byte-identical) and the search box. Fix findings in site rules; commit only if CSS changed.
+
+---
+
+### Task 11: Docs
+- [ ] `components.mdx`: `### TextInput` and `### Checkbox` sections after Select (voice of the others; prop tables registered `complete: true` — TextInput's table lists only `site` since the rest are native attributes: say so in prose and register with `complete: true` against `PretableTextInputProps` — the guard reads own members only? Verify how it treats inherited members (SP1's Button table lists `variant`+`site` only, so own-members it is); Checkbox: `checked`, `onCheckedChange`, `site`); Replacing table gains both rows; Styling paragraph gains `[data-pretable-text-input]`, `[data-pretable-checkbox]`, `[aria-checked]`; the intro's "three that ship today" → five. Grep docs for "native checkbox", "the search input", `<input type="checkbox">`, and the row-select checkbox description (`grid/selection.mdx`?) — fix prose. Run docs vitest; mutation-check a table row. Commit.
+
+---
+
+### Task 12: Fixture, e2e helper, spec migrations
+- [ ] Fixture: `FixtureTextInput` (`<input data-fixture-text-input={site} …>`) and `FixtureCheckbox` (`<button data-fixture-checkbox={site} data-fixture-checked={String(checked)} onClick={() => onCheckedChange(checked !== true)}>`), passed in `components`. Helper `toggleCheckbox(page, locator)` = click + `expect(locator).toHaveAttribute("aria-checked", …)`; replace `.check()`/`.uncheck()` everywhere in `apps/website/e2e` (grep found smoke 17, tool-panel 14, grid-keyboard-a11y 9, server-data 3, grouping 3, csv-export 2 hits — most are `toBeChecked`, which keeps working on `role=checkbox`; migrate only what fails, list each). `components.spec.ts`: override test covers a text field and a checkbox in the dialog + the row-select cell; new real-grid test (webkit too): Space toggles hide-grouped from the keyboard; clicking the label text toggles it; shift-click selects a row range (existing smoke/grid tests may already cover — reuse). Build package + website, `--workers=1`, all projects. Commit.
+
+---
+
+### Task 13: Verification, changeset, PR
+- [ ] Root: `pnpm format && pnpm lint && pnpm typecheck && pnpm build && pnpm api && pnpm api:check && pnpm typecheck:public && pnpm test && pnpm bench:e2e` → 0 each; website e2e smoke + touched specs. Changeset `.changeset/components-sp3-inputs.md`: react minor (new components/slots; `PretableButtonSite`→`PretableSite` rename; the three checklist/hide-grouped checkboxes are `button[role=checkbox]` — `.checked`/`.check()` drivers move to `aria-checked`; `data-pretable-filter-row-set` wrapper rename; the header select-all and row-select are kit checkboxes now), ui patch. PR with the honest measurement table (the three deliberate checkbox changes called out), guards mutation-checked, review provenance. Auto-merge is enabled by the controller after the final review.
+
+---
+
+## Self-review against the spec
+
+Purpose/decisions → Tasks 2-8; components → 3, 4 (name warnings via `hasAccessibleName`); slots → 6; site rename → 2; migration table → 8 (plus the `filter-row-set` wrapper rename that the guard forced — a deviation the spec did not foresee, recorded in the changeset); test-driver rule → 8, 12; CSS → 7, 8; measurement → 1, 10 (with the three deliberate changes); testing → 3-8, 12; docs → 11; changeset → 13; out of scope untouched. Names used consistently: `PretableSite`/`PretableBuiltInSite`, `data-pretable-text-input`, `data-pretable-checkbox`, `checkboxState`, `toggleCheckbox`, `hasAccessibleName`, `data-pretable-filter-row-set`, `data-pretable-filter-choice`, `data-pretable-filter-row-choice`.

From 6c698b3c84cc27a3e8969a79bbcbc129cfaf1531 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:10:56 -0700
Subject: [PATCH 03/20] refactor(react): the site vocabulary is PretableSite,
 and it names the input and checkbox sites

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 apps/website/content/docs/grid/components.mdx | 20 ++++++-------
 .../docs/__tests__/docs-api-surface.test.ts   | 12 +++++---
 packages/react/react.api.md                   | 14 ++++-----
 packages/react/src/components/button.tsx      | 29 +++++++++++++-----
 packages/react/src/components/select.tsx      |  4 +--
 packages/react/src/public_api.ts              |  4 +--
 type-tests/react/components-button.types.tsx  |  8 ++---
 type-tests/react/components-select.types.tsx  | 30 ++++++++++++++++---
 8 files changed, 80 insertions(+), 41 deletions(-)

diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index 13d5b1e6..0145d82e 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -24,10 +24,10 @@ button node.
 
 A labelled push-button in one of the grid's two looks.
 
-| Prop      | Type                 | Notes                                                                                       |
-| --------- | -------------------- | ------------------------------------------------------------------------------------------- |
-| `variant` | `"ghost" \| "link"`  | `ghost` is the 24px action with a hover tint; `link` is plain accent text. Default `ghost`. |
-| `site`    | `PretableButtonSite` | Where in the grid the button is; lands as `data-pretable-site`. Open to your own names.     |
+| Prop      | Type                | Notes                                                                                       |
+| --------- | ------------------- | ------------------------------------------------------------------------------------------- |
+| `variant` | `"ghost" \| "link"` | `ghost` is the 24px action with a hover tint; `link` is plain accent text. Default `ghost`. |
+| `site`    | `PretableSite`      | Where in the grid the button is; lands as `data-pretable-site`. Open to your own names.     |
 
 ### IconButton
 
@@ -35,10 +35,10 @@ An icon-only push-button. `aria-label` is **required** — it is the button's
 only accessible name, and omitting it is a compile error rather than an
 accessibility failure discovered later. An empty one warns in development.
 
-| Prop         | Type                 | Notes                                                           |
-| ------------ | -------------------- | --------------------------------------------------------------- |
-| `aria-label` | `string`             | Required. The accessible name.                                  |
-| `site`       | `PretableButtonSite` | Where in the grid the button is; lands as `data-pretable-site`. |
+| Prop         | Type           | Notes                                                           |
+| ------------ | -------------- | --------------------------------------------------------------- |
+| `aria-label` | `string`       | Required. The accessible name.                                  |
+| `site`       | `PretableSite` | Where in the grid the button is; lands as `data-pretable-site`. |
 
 ### Select
 
@@ -88,7 +88,7 @@ import { PretableSelect } from "@pretable/react";
 | `value`      | `string`                          | The committed value. Absent from `options`, it renders as its own label.      |
 | `onChange`   | `(value: string) => void`         | Called with the chosen value, and only when it differs from `value`.          |
 | `aria-label` | `string`                          | Required. The accessible name — name what it chooses, e.g. `Filter operator`. |
-| `site`       | `PretableButtonSite`              | Where in the grid the picker is; lands as `data-pretable-site`.               |
+| `site`       | `PretableSite`                    | Where in the grid the picker is; lands as `data-pretable-site`.               |
 
 ## Styling
 
@@ -143,5 +143,5 @@ menus on the node and returns keyboard focus to it — a replaced `Select`
 owes it too, because the filter dialog focuses its operator picker when it
 opens. Under React 18 that means `forwardRef`; under React 19 a plain `ref`
 prop is enough. The set of built-in `site` names is the
-`PretableBuiltInButtonSite` type and grows additively — a new grid button
+`PretableBuiltInSite` type and grows additively — a new grid control
 may introduce a new site without a major bump.
diff --git a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
index c89a49a1..b70cf100 100644
--- a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
+++ b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
@@ -1775,15 +1775,19 @@ const STRING_UNIONS: Record<string, UnionBinding> = {
   // reader copies.
   "react/PretableBodyStateKind": { page: "server-data/lifecycle.mdx" },
 
-  // The built-in button sites. `grid/components.mdx` names the type as the
+  // The built-in kit sites. `grid/components.mdx` names the type as the
   // vocabulary `site` draws from and says outright that it grows additively —
   // a new grid control may introduce a new site without a major bump. The
-  // sixteen names — twelve buttons plus the four picker sites (the funnel
+  // twenty-six names — twelve buttons, the four picker sites (the funnel
   // and filter-builder operators, the filter-builder column, and the
-  // grouping aggregate) — are the grid's own control inventory rather than a
+  // grouping aggregate), and the ten input and checkbox sites (SP3: the
+  // filter value and filter-row value fields, the tool-panel search field,
+  // row-select and row-select-all, the boolean cell checkbox, the
+  // tool-panel column toggle, hide-grouped, and the filter and filter-row
+  // choice checkboxes) — are the grid's own control inventory rather than a
   // menu a reader picks from, so no page lists them, and there is nothing
   // here to hold a sentence to.
-  "react/PretableBuiltInButtonSite": {
+  "react/PretableBuiltInSite": {
     unenumerated:
       "grid/components.mdx names the type as where `site`'s built-in values come from and states that the set grows additively; no page spells the members out.",
   },
diff --git a/packages/react/react.api.md b/packages/react/react.api.md
index ed781d72..9f0f615b 100644
--- a/packages/react/react.api.md
+++ b/packages/react/react.api.md
@@ -425,7 +425,7 @@ export type PretableBodyStateKind = "loading" | "empty" | "error" | "error-strip
 export type PretableBuiltinAggregate<TValue, TType extends PretableColumnType> = "count" | (TType extends "number" ? NonNullable<TValue> extends number ? "sum" | "avg" | "min" | "max" : never : TType extends "date" ? NonNullable<TValue> extends string ? "min" | "max" : never : never);
 
 // @public
-export type PretableBuiltInButtonSite = "filter-add" | "add-group" | "expand-all" | "collapse-all" | "filter-clear" | "tool-reset" | "filter-funnel" | "column-menu-button" | "tool-row-menu-button" | "chip-remove" | "filter-row-remove" | "tool-group-remove" | "filter-operator" | "filter-row-column" | "filter-row-operator" | "aggregate";
+export type PretableBuiltInSite = "filter-add" | "add-group" | "expand-all" | "collapse-all" | "filter-clear" | "tool-reset" | "filter-funnel" | "column-menu-button" | "tool-row-menu-button" | "chip-remove" | "filter-row-remove" | "tool-group-remove" | "filter-operator" | "filter-row-column" | "filter-row-operator" | "aggregate" | "filter-value" | "filter-row-value" | "tool-search" | "row-select" | "row-select-all" | "bool-cell" | "tool-column-toggle" | "hide-grouped" | "filter-choice" | "filter-row-choice";
 
 // @public
 export const PretableButton: ForwardRefExoticComponent<PretableButtonProps & RefAttributes<HTMLButtonElement>>;
@@ -435,13 +435,10 @@ export type PretableButtonComponent = ComponentType<PretableButtonProps & RefAtt
 
 // @public
 export interface PretableButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
-    site?: PretableButtonSite;
+    site?: PretableSite;
     variant?: PretableButtonVariant;
 }
 
-// @public
-export type PretableButtonSite = PretableBuiltInButtonSite | (string & {});
-
 // @public
 export type PretableButtonVariant = "ghost" | "link";
 
@@ -1354,7 +1351,7 @@ export type PretableIconButtonComponent = ComponentType<PretableIconButtonProps
 // @public
 export interface PretableIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "aria-label"> {
     "aria-label": string;
-    site?: PretableButtonSite;
+    site?: PretableSite;
 }
 
 // @public
@@ -2038,7 +2035,7 @@ export interface PretableSelectProps extends Omit<ButtonHTMLAttributes<HTMLButto
     "aria-label": string;
     onChange: (value: string) => void;
     options: readonly PretableSelectOption[];
-    site?: PretableButtonSite;
+    site?: PretableSite;
     value: string;
 }
 
@@ -2050,6 +2047,9 @@ export interface PretableSetValueInput<TRow extends object, TValue> {
     readonly value: TValue;
 }
 
+// @public
+export type PretableSite = PretableBuiltInSite | (string & {});
+
 // @public
 export type PretableSortDirection = "asc" | "desc" | null;
 
diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index d83f3da9..d7dfa043 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -36,13 +36,14 @@ import { warnOnce } from "../dev-warn";
 export type PretableButtonVariant = "ghost" | "link";
 
 /**
- * Where in the grid a built-in control sits. Each name is the site's own
- * `data-pretable-*` attribute suffix, so there is one vocabulary, not two.
- * Shared by every kit control that takes a `site`, buttons and pickers alike.
+ * Where a kit control sits. Each name is the site's own `data-pretable-*`
+ * attribute suffix, so there is one vocabulary, not two. Shared by every
+ * kit control that takes a `site` — buttons, pickers, inputs, checkboxes
+ * alike.
  *
  * @public
  */
-export type PretableBuiltInButtonSite =
+export type PretableBuiltInSite =
   | "filter-add"
   | "add-group"
   | "expand-all"
@@ -61,7 +62,19 @@ export type PretableBuiltInButtonSite =
   | "filter-operator"
   | "filter-row-column"
   | "filter-row-operator"
-  | "aggregate";
+  | "aggregate"
+  // The input and checkbox sites (SP3): the seven chrome fields and the
+  // seven checkboxes.
+  | "filter-value"
+  | "filter-row-value"
+  | "tool-search"
+  | "row-select"
+  | "row-select-all"
+  | "bool-cell"
+  | "tool-column-toggle"
+  | "hide-grouped"
+  | "filter-choice"
+  | "filter-row-choice";
 
 /**
  * A built-in site, or any string: autocomplete for the grid's own, no type
@@ -70,7 +83,7 @@ export type PretableBuiltInButtonSite =
  *
  * @public
  */
-export type PretableButtonSite = PretableBuiltInButtonSite | (string & {});
+export type PretableSite = PretableBuiltInSite | (string & {});
 
 /**
  * Props for {@link PretableButton}.
@@ -91,7 +104,7 @@ export interface PretableButtonProps extends Omit<
    * `data-pretable-site` passed as a raw attribute is replaced by this
    * prop's value, or removed when the prop is absent.
    */
-  site?: PretableButtonSite;
+  site?: PretableSite;
 }
 
 /**
@@ -116,7 +129,7 @@ export interface PretableIconButtonProps extends Omit<
    * `data-pretable-site` passed as a raw attribute is replaced by this
    * prop's value, or removed when the prop is absent.
    */
-  site?: PretableButtonSite;
+  site?: PretableSite;
 }
 
 /**
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index ca6e5b79..0f186cf9 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -26,7 +26,7 @@ import {
 
 import { warnOnce } from "../dev-warn";
 import { ChevronDownIcon } from "../icons";
-import type { PretableButtonSite } from "./button";
+import type { PretableSite } from "./button";
 import {
   EMPTY_RECT,
   firstEnabledIndex,
@@ -92,7 +92,7 @@ export interface PretableSelectProps extends Omit<
    */
   "aria-label": string;
   /** Where in the grid this picker is; lands as `data-pretable-site`. */
-  site?: PretableButtonSite;
+  site?: PretableSite;
 }
 
 /**
diff --git a/packages/react/src/public_api.ts b/packages/react/src/public_api.ts
index 68a9c302..56c5e9a6 100644
--- a/packages/react/src/public_api.ts
+++ b/packages/react/src/public_api.ts
@@ -30,11 +30,11 @@ export type {
 
 export { PretableButton, PretableIconButton } from "./components/button";
 export type {
-  PretableBuiltInButtonSite,
+  PretableBuiltInSite,
   PretableButtonProps,
-  PretableButtonSite,
   PretableButtonVariant,
   PretableIconButtonProps,
+  PretableSite,
 } from "./components/button";
 export { PretableSelect } from "./components/select";
 export type {
diff --git a/type-tests/react/components-button.types.tsx b/type-tests/react/components-button.types.tsx
index da08c0e3..fc5e6760 100644
--- a/type-tests/react/components-button.types.tsx
+++ b/type-tests/react/components-button.types.tsx
@@ -1,11 +1,11 @@
 import {
   PretableButton,
   PretableIconButton,
-  type PretableBuiltInButtonSite,
+  type PretableBuiltInSite,
   type PretableButtonProps,
-  type PretableButtonSite,
   type PretableComponents,
   type PretableIconButtonProps,
+  type PretableSite,
 } from "@pretable/react";
 import type { Equal, Expect } from "../shared/assert";
 
@@ -28,7 +28,7 @@ import type { Equal, Expect } from "../shared/assert";
 <PretableButton site="filter-clear">x</PretableButton>;
 <PretableButton site="my-app-export">x</PretableButton>;
 export type SiteIsOpenAndKeepsBuiltIns = Expect<
-  Equal<PretableButtonSite, PretableBuiltInButtonSite | (string & {})>
+  Equal<PretableSite, PretableBuiltInSite | (string & {})>
 >;
 
 // The variant is closed.
@@ -45,7 +45,7 @@ const ref = { current: null as HTMLButtonElement | null };
 
 // The props types are what a replacement is written against.
 export type ButtonHasSite = Expect<
-  Equal<PretableButtonProps["site"], PretableButtonSite | undefined>
+  Equal<PretableButtonProps["site"], PretableSite | undefined>
 >;
 export type IconHasName = Expect<
   Equal<PretableIconButtonProps["aria-label"], string>
diff --git a/type-tests/react/components-select.types.tsx b/type-tests/react/components-select.types.tsx
index 8b94bd15..f6cbc2ec 100644
--- a/type-tests/react/components-select.types.tsx
+++ b/type-tests/react/components-select.types.tsx
@@ -1,11 +1,11 @@
 import {
   PretableSelect,
-  type PretableBuiltInButtonSite,
-  type PretableButtonSite,
+  type PretableBuiltInSite,
   type PretableComponents,
   type PretableSelectComponent,
   type PretableSelectOption,
   type PretableSelectProps,
+  type PretableSite,
 } from "@pretable/react";
 import type { Equal, Expect } from "../shared/assert";
 
@@ -63,19 +63,41 @@ const options: readonly PretableSelectOption[] = [
 />;
 // `Extract<Union, X>` over a union containing `(string & {})` is vacuous —
 // pin the built-in union directly, so removing a site from it fails this.
+// Pins all fourteen non-button sites: the four select sites plus the ten
+// input and checkbox sites (SP3).
 export type SelectSitesAreBuiltIn = Expect<
   Equal<
     Extract<
-      PretableBuiltInButtonSite,
+      PretableBuiltInSite,
       | "aggregate"
       | "filter-row-column"
       | "filter-row-operator"
       | "filter-operator"
+      | "filter-value"
+      | "filter-row-value"
+      | "tool-search"
+      | "row-select"
+      | "row-select-all"
+      | "bool-cell"
+      | "tool-column-toggle"
+      | "hide-grouped"
+      | "filter-choice"
+      | "filter-row-choice"
     >,
     | "aggregate"
     | "filter-row-column"
     | "filter-row-operator"
     | "filter-operator"
+    | "filter-value"
+    | "filter-row-value"
+    | "tool-search"
+    | "row-select"
+    | "row-select-all"
+    | "bool-cell"
+    | "tool-column-toggle"
+    | "hide-grouped"
+    | "filter-choice"
+    | "filter-row-choice"
   >
 >;
 
@@ -97,7 +119,7 @@ export type NameIsRequired = Expect<
 
 // `site` accepts the built-ins and any string.
 export type SiteIsOpen = Expect<
-  Equal<PretableSelectProps["site"], PretableButtonSite | undefined>
+  Equal<PretableSelectProps["site"], PretableSite | undefined>
 >;
 
 // The built-in satisfies its own slot type, and a replacement is written

From 16697c35c5d3619a102b79830f66846cf7ec43f7 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:13:19 -0700
Subject: [PATCH 04/20] docs(react): three chrome fields, not seven

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 packages/react/src/components/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index d7dfa043..86ee4fe9 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -63,7 +63,7 @@ export type PretableBuiltInSite =
   | "filter-row-column"
   | "filter-row-operator"
   | "aggregate"
-  // The input and checkbox sites (SP3): the seven chrome fields and the
+  // The input and checkbox sites (SP3): the three chrome fields and the
   // seven checkboxes.
   | "filter-value"
   | "filter-row-value"

From 60d8a7a01ccd5bbe9c8abe8396f141df5d808d36 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:18:09 -0700
Subject: [PATCH 05/20] feat(react): PretableCheckbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The kit's checkbox, one component for the model the row-select cell, the
column toggle and the boolean cell already drew by hand: a
`button[role="checkbox"]` carrying `data-pretable-checkbox` and
`aria-checked`, with the grid's CheckIcon / MinusIcon as the glyph. A
button rather than a styled native input because mixed state, the roving
tabindex in body cells and a themed glyph are all plain on a button and a
fight on an `<input>`.

The consumer's `onClick` runs first and may `preventDefault()` to veto the
toggle — how a shift-click range select keeps its click without a second
write. Keyboard is the native button's, so no key handler.

A name can come from a wrapping `<label>`, which props cannot see, so
`hasAccessibleName` reads the DOM once after mount and warns when nothing
names the control.

Three mutation checks, each restored:
- removing the `defaultPrevented` guard fails the veto test
- `checked !== true` → `!checked` fails the mixed→true assertion
- `hasAccessibleName` ignoring `closest("label")` fails the warning
  test's label case

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../react/src/__tests__/checkbox-helpers.ts   |  17 ++
 .../__tests__/components-checkbox.test.tsx    | 228 ++++++++++++++++++
 .../react/src/components/accessible-name.ts   |  40 +++
 packages/react/src/components/checkbox.tsx    | 154 ++++++++++++
 4 files changed, 439 insertions(+)
 create mode 100644 packages/react/src/__tests__/checkbox-helpers.ts
 create mode 100644 packages/react/src/__tests__/components-checkbox.test.tsx
 create mode 100644 packages/react/src/components/accessible-name.ts
 create mode 100644 packages/react/src/components/checkbox.tsx

diff --git a/packages/react/src/__tests__/checkbox-helpers.ts b/packages/react/src/__tests__/checkbox-helpers.ts
new file mode 100644
index 00000000..d417c12f
--- /dev/null
+++ b/packages/react/src/__tests__/checkbox-helpers.ts
@@ -0,0 +1,17 @@
+/**
+ * Shared reader for the kit checkbox's state. Not a `.test.` file on purpose:
+ * vitest collects by that infix, and this file has no tests of its own.
+ */
+
+/**
+ * The kit checkbox's state, from the attribute it renders for exactly this.
+ *
+ * A `button[role="checkbox"]` has no `.checked`, so every test that used to
+ * read one reads `aria-checked` — which is also the attribute grid.css styles
+ * the glyph and box from, so the assertion and the paint agree by
+ * construction.
+ */
+export function checkboxState(el: Element): boolean | "mixed" {
+  const v = el.getAttribute("aria-checked");
+  return v === "mixed" ? "mixed" : v === "true";
+}
diff --git a/packages/react/src/__tests__/components-checkbox.test.tsx b/packages/react/src/__tests__/components-checkbox.test.tsx
new file mode 100644
index 00000000..981a8c36
--- /dev/null
+++ b/packages/react/src/__tests__/components-checkbox.test.tsx
@@ -0,0 +1,228 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import {
+  createElement,
+  createRef,
+  type MouseEvent as ReactMouseEvent,
+} from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { PretableCheckbox } from "../components/checkbox";
+import { resetDevWarnings } from "../dev-warn";
+import { checkboxState } from "./checkbox-helpers";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+beforeEach(() => {
+  resetDevWarnings();
+});
+
+describe("PretableCheckbox", () => {
+  test("is a button with the checkbox role, the kit attributes and the glyph per state", () => {
+    const { rerender, getByRole } = render(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={() => {}}
+        site="hide-grouped"
+        data-pretable-hide-grouped=""
+      />,
+    );
+    const box = getByRole("checkbox", { name: "Pick" });
+    expect(box.tagName).toBe("BUTTON");
+    expect(box).toHaveAttribute("type", "button");
+    expect(box).toHaveAttribute("aria-checked", "false");
+    expect(box).toHaveAttribute("data-pretable-checkbox", "");
+    expect(box).toHaveAttribute("data-pretable-site", "hide-grouped");
+    // A site's own attribute still arrives through the spread, so nothing
+    // that identified a checkbox before this component stops identifying it.
+    expect(box).toHaveAttribute("data-pretable-hide-grouped", "");
+    expect(box.querySelector("[data-pretable-icon]")).toBeNull();
+
+    rerender(
+      <PretableCheckbox aria-label="Pick" checked onCheckedChange={() => {}} />,
+    );
+    expect(checkboxState(box)).toBe(true);
+    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+
+    rerender(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked="mixed"
+        onCheckedChange={() => {}}
+      />,
+    );
+    expect(box).toHaveAttribute("aria-checked", "mixed");
+    expect(checkboxState(box)).toBe("mixed");
+    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+  });
+
+  test("a click reports the next value: false→true, true→false, mixed→true", () => {
+    const onCheckedChange = vi.fn();
+    const { rerender, getByRole } = render(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+    const box = getByRole("checkbox");
+
+    fireEvent.click(box);
+    expect(onCheckedChange).toHaveBeenLastCalledWith(true);
+
+    rerender(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+    fireEvent.click(box);
+    expect(onCheckedChange).toHaveBeenLastCalledWith(false);
+
+    // The header select-all's partial state: a click on a partial selection
+    // selects everything, it does not clear it.
+    rerender(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked="mixed"
+        onCheckedChange={onCheckedChange}
+      />,
+    );
+    fireEvent.click(box);
+    expect(onCheckedChange).toHaveBeenLastCalledWith(true);
+
+    expect(onCheckedChange).toHaveBeenCalledTimes(3);
+  });
+
+  test("a consumer onClick runs first and can veto the toggle with preventDefault", () => {
+    const order: string[] = [];
+    const onCheckedChange = vi.fn(() => order.push("toggle"));
+    const onClick = vi.fn((e: ReactMouseEvent) => {
+      order.push("consumer");
+      // How a shift-click range select keeps its click without a second
+      // write: it handles the event itself and vetoes the plain toggle.
+      if (e.shiftKey) e.preventDefault();
+    });
+    const { getByRole } = render(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+        onClick={onClick}
+      />,
+    );
+    const box = getByRole("checkbox");
+
+    fireEvent.click(box);
+    expect(order).toEqual(["consumer", "toggle"]);
+    expect(onCheckedChange).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(box, { shiftKey: true });
+    expect(onClick).toHaveBeenCalledTimes(2);
+    expect(onCheckedChange).toHaveBeenCalledTimes(1);
+    expect(order).toEqual(["consumer", "toggle", "consumer"]);
+  });
+
+  test("disabled does not toggle; tabIndex and aria state attributes pass through", () => {
+    const onCheckedChange = vi.fn();
+    const { getByRole } = render(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={onCheckedChange}
+        disabled
+        tabIndex={-1}
+        aria-busy
+        aria-invalid
+      />,
+    );
+    const box = getByRole("checkbox");
+    expect(box).toBeDisabled();
+    expect(box).toHaveAttribute("tabindex", "-1");
+    expect(box).toHaveAttribute("aria-busy", "true");
+    expect(box).toHaveAttribute("aria-invalid", "true");
+
+    fireEvent.click(box);
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  test("forwards its ref; className and style pass through", () => {
+    const ref = createRef<HTMLButtonElement>();
+    const { getByRole } = render(
+      <PretableCheckbox
+        ref={ref}
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={() => {}}
+        className="mine"
+        style={{ margin: "3px" }}
+      />,
+    );
+    const box = getByRole("checkbox");
+    expect(ref.current).toBe(box);
+    // The component sets neither className nor style, so the consumer's IS
+    // the merge.
+    expect(box).toHaveClass("mine");
+    expect(box.style.margin).toBe("3px");
+  });
+
+  test("a wrapping label names it and clicking the label toggles it", () => {
+    const onCheckedChange = vi.fn();
+    const { getByRole, getByText } = render(
+      <label>
+        <PretableCheckbox checked={false} onCheckedChange={onCheckedChange} />
+        Hide grouped
+      </label>,
+    );
+    const box = getByRole("checkbox", { name: "Hide grouped" });
+    expect(box).toBeInTheDocument();
+
+    const label = getByText("Hide grouped").closest("label")!;
+    // A <button> is a labelable element, so the label's labelled control is
+    // the checkbox itself — the activation half of "clicking the label
+    // toggles it".
+    expect(label.control).toBe(box);
+
+    fireEvent.click(label);
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  test("warns in development when nothing names it, and not when a label or aria-label does", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const bare = render(
+      <PretableCheckbox checked={false} onCheckedChange={() => {}} />,
+    );
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toMatch(/PretableCheckbox/);
+    bare.unmount();
+
+    // The warning is once-per-key, so a second unnamed checkbox would say
+    // nothing regardless: clear the set before asserting the named cases.
+    resetDevWarnings();
+    warn.mockClear();
+
+    const labelled = render(
+      <label>
+        <PretableCheckbox checked={false} onCheckedChange={() => {}} />
+        Hide grouped
+      </label>,
+    );
+    expect(warn).not.toHaveBeenCalled();
+    labelled.unmount();
+
+    render(
+      <PretableCheckbox
+        aria-label="Pick"
+        checked={false}
+        onCheckedChange={() => {}}
+      />,
+    );
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/components/accessible-name.ts b/packages/react/src/components/accessible-name.ts
new file mode 100644
index 00000000..96232131
--- /dev/null
+++ b/packages/react/src/components/accessible-name.ts
@@ -0,0 +1,40 @@
+/**
+ * The half of an accessible name a component cannot see in its own props.
+ *
+ * `aria-label` arrives as a prop and is checked in render, the way
+ * `PretableIconButton` checks it. A wrapping `<label>`, a `<label for>`
+ * pointing at the control's id, and an `aria-labelledby` that resolves
+ * elsewhere in the document are all facts about the rendered tree, not the
+ * props — so they can only be read from the DOM, after mount.
+ *
+ * @internal
+ */
+
+/**
+ * Whether a rendered control has an accessible name from any of the sources
+ * the kit can see once it is in the document: `aria-label`,
+ * `aria-labelledby`, a wrapping `<label>`, or a `<label for>` naming its id.
+ *
+ * Deliberately not a full accname computation — this backs a development
+ * warning, so the bar is "would a screen reader have anything to say", and a
+ * false negative that nags is worse than an exotic naming path it misses.
+ * Called once after mount, never in a hot path.
+ *
+ * @internal
+ */
+export function hasAccessibleName(el: HTMLElement): boolean {
+  if ((el.getAttribute("aria-label") ?? "").trim() !== "") {
+    return true;
+  }
+  if ((el.getAttribute("aria-labelledby") ?? "").trim() !== "") {
+    return true;
+  }
+  if (el.closest("label")) {
+    return true;
+  }
+  const { id } = el;
+  if (id && el.ownerDocument.querySelector(`label[for="${CSS.escape(id)}"]`)) {
+    return true;
+  }
+  return false;
+}
diff --git a/packages/react/src/components/checkbox.tsx b/packages/react/src/components/checkbox.tsx
new file mode 100644
index 00000000..23063bf7
--- /dev/null
+++ b/packages/react/src/components/checkbox.tsx
@@ -0,0 +1,154 @@
+/**
+ * The kit's checkbox: a `button[role="checkbox"]`, the model the row-select
+ * cell, the column toggle and the boolean cell already used, now one
+ * component for every site — the three native inputs included.
+ *
+ * A button rather than a styled native input because mixed state, the roving
+ * tabindex in body cells and a glyph that takes the theme's tokens are all
+ * plain on a button and a fight on an `<input>`: `indeterminate` is a DOM
+ * property with no attribute, `tabindex="-1"` on an input still leaves a
+ * focusable box in the tab order's way when it is re-enabled, and the tick is
+ * the user agent's until `appearance: none` throws the whole control away.
+ *
+ * Styled by `@pretable/ui`'s grid.css through `data-pretable-checkbox` and
+ * `aria-checked`; a site's own attribute (`data-pretable-row-select`) still
+ * arrives through the spread, so nothing that identified a checkbox before
+ * this component stops identifying it. The glyph is the grid's `CheckIcon` /
+ * `MinusIcon`, sized from `--pretable-icon-size` like every other.
+ *
+ * Keyboard is the native button's — Space and Enter both activate, and both
+ * arrive as a click — so there is no key handler here. The consumer's
+ * `onClick` runs first and may `preventDefault()` to veto the toggle: how a
+ * shift-click range select keeps its click without a second write.
+ */
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  type ButtonHTMLAttributes,
+  type ReactElement,
+} from "react";
+
+import { warnOnce } from "../dev-warn";
+import { CheckIcon, MinusIcon } from "../icons";
+import { hasAccessibleName } from "./accessible-name";
+import type { PretableSite } from "./button";
+
+/**
+ * Props for {@link PretableCheckbox}.
+ *
+ * @public
+ */
+export interface PretableCheckboxProps extends Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "type" | "role" | "aria-checked" | "onChange" | "children"
+> {
+  /**
+   * The state. `"mixed"` is the header select-all's partial selection — some
+   * rows selected, not all — and renders the minus glyph.
+   */
+  checked: boolean | "mixed";
+  /**
+   * Called with the next value after a click, before anything is written:
+   * this is a controlled component, and `checked` only changes when the
+   * consumer changes it. `"mixed"` toggles to `true`.
+   */
+  onCheckedChange: (next: boolean) => void;
+  /**
+   * Where in the grid this checkbox is; lands as `data-pretable-site`. The
+   * contract attributes are written after the spread, so a
+   * `data-pretable-site` passed as a raw attribute is replaced by this
+   * prop's value, or removed when the prop is absent.
+   */
+  site?: PretableSite;
+}
+
+/**
+ * A checkbox in the grid's own chrome.
+ *
+ * The accessible name may come from an `aria-label` or from a wrapping
+ * `<label>`; with neither, it warns once in development, the way
+ * `PretableIconButton` does.
+ *
+ * ```tsx
+ * <label>
+ *   <PretableCheckbox
+ *     site="hide-grouped"
+ *     checked={hideGrouped}
+ *     onCheckedChange={setHideGrouped}
+ *   />
+ *   Hide grouped columns
+ * </label>
+ * ```
+ *
+ * @public
+ */
+export const PretableCheckbox = forwardRef<
+  HTMLButtonElement,
+  PretableCheckboxProps
+>(function PretableCheckbox(
+  { checked, onCheckedChange, site, onClick, ...buttonProps },
+  ref,
+): ReactElement {
+  const ownRef = useRef<HTMLButtonElement>(null);
+  // One node, two readers: the component's own name check and the
+  // consumer's ref. A merged callback ref, as in `PretableSelect` — writing
+  // `ref` straight onto the button would leave the check with nothing to
+  // read.
+  const setRef = useCallback(
+    (node: HTMLButtonElement | null) => {
+      ownRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  // The name may come from a wrapping <label>, which props cannot see: check
+  // the DOM once, after mount.
+  useEffect(() => {
+    const el = ownRef.current;
+    if (el && !hasAccessibleName(el)) {
+      warnOnce(
+        "checkbox-empty-name",
+        "[pretable] <PretableCheckbox> rendered with no accessible name. " +
+          "A checkbox with no name reads as an unnamed button to a screen " +
+          "reader. Give it an aria-label, or wrap it in a <label> with " +
+          "text, e.g. `Hide grouped columns`.",
+      );
+    }
+  }, []);
+
+  return (
+    <button
+      {...buttonProps}
+      ref={setRef}
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      data-pretable-checkbox=""
+      data-pretable-site={site}
+      onClick={(event) => {
+        // Consumer first, then the toggle: a handler that wants the click
+        // for itself — a shift-click range select — vetoes with
+        // `preventDefault()` and no plain write follows.
+        onClick?.(event);
+        if (event.defaultPrevented) {
+          return;
+        }
+        onCheckedChange(checked !== true);
+      }}
+    >
+      {checked === true ? (
+        <CheckIcon />
+      ) : checked === "mixed" ? (
+        <MinusIcon />
+      ) : null}
+    </button>
+  );
+});

From c0d4c1f8fdea48753367b3304bf4f3ac6095b0c7 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:24:15 -0700
Subject: [PATCH 06/20] feat(react): PretableTextInput
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The kit's text field is the native `<input>` and nothing more. A wrapper
would have to reinterpret `type`, and with it goes the platform's date
picker, `inputMode`'s soft keyboard and the autofill the native element
gets for free. What a theme needs is only the box, which grid.css draws
through `data-pretable-text-input`; `site` lands as `data-pretable-site`
after the spread, and a site's own attribute still arrives through it.

No wrapper, no clear button, no debounce: the three chrome fields that
will use it each own their value semantics, and one owner for all three
would be wrong for two.

The name check is `PretableCheckbox`'s — a merged callback ref so the
component can read its own node, and one post-mount `hasAccessibleName`
call, because a `<label for>` is a fact about the tree and not the props.
That branch is what the new test's label-for case covers; the checkbox
suite only exercises the wrapping label.

Mutation-checked: dropping the `label[for]` branch from
`hasAccessibleName` makes the label-for case warn and the test fail.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../__tests__/components-text-input.test.tsx  | 116 +++++++++++++++++
 packages/react/src/components/text-input.tsx  | 120 ++++++++++++++++++
 2 files changed, 236 insertions(+)
 create mode 100644 packages/react/src/__tests__/components-text-input.test.tsx
 create mode 100644 packages/react/src/components/text-input.tsx

diff --git a/packages/react/src/__tests__/components-text-input.test.tsx b/packages/react/src/__tests__/components-text-input.test.tsx
new file mode 100644
index 00000000..a3e61bba
--- /dev/null
+++ b/packages/react/src/__tests__/components-text-input.test.tsx
@@ -0,0 +1,116 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { createElement, createRef } from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { PretableTextInput } from "../components/text-input";
+import { resetDevWarnings } from "../dev-warn";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+beforeEach(() => {
+  resetDevWarnings();
+});
+
+describe("PretableTextInput", () => {
+  test("is the native input carrying the kit attributes; type/inputMode/value/onChange pass through", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <PretableTextInput
+        aria-label="Filter value"
+        site="filter-value"
+        data-pretable-filter-value=""
+        type="text"
+        inputMode="decimal"
+        value="4"
+        onChange={onChange}
+      />,
+    );
+    const input = getByRole("textbox", {
+      name: "Filter value",
+    }) as HTMLInputElement;
+
+    expect(input.tagName).toBe("INPUT");
+    expect(input).toHaveAttribute("data-pretable-text-input", "");
+    expect(input).toHaveAttribute("data-pretable-site", "filter-value");
+    // A site's own attribute still arrives through the spread, so nothing
+    // that identified a field before this component stops identifying it.
+    expect(input).toHaveAttribute("data-pretable-filter-value", "");
+    expect(input).toHaveAttribute("inputmode", "decimal");
+    expect(input.value).toBe("4");
+
+    fireEvent.change(input, { target: { value: "42" } });
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  test("a date field stays a native date input", () => {
+    // The reason this component is the bare `<input>` and nothing more: a
+    // wrapper that swallowed `type` would take the platform's date picker
+    // away with it.
+    const { container } = render(
+      <PretableTextInput
+        aria-label="On or after"
+        site="filter-value"
+        type="date"
+        value="2026-09-05"
+        onChange={() => {}}
+      />,
+    );
+    const input = container.querySelector('input[type="date"]');
+    expect(input).not.toBeNull();
+    expect(input).toHaveAttribute("data-pretable-text-input", "");
+  });
+
+  test("forwards its ref; className, style and disabled pass through", () => {
+    const ref = createRef<HTMLInputElement>();
+    const { getByRole } = render(
+      <PretableTextInput
+        ref={ref}
+        aria-label="Search"
+        site="tool-search"
+        className="mine"
+        style={{ width: "80px" }}
+        disabled
+      />,
+    );
+    const input = getByRole("textbox", { name: "Search" });
+
+    expect(ref.current).toBe(input);
+    // The component sets neither className nor style, so the consumer's IS
+    // the merge.
+    expect(input).toHaveClass("mine");
+    expect((input as HTMLInputElement).style.width).toBe("80px");
+    expect(input).toBeDisabled();
+  });
+
+  test("warns in development when nothing can name it; silent for aria-label, aria-labelledby, or a label-for", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    render(<PretableTextInput />);
+    expect(warn).toHaveBeenCalledTimes(1);
+    expect(String(warn.mock.calls[0]?.[0])).toMatch(/PretableTextInput/);
+
+    // The warning is once-per-key, so a second unnamed field would say
+    // nothing regardless: clear the set before asserting the named cases.
+    warn.mockClear();
+    resetDevWarnings();
+
+    render(<PretableTextInput aria-label="A" />);
+    render(
+      <div>
+        <span id="lbl">B</span>
+        <PretableTextInput aria-labelledby="lbl" />
+      </div>,
+    );
+    render(
+      <div>
+        <label htmlFor="q">C</label>
+        <PretableTextInput id="q" />
+      </div>,
+    );
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/components/text-input.tsx b/packages/react/src/components/text-input.tsx
new file mode 100644
index 00000000..c96d6587
--- /dev/null
+++ b/packages/react/src/components/text-input.tsx
@@ -0,0 +1,120 @@
+/**
+ * The kit's text field: the native `<input>`, no more. Deliberately — the
+ * native element is the accessible one, so a screen reader, a password
+ * manager and the platform's own autofill all keep working; `type="date"`
+ * keeps its native picker, and `inputMode` keeps the right soft keyboard,
+ * neither of which survives a wrapper that reinterprets `type`. What a theme
+ * needs from this control is only the box, which `@pretable/ui`'s grid.css
+ * draws through `data-pretable-text-input`.
+ *
+ * So there is no wrapper element, no clear button and no debounce here: the
+ * three chrome fields that use it — the filter value, the filter row's value
+ * and the tool panel's search — each own their own value semantics, and a
+ * component that owned them for all three would be wrong for two.
+ *
+ * A site's own attribute (`data-pretable-filter-value`) still arrives through
+ * the spread, so nothing that identified a field before this component stops
+ * identifying it; `site` lands as `data-pretable-site`, written after the
+ * spread so no prop can displace it.
+ */
+import {
+  createElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  type InputHTMLAttributes,
+  type ReactElement,
+} from "react";
+
+import { warnOnce } from "../dev-warn";
+import { hasAccessibleName } from "./accessible-name";
+import type { PretableSite } from "./button";
+
+/**
+ * Props for {@link PretableTextInput}: the native input's, plus `site`.
+ *
+ * @public
+ */
+export interface PretableTextInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "children"
+> {
+  /**
+   * Where in the grid this field is; lands as `data-pretable-site`. A
+   * replacement passed through `components` receives it and can branch on it.
+   * Named `site`, not `role`: `role` is the ARIA attribute on every element.
+   * The contract attributes are written after the spread, so a
+   * `data-pretable-site` passed as a raw attribute is replaced by this
+   * prop's value, or removed when the prop is absent.
+   */
+  site?: PretableSite;
+}
+
+/**
+ * A text field in the grid's own chrome.
+ *
+ * `type`, `inputMode`, `value`, `onChange`, `className`, `style` and every
+ * other input attribute pass straight through — this is the native element,
+ * so a date field is a date field and a numeric filter still asks for the
+ * numeric keyboard.
+ *
+ * The accessible name may come from an `aria-label`, an `aria-labelledby`, or
+ * a `<label for>` naming its id; with none of them, it warns once in
+ * development, the way `PretableCheckbox` does.
+ *
+ * ```tsx
+ * <PretableTextInput
+ *   site="filter-value"
+ *   aria-label="Filter value"
+ *   value={value}
+ *   onChange={(event) => setValue(event.target.value)}
+ * />
+ * ```
+ *
+ * @public
+ */
+export const PretableTextInput = forwardRef<
+  HTMLInputElement,
+  PretableTextInputProps
+>(function PretableTextInput({ site, ...inputProps }, ref): ReactElement {
+  const ownRef = useRef<HTMLInputElement>(null);
+  // One node, two readers: the component's own name check and the consumer's
+  // ref. A merged callback ref, as in `PretableCheckbox` — writing `ref`
+  // straight onto the input would leave the check with nothing to read.
+  const setRef = useCallback(
+    (node: HTMLInputElement | null) => {
+      ownRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref],
+  );
+
+  // A <label for> names it and props cannot see one: check the DOM once,
+  // after mount.
+  useEffect(() => {
+    const el = ownRef.current;
+    if (el && !hasAccessibleName(el)) {
+      warnOnce(
+        "text-input-empty-name",
+        "[pretable] <PretableTextInput> rendered with no accessible name. " +
+          "An unnamed field reads as a bare edit box to a screen reader. " +
+          "Give it an aria-label, an aria-labelledby, or a <label for> its " +
+          "id.",
+      );
+    }
+  }, []);
+
+  return (
+    <input
+      {...inputProps}
+      ref={setRef}
+      data-pretable-text-input=""
+      data-pretable-site={site}
+    />
+  );
+});

From b0bf78c4d32de3fd0121ef3d4cb9e20029efdc6e Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:24:15 -0700
Subject: [PATCH 07/20] test(react): the checkbox glyph test tells check from
 minus; label-for covered
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every glyph in the set carries the same `data-pretable-icon` hook, so
asserting its presence proved only that some icon rendered — the tick and
the minus were interchangeable and the test would not have noticed. It
now reads the drawn `<path d>` and anchors each state against the icon
rendered on its own, plus asserts the two differ.

Mutation-checked: swapping CheckIcon and MinusIcon in checkbox.tsx fails
the test (expected 'M4 8h8' to be 'M3.5 8.5 6.5 11.5 12.5 4.5'); before
this change it passed.

Also adds a `<label for>` case to the warning test, the naming branch the
wrapping-label case does not reach.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../__tests__/components-checkbox.test.tsx    | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/__tests__/components-checkbox.test.tsx b/packages/react/src/__tests__/components-checkbox.test.tsx
index 981a8c36..e12deab2 100644
--- a/packages/react/src/__tests__/components-checkbox.test.tsx
+++ b/packages/react/src/__tests__/components-checkbox.test.tsx
@@ -4,10 +4,12 @@ import {
   createElement,
   createRef,
   type MouseEvent as ReactMouseEvent,
+  type ReactElement,
 } from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import { PretableCheckbox } from "../components/checkbox";
+import { CheckIcon, MinusIcon } from "../icons";
 import { resetDevWarnings } from "../dev-warn";
 import { checkboxState } from "./checkbox-helpers";
 
@@ -42,11 +44,22 @@ describe("PretableCheckbox", () => {
     expect(box).toHaveAttribute("data-pretable-hide-grouped", "");
     expect(box.querySelector("[data-pretable-icon]")).toBeNull();
 
+    // Every glyph in the set carries the same `data-pretable-icon` hook, so
+    // its presence alone cannot tell a tick from a minus — the two states
+    // this control has to distinguish. Read the drawn path instead, and
+    // anchor each against the icon rendered on its own.
+    const glyphPath = () =>
+      box.querySelector("[data-pretable-icon] path")?.getAttribute("d") ?? null;
+    const iconPath = (icon: ReactElement) =>
+      render(icon).container.querySelector("path")?.getAttribute("d") ?? null;
+
     rerender(
       <PretableCheckbox aria-label="Pick" checked onCheckedChange={() => {}} />,
     );
     expect(checkboxState(box)).toBe(true);
-    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+    const checkedPath = glyphPath();
+    expect(checkedPath).not.toBeNull();
+    expect(checkedPath).toBe(iconPath(<CheckIcon />));
 
     rerender(
       <PretableCheckbox
@@ -57,7 +70,10 @@ describe("PretableCheckbox", () => {
     );
     expect(box).toHaveAttribute("aria-checked", "mixed");
     expect(checkboxState(box)).toBe("mixed");
-    expect(box.querySelector("[data-pretable-icon]")).not.toBeNull();
+    const mixedPath = glyphPath();
+    expect(mixedPath).not.toBeNull();
+    expect(mixedPath).toBe(iconPath(<MinusIcon />));
+    expect(mixedPath).not.toBe(checkedPath);
   });
 
   test("a click reports the next value: false→true, true→false, mixed→true", () => {
@@ -224,5 +240,16 @@ describe("PretableCheckbox", () => {
       />,
     );
     expect(warn).not.toHaveBeenCalled();
+
+    // A <label for> names it too, and the component can only see that from
+    // the DOM after mount — the branch the wrapping-label case does not
+    // exercise.
+    render(
+      <div>
+        <label htmlFor="c">Named</label>
+        <PretableCheckbox id="c" checked={false} onCheckedChange={() => {}} />
+      </div>,
+    );
+    expect(warn).not.toHaveBeenCalled();
   });
 });

From d3a48d0fc64a55c1a29c415e813d721822e51306 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:30:58 -0700
Subject: [PATCH 08/20] test(react): pin the TextInput and Checkbox type
 contracts

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 type-tests/react/components-inputs.types.tsx | 149 +++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 type-tests/react/components-inputs.types.tsx

diff --git a/type-tests/react/components-inputs.types.tsx b/type-tests/react/components-inputs.types.tsx
new file mode 100644
index 00000000..8d28c8d4
--- /dev/null
+++ b/type-tests/react/components-inputs.types.tsx
@@ -0,0 +1,149 @@
+// TEMPORARY: imported from source because `@pretable/react` does not export
+// these yet. Task 9 of the SP3 plan switches this to the package.
+import {
+  PretableCheckbox,
+  type PretableCheckboxProps,
+} from "../../packages/react/src/components/checkbox";
+import {
+  PretableTextInput,
+  type PretableTextInputProps,
+} from "../../packages/react/src/components/text-input";
+import type {
+  PretableBuiltInSite,
+  PretableSite,
+} from "../../packages/react/src/components/button";
+import type { Equal, Expect } from "../shared/assert";
+
+// --- PretableCheckbox ---------------------------------------------------
+
+// `checked` is required.
+// prettier-ignore
+// @ts-expect-error — checked is required
+<PretableCheckbox onCheckedChange={() => {}} />;
+
+// `onCheckedChange` is required.
+// prettier-ignore
+// @ts-expect-error — onCheckedChange is required
+<PretableCheckbox checked={false} />;
+
+// `checked` is `boolean | "mixed"`, not an arbitrary string.
+// prettier-ignore
+// @ts-expect-error — checked is boolean | "mixed", not an arbitrary string
+<PretableCheckbox checked="yes" onCheckedChange={() => {}} />;
+
+// "mixed" is a valid checked state — the header select-all's partial state.
+<PretableCheckbox checked="mixed" onCheckedChange={() => {}} />;
+<PretableCheckbox checked={true} onCheckedChange={() => {}} />;
+
+// No `type`, `role`, native `onChange`, or children leak through — the
+// element is always type="button" role="checkbox" with its own aria-checked
+// wired to `checked`. (`aria-checked` itself is not tested here: TypeScript
+// special-cases `aria-*`/`data-*` attributes on every JSX element, so no
+// props type — Omit or not — can make one a type error.)
+// prettier-ignore
+// @ts-expect-error — the element is always type="button"
+<PretableCheckbox checked={false} onCheckedChange={() => {}} type="submit" />;
+// prettier-ignore
+// @ts-expect-error — the element is always role="checkbox"
+<PretableCheckbox checked={false} onCheckedChange={() => {}} role="switch" />;
+// prettier-ignore
+// @ts-expect-error — the native onChange is not a channel; use onCheckedChange
+<PretableCheckbox checked={false} onCheckedChange={() => {}} onChange={() => {}} />;
+// prettier-ignore
+// @ts-expect-error — the glyph is drawn from checked; children are not a channel
+<PretableCheckbox checked={false} onCheckedChange={() => {}}>x</PretableCheckbox>;
+
+// The checkbox sites are in the kit's vocabulary, and it stays open.
+<PretableCheckbox
+  checked={false}
+  onCheckedChange={() => {}}
+  site="row-select"
+/>;
+<PretableCheckbox checked={false} onCheckedChange={() => {}} site="mine" />;
+
+// Refs are typed to the button, not the input.
+const checkboxRef = { current: null as HTMLButtonElement | null };
+<PretableCheckbox
+  ref={checkboxRef}
+  checked={false}
+  onCheckedChange={() => {}}
+/>;
+const wrongCheckboxRef = { current: null as HTMLInputElement | null };
+// prettier-ignore
+// @ts-expect-error — the ref is HTMLButtonElement, not HTMLInputElement
+<PretableCheckbox ref={wrongCheckboxRef} checked={false} onCheckedChange={() => {}} />;
+
+// `onCheckedChange` hands back a plain boolean.
+<PretableCheckbox
+  checked="mixed"
+  onCheckedChange={(v) => {
+    const b: boolean = v;
+    void b;
+  }}
+/>;
+
+export type CheckedIsBooleanOrMixed = Expect<
+  Equal<PretableCheckboxProps["checked"], boolean | "mixed">
+>;
+
+// --- PretableTextInput ---------------------------------------------------
+
+// Native input attributes pass straight through: `type`, `inputMode`,
+// `value` and `onChange` keep their native shapes.
+<PretableTextInput
+  aria-label="When"
+  type="date"
+  value="2026-01-01"
+  onChange={() => {}}
+/>;
+<PretableTextInput aria-label="Amount" inputMode="decimal" />;
+<PretableTextInput
+  aria-label="Filter value"
+  value="x"
+  onChange={(e) => {
+    const s: string = e.target.value;
+    void s;
+  }}
+/>;
+
+// prettier-ignore
+// @ts-expect-error — the native element draws its own value; children are not a channel
+<PretableTextInput aria-label="x">text</PretableTextInput>;
+
+// Refs are typed to the input.
+const textInputRef = { current: null as HTMLInputElement | null };
+<PretableTextInput ref={textInputRef} aria-label="x" />;
+
+// The kit's own sites are in the vocabulary, and it stays open.
+<PretableTextInput aria-label="Filter value" site="filter-value" />;
+
+export type TextInputSiteIsOpen = Expect<
+  Equal<PretableTextInputProps["site"], PretableSite | undefined>
+>;
+
+// --- The ten SP3 sites are pinned in PretableBuiltInSite -----------------
+
+type TenSp3Sites =
+  | "filter-value"
+  | "filter-row-value"
+  | "tool-search"
+  | "row-select"
+  | "row-select-all"
+  | "bool-cell"
+  | "tool-column-toggle"
+  | "hide-grouped"
+  | "filter-choice"
+  | "filter-row-choice";
+
+// `Extract<Union, X>` over a union containing `(string & {})` is vacuous —
+// pin the built-in union directly, so removing a site from it fails this.
+export type Sp3SitesAreBuiltIn = Expect<
+  Equal<Extract<PretableBuiltInSite, TenSp3Sites>, TenSp3Sites>
+>;
+
+// The negative twin: simulate a site dropping out of the union (as SP2's
+// reviewer did with `button.tsx`, without touching the file) and prove the
+// pin can actually fail.
+// prettier-ignore
+// @ts-expect-error — removing a site must break the pin
+export type RemovingASiteBreaksThePin = Expect<Equal<Extract<Exclude<PretableBuiltInSite, "hide-grouped">, TenSp3Sites>, TenSp3Sites>>;

From 4c5fabf3b4e3e8ff5f26cc64a907f978ed0320a9 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:34:19 -0700
Subject: [PATCH 09/20] feat(react): the TextInput and Checkbox slots

Mirrors SP2's Select slot (f10cbe07) for two more kit components:
components.TextInput and components.Checkbox now resolve through the
same context, with member JSDoc on PretableComponents and the two new
Pretable*Component types.

Two mutation checks confirm the four-part edit is complete: dropping
Checkbox from useResolvedComponents' deps array made its rerender test
fail (stale hit), and dropping TextInput from the identity comparison
made its replacement test fail too. Both were reverted after
confirming.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/__tests__/components-button.test.tsx  | 54 +++++++++++++++++++
 packages/react/src/components/context.ts      | 43 +++++++++++++--
 2 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/__tests__/components-button.test.tsx b/packages/react/src/__tests__/components-button.test.tsx
index a3cd99bd..68d8d458 100644
--- a/packages/react/src/__tests__/components-button.test.tsx
+++ b/packages/react/src/__tests__/components-button.test.tsx
@@ -14,7 +14,9 @@ import {
   usePretableComponents,
   useResolvedComponents,
 } from "../components/context";
+import { PretableCheckbox } from "../components/checkbox";
 import { PretableSelect } from "../components/select";
+import { PretableTextInput } from "../components/text-input";
 import { resetDevWarnings } from "../dev-warn";
 
 afterEach(() => {
@@ -237,6 +239,8 @@ describe("components context", () => {
       Button: PretableButton,
       IconButton: MyIcon,
       Select: PretableSelect,
+      TextInput: PretableTextInput,
+      Checkbox: PretableCheckbox,
     };
     const { result } = renderHook(() => usePretableComponents(), {
       wrapper: ({ children }) => (
@@ -271,4 +275,54 @@ describe("components context", () => {
     rerender({ components: {} });
     expect(result.current).toBe(DEFAULT_COMPONENTS);
   });
+
+  test("the TextInput slot resolves like the other two, and its own change is its own", () => {
+    const MyTextInput = forwardRef<
+      HTMLInputElement,
+      ComponentProps<typeof PretableTextInput>
+    >((props, ref) => <input {...(props as object)} ref={ref} data-mine="" />);
+    const { result, rerender } = renderHook(
+      ({ components }) => useResolvedComponents(components),
+      {
+        initialProps: { components: {} as { TextInput?: typeof MyTextInput } },
+      },
+    );
+    expect(result.current).toBe(DEFAULT_COMPONENTS);
+    expect(result.current.TextInput).toBe(PretableTextInput);
+    rerender({ components: { TextInput: MyTextInput } });
+    expect(result.current.TextInput).toBe(MyTextInput);
+    expect(result.current.Button).toBe(PretableButton);
+    const withTextInput = result.current;
+    rerender({ components: { TextInput: MyTextInput } });
+    expect(result.current).toBe(withTextInput);
+    // The four-part edit the SP1 review flagged: the slot must be in the
+    // comparison, the defaults, the literal AND the deps. A slot left out of
+    // the deps would make this rerender a stale hit.
+    rerender({ components: {} });
+    expect(result.current).toBe(DEFAULT_COMPONENTS);
+  });
+
+  test("the Checkbox slot resolves like the other two, and its own change is its own", () => {
+    const MyCheckbox = forwardRef<
+      HTMLButtonElement,
+      ComponentProps<typeof PretableCheckbox>
+    >((props, ref) => <button {...(props as object)} ref={ref} data-mine="" />);
+    const { result, rerender } = renderHook(
+      ({ components }) => useResolvedComponents(components),
+      { initialProps: { components: {} as { Checkbox?: typeof MyCheckbox } } },
+    );
+    expect(result.current).toBe(DEFAULT_COMPONENTS);
+    expect(result.current.Checkbox).toBe(PretableCheckbox);
+    rerender({ components: { Checkbox: MyCheckbox } });
+    expect(result.current.Checkbox).toBe(MyCheckbox);
+    expect(result.current.Button).toBe(PretableButton);
+    const withCheckbox = result.current;
+    rerender({ components: { Checkbox: MyCheckbox } });
+    expect(result.current).toBe(withCheckbox);
+    // The four-part edit the SP1 review flagged: the slot must be in the
+    // comparison, the defaults, the literal AND the deps. A slot left out of
+    // the deps would make this rerender a stale hit.
+    rerender({ components: {} });
+    expect(result.current).toBe(DEFAULT_COMPONENTS);
+  });
 });
diff --git a/packages/react/src/components/context.ts b/packages/react/src/components/context.ts
index 07308bab..deea4154 100644
--- a/packages/react/src/components/context.ts
+++ b/packages/react/src/components/context.ts
@@ -32,7 +32,9 @@ import {
   type PretableButtonProps,
   type PretableIconButtonProps,
 } from "./button";
+import { PretableCheckbox, type PretableCheckboxProps } from "./checkbox";
 import { PretableSelect, type PretableSelectProps } from "./select";
+import { PretableTextInput, type PretableTextInputProps } from "./text-input";
 
 /**
  * The component a `components.Button` replacement must be: it receives
@@ -69,6 +71,29 @@ export type PretableSelectComponent = ComponentType<
   PretableSelectProps & RefAttributes<HTMLButtonElement>
 >;
 
+/**
+ * The component a `components.TextInput` replacement must be: it receives
+ * {@link PretableTextInputProps} and forwards its `ref` to the input node —
+ * the filter dialog and the tool panel's search both focus that node.
+ *
+ * @public
+ */
+export type PretableTextInputComponent = ComponentType<
+  PretableTextInputProps & RefAttributes<HTMLInputElement>
+>;
+
+/**
+ * The component a `components.Checkbox` replacement must be: it receives
+ * {@link PretableCheckboxProps} and forwards its `ref` to the button node —
+ * the boolean cell and the row-select cell are styled and measured through
+ * it.
+ *
+ * @public
+ */
+export type PretableCheckboxComponent = ComponentType<
+  PretableCheckboxProps & RefAttributes<HTMLButtonElement>
+>;
+
 /**
  * The kit components a consumer can replace, one slot per type. Every slot is
  * optional; an absent one is the built-in.
@@ -82,6 +107,10 @@ export interface PretableComponents {
   readonly IconButton?: PretableIconButtonComponent;
   /** Every select-only picker the grid draws; receives {@link PretableSelectProps}. */
   readonly Select?: PretableSelectComponent;
+  /** Every chrome text field the grid draws — the filter value, the filter row's value and the tool panel's search; receives {@link PretableTextInputProps}. */
+  readonly TextInput?: PretableTextInputComponent;
+  /** Every checkbox the grid draws — the row-select cells, the column toggles, the boolean cell, the checklists; receives {@link PretableCheckboxProps}. */
+  readonly Checkbox?: PretableCheckboxComponent;
 }
 
 /** The map after resolution: every slot filled. Internal. */
@@ -89,6 +118,8 @@ export interface ResolvedPretableComponents {
   readonly Button: PretableButtonComponent;
   readonly IconButton: PretableIconButtonComponent;
   readonly Select: PretableSelectComponent;
+  readonly TextInput: PretableTextInputComponent;
+  readonly Checkbox: PretableCheckboxComponent;
 }
 
 /** The built-ins, frozen: also the identity a no-op resolution returns. */
@@ -96,6 +127,8 @@ export const DEFAULT_COMPONENTS: ResolvedPretableComponents = Object.freeze({
   Button: PretableButton,
   IconButton: PretableIconButton,
   Select: PretableSelect,
+  TextInput: PretableTextInput,
+  Checkbox: PretableCheckbox,
 });
 
 const PretableComponentsContext =
@@ -122,13 +155,17 @@ export function useResolvedComponents(
   const Button = components?.Button ?? DEFAULT_COMPONENTS.Button;
   const IconButton = components?.IconButton ?? DEFAULT_COMPONENTS.IconButton;
   const Select = components?.Select ?? DEFAULT_COMPONENTS.Select;
+  const TextInput = components?.TextInput ?? DEFAULT_COMPONENTS.TextInput;
+  const Checkbox = components?.Checkbox ?? DEFAULT_COMPONENTS.Checkbox;
   return useMemo(
     () =>
       Button === DEFAULT_COMPONENTS.Button &&
       IconButton === DEFAULT_COMPONENTS.IconButton &&
-      Select === DEFAULT_COMPONENTS.Select
+      Select === DEFAULT_COMPONENTS.Select &&
+      TextInput === DEFAULT_COMPONENTS.TextInput &&
+      Checkbox === DEFAULT_COMPONENTS.Checkbox
         ? DEFAULT_COMPONENTS
-        : Object.freeze({ Button, IconButton, Select }),
-    [Button, IconButton, Select],
+        : Object.freeze({ Button, IconButton, Select, TextInput, Checkbox }),
+    [Button, IconButton, Select, TextInput, Checkbox],
   );
 }

From e0de95b479b828673742a22ae29c233724092b67 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:45:34 -0700
Subject: [PATCH 10/20] feat(ui): the kit text-input and checkbox rules; the
 site guard learns fourteen controls
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The field box the three text fields each drew for themselves, and the 16px
square four checkbox sites hand-kept a copy of, become two kit rules at the
top of the layer — beside the push-button and select rules, ahead of every
site rule so a site's size still wins at equal specificity. Both join the
state section's ring and disabled list, and the checked checkbox joins the
forced-colours block: its fill and its glyph colour are both author values
the UA erases, which between them are the whole of what the control says.

The old four-site checkbox rules stay for now. They come AFTER the kit rules
in source order and declare the same values, so nothing moves visually until
Task 8 puts [data-pretable-checkbox] on the sites and deletes them.

The site guard grows a third and fourth kind — TEXT_INPUT_SITES (three, one
of which is really three attributes: the dialog's value field and its
between-range min/max twins) and CHECKBOX_SITES (seven) — each with its own
forbidden list and its own OWN entry. `display` stays legal at bool-cell
alone: `display: flex` there places a 16px control in a table cell rather
than copying the kit's box. The bracket guard anchors on both new kit base
rules against their own sites.

Two intended failures, red until Task 8 migrates the sites: the site guard
(the fields and checkboxes still declare the kit's box) and the new
no-element-type-selector guard (twelve `input[data-pretable-…]` /
`button[data-pretable-…]` selectors). Everything else green.

Mutation-checked both new guards: deleting `border-radius: 3px` from the kit
checkbox rule fails the kit checkbox guard (the surviving copy in the old
four-site rule does not vouch for it); moving the kit checkbox base rule
below the tool-search rule fails the bracket guard.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 packages/ui/grid.css                          |  71 ++-
 packages/ui/src/__tests__/css-cascade.test.ts | 403 +++++++++++++++---
 2 files changed, 420 insertions(+), 54 deletions(-)

diff --git a/packages/ui/grid.css b/packages/ui/grid.css
index 05b5089c..c68eed59 100644
--- a/packages/ui/grid.css
+++ b/packages/ui/grid.css
@@ -246,6 +246,53 @@
     color: var(--pretable-text-selected);
   }
 
+  /* ---- Kit components: text input --------------------------------------
+     The native input in the grid's box: the same rule border, grid surface
+     and cell ink the select trigger draws, so a field and the picker beside
+     it are one family. Sites keep their size, inset and flex participation
+     (the site rules below win by order); the element stays native, so the
+     date type keeps its picker. */
+  :where([data-pretable-text-input]) {
+    box-sizing: border-box;
+    padding-inline: 6px;
+    border: 1px solid var(--pretable-rule);
+    border-radius: var(--pretable-radius-control);
+    background: var(--pretable-bg-grid);
+    color: var(--pretable-text-cell);
+    font: inherit;
+  }
+
+  /* ---- Kit components: checkbox ----------------------------------------
+     The 16px square every checkbox in the grid is — the row-select cell, the
+     header select-all, the boolean cell, the column toggle, the checklists
+     and the hide-grouped switch — from one rule, so a theme edit reaches all
+     of them and two hand-kept copies cannot drift. aria-checked is the state
+     channel; the glyph is the kit icon, sized by the font-size here.
+     The tool panel's visibility toggle is enrolled here rather than restyled
+     in its own section: it IS this checkbox, and two hand-kept copies of the
+     same control are how a theme edit makes them drift apart. */
+  :where([data-pretable-checkbox]) {
+    width: 16px;
+    height: 16px;
+    border: 1px solid var(--pretable-checkbox-border);
+    background: var(--pretable-checkbox-bg);
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 11px;
+    line-height: 1;
+    color: var(--pretable-checkbox-checked-fg);
+  }
+  :where([data-pretable-checkbox][aria-checked="true"]),
+  :where([data-pretable-checkbox][aria-checked="mixed"]) {
+    background: var(--pretable-checkbox-checked-bg);
+    border-color: var(--pretable-checkbox-checked-bg);
+    color: var(--pretable-checkbox-checked-fg);
+  }
+
   /* Multi-sort priority badge (rendered only when 2+ columns are sorted) */
   :where([data-pretable-sort-priority]) {
     margin-left: 2px;
@@ -2246,7 +2293,9 @@
   :where(
     [data-pretable-button]:focus-visible,
     [data-pretable-icon-button]:focus-visible,
-    [data-pretable-select]:focus-visible
+    [data-pretable-select]:focus-visible,
+    [data-pretable-text-input]:focus-visible,
+    [data-pretable-checkbox]:focus-visible
   ) {
     outline: 2px solid var(--pretable-focus-ring);
     outline-offset: -2px;
@@ -2255,7 +2304,9 @@
   :where(
     [data-pretable-button]:disabled,
     [data-pretable-icon-button]:disabled,
-    [data-pretable-select]:disabled
+    [data-pretable-select]:disabled,
+    [data-pretable-text-input]:disabled,
+    [data-pretable-checkbox]:disabled
   ) {
     color: var(--pretable-text-dim);
     cursor: default;
@@ -2466,7 +2517,9 @@
       [data-pretable-menu-item]:disabled,
       [data-pretable-button]:disabled,
       [data-pretable-icon-button]:disabled,
-      [data-pretable-select]:disabled
+      [data-pretable-select]:disabled,
+      [data-pretable-text-input]:disabled,
+      [data-pretable-checkbox]:disabled
     ) {
       color: GrayText;
     }
@@ -2480,6 +2533,18 @@
       background-color: Highlight;
       color: HighlightText;
     }
+    /* A checked box is an author fill and an author glyph colour, both of
+       which the UA erases — leaving a checked checkbox identical to an
+       unchecked one, which is the whole of what the control says. Answered
+       exactly as the committed option above: the system's guaranteed pair,
+       and `forced-color-adjust: none` so the pair survives. The glyph is
+       drawn in currentColor, so HighlightText carries it too. */
+    :where([data-pretable-checkbox][aria-checked="true"]),
+    :where([data-pretable-checkbox][aria-checked="mixed"]) {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+    }
   }
 
   /* Reduced motion. Every animated declaration in this file is named here:
diff --git a/packages/ui/src/__tests__/css-cascade.test.ts b/packages/ui/src/__tests__/css-cascade.test.ts
index d8a66791..b601a377 100644
--- a/packages/ui/src/__tests__/css-cascade.test.ts
+++ b/packages/ui/src/__tests__/css-cascade.test.ts
@@ -58,6 +58,43 @@ const SELECT_SITES = [
   "aggregate",
 ];
 
+/** The three text-field sites `PretableTextInput` collapses: the filter
+ *  dialog's value field (which is really three — the plain value and the
+ *  between-range min/max twins, each on its own attribute), the builder
+ *  row's value field, and the tool pane's search box. */
+const TEXT_INPUT_SITES = ["filter-value", "filter-row-value", "tool-search"];
+
+/** The seven checkbox sites `PretableCheckbox` collapses: the selection
+ *  column and its header select-all, the boolean cell, the tool panel's
+ *  visibility toggle and its hide-grouped switch, and the two checklists
+ *  (the filter dialog's set shape and the builder row's). */
+const CHECKBOX_SITES = [
+  "row-select",
+  "row-select-all",
+  "bool-cell",
+  "tool-column-toggle",
+  "hide-grouped",
+  "filter-choice",
+  "filter-row-choice",
+];
+
+/** A site is normally one attribute, `data-pretable-<site>`. The filter
+ *  dialog's value field is the exception: the between-range twins are the
+ *  SAME site wearing `-min`/`-max`, so a guard that looked only for
+ *  `-value` would police one third of it. */
+const SITE_ATTRS: Record<string, string[]> = {
+  "filter-value": [
+    "data-pretable-filter-value]",
+    "data-pretable-filter-min]",
+    "data-pretable-filter-max]",
+  ],
+};
+/** The `]` terminator is what keeps `data-pretable-row-select]` from also
+ *  matching `data-pretable-row-select-all]` and
+ *  `data-pretable-row-select-cell="true"]`. */
+const attrsFor = (site: string) =>
+  SITE_ATTRS[site] ?? [`data-pretable-${site}]`];
+
 /** The token names pretable.css declares — the contract a section may read
  *  from and must not add to. Same source the token contract test loads. */
 const tokenContract = () => {
@@ -520,6 +557,167 @@ describe("grid.css cascade contract", () => {
     ).toMatch(/background-color:\s*Highlight/);
   });
 
+  test("the kit text input carries the field box", () => {
+    // The three fields each drew their own frame, surface, ink and font —
+    // three hand-kept copies of the select trigger's box, which is what made
+    // the dialog's field and the picker beside it drift by a pixel and a
+    // token at a time. One rule now; the sites keep only their size.
+    const css = strippedCss();
+    const base = rulesSelecting(
+      css,
+      (s) =>
+        s.includes("data-pretable-text-input]") &&
+        !s.includes("::") &&
+        !s.includes(":hover") &&
+        !s.includes(":focus") &&
+        !s.includes(":disabled"),
+    );
+    expect(base.length, "no kit text-input rule").toBeGreaterThan(0);
+    const body = base.map((m) => m[2]).join("");
+    for (const decl of [
+      /border:\s*1px solid var\(--pretable-rule\)/,
+      /border-radius:\s*var\(--pretable-radius-control\)/,
+      /background:\s*var\(--pretable-bg-grid\)/,
+      /color:\s*var\(--pretable-text-cell\)/,
+      /font:\s*inherit/,
+      /box-sizing:\s*border-box/,
+      // The inner inset is the kit's too — the same 6px the select trigger
+      // holds its label at, so a stacked field and picker line up inside.
+      /padding-inline:\s*6px/,
+    ])
+      expect(body).toMatch(decl);
+
+    // Ring and disabled ink in the state section, like every other kit.
+    const state = rulesSelecting(
+      css,
+      (s) =>
+        s.includes("data-pretable-text-input]:focus-visible") ||
+        s.includes("data-pretable-text-input]:disabled"),
+    )
+      .map((m) => m[2])
+      .join("");
+    expect(state).toMatch(/outline:\s*2px solid var\(--pretable-focus-ring\)/);
+    expect(state).toMatch(/color:\s*var\(--pretable-text-dim\)/);
+    expect(state).toMatch(/cursor:\s*default/);
+  });
+
+  test("the kit checkbox carries the square, checked and under forced colours", () => {
+    const css = strippedCss();
+    // The base rule alone: the checked rules declare a background and a
+    // colour of their own, and letting them into this bucket would let the
+    // fill vouch for the box.
+    const base = rulesSelecting(
+      css,
+      (s) =>
+        s.includes("data-pretable-checkbox]") &&
+        !s.includes("aria-checked") &&
+        !s.includes("::") &&
+        !s.includes(":hover") &&
+        !s.includes(":focus") &&
+        !s.includes(":disabled"),
+    );
+    expect(base.length, "no kit checkbox rule").toBeGreaterThan(0);
+    const body = base.map((m) => m[2]).join("");
+    for (const decl of [
+      /width:\s*16px/,
+      /height:\s*16px/,
+      /border:\s*1px solid var\(--pretable-checkbox-border\)/,
+      /background:\s*var\(--pretable-checkbox-bg\)/,
+      /border-radius:\s*3px/,
+      /cursor:\s*pointer/,
+      /display:\s*inline-flex/,
+      /padding:\s*0/,
+      // The glyph is a kit icon with no size of its own here; the font-size
+      // and the leading are what keep a check from pushing the 16px box out.
+      /font-size:\s*11px/,
+      /line-height:\s*1/,
+      /color:\s*var\(--pretable-checkbox-checked-fg\)/,
+    ])
+      expect(body).toMatch(decl);
+
+    // Both checked states fill, and both fill the BORDER too — a checked box
+    // that kept the unchecked border reads as a half-drawn control.
+    for (const state of ["true", "mixed"]) {
+      const rules = rulesSelecting(css, (s) =>
+        s.includes(`data-pretable-checkbox][aria-checked="${state}"]`),
+      );
+      expect(
+        rules.length,
+        `nothing fills a checkbox at aria-checked="${state}"`,
+      ).toBeGreaterThan(0);
+      const filled = rules.map((m) => m[2]).join("");
+      expect(filled).toMatch(
+        /background:\s*var\(--pretable-checkbox-checked-bg\)/,
+      );
+      expect(filled).toMatch(
+        /border-color:\s*var\(--pretable-checkbox-checked-bg\)/,
+      );
+    }
+
+    const state = rulesSelecting(
+      css,
+      (s) =>
+        s.includes("data-pretable-checkbox]:focus-visible") ||
+        s.includes("data-pretable-checkbox]:disabled"),
+    )
+      .map((m) => m[2])
+      .join("");
+    expect(state).toMatch(/outline:\s*2px solid var\(--pretable-focus-ring\)/);
+    expect(state).toMatch(/cursor:\s*default/);
+
+    // Forced colours erase the fill AND the glyph's colour, which between
+    // them are the whole of what a checkbox says — the committed option's
+    // failure exactly, answered the same way.
+    const forced = forcedColorsBlock(css);
+    for (const checked of ["true", "mixed"]) {
+      const rules = rulesSelecting(forced, (s) =>
+        s.includes(`data-pretable-checkbox][aria-checked="${checked}"]`),
+      );
+      expect(
+        rules.length,
+        `aria-checked="${checked}" is unanswered under forced colours`,
+      ).toBeGreaterThan(0);
+      const bodies = rules.map((m) => m[2]).join("");
+      expect(bodies).toMatch(/forced-color-adjust:\s*none/);
+      expect(bodies).toMatch(/background-color:\s*Highlight/);
+      expect(bodies).toMatch(/color:\s*HighlightText/);
+      expect(bodies).not.toMatch(/var\(--pretable-/);
+    }
+    const grayed = rulesSelecting(
+      forced,
+      (s) =>
+        s.includes(":disabled") &&
+        (s.includes("data-pretable-checkbox]") ||
+          s.includes("data-pretable-text-input]")),
+    );
+    for (const attr of ["data-pretable-checkbox]", "data-pretable-text-input]"])
+      expect(
+        grayed.map((m) => m[1]).join(""),
+        `[${attr} is not in the forced-colours disabled list`,
+      ).toContain(attr);
+    expect(grayed.map((m) => m[2]).join("")).toMatch(/color:\s*GrayText/);
+  });
+
+  test("no element-type selector targets a kit control", () => {
+    // The kit attribute is the whole contract: `input[data-pretable-…]` and
+    // `button[data-pretable-…]` say the control is an <input> or a <button>,
+    // which is the component's business and not the stylesheet's — and a
+    // descendant `… input` reaches whatever a consumer renders inside the
+    // surface, kit control or not. Both shapes are what Task 8 removes when
+    // the sites start wearing [data-pretable-text-input] and
+    // [data-pretable-checkbox].
+    const css = strippedCss();
+    const offenders = rulesSelecting(css, (s) =>
+      /(^|[\s,(])input\[data-pretable-|(^|[\s,(])button\[data-pretable-(row-select|bool-cell|tool-column-toggle)|\]\s+input(\[|:|\s|$)|\)\s+input\[/.test(
+        s,
+      ),
+    ).map((m) => m[1].trim());
+    expect(
+      offenders,
+      `element-type selectors on kit controls: ${offenders.join(" | ")}`,
+    ).toEqual([]);
+  });
+
   test("a push-button site rule declares only what is its own", () => {
     // The kit rules own the box: the border, the background, the radius, the
     // cursor, the font, the flex centring, the ring and the disabled ink. A
@@ -563,6 +761,40 @@ describe("grid.css cascade contract", () => {
       /(?:^|[;{\s])font:\s*inherit/,
       /(?:^|[;{\s])cursor:\s*pointer/,
     ];
+    // The kit text-input rule owns the field box the three fields used to
+    // each declare: the frame, the surface, the ink, the font and the
+    // border-box. Same shape as the select's list, because it is the same
+    // box — a field and the picker beside it are one family. A site keeps
+    // its SIZE, its inset and its flex participation.
+    const TEXT_INPUT_OWNED = [
+      /(?:^|[;{\s])border:\s*1px solid var\(--pretable-rule\)/,
+      /border-radius:\s*var\(--pretable-radius-control\)/,
+      /(?:^|[;{\s])background:\s*var\(--pretable-bg-grid\)/,
+      /(?:^|[;{\s])color:\s*var\(--pretable-text-cell\)/,
+      /(?:^|[;{\s])font:\s*inherit/,
+      /(?:^|[;{\s])box-sizing:\s*border-box/,
+    ];
+    // The kit checkbox rule owns the 16px square outright — there is no
+    // per-site size here, unlike every other kind: a checkbox is one size
+    // everywhere in the grid. So a site that names any of these is the
+    // second hand-kept copy the collapse exists to remove.
+    const CHECKBOX_DISPLAY = /(?:^|[;{\s])display:\s*inline-flex/;
+    const CHECKBOX_OWNED = [
+      /(?:^|[;{\s])width:\s*16px/,
+      /(?:^|[;{\s])height:\s*16px/,
+      /(?:^|[;{\s])border:\s*1px solid var\(--pretable-checkbox-border\)/,
+      /(?:^|[;{\s])background:\s*var\(--pretable-checkbox-bg\)/,
+      /border-radius:\s*3px/,
+      /(?:^|[;{\s])cursor:\s*pointer/,
+      CHECKBOX_DISPLAY,
+    ];
+    // `display` is forbidden at every checkbox site but one. The boolean
+    // cell says `display: flex` to centre a 16px control inside a table
+    // cell: that is a PLACEMENT decision about where the control sits in
+    // its host, not a copy of the kit's box, and it happens to override the
+    // kit's `inline-flex` because the two are the same property. Banning it
+    // there would drive the centring out of the file.
+    const DISPLAY_ALLOWED = new Set(["bool-cell"]);
 
     // What each site genuinely OWNS, and must keep after the collapse: a
     // size, a reveal, an alignment. Without this the guard passes for a site
@@ -593,30 +825,58 @@ describe("grid.css cascade contract", () => {
       "filter-row-column": /block-size:\s*24px/,
       "filter-row-operator": /block-size:\s*24px/,
       aggregate: /block-size:\s*24px/,
+      // The dialog's field is 28px like its picker; the builder's is the
+      // section's 24px flex item; the search box is a full-width band.
+      "filter-value": /block-size:\s*28px/,
+      "filter-row-value": /block-size:\s*24px/,
+      "tool-search": /inline-size:\s*100%/,
+      // The one checkbox site with anything of its own: the boolean cell
+      // centres its square in the column. Every other checkbox is the kit's
+      // square and nothing else, so `null` here means what it means for the
+      // ghost buttons — anything left selecting it belongs to the kit.
+      "bool-cell": /margin:\s*0 auto/,
+      "row-select": null,
+      "row-select-all": null,
+      "tool-column-toggle": null,
+      "hide-grouped": null,
+      "filter-choice": null,
+      "filter-row-choice": null,
     };
 
-    for (const site of [...PUSH_BUTTON_SITES, ...SELECT_SITES]) {
-      const attr = `data-pretable-${site}]`;
+    for (const site of [
+      ...PUSH_BUTTON_SITES,
+      ...SELECT_SITES,
+      ...TEXT_INPUT_SITES,
+      ...CHECKBOX_SITES,
+    ]) {
+      const attrs = attrsFor(site);
       // Every rule that NAMES the site and is not a state or a pseudo —
       // including the :has() ancestor rules, which is where two of these
       // sites keep the whole of what they own.
       const rules = rulesSelecting(
         css,
         (selector) =>
-          selector.includes(attr) &&
+          attrs.some((attr) => selector.includes(attr)) &&
           !selector.includes("::") &&
           !selector.includes(":hover") &&
           !selector.includes(":focus") &&
           !selector.includes(":disabled"),
       );
-      const forbidden = SELECT_SITES.includes(site)
-        ? SELECT_OWNED
-        : [
-            ...OWNED,
-            ...(LABELLED_BUTTON_SITES.includes(site)
-              ? LABELLED_OWNED
-              : ICON_OWNED),
-          ];
+      const forbidden = CHECKBOX_SITES.includes(site)
+        ? CHECKBOX_OWNED.filter(
+            (owned) =>
+              !(DISPLAY_ALLOWED.has(site) && owned === CHECKBOX_DISPLAY),
+          )
+        : TEXT_INPUT_SITES.includes(site)
+          ? TEXT_INPUT_OWNED
+          : SELECT_SITES.includes(site)
+            ? SELECT_OWNED
+            : [
+                ...OWNED,
+                ...(LABELLED_BUTTON_SITES.includes(site)
+                  ? LABELLED_OWNED
+                  : ICON_OWNED),
+              ];
       for (const [, selector, body] of rules) {
         for (const owned of forbidden) {
           expect(
@@ -648,48 +908,54 @@ describe("grid.css cascade contract", () => {
       // hover-hidden control, the site's own business, and a guard demanding
       // zero :focus-visible rules per site would have driven it out of the
       // file — a keyboard-focused funnel that stays invisible.
-      for (const [, selector, body] of rulesSelecting(css, (selector) =>
-        selector.includes(`${attr}:focus-visible`),
-      )) {
-        expect(
-          body,
-          `"${selector.trim()}" draws ${site} its own focus ring; the kit owns the ring`,
-        ).not.toMatch(/(?:^|[;{\s])outline(?:-[a-z]+)?:/);
-      }
-      for (const [, selector, body] of rulesSelecting(css, (selector) =>
-        selector.includes(`${attr}:disabled`),
-      )) {
-        for (const decl of [/(?:^|[;{\s])color:/, /(?:^|[;{\s])cursor:/]) {
+      //
+      // Per ATTRIBUTE, not per site: the dialog's value field is three of
+      // them, and holding only the first to these would leave the min/max
+      // twins free to draw their own ring.
+      for (const attr of attrs) {
+        for (const [, selector, body] of rulesSelecting(css, (selector) =>
+          selector.includes(`${attr}:focus-visible`),
+        )) {
           expect(
             body,
-            `"${selector.trim()}" gives ${site} its own disabled treatment; the kit owns it`,
-          ).not.toMatch(decl);
+            `"${selector.trim()}" draws ${site} its own focus ring; the kit owns the ring`,
+          ).not.toMatch(/(?:^|[;{\s])outline(?:-[a-z]+)?:/);
+        }
+        for (const [, selector, body] of rulesSelecting(css, (selector) =>
+          selector.includes(`${attr}:disabled`),
+        )) {
+          for (const decl of [/(?:^|[;{\s])color:/, /(?:^|[;{\s])cursor:/]) {
+            expect(
+              body,
+              `"${selector.trim()}" gives ${site} its own disabled treatment; the kit owns it`,
+            ).not.toMatch(decl);
+          }
         }
-      }
 
-      // No icon site is disabled today, so this is latent — but the rule is
-      // the kit's (#573): a disabled button answers nothing to :hover, and a
-      // site rule that skips :not(:disabled) would paint a hover background
-      // on a disabled control the day one of these sites gains that state.
-      for (const [, selector] of rulesSelecting(css, (selector) =>
-        selector.includes(`${attr}:hover`),
-      )) {
-        // A comma-grouped selector can carry another site's hover alongside
-        // this one — checking the whole string lets that OTHER part's
-        // `:not(:disabled)` vouch for a part that has none of its own. Split
-        // on the comma and hold only THIS site's part to that requirement.
-        const parts = selector
-          .split(",")
-          .filter((part) => part.includes(`${attr}:hover`));
-        expect(
-          parts.length,
-          `"${selector.trim()}" matched ${attr}:hover but no comma-part contains it`,
-        ).toBeGreaterThan(0);
-        for (const part of parts) {
+        // No icon site is disabled today, so this is latent — but the rule is
+        // the kit's (#573): a disabled button answers nothing to :hover, and a
+        // site rule that skips :not(:disabled) would paint a hover background
+        // on a disabled control the day one of these sites gains that state.
+        for (const [, selector] of rulesSelecting(css, (selector) =>
+          selector.includes(`${attr}:hover`),
+        )) {
+          // A comma-grouped selector can carry another site's hover alongside
+          // this one — checking the whole string lets that OTHER part's
+          // `:not(:disabled)` vouch for a part that has none of its own. Split
+          // on the comma and hold only THIS site's part to that requirement.
+          const parts = selector
+            .split(",")
+            .filter((part) => part.includes(`${attr}:hover`));
           expect(
-            part,
-            `"${part.trim()}" hovers ${site} without :not(:disabled)`,
-          ).toMatch(":not(:disabled)");
+            parts.length,
+            `"${selector.trim()}" matched ${attr}:hover but no comma-part contains it`,
+          ).toBeGreaterThan(0);
+          for (const part of parts) {
+            expect(
+              part,
+              `"${part.trim()}" hovers ${site} without :not(:disabled)`,
+            ).toMatch(":not(:disabled)");
+          }
         }
       }
     }
@@ -717,6 +983,19 @@ describe("grid.css cascade contract", () => {
     // would let the select rule move below its sites unnoticed.
     const kitSelectBase = css.search(/:where\(\[data-pretable-select\]\)\s*\{/);
     expect(kitSelectBase, "no kit select base rule").toBeGreaterThan(-1);
+    // The field box and the 16px square are two more kit base rules, each
+    // with its own sites resting on the same ordering. Anchored with the
+    // `{` so a DESCENDANT rule (`:where([data-pretable-checkbox]) …`) cannot
+    // stand in for the base rule that moved — the trap SP2 hit with a bare
+    // indexOf on a selector prefix.
+    const kitTextInputBase = css.search(
+      /:where\(\[data-pretable-text-input\]\)\s*\{/,
+    );
+    expect(kitTextInputBase, "no kit text-input base rule").toBeGreaterThan(-1);
+    const kitCheckboxBase = css.search(
+      /:where\(\[data-pretable-checkbox\]\)\s*\{/,
+    );
+    expect(kitCheckboxBase, "no kit checkbox base rule").toBeGreaterThan(-1);
 
     const positions = (attr: string) => {
       const out: number[] = [];
@@ -724,9 +1003,12 @@ describe("grid.css cascade contract", () => {
         out.push(at);
       return out;
     };
-    const sitePositions = [...PUSH_BUTTON_SITES, ...SELECT_SITES].flatMap(
-      (site) => positions(`data-pretable-${site}]`),
-    );
+    const sitePositions = [
+      ...PUSH_BUTTON_SITES,
+      ...SELECT_SITES,
+      ...TEXT_INPUT_SITES,
+      ...CHECKBOX_SITES,
+    ].flatMap((site) => attrsFor(site).flatMap((attr) => positions(attr)));
     expect(sitePositions.length, "no site rules at all").toBeGreaterThan(0);
     expect(
       kitBase,
@@ -740,6 +1022,25 @@ describe("grid.css cascade contract", () => {
         ...SELECT_SITES.flatMap((site) => positions(`data-pretable-${site}]`)),
       ),
     );
+    // The same claim for the other two kits, each against its OWN sites: a
+    // kit rule that slid below one of the sites it draws loses to it at
+    // equal specificity, and nothing else in this file would notice.
+    for (const [what, base, sites] of [
+      ["text input", kitTextInputBase, TEXT_INPUT_SITES],
+      ["checkbox", kitCheckboxBase, CHECKBOX_SITES],
+    ] as const) {
+      const own = sites.flatMap((site) =>
+        attrsFor(site).flatMap((attr) => positions(attr)),
+      );
+      // Two of the checkbox sites arrive with Task 8; until then they
+      // contribute nothing, and a kit with no sites at all has nothing to
+      // be ahead of.
+      if (own.length === 0) continue;
+      expect(
+        base,
+        `the kit ${what}'s shared box comes after a site rule, which then cannot win at equal specificity`,
+      ).toBeLessThan(Math.min(...own));
+    }
 
     // Measured against the site rules OUTSIDE the media blocks: the coarse
     // and forced-colours blocks at the end of the layer are the file's last

From 4ea30c67426045a02168026865f061e0410f91ba Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 14:52:09 -0700
Subject: [PATCH 11/20] docs(react): the slot ref docs claim only what holds

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 packages/react/src/__tests__/components-button.test.tsx | 4 ++--
 packages/react/src/components/context.ts                | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/__tests__/components-button.test.tsx b/packages/react/src/__tests__/components-button.test.tsx
index 68d8d458..27695b13 100644
--- a/packages/react/src/__tests__/components-button.test.tsx
+++ b/packages/react/src/__tests__/components-button.test.tsx
@@ -276,7 +276,7 @@ describe("components context", () => {
     expect(result.current).toBe(DEFAULT_COMPONENTS);
   });
 
-  test("the TextInput slot resolves like the other two, and its own change is its own", () => {
+  test("the TextInput slot resolves like the others, and its own change is its own", () => {
     const MyTextInput = forwardRef<
       HTMLInputElement,
       ComponentProps<typeof PretableTextInput>
@@ -302,7 +302,7 @@ describe("components context", () => {
     expect(result.current).toBe(DEFAULT_COMPONENTS);
   });
 
-  test("the Checkbox slot resolves like the other two, and its own change is its own", () => {
+  test("the Checkbox slot resolves like the others, and its own change is its own", () => {
     const MyCheckbox = forwardRef<
       HTMLButtonElement,
       ComponentProps<typeof PretableCheckbox>
diff --git a/packages/react/src/components/context.ts b/packages/react/src/components/context.ts
index deea4154..bdf1da43 100644
--- a/packages/react/src/components/context.ts
+++ b/packages/react/src/components/context.ts
@@ -74,7 +74,9 @@ export type PretableSelectComponent = ComponentType<
 /**
  * The component a `components.TextInput` replacement must be: it receives
  * {@link PretableTextInputProps} and forwards its `ref` to the input node —
- * the filter dialog and the tool panel's search both focus that node.
+ * the handle a caller reaches the real field through. The grid takes no ref
+ * to a field today; the ref is the contract a replacement owes, not a live
+ * caller.
  *
  * @public
  */
@@ -85,8 +87,8 @@ export type PretableTextInputComponent = ComponentType<
 /**
  * The component a `components.Checkbox` replacement must be: it receives
  * {@link PretableCheckboxProps} and forwards its `ref` to the button node —
- * the boolean cell and the row-select cell are styled and measured through
- * it.
+ * the handle a caller reaches the real control through; the grid takes no
+ * ref to a checkbox today.
  *
  * @public
  */

From 74609cf981b6d6721b71300e1d17af7ba4534ada Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 15:11:08 -0700
Subject: [PATCH 12/20] refactor(react,ui): the fourteen fields and checkboxes
 render the kit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The three chrome text fields and the seven checkboxes now render
`PretableTextInput` / `PretableCheckbox`. Every site attribute is kept, so
nothing that identified one of these controls stops identifying it; what
goes is the second hand-kept copy of the box in grid.css.

The wrapper rename. The builder's set-shape checklist wrapper wore
`data-pretable-filter-row-value` — the FIELD's attribute — and was told
apart from the field only by `div[…]` vs `input[…]`. Both are kit controls
now, so the element type can no longer separate them and one shared
attribute would hand the wrapper the field's `block-size: 24px`. The
wrapper is `data-pretable-filter-row-set`.

Where the row-select writes live. In `onCheckedChange` for the plain
toggle, in `onClick` for the shift-click range — which calls
`preventDefault()` to veto the kit's toggle, because the range IS the
write and a toggle landing on top of it unselects the row just clicked.
The old handler called `preventDefault()` UNCONDITIONALLY; it dated from
the control's first commit with no stated reason, a `<button type=button>`
click has no default action to prevent, and nothing in the surface reads
`defaultPrevented` on a click that also stops propagating. So it is now
the shift branch's alone, and the writes stay where they read best rather
than moving wholesale into `onClick` behind a no-op `onCheckedChange`.

The kit-level checkbox ring offset. `:where([data-pretable-checkbox]
:focus-visible) { outline-offset: 1px }`, after the shared ring: a 16px
square paints to its own edge, so the shared `-2px` would land ON the box
and read as a recoloured border. The two checklists each argued this in a
rule of their own; every checkbox gets it now — including the four button
sites, which had the UA's ring before the kit existed.

Three guard fixes in css-cascade.test.ts.
- The element-type guard builds its pattern from the SITE LISTS instead of
  a hand-kept alternation, and catches `…) input:focus-visible` as well as
  `…] input`. `button[data-pretable-filter-join]` is deliberately excluded
  rather than stripped as the task sketched: the join is no kit control,
  and the SAME attribute rides a `<span>` (`Where`) that must not take the
  button's border — the element type there is the selector doing its job.
- The checklist test pinned the old `…) input:focus-visible` rule. It now
  asserts the wrapper still takes its own line under its new attribute,
  that the ring comes from the kit's offset rule, and that no site rule
  draws a ring for `filter-row-choice`.
- `DISPLAY_ALLOWED` was vacuous — bool-cell declares `display: flex` and
  the forbidden pattern is `inline-flex`, so the carve-out never fired.
  Deleted; the pattern already names only the kit's value.

Plus a new ordering guard: the checkbox offset rule must come AFTER the
shared ring in source. Both are :where()-flattened to (0,0,0), so order is
the whole of what makes it win.

The choice checkboxes carry `data-pretable-value`, not `data-value`: the
attribute-contract sweep caught the namespace escape, and the kit select
already established that name for "a button has no `.value`".

Mutation-checked, each restored: a `border` on the builder field rule
fails the site guard; the offset rule above the shared ring fails the new
ordering guard; dropping the shift-branch `preventDefault()` fails both
the new `row-selection-callback` range test and the existing 100k
`indexed-rendering` shift-span test.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/__tests__/attribute-contract.test.tsx |  93 ++++++-
 .../__tests__/components-override.test.tsx    | 233 +++++++++++++++++-
 .../src/__tests__/filter-builder.test.tsx     |  37 +--
 .../row-select-streaming-layout-cost.test.tsx |   3 +-
 .../__tests__/row-selection-callback.test.tsx |  26 ++
 .../tool-panel-grouping-controls.test.tsx     |   4 +-
 .../react/src/__tests__/tool-panel.test.tsx   |   4 +-
 .../react/src/editors/BooleanCellControl.tsx  |  21 +-
 packages/react/src/filter-menu/FilterMenu.tsx |  21 +-
 packages/react/src/pretable-surface.tsx       |  66 ++---
 .../react/src/tool-panel/ColumnsSection.tsx   |  26 +-
 .../src/tool-panel/filters/FilterRow.tsx      |  22 +-
 .../tool-panel/grouping/GroupingSection.tsx   |   8 +-
 packages/ui/grid.css                          | 204 +++++----------
 packages/ui/src/__tests__/css-cascade.test.ts | 184 ++++++++++----
 15 files changed, 655 insertions(+), 297 deletions(-)

diff --git a/packages/react/src/__tests__/attribute-contract.test.tsx b/packages/react/src/__tests__/attribute-contract.test.tsx
index 3fd9000d..b814599e 100644
--- a/packages/react/src/__tests__/attribute-contract.test.tsx
+++ b/packages/react/src/__tests__/attribute-contract.test.tsx
@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
 import { describe, expect, test } from "vitest";
 
@@ -46,6 +46,9 @@ describe("attribute contract", () => {
     // them non-vacuously.
     expect(container.querySelector("[data-pretable-tool-rail]")).not.toBeNull();
     expect(container.querySelector("[data-pretable-tool-tab]")).not.toBeNull();
+    // The kit checkbox's own attribute: the row-select cells and the header
+    // select-all are `PretableCheckbox`es, so it is in this sweep's walk.
+    expect(container.querySelector("[data-pretable-checkbox]")).not.toBeNull();
 
     const ALLOWED = new Set(["data-testid"]);
     const offenders = new Set<string>();
@@ -114,8 +117,12 @@ describe("attribute contract", () => {
     expect(
       container.querySelector("button[data-pretable-collapse-all]"),
     ).not.toBeNull();
+    // A kit checkbox now, not a native input — the site attribute is kept,
+    // and the kit's own attribute rides with it.
     expect(
-      container.querySelector("input[data-pretable-hide-grouped]"),
+      container.querySelector(
+        "[data-pretable-checkbox][data-pretable-hide-grouped]",
+      ),
     ).not.toBeNull();
     expect(
       container.querySelector(
@@ -160,6 +167,88 @@ describe("attribute contract", () => {
     expect(viewport?.getAttribute("data-pretable-hydrated")).toBe("true");
   });
 
+  test("the kit fields and the two checklists stay in the namespace", () => {
+    // The three attributes Task 8 adds that no other case in this file can
+    // reach: the builder's checklist wrapper and its choices need a
+    // set-shaped leaf on an enum column, and the dialog's choices need the
+    // funnel open. Rendered here so the sweep above is not the only guard
+    // and none of the three is vacuous.
+    type Bug = { id: string; severity: string };
+    const bugColumns: PretableColumn<Bug>[] = [
+      {
+        id: "severity",
+        header: "Severity",
+        type: "enum",
+        options: [{ value: "high" }, { value: "low" }],
+      },
+    ];
+    const { container } = render(
+      <PretableSurface
+        ariaLabel="Checklist contract grid"
+        columns={bugColumns}
+        rows={[{ id: "b1", severity: "high" }]}
+        getRowId={(r: Bug) => r.id}
+        onQueryChange={() => {}}
+        query={{
+          filters: [
+            { columnId: "severity", operator: "isAnyOf", value: ["high"] },
+          ],
+          sort: [],
+          rowGroups: [],
+        }}
+        toolPanel={{ defaultActiveSection: "filters" }}
+        viewportHeight={300}
+      />,
+    );
+    // The builder's leaf: the wrapper's OWN attribute (it stopped sharing the
+    // field's when both became kit controls) and its choices.
+    expect(
+      container.querySelector("[data-pretable-filter-row-set]"),
+    ).not.toBeNull();
+    expect(
+      container.querySelector(
+        "[data-pretable-checkbox][data-pretable-filter-row-choice]",
+      ),
+    ).not.toBeNull();
+    // And the dialog's, which needs the funnel open.
+    fireEvent.click(
+      container.querySelector<HTMLElement>("[data-pretable-filter-funnel]")!,
+    );
+    expect(
+      document.querySelector(
+        "[data-pretable-checkbox][data-pretable-filter-choice]",
+      ),
+    ).not.toBeNull();
+    // The kit field's own attribute: the tool pane's search box wears it, in
+    // the columns section.
+    const columnsTab = Array.from(
+      container.querySelectorAll<HTMLElement>("[data-pretable-tool-tab]"),
+    ).find((t) => /column/i.test(t.getAttribute("aria-label") ?? ""))!;
+    fireEvent.click(columnsTab);
+    expect(
+      container.querySelector(
+        "[data-pretable-text-input][data-pretable-tool-search]",
+      ),
+    ).not.toBeNull();
+
+    // The same sweep as above, over everything these three cases mounted —
+    // the portaled dialog included, which the container-scoped walks miss.
+    const ALLOWED = new Set(["data-testid"]);
+    const offenders = new Set<string>();
+    for (const el of document.querySelectorAll("*")) {
+      for (const attr of el.getAttributeNames()) {
+        if (
+          attr.startsWith("data-") &&
+          !attr.startsWith("data-pretable-") &&
+          !ALLOWED.has(attr)
+        ) {
+          offenders.add(attr);
+        }
+      }
+    }
+    expect([...offenders].sort()).toEqual([]);
+  });
+
   test("server-rendered markup reports data-pretable-hydrated=false", () => {
     // The grid's header buttons, funnels and checkboxes are all in the SSR
     // output, so they paint (and accept clicks that go nowhere) before React
diff --git a/packages/react/src/__tests__/components-override.test.tsx b/packages/react/src/__tests__/components-override.test.tsx
index 4ef4cd15..7394e35e 100644
--- a/packages/react/src/__tests__/components-override.test.tsx
+++ b/packages/react/src/__tests__/components-override.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import "@testing-library/jest-dom/vitest";
 import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import { afterEach, describe, expect, it } from "vitest";
 
 import { Pretable } from "../pretable";
@@ -9,9 +9,11 @@ import { PretableSurface } from "../pretable-surface";
 import type { PretableColumn } from "../types";
 import type {
   PretableButtonComponent,
+  PretableCheckboxComponent,
   PretableComponents,
   PretableIconButtonComponent,
   PretableSelectComponent,
+  PretableTextInputComponent,
 } from "../components/context";
 
 afterEach(() => {
@@ -75,6 +77,47 @@ const MySelect: PretableSelectComponent = forwardRef(function MySelect(
   );
 });
 
+/**
+ * A replacement field. The kit's `site` means nothing to a bare <input>, so
+ * it is destructured away before the spread — left in, React warns on every
+ * render. Everything else IS an input attribute and passes straight through,
+ * which is the point: the kit's text input is the native element.
+ */
+const MyTextInput: PretableTextInputComponent = forwardRef(function MyTextInput(
+  { site, ...props },
+  ref,
+) {
+  return <input {...props} ref={ref} data-mine-field={site ?? ""} />;
+});
+
+/**
+ * A replacement checkbox. `checked` and `onCheckedChange` are the kit's own
+ * controlled pair and mean nothing to a <button>, so both are destructured
+ * away — and re-expressed here as `aria-checked` plus a click that reports
+ * the next value, which is what a replacement genuinely has to do.
+ */
+const MyCheckbox: PretableCheckboxComponent = forwardRef(function MyCheckbox(
+  { checked, onCheckedChange, site, onClick, ...props },
+  ref,
+) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type="button"
+      role="checkbox"
+      aria-checked={checked}
+      data-mine-check={site ?? ""}
+      data-mine-checked={String(checked)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        onCheckedChange(checked !== true);
+      }}
+    />
+  );
+});
+
 // `PretableSurface` is generic, so `ComponentProps<typeof PretableSurface>`
 // resolves its props against `{}`; the prop's own type is the direct thing to
 // name here anyway.
@@ -201,7 +244,7 @@ describe("components on the surface", () => {
     );
     const expectKit = (
       attr: string,
-      kind: "button" | "icon-button" | "select",
+      kind: "button" | "icon-button" | "select" | "text-input" | "checkbox",
       site: string,
     ) => {
       const el =
@@ -230,7 +273,7 @@ describe("components on the surface", () => {
     const view = renderSurface(); // columns section open
     const kit = (
       attr: string,
-      kind: "button" | "icon-button" | "select",
+      kind: "button" | "icon-button" | "select" | "text-input" | "checkbox",
       site: string,
     ) => {
       const el = view.container.querySelector(`[data-pretable-${attr}]`);
@@ -317,6 +360,190 @@ describe("components on the surface", () => {
   });
 });
 
+describe("the fields and checkboxes on the surface", () => {
+  /** Wide enough to reach every one of the ten SP3 sites: an ENUM column
+   *  gives both checklists their choices, a BOOLEAN column gives the boolean
+   *  cell, and `rowSelectionColumn` gives the two selection checkboxes. */
+  type Rich = { id: string; name: string; sev: string; done: boolean };
+  const richColumns: PretableColumn<Rich>[] = [
+    { id: "name", header: "Name", widthPx: 160, type: "text" },
+    {
+      id: "sev",
+      header: "Sev",
+      widthPx: 120,
+      type: "enum",
+      options: [{ value: "high" }, { value: "low" }],
+    },
+    {
+      id: "done",
+      header: "Done",
+      widthPx: 100,
+      type: "boolean",
+      editable: true,
+    },
+  ];
+  const richRows: Rich[] = [
+    { id: "a", name: "Alpha", sev: "high", done: true },
+    { id: "b", name: "Bravo", sev: "low", done: false },
+  ];
+
+  /** The filters pane open on a set-shaped leaf over the enum column, so the
+   *  builder draws its checklist without a click; the funnel is opened per
+   *  test for the dialog's.
+   *
+   *  CONTROLLED, with the query echoed back through state: a no-op
+   *  `onQueryChange` would pin the tree at its seed, so `+ filter` would add
+   *  a row that never renders and the single-value field would be
+   *  unreachable. */
+  function Rich({ components }: { components?: PretableComponents }) {
+    // `as never` on both sides, the harness cast this suite's neighbours
+    // already use: the surface's query type is resolved against its column
+    // generic, and restating it here would be a second declaration to keep.
+    const [query, setQuery] = useState({
+      filters: [{ columnId: "sev", operator: "isAnyOf", value: ["high"] }],
+      sort: [],
+      rowGroups: [],
+    });
+    return (
+      <PretableSurface<Rich>
+        ariaLabel="fields-grid"
+        columns={richColumns}
+        components={components}
+        getRowId={(row) => row.id}
+        rows={richRows}
+        rowSelectionColumn={{ enabled: true }}
+        onQueryChange={(next) => setQuery(next as never)}
+        query={query as never}
+        toolPanel={{ defaultActiveSection: "filters" }}
+        viewportHeight={240}
+      />
+    );
+  }
+
+  function renderRich(components?: PretableComponents) {
+    return render(<Rich components={components} />);
+  }
+
+  /** Open the enum column's funnel and hand back the portalled dialog. */
+  async function openSevFunnel(view: ReturnType<typeof renderRich>) {
+    const funnel = view.getByRole("button", { name: "Filter Sev" });
+    fireEvent.pointerDown(funnel);
+    fireEvent.click(funnel);
+    return await waitFor(() => {
+      const el = document.querySelector("[data-pretable-filter-menu]");
+      if (!el) throw new Error("dialog not open");
+      return el;
+    });
+  }
+
+  it("every field and checkbox site renders the kit component, carrying its site name", async () => {
+    // The same bridge the button and picker sites have: the @pretable/ui CSS
+    // guards assume each site's element wears the kit attribute, and a site
+    // that quietly went back to a raw <input> or <button> would leave every
+    // one of them green while losing its whole box.
+    const view = renderRich();
+    const kit = (
+      attr: string,
+      kind: "text-input" | "checkbox",
+      site: string,
+      scope: ParentNode = view.container,
+    ) => {
+      const el = scope.querySelector(`[data-pretable-${attr}]`);
+      expect(el, `no element carries data-pretable-${attr}`).not.toBeNull();
+      expect(el).toHaveAttribute(`data-pretable-${kind}`, "");
+      expect(el).toHaveAttribute("data-pretable-site", site);
+    };
+
+    // The two selection checkboxes and the boolean cell, in the grid itself.
+    kit("row-select-all", "checkbox", "row-select-all");
+    kit("row-select", "checkbox", "row-select");
+    kit("bool-cell", "checkbox", "bool-cell");
+    // The builder's set-shaped leaf: its checklist choices.
+    kit("filter-row-choice", "checkbox", "filter-row-choice");
+    // The builder's value FIELD needs a single-value leaf; the mounted one is
+    // set-shaped, so switch the column to the text one.
+    fireEvent.click(
+      view.container.querySelector("[data-pretable-filter-add]")!,
+    );
+    kit("filter-row-value", "text-input", "filter-row-value");
+    // The columns pane: the search box and the visibility toggle.
+    fireEvent.click(view.getByRole("tab", { name: /column/i }));
+    kit("tool-search", "text-input", "tool-search");
+    kit("tool-column-toggle", "checkbox", "tool-column-toggle");
+    // The grouping pane: the hide-grouped switch.
+    fireEvent.click(view.getByRole("tab", { name: /group/i }));
+    kit("hide-grouped", "checkbox", "hide-grouped");
+    // And the portalled dialog's two: the value field on a text column, the
+    // checklist choices on the enum one.
+    const dialog = await openSevFunnel(view);
+    kit("filter-choice", "checkbox", "filter-choice", dialog);
+    const nameFunnel = view.getByRole("button", { name: "Filter Name" });
+    fireEvent.pointerDown(nameFunnel);
+    fireEvent.click(nameFunnel);
+    const textDialog = await waitFor(() => {
+      const el = document.querySelector(
+        "[data-pretable-filter-menu]:has([data-pretable-filter-value])",
+      );
+      if (!el) throw new Error("text dialog not open");
+      return el;
+    });
+    kit("filter-value", "text-input", "filter-value", textDialog);
+  });
+
+  it("replaces every TextInput and Checkbox, the portalled dialog's included", async () => {
+    const view = renderRich({
+      TextInput: MyTextInput,
+      Checkbox: MyCheckbox,
+    });
+    const mine = (
+      attr: string,
+      marker: "data-mine-field" | "data-mine-check",
+      site: string,
+      scope: ParentNode = view.container,
+    ) => {
+      const el = scope.querySelector(`[data-pretable-${attr}]`);
+      expect(el, `no element carries data-pretable-${attr}`).not.toBeNull();
+      expect(el).toHaveAttribute(marker, site);
+      // Nothing that identified the control before stops identifying it, and
+      // the kit's own attribute goes with the kit component.
+      expect(el).not.toHaveAttribute("data-pretable-text-input");
+      expect(el).not.toHaveAttribute("data-pretable-checkbox");
+    };
+
+    mine("row-select-all", "data-mine-check", "row-select-all");
+    mine("row-select", "data-mine-check", "row-select");
+    mine("bool-cell", "data-mine-check", "bool-cell");
+    mine("filter-row-choice", "data-mine-check", "filter-row-choice");
+    fireEvent.click(
+      view.container.querySelector("[data-pretable-filter-add]")!,
+    );
+    mine("filter-row-value", "data-mine-field", "filter-row-value");
+    fireEvent.click(view.getByRole("tab", { name: /column/i }));
+    mine("tool-search", "data-mine-field", "tool-search");
+    mine("tool-column-toggle", "data-mine-check", "tool-column-toggle");
+    fireEvent.click(view.getByRole("tab", { name: /group/i }));
+    mine("hide-grouped", "data-mine-check", "hide-grouped");
+    const dialog = await openSevFunnel(view);
+    mine("filter-choice", "data-mine-check", "filter-choice", dialog);
+    const nameFunnel = view.getByRole("button", { name: "Filter Name" });
+    fireEvent.pointerDown(nameFunnel);
+    fireEvent.click(nameFunnel);
+    const textDialog = await waitFor(() => {
+      const el = document.querySelector(
+        "[data-pretable-filter-menu]:has([data-pretable-filter-value])",
+      );
+      if (!el) throw new Error("text dialog not open");
+      return el;
+    });
+    mine("filter-value", "data-mine-field", "filter-value", textDialog);
+
+    // And the kit is GONE from the whole tree, portal included: a site left
+    // behind would satisfy every per-site check above.
+    expect(document.querySelector("[data-pretable-text-input]")).toBeNull();
+    expect(document.querySelector("[data-pretable-checkbox]")).toBeNull();
+  });
+});
+
 describe("components on the <Pretable> preset", () => {
   it("forwards the prop", () => {
     const view = render(
diff --git a/packages/react/src/__tests__/filter-builder.test.tsx b/packages/react/src/__tests__/filter-builder.test.tsx
index 71d41bf4..f0c1a6b7 100644
--- a/packages/react/src/__tests__/filter-builder.test.tsx
+++ b/packages/react/src/__tests__/filter-builder.test.tsx
@@ -7,6 +7,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createColumnHelper, createLocalRowModel } from "@pretable/core";
 
 import type { SurfaceFilterGroup, SurfaceFilterNode } from "../filter-tree";
+import { checkboxState } from "./checkbox-helpers";
 import {
   defaultDraft,
   fromColumnFilter,
@@ -280,19 +281,28 @@ const operatorSelect = (container: HTMLElement) =>
   container.querySelector<HTMLElement>("[data-pretable-filter-row-operator]")!;
 const columnSelect = (container: HTMLElement) =>
   container.querySelector<HTMLElement>("[data-pretable-filter-row-column]")!;
-/** Every value control the row is currently rendering, in document order. */
+/** Every value control the row is currently rendering, in document order.
+ *  Two attributes, one list: the FIELDS wear `-value` and the set shape's
+ *  checklist wrapper wears `-set` — it stopped sharing the field's attribute
+ *  when both became kit controls and the element type could no longer tell
+ *  them apart. */
 const values = (container: HTMLElement) =>
   Array.from(
-    container.querySelectorAll<HTMLElement>("[data-pretable-filter-row-value]"),
+    container.querySelectorAll<HTMLElement>(
+      "[data-pretable-filter-row-value], [data-pretable-filter-row-set]",
+    ),
   );
 const options = (select: HTMLElement) => readOptions(select).values;
+/** Every choice of a set-shape row, in document order. */
+const choices = (scope: HTMLElement) =>
+  Array.from(
+    scope.querySelectorAll<HTMLElement>("[data-pretable-filter-row-choice]"),
+  );
 /** The checked boxes of a set-shape row, as the filter value they encode. */
 const checkedValues = (container: HTMLElement) =>
-  Array.from(
-    container.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
-  )
-    .filter((b) => b.checked)
-    .map((b) => b.value);
+  choices(container)
+    .filter((b) => checkboxState(b) === true)
+    .map((b) => b.getAttribute("data-pretable-value"));
 
 describe("FilterRow", () => {
   /**
@@ -386,9 +396,7 @@ describe("FilterRow", () => {
 
     // Every declared option, labelled the way the column declares it — the
     // bare `won` falls back to its value.
-    const boxes = Array.from(
-      group!.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
-    );
+    const boxes = choices(group!);
     expect(boxes).toHaveLength(3);
     expect(group).toHaveTextContent("Open");
     expect(group).toHaveTextContent("won");
@@ -397,10 +405,7 @@ describe("FilterRow", () => {
     // shape, and the cell editors' enum combobox cannot express it.
     fireEvent.click(getByLabelText("Open"));
     fireEvent.click(getByLabelText("Lost"));
-    const checked = Array.from(
-      container.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
-    ).filter((b) => b.checked);
-    expect(checked.map((b) => b.value)).toEqual(["open", "lost"]);
+    expect(checkedValues(container)).toEqual(["open", "lost"]);
   });
 
   it("renders NO value control for `isEmpty`", () => {
@@ -888,9 +893,7 @@ describe("FiltersSection", () => {
       row.querySelector<HTMLElement>("[data-pretable-filter-row-column]")!,
     );
   const valueOf = (row: HTMLElement) =>
-    row.querySelector<HTMLInputElement>(
-      "input[data-pretable-filter-row-value]",
-    )!;
+    row.querySelector<HTMLInputElement>("[data-pretable-filter-row-value]")!;
   const addButtons = (scope: HTMLElement) =>
     Array.from(
       scope.querySelectorAll<HTMLButtonElement>(
diff --git a/packages/react/src/__tests__/row-select-streaming-layout-cost.test.tsx b/packages/react/src/__tests__/row-select-streaming-layout-cost.test.tsx
index 1191d945..fdc83c2e 100644
--- a/packages/react/src/__tests__/row-select-streaming-layout-cost.test.tsx
+++ b/packages/react/src/__tests__/row-select-streaming-layout-cost.test.tsx
@@ -96,8 +96,7 @@ describe("row-select streaming layout cost", () => {
     await expect
       .poll(
         () =>
-          view.container.querySelectorAll("[data-pretable-row-select]").length +
-          view.container.querySelectorAll('input[type="checkbox"]').length,
+          view.container.querySelectorAll("[data-pretable-row-select]").length,
         { timeout: 20_000 },
       )
       .toBeGreaterThan(0);
diff --git a/packages/react/src/__tests__/row-selection-callback.test.tsx b/packages/react/src/__tests__/row-selection-callback.test.tsx
index cf9c8453..e6b681bd 100644
--- a/packages/react/src/__tests__/row-selection-callback.test.tsx
+++ b/packages/react/src/__tests__/row-selection-callback.test.tsx
@@ -192,6 +192,32 @@ describe("onRowSelectionChange", () => {
     expect(onRowSelectionChange.mock.calls.length).toBe(callsAfterTick);
   });
 
+  it("a shift-click selects the range and leaves the clicked row in it", async () => {
+    // The checkbox is a kit `PretableCheckbox`, whose click ALWAYS ends in a
+    // plain toggle unless the consumer's own handler vetoes it. A shift-click
+    // is the one gesture that must veto: the range select IS the write, and a
+    // toggle landing on top of it would unselect the row just clicked — the
+    // range would be reported one row short, with the anchor and the two
+    // middle rows still selected so nothing looked obviously broken.
+    const onRowSelectionChange = vi.fn();
+    const { container } = renderGrid(onRowSelectionChange);
+
+    fireEvent.click(rowCheckbox(container, "a"));
+    await waitFor(() => expect(lastCall(onRowSelectionChange)).toEqual(["a"]));
+
+    fireEvent.click(rowCheckbox(container, "c"), { shiftKey: true });
+    // Read from the DOM, not from the callback: this gesture writes RANGES,
+    // and the surface deliberately emits nothing for it (the handler's own
+    // comment argues why) — so `onRowSelectionChange` is silent here and an
+    // assertion on it would pass no matter what the range did.
+    for (const id of ["a", "b", "c"]) {
+      expect(
+        rowCheckbox(container, id),
+        `row ${id} is not in the shift-selected range`,
+      ).toHaveAttribute("aria-checked", "true");
+    }
+  });
+
   it("is optional — checkboxes still work without it", () => {
     const { container } = render(
       <PretableSurface<DemoRow>
diff --git a/packages/react/src/__tests__/tool-panel-grouping-controls.test.tsx b/packages/react/src/__tests__/tool-panel-grouping-controls.test.tsx
index 8aa1e2db..9dead9e1 100644
--- a/packages/react/src/__tests__/tool-panel-grouping-controls.test.tsx
+++ b/packages/react/src/__tests__/tool-panel-grouping-controls.test.tsx
@@ -106,8 +106,8 @@ async function mountControls(options?: { rowGroups?: string[] }) {
       ) as HTMLButtonElement,
     hideGrouped: () =>
       view.container.querySelector(
-        "input[data-pretable-hide-grouped]",
-      ) as HTMLInputElement,
+        "[data-pretable-hide-grouped]",
+      ) as HTMLElement,
     /** A known CHILD-row cell — present only while its group is expanded. */
     childCell: (text: string) =>
       Array.from(view.container.querySelectorAll("[data-pretable-cell]")).find(
diff --git a/packages/react/src/__tests__/tool-panel.test.tsx b/packages/react/src/__tests__/tool-panel.test.tsx
index 69cc3ad5..a04191d8 100644
--- a/packages/react/src/__tests__/tool-panel.test.tsx
+++ b/packages/react/src/__tests__/tool-panel.test.tsx
@@ -505,7 +505,7 @@ function mountColumnsSection(options?: {
             row.querySelector("[data-pretable-tool-column-label]")
               ?.textContent === label,
         )
-        ?.querySelector("button[data-pretable-tool-column-toggle]") as
+        ?.querySelector("[data-pretable-tool-column-toggle]") as
         HTMLButtonElement | undefined,
     search: () =>
       view.container.querySelector(
@@ -566,7 +566,7 @@ describe("columns section", () => {
     const row = h.rowByLabel("Bravo")!;
     expect(row.querySelector("[data-pretable-tool-row-grip]")).not.toBeNull();
     expect(
-      row.querySelector("button[data-pretable-tool-column-toggle]"),
+      row.querySelector("[data-pretable-tool-column-toggle]"),
     ).not.toBeNull();
     const kebab = row.querySelector(
       "button[data-pretable-tool-row-menu-button]",
diff --git a/packages/react/src/editors/BooleanCellControl.tsx b/packages/react/src/editors/BooleanCellControl.tsx
index 4357a12a..4c3a2094 100644
--- a/packages/react/src/editors/BooleanCellControl.tsx
+++ b/packages/react/src/editors/BooleanCellControl.tsx
@@ -1,6 +1,7 @@
 import { createElement } from "react";
 import type { PretableEditStatus } from "@pretable/core";
-import { CheckIcon } from "../icons";
+
+import { usePretableComponents } from "../components/context";
 
 export interface BooleanCellControlProps {
   checked: boolean;
@@ -30,26 +31,22 @@ export function BooleanCellControl({
   label,
   onToggle,
 }: BooleanCellControlProps) {
+  const { Checkbox } = usePretableComponents();
   const busy =
     status === "checking" || status === "validating" || status === "saving";
   return (
-    <button
-      type="button"
-      role="checkbox"
+    <Checkbox
+      site="bool-cell"
       data-pretable-bool-cell=""
-      aria-checked={checked}
+      checked={checked}
       aria-label={label}
       aria-busy={busy || undefined}
       aria-invalid={errorId ? true : undefined}
       aria-errormessage={errorId}
       disabled={!editable || busy}
       tabIndex={-1}
-      onClick={(e) => {
-        e.stopPropagation();
-        onToggle();
-      }}
-    >
-      {checked ? <CheckIcon /> : null}
-    </button>
+      onClick={(e) => e.stopPropagation()}
+      onCheckedChange={() => onToggle()}
+    />
   );
 }
diff --git a/packages/react/src/filter-menu/FilterMenu.tsx b/packages/react/src/filter-menu/FilterMenu.tsx
index e2ecfc58..56f1b857 100644
--- a/packages/react/src/filter-menu/FilterMenu.tsx
+++ b/packages/react/src/filter-menu/FilterMenu.tsx
@@ -74,7 +74,7 @@ export function FilterMenu({
   onChange: (columnId: string, filter: ColumnFilter | null) => void;
   onClose: () => void;
 }): JSX.Element {
-  const { Button, Select } = usePretableComponents();
+  const { Button, Select, TextInput, Checkbox } = usePretableComponents();
   const [draft, setDraft] = useState<FilterDraft>(() =>
     fromColumnFilter(type, initialFilter, allowedOperators),
   );
@@ -317,7 +317,8 @@ export function FilterMenu({
         />
 
         {shape === "single" ? (
-          <input
+          <TextInput
+            site="filter-value"
             type={inputType}
             {...numericProps}
             data-pretable-filter-value=""
@@ -333,7 +334,8 @@ export function FilterMenu({
 
         {shape === "range" ? (
           <>
-            <input
+            <TextInput
+              site="filter-value"
               type={inputType}
               {...numericProps}
               data-pretable-filter-min=""
@@ -345,7 +347,8 @@ export function FilterMenu({
                   : pushDebounced({ ...draft, min: e.target.value })
               }
             />
-            <input
+            <TextInput
+              site="filter-value"
               type={inputType}
               {...numericProps}
               data-pretable-filter-max=""
@@ -380,12 +383,12 @@ export function FilterMenu({
               const checked = (draft.selected ?? []).includes(opt.value);
               return (
                 <label key={opt.value}>
-                  <input
-                    type="checkbox"
+                  <Checkbox
+                    site="filter-choice"
+                    data-pretable-filter-choice=""
+                    data-pretable-value={opt.value}
                     checked={checked}
-                    onChange={(e) =>
-                      toggleSelected(opt.value, e.target.checked)
-                    }
+                    onCheckedChange={(next) => toggleSelected(opt.value, next)}
                   />
                   {opt.label ?? opt.value}
                 </label>
diff --git a/packages/react/src/pretable-surface.tsx b/packages/react/src/pretable-surface.tsx
index 97b45621..3de1f5bb 100644
--- a/packages/react/src/pretable-surface.tsx
+++ b/packages/react/src/pretable-surface.tsx
@@ -422,11 +422,9 @@ import {
 import { parseDraftForType } from "./editors/type-parsing";
 import { deriveRowChange } from "./row-change";
 import {
-  CheckIcon,
   ColumnsIcon,
   FiltersIcon,
   GroupingIcon,
-  MinusIcon,
   SortAscIcon,
   SortDescIcon,
 } from "./icons";
@@ -2219,6 +2217,11 @@ export function PretableSurface<
     [messages],
   );
   const resolvedComponents = useResolvedComponents(components);
+  // The surface draws two checkboxes itself — the header select-all and the
+  // row-select cell. Read off the resolved map rather than through
+  // `usePretableComponents()`: this component is the one PROVIDING that
+  // context, so its own tree is outside it.
+  const { Checkbox } = resolvedComponents;
   // ---- Tool panel chrome state -------------------------------------------
   const toolPanelEnabled = toolPanel !== false;
   const toolPanelConfig = typeof toolPanel === "object" ? toolPanel : null;
@@ -6445,16 +6448,25 @@ export function PretableSurface<
                 }}
               >
                 {showHeaderCheckbox ? (
-                  <button
-                    aria-checked={headerCheckState}
+                  <Checkbox
+                    site="row-select-all"
+                    checked={
+                      headerCheckState === "true"
+                        ? true
+                        : headerCheckState === "mixed"
+                          ? "mixed"
+                          : false
+                    }
                     aria-label={effectiveMessages.selectAllLabel({
                       scope: dataScope,
                     })}
                     data-pretable-row-select-all="true"
                     onClick={(event) => {
                       event.stopPropagation();
+                    }}
+                    onCheckedChange={(next) => {
                       const before = grid.getSnapshot();
-                      const setting = !allFullySelected;
+                      const setting = next;
                       grid.setSelectAllVisible(setting);
                       const after = grid.getSnapshot();
                       if (
@@ -6496,15 +6508,7 @@ export function PretableSurface<
                         );
                       }
                     }}
-                    role="checkbox"
-                    type="button"
-                  >
-                    {headerCheckState === "true" ? (
-                      <CheckIcon />
-                    ) : headerCheckState === "mixed" ? (
-                      <MinusIcon />
-                    ) : null}
-                  </button>
+                  />
                 ) : null}
               </div>
             );
@@ -7710,13 +7714,19 @@ export function PretableSurface<
                         }
                       />
                     ) : isRowSelectCell ? (
-                      <button
-                        aria-checked={rowCheckState}
+                      <Checkbox
+                        site="row-select"
+                        checked={
+                          rowCheckState === "true"
+                            ? true
+                            : rowCheckState === "mixed"
+                              ? "mixed"
+                              : false
+                        }
                         aria-label="Select row"
                         data-pretable-row-select="true"
                         onClick={(event) => {
                           event.stopPropagation();
-                          event.preventDefault();
                           // Both commands below write the engine's `rows`
                           // slice and nothing else — neither
                           // `toggleIndexedRowSelection` nor
@@ -7737,13 +7747,18 @@ export function PretableSurface<
                           ) {
                             const anchorId = lastCheckedRowAnchorRef.current;
                             indexedGrid.selectRowRange(anchorId, rowId);
-                          } else {
-                            grid.toggleRowSelection(rowId);
+                            lastCheckedRowAnchorRef.current = rowId;
+                            // The range IS the write. `preventDefault` vetoes
+                            // the kit's plain toggle, which would otherwise
+                            // land on top of it and unselect the row just
+                            // clicked.
+                            event.preventDefault();
                           }
-
+                        }}
+                        onCheckedChange={() => {
+                          grid.toggleRowSelection(rowId);
                           lastCheckedRowAnchorRef.current = rowId;
                         }}
-                        role="checkbox"
                         // Out of the sequential tab order, matching
                         // BooleanCellControl and the roving-tabindex pattern:
                         // controls inside a cell are reached by navigating to
@@ -7757,14 +7772,7 @@ export function PretableSurface<
                         // (see `handleSurfaceKeyDown`), which works in both
                         // engines.
                         tabIndex={-1}
-                        type="button"
-                      >
-                        {rowCheckState === "true" ? (
-                          <CheckIcon />
-                        ) : rowCheckState === "mixed" ? (
-                          <MinusIcon />
-                        ) : null}
-                      </button>
+                      />
                     ) : (
                       <MemoizedCellContent
                         rowId={rowId}
diff --git a/packages/react/src/tool-panel/ColumnsSection.tsx b/packages/react/src/tool-panel/ColumnsSection.tsx
index 6deb72bc..7b2854a3 100644
--- a/packages/react/src/tool-panel/ColumnsSection.tsx
+++ b/packages/react/src/tool-panel/ColumnsSection.tsx
@@ -13,7 +13,7 @@ import { GROUP_COLUMN_ID } from "@pretable/core";
 
 import { usePretableComponents } from "../components/context";
 import { ROW_SELECT_COLUMN_ID } from "../constants";
-import { CheckIcon, GripIcon, OverflowIcon } from "../icons";
+import { GripIcon, OverflowIcon } from "../icons";
 import type { AutoWidthSetReader } from "../pretable-model";
 import { menuPopoverStyle } from "../overlay/popover-position";
 import { useHeaderPopover } from "../overlay/useHeaderPopover";
@@ -119,7 +119,7 @@ export function ColumnsSection({
   autoWidths,
   messages,
 }: ColumnsSectionProps) {
-  const { Button, IconButton } = usePretableComponents();
+  const { Button, IconButton, TextInput, Checkbox } = usePretableComponents();
 
   // Live engine state, read through the section's OWN subscription — never a
   // snapshot baked into the descriptor closure. The read returns the state's
@@ -383,7 +383,8 @@ export function ColumnsSection({
 
   return (
     <>
-      <input
+      <TextInput
+        site="tool-search"
         aria-label={messages.toolPanelSearchColumnsLabel()}
         data-pretable-tool-search=""
         onChange={(event) => {
@@ -492,20 +493,15 @@ export function ColumnsSection({
                     >
                       <GripIcon />
                     </span>
-                    {/* The row-select checkbox's exact recipe — a button with
-                      role=checkbox and a CheckIcon glyph when checked — so
-                      the shared grid.css checkbox rules style both from one
-                      place. */}
-                    <button
-                      aria-checked={visible}
+                    <Checkbox
+                      site="tool-column-toggle"
                       aria-label={messages.toolPanelShowColumnLabel({ label })}
                       data-pretable-tool-column-toggle=""
-                      onClick={() => grid.setColumnVisible(entry.id, !visible)}
-                      role="checkbox"
-                      type="button"
-                    >
-                      {visible ? <CheckIcon /> : null}
-                    </button>
+                      checked={visible}
+                      onCheckedChange={(next) =>
+                        grid.setColumnVisible(entry.id, next)
+                      }
+                    />
                     <span data-pretable-tool-column-label="">{label}</span>
                     <IconButton
                       site="tool-row-menu-button"
diff --git a/packages/react/src/tool-panel/filters/FilterRow.tsx b/packages/react/src/tool-panel/filters/FilterRow.tsx
index 23e3cfff..366fb4f1 100644
--- a/packages/react/src/tool-panel/filters/FilterRow.tsx
+++ b/packages/react/src/tool-panel/filters/FilterRow.tsx
@@ -174,7 +174,7 @@ export function FilterRow({
   processing,
   messages,
 }: FilterRowProps) {
-  const { IconButton, Select } = usePretableComponents();
+  const { IconButton, Select, TextInput, Checkbox } = usePretableComponents();
   const column = columns.find((c) => c.id === columnId);
   const type = column?.type ?? "text";
   const label = column?.label ?? columnId;
@@ -345,7 +345,8 @@ export function FilterRow({
       />
 
       {shape === "single" ? (
-        <input
+        <TextInput
+          site="filter-row-value"
           {...fieldProps}
           data-pretable-filter-row-value=""
           aria-label={messages.toolPanelFilterValueLabel()}
@@ -356,14 +357,16 @@ export function FilterRow({
 
       {shape === "range" ? (
         <>
-          <input
+          <TextInput
+            site="filter-row-value"
             {...fieldProps}
             data-pretable-filter-row-value=""
             aria-label={messages.toolPanelFilterMinimumLabel()}
             value={draft.min ?? ""}
             onChange={(e) => push({ ...draft, min: e.target.value })}
           />
-          <input
+          <TextInput
+            site="filter-row-value"
             {...fieldProps}
             data-pretable-filter-row-value=""
             aria-label={messages.toolPanelFilterMaximumLabel()}
@@ -375,7 +378,7 @@ export function FilterRow({
 
       {shape === "set" ? (
         <div
-          data-pretable-filter-row-value=""
+          data-pretable-filter-row-set=""
           role="group"
           aria-label={messages.toolPanelFilterValuesLabel()}
         >
@@ -389,11 +392,12 @@ export function FilterRow({
           ) : null}
           {choices.map((option) => (
             <label key={option.value}>
-              <input
-                type="checkbox"
-                value={option.value}
+              <Checkbox
+                site="filter-row-choice"
+                data-pretable-filter-row-choice=""
+                data-pretable-value={option.value}
                 checked={(draft.selected ?? []).includes(option.value)}
-                onChange={(e) => toggle(option.value, e.target.checked)}
+                onCheckedChange={(next) => toggle(option.value, next)}
               />
               {optionLabel(option)}
             </label>
diff --git a/packages/react/src/tool-panel/grouping/GroupingSection.tsx b/packages/react/src/tool-panel/grouping/GroupingSection.tsx
index e9272dbf..d7bdebf2 100644
--- a/packages/react/src/tool-panel/grouping/GroupingSection.tsx
+++ b/packages/react/src/tool-panel/grouping/GroupingSection.tsx
@@ -148,7 +148,7 @@ export function GroupingSection({
   aggregatesEnabled,
   messages,
 }: GroupingSectionProps) {
-  const { Button, IconButton, Select } = usePretableComponents();
+  const { Button, IconButton, Select, Checkbox } = usePretableComponents();
   // The section's OWN subscription, and the SNAPSHOT slice rather than the
   // state (FiltersSection's pattern): `rowGroups` changes identity only when
   // a query commits, so every other publish bails in useSyncExternalStore's
@@ -504,11 +504,11 @@ export function GroupingSection({
         it. */}
       <div>
         <label>
-          <input
+          <Checkbox
+            site="hide-grouped"
             checked={hideGroupedColumns}
             data-pretable-hide-grouped=""
-            onChange={() => grid.setHideGroupedColumns(!hideGroupedColumns)}
-            type="checkbox"
+            onCheckedChange={(next) => grid.setHideGroupedColumns(next)}
           />
           {messages.toolPanelHideGroupedColumnsLabel()}
         </label>
diff --git a/packages/ui/grid.css b/packages/ui/grid.css
index c68eed59..797ed9fb 100644
--- a/packages/ui/grid.css
+++ b/packages/ui/grid.css
@@ -909,63 +909,21 @@
     padding-top: var(--pretable-cell-padding-y);
   }
 
-  /* The tool panel's visibility toggle is enrolled here rather than restyled
-     in its own section: it IS this checkbox, and two hand-kept copies of the
-     same control are how a theme edit makes them drift apart. */
-  :where(
-    button[data-pretable-row-select],
-    button[data-pretable-row-select-all],
-    button[data-pretable-bool-cell],
-    button[data-pretable-tool-column-toggle]
-  ) {
-    width: 16px;
-    height: 16px;
-    border: 1px solid var(--pretable-checkbox-border);
-    background: var(--pretable-checkbox-bg);
-    border-radius: 3px;
-    cursor: pointer;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 11px;
-    line-height: 1;
-    color: var(--pretable-checkbox-checked-fg);
-  }
-  :where(
-    button[data-pretable-row-select][aria-checked="true"],
-    button[data-pretable-row-select-all][aria-checked="true"],
-    button[data-pretable-bool-cell][aria-checked="true"],
-    button[data-pretable-tool-column-toggle][aria-checked="true"]
-  ) {
-    background: var(--pretable-checkbox-checked-bg);
-    border-color: var(--pretable-checkbox-checked-bg);
-    color: var(--pretable-checkbox-checked-fg);
-  }
-  :where(
-    button[data-pretable-row-select][aria-checked="mixed"],
-    button[data-pretable-row-select-all][aria-checked="mixed"]
-  ) {
-    background: var(--pretable-checkbox-checked-bg);
-    border-color: var(--pretable-checkbox-checked-bg);
-    color: var(--pretable-checkbox-checked-fg);
-  }
-
-  /* Boolean toggle cell (typed editors) */
-  :where(button[data-pretable-bool-cell]) {
+  /* Boolean toggle cell (typed editors). The box, the glyph colour and the
+     checked fill all come from the kit checkbox rule; what is left here is
+     the cell's own placement — centred in a data cell — and the two states
+     no other checkbox has, busy and invalid. */
+  :where([data-pretable-bool-cell]) {
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  :where(button[data-pretable-bool-cell]:disabled) {
-    cursor: default;
-  }
-  :where(button[data-pretable-bool-cell][aria-busy="true"]) {
+  :where([data-pretable-bool-cell][aria-busy="true"]) {
     opacity: 0.5;
     cursor: wait;
   }
-  :where(button[data-pretable-bool-cell][aria-invalid="true"]) {
+  :where([data-pretable-bool-cell][aria-invalid="true"]) {
     outline: 1px solid var(--pretable-text-error);
     outline-offset: 1px;
   }
@@ -1166,43 +1124,31 @@
     line-height: 1.5;
     color: var(--pretable-text-cell);
   }
-  :where([data-pretable-filter-menu]) input[type="text"],
-  :where([data-pretable-filter-menu]) input[type="date"],
-  :where([data-pretable-filter-menu]) input:not([type]) {
+  /* The dialog's three value fields. Kit text inputs: the kit rule at the top
+     of this file draws the box, the rule border and the ink. What is the
+     dialog's own is the size and the inset — full width, the 28px the
+     operator picker beside them stands at (an input left to its own padding
+     comes out several pixels taller, and a stacked pair that does not line
+     up is what this height buys), and this dialog's 7px rather than the
+     kit's 6px. */
+  :where(
+    [data-pretable-filter-value],
+    [data-pretable-filter-min],
+    [data-pretable-filter-max]
+  ) {
     width: 100%;
-    box-sizing: border-box;
-    /* An explicit box, like the tool pane's identical controls: the operator
-       picker beside these is a kit select with its own fixed block-size, and
-       an input left to its own padding comes out several pixels taller — a
-       stacked pair that does not line up. Both centre their own text
-       vertically once the height is set, so the block padding goes. */
     block-size: 28px;
     padding-inline: 7px;
-    border: 1px solid var(--pretable-rule);
-    border-radius: var(--pretable-radius-control);
-    background: var(--pretable-bg-grid);
-    color: var(--pretable-text-cell);
-    font: inherit;
   }
-  /* The dialog's operator picker. A kit select: the rule above draws the box
-     for the INPUTS beside it, and the kit rule at the top of this file draws
-     this one's. What is the dialog's own is the size — full width, the 28px
-     the fields beside it stand at, and this dialog's 7px inset rather than
-     the kit's 6px. */
+  /* The dialog's operator picker. A kit select: the kit rules at the top of
+     this file draw both this box and the fields' beside it. What is the
+     dialog's own is the size — full width, the 28px the fields beside it
+     stand at, and this dialog's 7px inset rather than the kit's 6px. */
   :where([data-pretable-filter-operator]) {
     width: 100%;
     block-size: 28px;
     padding-inline: 7px;
   }
-  /* The product's focus ring, not the host page's. Without this the dialog's
-     fields keep the UA ring — which takes the CONSUMER's accent-color, so
-     tabbing from the pane's copy of these same controls to this one changed
-     the ring's colour, width and offset. The declaration the builder rows
-     already share. */
-  :where([data-pretable-filter-menu] input:focus-visible) {
-    outline: 2px solid var(--pretable-focus-ring);
-    outline-offset: -2px;
-  }
   :where([data-pretable-filter-set]) label {
     display: flex;
     gap: 6px;
@@ -1797,19 +1743,14 @@
     overflow-y: auto;
   }
 
-  /* The filter menu's input treatment, restated rather than shared: the menus
-     portal into <body> and this input does not, and coupling their selectors
-     would make the next popover edit silently restyle the panel. */
+  /* A kit text input: the kit rule at the top of this file draws the box, the
+     rule border and the ink. What is the pane's own is the size and the
+     spacing — full width, the 6px gap to the list below, and this pane's
+     5px/7px inset rather than the kit's 6px inline. */
   :where([data-pretable-tool-search]) {
-    box-sizing: border-box;
     inline-size: 100%;
     margin-block-end: 6px;
     padding: 5px 7px;
-    border: 1px solid var(--pretable-rule);
-    border-radius: var(--pretable-radius-control);
-    background: var(--pretable-bg-grid);
-    color: var(--pretable-text-cell);
-    font: inherit;
   }
 
   /* Group labels split the list by pin state. Size and tracking do the
@@ -2030,11 +1971,11 @@
     color: var(--pretable-text-dim);
   }
 
-  /* The single-value field. NOT a kit control — an <input>, which no kit rule
-     draws — so it keeps the whole box here: the frame, the surface, the ink
-     and the font, at the same 24px the pickers beside it stand at, because
-     the difference between "which column", "which operator" and "what value"
-     is the words inside the box, not the frame around it.
+  /* The single-value field. A kit text input: the kit rule at the top of this
+     file draws the frame, the surface, the ink and the font, so what is left
+     here is size and flex participation — the same 24px the pickers beside it
+     stand at, because the difference between "which column", "which operator"
+     and "what value" is the words inside the box, not the frame around it.
      `flex: 1 1 auto` WITH an explicit `min-inline-size`, which is the pair
      that makes the wrapping row above work: a field's automatic minimum size
      is its content, so one long value would hold the row wider than the pane
@@ -2046,22 +1987,11 @@
      one states nothing.
      24px is the height this section bought for the join and the add actions,
      so the whole row clears 2.5.8 on every pointer rather than only where a
-     coarse-pointer block applies.
-     `font: inherit` as the SHORTHAND — the add action's choice, not the
-     join's longhands: UA stylesheets set their own font on form controls, and
-     this rule sets no size of its own, so there is nothing for the shorthand
-     to overwrite. */
-  :where(input[data-pretable-filter-row-value]) {
-    box-sizing: border-box;
+     coarse-pointer block applies. */
+  :where([data-pretable-filter-row-value]) {
     flex: 1 1 auto;
     min-inline-size: 24px;
     block-size: 24px;
-    padding-inline: 6px;
-    border: 1px solid var(--pretable-rule);
-    border-radius: var(--pretable-radius-control);
-    background: var(--pretable-bg-grid);
-    color: var(--pretable-text-cell);
-    font: inherit;
   }
   /* The builder's pickers: size and flex participation only — the kit select
      rule at the top of this file draws the box. `min-inline-size` matters for
@@ -2086,16 +2016,18 @@
   /* The set shape's checklist, which is not a field: it takes its own line
      (`flex-basis: 100%` in a wrapping row) because a column of checkboxes
      beside three 24px controls would set the row's height to the number of
-     choices. Declared AFTER the rule above and matching a different element,
-     so nothing here is overriding anything — every selector in this file is
-     :where()-flattened to (0,0,0) and source order is the only lever. */
-  :where(div[data-pretable-filter-row-value]) {
+     choices. Its OWN attribute, not the field's: the wrapper wore
+     `data-pretable-filter-row-value` while the field was a bare <input> and
+     an element-type selector could tell the two apart. Both are kit controls
+     now — the field is the kit's <input> — so one attribute on both would
+     hand the wrapper the field's size rule. */
+  :where([data-pretable-filter-row-set]) {
     display: flex;
     flex-direction: column;
     gap: 2px;
     flex-basis: 100%;
   }
-  :where(div[data-pretable-filter-row-value]) label {
+  :where([data-pretable-filter-row-set]) label {
     display: flex;
     align-items: center;
     gap: 6px;
@@ -2130,32 +2062,11 @@
     );
     color: var(--pretable-text-cell);
   }
-  /* The value field's ring, an OUTLINE like every other ring in this file: a
-     box-shadow would spend the one shadow slot this control might later want
-     for elevation, and whichever declaration lost would lose silently. The
-     two pickers beside it take the KIT select's ring — same declaration, one
-     source — so only the input is named here.
-     `input[...-value]`, not the bare attribute: the set shape wears the same
-     attribute on a <div> wrapper, which takes no focus. A rule that matched it
-     would be inert today and would paint a ring around the whole checklist the
-     day anything made that wrapper focusable — a state nobody would have
-     designed. The FIELDS are what focus, so the field is what the selector
-     names. */
-  :where(input[data-pretable-filter-row-value]:focus-visible) {
-    outline: 2px solid var(--pretable-focus-ring);
-    outline-offset: -2px;
-  }
-  /* The checklist's checkboxes, which the rule above deliberately does not
-     reach — they are inside the wrapper, not the wrapper. Without this they
-     keep the UA's own focus ring, so tabbing through a set filter would change
-     ring colour and shape halfway down a row that is otherwise entirely this
-     section's. A POSITIVE offset, unlike every other ring here: a checkbox is
-     ~13px and paints to its own edge, so an inset ring would sit on top of the
-     box instead of around it. */
-  :where(div[data-pretable-filter-row-value]) input:focus-visible {
-    outline: 2px solid var(--pretable-focus-ring);
-    outline-offset: 1px;
-  }
+  /* The field's ring and the checklist's are both the KIT's now — the shared
+     ring rule in the state section, plus the kit-level positive offset every
+     checkbox takes. This section declared two of its own while these controls
+     were bare elements; keeping them would be two more copies of one
+     declaration to drift. */
 
   /* The connective, which is the thing users misread — so it sits between
      rows carrying the run's join rather than hiding in a group header. Two
@@ -2260,9 +2171,9 @@
     flex-direction: row;
     gap: 4px;
   }
-  /* The hide-grouped switch: a native checkbox and its clickable label on
+  /* The hide-grouped switch: a kit checkbox and its clickable label on
      one line, sized to the add button's 24px row so the stack keeps the
-     rail's rhythm. */
+     rail's rhythm. The ring is the kit's, here and in the checklists. */
   :where([data-pretable-tool-grouping] label) {
     display: inline-flex;
     align-items: center;
@@ -2271,13 +2182,6 @@
     block-size: 24px;
     cursor: pointer;
   }
-  /* The checklist checkboxes' ring (its comment argues the POSITIVE offset:
-     a ~13px box painting to its own edge would be covered by an inset
-     ring), restated here because that rule is scoped to the filter rows. */
-  :where(input[data-pretable-hide-grouped]:focus-visible) {
-    outline: 2px solid var(--pretable-focus-ring);
-    outline-offset: 1px;
-  }
 
   /* ---- Kit components: state -------------------------------------------
      The ring and the disabled ink come LAST in the layer, after every site
@@ -2300,6 +2204,18 @@
     outline: 2px solid var(--pretable-focus-ring);
     outline-offset: -2px;
   }
+  /* A checkbox rings OUTSIDE its box, alone among the kit controls. The
+     square is 16px and paints to its own edge — border, fill and glyph all
+     the way out — so the inset ring above would land ON the box rather than
+     around it, and the state would read as a recoloured border. The
+     checklists' own rules said exactly this while they had one each; every
+     checkbox gets it now, the four button sites included, which had the UA's
+     ring before this component existed.
+     AFTER the shared rule, not merged into it: both selectors are
+     :where()-flattened to (0,0,0), so this only wins by source order. */
+  :where([data-pretable-checkbox]:focus-visible) {
+    outline-offset: 1px;
+  }
   /* The standard disabled treatment (#573): dim by token, drop the pointer. */
   :where(
     [data-pretable-button]:disabled,
diff --git a/packages/ui/src/__tests__/css-cascade.test.ts b/packages/ui/src/__tests__/css-cascade.test.ts
index b601a377..7eac7460 100644
--- a/packages/ui/src/__tests__/css-cascade.test.ts
+++ b/packages/ui/src/__tests__/css-cascade.test.ts
@@ -95,6 +95,15 @@ const SITE_ATTRS: Record<string, string[]> = {
 const attrsFor = (site: string) =>
   SITE_ATTRS[site] ?? [`data-pretable-${site}]`];
 
+/** The kit's checkbox-only ring offset, the one declaration that makes a
+ *  checkbox ring OUTSIDE its box. Read by two guards: the ordering one, which
+ *  cares where it sits, and the builder checklist's, which cares that it is
+ *  what rings its choices now. */
+const kitCheckboxRingOffset = (css: string) =>
+  css.match(
+    /:where\(\[data-pretable-checkbox\]:focus-visible\)\s*\{([\s\S]*?)\}/,
+  )?.[1] ?? "";
+
 /** The token names pretable.css declares — the contract a section may read
  *  from and must not add to. Same source the token contract test loads. */
 const tokenContract = () => {
@@ -120,7 +129,7 @@ describe("grid.css cascade contract", () => {
     expect(css).toMatch(/:where\(textarea\.pretable-cell-editor\)/);
     expect(css).toMatch(/data-pretable-bool-cell/);
     expect(css).toMatch(
-      /:where\(button\[data-pretable-bool-cell\]\[aria-invalid="true"\]\)/,
+      /:where\(\[data-pretable-bool-cell\]\[aria-invalid="true"\]\)/,
     );
     expect(css).toMatch(/var\(--pretable-edit-bg\)/);
     expect(css).toMatch(/var\(--pretable-text-error\)/);
@@ -706,11 +715,32 @@ describe("grid.css cascade contract", () => {
     // surface, kit control or not. Both shapes are what Task 8 removes when
     // the sites start wearing [data-pretable-text-input] and
     // [data-pretable-checkbox].
+    //
+    // The site list is the source, not a hand-kept alternation: every site
+    // that has a kit component behind it is policed, so a new one is covered
+    // the day it joins the list rather than the day someone remembers this
+    // regex. `data-pretable-filter-join` is deliberately NOT here — it is no
+    // kit control, and its element type is load-bearing: the SAME attribute
+    // rides a <span> (the run's leading `Where`) that must not take the
+    // button's border, so `button[…]` there is the selector doing its job.
+    const kitAttrs = [
+      ...PUSH_BUTTON_SITES,
+      ...SELECT_SITES,
+      ...TEXT_INPUT_SITES,
+      ...CHECKBOX_SITES,
+    ]
+      .flatMap((site) => attrsFor(site))
+      // `attrsFor` carries the `]` terminator; the element-type shape needs
+      // the bare attribute name so `[` can follow it here.
+      .map((attr) => attr.slice(0, -1))
+      .concat(["data-pretable-text-input", "data-pretable-checkbox"]);
+    const typed = new RegExp(
+      `(^|[\\s,(])(input|button|select|textarea)\\[(${kitAttrs.join("|")})`,
+    );
     const css = strippedCss();
-    const offenders = rulesSelecting(css, (s) =>
-      /(^|[\s,(])input\[data-pretable-|(^|[\s,(])button\[data-pretable-(row-select|bool-cell|tool-column-toggle)|\]\s+input(\[|:|\s|$)|\)\s+input\[/.test(
-        s,
-      ),
+    const offenders = rulesSelecting(
+      css,
+      (s) => typed.test(s) || /[\])]\s+input(\[|:|\s|$)/.test(s),
     ).map((m) => m[1].trim());
     expect(
       offenders,
@@ -778,7 +808,10 @@ describe("grid.css cascade contract", () => {
     // per-site size here, unlike every other kind: a checkbox is one size
     // everywhere in the grid. So a site that names any of these is the
     // second hand-kept copy the collapse exists to remove.
-    const CHECKBOX_DISPLAY = /(?:^|[;{\s])display:\s*inline-flex/;
+    // `display: inline-flex` is the kit's; `display: flex` at the boolean
+    // cell is not the same declaration, and is that site's own placement
+    // decision (centre a 16px control inside a data cell), so the forbidden
+    // pattern below names the kit's value and nothing carves anything out.
     const CHECKBOX_OWNED = [
       /(?:^|[;{\s])width:\s*16px/,
       /(?:^|[;{\s])height:\s*16px/,
@@ -786,16 +819,8 @@ describe("grid.css cascade contract", () => {
       /(?:^|[;{\s])background:\s*var\(--pretable-checkbox-bg\)/,
       /border-radius:\s*3px/,
       /(?:^|[;{\s])cursor:\s*pointer/,
-      CHECKBOX_DISPLAY,
+      /(?:^|[;{\s])display:\s*inline-flex/,
     ];
-    // `display` is forbidden at every checkbox site but one. The boolean
-    // cell says `display: flex` to centre a 16px control inside a table
-    // cell: that is a PLACEMENT decision about where the control sits in
-    // its host, not a copy of the kit's box, and it happens to override the
-    // kit's `inline-flex` because the two are the same property. Banning it
-    // there would drive the centring out of the file.
-    const DISPLAY_ALLOWED = new Set(["bool-cell"]);
-
     // What each site genuinely OWNS, and must keep after the collapse: a
     // size, a reveal, an alignment. Without this the guard passes for a site
     // whose rule was deleted outright rather than collapsed into the kit.
@@ -863,10 +888,7 @@ describe("grid.css cascade contract", () => {
           !selector.includes(":disabled"),
       );
       const forbidden = CHECKBOX_SITES.includes(site)
-        ? CHECKBOX_OWNED.filter(
-            (owned) =>
-              !(DISPLAY_ALLOWED.has(site) && owned === CHECKBOX_DISPLAY),
-          )
+        ? CHECKBOX_OWNED
         : TEXT_INPUT_SITES.includes(site)
           ? TEXT_INPUT_OWNED
           : SELECT_SITES.includes(site)
@@ -1078,6 +1100,22 @@ describe("grid.css cascade contract", () => {
       selectDisabled,
       "the kit select disabled treatment precedes a site rule, which can then overwrite it",
     ).toBeGreaterThan(lastSite);
+
+    // The checkbox's ring offset overrides the shared ring's `-2px`, and both
+    // selectors are :where()-flattened to (0,0,0), so ORDER is the whole of
+    // what makes it win. Above the shared rule it is silently undone and
+    // every checkbox rings inside its own box again — a state that looks
+    // like a recoloured border, with nothing else in this suite the wiser.
+    const checkboxOffset = css.search(
+      /:where\(\[data-pretable-checkbox\]:focus-visible\)\s*\{/,
+    );
+    expect(checkboxOffset, "no kit checkbox ring-offset rule").toBeGreaterThan(
+      -1,
+    );
+    expect(
+      checkboxOffset,
+      "the checkbox's ring offset precedes the shared ring, which then overwrites it at equal specificity",
+    ).toBeGreaterThan(ring);
   });
 
   test("a focused cell draws its ring with `outline`, never `box-shadow`", () => {
@@ -1422,18 +1460,42 @@ describe("grid.css cascade contract", () => {
 
   test("the filter dialog's fields wear the product's focus ring", () => {
     const css = strippedCss();
-    // Without a rule of its own a field keeps the UA ring, which takes the
+    // Without a ring of its own a field keeps the UA's, which takes the
     // CONSUMER's accent-color — a different colour and shape from the ring on
-    // the identical controls in the tool pane.
+    // the identical controls in the tool pane. Since the collapse that ring
+    // is the KIT's, on `[data-pretable-text-input]`, rather than a rule of
+    // the dialog's own scoped to `[data-pretable-filter-menu] input`: the
+    // dialog's fields ARE kit text inputs, and the same declaration written
+    // twice is what drifts. So the claim is checked where it now lives, and
+    // it must still reach all three of the dialog's fields.
     const rules = rulesSelecting(
       css,
       (selector) =>
-        selector.includes("data-pretable-filter-menu") &&
-        selector.includes(":focus-visible"),
+        selector.includes("data-pretable-text-input]:focus-visible") ||
+        (selector.includes("data-pretable-filter-menu") &&
+          selector.includes(":focus-visible")),
     );
     expect(rules.length).toBeGreaterThan(0);
     const body = rules.map((m) => m[2]).join("");
     expect(body).toMatch(/outline:\s*2px solid var\(--pretable-focus-ring\)/);
+    // The selector must be the KIT attribute, not a dialog-scoped copy: a
+    // rule saying `[data-pretable-filter-menu] input:focus-visible` would
+    // satisfy the assertion above while leaving the builder's identical
+    // field and the pane's search box on the UA ring.
+    expect(
+      rules.map((m) => m[1]).join(""),
+      "the dialog's field ring is a local copy again; the kit owns it",
+    ).toContain("data-pretable-text-input]:focus-visible");
+    // And the three fields still exist as sites, so the ring has something
+    // to reach; that they RENDER a kit text input is pinned in
+    // @pretable/react's attribute-contract suite, which can see the DOM.
+    for (const attr of [
+      "data-pretable-filter-value]",
+      "data-pretable-filter-min]",
+      "data-pretable-filter-max]",
+    ]) {
+      expect(css, `no rule for [${attr}`).toContain(attr);
+    }
   });
 
   test("body cells clip their own content instead of spilling into the next column", () => {
@@ -1978,13 +2040,15 @@ describe("grid.css cascade contract", () => {
           new RegExp(`:where\\(\\s*\\[${attr}\\]`),
         );
       }
-      // The visibility checkbox is the grid's own checkbox control, enrolled
-      // in the row-select rules so the panel and the selection column cannot
-      // drift apart.
+      // The visibility checkbox is the grid's own checkbox control — a kit
+      // `PretableCheckbox`, so the box comes from `[data-pretable-checkbox]`
+      // and the panel and the selection column cannot drift apart. What is
+      // asserted here is that the panel still IDENTIFIES it: an attribute a
+      // consumer can select on, and the site guard's own anchor.
       expect(
         css,
-        "no rule for button[data-pretable-tool-column-toggle]",
-      ).toMatch(/button\[data-pretable-tool-column-toggle\]/);
+        "no rule for [data-pretable-checkbox], which is what draws the visibility toggle",
+      ).toMatch(/:where\(\[data-pretable-checkbox\]\)/);
       // The states the panel is unusable without: an open tab, a keyboard
       // ring on tabs and rows, and drag feedback.
       expect(css, "no selected-tab rule").toMatch(
@@ -2255,10 +2319,14 @@ describe("grid.css cascade contract", () => {
           `[${attr}] is not in the leaf row's shared picker rule`,
         ).toContain(attr);
       }
+      // The field's own attribute, and only its own: the checklist WRAPPER
+      // wore this same attribute until the collapse — `div[…]` told them
+      // apart — and now wears `data-pretable-filter-row-set` instead, so a
+      // bare-attribute predicate reaches exactly one rule again.
       const fieldRules = rulesSelecting(
         css,
         (sel) =>
-          sel.includes("input[data-pretable-filter-row-value]") &&
+          sel.includes("data-pretable-filter-row-value]") &&
           !sel.includes(":focus"),
       );
       expect(fieldRules, "no leaf-row value field box rule").toHaveLength(1);
@@ -2282,8 +2350,24 @@ describe("grid.css cascade contract", () => {
           /block-size:\s*24px/,
         );
       }
-      // The field's own box-sizing; the pickers take the kit rule's.
-      expect(field).toMatch(/box-sizing:\s*border-box/);
+      // Both take their box-sizing from a KIT rule now — the field from the
+      // text input's, the pickers from the select's. Same claim as before,
+      // one source instead of two: the 24px the row promises is an OUTER
+      // 24px, and a content-box field with a 1px border stands 26 beside a
+      // 24px picker.
+      expect(
+        rulesSelecting(
+          css,
+          (sel) =>
+            sel.includes("data-pretable-text-input]") &&
+            !sel.includes("::") &&
+            !sel.includes(":hover") &&
+            !sel.includes(":focus") &&
+            !sel.includes(":disabled"),
+        )
+          .map((m) => m[2])
+          .join(""),
+      ).toMatch(/box-sizing:\s*border-box/);
       expect(
         rulesSelecting(
           css,
@@ -2306,9 +2390,14 @@ describe("grid.css cascade contract", () => {
       // `flex-basis: 100%` it sits beside the three 24px fields and sets the
       // row's height to the number of choices — an enum with twelve values
       // would draw a twelve-line row inside a 264px pane.
+      // The wrapper wears its OWN attribute since the collapse
+      // (`data-pretable-filter-row-set`): while the field was a bare <input>
+      // the element type told the two apart, and now that both are kit
+      // controls one shared attribute would hand the wrapper the field's
+      // 24px size rule.
       const css = strippedCss();
       const list = css.match(
-        /:where\(div\[data-pretable-filter-row-value\]\)\s*\{([\s\S]*?)\}/,
+        /:where\(\[data-pretable-filter-row-set\]\)\s*\{([\s\S]*?)\}/,
       )?.[1];
       expect(list, "no set-shape checklist rule").toBeDefined();
       expect(
@@ -2316,23 +2405,24 @@ describe("grid.css cascade contract", () => {
         "the checklist must take its own line; beside the fields it sets the row's height to the number of choices",
       ).toMatch(/flex-basis:\s*100%/);
 
-      // And its checkboxes ring in the section's token, not the UA's own: the
-      // ring above deliberately does not reach inside the wrapper, so without
-      // this rule the ring changes colour and shape halfway down the row.
-      // A DESCENDANT of the wrapper — `…) input:focus-visible`, not
-      // `input[…-value]:focus-visible`, which is the FIELDS' own ring and
-      // contains every other substring this predicate could ask for. Written
-      // loosely, this guard stayed green with the checkbox rule deleted.
-      const ring = rulesSelecting(css, (sel) =>
-        /\[data-pretable-filter-row-value\][^{]*\)\s+input[^{]*:focus-visible/.test(
-          sel,
-        ),
+      // And its checkboxes ring in the product's token, not the UA's own —
+      // from the KIT now, not from a rule of this section's. The claim is
+      // the same one this section used to make on its own: the offset is
+      // POSITIVE, so the ring surrounds a box that paints to its own edge
+      // instead of covering it.
+      expect(
+        kitCheckboxRingOffset(css),
+        "the kit must ring a checkbox outside its box",
+      ).toMatch(/outline-offset:\s*1px/);
+      // And this section no longer draws one of its own: two copies of one
+      // declaration is what the collapse removed.
+      const local = rulesSelecting(css, (sel) =>
+        /data-pretable-filter-row-choice[^{]*:focus-visible/.test(sel),
       );
       expect(
-        ring.length,
-        "no focus ring for the checklist's checkboxes; the fields' own ring does not reach inside the wrapper",
-      ).toBe(1);
-      expect(ring[0]![2]).toMatch(/outline:[^;]*var\(--pretable-focus-ring\)/);
+        local.map((m) => m[1].trim()),
+        "the checklist draws its own ring again; the kit owns it",
+      ).toEqual([]);
     });
 
     test("the leaf row wraps", () => {

From 888751af5645cc5219441d05965773ca8483b8b1 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 15:29:59 -0700
Subject: [PATCH 13/20] fix(react,ui): a disabled checkbox keeps its tick;
 option identity is data-pretable-option-value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Six review findings from the fourteen-site migration (74609cf9).

1. A disabled, checked checkbox lost its tick. The kit's shared
   `:disabled` rule set `color: var(--pretable-text-dim)`, and on a
   checkbox `color` is not label ink — it is the CHECK GLYPH, painted on
   `--pretable-checkbox-checked-bg` at about 1.9:1. A read-only boolean
   column renders `BooleanCellControl` disabled on EVERY row, so that was
   every tick in the column. The checkbox is split out of the shared rule:
   the four text-drawing controls keep the dim ink, the checkbox keeps
   only `cursor: default` and lets its own tokens (and the checked rule
   above it) say what disabled looks like. Guarded in `css-cascade.test.ts`
   — no rule matching `[data-pretable-checkbox]:disabled` outside the
   forced-colours block may declare `color`; mutation-checked by re-adding
   the declaration, which fails the guard, then reverting.

2. `data-pretable-value` on the two checklists' choices conflated identity
   with state: on a select trigger that attribute is the one COMMITTED
   value. Both checklists now write `data-pretable-option-value`, and
   `listbox.tsx`'s options, which wrote plain `data-value` outside the
   `data-pretable-` namespace, write the same name. Selectors updated in
   `select-helpers.ts`, `components-listbox`, `components-select`,
   `filter-builder` and `tool-panel-aggregates-picker`;
   `attribute-contract.test.tsx` pins the new attribute on both checklists.

3. `filter-min` / `filter-max` were unpinned in `components-override`. The
   fixture gains a number column and both tests open its funnel, pick
   `between` through `chooseOption`, and assert the twins are the kit
   `TextInput` at `site="filter-value"` — and that an override replaces
   them too.

4. The "no `onSelectionChange` emit here" argument had ended up inside the
   `onClick` shift-range branch while the plain toggle moved to
   `onCheckedChange`. Hoisted above the `<Checkbox>` and reworded for the
   pair; only the shift-veto note stays inline.

5. The `resolvedComponents` comment had the context relation inverted. It
   now says what is true: a hook call in this body would run above its own
   provider and read an ancestor's context, ignoring this surface's prop.

6. Five suites hand-rolled `getAttribute("aria-checked")` reads that
   `checkboxState` exists for; all folded onto the helper, which leaves
   `checkbox-helpers.ts` as the only reader of the attribute in the suite.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/__tests__/attribute-contract.test.tsx | 13 +++
 .../src/__tests__/components-listbox.test.tsx | 13 ++-
 .../__tests__/components-override.test.tsx    | 98 +++++++++++++------
 .../src/__tests__/components-select.test.tsx  |  4 +-
 .../controlled-row-selection.test.tsx         | 72 +++++++-------
 .../controlled-state-write-back.test.tsx      |  3 +-
 .../src/__tests__/filter-builder.test.tsx     |  2 +-
 .../model-mode-synthetic-columns.test.tsx     |  3 +-
 .../__tests__/row-selection-callback.test.tsx | 13 +--
 .../react/src/__tests__/select-helpers.ts     |  6 +-
 .../selection-slice-boundary.test.tsx         | 28 +++---
 .../tool-panel-aggregates-picker.test.tsx     |  2 +-
 packages/react/src/components/listbox.tsx     |  6 +-
 packages/react/src/components/select.tsx      |  4 +-
 packages/react/src/filter-menu/FilterMenu.tsx |  2 +-
 packages/react/src/pretable-surface.tsx       | 34 ++++---
 .../src/tool-panel/filters/FilterRow.tsx      |  2 +-
 packages/ui/grid.css                          | 19 +++-
 packages/ui/src/__tests__/css-cascade.test.ts | 19 ++++
 19 files changed, 226 insertions(+), 117 deletions(-)

diff --git a/packages/react/src/__tests__/attribute-contract.test.tsx b/packages/react/src/__tests__/attribute-contract.test.tsx
index b814599e..300c0623 100644
--- a/packages/react/src/__tests__/attribute-contract.test.tsx
+++ b/packages/react/src/__tests__/attribute-contract.test.tsx
@@ -219,6 +219,19 @@ describe("attribute contract", () => {
         "[data-pretable-checkbox][data-pretable-filter-choice]",
       ),
     ).not.toBeNull();
+    // Which option a choice IS — the value it contributes to `isAnyOf` when
+    // ticked. It is not the choice's STATE (`aria-checked` carries that), and
+    // it is not the select trigger's `data-pretable-value`, which is the one
+    // COMMITTED value of a picker; the separate name is what keeps the two
+    // from being read as the same channel. The listbox writes it too, on
+    // every `[data-pretable-option]`.
+    for (const choice of ["filter-row-choice", "filter-choice"])
+      expect(
+        document
+          .querySelector(`[data-pretable-${choice}]`)
+          ?.getAttribute("data-pretable-option-value"),
+        `[data-pretable-${choice}] does not say which option it is`,
+      ).toBe("high");
     // The kit field's own attribute: the tool pane's search box wears it, in
     // the columns section.
     const columnsTab = Array.from(
diff --git a/packages/react/src/__tests__/components-listbox.test.tsx b/packages/react/src/__tests__/components-listbox.test.tsx
index bde96b70..2db26eb4 100644
--- a/packages/react/src/__tests__/components-listbox.test.tsx
+++ b/packages/react/src/__tests__/components-listbox.test.tsx
@@ -77,7 +77,10 @@ describe("Listbox", () => {
     expect(options[0]).toHaveAttribute("id", "lb-0"); // the format itself
     expect(options[3]).toHaveAttribute("id", listboxOptionId("lb", 3));
     expect(options[0]).toHaveAttribute("role", "option");
-    expect(options[0]).toHaveAttribute("data-value", "contains");
+    expect(options[0]).toHaveAttribute(
+      "data-pretable-option-value",
+      "contains",
+    );
     // aria-selected is the COMMITTED value, not the highlight.
     expect(options[1]).toHaveAttribute("aria-selected", "true");
     expect(options[0]).toHaveAttribute("aria-selected", "false");
@@ -122,11 +125,15 @@ describe("Listbox", () => {
       />,
     );
     fireEvent.click(
-      document.querySelector('[data-pretable-option][data-value="endsWith"]')!,
+      document.querySelector(
+        '[data-pretable-option][data-pretable-option-value="endsWith"]',
+      )!,
     );
     expect(onSelect).toHaveBeenCalledWith("endsWith");
     fireEvent.click(
-      document.querySelector('[data-pretable-option][data-value="custom"]')!,
+      document.querySelector(
+        '[data-pretable-option][data-pretable-option-value="custom"]',
+      )!,
     );
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
diff --git a/packages/react/src/__tests__/components-override.test.tsx b/packages/react/src/__tests__/components-override.test.tsx
index 7394e35e..fbe4398a 100644
--- a/packages/react/src/__tests__/components-override.test.tsx
+++ b/packages/react/src/__tests__/components-override.test.tsx
@@ -7,6 +7,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { Pretable } from "../pretable";
 import { PretableSurface } from "../pretable-surface";
 import type { PretableColumn } from "../types";
+import { chooseOption } from "./select-helpers";
 import type {
   PretableButtonComponent,
   PretableCheckboxComponent,
@@ -364,9 +365,19 @@ describe("the fields and checkboxes on the surface", () => {
   /** Wide enough to reach every one of the ten SP3 sites: an ENUM column
    *  gives both checklists their choices, a BOOLEAN column gives the boolean
    *  cell, and `rowSelectionColumn` gives the two selection checkboxes. */
-  type Rich = { id: string; name: string; sev: string; done: boolean };
+  type Rich = {
+    id: string;
+    name: string;
+    sev: string;
+    done: boolean;
+    qty: number;
+  };
   const richColumns: PretableColumn<Rich>[] = [
     { id: "name", header: "Name", widthPx: 160, type: "text" },
+    // A NUMBER column, for the range twins alone: `filter-min` and
+    // `filter-max` render only under a range-shaped operator, which no other
+    // column here can reach.
+    { id: "qty", header: "Qty", widthPx: 100, type: "number" },
     {
       id: "sev",
       header: "Sev",
@@ -383,8 +394,8 @@ describe("the fields and checkboxes on the surface", () => {
     },
   ];
   const richRows: Rich[] = [
-    { id: "a", name: "Alpha", sev: "high", done: true },
-    { id: "b", name: "Bravo", sev: "low", done: false },
+    { id: "a", name: "Alpha", sev: "high", done: true, qty: 1 },
+    { id: "b", name: "Bravo", sev: "low", done: false, qty: 2 },
   ];
 
   /** The filters pane open on a set-shaped leaf over the enum column, so the
@@ -424,14 +435,51 @@ describe("the fields and checkboxes on the surface", () => {
     return render(<Rich components={components} />);
   }
 
-  /** Open the enum column's funnel and hand back the portalled dialog. */
-  async function openSevFunnel(view: ReturnType<typeof renderRich>) {
-    const funnel = view.getByRole("button", { name: "Filter Sev" });
+  /** Open a column's funnel and hand back the portalled dialog, identified by
+   *  a marker the dialog's own body carries — `[data-pretable-filter-menu]`
+   *  alone would match whichever dialog is open, including one left over. */
+  async function openFunnel(
+    view: ReturnType<typeof renderRich>,
+    header: string,
+    marker: string,
+  ) {
+    const funnel = view.getByRole("button", { name: `Filter ${header}` });
     fireEvent.pointerDown(funnel);
     fireEvent.click(funnel);
     return await waitFor(() => {
-      const el = document.querySelector("[data-pretable-filter-menu]");
-      if (!el) throw new Error("dialog not open");
+      const el = document.querySelector(
+        `[data-pretable-filter-menu]:has([data-pretable-${marker}])`,
+      );
+      if (!el) throw new Error(`${header} dialog not open`);
+      return el;
+    });
+  }
+
+  /** The number column's dialog with the range twins drawn: its operator
+   *  picker starts single-shaped, so `between` has to be chosen first. */
+  async function openRangeDialog(view: ReturnType<typeof renderRich>) {
+    const funnel = view.getByRole("button", { name: "Filter Qty" });
+    fireEvent.pointerDown(funnel);
+    fireEvent.click(funnel);
+    // By aria-label, not by a part every dialog has: a stale dialog from an
+    // earlier step would satisfy `:has([data-pretable-filter-operator])` and
+    // this would then drive the WRONG column's picker.
+    const dialog = await waitFor(() => {
+      const el = document.querySelector<HTMLElement>(
+        '[data-pretable-filter-menu][aria-label="Filter Qty"]',
+      );
+      if (!el) throw new Error("Qty dialog not open");
+      return el;
+    });
+    chooseOption(
+      dialog.querySelector<HTMLElement>("[data-pretable-filter-operator]")!,
+      "between",
+    );
+    return await waitFor(() => {
+      const el = document.querySelector(
+        "[data-pretable-filter-menu]:has([data-pretable-filter-min])",
+      );
+      if (!el) throw new Error("range twins not drawn");
       return el;
     });
   }
@@ -475,19 +523,15 @@ describe("the fields and checkboxes on the surface", () => {
     kit("hide-grouped", "checkbox", "hide-grouped");
     // And the portalled dialog's two: the value field on a text column, the
     // checklist choices on the enum one.
-    const dialog = await openSevFunnel(view);
+    const dialog = await openFunnel(view, "Sev", "filter-choice");
     kit("filter-choice", "checkbox", "filter-choice", dialog);
-    const nameFunnel = view.getByRole("button", { name: "Filter Name" });
-    fireEvent.pointerDown(nameFunnel);
-    fireEvent.click(nameFunnel);
-    const textDialog = await waitFor(() => {
-      const el = document.querySelector(
-        "[data-pretable-filter-menu]:has([data-pretable-filter-value])",
-      );
-      if (!el) throw new Error("text dialog not open");
-      return el;
-    });
+    const textDialog = await openFunnel(view, "Name", "filter-value");
     kit("filter-value", "text-input", "filter-value", textDialog);
+    // And the range twins, which are the same `filter-value` site twice over
+    // — the site name is what the theme keys on, so both wear it.
+    const rangeDialog = await openRangeDialog(view);
+    kit("filter-min", "text-input", "filter-value", rangeDialog);
+    kit("filter-max", "text-input", "filter-value", rangeDialog);
   });
 
   it("replaces every TextInput and Checkbox, the portalled dialog's included", async () => {
@@ -523,19 +567,13 @@ describe("the fields and checkboxes on the surface", () => {
     mine("tool-column-toggle", "data-mine-check", "tool-column-toggle");
     fireEvent.click(view.getByRole("tab", { name: /group/i }));
     mine("hide-grouped", "data-mine-check", "hide-grouped");
-    const dialog = await openSevFunnel(view);
+    const dialog = await openFunnel(view, "Sev", "filter-choice");
     mine("filter-choice", "data-mine-check", "filter-choice", dialog);
-    const nameFunnel = view.getByRole("button", { name: "Filter Name" });
-    fireEvent.pointerDown(nameFunnel);
-    fireEvent.click(nameFunnel);
-    const textDialog = await waitFor(() => {
-      const el = document.querySelector(
-        "[data-pretable-filter-menu]:has([data-pretable-filter-value])",
-      );
-      if (!el) throw new Error("text dialog not open");
-      return el;
-    });
+    const textDialog = await openFunnel(view, "Name", "filter-value");
     mine("filter-value", "data-mine-field", "filter-value", textDialog);
+    const rangeDialog = await openRangeDialog(view);
+    mine("filter-min", "data-mine-field", "filter-value", rangeDialog);
+    mine("filter-max", "data-mine-field", "filter-value", rangeDialog);
 
     // And the kit is GONE from the whole tree, portal included: a site left
     // behind would satisfy every per-site check above.
diff --git a/packages/react/src/__tests__/components-select.test.tsx b/packages/react/src/__tests__/components-select.test.tsx
index 7daaf736..44c7363a 100644
--- a/packages/react/src/__tests__/components-select.test.tsx
+++ b/packages/react/src/__tests__/components-select.test.tsx
@@ -70,7 +70,9 @@ describe("PretableSelect", () => {
     expect(view.getByRole("listbox", { name: "Operator" })).toBe(list);
     expect(trigger).toHaveAttribute("aria-controls", list.id);
     expect(trigger).toHaveAttribute("aria-activedescendant", `${list.id}-0`);
-    fireEvent.click(list.querySelector('[data-value="equals"]')!);
+    fireEvent.click(
+      list.querySelector('[data-pretable-option-value="equals"]')!,
+    );
     expect(onChange).toHaveBeenCalledWith("equals");
     expect(document.querySelector("[data-pretable-listbox]")).toBeNull();
     expect(trigger).toHaveFocus();
diff --git a/packages/react/src/__tests__/controlled-row-selection.test.tsx b/packages/react/src/__tests__/controlled-row-selection.test.tsx
index 8218c2a6..f6bc0716 100644
--- a/packages/react/src/__tests__/controlled-row-selection.test.tsx
+++ b/packages/react/src/__tests__/controlled-row-selection.test.tsx
@@ -7,6 +7,7 @@ import { createColumnHelper, describeRowSelection } from "@pretable/core";
 import type { PretableRowSelectionState } from "@pretable/core";
 import { PretableSurface, type PretableSurfaceGrid } from "../pretable-surface";
 import type { PretableSelectionFor } from "../surface-types";
+import { checkboxState } from "./checkbox-helpers";
 
 /**
  * `state.rowSelection` — the checkbox slice, made settable.
@@ -57,8 +58,11 @@ function rowCheckbox(container: HTMLElement, rowId: string): HTMLElement {
   return box as HTMLElement;
 }
 
-function checkedState(container: HTMLElement, rowId: string): string | null {
-  return rowCheckbox(container, rowId).getAttribute("aria-checked");
+function checkedState(
+  container: HTMLElement,
+  rowId: string,
+): boolean | "mixed" {
+  return checkboxState(rowCheckbox(container, rowId));
 }
 
 function bodyCell(
@@ -154,9 +158,9 @@ describe("state.rowSelection", () => {
       />,
     );
 
-    expect(checkedState(container, "b")).toBe("true");
-    expect(checkedState(container, "a")).toBe("false");
-    expect(checkedState(container, "c")).toBe("false");
+    expect(checkedState(container, "b")).toBe(true);
+    expect(checkedState(container, "a")).toBe(false);
+    expect(checkedState(container, "c")).toBe(false);
   });
 
   it("unticks a row the consumer drops", () => {
@@ -169,11 +173,11 @@ describe("state.rowSelection", () => {
         echo={false}
       />,
     );
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
 
     fireEvent.click(getByTestId("clear"));
 
-    expect(checkedState(container, "b")).toBe("false");
+    expect(checkedState(container, "b")).toBe(false);
   });
 
   it("ticks every row from a symbolic all, without naming one", () => {
@@ -188,9 +192,9 @@ describe("state.rowSelection", () => {
 
     fireEvent.click(getByTestId("select-all"));
 
-    expect(checkedState(container, "a")).toBe("true");
-    expect(checkedState(container, "b")).toBe("true");
-    expect(checkedState(container, "c")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
+    expect(checkedState(container, "b")).toBe(true);
+    expect(checkedState(container, "c")).toBe(true);
     // The load-bearing half: the surface passed the SYMBOL through. Had it
     // expanded `{ kind: "all" }` into the three ids on the way in, the
     // checkboxes above would look identical and a million-row grid would pay a
@@ -214,9 +218,9 @@ describe("state.rowSelection", () => {
       />,
     );
 
-    expect(checkedState(container, "a")).toBe("true");
-    expect(checkedState(container, "b")).toBe("true");
-    expect(checkedState(container, "c")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
+    expect(checkedState(container, "b")).toBe(true);
+    expect(checkedState(container, "c")).toBe(true);
     const rowSelection = grids.at(-1)?.getState().selection.rows;
     expect(describeRowSelection(rowSelection!)).toEqual({
       kind: "explicit",
@@ -247,13 +251,13 @@ describe("state.rowSelection", () => {
     const { container, rerender } = render(
       <StreamingGrid visible={[rows[0]!]} />,
     );
-    expect(checkedState(container, "a")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
 
     rerender(<StreamingGrid visible={rows} />);
 
-    await waitFor(() => expect(checkedState(container, "b")).toBe("true"));
-    expect(checkedState(container, "c")).toBe("true");
-    expect(checkedState(container, "a")).toBe("true");
+    await waitFor(() => expect(checkedState(container, "b")).toBe(true));
+    expect(checkedState(container, "c")).toBe(true);
+    expect(checkedState(container, "a")).toBe(true);
   });
 
   it("excludes a named row from a symbolic all", () => {
@@ -264,9 +268,9 @@ describe("state.rowSelection", () => {
       />,
     );
 
-    expect(checkedState(container, "a")).toBe("true");
-    expect(checkedState(container, "b")).toBe("false");
-    expect(checkedState(container, "c")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
+    expect(checkedState(container, "b")).toBe(false);
+    expect(checkedState(container, "c")).toBe(true);
   });
 });
 
@@ -281,7 +285,7 @@ describe("the round trip", () => {
         onRender={onRender}
       />,
     );
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
     const rendersBefore = onRender.mock.calls.length;
 
     fireEvent.click(rowCheckbox(container, "a"));
@@ -291,8 +295,8 @@ describe("the round trip", () => {
     // `["b"]` back at the consumer first, because the stale controlled value
     // overwrites the tick before the callback runs.
     expect(onRowSelectionChange.mock.calls).toEqual([[["a", "b"]]]);
-    expect(checkedState(container, "a")).toBe("true");
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
+    expect(checkedState(container, "b")).toBe(true);
     // Settled: feeding the reported value back changes nothing, so the
     // consumer re-renders a bounded number of times rather than forever.
     expect(onRender.mock.calls.length - rendersBefore).toBeLessThan(6);
@@ -308,8 +312,8 @@ describe("the round trip", () => {
 
     fireEvent.click(rowCheckbox(container, "a"));
 
-    expect(checkedState(container, "a")).toBe("false");
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "a")).toBe(false);
+    expect(checkedState(container, "b")).toBe(true);
     expect(onRowSelectionChange).not.toHaveBeenCalled();
   });
 
@@ -333,12 +337,12 @@ describe("the round trip", () => {
       />,
     );
     fireEvent.click(rowCheckbox(container, "a"));
-    expect(checkedState(container, "a")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
 
     fireEvent.click(getByTestId("bump"));
 
-    expect(checkedState(container, "a")).toBe("true");
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
+    expect(checkedState(container, "b")).toBe(true);
   });
 
   it("still applies a value the consumer DOES change after a user tick", () => {
@@ -353,12 +357,12 @@ describe("the round trip", () => {
       />,
     );
     fireEvent.click(rowCheckbox(container, "a"));
-    expect(checkedState(container, "a")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
 
     fireEvent.click(getByTestId("clear"));
 
-    expect(checkedState(container, "a")).toBe("false");
-    expect(checkedState(container, "b")).toBe("false");
+    expect(checkedState(container, "a")).toBe(false);
+    expect(checkedState(container, "b")).toBe(false);
   });
 
   it("survives a re-render that changes nothing", () => {
@@ -380,7 +384,7 @@ describe("the round trip", () => {
     );
 
     expect(onRowSelectionChange.mock.calls.length).toBe(callsAfterTick);
-    expect(checkedState(container, "a")).toBe("true");
+    expect(checkedState(container, "a")).toBe(true);
   });
 });
 
@@ -426,7 +430,7 @@ describe("the slices stay separate while rowSelection is controlled", () => {
       },
     ]);
     // ...and the controlled checkbox slice is untouched by the cell gesture.
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
   });
 
   it("leaves the checkboxes uncontrolled when the slice is omitted", () => {
@@ -447,7 +451,7 @@ describe("the slices stay separate while rowSelection is controlled", () => {
 
     fireEvent.click(rowCheckbox(container, "b"));
 
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
     expect(onRowSelectionChange.mock.calls.at(-1)?.[0]).toEqual(["b"]);
   });
 });
diff --git a/packages/react/src/__tests__/controlled-state-write-back.test.tsx b/packages/react/src/__tests__/controlled-state-write-back.test.tsx
index d754b221..e85e3409 100644
--- a/packages/react/src/__tests__/controlled-state-write-back.test.tsx
+++ b/packages/react/src/__tests__/controlled-state-write-back.test.tsx
@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { createColumnHelper } from "@pretable/core";
 import { PretableSurface } from "../pretable-surface";
 import type { PretableSurfaceState } from "../surface-types";
+import { checkboxState } from "./checkbox-helpers";
 
 /**
  * The controlled write-back — the `useLayoutEffect` in `pretable-surface.tsx`
@@ -183,7 +184,7 @@ describe("controlled write-back", () => {
           "button[data-pretable-row-select]",
         ),
       ]
-        .filter((el) => el.getAttribute("aria-checked") === "true")
+        .filter((el) => checkboxState(el) === true)
         .map(
           (el) =>
             el.closest<HTMLElement>("[data-pretable-row-id]")?.dataset[
diff --git a/packages/react/src/__tests__/filter-builder.test.tsx b/packages/react/src/__tests__/filter-builder.test.tsx
index f0c1a6b7..413b110b 100644
--- a/packages/react/src/__tests__/filter-builder.test.tsx
+++ b/packages/react/src/__tests__/filter-builder.test.tsx
@@ -302,7 +302,7 @@ const choices = (scope: HTMLElement) =>
 const checkedValues = (container: HTMLElement) =>
   choices(container)
     .filter((b) => checkboxState(b) === true)
-    .map((b) => b.getAttribute("data-pretable-value"));
+    .map((b) => b.getAttribute("data-pretable-option-value"));
 
 describe("FilterRow", () => {
   /**
diff --git a/packages/react/src/__tests__/model-mode-synthetic-columns.test.tsx b/packages/react/src/__tests__/model-mode-synthetic-columns.test.tsx
index 06911be1..b5bbdcf4 100644
--- a/packages/react/src/__tests__/model-mode-synthetic-columns.test.tsx
+++ b/packages/react/src/__tests__/model-mode-synthetic-columns.test.tsx
@@ -11,6 +11,7 @@ import {
 
 import { ROW_SELECT_COLUMN_ID } from "../constants";
 import { PretableSurface } from "../pretable-surface";
+import { checkboxState } from "./checkbox-helpers";
 
 /**
  * Model mode is the ownership mode where the row model is the consumer's, so
@@ -113,6 +114,6 @@ describe("model mode draws the synthetic columns", () => {
     await waitFor(() => {
       expect(selected.at(-1)?.length).toBe(1);
     });
-    expect(checkbox!.getAttribute("aria-checked")).toBe("true");
+    expect(checkboxState(checkbox!)).toBe(true);
   });
 });
diff --git a/packages/react/src/__tests__/row-selection-callback.test.tsx b/packages/react/src/__tests__/row-selection-callback.test.tsx
index e6b681bd..c01e3a0d 100644
--- a/packages/react/src/__tests__/row-selection-callback.test.tsx
+++ b/packages/react/src/__tests__/row-selection-callback.test.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { PretableSurface } from "../pretable-surface";
+import { checkboxState } from "./checkbox-helpers";
 
 /**
  * `rowSelectionColumn` draws the checkboxes, but the checked set was only ever
@@ -120,9 +121,7 @@ describe("onRowSelectionChange", () => {
     fireEvent.click(selectAll);
 
     // The positive half first: the click did something.
-    expect(rowCheckbox(container, "a").getAttribute("aria-checked")).toBe(
-      "true",
-    );
+    expect(checkboxState(rowCheckbox(container, "a"))).toBe(true);
     expect(onRowSelectionChange).not.toHaveBeenCalled();
   });
 
@@ -143,9 +142,7 @@ describe("onRowSelectionChange", () => {
     fireEvent.click(selectAll);
 
     expect(lastCall(onRowSelectionChange)).toEqual([]);
-    expect(rowCheckbox(container, "a").getAttribute("aria-checked")).toBe(
-      "false",
-    );
+    expect(checkboxState(rowCheckbox(container, "a"))).toBe(false);
   });
 
   it("orders explicit selections by the indexed visible order", async () => {
@@ -212,9 +209,9 @@ describe("onRowSelectionChange", () => {
     // assertion on it would pass no matter what the range did.
     for (const id of ["a", "b", "c"]) {
       expect(
-        rowCheckbox(container, id),
+        checkboxState(rowCheckbox(container, id)),
         `row ${id} is not in the shift-selected range`,
-      ).toHaveAttribute("aria-checked", "true");
+      ).toBe(true);
     }
   });
 
diff --git a/packages/react/src/__tests__/select-helpers.ts b/packages/react/src/__tests__/select-helpers.ts
index 8769d0e1..c167748b 100644
--- a/packages/react/src/__tests__/select-helpers.ts
+++ b/packages/react/src/__tests__/select-helpers.ts
@@ -13,7 +13,7 @@ import { fireEvent } from "@testing-library/react";
 export function chooseOption(trigger: HTMLElement, value: string): void {
   fireEvent.click(trigger);
   const option = document.querySelector<HTMLElement>(
-    `[data-pretable-listbox] [data-pretable-option][data-value="${value}"]`,
+    `[data-pretable-listbox] [data-pretable-option][data-pretable-option-value="${value}"]`,
   );
   if (!option) {
     throw new Error(`chooseOption: no option "${value}" in the open list`);
@@ -37,7 +37,9 @@ export function readOptions(trigger: HTMLElement): {
     ),
   );
   const result = {
-    values: items.map((el) => el.getAttribute("data-value") ?? ""),
+    values: items.map(
+      (el) => el.getAttribute("data-pretable-option-value") ?? "",
+    ),
     labels: items.map((el) => el.textContent ?? ""),
   };
   fireEvent.pointerDown(document.body);
diff --git a/packages/react/src/__tests__/selection-slice-boundary.test.tsx b/packages/react/src/__tests__/selection-slice-boundary.test.tsx
index 45cf6cdc..36b868ba 100644
--- a/packages/react/src/__tests__/selection-slice-boundary.test.tsx
+++ b/packages/react/src/__tests__/selection-slice-boundary.test.tsx
@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createColumnHelper } from "@pretable/core";
 import { PretableSurface } from "../pretable-surface";
 import type { PretableSelectionFor } from "../surface-types";
+import { checkboxState } from "./checkbox-helpers";
 
 /**
  * The surface keeps TWO selection slices, and this file is where the boundary
@@ -148,8 +149,11 @@ function rowCheckbox(container: HTMLElement, rowId: string): HTMLElement {
   return box as HTMLElement;
 }
 
-function checkedState(container: HTMLElement, rowId: string): string | null {
-  return rowCheckbox(container, rowId).getAttribute("aria-checked");
+function checkedState(
+  container: HTMLElement,
+  rowId: string,
+): boolean | "mixed" {
+  return checkboxState(rowCheckbox(container, rowId));
 }
 
 function selectedCells(container: HTMLElement): number {
@@ -205,14 +209,14 @@ describe("the row-checkbox slice and the cell-range slice", () => {
   it("still ticks the checkbox while the selection slice is controlled", () => {
     const { container } = render(<ControlledGrid />);
 
-    expect(checkedState(container, "b")).toBe("false");
+    expect(checkedState(container, "b")).toBe(false);
     fireEvent.click(rowCheckbox(container, "b"));
 
     // The controlled `state.selection` write-back runs on every render and
     // must carry the engine's `rows` slice through untouched; if it reset it,
     // the checkbox would untick itself on the very next render.
-    expect(checkedState(container, "b")).toBe("true");
-    expect(checkedState(container, "a")).toBe("false");
+    expect(checkedState(container, "b")).toBe(true);
+    expect(checkedState(container, "a")).toBe(false);
   });
 
   it("keeps a checkbox ticked across a later cell selection", () => {
@@ -221,7 +225,7 @@ describe("the row-checkbox slice and the cell-range slice", () => {
     fireEvent.click(rowCheckbox(container, "b"));
     fireEvent.click(bodyCell(container, "a", "name"));
 
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
   });
 
   it("still reports cell clicks through onSelectionChange when controlled", () => {
@@ -292,8 +296,8 @@ describe("the row-checkbox slice and the cell-range slice", () => {
 
     // The one direction the two slices do meet: the tri-state derivation reads
     // full-row coverage out of the cell ranges as well as out of `rows`.
-    expect(checkedState(container, "b")).toBe("true");
-    expect(checkedState(container, "a")).toBe("false");
+    expect(checkedState(container, "b")).toBe(true);
+    expect(checkedState(container, "a")).toBe(false);
   });
 
   it("does not untick checkboxes when the controlled selection is reset", () => {
@@ -309,7 +313,7 @@ describe("the row-checkbox slice and the cell-range slice", () => {
     // that sentence. If the row slice ever becomes controllable, this
     // expectation is the one to rewrite, not to work around.
     expect(cellSelected(container, "a", "name")).toBe("false");
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
   });
 
   it("empties both slices via the documented clearSelection() + reset pair", () => {
@@ -321,12 +325,12 @@ describe("the row-checkbox slice and the cell-range slice", () => {
 
     fireEvent.click(rowCheckbox(container, "b"));
     fireEvent.click(bodyCell(container, "a", "name"));
-    expect(checkedState(container, "b")).toBe("true");
+    expect(checkedState(container, "b")).toBe(true);
     expect(cellSelected(container, "a", "name")).toBe("true");
 
     fireEvent.click(getByTestId("clear-both"));
 
-    expect(checkedState(container, "b")).toBe("false");
+    expect(checkedState(container, "b")).toBe(false);
     expect(selectedCells(container)).toBe(0);
   });
 
@@ -344,7 +348,7 @@ describe("the row-checkbox slice and the cell-range slice", () => {
     // unrelated reason, which is all it takes.
     fireEvent.click(getByTestId("clear-engine"));
 
-    expect(checkedState(container, "b")).toBe("false");
+    expect(checkedState(container, "b")).toBe(false);
     expect(cellSelected(container, "a", "name")).toBe("true");
   });
 });
diff --git a/packages/react/src/__tests__/tool-panel-aggregates-picker.test.tsx b/packages/react/src/__tests__/tool-panel-aggregates-picker.test.tsx
index 1d607b07..7ca6a9ed 100644
--- a/packages/react/src/__tests__/tool-panel-aggregates-picker.test.tsx
+++ b/packages/react/src/__tests__/tool-panel-aggregates-picker.test.tsx
@@ -261,7 +261,7 @@ describe("aggregate picker select state (structural fakes, zero flips)", () => {
     // that looks choosable.
     fireEvent.click(picker);
     const custom = document.querySelector(
-      '[data-pretable-listbox] [data-pretable-option][data-value="custom"]',
+      '[data-pretable-listbox] [data-pretable-option][data-pretable-option-value="custom"]',
     );
     expect(custom).not.toBeNull();
     expect(custom).toHaveAttribute("aria-disabled", "true");
diff --git a/packages/react/src/components/listbox.tsx b/packages/react/src/components/listbox.tsx
index c7557ca4..e7f14272 100644
--- a/packages/react/src/components/listbox.tsx
+++ b/packages/react/src/components/listbox.tsx
@@ -18,6 +18,10 @@
  * `stopPropagation()` on its own pointerdown, or the outside-press listener
  * below closes what the click then reopens, and the trigger could never
  * dismiss its own list. Same contract `menu-keyboard.ts` states for menus.
+ *
+ * Every option carries `data-pretable-option-value`: which option it IS, the
+ * one name the whole kit uses for that — the checklists' choices wear it too.
+ * Not `data-pretable-value`, which is a select trigger's one COMMITTED value.
  */
 import {
   createElement,
@@ -177,7 +181,7 @@ export function Listbox({
             aria-selected={option.value === value}
             aria-disabled={option.disabled ? true : undefined}
             data-pretable-option=""
-            data-value={option.value}
+            data-pretable-option-value={option.value}
             data-active={i === activeIndex ? "" : undefined}
             onClick={() => {
               if (!option.disabled) onSelect(option.value);
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 0f186cf9..397b3d3e 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -8,7 +8,9 @@
  * site's own attribute still arrives on the trigger through the spread.
  *
  * `data-pretable-value` is written for one reason: a button has no `.value`,
- * and every test that used to read one reads this instead.
+ * and every test that used to read one reads this instead. It is the ONE
+ * COMMITTED value — deliberately not the name the options wear, which is
+ * `data-pretable-option-value` and says which option an element IS.
  */
 import {
   createElement,
diff --git a/packages/react/src/filter-menu/FilterMenu.tsx b/packages/react/src/filter-menu/FilterMenu.tsx
index 56f1b857..2e04c456 100644
--- a/packages/react/src/filter-menu/FilterMenu.tsx
+++ b/packages/react/src/filter-menu/FilterMenu.tsx
@@ -386,7 +386,7 @@ export function FilterMenu({
                   <Checkbox
                     site="filter-choice"
                     data-pretable-filter-choice=""
-                    data-pretable-value={opt.value}
+                    data-pretable-option-value={opt.value}
                     checked={checked}
                     onCheckedChange={(next) => toggleSelected(opt.value, next)}
                   />
diff --git a/packages/react/src/pretable-surface.tsx b/packages/react/src/pretable-surface.tsx
index 3de1f5bb..163ed8da 100644
--- a/packages/react/src/pretable-surface.tsx
+++ b/packages/react/src/pretable-surface.tsx
@@ -2219,8 +2219,10 @@ export function PretableSurface<
   const resolvedComponents = useResolvedComponents(components);
   // The surface draws two checkboxes itself — the header select-all and the
   // row-select cell. Read off the resolved map rather than through
-  // `usePretableComponents()`: this component is the one PROVIDING that
-  // context, so its own tree is outside it.
+  // `usePretableComponents()`: this component is the one that PROVIDES that
+  // context, and a hook call in this body runs above its own provider, so it
+  // would read whatever context an ancestor set — or the defaults — and
+  // silently ignore this surface's own `components` prop.
   const { Checkbox } = resolvedComponents;
   // ---- Tool panel chrome state -------------------------------------------
   const toolPanelEnabled = toolPanel !== false;
@@ -7714,6 +7716,20 @@ export function PretableSurface<
                         }
                       />
                     ) : isRowSelectCell ? (
+                      // Two write paths, one for each gesture: the plain
+                      // toggle in `onCheckedChange`, the shift range in
+                      // `onClick`. Both write the engine's `rows` slice and
+                      // nothing else — neither `toggleIndexedRowSelection`
+                      // nor `selectIndexedRowRange` touches `ranges` or
+                      // `anchor`, which is the whole of what
+                      // `PretableSelectionFor` (and therefore
+                      // `onSelectionChange`) can carry. So neither path emits
+                      // `onSelectionChange`: the only value it could pass is
+                      // the one the consumer already holds, and reporting an
+                      // unchanged selection as a change is worse than
+                      // silence. `onRowSelectionChange` is the channel for
+                      // this gesture; it fires from the `selectedRowIds`
+                      // effect instead.
                       <Checkbox
                         site="row-select"
                         checked={
@@ -7727,20 +7743,6 @@ export function PretableSurface<
                         data-pretable-row-select="true"
                         onClick={(event) => {
                           event.stopPropagation();
-                          // Both commands below write the engine's `rows`
-                          // slice and nothing else — neither
-                          // `toggleIndexedRowSelection` nor
-                          // `selectIndexedRowRange` touches `ranges` or
-                          // `anchor`, which is the whole of what
-                          // `PretableSelectionFor` (and therefore
-                          // `onSelectionChange`) can carry. There is
-                          // deliberately no `onSelectionChange` emit here:
-                          // the only value it could pass is the one the
-                          // consumer already holds, and reporting an
-                          // unchanged selection as a change is worse than
-                          // silence. `onRowSelectionChange` is the channel
-                          // for this gesture; it fires from the
-                          // `selectedRowIds` effect instead.
                           if (
                             event.shiftKey &&
                             lastCheckedRowAnchorRef.current !== null
diff --git a/packages/react/src/tool-panel/filters/FilterRow.tsx b/packages/react/src/tool-panel/filters/FilterRow.tsx
index 366fb4f1..9bb2c793 100644
--- a/packages/react/src/tool-panel/filters/FilterRow.tsx
+++ b/packages/react/src/tool-panel/filters/FilterRow.tsx
@@ -395,7 +395,7 @@ export function FilterRow({
               <Checkbox
                 site="filter-row-choice"
                 data-pretable-filter-row-choice=""
-                data-pretable-value={option.value}
+                data-pretable-option-value={option.value}
                 checked={(draft.selected ?? []).includes(option.value)}
                 onCheckedChange={(next) => toggle(option.value, next)}
               />
diff --git a/packages/ui/grid.css b/packages/ui/grid.css
index 797ed9fb..09226fd7 100644
--- a/packages/ui/grid.css
+++ b/packages/ui/grid.css
@@ -2216,17 +2216,30 @@
   :where([data-pretable-checkbox]:focus-visible) {
     outline-offset: 1px;
   }
-  /* The standard disabled treatment (#573): dim by token, drop the pointer. */
+  /* The standard disabled treatment (#573): dim by token, drop the pointer.
+     These four controls all draw TEXT — a label, a committed value, typed
+     input — so dimming the ink is what "disabled" looks like on them. */
   :where(
     [data-pretable-button]:disabled,
     [data-pretable-icon-button]:disabled,
     [data-pretable-select]:disabled,
-    [data-pretable-text-input]:disabled,
-    [data-pretable-checkbox]:disabled
+    [data-pretable-text-input]:disabled
   ) {
     color: var(--pretable-text-dim);
     cursor: default;
   }
+  /* The checkbox is deliberately NOT in that list. Its `color` is not ink for
+     a label, it is the CHECK GLYPH, painted on the checked fill — so dimming
+     it puts --pretable-text-dim on --pretable-checkbox-checked-bg at about
+     1.9:1 and the tick all but vanishes. A read-only boolean column renders
+     its cell control disabled on EVERY row, so that would be every tick in
+     the column. A checkbox's disabled look is its own tokens (border, fill,
+     and the shared opacity/forced-colors treatment), never text ink; all this
+     rule owes is the pointer. Declaring no `color` here also leaves the
+     checked rule above as the last word on the glyph. */
+  :where([data-pretable-checkbox]:disabled) {
+    cursor: default;
+  }
 
   /* ---- Coarse pointers -------------------------------------------------- */
 
diff --git a/packages/ui/src/__tests__/css-cascade.test.ts b/packages/ui/src/__tests__/css-cascade.test.ts
index 7eac7460..7706b7a8 100644
--- a/packages/ui/src/__tests__/css-cascade.test.ts
+++ b/packages/ui/src/__tests__/css-cascade.test.ts
@@ -674,6 +674,25 @@ describe("grid.css cascade contract", () => {
     expect(state).toMatch(/outline:\s*2px solid var\(--pretable-focus-ring\)/);
     expect(state).toMatch(/cursor:\s*default/);
 
+    // …and the disabled rule declares NO colour. `color` on a checkbox is the
+    // CHECK GLYPH, not label ink: the kit's --pretable-text-dim lands on the
+    // checked fill at about 1.9:1, and a read-only boolean column renders its
+    // control disabled on every row, so a dimmed tick is the whole column's
+    // ticks. The checkbox's disabled look is its own tokens; only the pointer
+    // belongs here. Scoped to the plain cascade — the forced-colours block
+    // below does set GrayText on it, and is answered there by the checked
+    // rules that follow it in source order.
+    const plain = css.replace(forcedColorsBlock(css), "");
+    const off = rulesSelecting(plain, (s) =>
+      s.includes("data-pretable-checkbox]:disabled"),
+    );
+    expect(off.length, "nothing disables a kit checkbox").toBeGreaterThan(0);
+    for (const [, selector, decls] of off)
+      expect(
+        decls,
+        `"${selector.trim()}" dims the check glyph on the checked fill`,
+      ).not.toMatch(/(^|[;{\s])color\s*:/);
+
     // Forced colours erase the fill AND the glyph's colour, which between
     // them are the whole of what a checkbox says — the committed option's
     // failure exactly, answered the same way.

From 2a0b69f17b759c2bf5d9ed84056c018f2e4f8e1f Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 18:19:24 -0700
Subject: [PATCH 14/20] feat(react): export PretableTextInput, PretableCheckbox
 and their slot types

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 packages/react/react.api.md                  | 27 ++++++++++++++++++
 packages/react/src/public_api.ts             |  6 ++++
 type-tests/react/components-inputs.types.tsx | 29 +++++++++++++-------
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/packages/react/react.api.md b/packages/react/react.api.md
index 9f0f615b..982e0692 100644
--- a/packages/react/react.api.md
+++ b/packages/react/react.api.md
@@ -10,6 +10,7 @@ import { CSSProperties } from 'react';
 import { DependencyList } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -545,6 +546,19 @@ export interface PretableChangeSet<TRowId extends PretableRowId> {
     readonly revision: number;
 }
 
+// @public
+export const PretableCheckbox: ForwardRefExoticComponent<PretableCheckboxProps & RefAttributes<HTMLButtonElement>>;
+
+// @public
+export type PretableCheckboxComponent = ComponentType<PretableCheckboxProps & RefAttributes<HTMLButtonElement>>;
+
+// @public
+export interface PretableCheckboxProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" | "role" | "aria-checked" | "onChange" | "children"> {
+    checked: boolean | "mixed";
+    onCheckedChange: (next: boolean) => void;
+    site?: PretableSite;
+}
+
 // @public
 export interface PretableColumn<TRow extends PretableRow = PretableRow> {
     // (undocumented)
@@ -842,8 +856,10 @@ export interface PretableCompatibleAggregator<TRow extends object, TValue, TOutp
 // @public
 export interface PretableComponents {
     readonly Button?: PretableButtonComponent;
+    readonly Checkbox?: PretableCheckboxComponent;
     readonly IconButton?: PretableIconButtonComponent;
     readonly Select?: PretableSelectComponent;
+    readonly TextInput?: PretableTextInputComponent;
 }
 
 // @public
@@ -2529,6 +2545,17 @@ export interface PretableTelemetry<TRowId extends PretableRowId = string> {
     };
 }
 
+// @public
+export const PretableTextInput: ForwardRefExoticComponent<PretableTextInputProps & RefAttributes<HTMLInputElement>>;
+
+// @public
+export type PretableTextInputComponent = ComponentType<PretableTextInputProps & RefAttributes<HTMLInputElement>>;
+
+// @public
+export interface PretableTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    site?: PretableSite;
+}
+
 // @public
 export interface PretableToolPanelConfig {
     readonly activeSection?: PretableToolPanelSectionId | null;
diff --git a/packages/react/src/public_api.ts b/packages/react/src/public_api.ts
index 56c5e9a6..1ea60ed2 100644
--- a/packages/react/src/public_api.ts
+++ b/packages/react/src/public_api.ts
@@ -41,11 +41,17 @@ export type {
   PretableSelectOption,
   PretableSelectProps,
 } from "./components/select";
+export { PretableTextInput } from "./components/text-input";
+export type { PretableTextInputProps } from "./components/text-input";
+export { PretableCheckbox } from "./components/checkbox";
+export type { PretableCheckboxProps } from "./components/checkbox";
 export type {
   PretableButtonComponent,
+  PretableCheckboxComponent,
   PretableComponents,
   PretableIconButtonComponent,
   PretableSelectComponent,
+  PretableTextInputComponent,
 } from "./components/context";
 
 // Hooks
diff --git a/type-tests/react/components-inputs.types.tsx b/type-tests/react/components-inputs.types.tsx
index 8d28c8d4..ea32cecc 100644
--- a/type-tests/react/components-inputs.types.tsx
+++ b/type-tests/react/components-inputs.types.tsx
@@ -1,17 +1,14 @@
-// TEMPORARY: imported from source because `@pretable/react` does not export
-// these yet. Task 9 of the SP3 plan switches this to the package.
 import {
   PretableCheckbox,
-  type PretableCheckboxProps,
-} from "../../packages/react/src/components/checkbox";
-import {
   PretableTextInput,
+  type PretableBuiltInSite,
+  type PretableCheckboxComponent,
+  type PretableCheckboxProps,
+  type PretableComponents,
+  type PretableSite,
+  type PretableTextInputComponent,
   type PretableTextInputProps,
-} from "../../packages/react/src/components/text-input";
-import type {
-  PretableBuiltInSite,
-  PretableSite,
-} from "../../packages/react/src/components/button";
+} from "@pretable/react";
 import type { Equal, Expect } from "../shared/assert";
 
 // --- PretableCheckbox ---------------------------------------------------
@@ -147,3 +144,15 @@ export type Sp3SitesAreBuiltIn = Expect<
 // prettier-ignore
 // @ts-expect-error — removing a site must break the pin
 export type RemovingASiteBreaksThePin = Expect<Equal<Extract<Exclude<PretableBuiltInSite, "hide-grouped">, TenSp3Sites>, TenSp3Sites>>;
+
+// The built-ins satisfy their own slot types, and a replacement is written
+// against each component's props like every other kit component.
+const components: PretableComponents = {
+  TextInput: PretableTextInput,
+  Checkbox: PretableCheckbox,
+};
+void components;
+const t: PretableTextInputComponent = PretableTextInput;
+const c: PretableCheckboxComponent = PretableCheckbox;
+void t;
+void c;

From 7f0d2d52a77f8e5a8e6974c1d5286da253b7e102 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 18:31:05 -0700
Subject: [PATCH 15/20] docs: TextInput and Checkbox on the Components page;
 the option attribute is namespaced

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/content/docs/grid/components.mdx | 151 +++++++++++++++---
 apps/website/content/docs/grid/tool-panel.mdx |   2 +-
 .../docs/__tests__/docs-api-surface.test.ts   |  17 ++
 3 files changed, 151 insertions(+), 19 deletions(-)

diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index 0145d82e..604fcabd 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -1,24 +1,26 @@
 ---
 title: Components
-description: "The kit components the grid renders its own chrome from — Button, IconButton and Select — how to style them, and how to replace any of them with your own."
+description: "The kit components the grid renders its own chrome from — Button, IconButton, Select, TextInput and Checkbox — how to style them, and how to replace any of them with your own."
 nav: Grid
 ---
 
 `@pretable/react` renders its own controls from a small component kit, and
 ships those components for you to use and to replace. This page covers the
-three that ship today: `PretableButton`, `PretableIconButton` and
-`PretableSelect`. Here is a grid whose every labelled button is the app's
-own:
+five that ship today: `PretableButton`, `PretableIconButton`,
+`PretableSelect`, `PretableTextInput` and `PretableCheckbox`. Here is a grid
+whose every labelled button is the app's own:
 
 <Example id="components-button" />
 
 ## The components
 
-All three render `<button type="button">`, always — every grid control is
-one, and a stray submit inside your `<form>` is a real bug class, so `type` is
-not a prop. `className` and `style` pass straight through — the components set
-neither, so yours is the whole value. All three forward their `ref` to the
-button node.
+Four of the five render `<button type="button">`, always — a stray submit
+inside your `<form>` is a real bug class, so `type` is not a prop on any of
+them. `PretableTextInput` is the exception, and deliberately so: it is the
+native `<input>`, where `type` is the whole point and passes straight
+through. `className` and `style` pass straight through on all five — the
+components set neither, so yours is the whole value — and each forwards its
+`ref` to the node it renders.
 
 ### Button
 
@@ -90,6 +92,100 @@ import { PretableSelect } from "@pretable/react";
 | `aria-label` | `string`                          | Required. The accessible name — name what it chooses, e.g. `Filter operator`. |
 | `site`       | `PretableSite`                    | Where in the grid the picker is; lands as `data-pretable-site`.               |
 
+### TextInput
+
+A text field. It is the native `<input>` and nothing more — no wrapper
+element, no clear button, no debounce — and that is the design rather than an
+omission. The native element is the accessible one, so a screen reader, a
+password manager and the platform's own autofill all keep working;
+`type="date"` keeps its native picker and `inputMode` keeps the right soft
+keyboard, neither of which survives a wrapper that reinterprets `type`. What
+a theme needs from this control is the box, and that arrives through
+`data-pretable-text-input`.
+
+Every native input prop passes straight through — `type`, `inputMode`,
+`value`, `onChange`, `placeholder`, `disabled`, `aria-*`, `className`,
+`style` — which is why the table below has one row: `site` is the only prop
+the component adds, and the rest are the native element's own. Value
+semantics stay with the site rather than the component: the filter fields
+[debounce their operand](/docs/grid/tool-panel#what-commits-and-when) and the
+search box does not, and a component that owned that for all of them would be
+wrong for most.
+
+Seven grid fields are this component: the funnel menu's
+[value field and its min/max pair](/docs/grid/filtering#the-built-in-menu),
+the tool panel's
+[filter-row value and its min/max pair](/docs/grid/tool-panel#dom-hooks-and-strings),
+and the [columns search box](/docs/grid/tool-panel#the-columns-section).
+
+The accessible name may come from an `aria-label`, an `aria-labelledby`, or a
+`<label for>` naming its id. With none of the three it warns once in
+development — an unnamed field reads as a bare edit box.
+
+```tsx
+import { PretableTextInput } from "@pretable/react";
+
+<PretableTextInput
+  aria-label="Filter value"
+  type="date"
+  value={value}
+  onChange={(event) => setValue(event.target.value)}
+/>;
+```
+
+| Prop   | Type           | Notes                                                                                           |
+| ------ | -------------- | ----------------------------------------------------------------------------------------------- |
+| `site` | `PretableSite` | Where in the grid the field is; lands as `data-pretable-site`. Every other prop is the input's. |
+
+### Checkbox
+
+A checkbox, drawn as a `<button type="button" role="checkbox">` carrying
+`aria-checked` rather than as a native `<input type="checkbox">`. Three
+things are plain on a button and a fight on an input: the mixed state
+(`indeterminate` is a DOM property with no attribute at all), the roving
+`tabIndex` a control inside a body cell needs, and a tick that takes the
+theme's tokens — the user agent owns the native one until `appearance: none`
+throws the whole control away. So the glyph is the kit's own: the check icon
+when `checked` is `true`, a minus when it is `"mixed"`, nothing when `false`.
+
+It is controlled. `onCheckedChange` is called with the next value and
+nothing is written until you write it, and `"mixed"` toggles to `true` — the
+header select-all's "some rows, not all" resolving to "all". The keyboard is
+the native button's, so `Space` and `Enter` both activate and both arrive as
+a click; there is no key handler of its own to disagree with the platform. A
+consumer `onClick` runs **first** and may `preventDefault()` to veto the
+toggle, which is how a shift-click range select keeps the click without a
+second write following it. Native button props pass through — `disabled`,
+`tabIndex`, `aria-busy`, `aria-invalid`, `aria-errormessage`.
+
+Seven grid controls are this component: the
+[row-select header and cell checkboxes](/docs/grid/selection#checkbox-column),
+the [boolean cell](/docs/grid/editing#booleans), the
+[column visibility toggle](/docs/grid/tool-panel#the-columns-section), the
+[hide-grouped switch](/docs/grid/tool-panel#hide-grouped-columns), and the
+enum checklists in the [funnel menu](/docs/grid/filtering#the-built-in-menu)
+and the [tool panel's filter row](/docs/grid/tool-panel#rows-runs-and-the-join).
+
+An `aria-label` names it, and so does a wrapping `<label>` — a `<button>` is
+a labelable element, so the text names the control and clicking that text
+toggles it, which is the shape the hide-grouped switch uses. With neither it
+warns once in development, the way `IconButton` does.
+
+```tsx
+import { PretableCheckbox } from "@pretable/react";
+
+<label>
+  <PretableCheckbox checked={hideGrouped} onCheckedChange={setHideGrouped} />
+  Hide grouped columns
+</label>;
+```
+
+| Prop              | Type                      | Notes                                                                 |
+| ----------------- | ------------------------- | --------------------------------------------------------------------- |
+| `checked`         | `boolean \| "mixed"`      | The state. `"mixed"` draws the minus glyph and toggles to `true`.     |
+| `onCheckedChange` | `(next: boolean) => void` | Called with the next value after a click, before anything is written. |
+| `site`            | `PretableSite`            | Where in the grid the checkbox is; lands as `data-pretable-site`.     |
+
 ## Styling
 
 The styling channel is the one the whole grid uses: attributes and tokens.
@@ -100,11 +196,17 @@ the grid gave it one. A select's trigger carries `data-pretable-select` and
 writes its committed value to `data-pretable-value` — a `<button>` has no
 `.value`, so that attribute is the truth a test reads and a selector
 matches. Its label span is `data-pretable-select-label`; the open list is
-`data-pretable-listbox` with a `data-pretable-option` per entry, the
+`data-pretable-listbox` with a `data-pretable-option` per entry, each
+carrying its own value as `data-pretable-option-value` — which option it
+**is**, as against the trigger's one committed `data-pretable-value` — the
 keyboard-active one carrying `data-active` and the chosen one
-`aria-selected="true"`. The grid's own sites also keep their original
-attribute (`data-pretable-filter-clear`, `data-pretable-tool-reset`, …), so a
-selector you already wrote keeps matching.
+`aria-selected="true"`. A text field carries `data-pretable-text-input`, and
+a checkbox `data-pretable-checkbox` plus the `aria-checked` its three states
+live in: match `[aria-checked="true"]` and `[aria-checked="mixed"]` rather
+than a `:checked` pseudo-class, which a `<button>` never has. The grid's own
+sites also keep their original attribute (`data-pretable-filter-clear`,
+`data-pretable-tool-reset`, `data-pretable-row-select`, …), so a selector you
+already wrote keeps matching.
 
 ```css
 [data-pretable-button][data-pretable-variant="ghost"] {
@@ -120,6 +222,12 @@ selector you already wrote keeps matching.
 [data-pretable-option][aria-selected="true"] {
   background: var(--pretable-bg-hover);
 }
+[data-pretable-text-input][data-pretable-site="filter-value"] {
+  font-variant-numeric: tabular-nums;
+}
+[data-pretable-checkbox][aria-checked="mixed"] {
+  --pretable-checkbox-checked-bg: var(--pretable-accent);
+}
 ```
 
 ## Replacing a component
@@ -128,20 +236,27 @@ Pass `components` to `<PretableSurface>` (or `<Pretable>`) with one entry per
 component type you want to replace. The replacement is used everywhere that
 type appears — the tool panel and the portalled filter dialog for `Button`;
 the header, the tool panel and the group panel for `IconButton`; the filter
-dialog, the filter builder and the grouping section for `Select` — and
-receives exactly the props the built-in does, `site` included, so it can
-branch on where it is.
+dialog, the filter builder and the grouping section for `Select`; the three
+chrome fields for `TextInput`; the row-select column, the boolean cell, the
+tool panel and both enum checklists for `Checkbox` — and receives exactly the
+props the built-in does, `site` included, so it can branch on where it is.
 
 | Prop         | Type                          | Notes                                                                          |
 | ------------ | ----------------------------- | ------------------------------------------------------------------------------ |
 | `Button`     | `PretableButtonComponent`     | Receives `PretableButtonProps`; must forward its `ref` to the button node.     |
+| `Checkbox`   | `PretableCheckboxComponent`   | Receives `PretableCheckboxProps`; must forward its `ref` to the button node.   |
 | `IconButton` | `PretableIconButtonComponent` | Receives `PretableIconButtonProps`; must forward its `ref` to the button node. |
 | `Select`     | `PretableSelectComponent`     | Receives `PretableSelectProps`; must forward its `ref` to the button node.     |
+| `TextInput`  | `PretableTextInputComponent`  | Receives `PretableTextInputProps`; must forward its `ref` to the input node.   |
 
 Forwarding the `ref` is the one obligation on a replacement: the grid anchors
 menus on the node and returns keyboard focus to it — a replaced `Select`
 owes it too, because the filter dialog focuses its operator picker when it
-opens. Under React 18 that means `forwardRef`; under React 19 a plain `ref`
-prop is enough. The set of built-in `site` names is the
+opens. The grid takes no ref to a field or a checkbox today, so a replaced
+`TextInput` or `Checkbox` owes the ref as a contract rather than to a live
+caller — it is the handle anything reaching the real node goes through, and a
+replacement that swallows it cannot be given one later. Under React 18 that
+means `forwardRef`; under React 19 a plain `ref` prop is enough. The set of
+built-in `site` names is the
 `PretableBuiltInSite` type and grows additively — a new grid control
 may introduce a new site without a major bump.
diff --git a/apps/website/content/docs/grid/tool-panel.mdx b/apps/website/content/docs/grid/tool-panel.mdx
index ca10aafd..44cb4a62 100644
--- a/apps/website/content/docs/grid/tool-panel.mdx
+++ b/apps/website/content/docs/grid/tool-panel.mdx
@@ -161,7 +161,7 @@ The block renders **in rows mode only**. In explicit-model mode the caller owns
 
 ### The grouping section's DOM hooks and strings
 
-The section's container is `data-pretable-tool-grouping`. A group-by row is `data-pretable-tool-group-row` (with `data-pretable-column-id`), its grip `data-pretable-tool-row-grip` and its remove button `data-pretable-tool-group-remove`; the add button is `data-pretable-add-group` and its menu `data-pretable-add-group-menu`. The expansion pair is `data-pretable-expand-all` / `data-pretable-collapse-all`, the switch's input `data-pretable-hide-grouped`, and an aggregate row `data-pretable-aggregate-row` (with `data-pretable-column-id`), whose picker is `data-pretable-aggregate`.
+The section's container is `data-pretable-tool-grouping`. A group-by row is `data-pretable-tool-group-row` (with `data-pretable-column-id`), its grip `data-pretable-tool-row-grip` and its remove button `data-pretable-tool-group-remove`; the add button is `data-pretable-add-group` and its menu `data-pretable-add-group-menu`. The expansion pair is `data-pretable-expand-all` / `data-pretable-collapse-all`, the switch's `button[role="checkbox"]` `data-pretable-hide-grouped`, and an aggregate row `data-pretable-aggregate-row` (with `data-pretable-column-id`), whose picker is `data-pretable-aggregate`.
 
 Every string is a message: `toolPanelGroupByLabel`, `toolPanelAddRowGroupLabel`, `toolPanelRemoveGroupLabel`, `toolPanelReorderGroupLabel`, and `toolPanelNoGroupsMessage` for the group-by block; `toolPanelExpandAllLabel` and `toolPanelCollapseAllLabel`; `toolPanelHideGroupedColumnsLabel`; and for the pickers `toolPanelAggregatesLabel`, `toolPanelAggregateColumnLabel`, `toolPanelAggregateDefaultOption`, `toolPanelAggregateNoneOption`, `toolPanelAggregateCustomLabel`, and the five builtin names (`toolPanelAggregateSumLabel` through `toolPanelAggregateCountLabel`). The reorder grip deliberately does **not** reuse the columns section's "Reorder {column}": the two grips coexist in one panel, and identical accessible names would leave a screen-reader user unable to tell reordering a column from reordering a grouping level.
 
diff --git a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
index b70cf100..67c6ac52 100644
--- a/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
+++ b/apps/website/lib/docs/__tests__/docs-api-surface.test.ts
@@ -1374,6 +1374,21 @@ const TABLES: Record<string, TableBinding> = {
     types: [{ pkg: "react", name: "PretableSelectProps" }],
     complete: true,
   },
+
+  // The kit's text field and checkbox (SP3). `complete: true` for the same
+  // reason the three above carry it, and it is writable for the same reason:
+  // the report lists an interface's OWN declared members and not the native
+  // attributes it extends, so `PretableTextInputProps` reports exactly `site`
+  // even though a reader may pass every prop an `<input>` takes. The prose
+  // says so on the page.
+  "grid/components.mdx#TextInput": {
+    types: [{ pkg: "react", name: "PretableTextInputProps" }],
+    complete: true,
+  },
+  "grid/components.mdx#Checkbox": {
+    types: [{ pkg: "react", name: "PretableCheckboxProps" }],
+    complete: true,
+  },
   "grid/components.mdx#Replacing a component": {
     types: [{ pkg: "react", name: "PretableComponents" }],
     complete: true,
@@ -1584,6 +1599,8 @@ const MEMBER_TABLE_TYPES: Record<string, true | string> = {
   "grid/components.mdx#Button": true,
   "grid/components.mdx#IconButton": true,
   "grid/components.mdx#Select": true,
+  "grid/components.mdx#TextInput": true,
+  "grid/components.mdx#Checkbox": true,
   "grid/components.mdx#Replacing a component": true,
 };
 

From 6c9778fcb4c17c298121f10134d4e795f36f7935 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 18:47:00 -0700
Subject: [PATCH 16/20] test(website): the kit fields and checkboxes in a real
 browser; e2e drivers follow the rename
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`chooseOption` was selecting `[data-pretable-option][data-value=...]`, which
the listbox stopped writing when the option attribute was namespaced — every
website e2e that picks a select option was failing on a locator that matched
nothing. Verified by mutation: restoring the old selector fails the funnel
dialog test at helpers.ts:371.

The components fixture now replaces `TextInput` and `Checkbox` too, and gains
an enum column and a row-selection column so the two sites only those reach —
the filter checklist and the row-select cell — are actually rendered. The
override test asserts all four new sites and that nothing the kit draws itself
is left, at the end, once every site has rendered at least once.

A new real-grid test covers the two checkbox claims jsdom can only
approximate: Space activates a `button[role=checkbox]` through the native
button's own activation behaviour, and a wrapping `<label>` forwards a click
on its TEXT. Both are asserted against a visible consequence rather than the
attribute alone — `/fixtures/grouping` hides its grouped columns by default,
so the header cell for `sector` goes 0 → 1 → 0 as the switch is driven.

`.check()` needs an `<input>`; the kit's checkbox is a button, so the three
smoke.spec drivers move to a new `toggleCheckbox` helper — a click plus a wait
on `aria-checked`. `toBeChecked()` is unaffected and stays. The radios in
server-data.spec.ts are native and keep `.check()`.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/app/fixtures/components/page.tsx |  68 ++++++++-
 apps/website/e2e/components.spec.ts           | 141 +++++++++++++++++-
 apps/website/e2e/helpers.ts                   |  36 ++++-
 apps/website/e2e/smoke.spec.ts                |  34 +++--
 4 files changed, 259 insertions(+), 20 deletions(-)

diff --git a/apps/website/app/fixtures/components/page.tsx b/apps/website/app/fixtures/components/page.tsx
index 37010788..17debe99 100644
--- a/apps/website/app/fixtures/components/page.tsx
+++ b/apps/website/app/fixtures/components/page.tsx
@@ -3,9 +3,11 @@
 import {
   PretableSurface,
   type PretableButtonComponent,
+  type PretableCheckboxComponent,
   type PretableColumn,
   type PretableIconButtonComponent,
   type PretableSelectComponent,
+  type PretableTextInputComponent,
 } from "@pretable/react";
 import { forwardRef } from "react";
 
@@ -29,17 +31,32 @@ interface Row {
   id: string;
   name: string;
   qty: number;
+  status: string;
 }
 
 const ROWS: Row[] = [
-  { id: "a", name: "Alpha", qty: 1 },
-  { id: "b", name: "Bravo", qty: 2 },
-  { id: "c", name: "Charlie", qty: 3 },
+  { id: "a", name: "Alpha", qty: 1, status: "open" },
+  { id: "b", name: "Bravo", qty: 2, status: "closed" },
+  { id: "c", name: "Charlie", qty: 3, status: "open" },
 ];
 
 const COLUMNS: PretableColumn<Row>[] = [
   { id: "name", header: "Name", widthPx: 160, type: "text" },
   { id: "qty", header: "Qty", widthPx: 100, type: "number" },
+  // `enum` is what makes the Name funnel's sibling a CHECKLIST: an enum
+  // column's first operator is `isAnyOf`, whose value shape is `set`, which
+  // is the only shape that renders `site="filter-choice"` checkboxes. Without
+  // it the fixture could not reach that site at all.
+  {
+    id: "status",
+    header: "Status",
+    widthPx: 120,
+    type: "enum",
+    options: [
+      { value: "open", label: "Open" },
+      { value: "closed", label: "Closed" },
+    ],
+  },
 ];
 
 const FixtureButton: PretableButtonComponent = forwardRef(
@@ -103,6 +120,48 @@ const FixtureSelect: PretableSelectComponent = forwardRef(
   },
 );
 
+/**
+ * A field replacement that is the native input and nothing else — the point
+ * being that the grid's own value semantics (the debounce on the filter
+ * operand, the search's live narrowing) live above the slot, so a bare input
+ * is enough to drive them. It records its `site` and nothing else.
+ */
+const FixtureTextInput: PretableTextInputComponent = forwardRef(
+  function FixtureTextInput({ site, ...props }, ref) {
+    return <input {...props} ref={ref} data-fixture-field={site ?? ""} />;
+  },
+);
+
+/**
+ * A checkbox replacement that keeps the kit's CONTRACT and none of its
+ * markup: no `role="checkbox"`, no `aria-checked`, just a button that records
+ * the state it was handed and re-implements the one behaviour the kit
+ * promises — consumer `onClick` first, `preventDefault()` vetoes the toggle.
+ * A test that finds the grid still selecting rows through this proves the
+ * grid drives the slot's props, not the kit's internals.
+ */
+const FixtureCheckbox: PretableCheckboxComponent = forwardRef(
+  function FixtureCheckbox(
+    { site, checked, onCheckedChange, onClick, ...props },
+    ref,
+  ) {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type="button"
+        data-fixture-checkbox={site ?? ""}
+        data-fixture-checked={String(checked)}
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented) return;
+          onCheckedChange(checked !== true);
+        }}
+      />
+    );
+  },
+);
+
 export default function ComponentsFixturePage() {
   return (
     <main style={{ padding: 24 }}>
@@ -111,10 +170,13 @@ export default function ComponentsFixturePage() {
         columns={COLUMNS}
         components={{
           Button: FixtureButton,
+          Checkbox: FixtureCheckbox,
           IconButton: FixtureIconButton,
           Select: FixtureSelect,
+          TextInput: FixtureTextInput,
         }}
         getRowId={(row) => row.id}
+        rowSelectionColumn={{ enabled: true, headerCheckbox: true }}
         rows={ROWS}
         toolPanel={{ defaultActiveSection: "columns" }}
         viewportHeight={240}
diff --git a/apps/website/e2e/components.spec.ts b/apps/website/e2e/components.spec.ts
index be57e1d6..e7a7d49d 100644
--- a/apps/website/e2e/components.spec.ts
+++ b/apps/website/e2e/components.spec.ts
@@ -25,6 +25,25 @@ test("every button in the grid is the consumer's, including inside the portalled
   // Nothing the kit draws itself is left.
   await expect(page.locator("[data-pretable-button]")).toHaveCount(0);
   await expect(page.locator("[data-pretable-icon-button]")).toHaveCount(0);
+  await expect(page.locator("[data-pretable-text-input]")).toHaveCount(0);
+  await expect(page.locator("[data-pretable-checkbox]")).toHaveCount(0);
+
+  // The row-select cell is the checkbox replacement, at its own site — and
+  // the header's select-all is the same component at a different one.
+  await expect(
+    page.locator("[data-pretable-row-select]").first(),
+  ).toHaveAttribute("data-fixture-checkbox", "row-select");
+  await expect(page.locator("[data-pretable-row-select-all]")).toHaveAttribute(
+    "data-fixture-checkbox",
+    "row-select-all",
+  );
+
+  // The Columns pane's search box is the field replacement. The pane is the
+  // fixture's default active section, so it is already rendered.
+  await expect(page.locator("[data-pretable-tool-search]")).toHaveAttribute(
+    "data-fixture-field",
+    "tool-search",
+  );
 
   // The tool panel's reset is the replacement, with its site and variant.
   const reset = page.locator("[data-pretable-tool-reset]");
@@ -35,7 +54,9 @@ test("every button in the grid is the consumer's, including inside the portalled
   // sequential tab order and only revealed on hover (grid-header-popover-scroll.spec.ts's
   // recipe), so hover the header row before clicking it.
   await page.locator("[data-pretable-header-row]").first().hover();
-  const funnel = page.locator("[data-pretable-filter-funnel]").first();
+  const funnel = page.locator(
+    '[data-pretable-filter-funnel][data-pretable-column-id="name"]',
+  );
   await expect(funnel).toHaveAttribute("data-fixture-icon", "filter-funnel");
   await funnel.click();
 
@@ -49,6 +70,12 @@ test("every button in the grid is the consumer's, including inside the portalled
     "data-fixture-button",
     "filter-clear",
   );
+  // `name` is a text column, so the dialog's operand is the single-value
+  // field — the field replacement, portalled into the dialog with it.
+  await expect(dialog.locator("[data-pretable-filter-value]")).toHaveAttribute(
+    "data-fixture-field",
+    "filter-value",
+  );
 
   // The dialog's operator picker is the replacement too — and the grid's own
   // behaviour on it survived: `FilterMenu` focuses the picker on mount through
@@ -62,6 +89,31 @@ test("every button in the grid is the consumer's, including inside the portalled
   await expect(operator).toHaveAttribute("data-fixture-value", "contains");
   await expect(operator).toBeFocused();
   await page.keyboard.press("Escape");
+  await expect(dialog).toHaveCount(0);
+
+  // The OTHER value shape: `status` is an enum column, so its funnel offers
+  // the checklist rather than a field, and every choice in it is the checkbox
+  // replacement at `filter-choice` — the site that used to be a native
+  // `<input type="checkbox">` and could not be replaced at all.
+  const statusDialog = await openFilterMenu(page, "Status");
+  const choices = statusDialog.locator("[data-pretable-filter-choice]");
+  await expect(choices).toHaveCount(2);
+  await expect(choices.first()).toHaveAttribute(
+    "data-fixture-checkbox",
+    "filter-choice",
+  );
+  // The grid hands the replacement its state and its option identity, so a
+  // driver can still tell the choices apart.
+  await expect(choices.first()).toHaveAttribute(
+    "data-fixture-checked",
+    "false",
+  );
+  await expect(choices.first()).toHaveAttribute(
+    "data-pretable-option-value",
+    "open",
+  );
+  await page.keyboard.press("Escape");
+  await expect(statusDialog).toHaveCount(0);
 
   // The builder's pickers are replaced at their sites as well, and the grid
   // hands them a real option list rather than rendering the kit's own.
@@ -74,8 +126,14 @@ test("every button in the grid is the consumer's, including inside the portalled
   expect(
     Number(await rowColumn.getAttribute("data-fixture-option-count")),
   ).toBeGreaterThan(0);
-  // Still nothing the kit draws itself, now that a second site has rendered.
+  // Still nothing the kit draws itself, now that every site above has
+  // rendered at least once — the builder's own field and checklist included.
   await expect(page.locator("[data-pretable-select]")).toHaveCount(0);
+  await expect(page.locator("[data-pretable-text-input]")).toHaveCount(0);
+  await expect(page.locator("[data-pretable-checkbox]")).toHaveCount(0);
+  await expect(
+    page.locator('[data-fixture-field="filter-row-value"]'),
+  ).toHaveCount(1);
 });
 
 test("the grid still anchors a menu on, and returns focus to, a replaced icon button", async ({
@@ -222,3 +280,82 @@ test("the funnel dialog survives a picked operator, and Escape unwinds one layer
   await page.keyboard.press("Escape");
   await expect(dialog).toBeHidden();
 });
+
+/**
+ * The kit's own checkbox, on a real grid with nothing replaced.
+ *
+ * Two claims jsdom can only approximate, at a site where a wrong answer is
+ * visible in the grid. `/fixtures/grouping` is grouped by `sector` and
+ * `industry` with `hideGroupedColumns` on by default, so those two columns
+ * are ABSENT from the header row; the pane's switch is the control that puts
+ * them back, and the header is the verdict on whether the toggle reached the
+ * engine rather than only the button's own attribute.
+ *
+ * 1. Space activates it. `PretableCheckbox` ships no key handler at all — it
+ *    relies on the native button's activation behaviour, where Space fires a
+ *    click. jsdom does not implement that mapping (a synthesised keydown
+ *    produces no click), so the unit suite has to dispatch the click itself
+ *    and the claim is only ever checked here.
+ * 2. A wrapping `<label>` forwards a click on its TEXT to the control.
+ *    `<button>` is a labelable element, so the browser does this; jsdom's
+ *    label handling is partial, and the assertion there would pass on a
+ *    label that forwards nothing.
+ */
+test("the kit's checkbox takes Space and its label's text, and the grid follows", async ({
+  page,
+}) => {
+  await mountGroupingFixture(page);
+  await openGroupingPane(page);
+
+  const box = page.locator("[data-pretable-hide-grouped]");
+  const sectorHeader = page.locator(
+    '[data-pretable-header-cell][data-pretable-column-id="sector"]',
+  );
+
+  // The starting state, and the grid agreeing with it: hide-grouped is on, so
+  // the grouped column is not drawn.
+  await expect(box).toHaveAttribute("aria-checked", "true");
+  await expect(sectorHeader).toHaveCount(0);
+
+  // Focus it directly rather than tabbing to it. WebKit skips a plain
+  // `<button>` in the sequential order unless macOS's "Tab moves between all
+  // controls" is on, and this checkbox carries no explicit `tabIndex` — the
+  // tab-order question is tool-panel.spec.ts's, which treats this stop as
+  // conditional for exactly that reason. What is asserted here is that the
+  // control is focusable and that Space activates it once focused.
+  await box.focus();
+  await expect(box).toBeFocused();
+  await page.keyboard.press(" ");
+
+  await expect(box).toHaveAttribute("aria-checked", "false");
+  // THE VISIBLE CONSEQUENCE: the write reached the engine, and the column the
+  // grouping was hiding is drawn again.
+  await expect(sectorHeader).toHaveCount(1);
+
+  // Now the label. Click a point inside the `<label>` that is past the
+  // checkbox's right edge — the text, not the box — and the browser forwards
+  // it to the control.
+  const label = page.locator("[data-pretable-tool-grouping] label", {
+    has: page.locator("[data-pretable-hide-grouped]"),
+  });
+  const [labelBox, boxBox] = await Promise.all([
+    label.boundingBox(),
+    box.boundingBox(),
+  ]);
+  const textX = boxBox!.x + boxBox!.width + 8 - labelBox!.x;
+  // The click point really is off the control — otherwise this test would
+  // pass by clicking the checkbox a second time and prove nothing.
+  expect(textX).toBeLessThan(labelBox!.width);
+  const hitIsTheBox = await page.evaluate(
+    ([x, y]) =>
+      document
+        .elementFromPoint(x as number, y as number)
+        ?.closest("[data-pretable-hide-grouped]") !== null,
+    [labelBox!.x + textX, labelBox!.y + labelBox!.height / 2],
+  );
+  expect(hitIsTheBox).toBe(false);
+
+  await label.click({ position: { x: textX, y: labelBox!.height / 2 } });
+  await expect(box).toHaveAttribute("aria-checked", "true");
+  await expect(sectorHeader).toHaveCount(0);
+});
diff --git a/apps/website/e2e/helpers.ts b/apps/website/e2e/helpers.ts
index 542864b9..9c273f04 100644
--- a/apps/website/e2e/helpers.ts
+++ b/apps/website/e2e/helpers.ts
@@ -346,8 +346,9 @@ export async function dragResizeHandle(handle: Locator, deltaX: number) {
  * `document.body` (the grid viewport's `contain: content` would clip a fixed
  * popover), so it cannot be located under the trigger either.
  *
- * Hence the three steps: press the trigger, find the option by its `data-value`
- * anywhere in the document, and read the commit back off the trigger's
+ * Hence the three steps: press the trigger, find the option by its
+ * `data-pretable-option-value` anywhere in the document, and read the commit
+ * back off the trigger's
  * `data-pretable-value` — the attribute the component writes for exactly this
  * reason. Waiting on that attribute rather than returning after the click also
  * keeps the caller off a stale value: the commit is a React state update, so
@@ -365,13 +366,42 @@ export async function chooseOption(
 ): Promise<void> {
   await trigger.click();
   const option = page.locator(
-    `[data-pretable-listbox] [data-pretable-option][data-value="${value}"]`,
+    `[data-pretable-listbox] [data-pretable-option][data-pretable-option-value="${value}"]`,
   );
   await expect(option).toBeVisible();
   await option.click();
   await expect(trigger).toHaveAttribute("data-pretable-value", value);
 }
 
+/**
+ * Clicks a kit checkbox (`PretableCheckbox`) and waits for the state to land.
+ *
+ * The kit's checkbox is a `button[role="checkbox"]`, not an `<input>`. That
+ * takes Playwright's `.check()` / `.uncheck()` off the table: both require an
+ * `<input type="checkbox">` (or a `[role=checkbox]` whose state they can
+ * READ AND SET), and both throw on a button — so the driver is a plain click
+ * plus a wait on `aria-checked`, the attribute the component renders for
+ * exactly this. Waiting on it rather than returning after the click keeps the
+ * caller off a stale read: the toggle is a React state update, so the next
+ * assertion would otherwise race it.
+ *
+ * `toBeChecked()` is NOT affected — Playwright reads `aria-checked` for
+ * `role=checkbox` elements — so existing checked/unchecked ASSERTIONS keep
+ * working unchanged; it is only the two acting methods that had to go.
+ *
+ * `next` is the state expected AFTER the click, which for a header select-all
+ * can be `"mixed"`. Call it with the state the box is already in and it proves
+ * nothing, exactly as with `chooseOption`.
+ */
+export async function toggleCheckbox(
+  page: Page,
+  box: Locator,
+  next: boolean | "mixed",
+): Promise<void> {
+  await box.click();
+  await expect(box).toHaveAttribute("aria-checked", String(next));
+}
+
 /** The grouping section's rail tab. */
 export function groupingRailTab(page: Page): Locator {
   return page.locator(
diff --git a/apps/website/e2e/smoke.spec.ts b/apps/website/e2e/smoke.spec.ts
index e28480cb..c635443b 100644
--- a/apps/website/e2e/smoke.spec.ts
+++ b/apps/website/e2e/smoke.spec.ts
@@ -13,6 +13,7 @@ import {
   openDrawer,
   openFilterMenu,
   scrollViewportTo,
+  toggleCheckbox,
   waitForDocsReady,
   waitForGridReady,
   waitForStablePosition,
@@ -401,10 +402,13 @@ test("cockpit: filter, edit (guardrail + success), and select+copy under streami
 
   // Sector funnel → enum checklist (auto-derived) → Energy → 2 rows.
   const sectorDialog = await openFilterMenu(page, "Sector");
-  await sectorDialog
-    .locator("[data-pretable-filter-set]")
-    .getByRole("checkbox", { name: "Energy" })
-    .check();
+  await toggleCheckbox(
+    page,
+    sectorDialog
+      .locator("[data-pretable-filter-set]")
+      .getByRole("checkbox", { name: "Energy" }),
+    true,
+  );
   await expect(page.locator("[data-pretable-row]")).toHaveCount(2); // XOM, CVX
   const shown = await page
     .locator('[data-pretable-row] [data-pretable-column-id="sector"]')
@@ -506,10 +510,13 @@ test("cockpit: the selection summary counts the rows the user can see", async ({
   await page.getByRole("button", { name: "Pause market" }).click();
 
   const sectorDialog = await openFilterMenu(page, "Sector");
-  await sectorDialog
-    .locator("[data-pretable-filter-set]")
-    .getByRole("checkbox", { name: "Consumer" })
-    .check();
+  await toggleCheckbox(
+    page,
+    sectorDialog
+      .locator("[data-pretable-filter-set]")
+      .getByRole("checkbox", { name: "Consumer" }),
+    true,
+  );
   await expect(page.locator("[data-pretable-row]")).toHaveCount(6);
   await page.keyboard.press("Escape");
 
@@ -545,10 +552,13 @@ test("cockpit: paste a TSV block into Qty (real clipboard on Chromium)", async (
   // (`openFilterMenu` also gates on `data-pretable-hydrated`, which this test
   // needs anyway before it clicks a cell to move focus into the grid.)
   const sectorDialog = await openFilterMenu(page, "Sector");
-  await sectorDialog
-    .locator("[data-pretable-filter-set]")
-    .getByRole("checkbox", { name: "Energy" })
-    .check();
+  await toggleCheckbox(
+    page,
+    sectorDialog
+      .locator("[data-pretable-filter-set]")
+      .getByRole("checkbox", { name: "Energy" }),
+    true,
+  );
   await expect(page.locator("[data-pretable-row]")).toHaveCount(2); // XOM, CVX
   // Close the menu: its value input would otherwise hold focus, and a paste
   // into an input belongs to that input, not to the grid.

From 50cd413ac4a2c1c046b63e2195a154fbc68028d2 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 18:47:03 -0700
Subject: [PATCH 17/20] docs: the Components page description fits the
 155-character cap

`content-metadata.test.ts` had been red since 7f0d2d52: the new description
was 175 characters. Trimmed to 143; nothing else changed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/content/docs/grid/components.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index 604fcabd..af36d2ae 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -1,6 +1,6 @@
 ---
 title: Components
-description: "The kit components the grid renders its own chrome from — Button, IconButton, Select, TextInput and Checkbox — how to style them, and how to replace any of them with your own."
+description: "The kit the grid renders its own chrome from — Button, IconButton, Select, TextInput and Checkbox — how to style them, and how to replace them."
 nav: Grid
 ---
 

From 0df8e5d675d5c35bc4badb50fac8afafa94901a5 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 19:05:37 -0700
Subject: [PATCH 18/20] fix(website,docs): the checkbox driver's reason, the
 override sweep's claim, and two docs facts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`toggleCheckbox`'s comment said Playwright's `.check()` / `.uncheck()` throw on
a `button[role=checkbox]`. They do not — `getChecked` honours `aria-checked` for
that role. The two real reasons to hand-roll the driver are that the same read
collapses `aria-checked="mixed"` to `false` (so `.check()` on a mixed select-all
throws "did not change its state" on a box that changed) and that `_setChecked`
reads the final state once with no retry, racing the React commit that writes the
attribute. The comment now says that. The helper also took a `page` it never
used; dropped, with a clause on why `chooseOption` still needs one.

The components spec's closing zero-kit sweep claimed to cover "every site above,
the builder's own field and checklist included". Both dialogs are closed by then,
so their sites are unmounted, and the new builder row defaults to a text column,
so no checklist is ever drawn. The comment now says what the sweep sees, and the
gap it left is closed at the source: a page-wide zero count for the kit's field
while the name dialog is open, and for the kit's checkbox while the status one
is — a stray built-in inside a portalled dialog is invisible to the count at the
top of the test.

Docs: `warnOnce` is not gated on a build flag, so "warns in development" was
wrong in four places; and "seven grid fields" (instances) beside "the three
chrome fields" (kinds) read as a contradiction on one page, so the second now
names the kinds.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/website/content/docs/grid/components.mdx | 21 +++++++-------
 apps/website/e2e/components.spec.ts           | 16 ++++++++--
 apps/website/e2e/helpers.ts                   | 29 +++++++++++--------
 apps/website/e2e/smoke.spec.ts                |  3 --
 4 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/apps/website/content/docs/grid/components.mdx b/apps/website/content/docs/grid/components.mdx
index af36d2ae..ea79f763 100644
--- a/apps/website/content/docs/grid/components.mdx
+++ b/apps/website/content/docs/grid/components.mdx
@@ -35,7 +35,7 @@ A labelled push-button in one of the grid's two looks.
 
 An icon-only push-button. `aria-label` is **required** — it is the button's
 only accessible name, and omitting it is a compile error rather than an
-accessibility failure discovered later. An empty one warns in development.
+accessibility failure discovered later. An empty one warns once per page.
 
 | Prop         | Type           | Notes                                                           |
 | ------------ | -------------- | --------------------------------------------------------------- |
@@ -48,8 +48,8 @@ A select-only combobox: the kit's answer to the native `<select>`, whose open
 list no theme can reach. The trigger is a `<button role="combobox">`; the list
 is a portalled `role="listbox"` placed against it. `aria-label` is
 **required**, for the same reason it is on `IconButton` — a picker with no
-accessible name reads as an unnamed button — and an empty one warns in
-development. Four grid pickers are this component: the funnel menu's
+accessible name reads as an unnamed button — and an empty one warns once per
+page. Four grid pickers are this component: the funnel menu's
 [operator](/docs/grid/filtering#the-built-in-menu), the tool panel's
 [filter-builder column and operator](/docs/grid/tool-panel#dom-hooks-and-strings),
 and the grouping section's
@@ -119,8 +119,8 @@ the tool panel's
 and the [columns search box](/docs/grid/tool-panel#the-columns-section).
 
 The accessible name may come from an `aria-label`, an `aria-labelledby`, or a
-`<label for>` naming its id. With none of the three it warns once in
-development — an unnamed field reads as a bare edit box.
+`<label for>` naming its id. With none of the three it warns once per page —
+an unnamed field reads as a bare edit box.
 
 ```tsx
 import { PretableTextInput } from "@pretable/react";
@@ -169,7 +169,7 @@ and the [tool panel's filter row](/docs/grid/tool-panel#rows-runs-and-the-join).
 An `aria-label` names it, and so does a wrapping `<label>` — a `<button>` is
 a labelable element, so the text names the control and clicking that text
 toggles it, which is the shape the hide-grouped switch uses. With neither it
-warns once in development, the way `IconButton` does.
+warns once per page, the way `IconButton` does.
 
 ```tsx
 import { PretableCheckbox } from "@pretable/react";
@@ -236,10 +236,11 @@ Pass `components` to `<PretableSurface>` (or `<Pretable>`) with one entry per
 component type you want to replace. The replacement is used everywhere that
 type appears — the tool panel and the portalled filter dialog for `Button`;
 the header, the tool panel and the group panel for `IconButton`; the filter
-dialog, the filter builder and the grouping section for `Select`; the three
-chrome fields for `TextInput`; the row-select column, the boolean cell, the
-tool panel and both enum checklists for `Checkbox` — and receives exactly the
-props the built-in does, `site` included, so it can branch on where it is.
+dialog, the filter builder and the grouping section for `Select`; the funnel
+menu's operand fields, the filter builder's operand fields and the Columns
+search box for `TextInput`; the row-select column, the boolean cell, the tool
+panel and both enum checklists for `Checkbox` — and receives exactly the props
+the built-in does, `site` included, so it can branch on where it is.
 
 | Prop         | Type                          | Notes                                                                          |
 | ------------ | ----------------------------- | ------------------------------------------------------------------------------ |
diff --git a/apps/website/e2e/components.spec.ts b/apps/website/e2e/components.spec.ts
index e7a7d49d..d77e3635 100644
--- a/apps/website/e2e/components.spec.ts
+++ b/apps/website/e2e/components.spec.ts
@@ -76,6 +76,10 @@ test("every button in the grid is the consumer's, including inside the portalled
     "data-fixture-field",
     "filter-value",
   );
+  // And nothing the kit draws itself came through the portal with it. The
+  // sweep at the top of this test ran before the dialog existed, so a
+  // built-in field mounted inside it is only visible from here.
+  await expect(page.locator("[data-pretable-text-input]")).toHaveCount(0);
 
   // The dialog's operator picker is the replacement too — and the grid's own
   // behaviour on it survived: `FilterMenu` focuses the picker on mount through
@@ -112,6 +116,10 @@ test("every button in the grid is the consumer's, including inside the portalled
     "data-pretable-option-value",
     "open",
   );
+  // Same reason as the field sweep in the other dialog: a second, built-in box
+  // mounted inside this portalled checklist would be invisible to the count at
+  // the top of the test, which ran before the dialog existed.
+  await expect(page.locator("[data-pretable-checkbox]")).toHaveCount(0);
   await page.keyboard.press("Escape");
   await expect(statusDialog).toHaveCount(0);
 
@@ -126,8 +134,12 @@ test("every button in the grid is the consumer's, including inside the portalled
   expect(
     Number(await rowColumn.getAttribute("data-fixture-option-count")),
   ).toBeGreaterThan(0);
-  // Still nothing the kit draws itself, now that every site above has
-  // rendered at least once — the builder's own field and checklist included.
+  // Still nothing the kit draws itself, now that the builder row is mounted
+  // too. Both dialogs were closed above, so this sweep sees only what is on
+  // the page NOW — the grid chrome plus the builder row's picker and value
+  // field; the dialogs' own sites are swept while each one is open, not here.
+  // The new row defaults to a text column, so it draws a value FIELD and no
+  // checklist: `filter-row-choice` is not exercised by this test at all.
   await expect(page.locator("[data-pretable-select]")).toHaveCount(0);
   await expect(page.locator("[data-pretable-text-input]")).toHaveCount(0);
   await expect(page.locator("[data-pretable-checkbox]")).toHaveCount(0);
diff --git a/apps/website/e2e/helpers.ts b/apps/website/e2e/helpers.ts
index 9c273f04..eb1829f9 100644
--- a/apps/website/e2e/helpers.ts
+++ b/apps/website/e2e/helpers.ts
@@ -376,25 +376,30 @@ export async function chooseOption(
 /**
  * Clicks a kit checkbox (`PretableCheckbox`) and waits for the state to land.
  *
- * The kit's checkbox is a `button[role="checkbox"]`, not an `<input>`. That
- * takes Playwright's `.check()` / `.uncheck()` off the table: both require an
- * `<input type="checkbox">` (or a `[role=checkbox]` whose state they can
- * READ AND SET), and both throw on a button — so the driver is a plain click
- * plus a wait on `aria-checked`, the attribute the component renders for
- * exactly this. Waiting on it rather than returning after the click keeps the
- * caller off a stale read: the toggle is a React state update, so the next
- * assertion would otherwise race it.
+ * The kit's checkbox is a `button[role="checkbox"]`, not an `<input>`.
+ * Playwright's `.check()` / `.uncheck()` do run on it — their state read
+ * honours `aria-checked` for `role=checkbox` — but they are wrong here for two
+ * reasons. First, that read collapses `aria-checked="mixed"` to `false`, so
+ * `.check()` on a header select-all in the mixed state clicks, re-reads
+ * `false`, and throws "Clicking the checkbox did not change its state" on a
+ * box that changed exactly as intended. Second, `_setChecked` reads the final
+ * state ONCE with no retry, so it races the React commit that writes
+ * `aria-checked` — the same race `expect(...).toHaveAttribute` retries away.
+ * So the driver is a plain click plus a retrying wait on `aria-checked`.
  *
- * `toBeChecked()` is NOT affected — Playwright reads `aria-checked` for
- * `role=checkbox` elements — so existing checked/unchecked ASSERTIONS keep
- * working unchanged; it is only the two acting methods that had to go.
+ * `toBeChecked()` is fine on these boxes for the same `aria-checked` reason,
+ * so binary checked/unchecked ASSERTIONS need no helper; it is the two acting
+ * methods that this replaces.
+ *
+ * Unlike `chooseOption`, this takes no `page`: the click and the wait both
+ * land on the box itself, where `chooseOption` needs `page` to reach a listbox
+ * portalled out to `<body>`.
  *
  * `next` is the state expected AFTER the click, which for a header select-all
  * can be `"mixed"`. Call it with the state the box is already in and it proves
  * nothing, exactly as with `chooseOption`.
  */
 export async function toggleCheckbox(
-  page: Page,
   box: Locator,
   next: boolean | "mixed",
 ): Promise<void> {
diff --git a/apps/website/e2e/smoke.spec.ts b/apps/website/e2e/smoke.spec.ts
index c635443b..b18b27bf 100644
--- a/apps/website/e2e/smoke.spec.ts
+++ b/apps/website/e2e/smoke.spec.ts
@@ -403,7 +403,6 @@ test("cockpit: filter, edit (guardrail + success), and select+copy under streami
   // Sector funnel → enum checklist (auto-derived) → Energy → 2 rows.
   const sectorDialog = await openFilterMenu(page, "Sector");
   await toggleCheckbox(
-    page,
     sectorDialog
       .locator("[data-pretable-filter-set]")
       .getByRole("checkbox", { name: "Energy" }),
@@ -511,7 +510,6 @@ test("cockpit: the selection summary counts the rows the user can see", async ({
 
   const sectorDialog = await openFilterMenu(page, "Sector");
   await toggleCheckbox(
-    page,
     sectorDialog
       .locator("[data-pretable-filter-set]")
       .getByRole("checkbox", { name: "Consumer" }),
@@ -553,7 +551,6 @@ test("cockpit: paste a TSV block into Qty (real clipboard on Chromium)", async (
   // needs anyway before it clicks a cell to move focus into the grid.)
   const sectorDialog = await openFilterMenu(page, "Sector");
   await toggleCheckbox(
-    page,
     sectorDialog
       .locator("[data-pretable-filter-set]")
       .getByRole("checkbox", { name: "Energy" }),

From 0f83fb16d1649e3b4aa30388a39aabd02780c304 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 19:22:45 -0700
Subject: [PATCH 19/20] chore: changeset for components SP3

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .changeset/components-sp3-inputs.md | 58 +++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 .changeset/components-sp3-inputs.md

diff --git a/.changeset/components-sp3-inputs.md b/.changeset/components-sp3-inputs.md
new file mode 100644
index 00000000..9e4fcb23
--- /dev/null
+++ b/.changeset/components-sp3-inputs.md
@@ -0,0 +1,58 @@
+---
+"@pretable/react": minor
+"@pretable/ui": patch
+---
+
+The kit's field and its checkbox, and the fourteen controls in the grid rebuilt
+on them.
+
+`PretableTextInput` is an `<input>` and `PretableCheckbox` a
+`button[role="checkbox"]`, with `PretableTextInputProps`,
+`PretableCheckboxProps`, `PretableTextInputComponent` and
+`PretableCheckboxComponent` alongside them and `TextInput` and `Checkbox` slots
+on `PretableComponents` — `components={{ TextInput, Checkbox }}` on
+`<PretableSurface>` and `<Pretable>` replaces the grid's seven chrome text
+fields and all seven of its checkboxes, the same way `Button`, `IconButton` and
+`Select` already do. The fields are the filter dialog's value and its two range
+bounds, the tool panel's three filter-row values, and the Columns search box;
+the checkboxes are row select, header select-all, the boolean cell, the column
+visibility toggle, "hide grouped columns", and the two enum checklists.
+
+**`PretableButtonSite` is now `PretableSite`, and `PretableBuiltInButtonSite` is
+`PretableBuiltInSite`.** The type names where any kit control sits, not where a
+button does, and a field and a checkbox have sites too. The union gains ten
+names: `filter-value`, `filter-row-value`, `tool-search`, `row-select`,
+`row-select-all`, `bool-cell`, `tool-column-toggle`, `hide-grouped`,
+`filter-choice` and `filter-row-choice`.
+
+**Three checkboxes are no longer `<input type="checkbox">`.** The filter
+dialog's enum checklist, the tool panel's filter-builder enum checklist and the
+"hide grouped columns" switch are now `button[role="checkbox"]` carrying
+`aria-checked`. A test keyed on `.checked`, on Playwright's `.check()` or on an
+`input[type=checkbox]` selector must read `aria-checked` and click the button
+instead; `toBeChecked()` still works, because it reads the ARIA state.
+
+**Attributes.** Every kit field carries `data-pretable-text-input` and every kit
+checkbox `data-pretable-checkbox`, and each site keeps the `data-pretable-*`
+attribute it already had. The two enum checklists gain
+`data-pretable-filter-choice` and `data-pretable-filter-row-choice`, and each
+choice carries `data-pretable-option-value`. The filter builder's checklist
+_wrapper_ is now `data-pretable-filter-row-set` — the field alongside it keeps
+`data-pretable-filter-row-value`, which the wrapper used to borrow. The listbox
+option's `data-value` is now `data-pretable-option-value`: which option an
+element **is**, as against the select trigger's `data-pretable-value`, which is
+what that picker has committed.
+
+**Look.** The three ex-native checkboxes become the kit's 16px square drawn from
+the `--pretable-checkbox-*` tokens, in place of the browser's ~13px default. The
+Columns search box, the header select-all and the column visibility toggle now
+take the product focus ring instead of the user agent's. Everything else is
+pixel-identical: the seven fields and the four checkboxes that were already
+buttons keep their boxes, their type and their spacing exactly.
+
+**Behaviour.** A kit checkbox's keyboard is the native button's — Space and
+Enter both activate. A consumer `onClick` runs before the toggle and may
+`preventDefault()` to veto it, which is how a shift-click range select keeps its
+click without a second write. `checked` accepts `"mixed"` for the header
+select-all's partial selection; it renders the minus glyph and toggles to
+`true`.

From eebaf984dfb9c5ea3c0ba60809d428596a1c1181 Mon Sep 17 00:00:00 2001
From: Brian Love <brian@liveloveapp.com>
Date: Mon, 7 Sep 2026 19:42:06 -0700
Subject: [PATCH 20/20] docs(react,ui,website): the veto contract, the
 warning's reach, and two hook lists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The changeset is the published CHANGELOG, and it under-reported the one change
that breaks a selector a consumer could already have written against 0.17.0:
the listbox option's `data-value` is now `data-pretable-option-value`. It was
the tail of the Attributes paragraph, framed as naming consistency; it now has
its own bolded paragraph beside the "no longer `<input type=checkbox>`" one,
saying plainly that a `[data-value="x"]` selector matches nothing. This
branch's own e2e broke on exactly that.

The same file's "Look" paragraph named three sites as leaving the UA focus ring
and then said the four already-button checkboxes keep everything "exactly".
True of the box, but `row-select` and `bool-cell` match
`[data-pretable-checkbox]:focus-visible` too and also leave the UA's ring —
they were simply never measured, because `tabIndex={-1}` puts them out of a
Tab's reach. The sentence now says that rather than implying their ring is
unchanged.

The consumer-`onClick`-veto contract was stated in checkbox.tsx's module
comment, which does not reach the `.d.ts`, and in the docs — but in no exported
symbol's JSDoc. `onCheckedChange` now carries it.

`warnOnce` is explicitly not gated on a build flag, so four JSDoc blocks
claiming the missing-name check "warns in development" were wrong the way the
website's four were before 0df8e5d6. They now say "warns once per page", the
phrasing that commit settled on.

`packages/react/react.api.md` is UNCHANGED, contrary to what the review
expected: `pnpm api` regenerated it byte-identically and `api:check` passes.
The report carries release tags and signatures, not JSDoc prose, and
`onCheckedChange` was already documented — so no `(undocumented)` marker moved
either.

Two docs reference lists were a revision behind: tool-panel.mdx's filter-row
hooks lacked `data-pretable-filter-row-set` and `-row-choice`, and
filtering.mdx's funnel-menu hooks lacked `data-pretable-filter-choice`; both
now note the per-box `data-pretable-option-value`.

grid.css's invalid boolean cell draws an `outline`, the same property the kit
focus ring at the end of the layer now claims for every
`[data-pretable-checkbox]:focus-visible`. A comment records that the collision
is latent (the control is `tabIndex={-1}`, so a click never gives it
`:focus-visible`) and that the precedence would be correct if it ever fired —
a focus ring should outrank an error outline while focused, and `aria-invalid`
with `aria-errormessage` carries the error to assistive tech regardless. No
declaration changed.

Cosmetic: a css-cascade guard's skip explained itself as a wait for "Task 8"
rather than describing what an empty site list means; a helper's doc said it
was read by two guards when one reads it; and a helpers.ts comment kept an
awkward line break left by the rename.

No behaviour changes anywhere, and nothing a browser test reads: helpers.ts's
edit is comment-only.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .changeset/components-sp3-inputs.md           | 26 ++++++++++++-------
 apps/website/content/docs/grid/filtering.mdx  |  2 +-
 apps/website/content/docs/grid/tool-panel.mdx |  2 +-
 apps/website/e2e/helpers.ts                   | 10 +++----
 packages/react/src/components/button.tsx      |  2 +-
 packages/react/src/components/checkbox.tsx    |  6 +++--
 packages/react/src/components/select.tsx      |  2 +-
 packages/react/src/components/text-input.tsx  |  4 +--
 packages/ui/grid.css                          |  9 +++++++
 packages/ui/src/__tests__/css-cascade.test.ts | 12 ++++-----
 10 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/.changeset/components-sp3-inputs.md b/.changeset/components-sp3-inputs.md
index 9e4fcb23..4f04f9b0 100644
--- a/.changeset/components-sp3-inputs.md
+++ b/.changeset/components-sp3-inputs.md
@@ -32,23 +32,31 @@ dialog's enum checklist, the tool panel's filter-builder enum checklist and the
 `input[type=checkbox]` selector must read `aria-checked` and click the button
 instead; `toBeChecked()` still works, because it reads the ARIA state.
 
+**A listbox option is marked `data-pretable-option-value`, not `data-value`.**
+The select's open list is the one place where an attribute a consumer could
+already have written against `0.17.0` has been renamed: a selector like
+`[data-pretable-option][data-value="open"]` now matches nothing, and must read
+`data-pretable-option-value` instead. (This branch's own end-to-end suite broke
+on exactly that selector.) The new name says which option an element **is**, as
+against the select trigger's `data-pretable-value`, which is what that picker
+has committed.
+
 **Attributes.** Every kit field carries `data-pretable-text-input` and every kit
 checkbox `data-pretable-checkbox`, and each site keeps the `data-pretable-*`
 attribute it already had. The two enum checklists gain
 `data-pretable-filter-choice` and `data-pretable-filter-row-choice`, and each
-choice carries `data-pretable-option-value`. The filter builder's checklist
+choice carries `data-pretable-option-value` too. The filter builder's checklist
 _wrapper_ is now `data-pretable-filter-row-set` — the field alongside it keeps
-`data-pretable-filter-row-value`, which the wrapper used to borrow. The listbox
-option's `data-value` is now `data-pretable-option-value`: which option an
-element **is**, as against the select trigger's `data-pretable-value`, which is
-what that picker has committed.
+`data-pretable-filter-row-value`, which the wrapper used to borrow.
 
 **Look.** The three ex-native checkboxes become the kit's 16px square drawn from
 the `--pretable-checkbox-*` tokens, in place of the browser's ~13px default. The
-Columns search box, the header select-all and the column visibility toggle now
-take the product focus ring instead of the user agent's. Everything else is
-pixel-identical: the seven fields and the four checkboxes that were already
-buttons keep their boxes, their type and their spacing exactly.
+Columns search box and every kit checkbox now take the product focus ring
+instead of the user agent's — visibly on the header select-all and the column
+visibility toggle, and on row select and the boolean cell too, though both are
+`tabIndex={-1}` and so out of a `Tab`'s reach. Nothing else moves: the seven
+fields and the four checkboxes that were already buttons keep their boxes, their
+element type and their spacing exactly.
 
 **Behaviour.** A kit checkbox's keyboard is the native button's — Space and
 Enter both activate. A consumer `onClick` runs before the toggle and may
diff --git a/apps/website/content/docs/grid/filtering.mdx b/apps/website/content/docs/grid/filtering.mdx
index 8fd54224..19a9df1c 100644
--- a/apps/website/content/docs/grid/filtering.mdx
+++ b/apps/website/content/docs/grid/filtering.mdx
@@ -79,7 +79,7 @@ Clicking the funnel opens a popover (`role="dialog"`, labeled `Filter {header}`)
 - **Clear** resets the column's filter and the menu's controls in one click.
 - **`Escape`, clicking outside, or scrolling** closes the menu. Filters keep applying after it closes — the funnel's tint tells you which columns are constrained.
 
-For styling or testing, the parts expose stable DOM hooks: the button carries `data-pretable-filter-funnel`, `data-pretable-column-id`, and `data-pretable-filter-active`; the menu carries `data-pretable-filter-menu`, with `data-pretable-filter-operator`, `data-pretable-filter-value`, `data-pretable-filter-min` / `-max`, `data-pretable-filter-set`, and `data-pretable-filter-clear` on its controls — the same funnel and menu you opened in the grid above.
+For styling or testing, the parts expose stable DOM hooks: the button carries `data-pretable-filter-funnel`, `data-pretable-column-id`, and `data-pretable-filter-active`; the menu carries `data-pretable-filter-menu`, with `data-pretable-filter-operator`, `data-pretable-filter-value`, `data-pretable-filter-min` / `-max`, `data-pretable-filter-set`, and `data-pretable-filter-clear` on its controls; and inside an enum checklist, `data-pretable-filter-choice` on each box, each of those also carrying its own value as `data-pretable-option-value` — the same funnel and menu you opened in the grid above.
 
 ### The funnel on touch
 
diff --git a/apps/website/content/docs/grid/tool-panel.mdx b/apps/website/content/docs/grid/tool-panel.mdx
index 44cb4a62..d18c90c4 100644
--- a/apps/website/content/docs/grid/tool-panel.mdx
+++ b/apps/website/content/docs/grid/tool-panel.mdx
@@ -119,7 +119,7 @@ A grouped column carries its own marker — the `toolPanelColumnGroupedMarker` m
 
 ### DOM hooks and strings
 
-The parts expose stable hooks, the same way the [funnel menu](/docs/grid/filtering#the-built-in-menu) does: `data-pretable-filter-row` on a row, with `data-pretable-filter-row-column`, `-operator`, `-value`, and `-remove` on its controls; `data-pretable-filter-join` on the connective (a `<button>` where the join can change, a `<span>` where it cannot); `data-pretable-filter-add` on the two add buttons; `data-pretable-filter-rail` on a nested group's rail; `data-pretable-filter-column-hidden` on a row whose column is hidden; `data-pretable-filter-column-grouped` on a row whose column is grouped away (grouped and not drawn); and `data-pretable-filter-empty` on the "no filters" message.
+The parts expose stable hooks, the same way the [funnel menu](/docs/grid/filtering#the-built-in-menu) does: `data-pretable-filter-row` on a row, with `data-pretable-filter-row-column`, `-operator`, `-value`, and `-remove` on its controls; `data-pretable-filter-row-set` on an enum row's checklist wrapper, with `data-pretable-filter-row-choice` on each of its boxes, each of those also carrying its own value as `data-pretable-option-value`; `data-pretable-filter-join` on the connective (a `<button>` where the join can change, a `<span>` where it cannot); `data-pretable-filter-add` on the two add buttons; `data-pretable-filter-rail` on a nested group's rail; `data-pretable-filter-column-hidden` on a row whose column is hidden; `data-pretable-filter-column-grouped` on a row whose column is grouped away (grouped and not drawn); and `data-pretable-filter-empty` on the "no filters" message.
 
 Every string the pane renders comes from the `messages` prop — the `toolPanelFilter*` labels for a row's controls and its join, plus `toolPanelAddFilterLabel`, `toolPanelAddGroupLabel`, `toolPanelRemoveFilterLabel`, `toolPanelNoFiltersMessage`, `toolPanelNoFilterValuesMessage`, and the two refusal sentences (`toolPanelFilterDepthRefusal` and `toolPanelNoFilterColumnsRefusal`) — with one exception. The **operator names** in the operator picker are not messages. They are shared verbatim with the header funnel, which is not on the messages layer yet, and localizing them here alone would show one grid's operators in two languages at once. Until the funnel joins, that list is English.
 
diff --git a/apps/website/e2e/helpers.ts b/apps/website/e2e/helpers.ts
index eb1829f9..73401331 100644
--- a/apps/website/e2e/helpers.ts
+++ b/apps/website/e2e/helpers.ts
@@ -348,11 +348,11 @@ export async function dragResizeHandle(handle: Locator, deltaX: number) {
  *
  * Hence the three steps: press the trigger, find the option by its
  * `data-pretable-option-value` anywhere in the document, and read the commit
- * back off the trigger's
- * `data-pretable-value` — the attribute the component writes for exactly this
- * reason. Waiting on that attribute rather than returning after the click also
- * keeps the caller off a stale value: the commit is a React state update, so
- * the next assertion would otherwise race it.
+ * back off the trigger's `data-pretable-value` — the attribute the component
+ * writes for exactly this reason. Waiting on that attribute rather than
+ * returning after the click also keeps the caller off a stale value: the
+ * commit is a React state update, so the next assertion would otherwise race
+ * it.
  *
  * Call it with the value the picker has ALREADY committed and it proves
  * nothing: the component fires no `onChange` for a no-op choice, so the
diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
index 86ee4fe9..a0319fe9 100644
--- a/packages/react/src/components/button.tsx
+++ b/packages/react/src/components/button.tsx
@@ -120,7 +120,7 @@ export interface PretableIconButtonProps extends Omit<
    * Required. An icon-only button has no other accessible name, so omitting
    * it is a compile error rather than a WCAG failure discovered later. The
    * type system cannot stop an empty or whitespace-only string, which
-   * warns in development instead.
+   * warns once per page instead.
    */
   "aria-label": string;
   /**
diff --git a/packages/react/src/components/checkbox.tsx b/packages/react/src/components/checkbox.tsx
index 23063bf7..18a5b8c1 100644
--- a/packages/react/src/components/checkbox.tsx
+++ b/packages/react/src/components/checkbox.tsx
@@ -53,7 +53,9 @@ export interface PretableCheckboxProps extends Omit<
   /**
    * Called with the next value after a click, before anything is written:
    * this is a controlled component, and `checked` only changes when the
-   * consumer changes it. `"mixed"` toggles to `true`.
+   * consumer changes it. `"mixed"` toggles to `true`. A consumer `onClick`
+   * runs first and may call `preventDefault()` to veto this call, which is
+   * how a shift-click range select keeps its click without a second write.
    */
   onCheckedChange: (next: boolean) => void;
   /**
@@ -69,7 +71,7 @@ export interface PretableCheckboxProps extends Omit<
  * A checkbox in the grid's own chrome.
  *
  * The accessible name may come from an `aria-label` or from a wrapping
- * `<label>`; with neither, it warns once in development, the way
+ * `<label>`; with neither, it warns once per page, the way
  * `PretableIconButton` does.
  *
  * ```tsx
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 397b3d3e..0e538f13 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -90,7 +90,7 @@ export interface PretableSelectProps extends Omit<
   onChange: (value: string) => void;
   /**
    * Required. A picker with no accessible name is the icon-button problem
-   * again. An empty string warns in development.
+   * again. An empty string warns once per page.
    */
   "aria-label": string;
   /** Where in the grid this picker is; lands as `data-pretable-site`. */
diff --git a/packages/react/src/components/text-input.tsx b/packages/react/src/components/text-input.tsx
index c96d6587..20a3ac8f 100644
--- a/packages/react/src/components/text-input.tsx
+++ b/packages/react/src/components/text-input.tsx
@@ -60,8 +60,8 @@ export interface PretableTextInputProps extends Omit<
  * numeric keyboard.
  *
  * The accessible name may come from an `aria-label`, an `aria-labelledby`, or
- * a `<label for>` naming its id; with none of them, it warns once in
- * development, the way `PretableCheckbox` does.
+ * a `<label for>` naming its id; with none of them, it warns once per page,
+ * the way `PretableCheckbox` does.
  *
  * ```tsx
  * <PretableTextInput
diff --git a/packages/ui/grid.css b/packages/ui/grid.css
index 09226fd7..7a55f991 100644
--- a/packages/ui/grid.css
+++ b/packages/ui/grid.css
@@ -923,6 +923,15 @@
     opacity: 0.5;
     cursor: wait;
   }
+  /* This outline shares the kit's focus-ring property. The kit rule at the end
+     of the layer now matches `[data-pretable-checkbox]:focus-visible`, which
+     this cell is one of, and both selectors flatten to (0,0,0) — so if the two
+     ever matched at once the later kit rule would take the outline. Latent
+     today: the control is `tabIndex={-1}`, so a click never gives it
+     `:focus-visible`. And that precedence is the RIGHT one if it ever fires —
+     while a control is focused the focus ring must be the visible state, and
+     the invalid state is still carried to assistive tech by `aria-invalid` and
+     `aria-errormessage`, which no outline can say. Left alone deliberately. */
   :where([data-pretable-bool-cell][aria-invalid="true"]) {
     outline: 1px solid var(--pretable-text-error);
     outline-offset: 1px;
diff --git a/packages/ui/src/__tests__/css-cascade.test.ts b/packages/ui/src/__tests__/css-cascade.test.ts
index 7706b7a8..4e6d3a69 100644
--- a/packages/ui/src/__tests__/css-cascade.test.ts
+++ b/packages/ui/src/__tests__/css-cascade.test.ts
@@ -96,9 +96,9 @@ const attrsFor = (site: string) =>
   SITE_ATTRS[site] ?? [`data-pretable-${site}]`];
 
 /** The kit's checkbox-only ring offset, the one declaration that makes a
- *  checkbox ring OUTSIDE its box. Read by two guards: the ordering one, which
- *  cares where it sits, and the builder checklist's, which cares that it is
- *  what rings its choices now. */
+ *  checkbox ring OUTSIDE its box. Read by the builder checklist's guard,
+ *  which cares that this is what rings its choices now — the section having
+ *  dropped the identical rule it used to carry. */
 const kitCheckboxRingOffset = (css: string) =>
   css.match(
     /:where\(\[data-pretable-checkbox\]:focus-visible\)\s*\{([\s\S]*?)\}/,
@@ -1073,9 +1073,9 @@ describe("grid.css cascade contract", () => {
       const own = sites.flatMap((site) =>
         attrsFor(site).flatMap((attr) => positions(attr)),
       );
-      // Two of the checkbox sites arrive with Task 8; until then they
-      // contribute nothing, and a kit with no sites at all has nothing to
-      // be ahead of.
+      // A kit whose sites all happen to be unstyled has nothing to be ahead
+      // of, and `Math.min()` of an empty list is `Infinity` — which would
+      // pass this vacuously rather than skip it.
       if (own.length === 0) continue;
       expect(
         base,