@0001-labs/design-system-1 0.3.0-alpha.28 → 0.3.1

package/dist/0-face/translations/pt.json

@@ -30,6 +30,10 @@
         "Light": "Claro",
         "Dark": "Escuro",
         "System": "Sistema",
+        "Shape": "Forma",
+        "Square": "Quadrada",
+        "Rounded": "Arredondada",
+        "Circular": "Circular",
         "Note": "Nota",
         "Page": "Página",
         "Red": "Vermelho",
@@ -124,6 +128,11 @@
         "Total": "Total",
         "End date": "Data de fim",
         "Include time": "Incluir hora",
-        "Time": "Hora"
+        "Time": "Hora",
+        "Day": "Dia",
+        "Week": "Semana",
+        "Month": "Mês",
+        "Swimlane": "Raias",
+        "View": "Vista"
     }
 }

package/dist/0-face/translations/sv.json

@@ -30,6 +30,10 @@
         "Light": "Ljust",
         "Dark": "Mörkt",
         "System": "System",
+        "Shape": "Form",
+        "Square": "Fyrkantig",
+        "Rounded": "Rundad",
+        "Circular": "Cirkulär",
         "Note": "Anteckning",
         "Page": "Sida",
         "Red": "Röd",
@@ -124,6 +128,11 @@
         "Total": "Totalt",
         "End date": "Slutdatum",
         "Include time": "Inkludera tid",
-        "Time": "Tid"
+        "Time": "Tid",
+        "Day": "Dag",
+        "Week": "Vecka",
+        "Month": "Månad",
+        "Swimlane": "Banor",
+        "View": "Vy"
     }
 }

package/dist/0-face/translations/zh.json

@@ -30,6 +30,10 @@
         "Light": "浅色",
         "Dark": "深色",
         "System": "跟随系统",
+        "Shape": "形状",
+        "Square": "方形",
+        "Rounded": "圆角",
+        "Circular": "圆形",
         "Note": "笔记",
         "Page": "页面",
         "Red": "红色",
@@ -124,6 +128,11 @@
         "Total": "合计",
         "End date": "结束日期",
         "Include time": "包含时间",
-        "Time": "时间"
+        "Time": "时间",
+        "Day": "日",
+        "Week": "周",
+        "Month": "月",
+        "Swimlane": "泳道",
+        "View": "视图"
     }
 }

package/dist/0-face/word-wrap.d.ts

@@ -0,0 +1,6 @@
+import type { Finding } from './constraints';
+/** Headings in the rendered tree, including native table headers, slots and open shadow roots. */
+export declare function wordHeaders(root: ParentNode): Element[];
+/** Measure actual line breaks, not merely a CSS declaration that might never break a word. */
+export declare function inspectWordWrap(root: ParentNode): Finding[];
+//# sourceMappingURL=word-wrap.d.ts.map

package/dist/0-face/word-wrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"word-wrap.d.ts","sourceRoot":"","sources":["../../DS1/0-face/word-wrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAmB7C,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,CAgBvD;AAWD,8FAA8F;AAC9F,wBAAgB,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG,OAAO,EAAE,CAgE3D"}

package/dist/0-face/word-wrap.js

