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

package/DS1/2-core/ds-stat.ts

@@ -0,0 +1,174 @@
+// ds-stat.ts
+// A figure with its label and a line for its change or caption, written in
+// the current language through 0-face/format.ts. Drawn by 1-root/figures.css,
+// the same classes a page without scripts writes.
+
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { figureCells, figureFormat, formatFigure, type FigureFormat, type FigureOptions } from "./figures";
+import "./ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import figures from "../1-root/figures.css?inline";
+import styles from "./styles/ds-stat.css?inline";
+
+export type StatTone = "danger" | "warning";
+const TONES: readonly StatTone[] = ["danger", "warning"];
+
+/**
+ * @element ds-stat
+ * @prop {string} label - What the figure is: a translation key, or literal words.
+ * @prop {number} value - The figure, written as `format` says in the current language.
+ * @prop {string} figure - Words in place of the value ("Incomplete"): a key, or literal words.
+ * @prop {"number" | "compact" | "percent" | "money"} format - How the value is written. Number by default.
+ * @prop {string} currency - The ISO 4217 code for money.
+ * @prop {boolean} minor - The money is counted in the currency's minor unit (cents).
+ * @prop {boolean} whole - Money in whole units only.
+ * @prop {number} digits - Decimals, at least and at most.
+ * @prop {number} change - A change, written with its sign and an up or down icon before the caption.
+ * @prop {"number" | "compact" | "percent" | "money"} changeFormat - How the change is written (`change-format`). The value's format by default; `percent` reads a fraction.
+ * @prop {"danger" | "warning"} changeTone - The change in that colour (`change-tone`), where the page knows which way is bad.
+ * @prop {string} caption - A line under the figure: a key, or literal words.
+ * @prop {string} icon - An icon from the library on its own square before the label.
+ * @prop {"danger" | "warning"} tone - The figure in that colour.
+ * @prop {boolean} cells - Draw each digit in a cell of one width, for a face whose digits differ in width.
+ * @prop {boolean} literal - Show `label`, `figure` and `caption` as written, never looked up.
+ *
+ * @slot label - The label, as inline content.
+ * @slot figure - The figure, when the page writes it itself.
+ * @slot - Anything that belongs between the figure and the caption, such as a `ds-meter`.
+ * @slot caption - The caption, as inline content.
+ *
+ * @example
+ * <ds-stat label="Revenue" value="1234.5" format="money" currency="EUR" change="0.12" change-format="percent" caption="Since last month"></ds-stat>
+ */
+export class Stat extends LitElement {
+  static properties = {
+    label: { type: String },
+    value: { type: Number },
+    figure: { type: String },
+    format: { type: String, reflect: true },
+    currency: { type: String },
+    minor: { type: Boolean },
+    whole: { type: Boolean },
+    digits: { type: Number },
+    change: { type: Number },
+    changeFormat: { type: String, attribute: "change-format" },
+    changeTone: { type: String, attribute: "change-tone", reflect: true },
+    caption: { type: String },
+    icon: { type: String },
+    tone: { type: String, reflect: true },
+    cells: { type: Boolean, reflect: true },
+    literal: { type: Boolean, reflect: true },
+  };
+
+  static styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+
+  declare label: string | undefined;
+  declare value: number | undefined;
+  declare figure: string | undefined;
+  declare format: FigureFormat;
+  declare currency: string | undefined;
+  declare minor: boolean;
+  declare whole: boolean;
+  declare digits: number | undefined;
+  declare change: number | undefined;
+  declare changeFormat: FigureFormat | undefined;
+  declare changeTone: StatTone | undefined;
+  declare caption: string | undefined;
+  declare icon: string | undefined;
+  declare tone: StatTone | undefined;
+  declare cells: boolean;
+  declare literal: boolean;
+
+  private readonly relabel = () => this.requestUpdate();
+
+  constructor() {
+    super();
+    this.format = "number";
+    this.minor = false;
+    this.whole = false;
+    this.cells = false;
+    this.literal = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("language-changed", this.relabel);
+    window.addEventListener("translations-loaded", this.relabel);
+    window.addEventListener("translations-ready", this.relabel);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("language-changed", this.relabel);
+    window.removeEventListener("translations-loaded", this.relabel);
+    window.removeEventListener("translations-ready", this.relabel);
+    super.disconnectedCallback();
+  }
+
+  private words(value: string | undefined): string {
+    if (!value) return "";
+    return this.literal ? value : getText(value) || value;
+  }
+
+  private options(format: string | undefined): FigureOptions {
+    return { format: figureFormat(format), currency: this.currency, minor: this.minor, whole: this.whole, digits: this.digits };
+  }
+
+  /** The figure's text as it is drawn: the words given, or the value written in the current language. */
+  get text(): string {
+    if (this.figure) return this.words(this.figure);
+    return typeof this.value === "number" ? formatFigure(this.value, this.options(this.format)) : "";
+  }
+
+  /** The change's text with its sign, or empty without a change. */
+  get changeText(): string {
+    if (typeof this.change !== "number" || !Number.isFinite(this.change)) return "";
+    const format = this.changeFormat ?? this.format;
+    return formatFigure(this.change, { ...this.options(format), signed: true });
+  }
+
+  private slotted(name: string): boolean {
+    return [...this.children].some(node => (node.getAttribute("slot") ?? "") === name);
+  }
+
+  private drawFigure(text: string) {
+    if (!this.cells || !text) return text;
+    return html`<span class="hidden-words">${text}</span><span aria-hidden="true">${figureCells(text).map(cell =>
+      cell.digit ? html`<span class="ds-stat__digit">${cell.text}</span>` : cell.text)}</span>`;
+  }
+
+  render() {
+    const changed = () => this.requestUpdate();
+    const label = this.words(this.label);
+    const caption = this.words(this.caption);
+    const change = this.changeText;
+    const tone = TONES.includes(this.tone as StatTone) ? this.tone : undefined;
+    const changeTone = TONES.includes(this.changeTone as StatTone) ? this.changeTone : undefined;
+    const hasLabel = Boolean(label) || this.slotted("label");
+    const hasCaption = Boolean(caption) || Boolean(change) || this.slotted("caption");
+    const direction = typeof this.change === "number" && this.change !== 0 ? (this.change > 0 ? "up" : "down") : undefined;
+    return html`<div class="ds-stat${tone ? ` ds-stat--${tone}` : ""}" part="stat">
+      <div class="ds-stat__label" part="label" ?hidden=${!hasLabel}>
+        ${this.icon ? html`<span class="ds-stat__icon" part="icon" aria-hidden="true"><ds-icon .type=${this.icon}></ds-icon></span>` : nothing}<slot name="label" @slotchange=${changed}>${label}</slot>
+      </div>
+      <div class="ds-stat__figure" part="figure"><slot name="figure" @slotchange=${changed}>${this.drawFigure(this.text)}</slot></div>
+      <slot></slot>
+      <div class="ds-stat__caption" part="caption" ?hidden=${!hasCaption}>
+        ${change
+          ? html`<span class="ds-stat__change${changeTone ? ` ds-stat__change--${changeTone}` : ""}" part="change">${direction
+              ? html`<ds-icon size="small" type=${direction} aria-hidden="true"></ds-icon>`
+              : nothing}${change}</span>`
+          : nothing}<slot name="caption" @slotchange=${changed}>${caption}</slot>
+      </div>
+    </div>`;
+  }
+}
+
+define("ds-stat", Stat);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-stat": Stat;
+  }
+}

