svelte-kit-vice/audit/components/toggle-group.md

# Audit: toggle-group
audit-version: 1
audited-at: 2026-06-26
scope: 
method: adversarially-verified workflow; HIGH lead-verified. B6 ground-truth: checkbox/toggle/switch commit-toggle = sequence post (lag-fixed); radio-group/tabs/accordion/stepper set state at call-site (pre OK); toggle-group + checkbox-group carry the A31 .includes pattern (SYS-7); slider has no gesture-layer A6 leak.
provider: G:\dev\svelte\vicen\src\uix\soma\components\toggle-group\toggle-group-provider.svelte.ts
sequence-audit: Toggle-group is NOT a commit-style toggle-in-handler control like Checkbox/Toggle. It is a ROVING SELECTION GROUP (like RadioGroup/Tabs) where state is set at the call-site (toggleItem called from handler, toggleItem sets state immediately). Morfo correctly declares sequence='post'. The 'post' seque

## Summary
Counts (post-verification): CRITICAL 0 · HIGH 0 · MEDIUM 1 · LOW 0.

## Findings
### MEDIUM: A31: per-item `$derived` calling a provider method reading global state (.includes) = O(N² — toggle-group-001   <!-- id: toggle-group-001 -->
- dimension: A31: per-item O(N²) derived
- rule: A31: per-item `$derived` calling a provider method reading global state (.includes) = O(N²) (SYS-7 — radio-group/toggle-group items are candidates).
- location: toggle-group-provider.svelte.ts:154–170 (isRovingTarget derived)
- evidence: Line 154–170: `readonly isRovingTarget = $derived.by(() => { const items = this.provider.getItems(); ... const firstPressed = items.find((item) => { const value = item.getAttribute('data-value'); return value ? this.provider.isItemPressed(value) : false; }); ... })`. Each item's isRovingTarget performs a linear find() over all items to locate the first pressed item. With N items, this is called N times, yielding O(N²) total calls to isItemPressed. The .find() loop on line 162–165 scans the entire items array per item instance.
- impact: On groups with many items (20+), roving tabindex computation becomes a performance bottleneck. The search is linear but repeated N times instead of cached at provider level. For a 50-item group, ~2500 iterations; for 100 items, ~10,000.
- proposed-fix: Cache the roving-target calculation at the provider level (memoized derived or a dedicated provider method returning the pressed/first-item in a single pass). Each item then simply checks `provider.rovingTargetValue === this.opts.value.current` (O(1) per item).
- verify: [confirmed] CONFIRMED A31/SYS-7. toggle-group-provider.svelte.ts:154-170 `isRovingTarget = $derived.by(() => { const items = this.provider.getItems(); ... const firstPressed = items.find((item) => { const value = item.getAttribute('data-value'); return value ? this.provider.isItemPressed(value) : false }) ... })`. Each item runs getItems() (full querySelectorAll at :97-98) AND a .find() over all items, each calling isItemPressed -> opts.value.current.includes(value) (:64-66). That is O(N) per item across N items = O(N^2), and the .find walk creates a reactive read of opts.value per item. DIVERGENCE evidence: the doctrinal sibling radio-group solves exactly this — radio-group-provider.svelte.ts:223-226 `isRovingTarget` returns O(1) `if (this.isChecked) return true` then defers to isFallbackTabStop, whose DOM walk at :154-158 is wrapped in `untrack(() => this.getItems()[0] === el)` with a comment naming '(A14 + A31)' and the A35 cascade. toggle-group has neither the O(1) pressed short-circuit nor untrack. Severity MEDIUM is correct (perf/reactivity debt, not a correctness/a11y break).
- fix-status: open

