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

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

@@ -1,101 +1,7 @@
-import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { Button } from "./ds-button";
 import { define } from "../0-face/define";
-import { getText } from "../0-face/i18n";
-import "./ds-icon";
-import "./ds-text";
-import styles from "./styles/ds-split.css?inline";
-/** A compact group of choices or repeated actions, sharing outside corners.
- * `change` requests a choice; preventDefault keeps the current value. `press`
- * reports every activation in actions mode. Neither mode submits a form.
- */
-export class Split extends LitElement {
-    constructor() {
-        super();
-        this.languageChanged = () => this.requestUpdate();
-        // Association supplies native disabled-fieldset behavior, without adding
-        // a form value or making an action button into a submitter.
-        if (typeof this.attachInternals === "function")
-            this.attachInternals();
-        this.options = "";
-        this.value = "";
-        this.disabled = false;
-        this.actions = false;
-        this.literal = false;
-        this.compact = false;
-        this._fieldsetDisabled = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.hasAttribute("role"))
-            this.setAttribute("role", "group");
-        window.addEventListener("language-changed", this.languageChanged);
-        window.addEventListener("translations-loaded", this.languageChanged);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this.languageChanged);
-        window.removeEventListener("translations-loaded", this.languageChanged);
-    }
-    formDisabledCallback(disabled) { this._fieldsetDisabled = disabled; }
-    /** String convenience for HTML: day:Day,back:@left:Back. Use segments for
-     * labels containing commas/colons, translated product labels or disabling
-     * individual actions. An explicit empty array renders no choices.
-     */
-    get choices() {
-        return this.segments ?? this.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() };
-        });
-    }
-    press(segment) {
-        if (this.disabled || this._fieldsetDisabled || segment.disabled)
-            return;
-        if (this.actions) {
-            this.dispatchEvent(new CustomEvent("press", { detail: { value: segment.value }, bubbles: true, composed: true }));
-        }
-        else if (segment.value !== this.value) {
-            const accepted = this.dispatchEvent(new CustomEvent("change", {
-                detail: { value: segment.value }, bubbles: true, composed: true, cancelable: true,
-            }));
-            if (accepted)
-                this.value = segment.value;
-        }
-    }
-    focus(options) {
-        const buttons = [...this.renderRoot.querySelectorAll("button:not(:disabled)")];
-        (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
-    }
-    render() {
-        return html `${this.choices.map(segment => html `<button
-      type="button" part="segment" value=${segment.value}
-      aria-pressed=${this.actions ? nothing : String(segment.value === this.value)}
-      aria-label=${segment.icon ? (this.literal ? segment.label : getText(segment.label)) : nothing}
-      ?data-icon=${!!segment.icon}
-      ?data-short=${segment.label.length === 1}
-      ?disabled=${this.disabled || this._fieldsetDisabled || segment.disabled}
-      @click=${() => this.press(segment)}
-    >${segment.icon
-            ? html `<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
-            : html `<ds-text .text=${segment.label} .literal=${this.literal}></ds-text>`}</button>`)}`;
-    }
+/** Compatibility name for Button's split mode. New usage is <ds-button split>. */
+export class Split extends Button {
+    constructor() { super(); this.split = true; }
 }
-Split.formAssociated = true;
-Split.properties = {
-    options: { type: String },
-    segments: { attribute: false },
-    value: { type: String, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    actions: { type: Boolean, reflect: true },
-    literal: { type: Boolean, reflect: true },
-    compact: { type: Boolean, reflect: true },
-    _fieldsetDisabled: { state: true },
-};
-Split.styles = unsafeCSS(styles);
 define("ds-split", Split);

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

@@ -0,0 +1,126 @@
+import { LitElement } from "lit";
+import { type FigureFormat } from "./figures";
+import "./ds-icon";
+export type 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 declare class Stat extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        value: {
+            type: NumberConstructor;
+        };
+        figure: {
+            type: StringConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        currency: {
+            type: StringConstructor;
+        };
+        minor: {
+            type: BooleanConstructor;
+        };
+        whole: {
+            type: BooleanConstructor;
+        };
+        digits: {
+            type: NumberConstructor;
+        };
+        change: {
+            type: NumberConstructor;
+        };
+        changeFormat: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        changeTone: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        caption: {
+            type: StringConstructor;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        cells: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    label: string | undefined;
+    value: number | undefined;
+    figure: string | undefined;
+    format: FigureFormat;
+    currency: string | undefined;
+    minor: boolean;
+    whole: boolean;
+    digits: number | undefined;
+    change: number | undefined;
+    changeFormat: FigureFormat | undefined;
+    changeTone: StatTone | undefined;
+    caption: string | undefined;
+    icon: string | undefined;
+    tone: StatTone | undefined;
+    cells: boolean;
+    literal: boolean;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    private options;
+    /** The figure's text as it is drawn: the words given, or the value written in the current language. */
+    get text(): string;
+    /** The change's text with its sign, or empty without a change. */
+    get changeText(): string;
+    private slotted;
+    private drawFigure;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-stat": Stat;
+    }
+}
+//# sourceMappingURL=ds-stat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-stat.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-stat.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAG3D,OAAO,EAA2C,KAAK,YAAY,EAAsB,MAAM,WAAW,CAAC;AAC3G,OAAO,WAAW,CAAC;AAKnB,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAG5C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBf;IAEF,MAAM,CAAC,MAAM,4BAA+D;IAEpE,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,GAAG,SAAS,CAAC;IACvC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAWtD,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,KAAK;IAKb,OAAO,CAAC,OAAO;IAIf,uGAAuG;IACvG,IAAI,IAAI,IAAI,MAAM,CAGjB;IAED,kEAAkE;IAClE,IAAI,UAAU,IAAI,MAAM,CAIvB;IAED,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,UAAU;IAMlB,MAAM;CAyBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -0,0 +1,137 @@
+// 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 } 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";
+const TONES = ["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 {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        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();
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    options(format) {
+        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() {
+        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() {
+        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 });
+    }
+    slotted(name) {
+        return [...this.children].some(node => (node.getAttribute("slot") ?? "") === name);
+    }
+    drawFigure(text) {
+        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) ? this.tone : undefined;
+        const changeTone = TONES.includes(this.changeTone) ? 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>`;
+    }
+}
+Stat.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 },
+};
+Stat.styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+define("ds-stat", Stat);

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

