@quillmark/svelte 0.26.2 → 0.28.0

package/dist/core/theme.css

@@ -101,11 +101,10 @@
 	--_qm-font-mono: var(--qm-font-mono, ui-monospace, monospace);
 
 	/* ── Colour ──────────────────────────────────────────────────────────────
-	   Ink steps fg → bg, the border and hover rungs step bg → fg, all mixed in
-	   oklab; sRGB muddies the mid-tones and the label/meta/border rungs are
-	   exactly mid-tone. So inverting the poles inverts that half of the scale.
-	   The percentages are calibrated to the light-mode literals they stand in
-	   for (17% ≈ #d4d4d4, 35% ≈ #555).
+	   Ink steps fg → bg and the hover rung steps bg → fg, both mixed in oklab;
+	   sRGB muddies the mid-tones and the label rung is exactly mid-tone. So
+	   inverting the poles inverts that half of the scale. The percentages are
+	   calibrated to the light-mode literals they stand in for (35% ≈ #555).
 
 	   Planes are the half that does not read the ink pole, because what makes a
 	   card read as a card is that it is the brighter plane, in both schemes
@@ -115,57 +114,68 @@
 	   light, and the base plane — a card, the preview's paper — is the pole
 	   itself.
 
-	   Two planes sink. `sunken` is the ground — the column behind the cards, the
-	   desk behind the sheets — and lifting the plane above it takes very little
-	   at the light pole. `well` is the hole cut into a card: a field, the one
-	   native select, neither of which draws an edge, so the step is the whole of
-	   what says a value is typed there. The order at the
-	   light pole is card, ground, well; at the dark pole the two sink to within
-	   a channel of each other, which is where a card with little light left to
-	   give up leaves them.
+	   One plane sinks, in two roles. `well` is the hole cut into a card: a field,
+	   the one native select, neither of which draws an edge, so the step is the
+	   whole of what says a value is typed there. `sunken` is the ground — the
+	   column behind the cards, the desk behind the sheets — and it is the same
+	   tone: a card draws no edge either, so the step off the ground is the whole
+	   of where one card stops and the next starts, and the well's step is one
+	   that carries that at the light pole. The order is card, then ground
+	   and well together, at both poles.
 
-	   How far each sinks is a function of the card's own L, not of the scheme the
+	   How far it sinks is a function of the card's own L, not of the scheme the
 	   host declared: a dark surface has to spend more of what little it has
 	   before the card above it reads as lifted, so the two calibrated distances
-	   — 0.0214 off white, 0.0553 off the dark default — interpolate linearly
+	   — 0.04 off white, 0.0547 off the dark default — interpolate linearly
 	   between. A card pinned at neither pole takes a proportionate step whatever
 	   `color-scheme` says, which is the half of the derivation that reads a
 	   colour rather than a declaration.
 
-	   Both sink by subtraction where every other rung mixes: a mix toward black
+	   It sinks by subtraction where every other rung mixes: a mix toward black
 	   is a ratio, so it scales what it takes and pulls the result toward
 	   neutral, and a ground is a fixed distance. `a b` pass through, so the
 	   plane keeps the pole's hue and a turned `--qm-bg` tints it. The defaults
-	   land within a channel of `#f7f8f9` and `#1a1a1b`. Below L ≈ 0.065 the
-	   ground clamps to black, which is where a near-black card leaves no room
+	   land within a channel of `#f2f2f2` and `#1a1a1c`. Below L ≈ 0.06 the
+	   plane clamps to black, which is where a near-black card leaves no room
 	   for a ground of its own. */
 	--_qm-surface: var(--_qm-bg);
-	--_qm-surface-sunken: oklab(from var(--_qm-bg) calc(l - (0.0214 + 0.0467 * (1 - l))) a b);
 	--_qm-surface-well: oklab(from var(--_qm-bg) calc(l - (0.04 + 0.0202 * (1 - l))) a b);
+	--_qm-surface-sunken: var(--_qm-surface-well);
 	/* `raised` is the same ramp spelled as a mix, its step 0.08 × (1 − l): the light
 	   arm is zero, a white card having nowhere further to go, so a floating surface
 	   separates on its hairline and `--_qm-lift` there and the step joins them in
 	   dark. */
 	--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), #fff 8%);
