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

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

@@ -2,10 +2,11 @@
 // Input component for text and other input types
 import { LitElement, html, unsafeCSS } from "lit";
 import { live } from "lit/directives/live.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { define } from "../0-face/define";
-import seeIcon from "../x-icon/ezo-password-visibility-see.svg?url";
-import unseeIcon from "../x-icon/ezo-password-visibility-unsee.svg?url";
+import seeIcon from "../x-icon/password-see.svg?url";
+import unseeIcon from "../x-icon/password-unsee.svg?url";
 import { getText, currentLanguage } from "../0-face/i18n";
 import "./ds-text";
 import styles from "./styles/ds-input.css?inline";
@@ -17,8 +18,19 @@ export class Input extends LitElement {
                 this.focus();
         };
         this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+        this.resizeFrame = 0;
+        this.measuredWidth = 0;
+        this.fontsChanged = () => this.resizeToContent();
         this.type = "text";
+        this.multiline = false;
+        this.rows = 3;
+        this.maxRows = 10;
+        this.autoGrow = false;
+        this.wrap = "soft";
         this.inputMode = "";
+        this.enterKeyHint = "";
+        this.list = "";
+        this.suggestions = [];
         this.ariaLabel = "";
         this.ariaLabelledBy = "";
         this.ariaDescribedBy = "";
