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]
+
+
+ +