@quillmark/svelte 0.21.0 → 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
@@ -71,7 +71,7 @@
 		controlKind,
 		declaredContent,
 		humanize,
-		obliged,
+		literalText,
 		rowSummary,
 		schemaAt,
 		type ArrayLayout
@@ -105,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`
@@ -140,7 +138,6 @@
 		layout = 'list',
 		max,
 		label,
-		required,
 		description,
 		labelId,
 		descriptionId,
@@ -519,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;
@@ -536,42 +534,53 @@
 
 	// ── The drag handle ──────────────────────────────────────────────────────────
 	// Press-and-drag the handle moves its row; a press that does not travel past the dead
-	// zone does nothing. The rows are measured once the drag engages, nothing reflowing
-	// 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.
+	// 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;
-	type RowDrag = {
-		k: number;
-		origin: number;
-		engaged: boolean;
-		drop: number;
-		heads: { start: number; end: number }[];
-	};
+	/** 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();
-		(e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
-		drag = { k, origin: e.clientY, engaged: false, drop: k, heads: [] };
+		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;
-			drag.heads = ids.map((id) => {
-				const box = rowEls[id]?.getBoundingClientRect();
-				return { start: box?.top ?? 0, end: box?.bottom ?? 0 };
-			});
+			addEventListener('scroll', repick, { capture: true, passive: true });
+			if (follow) follow.frame = requestAnimationFrame(edgeScroll);
 		}
-		drag.drop = dropIndex(drag, e.clientY);
+		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(d: RowDrag, y: number): number {
-		let best = d.k;
+	function dropIndex(k: number, y: number): number {
+		let best = k;
 		let nearest = Infinity;
-		d.heads.forEach((head, i) => {
-			const gap = y < head.start ? head.start - y : y > head.end ? y - head.end : 0;
+		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;
@@ -579,9 +588,45 @@
 		});
 		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);
 	}
@@ -600,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}
@@ -632,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
@@ -652,7 +690,6 @@
 							<FieldLabel
 								label={columnTitle(key, sub)}
 								descriptionId={idBase != null ? propertyDomIds(idBase, key).description : undefined}
-								required={obliged(sub)}
 								description={sub.description}
 							/>
 						</div>
@@ -660,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]}
@@ -680,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}
 		>
@@ -690,10 +731,11 @@
 				     interaction of the row's own: the row is no tab stop. -->
 				<div
 					class={[
-						'qm-array-row qm-element',
+						'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)}
@@ -708,6 +750,7 @@
 							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
@@ -745,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)}
@@ -794,20 +837,20 @@
 {/snippet}
 
 <!-- An `object` row's drag handle, a table grip's twin hung off the row's start edge.
-     It holds no focus, as a grip does not: its keyboard twin is Alt+↑/↓ from anywhere in
-     the row. -->
+     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)}
-	<button
-		type="button"
+	<span
 		class="qm-row-handle"
-		tabindex="-1"
+		aria-hidden="true"
 		title={t.strings.arrayDrag}
-		aria-label={rowAction(t.strings.arrayDrag, k)}
 		onpointerdown={(e) => onHandleDown(e, k)}
 		onpointermove={onHandleMove}
 		onpointerup={onHandleUp}
 		onpointercancel={onHandleUp}
-		><span class="qm-row-handle-bar"><Icon name="grip-vertical" /></span></button
+		onlostpointercapture={onHandleUp}
+		><span class="qm-row-handle-bar"><Icon name="grip-vertical" /></span></span
 	>
 {/snippet}
 
@@ -841,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);
@@ -873,7 +915,6 @@
 	 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);
@@ -953,9 +994,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 0;
-		border: none;
-		background: none;
 		color: var(--_qm-ink-label);
 		cursor: grab;
 		touch-action: none;
@@ -988,7 +1026,7 @@
 	.qm-element.lifted > .qm-element-head > .qm-element-summary {
 		opacity: var(--_qm-opacity-muted);
 	}
-	.qm-element[data-drop]::after {
+	.qm-element[data-drop]::before {
 		content: '';
 		position: absolute;
 		inset-inline: 0;
@@ -997,10 +1035,10 @@
 		border-radius: var(--_qm-radius-pill);
 		pointer-events: none;
 	}
-	.qm-element[data-drop='before']::after {
+	.qm-element[data-drop='before']::before {
 		top: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
 	}
-	.qm-element[data-drop='after']::after {
+	.qm-element[data-drop='after']::before {
 		bottom: calc(-0.5 * (var(--_qm-space) + var(--_qm-ring-width)));
 	}
 	/* ── An object element ──────────────────────────────────────────────────────

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/Card.svelte

@@ -10,7 +10,7 @@
 	// component renders standalone too.
 	const t = wording();
 	import Icon from './icons/Icon.svelte';
-	import type { Document, Quill, Addr, Diagnostic } from '@quillmark/wasm';
+	import type { Document, Quill, Addr, Diagnostic, PathStep } from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
 	import type { LeafRegistry } from './leaves.js';
 	import type { CardModel, FieldModel } from './structure.js';
@@ -48,7 +48,7 @@
 		kinds: string[];
 		ops: CardOps;
 		enumDisallowed?: 'hide' | 'disable';
-		onFocus?: (addr: Addr) => void;
+		onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
 		onCaretMove?: (addr: Addr, pos: number) => void;
 		onChange?: (addr: Addr) => void;
 		onError?: EditorErrorHandler;
@@ -279,7 +279,7 @@
 									<div class="qm-group-head">
 										<button
 											type="button"
-											class="qm-group-header"
+											class="qm-group-header qm-focus-ring"
 											id={headIds?.label}
 											bind:this={headers[group]}
 											aria-expanded={isOpen}
@@ -538,6 +538,12 @@
 	.qm-card-title:focus {
 		color: var(--_qm-ink);
 	}
+	/* The automatic title, at the label ink every placeholder takes rather than the UA's
+	 grey, and steady under focus, where a typed title steps to the ink. */
+	.qm-card-title::placeholder {
+		color: var(--_qm-ink-label);
+		opacity: 1;
+	}
 	.qm-card-body {
 		display: flex;
 		flex-direction: column;

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

@@ -1,4 +1,4 @@
-import type { Document, Quill, Addr, Diagnostic } from '@quillmark/wasm';
+import type { Document, Quill, Addr, Diagnostic, PathStep } from '@quillmark/wasm';
 import type { EditorErrorHandler } from '../core/errors.js';
 import type { LeafRegistry } from './leaves.js';
 import type { CardModel } from './structure.js';
@@ -27,7 +27,7 @@ interface Props {
     kinds: string[];
     ops: CardOps;
     enumDisallowed?: 'hide' | 'disable';
-    onFocus?: (addr: Addr) => void;
+    onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
     onCaretMove?: (addr: Addr, pos: number) => void;
     onChange?: (addr: Addr) => void;
     onError?: EditorErrorHandler;

package/dist/visual/Field.svelte

@@ -27,7 +27,7 @@
 		ResolvedField
 	} from '@quillmark/wasm';
 	import type { EditorErrorHandler } from '../core/errors.js';
-	import { seatValueLeaves, type LandingBox, type LeafRegistry } from './leaves.js';
+	import { seatValueLeaves, stepsTo, type LandingBox, type LeafRegistry } from './leaves.js';
 	import type { FieldModel, FieldSpan } from './structure.js';
 	import {
 		VARIANT_DISCRIMINANT,
@@ -82,7 +82,9 @@
 		optionAllowed?: (value: string) => boolean;
 		/** How a refused option draws: greyed (default) or left out. */
 		enumDisallowed?: 'hide' | 'disable';
-		onFocus?: (addr: Addr) => void;
+		/** A focus inside the field: its address, and the steps down to the cell holding
+		 *  the focus ({@link stepsTo}), `[]` on the field's own control. */
+		onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
 		onCaretMove?: (addr: Addr, pos: number) => void;
 		onChange?: (addr: Addr) => void;
 		onError?: EditorErrorHandler;
@@ -221,7 +223,7 @@
 
 	/**
 	 * This field's landing handle. The wrapper is the bloom host rather than the
-	 * control: `bloomInside` appends an inset child and an `<input>` holds none. The
+	 * control: the wash is a box's `::after`, which an `<input>` draws none of. The
 	 * label is outside it, and stays out of the wash: an arrival marks where the caret
 	 * landed, which is the control. A control that owns its label (`ownsLabel`: the array
 	 * and the matrix) holds that row inside itself, so it names its own box
@@ -251,7 +253,8 @@
 	}
 
 	// A by-value prose leaf anywhere inside this field's containers is reached under
-	// this field's key: the active address names the field, never the element or cell.
+	// this field's key: the registry and the active address name the field, never the
+	// element or cell.
 	seatValueLeaves({
 		focus: (leaf) => leaves?.focusValue(leafKey, leaf),
 		release: (leaf) => leaves?.releaseValue(leafKey, leaf)
@@ -261,11 +264,16 @@
 	 * A form control has no controller to report its focus through, so the wrapper
 	 * reports: `focusin` bubbles, so one handler covers a plain input, an array's N
 	 * elements and an object's properties alike, and the active leaf names a scalar
-	 * field the way it names a prose one. A prose leaf reports through its own
+	 * field the way it names a prose one, down to the element or cell the focus is in. A prose leaf reports through its own
 	 * controller — the source that drives its caret signals too — and is excluded here
 	 * rather than counted twice.
 	 */
-	const reportFocus = $derived(field.control === 'prose' ? undefined : () => onFocus?.(addr));
+	const reportFocus = $derived(
+		field.control === 'prose'
+			? undefined
+			: (e: FocusEvent & { currentTarget: HTMLElement }) =>
+					onFocus?.(addr, stepsTo(e.target, e.currentTarget))
+	);
 </script>
 
 <div class={['qm-field', { cell: span === 'cell' }]}>
@@ -276,7 +284,6 @@
 			id={domIds.label}
 			descriptionId={domIds.description}
 			{onActivate}
-			required={field.required}
 			description={field.description}
 		/>
 	{/if}
@@ -285,7 +292,7 @@
 	 rule below holds why). One markup for both spans; a field owning its row nests a
 	 level and measures the same. -->
 	<div class="qm-field-stack">
-		<div class="qm-field-control" {@attach registerControl} onfocusin={reportFocus}>
+		<div class="qm-field-control qm-wash" {@attach registerControl} onfocusin={reportFocus}>
 			{#if field.control === 'prose'}
 				<ProseField
 					{quill}
@@ -296,7 +303,7 @@
 					plaintext={field.plaintext}
 					fallback={printed ? (ghost as Content) : undefined}
 					placeholder={none}
-					placeholderUntilEdit
+					emptyUnsets={optional}
 					labelledBy={domIds.label}
 					{describedBy}
 					{leafKey}
@@ -374,7 +381,6 @@
 					layout={arrayLayout(field.schema)}
 					max={field.schema.max}
 					label={field.label}
-					required={field.required}
 					description={field.description}
 					labelId={domIds.label}
 					descriptionId={domIds.description}
@@ -389,6 +395,7 @@
 					value={value as Record<string, unknown> | undefined}
 					properties={field.schema.properties}
 					{flat}
+					placed
 					label={field.label}
 					idBase={domIds.control}
 					labelledBy={domIds.label}
@@ -476,13 +483,10 @@
 		gap: var(--_qm-space);
 		min-width: 0;
 	}
-	/* Positioned for the arrival wash a landing inserts (`core/bloom.ts`), the way
-	   `.qm-prose` is: an inset child over the control, since an `<input>` takes none.
-	   The radius is the control's own, so the wash's corners are the box's rather than
-	   square over a rounded one; on an array or a subform it bounds a group, where
-	   there is no single box for it to disagree with. */
+	/* The arrival wash's host (`.qm-wash`). The radius is the control's own, so the
+	   wash's corners are the box's rather than square over a rounded one; on an array or
+	   a subform it bounds a group, where there is no single box for it to disagree with. */
 	.qm-field-control {
-		position: relative;
 		border-radius: var(--_qm-radius-inner);
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import type { Document, Quill, Addr, Diagnostic, ResolvedField } from '@quillmark/wasm';
+import type { Document, Quill, Addr, Diagnostic, PathStep, ResolvedField } from '@quillmark/wasm';
 import type { EditorErrorHandler } from '../core/errors.js';
 import { type LeafRegistry } from './leaves.js';
 import type { FieldModel, FieldSpan } from './structure.js';
@@ -27,7 +27,9 @@ interface Props {
     optionAllowed?: (value: string) => boolean;
     /** How a refused option draws: greyed (default) or left out. */
     enumDisallowed?: 'hide' | 'disable';
-    onFocus?: (addr: Addr) => void;
+    /** A focus inside the field: its address, and the steps down to the cell holding
+     *  the focus ({@link stepsTo}), `[]` on the field's own control. */
+    onFocus?: (addr: Addr, steps?: readonly PathStep[]) => void;
     onCaretMove?: (addr: Addr, pos: number) => void;
     onChange?: (addr: Addr) => void;
     onError?: EditorErrorHandler;

package/dist/visual/FieldLabel.svelte

@@ -10,15 +10,8 @@
  hands the click to `onActivate`. Both halves are needed: `for` on a non-labelable
  element is inert and invalid.
 
- Two non-gating label decorations:
- • a persistent required `*` for a field the schema obliges — one that declares no
- `default:` (DOCUMENT_MODEL). Its
- accessible name is "required", so a screen reader announces the word, not the
- glyph; inside the `<label>`, so it names the control along with the text
- ("Subject required") rather than announcing as a node adjacent to it;
-
- • the `description` as an info marker raising a themed popover
- ({@link FieldHint}).
+ One non-gating label decoration: the `description` as an info marker raising a
+ themed popover ({@link FieldHint}).
 
  The description describes, it does not name. It is parked in an always-present
  visually-hidden node here and the control carries `aria-describedby`: name then
@@ -32,11 +25,6 @@
  control's label decorates the same way.
 -->
 <script lang="ts">
-	import { wording } from './strings.js';
-
-	// The surface's words, ambient from the editor root; the package's English
-	// off-tree, so this component renders standalone too.
-	const t = wording();
 	import FieldHint from './FieldHint.svelte';
 
 	interface Props {
@@ -50,12 +38,10 @@
 		descriptionId?: string;
 		/** Focus handoff for a control `for` cannot reach; a label click calls it. */
 		onActivate?: () => void;
-		/** No-default field → a persistent required `*`. */
-		required?: boolean;
 		/** Schema `description`, or undefined: the affordance renders only when set. */
 		description?: string;
 	}
-	let { label, controlId, id, descriptionId, onActivate, required, description }: Props = $props();
+	let { label, controlId, id, descriptionId, onActivate, description }: Props = $props();
 </script>
 
 <div class="qm-field-label-row">
@@ -71,9 +57,6 @@
 		onclick={onActivate}
 	>
 		<span>{label}</span>
-		{#if required}
-			<span class="qm-field-required" aria-label={t.strings.fieldRequired}>*</span>
-		{/if}
 	</label>
 	{#if description}
 		<!-- Outside the `<label>`, both of them: a trigger inside it would put its own
@@ -91,10 +74,8 @@
 	/* The row, not the label, is the field's grid child: `Field`'s subgrid counts
 	 two tracks and the hint sits beside the label rather than under it.
 
-	 A rung wider than the label's own gap below, so the two separations rank: the
-	 required glyph is part of the name and sits at the tighter one, the guidance
-	 marker is a second affordance beside it. The marker's box is its glyph
-	 (`FieldHint`), so this gap is the whole of what stands between them. */
+	 The marker's box is its glyph (`FieldHint`), so this gap is the whole of what
+	 stands between it and the label. */
 	.qm-field-label-row {
 		display: flex;
 		align-items: center;
@@ -104,7 +85,6 @@
 	.qm-field-label {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--_qm-space-half);
 		font-size: var(--_qm-text-label);
 		font-weight: var(--_qm-weight-mid);
 		line-height: var(--_qm-leading-tight);
@@ -116,14 +96,6 @@
 	.qm-field-label.targeted {
 		cursor: pointer;
 	}
-	/* Required marker: the label's own ink, not an alarm; required-ness is guidance,
-	 the document still edits and renders unmet, and the danger hue is a diagnostic's. */
-	.qm-field-required {
-		display: inline-flex;
-		align-items: center;
-		color: var(--_qm-ink-label);
-		line-height: 1;
-	}
 	/* The parked description: in the accessibility tree, out of the layout, and never
 	 a focus stop. Clipped rather than `display: none` / `hidden`, which take a node
 	 out of the tree entirely and would make the `aria-describedby` dangle. Out of

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

@@ -9,8 +9,6 @@ interface Props {
     descriptionId?: string;
     /** Focus handoff for a control `for` cannot reach; a label click calls it. */
     onActivate?: () => void;
-    /** No-default field → a persistent required `*`. */
-    required?: boolean;
     /** Schema `description`, or undefined: the affordance renders only when set. */
     description?: string;
 }