@@ -69,16 +81,44 @@ export class Input extends LitElement {
         window.addEventListener("language-changed", this.boundHandlers.languageChanged);
         // Also listen for translations loaded event
         window.addEventListener("translations-loaded", this.boundHandlers.languageChanged);
+        if (typeof ResizeObserver !== "undefined") {
+            this.resizeObserver = new ResizeObserver((entries) => {
+                if (this.clientWidth !== this.measuredWidth || entries.some(entry => entry.target !== this)) {
+                    this.measuredWidth = this.clientWidth;
+                    this.resizeToContent();
+                }
+            });
+            this.resizeObserver.observe(this);
+            const metric = this.shadowRoot?.querySelector(".row-metric");
+            if (metric)
+                this.resizeObserver.observe(metric);
+        }
+        document.fonts?.addEventListener("loadingdone", this.fontsChanged);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener("click", this.focusFromLabel);
         window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
         window.removeEventListener("translations-loaded", this.boundHandlers.languageChanged);
+        this.listObserver?.disconnect();
+        this.listObserver = undefined;
+        this.resizeObserver?.disconnect();
+        document.fonts?.removeEventListener("loadingdone", this.fontsChanged);
+        cancelAnimationFrame(this.resizeFrame);
     }
     firstUpdated() {
         if (this.autofocus)
             this.focus();
+        // A fixed-width field can change scale without changing its width. Measure
+        // one shared row separately from the content height that we set ourselves.
+        const metric = this.shadowRoot?.querySelector(".row-metric");
+        if (metric)
+            this.resizeObserver?.observe(metric);
+    }
+    willUpdate(changed) {
+        // A multiline field stands on its own by default, in the field treatment.
+        if (changed.has("multiline") && this.multiline && this.variant === "default" && !this.hasAttribute("variant"))
+            this.variant = "field";
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -89,13 +129,45 @@ export class Input extends LitElement {
             this.initialValue = this.value;
         if (changedProperties.has("type") && this.type !== "password")
             this._passwordVisible = false;
+        if (this.multiline)
+            this.resizeToContent();
+        if (changedProperties.has("list"))
+            this.observeList();
         this.syncForm();
     }
+    listSource() {
+        if (!this.list)
+            return null;
+        const root = this.getRootNode();
+        const source = root.getElementById?.(this.list);
+        return source instanceof HTMLDataListElement ? source : null;
+    }
+    observeList() {
+        this.listObserver?.disconnect();
+        this.listObserver = undefined;
+        const source = this.listSource();
+        if (!source || typeof MutationObserver === "undefined")
+            return;
+        this.listObserver = new MutationObserver(() => this.requestUpdate());
+        this.listObserver.observe(source, { childList: true, subtree: true, attributes: true, characterData: true });
+    }
+    /** The options the field offers, from `suggestions` or the named datalist. */
+    suggestionOptions() {
+        if (this.suggestions?.length)
+            return this.suggestions.map((option) => (typeof option === "string" ? { value: option } : option));
+        const source = this.listSource();
+        return source ? [...source.options].map((option) => ({ value: option.value, label: option.label !== option.value ? option.label : undefined })) : [];
+    }
+    renderSuggestions(options) {
+        return options.length
+            ? html `<datalist id="suggestions">${options.map((option) => html `<option value=${option.value} label=${ifDefined(option.label)}></option>`)}</datalist>`
+            : null;
+    }
     get input() {
         return this.shadowRoot?.querySelector("input, textarea") ?? null;
     }
     get isMultiline() {
-        return false;
+        return this.multiline;
     }
     get selectionStart() {
         return this.input?.selectionStart ?? null;
@@ -298,7 +370,68 @@ export class Input extends LitElement {
     select() {
         this.input?.select();
     }
+    /** Grow on the row grid, bounded by maxRows; the remainder scrolls. */
+    resizeToContent() {
+        cancelAnimationFrame(this.resizeFrame);
+        const control = this.input;
+        if (!control || !this.multiline)
+            return;
+        if (!this.autoGrow) {
+            control.style.height = "";
+            control.style.overflowY = "";
+            return;
+        }
+        this.resizeFrame = requestAnimationFrame(() => {
+            if (!this.isConnected)
+                return;
+            const computed = getComputedStyle(control);
+            const row = parseFloat(computed.getPropertyValue("--ds-row-height")) ||
+                20 * (parseFloat(computed.getPropertyValue("--ds-sf")) || 1);
+            const minimum = Math.max(1, Math.floor(this.rows || 1)) * row;
+            const maximum = Math.max(minimum, Math.floor(this.maxRows || this.rows || 1) * row);
+            control.style.height = "0px";
+            const border = parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+            const needed = Math.ceil((control.scrollHeight + border) / row) * row;
+            control.style.height = `${Math.max(minimum, Math.min(maximum, needed))}px`;
+            control.style.overflowY = needed > maximum ? "auto" : "hidden";
+        });
+    }
+    /** The multiline field: a native textarea across whole rows. */
+    renderMultiline(hasError, description) {
+        const rows = Math.max(1, Math.floor(this.rows || 1));
+        return html `<span class="row-metric" aria-hidden="true"></span><textarea
+      id="input"
+      part="input"
+      aria-label=${ifDefined(this.accessibleLabel())}
+      aria-invalid=${ifDefined(this.ariaInvalid || (hasError ? "true" : undefined))}
+      aria-describedby=${ifDefined([description ? "description" : "", hasError ? "error" : ""].filter(Boolean).join(" ") || undefined)}
+      inputmode=${ifDefined(this.inputMode || undefined)}
+      enterkeyhint=${ifDefined(this.enterKeyHint || undefined)}
+      spellcheck=${ifDefined(this.spellcheckHint || undefined)}
+      .name=${this.name}
+      .value=${live(this.value)}
+      .placeholder=${this._placeholder || this.placeholder}
+      ?disabled=${this.disabled || this._formDisabled}
+      ?readonly=${this.readonly}
+      ?required=${this.required}
+      ?autofocus=${this.autofocus}
+      autocomplete=${this.autocomplete}
+      minlength=${ifDefined(this.minlength || undefined)}
+      maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}
+      rows=${rows}
+      wrap=${this.wrap || "soft"}
+      style=${styleMap({ "--ds-textarea-rows": String(rows) })}
+      class=${hasError ? "has-error" : ""}
+      @input=${this._handleInput}
+      @change=${this.handleChange}
+      @focus=${this._handleFocus}
+      @blur=${this._handleBlur}
+    ></textarea>`;
+    }
     renderControl(hasError, description) {
+        if (this.multiline)
+            return this.renderMultiline(hasError, description);
+        const suggestions = this.suggestionOptions();
         return html `<input
       id="input"
       part="input"
@@ -307,6 +440,8 @@ export class Input extends LitElement {
       aria-invalid=${ifDefined(this.ariaInvalid || (hasError ? "true" : undefined))}
       aria-describedby=${ifDefined([description ? "description" : "", hasError ? "error" : ""].filter(Boolean).join(" ") || undefined)}
       inputmode=${ifDefined(this.inputMode || undefined)}
+      enterkeyhint=${ifDefined(this.enterKeyHint || undefined)}
+      list=${ifDefined(suggestions.length ? "suggestions" : undefined)}
       spellcheck=${ifDefined(this.spellcheckHint || undefined)}
       .name=${this.name}
       .value=${live(this.value)}
@@ -328,7 +463,7 @@ export class Input extends LitElement {
       @keydown=${this.handleKeyDown}
       @focus=${this._handleFocus}
       @blur=${this._handleBlur}
-    />`;
+    />${this.renderSuggestions(suggestions)}`;
     }
     render() {
         const hasError = Boolean(this.error || this.errorText);
@@ -340,7 +475,7 @@ export class Input extends LitElement {
             .filter(Boolean)
             .join(" ");
         return html `
-      <div class="input-wrapper">
+      <div class=${hasError ? "input-wrapper has-error" : "input-wrapper"}>
         ${this.label || this.labelText
             ? html `
                 <label for="input">
@@ -380,7 +515,7 @@ export class Input extends LitElement {
         ${hasError
             ? html `
                 <div id="error" class="error-message" role="status">
-                  ${this.errorText ? html `<ds-text .text=${this.errorText}></ds-text>` : this.error}
+                  ${this.errorText ? html `<ds-text wrap .text=${this.errorText}></ds-text>` : this.error}
                 </div>
               `
             : null}
@@ -391,7 +526,16 @@ export class Input extends LitElement {
 Input.formAssociated = true;
 Input.properties = {
     type: { type: String, reflect: true },
+    // A text area: the same field across whole rows.
+    multiline: { type: Boolean, reflect: true },
+    rows: { type: Number },
+    maxRows: { type: Number, attribute: "max-rows" },
+    autoGrow: { type: Boolean, attribute: "auto-grow", reflect: true },
+    wrap: { type: String },
     inputMode: { type: String, attribute: "inputmode" },
+    enterKeyHint: { type: String, attribute: "enterkeyhint" },
+    list: { type: String },
+    suggestions: { attribute: false },
     ariaLabel: { type: String, attribute: "aria-label" },
     ariaLabelledBy: { type: String, attribute: "aria-labelledby" },
     ariaDescribedBy: { type: String, attribute: "aria-describedby" },

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

@@ -0,0 +1,48 @@
+import { LitElement } from "lit";
+import { type KeyPlatform } from "../0-face/keys";
+/**
+ * @element ds-kbd
+ * @prop {string} shortcut - The shortcut, written once for every platform:
+ *   `mod+shift+d`, `mod+enter`, `escape`, `?`. Unset, the slotted words show
+ *   as written.
+ * @prop {boolean} plain - The words alone in the title grey, with no fill, as
+ *   a menu entry writes its shortcut.
+ * @prop {"apple" | "other"} platform - Write it for this platform rather than
+ *   the device's own (a help page showing both).
+ *
+ * @slot - Words of the page's own, when there is no `shortcut`.
+ *
+ * @example
+ * <ds-kbd shortcut="mod+k"></ds-kbd>
+ */
+export declare class Kbd extends LitElement {
+    static properties: {
+        shortcut: {
+            type: StringConstructor;
+        };
+        plain: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        platform: {
+            type: StringConstructor;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    shortcut: string | undefined;
+    plain: boolean;
+    platform: KeyPlatform | undefined;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The words the hint shows: the shortcut's label, or empty when it shows its slot. */
+    get label(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-kbd": Kbd;
+    }
+}
+//# sourceMappingURL=ds-kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-kbd.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-kbd.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKjE;;;;;;;;;;;;;;GAcG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;;;;;;;MAIf;IAEF,MAAM,CAAC,MAAM,4BAA2D;IAEhE,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,WAAW,GAAG,SAAS,CAAC;IAE1C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAOtD,iBAAiB;IAOjB,oBAAoB;IAMpB,uFAAuF;IACvF,IAAI,KAAK,IAAI,MAAM,CAOlB;IAED,MAAM;CAIP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,QAAQ,EAAE,GAAG,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,65 @@
+// ds-kbd.ts
+// A keyboard shortcut's hint: the shortcut written as the platform writes it
+// (⇧⌘D on Apple platforms, Ctrl+Shift+D elsewhere), drawn by 1-root/kbd.css,
+// the same class a page without scripts puts on a native <kbd>.
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { shortcutLabel } from "../0-face/keys";
+import metrics from "../1-root/component-metrics.css?inline";
+import kbd from "../1-root/kbd.css?inline";
+import styles from "./styles/ds-kbd.css?inline";
+/**
+ * @element ds-kbd
+ * @prop {string} shortcut - The shortcut, written once for every platform:
+ *   `mod+shift+d`, `mod+enter`, `escape`, `?`. Unset, the slotted words show
+ *   as written.
+ * @prop {boolean} plain - The words alone in the title grey, with no fill, as
+ *   a menu entry writes its shortcut.
+ * @prop {"apple" | "other"} platform - Write it for this platform rather than
+ *   the device's own (a help page showing both).
+ *
+ * @slot - Words of the page's own, when there is no `shortcut`.
+ *
+ * @example
+ * <ds-kbd shortcut="mod+k"></ds-kbd>
+ */
+export class Kbd extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.plain = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Ctrl, Shift and the other words follow the page's language.
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    /** The words the hint shows: the shortcut's label, or empty when it shows its slot. */
+    get label() {
+        if (!this.shortcut)
+            return "";
+        try {
+            return shortcutLabel(this.shortcut, this.platform ? { platform: this.platform } : undefined);
+        }
+        catch {
+            return this.shortcut;
+        }
+    }
+    render() {
+        const label = this.label;
+        return html `<kbd part="kbd" class=${this.plain ? "ds-kbd ds-kbd--plain" : "ds-kbd"}>${label || html `<slot></slot>`}</kbd>`;
+    }
+}
+Kbd.properties = {
+    shortcut: { type: String },
+    plain: { type: Boolean, reflect: true },
+    platform: { type: String },
+};
+Kbd.styles = [unsafeCSS(metrics), unsafeCSS(kbd), unsafeCSS(styles)];
+define("ds-kbd", Kbd);

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

@@ -32,6 +32,13 @@ export declare class LanguagePicker extends Cycle {
         values: {
             type: ArrayConstructor;
         };
+        value: {
+            type: StringConstructor;
+        };
+        label: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         currentValue: {
             type: StringConstructor;
             state: boolean;
@@ -62,7 +69,7 @@ export declare class LanguagePicker extends Cycle {
     chip: boolean;
     static styles: import("lit").CSSResult;
     constructor();
-    setupInitialValue(): Promise<void>;
+    setupInitialValue(): void;
     getValueDisplay(value: string): string;
     focus(options?: FocusOptions): void;
     render(): import("lit").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-language.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-language.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAYvD;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,cAAe,SAAQ,KAAK;IACvC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAA8E;IAC3F,IAAI,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,MAAM,0BAAqB;;IAS5B,iBAAiB;IAKvB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAItC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAE5B,MAAM;CAgBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,cAAc,CAAC;KAC/B;CACF"}
+{"version":3,"file":"ds-language.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-language.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAInC;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAYvD;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,cAAe,SAAQ,KAAK;IACvC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAA8E;IAC3F,IAAI,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,MAAM,0BAAqB;;IASlC,iBAAiB,IAAI,IAAI;IAKzB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAItC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAE5B,MAAM;CAgBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,cAAc,CAAC;KAC/B;CACF"}

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

@@ -45,9 +45,9 @@ export class LanguagePicker extends Cycle {
         this.chip = false;
     }
     // The product's languages can change after the picker is drawn
-    async setupInitialValue() {
+    setupInitialValue() {
         this.values = getAvailableLanguagesSync();
-        await super.setupInitialValue();
+        super.setupInitialValue();
     }
     getValueDisplay(value) {
         return nativeLanguageName(value);

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

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+/** The shared word a busy indicator reads without a label of its own. */
+export declare const LOADING_LABEL = "Loading";
+/**
+ * The controls a spinner can stand in: buttons and fields. Inside one, the
+ * spinner is one control high, the size of the icon it stands in for.
+ * `ds-loading.css` names the same controls for the light-DOM markup.
+ */
+export declare const LOADING_CONTROLS = "button, [role='button'], ds-button, .ds-button, ds-input, ds-select, .ds-field, .ds-input, .ds-select";
+/** Whether an element stands in a control, across shadow roots. */
+export declare function inLoadingControl(element: Element): boolean;
+/** @internal Automatic pending-state feedback, not user-insertable content.
+ * Label must describe the current operation; unset, it is the shared word
+ * "Loading" in the page's language. The containing app controls mounting.
+ * A spinner in a button or field is one control high (16px), elsewhere one
+ * square; `--ds-loading-size` sets it outright.
+ * --ds-loading-width/fill/duration preserve the surrounding brand. */
+export declare class LoadingIndicator extends LitElement {
+    static properties: {
+        label: {
+            type: StringConstructor;
+        };
+        variant: {
+            type: StringConstructor;
+        };
+        inControl: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    label: string;
+    variant: string;
+    inControl: boolean;
+    constructor();
+    private readonly relabel;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=ds-loading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-loading.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-loading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAKlD,yEAAyE;AACzE,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,0GAC4E,CAAC;AAE1G,mEAAmE;AACnE,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAO1D;AAOD;;;;;sEAKsE;AACtE,qBAAa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAE1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;;IAO3B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;IACtD,iBAAiB;IAMjB,oBAAoB;IAKpB,MAAM;CAIP"}

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

@@ -0,0 +1,63 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { define } from "../0-face/define";
+import { getText } from "../0-face/i18n";
+import styles from "./styles/ds-loading.css?inline";
+/** The shared word a busy indicator reads without a label of its own. */
+export const LOADING_LABEL = "Loading";
+/**
+ * The controls a spinner can stand in: buttons and fields. Inside one, the
+ * spinner is one control high, the size of the icon it stands in for.
+ * `ds-loading.css` names the same controls for the light-DOM markup.
+ */
+export const LOADING_CONTROLS = "button, [role='button'], ds-button, .ds-button, ds-input, ds-select, .ds-field, .ds-input, .ds-select";
+/** Whether an element stands in a control, across shadow roots. */
+export function inLoadingControl(element) {
+    let node = element.parentElement ?? hostOf(element);
+    while (node) {
+        if (node.closest(LOADING_CONTROLS))
+            return true;
+        node = hostOf(node);
+    }
+    return false;
+}
+function hostOf(element) {
+    const root = element.getRootNode();
+    return root instanceof ShadowRoot ? root.host : null;
+}
+/** @internal Automatic pending-state feedback, not user-insertable content.
+ * Label must describe the current operation; unset, it is the shared word
+ * "Loading" in the page's language. The containing app controls mounting.
+ * A spinner in a button or field is one control high (16px), elsewhere one
+ * square; `--ds-loading-size` sets it outright.
+ * --ds-loading-width/fill/duration preserve the surrounding brand. */
+export class LoadingIndicator extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.label = "";
+        this.variant = "bar";
+        this.inControl = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.inControl = inLoadingControl(this);
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    render() {
+        const label = this.label || getText(LOADING_LABEL) || LOADING_LABEL;
+        return html `<span class="ds-loading" data-variant=${this.variant} data-context=${this.inControl ? "control" : "page"} role="status" aria-label=${label} aria-busy="true"><span class="ds-loading__fill" aria-hidden="true"></span></span>`;
+    }
+}
+LoadingIndicator.properties = {
+    label: { type: String },
+    variant: { type: String },
+    inControl: { state: true },
+};
+LoadingIndicator.styles = unsafeCSS(styles);
+define("ds-loading", LoadingIndicator);

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

@@ -0,0 +1,103 @@
+import { LitElement, type PropertyValues } from "lit";
+import { type FigureFormat, type MeterAria } from "./figures";
+/**
+ * @element ds-meter
+ * @prop {number} value - The value. Past `max`, the meter is over.
+ * @prop {number} min - The start of the range, 0 by default.
+ * @prop {number} max - The end of the range, 1 by default.
+ * @prop {number} squares - Draw the range in this many squares, one square each, instead of a bar.
+ * @prop {boolean} over - Show the meter as over whatever its value, where the page decides it.
+ * @prop {string} label - The meter's name for assistive technology: a translation key, or literal words.
+ * @prop {string} valuetext - What the value says (`aria-valuetext`), in place of "7 of 10".
+ * @prop {"number" | "compact" | "percent" | "money"} format - How the value and the range are written in the words.
+ * @prop {string} currency - The ISO 4217 code for money.
+ * @prop {boolean} minor - The money is counted in the currency's minor unit.
+ * @prop {boolean} whole - Money in whole units only.
+ * @prop {number} digits - Decimals in the words.
+ * @prop {boolean} literal - Show `label` and `valuetext` as written, never looked up.
+ *
+ * The element is `role="meter"` with `aria-valuenow`, `aria-valuemin`,
+ * `aria-valuemax` and `aria-valuetext`. `aria-valuenow` stays inside the
+ * range, as ARIA requires; the words say when the value is past its end
+ * ("12 of 10, over by 2").
+ *
+ * @example
+ * <ds-meter label="Spent" value="7400" max="10000" format="money" currency="DKK"></ds-meter>
+ * <ds-meter label="Seats" value="7" max="10" squares="10"></ds-meter>
+ */
+export declare class Meter extends LitElement {
+    static properties: {
+        value: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        squares: {
+            type: NumberConstructor;
+        };
+        over: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        valuetext: {
+            type: StringConstructor;
+        };
+        format: {
+            type: StringConstructor;
+        };
+        currency: {
+            type: StringConstructor;
+        };
+        minor: {
+            type: BooleanConstructor;
+        };
+        whole: {
+            type: BooleanConstructor;
+        };
+        digits: {
+            type: NumberConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    squares: number | undefined;
+    over: boolean;
+    label: string | undefined;
+    valuetext: string | undefined;
+    format: FigureFormat;
+    currency: string | undefined;
+    minor: boolean;
+    whole: boolean;
+    digits: number | undefined;
+    literal: boolean;
+    private readonly relabel;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    /** The values the meter says and draws, in the current language. */
+    get aria(): MeterAria;
+    /** How many squares the range is drawn in, or 0 for a bar. */
+    get squareCount(): number;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-meter": Meter;
+    }
+}
+//# sourceMappingURL=ds-meter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-meter.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-meter.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,EAA2B,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAQvF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAcf;IAEF,MAAM,CAAC,MAAM,4BAA+D;IAEpE,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,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,OAAO,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IActD,iBAAiB;IAOjB,oBAAoB;IAOpB,OAAO,CAAC,KAAK;IAKb,oEAAoE;IACpE,IAAI,IAAI,IAAI,SAAS,CAKpB;IAED,8DAA8D;IAC9D,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAclD,MAAM;CAWP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAC;KACnB;CACF"}