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

package/DS1/2-core/styles/ds-radio.css

@@ -77,7 +77,7 @@
   align-self: center;
   overflow: hidden;
   padding-inline: calc(4px * var(--ds-sf));
-  font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) var(--ds-typeface-regular);
+  font: 400 var(--ds-type-size-default) / var(--ds-type-lineheight-default) "Inter Arrows", var(--ds-typeface-regular);
   letter-spacing: var(--ds-type-letterspacing-default);
   white-space: nowrap;
   text-align: center;

package/DS1/2-core/styles/ds-tag.css

@@ -29,8 +29,9 @@
   padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));
   border-radius: var(--_tag-radius, var(--ds-radius));
   background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));
-  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), var(--ds-tag-accent, var(--ds-grey, #7a7a7a))));
-  font-family: var(--ds-typeface-regular);
+  /* Tint the dark-mode ink: raw grey/accent colours cannot meet 4.5:1 on this fill. */
+  color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 30%, white)));
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--_tag-font-size, var(--ds-type-size-default));
   line-height: var(--_tag-height, var(--ds-control-height));

package/DS1/2-core/styles/ds-text.css

@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: flex-start;
   height: var(--ds-control-height);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
   line-height: var(--ds-type-lineheight-default);
@@ -26,17 +26,17 @@
 :host([hidden]) { display: none !important; }
 
 :host([data-language="ja"]) {
-  font-family: var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
+  font-family: "Inter Arrows", var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
 }
 
 :host([data-language="zh"]),
 :host([data-language="zh-hant"]) {
-  font-family: var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));
+  font-family: "Inter Arrows", var(--ds-typeface-regular-zh-hant, var(--typeface-regular-zh-hant));
   font-weight: var(--ds-type-weight-default, 400);
 }
 
 :host([data-language="zh-hans"]) {
-  font-family: var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));
+  font-family: "Inter Arrows", var(--ds-typeface-regular-zh-hans, var(--typeface-regular-zh-hans));
   font-weight: var(--ds-type-weight-default, 400);
 }
 
@@ -54,7 +54,7 @@
   min-width: 0;
   max-width: 100%;
   overflow: var(--ds-text-overflow, hidden);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

package/DS1/2-core/styles/ds-toast.css

@@ -59,7 +59,7 @@ ol[data-x="center"] { left: 50%; transform: translateX(-50%); }
   border-radius: var(--ds-radius);
   background: var(--ds-toast-background);
   color: var(--ds-toast-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-control-height);

package/DS1/2-core/styles/ds-token.css

@@ -1,7 +1,7 @@
 @import "../../1-root/component-metrics.css";
 :host { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: middle; }
 :host([hidden]) { display: none !important; }
-.frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
+.frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: "Inter Arrows", var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
 .copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }
 .copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }
 /* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */

package/DS1/2-core/styles/ds-tooltip.css

@@ -26,7 +26,7 @@
   border-radius: calc(4px * var(--ds-sf, var(--sf, 1)));
   background: var(--ds-tooltip-background, light-dark(var(--ds-black, var(--black)), var(--ds-white, var(--white))));
   color: var(--ds-tooltip-color, light-dark(var(--ds-white, var(--white)), var(--ds-black, var(--black))));
-  font-family: var(--ds-typeface-regular, var(--typeface-regular));
+  font-family: "Inter Arrows", var(--ds-typeface-regular, var(--typeface-regular));
   font-size: calc(14px * var(--ds-sf, var(--sf, 1)));
   line-height: calc(16px * var(--ds-sf, var(--sf, 1)));
   font-weight: 400;

package/DS1/3-unit/context-trigger.ts