@@ -0,0 +1,119 @@
+const selector = 'h1,h2,h3,h4,h5,h6,th,[role="heading"],[role="columnheader"],[role="rowheader"],ds-text[size="heading"],ds-text[size="display"],.ds-text--heading,.ds-text--display';
+const styleOf = (element) => element.ownerDocument.defaultView.getComputedStyle(element);
+const parentOf = (node) => node.assignedSlot
+    ?? node.parentElement ?? (node.getRootNode().host || null);
+function children(node) {
+    if (node.nodeType === 1) {
+        const element = node;
+        if (element.localName === 'slot') {
+            const assigned = element.assignedNodes({ flatten: true });
+            if (assigned.length)
+                return assigned;
+        }
+        if (element.shadowRoot)
+            return Array.from(element.shadowRoot.childNodes);
+    }
+    return Array.from(node.childNodes);
+}
+/** Headings in the rendered tree, including native table headers, slots and open shadow roots. */
+export function wordHeaders(root) {
+    const headers = [];
+    function visit(node, inHeader = false) {
+        if (node.nodeType === 1) {
+            const element = node;
+            const style = styleOf(element);
+            if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0)
+                return;
+            if (element.matches(selector) && !inHeader) {
+                headers.push(element);
+                inHeader = true;
+            }
+        }
+        for (const child of children(node))
+            visit(child, inHeader);
+    }
+    visit(root);
+    return headers;
+}
+function languageOf(element) {
+    for (let current = element; current; current = parentOf(current)) {
+        if (current.hasAttribute('lang'))
+            return current.getAttribute('lang') ?? '';
+    }
+    return '';
+}
+/** Measure actual line breaks, not merely a CSS declaration that might never break a word. */
+export function inspectWordWrap(root) {
+    const findings = [];
+    for (const header of wordHeaders(root)) {
+        let text = '';
+        const letters = [];
+        function collect(node) {
+            if (node.nodeType === 3) {
+                const element = parentOf(node);
+                if (!element)
+                    return;
+                for (let offset = 0; offset < (node.nodeValue?.length ?? 0); offset++) {
+                    text += node.nodeValue[offset];
+                    letters.push({ node: node, offset, element });
+                }
+            }
+            else {
+                if (node.nodeType === 1) {
+                    const style = styleOf(node);
+                    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0)
+                        return;
+                }
+                for (const child of children(node))
+                    collect(child);
+            }
+        }
+        collect(header);
+        // These alphabetic scripts break at words. CJK and scripts with dictionary-based line
+        // breaking retain their native typesetting rules instead of being treated as long words.
+        const words = text.matchAll(/[\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Script=Arabic}\p{Script=Hebrew}\p{M}\u00ad]+/gu);
+        for (const match of words) {
+            const word = match[0];
+            const start = match.index;
+            let previous;
+            let broken = false;
+            for (let index = start; index < start + word.length; index++) {
+                if (text[index] === '\u00ad')
+                    continue;
+                const letter = letters[index];
+                const range = header.ownerDocument.createRange();
+                range.setStart(letter.node, letter.offset);
+                range.setEnd(letter.node, letter.offset + 1);
+                const box = Array.from(range.getClientRects()).filter(rect => rect.width > 0 && rect.height > 0).pop();
+                if (!box)
+                    continue;
+                const style = styleOf(letter.element);
+                const vertical = style.writingMode.startsWith('vertical');
+                const overlap = previous && (vertical
+                    ? Math.min(box.right, previous.box.right) - Math.max(box.left, previous.box.left)
+                    : Math.min(box.bottom, previous.box.bottom) - Math.max(box.top, previous.box.top));
+                if (previous && overlap <= 1) {
+                    const previousStyle = styleOf(previous.letter.element);
+                    const hyphens = style.hyphens || style.getPropertyValue('-webkit-hyphens');
+                    const manual = text.slice(previous.index + 1, index).includes('\u00ad') && hyphens !== 'none';
+                    // Auto hyphenation is an engine/language decision. Never excuse emergency wrapping
+                    // or an explicit line break just because hyphens:auto happens to be inherited.
+                    const automatic = hyphens === 'auto' && languageOf(letter.element) !== ''
+                        && letter.node === previous.letter.node
+                        && [style, previousStyle].every(s => !['break-all', 'break-word'].includes(s.wordBreak)
+                            && !['anywhere', 'break-word'].includes(s.overflowWrap));
+                    if (!manual && !automatic) {
+                        broken = true;
+                        break;
+                    }
+                }
+                previous = { box, letter, index };
+            }
+            if (broken) {
+                findings.push({ element: header, message: `“${word.replace(/\u00ad/g, '')}” breaks inside a word without a typesetting hyphen; give the header room, wrap between words, or hyphenate a long word at a valid language-specific point.` });
+                break;
+            }
+        }
+    }
+    return findings;
+}

