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

package/dist/0-face/tree.js

@@ -0,0 +1,191 @@
+/**
+ * The keyboard and pointer of a tree, shared by `<ds-tree>` and the native
+ * `.ds-tree` classes of `row.css`.
+ *
+ * A tree is one stop for Tab: the row that has the focus (the selected row
+ * at first, otherwise the first) carries `tabindex="0"` and every other row
+ * `-1`. Up and Down move between rows that are not disabled, Home and End to
+ * the first and last; Right opens a closed row and enters an open one; Left
+ * closes an open row and moves to its parent; a printed character moves to
+ * the next row whose label starts with it. Space selects the row, Enter
+ * selects and activates it, as a double click does.
+ *
+ * `treeStep()` is that model alone, on the visible rows. `connectTree()`
+ * puts it on a native tree: rows with `role="treeitem"` and `aria-level`,
+ * flat, in order, inside an element with `role="tree"`. It dispatches the
+ * same events as `<ds-tree>` (`ds-tree-toggle`, `ds-tree-select`,
+ * `ds-tree-activate`, each with `{ id }`), and unless the page cancels one
+ * it does what the event asks: opens or closes the row, hiding the rows
+ * inside it, or selects it.
+ */
+const available = (rows, from, step) => {
+    for (let index = from; index >= 0 && index < rows.length; index += step)
+        if (!rows[index].disabled)
+            return index;
+    return undefined;
+};
+/** The next row after `index` whose label starts with `letter`, from the top again after the last. */
+function typeahead(rows, index, letter) {
+    const wanted = letter.toLocaleLowerCase();
+    for (let offset = 1; offset <= rows.length; offset++) {
+        const at = (index + offset) % rows.length;
+        const row = rows[at];
+        if (!row.disabled && (row.label ?? "").trim().toLocaleLowerCase().startsWith(wanted))
+            return at;
+    }
+    return undefined;
+}
+/**
+ * What `key` does on the row at `index` of the visible `rows`, or
+ * `undefined` when the tree leaves the key alone.
+ */
+export function treeStep(rows, index, key) {
+    const row = rows[index];
+    if (!row)
+        return undefined;
+    switch (key) {
+        case "ArrowDown": return { focus: available(rows, index + 1, 1) ?? index };
+        case "ArrowUp": return { focus: available(rows, index - 1, -1) ?? index };
+        case "Home": return { focus: available(rows, 0, 1) ?? index };
+        case "End": return { focus: available(rows, rows.length - 1, -1) ?? index };
+        case "ArrowRight":
+            if (row.expanded === false)
+                return row.disabled ? {} : { toggle: true };
+            if (row.expanded && (rows[index + 1]?.level ?? 0) > row.level)
+                return { focus: available(rows, index + 1, 1) ?? index };
+            return {};
+        case "ArrowLeft": {
+            if (row.expanded && !row.disabled)
+                return { toggle: false };
+            for (let at = index - 1; at >= 0; at--)
+                if (rows[at].level < row.level)
+                    return rows[at].disabled ? {} : { focus: at };
+            return {};
+        }
+        case "Enter": return row.disabled ? {} : { select: true, activate: true };
+        case " ": return row.disabled ? {} : { select: true };
+        default: {
+            // One printed character, a letter outside the basic plane included; named keys are longer.
+            if (!/^\S$/u.test(key))
+                return undefined;
+            const at = typeahead(rows, index, key);
+            return at === undefined ? {} : { focus: at };
+        }
+    }
+}
+const ITEM = '[role="treeitem"]';
+const level = (item) => Math.max(1, Number.parseInt(item.getAttribute("aria-level") ?? "1", 10) || 1);
+const expandedOf = (item) => {
+    const value = item.getAttribute("aria-expanded");
+    return value === null ? undefined : value === "true";
+};
+const disabledOf = (item) => item.getAttribute("aria-disabled") === "true";
+const labelOf = (item) => (item.querySelector(".ds-tree__label") ?? item).textContent ?? "";
+/** A row's name in the events: `data-id`, else its `id`. */
+const idOf = (item) => item.dataset.id ?? item.id;
+/**
+ * Gives a native tree its keyboard and pointer. Returns a function that
+ * takes them away again.
+ *
+ *   <ul class="ds-tree" role="tree" aria-label="Files">
+ *     <li class="ds-tree__item" role="treeitem" aria-level="1" aria-expanded="true" data-id="src">
+ *       <span class="ds-tree__disclosure" aria-hidden="true"></span>
+ *       <span class="ds-tree__label">src</span>
+ *     </li>
+ *     <li class="ds-tree__item" role="treeitem" aria-level="2" data-id="main">…</li>
+ *   </ul>
+ */
+export function connectTree(tree) {
+    const items = () => [...tree.querySelectorAll(ITEM)];
+    const visible = () => items().filter(item => !item.hidden && !item.closest("[hidden]"));
+    /** Exactly one visible row is the Tab stop: the focused one, else the selected one, else the first available. */
+    const rove = (focus) => {
+        const rows = visible();
+        const current = focus ?? rows.find(item => item.tabIndex === 0 && !disabledOf(item)) ?? rows.find(item => item.getAttribute("aria-selected") === "true") ?? rows.find(item => !disabledOf(item)) ?? rows[0];
+        for (const item of items())
+            item.tabIndex = item === current ? 0 : -1;
+        return current;
+    };
+    const send = (name, detail) => tree.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, cancelable: true }));
+    /** Opens or closes a row and shows or hides the rows inside it, keeping closed rows inside it closed. */
+    const toggle = (item, expanded) => {
+        if (!send("ds-tree-toggle", { id: idOf(item), expanded }))
+            return;
+        item.setAttribute("aria-expanded", String(expanded));
+        const all = items();
+        const own = level(item);
+        let closedAt = Infinity;
+        for (const row of all.slice(all.indexOf(item) + 1)) {
+            const depth = level(row);
+            if (depth <= own)
+                break;
+            if (depth <= closedAt)
+                closedAt = Infinity;
+            row.hidden = !expanded || depth > closedAt;
+            if (expanded && !row.hidden && row.getAttribute("aria-expanded") === "false")
+                closedAt = depth;
+        }
+        rove(item);
+    };
+    const select = (item) => {
+        if (!send("ds-tree-select", { id: idOf(item) }))
+            return;
+        for (const row of items())
+            if (row.hasAttribute("aria-selected") || row === item)
+                row.setAttribute("aria-selected", String(row === item));
+    };
+    const focus = (item) => { rove(item); item.focus(); };
+    const keydown = (event) => {
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const item = event.target?.closest(ITEM);
+        if (!item || !tree.contains(item))
+            return;
+        const rows = visible();
+        const step = treeStep(rows.map(row => ({ level: level(row), expanded: expandedOf(row), disabled: disabledOf(row), label: labelOf(row) })), rows.indexOf(item), event.key);
+        if (!step)
+            return;
+        event.preventDefault();
+        if (step.toggle !== undefined)
+            toggle(item, step.toggle);
+        if (step.select)
+            select(item);
+        if (step.activate)
+            send("ds-tree-activate", { id: idOf(item) });
+        if (step.focus !== undefined && rows[step.focus])
+            focus(rows[step.focus]);
+    };
+    const click = (event) => {
+        const item = event.target?.closest(ITEM);
+        if (!item || !tree.contains(item) || disabledOf(item))
+            return;
+        const disclosure = event.target.closest(".ds-tree__disclosure");
+        if (disclosure && expandedOf(item) !== undefined)
+            toggle(item, !expandedOf(item));
+        else
+            select(item);
+        focus(item);
+    };
+    const dblclick = (event) => {
+        const item = event.target?.closest(ITEM);
+        if (!item || !tree.contains(item) || disabledOf(item) || event.target.closest(".ds-tree__disclosure"))
+            return;
+        send("ds-tree-activate", { id: idOf(item) });
+    };
+    if (!tree.hasAttribute("role"))
+        tree.setAttribute("role", "tree");
+    rove();
+    // Rows the page adds or removes keep one Tab stop.
+    const observer = typeof MutationObserver === "undefined" ? undefined : new MutationObserver(() => { if (!items().some(item => item.tabIndex === 0 && !item.hidden))
+        rove(); });
+    observer?.observe(tree, { childList: true, subtree: true });
+    tree.addEventListener("keydown", keydown);
+    tree.addEventListener("click", click);
+    tree.addEventListener("dblclick", dblclick);
+    return () => {
+        observer?.disconnect();
+        tree.removeEventListener("keydown", keydown);
+        tree.removeEventListener("click", click);
+        tree.removeEventListener("dblclick", dblclick);
+    };
+}