-	--_qm-surface-hover: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 8%);
-	/* A band laid on the card rather than cut into it: a table's header, and the pill a
-	   grip draws. It steps toward the ink at both poles, a shade under white in light
-	   and a shade over the card in dark, where `well` sinks to a black stripe. */
-	--_qm-surface-band: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%);
-	/* The one rung whose arms are not a single ratio: a stroke is read against what it
-	   separates, and the mix that reads as a hairline on the dark default draws the
-	   light card in a line heavier than the type it frames. The light arm is
-	   calibrated rather than derived, which makes this the one rung under the poles
-	   that reads the declared scheme rather than only the colours it resolves to. */
+	/* A step toward the ink laid over whatever plane is under it, rather than a tone off
+	   the card: a hover lands on the card, a well, a band and a floating surface, and a
+	   fixed tone stepped off the first sits level with `raised` in dark. Translucent, as
+	   the accent's tint is, so the step is the same over each. */
+	--_qm-surface-hover: color-mix(in oklab, var(--_qm-fg) 8%, transparent);
+	/* A band laid on the card rather than cut into it: a table's header, the pill a
+	   grip draws, the off switch's track and the unticked box. A resting fill, where
+	   `hover` above is a state, so the two have to be told apart on a card that shows
+	   both at once: each arm stands one ground step past the hover step at its pole,
+	   which lands the band two steps off the card in dark and a little over in light.
+	   It steps toward the ink at both poles, a shade under white in light and a shade
+	   over the card in dark, where `well` sinks to a black stripe. */
+	--_qm-surface-band: light-dark(
+		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 12%),
+		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 18%)
+	);
+	/* The one stroke: a card's two horizontals, a section's and a subform's verticals,
+	   a table's frame and the lines between its cells, a floating surface's edge, the
+	   popover's divider. One and a half ground steps off the card at both poles, the
+	   same derivation the well takes, so a hairline stands off the card by the same
+	   measure a card stands off the ground whatever the scheme. Toward the ink, which
+	   is the half of the step `light-dark()` carries: the well always sinks, a stroke
+	   darkens a light card and lightens a dark one. On the defaults the arms land near
+	   #ececec and #3b3c3e. The multiple is the whole calibration: at it a stroke reads
+	   in light without outweighing the type beside it, and reads in dark without being
+	   the loudest line on the card. */
 	--_qm-border: light-dark(
-		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 6%),
-		color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 17%)
+		oklab(from var(--_qm-bg) calc(l - 1.5 * (0.04 + 0.0202 * (1 - l))) a b),
+		oklab(from var(--_qm-bg) calc(l + 1.5 * (0.04 + 0.0202 * (1 - l))) a b)
 	);
