svelte-kit-vice/web/routes/uix/components/editable/+page.svelte

<script lang="ts">
	import {
		Editable,
		type EditableColor,
		type EditableSize,
		type EditableVariant
	} from '$uix/eidos/components/editable';
	import { compileMorfo } from '$uix/morfo';
	import { editableMorfo } from '@/uix/morfo/components/editable';
	import type { Intent } from '$uix/intent';
	import { getActiveUix } from '$active-uix';
	import { page } from '$app/state';
	import { colorValue, PALETTE_SCALES } from '../../lib/harness.svelte';
	import TokensPanel from '../../lib/TokensPanel.svelte';
	import TokensTabCount from '../../lib/TokensTabCount.svelte';

	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'tokens' | 'a11y';
	type ActivationMode = 'focus' | 'click' | 'dblclick' | 'none';
	type SubmitMode = 'enter' | 'blur' | 'both' | 'none';

	const uix = getActiveUix();
	const params = page.url.searchParams;

	let tab = $state<Tab>('live');
	let value = $state('Project Alpha');
	let editing = $state(false);
	let placeholder = $state('Untitled project');
	let activationMode = $state<ActivationMode>('click');
	let submitMode = $state<SubmitMode>('both');
	let selectOnFocus = $state(true);
	let autoResize = $state(true);
	let maxLength = $state(48);
	let disabled = $state(params.get('perm.disabled') === 'true');
	let readonly = $state(params.get('perm.readonly') === 'true');
	let invalid = $state(false);
	let required = $state(false);
	let size = $state<EditableSize>('md');
	let variant = $state<EditableVariant>('surface');
	let color = $state<EditableColor>('primary');
	let customColor = $state('#8e4ec6');
	// `color` accepts the full ecosystem system: roles + intents + 33 scales
	// (chips) + any raw CSS value (the colour input) — THM-2 / THEMING §25.
	const colors: string[] = [
		'primary',
		'secondary',
		'neutral',
		'affirm',
		'fulfill',
		'risk',
		'threat',
		'loss',
		...PALETTE_SCALES
	];
	let lastCommit = $state('');

	// Form integration demo
	let formName = $state('project_name');
	let formValue = $state('Form initial');
	let lastSubmitted = $state<Record<string, string> | null>(null);

	function onFormSubmit(e: SubmitEvent) {
		e.preventDefault();
		const form = e.currentTarget as HTMLFormElement;
		const data = new FormData(form);
		const obj: Record<string, string> = {};
		for (const [k, v] of data.entries()) {
			obj[k] = typeof v === 'string' ? v : '[file]';
		}
		lastSubmitted = obj;
	}

	// uncontrolled (value one-way, no bind:) demo
	let uncontrolledCommit = $state('');

	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(editableMorfo);
	const partsList = $derived([...compiled.parts.byKebab.values()]);
	const events = $derived([...compiled.actions.byName.values()]);
	const inputKeyboard = $derived(
		(
			editableMorfo.parts.find((part) => part.kebab === 'input') as
				| { keyboard?: ReadonlyArray<{ key: string; action: string }> }
				| undefined
		)?.keyboard ?? []
	);

	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 Editable from '$soma/components/editable';",
			"  let value = $state('Project Alpha');",
			'</' + 'script>',
			'',
			'<Editable.Provider bind:value activationMode="click" submitMode="both">',
			'  <Editable.Area>',
			'    <Editable.Preview />',
			'    <Editable.Input />',
			'  </Editable.Area>',
			'  <Editable.Control>',
			'    <Editable.EditTrigger>Edit</Editable.EditTrigger>',
			'    <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>',
			'    <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>',
			'  </Editable.Control>',
			'</Editable.Provider>'
		].join('\n')
	);

	const eidosSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import { Editable } from '$uix/eidos/components/editable';",
			"  let value = $state('Project Alpha');",
			'</' + 'script>',
			'',
			'<Editable',
			'  bind:value',
			`  activationMode="${activationMode}"`,
			`  submitMode="${submitMode}"`,
			selectOnFocus && '  selectOnFocus',
			autoResize && '  autoResize',
			maxLength && `  maxLength={${maxLength}}`,
			size !== 'md' && `  size="${size}"`,
			variant !== 'surface' && `  variant="${variant}"`,
			color !== 'primary' && `  color="${color}"`,
			'>',
			'  <Editable.Area>',
			'    <Editable.Preview />',
			'    <Editable.Input />',
			'  </Editable.Area>',
			'  <Editable.Control>',
			'    <Editable.EditTrigger>Edit</Editable.EditTrigger>',
			'    <Editable.SubmitTrigger>Save</Editable.SubmitTrigger>',
			'    <Editable.CancelTrigger>Cancel</Editable.CancelTrigger>',
			'  </Editable.Control>',
			'</Editable>'
		]
			.filter(Boolean)
			.join('\n')
	);
