You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dev
80b21f63ba
feat(eidos): port Listbox (embedded selection list)
#131. Eidos wrapper + types + recipe + canonical-depth demo. Soma owns
single/multi selection (value as string[]), roving-tabindex keyboard
nav (Arrow + Home/End + typeahead + Ctrl+A), Field-merged flags
(disabled/readonly/required/invalid), hidden form inputs. Eidos adds
the visual surface and exposes variant + size + color.
Reference parity (no air baseline — port directly from soma):
| Feature | soma | react-aria | Headless UI | bits-ui | this port |
|---|---|---|---|---|---|
| Single + multiple selection | ✓ | ✓ | ✓ | ✓ | ✓ |
| bind:value (controlled) | ✓ | ✓ | ✓ | ✓ | ✓ |
| Typeahead + Arrow / Home / End | ✓ | ✓ | ✓ | ✓ | ✓ |
| Loop nav | ✓ | ✗ | ✗ | ✗ | ✓ |
| Section / Group + label | ✓ | ✓ | ✗ | ✓ | ✓ |
| Ctrl+A select-all (multi) | ✓ | ✓ | ✗ | ✗ | ✓ |
| Form participation (hidden inputs) | ✓ | ✗ | ✓ | ✗ | ✓ |
| Field.Provider merge (disabled/invalid/…) | ✓ | ✗ | ✗ | ✗ | ✓ |
| Horizontal orientation | ✓ | ✓ | ✓ | ✓ | ✓ |
| Item indicator (✓ glyph) | ✓ | ✓ | ✗ | ✓ | ✓ shared partial |
| Drag-to-reorder | ✗ | ✓ | ✗ | ✗ | ⚠ deferred |
| Async / infinite loading | ✗ | ✓ | ✗ | ✗ | ⚠ deferred |
| selectionBehavior (toggle/replace) | ⚠ implicit | ✓ | ✗ | ✓ | ⚠ deferred |
| PageUp/Down nav | ✗ | ✓ | ✗ | ✗ | ⚠ deferred |
Parts (5): Listbox (Root, replaces soma's Provider name), Item,
ItemIndicator, Group, GroupLabel.
Variant set:
- variant: ControlVariant (`'surface' | 'outline' | 'ghost'`), default 'surface'
- size: xs..xl (5-step canonical form-control scale)
- color: ColorRole (primary/secondary/neutral/affirm/fulfill/risk/threat/loss)
- block: stretch to container width
Cross-component reuse:
- `ItemIndicator` shares the menu-indicator visual (`a2709476`) — ✓ glyph
identical to standalone Checkbox and Dropdown/Context Menu
CheckboxItems. CSS-only difference: shown only inside
`[data-listbox-item][data-selected]`.
- Item row hover / highlight tokens mirror Combobox.Item /
Command.Item — the form-control surface family stays coherent.
Disambiguation note (in index.ts comment):
- Listbox: atomic options, text rows, no inner interactive elements
(ARIA forbids interactive descendants inside role="listbox")
- GridList: rows with buttons / links / checkboxes inside (2D nav)
- Select / Combobox: closed picker surface (Listbox-like dropdown)
Gotcha: listbox.svelte and listbox-item.svelte rename `children` to
`bodyContent` on destructure to avoid shadowing the inner
`{#snippet children}` block (same recursion trap documented in
`feedback_button_consumer_pattern.md` Rule 3).
Demo: 6 tabs at canonical depth — Live wires all soma + eidos props,
all 3 ControlVariant chips, 5 size chips, 8 ColorRole chips, single +
multi mode toggle, RTL/horizontal toggle. Sidebar entry added under
Forms (between Combobox and Calendar).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
.claude
|
sium: v2.0 → v2.2 — Issue idlangref, SiumProvider, progressive forms, plurals
|
6 months ago |
|
.idea
|
soma: tier 1/2 components, Field/NumberField integration, codex_audit fixes
|
6 months ago |
|
.kilo/plans
|
soma: 12 components, architecture docs, naming fixes, form tier complete
|
6 months ago |
|
.vscode
|
Initial commit: SvelteKit application with modular libraries
|
7 months ago |
|
routes/web
|
docs: consolidate kind contract + composition norms (sweep)
|
5 months ago |
|
scripts
|
feat(eidos foundation): vertebrate typography via named-style aliases + R-2.7
|
5 months ago |
|
src
|
feat(eidos): port Listbox (embedded selection list)
|
5 months ago |
|
static
|
Expand air component system and translator integration
|
6 months ago |
|
web/routes
|
feat(eidos): port Listbox (embedded selection list)
|
5 months ago |
|
.gitignore
|
uix: date-picker + date-range-picker components + component audit infra
|
5 months ago |
|
.npmrc
|
Initial commit: SvelteKit application with modular libraries
|
7 months ago |
|
.prettierignore
|
Generate Eidos base CSS artifact
|
5 months ago |
|
.prettierrc
|
Refactor active uix architecture
|
5 months ago |
|
AGENTS.md
|
docs: COMPONENT_AUDIT_GUIDE.md — inviolable pre-flight for component work
|
5 months ago |
|
CLAUDE.md
|
Continue Eidos component migration
|
5 months ago |
|
DATA_ATTRS.md
|
soma: tier 1/2 components, Field/NumberField integration, codex_audit fixes
|
6 months ago |
|
continue.md
|
docs(CONTINUE): refresh for next session — #118 + #120 + #127 closed
|
5 months ago |
|
package-lock.json
|
soma: tier 1/2 components, Field/NumberField integration, codex_audit fixes
|
6 months ago |
|
package.json
|
uix: rename morfo.translations → morfo.texts (idlangref discipline)
|
5 months ago |
|
svelte.config.js
|
Add ActiveClipboard service for Soma clipboard
|
5 months ago |
|
tsconfig.json
|
Initial commit: SvelteKit application with modular libraries
|
7 months ago |
|
tsconfig.tsbuildinfo
|
soma: refactor providers to follow terra patterns, fix translations, add table/number-field
|
6 months ago |
|
vite.config.ts
|
Add ActiveClipboard service for Soma clipboard
|
5 months ago |