package/dist/1-root/foundation.d.ts

@@ -0,0 +1,12 @@
+/** Shared geometry belongs to the foundation, not to a design library's appearance.
+ * These are unscaled inputs; device scaling and resolved component metrics stay shared.
+ * Rendered constraints still check layout, contrast, labels and font alignment.
+ */
+export declare const FOUNDATION_TOKENS: Readonly<Record<string, string>>;
+/** The squares a design may stand on: the default 20px, a finer 10px for tuning, or a coarser 30px. */
+export declare const SUPPORTED_UNITS: readonly [10, 20, 30];
+/** A foundation input a design may change within its supported scales, rather than one fixed. */
+export declare const foundationScale: (name: string) => boolean;
+/** A design can repeat a foundation default or choose a supported scale; anything else requires a foundation release. */
+export declare function foundationTokenIssue(name: string, value: string): string | undefined;
+//# sourceMappingURL=foundation.d.ts.map

package/dist/1-root/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../DS1/1-root/foundation.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAY9D,CAAC;AAEF,uGAAuG;AACvG,eAAO,MAAM,eAAe,uBAAqC,CAAC;AAsBlE,iGAAiG;AACjG,eAAO,MAAM,eAAe,GAAI,MAAM,MAAM,YAAmB,CAAC;AAEhE,yHAAyH;AACzH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAYpF"}

package/dist/1-root/foundation.js

@@ -0,0 +1,59 @@
+import { measures } from './measures';
+/** Shared geometry belongs to the foundation, not to a design library's appearance.
+ * These are unscaled inputs; device scaling and resolved component metrics stay shared.
+ * Rendered constraints still check layout, contrast, labels and font alignment.
+ */
+export const FOUNDATION_TOKENS = {
+    '--ds-1': `${measures.square}px`,
+    '--one-unit': `${measures.square}px`,
+    '--ds-control-size': `${measures.control}px`,
+    '--one-control-height': `${measures.control}px`,
+    '--ds-row-size': `${measures.row}px`,
+    '--ds-text-leading': `${measures.leading}px`,
+    '--ds-08': 'calc(var(--ds-1) * 0.8)',
+    '--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-lineheight-default': 'calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1))',
+};
+/** The squares a design may stand on: the default 20px, a finer 10px for tuning, or a coarser 30px. */
+export const SUPPORTED_UNITS = [10, measures.square, 30];
+/** The finest supported square: rows stand on whole multiples of it. */
+const finest = Math.min(...SUPPORTED_UNITS);
+/** A control is its row less the spare four, as the default 16px control sits in its 20px row. */
+const spare = measures.square - measures.control;
+const onTens = (px) => px > 0 && px % finest === 0;
+/** A control fills whole squares, or stands in them less the spare four. */
+const controlOnTens = (px) => px >= measures.control && (onTens(px) || onTens(px + spare));
+/** A line of text's box keeps to the spare four, from the default 16px up. */
+const leadingOnFours = (px) => px >= measures.leading && px % spare === 0;
+/** The geometry inputs a design may set within the foundation, with the values they accept. */
+const SCALES = {
+    '--ds-1': { allows: (px) => SUPPORTED_UNITS.includes(px), words: `one of ${SUPPORTED_UNITS.join(', ')}px` },
+    '--one-unit': { allows: (px) => SUPPORTED_UNITS.includes(px), words: `one of ${SUPPORTED_UNITS.join(', ')}px` },
+    '--ds-row-size': { allows: onTens, words: `a whole number of ${finest}px squares` },
+    '--ds-control-size': { allows: controlOnTens, words: `whole ${finest}px squares, or those less ${spare}px, ${measures.control}px or more` },
+    '--one-control-height': { allows: controlOnTens, words: `whole ${finest}px squares, or those less ${spare}px, ${measures.control}px or more` },
+    '--ds-text-leading': { allows: leadingOnFours, words: `a multiple of ${spare}px, ${measures.leading}px or more` },
+};
+/** A foundation input a design may change within its supported scales, rather than one fixed. */
+export const foundationScale = (name) => name in SCALES;
+/** A design can repeat a foundation default or choose a supported scale; anything else requires a foundation release. */
+export function foundationTokenIssue(name, value) {
+    const expected = FOUNDATION_TOKENS[name];
+    if (!expected)
+        return;
+    if (value.replace(/\s/g, '') === expected.replace(/\s/g, ''))
+        return;
+    // The published compatibility bridge derives these inputs from protected library tokens.
+    if ((name === '--ds-1' && value.trim() === 'var(--one-unit)') ||
+        (name === '--ds-control-size' && value.trim() === 'var(--one-control-height)'))
+        return;
+    const literal = /^([0-9]+(?:\.[0-9]+)?)px$/i.exec(value.trim());
+    const scale = SCALES[name];
+    if (literal && (scale ? scale.allows(Number(literal[1])) : Number(literal[1]) === Number.parseFloat(expected)))
+        return;
+    if (scale)
+        return `${name} belongs to the shared foundation and must be ${scale.words}. Change colours, fonts and appearance within its constraints.`;
+    return `${name} belongs to the shared foundation and must stay ${expected}. Change colours, fonts and appearance within its constraints.`;
+}