## No-findings dimensions
A: Contract (morfo 'as const satisfies Morfo') - CLEAN (line 101). Parts registered via runtime.part('provider', 'item') exist in morfo and vice versa (all 2-of-3 rules met). data-{c}/-{part} naming correct. Structural identity confirmed: toggle-group items declare data-toggle in morfo (line 77), reusing Toggle recipe. No aria/data mismatch. No scope-drift — morfo declares scope: ['soma', 'sema', 'eidos'] (line 10). No inert events — commit-toggle carries valid sequence: 'post' (line 34)., B: Behavior (soma) - SEQUENCE CLEAN (line 34: 'post'). State set in handler (toggleItem called from onclick at line 174, sets state at line 89). Matches post sequence — no lag risk. ROVING TABINDEX CLEAN (line 223: correctly derives tabindex=0 for first pressed item or first enabled item; all other items get -1). Only ONE item ever gets tabindex=0. RTL CLEAN (line 190: uses getDirectionalKeys(dir, orientation), no manual key mapping). No gesture/observer used (not needed). No setTimeout/setInterval/ResizeObserver. No Soma imports of Eidos (all imports clean: context, createAttrs, morfo, Soma, SomaRuntime)., C: DOM-selector - CLEAN. querySelector calls (line 97) use framework attrs only. No consumer value interpolation., D: Frontier (soma-eidos contract) - CLEAN. Soma does NOT import eidos (verified line 1–10). data-variant/color/size/attached/block are eidos VISUAL attrs on Provider (toggle-group.svelte:58–62) — per doctrine, not violations. syncAttrs:true on runtime.part (line 60) syncs only morfo-declared attrs (data-orientation, data-disabled); visual attrs pass through props without double-write or divergence., E: TSC composition - CLEAN. Per doctrine, toggle-group uses sanctioned cross-recipe composition pattern (lines 4104–4120 in base.ts: toggle-group.composition targets toggle-group-item and sets --toggle-palette-* via group data-color). Items receive data-variant/size from eidos context (toggle-group-item.svelte:27–28) so Toggle recipe rules fire on item's [data-toggle][data-variant][data-size]. No invented cross-recipe pattern., F: Tests - CLEAN. Provider test exists (toggle-group-provider.svelte.test.ts). jsdom environment, tests cover single/multiple modes, roving tabindex, keyboard navigation (roving nav with Home/End, directional keys). Interaction-heavy keyboard paths (lines 203–242) are tested., G: Redundancy - CLEAN. Roving logic is unique to this component (not duplicated). Structural identity is the canonical pattern (not redundancy). No re-implemented selection logic.

## Theming facts (E-bis)
- magic z-index: 1 (line 88, local stacking in attached mode) | 2 (line 94, local stacking for focus ring)
- magic literals: none
- undeclared parts: none
- roles clean: true · variants clean: true

## Tests (F)
- exists: true · env: jsdom (@vitest-environment jsdom)
- covers: Single selection toggle (toggleItem); Multiple mode selection; Deselectable=false (required selection); Roving tabindex (first pressed or first enabled item gets tabindex=0); Keyboard navigation (ArrowRight, ArrowLeft, Home, End); Focus skipping disabled items; Multiple selection toggle/untoggle
- untested: RTL keyboard navigation (ArrowRight vs ArrowLeft swap in RTL context); Vertical orientation keyboard nav (ArrowUp vs ArrowDown); Loop=false boundary behavior (edge wrapping); Disabled cascade from provider to items; Event fallbackTarget cascade selector match (runtime.trigger commit-toggle)
-												docs(audit): deep component audit — 124/124 audited + executable fix plan

Stateful deep audit of the whole UIX component system across 8 batches
(words/palabras/chronos excluded). Read-only: zero code changes.

Result: 0 CRITICAL · 18 HIGH · 129 MEDIUM · 60 LOW.

Deliverables (audit/):
- components/{kebab}.md   one machine-reparseable report per component
- 00_WORKLIST.md          resumable index (all audited)
- SUMMARY.md             verdict + systemic findings + per-batch counts
- THEMING_COHERENCE.md   E-bis coherence roll-up (roles/sizes/variants clean)
- SHARED_EXTRACTION.md   extraction opportunities (EX-3 selectedSet highest value)
- VALIDATOR_GAPS.md      12 proposed validator extensions (prevent the class)
- FIX_PLAN.md            prioritized, executable fix roadmap (Phase 1 = SYS-7)

