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

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

@@ -0,0 +1,329 @@
+/**
+ * Toast: short messages that stack in a corner of the page and leave on their own.
+ *
+ * BASED ON SONNER. This component is a Lit port of Sonner, the React toast
+ * library by Emil Kowalski (https://sonner.emilkowal.ski,
+ * https://github.com/emilkowalski/sonner, MIT licence). Its API and behaviour
+ * follow Sonner's, so Sonner's documentation describes how it works:
+ *
+ * - `toast()`, `toast.success()`, `.info()`, `.warning()`, `.error()`,
+ *   `.loading()`, `.message()`, `.promise()` and `.dismiss()` are Sonner's calls,
+ *   with Sonner's options (`id`, `description`, `duration`, `action`, `cancel`,
+ *   `dismissible`, `closeButton`, `important`, `onDismiss`, `onAutoClose`).
+ * - `<ds-toast>` is Sonner's `<Toaster />`, with its `position`, `expand`,
+ *   `visible-toasts`, `duration`, `close-button` and `rich-colors`;
+ *   `contained` draws it inside its positioned parent instead of the window.
+ * - A toast stays until dismissed; an explicitly timed toast pauses while the stack is hovered,
+ *   focused, held or the tab is hidden. Three show at once, stacked behind
+ *   one another and spread out on hover. A swipe towards the edge dismisses one,
+ *   Alt+T reaches them from the keyboard, and they come and go with Sonner's
+ *   400ms slide and fade.
+ *
+ * Where it departs from Sonner, it follows Design system 1: a toast is drawn as
+ * the system's label, an ink chip one control high per line in the tooltip's
+ * colours, with no line or shadow, its actions underlined words; the pile
+ * advances one square per toast, one square from the edge. Only `transform`
+ * and `opacity` animate (a toast stacked behind takes the front one's height at
+ * once instead of animating it). `toast()` also adds a `<ds-toast>` to the page
+ * when there is none, and moving the element keeps its toasts and their time.
+ * An error is announced assertively unless it says `important: false`.
+ *
+ * `toast()` and its queue are framework-free (`0-face/toast-queue.ts`). On a
+ * page without Lit, the page toaster (`0-face/toaster.ts`) draws the same stack
+ * with this component's stylesheet; where a `<ds-toast>` is in the page, it
+ * takes every toast, so a page never shows two stacks.
+ */
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { define } from "../0-face/define";
+import { SWIPE_THRESHOLD, SWIPE_VELOCITY, TIME_BEFORE_UNMOUNT, TOAST_DURATION as DURATION, TOAST_ICONS as ICONS, VISIBLE_TOASTS, listenForToasts, } from "../0-face/toast-queue";
+import "./ds-icon";
+import styles from "./styles/ds-toast.css?inline";
+/* Sonner's calls and their queue are framework-free (`0-face/toast-queue.ts`), shared with the page toaster. */
+export { toast } from "../0-face/toast-queue";
+/** The region that shows the toasts, Sonner's `<Toaster />`. Put one in the page. */
+export class Toaster extends LitElement {
+    constructor() {
+        super();
+        this.heights = new Map();
+        this.timers = new Map();
+        this.interacting = false;
+        this.resizes = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => this.measure());
+        this.receive = (signal) => {
+            if ("dismiss" in signal) {
+                for (const item of this.live)
+                    if (signal.dismiss === undefined || item.data.id === signal.dismiss)
+                        this.removeToast(item.data.id);
+                return;
+            }
+            const data = signal.toast;
+            const current = this.live.find(item => item.data.id === data.id);
+            if (current) {
+                // An update keeps what it does not change and starts its time again, as in Sonner.
+                this._items = this._items.map(item => item === current ? { ...item, data: { ...item.data, ...data } } : item);
+                this.clearTimer(data.id);
+                return;
+            }
+            this._items = [{ data, mounted: false, removed: false, swipeOut: false, index: 0, offset: 0 }, ...this._items.filter(item => item.data.id !== data.id)];
+        };
+        /** Sonner's timers: each toast keeps its remaining time while the stack is paused. */
+        this.syncTimers = () => {
+            const now = Date.now();
+            for (const item of this.live) {
+                const { id, type } = item.data;
+                const duration = item.data.duration ?? this.duration;
+                if (type === "loading" || duration === Infinity) {
+                    this.clearTimer(id);
+                    continue;
+                }
+                let timer = this.timers.get(id);
+                if (!timer) {
+                    timer = { remaining: duration, started: now };
+                    this.timers.set(id, timer);
+                }
+                if (this.paused && timer.handle !== undefined) {
+                    clearTimeout(timer.handle);
+                    timer.handle = undefined;
+                    timer.remaining -= now - timer.started;
+                }
+                else if (!this.paused && timer.handle === undefined) {
+                    timer.started = now;
+                    timer.handle = setTimeout(() => this.removeToast(id, "auto"), Math.max(0, timer.remaining));
+                }
+            }
+        };
+        this.hotkey = (event) => {
+            const list = this.renderRoot.querySelector("ol");
+            if (event.altKey && event.code === "KeyT" && this.live.length) {
+                this._focused = true;
+                list?.focus();
+            }
+            else if (event.key === "Escape" && this._focused) {
+                this._focused = false;
+            }
+        };
+        this.onFocusOut = (event) => {
+            if (!(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget)))
+                this._focused = false;
+        };
+        this.onPointerMove = (event) => {
+            if (!this.swipe)
+                return;
+            const toward = this.position.startsWith("top") ? -1 : 1;
+            // Only towards the edge the toast came from.
+            this.swipe.amount = Math.max(0, (event.clientY - this.swipe.start) * toward);
+            const element = event.currentTarget;
+            element.dataset.swiping = "true";
+            element.style.setProperty("--swipe", `${this.swipe.amount * toward}px`);
+        };
+        this.onPointerUp = (event) => {
+            const swipe = this.swipe;
+            if (!swipe)
+                return;
+            this.swipe = undefined;
+            this.interacting = false;
+            const element = event.currentTarget;
+            delete element.dataset.swiping;
+            const velocity = swipe.amount / Math.max(1, Date.now() - swipe.time);
+            if (swipe.amount >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)
+                this.removeToast(swipe.id, "swipe");
+            else
+                element.style.setProperty("--swipe", "0px");
+            this.syncTimers();
+        };
+        this.position = "bottom-right";
+        this.expand = false;
+        this.visibleToasts = VISIBLE_TOASTS;
+        this.duration = DURATION;
+        this.closeButton = true;
+        this.richColors = false;
+        this.contained = false;
+        this.label = "Notifications";
+        this.closeLabel = "Close toast";
+        this._items = [];
+        this._hovered = false;
+        this._focused = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.stopListening?.();
+        this.stopListening = listenForToasts(this.receive);
+        document.addEventListener("keydown", this.hotkey);
+        document.addEventListener("visibilitychange", this.syncTimers);
+        // Moved to another parent: carry on with the time each toast had left.
+        this.requestUpdate();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopListening?.();
+        this.stopListening = undefined;
+        document.removeEventListener("keydown", this.hotkey);
+        document.removeEventListener("visibilitychange", this.syncTimers);
+        const now = Date.now();
+        for (const timer of this.timers.values()) {
+            if (timer.handle === undefined)
+                continue;
+            clearTimeout(timer.handle);
+            timer.handle = undefined;
+            timer.remaining -= now - timer.started;
+        }
+        this.resizes?.disconnect();
+    }
+    get live() { return this._items.filter(item => !item.removed); }
+    get expanded() { return this.expand || ((this._hovered || this._focused) && this.live.length > 0); }
+    get paused() { return this._hovered || this._focused || this.interacting || document.hidden; }
+    removeToast(id, how = "dismiss") {
+        const item = this.live.find(entry => entry.data.id === id);
+        if (!item)
+            return;
+        this.clearTimer(id);
+        this.heights.delete(id);
+        (how === "auto" ? item.data.onAutoClose : item.data.onDismiss)?.(item.data);
+        const removed = { ...item, removed: true, swipeOut: how === "swipe" };
+        this._items = this._items.map(entry => entry === item ? removed : entry);
+        setTimeout(() => { this._items = this._items.filter(entry => entry !== removed); }, TIME_BEFORE_UNMOUNT);
+    }
+    clearTimer(id) {
+        clearTimeout(this.timers.get(id)?.handle);
+        this.timers.delete(id);
+    }
+    measure() {
+        let changed = false;
+        for (const body of this.renderRoot.querySelectorAll(".body")) {
+            const id = this._items.find(item => String(item.data.id) === body.dataset.id && !item.removed)?.data.id;
+            if (id === undefined)
+                continue;
+            const toast = body.parentElement;
+            const height = body.offsetHeight + toast.offsetHeight - toast.clientHeight;
+            if (this.heights.get(id) !== height) {
+                this.heights.set(id, height);
+                changed = true;
+            }
+        }
+        if (changed)
+            this.requestUpdate();
+    }
+    updated() {
+        for (const body of this.renderRoot.querySelectorAll(".body"))
+            this.resizes?.observe(body);
+        this.measure();
+        if (!this.live.length) {
+            this._hovered = false;
+            this._focused = false;
+        }
+        this.syncTimers();
+        if (this._items.some(item => !item.mounted)) {
+            // Mount on the next frame so the toast slides in from its edge.
+            const frame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (callback) => setTimeout(callback, 16);
+            frame(() => { this._items = this._items.map(item => item.mounted ? item : { ...item, mounted: true }); });
+        }
+    }
+    onPointerDown(event, item) {
+        if (item.data.dismissible === false || item.data.type === "loading")
+            return;
+        if (event.composedPath()[0]?.closest?.("button, a"))
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        this.swipe = { id: item.data.id, start: event.clientY, time: Date.now(), amount: 0 };
+        this.interacting = true;
+        this.syncTimers();
+    }
+    press(event, item, button) {
+        button.onClick?.(event);
+        if (button.href)
+            this.removeToast(item.data.id);
+        else if (!event.defaultPrevented)
+            this.removeToast(item.data.id);
+    }
+    renderButton(item, button, kind) {
+        const press = (event) => this.press(event, item, button);
+        return button.href
+            ? html `<a class=${`button ${kind}`} href=${button.href} @click=${press}>${button.label}</a>`
+            : html `<button class=${`button ${kind}`} type="button" @click=${press}>${button.label}</button>`;
+    }
+    renderIcon(data) {
+        if (data.type === "loading")
+            return html `<span class="icon" aria-hidden="true"><span class="spinner"></span></span>`;
+        const icon = data.icon ?? ICONS[data.type];
+        return icon ? html `<span class="icon" aria-hidden="true"><ds-icon .type=${icon}></ds-icon></span>` : nothing;
+    }
+    renderToast(item, count, frontHeight) {
+        const { data } = item;
+        const dismissible = data.dismissible !== false;
+        const closeButton = (data.closeButton ?? this.closeButton) && dismissible;
+        return html `<li
+      class="toast"
+      role="status"
+      tabindex="0"
+      aria-live=${data.important ? "assertive" : "polite"}
+      aria-atomic="true"
+      data-type=${data.type}
+      data-front=${String(item.index === 0)}
+      data-mounted=${String(item.mounted)}
+      data-removed=${String(item.removed)}
+      data-swipe-out=${String(item.swipeOut)}
+      data-visible=${String(item.index < this.visibleToasts)}
+      style=${`--index: ${item.index}; --offset: ${item.offset}px; --front-height: ${frontHeight}px; z-index: ${count - item.index}`}
+      @pointerdown=${(event) => this.onPointerDown(event, item)}
+      @pointermove=${this.onPointerMove}
+      @pointerup=${this.onPointerUp}
+      @pointercancel=${this.onPointerUp}
+    >
+      <div class="body" data-id=${String(data.id)}>
+        ${this.renderIcon(data)}
+        <div class="content">
+          <div class="title">${data.title}</div>
+          ${data.description ? html `<div class="description">${data.description}</div>` : nothing}
+        </div>
+        ${data.cancel ? this.renderButton(item, data.cancel, "cancel") : nothing}
+        ${data.action ? this.renderButton(item, data.action, "action") : nothing}
+        ${closeButton ? html `<button class="close" type="button" aria-label=${this.closeLabel} @click=${() => this.removeToast(data.id)}><ds-icon type="close"></ds-icon></button>` : nothing}
+      </div>
+    </li>`;
+    }
+    render() {
+        // Index and offset count live toasts only; one leaving keeps where it was.
+        let offset = 0;
+        this.live.forEach((item, index) => {
+            item.index = index;
+            item.offset = offset;
+            offset += this.heights.get(item.data.id) ?? 0;
+        });
+        const live = this.live;
+        const frontHeight = live.length ? this.heights.get(live[0].data.id) ?? 0 : 0;
+        const gaps = Math.max(0, live.length - 1);
+        const [y, x] = this.position.split("-");
+        return html `<section aria-label=${`${this.label} alt+T`} aria-live="polite" aria-relevant="additions text" aria-atomic="false">
+      <ol
+        tabindex="-1"
+        data-y=${y}
+        data-x=${x}
+        data-expanded=${String(this.expanded)}
+        style=${`--height: ${this.expanded ? offset : frontHeight}px; --gaps: ${this.expanded ? gaps : 0}`}
+        @pointerenter=${() => { this._hovered = true; }}
+        @pointerleave=${() => { if (!this.interacting)
+            this._hovered = false; }}
+        @focusin=${() => { this._focused = true; }}
+        @focusout=${this.onFocusOut}
+      >
+        ${repeat(this._items, item => item.data.id, item => this.renderToast(item, this._items.length, frontHeight))}
+      </ol>
+    </section>`;
+    }
+}
+Toaster.properties = {
+    position: { type: String, reflect: true },
+    expand: { type: Boolean, reflect: true },
+    visibleToasts: { type: Number, attribute: "visible-toasts" },
+    duration: { type: Number },
+    closeButton: { type: Boolean, attribute: "close-button" },
+    richColors: { type: Boolean, attribute: "rich-colors", reflect: true },
+    contained: { type: Boolean, reflect: true },
+    label: { type: String },
+    closeLabel: { type: String, attribute: "close-label" },
+    _items: { state: true },
+    _hovered: { state: true },
+    _focused: { state: true },
+};
+Toaster.styles = unsafeCSS(styles);
+define("ds-toast", Toaster);