package/dist/1-root/library-tokens.d.ts

@@ -0,0 +1,31 @@
+/** `[component token, library token]`: each component token takes the library token's value. */
+export declare const LIBRARY_TOKENS: readonly [readonly ["--ds-accent-color", "--one-accent-color"], readonly ["--ds-button-background-color-primary", "--one-button-primary-background"], readonly ["--ds-button-text-color-on-accent", "--one-button-primary-text"], readonly ["--ds-button-background-color-secondary", "--one-button-neutral-background"], readonly ["--ds-button-text-color", "--one-button-neutral-text"], readonly ["--ds-fill-hover", "--one-button-neutral-background-hover"], readonly ["--ds-paper", "--one-background"], readonly ["--ds-fill", "--one-surface"], readonly ["--ds-text-color", "--one-text"], readonly ["--ds-text-color-muted", "--one-text-muted"], readonly ["--ds-border-color", "--one-border"], readonly ["--ds-focus-ring", "--one-color-focus"], readonly ["--ds-input-background", "--one-input-background"], readonly ["--ds-input-color", "--one-input-text"], readonly ["--ds-input-placeholder-color", "--one-input-placeholder"], readonly ["--ds-input-disabled-color", "--one-input-disabled-text"], readonly ["--accent-color", "--one-accent-color"], readonly ["--button-background-color-primary", "--one-button-primary-background"], readonly ["--button-text-color-on-light", "--one-button-primary-text"], readonly ["--button-background-color-secondary", "--one-button-neutral-background"], readonly ["--button-text-color", "--one-button-neutral-text"], readonly ["--base-light-grey", "--one-input-background"], readonly ["--base-slate", "--one-input-text"], readonly ["--ds-typeface-regular", "--one-font"], readonly ["--ds-typeface-medium", "--one-font-medium"], readonly ["--ds-typeface-mono", "--one-font-mono"], readonly ["--ds-text-size", "--one-font-size"], readonly ["--ds-small-text-size", "--one-font-size-small"], readonly ["--ds-heading-text-size", "--one-heading-size"], readonly ["--ds-display-text-size", "--one-display-size"], readonly ["--ds-text-tracking", "--one-letter-spacing"], readonly ["--ds-control-size", "--one-control-height"], readonly ["--ds-corner-size", "--one-radius"], readonly ["--ds-card-corner-size", "--one-radius"], readonly ["--ds-button-inset", "--one-button-padding-inline"], readonly ["--ds-1", "--one-unit"]];
+/**
+ * A link drawn as a button: `<a data-library-button>`. Publishing gives it the library's button
+ * faces (every `button` selector also matches it, `a` selectors leave it out) and
+ * `aria-disabled="true"` on it the disabled face, while it stays a link: navigation, selection and
+ * modifier-click are the browser's.
+ */
+export declare const LIBRARY_BUTTON_LINK = "data-library-button";
+/** The selector rewrites publishing applies, by what they replace. Specificity is kept: additions are in `:where()`. */
+export declare const LIBRARY_SELECTORS: {
+    readonly button: ":is(button, :where(a[data-library-button]))";
+    readonly a: "a:not(:where([data-library-button]))";
+    readonly ":disabled": ":is(:disabled, :where([data-library-button][aria-disabled=\"true\"]))";
+};
+/**
+ * What a button-link takes from the browser's button rather than its link, before any library
+ * rule: no underline, a box, centred words. Without specificity, so every library rule wins.
+ */
+export declare const LIBRARY_BUTTON_LINK_BASE = ":where(a[data-library-button]) { display: inline-block; text-align: center; text-decoration: none; }";
+/**
+ * The revision of the rules above: `sha256:` and the first 12 hex digits of the sha256 of
+ * `JSON.stringify({ tokens: LIBRARY_TOKENS, selectors: LIBRARY_SELECTORS, base: LIBRARY_BUTTON_LINK_BASE })`. Every published
+ * version is stamped with it, and Sync 1 records it when a product pins the version.
+ */
+export declare const LIBRARY_REVISION = "sha256:8a0b55ce3acd";
+/** The first line of a prepared library. */
+export declare const libraryStamp: (revision?: string) => string;
+/** The revision a prepared library was stamped with, or undefined for a library published before stamping. */
+export declare function libraryRevision(css: string): string | undefined;
+//# sourceMappingURL=library-tokens.d.ts.map