@@ -29,6 +29,7 @@ export function bindContextMenuTrigger(
   let suppressed: HTMLElement | null = null;
   let release: ReturnType<typeof setTimeout> | undefined;
   let disposed = false;
+  let mousePress: { event: PointerEvent; path: EventTarget[]; target: EventTarget | null } | undefined;
   if (aria) trigger.setAttribute("aria-haspopup", "menu");
   if (selection) trigger.classList.add("ds-context-trigger");
   const enabled = (control: HTMLElement) => control.isConnected &&
@@ -48,6 +49,7 @@ export function bindContextMenuTrigger(
     release = setTimeout(clearSuppression, 1000);
   };
   const cancel = () => {
+    mousePress = undefined;
     clearTimeout(timer); timer = undefined; point = undefined;
     doc.removeEventListener("pointermove", move);
     doc.removeEventListener("pointerup", cancel);
@@ -56,10 +58,28 @@ export function bindContextMenuTrigger(
   };
   const context = (event: MouseEvent) => {
     if (event.defaultPrevented) return;
-    const control = resolve(event); if (!control || !enabled(control)) return;
+    // Settling a transform on pointerdown can move another row beneath the
+    // pointer before Chromium hit-tests contextmenu. Keep the initiating row.
+    const pressed = mousePress;
+    mousePress = undefined;
+    const followsPress = pressed && event.button === 2 && Math.hypot(event.clientX - pressed.event.clientX, event.clientY - pressed.event.clientY) <= 10;
+    // Native events lose their composed path after dispatch. Delegated and
+    // shadow-root controls still need the original path and unretargeted target.
+    const gesture = followsPress ? new Proxy(pressed.event, {
+      get(target, key) {
+        if (key === "composedPath") return () => pressed.path;
+        if (key === "target") return pressed.target;
+        const value = Reflect.get(target, key, target);
+        return typeof value === "function" ? value.bind(target) : value;
+      },
+    }) : event;
+    // Adopted controls retain their creating realm’s prototype; ownerDocument
+    // alone cannot choose an instanceof constructor. Containment stays authoritative.
+    if (gesture !== event && (typeof (gesture.target as Node | null)?.nodeType !== "number" || !trigger.contains(gesture.target as Node))) return;
+    const control = resolve(gesture); if (!control || !enabled(control)) return;
     cancel();
     if (suppressed === control) { event.preventDefault(); return; }
-    if (open({ x: event.clientX, y: event.clientY }, control, event) === false) return;
+    if (open({ x: event.clientX, y: event.clientY }, control, gesture) === false) return;
     event.preventDefault();
     if (selection && event.button === 0) arm(control);
   };
@@ -88,6 +108,11 @@ export function bindContextMenuTrigger(
       if (open(at, control, event) !== false) arm(control);
     }, LONG_PRESS);
   };
+  const rememberMouse = (event: PointerEvent) => {
+    mousePress = !event.defaultPrevented && event.pointerType === "mouse" && event.button === 2 ? { event, path: event.composedPath(), target: event.target } : undefined;
+  };
+  trigger.addEventListener("pointerdown", rememberMouse, true);
+  trigger.addEventListener("pointercancel", cancel, true);
   trigger.addEventListener("contextmenu", context);
   trigger.addEventListener("keydown", key);
   trigger.addEventListener("pointerdown", press);
@@ -98,6 +123,8 @@ export function bindContextMenuTrigger(
       trigger.removeEventListener("contextmenu", context);
       trigger.removeEventListener("keydown", key);
       trigger.removeEventListener("pointerdown", press);
+      trigger.removeEventListener("pointerdown", rememberMouse, true);
+      trigger.removeEventListener("pointercancel", cancel, true);
       if (aria) {
         if (previousAria === null) trigger.removeAttribute("aria-haspopup"); else trigger.setAttribute("aria-haspopup", previousAria);
       }

package/DS1/3-unit/ds-form.ts

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-form.ts
 // Form component for handling form submissions and validation
 
@@ -338,7 +339,7 @@ export class Form extends LitElement {
   }
 }
 
