@quillmark/svelte 0.20.1 → 0.22.0

package/dist/visual/ArrayField.svelte

@@ -2,7 +2,7 @@
  An `array` field → an add/remove repeater. Elements commit by value: every
  edit / add / remove / move rebuilds the whole array and hands it to the parent's typed
  `writer.set(field, wholeArray)` (arrays are not op-addressed). Element control
- by `items.type`: `richtext` / `plaintext` → a prose element
+ by `items.type`: `richtext` / `text` → a prose element
  ({@link ProseValue}), `object` → a summary row that opens onto a subform, or a
  table's row where the array asks for one and the cells are short, everything else →
  a text input. The add chip sits in the label header row (space-between with the field
@@ -29,8 +29,8 @@
  container or a block prose cell.
 
  The row's controls are inside the element: a slab over the end of the element's own
- box, taking its two end-side corners — the remove, and on an `object` row the reorder
- pair before it. So a row's box is the element's box, and an array's rows end where
+ box, taking its two end-side corners: the remove. An `object` row's drag handle hangs
+ off its start edge instead, as a table grip does. So a row's box is the element's box, and an array's rows end where
  every other field's control does. On an object element that box is the summary rather
  than the open row: a destructive control belongs to the line it sits on, not to
  everything that line has unfolded. A table's row carries the remove alone, in its last
@@ -41,7 +41,8 @@
  Keys carry the list without the mouse: Enter inserts a sibling below and takes the
  caret there, Backspace on an empty element removes it and hands focus back up the
  list, Alt+↑/↓ anywhere in an `object` row of the list moves it, the nearest row
- answering and never the record around a nested one. A move is one splice of the ids
+ answering and never the record around a nested one, and is the twin of the handle's
+ drag. A move is one splice of the ids
  and of the values together, the mechanism insert and remove use, so an element keeps
  its id for life and no prose leaf inside it remounts; the open row stays open across
  its own move, and `animate:reorder` holds the moving row as it holds a card.
@@ -70,7 +71,7 @@
 		controlKind,
 		declaredContent,
 		humanize,
-		obliged,
+		literalText,
 		rowSummary,
 		schemaAt,
 		type ArrayLayout
@@ -104,8 +105,6 @@
 		max?: number;
 		/** Accessible-name prefix for the element controls (`label` + 1-based index). */
 		label?: string;
-		/** No-default field → a persistent required `*` on the label. */
-		required?: boolean;
 		/** Schema `description`: the label's help affordance. */
 		description?: string;
 		/** The label's own DOM id. An array is a group (N inputs, no single `for`
@@ -139,7 +138,6 @@
 		layout = 'list',
 		max,
 		label,
-		required,
 		description,
 		labelId,
 		descriptionId,
@@ -328,15 +326,13 @@
 		void focusAfterFlush(next[Math.max(k - 1, 0)], column, fromRemove);
 	}
 	/**
-	 * Move element `k` one slot: one splice of the ids and of the values together, so
-	 * the element keeps its id and everything mounted under it. A no-op at either edge.
-	 * The control that was pressed rides with the row, so it is focused again once the
-	 * flush has moved it: a node moved in the DOM is a node the browser blurred. An arrow
-	 * the move carried to its edge is disabled and takes no focus, so its twin does.
+	 * Move element `k` to slot `to`: one splice of the ids and of the values together, so
+	 * the element keeps its id and everything mounted under it. A no-op outside the list.
+	 * The control that held the focus rides with the row, so it is focused again once the
+	 * flush has moved it: a node moved in the DOM is a node the browser blurred.
 	 */
-	function move(k: number, dir: -1 | 1): void {
-		const to = k + dir;
-		if (to < 0 || to >= ids.length) return;
+	function move(k: number, to: number): void {
+		if (to === k || to < 0 || to >= ids.length) return;
 		const pressed = document.activeElement;
 		arm.arm();
 		const nextIds = ids.slice();
@@ -349,14 +345,8 @@
 		onCommit(next);
 		void (async () => {
 			if (!(await span.resumes(tick()))) return;
-			if (!(pressed instanceof HTMLElement) || !pressed.isConnected) return;
-			const target =
-				pressed instanceof HTMLButtonElement && pressed.disabled
-					? [pressed.previousElementSibling, pressed.nextElementSibling].find(
-							(b) => b instanceof HTMLButtonElement && !b.disabled
-						)
-					: pressed;
-			if (target instanceof HTMLElement) target.focus();
+			if (pressed instanceof HTMLElement && pressed.isConnected && rowEls[id]?.contains(pressed))
+				pressed.focus();
 		})();
 	}
 	/** Take the caret: the first element, or the add affordance when the list is empty;
@@ -526,9 +516,10 @@
 	 *  any cell an open row holds: Alt+↑/↓, the table island's own binding. The nearest
 	 *  row answers, or none does: a press inside a nested row is that row's whether it
 	 *  holds a reorder or not, so a key in a table's cell or a list of strings' input
-	 *  moves nothing, and never the record around it. */
+	 *  moves nothing, and never the record around it. A held drag owns the row until its
+	 *  release. */
 	function onRowKey(e: KeyboardEvent, k: number): void {
-		if (!e.altKey || e.shiftKey || e.ctrlKey || e.metaKey || e.isComposing) return;
+		if (!e.altKey || e.shiftKey || e.ctrlKey || e.metaKey || e.isComposing || drag) return;
 		// A cell that took the key — a select opening, a date segment stepping, a prose
 		// leaf joining — owns it.
 		if (e.defaultPrevented) return;
@@ -538,7 +529,111 @@
 		const dir = e.key === 'ArrowUp' ? -1 : 1;
 		if (k + dir < 0 || k + dir >= ids.length) return;
 		e.preventDefault();
-		move(k, dir);
+		move(k, k + dir);
+	}
+
+	// ── The drag handle ──────────────────────────────────────────────────────────
+	// Press-and-drag the handle moves its row; a press that does not travel past the dead
+	// zone does nothing. The drop is the row under the pointer, read off the rows where
+	// they stand, so a scroll by any hand re-picks it. Held in an edge band of its
+	// scrollport, the drag scrolls it toward the rows out of view, once the pointer has
+	// been outside the band: a press on a row already in the band does not scroll. Nothing
+	// reflows until the release (the lift is a tone and the drop rule is out of flow), and
+	// the release is the one splice `move` makes. A handle that loses the pointer, or
+	// leaves the DOM, ends the drag with no move.
+	const DEAD_ZONE = 3;
+	/** The band at a scrollport's top and bottom edges that scrolls it under a held drag,
+	 *  and the most one frame scrolls, reached at the edge itself. */
+	const EDGE = 48;
+	const STEP = 16;
+	type RowDrag = { k: number; origin: number; y: number; engaged: boolean; drop: number };
+	let drag = $state<RowDrag | undefined>();
+	let follow: { grip: Element; port: Element; armed: boolean; frame: number } | undefined;
+	function onHandleDown(e: PointerEvent, k: number): void {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		release();
+		const grip = e.currentTarget as HTMLElement;
+		grip.setPointerCapture?.(e.pointerId);
+		drag = { k, origin: e.clientY, y: e.clientY, engaged: false, drop: k };
+		follow = { grip, port: scrollport(grip), armed: false, frame: 0 };
+	}
+	function onHandleMove(e: PointerEvent): void {
+		if (!drag) return;
+		drag.y = e.clientY;
+		if (!drag.engaged) {
+			if (Math.abs(e.clientY - drag.origin) < DEAD_ZONE) return;
+			drag.engaged = true;
+			addEventListener('scroll', repick, { capture: true, passive: true });
+			if (follow) follow.frame = requestAnimationFrame(edgeScroll);
+		}
+		repick();
+	}
+	function repick(): void {
+		if (drag?.engaged) drag.drop = dropIndex(drag.k, drag.y);
+	}
+	const rowBox = (i: number): DOMRect | undefined => rowEls[ids[i]]?.getBoundingClientRect();
+	/** The row the pointer is over, or the nearest one past either end. */
+	function dropIndex(k: number, y: number): number {
+		let best = k;
+		let nearest = Infinity;
+		ids.forEach((_, i) => {
+			const box = rowBox(i);
+			if (!box) return;
+			const gap = y < box.top ? box.top - y : y > box.bottom ? y - box.bottom : 0;
+			if (gap < nearest) {
+				nearest = gap;
+				best = i;
+			}
+		});
+		return best;
+	}
+	const page = (): Element => document.scrollingElement ?? document.documentElement;
+	/** The nearest ancestor that scrolls vertically, else the page. */
+	function scrollport(from: Element): Element {
+		for (let el = from.parentElement; el; el = el.parentElement) {
+			const { overflowY } = getComputedStyle(el);
+			if (/auto|scroll/.test(overflowY) && el.scrollHeight > el.clientHeight) return el;
+		}
+		return page();
+	}
+	function edgeScroll(): void {
+		if (!follow || !drag?.engaged) return;
+		if (!follow.grip.isConnected) {
+			drag = undefined;
+			release();
+			return;
+		}
+		const { port } = follow;
+		const box = port === page() ? undefined : port.getBoundingClientRect();
+		const top = Math.max(box?.top ?? 0, 0);
+		const bottom = Math.min(box?.bottom ?? innerHeight, innerHeight);
+		const into = Math.min(drag.y - top - EDGE, 0) + Math.max(drag.y - bottom + EDGE, 0);
+		if (!into) follow.armed = true;
+		// Only toward rows still out of view: past the list's end there is nothing to reach.
+		const beyond =
+			into < 0 ? (rowBox(0)?.top ?? top) < top : (rowBox(ids.length - 1)?.bottom ?? 0) > bottom;
+		if (into && follow.armed && beyond)
+			port.scrollBy({ top: STEP * Math.max(-1, Math.min(1, into / EDGE)), behavior: 'instant' });
+		follow.frame = requestAnimationFrame(edgeScroll);
+	}
+	function release(): void {
+		if (follow) cancelAnimationFrame(follow.frame);
+		follow = undefined;
+		removeEventListener('scroll', repick, { capture: true });
+	}
+	onDestroy(release);
+	function onHandleUp(e: PointerEvent): void {
+		const done = drag;
+		drag = undefined;
+		release();
+		if (!done?.engaged || e.type !== 'pointerup') return;
+		move(done.k, done.drop);
+	}
+	/** Where the drop rule draws on row `k`, while a drag would land the row there. */
+	function dropSide(k: number): 'before' | 'after' | undefined {
+		if (!drag?.engaged || drag.drop !== k || drag.drop === drag.k) return undefined;
+		return drag.drop > drag.k ? 'after' : 'before';
 	}
 </script>
 
@@ -550,14 +645,7 @@
 >
 	<div class="qm-array-header">
 		{#if label != null}
-			<FieldLabel
-				{label}
-				id={labelId}
-				{descriptionId}
-				onActivate={focus}
-				{required}
-				{description}
-			/>
+			<FieldLabel {label} id={labelId} {descriptionId} onActivate={focus} {description} />
 		{:else}
 			<span></span>
 		{/if}
@@ -582,15 +670,15 @@
 	     each block's one child: a branch inside the block would stand between them. -->
 	{#if table}
 		<div
-			class={['qm-array-rows qm-array-table', { empty: ids.length === 0 }]}
+			class={['qm-array-rows qm-array-table qm-wash', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
 			<div class="qm-array-table-scroller" style:--table-cols={columns.length}>
 				<!-- The header names the columns, so a cell carries no label of its own: its
 				     accessible name is the row's and the column's composed (`ObjectField`). The
-				     obligation mark and the guidance affordance ride the header, being the
-				     column's rather than any one cell's. -->
+				     guidance affordance rides the header, being the column's rather than any
+				     one cell's. -->
 				<div class="qm-array-table-head">
 					{#each columns as [key, sub] (key)}
 						<div
@@ -602,7 +690,6 @@
 							<FieldLabel
 								label={columnTitle(key, sub)}
 								descriptionId={idBase != null ? propertyDomIds(idBase, key).description : undefined}
-								required={obliged(sub)}
 								description={sub.description}
 							/>
 						</div>
@@ -610,7 +697,11 @@
 					<span class="qm-array-table-head-end"></span>
 				</div>
 				{#each ids as id, k (id)}
-					<div class="qm-array-row qm-array-table-row" bind:this={rowEls[id]}>
+					<div
+						class="qm-array-row qm-array-table-row qm-wash"
+						data-qm-index={k}
+						bind:this={rowEls[id]}
+					>
 						<ObjectField
 							bare
 							bind:this={cellEls[id]}
@@ -630,7 +721,7 @@
 		</div>
 	{:else if control === 'object'}
 		<div
-			class={['qm-array-rows', { empty: ids.length === 0 }]}
+			class={['qm-array-rows qm-wash', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
@@ -639,7 +730,12 @@
 				<!-- The handler catches a key from the controls inside the row and adds no
 				     interaction of the row's own: the row is no tab stop. -->
 				<div
-					class={['qm-array-row qm-element', { open: open.has(id) }]}
+					class={[
+						'qm-array-row qm-element qm-wash',
+						{ open: open.has(id), lifted: drag?.engaged && drag.k === k }
+					]}
+					data-drop={dropSide(k)}
+					data-qm-index={k}
 					bind:this={rowEls[id]}
 					animate:reorder={arm.armed}
 					onkeydown={(e) => onRowKey(e, k)}
@@ -649,10 +745,12 @@
 					     end-side corners) needs corners to take. So a list of records measures
 					     like a list of inputs whatever the element type. -->
 					<div class="qm-element-head">
+						{@render handle(k)}
 						<button
 							type="button"
 							class="qm-control-box qm-focus-ring qm-element-summary"
 							aria-expanded={open.has(id)}
+							aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown"
 							onclick={() => toggleRow(id)}
 						>
 							<!-- Leading, and it rotates: trailing is the figure for pushing a new
@@ -666,7 +764,7 @@
 							{/if}
 						</button>
 						<div class="qm-row-actions">
-							{@render rowActions(k)}
+							{@render removeButton(k)}
 						</div>
 					</div>
 					{#if open.has(id)}
@@ -690,18 +788,18 @@
 		</div>
 	{:else}
 		<div
-			class={['qm-array-rows', { empty: ids.length === 0 }]}
+			class={['qm-array-rows qm-wash', { empty: ids.length === 0 }]}
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
 			{#each ids as id, k (id)}
-				<div class="qm-array-row" bind:this={rowEls[id]}>
+				<div class="qm-array-row qm-wash" data-qm-index={k} bind:this={rowEls[id]}>
 					{#if control === 'prose'}
 						<ProseValue
 							bind:this={els[id]}
 							content={() => readAt([k])}
 							value={arr[k]}
-							plaintext={items != null && baseType(items) === 'plaintext'}
+							plaintext={items != null && literalText(items)}
 							label={rowName(k)}
 							onChange={(rt) => commitElement(k, rt)}
 							onKey={(e) => onElementKey(e, k)}
@@ -738,26 +836,22 @@
 	>
 {/snippet}
 
-<!-- An `object` row's controls: the reorder pair, disabled at its edge as the card
-     header's is, then the remove. -->
-{#snippet rowActions(k: number)}
-	<button
-		type="button"
-		class="qm-icon-btn qm-row-btn qm-focus-ring"
-		title={t.strings.arrayMoveUp}
-		aria-label={rowAction(t.strings.arrayMoveUp, k)}
-		disabled={k === 0}
-		onclick={() => move(k, -1)}><Icon name="chevron-up" /></button
+<!-- An `object` row's drag handle, a table grip's twin hung off the row's start edge.
+     Pointer-only and out of the accessibility tree: a press on it does nothing, so a
+     button there would be one a screen reader activates to no effect. Its twin is
+     Alt+↑/↓ from anywhere in the row, which the summary announces. -->
+{#snippet handle(k: number)}
+	<span
+		class="qm-row-handle"
+		aria-hidden="true"
+		title={t.strings.arrayDrag}
+		onpointerdown={(e) => onHandleDown(e, k)}
+		onpointermove={onHandleMove}
+		onpointerup={onHandleUp}
+		onpointercancel={onHandleUp}
+		onlostpointercapture={onHandleUp}
+		><span class="qm-row-handle-bar"><Icon name="grip-vertical" /></span></span
 	>
-	<button
-		type="button"
-		class="qm-icon-btn qm-row-btn qm-focus-ring"
-		title={t.strings.arrayMoveDown}
-		aria-label={rowAction(t.strings.arrayMoveDown, k)}
-		disabled={k === ids.length - 1}
-		onclick={() => move(k, 1)}><Icon name="chevron-down" /></button
-	>
-	{@render removeButton(k)}
 {/snippet}
 
 <style>
@@ -790,14 +884,13 @@
 	}
 	/* The elements, in a box of their own: the arrival wash blooms here rather than over
 	 the wrapper `Field` hands this component (`washBox`), which is the label's box too.
-	 Positioned for the wash's inset child, and rounded to the rung a row's own box
-	 draws, the way `.qm-field-control` is for every other control.
+	 Rounded to the rung a row's own box draws, the way `.qm-field-control` is for every
+	 other control.
 
 	 `display: none` when there are no elements, so the header does not stand a gap above
 	 an empty box; a wash over it then paints nothing, which is what an array with
 	 nothing in it has to show. */
 	.qm-array-rows {
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space);
@@ -807,18 +900,21 @@
 		display: none;
 	}
 	/* The default's rows are what prints and nothing written: every value they draw takes
-	   the default rung (theme.css), and the first gesture, writing them, takes it off. */
+	   the default rung (theme.css), a checked switch's track included, and the first
+	   gesture, writing them, takes it off. */
 	.qm-array-rows[data-default] :global(:is(.qm-input, .ProseMirror, .qm-date)),
 	.qm-array-rows[data-default] :global(.qm-select:not([data-ghosted])),
 	.qm-array-rows[data-default] .qm-element-title:not(.untitled) {
 		color: var(--_qm-ink-default);
 	}
+	.qm-array-rows[data-default] :global(.qm-toggle[data-state='checked']) {
+		background: var(--_qm-accent-default);
+	}
 	/* A grid rather than a block: an `<input>` is inline-level and would sit on a
 	 baseline, standing the row a descender taller than the box the slab measures itself
 	 against. `minmax(0, …)` because a long unbroken value grows an `auto` track, and the
 	 edge with it. */
 	.qm-array-row {
-		position: relative;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		row-gap: var(--_qm-space);
@@ -830,7 +926,7 @@
 	/* The end inset the slabs stand in, taken off whichever box the element drew:
 	 `.qm-input` is the text element, `.qm-control-box` the prose one — the row's own
 	 child, so a table's cells, which are boxes too, keep their inset — and an object
-	 row's summary, which stands three slabs off its end. `:global`, because the box
+	 row's summary, which stands one slab off its end. `:global`, because the box
 	 belongs to the child component's markup and the scope class stops at this
 	 component's. The longhand beats the family's `padding` shorthand without a
 	 specificity fight: `controls.css` ranks the family at zero inside `:where()`. */
@@ -839,7 +935,7 @@
 		padding-inline-end: var(--_qm-tap-min);
 	}
 	.qm-element-summary {
-		padding-inline-end: calc(3 * var(--_qm-tap-min));
+		padding-inline-end: var(--_qm-tap-min);
 	}
 	/* The box's end wall, floor to ceiling: a height of its own would leave a sliver of
 	 well above or below, and the corners it takes are the box's — the end-side pair keeps
@@ -847,8 +943,7 @@
 	 another gives up its corners on both sides.
 
 	 It comes up on its own row rather than on the field: a destructive control is offered
-	 by the row the pointer is on, not by every row at once, and the reorder pair beside
-	 it comes up with it. Hover is where the remove says destructive, ink with fill, a
+	 by the row the pointer is on, not by every row at once. Hover is where the remove says destructive, ink with fill, a
 	 tint alone being a wash under a label-toned glyph. */
 	.qm-row-actions {
 		position: absolute;
@@ -872,10 +967,6 @@
 		border-start-end-radius: var(--_qm-radius-inner);
 		border-end-end-radius: var(--_qm-radius-inner);
 	}
-	.qm-row-btn :global(svg) {
-		width: var(--_qm-glyph-control);
-		height: var(--_qm-glyph-control);
-	}
 	/* Child combinators: a nested array shares this scope, and a row's hover is not its
 	 open subform's rows'. */
 	.qm-array-row:hover > .qm-row-actions,
@@ -888,6 +979,68 @@
 		background: var(--_qm-danger-tint);
 		color: var(--_qm-danger);
 	}
+	/* The handle is a table grip's twin (prose.css §"One grip per line"): a pill carrying
+	 the grip's marks, hung off the row's start edge in the `--_qm-nest` every row stands
+	 in from the stroke outside it, which a group's panel clips at. It rests
+	 at nothing, where the remove rests faint, and comes up with the row the pointer is
+	 on, staying up through the drag it carries; a band flush with the row keeps the
+	 pointer on the row all the way to it. The pointer owns the gesture, not the page's
+	 scroll. */
+	.qm-row-handle {
+		position: absolute;
+		inset-block: 0;
+		inset-inline-end: 100%;
+		width: var(--_qm-nest);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--_qm-ink-label);
+		cursor: grab;
+		touch-action: none;
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-row-handle-bar {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: var(--_qm-tap-min);
+		border-radius: var(--_qm-radius-pill);
+		background: var(--_qm-surface-band);
+	}
+	.qm-row-handle-bar :global(svg) {
+		width: var(--_qm-space-3);
+		height: var(--_qm-space-3);
+	}
+	.qm-array-row:hover > .qm-element-head > .qm-row-handle,
+	.qm-element.lifted > .qm-element-head > .qm-row-handle {
+		opacity: 1;
+	}
+	.qm-element.lifted > .qm-element-head > .qm-row-handle {
+		cursor: grabbing;
+	}
+	/* The lifted row is a tone, and the drop is one rule on the edge it would land
+	 against, drawn out of flow so nothing reflows under the drag: the table island's
+	 own pair. */
+	.qm-element.lifted > .qm-element-head > .qm-element-summary {
+		opacity: var(--_qm-opacity-muted);
+	}
+	.qm-element[data-drop]::before {
+		content: '';
+		position: absolute;
+		inset-inline: 0;
+		height: var(--_qm-ring-width);
+		background: var(--_qm-accent);
+		border-radius: var(--_qm-radius-pill);
+		pointer-events: none;
+	}
+	.qm-element[data-drop='before']::before {
+		top: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
+	}
+	.qm-element[data-drop='after']::before {
+		bottom: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
+	}
 	/* ── An object element ──────────────────────────────────────────────────────
 	 The row is a summary and the subform hangs under it. `row-gap` rather than a margin
 	 on the subform, because the distance between a control and what it has unfolded
@@ -1106,10 +1259,15 @@
 	.qm-array.empty .qm-add-el {
 		opacity: 1;
 	}
+	/* No hover to come up on: the controls stand at the muted rung, the handle with
+	 them. */
 	@media (hover: none) {
 		.qm-add-el,
 		.qm-row-actions {
 			opacity: var(--_qm-opacity-muted);
 		}
+		.qm-row-handle {
+			opacity: 1;
+		}
 	}
 </style>

package/dist/visual/ArrayField.svelte.d.ts

@@ -15,8 +15,6 @@ interface Props {
     max?: number;
     /** Accessible-name prefix for the element controls (`label` + 1-based index). */
     label?: string;
-    /** No-default field → a persistent required `*` on the label. */
-    required?: boolean;
     /** Schema `description`: the label's help affordance. */
     description?: string;
     /** The label's own DOM id. An array is a group (N inputs, no single `for`

package/dist/visual/BooleanField.svelte

@@ -10,6 +10,9 @@
  `mixed` there reads as false), so an optional boolean's control is a `checkbox`, the
  toggle role that does, announcing `mixed` while unset. A press from unset writes
  `true`; nothing here returns the cell to unset.
+
+ An unset switch draws its `default:` at the default rung, as every control draws a
+ printed default: a checked track takes the accent's default rung.
 -->
 <script lang="ts">
 	import { Switch } from 'bits-ui';
@@ -41,6 +44,7 @@
 	// the unset optional cell, the one state with no default to stand in for it.
 	let local = $derived<boolean | undefined>(value ?? fallback ?? (optional ? undefined : false));
 	const unset = $derived(local === undefined);
+	const defaulted = $derived(value === undefined && fallback !== undefined);
 	const tristate = $derived(
 		optional ? { role: 'checkbox', 'aria-checked': unset ? ('mixed' as const) : !!local } : {}
 	);
@@ -49,7 +53,11 @@
 <!-- Not `.qm-switch`: that name is the preset's pane band, whose narrow-viewport rule
  stands every child of it at `--qmh-tap`, so a track wearing it grows a thumb three times
  its own height over the labels around it (`preset/recipes.css`, held by `check:style`). -->
-<span class="qm-toggle-wrap" data-unset={unset ? '' : undefined}>
+<span
+	class="qm-toggle-wrap"
+	data-unset={unset ? '' : undefined}
+	data-default={defaulted ? '' : undefined}
+>
 	<Switch.Root
 		class="qm-toggle qm-focus-ring qm-tap-floor"
 		checked={!!local}
@@ -101,6 +109,9 @@
 	.qm-toggle-wrap :global(.qm-toggle[data-state='checked']) {
 		background: var(--_qm-accent);
 	}
+	.qm-toggle-wrap[data-default] :global(.qm-toggle[data-state='checked']) {
+		background: var(--_qm-accent-default);
+	}
 	/* The focus ring rides `.qm-focus-ring` on the switch (controls.css). */
 	/* The thumb reads on tone alone: the base surface over the track's `hover` rung
 	 unchecked, and over `--_qm-accent` checked. No edge of its own: a hairline around