@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/agent/Questionnaire.svelte

@@ -0,0 +1,767 @@
+<!--
+  Questionnaire — a step-by-step question card for an agent's plan-mode
+  interview. Shaped like Claude Code's AskUserQuestion payload so a host can
+  pass `questions` straight through and read `{ values, other? }[]` back.
+
+  One question per step. Single-select = a radiogroup with a roving tabindex
+  (arrows move focus, Space/Enter/click pick, then auto-advance after
+  `advanceDelay`); multi-select = a checkbox group. Digit keys 1..N pick
+  (N+1 = Other) — handled on the component's own keydown, never a window
+  listener, and never while typing in the Other field. Footer: step pills
+  (jump anywhere, `aria-current="step"`) + Previous / Next, "Done" on the last
+  step fires `onComplete`.
+
+  Motion: the card height follows the current step (measured, eased on
+  --motion-move) and content glides in the direction of travel. Under
+  prefers-reduced-motion both render their end state.
+
+  Answer-state logic lives in ./questionnaire.ts (pure, unit-tested).
+-->
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { glide } from '../../transitions/glide';
+	import { isTypingTarget } from '../../utils/keyboardShortcutRegistry';
+	import {
+		digitToRow,
+		finalizeAnswers,
+		firstUnanswered,
+		hasPreviews,
+		isAnswered,
+		isComplete,
+		isLastStep,
+		isOtherTicked,
+		moveRow,
+		normalizeAnswers,
+		pickOption,
+		previewOption,
+		rowDigit,
+		setOther,
+		stepDirection,
+		stepLabel,
+		tabStopRow,
+		toggleOption,
+		toggleOther,
+		clampStep,
+		type QuestionnaireAnswers,
+		type QuestionnaireQuestion
+	} from './questionnaire';
+
+	interface Props {
+		/** AskUserQuestion-shaped questions. */
+		questions: QuestionnaireQuestion[];
+		/** Answers aligned with `questions` (bindable). */
+		answers?: QuestionnaireAnswers;
+		/** Current question index (bindable). */
+		step?: number;
+		/** Show the free-text "Other" row on every question. */
+		allowOther?: boolean;
+		otherLabel?: string;
+		otherPlaceholder?: string;
+		/** Auto-advance delay (ms) after a single-select pick; `false` disables. */
+		advanceDelay?: number | false;
+		submitLabel?: string;
+		nextLabel?: string;
+		previousLabel?: string;
+		/** Card heading, e.g. "A few questions before I start". */
+		title?: string;
+		/** Done stays disabled until every question has an answer. */
+		requireAll?: boolean;
+		disabled?: boolean;
+		onChange?: (answers: QuestionnaireAnswers) => void;
+		onComplete?: (answers: QuestionnaireAnswers) => void;
+		class?: string;
+	}
+
+	let {
+		questions,
+		answers = $bindable(),
+		step = $bindable(0),
+		allowOther = true,
+		otherLabel = 'Other',
+		otherPlaceholder = 'Type your own answer',
+		advanceDelay = 180,
+		submitLabel = 'Done',
+		nextLabel = 'Next',
+		previousLabel = 'Previous',
+		title,
+		requireAll = true,
+		disabled = false,
+		onChange,
+		onComplete,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	const count = $derived(questions.length);
+	const current = $derived(normalizeAnswers(questions, answers));
+	const idx = $derived(clampStep(step, count));
+	const last = $derived(isLastStep(idx, count));
+	const complete = $derived(isComplete(questions, current));
+	const answeredCount = $derived(current.filter((a) => isAnswered(a)).length);
+
+	let root = $state<HTMLElement>();
+	let direction = $state<1 | -1>(1);
+	let focusedRow = $state<number | 'other' | null>(null);
+	let height = $state<number | null>(null);
+	let advanceTimer: ReturnType<typeof setTimeout> | undefined;
+
+	$effect(() => () => clearTimeout(advanceTimer));
+
+	function commit(next: QuestionnaireAnswers) {
+		answers = next;
+		onChange?.(next);
+	}
+
+	function rowEl(k: number, row: number | 'other'): HTMLElement | null {
+		return root?.querySelector<HTMLElement>(`[data-slide="${k}"] [data-row="${row}"]`) ?? null;
+	}
+
+	function otherInput(k: number): HTMLInputElement | null {
+		return root?.querySelector<HTMLInputElement>(`[data-slide="${k}"] [data-other-input]`) ?? null;
+	}
+
+	/** Focus the step's natural entry point: the picked row, else the first. */
+	function focusEntry(k: number) {
+		const q = questions[k];
+		const target = q?.multiSelect
+			? rowEl(k, 0)
+			: rowEl(k, tabStopRow(q, current[k]));
+		target?.focus();
+	}
+
+	async function go(to: number) {
+		clearTimeout(advanceTimer);
+		const target = clampStep(to, count);
+		if (target === idx) return;
+		const hadFocus = !!root && root.contains(document.activeElement);
+		const old = root?.querySelector<HTMLElement>(`[data-slide="${idx}"]`);
+		const focusWasInSlide = !!old && old.contains(document.activeElement);
+		direction = stepDirection(idx, target) === -1 ? -1 : 1;
+		// The outgoing slide stays mounted while it glides away — keep it out
+		// of the tab order and the accessibility tree.
+		old?.setAttribute('inert', '');
+		focusedRow = null;
+		step = target;
+		await tick();
+		// A quick back-and-forth can revive a slide mid-outro; it is live again.
+		root?.querySelector(`[data-slide="${target}"]`)?.removeAttribute('inert');
+		if (hadFocus && focusWasInSlide) focusEntry(target);
+	}
+
+	function finish() {
+		clearTimeout(advanceTimer);
+		if (disabled) return;
+		if (requireAll && !complete) {
+			go(firstUnanswered(questions, current));
+			return;
+		}
+		onComplete?.(finalizeAnswers(questions, current));
+	}
+
+	function scheduleAdvance(k: number) {
+		clearTimeout(advanceTimer);
+		if (advanceDelay === false || isLastStep(k, count)) return;
+		advanceTimer = setTimeout(() => {
+			if (k === idx) go(k + 1);
+		}, Math.max(0, advanceDelay));
+	}
+
+	function pick(k: number, label: string) {
+		if (disabled) return;
+		commit(pickOption(questions, current, k, label));
+		scheduleAdvance(k);
+	}
+
+	function toggle(k: number, label: string) {
+		if (disabled) return;
+		commit(toggleOption(questions, current, k, label));
+	}
+
+	async function tickOther(k: number) {
+		if (disabled) return;
+		clearTimeout(advanceTimer);
+		const q = questions[k];
+		const wasTicked = isOtherTicked(current[k]);
+		commit(toggleOther(questions, current, k));
+		if (!q?.multiSelect || !wasTicked) {
+			await tick();
+			otherInput(k)?.focus();
+		}
+	}
+
+	function typeOther(k: number, text: string) {
+		if (disabled) return;
+		clearTimeout(advanceTimer);
+		commit(setOther(questions, current, k, text));
+	}
+
+	function onOtherKeydown(e: KeyboardEvent, k: number) {
+		if (e.key !== 'Enter' || e.isComposing) return;
+		e.preventDefault();
+		if (questions[k]?.multiSelect || !isAnswered(current[k])) return;
+		if (isLastStep(k, count)) finish();
+		else go(k + 1);
+	}
+
+	/** Roving focus inside a single-select radiogroup. */
+	function onGroupKeydown(e: KeyboardEvent, k: number) {
+		const q = questions[k];
+		if (!q || q.multiSelect) return;
+		if (e.target instanceof HTMLElement && e.target.hasAttribute('data-other-input')) return;
+		const rows = q.options.length + (allowOther ? 1 : 0);
+		const raw = (e.target as HTMLElement | null)?.getAttribute('data-row');
+		const cur = raw === 'other' ? q.options.length : Number(raw ?? 0);
+		const next = moveRow(e.key, cur, rows);
+		if (next === null) return;
+		e.preventDefault();
+		rowEl(k, next === q.options.length && allowOther ? 'other' : next)?.focus();
+	}
+
+	/** Digit keys — scoped to this component's subtree. */
+	function onRootKeydown(e: KeyboardEvent) {
+		if (disabled || e.defaultPrevented) return;
+		if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return;
+		if (isTypingTarget(e.target)) return;
+		const q = questions[idx];
+		if (!q) return;
+		const row = digitToRow(e.key, q.options.length, allowOther);
+		if (row === null) return;
+		e.preventDefault();
+		if (row === 'other') {
+			if (!q.multiSelect && isOtherTicked(current[idx])) otherInput(idx)?.focus();
+			else tickOther(idx);
+			return;
+		}
+		const label = q.options[row].label;
+		if (q.multiSelect) toggle(idx, label);
+		else {
+			pick(idx, label);
+			rowEl(idx, row)?.focus();
+		}
+	}
+
+	/** Track the current step's rendered height so the card can ease between steps. */
+	function measure(node: HTMLElement, k: number) {
+		let key = k;
+		const ro = new ResizeObserver(() => {
+			if (key === idx) height = node.offsetHeight;
+		});
+		ro.observe(node);
+		return {
+			update(next: number) {
+				key = next;
+			},
+			destroy() {
+				ro.disconnect();
+			}
+		};
+	}
+
+	const fromSide = (dir: 1 | -1, entering: boolean) =>
+		(dir === 1) === entering ? ('right' as const) : ('left' as const);
+
+	const pillLabel = (i: number) => {
+		const q = questions[i];
+		const name = q?.header ?? `Question ${i + 1}`;
+		return `${name}${isAnswered(current[i]) ? ' (answered)' : ''}`;
+	};
+</script>
+
+<!-- Delegated key handling: digit shortcuts for the rows inside, scoped to this subtree. -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<section
+	bind:this={root}
+	class="jatui-questionnaire card bg-base-100 border-base-300 rounded-box border {className}"
+	aria-labelledby={title ? `${uid}-title` : undefined}
+	aria-label={title ? undefined : 'Questions'}
+	onkeydown={onRootKeydown}
+>
+	<div class="q-body">
+		<header class="q-header">
+			{#if title}
+				<h3 id="{uid}-title" class="q-title">{title}</h3>
+			{/if}
+			<p class="q-counter text-base-content/60" aria-hidden="true">
+				{#if questions[idx]?.header}
+					<span class="badge badge-sm badge-ghost">{questions[idx].header}</span>
+				{/if}
+				<span>{stepLabel(idx, count)}</span>
+			</p>
+			<span class="sr-only" aria-live="polite" aria-atomic="true">{count ? stepLabel(idx, count) : ''}</span>
+		</header>
+
+		<div class="q-viewport" style:height={height === null ? undefined : `${height}px`}>
+			<div class="q-track">
+				{#each [idx] as k (k)}
+					{@const q = questions[k]}
+					{@const a = current[k]}
+					{@const showPreviews = hasPreviews(q)}
+					{@const pv = previewOption(q, a, typeof focusedRow === 'number' ? focusedRow : null)}
+					{#if q}
+						<div
+							class="q-slide"
+							data-slide={k}
+							use:measure={k}
+							in:glide={{ from: fromSide(direction, true), distance: 24 }}
+							out:glide={{ from: fromSide(direction, false), distance: 24 }}
+						>
+							<fieldset class="q-fieldset" {disabled}>
+								<legend class="q-legend" id="{uid}-q{k}-legend">{q.question}</legend>
+								<p class="q-mode text-base-content/60" id="{uid}-q{k}-mode">
+									{q.multiSelect ? 'Select all that apply' : 'Choose one'}
+								</p>
+								<div class="q-layout" class:has-preview={showPreviews}>
+									{#if q.multiSelect}
+										<div class="q-rows" aria-describedby="{uid}-q{k}-mode">
+											{#each q.options as opt, i (opt.label)}
+												{@const checked = a.values.includes(opt.label)}
+												<label
+													class="q-row border-base-300 rounded-field"
+													class:is-selected={checked}
+												>
+													<input
+														type="checkbox"
+														class="checkbox checkbox-sm checkbox-primary"
+														data-row={i}
+														{checked}
+														aria-describedby={opt.description ? `${uid}-q${k}-o${i}-d` : undefined}
+														onchange={() => toggle(k, opt.label)}
+														onfocus={() => (focusedRow = i)}
+														onblur={() => (focusedRow = null)}
+													/>
+													<span class="q-text">
+														<span class="q-label">{opt.label}</span>
+														{#if opt.description}
+															<span class="q-desc text-base-content/60" id="{uid}-q{k}-o{i}-d"
+																>{opt.description}</span
+															>
+														{/if}
+													</span>
+													{#if rowDigit(i)}<kbd class="kbd kbd-xs" aria-hidden="true">{rowDigit(i)}</kbd>{/if}
+												</label>
+											{/each}
+											{#if allowOther}
+												{@const ticked = isOtherTicked(a)}
+												<div class="q-row q-other border-base-300 rounded-field" class:is-selected={ticked}>
+													<input
+														type="checkbox"
+														class="checkbox checkbox-sm checkbox-primary"
+														data-row="other"
+														checked={ticked}
+														aria-label={otherLabel}
+														onchange={() => tickOther(k)}
+													/>
+													<span class="q-label" aria-hidden="true">{otherLabel}</span>
+													<input
+														type="text"
+														class="input input-sm q-other-input"
+														data-other-input
+														placeholder={otherPlaceholder}
+														aria-label="{otherLabel}: your answer"
+														value={a.other ?? ''}
+														oninput={(e) => typeOther(k, e.currentTarget.value)}
+														onkeydown={(e) => onOtherKeydown(e, k)}
+													/>
+													{#if rowDigit(q.options.length)}<kbd class="kbd kbd-xs" aria-hidden="true"
+															>{rowDigit(q.options.length)}</kbd
+														>{/if}
+												</div>
+											{/if}
+										</div>
+									{:else}
+										{@const stop = tabStopRow(q, a)}
+										<div
+											class="q-rows"
+											role="radiogroup"
+											aria-labelledby="{uid}-q{k}-legend"
+											aria-describedby="{uid}-q{k}-mode"
+											tabindex="-1"
+											onkeydown={(e) => onGroupKeydown(e, k)}
+										>
+											{#each q.options as opt, i (opt.label)}
+												{@const checked = a.values[0] === opt.label}
+												<button
+													type="button"
+													role="radio"
+													class="q-row border-base-300 rounded-field"
+													class:is-selected={checked}
+													data-row={i}
+													aria-checked={checked}
+													aria-describedby={opt.description ? `${uid}-q${k}-o${i}-d` : undefined}
+													tabindex={stop === i ? 0 : -1}
+													{disabled}
+													onclick={() => pick(k, opt.label)}
+													onfocus={() => (focusedRow = i)}
+													onblur={() => (focusedRow = null)}
+												>
+													<span class="q-dot" aria-hidden="true"></span>
+													<span class="q-text">
+														<span class="q-label">{opt.label}</span>
+														{#if opt.description}
+															<span class="q-desc text-base-content/60" id="{uid}-q{k}-o{i}-d"
+																>{opt.description}</span
+															>
+														{/if}
+													</span>
+													{#if rowDigit(i)}<kbd class="kbd kbd-xs" aria-hidden="true">{rowDigit(i)}</kbd>{/if}
+												</button>
+											{/each}
+											{#if allowOther}
+												{@const ticked = isOtherTicked(a)}
+												<div class="q-row q-other border-base-300 rounded-field" class:is-selected={ticked}>
+													<button
+														type="button"
+														role="radio"
+														class="q-other-radio"
+														data-row="other"
+														aria-checked={ticked}
+														tabindex={stop === 'other' ? 0 : -1}
+														{disabled}
+														onclick={() => tickOther(k)}
+													>
+														<span class="q-dot" aria-hidden="true"></span>
+														<span class="q-label">{otherLabel}</span>
+													</button>
+													<input
+														type="text"
+														class="input input-sm q-other-input"
+														data-other-input
+														placeholder={otherPlaceholder}
+														aria-label="{otherLabel}: your answer"
+														tabindex={ticked ? 0 : -1}
+														value={a.other ?? ''}
+														oninput={(e) => typeOther(k, e.currentTarget.value)}
+														onkeydown={(e) => onOtherKeydown(e, k)}
+													/>
+													{#if rowDigit(q.options.length)}<kbd class="kbd kbd-xs" aria-hidden="true"
+															>{rowDigit(q.options.length)}</kbd
+														>{/if}
+												</div>
+											{/if}
+										</div>
+									{/if}
+
+									{#if showPreviews}
+										<div class="q-preview border-base-300 bg-base-200 rounded-field">
+											{#if pv !== null}
+												<p class="q-preview-label text-base-content/60">Preview · {q.options[pv].label}</p>
+												<pre class="q-preview-code">{q.options[pv].preview}</pre>
+											{:else}
+												<p class="q-preview-label text-base-content/60">Focus an option to preview it</p>
+											{/if}
+										</div>
+									{/if}
+								</div>
+							</fieldset>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		</div>
+
+		<footer class="q-footer border-base-300">
+			<nav class="q-pills" aria-label="Questions">
+				<ol>
+					{#each questions as _, i (i)}
+						<li>
+							<button
+								type="button"
+								class="q-pill rounded-field"
+								class:is-current={i === idx}
+								class:is-answered={isAnswered(current[i])}
+								aria-current={i === idx ? 'step' : undefined}
+								aria-label={pillLabel(i)}
+								title={questions[i].question}
+								{disabled}
+								onclick={() => go(i)}
+							>
+								<span aria-hidden="true">{questions[i].header ?? i + 1}</span>
+							</button>
+						</li>
+					{/each}
+				</ol>
+			</nav>
+			<div class="q-actions">
+				{#if requireAll && last && !complete}
+					<span class="q-hint text-base-content/60">{answeredCount} of {count} answered</span>
+				{/if}
+				<button type="button" class="btn btn-sm btn-ghost" disabled={disabled || idx === 0} onclick={() => go(idx - 1)}>
+					{previousLabel}
+				</button>
+				{#if last}
+					<button
+						type="button"
+						class="btn btn-sm btn-primary"
+						disabled={disabled || (requireAll && !complete)}
+						onclick={finish}
+					>
+						{submitLabel}
+					</button>
+				{:else}
+					<button type="button" class="btn btn-sm btn-primary" {disabled} onclick={() => go(idx + 1)}>
+						{nextLabel}
+					</button>
+				{/if}
+			</div>
+		</footer>
+	</div>
+</section>
+
+<style>
+	.jatui-questionnaire {
+		border-width: var(--jatui-border-w, 1px);
+	}
+	.q-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-lg, 12px);
+		padding: var(--jatui-space-xl, 16px);
+	}
+	.q-header {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-sm, 4px);
+	}
+	.q-title {
+		font-weight: 600;
+		font-size: 0.9375rem;
+	}
+	.q-counter {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Height follows the current slide. Padding + negative margin give focus
+	   rings room inside the clip box. */
+	.q-viewport {
+		box-sizing: content-box;
+		padding: 4px;
+		margin: -4px;
+		overflow: hidden;
+		transition: height var(--motion-move, 300ms) var(--motion-standard, ease);
+	}
+	.q-track {
+		display: grid;
+	}
+	.q-slide {
+		grid-area: 1 / 1;
+		min-width: 0;
+	}
+	.q-fieldset {
+		min-width: 0;
+		margin: 0;
+		padding: 0;
+		border: 0;
+	}
+	.q-legend {
+		padding: 0;
+		font-weight: 600;
+		font-size: 1rem;
+		line-height: 1.4;
+	}
+	.q-mode {
+		margin-top: var(--jatui-space-xs, 2px);
+		margin-bottom: var(--jatui-space-base, 8px);
+		font-size: 0.75rem;
+	}
+	.q-layout {
+		display: grid;
+		gap: var(--jatui-space-lg, 12px);
+	}
+	@media (min-width: 48rem) {
+		.q-layout.has-preview {
+			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+			align-items: start;
+		}
+	}
+	.q-rows {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-md, 6px);
+		outline: none;
+	}
+	.q-row {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--jatui-space-lg, 12px);
+		width: 100%;
+		padding: var(--jatui-space-base, 8px) var(--jatui-space-lg, 12px);
+		border-width: var(--jatui-border-w, 1px);
+		border-style: solid;
+		background: var(--color-base-100);
+		text-align: start;
+		cursor: pointer;
+		transition:
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease),
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease);
+	}
+	.q-row:hover {
+		background: color-mix(in oklab, var(--color-base-content) 4%, var(--color-base-100));
+	}
+	.q-row.is-selected {
+		border-color: var(--color-primary);
+		background: color-mix(in oklab, var(--color-primary) 7%, var(--color-base-100));
+	}
+	.q-row:focus-visible,
+	.q-other-radio:focus-visible,
+	.q-pill:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	.q-row:has(input[type='checkbox']:focus-visible) {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	fieldset:disabled .q-row,
+	fieldset:disabled .q-other-radio {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	.q-row > input[type='checkbox'] {
+		margin-top: 0.125rem;
+		flex: none;
+	}
+	.q-text {
+		display: flex;
+		flex: 1;
+		min-width: 0;
+		flex-direction: column;
+		gap: var(--jatui-space-xs, 2px);
+	}
+	.q-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+	.q-desc {
+		font-size: 0.8125rem;
+		line-height: 1.4;
+	}
+	.q-row kbd {
+		flex: none;
+		margin-top: 0.0625rem;
+	}
+	.q-dot {
+		flex: none;
+		box-sizing: border-box;
+		width: 1rem;
+		height: 1rem;
+		margin-top: 0.125rem;
+		border-radius: 9999px;
+		border: 1.5px solid color-mix(in oklab, var(--color-base-content) 35%, transparent);
+		transition:
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease),
+			border-width var(--motion-fast, 150ms) var(--motion-glide, ease);
+	}
+	.is-selected .q-dot {
+		border-color: var(--color-primary);
+		border-width: 5px;
+	}
+	.q-other {
+		align-items: center;
+		cursor: default;
+	}
+	.q-other-radio {
+		display: flex;
+		flex: none;
+		align-items: center;
+		gap: var(--jatui-space-lg, 12px);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		cursor: pointer;
+		background: none;
+		padding: 0;
+	}
+	.q-other-radio .q-dot {
+		margin-top: 0;
+	}
+	.q-other-input {
+		flex: 1;
+		min-width: 0;
+	}
+	.q-preview {
+		border-width: var(--jatui-border-w, 1px);
+		border-style: solid;
+		padding: var(--jatui-space-base, 8px) var(--jatui-space-lg, 12px);
+		min-width: 0;
+	}
+	.q-preview-label {
+		font-size: 0.75rem;
+		margin-bottom: var(--jatui-space-sm, 4px);
+	}
+	.q-preview-code {
+		margin: 0;
+		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+		font-size: 0.75rem;
+		line-height: 1.5;
+		white-space: pre;
+		overflow-x: auto;
+	}
+	.q-footer {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-base, 8px);
+		padding-top: var(--jatui-space-lg, 12px);
+		border-top-width: var(--jatui-border-w, 1px);
+		border-top-style: solid;
+	}
+	.q-pills ol {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--jatui-space-sm, 4px);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.q-pill {
+		min-width: 1.75rem;
+		padding: 0.125rem var(--jatui-space-base, 8px);
+		font-size: 0.75rem;
+		border: var(--jatui-border-w, 1px) solid var(--color-base-300);
+		background: var(--color-base-100);
+		color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+		cursor: pointer;
+		transition:
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease),
+			color var(--motion-fast, 150ms) var(--motion-glide, ease);
+	}
+	.q-pill.is-answered {
+		border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-base-300));
+		color: var(--color-base-content);
+	}
+	.q-pill.is-answered::before {
+		content: '✓ ';
+		color: var(--color-primary);
+	}
+	.q-pill.is-current {
+		background: var(--color-primary);
+		border-color: var(--color-primary);
+		color: var(--color-primary-content);
+	}
+	.q-pill.is-current.is-answered::before {
+		color: inherit;
+	}
+	.q-actions {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		margin-inline-start: auto;
+	}
+	.q-hint {
+		font-size: 0.75rem;
+		margin-inline-end: var(--jatui-space-sm, 4px);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.q-viewport,
+		.q-row,
+		.q-dot,
+		.q-pill {
+			transition: none;
+		}
+	}
+</style>