@@ -0,0 +1,72 @@
+import { LitElement } from "lit";
+import "./ds-icon";
+/** Where a step stands: before the current one, the current one, after it, or stopped. */
+export type StepState = "done" | "current" | "upcoming" | "failed";
+/** A step: its name (a translation key, or literal words), and optionally its own state and where it goes. */
+export type Step = string | {
+    label: string;
+    state?: StepState;
+    href?: string;
+};
+/** Each step's state: its own if it names one, else done before `current`, current at it and upcoming after. */
+export declare function stepStates(steps: readonly Step[], current: number): StepState[];
+/**
+ * @element ds-steps
+ * @prop {Step[]} steps - The steps in order: names, or `{ label, state, href }`. As an attribute, a JSON array.
+ * @prop {number} current - The number of the current step, counted from 1. Past the last, every step is done; 0, none has started.
+ * @prop {boolean} vertical - One step to a row, with each step's `step-N` slot under it.
+ * @prop {string} label - The sequence's name for assistive technology: a translation key, or literal words.
+ * @prop {boolean} literal - Show the names and `label` as written, never looked up.
+ *
+ * @slot step-N - In a vertical sequence, what belongs under step N (counted from 1): a line of text, a form.
+ *
+ * The steps are an ordered list. The current one carries `aria-current="step"`;
+ * a done or failed step says so in hidden words ("Done", "Failed", the
+ * shared words). A step with `href` is a link around its mark and name, so it
+ * is reached with Tab; the others are not focusable.
+ *
+ * @example
+ * <ds-steps current="2" steps='["Apply", "Approval", "Connect payouts", "Start earning"]' label="Getting started" literal></ds-steps>
+ */
+export declare class Steps extends LitElement {
+    static properties: {
+        steps: {
+            type: ArrayConstructor;
+        };
+        current: {
+            type: NumberConstructor;
+        };
+        vertical: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    steps: Step[];
+    current: number;
+    vertical: boolean;
+    label: string | undefined;
+    literal: boolean;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    /** Each step's state, as drawn. */
+    get states(): StepState[];
+    private slotted;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-steps": Steps;
+    }
+}
+//# sourceMappingURL=ds-steps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-steps.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-steps.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAC;AAI3D,OAAO,WAAW,CAAC;AAKnB,0FAA0F;AAC1F,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAGnE,8GAA8G;AAC9G,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKhF,gHAAgH;AAChH,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,CAO/E;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAMf;IAEF,MAAM,CAAC,MAAM,4BAA+D;IAEpE,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAUtD,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,KAAK;IAKb,mCAAmC;IACnC,IAAI,MAAM,IAAI,SAAS,EAAE,CAExB;IAED,OAAO,CAAC,OAAO;IAIf,MAAM;CA2BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}

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