Method: per-batch adversarial workflow (analyze -> skeptical verify), with
every HIGH/CRITICAL lead-verified against the cited source + independent greps.
The verify stage refuted false positives in both directions (eidos->soma,
CSS.escape on framework values, inert archetype metadata, content-color slots
mistaken for non-canonical roles).

Top systemic finding: SYS-7 — A31 O(N^2) per-item .includes selection across 9
components (6 HIGH), one ~3-line selectedSet/expandedSet lift each.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

											
										
										
											4 months ago
+								# Audit: toggle-group
 								audit-version: 1
 								audited-at: 2026-06-26
 								scope:
 								method: adversarially-verified workflow; HIGH lead-verified. B6 ground-truth: checkbox/toggle/switch commit-toggle = sequence post (lag-fixed); radio-group/tabs/accordion/stepper set state at call-site (pre OK); toggle-group + checkbox-group carry the A31 .includes pattern (SYS-7); slider has no gesture-layer A6 leak.
 								provider: G:\dev\svelte\vicen\src\uix\soma\components\toggle-group\toggle-group-provider.svelte.ts
 								sequence-audit: Toggle-group is NOT a commit-style toggle-in-handler control like Checkbox/Toggle. It is a ROVING SELECTION GROUP (like RadioGroup/Tabs) where state is set at the call-site (toggleItem called from handler, toggleItem sets state immediately). Morfo correctly declares sequence='post'. The 'post' seque
 								## Summary
 								Counts (post-verification): CRITICAL 0 · HIGH 0 · MEDIUM 1 · LOW 0.
 								## Findings
 								### MEDIUM: A31: per-item `$derived` calling a provider method reading global state (.includes) = O(N² — toggle-group-001   <!-- id: toggle-group-001 -->
 								- dimension: A31: per-item O(N²) derived
 								- rule: A31: per-item `$derived` calling a provider method reading global state (.includes) = O(N²) (SYS-7 — radio-group/toggle-group items are candidates).
 								- location: toggle-group-provider.svelte.ts:154–170 (isRovingTarget derived)
 								- evidence: Line 154–170: `readonly isRovingTarget = $derived.by(() => { const items = this.provider.getItems(); ... const firstPressed = items.find((item) => { const value = item.getAttribute('data-value'); return value ? this.provider.isItemPressed(value) : false; }); ... })`. Each item's isRovingTarget performs a linear find() over all items to locate the first pressed item. With N items, this is called N times, yielding O(N²) total calls to isItemPressed. The .find() loop on line 162–165 scans the entire items array per item instance.
 								- impact: On groups with many items (20+), roving tabindex computation becomes a performance bottleneck. The search is linear but repeated N times instead of cached at provider level. For a 50-item group, ~2500 iterations; for 100 items, ~10,000.
 								- proposed-fix: Cache the roving-target calculation at the provider level (memoized derived or a dedicated provider method returning the pressed/first-item in a single pass). Each item then simply checks `provider.rovingTargetValue === this.opts.value.current` (O(1) per item).
 								- verify: [confirmed] CONFIRMED A31/SYS-7. toggle-group-provider.svelte.ts:154-170 `isRovingTarget = $derived.by(() => { const items = this.provider.getItems(); ... const firstPressed = items.find((item) => { const value = item.getAttribute('data-value'); return value ? this.provider.isItemPressed(value) : false }) ... })`. Each item runs getItems() (full querySelectorAll at :97-98) AND a .find() over all items, each calling isItemPressed -> opts.value.current.includes(value) (:64-66). That is O(N) per item across N items = O(N^2), and the .find walk creates a reactive read of opts.value per item. DIVERGENCE evidence: the doctrinal sibling radio-group solves exactly this — radio-group-provider.svelte.ts:223-226 `isRovingTarget` returns O(1) `if (this.isChecked) return true` then defers to isFallbackTabStop, whose DOM walk at :154-158 is wrapped in `untrack(() => this.getItems()[0] === el)` with a comment naming '(A14 + A31)' and the A35 cascade. toggle-group has neither the O(1) pressed short-circuit nor untrack. Severity MEDIUM is correct (perf/reactivity debt, not a correctness/a11y break).
 								- fix-status: open
 								## No-findings dimensions
 								A: Contract (morfo 'as const satisfies Morfo') - CLEAN (line 101). Parts registered via runtime.part('provider', 'item') exist in morfo and vice versa (all 2-of-3 rules met). data-{c}/-{part} naming correct. Structural identity confirmed: toggle-group items declare data-toggle in morfo (line 77), reusing Toggle recipe. No aria/data mismatch. No scope-drift — morfo declares scope: ['soma', 'sema', 'eidos'] (line 10). No inert events — commit-toggle carries valid sequence: 'post' (line 34)., B: Behavior (soma) - SEQUENCE CLEAN (line 34: 'post'). State set in handler (toggleItem called from onclick at line 174, sets state at line 89). Matches post sequence — no lag risk. ROVING TABINDEX CLEAN (line 223: correctly derives tabindex=0 for first pressed item or first enabled item; all other items get -1). Only ONE item ever gets tabindex=0. RTL CLEAN (line 190: uses getDirectionalKeys(dir, orientation), no manual key mapping). No gesture/observer used (not needed). No setTimeout/setInterval/ResizeObserver. No Soma imports of Eidos (all imports clean: context, createAttrs, morfo, Soma, SomaRuntime)., C: DOM-selector - CLEAN. querySelector calls (line 97) use framework attrs only. No consumer value interpolation., D: Frontier (soma-eidos contract) - CLEAN. Soma does NOT import eidos (verified line 1–10). data-variant/color/size/attached/block are eidos VISUAL attrs on Provider (toggle-group.svelte:58–62) — per doctrine, not violations. syncAttrs:true on runtime.part (line 60) syncs only morfo-declared attrs (data-orientation, data-disabled); visual attrs pass through props without double-write or divergence., E: TSC composition - CLEAN. Per doctrine, toggle-group uses sanctioned cross-recipe composition pattern (lines 4104–4120 in base.ts: toggle-group.composition targets toggle-group-item and sets --toggle-palette-* via group data-color). Items receive data-variant/size from eidos context (toggle-group-item.svelte:27–28) so Toggle recipe rules fire on item's [data-toggle][data-variant][data-size]. No invented cross-recipe pattern., F: Tests - CLEAN. Provider test exists (toggle-group-provider.svelte.test.ts). jsdom environment, tests cover single/multiple modes, roving tabindex, keyboard navigation (roving nav with Home/End, directional keys). Interaction-heavy keyboard paths (lines 203–242) are tested., G: Redundancy - CLEAN. Roving logic is unique to this component (not duplicated). Structural identity is the canonical pattern (not redundancy). No re-implemented selection logic.
 								## Theming facts (E-bis)
 								- magic z-index: 1 (line 88, local stacking in attached mode) | 2 (line 94, local stacking for focus ring)
 								- magic literals: none
 								- undeclared parts: none
 								- roles clean: true · variants clean: true
 								## Tests (F)
 								- exists: true · env: jsdom (@vitest-environment jsdom)
 								- covers: Single selection toggle (toggleItem); Multiple mode selection; Deselectable=false (required selection); Roving tabindex (first pressed or first enabled item gets tabindex=0); Keyboard navigation (ArrowRight, ArrowLeft, Home, End); Focus skipping disabled items; Multiple selection toggle/untoggle
 								- untested: RTL keyboard navigation (ArrowRight vs ArrowLeft swap in RTL context); Vertical orientation keyboard nav (ArrowUp vs ArrowDown); Loop=false boundary behavior (edge wrapping); Disabled cascade from provider to items; Event fallbackTarget cascade selector match (runtime.trigger commit-toggle)