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

package/dist/0-face/layout-inspector.js

@@ -1,4 +1,8 @@
-/** Inspect named page areas without changing their size, opacity, or interaction. */
+/**
+ * Inspect a page's layout without changing its size, opacity, or interaction:
+ * named areas in dashed outlines with their name and size, text and fields in
+ * green boxes, and every component (a custom element) outlined with its tag name.
+ */
 export function createLayoutInspector() {
     const root = document.documentElement;
     const overlay = document.createElement('div');
@@ -17,145 +21,167 @@ export function createLayoutInspector() {
       color-scheme: inherit !important;
     }
     :host([hidden]) { display: none !important; }
-    .veil, .areas { position: absolute; inset: 0; overflow: hidden; }
-    .veil { background: color-mix(in srgb, var(--page-background, Canvas) 78%, transparent); }
-    .area {
+    .boxes { position: absolute; inset: 0; overflow: hidden; }
+    .box {
       position: absolute;
       box-sizing: border-box;
-      display: grid;
-      place-items: center;
-      background: color-mix(in srgb, var(--pastel) 40%, transparent);
-      border: 1px solid color-mix(in srgb, var(--pastel) 65%, #82718d);
+      border: 1px solid var(--tint);
     }
-    .name {
-      box-sizing: border-box;
-      max-width: 100%;
-      padding: 3px 8px;
-      background: var(--page-background, Canvas);
-      color: var(--base-slate, CanvasText);
-      font: 400 14px/20px var(--font-regular, var(--typeface-regular, sans-serif));
-      text-align: center;
-      overflow-wrap: anywhere;
-    }
-    .area[data-container] {
-      background: transparent;
-    }
-    .area[data-container] > .name {
+    .area { --tint: #efc9dc; border-style: dashed; }
+    .text { --tint: #bfe0cd; background: color-mix(in srgb, var(--tint) 18%, transparent); }
+    .field { --tint: #bfe0cd; background: color-mix(in srgb, var(--tint) 45%, transparent); }
+    .component { --tint: #d5c9ef; }
+    .tag {
       position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .area[data-compact] .name {
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      width: max-content;
-      max-width: none;
-      padding: 2px 4px;
-      font-size: 12px;
-      line-height: 16px;
-      white-space: nowrap;
-    }
-    .dimensions {
-      display: block;
-      font-size: 12px;
-      line-height: 16px;
+      box-sizing: border-box;
+      display: flex;
+      gap: 6px;
+      padding: 0 4px;
+      background: var(--tint);
+      color: #2a2530;
+      font: 400 12px/16px var(--font-regular, var(--typeface-regular, sans-serif));
       font-variant-numeric: tabular-nums;
       white-space: nowrap;
     }
+    .area > .tag { top: -1px; right: -1px; }
+    .component > .tag { bottom: 100%; left: -1px; }
+    .component[data-inside] > .tag { bottom: auto; top: -1px; }
+    .measure { opacity: 0.7; }
     @media print { :host { display: none !important; } }
-  </style><div class="veil"></div><div class="areas"></div>`;
+  </style><div class="boxes"></div>`;
     document.body.appendChild(overlay);
-    const layer = shadow.querySelector('.areas');
-    const colors = ['#efc9dc', '#d5c9ef', '#c2d9eb', '#bfe0cd', '#eee3b7', '#efcfb8'];
+    const layer = shadow.querySelector('.boxes');
+    // A page of thousands of words draws its first boxes and stops.
+    const limit = 2000;
+    const fields = new Set(['input', 'textarea', 'select', 'img', 'picture', 'svg', 'video', 'canvas', 'iframe']);
+    const skipped = new Set(['script', 'style', 'template', 'noscript', 'link', 'meta', 'slot']);
+    // Primitives drawn as what they show rather than named: words, an icon,
+    // and a gap with nothing to see.
+    const primitives = { 'ds-text': 'text', 'ds-icon': 'field', 'ds-gap': 'none' };
     let frame = 0;
     let visible = false;
     const observed = new Set();
     const observedRoots = new Set();
-    const getAreas = () => {
-        const named = [];
-        const collect = (scope) => {
-            named.push(...scope.querySelectorAll('[data-ds-area]'));
-            scope.querySelectorAll('[data-ds-layout-root]').forEach((host) => {
-                if (!host.shadowRoot)
-                    return;
-                if (!observedRoots.has(host.shadowRoot)) {
-                    mutations.observe(host.shadowRoot, { subtree: true, childList: true, characterData: true });
-                    observedRoots.add(host.shadowRoot);
+    const collect = () => {
+        const areas = [];
+        const words = [];
+        const components = [];
+        const visit = (parent, inText) => {
+            for (const element of Array.from(parent.children)) {
+                const name = element.localName;
+                if (skipped.has(name) || element.hasAttribute('data-ds-layout-overlay') || element.hasAttribute('data-ds-grid-overlay'))
+                    continue;
+                if (element.hasAttribute('data-ds-area'))
+                    areas.push(element);
+                const primitive = primitives[name];
+                if (primitive === 'none')
+                    continue;
+                const component = !primitive && name.includes('-');
+                if (component)
+                    components.push(element);
+                if (fields.has(name) || primitive === 'field') {
+                    if (!inText)
+                        words.push([element, 'field']);
+                    continue;
+                }
+                const text = !inText && !component && (primitive === 'text' || Array.from(element.childNodes).some((node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ''));
+                if (text)
+                    words.push([element, 'text']);
+                // A design system component is drawn whole; an app's own component is
+                // opened, so what it holds is drawn too.
+                const content = element.shadowRoot;
+                if (content && !primitive && (!name.startsWith('ds-') || element.hasAttribute('data-ds-layout-root'))) {
+                    if (!observedRoots.has(content)) {
+                        mutations.observe(content, { subtree: true, childList: true, characterData: true });
+                        observedRoots.add(content);
+                    }
+                    visit(content, inText || text);
                 }
-                collect(host.shadowRoot);
-            });
+                visit(element, inText || text);
+            }
         };
-        collect(document.querySelector('[data-ds-inspect-active]') ?? document);
-        if (named.length)
-            return named;
+        visit(document.querySelector('[data-ds-inspect-active]') ?? document.body, false);
         // Semantic fallback for pages that have not supplied their own area names.
-        return Array.from(document.querySelectorAll('header, main, section, footer, one-footer'))
+        const named = areas.length ? areas : Array.from(document.querySelectorAll('header, main, section, footer, one-footer'))
             .filter((element) => !element.querySelector('section, header, footer, one-footer'));
+        return { areas: named, words, components };
+    };
+    const tag = (name, ...measures) => {
+        const label = document.createElement('span');
+        label.className = 'tag';
+        label.textContent = name;
+        for (const measure of measures) {
+            const part = document.createElement('span');
+            part.className = 'measure';
+            part.textContent = measure;
+            label.appendChild(part);
+        }
+        return label;
+    };
+    const box = (element, kind, rect) => {
+        const panel = document.createElement('div');
+        panel.className = `box ${kind}`;
+        panel.style.left = `${rect.left}px`;
+        panel.style.top = `${rect.top}px`;
+        panel.style.width = `${rect.width}px`;
+        panel.style.height = `${rect.height}px`;
+        if (kind === 'area') {
+            const areaName = element.dataset.dsArea || element.getAttribute('aria-label') ||
+                (element.localName === 'one-footer' ? 'footer' : element.localName);
+            // Reduce dimensions measured to a tenth of a CSS pixel; use a decimal
+            // for fluid shapes whose exact fraction would be too long to read.
+            const width = Math.max(1, Math.round(rect.width * 10));
+            const height = Math.max(1, Math.round(rect.height * 10));
+            let divisor = width;
+            let remainder = height;
+            while (remainder) {
+                [divisor, remainder] = [remainder, divisor % remainder];
+            }
+            const horizontal = width / divisor;
+            const vertical = height / divisor;
+            panel.appendChild(tag(areaName.replace(/[-_]/g, ' ').replace(/^./, (letter) => letter.toUpperCase()), `${Number(rect.width.toFixed(1))} × ${Number(rect.height.toFixed(1))}`, horizontal <= 100 && vertical <= 100 ? `${horizontal}:${vertical}` : `≈ ${Number((rect.width / rect.height).toFixed(2))}:1`));
+        }
+        else if (kind === 'component') {
+            // A name with no room above the component stands inside it.
+            panel.toggleAttribute('data-inside', rect.top < 16);
+            panel.appendChild(tag(element.localName));
+        }
+        return panel;
     };
     const render = () => {
         frame = 0;
         if (!visible)
             return;
-        const areas = getAreas();
-        const current = new Set(areas);
+        const { areas, words, components } = collect();
+        const watched = new Set([...areas, ...components]);
         for (const element of observed) {
-            if (!current.has(element)) {
+            if (!watched.has(element)) {
                 resize.unobserve(element);
                 observed.delete(element);
             }
         }
-        const fragments = document.createDocumentFragment();
-        areas.forEach((element, index) => {
+        for (const element of watched) {
             if (!observed.has(element)) {
                 resize.observe(element);
                 observed.add(element);
             }
+        }
+        // Areas first, then words, then components, so component names lie on top.
+        const drawn = [];
+        const draw = (element, kind) => {
+            if (drawn.length >= limit)
+                return;
             const rect = element.getBoundingClientRect();
             if (!rect.width || !rect.height || rect.bottom <= 0 || rect.top >= innerHeight || rect.right <= 0 || rect.left >= innerWidth)
                 return;
             if (getComputedStyle(element).visibility === 'hidden')
                 return;
-            const panel = document.createElement('div');
-            panel.className = 'area';
-            panel.toggleAttribute('data-container', !!element.shadowRoot?.querySelector('[data-ds-area]'));
-            panel.toggleAttribute('data-compact', rect.width < 80 || rect.height < 24);
-            panel.style.left = `${rect.left}px`;
-            panel.style.top = `${rect.top}px`;
-            panel.style.width = `${rect.width}px`;
-            panel.style.height = `${rect.height}px`;
-            panel.style.setProperty('--pastel', colors[index % colors.length] ?? null);
-            const label = document.createElement('span');
-            label.className = 'name';
-            const areaName = element.dataset.dsArea || element.getAttribute('aria-label') ||
-                (element.localName === 'one-footer' ? 'footer' : element.localName);
-            label.textContent = areaName.replace(/[-_]/g, ' ').replace(/^./, (letter) => letter.toUpperCase());
-            const dimensions = document.createElement('span');
-            dimensions.className = 'dimensions';
-            dimensions.textContent = `${Number(rect.width.toFixed(1))} × ${Number(rect.height.toFixed(1))} px`;
-            label.appendChild(dimensions);
-            const ratio = document.createElement('span');
-            ratio.className = 'dimensions';
-            // Reduce dimensions measured to a tenth of a CSS pixel; use a decimal
-            // for fluid shapes whose exact fraction would be too long to read.
-            const width = Math.max(1, Math.round(rect.width * 10));
-            const height = Math.max(1, Math.round(rect.height * 10));
-            let divisor = width;
-            let remainder = height;
-            while (remainder) {
-                [divisor, remainder] = [remainder, divisor % remainder];
-            }
-            const horizontal = width / divisor;
-            const vertical = height / divisor;
-            ratio.textContent = horizontal <= 100 && vertical <= 100
-                ? `${horizontal}:${vertical}`
-                : `≈ ${Number((rect.width / rect.height).toFixed(2))}:1`;
-            label.appendChild(ratio);
-            panel.appendChild(label);
-            fragments.appendChild(panel);
-        });
-        layer.replaceChildren(fragments);
+            drawn.push(box(element, kind, rect));
+        };
+        areas.forEach((element) => draw(element, 'area'));
+        words.forEach(([element, kind]) => draw(element, kind));
+        components.forEach((element) => draw(element, 'component'));
+        layer.replaceChildren(...drawn);
     };
     const schedule = () => { if (visible && !frame)
         frame = requestAnimationFrame(render); };

package/dist/0-face/preference-options.d.ts

@@ -25,6 +25,10 @@ export interface PreferenceOptions {
         light: string;
         dark: string;
     } | false;
+    /** Where the shape is stored: `"ds-one:shape"` by default. */
+    shapeStorageKey?: string;
+    /** The shape for a visitor who has chosen none; without it the components keep their own corners. */
+    shapeDefault?: "square" | "rounded" | "circular";
 }
 declare global {
     interface Window {

package/dist/0-face/preference-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preference-options.d.ts","sourceRoot":"","sources":["../../DS1/0-face/preference-options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;CACtD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QAAG,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;KAAE;CAC7D"}
+{"version":3,"file":"preference-options.d.ts","sourceRoot":"","sources":["../../DS1/0-face/preference-options.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C;;;;OAIG;IACH,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACrD,8DAA8D;IAC9D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qGAAqG;IACrG,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QAAG,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;KAAE;CAC7D"}

package/dist/0-face/scaling.d.ts

@@ -5,7 +5,8 @@
  * mobile browser, or a touch screen whose shorter side is at most 820px) is
  * drawn as if the screen were 280 units wide: the scale is the page's width
  * over 280, never under 0.75 or over 2, so a 375px phone draws everything a
- * third larger.
+ * third larger. The page's width is never taken as more than the screen's, so
+ * a page that a phone has widened and zoomed out never scales itself larger.
  *
  * `startScaling()` puts the scale on the page and keeps it there through
  * resizes and turns; `applyScaling()` does it once. Both set `--sf` and, on a
@@ -71,6 +72,12 @@ export declare function detectMobileDevice(): boolean;
  * the factor (the first surface's, or 1 when there is none).
  */
 export declare function applyScaling(options?: ScalingOptions): number;
+/**
+ * The screen's own width as it is held, in CSS pixels: the widest a page on it
+ * is laid out at, or 0 when the browser does not say. iOS gives the screen's
+ * upright width whichever way it is turned, so the side is taken by the turn.
+ */
+export declare function screenWidth(): number;
 /**
  * Puts the scale on the page now and again on every resize and turn; a
  * surface is followed as its own size changes. Returns a function that stops

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

@@ -1 +1 @@
-{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,OAAO,CAAC,aAAa,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;CACjC;AAMD,eAAO,MAAM,oBAAoB,EAAE,aAKlC,CAAC;AAOF,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,SAAI,GAAG,MAAM,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,GAAE,aAAoC,EAAE,UAAU,SAAI,GAAG,MAAM,CAMlI;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAO5C;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,CAQjE;AAYD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,IAAI,CAkBrE"}
+{"version":3,"file":"scaling.d.ts","sourceRoot":"","sources":["../../DS1/0-face/scaling.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,OAAO,CAAC,aAAa,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;CACjC;AAMD,eAAO,MAAM,oBAAoB,EAAE,aAKlC,CAAC;AAOF,qFAAqF;AACrF,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,SAAI,GAAG,MAAM,CAGpE;AAED,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,GAAE,aAAoC,EAAE,UAAU,SAAI,GAAG,MAAM,CAMlI;AAMD;;;;GAIG;AACH,wBAAgB,kBAAkB,IAAI,OAAO,CAO5C;AAsBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,CAQjE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAMpC;AAgBD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,MAAM,IAAI,CAkBrE"}

package/dist/0-face/scaling.js

@@ -81,10 +81,27 @@ export function applyScaling(options = {}) {
     }
     return applyPage(root ?? document.documentElement, config);
 }
+/**
+ * The screen's own width as it is held, in CSS pixels: the widest a page on it
+ * is laid out at, or 0 when the browser does not say. iOS gives the screen's
+ * upright width whichever way it is turned, so the side is taken by the turn.
+ */
+export function screenWidth() {
+    const { width = 0, height = 0 } = window.screen ?? {};
+    if (!width || !height)
+        return 0;
+    const turn = window.screen.orientation?.type;
+    const landscape = turn ? turn.startsWith("landscape") : window.matchMedia?.("(orientation: landscape)").matches ?? width > height;
+    return landscape ? Math.max(width, height) : Math.min(width, height);
+}
 function applyPage(root, config) {
     const mobile = detectMobileDevice();
-    // The page's width without its scroll bar.
-    const width = document.documentElement.clientWidth || window.innerWidth || 0;
+    // The page's width without its scroll bar, never more than the screen's: when something reaches
+    // past the edge, a phone's browser widens the page and zooms out, and a scale read from that
+    // width would draw everything larger, which keeps the page too wide and zoomed out.
+    const page = document.documentElement.clientWidth || window.innerWidth || 0;
+    const held = mobile ? screenWidth() : 0;
+    const width = held ? Math.min(page, held) : page;
     const factor = mobile ? calculateScalingFactor(width, { ...defaultScalingConfig, ...config }, window.devicePixelRatio || 1) : 1;
     root.style.setProperty("--sf", String(factor));
     root.toggleAttribute("data-mobile", mobile);

package/dist/0-face/shape.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Square, rounded or circular: the corners every component draws, chosen once
+ * and remembered (Ezo's Shape setting, for every product).
+ *
+ * The runtime is the second part of `theme-bootstrap.js`, which a page inlines
+ * in its <head> so the first paint already has the shape; imported here, it
+ * installs itself when the page did not. It marks the root with
+ * `data-ds-shape`, which `1-root/component-appearance.css` reads: square
+ * corners, rounded ones (squircles where the browser draws them) or pills. A
+ * visitor who has chosen nothing sees `shapeDefault` from
+ * `window.DS_ONE_PREFERENCES`, or the components' own corners. Offer the
+ * choice with `<ds-cycle type="shape">`.
+ */
+import "./theme-bootstrap.js";
+export type Shape = "square" | "rounded" | "circular";
+export declare const SHAPES: readonly Shape[];
+/** `window.DS_ONE_SHAPE`, installed by `theme-bootstrap.js`. */
+export interface ShapeRuntime {
+    /** The shape in effect, or null when none is chosen. */
+    shape(): Shape | null;
+    /** Choose and remember a shape, and put it on the page. */
+    set(shape: Shape): void;
+    /** Read the stored choice and the options again, and put them on the page. */
+    apply(): Shape | null;
+}
+declare global {
+    interface Window {
+        DS_ONE_SHAPE?: ShapeRuntime;
+    }
+}
+/** The shape in effect: the stored choice, else `shapeDefault`, else rounded (the components' own corners). */
+export declare function getShape(): Shape;
+/** Choose and remember a shape. */
+export declare function setShape(shape: Shape): void;
+//# sourceMappingURL=shape.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../DS1/0-face/shape.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,sBAAsB,CAAC;AAE9B,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AACtD,eAAO,MAAM,MAAM,EAAE,SAAS,KAAK,EAAsC,CAAC;AAE1E,gEAAgE;AAChE,MAAM,WAAW,YAAY;IAC3B,wDAAwD;IACxD,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC;IACtB,2DAA2D;IAC3D,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACxB,8EAA8E;IAC9E,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC;CACvB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,+GAA+G;AAC/G,wBAAgB,QAAQ,IAAI,KAAK,CAEhC;AAED,mCAAmC;AACnC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAE3C"}

package/dist/0-face/shape.js

@@ -0,0 +1,23 @@
+/**
+ * Square, rounded or circular: the corners every component draws, chosen once
+ * and remembered (Ezo's Shape setting, for every product).
+ *
+ * The runtime is the second part of `theme-bootstrap.js`, which a page inlines
+ * in its <head> so the first paint already has the shape; imported here, it
+ * installs itself when the page did not. It marks the root with
+ * `data-ds-shape`, which `1-root/component-appearance.css` reads: square
+ * corners, rounded ones (squircles where the browser draws them) or pills. A
+ * visitor who has chosen nothing sees `shapeDefault` from
+ * `window.DS_ONE_PREFERENCES`, or the components' own corners. Offer the
+ * choice with `<ds-cycle type="shape">`.
+ */
+import "./theme-bootstrap.js";
+export const SHAPES = ["square", "rounded", "circular"];
+/** The shape in effect: the stored choice, else `shapeDefault`, else rounded (the components' own corners). */
+export function getShape() {
+    return window.DS_ONE_SHAPE?.shape() ?? "rounded";
+}
+/** Choose and remember a shape. */
+export function setShape(shape) {
+    window.DS_ONE_SHAPE?.set(shape);
+}

package/dist/0-face/text-contrast.d.ts

@@ -0,0 +1,22 @@
+export type RGBA = [number, number, number, number];
+export declare const TEXT_CONTRAST_MINIMUM = 4.5;
+export declare const contrastRatio: (a: RGBA, b: RGBA) => number;
+export declare function composite(top: RGBA, bottom: RGBA): RGBA;
+/** The painted parent, including the slot's styles and the shadow host's surface. */
+export declare function paintedParent(e: Element): Element | null;
+/** Computed RGB stays full precision; modern colour spaces use the browser's sRGB canvas conversion. */
+export declare function colorReader(document: Document): (value: string) => RGBA | null;
+export type TextContrastResult = {
+    element: Element;
+    text: string;
+    ratio?: number;
+    reason?: string;
+    foreground?: string;
+    background?: string;
+};
+export declare function measureTextContrast(root: ParentNode): TextContrastResult[];
+export declare function inspectTextContrast(root: ParentNode): {
+    element: Element;
+    message: string;
+}[];
+//# sourceMappingURL=text-contrast.d.ts.map

package/dist/0-face/text-contrast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-contrast.d.ts","sourceRoot":"","sources":["../../DS1/0-face/text-contrast.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpD,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,aAAa,GAAI,GAAG,IAAI,EAAE,GAAG,IAAI,WAK7C,CAAC;AACF,wBAAgB,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,GAAG,IAAI,CAGvD;AAED,qFAAqF;AACrF,wBAAgB,aAAa,CAAC,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,CAExD;AAED,wGAAwG;AACxG,wBAAgB,WAAW,CAAC,QAAQ,EAAE,QAAQ,IAGpC,OAAO,MAAM,KAAG,IAAI,GAAG,IAAI,CAoBpC;AAoED,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAG/I,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU,GAAG,kBAAkB,EAAE,CAsC1E;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,UAAU;;;IAOnD"}

package/dist/0-face/text-contrast.js

@@ -0,0 +1,178 @@
+const clear = [0, 0, 0, 0];
+export const TEXT_CONTRAST_MINIMUM = 4.5;
+export const contrastRatio = (a, b) => {
+    const luminance = (c) => c.slice(0, 3).map(v => v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4)
+        .reduce((sum, v, i) => sum + v * [0.2126, 0.7152, 0.0722][i], 0);
+    const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (high + .05) / (low + .05);
+};
+export function composite(top, bottom) {
+    const alpha = top[3] + bottom[3] * (1 - top[3]);
+    return alpha ? [...[0, 1, 2].map(i => (top[i] * top[3] + bottom[i] * bottom[3] * (1 - top[3])) / alpha), alpha] : [...clear];
+}
+const styleOf = (e, pseudo) => e.ownerDocument.defaultView.getComputedStyle(e, pseudo);
+/** The painted parent, including the slot's styles and the shadow host's surface. */
+export function paintedParent(e) {
+    return e.assignedSlot ?? e.parentElement ?? e.getRootNode().host ?? null;
+}
+/** Computed RGB stays full precision; modern colour spaces use the browser's sRGB canvas conversion. */
+export function colorReader(document) {
+    const cache = new Map();
+    let context;
+    return (value) => {
+        if (cache.has(value))
+            return cache.get(value);
+        let color = null;
+        if (value === 'transparent')
+            color = [...clear];
+        const rgb = /^rgba?\(([^)]+)\)$/.exec(value);
+        if (rgb) {
+            const parts = rgb[1].split(/[\s,/]+/).filter(Boolean);
+            if (parts.length >= 3)
+                color = [...parts.slice(0, 3).map(v => parseFloat(v) / (v.endsWith('%') ? 100 : 255)), parts[3] ? parseFloat(parts[3]) / (parts[3].endsWith('%') ? 100 : 1) : 1];
+        }
+        else if (value && document.defaultView?.CSS.supports('color', value)) {
+            context ?? (context = document.createElement('canvas').getContext('2d', { willReadFrequently: true }));
+            if (context) {
+                context.clearRect(0, 0, 1, 1);
+                context.fillStyle = value;
+                context.fillRect(0, 0, 1, 1);
+                color = Array.from(context.getImageData(0, 0, 1, 1).data, v => v / 255);
+            }
+        }
+        cache.set(value, color);
+        return color;
+    };
+}
+function visible(e) {
+    if (!e.getClientRects().length && styleOf(e).display !== 'contents')
+        return false;
+    if (styleOf(e).visibility !== 'visible')
+        return false;
+    for (let p = e; p; p = paintedParent(p)) {
+        const s = styleOf(p);
+        if (s.display === 'none' || s.contentVisibility === 'hidden' || Number(s.opacity) === 0
+            || p.matches(':disabled, [aria-disabled="true"], [data-ds-constraint-panel]'))
+            return false;
+    }
+    return true;
+}
+/** Text nodes are visited once in their composed position; hidden menus and inactive controls do not count. */
+function textSamples(root) {
+    const samples = [];
+    const seen = new Set();
+    function visit(node) {
+        if (seen.has(node))
+            return;
+        seen.add(node);
+        if (node.nodeType === 3) {
+            const text = node.textContent?.trim();
+            const element = node.parentElement;
+            const paintElement = node.assignedSlot ?? element;
+            if (text && element && paintElement && visible(paintElement)) {
+                const range = element.ownerDocument.createRange();
+                range.selectNodeContents(node);
+                if (Array.from(range.getClientRects()).some(r => r.width > 0 && r.height > 0))
+                    samples.push({ element, text, paintElement });
+            }
+            return;
+        }
+        if (node.nodeType === 1) {
+            const e = node;
+            if (e.matches('script, style, template, noscript, option, [data-ds-constraint-panel]'))
+                return;
+            if (visible(e)) {
+                if (e.localName === 'input' || e.localName === 'textarea') {
+                    const input = e;
+                    if (!['hidden', 'checkbox', 'radio', 'range', 'color', 'file', 'image'].includes(input.type)) {
+                        if (input.value)
+                            samples.push({ element: e, text: input.type === 'password' ? 'Password value' : input.value });
+                        else if (input.placeholder)
+                            samples.push({ element: e, text: input.placeholder, pseudo: '::placeholder' });
+                    }
+                }
+                else if (e.localName === 'select') {
+                    const text = e.selectedOptions[0]?.textContent?.trim();
+                    if (text)
+                        samples.push({ element: e, text });
+                }
+                for (const pseudo of ['::before', '::after']) {
+                    const s = styleOf(e, pseudo);
+                    if (/^["'].*["']$/.test(s.content) && s.content.slice(1, -1).trim() && s.display !== 'none' && s.visibility === 'visible' && Number(s.opacity) !== 0) {
+                        samples.push({ element: e, text: s.content.slice(1, -1), pseudo });
+                    }
+                }
+            }
+            if (e.localName === 'slot') {
+                const assigned = e.assignedNodes({ flatten: true });
+                (assigned.length ? assigned : Array.from(e.childNodes)).forEach(visit);
+                return;
+            }
+            if (e.shadowRoot) {
+                visit(e.shadowRoot);
+                return;
+            }
+            // Values/placeholder above represent these controls, not their fallback children.
+            if (e.matches('input, textarea, select'))
+                return;
+        }
+        node.childNodes.forEach(visit);
+    }
+    visit(root);
+    return samples;
+}
+const rgbLabel = (c) => `rgb(${c.slice(0, 3).map(v => Math.round(v * 255)).join(', ')})`;
+export function measureTextContrast(root) {
+    const document = root.ownerDocument ?? root;
+    const read = colorReader(document);
+    const styles = new Map();
+    const style = (e) => { if (!styles.has(e))
+        styles.set(e, styleOf(e)); return styles.get(e); };
+    return textSamples(root).map(({ element, text, pseudo, paintElement = element }) => {
+        const result = { element, text: text.replace(/\s+/g, ' ').slice(0, 60) };
+        const inkStyle = pseudo ? styleOf(element, pseudo) : style(paintElement);
+        let foreground = read(inkStyle.getPropertyValue('-webkit-text-fill-color') || inkStyle.color);
+        let background = [...clear];
+        if (!foreground)
+            return { ...result, reason: 'The rendered text colour could not be resolved.' };
+        const chain = [];
+        if (pseudo)
+            chain.push(inkStyle);
+        for (let p = paintElement; p; p = paintedParent(p))
+            chain.push(style(p));
+        for (const s of chain) {
+            if (s.mixBlendMode && s.mixBlendMode !== 'normal' || s.filter && s.filter !== 'none' || s.backdropFilter && s.backdropFilter !== 'none') {
+                return { ...result, reason: 'A blend or filter needs a visual contrast review.' };
+            }
+            if (background[3] < 1 && s.backgroundImage && s.backgroundImage !== 'none') {
+                return { ...result, reason: 'Text over an image or gradient needs a visual contrast review.' };
+            }
+            const fill = read(s.backgroundColor);
+            if (!fill)
+                return { ...result, reason: 'The rendered background colour could not be resolved.' };
+            foreground = composite(foreground, fill);
+            background = composite(background, fill);
+            const opacity = Number(s.opacity);
+            foreground[3] *= opacity;
+            background[3] *= opacity;
+        }
+        // With no declared page background, compare both possible user-agent canvases.
+        // Usually the opaque html/body surface makes these identical.
+        const candidates = [[1, 1, 1, 1], [0, 0, 0, 1]];
+        const pairs = candidates.map(canvas => ({ foreground: composite(foreground, canvas), background: composite(background, canvas) }));
+        const values = pairs.map(pair => ({ ...pair, ratio: contrastRatio(pair.foreground, pair.background) })).sort((a, b) => a.ratio - b.ratio);
+        const worst = values[0];
+        if (background[3] < 1 && worst.ratio < TEXT_CONTRAST_MINIMUM)
+            return { ...result, reason: 'Declare an opaque page background so text contrast can be verified.' };
+        return { ...result, ratio: worst.ratio, foreground: rgbLabel(worst.foreground), background: rgbLabel(worst.background) };
+    });
+}
+export function inspectTextContrast(root) {
+    return measureTextContrast(root).flatMap(result => {
+        const label = `“${result.text}”`;
+        // What cannot be measured is a review for a person, not a broken rule; a colour that could not be read is.
+        if (result.reason)
+            return [{ element: result.element, message: `${label}: ${result.reason}`, review: /visual contrast review/.test(result.reason) }];
+        return result.ratio < TEXT_CONTRAST_MINIMUM ? [{ element: result.element, message: `${label} has ${result.ratio.toFixed(2)}:1 text contrast (${result.foreground} on ${result.background}); at least ${TEXT_CONTRAST_MINIMUM}:1 is required.` }] : [];
+    });
+}