-	/* A stroke ruled through content rather than round it: a table's frame and every
-	   line between its cells. The light arm of `border` is a card's edge against the
-	   ground, and drawn between lines of type it vanishes, so a grid takes one ratio at
-	   both poles, which lands within a few points of `border` in dark. */
-	--_qm-rule: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 14%);
 	/* Three rungs, and nothing under the last: a step below `label` lands under 3:1 on
 	   the well a field draws it against, and what would take it — an unset value's word,
 	   an invitation — is content a reader has to read (WCAG 1.4.3), not decoration.
@@ -259,7 +269,7 @@
 	   only up to the point where it is assembled. One width: focus is the only
 	   state that draws a ring anywhere, so there is no held-back tier under it.
 	   Sub-pixel, because at two it reads as a second border on a card whose every
-	   other edge is a hairline. */
+	   other stroke is a hairline. */
 	--_qm-ring-width: 1.5px;
 	/* Every ring the surface draws, focus and selection alike, which is why the name
 	   carries neither. Assembled here because the parts spelled out at a use site pass
@@ -296,17 +306,17 @@
 
 	/* ── Geometry ──────────────────────────────────────────────────────────*/
 	/* One stroke width for every edge the chrome draws and every rule it ranks
-	   with: a card's, a control's, the two closing a card's payload. A threshold
-	   rather than a rhythm choice, like the tap floor: a hairline is a hairline at
-	   any `--qm-space`, so neither derives from a dial. Both exist as rungs because
+	   with: a control's, a floating surface's, the two closing a card's payload. A
+	   threshold rather than a rhythm choice, like the tap floor: a hairline is a
+	   hairline at any `--qm-space`, so neither derives from a dial. Both exist as rungs because
 	   `check:style`'s border-width axis can only hold a stroke against a token. */
 	--_qm-border-width: 1px;
 	/* Half a step over it, for the verticals alone — a section's, a subform's, a
 	   blockquote's. What a vertical states is depth, and depth is the one thing a
-	   reader has to find in a dense card; the strokes that close a block or rank two
-	   stay at the hairline, so the ladder is what carries the extra weight. Half,
-	   because a whole step reads as a different kind of line rather than the same
-	   one doing more work. */
+	   reader has to find in a dense card; the strokes that rank two or edge a
+	   floating surface stay at the hairline, so the ladder is what carries the extra
+	   weight. Half, because a whole step reads as a different kind of line rather
+	   than the same one doing more work. */
 	--_qm-vertical-width: 1.5px;
 	--_qm-radius: var(--qm-radius, 8px);
 	/* The interior corner, and half is the relationship rather than the number: a
@@ -342,6 +352,15 @@
 	   `check:style`'s rhythm axis sees each of them read a rung, never that they read
 	   the same one — the case `--_qm-inset-control` above is cut for. */
 	--_qm-nest: var(--_qm-space-3);
+	/* The numerals a list marker is given room for: two digits, so a tenth item's number
+	   stands inside the leaf as the first's does. In `ch`, so it tracks the face the
+	   numbers are set in. */
+	--_qm-marker-digits: 2ch;
+	/* The text column, measured in from a block's own inline inset: a section's vertical
+	   plus the rung its heading stands off it, so a heading riding that vertical and a
+	   line beside it start on one edge. A rung for the reason the nesting step is: the
+	   card and the tip tucked under `main` are two components holding one edge. */
+	--_qm-column: calc(var(--_qm-space) + var(--_qm-vertical-width));
 	/* The scroll tail: dead space under the last card, so it can be read at the
 	   middle of a pane rather than at its bottom edge. A fraction of the viewport
 	   rather than a step on the ramp, because what it answers is how far the eye
@@ -358,6 +377,10 @@
 	   rather than through the icon's `size`, so a stylesheet beats the SVG presentation
 	   attribute and one rung is the whole of what a control draws. */
 	--_qm-glyph-control: 14px;
+	/* The stroke a control glyph draws, in screen length: the frame's 2 units of 24 at
+	   the control rung. A glyph drawn at another edge reads it under
+	   `vector-effect: non-scaling-stroke`, so every glyph strokes at one weight. */
+	--_qm-glyph-stroke: calc(var(--_qm-glyph-control) / 12);
 	/* The narrowest track a control that fills its width stays usable in: a table's
 	   column floors at it, rises no further than its content, and a row of them scrolls
 	   sideways rather than crushing a cell. A column drawing a mark takes no floor — a
@@ -374,22 +397,19 @@
 	--_qm-track-prose: calc(var(--_qm-track-min) * 2);
 
 	/* ── Type ────────────────────────────────────────────────────────────────
-	   `--qm-font-size` anchors the chrome rung; 1.125 is the ratio between adjacent
-	   rungs: a step up (title) and one down (label). The ratio and the
-	   weight are fixed conventions, not dials: no consumer tunes a typographic
-	   ratio, and a dial nobody turns is a name every reader still holds. Three chrome
-	   rungs: a second step below `label` lands near 11px, under a size anything here
-	   wants to be read at, and the supporting text that would take it is what `label`
-	   already is. */
+	   `--qm-font-size` anchors the chrome rung and `label` stands one 1.125 step under
+	   it. The ratio and the weight are fixed conventions, not dials: no consumer tunes
+	   a typographic ratio, and a dial nobody turns is a name every reader still holds.
+	   Two chrome rungs: nothing the chrome names ranks above the value it names, a card
+	   title being body at the mid weight, and a second step below `label` lands near
+	   11px, under a size anything here wants to be read at. */
 	--_qm-text-body: var(--qm-font-size, 0.875rem);
