svelte-kit-vice

History

dev 065cc6a369 feat(eidos): port GridList (selectable list w/ interactive row children) Closes #133. Eidos wrapper + types + recipe + canonical-depth demo. 4 parts: Provider, Row, Cell, SelectionCheckbox. Soma owns selection (none/single/multiple), 2D keyboard nav (Up/Down rows + Left/Right cells), Shift/Ctrl range/toggle, Ctrl+A select-all, Escape-clear, typeahead, hidden form input, Field merge. Eidos adds variant + size + color + defaultValue (uncontrolled init). Reference parity (no air baseline): \| Feature \| soma \| react-aria GridList \| this port \| \|---\|---\|---\|---\| \| selectionMode none/single/multiple \| ✓ \| ✓ \| ✓ \| \| bind:value (controlled) \| ✓ \| ✓ \| ✓ \| \| defaultValue (uncontrolled init) \| ✗ \| ✓ \| ✓ added (parity with Combobox/Select) \| \| Item with interactive descendants \| ✓ \| ✓ \| ✓ \| \| 2D keyboard nav (Up/Down rows, L/R cells) \| ✓ \| ✓ \| ✓ \| \| Shift/Ctrl range/toggle \| ✓ \| ✓ \| ✓ \| \| Ctrl+A select-all (multiple) \| ✓ \| ✓ \| ✓ \| \| Escape-clear \| ✓ \| ✓ \| ✓ \| \| Typeahead \| ✓ \| ✓ \| ✓ \| \| ARIA grid/row/gridcell \| ✓ \| ✓ \| ✓ \| \| Field merge (disabled/invalid/required/readonly) \| ✓ \| ✗ \| ✓ \| \| Form participation (hidden input) \| ✓ \| ✗ \| ✓ \| \| Drag-to-reorder \| ✗ \| ✓ \| ⚠ deferred (compose w/ future DragDrop) \| \| onAction (row click → navigate) \| ✗ \| ✓ \| ⚠ deferred (use button/link inside Cell) \| \| selectionBehavior toggle/replace \| ✗ implicit \| ✓ \| ⚠ deferred \| \| disabledBehavior 'selection'/'all' \| ✗ skip-only \| ✓ \| ⚠ deferred \| \| Async / infinite loading \| ✗ \| ✓ \| ⚠ deferred \| \| Empty state slot \| ✗ \| ✓ \| ⚠ document `data-empty` styling \| Naming: keeps soma's part names (Provider, Row, Cell, SelectionCheckbox). react-aria's "GridListItem" maps to `Row`; soma's vocabulary is more precise and consistent with future Table / TreeGrid in the same family. Variant set: - variant: ControlVariant (surface/outline/ghost), default 'surface' - size: xs..xl (5-step, mirrors Combobox/Listbox) - color: ColorRole (primary/secondary/neutral/affirm/fulfill/risk/threat/loss) - block: stretch to container width Disambiguation (in index.ts comment): use GridList for rows with interactive children; use Listbox for atomic text options (ARIA forbids interactive descendants inside role="listbox"); use Select/Combobox for closed-picker patterns; use Table for tabular data with columns + sort. Visual reuse: - SelectionCheckbox uses the same `mask-image: url(svg-check)` pattern as the shared menu-indicator partial (commit `a2709476`). Filled accent box → white ✓ on `[data-state='checked']`. - Row hover/highlight tokens mirror Combobox.Item / Listbox.Item so the form-control surface family stays coherent. - Same `max-block-size: min(60vh, 22rem) + overflow-y: auto` scroll contract as Listbox (commit `830025b4`). Sidebar entry under Forms (between Listbox and Calendar). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
..
+page.svelte	feat(eidos): port GridList (selectable list w/ interactive row children)	5 months ago

dev 065cc6a369 feat(eidos): port GridList (selectable list w/ interactive row children)

Closes #133. Eidos wrapper + types + recipe + canonical-depth demo.
4 parts: Provider, Row, Cell, SelectionCheckbox. Soma owns selection
(none/single/multiple), 2D keyboard nav (Up/Down rows + Left/Right
cells), Shift/Ctrl range/toggle, Ctrl+A select-all, Escape-clear,
typeahead, hidden form input, Field merge. Eidos adds variant + size +
color + defaultValue (uncontrolled init).

Reference parity (no air baseline):

| Feature | soma | react-aria GridList | this port |
|---|---|---|---|
| selectionMode none/single/multiple | ✓ | ✓ | ✓ |
| bind:value (controlled) | ✓ | ✓ | ✓ |
| defaultValue (uncontrolled init) | ✗ | ✓ | ✓ added (parity with Combobox/Select) |
| Item with interactive descendants | ✓ | ✓ | ✓ |
| 2D keyboard nav (Up/Down rows, L/R cells) | ✓ | ✓ | ✓ |
| Shift/Ctrl range/toggle | ✓ | ✓ | ✓ |
| Ctrl+A select-all (multiple) | ✓ | ✓ | ✓ |
| Escape-clear | ✓ | ✓ | ✓ |
| Typeahead | ✓ | ✓ | ✓ |
| ARIA grid/row/gridcell | ✓ | ✓ | ✓ |
| Field merge (disabled/invalid/required/readonly) | ✓ | ✗ | ✓ |
| Form participation (hidden input) | ✓ | ✗ | ✓ |
| Drag-to-reorder | ✗ | ✓ | ⚠ deferred (compose w/ future DragDrop) |
| onAction (row click → navigate) | ✗ | ✓ | ⚠ deferred (use button/link inside Cell) |
| selectionBehavior toggle/replace | ✗ implicit | ✓ | ⚠ deferred |
| disabledBehavior 'selection'/'all' | ✗ skip-only | ✓ | ⚠ deferred |
| Async / infinite loading | ✗ | ✓ | ⚠ deferred |
| Empty state slot | ✗ | ✓ | ⚠ document `data-empty` styling |

Naming: keeps soma's part names (Provider, Row, Cell, SelectionCheckbox).
react-aria's "GridListItem" maps to `Row`; soma's vocabulary is more
precise and consistent with future Table / TreeGrid in the same family.

Variant set:
- variant: ControlVariant (surface/outline/ghost), default 'surface'
- size: xs..xl (5-step, mirrors Combobox/Listbox)
- color: ColorRole (primary/secondary/neutral/affirm/fulfill/risk/threat/loss)
- block: stretch to container width

Disambiguation (in index.ts comment): use GridList for rows with
interactive children; use Listbox for atomic text options (ARIA
forbids interactive descendants inside role="listbox"); use
Select/Combobox for closed-picker patterns; use Table for tabular
data with columns + sort.

Visual reuse:
- SelectionCheckbox uses the same `mask-image: url(svg-check)` pattern
  as the shared menu-indicator partial (commit a2709476). Filled
  accent box → white ✓ on `[data-state='checked']`.
- Row hover/highlight tokens mirror Combobox.Item / Listbox.Item so
  the form-control surface family stays coherent.
- Same `max-block-size: min(60vh, 22rem) + overflow-y: auto` scroll
  contract as Listbox (commit 830025b4).

Sidebar entry under Forms (between Listbox and Calendar).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

+page.svelte feat(eidos): port GridList (selectable list w/ interactive row children) 5 months ago