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

package/DS1/0-face/constraint-panel.ts

@@ -1,5 +1,6 @@
+import { paintFaultLines } from './fault-lines';
 import { measureConstraints, type Constraint, type Finding } from './constraints';
-import { PHONE_WIDTHS, checkSite, findSitePages, inspectInFrame, ruleLine, summarizePages, summarizeRules, type PageResult } from './constraint-site';
+import { VIEWPORT_WIDTHS, checkSite, findSitePages, inspectInFrame, ruleLine, summarizePages, summarizeRules, type PageResult } from './constraint-site';
 
 // appendChild, not append: a Worker project's types redefine append for its HTML rewriter.
 
@@ -38,7 +39,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;
@@ -60,6 +62,7 @@ export function createConstraintPanel() {
       text-align: center;
     }
     aside {
+      z-index: 2;
       position: absolute;
       inset-block: 0;
       inset-inline-end: 0;
@@ -106,14 +109,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<SVGSVGElement>('.fault-lines')!;
   const rings = shadow.querySelector<HTMLDivElement>('.rings')!;
   const list = shadow.querySelector<HTMLOListElement>('[data-findings]')!;
   const rulesSection = shadow.querySelector<HTMLElement>('[data-rules]')!;
@@ -123,6 +130,9 @@ export function createConstraintPanel() {
   const status = shadow.querySelector<HTMLElement>('[data-status]')!;
   const title = shadow.querySelector('strong')!;
   const frames = shadow.querySelector<HTMLDivElement>('.frames')!;
+  const linesButton = shadow.querySelector<HTMLButtonElement>('[data-lines]')!;
+  const setLinesOnly = (enabled: boolean) => { panel.toggleAttribute('data-lines-only', enabled); linesButton.textContent = enabled ? 'Results' : 'Lines'; };
+  linesButton.addEventListener('click', () => setLinesOnly(!panel.hasAttribute('data-lines-only')));
   const siteButton = shadow.querySelector<HTMLButtonElement>('[data-site]')!;
   let site: AbortController | null = null;
   let findings: (Finding & { constraint: Constraint })[] = [];
@@ -131,6 +141,7 @@ export function createConstraintPanel() {
 
   const place = () => {
     frame = 0;
+    paintFaultLines(document, faultLines);
     rings.replaceChildren(...findings.map(({ element }, index) => {
       const rect = element.getBoundingClientRect();
       const ring = document.createElement('div');
@@ -144,6 +155,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();
@@ -276,7 +289,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,13 +315,21 @@ export function createConstraintPanel() {
   const show = (mode: 'page' | 'site' = 'page') => {
     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/DS1/0-face/constraint-site.ts

@@ -8,6 +8,7 @@ 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;
 
@@ -61,7 +62,7 @@ const wait = (ms: number) => 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: Element | ShadowRoot, url: string, widths: number[] = PHONE_WIDTHS, height = 844): Promise<PageCheck[]> {
+export async function inspectInFrame(host: Element | ShadowRoot, url: string, widths: number[] = VIEWPORT_WIDTHS, height = 844): Promise<PageCheck[]> {
   const frame = document.createElement('iframe');
   frame.setAttribute('aria-hidden', 'true');
   frame.tabIndex = -1;
@@ -114,7 +115,7 @@ export function checkPage(page: ParentNode): PageCheck {
  * 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 }: {
   pages: string[];
   widths?: number[];
   /** One page at every width, in the order of `widths`. */

package/DS1/0-face/constraints.ts

@@ -1,3 +1,4 @@
+import { faultLineGrids, inspectFaultLines } from './fault-lines';
 import { labelledButtons, inspectButtonLabels } from './button-label';
 import { inspectTextContrast, measureTextContrast } from "./text-contrast";
 import { inspectWordWrap, wordHeaders } from './word-wrap';
@@ -35,6 +36,14 @@ export type Constraint = {
   count: (root: ParentNode) => number;
 };
 
+/** The actual initial, including a component nested in another open shadow root. */
+function isAvatarInitial(element: Element): boolean {
+  for (let parent: Element | null = element; parent; parent = parent.assignedSlot ?? parent.parentElement ?? (parent.getRootNode() as ShadowRoot).host ?? null) {
+    if (parent.matches('ds-avatar, .ds-avatar')) return true;
+  }
+  return false;
+}
+
 /** A pixel either way is the same place. */
 const near = (a: number, b: number) => Math.abs(a - b) <= 1;
 const px = (n: number) => `${Math.round(n)}px`;
@@ -103,6 +112,14 @@ function rows(found: ReturnType<typeof cards>) {
 }
 
 export const constraints: Constraint[] = [
+  {
+    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.',
@@ -146,6 +163,16 @@ export const constraints: Constraint[] = [
     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/DS1/0-face/define.ts

@@ -13,7 +13,7 @@ export function define(name: string, element: CustomElementConstructor): void {
   const type = element as StyledConstructor;
   const prototype = element.prototype as StyledElement;
   const original = prototype.createRenderRoot;
-  if (original) {
+  if (original && typeof document !== 'undefined') {
     const definingDocument = document;
     prototype.createRenderRoot = function (this: StyledElement) {
       if (this.ownerDocument === definingDocument || !type.elementStyles?.length) return original.call(this);

package/DS1/0-face/fault-lines.ts

@@ -0,0 +1,159 @@
+import type { Finding } from './constraints';
+
+const tolerance = 1;
+const near = (a: number, b: number) => Math.abs(a - b) <= tolerance;
+const style = (el: Element) => el.ownerDocument.defaultView!.getComputedStyle(el);
+const visible = (el: Element) => {
+  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: ParentNode): Element[] {
+  return Array.from(root.querySelectorAll('*')).flatMap(el => [el, ...(el.shadowRoot ? elements(el.shadowRoot) : [])]);
+}
+
+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 function faultLineGrids(root: ParentNode): Grid[] {
+  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: DOMRect) => axis === 'x' ? box.top : box.left;
+    const crossEnd = (box: DOMRect) => axis === 'x' ? box.bottom : box.right;
+    const start = (box: DOMRect) => axis === 'x' ? box.left : box.top;
+    const end = (box: DOMRect) => axis === 'x' ? box.right : box.bottom;
+    const bands: DOMRect[][] = [];
+    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: Grid[], i: number) {
+  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: ParentNode): Finding[] {
+  const grids = faultLineGrids(root);
+  const findings: Finding[] = [];
+  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: ParentNode, layer: SVGSVGElement): void {
+  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<string>();
+  const referenceInk = '#087ba8';
+  const faultInk = '#de0331';
+  function mark(tag: string, attributes: Record<string, string | number>, title?: string) {
+    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: DOMRect[][] = [];
+    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']] as const) {
+        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/DS1/0-face/generated/toast-assets.ts

@@ -5,7 +5,7 @@
  */
 
 /** The toast's stylesheet, the same one `<ds-toast>` imports. */
-export const toastStyles: string = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;inset: auto;overflow: visible;border: 0;background: transparent;color: inherit;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);font-family: var(--ds-typeface-regular);font-feature-settings: var(--ds-font-features);font-size: var(--ds-type-size-default);line-height: var(--ds-control-height);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
+export const toastStyles: string = "[data-ds-shape=\"square\"], :host([data-ds-shape=\"square\"]){--ds-corner-size: 0px;--ds-corner-shape: round;--ds-button-inset: 0.5px}[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 4px;--ds-corner-shape: round;--ds-button-inset: 2.5px}[data-ds-shape=\"circular\"], :host([data-ds-shape=\"circular\"]){--ds-corner-size: 999px;--ds-corner-shape: round;--ds-button-inset: 5px}@supports (corner-shape: squircle){[data-ds-shape=\"rounded\"], :host([data-ds-shape=\"rounded\"]){--ds-corner-size: 8px;--ds-corner-shape: squircle}}:root, :host, :where([data-ds-surface]){--ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));--ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));--ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));--ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));--ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));--ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));--ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));--ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));--ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));--ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));--ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1))}:host{--ds-toast-width: calc(16 * var(--ds-unit));--ds-toast-offset: var(--ds-unit);--ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));--ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));--ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));display: contents}section{display: contents}ol{--lift: -1;position: fixed;z-index: 2147483000;inset: auto;overflow: visible;border: 0;background: transparent;color: inherit;box-sizing: border-box;width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));margin: 0;padding: 0;list-style: none;outline: none;pointer-events: none}ol[data-y=\"top\"]{--lift: 1;top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px))}ol[data-y=\"bottom\"]{bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px))}ol[data-x=\"left\"]{left: var(--ds-toast-offset)}ol[data-x=\"right\"]{right: var(--ds-toast-offset)}ol[data-x=\"center\"]{left: 50%;transform: translateX(-50%)}:host([contained]) ol{position: absolute;z-index: var(--ds-toast-z-index, 60)}:host([contained]) ol[data-y=\"top\"]{top: var(--ds-toast-offset)}:host([contained]) ol[data-y=\"bottom\"]{bottom: var(--ds-toast-offset)}.toast{--swipe: 0px;position: absolute;left: 0;right: 0;box-sizing: border-box;width: max-content;max-width: 100%;overflow: hidden;border-radius: var(--ds-radius);background: var(--ds-toast-background);color: var(--ds-toast-color);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);letter-spacing: var(--ds-type-letterspacing-default);outline: none;touch-action: none;user-select: none;pointer-events: auto;opacity: 0;transition: transform 400ms ease, opacity 400ms ease}ol[data-y=\"bottom\"] .toast{bottom: 0}ol[data-y=\"top\"] .toast{top: 0}ol[data-x=\"center\"] .toast{margin-inline: auto}ol[data-x=\"left\"] .toast{margin-right: auto}ol[data-x=\"right\"] .toast{margin-left: auto}.toast:focus-visible{outline: 2px solid var(--ds-focus-ring);outline-offset: 1px}.toast[data-mounted=\"false\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-mounted=\"true\"]{opacity: 1}ol[data-expanded=\"false\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05))}ol[data-expanded=\"false\"] .toast[data-front=\"false\"]{height: var(--front-height)}ol[data-expanded=\"false\"] .toast[data-front=\"false\"] .body{opacity: 0}ol[data-expanded=\"true\"] .toast[data-mounted=\"true\"]{transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)))}.toast[data-visible=\"false\"]{opacity: 0;pointer-events: none}.toast[data-swiping=\"true\"]{transition: none}.toast[data-removed=\"true\"]{opacity: 0;pointer-events: none}.toast[data-removed=\"true\"][data-front=\"true\"]{transform: translateY(calc(var(--lift) * -100%))}.toast[data-swipe-out=\"true\"]{transform: translateY(calc(var(--swipe) + var(--lift) * -100%))}.body{display: flex;align-items: flex-start;gap: calc(4px * var(--ds-sf));box-sizing: border-box;min-height: var(--ds-control-height);padding-inline: calc(4px * var(--ds-sf));transition: opacity 400ms ease}.icon{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);--ds-icon-color: currentColor}.icon:first-child{margin-left: calc(-4px * var(--ds-sf))}.icon > svg, .close > svg{width: calc(14px * var(--ds-sf));height: calc(14px * var(--ds-sf))}.content{flex: 1 1 auto;min-width: 0}.title, .description{white-space: normal;overflow-wrap: anywhere}.description{opacity: 0.7}.button{flex: 0 0 auto;margin: 0 0 0 calc(4px * var(--ds-sf));padding: 0;border: 0;background: none;color: inherit;font: inherit;letter-spacing: inherit;text-decoration: underline;text-underline-offset: 2px;cursor: pointer}a.button{display: inline-block}.button.cancel{opacity: 0.7}.button:focus-visible, .close:focus-visible{outline: 1px solid currentColor;outline-offset: 1px;border-radius: 1px}.close{display: inline-flex;flex: 0 0 auto;align-items: center;justify-content: center;width: var(--ds-control-height);height: var(--ds-control-height);margin: 0 calc(-4px * var(--ds-sf)) 0 0;padding: 0;border: 0;background: none;color: inherit;cursor: pointer;--ds-icon-color: currentColor}.spinner{width: calc(10px * var(--ds-sf));height: calc(10px * var(--ds-sf));box-sizing: border-box;border: 1px solid color-mix(in srgb, currentColor 25%, transparent);border-top-color: currentColor;border-radius: 50%;animation: ds-toast-spin 720ms linear infinite}@keyframes ds-toast-spin{to{transform: rotate(360deg)}}:host([rich-colors]) .toast[data-type=\"success\"]{--ds-toast-background: var(--ds-apple-green)}:host([rich-colors]) .toast[data-type=\"info\"]{--ds-toast-background: var(--ds-zenith-blue)}:host([rich-colors]) .toast[data-type=\"warning\"]{--ds-toast-background: var(--ds-orange)}:host([rich-colors]) .toast[data-type=\"error\"]{--ds-toast-background: var(--ds-tuned-red)}:host([rich-colors]) .toast:is([data-type=\"success\"], [data-type=\"info\"], [data-type=\"warning\"], [data-type=\"error\"]){--ds-toast-color: var(--ds-black)}@media (prefers-reduced-motion: reduce){.toast, .body{transition: none}.spinner{animation: none}}";
 
 export type ToastIconName = "check" | "close" | "notifications" | "warning";
 

package/DS1/1-root/card.css

@@ -57,7 +57,7 @@
   border-radius: var(--ds-radius-card);
   background: var(--ds-card-fill);
   color: var(--ds-card-ink);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--ds-type-size-default);
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
@@ -127,7 +127,7 @@
 .ds-card__title {
   margin: 0 0 var(--ds-card-title-gap, 0px);
   color: var(--ds-card-ink);
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-size: var(--ds-type-size-display);
   font-weight: var(--ds-type-weight-bold);
   /* A title that wraps keeps its lines together: a square and a half each. */

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0 */
+/* version 0.3.2 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/component-tokens.css

@@ -1,5 +1,17 @@
 @import "./component-metrics.css";
 
+/* inter-arrows:start — generated by scripts/fonts/embed-arrows.mjs */
+/* Inter 4.1, SIL Open Font License 1.1; see fonts/Inter-LICENSE.md. */
+@font-face {
+  font-family: "Inter Arrows";
+  src: url("data:font/woff2;base64,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") format("woff2");
+  unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+/* inter-arrows:end */
+
 /* Shared component tokens. Scoped names keep embedded documents independent.
  * Products may set tokens at their surface; component implementations stay shared.
  */

package/DS1/1-root/context.css

@@ -56,7 +56,7 @@
   box-shadow: none;
   clip-path: inset(0 round var(--ds-context-radius, var(--ds-radius, 4px)));
   color: var(--ds-context-ink);
-  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/1-root/controls.css

@@ -48,7 +48,7 @@
   border-radius: var(--ds-radius);
   background: var(--ds-button-background, transparent);
   color: var(--ds-button-color, var(--ds-button-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);
@@ -168,7 +168,7 @@ a.ds-button[aria-disabled="true"] {
   border-radius: var(--ds-radius);
   background: var(--ds-fill);
   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);
@@ -498,7 +498,7 @@ dialog.ds-overlay {
   box-shadow: none;
   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);
@@ -669,7 +669,7 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   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);
   font-weight: var(--ds-type-weight-default);
@@ -825,7 +825,7 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   min-width: 0;
   margin: 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);
@@ -908,7 +908,7 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   corner-shape: round;
   background: var(--ds-avatar-background, var(--ds-fill));
   color: var(--ds-avatar-color, var(--ds-text-color));
-  font: var(--ds-type-weight-default) var(--ds-type-size-small) / 1 var(--ds-typeface-regular);
+  font: var(--ds-type-weight-default) var(--ds-type-size-small) / 1 "Inter Arrows", var(--ds-typeface-regular);
   letter-spacing: normal;
   text-align: center;
   white-space: nowrap;
@@ -986,7 +986,7 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   overflow: hidden;
   background: var(--ds-badge-background, var(--ds-fill));
   color: var(--ds-badge-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);
@@ -1163,7 +1163,7 @@ dialog.ds-overlay:has(> [data-ds-overlay="close"]) [data-ds-overlay="header"] {
   corner-shape: var(--ds-corner-shape, round);
   background: var(--ds-button-background-color-secondary);
   color: var(--ds-button-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/1-root/document.css

@@ -41,7 +41,7 @@
   gap: var(--ds-unit) calc(2 * var(--ds-unit));
   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);
@@ -141,7 +141,7 @@
   margin: 0;
   padding: 0;
   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);
   line-height: var(--ds-unit);
   letter-spacing: var(--ds-type-letterspacing-default);

package/DS1/1-root/empty.css

@@ -34,7 +34,7 @@
   text-align: center;
   padding-block: var(--ds-empty-padding, 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);
@@ -73,7 +73,7 @@
   min-width: 0;
   padding-top: calc(var(--ds-unit) - var(--ds-control-height));
   line-height: var(--ds-control-height);
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 

package/DS1/1-root/figures.css

@@ -46,7 +46,7 @@
   min-width: 0;
   margin: 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);
@@ -90,7 +90,7 @@
 .ds-stat__figure {
   display: block;
   overflow: hidden;
-  font-family: var(--ds-stat-typeface, var(--ds-typeface-medium));
+  font-family: "Inter Arrows", var(--ds-stat-typeface, var(--ds-typeface-medium));
   font-size: calc(var(--ds-stat-size, var(--ds-display-text-size, 20px)) * var(--ds-sf, 1));
   font-weight: var(--ds-type-weight-bold);
   font-variant-numeric: tabular-nums;