package/dist/2-core/figures.d.ts

@@ -0,0 +1,56 @@
+/** How a figure's value is written: a number, a short number (12K), a fraction as a percentage, or money. */
+export type FigureFormat = "number" | "compact" | "percent" | "money";
+export interface FigureOptions {
+    /** `number` by default. `money` needs `currency`; without one it writes a number. */
+    format?: FigureFormat;
+    /** An ISO 4217 code for `money`: `USD`, `DKK`, `JPY`. */
+    currency?: string;
+    /** For money: the amount is in the currency's minor unit (cents, øre). */
+    minor?: boolean;
+    /** For money: whole units only, rounded. */
+    whole?: boolean;
+    /** Decimals, at least and at most. Unset, the format's own (none for a percentage, the currency's for money). */
+    digits?: number;
+    /** Write a sign before a value that is not zero: `+12%`, `−3`. */
+    signed?: boolean;
+    /** Format in this language rather than the current one. */
+    language?: string;
+}
+/** A format name as given, or `number` for one this does not know. */
+export declare function figureFormat(value: string | null | undefined): FigureFormat;
+/** A value written as `options` say, in the current language: `1,234`, `12K`, `25%`, `$1,234.50`, `+12%`. */
+export declare function formatFigure(value: number, options?: FigureOptions): string;
+/** A run of a figure's text: a digit, which takes a cell of its own, or the signs and letters between. */
+export interface FigureCell {
+    text: string;
+    digit: boolean;
+}
+/**
+ * A figure's text cut into its digits and the runs between them, for a face
+ * whose digits are not all one width: each digit is drawn in a cell of one
+ * width (`ds-stat__digit`), the rest at its own. The text is read whole.
+ */
+export declare function figureCells(text: string): FigureCell[];
+/** What a meter says to assistive technology. */
+export interface MeterAria {
+    /** The value, kept inside the range as ARIA requires. */
+    now: number;
+    min: number;
+    max: number;
+    /** "7 of 10", or "12 of 10, over by 2", in the current language. */
+    text: string;
+    /** How much of the range is filled, 0 to 1. */
+    fraction: number;
+    /** The value is past the end of the range. */
+    over: boolean;
+}
+/**
+ * A meter's values: the value kept inside `min` and `max`, how much of the
+ * range it fills, whether it is past the end, and the words that say so, the
+ * figures written as `options` say. A range that is empty or backwards reads
+ * as 0 to 1.
+ */
+export declare function meterAria(value: number, min?: number, max?: number, options?: FigureOptions & {
+    over?: boolean;
+}): MeterAria;
+//# sourceMappingURL=figures.d.ts.map