package/dist/2-core/button-split.d.ts

@@ -14,6 +14,7 @@ export interface SplitButtonState extends HTMLElement {
     splitDisabled: boolean;
     actions: boolean;
     literal: boolean;
+    labelled?: boolean;
     renderRoot: HTMLElement | DocumentFragment;
 }
 export declare function focusSplit(host: SplitButtonState, options?: FocusOptions): void;

package/dist/2-core/button-split.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-split.d.ts","sourceRoot":"","sources":["../../DS1/2-core/button-split.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAC;IACzD,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,WAAW,GAAG,gBAAgB,CAAC;CAChF;AAuBD,wBAAgB,UAAU,CAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,YAAY,QAGxE;AACD,wBAAgB,WAAW,CAAC,IAAI,EAAE,gBAAgB,mCAYjD"}
+{"version":3,"file":"button-split.d.ts","sourceRoot":"","sources":["../../DS1/2-core/button-split.ts"],"names":[],"mappings":"AAEA,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,OAAO,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,aAAa,EAAE,OAAO,CAAC;IACzD,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,WAAW,GAAG,gBAAgB,CAAC;CACpG;AAuBD,wBAAgB,UAAU,CAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,YAAY,QAGxE;AACD,wBAAgB,WAAW,CAAC,IAAI,EAAE,gBAAgB,mCAiBjD"}

package/dist/2-core/button-split.js

@@ -34,15 +34,20 @@ export function focusSplit(host, options) {
     (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
 }
 export function renderSplit(host) {
+    // `labelled` writes a segment's words after its icon; otherwise an icon stands alone and names it.
+    const words = (segment) => html `<ds-text .text=${segment.label} .literal=${host.literal}></ds-text>`;
     return html `${choices(host).map(segment => html `<button
       type="button" part="segment" value=${segment.value}
       aria-pressed=${host.actions ? nothing : String(segment.value === host.value)}
-      aria-label=${segment.icon ? (host.literal ? segment.label : getText(segment.label)) : nothing}
-      ?data-icon=${!!segment.icon}
+      aria-label=${segment.icon && !host.labelled ? (host.literal ? segment.label : getText(segment.label)) : nothing}
+      ?data-icon=${!!segment.icon && !host.labelled}
+      ?data-icon-words=${!!segment.icon && !!host.labelled}
       ?data-short=${segment.label.length === 1}
       ?disabled=${host.splitDisabled || segment.disabled}
       @click=${() => press(host, segment)}
     >${segment.icon
-        ? html `<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
-        : html `<ds-text .text=${segment.label} .literal=${host.literal}></ds-text>`}</button>`)}`;
+        ? host.labelled
+            ? html `<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>${words(segment)}`
+            : html `<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
+        : words(segment)}</button>`)}`;
 }