@@ -0,0 +1,114 @@
+// ds-steps.ts
+// A numbered sequence of steps, one square high: those before the current
+// one done, the current one marked with aria-current="step", the rest still
+// to come. Drawn by 1-root/figures.css, the same classes a page without
+// scripts writes on an <ol>.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { formatNumber } from "../0-face/format";
+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-steps.css?inline";
+const STATES = ["done", "current", "upcoming", "failed"];
+/** The words assistive technology reads after a step's name for its state; aria-current says the current one. */
+const STATE_WORDS = { done: "Done", failed: "Failed" };
+/** Each step's state: its own if it names one, else done before `current`, current at it and upcoming after. */
+export function stepStates(steps, current) {
+    return steps.map((step, index) => {
+        const own = typeof step === "object" && step ? step.state : undefined;
+        if (own && STATES.includes(own))
+            return own;
+        const number = index + 1;
+        return number < current ? "done" : number === current ? "current" : "upcoming";
+    });
+}
+/**
+ * @element ds-steps
+ * @prop {Step[]} steps - The steps in order: names, or `{ label, state, href }`. As an attribute, a JSON array.
+ * @prop {number} current - The number of the current step, counted from 1. Past the last, every step is done; 0, none has started.
+ * @prop {boolean} vertical - One step to a row, with each step's `step-N` slot under it.
+ * @prop {string} label - The sequence's name for assistive technology: a translation key, or literal words.
+ * @prop {boolean} literal - Show the names and `label` as written, never looked up.
+ *
+ * @slot step-N - In a vertical sequence, what belongs under step N (counted from 1): a line of text, a form.
+ *
+ * The steps are an ordered list. The current one carries `aria-current="step"`;
+ * a done or failed step says so in hidden words ("Done", "Failed", the
+ * shared words). A step with `href` is a link around its mark and name, so it
+ * is reached with Tab; the others are not focusable.
+ *
+ * @example
+ * <ds-steps current="2" steps='["Apply", "Approval", "Connect payouts", "Start earning"]' label="Getting started" literal></ds-steps>
+ */
+export class Steps extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.steps = [];
+        this.current = 1;
+        this.vertical = 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();
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    /** Each step's state, as drawn. */
+    get states() {
+        return stepStates(Array.isArray(this.steps) ? this.steps : [], Number(this.current));
+    }
+    slotted(name) {
+        return [...this.children].some(node => node.getAttribute("slot") === name);
+    }
+    render() {
+        const steps = Array.isArray(this.steps) ? this.steps : [];
+        const states = this.states;
+        const label = this.words(this.label);
+        const changed = () => this.requestUpdate();
+        return html `<ol class="ds-steps${this.vertical ? " ds-steps--vertical" : ""}" part="steps" aria-label=${label || nothing}>
+      ${steps.map((step, index) => {
+            const state = states[index];
+            const name = this.words(typeof step === "string" ? step : step?.label);
+            const href = typeof step === "object" && step ? step.href : undefined;
+            const number = index + 1;
+            const said = STATE_WORDS[state];
+            const mark = state === "done" || state === "failed"
+                ? html `<ds-icon size="small" type=${state === "done" ? "check" : "warning"}></ds-icon>`
+                : formatNumber(number);
+            const face = html `<span class="ds-steps__mark" part="mark" aria-hidden="true">${mark}</span><span class="ds-steps__label" part="label">${name}</span>${said
+                ? html `<span class="ds-steps__state"> ${getText(said) || said}</span>`
+                : nothing}`;
+            return html `<li class="ds-steps__step${state === "upcoming" ? "" : ` ds-steps__step--${state}`}" part="step" data-state=${state} aria-current=${state === "current" ? "step" : nothing}>
+          ${href ? html `<a class="ds-steps__link" part="link" href=${href}>${face}</a>` : face}
+          ${this.vertical
+                ? html `<div class="ds-steps__body" part="body" ?hidden=${!this.slotted(`step-${number}`)}><slot name=${`step-${number}`} @slotchange=${changed}></slot></div>`
+                : nothing}
+        </li>`;
+        })}
+    </ol>`;
+    }
+}
+Steps.properties = {
+    steps: { type: Array },
+    current: { type: Number },
+    vertical: { type: Boolean, reflect: true },
+    label: { type: String },
+    literal: { type: Boolean, reflect: true },
+};
+Steps.styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+define("ds-steps", Steps);

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

@@ -1,5 +1,6 @@
 import { LitElement } from "lit";
 /** 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 declare class Switch extends LitElement {
     static styles: import("lit").CSSResult;
     focus(options?: FocusOptions): void;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-switch.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,qFAAqF;AACrF,oFAAoF;AACpF,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,MAAM,0BAAqB;IAClC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CACP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,MAAM,CAAA;KAAE;CAAE"}

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

@@ -2,6 +2,7 @@ import { LitElement, html, unsafeCSS } from "lit";
 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 {
     focus(options) { this.querySelector(":scope > button")?.focus(options); }
     render() { return html `<slot></slot>`; }

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

@@ -6,6 +6,16 @@ import { LitElement } from "lit";
  * @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)
@@ -16,6 +26,9 @@ import { LitElement } from "lit";
  *
  * // 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 declare class Text extends LitElement {
     static get properties(): {
@@ -50,8 +63,8 @@ export declare class Text extends LitElement {
     };
     text: string;
     literal: boolean;
-    tone?: "muted" | "title";
-    size?: "small" | "heading";
+    tone?: "muted" | "title" | "warning" | "danger";
+    size?: "small" | "heading" | "display";
     strong: boolean;
     wrap: boolean;
     _text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQlD,wBAAwB;IA8BxB,SAAS;IA4BT,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAUpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,aAAa,CAAqC;;IAsB1D,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IA8BjB,oBAAoB;IAYpB,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQlD,wBAAwB;IA8BxB,SAAS;IA4BT,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -9,6 +9,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)
@@ -19,6 +29,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() {