package/dist/1-root/library-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"library-tokens.d.ts","sourceRoot":"","sources":["../../DS1/1-root/library-tokens.ts"],"names":[],"mappings":"AAYA,gGAAgG;AAChG,eAAO,MAAM,cAAc,8lEAyCoD,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,wHAAwH;AACxH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wBAAwB,yGAA4G,CAAC;AAElJ;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,GAAI,WAA+B,MAAM,WAA0D,CAAC;AAE7H,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE/D"}

package/dist/1-root/library-tokens.js

@@ -0,0 +1,84 @@
+// How a published design library reaches Design system 1's components. A library is a stylesheet
+// its owner edits in the libraries app, written in the classless sheet's `--one-*` tokens
+// (one.semantic.css) and its native selectors. DS1's components draw from `--ds-*` tokens
+// (component-tokens.css, component-metrics.css) and, in some faces, one.css's own names
+// (`--accent-color`). Publishing prepares the library
+// (packages/css-validate/src/library.ts): after each `--one-*` token below that the library
+// declares, it writes the component token that follows it, in the same rule, so the library's
+// corners, fills, accent and type reach the components wherever the library sets them. A page
+// without a library loads none of this, so DS1's own defaults never change.
+//
+// Change the bridge here, then update LIBRARY_REVISION: packages/css-validate/test/library.test.ts recomputes it.
+/** `[component token, library token]`: each component token takes the library token's value. */
+export const LIBRARY_TOKENS = [
+    // Colours.
+    ["--ds-accent-color", "--one-accent-color"],
+    ["--ds-button-background-color-primary", "--one-button-primary-background"],
+    ["--ds-button-text-color-on-accent", "--one-button-primary-text"],
+    ["--ds-button-background-color-secondary", "--one-button-neutral-background"],
+    ["--ds-button-text-color", "--one-button-neutral-text"],
+    ["--ds-fill-hover", "--one-button-neutral-background-hover"],
+    ["--ds-paper", "--one-background"],
+    ["--ds-fill", "--one-surface"],
+    ["--ds-text-color", "--one-text"],
+    ["--ds-text-color-muted", "--one-text-muted"],
+    ["--ds-border-color", "--one-border"],
+    ["--ds-focus-ring", "--one-color-focus"],
+    ["--ds-input-background", "--one-input-background"],
+    ["--ds-input-color", "--one-input-text"],
+    ["--ds-input-placeholder-color", "--one-input-placeholder"],
+    ["--ds-input-disabled-color", "--one-input-disabled-text"],
+    // The same colours under one.css's names, which the faces of ds-button and ds-input read.
+    ["--accent-color", "--one-accent-color"],
+    ["--button-background-color-primary", "--one-button-primary-background"],
+    ["--button-text-color-on-light", "--one-button-primary-text"],
+    ["--button-background-color-secondary", "--one-button-neutral-background"],
+    ["--button-text-color", "--one-button-neutral-text"],
+    ["--base-light-grey", "--one-input-background"],
+    ["--base-slate", "--one-input-text"],
+    // Type.
+    ["--ds-typeface-regular", "--one-font"],
+    ["--ds-typeface-medium", "--one-font-medium"],
+    ["--ds-typeface-mono", "--one-font-mono"],
+    // Measures, unscaled: component-metrics.css multiplies each by the component's --ds-sf.
+    ["--ds-text-size", "--one-font-size"],
+    ["--ds-small-text-size", "--one-font-size-small"],
+    ["--ds-heading-text-size", "--one-heading-size"],
+    ["--ds-display-text-size", "--one-display-size"],
+    ["--ds-text-tracking", "--one-letter-spacing"],
+    ["--ds-control-size", "--one-control-height"],
+    ["--ds-corner-size", "--one-radius"],
+    ["--ds-card-corner-size", "--one-radius"],
+    ["--ds-button-inset", "--one-button-padding-inline"],
+    ["--ds-1", "--one-unit"],
+];
+/**
+ * A link drawn as a button: `<a data-library-button>`. Publishing gives it the library's button
+ * faces (every `button` selector also matches it, `a` selectors leave it out) and
+ * `aria-disabled="true"` on it the disabled face, while it stays a link: navigation, selection and
+ * modifier-click are the browser's.
+ */
+export const LIBRARY_BUTTON_LINK = "data-library-button";
+/** The selector rewrites publishing applies, by what they replace. Specificity is kept: additions are in `:where()`. */
+export const LIBRARY_SELECTORS = {
+    button: `:is(button, :where(a[${LIBRARY_BUTTON_LINK}]))`,
+    a: `a:not(:where([${LIBRARY_BUTTON_LINK}]))`,
+    ":disabled": `:is(:disabled, :where([${LIBRARY_BUTTON_LINK}][aria-disabled="true"]))`,
+};
+/**
+ * What a button-link takes from the browser's button rather than its link, before any library
+ * rule: no underline, a box, centred words. Without specificity, so every library rule wins.
+ */
+export const LIBRARY_BUTTON_LINK_BASE = `:where(a[${LIBRARY_BUTTON_LINK}]) { display: inline-block; text-align: center; text-decoration: none; }`;
+/**
+ * The revision of the rules above: `sha256:` and the first 12 hex digits of the sha256 of
+ * `JSON.stringify({ tokens: LIBRARY_TOKENS, selectors: LIBRARY_SELECTORS, base: LIBRARY_BUTTON_LINK_BASE })`. Every published
+ * version is stamped with it, and Sync 1 records it when a product pins the version.
+ */
+export const LIBRARY_REVISION = "sha256:8a0b55ce3acd";
+/** The first line of a prepared library. */
+export const libraryStamp = (revision = LIBRARY_REVISION) => `/* Design system 1 library, revision ${revision} */`;
+/** The revision a prepared library was stamped with, or undefined for a library published before stamping. */
+export function libraryRevision(css) {
+    return /^(?:\uFEFF)?(?:@charset "[^"]*";\s*)?\/\* Design system 1 library, revision (sha256:[0-9a-f]{12}) \*\//.exec(css)?.[1];
+}

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