package/dist/2-core/chart/grid-chart.d.ts

@@ -43,6 +43,8 @@ export interface CrosshairEvent {
     x: number;
     y: number;
 }
+/** The round sizes a square of a chart stands for: 1, 2, 2.5 and 5 times a power of ten. */
+export declare const STEPS: number[];
 export declare class Series {
     private chart;
     options: SeriesOptions;

package/dist/2-core/chart/grid-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-chart.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/chart/grid-chart.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"grid-chart.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/chart/grid-chart.ts"],"names":[],"mappings":"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"}

package/dist/2-core/chart/grid-chart.js

@@ -8,7 +8,8 @@
  *   and a five-year series draw with the same one-pixel stroke and never blur;
  * - fills are one-pixel strokes at two-pixel intervals, for a patterned fill.
  */
-const STEPS = [];
+/** The round sizes a square of a chart stands for: 1, 2, 2.5 and 5 times a power of ten. */
+export const STEPS = [];
 for (let exp = -4; exp <= 9; exp++) {
     for (const base of [1, 2, 2.5, 5])
         STEPS.push(base * 10 ** exp);

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+/**
+ * A working mark on the sixteen: four-pixel cells rearrange inside a control
+ * square. Set active only while work is running; the default slot names the
+ * actual operation. Reduced motion keeps the resting arrangement. Decorative
+ * marks use aria-hidden and put their status in a separate live region.
+ */
+export declare class Activity extends LitElement {
+    static properties: {
+        active: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    active: boolean;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-activity": Activity;
+    }
+}
+//# sourceMappingURL=ds-activity.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-activity.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-activity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAWlD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;;;;;MAAgD;IACjE,MAAM,CAAC,MAAM,4BAA2C;IAChD,MAAM,EAAE,OAAO,CAAC;;IAExB,MAAM;CAOP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,aAAa,EAAE,QAAQ,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,28 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import metrics from "../1-root/component-metrics.css?inline";
+import styles from "./styles/ds-activity.css?inline";
+// Each frame is a small arrangement of squares, not a measure of completion.
+const patterns = [
+    [5, 6, 9, 10], [1, 5, 6, 9], [1, 2, 6, 10], [2, 6, 7, 10],
+    [5, 6, 9, 10], [6, 9, 10, 14], [5, 9, 13, 14], [5, 8, 9, 13],
+];
+/**
+ * A working mark on the sixteen: four-pixel cells rearrange inside a control
+ * square. Set active only while work is running; the default slot names the
+ * actual operation. Reduced motion keeps the resting arrangement. Decorative
+ * marks use aria-hidden and put their status in a separate live region.
+ */
+export class Activity extends LitElement {
+    constructor() { super(); this.active = false; }
+    render() {
+        return html `<span class="mark" aria-hidden="true">
+      ${patterns.map((cells, frame) => html `<span class="frame" style=${`animation-delay: -${frame * 200}ms`}>
+        ${Array.from({ length: 16 }, (_, cell) => html `<i class=${cells.includes(cell) ? "ink" : ""}></i>`)}
+      </span>`)}
+    </span><span class="words"><slot></slot></span>`;
+    }
+}
+Activity.properties = { active: { type: Boolean, reflect: true } };
+Activity.styles = [unsafeCSS(metrics), unsafeCSS(styles)];
+define("ds-activity", Activity);

package/dist/2-core/ds-app-chrome.d.ts

@@ -0,0 +1,2 @@
+export * from '../5-visual-kit/app-chrome';
+//# sourceMappingURL=ds-app-chrome.d.ts.map

package/dist/2-core/ds-app-chrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-app-chrome.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-app-chrome.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/2-core/ds-app-chrome.js

@@ -0,0 +1 @@
+export * from '../5-visual-kit/app-chrome';

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

@@ -1,6 +1,8 @@
 import { LitElement, type PropertyValues } from "lit";
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
 export declare function avatarInk(color: string): string | undefined;
+/** The ink on a fill as the browser resolved it (`rgb(253, 187, 45)`), for a `color` given as a variable. */
+export declare function inkOnResolved(fill: string): string | undefined;
 /**
  * A person's or workspace's mark, one control high and round by default;
  * `shape="square"` gives it a picture's corners (`--ds-avatar-radius`, the
@@ -88,7 +90,17 @@ 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;
+    /** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
+     *  frame, and once more when the page has loaded everything. */
+    private resolveInk;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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;AAYhF,mFAAmF;AACnF,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAS3D;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,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";
@@ -8,17 +9,33 @@ import styles from "./styles/ds-avatar.css?inline";
 // The person drawing (`icon="avatar"`) comes with the avatar, so it draws in
 // the first frame instead of the initial while the deferred icons load.
 provideIcons({ avatar: avatarIcon });
+/** The ink that reads on a fill: black on a light one, white on a dark one. */
+const inkOn = (rgb) => {
+    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) {
     const match = /^#([a-f\d]{6}|[a-f\d]{3})$/i.exec(color);
     if (!match)
         return undefined;
     const hex = match[1].length === 3 ? [...match[1]].map((c) => c + c).join("") : match[1];
-    const rgb = [0, 2, 4]
-        .map((i) => parseInt(hex.slice(i, i + 2), 16) / 255)
-        .map((n) => (n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4));
-    const luminance = rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
-    return luminance > 0.22 ? "var(--ds-black)" : "var(--ds-white)";
+    return inkOn([0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255));
+}
+/** The ink on a fill as the browser resolved it (`rgb(253, 187, 45)`), for a `color` given as a variable. */
+export function inkOnResolved(fill) {
+    const match = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+%?))?\s*\)/.exec(fill);
+    if (!match)
+        return undefined;
+    // A fill with no colour yet (`rgba(0, 0, 0, 0)`) says nothing about the ink.
+    if (match[4] !== undefined && parseFloat(match[4]) === 0)
+        return undefined;
+    return inkOn([match[1], match[2], match[3]].map((n) => Number(n) / 255));
 }
 /**
  * A person's or workspace's mark, one control high and round by default;
@@ -31,6 +48,12 @@ export function avatarInk(color) {
 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 = "";
@@ -42,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;
@@ -49,19 +90,57 @@ export class Avatar extends LitElement {
             this.style.removeProperty("--ds-avatar-intrinsic-ratio");
         }
     }
+    /** 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)
+            return;
+        this.resolveInk();
+    }
+    /** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
+     *  frame, and once more when the page has loaded everything. */
+    resolveInk(tries = 0) {
+        const frame = this.renderRoot.querySelector(".frame");
+        if (!frame || !this.isConnected)
+            return;
+        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)
+            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 });
+        }
+    }
     render() {
         const src = this.src;
         const fallback = this.icon
             ? html `<ds-icon type=${this.icon} aria-hidden="true"></ds-icon>`
             : html `<span
           class="initial"
-          ?data-pair=${[...this.initial].length > 1}
+          ?data-pair=${[...this.initial].length > 1 && !/^\d{1,2}$/.test(this.initial)}
           style=${styleMap({ "--initial-count": String([...this.initial].length || 1) })}
           >${this.initial}</span
         >`;
         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/2-core/ds-badge.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-icon";
-/** A noninteractive status label. Products own its words and status meaning. */
+/**
+ * A noninteractive status label. Products own its words and status meaning.
+ * Words that do not fit fade out over their last square, never an ellipsis.
+ */
 export declare class Badge extends LitElement {
     static properties: {
         icon: {
@@ -18,6 +22,8 @@ export declare class Badge extends LitElement {
     private observer?;
     private contentObserver?;
     private measureFrame;
+    /** Marks the words `data-cut="end"` while they are wider than the badge. */
+    protected readonly cuts: CutFades;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;