@terpjs/react-core 0.9.0 → 0.11.0

package/src/styles.test.ts

@@ -6,6 +6,17 @@ import { TERP_STYLES_ID, TERP_STYLES_CSS, injectTerpStyles } from "./styles";
 /** The sheet with comments removed — prose must not satisfy a structural assertion. */
 const css = TERP_STYLES_CSS.replace(/\/\*[\s\S]*?\*\//g, "");
 
+/**
+ * One source file, read as text, so a union declared in TypeScript can be compared against the
+ * rules the sheet declares for it. Narrow on purpose: this file needs exactly one module, and a
+ * `./**` glob would pull the 180 KB stylesheet in a second time.
+ */
+const sources = import.meta.glob("./dataview/types.ts", {
+  query: "?raw",
+  import: "default",
+  eager: true,
+}) as Record<string, string>;
+
 /**
  * The body of one `@layer <name> { … }` block, brace-matched.
  *
@@ -70,6 +81,11 @@ describe("injectTerpStyles", () => {
     expect(sheet).toContain("scrollbar-color: var(--color-neutral-300) transparent");
     expect(sheet).toContain("::-webkit-scrollbar");
     expect(sheet).toContain("::-webkit-scrollbar-thumb");
+    // And reserves the gutter, so the content box is the same width on a page that
+    // scrolls and a page that fits. The structural half; the workbench's computed lane
+    // measures the reserved width itself, which is the half that can tell whether the
+    // browser honoured it.
+    expect(sheet).toContain("scrollbar-gutter: stable");
   });
 });
 
@@ -204,10 +220,19 @@ describe("cascade structure", () => {
   it("keeps the shell declarations no lane can reach", () => {
     // Three groups, and every one of them was established by mutation rather than assumed.
     //
-    // The sidebar's flex-shrink. It is a flex item with an explicit width in a container that
-    // has room to spare at the pinned 1280px viewport, so deleting it moves no baseline —
-    // measured. It bites at narrow DESKTOP widths, above the mobile breakpoint where the drawer
-    // takes over, which the screenshot lane cannot reach because the viewport is pinned.
+    // Two of the three have since GAINED a baseline, and the reason is worth keeping because
+    // the earlier version of this comment said flatly that the screenshot lane could not reach
+    // them: it could not, while the viewport was pinned at 1280 for every specimen. A
+    // per-specimen `viewport` in the workbench is what changed, and what these two assertions
+    // are now is belt rather than the sole gate.
+    //
+    // The sidebar's flex-shrink. At the pinned 1280 the row has room to spare, so deleting it
+    // moves no baseline — measured, and still true. It bites above the mobile breakpoint and
+    // below wide, and `app-shell-narrow` (820x900, with a DataView supplying the content
+    // pressure a short paragraph does not) is that band: removing the declaration now repaints
+    // 124,797 pixels there, in both themes, and leaves the other three shell specimens
+    // untouched. A row under no pressure never asks a flex item whether it may shrink, which
+    // is why the specimen needed the table and not just the narrower window.
     const base = layerBody("terp.base");
     const at = base.indexOf('[data-terp="appshell-sidebar"] {');
     expect(at, "the sidebar should have a base rule").toBeGreaterThan(-1);
@@ -228,10 +253,65 @@ describe("cascade structure", () => {
         `z-index: var(${token})`,
       );
     }
-    // And the mobile half of the shell, which the screenshot lane cannot render at all: the
-    // viewport is pinned at 1280 and the drawer needs 768 or less. The BEHAVIOUR is covered by
-    // AppShell.test.tsx (focus containment, inert page, close-on-nav) with a stubbed matchMedia;
-    // the geometry is covered by nothing, so these three exist as text or not at all.
+    // The shell's three geometry literals, same shape and the same reason. `15rem`, `4rem` and
+    // `3rem` are now published tokens an app moves from its own unlayered `theme.css` with no
+    // prop at all (ADR 0097 §1), and restating any of them as a number here would move no
+    // baseline — the values are identical, which is what made the conversion provably
+    // zero-diff — while quietly taking the knob away again. `tokens.guard.test.ts` holds the
+    // other direction: a shell token nothing reads fails there.
+    for (const [declaration, what] of [
+      ["width: var(--shell-sidebar-width-expanded)", "the expanded sidebar"],
+      ["width: var(--shell-sidebar-width-collapsed)", "the collapsed icon rail"],
+      ["min-height: var(--shell-header-height)", "the sticky header's floor"],
+    ] as const) {
+      expect(base, `${what} must read its token rather than restating the length`).toContain(
+        declaration,
+      );
+    }
+    // And the content measure, which no structural check can reach through a marker: it is the
+    // one shell rule keyed on a descendant of an attribute rather than on a marker of its own,
+    // because the mechanism is deliberately NOT a new element (ADR 0097 §2). The `:not(header)`
+    // is the whole band: the header keeps the page grid's full track while its siblings take
+    // the measure.
+    // Selector AND declaration read out of ONE rule body, not as two independent substrings
+    // of the layer. Asserted separately, an empty measure rule plus the declaration moved onto
+    // some other rule during a consolidation would satisfy both — and the only baseline that
+    // moved would read as an intentional layout change.
+    const measureRule =
+      /\[data-terp="appshell"\]\[data-content-width="measured"\]\s*\n?\s*\[data-terp="page"\] > \*:not\(\[data-terp="page-header"\]\) \{([^}]*)\}/.exec(
+        base,
+      );
+    expect(measureRule, "the content measure must be one rule keyed on the shell's attribute").not
+      .toBeNull();
+    const measureBody = measureRule![1]!;
+    // WIDTH, not max-width, and this assertion is the gate on that. The selector weighs
+    // (0,4,0), so as a max-width it outranks every component declaring a narrower one —
+    // resource-list, admin-form, dialog and both text measures — and an admin-form inside a
+    // measured shell computed 1280px instead of 512px. As a width it composes, because CSS
+    // resolves max-width after width. Nothing renders differently for a child with no measure
+    // of its own, which is why only a probe found it.
+    expect(
+      measureBody,
+      "the measure must be a width, or it outranks every component's own narrower max-width",
+    ).toContain("width: min(100%, var(--shell-content-max-width))");
+    expect(
+      base.includes("max-width: var(--shell-content-max-width)"),
+      "as a max-width the measure would widen resource-list, admin-form, dialog and Text",
+    ).toBe(false);
+    // And the mobile half of the shell, where the three selectors below now differ from each
+    // other and the difference is the interesting part. The BEHAVIOUR is covered throughout by
+    // AppShell.test.tsx (focus containment, inert page, close-on-nav) with a stubbed
+    // matchMedia; what varies is the geometry.
+    //
+    // `appshell-main`'s tightened padding is painted: `app-shell-mobile` renders at 420x900,
+    // and moving that padding one step to the desktop value repaints 1,309 pixels there in both
+    // themes and nothing else.
+    //
+    // The other two DID wait for a door, and it arrived: `defaultDrawerOpen` plus the
+    // `app-shell-drawer-open` specimen (420x900, overlay) paint the drawer's own geometry and
+    // its backdrop for the first time. So this loop is belt for all three now rather than the
+    // sole gate for two of them — the message below still says "no baseline can hold it", which
+    // was true when it was written and is not any more.
     for (const selector of [
       '[data-terp="appshell"][data-variant="mobile"] [data-terp="appshell-sidebar"]',
       '[data-terp="appshell-backdrop"]',
@@ -239,7 +319,8 @@ describe("cascade structure", () => {
     ]) {
       expect(
         declaresRuleFor(base, selector),
-        `${selector} is mobile-only, so no baseline can hold it`,
+        `${selector} is mobile-only; app-shell-mobile and app-shell-drawer-open are the only ` +
+          "pictures of it",
       ).toBe(true);
     }
   });
@@ -285,20 +366,30 @@ describe("cascade structure", () => {
     ).toContain("height: 100%");
   });
 
-  it("puts the DataView's surface on the full variant, not on the bare marker", () => {
+  it("puts the DataView's surface on the full variant's TABLE, not on the root or the marker", () => {
     // Both values of data-variant are stamped and only one has a rule, which is what keeps
     // the embedded variant a bare grid. The alternative — surface on the marker, un-declared
     // under [data-variant="embedded"] — needs background: transparent, border: 0 and
     // border-radius: 0, the un-declaring shape ADR 0094 exists to avoid.
     //
     // dataview-embedded is the negative evidence this rests on: deleting the full-variant
-    // rule must move five baselines and leave that one untouched.
+    // rule must move the full-variant baselines and leave that one untouched.
+    //
+    // The OWNER changed and the guarantee did not. The surface used to sit on the root, which
+    // made one card of the toolbar, the table and the pagination, divided by internal borders
+    // — and left the table's cells flush against the outer frame. It now sits on whatever
+    // occupies the table's slot, so the table is the object and the controls above and below
+    // it float on the page. Still keyed on the variant, for the reason above.
     const base = layerBody("terp.base");
     expect(declaresRuleFor(base, '[data-terp="dataview"]'), "the root needs a display").toBe(true);
     expect(
-      declaresRuleFor(base, '[data-terp="dataview"][data-variant="full"]'),
-      "the surface belongs to the full variant",
+      declaresRuleFor(base, '[data-terp="dataview"][data-variant="full"] > [data-terp="dataview-scroll"]'),
+      "the surface belongs to the full variant's table slot",
     ).toBe(true);
+    expect(
+      declaresRuleFor(base, '[data-terp="dataview"][data-variant="full"]'),
+      "the root must NOT carry a surface — that is the card this change removed",
+    ).toBe(false);
     expect(
       base,
       "un-declaring a surface under the embedded variant is the shape ADR 0094 avoids",
@@ -321,38 +412,30 @@ describe("cascade structure", () => {
     );
   });
 
-  it("keeps the toolbar band declaring its own surface, and no ink", () => {
-    // Three separate invariants about one element, and each has a way of going wrong that
-    // nothing else in the suite can see.
+  it("keeps the toolbar FLOATING — no surface, no divider, and still no ink", () => {
+    // This assertion reversed, and the reversal is the change: the band used to declare
+    // neutral-0 and two top radii because it was the top third of a card, and nothing else
+    // kept the selection colour inside the root's rounded frame. There is no card now. A
+    // background on a strip that sits on the page canvas paints a rectangle the design does
+    // not have, and a border under it draws a line across nothing.
     //
-    // The background. The inline style this replaced read `selectionMode ? neutral-50 :
-    // neutral-0` — an explicit value in BOTH branches, so the resting rule has to carry
-    // neutral-0 rather than leaving it to the host. Against every composed DataView specimen
-    // dropping it moves nothing, because the full variant's root and the workbench's specimen
-    // card are both neutral-0; it breaks the EMBEDDED variant in a real app, whose root
-    // declares nothing but a display, and the band would show the page canvas through it.
-    // `dataview-toolbar-bare` renders on a neutral-50 host so that mutation fails a baseline.
+    // The radii went with the card for the same reason: there is no rounded frame above the
+    // toolbar to stay inside. Selection mode keeps a fill — it marks a MODE and losing that
+    // makes selection invisible — but as a surface of its own, with its own padding and
+    // radius, asserted below.
     //
-    // The two top radii, which are load-bearing rather than decorative: the DataView root
-    // rounds its border with no overflow: hidden, so nothing else keeps the selection band's
-    // neutral-50 inside the rounded frame.
-    //
-    // And NO colour. Two of this element's direct children are arbitrary caller slots
-    // (`children` and `trailing`), so a muted ink here would inherit into app-authored filter
-    // controls — a silent restyle of app DOM, which is exactly what this migration exists to
-    // stop the framework doing.
+    // NO colour survives unchanged, and it is the invariant with the sharpest edge: two of
+    // this element's direct children are arbitrary caller slots (`children` and `trailing`),
+    // so a muted ink here would inherit into app-authored filter controls — a silent restyle
+    // of app DOM, which is what the styling migration exists to stop the framework doing.
     const base = layerBody("terp.base");
     const at = base.indexOf('[data-terp="dataview-toolbar"]');
     expect(at, "the toolbar band should have a base rule").toBeGreaterThan(-1);
     const block = base.slice(base.indexOf("{", at) + 1, base.indexOf("}", at));
-    expect(block, "the band must declare its own surface, not inherit the host's").toContain(
-      "background: var(--color-neutral-0)",
+    expect(block, "a floating strip paints no surface of its own").not.toContain("background:");
+    expect(block, "a divider under a floating strip is a line across nothing").not.toContain(
+      "border-block-end:",
     );
-    for (const radius of ["border-top-left-radius", "border-top-right-radius"]) {
-      expect(block, `${radius} keeps the selection band inside the root's rounded frame`).toContain(
-        `${radius}: var(--radius-lg)`,
-      );
-    }
     expect(
       /(^|;)\s*color:/.test(block),
       "a colour here inherits into the caller's filter slot and trailing slot",
@@ -368,11 +451,27 @@ describe("cascade structure", () => {
       layerBody("terp.state"),
       "selection mode is a resting surface, not an interaction state",
     ).not.toContain('[data-variant="selection"]');
-    // The bar reads the density token rather than a literal --space-3, which is what makes a
-    // compact view's band line up with its first cell. Zero-diff at comfortable, because
-    // comfortable --density-cell-pad-x IS --space-3 — so only dataview-compact can catch it.
-    expect(block, "the band's inline padding must follow density").toContain(
-      "padding: var(--space-2) var(--density-cell-pad-x)",
+    // The band used to read --density-cell-pad-x for its INLINE padding, so a compact view's
+    // band lined up with its first cell. That alignment target is gone with the card: the
+    // toolbar now aligns with the table's outer frame, whose position does not move with
+    // density, so inline padding here would push the controls off it. Block padding stays on
+    // the spacing scale — vertical rhythm was never the density question.
+    expect(block, "the band's block padding stays on the spacing scale").toContain(
+      "padding-block: var(--space-2)",
+    );
+    expect(
+      /padding-inline|padding:/.test(block),
+      "inline padding would push the controls off the table frame they now align to",
+    ).toBe(false);
+    // Selection mode is the exception and declares its own inline padding, because there it
+    // IS a surface and its fill needs to clear its text.
+    const selectionAt = base.indexOf('[data-terp="dataview-toolbar"][data-variant="selection"]');
+    const selectionBlock = base.slice(
+      base.indexOf("{", selectionAt) + 1,
+      base.indexOf("}", selectionAt),
+    );
+    expect(selectionBlock, "the selection surface reads density for its own inset").toContain(
+      "padding-inline: var(--density-cell-pad-x)",
     );
   });
 
@@ -443,10 +542,28 @@ describe("cascade structure", () => {
     }
     // Every transition this sheet declares is either on a marked element or on one of the
     // descendant selectors above. A new descendant rule with a transition has to join them.
-    const base = layerBody("terp.base");
-    for (const match of base.matchAll(/([^{}]+)\{([^{}]*transition:[^{}]*)\}/g)) {
+    // BOTH layers. This read only terp.base, so a transition declared in terp.state — where
+    // every hover, focus and selected treatment lives — was audited by nothing at all. The one
+    // that exists there today passed only because its selector happens to be in the explicit
+    // list above, which is luck rather than coverage.
+    //
+    // And the "marked" heuristic needs the trailing pseudo stripped before it is applied.
+    // `\s[a-z]+$` asks whether the selector ends in a bare element name preceded by whitespace,
+    // but `[data-terp="card"] span:hover` ends in `:hover` — the character before the final run
+    // is a colon, not a space — so the test scored it as marked and waved it through. Reduced
+    // motion cannot reach that rule: terp.motion is the last layer and beats any earlier one on
+    // the elements its selectors MATCH, and its list matches marked elements and four named
+    // descendants. A transition on any other descendant simply escapes.
+    const transitionRules = [layerBody("terp.base"), layerBody("terp.state")].flatMap((body) => [
+      ...body.matchAll(/([^{}]+)\{([^{}]*transition:[^{}]*)\}/g),
+    ]);
+    expect(transitionRules.length, "no transition rules were scanned at all").toBeGreaterThan(0);
+    for (const match of transitionRules) {
       const selector = match[1].trim().replace(/\s+/g, " ");
-      const marked = selector.includes("[data-terp") && !/\s[a-z]+$/.test(selector);
+      // Strip trailing pseudo-classes / pseudo-elements, so the bare-element test sees the
+      // element the selector actually ends on.
+      const withoutPseudo = selector.replace(/(::?[a-z-]+(\([^)]*\))?)+$/, "");
+      const marked = withoutPseudo.includes("[data-terp") && !/\s[a-z]+$/.test(withoutPseudo);
       expect(
         marked || motion.includes(selector),
         `${selector} declares a transition but reduced motion cannot reach it`,
@@ -454,18 +571,270 @@ describe("cascade structure", () => {
     }
   });
 
+  it("times every transition off the published motion scale, never a literal", () => {
+    // The scale shipped in 2a and was read by nothing: this sheet wrote `150ms ease`
+    // 28 times and `100ms ease` once across 16 declarations, and read a motion token
+    // zero times — so a Studio editor built from the manifest would have offered four
+    // duration controls that moved nothing. Wiring them was inert by construction:
+    // --motion-duration-fast IS 150ms, --motion-duration-instant IS 100ms and
+    // --motion-easing-standard IS ease, so every literal mapped onto a token pair.
+    //
+    // This gate has to be structural, and that is the whole reason it exists here
+    // rather than in a baseline. The screenshot lane runs with
+    // `animations: "disabled"`, so a duration is invisible to it: a wrong value — or
+    // literal number 30 — would move no pixel and nothing would say so.
+    //
+    // Scoped to `transition` on purpose. The spinner's `animation: terp-spin 0.8s` is
+    // a rotation period rather than an interaction step and the scale tops out at
+    // 400ms, so there is no token for it to name.
+    const declarations = [...css.matchAll(/transition:\s*([^;]+);/g)].map((match) => match[1]!);
+    expect(declarations.length).toBeGreaterThan(10);
+    expect(
+      declarations.filter((value) => /\d+m?s\b/.test(value)),
+      "a transition's duration belongs on the published motion scale, not in the rule",
+    ).toEqual([]);
+  });
+
+  it("puts the responsive Stack rules after the ones they override", () => {
+    // A stack with direction { narrow: "row", wide: "column" } carries BOTH
+    // data-direction="row" and data-direction-wide="column", and the two selectors weigh the
+    // same (0,2,0) — so nothing but source order decides which applies above the cutover.
+    // Backwards, the narrow value renders at every width, which looks exactly like the prop
+    // not working rather than like a cascade mistake.
+    //
+    // The same tie the focus ring and the loading cursor both turned on, and the third time
+    // it has mattered in this sheet: equal specificity in one layer is settled by position,
+    // and position is the one thing a reader cannot see from the rule.
+    const base = layerBody("terp.base");
+    const wideAt = base.indexOf("@media not all and (max-width: 768px)");
+    expect(wideAt, "the wide half of the responsive props should be in terp.base").toBeGreaterThan(
+      -1,
+    );
+    for (const selector of [
+      '[data-terp="stack"][data-direction="row"]',
+      '[data-terp="stack"][data-gap="8"]',
+    ]) {
+      const at = base.indexOf(selector);
+      expect(at, `${selector} should exist`).toBeGreaterThan(-1);
+      expect(at, `${selector} must be declared before the wide block that overrides it`).toBeLessThan(
+        wideAt,
+      );
+    }
+  });
+
+  it("declares a wide-half gap rule for every step SpaceToken allows", () => {
+    // The narrow half is covered by the roll-call below; this is its counterpart. A responsive
+    // gap whose wide step has no rule silently renders the narrow gap at every width — which
+    // is the failure mode of the whole responsive idea, and invisible unless a specimen happens
+    // to be recorded at both viewports.
+    const base = layerBody("terp.base");
+    const wide = base.slice(base.indexOf("@media not all and (max-width: 768px)"));
+    for (const token of [0, 1, 2, 3, 4, 6, 8]) {
+      expect(
+        declaresRuleFor(wide, `[data-terp="stack"][data-gap-wide="${token}"]`),
+        `the wide half has no rule for gap ${token}`,
+      ).toBe(true);
+    }
+    for (const direction of ["column", "row"]) {
+      expect(
+        declaresRuleFor(wide, `[data-terp="stack"][data-direction-wide="${direction}"]`),
+        `the wide half has no rule for direction ${direction}`,
+      ).toBe(true);
+    }
+  });
+
+  it("pins the four Grid track floors, which no baseline can hold", () => {
+    // The grid specimens gate the MECHANISM and not the values, and the gap between those two
+    // was measured rather than assumed. An auto-fit grid quantises: a floor only changes the
+    // rendered column count when it crosses a threshold for the container's width. At
+    // `grid-min-column`'s 66rem, moving the md floor 20rem -> 22rem drops it from three columns
+    // to two and repaints 63,524 pixels — while moving it 20rem -> 21rem changes **nothing**,
+    // and all ten grid baselines pass. So the pictures prove the attribute selects a different
+    // floor; only this proves which floor.
+    //
+    // The same shape as the shell declarations below, and the reason the values are pinned here
+    // rather than promoted to tokens: four published tokens with one consumer is the vocabulary
+    // the density cell tokens were deleted for. They become tokens the day an app asks.
+    const base = layerBody("terp.base");
+    for (const [attribute, floor] of [
+      [null, "16rem"],
+      ["xs", "10rem"],
+      ["md", "20rem"],
+      ["lg", "26rem"],
+    ] as const) {
+      const selector =
+        attribute === null
+          ? '[data-terp="grid"]'
+          : `[data-terp="grid"][data-min-column="${attribute}"]`;
+      const at = base.indexOf(`${selector} {`);
+      expect(at, `${selector} should have a rule`).toBeGreaterThan(-1);
+      expect(
+        base.slice(at, base.indexOf("}", at)),
+        `${selector} should floor its tracks at ${floor}`,
+      ).toContain(`minmax(min(${floor}, 100%), 1fr)`);
+    }
+    // sm is the default and therefore the base rule, so it has no attribute of its own — and
+    // its floor is the same 16rem the hub grid uses, which is why the two agree by construction
+    // instead of by coincidence.
+    expect(
+      declaresRuleFor(base, '[data-terp="grid"][data-min-column="sm"]'),
+      "sm is the base rule; an attribute rule for it means the default is described twice",
+    ).toBe(false);
+    const hub = base.indexOf('[data-terp="hubpage-grid"] {');
+    expect(base.slice(hub, base.indexOf("}", hub))).toContain("minmax(min(16rem, 100%), 1fr)");
+  });
+
+  it("floors every fixed Grid column at zero, not at min-content", () => {
+    // `repeat(N, 1fr)` looks equivalent and is not: a bare 1fr floors at the track's
+    // min-content size, so one long unbroken word in a cell widens its column and the grid
+    // overflows its container. A two-column form of long field labels walks straight into it,
+    // which is the case Grid exists for. minmax(0, 1fr) is the fix, and it is invisible to
+    // every baseline that does not happen to contain an overflowing word.
+    const base = layerBody("terp.base");
+    for (const count of [1, 2, 3, 4]) {
+      const selector = `[data-terp="grid"][data-columns="${count}"]`;
+      const at = base.indexOf(`${selector} {`);
+      expect(at, `${selector} should have a rule`).toBeGreaterThan(-1);
+      expect(
+        base.slice(at, base.indexOf("}", at)),
+        `${selector} must floor its tracks at 0, or a long word widens the column`,
+      ).toContain("minmax(0, 1fr)");
+    }
+  });
+
+  it("declares a rule for every size Button names, and none for its default", () => {
+    // The same bargain the gap rules strike: the union and the sheet are two lists kept by
+    // hand, so widening ButtonSize without adding a rule would silently fall back to the
+    // standard geometry rather than fail.
+    //
+    // And the converse, which is the part worth pinning: md must have NO rule of its own. Its
+    // geometry is the base rule, exactly as "comfortable" is the token sheet's :root value, and
+    // a data-size="md" rule appearing here would mean the component had started stamping the
+    // attribute for its default — leaving two places that describe the standard control.
+    const base = layerBody("terp.base");
+    for (const size of ["sm", "lg"]) {
+      expect(
+        declaresRuleFor(base, `[data-terp="button"][data-size="${size}"]`),
+        `Button has no rule for size ${size}`,
+      ).toBe(true);
+    }
+    expect(
+      declaresRuleFor(base, '[data-terp="button"][data-size="md"]'),
+      "md is the base rule; a rule of its own means the default is described twice",
+    ).toBe(false);
+    // Sizes read the density token rather than heights of their own, which is what makes the
+    // two dimensions compose: the compact re-scoping moves the token these calc() off.
+    const at = base.indexOf('[data-terp="button"][data-size="sm"]');
+    expect(
+      base.slice(at, base.indexOf("}", at)),
+      "a size that hardcodes its height stops following density",
+    ).toContain("var(--density-control-min-height)");
+  });
+
+  it("declares one avatar rule plus a small variant, and nothing for the default size", () => {
+    // The tile used to be two rules of eleven declarations each — profile-avatar and
+    // user-menu-avatar — identical but for a width, a height and a font size. Merging them is only
+    // zero-pixel if the variant keeps BOTH geometries, so this pins the shape of the pair: a base
+    // rule carrying md, and an sm rule carrying exactly the three declarations that differ.
+    const base = layerBody("terp.base");
+    expect(declaresRuleFor(base, '[data-terp="avatar"]')).toBe(true);
+    expect(declaresRuleFor(base, '[data-terp="avatar"][data-size="sm"]')).toBe(true);
+    // md is the base rule, as with Button. A rule of its own means the default is described twice.
+    expect(
+      declaresRuleFor(base, '[data-terp="avatar"][data-size="md"]'),
+      "md is the base rule; a rule of its own means the default is described twice",
+    ).toBe(false);
+    const at = base.indexOf('[data-terp="avatar"][data-size="sm"]');
+    const body = base.slice(at, base.indexOf("}", at));
+    for (const declaration of ["width: 2rem", "height: 2rem", "var(--font-size-sm)"]) {
+      expect(body, `the small variant must restate ${declaration}`).toContain(declaration);
+    }
+    // And nothing else: a declaration here that the base already sets is a second description of
+    // the same tile, which is the duplication the merge removed.
+    expect(body).not.toContain("border-radius");
+    expect(body).not.toContain("background");
+  });
+
+  it("declares a min-inline-size for every step ColumnWidth names, and nothing it does not", () => {
+    // The Button gate above notes that its union and its sheet are two lists kept by hand. This
+    // one reads the union out of the source instead, because a declared track that silently does
+    // nothing is exactly the defect this attribute exists to end: `meta.width` was a px hint that
+    // `table-layout: auto` shrank away, so widening ColumnWidth without a rule would restore the
+    // old behaviour under a new spelling.
+    const source = sources["./dataview/types.ts"];
+    const union = /export type ColumnWidth =([^;]+);/.exec(source);
+    expect(union, "ColumnWidth is not declared where this test looks for it").not.toBeNull();
+    const steps = [...(union?.[1] ?? "").matchAll(/"([a-z]+)"/g)].map((match) => match[1]);
+    expect(steps.length, "parsed no steps out of ColumnWidth").toBeGreaterThan(0);
+
+    const base = layerBody("terp.base");
+    for (const step of steps) {
+      const selector = `[data-terp="dataview-table"] > thead > tr > th[data-width="${step}"]`;
+      expect(declaresRuleFor(base, selector), `no rule for step ${step}`).toBe(true);
+      const at = base.indexOf(selector);
+      expect(
+        base.slice(at, base.indexOf("}", at)),
+        `step ${step} must bind as a minimum; a width is a preference auto layout shrinks away`,
+      ).toContain("min-inline-size");
+    }
+    // And nothing beyond the union. `lg` and `content` were both drafted and declined for having
+    // no consumer, so a rule for either means the sheet grew a step the type cannot express.
+    for (const absent of ["lg", "xl", "content", "auto"]) {
+      expect(
+        declaresRuleFor(
+          base,
+          `[data-terp="dataview-table"] > thead > tr > th[data-width="${absent}"]`,
+        ),
+        `the sheet declares a step ColumnWidth does not name: ${absent}`,
+      ).toBe(false);
+    }
+  });
+
+  it("keeps the loading cursor where it can beat the disabled cursor", () => {
+    // A loading button is also `:disabled` — the component sets both — and the disabled rule
+    // lives in terp.state. So a `data-loading` rule in terp.base loses on layer order and the
+    // cursor silently stays `not-allowed`, which tells a user "you may not" where the truth is
+    // "not yet". It has to be in terp.state, and after the disabled rule, because the two weigh
+    // the same (0,2,0) and nothing but source order separates them.
+    //
+    // This is the focus-ring lesson in miniature, and it is invisible to every other lane:
+    // Playwright's screenshots do not paint a pointer, so no baseline has ever held either
+    // cursor. The computed lane asserts the resolved values; this asserts the structure that
+    // produces them.
+    const state = layerBody("terp.state");
+    const base = layerBody("terp.base");
+    expect(
+      declaresRuleFor(base, '[data-terp="button"][data-loading="true"]'),
+      "in terp.base this rule loses to the disabled cursor and does nothing",
+    ).toBe(false);
+    const disabledAt = state.indexOf('[data-terp="button"]:disabled');
+    const loadingAt = state.indexOf('[data-terp="button"][data-loading="true"]');
+    expect(disabledAt, "the disabled rule should be in terp.state").toBeGreaterThan(-1);
+    expect(loadingAt, "the loading rule should be in terp.state").toBeGreaterThan(-1);
+    expect(loadingAt).toBeGreaterThan(disabledAt);
+  });
+
   it("declares a gap rule for every step SpaceToken allows", () => {
     // gap moved from a computed inline value to a rule per step, so the union and the sheet
     // are now two lists maintained by hand. Widening SpaceToken without adding rules would
     // silently fall back to the default gap rather than fail.
     const base = layerBody("terp.base");
     for (const token of [0, 1, 2, 3, 4, 6, 8]) {
-      for (const marker of ["stack", "card"]) {
+      for (const marker of ["stack", "card", "grid"]) {
         expect(
           declaresRuleFor(base, `[data-terp="${marker}"][data-gap="${token}"]`),
           `${marker} has no rule for gap ${token}`,
         ).toBe(true);
       }
+      // Padding is the same bargain on the same scale, and it is the dimension Stack did not
+      // have at all — a padded region used to be reachable only through a Card, which brought
+      // its border and background whether or not they were wanted.
+      for (const marker of ["stack", "grid"]) {
+        expect(
+          declaresRuleFor(base, `[data-terp="${marker}"][data-padding="${token}"]`),
+          `${marker} has no rule for padding ${token}`,
+        ).toBe(true);
+      }
     }
   });
 
@@ -497,13 +866,14 @@ describe("cascade structure", () => {
       // DataViewCardList's inline background on the element it matches. The escalation
       // came off when the card migrated, which is the LAST of the two rather than the
       // first — and the card's tone rules now lose to it on layer instead.
-      '[data-terp="dataview-card"]:focus-within',
+      '[data-terp="dataview-card"][data-clickable="true"]:focus-within',
       // Re-derived rather than assumed, because the condition is not "has something
-      // migrated" but "can any element this selector matches still beat it". Of the SIXTEEN
+      // migrated" but "can any element this selector matches still beat it". Of the SEVENTEEN
       // sites wearing the iconbutton marker, only six can carry the disabled attribute at all:
       // the four pagination arrows and the two reorder arrows. The shell's toggles, the toast
-      // dismisser, the combobox's clear button, the calendar's month arrows, the expand toggle
-      // and the toolbar's clear-search button and two layout toggles have no disabled state —
+      // dismisser, the combobox's clear button, the calendar's month arrows, the expand toggle,
+      // the toolbar's clear-search button and two layout toggles and the password reveal have no
+      // disabled state —
       // and each of the six set cursor inline until it migrated. The day a calendar arrow gains
       // a min/max bound, this answer changes back.
       '[data-terp="iconbutton"]:disabled',
@@ -706,10 +1076,51 @@ describe("cascade structure", () => {
     // check below only asks that the block is non-empty, which a block of dead declarations
     // satisfies. Prose rhythm belongs in descendant rules.
     const base = layerBody("terp.base");
-    const at = base.indexOf('[data-terp="markdown"]');
-    expect(at).toBeGreaterThan(-1);
-    const block = base.slice(base.indexOf("{", at) + 1, base.indexOf("}", at));
-    expect(block.trim()).toBe("display: contents;");
+    // Anchored to the STANDALONE rule, not to the first mention of the marker. A plain indexOf
+    // finds whichever selector merely contains it — and one now does: the measured-width
+    // reach-through that caps this wrapper's blocks is declared earlier in the layer, so the
+    // loose locator sliced that rule's body instead and reported a width where it expected
+    // display: contents. The assertion was right and its aim was not.
+    const rule = [...base.matchAll(/([^{}]+)\{([^{}]*)\}/g)].find(
+      (match) => match[1]!.trim() === '[data-terp="markdown"]',
+    );
+    expect(rule, 'no standalone [data-terp="markdown"] rule in terp.base').toBeDefined();
+    expect(rule![2]!.trim()).toBe("display: contents;");
+  });
+
+  it("pins the values of five declarations no lane can reach", () => {
+    // Presence is not enough for these five, and that is the distinction the roll-calls above
+    // already draw for Button sizes and gap steps: a rule can be present and WRONG, and nothing
+    // here would notice. Each of these is reachable through a published prop, and none of them
+    // is painted by any specimen — so today their values could be changed to anything and the
+    // whole suite stays green.
+    //
+    // Two disabled paints, both reachable (Combobox and DatePicker each take `disabled`), and
+    // neither rendered in that state by any specimen. Mutation: change either colour token.
+    const state = layerBody("terp.state");
+    const ruleFor = (selector: string) => {
+      const match = [...state.matchAll(/([^{}]+)\{([^{}]*)\}/g)].find(
+        (rule) => rule[1]!.trim().replace(/\s+/g, " ") === selector,
+      );
+      expect(match, `${selector} has no rule of its own`).toBeDefined();
+      return match![2]!;
+    };
+    expect(ruleFor('[data-terp="combobox-option"]:disabled')).toContain(
+      "color: var(--color-neutral-400)",
+    );
+    expect(ruleFor('[data-terp="calendar-day"]:disabled')).toContain(
+      "color: var(--color-neutral-300)",
+    );
+
+    // The split archetype's two outer list widths. `md` is painted by the split-page specimen;
+    // `sm` and `lg` are painted by nothing, and they live inside a wide-viewport media block the
+    // pinned 1280 does reach — so the rules apply and simply have no picture. A renamed
+    // attribute value would silently stop matching. Mutation: rename "sm" to "small", or change
+    // either track measure.
+    const wide = css.slice(css.indexOf('[data-terp="splitpage-panes"][data-list-width="sm"]'));
+    expect(wide.slice(0, 120)).toContain("minmax(0, 18rem) minmax(0, 1fr)");
+    const lg = css.slice(css.indexOf('[data-terp="splitpage-panes"][data-list-width="lg"]'));
+    expect(lg.slice(0, 120)).toContain("minmax(0, 32rem) minmax(0, 1fr)");
   });
 
   it("gives every migrated component a base rule in terp.base", () => {
@@ -720,16 +1131,21 @@ describe("cascade structure", () => {
     const base = layerBody("terp.base");
     for (const marker of [
       "button",
+      "avatar",
       "badge",
       "alert",
       "tooltip",
       "input",
+      "input-password",
       "field",
       "control-label",
       "checkbox",
       "radio",
       "switch",
       "stack",
+      "appshell-skip-link",
+      "splitpage-panes",
+      "splitpane",
       "detail-list",
       "combobox",
       "combobox-list",
@@ -777,7 +1193,6 @@ describe("cascade structure", () => {
       "dialog-description",
       "dialog-actions",
       "user-menu",
-      "user-menu-avatar",
       "user-menu-email",
       "user-menu-header",
       "user-menu-identity",
@@ -854,7 +1269,6 @@ describe("cascade structure", () => {
       "module-nav-list",
       "module-nav-link",
       "profile-card",
-      "profile-avatar",
       "profile-email",
       "profile-role",
       "login-view",
@@ -868,7 +1282,70 @@ describe("cascade structure", () => {
       "login-error",
       "admin-form",
       "admin-section-title",
-      "admin-payload",
+      "grid",
+      "divider",
+      "heading",
+      "text",
+      "code",
+      "code-block",
+      "link",
+      "detail-list-row",
+      // `appshell-nav-group-label` is here; `appshell-nav-group` deliberately is NOT, and the
+      // omission joins `appshell-mark` and `appshell-skip-link` above rather than starting a
+      // new kind of exception. The wrapper declares nothing on its own — in the sidebar it is a
+      // plain block whose whole job is to be a sibling, so its two rules are a `+` pair and a
+      // placement override, and it has no standalone selector to match. `declaresRuleFor` wants
+      // exact selector equality, which is what makes it worth having: adding the family pattern
+      // here to make the list look complete would fail, correctly.
+      "appshell-nav-group-label",
+      // The 32 below close a gap the roll-call carried quietly: it listed barely more than
+      // three quarters of the pinned markers, so a quarter of the sheet's base blocks could be
+      // DELETED and only the screenshot lane would notice — and only for a marker some specimen
+      // happens to paint. (No figures here on purpose: both sides of that ratio have moved twice
+      // since it was written, and a citation keeps where a tally rots.)
+      // markers.test.ts cannot see a deleted rule either: removing a block only shrinks the
+      // styled set, which still satisfies both of its directions.
+      //
+      // Seven pinned markers are deliberately NOT here, because they have no standalone base
+      // rule to assert. appshell-nav-group declares nothing on its own (it is a
+      // sibling-combinator pair plus a placement override); dataview-row, dataview-select-cell,
+      // dataview-expand-cell and dataview-actions-cell are styled through their descendants
+      // and attribute variants; and drawer-focus-start / drawer-focus-end appear only in the
+      // shared visually-hidden selector list. Adding any of them here fails, correctly —
+      // declaresRuleFor wants exact selector equality, which is what makes this list mean
+      // something.
+      "alert-body",
+      "alert-icon",
+      "alert-title",
+      "appshell-mark",
+      "breadcrumbs-separator",
+      "button-icon",
+      "calendar-header",
+      "calendar-title",
+      "calendar-weekday",
+      "card-actions",
+      "card-description",
+      "card-heading",
+      "combobox-empty",
+      "combobox-field",
+      "detail-list-term",
+      "detail-list-value",
+      "empty-state-description",
+      "empty-state-icon",
+      "empty-state-title",
+      "error-state-description",
+      "error-state-icon",
+      "error-state-title",
+      "field-error",
+      "field-hint",
+      "field-label",
+      "field-label-text",
+      "iconbutton",
+      "loading-state-spinner",
+      "radio-group",
+      "radio-group-legend",
+      "radio-group-options",
+      "tooltip-anchor",
     ]) {
       expect(
         declaresRuleFor(base, `[data-terp="${marker}"]`),