@quillmark/svelte 0.2.0 → 0.3.1

package/dist/core/theme.css

@@ -1,10 +1,10 @@
 /* The one derivation: public dials in, a closed private scale out (THEMING.md).
    Everything below reads a rung rather than minting a value, which is this file's
    whole reason for existing and what `check:style` holds everywhere else. Colour,
-   geometry, type and motion are all derived here, so each is minted in ONE place
+   geometry, type and motion are all derived here, so each is minted in one place
    instead of once per detached root.
 
-   TRANSPORT: a stylesheet, side-effect imported by `core/index.ts` and applied to
+   Transport: a stylesheet, side-effect imported by `core/index.ts` and applied to
    every element marked `data-qm-root`. The package imports it itself, so there is
    no `import './theme.css'` for a consumer to forget. A stylesheet rather than an
    inline `style` attribute is what buys the three things an attribute cannot
@@ -19,21 +19,21 @@
    chrome that still reads as intact. `check:bundle` holds both ends, the claim and
    the built bytes.
 
-   Every value stays a `var()` reference, so the dials resolve against the CASCADE
+   Every value stays a `var()` reference, so the dials resolve against the cascade
    at each root: a consumer's `[data-theme="dark"]` ancestor rule flows in
    unchanged, the light/dark default follows the `color-scheme` the host declares
    with no JS and no media query, and `color-mix` runs at paint time. The rungs are
-   declared ON the root, so they are reachable only by a rule targeting it:
+   declared on the root, so they are reachable only by a rule targeting it:
    THEMING.md §"What is deliberately not public" states the terms.
 
-   LAYERS: `qm` is the top-level layer name, and it is contract — a consumer
+   Layers: `qm` is the top-level layer name, and it is contract — a consumer
    pins the order against it with `@layer qm, app;` in their own CSS, which wins
    in both bundler orders (THEMING §"Your CSS beats ours"). Unlayered consumer
    CSS beats every layer here for free.
 
-   `@property` registers the three ENTRY rungs, the ones reading a dial, and
+   `@property` registers the three entry rungs, the ones reading a dial, and
    nothing below them. An `initial-value` must be computationally independent,
-   which `rem` is not, so the DIALS cannot be registered: their defaults are
+   which `rem` is not, so the dials cannot be registered: their defaults are
    `rem`. A rung can, because registration reads the initial value and never the
    declared one, so a `px` initial sits under a `calc()` chain over a `rem` dial
    without contradiction. What it buys is the poison case: `--qm-space: 4` is a
@@ -69,41 +69,86 @@
 @layer qm.scale {
 	:where([data-qm-root]) {
 		/* ── Poles ───────────────────────────────────────────────────────────────
-		   Each dial's default, stated ONCE. Every rung below reads a pole, never a
+		   Each dial's default, stated once. Every rung below reads a pole, never a
 		   dial, so both schemes cost two declarations rather than fifteen; and the
-		   dial sits in FRONT of the default, so a consumer's ancestor value wins in
+		   dial sits in front of the default, so a consumer's ancestor value wins in
 		   either scheme, which it would not if a scheme rule set `--qm-bg` instead.
 
-		   `light-dark()` keys the default off the `color-scheme` this root INHERITS,
+		   `light-dark()` keys the default off the `color-scheme` this root inherits,
 		   which is the host's: an app that declares `dark` gets a dark surface
 		   whatever the OS says, and one that declares nothing gets light, matching
 		   its own unstyled text. So the package owns no mode logic at all: light or
 		   dark is the mounting site's, like every other value here (THEMING.md
-		   §"The surface follows your colour scheme"). */
-		--_qm-bg: var(--qm-bg, light-dark(#fff, #14171c));
-		--_qm-fg: var(--qm-fg, light-dark(#1a1a1a, #e8eaed));
-		--_qm-accent: var(--qm-accent, #2563eb);
+		   §"The surface follows your colour scheme").
+
+		   `--qm-bg` is the card, not the column behind it: the plane content is
+		   written on, which is also the preview's paper. Everything else is a step
+		   off it, and the column is a step down. */
+		--_qm-bg: var(--qm-bg, light-dark(#fff, #272729));
+		--_qm-fg: var(--qm-fg, light-dark(#1c1c1c, #d7dadc));
+		/* Neutral: the surface spends no hue on a state it can draw in grey. The pair
+		   clears WCAG 2.4.11's 3:1 against the card at both poles, at 4.8:1 and 5.8:1. */
+		--_qm-accent: var(--qm-accent, light-dark(#71717a, #a1a1aa));
 		--_qm-danger: var(--qm-danger, #c5221f);
 		--_qm-warning: var(--qm-warning, #b25000);
 		--_qm-font: var(--qm-font, ui-sans-serif, system-ui, sans-serif);
 		--_qm-font-mono: var(--qm-font-mono, ui-monospace, monospace);
 
 		/* ── Colour ──────────────────────────────────────────────────────────────
-		   Surfaces step bg → fg, ink steps fg → bg, mixed in oklab; sRGB muddies
-		   the mid-tones and the label/meta/border rungs are exactly mid-tone. So
-		   inverting the poles inverts the scale. The percentages are calibrated to
-		   the light-mode literals they stand in for (17% ≈ #d4d4d4, 35% ≈ #555).
+		   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).
+
+		   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
+		   alike (ARCHITECTURE §Styling). A plane stepped toward the ink is right in
+		   dark and inverted in light, where it darkens the card below the page it
+		   floats on. So `sunken` and `well` step toward shadow and `raised` toward
+		   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, a table's
+		   header band, the one native select, none of which draw 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.
+
+		   Each takes two arms, because one figure cannot serve both poles: a dark
+		   surface has to spend more of what little it has before the card above it
+		   reads as lifted. Pinning a dark palette under a light `color-scheme` takes
+		   the light arm with it
+		   (THEMING §"The surface follows your colour scheme"), which is a step you
+		   can barely see, so a host that pins declares the scheme with it.
 
-		   The three surface rungs sit EVENLY 4pp apart, which is what keeps them three
-		   distinguishable steps: uneven spacing spends one rung to buy another:
-		   widening `raised` alone would leave `hover` 1pp above it. `raised` steps
-		   toward the INK pole rather than away from it, so a card is darker than the
-		   page in light and lighter in dark. */
+		   The ground steps 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 that keeps the pole's hue. Its
+		   arms are 0.0214 of oklab L in light and 0.0553 in dark, with a/b terms
+		   carrying a cool cast a mix toward black would strip, so the default lands
+		   on `#f7f8f9` and `#1a1a1b` exactly and a turned `--qm-bg` tints the plane
+		   under it.
+
+		   `raised` is a no-op at the light pole, where the card is already white
+		   and there is nowhere further to go, so a floating surface separates on
+		   its hairline in light and on the step in dark. */
 		--_qm-surface: var(--_qm-bg);
-		--_qm-surface-raised: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 4%);
+		--_qm-surface-sunken: light-dark(
+			oklab(from var(--_qm-bg) calc(l - 0.0214) calc(a - 0.00065) calc(b - 0.00158)),
+			oklab(from var(--_qm-bg) calc(l - 0.0553) calc(a - 0.00048) calc(b + 0.00165))
+		);
+		--_qm-surface-well: light-dark(
+			color-mix(in oklab, var(--_qm-bg), #000 4%),
+			color-mix(in oklab, var(--_qm-bg), #000 20%)
+		);
+		--_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%);
 		--_qm-border: color-mix(in oklab, var(--_qm-bg), var(--_qm-fg) 17%);
-		/* A rule that separates without structuring: the lines BETWEEN a table's cells,
+		/* A rule that separates without structuring: the lines between a table's cells,
 		   where the frame around them is the structure. Half the border's mix rather
 		   than a surface rung of its own, because it is a stroke and reads against the
 		   surface behind it, not a fill stacked on one. */
@@ -113,10 +158,50 @@
 		--_qm-ink: var(--_qm-fg);
 		--_qm-ink-label: color-mix(in oklab, var(--_qm-fg), var(--_qm-bg) 35%);
 		--_qm-ink-ghost: color-mix(in oklab, var(--_qm-fg), var(--_qm-bg) 60%);
-		/* The correlation wash (`core/bloom.ts`). Its alpha is a PEAK, not a tint: the
-		   wash animates from and back to zero, never held, so it reads at pane scale
-		   over the preview's paper while the paper rests clean. */
+		/* The arrival wash (`core/bloom.ts`). Its alpha is a peak, not a tint: the
+		   wash animates from and back to zero, never held, so it reads over the leaf it
+		   lands on while the leaf rests clean. */
 		--_qm-accent-wash: color-mix(in oklab, var(--_qm-accent) 18%, transparent);
+		/* The accent held: what a selected line of a table is tinted with, and what its
+		   grip is filled with, so the two ends of one gesture are one colour. A second
+		   name rather than the wash reused, because the two answer different questions
+		   and the numbers follow: a peak passes over paper and can be strong, where a
+		   tint is held under body text and cannot. Translucent, so it
+		   stacks over whichever surface rung the cell already draws instead of replacing
+		   it. */
+		--_qm-accent-tint: color-mix(in oklab, var(--_qm-accent) 12%, transparent);
+		/* The danger hue held: what a destructive control fills with where the family's
+		   neutral hover rung would read as one more button. Mixed at the accent tint's
+		   strength, so a held tint is a held tint whichever hue it carries. */
+		--_qm-danger-tint: color-mix(in oklab, var(--_qm-danger) 12%, transparent);
+		/* The label ink held: what a trigger fills with whose own ink never steps, so
+		   the fill arriving under it is that tone at a strength a surface reads
+		   through. */
+		--_qm-add-fill: color-mix(in oklab, var(--_qm-ink-label) 15%, transparent);
+
+		/* The tips card'S hue: the surface's one exit from the greyscale that is not
+		   a status, and what the amber and the typewriter face say together is
+		   draft (VISUAL_EDITOR §"Card operations"). A literal rather than a dial
+		   because there is nothing left to turn: the rungs under it mix over
+		   the surface and the ink a consumer already tuned, so the card follows a
+		   brand untold. The mixes are faint on purpose: a warmth, not a badge. */
+		--_qm-tips: #e88c0a;
+		--_qm-tips-surface: color-mix(in oklab, var(--_qm-surface), var(--_qm-tips) 4%);
+		--_qm-tips-ink: color-mix(in oklab, var(--_qm-ink), var(--_qm-tips) 24%);
+		/* The ink and the amber stepped up, and the pair is spent on the two runs that
+		   are not the sentence: a token in a tip, and the foot's control under the
+		   pointer. One rung each rather than one per run, a chip and a hover four
+		   percent apart being a number with no second decision under it. */
+		--_qm-tips-ink-warm: color-mix(in oklab, var(--_qm-ink), var(--_qm-tips) 45%);
+		--_qm-tips-fill: color-mix(in oklab, var(--_qm-tips) 12%, transparent);
+		/* The typewriter, the half of the slip the amber cannot carry: a modern mono
+		   reads as code where a Courier reads as typed. Its own rung rather than
+		   `--_qm-font-mono`, the chrome's readout face, which a consumer turns for
+		   tabular figures and not to dress this card. Courier Prime leads and is nobody's
+		   system font, so a host that loads it lands on it and every other host falls to
+		   the Courier the platform already carries; the package fetches nothing, a preset
+		   costing a network request being one a consumer cannot decline. */
+		--_qm-tips-font: 'Courier Prime', 'Courier New', Courier, ui-monospace, monospace;
 
 		/* ── Ratios and effects ──────────────────────────────────────────────────
 		   No palette fixes these, so they are their own rungs. There is no shadow
@@ -136,19 +221,22 @@
 		--_qm-opacity-muted: 0.5;
 
 		/* ── Focus ───────────────────────────────────────────────────────────────
-		   These fix the ring's VALUE, so no control mints it. Which properties draw a
+		   These fix the ring's value, so no control mints it. Which properties draw a
 		   ring, and on what state, is the other half: a rule, `.qm-focus-ring` in
 		   `visual/controls.css`, since a rung each control reassembles is a scale
-		   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. */
-		--_qm-ring-width: 2px;
-		/* Every ring the surface draws, whatever the state under it: focus and selection
-		   alike, which is why the name carries neither. Assembled here because the parts
-		   spelled out at a use site pass every axis — each reads a rung — while drawing a
-		   ring nothing else agrees with. The width stays separately reachable: a drop
-		   indicator is the ring's thickness without being a ring. */
+		   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. */
+		--_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
+		   every axis — each reads a rung — while drawing a ring nothing else agrees with. */
 		--_qm-ring: var(--_qm-ring-width) solid var(--_qm-accent);
 		--_qm-ring-offset: 1px;
+		/* What a clip box carries past its content for a focused control inside it to
+		   keep the whole mark. */
+		--_qm-ring-reach: calc(var(--_qm-ring-width) + var(--_qm-ring-offset));
 
 		/* ── Motion ──────────────────────────────────────────────────────────────
 		   Two rungs, by what the trip disturbs: `fast` stays inside the element's own
@@ -160,14 +248,18 @@
 		   animates over WAAPI and reads it from here. */
 		--_qm-bloom-dwell: 1100ms;
 
-		/* ONE curve, symmetric because an interruption turns these trips around: a hover
-		   leaves before it arrives, a card collapses mid-expand. The one-way pair a scale
-		   like this often carries is minted when a trip long enough to read one arrives;
-		   the popover's pop is the nearest and at `fast` it is under that threshold. */
+		/* One curve, symmetric because an interruption turns these trips around: a hover
+		   leaves before it arrives, a card collapses mid-expand. Every trip at `fast` or
+		   `slow` takes it; a one-way shape is legible only over a longer one. */
 		--_qm-ease-reverse: cubic-bezier(0.4, 0, 0.6, 1);
+		/* A trip rather than a rung, duration and curve composed the way `--_qm-ring`
+		   composes its three: neither half is reachable alone. Weighted to its end, so an
+		   arrival settles into its rest instead of stopping at it, and long enough that a
+		   control resting at nothing reads as arriving rather than as switching. */
+		--_qm-reveal: 500ms cubic-bezier(0.4, 0, 0.2, 1);
 
 		/* ── Geometry ──────────────────────────────────────────────────────────*/
-		/* ONE stroke width for every edge the chrome draws: a card's, a control's,
+		/* One stroke width for every edge the chrome draws: a card's, a control's,
 		   and the metadata bracket's three rules alike. A threshold rather than a
 		   rhythm choice, like the tap floor: a hairline is a hairline at any
 		   `--qm-space`, so it does not derive from a dial. It exists as a rung because
@@ -176,7 +268,7 @@
 		   against a token. */
 		--_qm-border-width: 1px;
 		--_qm-radius: var(--qm-radius, 8px);
-		/* The INTERIOR corner, and HALF is the relationship rather than the number: a
+		/* The interior corner, and half is the relationship rather than the number: a
 		   corner inside a corner reads as nested only while it is visibly tighter, and
 		   halving holds that at every setting of the dial, zero included. */
 		--_qm-radius-inner: calc(var(--_qm-radius) / 2);
@@ -188,15 +280,16 @@
 		--_qm-space-2: calc(var(--_qm-space) * 2);
 		--_qm-space-3: calc(var(--_qm-space) * 3);
 		--_qm-space-4: calc(var(--_qm-space) * 4);
+		--_qm-space-5: calc(var(--_qm-space) * 5);
 		/* A rung because the two axes are two decisions and the ladder alone cannot hold
 		   them together: `check:style`'s rhythm axis sees each box read a rung, never that
-		   they read the SAME one, which is the drift `visual/controls.css` already names
+		   they read the same one, which is the drift `visual/controls.css` already names
 		   for the type half. Asymmetric because the vertical is what leading leaves once
 		   it has taken the line box, and the horizontal is how far in the text starts,
 		   which nothing else fixes. */
 		--_qm-inset-control: var(--_qm-space) var(--_qm-space-3);
-		/* 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
+		/* 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
 		   sits from the bottom of the screen, which no spacing dial knows. Spent by
 		   the editor alone (`.qm-pane`): a stack of cards is what has a last one to
@@ -208,7 +301,7 @@
 		   floor is one number instead of one expression per control. */
 		--_qm-tap-min: 24px;
 		/* The reorder/delete glyph. A rung because the card header's
-		   right hang is HALF the difference between this and the tap floor: the glyph
+		   right hang is half the difference between this and the tap floor: the glyph
 		   centres in a target sized by the floor, so what stands between it and the
 		   card's gutter is an arithmetic of the two, and a literal on either side is a
 		   balance that silently breaks when the glyph moves. Sized in CSS rather than
@@ -218,35 +311,48 @@
 		--_qm-glyph-control: 14px;
 
 		/* ── Type ────────────────────────────────────────────────────────────────
-		   `--qm-font-size` anchors the CHROME rung; 1.125 is the ratio between adjacent
+		   `--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
+		   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-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
+		/* 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
+		   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. */
 		--_qm-text-paper: calc(var(--_qm-text-body) * 16 / 15);
-		/* ONE weight over the regular: every heading here is a name over the value under
-		   it, so a second is a rung with no register beneath it. Hierarchy is the size
-		   ramp's. */
-		--_qm-weight-label: 600;
+		/* 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
+		   label, a nested property — so a stack of them reads as one register and
+		   hierarchy stays the size ramp's, which is the axis that can carry it.
+		   500 rather than 600 because the family dial resolves to the platform UI
+		   face, whose 600 is heavier at the same number than the webfont a surface
+		   is usually drawn against: at the label rung it goes smudgy, and one
+		   number across three sizes does not read as one weight.
+
+		   `strong` is not a rung of that ramp. It is the mark a run wears where
+		   weight is the only signal it has: a heading inside a prose leaf, drawn at
+		   no size step of its own because the quill sets the paper's; a table
+		   island's header row; the stored value in an enum listbox. Reaching for it
+		   where a size or a tone could speak is the drift the split exists to
+		   stop. */
+		--_qm-weight-strong: 600;
+		--_qm-weight-mid: 500;
 		/* Leading: the ramp's third axis, and it does not track the sizes one for one:
 		   two rungs, because a wrapped label and a wrapped paragraph want different
 		   rhythms and nothing wants four. `body` is reading rhythm (both prose leaves,
 		   every control beside them, the tips card's guidance); `tight` is a line that is
-		   a label rather than a passage. Unitless, so a rung inherits MULTIPLICATIVELY
+		   a label rather than a passage. Unitless, so a rung inherits multiplicatively
 		   and holds against whichever size rung the surface reads: a `rem` leading
 		   would freeze at one size and disagree with the rest of the ramp. It is the
-		   axis paper and chrome SHARE: both read `body`, and the size rung is what
+		   axis paper and chrome share: both read `body`, and the size rung is what
 		   separates them. `line-height: 1` is outside the axis: it collapses the
 		   line box onto its content, a glyph or a button's one-line label. */
 		--_qm-leading-body: 1.5;
@@ -260,12 +366,12 @@
 		   picker, the caret) lands on the same pole the poles above resolve to.
 		   Declaring it here would break that lockstep in the one direction that
 		   matters: a host that declares `dark` would get light native chrome under
-		   a dark surface. A consumer that PINS a palette against its own scheme
+		   a dark surface. A consumer that pins a palette against its own scheme
 		   declares `color-scheme` with it, on the root (THEMING.md).
 
-		   Face, ink and LEADING are the three axes a root carries this way. Leading
+		   Face, ink and leading are the three axes a root carries this way. Leading
 		   belongs with the other two because a unitless ratio inherits
-		   MULTIPLICATIVELY: it holds against whatever size rung each surface reads, so
+		   multiplicatively: it holds against whatever size rung each surface reads, so
 		   it imposes less than the ink beside it, and the reason `font-size` stays off
 		   does not transfer: a ratio has no size to sweep a consumer's content with.
 		   What it buys is that `normal` (the UA figure near 1.14, varying by font) is
@@ -273,13 +379,13 @@
 		   whether or not it remembers to say so, and a per-surface
 		   `--_qm-leading-tight` reads as the deliberate override it is.
 
-		   Deliberately NOT `font-size`, and the reason is about the ROOT rule rather
+		   Deliberately not `font-size`, and the reason is about the root rule rather
 		   than about size: a root-level body size sweeps every descendant a consumer
 		   may have put inside the marker, which is a reach the derivation does not
 		   have. The rung is not withheld from the surfaces: every control and every
 		   prose leaf reads `--_qm-text-body` in its own recipe, which is
 		   what closes the ramp and makes `--qm-font-size` move an input. What would
-		   break a mounted leaf is a size that CHANGES under it; a rung is fixed at
+		   break a mounted leaf is a size that changes under it; a rung is fixed at
 		   mount unless the consumer turns the dial, and a consumer turning a dial is
 		   entitled to the reflow. So: the root imposes no size, each surface reads the
 		   rung it wants. */
@@ -288,10 +394,10 @@
 		line-height: var(--_qm-leading-body);
 	}
 
-	/* Reduced motion collapses the SCALE, never a list of selectors.
+	/* Reduced motion collapses the scale, never a list of selectors.
 	   Two values here are not the rung they look like:
 
-	   `1ms` rather than `none`, because a collapsed transition still FIRES: a surface
+	   `1ms` rather than `none`, because a collapsed transition still fires: a surface
 	   waiting on `transitionend` keeps its event, where `transition: none` would strand
 	   it. The beat is under perception either way.
 

package/dist/preset/index.css

@@ -1,7 +1,7 @@
 /* `@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:
    `core/index.ts` pulls `core/theme.css` for the surfaces and never this, because this
-   styles the DOCUMENT and nothing may put that in a consumer's page uninvited.
+   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. */

package/dist/preset/recipes.css

@@ -1,14 +1,14 @@
-/* THE ENDORSED LOOK: the rules a host draws around a mounted surface AND the shell it
+/* 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
+   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. `@layer qm` exists so consumer CSS beats the surfaces
+   Unlayered, deliberately. `@layer qm` exists so consumer CSS beats the surfaces
    without `!important`, and the same has to be true here; a layer of the preset's own
    would put a second name in the contract and change what `revert-layer` at the foot
    of this file resolves against. Unlayered, a consumer's own rules win by ordinary
@@ -16,12 +16,12 @@
 
 /* ── The page ──────────────────────────────────────────────────────────────── */
 
-/* The baseline, on a CLASS rather than `body`: a preset that restyled the document
+/* The baseline, on a class rather than `body`: a preset that restyled the document
    root would land on an app that already has a page and change it out from under
    whatever was there. The host puts this where its own layout starts: `body`, or the
    element the app mounts into.
 
-   `color-scheme` is declared HERE and not by the package: light or dark is the
+   `color-scheme` is declared here and not by the package: light or dark is the
    mounting site's, and this file is the mounting site. `light dark` follows the OS;
    a host pinning one declares it on the same element and wins by source order. */
 .qm-page {
@@ -43,11 +43,11 @@
 
 /* ── The workspace ─────────────────────────────────────────────────────────── */
 
-/* The rules above dress the page a surface sits ON; these four are the SHELL it is
+/* 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
+   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
@@ -67,8 +67,8 @@ 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
+/* 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. */
@@ -79,11 +79,11 @@ html:has(.qm-workspace) {
 	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
+/* 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
+   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. */
@@ -95,32 +95,32 @@ html:has(.qm-workspace) {
 	min-height: 0;
 }
 
-/* THE BAND THAT SWITCHES THEM, and nothing at the widths where both tracks are showing
+/* 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
+   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
+/* 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
+   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
+   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 repaints
    from its live box when it comes back, which its resize observer sees as a width moving
    off zero.
 
-   HEIGHT is the second clause because a landscape phone passes the first one: it clears
+   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) {
@@ -129,7 +129,7 @@ html:has(.qm-workspace) {
 		gap: var(--qmh-space);
 	}
 
-	/* Even halves of the band, at the height a THUMB needs. The floor is the recipe's and
+	/* 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. */
@@ -154,18 +154,18 @@ html:has(.qm-workspace) {
 	}
 }
 
-/* THE MOUNTING SITE: an edge, a corner, and the clip that holds a surface to them, which
+/* 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
+   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
+   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
+   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
@@ -208,7 +208,7 @@ html:has(.qm-workspace) {
 }
 
 /* The block form: a dump, or a snippet. `pre` keeps the wrapping the value came with;
-   the plate is the page's own, one rung under whatever it sits in. How TALL such a
+   the plate is the page's own, one rung under whatever it sits in. How tall such a
    block may grow before it scrolls is the host's policy rather than the look, so no
    height is stated here. */
 pre.qm-readout {
@@ -253,10 +253,12 @@ pre.qm-readout {
 
 /* ── Surfaces ──────────────────────────────────────────────────────────────── */
 
-/* The instrument plate: what a host puts its controls and readouts on. One rung off the
-   page and a hairline, which is the same way a card steps off the base surface, so a
-   panel beside a mounted editor reads as the same material. `border-box`, so a height
-   from the caller is the height it draws. */
+/* The instrument plate: what a host puts its controls and readouts on. The same plane a
+   card is, so a panel beside a mounted editor reads as the same material. It keeps a
+   hairline where a card drops one: a card sits in a column the surface itself paints and
+   a plate sits wherever the host put it, which is the floating case's argument on a
+   block that happens to be in flow. `border-box`, so a height from the caller is the
+   height it draws. */
 .qm-panel {
 	box-sizing: border-box;
 	background: var(--qmh-surface);
@@ -267,7 +269,7 @@ pre.qm-readout {
 
 /* ── Controls ──────────────────────────────────────────────────────────────── */
 
-/* A host's controls ARE boxed, where the package's buttons are not: inside a card a
+/* A host's controls are boxed, where the package's buttons are not: inside a card a
    button sits beside typing and a box would read as a field, and out here there is no
    typing to be confused with, so the box is what says "this is a control".
    `font: inherit` first, since the shorthand resets whatever precedes it. */
@@ -309,7 +311,7 @@ pre.qm-readout {
 /* ── Focus ─────────────────────────────────────────────────────────────────── */
 
 /* One visible indicator for the whole host, since none of these controls draws a ring
-   of its own. It reads the INK rung rather than a hue: the page is monochrome, and a
+   of its own. It reads the ink rung rather than a hue: the page is monochrome, and a
    focus ring is a position, not a destination. */
 :focus-visible {
 	outline: var(--qmh-ring-width) solid var(--qmh-ink);