package/DS1/2-core/ds-switch.ts

@@ -3,6 +3,7 @@ import { define } from "../0-face/define";
 import styles from "./styles/ds-switch.css?inline";
 
 /** The shared switch face. The slotted button retains native activation and refs. */
+/** rounded selects a pill track, white circular thumb and darker-green on state. */
 export class Switch extends LitElement {
   static styles = unsafeCSS(styles);
   focus(options?: FocusOptions) { this.querySelector<HTMLButtonElement>(":scope > button")?.focus(options); }

package/DS1/2-core/ds-text.ts

@@ -10,6 +10,16 @@ import styles from "./styles/ds-text.css?inline";
  * @prop {string} text - The translation key (optional if using slot content)
  * @prop {boolean} literal - The text is what someone wrote, not a key: show it
  *   as it stands, never looked up, never translated
+ * @prop {"muted" | "title" | "warning" | "danger"} tone - A quieter colour, the
+ *   title grey, the warning colour for something that needs care, or the
+ *   danger colour for a failure or a loss
+ * @prop {"small" | "heading" | "display"} size - 10px, a 13px heading on one
+ *   square, or a 20px title on two squares
+ * @prop {boolean} strong - The medium weight
+ * @prop {boolean} wrap - Let the text run over several lines, each one square
+ *
+ * The four work alike for a translation key and for literal text. For a
+ * heading, give the element `role="heading"` and `aria-level`.
  *
  * @example
  * // Using slot content as the key (preferred)
@@ -20,6 +30,9 @@ import styles from "./styles/ds-text.css?inline";
  *
  * // Something a person typed: a list title, an item, a search they saved
  * <ds-text literal text="Marketing plan"></ds-text>
+ *
+ * // A translated message over several lines, in the danger colour
+ * <ds-text wrap tone="danger" role="alert">Couldn't save your changes</ds-text>
  */
 export class Text extends LitElement {
   static get properties() {
@@ -36,8 +49,8 @@ export class Text extends LitElement {
 
   declare text: string;
   declare literal: boolean;
-  declare tone?: "muted" | "title";
-  declare size?: "small" | "heading";
+  declare tone?: "muted" | "title" | "warning" | "danger";
+  declare size?: "small" | "heading" | "display";
   declare strong: boolean;
   declare wrap: boolean;
   declare _text: string;

package/DS1/2-core/ds-toast.ts

@@ -0,0 +1,354 @@
+/**
+ * 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 4 seconds; its timer 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 type { ToastButton, ToastData, ToastId, ToastPosition, ToastSignal as Signal } 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";
+export type { ToastButton, ToastData, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages, ToastType } from "../0-face/toast-queue";
+
+interface Item { data: ToastData; mounted: boolean; removed: boolean; swipeOut: boolean; index: number; offset: number }
+interface Timer { remaining: number; started: number; handle?: ReturnType<typeof setTimeout> }
+
+/** The region that shows the toasts, Sonner's `<Toaster />`. Put one in the page. */
+export class Toaster extends LitElement {
+  static 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 },
+  };
+  static styles = unsafeCSS(styles);
+
+  declare position: ToastPosition;
+  declare expand: boolean;
+  declare visibleToasts: number;
+  declare duration: number;
+  declare closeButton: boolean;
+  declare richColors: boolean;
+  /** Draw within the nearest positioned ancestor instead of the window. */
+  declare contained: boolean;
+  /** The region's accessible name; products pass their own words. */
+  declare label: string;
+  declare closeLabel: string;
+  declare private _items: Item[];
+  declare private _hovered: boolean;
+  declare private _focused: boolean;
+  private heights = new Map<ToastId, number>();
+  private timers = new Map<ToastId, Timer>();
+  private interacting = false;
+  private swipe?: { id: ToastId; start: number; time: number; amount: number };
+  private resizes = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => this.measure());
+  private stopListening?: () => void;
+
+  constructor() {
+    super();
+    this.position = "bottom-right";
+    this.expand = false;
+    this.visibleToasts = VISIBLE_TOASTS;
+    this.duration = DURATION;
+    this.closeButton = false;
+    this.richColors = false;
+    this.contained = false;
+    this.label = "Notifications";
+    this.closeLabel = "Close toast";
+    this._items = [];
+    this._hovered = false;
+    this._focused = false;
+  }
+
+  connectedCallback(): void {
+    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(): void {
+    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();
+  }
+
+  private get live(): Item[] { return this._items.filter(item => !item.removed); }
+  private get expanded(): boolean { return this.expand || ((this._hovered || this._focused) && this.live.length > 0); }
+  private get paused(): boolean { return this._hovered || this._focused || this.interacting || document.hidden; }
+
+  private receive = (signal: 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)];
+  };
+
+  private removeToast(id: ToastId, how: "dismiss" | "auto" | "swipe" = "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);
+  }
+
+  private clearTimer(id: ToastId) {
+    clearTimeout(this.timers.get(id)?.handle);
+    this.timers.delete(id);
+  }
+
+  /** Sonner's timers: each toast keeps its remaining time while the stack is paused. */
+  private 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));
+      }
+    }
+  };
+
+  private hotkey = (event: KeyboardEvent) => {
+    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;
+    }
+  };
+
+  private onFocusOut = (event: FocusEvent) => {
+    if (!(event.relatedTarget instanceof Node && this.renderRoot.contains(event.relatedTarget))) this._focused = false;
+  };
+
+  private measure() {
+    let changed = false;
+    for (const body of this.renderRoot.querySelectorAll<HTMLElement>(".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();
+  }
+
+  protected updated(): void {
+    for (const body of this.renderRoot.querySelectorAll<HTMLElement>(".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: () => void) => setTimeout(callback, 16);
+      frame(() => { this._items = this._items.map(item => item.mounted ? item : { ...item, mounted: true }); });
+    }
+  }
+
+  private onPointerDown(event: PointerEvent, item: Item) {
+    if (item.data.dismissible === false || item.data.type === "loading") return;
+    if ((event.composedPath()[0] as Element | undefined)?.closest?.("button, a")) return;
+    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
+    this.swipe = { id: item.data.id, start: event.clientY, time: Date.now(), amount: 0 };
+    this.interacting = true;
+    this.syncTimers();
+  }
+
+  private onPointerMove = (event: PointerEvent) => {
+    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 as HTMLElement;
+    element.dataset.swiping = "true";
+    element.style.setProperty("--swipe", `${this.swipe.amount * toward}px`);
+  };
+
+  private onPointerUp = (event: PointerEvent) => {
+    const swipe = this.swipe;
+    if (!swipe) return;
+    this.swipe = undefined;
+    this.interacting = false;
+    const element = event.currentTarget as HTMLElement;
+    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();
+  };
+
+  private press(event: MouseEvent, item: Item, button: ToastButton) {
+    button.onClick?.(event);
+    if (button.href) this.removeToast(item.data.id);
+    else if (!event.defaultPrevented) this.removeToast(item.data.id);
+  }
+
+  private renderButton(item: Item, button: ToastButton, kind: "cancel" | "action") {
+    const press = (event: MouseEvent) => 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>`;
+  }
+
+  private renderIcon(data: ToastData) {
+    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;
+  }
+
+  private renderToast(item: Item, count: number, frontHeight: number) {
+    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: PointerEvent) => 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("-") as ["top" | "bottom", "left" | "center" | "right"];
+    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>`;
+  }
+}
+
+define("ds-toast", Toaster);
+
+declare global {
+  interface HTMLElementTagNameMap { "ds-toast": Toaster }
+}

package/DS1/2-core/figures.ts

@@ -0,0 +1,105 @@
+// 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";
+
+/** 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";
+const FORMATS: readonly 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 function figureFormat(value: string | null | undefined): FigureFormat {
+  return FORMATS.includes(value as FigureFormat) ? (value as FigureFormat) : "number";
+}
+
+/** A value written as `options` say, in the current language: `1,234`, `12K`, `25%`, `$1,234.50`, `+12%`. */
+export function formatFigure(value: number, options: FigureOptions = {}): string {
+  if (!Number.isFinite(value)) return "";
+  const { currency, minor, whole, digits, signed, language } = options;
+  const format = figureFormat(options.format);
+  const numeric: Intl.NumberFormatOptions & { language?: string } = { 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 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 function figureCells(text: string): FigureCell[] {
+  const cells: FigureCell[] = [];
+  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;
+}
+
+/** 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 function meterAria(value: number, min = 0, max = 1, options: FigureOptions & { over?: boolean } = {}): MeterAria {
+  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: number) => 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 };
+}