@@ -0,0 +1,52 @@
+export declare const measures: {
+    /** One square, `--1` and `--ds-1`. */
+    readonly square: 20;
+    /** Half a square, `--half`: the smallest gap. */
+    readonly half: 10;
+    /** A control: a switch's height, a toast's line, a small avatar. `--ds-08`. */
+    readonly control: 16;
+    /** A row, an item, a header, a menu entry: one square. */
+    readonly row: 20;
+    /** An item is drawn one point short of its pitch, so its outline lands on the grid line. */
+    readonly item: {
+        readonly width: 79;
+        readonly height: 19;
+        readonly correction: 1;
+    };
+    readonly type: {
+        /** Text, `--type-size-default` and `--ds-type-size-default`. */
+        readonly default: 14;
+        readonly small: 10;
+        readonly heading: 13;
+        /** A display title, set on two squares. */
+        readonly display: 20;
+    };
+    /** A line of text's own box, `--type-lineheight-default`; the line it stands on is one square. */
+    readonly leading: 16;
+    /** Letter spacing of text, `--type-letterspacing-default`. */
+    readonly tracking: -0.3;
+    /** Letter spacing of a display title. */
+    readonly displayTracking: -0.4;
+    readonly weight: {
+        readonly default: 400;
+        readonly bold: 500;
+    };
+    /** Lines and outlines. */
+    readonly line: 1;
+    /** Corners of pictures, buttons and fields; rows and items stay square. */
+    readonly radius: 4;
+    /**
+     * The device scale (`--sf`, DS1/0-face/scaling.ts): the width over `base`, between `min` and
+     * `max`, rounded to `decimals`. A computer stays at 1.
+     */
+    readonly scale: {
+        readonly base: 280;
+        readonly min: 0.75;
+        readonly max: 2;
+        readonly decimals: 3;
+    };
+};
+export type Measures = typeof measures;
+/** The device scale for a screen `width` wide, as scaling.ts computes it without snapping. */
+export declare function deviceScale(width: number): number;
+//# sourceMappingURL=measures.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"measures.d.ts","sourceRoot":"","sources":["../../DS1/1-root/measures.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,QAAQ;IACnB,sCAAsC;;IAEtC,iDAAiD;;IAEjD,+EAA+E;;IAE/E,0DAA0D;;IAE1D,4FAA4F;;;;;;;QAG1F,gEAAgE;;;;QAIhE,2CAA2C;;;IAG7C,kGAAkG;;IAElG,8DAA8D;;IAE9D,yCAAyC;;;;;;IAGzC,0BAA0B;;IAE1B,2EAA2E;;IAE3E;;;OAGG;;;;;;;CAEK,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC;AAEvC,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAGjD"}