-customElements.define("ds-form", Form);
+define("ds-form", Form);
 
 declare global {
   interface HTMLElementTagNameMap {

package/DS1/3-unit/ds-table.ts

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-table.ts
 // A data table: rows one square high on hairlines, drawn from data with the
 // same rules as a native `<table class="ds-table">` (1-root/table.css). With
@@ -498,7 +499,7 @@ function text(value: unknown): string {
   return typeof value === "number" ? value.toLocaleString() : String(value);
 }
 
-customElements.define("ds-table", DsTable);
+define("ds-table", DsTable);
 
 declare global {
   interface HTMLElementTagNameMap {

package/DS1/3-unit/styles/ds-calendar.css

@@ -49,7 +49,7 @@
   display: inline-block;
   vertical-align: top;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -80,7 +80,7 @@
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
-  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+  font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
   text-overflow: clip;
   white-space: nowrap;
 }
@@ -144,7 +144,7 @@
   background: transparent;
   color: var(--ds-text-color);
   font: inherit;
-  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+  font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
   line-height: var(--ds-control-height);
   letter-spacing: inherit;
   cursor: pointer;
@@ -321,7 +321,7 @@
   white-space: nowrap;
 }
 .weekday-name[data-today] { color: var(--ds-calendar-today); }
-.week-number { font-family: var(--ds-typeface-compressed); }
+.week-number { font-family: "Inter Arrows", var(--ds-typeface-compressed); }
 .day.outside .date-line { justify-content: flex-start; }
 
 /* A compact day: the date centred in its square, in the ink; with events,

package/DS1/3-unit/styles/ds-list.css

@@ -38,7 +38,7 @@
   padding-top: calc(4px * var(--ds-sf));
   overflow: hidden;
   color: var(--ds-list-heading-color, var(--ds-text-color-muted));
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

package/DS1/3-unit/styles/ds-matrix.css

@@ -14,7 +14,7 @@
   display: block;
   min-width: 0;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -50,7 +50,7 @@
   border-inline-end: 1px solid var(--ds-paper);
   background: var(--ds-matrix-colour);
   color: var(--ds-slate);
-  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+  font-family: "Inter Arrows", var(--ds-typeface-medium, var(--ds-typeface-regular));
 }
 .group > span {
   position: absolute;

package/DS1/3-unit/styles/ds-menu.css

@@ -31,7 +31,7 @@
   background: var(--ds-paper);
   color: var(--ds-text-color);
   box-shadow: none;
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-type-lineheight-default);

package/DS1/3-unit/styles/ds-select.css

@@ -40,7 +40,7 @@
   corner-shape: var(--ds-corner-shape, round) !important;
   background: var(--ds-input-background) !important;
   color: var(--ds-input-color) !important;
-  font-family: var(--ds-typeface-regular) !important;
+  font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
   font-size: var(--ds-type-size-default) !important;
   font-weight: var(--ds-type-weight-default) !important;
   letter-spacing: var(--ds-type-letterspacing-default) !important;

package/DS1/3-unit/styles/ds-sidebar.css

@@ -8,7 +8,7 @@
   min-width: 0;
   min-height: 0;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

package/DS1/3-unit/styles/ds-table-of-contents.css

@@ -4,7 +4,7 @@
   width: var(--ds-toc-width, calc(12 * var(--ds-unit)));
   max-width: 100%;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
   line-height: var(--ds-type-lineheight-default);

package/DS1/3-unit/styles/ds-token-field.css

@@ -5,7 +5,7 @@
 .frame:focus-within { outline: 1px solid var(--ds-focus-ring); outline-offset: -1px; }
 slot { display: contents; }
 .entry { display: flex; align-items: center; flex: 1 1 calc(8 * var(--ds-unit)); min-width: min(100%, calc(4 * var(--ds-unit))); max-width: 100%; height: var(--ds-row-height); }
-::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }
+::slotted(input) { box-sizing: border-box !important; flex: 1 1 0 !important; width: 0 !important; min-width: 0 !important; max-width: 100% !important; height: var(--ds-row-height) !important; margin: 0 !important; padding: 0 calc(4px * var(--ds-sf)) !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--ds-text-color) !important; font-family: "Inter Arrows", var(--ds-typeface-regular) !important; font-size: var(--ds-type-size-default) !important; line-height: var(--ds-type-lineheight-default) !important; letter-spacing: var(--ds-type-letterspacing-default) !important; outline: none !important; box-shadow: none !important; }
 ::slotted(input:disabled) { opacity: .5; }
 ::slotted(ds-token) { max-width: 100%; }
 ds-button { flex: 0 0 auto; --ds-button-width: var(--ds-row-height); --ds-button-height: var(--ds-row-height); }

package/DS1/4-page/ds-container.ts

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-container.ts
 // Container component with responsive width constraints
 
@@ -19,7 +20,7 @@ export class Container extends LitElement {
   }
 }
 
-customElements.define("ds-container", Container);
+define("ds-container", Container);
 
 declare global {
   interface HTMLElementTagNameMap {

package/DS1/4-page/styles/ds-overlay.css

@@ -17,7 +17,7 @@ ds-overlay > dialog {
   box-shadow: none;
   overflow: var(--ds-overlay-overflow, auto);
   overscroll-behavior: contain;
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

package/DS1/4-page/styles/ds-page.css

@@ -22,7 +22,7 @@
   container-type: inline-size;
   min-width: 0;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-type-lineheight-default);

package/DS1/4-page/styles/ds-panel.css

@@ -10,7 +10,7 @@
   min-height: 0;
   background: var(--ds-paper);
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-type-lineheight-default);

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

@@ -1 +1 @@
-{"version":3,"file":"constraint-panel.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraint-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAKlF,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB;kBA2Rf,MAAM,GAAG,MAAM;;;;;;oBA9KI,UAAU;;EAuMlD;AAED,4HAA4H;AAC5H,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAiB3C;;;;GAIG;AACH,eAAO,MAAM,WAAW,eACiD,CAAC;AAE1E,mHAAmH;AACnH,wBAAgB,gBAAgB,CAAC,MAAM,SAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxF;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CA4C7C"}
+{"version":3,"file":"constraint-panel.d.ts","sourceRoot":"","sources":["../../DS1/0-face/constraint-panel.ts"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAKlF,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB;kBAuSf,MAAM,GAAG,MAAM;;;;;;oBAjLI,UAAU;;EAkNlD;AAED,4HAA4H;AAC5H,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAiB3C;;;;GAIG;AACH,eAAO,MAAM,WAAW,eACiD,CAAC;AAE1E,mHAAmH;AACnH,wBAAgB,gBAAgB,CAAC,MAAM,SAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAIxF;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,IAAI,IAAI,CA4C7C"}

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"}