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.
602 lines
22 KiB
602 lines
22 KiB
<script lang="ts">
|
|
import {
|
|
Stepper,
|
|
type StepperColor,
|
|
type StepperSize,
|
|
type StepperVariant
|
|
} from '$uix/eidos/components/stepper';
|
|
import { SvgCheck } from '$uix/eidos/components/svg';
|
|
import { compileMorfo } from '$uix/morfo';
|
|
import { stepperMorfo } from '@/uix/morfo/components/stepper';
|
|
import type { Intent } from '$uix/intent';
|
|
import { getActiveUix } from '$active-uix';
|
|
import { page } from '$app/state';
|
|
|
|
type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
|
|
type Orientation = 'horizontal' | 'vertical';
|
|
type Direction = 'ltr' | 'rtl';
|
|
|
|
const uix = getActiveUix();
|
|
const params = page.url.searchParams;
|
|
|
|
const steps = [
|
|
{ label: 'Account', body: 'Create the workspace owner and login details.' },
|
|
{ label: 'Project', body: 'Pick the project profile and initial permissions.' },
|
|
{ label: 'Review', body: 'Confirm the setup before provisioning resources.' }
|
|
] as const;
|
|
|
|
let tab = $state<Tab>('live');
|
|
let value = $state(0);
|
|
let orientation = $state<Orientation>(
|
|
params.get('perm.orientation') === 'vertical' ? 'vertical' : 'horizontal'
|
|
);
|
|
let dir = $state<Direction>(params.get('perm.dir') === 'rtl' ? 'rtl' : 'ltr');
|
|
let linear = $state(false);
|
|
let size = $state<StepperSize>('md');
|
|
let variant = $state<StepperVariant>('soft');
|
|
let color = $state<StepperColor>('primary');
|
|
|
|
type TraceEntry = { event: string; family: string; intent?: string; at: number };
|
|
let trace = $state<TraceEntry[]>([]);
|
|
let stageRef = $state<HTMLElement | null>(null);
|
|
|
|
$effect(() => {
|
|
const el = stageRef;
|
|
if (!el) return;
|
|
const obs = new MutationObserver((mutations) => {
|
|
for (const m of mutations) {
|
|
if (m.attributeName !== 'data-event') continue;
|
|
const target = m.target as Element;
|
|
const ev = target.getAttribute('data-event');
|
|
if (!ev) continue;
|
|
trace = [
|
|
{
|
|
event: ev,
|
|
family: target.getAttribute('data-event-family') ?? '-',
|
|
intent: target.getAttribute('data-event-intent') ?? undefined,
|
|
at: Date.now()
|
|
},
|
|
...trace
|
|
].slice(0, 6);
|
|
}
|
|
});
|
|
obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
|
|
return () => obs.disconnect();
|
|
});
|
|
|
|
const compiled = compileMorfo(stepperMorfo);
|
|
const partsList = $derived([...compiled.parts.byKebab.values()]);
|
|
const events = $derived([...compiled.actions.byName.values()]);
|
|
const currentLabel = $derived(value >= steps.length ? 'Complete' : steps[value]?.label ?? '-');
|
|
|
|
function fmtTime(at: number): string {
|
|
const d = new Date(at);
|
|
return `${String(d.getSeconds()).padStart(2, '0')}.${String(d.getMilliseconds()).padStart(3, '0')}`;
|
|
}
|
|
|
|
function intentLiteral(value: unknown): Intent | undefined {
|
|
return typeof value === 'string' ? (value as Intent) : undefined;
|
|
}
|
|
|
|
const somaSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import * as Stepper from '$soma/components/stepper';",
|
|
'',
|
|
' let value = $state(0);',
|
|
' const steps = [',
|
|
" { label: 'Account', body: 'Create the workspace owner.' },",
|
|
" { label: 'Project', body: 'Pick the project profile.' },",
|
|
" { label: 'Review', body: 'Confirm the setup.' }",
|
|
' ];',
|
|
'</' + 'script>',
|
|
'',
|
|
'<Stepper.Provider bind:value orientation="horizontal" linear={false}>',
|
|
' <Stepper.List>',
|
|
' {#each steps as step, index}',
|
|
' <Stepper.Item {index}>',
|
|
' {#snippet children({ state })}',
|
|
' <Stepper.Trigger>',
|
|
" <Stepper.Indicator>{state === 'complete' ? 'done' : index + 1}</Stepper.Indicator>",
|
|
' <span>{step.label}</span>',
|
|
' </Stepper.Trigger>',
|
|
' {#if index < steps.length - 1}',
|
|
' <Stepper.Separator />',
|
|
' {/if}',
|
|
' {/snippet}',
|
|
' </Stepper.Item>',
|
|
' {/each}',
|
|
' </Stepper.List>',
|
|
'',
|
|
' {#each steps as step, index}',
|
|
' <Stepper.Content {index}>',
|
|
' <strong>{step.label}</strong>',
|
|
' <p>{step.body}</p>',
|
|
' </Stepper.Content>',
|
|
' {/each}',
|
|
'',
|
|
' <Stepper.CompletedContent>Completed</Stepper.CompletedContent>',
|
|
'',
|
|
' <Stepper.PrevTrigger>Back</Stepper.PrevTrigger>',
|
|
" <Stepper.NextTrigger>{value >= steps.length - 1 ? 'Complete' : 'Next'}</Stepper.NextTrigger>",
|
|
'</Stepper.Provider>'
|
|
].join('\n')
|
|
);
|
|
|
|
const eidosSnippet = $derived(
|
|
[
|
|
"<script lang='ts'>",
|
|
" import { Stepper } from '$uix/eidos/components/stepper';",
|
|
" import { SvgCheck } from '$uix/eidos/components/svg';",
|
|
'',
|
|
' let value = $state(0);',
|
|
' const steps = [',
|
|
" { label: 'Account', body: 'Create the workspace owner.' },",
|
|
" { label: 'Project', body: 'Pick the project profile.' },",
|
|
" { label: 'Review', body: 'Confirm the setup.' }",
|
|
' ];',
|
|
'</' + 'script>',
|
|
'',
|
|
'<Stepper',
|
|
' bind:value',
|
|
` orientation="${orientation}"`,
|
|
dir !== 'ltr' && ` dir="${dir}"`,
|
|
linear && ' linear',
|
|
size !== 'md' && ` size="${size}"`,
|
|
variant !== 'soft' && ` variant="${variant}"`,
|
|
color !== 'primary' && ` color="${color}"`,
|
|
'>',
|
|
' <Stepper.List>',
|
|
' {#each steps as step, index}',
|
|
' <Stepper.Item {index}>',
|
|
' {#snippet children({ state })}',
|
|
' <Stepper.Trigger>',
|
|
" <Stepper.Indicator>",
|
|
" {#if state === 'complete'}",
|
|
" <SvgCheck />",
|
|
" {:else}",
|
|
" {index + 1}",
|
|
" {/if}",
|
|
" </Stepper.Indicator>",
|
|
' <span>{step.label}</span>',
|
|
' </Stepper.Trigger>',
|
|
' {#if index < steps.length - 1}',
|
|
' <Stepper.Separator />',
|
|
' {/if}',
|
|
' {/snippet}',
|
|
' </Stepper.Item>',
|
|
' {/each}',
|
|
' </Stepper.List>',
|
|
'',
|
|
' {#each steps as step, index}',
|
|
' <Stepper.Content {index}>',
|
|
' <strong>{step.label}</strong>',
|
|
' <p>{step.body}</p>',
|
|
' </Stepper.Content>',
|
|
' {/each}',
|
|
'',
|
|
' <Stepper.CompletedContent>Completed</Stepper.CompletedContent>',
|
|
'',
|
|
' <Stepper.PrevTrigger>Back</Stepper.PrevTrigger>',
|
|
" <Stepper.NextTrigger>{value >= steps.length - 1 ? 'Complete' : 'Next'}</Stepper.NextTrigger>",
|
|
'</Stepper>'
|
|
]
|
|
.filter(Boolean)
|
|
.join('\n')
|
|
);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta name="perm-axes" content="dir,orientation" />
|
|
</svelte:head>
|
|
|
|
<div data-uix-canvas-inner>
|
|
<header>
|
|
<div data-uix-eyebrow>Forms · Stepper</div>
|
|
<h1 data-uix-page-title>Stepper</h1>
|
|
<p data-uix-page-lede>
|
|
Wizard primitive for multi-step flows. Soma owns tablist semantics, keyboard navigation,
|
|
linear step guards and completion; Eidos adds size, variant and color treatment.
|
|
</p>
|
|
<div data-uix-page-meta>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>parts</span>{compiled.parts.order.length}</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>steps</span>{steps.length}</span>
|
|
<span data-uix-meta-pill><span data-uix-meta-key>state</span>{currentLabel}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div data-uix-stage>
|
|
<div
|
|
data-uix-stage-area
|
|
bind:this={stageRef}
|
|
style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch; min-inline-size: min(100%, 44rem);"
|
|
>
|
|
<Stepper bind:value {orientation} {dir} {linear} {size} {variant} {color}>
|
|
<Stepper.List ariaLabel="Setup steps">
|
|
{#each steps as step, index}
|
|
<Stepper.Item {index}>
|
|
{#snippet children({ state })}
|
|
<Stepper.Trigger>
|
|
<Stepper.Indicator>
|
|
{#if state === 'complete'}
|
|
<SvgCheck />
|
|
{:else}
|
|
{String(index + 1)}
|
|
{/if}
|
|
</Stepper.Indicator>
|
|
<span>{step.label}</span>
|
|
</Stepper.Trigger>
|
|
{#if index < steps.length - 1}
|
|
<Stepper.Separator />
|
|
{/if}
|
|
{/snippet}
|
|
</Stepper.Item>
|
|
{/each}
|
|
</Stepper.List>
|
|
|
|
{#each steps as step, index}
|
|
<Stepper.Content {index}>
|
|
<strong>{step.label}</strong>
|
|
<p style="margin: 0.35rem 0 0;">{step.body}</p>
|
|
</Stepper.Content>
|
|
{/each}
|
|
|
|
<Stepper.CompletedContent>
|
|
<strong>Completed</strong>
|
|
<p style="margin: 0.35rem 0 0;">All steps are complete and the final commit event fired.</p>
|
|
</Stepper.CompletedContent>
|
|
|
|
<div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
|
|
<Stepper.PrevTrigger>Back</Stepper.PrevTrigger>
|
|
<Stepper.NextTrigger
|
|
data-perm-step={value < steps.length ? String(value) : undefined}
|
|
data-perm-label={value < steps.length ? `advance from step ${value + 1}` : undefined}
|
|
>
|
|
{value >= steps.length - 1 ? 'Complete' : 'Next'}
|
|
</Stepper.NextTrigger>
|
|
</div>
|
|
</Stepper>
|
|
</div>
|
|
<div data-uix-stage-trace>
|
|
<span data-uix-stage-trace-key>trace</span>
|
|
{#if trace.length === 0}
|
|
<span>advance the stepper to see shift-step and commit-complete</span>
|
|
{:else}
|
|
{#each trace.slice(0, 3) as entry}
|
|
<span>
|
|
<span data-uix-stage-trace-event>{entry.event}</span>
|
|
· {entry.family}{entry.intent ? ' · ' + entry.intent : ''}
|
|
</span>
|
|
<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
|
|
{/each}
|
|
{/if}
|
|
<span style="margin-inline-start: auto;">
|
|
<span data-uix-stage-trace-key>step</span>
|
|
{value}/{steps.length}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-uix-tabs role="tablist">
|
|
<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
|
|
<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>
|
|
API <span data-uix-tab-count>7</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
|
|
<span data-uix-layer-badge="morfo">morfo</span>
|
|
<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
|
|
<span data-uix-layer-badge="sema">sema</span>
|
|
<span data-uix-tab-count>{events.length}</span>
|
|
</button>
|
|
<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
|
|
<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
|
|
</div>
|
|
|
|
{#if tab === 'live'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Controls</h2>
|
|
<p data-uix-section-desc>
|
|
<span data-uix-layer-badge="soma">soma</span> owns the wizard model.
|
|
<span data-uix-layer-badge="eidos">eidos</span> owns visual treatment.
|
|
</p>
|
|
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="soma">soma</span> props · step model
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>value <span data-uix-control-hint>{value}</span></span>
|
|
<input type="range" bind:value min="0" max={steps.length} />
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>orientation</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['horizontal', 'vertical'] as o}
|
|
<button
|
|
data-uix-chip
|
|
data-active={orientation === o}
|
|
onclick={() => (orientation = o as Orientation)}
|
|
>
|
|
{o}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>dir</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['ltr', 'rtl'] as d}
|
|
<button data-uix-chip data-active={dir === d} onclick={() => (dir = d as Direction)}>
|
|
{d}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>linear</span>
|
|
<span data-uix-switch>
|
|
<input type="checkbox" bind:checked={linear} />
|
|
<span data-uix-switch-label>{linear ? 'on' : 'off'}</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span> props · visual treatment
|
|
</div>
|
|
<div data-uix-controls>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>size</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['sm', 'md', 'lg'] as s}
|
|
<button data-uix-chip data-active={size === s} onclick={() => (size = s as StepperSize)}>
|
|
{s}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>variant</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['solid', 'soft', 'outline'] as v}
|
|
<button
|
|
data-uix-chip
|
|
data-active={variant === v}
|
|
onclick={() => (variant = v as StepperVariant)}
|
|
>
|
|
{v}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
<label data-uix-control>
|
|
<span data-uix-control-label>color</span>
|
|
<span data-uix-chips role="radiogroup">
|
|
{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill'] as c}
|
|
<button data-uix-chip data-active={color === c} onclick={() => (color = c as StepperColor)}>
|
|
{c}
|
|
</button>
|
|
{/each}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div data-uix-code>
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="soma">soma</span>
|
|
<span>headless · step model</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{somaSnippet}</code></pre>
|
|
</div>
|
|
<div data-uix-code style="margin-top: var(--uix-space-3);">
|
|
<div data-uix-code-head>
|
|
<span data-uix-layer-badge="eidos">eidos</span>
|
|
<span>visual · stepper recipe</span>
|
|
<span data-uix-code-lang>svelte</span>
|
|
</div>
|
|
<pre><code>{eidosSnippet}</code></pre>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'api'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>API + reference comparison</h2>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead>
|
|
<tr>
|
|
<th>Feature</th><th>Air/Terra</th><th>Radix</th><th>Bits</th><th>Ark Steps</th><th>UIX</th><th>Decision</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td class="name">List/item/trigger/indicator</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td><td>Covered with Soma parts.</td></tr>
|
|
<tr><td class="name">Content + completed content</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td><td>Covered.</td></tr>
|
|
<tr><td class="name">Prev/next triggers</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td><td>Covered.</td></tr>
|
|
<tr><td class="name">Linear navigation</td><td>⚠️</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td><td>Covered as `linear`.</td></tr>
|
|
<tr><td class="name">Invalid/skippable guards</td><td>❌</td><td>❌</td><td>❌</td><td>✅</td><td>❌</td><td>Deferred to Soma; current `linear` is simpler.</td></tr>
|
|
<tr><td class="name">Horizontal/vertical</td><td>✅</td><td>❌</td><td>❌</td><td>✅</td><td>✅</td><td>Covered.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">value</td><td>soma</td><td class="default">0</td><td>Bindable 0-based step index.</td></tr>
|
|
<tr><td class="name">orientation</td><td>soma</td><td class="default">horizontal</td><td>horizontal | vertical.</td></tr>
|
|
<tr><td class="name">dir</td><td>soma</td><td class="default">prefs</td><td>Keyboard direction for horizontal navigation.</td></tr>
|
|
<tr><td class="name">linear</td><td>soma</td><td class="default">false</td><td>Restricts direct trigger selection.</td></tr>
|
|
<tr><td class="name">size</td><td>eidos</td><td class="default">md</td><td>sm | md | lg.</td></tr>
|
|
<tr><td class="name">variant</td><td>eidos</td><td class="default">soft</td><td>solid | soft | outline.</td></tr>
|
|
<tr><td class="name">color</td><td>eidos</td><td class="default">primary</td><td>primary | secondary | neutral | affirm | fulfill.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'morfo'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Morfo contract</h2>
|
|
<p data-uix-section-desc>
|
|
Stepper maps a wizard to tablist/tab/tabpanel semantics. Morfo declares step state,
|
|
orientation, navigation triggers and completion content.
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>States</th></tr></thead>
|
|
<tbody>
|
|
{#each partsList as part}
|
|
<tr>
|
|
<td class="name">{part.kebab}</td>
|
|
<td><code data-uix-part-marker>[{part.marker}]</code></td>
|
|
<td class="type"><{part.defaultElement}></td>
|
|
<td class="type">{part.role ?? '-'}</td>
|
|
<td class="default">{part.states.length ? part.states.join(' | ') : '-'}</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div data-uix-subsection-head>Keyboard</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Key</th><th>Action</th></tr></thead>
|
|
<tbody>
|
|
{#each stepperMorfo.parts[3].keyboard ?? [] as key}
|
|
<tr><td class="name">{key.key}</td><td>{key.action}</td></tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{#each stepperMorfo.parts as rawPart}
|
|
{@const partAny = rawPart as unknown as {
|
|
kebab: string;
|
|
aria?: ReadonlyArray<{ attr: string; value: { kind: string }; severity?: string }>;
|
|
}}
|
|
{@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []}
|
|
{@const ariaAttrs = partAny.aria ?? []}
|
|
{#if dataAttrs.length || ariaAttrs.length}
|
|
<div data-uix-subsection-head>{partAny.kebab}</div>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Attribute</th><th>Values</th><th>Source</th></tr></thead>
|
|
<tbody>
|
|
{#each dataAttrs as attr}
|
|
<tr>
|
|
<td class="name">{attr.attr}</td>
|
|
<td class="type">{attr.values ? attr.values.join(' | ') : '-'}</td>
|
|
<td class="default">
|
|
{'value' in attr && attr.value
|
|
? (attr as { value: { kind: string } }).value.kind
|
|
: '-'}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
{#each ariaAttrs as a}
|
|
<tr><td class="name">{a.attr}</td><td class="type">-</td><td>{a.value.kind}</td></tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'sema'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>
|
|
<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
|
|
</h2>
|
|
<p data-uix-section-desc>
|
|
Stepper emits <code>shift-step</code> for real step changes and
|
|
<code>commit-complete</code> when the flow reaches the completed state. Focus movement is
|
|
silent.
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Intent</th><th>Target</th><th>Play</th></tr></thead>
|
|
<tbody>
|
|
{#each events as action}
|
|
<tr>
|
|
<td class="name">{action.name}</td>
|
|
<td class="type">{action.semantic.family}</td>
|
|
<td>{action.semantic.verb ?? '-'}</td>
|
|
<td>{action.semantic.intent ?? '-'}</td>
|
|
<td>{action.target}</td>
|
|
<td>
|
|
<button
|
|
data-uix-play
|
|
onclick={() => {
|
|
const target = stageRef?.querySelector('[data-stepper]') as HTMLElement | null;
|
|
if (!target) return;
|
|
void uix.events?.emit({
|
|
name: action.name,
|
|
family: action.semantic.family,
|
|
intent: intentLiteral(action.semantic.intent),
|
|
target
|
|
});
|
|
}}
|
|
>
|
|
Play
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'recipe'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Eidos recipe</h2>
|
|
<p data-uix-section-desc>
|
|
Selectors live in <code>src/uix/eidos/components/stepper/stepper.css</code>. The recipe
|
|
consumes Soma state/orientation and Eidos visual attrs.
|
|
</p>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Selector</th><th>Source</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">[data-stepper]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
|
|
<tr><td class="name">[data-stepper-item][data-state]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
|
|
<tr><td class="name">[data-stepper-trigger][data-state]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
|
|
<tr><td class="name">[data-stepper-separator][data-complete]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
|
|
<tr><td class="name">[data-stepper][data-size]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td></tr>
|
|
<tr><td class="name">[data-stepper][data-variant]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td></tr>
|
|
<tr><td class="name">[data-stepper][data-color]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
|
|
{#if tab === 'a11y'}
|
|
<section data-uix-section>
|
|
<h2 data-uix-section-title>Accessibility</h2>
|
|
<div data-uix-table-wrap>
|
|
<table data-uix-table>
|
|
<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="name">List</td><td><code>Stepper.List</code> exposes <code>role="tablist"</code>.</td></tr>
|
|
<tr><td class="name">Trigger</td><td>Each trigger is a <code>role="tab"</code> with current step state.</td></tr>
|
|
<tr><td class="name">Content</td><td>Visible step content is a <code>role="tabpanel"</code>.</td></tr>
|
|
<tr><td class="name">Keyboard</td><td>Arrow keys move focus; Home/End jump to first/last trigger.</td></tr>
|
|
<tr><td class="name">Linear</td><td>When enabled, future step triggers expose <code>aria-disabled</code>.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
{/if}
|
|
</div>
|