package/dist/1-root/measures.js

@@ -0,0 +1,49 @@
+// Design system 1's measures in one place, as palette.ts holds its colours. The stylesheets keep
+// their own values (grid.css, one.css, text.css, component-tokens.css, component-metrics.css) and
+// tests/measures.test.ts fails when one of them and this file disagree. The native packages are
+// written from this file by scripts/write-native-tokens.ts: change a measure here and in the CSS,
+// then run that script.
+//
+// Every length is in CSS pixels at a scale of 1: points on Apple platforms, dp on Android. On a
+// phone or tablet each is multiplied by the device scale.
+export const measures = {
+    /** One square, `--1` and `--ds-1`. */
+    square: 20,
+    /** Half a square, `--half`: the smallest gap. */
+    half: 10,
+    /** A control: a switch's height, a toast's line, a small avatar. `--ds-08`. */
+    control: 16,
+    /** A row, an item, a header, a menu entry: one square. */
+    row: 20,
+    /** An item is drawn one point short of its pitch, so its outline lands on the grid line. */
+    item: { width: 79, height: 19, correction: 1 },
+    type: {
+        /** Text, `--type-size-default` and `--ds-type-size-default`. */
+        default: 14,
+        small: 10,
+        heading: 13,
+        /** A display title, set on two squares. */
+        display: 20,
+    },
+    /** A line of text's own box, `--type-lineheight-default`; the line it stands on is one square. */
+    leading: 16,
+    /** Letter spacing of text, `--type-letterspacing-default`. */
+    tracking: -0.3,
+    /** Letter spacing of a display title. */
+    displayTracking: -0.4,
+    weight: { default: 400, bold: 500 },
+    /** Lines and outlines. */
+    line: 1,
+    /** Corners of pictures, buttons and fields; rows and items stay square. */
+    radius: 4,
+    /**
+     * The device scale (`--sf`, DS1/0-face/scaling.ts): the width over `base`, between `min` and
+     * `max`, rounded to `decimals`. A computer stays at 1.
+     */
+    scale: { base: 280, min: 0.75, max: 2, decimals: 3 },
+};
+/** The device scale for a screen `width` wide, as scaling.ts computes it without snapping. */
+export function deviceScale(width) {
+    const { base, min, max, decimals } = measures.scale;
+    return Number(Math.max(min, Math.min(max, width / base)).toFixed(decimals));
+}

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

