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

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

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

package/dist/0-face/generated/toast-assets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-assets.d.ts","sourceRoot":"","sources":["../../../DS1/0-face/generated/toast-assets.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iEAAiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAq0N,CAAC;AAEh2N,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAK9D,CAAC"}
+{"version":3,"file":"toast-assets.d.ts","sourceRoot":"","sources":["../../../DS1/0-face/generated/toast-assets.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,iEAAiE;AACjE,eAAO,MAAM,WAAW,EAAE,MAAu1N,CAAC;AAEl3N,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,eAAe,GAAG,SAAS,CAAC;AAE5E,qFAAqF;AACrF,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAK9D,CAAC"}

package/dist/0-face/generated/toast-assets.js

@@ -4,7 +4,7 @@
  * files and run `vp run generate:toast-assets`.
  */
 /** The toast's stylesheet, the same one `<ds-toast>` imports. */
-export const toastStyles = "[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 = "[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}}";
 /** The icons the page toaster draws: the toast types' own and the close button's. */
 export const toastIcons = {
     "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>\n",

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

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

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

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

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

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

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

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

package/dist/3-unit/context-trigger.js

@@ -12,6 +12,7 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
     let suppressed = null;
     let release;
     let disposed = false;
+    let mousePress;
     if (aria)
         trigger.setAttribute("aria-haspopup", "menu");
     if (selection)
@@ -38,6 +39,7 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
         release = setTimeout(clearSuppression, 1000);
     };
     const cancel = () => {
+        mousePress = undefined;
         clearTimeout(timer);
         timer = undefined;
         point = undefined;
@@ -52,7 +54,28 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
     const context = (event) => {
         if (event.defaultPrevented)
             return;
-        const control = resolve(event);
+        // 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?.nodeType !== "number" || !trigger.contains(gesture.target)))
+            return;
+        const control = resolve(gesture);
         if (!control || !enabled(control))
             return;
         cancel();
@@ -60,7 +83,7 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
             event.preventDefault();
             return;
         }
-        if (open({ x: event.clientX, y: event.clientY }, control, event) === false)
+        if (open({ x: event.clientX, y: event.clientY }, control, gesture) === false)
             return;
         event.preventDefault();
         if (selection && event.button === 0)
@@ -107,6 +130,11 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
                 arm(control);
         }, LONG_PRESS);
     };
+    const rememberMouse = (event) => {
+        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);
@@ -119,6 +147,8 @@ export function bindContextMenuTrigger(trigger, open, { resolve = () => trigger,
             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");

package/dist/3-unit/ds-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-form.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-form.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACnC;AAKD,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAOf;IAEM,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,IAAI,GAAG,KAAK,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;;IAY/B,MAAM,CAAC,MAAM,0BAyBX;IAEF;;OAEG;IACH,WAAW,IAAI,QAAQ;IAYvB,OAAO,CAAC,gBAAgB;IA8BxB;;OAEG;IACH,QAAQ,IAAI,oBAAoB;IAoBhC,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,aAAa;IA0BrB;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAyD7B,OAAO,CAAC,aAAa;IAMrB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB,CAcxB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEF,MAAM;CAcP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-form.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-form.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACnC;AAKD,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAOf;IAEM,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,IAAI,GAAG,KAAK,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;;IAY/B,MAAM,CAAC,MAAM,0BAyBX;IAEF;;OAEG;IACH,WAAW,IAAI,QAAQ;IAYvB,OAAO,CAAC,gBAAgB;IA8BxB;;OAEG;IACH,QAAQ,IAAI,oBAAoB;IAoBhC,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,aAAa;IA0BrB;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAyD7B,OAAO,CAAC,aAAa;IAMrB,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B;;;;;OAKG;IACH,OAAO,CAAC,kBAAkB,CAcxB;IAEF,OAAO,CAAC,cAAc,CAQpB;IAEF,MAAM;CAcP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-form.js

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-form.ts
 // Form component for handling form submissions and validation
 import { LitElement, html, css } from "lit";
@@ -279,4 +280,4 @@ Form.styles = css `
       pointer-events: none;
     }
   `;
-customElements.define("ds-form", Form);
+define("ds-form", Form);

package/dist/3-unit/ds-table.d.ts.map

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

package/dist/3-unit/ds-table.js

@@ -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
@@ -468,4 +469,4 @@ function text(value) {
         return "";
     return typeof value === "number" ? value.toLocaleString() : String(value);
 }
-customElements.define("ds-table", DsTable);
+define("ds-table", DsTable);

package/dist/4-page/ds-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
+{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/4-page/ds-container.js

@@ -1,3 +1,4 @@
+import { define } from "../0-face/define";
 // ds-container.ts
 // Container component with responsive width constraints
 import { LitElement, html, unsafeCSS } from "lit";
@@ -8,4 +9,4 @@ export class Container extends LitElement {
     }
 }
 Container.styles = unsafeCSS(styles);
-customElements.define("ds-container", Container);
+define("ds-container", Container);