-	--_qm-text-title: calc(var(--_qm-text-body) * 1.125);
 	--_qm-text-label: calc(var(--_qm-text-body) / 1.125);
 	/* Paper: the document body answers to the preview's paper where every other
 	   surface here answers to the control beside it, so a rung shared with the chrome
 	   makes a consumer asking for larger prose take larger inputs with it. 16/15 where
 	   the ramp steps at 9/8: small enough to read as a change of register rather than
-	   a rung of hierarchy, and clear of the title rung, which one 9/8 step lands on
-	   exactly. */
+	   a rung of hierarchy. */
 	--_qm-text-paper: calc(var(--_qm-text-body) * 16 / 15);
 	/* Two weights over the regular, and only one of them is chrome. `mid` names
 	   everything the surface names — a card title, a section header, a field

package/dist/index.js

@@ -1,9 +1,4 @@
-// `@quillmark/svelte` root: the substrate, free of any UI framework.
-//
-// The headline surfaces mount from their own subpaths (`@quillmark/svelte/preview`,
-// `/visual`) so a bundler pulls only what an entry reaches; the root
-// re-exports `/core` (the address vocabulary, the error channel, `init`) for a
-// consumer that wants one import for the substrate. It carries no framework code.
-// The `@quillmark/wasm` API is imported from the peer dependency directly, never
-// from here.
+// `@quillmark/svelte` root: the substrate, free of any UI framework. The headline surfaces mount
+// from their own subpaths (`/preview`, `/visual`); the root re-exports `/core` for a consumer that
+// wants one import for the substrate.
 export * from './core/index.js';

package/dist/preset/app.css

@@ -0,0 +1,71 @@
+/* An app's own chrome: the band that names it, the line that signs it, and the one
+   action it exists for. The shell gives a band its row; these give the app's bands their
+   look, for a host whose page is one form rather than a workroom. quillkit's app client
+   wears them, and an author's `app.css` restyles them (THEMING §"The app chrome").
+
+   Specificity zero throughout, as the shell's: a rule of the host's own on the same
+   element wins at any specificity and in any sheet order. `check:style` holds the rank.
+   This file mints nothing. */
+
+/* The head: the plate the title stands on, a hairline under it, and the ink everything on
+   it takes, so a host recolouring the band recolours its name with it. */
+:where(.qm-app-header) {
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	color: var(--qmh-ink);
+	background: var(--qmh-surface);
+	border-block-end: var(--qmh-border-width) solid var(--qmh-border);
+}
+
+/* What the app is called. Display type rather than chrome type: it is the one line on
+   the screen a reader reads as a name. */
+:where(.qm-app-title) {
+	margin: 0;
+	font-size: var(--qmh-text-title);
+	font-weight: var(--qmh-weight-strong);
+	line-height: var(--qmh-leading-tight);
+	color: inherit;
+	overflow-wrap: anywhere;
+}
+
+/* The foot: a line of meta type on the head's plate under a hairline, its links in the
+   line's own ink. The two bands framing the panes stand on one plate. */
+:where(.qm-app-footer) {
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	background: var(--qmh-surface);
+	border-block-start: var(--qmh-border-width) solid var(--qmh-border);
+	font-size: var(--qmh-text-meta);
+	line-height: var(--qmh-leading-tight);
+	color: var(--qmh-ink-meta);
+}
+
+:where(.qm-app-footer a) {
+	color: inherit;
+}
+
+/* The primary action: the one control on the screen that wears the accent, at the touch
+   floor, since it is the press the whole page leads to. */
+:where(.qm-app-primary) {
+	font: inherit;
+	font-size: var(--qmh-text-label);
+	font-weight: var(--qmh-weight-strong);
+	line-height: var(--qmh-leading-tight);
+	min-height: var(--qmh-tap);
+	padding: var(--qmh-space-2) var(--qmh-space-4);
+	color: var(--qmh-on-accent);
+	background: var(--qmh-accent);
+	border: var(--qmh-border-width) solid var(--qmh-accent);
+	border-radius: var(--qmh-radius-inner);
+	cursor: pointer;
+	transition: background-color var(--qmh-duration) var(--qmh-ease-reverse);
+}
+
+:where(.qm-app-primary:hover) {
+	background: var(--qmh-accent-hover);
+}
+
+:where(.qm-app-primary:disabled) {
+	color: var(--qmh-ink-meta);
+	background: var(--qmh-surface-hover);
+	border-color: var(--qmh-border);
+	cursor: default;
+}

