@0001-labs/design-system-1 0.3.0 → 0.3.1

package/dist/0-face/constraint-panel.js

@@ -1,5 +1,6 @@
+import { paintFaultLines } from './fault-lines';
 import { measureConstraints } from './constraints';
-import { PHONE_WIDTHS, checkSite, findSitePages, inspectInFrame, ruleLine, summarizePages, summarizeRules } from './constraint-site';
+import { VIEWPORT_WIDTHS, checkSite, findSitePages, inspectInFrame, ruleLine, summarizePages, summarizeRules } from './constraint-site';
 // appendChild, not append: a Worker project's types redefine append for its HTML rewriter.
 /** The presses of C, each within 800ms of the last, that toggle the panel. */
 export const CONSTRAINT_PRESSES = 5;
@@ -35,7 +36,8 @@ export function createConstraintPanel() {
       --danger: var(--ds-danger-color, light-dark(#de0331, #ff5f5f));
     }
     :host([hidden]) { display: none !important; }
-    .rings { position: absolute; inset: 0; overflow: hidden; }
+    .fault-lines { z-index: 0 !important; }
+    .rings { z-index: 1; position: absolute; inset: 0; overflow: hidden; }
     .frames { position: absolute; width: 0; height: 0; overflow: hidden; }
     .ring {
       position: absolute;
@@ -57,6 +59,7 @@ export function createConstraintPanel() {
       text-align: center;
     }
     aside {
+      z-index: 2;
       position: absolute;
       inset-block: 0;
       inset-inline-end: 0;
@@ -103,14 +106,18 @@ export function createConstraintPanel() {
     .code b { color: var(--danger); font-weight: 400; }
     .rule { color: var(--muted); }
     p { margin: 0; }
+    :host([data-lines-only]) aside { inset-block: 0 auto; width: auto; padding: calc(var(--u) / 2); }
+    :host([data-lines-only]) aside > :not(header), :host([data-lines-only]) header > :not([data-lines], [data-close]) { display: none; }
+    :host([data-lines-only]) header { margin: 0; }
     @media print { :host { display: none !important; } }
-  </style><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
-    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-close aria-label="Close">Close</button></header>
-    <p data-status aria-live="polite"></p>
+  </style><svg class="fault-lines" aria-hidden="true"></svg><div class="rings"></div><div class="frames"></div><aside aria-label="Constraints">
+    <header><strong>Constraints</strong><button type="button" data-run>Page</button><button type="button" data-site>Site</button><button type="button" data-lines>Lines</button><button type="button" data-close aria-label="Close">Close</button></header>
+    <p data-status aria-live="polite"></p><p class="rule">Fault lines: dashed reference · red drift</p>
     <ol data-findings></ol>
     <section data-rules hidden><h3>Rules</h3><ol></ol></section>
     <section data-pages hidden><h3>Pages</h3><ol></ol></section>
   </aside>`;
+    const faultLines = shadow.querySelector('.fault-lines');
     const rings = shadow.querySelector('.rings');
     const list = shadow.querySelector('[data-findings]');
     const rulesSection = shadow.querySelector('[data-rules]');
@@ -120,6 +127,9 @@ export function createConstraintPanel() {
     const status = shadow.querySelector('[data-status]');
     const title = shadow.querySelector('strong');
     const frames = shadow.querySelector('.frames');
+    const linesButton = shadow.querySelector('[data-lines]');
+    const setLinesOnly = (enabled) => { panel.toggleAttribute('data-lines-only', enabled); linesButton.textContent = enabled ? 'Results' : 'Lines'; };
+    linesButton.addEventListener('click', () => setLinesOnly(!panel.hasAttribute('data-lines-only')));
     const siteButton = shadow.querySelector('[data-site]');
     let site = null;
     let findings = [];
@@ -127,6 +137,7 @@ export function createConstraintPanel() {
     let frame = 0;
     const place = () => {
         frame = 0;
+        paintFaultLines(document, faultLines);
         rings.replaceChildren(...findings.map(({ element }, index) => {
             const rect = element.getBoundingClientRect();
             const ring = document.createElement('div');
@@ -141,6 +152,8 @@ export function createConstraintPanel() {
     };
     const schedule = () => { if (!frame)
         frame = requestAnimationFrame(place); };
+    const layoutChanges = new MutationObserver(schedule);
+    const sizeChanges = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
     const stopSite = () => {
         site?.abort();
         site = null;
@@ -274,7 +287,7 @@ export function createConstraintPanel() {
         title.textContent = 'Constraints';
         status.textContent = 'Finding the pages…';
         const pages = await findSitePages();
-        const widths = `${PHONE_WIDTHS.slice(0, -1).join(', ')} and ${PHONE_WIDTHS[PHONE_WIDTHS.length - 1]}px`;
+        const widths = `${VIEWPORT_WIDTHS.slice(0, -1).join(', ')} and ${VIEWPORT_WIDTHS[VIEWPORT_WIDTHS.length - 1]}px`;
         let broken = 0;
         const results = await checkSite({
             pages,
@@ -302,16 +315,25 @@ export function createConstraintPanel() {
         if (!panel.isConnected)
             document.body.appendChild(panel);
         panel.hidden = false;
+        setLinesOnly(window.innerWidth < 640);
         if (mode === 'site')
             void runSite();
         else
             run();
+        layoutChanges.observe(document.body, { subtree: true, childList: true, attributes: true, attributeFilter: ['style', 'class', 'hidden', 'data-ds-fault-lines', 'data-ds-fault-axis'] });
+        sizeChanges?.observe(document.body);
         window.addEventListener('scroll', schedule, { passive: true, capture: true });
         window.addEventListener('resize', schedule);
     };
     const hide = () => {
         stopSite();
         panel.hidden = true;
+        if (frame)
+            cancelAnimationFrame(frame);
+        frame = 0;
+        faultLines.replaceChildren();
+        layoutChanges.disconnect();
+        sizeChanges?.disconnect();
         window.removeEventListener('scroll', schedule, { capture: true });
         window.removeEventListener('resize', schedule);
     };

package/dist/0-face/constraint-site.d.ts

@@ -1,6 +1,7 @@
 import { type Constraint } from './constraints';
 /** The narrowest phone still sold, the common ones and the widest. */
 export declare const PHONE_WIDTHS: number[];
+export declare const VIEWPORT_WIDTHS: number[];
 /** Pages checked side by side, each in its own frame. */
 export declare const PAGES_AT_ONCE = 3;
 /** A rule broken on a page at a width, said in words, since the element stays in its frame. */

package/dist/0-face/constraint-site.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constraint-site.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraint-site.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constraint-site.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraint-site.ts"],"names":[],"mappings":"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"}

package/dist/0-face/constraint-site.js

@@ -7,6 +7,7 @@ import { constraints, measureConstraints } from './constraints';
 import { calculateScalingFactor, defaultScalingConfig } from './scaling';
 /** The narrowest phone still sold, the common ones and the widest. */
 export const PHONE_WIDTHS = [320, 375, 393, 430];
+export const VIEWPORT_WIDTHS = [...PHONE_WIDTHS, 768, 1024, 1440];
 /** Pages checked side by side, each in its own frame. */
 export const PAGES_AT_ONCE = 3;
 /** An element as a person finds it: its tag, id and classes, and the start of its words. */
@@ -52,7 +53,7 @@ const wait = (ms) => new Promise(done => setTimeout(done, ms));
  * order of `widths`. The page reflows at each width without loading again. The address carries `ph=out`,
  * the analytics opt-out most trackers honour, so the check counts no visits.
  */
-export async function inspectInFrame(host, url, widths = PHONE_WIDTHS, height = 844) {
+export async function inspectInFrame(host, url, widths = VIEWPORT_WIDTHS, height = 844) {
     const frame = document.createElement('iframe');
     frame.setAttribute('aria-hidden', 'true');
     frame.tabIndex = -1;
@@ -106,7 +107,7 @@ export function checkPage(page) {
  * each width as it comes. Stops starting pages when `signal` aborts. Whatever the pages store in this
  * browser while they are checked is put back afterwards.
  */
-export async function checkSite({ pages, widths = PHONE_WIDTHS, inspect, onResult, signal, atOnce = PAGES_AT_ONCE }) {
+export async function checkSite({ pages, widths = VIEWPORT_WIDTHS, inspect, onResult, signal, atOnce = PAGES_AT_ONCE }) {
     const kept = storedNow();
     const results = [];
     const total = pages.length * widths.length;

package/dist/0-face/constraints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constraints.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraints.ts"],"names":[],"mappings":"AAeA;+GAC+G;AAC/G,MAAM,MAAM,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,gGAAgG;IAChG,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,4EAA4E;IAC5E,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,EAAE,CAAC;IACzC,uGAAuG;IACvG,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC;CACrC,CAAC;AAqEF,eAAO,MAAM,WAAW,EAAE,UAAU,EAwInC,CAAC;AAEF,qDAAqD;AACrD,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAAqB,GAAG,CAAC,OAAO,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC,EAAE,CAExG;AAED,iHAAiH;AACjH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAAqB,GAAG;IAAE,UAAU,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,EAAE,CAAA;CAAE,EAAE,CAEnI;AAED,qEAAqE;AACrE,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,WAGxC,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,IAAI,GAAE,UAAU,EAAgB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,CAOtF;AAED,eAAO,MAAM,UAAU,wGAAwG,CAAC;AAChI,eAAO,MAAM,QAAQ,6BAA6B,CAAC;AAEnD,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,IAAI,GAAE,UAAU,EAAgB,GAAG,MAAM,CAQnE"}
+{"version":3,"file":"constraints.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraints.ts"],"names":[],"mappings":"AAgBA;+GAC+G;AAC/G,MAAM,MAAM,OAAO,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,kEAAkE;IAClE,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,gGAAgG;IAChG,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,4EAA4E;IAC5E,OAAO,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,EAAE,CAAC;IACzC,uGAAuG;IACvG,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IACtC,KAAK,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC;CACrC,CAAC;AA6EF,eAAO,MAAM,WAAW,EAAE,UAAU,EA0JnC,CAAC;AAEF,qDAAqD;AACrD,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAAqB,GAAG,CAAC,OAAO,GAAG;IAAE,UAAU,EAAE,UAAU,CAAA;CAAE,CAAC,EAAE,CAExG;AAED,iHAAiH;AACjH,wBAAgB,kBAAkB,CAAC,IAAI,GAAE,UAAqB,GAAG;IAAE,UAAU,EAAE,UAAU,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,EAAE,CAAA;CAAE,EAAE,CAEnI;AAED,qEAAqE;AACrE,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,WAGxC,CAAC;AAEF,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,IAAI,GAAE,UAAU,EAAgB,GAAG,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,CAOtF;AAED,eAAO,MAAM,UAAU,wGAAwG,CAAC;AAChI,eAAO,MAAM,QAAQ,6BAA6B,CAAC;AAEnD,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,IAAI,GAAE,UAAU,EAAgB,GAAG,MAAM,CAQnE"}

package/dist/0-face/constraints.js

@@ -1,6 +1,15 @@
+import { faultLineGrids, inspectFaultLines } from './fault-lines';
 import { labelledButtons, inspectButtonLabels } from './button-label';
 import { inspectTextContrast, measureTextContrast } from "./text-contrast";
 import { inspectWordWrap, wordHeaders } from './word-wrap';
+/** The actual initial, including a component nested in another open shadow root. */
+function isAvatarInitial(element) {
+    for (let parent = element; parent; parent = parent.assignedSlot ?? parent.parentElement ?? parent.getRootNode().host ?? null) {
+        if (parent.matches('ds-avatar, .ds-avatar'))
+            return true;
+    }
+    return false;
+}
 /** A pixel either way is the same place. */
 const near = (a, b) => Math.abs(a - b) <= 1;
 const px = (n) => `${Math.round(n)}px`;
@@ -68,6 +77,14 @@ function rows(found) {
     return groups.filter(row => row.length > 1);
 }
 export const constraints = [
+    {
+        code: 'page.fault-lines',
+        rule: 'Fault lines keep related card and control grids aligned across the whole page, with matching track edges and gaps at every checked viewport width.',
+        why: 'Compare separate sections in the same alignment family; responsive layouts may change together, while unrelated groups and intentional exceptions remain independent.',
+        components: ['ds-page'],
+        check: { file: 'tests/fault-lines.test.ts', test: 'fault lines catch shifted tracks and unequal gaps across sections at each viewport' },
+        measures: ['alignment group', 'alignment groups'], count: root => faultLineGrids(root).length, inspect: inspectFaultLines,
+    },
     {
         code: 'select.hug',
         rule: 'Select and date-picker triggers use hug sizing, never fill sizing or growing to occupy the available row.',
@@ -111,6 +128,16 @@ export const constraints = [
         count: root => measureTextContrast(root).length,
         inspect: inspectTextContrast,
     },
+    {
+        code: 'avatar.initial-contrast',
+        rule: 'Avatar initials have at least 4.5:1 contrast against their rendered fill, including after a theme or identity colour changes.',
+        why: 'Check each initial inside the avatar’s shadow root and in overlapping groups; decorative initials still need to be readable. Explicit ink overrides must pass too.',
+        components: ['ds-avatar'],
+        check: { file: 'tests/avatar-contrast.test.ts', test: 'avatar initials stay readable after theme and CSS-variable changes, and the avatar constraint catches overrides' },
+        measures: ['avatar initial', 'avatar initials'],
+        count: root => measureTextContrast(root).filter(result => isAvatarInitial(result.element)).length,
+        inspect: root => inspectTextContrast(root).filter(finding => isAvatarInitial(finding.element)),
+    },
     {
         code: 'card.media-level',
         rule: "A card's picture stands on the card's foot, a square below the words at least, so the pictures of cards side by side stand on one level whatever the words above them.",

package/dist/0-face/define.js

@@ -5,7 +5,7 @@ export function define(name, element) {
     const type = element;
     const prototype = element.prototype;
     const original = prototype.createRenderRoot;
-    if (original) {
+    if (original && typeof document !== 'undefined') {
         const definingDocument = document;
         prototype.createRenderRoot = function () {
             var _a;

package/dist/0-face/fault-lines.d.ts

@@ -0,0 +1,20 @@
+import type { Finding } from './constraints';
+type Grid = {
+    element: Element;
+    family: string | null;
+    axis: 'x' | 'y';
+    lines: number[];
+    gaps: number[];
+    crossGap?: number;
+    internalDrift: boolean;
+    start: number;
+    end: number;
+};
+/** Related grids opt in by name; unlabelled card grids are candidates for human review. */
+export declare function faultLineGrids(root: ParentNode): Grid[];
+/** Fault lines compare rendered tracks across separate sections, in the current viewport. */
+export declare function inspectFaultLines(root: ParentNode): Finding[];
+/** The same rendered geometry as the checker, painted without affecting layout or hit testing. */
+export declare function paintFaultLines(root: ParentNode, layer: SVGSVGElement): void;
+export {};
+//# sourceMappingURL=fault-lines.d.ts.map

package/dist/0-face/fault-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fault-lines.d.ts","sourceRoot":"","sources":["../../DS1/0-face/fault-lines.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAe7C,KAAK,IAAI,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAAC,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjL,2FAA2F;AAC3F,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,CA2BvD;AAWD,6FAA6F;AAC7F,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,CAkB7D;AAGD,kGAAkG;AAClG,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,GAAG,IAAI,CA+E5E"}

package/dist/0-face/fault-lines.js

@@ -0,0 +1,172 @@
+const tolerance = 1;
+const near = (a, b) => Math.abs(a - b) <= tolerance;
+const style = (el) => el.ownerDocument.defaultView.getComputedStyle(el);
+const visible = (el) => {
+    const box = el.getBoundingClientRect();
+    return box.width > 0 && box.height > 0 && style(el).visibility !== 'hidden' && style(el).display !== 'none';
+};
+/** Walk each open shadow tree once; slotted children already occur in the light tree. */
+function elements(root) {
+    return Array.from(root.querySelectorAll('*')).flatMap(el => [el, ...(el.shadowRoot ? elements(el.shadowRoot) : [])]);
+}
+/** Related grids opt in by name; unlabelled card grids are candidates for human review. */
+export function faultLineGrids(root) {
+    return elements(root).flatMap(element => {
+        const family = element.getAttribute('data-ds-fault-lines');
+        if (family === 'off' || !visible(element))
+            return [];
+        const children = Array.from(element.children).filter(visible);
+        if (!children.length)
+            return [];
+        if (family === null && (!/grid/.test(style(element).display) || children.length < 2 ||
+            !children.every(child => child.matches('ds-card, .ds-card, ds-button, button'))))
+            return [];
+        const axis = element.getAttribute('data-ds-fault-axis') === 'y' ? 'y' : 'x';
+        const boxes = children.map(child => child.getBoundingClientRect());
+        const crossStart = (box) => axis === 'x' ? box.top : box.left;
+        const crossEnd = (box) => axis === 'x' ? box.bottom : box.right;
+        const start = (box) => axis === 'x' ? box.left : box.top;
+        const end = (box) => axis === 'x' ? box.right : box.bottom;
+        const bands = [];
+        for (const box of boxes.sort((a, b) => crossStart(a) - crossStart(b))) {
+            const band = bands.find(row => near(crossStart(row[0]), crossStart(box)));
+            if (band)
+                band.push(box);
+            else
+                bands.push([box]);
+        }
+        // The fullest band defines the tracks; an incomplete final row is valid.
+        const band = [...bands].sort((a, b) => b.length - a.length)[0].sort((a, b) => start(a) - start(b));
+        const lines = band.flatMap(box => [start(box), end(box)]);
+        const gaps = band.slice(1).map((box, index) => start(box) - end(band[index]));
+        const crossGaps = bands.slice(1).map((row, index) => Math.min(...row.map(crossStart)) - Math.max(...bands[index].map(crossEnd)));
+        const internalDrift = bands.some(row => row.length === band.length && row.slice().sort((a, b) => start(a) - start(b)).some((box, index) => !near(start(box), lines[index * 2]) || !near(end(box), lines[index * 2 + 1]))) || crossGaps.some(gap => !near(gap, crossGaps[0]));
+        return [{ element, family, axis, lines, gaps, crossGap: crossGaps[0], internalDrift, start: lines[0], end: lines[lines.length - 1] }];
+    });
+}
+function referenceFor(grids, i) {
+    const current = grids[i];
+    return grids.slice(0, i).find(other => {
+        if (other.axis !== current.axis || other.lines.length !== current.lines.length)
+            return false;
+        if (current.family !== null || other.family !== null)
+            return current.family !== null && current.family === other.family;
+        return near(current.start, other.start) && near(current.end, other.end);
+    });
+}
+/** Fault lines compare rendered tracks across separate sections, in the current viewport. */
+export function inspectFaultLines(root) {
+    const grids = faultLineGrids(root);
+    const findings = [];
+    for (let i = 0; i < grids.length; i++) {
+        const current = grids[i];
+        if (current.internalDrift)
+            findings.push({ element: current.element, ...(current.family === null ? { review: true } : {}), message: `Fault lines at ${current.element.ownerDocument.documentElement.clientWidth}px: tracks or repeated gaps drift inside ${current.family || 'this card grid'}. Align its complete rows and repeated spacing.` });
+        const reference = referenceFor(grids, i);
+        if (!reference)
+            continue;
+        const drift = current.lines.map((line, index) => Math.abs(line - reference.lines[index]));
+        const gapDrift = current.gaps.some((gap, index) => !near(gap, reference.gaps[index]));
+        const rowDrift = current.crossGap !== undefined && reference.crossGap !== undefined && !near(current.crossGap, reference.crossGap);
+        if (!drift.some(value => value > tolerance) && !gapDrift && !rowDrift)
+            continue;
+        const width = current.element.ownerDocument.documentElement.clientWidth;
+        const review = current.family === null;
+        findings.push({ element: current.element, ...(review ? { review: true } : {}), message: `Fault lines at ${width}px: ${current.family || 'these card grids'} ${review ? 'may be related but have' : 'have'} misaligned ${current.axis === 'x' ? 'column' : 'row'} edges or unequal gaps (edge drift ${Math.round(Math.max(...drift))}px; gaps ${current.gaps.map(Math.round).join('/')}px versus ${reference.gaps.map(Math.round).join('/')}px${rowDrift ? `; cross-axis gap ${Math.round(current.crossGap)}px versus ${Math.round(reference.crossGap)}px` : ''}). ${review ? 'Name the related groups with data-ds-fault-lines to enforce alignment, or mark an intentional exception off.' : 'Use the same tracks and gap for this family at this viewport.'}` });
+    }
+    return findings;
+}
+/** The same rendered geometry as the checker, painted without affecting layout or hit testing. */
+export function paintFaultLines(root, layer) {
+    const doc = layer.ownerDocument;
+    const width = doc.documentElement.clientWidth;
+    const height = doc.defaultView.innerHeight;
+    layer.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    layer.setAttribute('width', String(width));
+    layer.setAttribute('height', String(height));
+    layer.setAttribute('aria-hidden', 'true');
+    layer.style.cssText = 'position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483644';
+    layer.replaceChildren();
+    const grids = faultLineGrids(root);
+    const failed = new Set(inspectFaultLines(root).map(finding => finding.element));
+    const drawn = new Set();
+    const referenceInk = '#087ba8';
+    const faultInk = '#de0331';
+    function mark(tag, attributes, title) {
+        const node = doc.createElementNS('http://www.w3.org/2000/svg', tag);
+        for (const [key, value] of Object.entries(attributes))
+            node.setAttribute(key, String(value));
+        if (title) {
+            const tip = doc.createElementNS(node.namespaceURI, 'title');
+            tip.textContent = title;
+            node.appendChild(tip);
+        }
+        layer.appendChild(node);
+        return node;
+    }
+    for (let index = 0; index < grids.length; index++) {
+        const grid = grids[index];
+        const reference = referenceFor(grids, index) ?? grid;
+        for (const edge of reference.lines) {
+            const key = `${grid.axis}:${edge}`;
+            if (drawn.has(key))
+                continue;
+            drawn.add(key);
+            mark('line', { 'data-fault-reference': '', x1: grid.axis === 'x' ? edge : 0, y1: grid.axis === 'y' ? edge : 0,
+                x2: grid.axis === 'x' ? edge : width, y2: grid.axis === 'y' ? edge : height,
+                stroke: referenceInk, 'stroke-width': 1, 'stroke-dasharray': '4 4' }, 'Reference edge');
+        }
+        const broken = failed.has(grid.element);
+        if (!broken)
+            continue;
+        // Draw each actual child so drift inside a later row is visible too.
+        for (const child of Array.from(grid.element.children).filter(visible)) {
+            const box = child.getBoundingClientRect();
+            const edges = grid.axis === 'x' ? [box.left, box.right] : [box.top, box.bottom];
+            for (const edge of edges) {
+                if (reference.lines.some(expected => near(edge, expected)))
+                    continue;
+                mark('line', { 'data-fault-actual': '', x1: grid.axis === 'x' ? edge : box.left, y1: grid.axis === 'y' ? edge : box.top,
+                    x2: grid.axis === 'x' ? edge : box.right, y2: grid.axis === 'y' ? edge : box.bottom,
+                    stroke: faultInk, 'stroke-width': 2 }, 'Actual edge differs from the dashed reference');
+            }
+        }
+        // Row spacing can drift even when every column edge still aligns.
+        const rows = [];
+        for (const child of Array.from(grid.element.children).filter(visible)) {
+            const box = child.getBoundingClientRect();
+            const start = grid.axis === 'x' ? box.top : box.left;
+            const row = rows.find(row => near(grid.axis === 'x' ? row[0].top : row[0].left, start));
+            if (row)
+                row.push(box);
+            else
+                rows.push([box]);
+        }
+        rows.sort((a, b) => grid.axis === 'x' ? a[0].top - b[0].top : a[0].left - b[0].left);
+        const bounds = grid.element.getBoundingClientRect();
+        const crossGap = reference.crossGap ?? grid.crossGap;
+        if (crossGap !== undefined)
+            for (let row = 1; row < rows.length; row++) {
+                const previousEnd = Math.max(...rows[row - 1].map(box => grid.axis === 'x' ? box.bottom : box.right));
+                const actual = Math.min(...rows[row].map(box => grid.axis === 'x' ? box.top : box.left));
+                const expected = previousEnd + crossGap;
+                if (near(actual, expected))
+                    continue;
+                for (const [edge, kind] of [[expected, 'reference'], [actual, 'actual']]) {
+                    mark('line', { [`data-fault-${kind}`]: '', x1: grid.axis === 'x' ? bounds.left : edge, y1: grid.axis === 'x' ? edge : bounds.top,
+                        x2: grid.axis === 'x' ? bounds.right : edge, y2: grid.axis === 'x' ? edge : bounds.bottom,
+                        stroke: kind === 'reference' ? referenceInk : faultInk, 'stroke-width': kind === 'reference' ? 1 : 2,
+                        'stroke-dasharray': kind === 'reference' ? '4 4' : '' }, `Row gap ${Math.round(actual - previousEnd)}px; reference ${Math.round(crossGap)}px`);
+                }
+            }
+        const box = grid.element.getBoundingClientRect();
+        const label = mark('text', { 'data-fault-gap': '', x: Math.max(4, box.left), y: Math.max(16, Math.min(height - 4, box.top + 16)),
+            fill: faultInk, stroke: 'var(--ds-background-color, white)', 'stroke-width': 3, 'paint-order': 'stroke',
+            'font-family': 'var(--ds-typeface-regular, sans-serif)', 'font-size': 12 });
+        const gaps = grid.gaps.map(gap => Math.round(gap)).join('/');
+        const expected = reference.gaps.map(gap => Math.round(gap)).join('/');
+        label.textContent = `Gap ${gaps || '—'}px · reference ${expected || '—'}px` +
+            (grid.crossGap !== undefined && reference.crossGap !== undefined && !near(grid.crossGap, reference.crossGap)
+                ? ` · row gap ${Math.round(grid.crossGap)}px / ${Math.round(reference.crossGap)}px` : '');
+    }
+}

package/dist/2-core/ds-avatar.d.ts

@@ -90,6 +90,11 @@ export declare class Avatar extends LitElement {
     private failed;
     static styles: import("lit").CSSResult;
     constructor();
+    private inkObserver?;
+    private inkFrame;
+    private readonly queueInk;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues<this>): void;
     /** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
     protected updated(): void;

package/dist/2-core/ds-avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-avatar.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAmBhF,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,6GAA6G;AAC7G,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAM9D;AAED;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IACM,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAC1D,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,2EAA2E;IACnE,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACvB,QAAgB,MAAM,CAAU;IAChC,QAAgB,MAAM,CAAU;IAChC,MAAM,CAAC,MAAM,0BAAqB;;IAclC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOlD,2GAA2G;IAC3G,SAAS,CAAC,OAAO;IAIjB;oEACgE;IAChE,OAAO,CAAC,UAAU;IAUlB,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-avatar.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAsBhF,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK3D;AAED,6GAA6G;AAC7G,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAM9D;AAED;;;;;;;GAOG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IACM,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAC1D,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC;IAClC,2EAA2E;IACnE,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC/C,GAAG,EAAE,OAAO,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACvB,QAAgB,MAAM,CAAU;IAChC,QAAgB,MAAM,CAAU;IAChC,MAAM,CAAC,MAAM,0BAAqB;;IAclC,OAAO,CAAC,WAAW,CAAC,CAAmB;IACvC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAGvB;IACF,iBAAiB;IAUjB,oBAAoB;IAMpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAOlD,2GAA2G;IAC3G,SAAS,CAAC,OAAO;IAIjB;oEACgE;IAChE,OAAO,CAAC,UAAU;IAwBlB,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/2-core/ds-avatar.js

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { keyed } from "lit/directives/keyed.js";
+import { contrastRatio, colorReader, composite } from "../0-face/text-contrast";
 import { define } from "../0-face/define";
 import { provideIcons } from "./ds-icon";
 import { avatarIcon } from "./generated/icon-avatar";
@@ -10,9 +11,13 @@ import styles from "./styles/ds-avatar.css?inline";
 provideIcons({ avatar: avatarIcon });
 /** The ink that reads on a fill: black on a light one, white on a dark one. */
 const inkOn = (rgb) => {
-    const linear = rgb.map((n) => (n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4));
-    const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
-    return luminance > 0.22 ? "var(--ds-black)" : "var(--ds-white)";
+    const fill = [...rgb, 1];
+    const white = [1, 1, 1, 1], black = [42 / 255, 42 / 255, 42 / 255, 1];
+    if (contrastRatio(black, fill) >= 4.5)
+        return "var(--ds-black)";
+    if (contrastRatio(white, fill) >= 4.5)
+        return "var(--ds-white)";
+    return "black";
 };
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 export function avatarInk(color) {
@@ -43,6 +48,12 @@ export function inkOnResolved(fill) {
 export class Avatar extends LitElement {
     constructor() {
         super();
+        this.inkFrame = 0;
+        this.queueInk = () => {
+            const view = this.ownerDocument.defaultView;
+            if (!this.inkFrame)
+                this.inkFrame = view.requestAnimationFrame(() => { this.inkFrame = 0; this.resolveInk(); });
+        };
         this.label = "";
         this.initial = "?";
         this.src = "";
@@ -54,6 +65,24 @@ export class Avatar extends LitElement {
         this.fit = "cover";
         this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        const view = this.ownerDocument.defaultView;
+        this.inkObserver = new view.MutationObserver(this.queueInk);
+        // Observe only the painted ancestors, never our own shadow's ink writes.
+        for (let parent = this; parent; parent = parent.parentElement ?? parent.getRootNode().host ?? null) {
+            this.inkObserver.observe(parent, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] });
+        }
+        view.addEventListener('load', this.queueInk, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.inkObserver?.disconnect();
+        const view = this.ownerDocument.defaultView;
+        view.cancelAnimationFrame(this.inkFrame);
+        this.inkFrame = 0;
+        view.removeEventListener('load', this.queueInk, true);
+    }
     willUpdate(changed) {
         if (changed.has("src")) {
             this.loaded = false;
@@ -63,7 +92,7 @@ export class Avatar extends LitElement {
     }
     /** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
     updated() {
-        if (this.ink || this.pending || this.plain || !this.color || avatarInk(this.color))
+        if (this.ink || this.pending || this.plain)
             return;
         this.resolveInk();
     }
@@ -73,13 +102,28 @@ export class Avatar extends LitElement {
         const frame = this.renderRoot.querySelector(".frame");
         if (!frame || !this.isConnected)
             return;
-        const ink = inkOnResolved(getComputedStyle(frame).backgroundColor);
-        if (ink) {
-            frame.style.color = ink;
+        if (this.ink || this.pending || this.plain)
+            return;
+        const view = this.ownerDocument.defaultView;
+        const read = colorReader(this.ownerDocument);
+        let fill = read(view.getComputedStyle(frame).backgroundColor);
+        if (fill && fill[3] > 0) {
+            for (let parent = this; parent && fill[3] < 1; parent = parent.parentElement ?? parent.getRootNode().host ?? null) {
+                const background = read(view.getComputedStyle(parent).backgroundColor);
+                if (background)
+                    fill = composite(fill, background);
+            }
+            if (fill[3] < 1)
+                return;
+            const tokens = view.getComputedStyle(this);
+            const black = read(tokens.getPropertyValue('--ds-black').trim()), white = read(tokens.getPropertyValue('--ds-white').trim());
+            const ink = black && contrastRatio(black, fill) >= 4.5 ? 'var(--ds-black)' : white && contrastRatio(white, fill) >= 4.5 ? 'var(--ds-white)' : contrastRatio([0, 0, 0, 1], fill) >= 4.5 ? 'black' : 'white';
+            if (frame.style.color !== ink)
+                frame.style.color = ink;
             return;
         }
         if (tries < 60)
-            requestAnimationFrame(() => this.resolveInk(tries + 1));
+            this.ownerDocument.defaultView.requestAnimationFrame(() => this.resolveInk(tries + 1));
         if (tries === 0 && this.ownerDocument.readyState !== "complete") {
             this.ownerDocument.defaultView?.addEventListener("load", () => this.resolveInk(60), { once: true });
         }
@@ -96,7 +140,7 @@ export class Avatar extends LitElement {
         >`;
         return html `<span
       class="frame"
-      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || avatarInk(this.color) : undefined })}
+      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || (!this.plain ? avatarInk(this.color) : undefined) : undefined })}
       role=${this.label ? "img" : nothing}
       aria-label=${this.label || nothing}
       aria-hidden=${this.label ? nothing : "true"}

package/dist/3-unit/context-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-trigger.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/context-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAEtC,yGAAyG;AACzG,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;AACvE,MAAM,MAAM,YAAY,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACpD,KAAK,OAAO,GAAG;IACb,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,WAAW,GAAG,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;gFACgF;AAChF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,GAAG,KAAK,EACxF,EAAE,OAAuB,EAAE,KAAY,EAAE,SAAiB,EAAE,IAAW,EAAE,GAAE,OAAY;;;EAqFxF"}
+{"version":3,"file":"context-trigger.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/context-trigger.ts"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AAEtC,yGAAyG;AACzG,eAAO,MAAM,UAAU,MAAM,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;AACvE,MAAM,MAAM,YAAY,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACpD,KAAK,OAAO,GAAG;IACb,wEAAwE;IACxE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,WAAW,GAAG,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;gFACgF;AAChF,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,GAAG,KAAK,EACxF,EAAE,OAAuB,EAAE,KAAY,EAAE,SAAiB,EAAE,IAAW,EAAE,GAAE,OAAY;;;EAgHxF"}