@@ -27,5 +27,10 @@ export declare const paletteStart = "  /* Palette: written by scripts/write-pale
 export declare const paletteEnd = "  /* Palette: end */";
 /** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export declare function paletteCss(): string;
+/**
+ * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
+ */
+export declare function paletteSheet(): string;
 export {};
 //# sourceMappingURL=palette.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,wGAAwG;AACxG,wBAAgB,UAAU,IAAI,MAAM,CAUnC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,wGAAwG;AACxG,wBAAgB,UAAU,IAAI,MAAM,CAUnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAarC"}

package/dist/1-root/palette.js

@@ -81,3 +81,21 @@ export function paletteCss() {
     lines.push(paletteEnd);
     return lines.join('\n');
 }
+/**
+ * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
+ */
+export function paletteSheet() {
+    return [
+        '/* Design system 1\'s named colours as tokens: --one-<colour> and --one-<colour>-pastel,',
+        '   each light-dark(light, dark), and the named pastels (--one-zenith-blue,',
+        '   --one-comfortable-green). light-dark() follows the page\'s color-scheme, which',
+        '   one.css sets. Written by scripts/write-palette-css.ts from palette.ts; never edit it',
+        '   by hand. */',
+        '',
+        ':root {',
+        paletteCss(),
+        '}',
+        '',
+    ].join('\n');
+}

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