package/dist/preset/index.css

@@ -1,10 +1,11 @@
-/* `@quillmark/svelte/preset`, the package's one CSS entry point: the endorsed look for
-   the page a surface is mounted on. Opt-in and side-effect free until imported:
-   the surface barrels pull `core/theme.css` and never this, because this
-   styles the document and nothing may put that in a consumer's page uninvited.
-
-   Two files because one of them is exempt: `scale.css` is where the literals are
-   minted, `recipes.css` is held to reading them. */
+/*
+ * `@quillmark/svelte/preset`, the package's one CSS entry point: the endorsed look for the page a
+ * surface is mounted on. Opt-in: the surface barrels pull `core/theme.css` and never this, because
+ * this styles the document. `scale.css` is where the literals are minted; the rest read them.
+ * `recipes.css` ranks at ordinary specificity, `shell.css` and `app.css` at zero.
+ */
 
 @import './scale.css';
 @import './recipes.css';
+@import './shell.css';
+@import './app.css';

package/dist/preset/recipes.css

@@ -1,17 +1,15 @@
-/* The endorsed look: the rules a host draws around a mounted surface and the shell it
-   mounts one in, as classes it puts on its own elements. The rungs beside this in
-   `scale.css` are the invisible half (a scale alone still leaves a consumer writing
-   every declaration before anything on the page looks like anything), so the recipes
-   are what the preset is for. This file mints nothing; `check:style` runs its axes here.
-
-   These are host classes. They land on the consumer's DOM, never on a mounted root, so
-   they freeze nothing about the surfaces' interior: the reason the package withholds
-   its own internal classes does not reach them.
-
-   Unlayered, deliberately: a layer of the preset's own would put a name in the contract,
-   and unlayered a consumer's rules win over these by ordinary precedence. Ordinary
-   specificity too, not the surfaces' `:where()` zero: a consumer takes these classes on
-   purpose, so a rule of their own beside one is aimed rather than incidental. */
+/*
+ * The endorsed look: the rules a host draws around a mounted surface, as classes it puts on its
+ * own elements. The shell is `shell.css` and an app's chrome `app.css`; the rungs in `scale.css`
+ * are the invisible half. This file mints nothing; `check:style` runs its axes here.
+ *
+ * These are host classes: they land on the consumer's DOM, never on a mounted root, so they freeze
+ * nothing about the surfaces' interior.
+ *
+ * Unlayered, at ordinary specificity (not the surfaces' `:where()` zero): a consumer takes these
+ * classes on purpose, so a rule of their own beside one is aimed rather than incidental, and a
+ * layer of the preset's own would put a name in the contract.
+ */
 
 /* ── The page ──────────────────────────────────────────────────────────────── */
 
@@ -40,156 +38,6 @@
 	max-width: var(--qmh-measure);
 }
 