</script>

<svelte:head>
	<meta name="perm-axes" content="disabled,readonly,invalid,required" />
</svelte:head>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Forms · Editable</div>
		<h1 data-uix-page-title>Editable</h1>
		<p data-uix-page-lede>
			Inline edit primitive. Soma owns draft state, activation, keyboard submit/cancel and
			auto-resize; 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>mode</span>{editing ? 'editing' : 'preview'}</span>
			<span data-uix-meta-pill><span data-uix-meta-key>value</span>{value}</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: flex-start;"
		>
			<Editable
				bind:value
				bind:editing
				{placeholder}
				{activationMode}
				{submitMode}
				{selectOnFocus}
				{autoResize}
				{maxLength}
				{disabled}
				{readonly}
				{invalid}
				{required}
				{size}
				{variant}
				{color}
				onValueCommit={(next) => (lastCommit = next)}
			>
				<Editable.Area>
					<Editable.Preview />
					<Editable.Input
						data-perm-step={editing && !disabled && !readonly ? '1' : undefined}
						data-perm-mode='type=" Orion"'
						data-perm-label={editing && !disabled && !readonly ? 'type draft value' : undefined}
					/>
				</Editable.Area>
				<Editable.Control>
					<Editable.EditTrigger
						data-perm-step={!editing && !disabled && !readonly ? '0' : undefined}
						data-perm-label={!editing && !disabled && !readonly ? 'enter edit mode' : undefined}
					>
						Edit
					</Editable.EditTrigger>
					<Editable.SubmitTrigger
						data-perm-step={editing && !disabled && !readonly ? '2' : undefined}
						data-perm-label={editing && !disabled && !readonly ? 'save draft' : undefined}
					>
						Save
					</Editable.SubmitTrigger>
					<Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
				</Editable.Control>
			</Editable>
		</div>
		<div data-uix-stage-trace>
			<span data-uix-stage-trace-key>trace</span>
			{#if trace.length === 0}
				<span>edit and save to see shift-enter-mode and commit-save</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>commit</span>
				{lastCommit || '-'}
			</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>12</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 === 'tokens'} onclick={() => (tab = 'tokens')}>
			Tokens <TokensTabCount component="editable" />
		</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 draft/edit lifecycle.
				<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 · edit model
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>value</span>
					<input bind:value />
				</label>
				<label data-uix-control>
					<span data-uix-control-label>placeholder</span>
					<input bind:value={placeholder} />
				</label>
				<label data-uix-control>
					<span data-uix-control-label>activationMode</span>
					<span data-uix-chips role="radiogroup">
						{#each ['focus', 'click', 'dblclick', 'none'] as mode}
							<button
								data-uix-chip
								data-active={activationMode === mode}
								onclick={() => (activationMode = mode as ActivationMode)}
							>
								{mode}
							</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>submitMode</span>
					<span data-uix-chips role="radiogroup">
						{#each ['enter', 'blur', 'both', 'none'] as mode}
							<button
								data-uix-chip
								data-active={submitMode === mode}
								onclick={() => (submitMode = mode as SubmitMode)}
							>
								{mode}
							</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>maxLength</span>
					<input type="number" min="1" max="96" bind:value={maxLength} />
				</label>
				{#each ['selectOnFocus', 'autoResize', 'disabled', 'readonly', 'invalid', 'required'] as key}
					<label data-uix-control>
						<span data-uix-control-label>{key}</span>
						<span data-uix-switch>
							{#if key === 'selectOnFocus'}
								<input type="checkbox" bind:checked={selectOnFocus} />
								<span data-uix-switch-label>{selectOnFocus ? 'on' : 'off'}</span>
							{:else if key === 'autoResize'}
								<input type="checkbox" bind:checked={autoResize} />
								<span data-uix-switch-label>{autoResize ? 'on' : 'off'}</span>
							{:else if key === 'disabled'}
								<input type="checkbox" bind:checked={disabled} />
								<span data-uix-switch-label>{disabled ? 'on' : 'off'}</span>
							{:else if key === 'readonly'}
								<input type="checkbox" bind:checked={readonly} />
								<span data-uix-switch-label>{readonly ? 'on' : 'off'}</span>
							{:else if key === 'invalid'}
								<input type="checkbox" bind:checked={invalid} />
								<span data-uix-switch-label>{invalid ? 'on' : 'off'}</span>
							{:else}
								<input type="checkbox" bind:checked={required} />
								<span data-uix-switch-label>{required ? 'on' : 'off'}</span>
							{/if}
						</span>
					</label>
				{/each}
			</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 ['xs', 'sm', 'md', 'lg', 'xl'] as s}
							<button data-uix-chip data-active={size === s} onclick={() => (size = s as EditableSize)}>
								{s}
							</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>variant</span>
					<span data-uix-chips role="radiogroup">
						{#each ['surface', 'outline', 'ghost'] as v}
							<button
								data-uix-chip
								data-active={variant === v}
								onclick={() => (variant = v as EditableVariant)}
							>
								{v}
							</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>color · role · intent · {PALETTE_SCALES.length} scales · custom</span>
					<span data-uix-chips role="radiogroup">
						{#each colors as c (c)}
							<button data-uix-chip data-active={color === c} onclick={() => (color = c)}>
								{c}
							</button>
						{/each}
						<input
							type="color"
							use:colorValue={customColor}
							oninput={(e) => {
								customColor = e.currentTarget.value;
								color = e.currentTarget.value;
							}}
							data-active={color === customColor}
							aria-label="custom colour value"
							style="inline-size: 2rem; block-size: 1.5rem; padding: 0; border: none; background: none; cursor: pointer;"
						/>
					</span>
				</label>
			</div>

			<div data-uix-subsection-head>Form integration</div>
			<p data-uix-section-desc>
				Set a <code>name</code> to auto-render a hidden input. The Editable then participates in
				native <code>&lt;form&gt;</code> submission like any text input.
			</p>
			<form
				onsubmit={onFormSubmit}
				style="display: flex; flex-direction: column; gap: var(--uix-space-2); align-items: flex-start;"
			>
				<label data-uix-control style="max-width: 240px;">
					<span data-uix-control-label>name</span>
					<input bind:value={formName} />
				</label>
				<Editable bind:value={formValue} name={formName} activationMode="click" submitMode="both">
					<Editable.Area>
						<Editable.Preview />
						<Editable.Input />
					</Editable.Area>
					<Editable.Control>
						<Editable.EditTrigger>Edit</Editable.EditTrigger>
						<Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
						<Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
					</Editable.Control>
				</Editable>
				<button data-uix-play type="submit">Submit form</button>
				{#if lastSubmitted}
					<div data-uix-stage-trace>
						<span data-uix-stage-trace-key>FormData</span>
						{#each Object.entries(lastSubmitted) as [k, v]}
							<span><code>{k}</code> = <code>{JSON.stringify(v)}</code></span>
						{/each}
					</div>
				{/if}
			</form>

			<div data-uix-subsection-head>uncontrolled (value, no bind:)</div>
			<p data-uix-section-desc>
				Passing <code>value</code> one-way (no <code>bind:</code>) seeds the initial draft.
				Subsequent edits stay internal — the consumer never sees them unless they bind
				<code>value</code> or wire <code>onValueCommit</code>.
			</p>
			<Editable
				value="Seeded initial value"
				activationMode="click"
				submitMode="both"
				onValueCommit={(v) => (uncontrolledCommit = v)}
			>
				<Editable.Area>
					<Editable.Preview />
					<Editable.Input />
				</Editable.Area>
				<Editable.Control>
					<Editable.EditTrigger>Edit</Editable.EditTrigger>
					<Editable.SubmitTrigger>Save</Editable.SubmitTrigger>
					<Editable.CancelTrigger>Cancel</Editable.CancelTrigger>
				</Editable.Control>
			</Editable>
			<p data-uix-section-desc>
				Last commit: <code>{uncontrolledCommit || '-'}</code>
			</p>

			<div data-uix-code>
				<div data-uix-code-head>
					<span data-uix-layer-badge="soma">soma</span>
					<span>headless · edit lifecycle</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 · editable 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 surface</h2>
			<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">''</td><td>Committed value, bindable.</td></tr>
						<tr><td class="name">editing</td><td>soma</td><td class="default">false</td><td>Edit mode, bindable.</td></tr>
						<tr><td class="name">activationMode</td><td>soma</td><td class="default">focus</td><td>focus | click | dblclick | none.</td></tr>
						<tr><td class="name">submitMode</td><td>soma</td><td class="default">blur</td><td>enter | blur | both | none.</td></tr>
						<tr><td class="name">selectOnFocus</td><td>soma</td><td class="default">true</td><td>Selects draft text after entering edit mode.</td></tr>
						<tr><td class="name">autoResize</td><td>soma</td><td class="default">false</td><td>Uses field sizing for content width.</td></tr>
						<tr><td class="name">disabled / readonly</td><td>soma</td><td class="default">false</td><td>Blocks edit lifecycle.</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">surface</td><td>surface | outline | ghost.</td></tr>
						<tr><td class="name">color</td><td>eidos</td><td class="default">primary</td><td>Full colour system (<code>ComponentColorProp</code>): role · intent · 33 scales · raw CSS value.</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>
				Editable declares preview, input and action triggers. Draft typing is not semantic; only
				mode entry, save and cancel are Sema events.
			</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>Optional</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">&lt;{part.defaultElement}&gt;</td>
								<td class="type">{part.role ?? '-'}</td>
								<td class="default">{part.optional ? 'yes' : 'no'}</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 inputKeyboard as key}
							<tr><td class="name">{key.key}</td><td>{key.action}</td></tr>
						{/each}
					</tbody>
				</table>
			</div>

			{#each editableMorfo.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>
				Editable emits mode entry, save and cancel. Input keystrokes stay local to Soma draft
				state and do not become perceptual events.
			</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-editable]') 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 === 'tokens'}
		<TokensPanel component="editable" stage={stageRef ?? undefined} />
	{/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/editable/editable.css</code>. The
				recipe consumes editing/disabled/readonly state from Soma and visual attrs from Eidos.
			</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-editable]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
						<tr><td class="name">[data-editable-area][data-editing]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
						<tr><td class="name">[data-editable-preview]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
						<tr><td class="name">[data-editable-input]</td><td><span data-uix-tag data-kind="soma">morfo</span></td></tr>
						<tr><td class="name">[data-editable][data-size]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td></tr>
						<tr><td class="name">[data-editable][data-variant]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td></tr>
						<tr><td class="name">[data-editable][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">Preview</td><td>Preview exposes <code>role="textbox"</code> and is readonly.</td></tr>
						<tr><td class="name">Input</td><td>Input is only visible while editing and owns draft typing.</td></tr>
						<tr><td class="name">Keyboard</td><td>Enter submits when configured; Escape cancels.</td></tr>
						<tr><td class="name">Controls</td><td>Edit, Save and Cancel are button parts with translated labels.</td></tr>
						<tr><td class="name">Readonly</td><td>Readonly keeps preview focusable but blocks edit entry.</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}
</div>