@quillmark/svelte 0.27.0 → 0.28.0

package/dist/preview/zoom.d.ts

@@ -1,45 +1,40 @@
 import type { PageSize } from '@quillmark/wasm';
-/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt, a PDF viewer's actual
- *  size. */
+/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt. */
 export declare const ACTUAL: number;
 /** The furthest a gesture zooms in. */
 export declare const MAX_ZOOM = 2;
-/** What `Mod +` and `Mod −` step through: a subset of the levels a browser's own zoom
- *  keys land on, so a step lands somewhere a reader has been before. */
+/** What `Mod +` and `Mod −` step through. */
 export declare const STEPS: readonly [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
 /** The pane's content box, in CSS px. */
 export interface Pane {
     width: number;
     height: number;
 }
-/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. A
- *  portrait-only document lands at the pane's width, as a narrow pane always drew it. */
+/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. */
 export declare function fitZoom(pages: readonly PageSize[], pane: Pane): number;
-/** The furthest a gesture zooms out: every page fits the pane whole with
- *  {@link FLOOR_FILL} of it filled on the page's limiting axis, and never past the
- *  default, which on a pane past the cap is already smaller than that. */
+/**
+ * The furthest a gesture zooms out: every page fits the pane whole with {@link FLOOR_FILL} filled
+ * on its limiting axis, and never past the default.
+ */
 export declare function floorZoom(pages: readonly PageSize[], pane: Pane): number;
 export declare function clampZoom(zoom: number, floor: number): number;
-/** The next level in `dir` from `zoom`, `fit` among them, skipping levels under `floor`.
- *  From between two levels the first press lands on the nearer one in that direction;
- *  past the last level above the floor, the floor. Half a percent of slack, so a zoom
- *  shown as a level is at it. */
+/**
+ * The next level in `dir` from `zoom`, skipping levels under `floor`; past the last, the floor.
+ * Half a percent of slack, so a zoom shown as a level is at it.
+ */
 export declare function stepZoom(zoom: number, dir: 1 | -1, floor: number, fit: number): number;
 /**
- * A continuous gesture's run: the zoom its events have asked for (`raw`), what it shows,
- * and, while it shows a hold, how far past the hold the events have carried (`slack`, a
- * log of the ratio). The run moves `shown` by each event's ratio rather than snapping
- * `raw`, so a trackpad's small deltas carry it out of a hold as smoothly as they carried
- * it in.
+ * A continuous gesture's run: the zoom its events asked for (`raw`), what it shows, and while it
+ * shows a hold, how far past it the events have carried (`slack`, a log of the ratio).
  */
 export interface Glide {
     raw: number;
     shown: number;
     slack: number;
 }
-/** One event of a continuous gesture, carrying the run to `raw`. It stops at `fit` or
- *  100% when it crosses one, at the first it meets, so one wheel notch across either
- *  stops there; it leaves a hold once carried {@link DETENT} past, moving on from the
- *  hold rather than jumping to where the events would have put it. 100% gives way to a
- *  `fit` within the detent of it: two holds that close would pin the run between them. */
+/**
+ * One event of a continuous gesture, carrying the run to `raw`. It stops at the first of `fit` or
+ * 100% it crosses, and leaves a hold once carried {@link DETENT} past. 100% gives way to a `fit`
+ * within the detent of it.
+ */
 export declare function glide(run: Glide, raw: number, floor: number, fit: number): Glide;

package/dist/preview/zoom.js

@@ -1,30 +1,31 @@
-/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt, a PDF viewer's actual
- *  size. */
+/** CSS px per PDF pt at 100%: 96 CSS px to the inch over 72 pt. */
 export const ACTUAL = 96 / 72;
-/** The default never draws a page larger than this, so a wide pane shows a sheet at a
- *  size print would recognise rather than one stretched to the pane. */
+/** The default never draws a page larger than this. */
 const FIT_CAP = 1.25;
 /** The furthest a gesture zooms in. */
 export const MAX_ZOOM = 2;
-/** How much of the pane the page still fills, on its limiting axis, at the furthest a
- *  gesture zooms out: the whole page in view with a thin margin, and never a stamp. */
+/**
+ * How much of the pane the page still fills, on its limiting axis, at the furthest a gesture zooms
+ * out.
+ */
 const FLOOR_FILL = 0.9;
-/** What `Mod +` and `Mod −` step through: a subset of the levels a browser's own zoom
- *  keys land on, so a step lands somewhere a reader has been before. */
+/** What `Mod +` and `Mod −` step through. */
 export const STEPS = [0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
-/** How far, as a log of the zoom's ratio to a hold, a continuous gesture carries past it
- *  before it leaves it: a ratio, so a hold is as wide at a phone's fit as at 100%. */
+/**
+ * How far, as a log of the zoom's ratio to a hold, a continuous gesture carries past it before it
+ * leaves it.
+ */
 const DETENT = 0.04;
 const near = (zoom, hold) => Math.abs(Math.log(zoom / hold)) <= DETENT;
-/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. A
- *  portrait-only document lands at the pane's width, as a narrow pane always drew it. */
+/** The default: the widest page fits the pane's width, capped at {@link FIT_CAP}. */
 export function fitZoom(pages, pane) {
     const widest = Math.max(...pages.map((p) => p.widthPt));
     return Math.min(pane.width / (widest * ACTUAL), FIT_CAP);
 }
-/** The furthest a gesture zooms out: every page fits the pane whole with
- *  {@link FLOOR_FILL} of it filled on the page's limiting axis, and never past the
- *  default, which on a pane past the cap is already smaller than that. */
+/**
+ * The furthest a gesture zooms out: every page fits the pane whole with {@link FLOOR_FILL} filled
+ * on its limiting axis, and never past the default.
+ */
 export function floorZoom(pages, pane) {
     const whole = Math.min(...pages.map((p) => Math.min(pane.width / p.widthPt, pane.height / p.heightPt)));
     return Math.min((FLOOR_FILL * whole) / ACTUAL, fitZoom(pages, pane));
@@ -32,16 +33,16 @@ export function floorZoom(pages, pane) {
 export function clampZoom(zoom, floor) {
     return Math.min(MAX_ZOOM, Math.max(floor, zoom));
 }
-/** The levels a step lands on: `STEPS` with `fit` among them, which takes the
- *  place of any level within {@link DETENT} of it, since fit is the one that follows the
- *  pane. */
+/**
+ * The levels a step lands on: `STEPS` with `fit` replacing any level within {@link DETENT} of it.
+ */
 function stops(fit) {
     return [...STEPS.filter((s) => !near(s, fit)), fit].sort((a, b) => a - b);
 }
-/** The next level in `dir` from `zoom`, `fit` among them, skipping levels under `floor`.
- *  From between two levels the first press lands on the nearer one in that direction;
- *  past the last level above the floor, the floor. Half a percent of slack, so a zoom
- *  shown as a level is at it. */
+/**
+ * The next level in `dir` from `zoom`, skipping levels under `floor`; past the last, the floor.
+ * Half a percent of slack, so a zoom shown as a level is at it.
+ */
 export function stepZoom(zoom, dir, floor, fit) {
     const levels = stops(fit);
     const next = dir > 0
@@ -49,11 +50,11 @@ export function stepZoom(zoom, dir, floor, fit) {
         : levels.reverse().find((s) => s < zoom - 0.005 && s >= floor);
     return clampZoom(next ?? (dir > 0 ? MAX_ZOOM : floor), floor);
 }
-/** One event of a continuous gesture, carrying the run to `raw`. It stops at `fit` or
- *  100% when it crosses one, at the first it meets, so one wheel notch across either
- *  stops there; it leaves a hold once carried {@link DETENT} past, moving on from the
- *  hold rather than jumping to where the events would have put it. 100% gives way to a
- *  `fit` within the detent of it: two holds that close would pin the run between them. */
+/**
+ * One event of a continuous gesture, carrying the run to `raw`. It stops at the first of `fit` or
+ * 100% it crosses, and leaves a hold once carried {@link DETENT} past. 100% gives way to a `fit`
+ * within the detent of it.
+ */
 export function glide(run, raw, floor, fit) {
     const holds = near(fit, 1) ? [fit] : [fit, 1];
     const step = Math.log(raw / run.raw);

package/dist/visual/ArrayField.svelte

@@ -652,6 +652,27 @@
 		if (!drag?.engaged || drag.drop !== k || drag.drop === drag.k) return undefined;
 		return drag.drop > drag.k ? 'after' : 'before';
 	}
+
+	/** Whether cells stand past the table scroller's end edge, under the pinned remove,
+	 *  which is what the fade before the remove draws on. */
+	let tableOverflow = $state(false);
+	/** The head row spans every track, so its box is the content width a new row or a
+	 *  longer cell changes. */
+	function trackOverflow(el: HTMLElement): () => void {
+		const measure = () => {
+			tableOverflow = el.scrollWidth - el.clientWidth - Math.abs(el.scrollLeft) > 1;
+		};
+		measure();
+		el.addEventListener('scroll', measure, { passive: true });
+		const observer =
+			typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
+		observer?.observe(el);
+		if (el.firstElementChild) observer?.observe(el.firstElementChild);
+		return () => {
+			el.removeEventListener('scroll', measure);
+			observer?.disconnect();
+		};
+	}
 </script>
 
 <div
@@ -691,7 +712,12 @@
 			data-default={defaulted ? '' : undefined}
 			bind:this={rowsEl}
 		>
-			<div class="qm-array-table-scroller" style:--table-cols={columns.length}>
+			<div
+				class="qm-array-table-scroller"
+				data-overflow={tableOverflow ? '' : undefined}
+				style:--table-cols={columns.length}
+				{@attach trackOverflow}
+			>
 				<!-- 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
 				     guidance affordance rides the header, being the column's rather than any
@@ -1072,27 +1098,21 @@
 	 The distance inside an open row is the list's own, and the row then takes a rung of
 	 air from the rows either side of it, so what it unfolded is nearer the summary it
 	 hangs off than the sibling below. The wider distance on the inside is the inversion:
-	 a subform reading as the next row's preamble. A variant spends the wider rung on the
-	 same join and needs no such guard, a field carrying one control and no siblings for
-	 its cells to drift toward. */
+	 a subform reading as the next row's preamble. A variant takes the same distance and
+	 needs no such guard, a field carrying one control and no siblings for its cells to
+	 drift toward. */
 	.qm-element {
 		row-gap: var(--_qm-space);
 	}
 	.qm-element.open {
 		margin-block: var(--_qm-space);
 	}
-	/* The inline distance is the stacker's too, and here it is a rung: the summary stands
-	 for the row rather than being a cell of it, so its subform's vertical takes the
-	 disclosure's own column — `--_qm-nest` in, the distance every stroke on the ladder
-	 keeps from the one outside it (ARCHITECTURE §"A plane is a tone"). Flush with the
-	 row's edge that stroke is collinear with the box above it and with the sibling row
-	 below, so a row's cells read as the list's own rung and the content of an open row
-	 stands outboard of the chevron that opened it. A variant's cells and a matrix's
-	 columns keep the flush edge: those sit beside the discriminant and the tick they are
-	 stored with, not under them. */
-	.qm-element > :global(.qm-object) {
-		margin-inline-start: var(--_qm-nest);
-	}
+	/* No inline distance: the subform's vertical hangs at the row's edge, under the
+	 summary that unfolded it, as a variant's cells hang at the discriminant's and a
+	 matrix's columns at the tick's. Every vertical hangs at the edge of the control it
+	 unfolds from, so a step in is one nesting distance wherever it is read, the
+	 `--_qm-nest` the subform keeps from its own stroke (ARCHITECTURE §"A plane is a
+	 tone"); a second rung here read as a deeper level than the object the row holds. */
 	/* The slabs measure the head, not the row: an open element is the head plus
 	 everything it unfolded, and the controls belong to the line they sit on rather than
 	 to all of that. Positioned, so `.qm-row-actions` anchors here. */
@@ -1123,6 +1143,7 @@
 	.qm-element-summary :global(.qm-el-chevron) {
 		flex-shrink: 0;
 		display: block;
+		stroke-width: var(--_qm-glyph-stroke);
 		color: var(--_qm-ink-label);
 		transform: rotate(0deg);
 		transform-origin: center;
@@ -1130,6 +1151,9 @@
 			transform var(--_qm-duration-slow) var(--_qm-ease-reverse),
 			color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
+	.qm-element-summary :global(.qm-el-chevron > *) {
+		vector-effect: non-scaling-stroke;
+	}
 	.qm-element-summary:hover :global(.qm-el-chevron),
 	.qm-element.open > .qm-element-head :global(.qm-el-chevron) {
 		color: var(--_qm-ink);
@@ -1251,6 +1275,28 @@
 		background: var(--_qm-surface);
 		box-shadow: 0 0 0 var(--_qm-ring-reach) var(--_qm-surface);
 	}
+	/* While cells stand past the end edge, the slab fades them in over a step before it
+	 rather than cutting them at its edge: the column the cut hides is still there. */
+	.qm-array-table-row > .qm-remove::before,
+	.qm-array-table-head-end::before {
+		content: '';
+		position: absolute;
+		inset-block: calc(-1 * var(--_qm-ring-reach));
+		inset-inline-end: calc(100% + var(--_qm-ring-reach));
+		width: var(--_qm-space-3);
+		background: linear-gradient(to right, transparent, var(--_qm-surface));
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	.qm-array-table-row > .qm-remove:dir(rtl)::before,
+	.qm-array-table-head-end:dir(rtl)::before {
+		background: linear-gradient(to left, transparent, var(--_qm-surface));
+	}
+	.qm-array-table-scroller[data-overflow] > .qm-array-table-row > .qm-remove::before,
+	.qm-array-table-scroller[data-overflow] .qm-array-table-head-end::before {
+		opacity: 1;
+	}
 	/* The glyph stands on the row's first line with the cells, however far the slab
 	 stretches under it. */
 	.qm-array-table-row > .qm-remove {
@@ -1261,6 +1307,17 @@
 		border-radius: var(--_qm-radius-inner);
 		color: var(--_qm-ink-label);
 	}
+	/* The pad past the slab, flat: the plane's spread above rounds with the slab's
+	 corners, and a cell scrolled under them shows through at the clip. */
+	.qm-array-table-row > .qm-remove::after,
+	.qm-array-table-head-end::after {
+		content: '';
+		position: absolute;
+		inset-block: calc(-1 * var(--_qm-ring-reach));
+		inset-inline-start: 100%;
+		width: var(--_qm-ring-reach);
+		background: var(--_qm-surface);
+	}
 	/* The label line's own type: size, weight and leading are `.qm-field-label`'s, so
 	 the two read as one register. Inner radius: the chip family is the card's, and this
 	 box is a line of type. The chip's tap floor is given back (`.qm-tap-floor`),
@@ -1273,6 +1330,10 @@
 		line-height: var(--_qm-leading-tight);
 		border-radius: var(--_qm-radius-inner);
 		opacity: var(--_qm-opacity-idle);
+		transition:
+			opacity var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			background-color var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
 	.qm-add-el:hover:not(:disabled),
 	.qm-add-el:focus-visible {

package/dist/visual/BooleanField.svelte

@@ -78,8 +78,13 @@
 
 <style>
 	/* The switch stands on the first line of the boxes beside it: a row of controls tops
-	 out together, and a mark carries no line of its own to sit on. */
+	 out together, and a mark carries no line of its own to sit on.
+
+	 One length, the thumb's, and the track is two of them around the inset: the travel
+	 is a thumb's width at every setting of `--qm-space`, where a track sized apart from
+	 its inset ran the checked thumb into the end cap as the inset grew. */
 	.qm-toggle-wrap {
+		--thumb: 0.75rem;
 		display: flex;
 		align-items: center;
 		min-height: var(--_qm-box-line);
@@ -94,15 +99,17 @@
 	.qm-toggle-wrap :global(.qm-toggle) {
 		display: inline-flex;
 		align-items: center;
-		width: 1.75rem;
-		height: 1rem;
+		width: calc(2 * var(--thumb) + 2 * var(--_qm-space-half));
+		height: calc(var(--thumb) + 2 * var(--_qm-space-half));
 		padding: var(--_qm-space-half);
 		border: none;
 		border-radius: var(--_qm-radius-pill);
 		/* The track is a fill and nothing else: an edge around it would be a second
 		 statement of a shape the tone already draws, and the checked state swaps that
-		 one fill for the accent (ARCHITECTURE §Styling). */
-		background: var(--_qm-surface-hover);
+		 one fill for the accent (ARCHITECTURE §Styling). The fill is the band, a
+		 resting tone: on the hover rung an off switch read as a button under the
+		 pointer. */
+		background: var(--_qm-surface-band);
 		cursor: pointer;
 		transition: background var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
@@ -113,21 +120,27 @@
 		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
-	 a 12px pill is a second box inside the track's. */
+	/* The thumb reads on tone alone, and its tone is what says where it stands: the
+	 label rung over the track's band unchecked, and the base surface over
+	 `--_qm-accent` checked. The card's own tone over the band is a step of about
+	 1.3:1 in light and 1.5:1 in dark, a state indicator under WCAG 1.4.11's 3:1; the
+	 label rung clears it at both, at 4.6:1 and 3.3:1. No edge of its own: a hairline
+	 around a 12px pill is a second box inside the track's. */
 	.qm-toggle-wrap :global(.qm-toggle-thumb) {
-		width: 0.75rem;
-		height: 0.75rem;
+		width: var(--thumb);
+		height: var(--thumb);
 		border-radius: var(--_qm-radius-pill);
-		background: var(--_qm-surface);
-		transition: translate var(--_qm-duration-fast) var(--_qm-ease-reverse);
+		background: var(--_qm-ink-label);
+		transition:
+			translate var(--_qm-duration-fast) var(--_qm-ease-reverse),
+			background var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
 	.qm-toggle-wrap :global(.qm-toggle-thumb[data-state='checked']) {
-		translate: 0.75rem;
+		translate: var(--thumb);
+		background: var(--_qm-surface);
 	}
 	/* Unset, the thumb stands at neither end: halfway along its travel. */
 	.qm-toggle-wrap[data-unset] :global(.qm-toggle-thumb) {
-		translate: 0.375rem;
+		translate: calc(var(--thumb) / 2);
 	}
 </style>

package/dist/visual/Card.svelte

@@ -122,7 +122,8 @@
 	}
 
 	/** Not `--_qm-glyph-control`: that rung centres a glyph in a tap target, where this
-	 * one stands in a run of text at the body rung and is sized to sit level with it. */
+	 * one stands in a run of text at the body rung and is sized to sit level with it. It
+	 * strokes at the control glyph's weight (`--_qm-glyph-stroke`). */
 	const CHEVRON = 16;
 
 	const ungrouped = $derived(card.sections.filter((s) => s.group == null));
@@ -428,15 +429,18 @@
 {/snippet}
 
 <style>
-	/* An island: the card is the base plane, the column behind it the sunken one, and the
-	 hairline closes it (ARCHITECTURE §Styling). The block half is the same rung as the
-	 gap: the payload stands that far off the card's edge and off the body below it. The
-	 header insets itself to the section-heading column (`.qm-card-header`). The inline
-	 half stands a step tighter than the nesting rung the verticals inside keep: this
-	 edge closes the block rather than nesting one, and the rules it holds run that much
-	 further for it. */
+	/* An island: the card is the base plane and the column behind it the sunken one, and
+	 the step between the two tones is the whole of its edge (ARCHITECTURE §"A plane is a
+	 tone"). The block half is the same rung as the gap: the payload stands that far off
+	 the card's edge and off the body below it. The header insets itself to the
+	 section-heading column (`.qm-card-header`). The inline half stands a step tighter
+	 than the nesting rung the verticals inside keep: this edge closes the block rather
+	 than nesting one, and the rules it holds run that much further for it.
+
+	 Inside that inset is the card's one text column (`--_qm-column`): the title, a
+	 top-level field, the body's lines, the recovery note and the delete glyph's far edge
+	 all stand on it, so the card reads as one measure at both ends. */
 	.qm-card {
-		border: var(--_qm-border-width) solid var(--_qm-border);
 		border-radius: var(--_qm-radius);
 		padding: var(--_qm-space-3) var(--_qm-space-2);
 		background: var(--_qm-surface);
@@ -463,10 +467,9 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: var(--_qm-space-2);
-		/* The group's vertical plus the rung the chevron stands off it: the title
-		 shares that column. Inline only. The block pull is half the card's block
-		 inset, so the header sits that far off the hairline and the rule. */
-		padding-inline: calc(var(--_qm-space) + var(--_qm-vertical-width));
+		/* On the column, inline only. The block pull is half the card's block inset,
+		 so the header sits that far off the card's edge and the rule. */
+		padding-inline: var(--_qm-column);
 		margin-block: calc(-1 * var(--_qm-space-3) / 2);
 	}
 	.qm-card-header-right {
@@ -500,9 +503,9 @@
 	 overlaid input tracks its content width. Both carry the same nothing for a box model
 	 and inherit the same type tokens, which is what makes the two measure alike.
 
-	 The type is the group header's, down to the ink and its hover step below: a card
-	 title and a section header both name a block of fields, so they read as one register
-	 and what ranks them is position rather than a size step. */
+	 The type is the group header's: a card title and a section header both name a block
+	 of fields, so they read as one register and what ranks them is position rather than
+	 a size step. */
 	.qm-card-title-sizer {
 		display: inline-grid;
 		align-items: center;
@@ -521,9 +524,9 @@
 		min-width: 2ch;
 	}
 	/* The title draws no box in any state: a card title is already the one line that
-	 reads as the card's name, and the region's `cursor: text` says the rest. The ink step
-	 replaces it, the same cue the group header takes — a wide borderless target has no
-	 other way to answer the pointer. */
+	 reads as the card's name, and the region's `cursor: text` answers the pointer. A
+	 typed title is a value, at the ink, and the automatic one a placeholder, at label
+	 ink, as in every field. */
 	.qm-card-title {
 		grid-area: 1 / 1;
 		width: 100%;
@@ -531,18 +534,12 @@
 		font: inherit;
 		/* `font: inherit` does not carry colour: a form control defaults to the UA's own
 		 text colour rather than the header's ink without this line. */
-		color: var(--_qm-ink-label);
+		color: var(--_qm-ink);
 		border: none;
 		padding: 0;
 		background: transparent;
-		transition: color var(--_qm-duration-fast) var(--_qm-ease-reverse);
 	}
-	.qm-card-title:hover,
-	.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. */
+	/* The label ink every placeholder takes rather than the UA's grey. */
 	.qm-card-title::placeholder {
 		color: var(--_qm-ink-label);
 		opacity: 1;
@@ -591,11 +588,10 @@
 	 vertical those two edges hold.
 
 	 No stroke: a vertical would mark a section a reader has no name for. The start
-	 inset is the heading's — the group's vertical plus the rung the chevron stands
-	 off it — so a top-level field and a section heading share a column. */
+	 inset is the column, so a top-level field and a section heading share it. */
 	.qm-section {
 		padding-block: var(--_qm-space);
-		padding-inline-start: calc(var(--_qm-space) + var(--_qm-vertical-width));
+		padding-inline-start: var(--_qm-column);
 	}
 	/* Where it faces a rule, the rung a heading already stands off one. The fields
 	 sit on the heading column, not the card's edge. */
@@ -622,8 +618,8 @@
 	}
 	/* The nesting vertical, one `--_qm-nest` in from the card's edge with the panel's
 	 fields the same rung off it (ARCHITECTURE §"A plane is a tone"). `--_qm-border` and
-	 not `--_qm-accent`: a card's edge and the verticals inside it are one stroke at three
-	 depths, and a tone that changed as it went in would read as unrelated lines rather
+	 not `--_qm-accent`: the verticals and the rules beside them are one stroke at every
+	 depth, and a tone that changed as it went in would read as unrelated lines rather
 	 than one figure. A named section is what earns it, which is why the ungrouped block
 	 above draws none.
 
@@ -684,17 +680,10 @@
 	 the accordion stops looking like structure. Size, weight and leading sit after
 	 `font`, a shorthand that carries `line-height`. */
 	.qm-group-header {
-		/* Positioned, and paint is not what it buys: a group's box grows by
-		 `--stroke-reach` at both ends and hands the growth back as margin, so
-		 consecutive boxes overlap in a band at every seam, and a closed group's header
-		 ends inside the next group's box. In flow, the later sibling takes the presses
-		 that land in the band and the bottom of the header is a dead strip; positioned,
-		 the control holds its own box, and the band paints the same either way. */
-		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space);
-		width: 100%;
+		min-width: 0;
 		border: none;
 		background: transparent;
 		padding: var(--_qm-space) 0 var(--_qm-space) var(--_qm-space);
@@ -709,17 +698,26 @@
 	}
 	/* The header row: the press target, and beside it the guidance marker a headed
 	 section carries (`FieldHint`), which is its own control and so not inside the
-	 button. Positioned for the reason the header is, the row being the box that
-	 stands in the band. */
+	 button. The button sizes to its text so the marker follows the name, and its
+	 `::after` spans the row so the whole row still presses it; the marker, positioned
+	 by its tap floor and later in the row, stands over that plane.
+
+	 Positioned, and paint is not what it buys: a group's box grows by `--stroke-reach`
+	 at both ends and hands the growth back as margin, so consecutive boxes overlap in a
+	 band at every seam, and a closed group's header ends inside the next group's box.
+	 In flow, the later sibling takes the presses that land in the band and the bottom
+	 of the header is a dead strip; positioned, the row holds its own box, and the band
+	 paints the same either way. */
 	.qm-group-head {
 		position: relative;
 		display: flex;
 		align-items: center;
 		gap: var(--_qm-space);
 	}
-	.qm-group-head > .qm-group-header {
-		flex: 1;
-		min-width: 0;
+	.qm-group-header::after {
+		content: '';
+		position: absolute;
+		inset: 0;
 	}
 	/* The parked description: `FieldLabel`'s recipe, for the one description a
 	 header rather than a label parks. */
@@ -734,10 +732,14 @@
 	.qm-group-header :global(.qm-group-chevron) {
 		flex-shrink: 0;
 		display: block;
+		stroke-width: var(--_qm-glyph-stroke);
 		transform: rotate(0deg);
 		transform-origin: center;
 		transition: transform var(--_qm-duration-slow) var(--_qm-ease-reverse);
 	}
+	.qm-group-header :global(.qm-group-chevron > *) {
+		vector-effect: non-scaling-stroke;
+	}
 	/* Open shares hover's ink step: a big borderless target draws no box, so the ink is
 	 the only cue an open section keeps once the pointer leaves it. The chevron's
 	 rotation is the other cue, and stays open-only below. */
@@ -792,9 +794,17 @@
 		flex-direction: column;
 		gap: var(--_qm-space);
 	}
-	/* The state is in the stroke's pattern, every card being closed by one already. */
+	/* Paper's margin is the column. On the editable, so a press in the strip lands a
+	 caret; carried by the leaf's inset it would be dead width. The diagnostics under the
+	 body start where its lines do, as a field's start under its well. */
+	.qm-body-leaf :global(.ProseMirror),
+	.qm-body-leaf > :global(.qm-diag-list) {
+		padding-inline: var(--_qm-column);
+	}
+	/* The one card that draws an edge, and the edge is the state: a dashed stroke is the
+	 placeholder idiom, which a card the schema cannot project is. */
 	.qm-card.qm-unschemable {
-		border-style: dashed;
+		border: var(--_qm-border-width) dashed var(--_qm-border);
 	}
 	/* One typographic role with the editable title above. */
 	.qm-card-title-static {
@@ -807,6 +817,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--_qm-space-2);
+		padding-inline: var(--_qm-column);
 	}
 	.qm-recovery-note {
 		margin: 0;
@@ -820,9 +831,11 @@
 		font-size: var(--_qm-text-label);
 		color: var(--_qm-ink-label);
 	}
-	/* The one native control the surface draws, on the box's own recipe (controls.css). */
+	/* The one native control the surface draws, on the box's own recipe (controls.css).
+	 `font` carries no colour, so the value's ink is restated over the UA's. */
 	.qm-recovery-retype select {
 		font: inherit;
+		color: var(--_qm-ink);
 		border: none;
 		border-radius: var(--_qm-radius-inner);
 		background: var(--_qm-surface-well);

package/dist/visual/CardControls.svelte

@@ -3,7 +3,7 @@
   Right-aligned in the header: a move-up/move-down chevron pair (each disabled at its
   edge), then delete, the row revealed while the pointer or the caret is in the card.
   Reorder is buttons, not drag (V1). All three are chips (controls.css): fill arrives
-  on hover, and delete draws faded danger, full under the pointer. The card scopes
+  on hover, and delete rests at the label ink beside them. The card scopes
   that reveal, so its condition lives in the parent's CSS; the row keeps the narrower
   guarantee here, that a focused control is a visible one.
 -->
@@ -80,18 +80,12 @@
 		height: var(--_qm-tap-min);
 		padding: 0;
 	}
-	/* Hover fill comes from `.qm-chip` (controls.css). Idle recede is on the ink,
-	 not the box: a layer on the chip is two rasters of the same stroke, and the
-	 fill has to stay opaque. Danger mixed to the idle rung; full under the pointer. */
-	.qm-card-delete {
-		color: color-mix(
-			in oklab,
-			var(--_qm-danger) calc(100% * var(--_qm-opacity-idle)),
-			var(--_qm-surface)
-		);
-	}
+	/* The delete rests at the chip's label ink, as an array row's and a matrix member's
+	 remove do, and under the pointer or the focus takes their danger tint and ink in
+	 place of the chip's hover fill. */
 	.qm-card-delete:hover,
 	.qm-card-delete:focus-visible {
+		background: var(--_qm-danger-tint);
 		color: var(--_qm-danger);
 	}
 </style>