-/* ── The workspace ─────────────────────────────────────────────────────────── */
-
-/* The rules above dress the page a surface sits on; these four are the shell it is
-   mounted in, a tool where `.qm-page` is a document: the screen an app that mounts two
-   surfaces over one session is, drawn once (ARCHITECTURE §Styling).
-
-   Pinned to the viewport rather than sized to it: a page-height box still leaves the
-   root scroller counting the overflow its panes clip, and a wheel over the chrome drags
-   the whole app off the top. Three bands (a head, the body, an optional foot), and the
-   body takes what is left and may shrink below its content, so the panes in it own
-   their overflow and hold still while their contents move.
-
-   The one column is stated for the same reason the rows are: an implicit track is `auto`,
-   which is sized by what a band holds, and a `.qm-split` under one contributes its items'
-   max-content through its `fr` tracks. The shell would take the width of the widest thing
-   mounted in it instead of the viewport's, and every band would be that wide with the
-   second pane past the edge. A host holding its content to a maximum never sees it; one
-   spending the whole screen sees it on the first surface it mounts. */
-.qm-workspace {
-	position: fixed;
-	inset: 0;
-	display: grid;
-	grid-template-columns: minmax(0, 1fr);
-	grid-template-rows: auto minmax(0, 1fr) auto;
-	overflow: hidden;
-}
-
-/* A gesture past the end of a pane chains out to the viewport and bounces the empty
-   document, which is the last way a pinned shell moves. Conditioned on the workspace, so
-   a host's other routes keep a page's own feel. */
-html:has(.qm-workspace) {
-	overscroll-behavior: none;
-}
-
-/* A band's line: the row a head or a foot puts its parts on, wrapping, centred. That is
-   the whole of it. What a band is made of is the host's: the rule under it, the gutter
-   beside it, and the depth of it, because where a band ends and how tall it stands are
-   page-shell decisions: a site holding its content to a maximum runs the rule past it at
-   its own rhythm, and a one-screen tool has no maximum to hold to. */
-.qm-bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--qmh-space-2) var(--qmh-space-4);
-}
-
-/* Two even tracks for two surfaces, and no resizer, since a divider that can be dragged
-   is a control competing with what it divides. Each track may shrink below its content,
-   which is what lets the frame in it clip rather than grow.
-
-   The gap is the endorsed default and not a fact about splitting: two surfaces standing
-   apart on a page read as two things, which is what a host showing its instruments wants.
-   A host that spends the whole screen on the mounts closes it to nothing and carries a
-   hairline on one pane instead: one property, and the tracks are untouched. */
-.qm-split {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-	grid-template-rows: minmax(0, 1fr);
-	gap: var(--qmh-space-4);
-	min-height: 0;
-}
-
-/* The band that switches them, and nothing at the widths where both tracks are showing
-   and there is nothing to switch. Where it stands is the host's, like any other band; what
-   goes in it is a pair of `.qm-control`s, which already carry the on-state a pressed
-   control takes. Its visibility is the preset's because the threshold is: a host hiding
-   its own tab row writes this file's number a second time, which is the one thing the
-   single source is for. */
-.qm-switch {
-	display: none;
-}
-
-/* One mount at a time under the threshold, rather than two of them abreast. Half a narrow
-   viewport is under the width either surface reads at, so the split stops being one and
-   the tracks become views of the same room: the host says which with `data-qm-show`, and
-   the attribute names the track rather than what is in it, so nothing here knows an editor
-   from a preview. No attribute is the first track.
-
-   The other track is `display: none` and not a clip, which is the whole of the hiding: it
-   leaves the tab order, hit-testing and the accessibility tree in one property, so the
-   pane needs no `inert` and the host needs no breakpoint in JS. Both stay mounted (a
-   preview binds its handle once, an editor holds a caret, a history and a scroll), so
-   the switch is presentational, never conditional. A pane hidden this way keeps the
-   pixels it had: the paint loop's band sweep no-ops on an empty visible set, and its
-   resize observer holds the last real width rather than rastering at the 0×0 box a hidden
-   pane reports, so what comes back at the width it left needs no paint at all. The
-   preview's caret follow spans the same window — a trip asked for against a pane with no
-   box is held and run when it has one (`preview/bridge.ts`), the pane opening at the
-   caret rather than several edits behind it.
-
-   Height is the second clause because a landscape phone passes the first one: it clears
-   the width with room for two tracks and has no body left to put them in. A desktop window
-   that short wants one mount for the same reason. */
-@media (width < 50rem), (height < 30rem) {
-	.qm-switch {
-		display: flex;
-		gap: var(--qmh-space);
-	}
-
-	/* Even halves of the band, at the height a thumb needs. The floor is the recipe's and
-	   not the host's, because the band exists only at the sizes where the pointer is a
-	   finger: a host is free to stand the band deeper, and has nothing to gain from
-	   standing it shallower than the thing it is tapping. */
-	.qm-switch > * {
-		flex: 1 1 0;
-		min-height: var(--qmh-tap);
-	}
-
-	/* Centred, which is what a control filling half a band reads as; `.qm-control` itself
-	   reads left, for the menus it also dresses. */
-	.qm-switch > .qm-control {
-		text-align: center;
-	}
-
-	.qm-split {
-		grid-template-columns: minmax(0, 1fr);
-	}
-
-	.qm-split:not([data-qm-show='2']) > :nth-child(2),
-	.qm-split[data-qm-show='2'] > :nth-child(1) {
-		display: none;
-	}
-}
-
-/* The mounting site: an edge, a corner, and the clip that holds a surface to them, which
-   is all a surface painting its own column needs. No tone and no gutter: those are the
-   surface's own (THEMING §"Drop it in"). `border-box`, so a stated height is the height
-   it draws.
-
-   Positioned, because a clip reaches only what it is the containing block for: a
-   surface's out-of-flow parts (a parked description, an overlay) resolve against the
-   nearest positioned ancestor, and with none between them and the document they land at
-   their static position unclipped, leaving the page to scroll past its own foot by
-   however far the frame's contents run over.
-
-   The two minimums are what let a frame in a track clip rather than push: a grid or flex
-   item floors at its content, so a mount that paints wider than its column widens the
-   column instead. They ride the frame rather than the split's children, which keeps every
-   rule in this file landing where the host put a class. Outside a track they are the
-   initial value and do nothing. */
-.qm-frame {
-	box-sizing: border-box;
-	position: relative;
-	min-width: 0;
-	min-height: 0;
-	border: var(--qmh-border-width) solid var(--qmh-border);
-	border-radius: var(--qmh-radius);
-	overflow: hidden;
-}
-
 /* ── Type ──────────────────────────────────────────────────────────────────── */
 
 /* A run of chrome type: a section's label, a panel's caption, the name over a readout.
@@ -306,6 +154,13 @@ pre.qm-readout {
 	background: var(--qmh-surface-hover);
 }
 
+/* Centred in the shell's switch band, which is what a control filling half a band reads
+   as; `.qm-control` itself reads left, for the menus it also dresses. Here rather than
+   beside the band in `shell.css`, which ranks at zero and so could not outrank this. */
+.qm-switch > .qm-control {
+	text-align: center;
+}
+
 /* One choice means nothing to pick: the control stays, because what it reads is a fact
    worth having, and it recedes to say it is not a choice. */
 .qm-control:disabled {

package/dist/preset/scale.css

@@ -1,13 +1,13 @@
 /* The host's derivation: the same public dials in, a closed `--qmh-*` scale for the
    page around the surfaces out. `core/theme.css` is the same shape one level down
    (dials in, `--_qm-*` out), and the two are calibrated against each other: the
-   figures here are the figures there (the ground step's ramp, 8% hover, the
-   ring's width, the status hue at both poles) and the
+   figures here are the figures there (the poles, the ground step's ramp, 8% hover, the
+   label ink's 35%, the ring's width, the status hue at both poles) and the
    dial means the same plane in both, so a host plate and a card on it land on the same
    tone at both poles and a host page meets an editor's own column exactly. The border
-   and ink rungs are each calibrated for their own plane rather than shared: a page's
-   chrome is read at one size against one ground, a card's interior at several against
-   the rungs under it, so the mixes are not the same figure. The well
+   is calibrated for its own plane rather than shared: a page's controls are boxed and
+   read against one ground, a card's strokes at several weights against the rungs
+   under it, so the mixes are not the same figure. The well
    under the ground has no counterpart here: a host's own controls are boxed and carry a
    hairline, so nothing on a page needs the step an edgeless field does.
 
@@ -18,11 +18,10 @@
    could not be both.
 
    Literals live here and nowhere else in the preset: `check:style` runs its axes over
-   `recipes.css` beside it, with this file exempt as the place the defaults are minted.
+   the sheets beside it, with this file exempt as the place the defaults are minted.
 
-   The poles fall back to the system colours, so a host that turns no dial still lands
-   where its own unstyled text does — `Canvas` being the plane the UA would have
-   painted a page with, which is what a plate should be. The dials sit in front, so
+   The poles fall back to the surfaces' own pair, so a host that turns no dial lands on
+   the plane an editor mounted in it paints at both poles. The dials sit in front, so
    `--qm-bg`/`--qm-fg` on an ancestor retunes page and surface together. */
 
 :root {
@@ -32,21 +31,28 @@
 	   the page sinks from it by the same ramp. That is what puts a host page and
 	   an editor's own column on one tone rather than a plane apart. Planes step by
 	   light and everything else by ink, which is the package's own split
-	   (ARCHITECTURE §Styling); the figures are its figures. `Canvas` flips with the
-	   declared scheme on its own, so the ramp reads whichever plane it resolved to
-	   rather than trusting an arm to match. */
-	--qmh-surface: var(--qm-bg, Canvas);
-	--qmh-page: oklab(from var(--qmh-surface) calc(l - (0.0214 + 0.0467 * (1 - l))) a b);
-	--qmh-ink: var(--qm-fg, CanvasText);
+	   (ARCHITECTURE §Styling); the figures are its figures. */
+	--qmh-surface: var(--qm-bg, light-dark(#fff, #272729));
+	--qmh-page: oklab(from var(--qmh-surface) calc(l - (0.04 + 0.0202 * (1 - l))) a b);
+	--qmh-ink: var(--qm-fg, light-dark(#1c1c1c, #d7dadc));
 	/* One step off the ink and no second: a page's chrome type is small, tracked and
 	   uppercase, so a rung below this reads under 4.5:1 against the plate and the
 	   label and status lines that would take it are text (WCAG 1.4.3). */
-	--qmh-ink-meta: color-mix(in oklab, var(--qmh-ink), var(--qmh-surface) 45%);
+	--qmh-ink-meta: color-mix(in oklab, var(--qmh-ink), var(--qmh-surface) 35%);
 	--qmh-surface-hover: color-mix(in oklab, var(--qmh-surface), var(--qmh-ink) 8%);
 	--qmh-border: color-mix(in oklab, var(--qmh-surface), var(--qmh-ink) 17%);
 	/* The edge that says "engaged" where the hairline says "edge": a pressed switch,
-	   the underline under a link. */
-	--qmh-border-strong: color-mix(in oklab, var(--qmh-surface), var(--qmh-ink) 40%);
+	   the underline under a link. Half way to the ink, which clears WCAG 1.4.11's 3:1
+	   against the page and the plate at both poles. */
+	--qmh-border-strong: color-mix(in oklab, var(--qmh-surface), var(--qmh-ink) 50%);
+
+	/* The one hue a host's page spends on purpose: the primary action wears it. The
+	   figures are the surfaces' own default for the same dial, so a page that turns no
+	   dial and a card's focus ring agree; the ink on it is the plate's, the pole the
+	   accent's default contrasts against in both schemes. */
+	--qmh-accent: var(--qm-accent, light-dark(#71717a, #a1a1aa));
+	--qmh-on-accent: var(--qmh-surface);
+	--qmh-accent-hover: color-mix(in oklab, var(--qmh-accent), var(--qmh-ink) 15%);
 
 	/* The hue a host spends on a failure. The figures are the surfaces' own, so a
 	   page's status line and a card's diagnostic carry one colour meaning error.
@@ -54,6 +60,9 @@
 	   on a dark page. The dial sits in front of the pair, as every pole's does, so
 	   a host that turns one owns both schemes. */
 	--qmh-alert: var(--qm-danger, light-dark(#9e1518, #f9786c));
+	/* What a modal's backdrop lays over the page: the ground held translucent, so the
+	   page recedes under the dialog without a second tone to read. */
+	--qmh-scrim: color-mix(in srgb, var(--qmh-page) 80%, transparent);
 
 	/* ── Rhythm ──────────────────────────────────────────────────────────────── */
 	/* One base and its multiples, the same four steps the surfaces derive. A host
@@ -92,6 +101,7 @@
 	   surfaces' ramp, which is chrome inside a card, and a page's body text is a
 	   different job at a different size. A host that wants them locked sets both. */
 	--qmh-text: 1rem;
+	--qmh-text-title: 1.125rem;
 	--qmh-text-label: 0.8125rem;
 	--qmh-text-meta: 0.6875rem;
 	--qmh-weight-strong: 600;