@@ -0,0 +1,21 @@
+import "./ds-icon";
+import "./ds-text";
+export interface SplitSegment<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface SplitButtonState extends HTMLElement {
+    options: string;
+    segments: ReadonlyArray<SplitSegment> | undefined;
+    value: string;
+    disabled: boolean;
+    splitDisabled: boolean;
+    actions: boolean;
+    literal: boolean;
+    renderRoot: HTMLElement | DocumentFragment;
+}
+export declare function focusSplit(host: SplitButtonState, options?: FocusOptions): void;
+export declare function renderSplit(host: SplitButtonState): import("lit").TemplateResult<1>;
+//# sourceMappingURL=button-split.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,48 @@
+import { html, nothing } from "lit";
+import { getText } from "../0-face/i18n";
+import "./ds-icon";
+import "./ds-text";
+function choices(host) {
+    return host.segments ?? host.options.split(",").map(part => part.trim()).filter(Boolean).map(part => {
+        const colon = part.indexOf(":");
+        if (colon < 0)
+            return { value: part.toLowerCase(), label: part };
+        const value = part.slice(0, colon).trim();
+        const label = part.slice(colon + 1).trim();
+        if (!label.startsWith("@"))
+            return { value, label };
+        const end = label.indexOf(":");
+        return { value, icon: label.slice(1, end < 0 ? undefined : end).trim(), label: end < 0 ? value : label.slice(end + 1).trim() };
+    });
+}
+function press(host, segment) {
+    if (host.splitDisabled || segment.disabled)
+        return;
+    if (host.actions) {
+        host.dispatchEvent(new CustomEvent("press", { detail: { value: segment.value }, bubbles: true, composed: true }));
+    }
+    else if (segment.value !== host.value) {
+        const accepted = host.dispatchEvent(new CustomEvent("change", {
+            detail: { value: segment.value }, bubbles: true, composed: true, cancelable: true,
+        }));
+        if (accepted)
+            host.value = segment.value;
+    }
+}
+export function focusSplit(host, options) {
+    const buttons = [...host.renderRoot.querySelectorAll("button:not(:disabled)")];
+    (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
+}
+export function renderSplit(host) {
+    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}
+      ?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>`)}`;
+}

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