package/dist/2-core/figures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figures.d.ts","sourceRoot":"","sources":["../../DS1/2-core/figures.ts"],"names":[],"mappings":"AASA,6GAA6G;AAC7G,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAGtE,MAAM,WAAW,aAAa;IAC5B,qFAAqF;IACrF,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iHAAiH;IACjH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,CAE3E;AAED,6GAA6G;AAC7G,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAc/E;AAED,0GAA0G;AAC1G,MAAM,WAAW,UAAU;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE;AAE5D;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,EAAE,CAStD;AAED,iDAAiD;AACjD,MAAM,WAAW,SAAS;IACxB,yDAAyD;IACzD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAC;CACf;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,SAAI,EAAE,GAAG,SAAI,EAAE,OAAO,GAAE,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAO,GAAG,SAAS,CAatH"}

package/dist/2-core/figures.js

@@ -0,0 +1,70 @@
+// figures.ts
+// The words of a figure, shared by ds-stat, ds-progress and their React
+// adapters: a value written through 0-face/format.ts in the current language,
+// the digits cut into cells of one width, and a meter's ARIA values. No
+// browser code, so the adapters write the same words on the server.
+import { formatCompact, formatMoney, formatNumber, formatPercent } from "../0-face/format";
+import { translate } from "../0-face/i18n";
+const FORMATS = ["number", "compact", "percent", "money"];
+/** A format name as given, or `number` for one this does not know. */
+export function figureFormat(value) {
+    return FORMATS.includes(value) ? value : "number";
+}
+/** A value written as `options` say, in the current language: `1,234`, `12K`, `25%`, `$1,234.50`, `+12%`. */
+export function formatFigure(value, options = {}) {
+    if (!Number.isFinite(value))
+        return "";
+    const { currency, minor, whole, digits, signed, language } = options;
+    const format = figureFormat(options.format);
+    const numeric = { language };
+    if (signed)
+        numeric.signDisplay = "exceptZero";
+    if (digits !== undefined && Number.isFinite(digits) && digits >= 0) {
+        numeric.minimumFractionDigits = Math.min(20, Math.floor(digits));
+        numeric.maximumFractionDigits = Math.min(20, Math.floor(digits));
+    }
+    if (format === "money" && currency)
+        return formatMoney(value, currency, { ...numeric, minor, whole });
+    if (format === "percent")
+        return formatPercent(value, numeric);
+    if (format === "compact")
+        return formatCompact(value, numeric);
+    return formatNumber(value, numeric);
+}
+/**
+ * A figure's text cut into its digits and the runs between them, for a face
+ * whose digits are not all one width: each digit is drawn in a cell of one
+ * width (`ds-stat__digit`), the rest at its own. The text is read whole.
+ */
+export function figureCells(text) {
+    const cells = [];
+    for (const character of text) {
+        const digit = /\p{Nd}/u.test(character);
+        const last = cells[cells.length - 1];
+        if (!digit && last && !last.digit)
+            last.text += character;
+        else
+            cells.push({ text: character, digit });
+    }
+    return cells;
+}
+/**
+ * A meter's values: the value kept inside `min` and `max`, how much of the
+ * range it fills, whether it is past the end, and the words that say so, the
+ * figures written as `options` say. A range that is empty or backwards reads
+ * as 0 to 1.
+ */
+export function meterAria(value, min = 0, max = 1, options = {}) {
+    const low = Number.isFinite(min) ? min : 0;
+    const high = Number.isFinite(max) && max > low ? max : low + 1;
+    const raw = Number.isFinite(value) ? value : low;
+    const over = Boolean(options.over) || raw > high;
+    const now = Math.min(high, Math.max(low, raw));
+    const fraction = over ? 1 : (now - low) / (high - low);
+    const write = (n) => formatFigure(n, { ...options, signed: false });
+    const params = { value: write(raw), max: write(high), over: write(Math.max(0, raw - high)) };
+    const text = over && raw > high
+        ? translate("{value} of {max}, over by {over}", params)
+        : translate("{value} of {max}", params);
+    return { now, min: low, max: high, text, fraction, over };
+}