From 0d8de2869f320ad9c17d93bc81597aae5f50e4da Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 22 Apr 2026 03:40:56 +0200 Subject: [PATCH] soma test: split forms demo into dedicated switch/checkbox/radio-group pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The combined `/test/soma/forms` page covered three separate components (Switch, Checkbox, RadioGroup) in one route. Each deserves its own demo page — matching the convention of every other component having a dedicated `/test/soma/{kebab}` route, and letting the permutation runner actually exercise them (the runner navigates per morfo-kebab, not per merged page, so the combined demo left the 3 morfos SKIPPED). ## New demos - `/test/soma/switch` — basic + disabled variants. `data-perm-step="0"` toggles the basic switch. Axes: `dir, disabled`. - `/test/soma/checkbox` — basic + indeterminate + group variants. Steps 0-2 toggle the first checkbox + first two group items. Seeds `?perm.checked=true` / `?perm.value=a,b`. Axes: `dir`. - `/test/soma/radio-group` — active + disabled variants. Steps 0-2 select each option. Seeds `?perm.value=option-2` / `?perm.orientation`. Axes: `dir, orientation`. Each demo reuses the CSS from the original combined page (via `:global` selectors for `data-switch`, `data-checkbox`, `data-radio-group-item`). All three have `aria-label` on the Provider — the DEV-mode A4 warning added in batch 10 of audit 2026-04-21 requires it. The combined `/test/soma/forms` page is kept in place (pre-existing integration demo showing composition); future batches may decide whether to drop it or repurpose it. ## Coverage delta - Before: 63/66 demos · 131 variants · 202 steps. - After: 66/66 demos · 139 variants · 228 steps. (smoke: 68 routes) Coverage complete — every morfo now has at least one instrumented demo under the permutation runner. ## Verification - `npm run check`: 0 errors in new demo files. - `npm run smoke`: 68/68 routes (was 65). - `npm run morfo:check`: 66/66 morfos. - `npm run perm:check`: 66/66 demos · 228 steps · 139 variants. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/routes/test/soma/checkbox/+page.svelte | 184 ++++++++++++++++++ src/routes/test/soma/radio-group/+page.svelte | 146 ++++++++++++++ src/routes/test/soma/switch/+page.svelte | 117 +++++++++++ 3 files changed, 447 insertions(+) create mode 100644 src/routes/test/soma/checkbox/+page.svelte create mode 100644 src/routes/test/soma/radio-group/+page.svelte create mode 100644 src/routes/test/soma/switch/+page.svelte diff --git a/src/routes/test/soma/checkbox/+page.svelte b/src/routes/test/soma/checkbox/+page.svelte new file mode 100644 index 000000000..482907fce --- /dev/null +++ b/src/routes/test/soma/checkbox/+page.svelte @@ -0,0 +1,184 @@ + + + + Checkbox · Soma + + + +
+

Soma Checkbox

+

Checkable input with `checked` / `unchecked` / `indeterminate` states and a group variant.

+ +
+

1. Basic

+ +
+ + {#snippet children({ checked })} + {checked ? '✓' : ''} + {/snippet} + + Accept terms ({check1 ? 'checked' : 'unchecked'}) +
+ +
+ + {#snippet children({ checked })} + {checked ? '✓' : ''} + {/snippet} + + Newsletter ({check2 ? 'checked' : 'unchecked'}) +
+
+ +
+

2. Indeterminate

+ +
+ + {#snippet children({ checked, indeterminate })} + {indeterminate ? '−' : checked ? '✓' : ''} + {/snippet} + + Partial ({checkIndeterminate ? 'indeterminate' : 'resolved'}) +
+
+ +
+

3. Checkbox Group

+

selected: {JSON.stringify(groupValues)}

+ + + Notifications + {#each ['a', 'b', 'c'] as item, i} +
+ + {#snippet children({ checked })} + {checked ? '✓' : ''} + {/snippet} + + Option {item.toUpperCase()} +
+ {/each} + +
+ +
+

Data attributes

+ 
Root:  [data-checkbox] [role=checkbox] [data-state=checked|unchecked|indeterminate] [aria-checked]
+Group: [data-checkbox-group] [role=group]
+
+
+ + diff --git a/src/routes/test/soma/radio-group/+page.svelte b/src/routes/test/soma/radio-group/+page.svelte new file mode 100644 index 000000000..e48aa6774 --- /dev/null +++ b/src/routes/test/soma/radio-group/+page.svelte @@ -0,0 +1,146 @@ + + + + RadioGroup · Soma + + + +
+

Soma RadioGroup

+

Single-select group of radio items with roving tabindex and WAI-ARIA support.

+ +
+

1. Basic

+

value: {radioValue}

+ + + {#each ['option-1', 'option-2', 'option-3'] as opt, i} +
+ + {#snippet children({ checked })} + {checked ? '●' : '○'} + {/snippet} + + {opt} +
+ {/each} + +
+ +
+

2. Disabled + loop

+ + + {#each ['a', 'b', 'c'] as opt} +
+ + {#snippet children({ checked })} + {checked ? '●' : '○'} + {/snippet} + + Item {opt} +
+ {/each} + +
+ +
+

Data attributes

+ 
Root: [data-radio-group] [role=radiogroup] [data-orientation]
+Item: [data-radio-group-item] [role=radio] [data-state=checked|unchecked] [data-value]
+
+
+ + diff --git a/src/routes/test/soma/switch/+page.svelte b/src/routes/test/soma/switch/+page.svelte new file mode 100644 index 000000000..b49c51931 --- /dev/null +++ b/src/routes/test/soma/switch/+page.svelte @@ -0,0 +1,117 @@ + + + + Switch · Soma + + + +
+

Soma Switch

+

Binary on/off control with keyboard toggle and `role="switch"`.

+ +
+

1. Basic

+

checked: {checked ? 'on' : 'off'}

+ + + + +
+ +
+

2. Disabled (forced checked)

+ + + + +
+ +
+

Data attributes

+ 
Root:  [data-switch] [role=switch] [data-state=checked|unchecked] [aria-checked]
+Thumb: [data-switch-thumb] [data-state]
+
+
+ +