@@ -0,0 +1,113 @@
+/**
+ * Grid chart: a numeric chart drawn one pixel column at a time on the 20px grid.
+ *
+ * The API follows lightweight-charts (createChart → addSeries → setData,
+ * subscribeCrosshairMove), with pixel-aligned rendering:
+ * - every row line of the chart is a price level, chosen so the scale lands on the grid;
+ * - each pixel column holds the min/max of the points inside it, so a minute series
+ *   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.
+ */
+export interface DataPoint {
+    /** Unix seconds */
+    time: number;
+    value: number;
+}
+export type SeriesKind = "area" | "line" | "baseline";
+export interface SeriesOptions {
+    kind?: SeriesKind;
+    /** CSS color or palette name (e.g. "--ds-chart-up"). Area and line series. */
+    color?: string;
+    /** Baseline series: values above draw in the positive colour, below in the negative colour. */
+    baseValue?: number;
+    /** Hatch spacing in pixels; 0 turns the fill off. */
+    hatch?: number;
+    hatchOpacity?: number;
+}
+export interface Marker {
+    time: number;
+    text: string;
+}
+export interface ChartOptions {
+    unit?: number;
+    /** Price labels on every nth row line, in a two-square gutter on the right. */
+    scaleLabels?: boolean;
+    labelEvery?: number;
+    /** High and low callouts on the visible range. */
+    extremes?: boolean;
+    grid?: "full" | "rows" | "none";
+    format?: (value: number) => string;
+}
+export interface CrosshairEvent {
+    point: DataPoint | null;
+    x: number;
+    y: number;
+}
+export declare class Series {
+    private chart;
+    options: SeriesOptions;
+    data: DataPoint[];
+    markers: Marker[];
+    constructor(chart: GridChart, options: SeriesOptions);
+    setData(data: DataPoint[]): void;
+    update(point: DataPoint): void;
+    setMarkers(markers: Marker[]): void;
+    applyOptions(options: SeriesOptions): void;
+}
+export declare class GridChart {
+    private canvas;
+    private ctx;
+    private width;
+    private height;
+    private dpr;
+    private series;
+    private crosshairX;
+    private crosshair;
+    private listeners;
+    private progress;
+    private frame;
+    private timeRange;
+    private palette;
+    private lastDrawn;
+    options: Required<ChartOptions>;
+    constructor(canvas: HTMLCanvasElement, options?: ChartOptions);
+    addSeries(options?: SeriesOptions): Series;
+    removeSeries(series: Series): void;
+    applyOptions(options: ChartOptions): void;
+    /** Fixes the visible time range, e.g. a whole trading day while only the morning has data. */
+    setTimeRange(range: [number, number] | null): void;
+    resize(width: number, height: number): void;
+    refreshTheme(): void;
+    subscribeCrosshairMove(listener: (event: CrosshairEvent) => void): void;
+    unsubscribeCrosshairMove(listener: (event: CrosshairEvent) => void): void;
+    /** Moves the crosshair to a pixel column (null hides it) and tells subscribers. */
+    setCrosshair(x: number | null): void;
+    /** Draws the series in from the left. */
+    animateIn(duration?: number): void;
+    /** Position of the newest drawn value, for a live marker laid over the canvas. */
+    lastPoint(): {
+        x: number;
+        y: number;
+    } | null;
+    destroy(): void;
+    private plotWidth;
+    private readPalette;
+    private resolve;
+    /** Type at its size on a 20px square, scaled with the square. */
+    private font;
+    private scale;
+    private columns;
+    draw(): void;
+    private strokeBox;
+    private callout;
+}
+export declare function createChart(canvas: HTMLCanvasElement, options?: ChartOptions): GridChart;
+/** A one-row sparkline: the same column renderer, scaled to its cell. */
+export declare function drawSparkline(canvas: HTMLCanvasElement, values: number[], options: {
+    width: number;
+    height: number;
+    color: string;
+    base?: number;
+    faint?: string;
+}): void;
+//# sourceMappingURL=grid-chart.d.ts.map