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

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

@@ -0,0 +1,124 @@
+// ds-meter.ts
+// How much of a range a value fills, one square high: a bar half a square
+// high, or the range in squares. Past the end it is "over", filled whole in
+// the danger colour. Drawn by 1-root/figures.css, the same classes a page
+// without scripts writes.
+import { LitElement, html, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { figureFormat, meterAria } from "./figures";
+import metrics from "../1-root/component-metrics.css?inline";
+import figures from "../1-root/figures.css?inline";
+import styles from "./styles/ds-meter.css?inline";
+/** The most squares a meter draws. */
+const MOST_SQUARES = 100;
+/**
+ * @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 class Meter extends LitElement {
+    constructor() {
+        super();
+        this.relabel = () => this.requestUpdate();
+        this.value = 0;
+        this.min = 0;
+        this.max = 1;
+        this.over = false;
+        this.format = "number";
+        this.minor = false;
+        this.whole = 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;
+    }
+    /** The values the meter says and draws, in the current language. */
+    get aria() {
+        return meterAria(this.value, this.min, this.max, {
+            over: this.over, format: figureFormat(this.format), currency: this.currency,
+            minor: this.minor, whole: this.whole, digits: this.digits,
+        });
+    }
+    /** How many squares the range is drawn in, or 0 for a bar. */
+    get squareCount() {
+        const count = Math.floor(Number(this.squares));
+        return Number.isFinite(count) && count > 0 ? Math.min(MOST_SQUARES, count) : 0;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        const aria = this.aria;
+        const label = this.words(this.label);
+        this.setAttribute("role", "meter");
+        this.setAttribute("aria-valuenow", String(aria.now));
+        this.setAttribute("aria-valuemin", String(aria.min));
+        this.setAttribute("aria-valuemax", String(aria.max));
+        this.setAttribute("aria-valuetext", this.words(this.valuetext) || aria.text);
+        if (label)
+            this.setAttribute("aria-label", label);
+        else if (changed.has("label"))
+            this.removeAttribute("aria-label");
+        this.toggleAttribute("data-over", aria.over);
+    }
+    render() {
+        const aria = this.aria;
+        const count = this.squareCount;
+        const over = aria.over ? " ds-meter--over" : "";
+        if (count) {
+            const on = Math.round(aria.fraction * count);
+            return html `<div class="ds-meter ds-meter--squares${over}" part="meter">${Array.from({ length: count }, (_, index) => html `<span class="ds-meter__square${index < on ? " ds-meter__square--on" : ""}" part="square"></span>`)}</div>`;
+        }
+        return html `<div class="ds-meter${over}" part="meter" style="--ds-meter-value: ${aria.fraction}"><span class="ds-meter__fill" part="fill"></span></div>`;
+    }
+}
+Meter.properties = {
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    squares: { type: Number },
+    over: { type: Boolean, reflect: true },
+    label: { type: String },
+    valuetext: { type: String },
+    format: { type: String },
+    currency: { type: String },
+    minor: { type: Boolean },
+    whole: { type: Boolean },
+    digits: { type: Number },
+    literal: { type: Boolean, reflect: true },
+};
+Meter.styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+define("ds-meter", Meter);

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

@@ -0,0 +1,103 @@
+import { LitElement, type PropertyValues } from "lit";
+import "./ds-icon";
+export type NoticeTone = "neutral" | "success" | "warning" | "danger";
+/** The icon each tone's mark carries unless `icon` names another. */
+export declare const NOTICE_ICONS: Readonly<Record<NoticeTone, string>>;
+/** Detail of `ds-notice-dismiss`. Cancel the event to keep the notice and remove it yourself. */
+export interface NoticeDismissDetail {
+    tone: NoticeTone;
+}
+/**
+ * @element ds-notice
+ * @prop {"neutral" | "success" | "warning" | "danger"} tone - The mark's colour
+ *   and icon; danger also turns the words into the danger colour. Neutral by default.
+ * @prop {string} heading - A title: a translation key, or literal words.
+ * @prop {string} text - The text: a translation key, or literal words.
+ * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
+ * @prop {string} icon - An icon from the library in place of the tone's own.
+ * @prop {boolean} dismissible - Show a close button at the end of the first line.
+ * @prop {boolean} banner - A strip one square high across the top of its
+ *   positioning context, filled in the tone's colour, its words, actions and
+ *   close button on one line; it reserves no room in the flow.
+ *
+ * @slot - The text, when it needs more than words: a link, a strong word.
+ * @slot heading - The title, as inline content.
+ * @slot icon - An icon of the page's own inside the mark.
+ * @slot actions - Buttons or links on the row under the words.
+ *
+ * @fires ds-notice-dismiss - The close button was pressed. Cancelable: unless
+ *   it is cancelled, the notice hides itself.
+ *
+ * The element is a live region: `role="status"`, or `role="alert"` for danger,
+ * unless the page gives it a role of its own.
+ *
+ * @example
+ * <ds-notice tone="danger" heading="Couldn't save" dismissible>
+ *   Your changes are kept on this device.
+ *   <ds-button slot="actions" secondary>Try again</ds-button>
+ * </ds-notice>
+ */
+export declare class Notice extends LitElement {
+    static properties: {
+        tone: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        heading: {
+            type: StringConstructor;
+        };
+        text: {
+            type: StringConstructor;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: StringConstructor;
+        };
+        dismissible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        banner: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult[];
+    tone: NoticeTone;
+    heading: string | undefined;
+    text: string | undefined;
+    literal: boolean;
+    icon: string | undefined;
+    dismissible: boolean;
+    banner: boolean;
+    /** The role this element last set, so a role the page wrote is left alone. */
+    private ownRole;
+    private readonly relabel;
+    constructor();
+    /** The tone in effect: an unknown value reads as neutral. */
+    get resolvedTone(): NoticeTone;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    private syncRole;
+    private words;
+    /**
+     * Whether light-DOM content fills a slot: elements, or text that is not
+     * blank. The blank text between slotted children still counts as assigned
+     * to the default slot and hides its fallback, so `text` is drawn beside the
+     * slot rather than inside it.
+     */
+    private slotted;
+    /** Ask to close: hides the notice unless a listener cancels `ds-notice-dismiss`. */
+    dismiss(): boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-notice": Notice;
+    }
+}
+//# sourceMappingURL=ds-notice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-notice.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-notice.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhF,OAAO,WAAW,CAAC;AAKnB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEtE,qEAAqE;AACrE,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAK7D,CAAC;AAEF,iGAAiG;AACjG,MAAM,WAAW,mBAAmB;IAAG,IAAI,EAAE,UAAU,CAAA;CAAE;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;MAQf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAExB,8EAA8E;IAC9E,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAUtD,6DAA6D;IAC7D,IAAI,YAAY,IAAI,UAAU,CAE7B;IAED,iBAAiB;IAOjB,oBAAoB;IAMpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKlD,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,KAAK;IAKb;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAMf,oFAAoF;IACpF,OAAO,IAAI,OAAO;IASlB,MAAM;CAuBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

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

@@ -0,0 +1,152 @@
+// ds-notice.ts
+// An inline notice in the flow of the page: a tone, a title and/or text,
+// actions and an optional dismiss; with `banner`, a strip across the top of
+// its positioning context instead. Drawn by 1-root/notice.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 "./ds-icon";
+import metrics from "../1-root/component-metrics.css?inline";
+import controls from "../1-root/controls.css?inline";
+import styles from "./styles/ds-notice.css?inline";
+const TONES = ["neutral", "success", "warning", "danger"];
+/** The icon each tone's mark carries unless `icon` names another. */
+export const NOTICE_ICONS = {
+    neutral: "info",
+    success: "check",
+    warning: "warning",
+    danger: "warning",
+};
+/**
+ * @element ds-notice
+ * @prop {"neutral" | "success" | "warning" | "danger"} tone - The mark's colour
+ *   and icon; danger also turns the words into the danger colour. Neutral by default.
+ * @prop {string} heading - A title: a translation key, or literal words.
+ * @prop {string} text - The text: a translation key, or literal words.
+ * @prop {boolean} literal - Show `heading` and `text` as written, never looked up.
+ * @prop {string} icon - An icon from the library in place of the tone's own.
+ * @prop {boolean} dismissible - Show a close button at the end of the first line.
+ * @prop {boolean} banner - A strip one square high across the top of its
+ *   positioning context, filled in the tone's colour, its words, actions and
+ *   close button on one line; it reserves no room in the flow.
+ *
+ * @slot - The text, when it needs more than words: a link, a strong word.
+ * @slot heading - The title, as inline content.
+ * @slot icon - An icon of the page's own inside the mark.
+ * @slot actions - Buttons or links on the row under the words.
+ *
+ * @fires ds-notice-dismiss - The close button was pressed. Cancelable: unless
+ *   it is cancelled, the notice hides itself.
+ *
+ * The element is a live region: `role="status"`, or `role="alert"` for danger,
+ * unless the page gives it a role of its own.
+ *
+ * @example
+ * <ds-notice tone="danger" heading="Couldn't save" dismissible>
+ *   Your changes are kept on this device.
+ *   <ds-button slot="actions" secondary>Try again</ds-button>
+ * </ds-notice>
+ */
+export class Notice extends LitElement {
+    constructor() {
+        super();
+        /** The role this element last set, so a role the page wrote is left alone. */
+        this.ownRole = null;
+        this.relabel = () => this.requestUpdate();
+        this.tone = "neutral";
+        this.literal = false;
+        this.dismissible = false;
+        this.banner = false;
+    }
+    /** The tone in effect: an unknown value reads as neutral. */
+    get resolvedTone() {
+        return TONES.includes(this.tone) ? this.tone : "neutral";
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+        this.syncRole();
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (changed.has("tone"))
+            this.syncRole();
+    }
+    syncRole() {
+        if (!this.isConnected)
+            return;
+        const current = this.getAttribute("role");
+        if (current !== null && current !== this.ownRole)
+            return;
+        this.ownRole = this.resolvedTone === "danger" ? "alert" : "status";
+        if (current !== this.ownRole)
+            this.setAttribute("role", this.ownRole);
+    }
+    words(value) {
+        if (!value)
+            return "";
+        return this.literal ? value : getText(value) || value;
+    }
+    /**
+     * Whether light-DOM content fills a slot: elements, or text that is not
+     * blank. The blank text between slotted children still counts as assigned
+     * to the default slot and hides its fallback, so `text` is drawn beside the
+     * slot rather than inside it.
+     */
+    slotted(name) {
+        return [...this.childNodes].some(node => name
+            ? node instanceof Element && node.getAttribute("slot") === name
+            : node instanceof Element ? !node.hasAttribute("slot") : node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim()));
+    }
+    /** Ask to close: hides the notice unless a listener cancels `ds-notice-dismiss`. */
+    dismiss() {
+        const event = new CustomEvent("ds-notice-dismiss", {
+            bubbles: true, composed: true, cancelable: true, detail: { tone: this.resolvedTone },
+        });
+        if (!this.dispatchEvent(event))
+            return false;
+        this.hidden = true;
+        return true;
+    }
+    render() {
+        const tone = this.resolvedTone;
+        const heading = this.words(this.heading);
+        const text = this.words(this.text);
+        const hasHeading = Boolean(heading) || this.slotted("heading");
+        const slottedText = this.slotted("");
+        const hasText = Boolean(text) || slottedText;
+        const hasActions = this.slotted("actions");
+        const changed = () => this.requestUpdate();
+        return html `<div class="ds-notice${tone === "neutral" ? "" : ` ds-notice--${tone}`}${this.banner ? " ds-notice--banner" : ""}" part="notice">
+      <span class="ds-notice__mark" part="mark" aria-hidden="true">
+        <slot name="icon" @slotchange=${changed}><ds-icon size="large" .type=${this.icon || NOTICE_ICONS[tone]}></ds-icon></slot>
+      </span>
+      <div class="ds-notice__title" part="title" ?hidden=${!hasHeading}><slot name="heading" @slotchange=${changed}>${heading}</slot></div>
+      <div class="ds-notice__text" part="text" ?hidden=${!hasText}><slot @slotchange=${changed}></slot>${slottedText ? nothing : text}</div>
+      <div class="ds-notice__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${changed}></slot></div>
+      ${this.dismissible
+            ? html `<button class="ds-button ds-button--icon ds-notice__dismiss" part="dismiss" type="button" aria-label=${getText("Close") || "Close"} @click=${() => this.dismiss()}>
+            <ds-icon type="close" aria-hidden="true"></ds-icon>
+          </button>`
+            : nothing}
+    </div>`;
+    }
+}
+Notice.properties = {
+    tone: { type: String, reflect: true },
+    heading: { type: String },
+    text: { type: String },
+    literal: { type: Boolean, reflect: true },
+    icon: { type: String },
+    dismissible: { type: Boolean, reflect: true },
+    banner: { type: Boolean, reflect: true },
+};
+Notice.styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+define("ds-notice", Notice);

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

@@ -1,27 +1,84 @@
-import { LitElement } from "lit";
+import { LitElement, type PropertyValues } from "lit";
+/** Detail of `select`. Cancel the event to keep the current dot where it is. */
+export interface PagedotsSelectDetail {
+    /** The dot picked, from 0. */
+    index: number;
+    /** The dot that was current. */
+    previous: number;
+}
 /**
- * Page dots indicator component for carousels and pagination.
+ * @element ds-pagedots
+ * @prop {number} count - How many dots. Three by default.
+ * @prop {number} active - The current dot, from 0.
+ * @prop {boolean} end - Draw the last dot as an end marker (a ring in the
+ *   text colour) unless it is current: a way on to something else.
+ * @prop {string} label - The group's name: a translation key, or literal
+ *   words. The shared word "Slides" by default.
+ * @prop {string} dotLabel - Each dot's name, with `{index}` for its number
+ *   from 1: the shared words' "Slide {index}" by default.
+ * @prop {boolean} literal - Show `label` and `dotLabel` as written, never looked up.
+ *
+ * @fires select - A person picked a dot, by a click or a key. `detail` is
+ *   `{ index, previous }`. Cancelable: unless it is cancelled, the dot becomes
+ *   current.
+ *
+ * The element is a group of buttons. Only the current dot is in the tab
+ * order; the arrow keys (following the reading direction), Home and End move
+ * to the others and pick them.
  *
- * Usage:
- * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ * @example
+ * <ds-pagedots count="5" active="1"></ds-pagedots>
  */
 export declare class Pagedots extends LitElement {
     static properties: {
-        /** Number of dots to display */
         count: {
             type: NumberConstructor;
             reflect: boolean;
         };
-        /** Index of the active dot (0-based) */
         active: {
             type: NumberConstructor;
             reflect: boolean;
         };
+        end: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        dotLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        literal: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
     };
+    static styles: import("lit").CSSResult[];
     count: number;
     active: number;
+    end: boolean;
+    label: string | undefined;
+    dotLabel: string | undefined;
+    literal: boolean;
+    /** The role this element last set, so a role the page wrote is left alone. */
+    private ownRole;
+    private focusAfterUpdate;
+    private readonly relabel;
     constructor();
-    static styles: import("lit").CSSResult;
+    /** The number of dots drawn: a whole number, never below zero. */
+    get dots(): number;
+    /** The current dot, inside the count. */
+    get current(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private words;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** Pick a dot as a person would: fires `select` and, unless it is cancelled, makes it current. */
+    select(index: number): boolean;
+    private keydown;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-pagedots.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-pagedots.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD;;;;;GAKG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;QACf,gCAAgC;;;;;QAEhC,wCAAwC;;;;;MAExC;IAEM,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;;IAQvB,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAeP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}
+{"version":3,"file":"ds-pagedots.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-pagedots.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAQvE,gFAAgF;AAChF,MAAM,WAAW,oBAAoB;IACnC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;MAOf;IAEF,MAAM,CAAC,MAAM,4BAAgE;IAErE,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,OAAO,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IAEzB,8EAA8E;IAC9E,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA8B;;IAUtD,kEAAkE;IAClE,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,yCAAyC;IACzC,IAAI,OAAO,IAAI,MAAM,CAGpB;IAED,iBAAiB;IAWjB,oBAAoB;IAMpB,OAAO,CAAC,KAAK;IAKb,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKlD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAO/C,kGAAkG;IAClG,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAW9B,OAAO,CAAC,OAAO;IAYf,MAAM;CAmBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAC;KACzB;CACF"}

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

@@ -1,36 +1,142 @@
+// ds-pagedots.ts
+// A dot for each slide or page, one square each: the ones passed, the current
+// one, the next and the rest, and an optional end marker. Pressing a dot or
+// moving with the arrow keys, Home and End fires `select`. Drawn by
+// 1-root/carousel.css, the same classes a page without scripts writes.
 import { LitElement, html, unsafeCSS } from "lit";
+import { getText } from "../0-face/i18n";
+import { define } from "../0-face/define";
+import { dotForKey, dotState } from "../0-face/carousel";
+import metrics from "../1-root/component-metrics.css?inline";
+import carousel from "../1-root/carousel.css?inline";
 import styles from "./styles/ds-pagedots.css?inline";
 /**
- * Page dots indicator component for carousels and pagination.
+ * @element ds-pagedots
+ * @prop {number} count - How many dots. Three by default.
+ * @prop {number} active - The current dot, from 0.
+ * @prop {boolean} end - Draw the last dot as an end marker (a ring in the
+ *   text colour) unless it is current: a way on to something else.
+ * @prop {string} label - The group's name: a translation key, or literal
+ *   words. The shared word "Slides" by default.
+ * @prop {string} dotLabel - Each dot's name, with `{index}` for its number
+ *   from 1: the shared words' "Slide {index}" by default.
+ * @prop {boolean} literal - Show `label` and `dotLabel` as written, never looked up.
  *
- * Usage:
- * - <ds-pagedots count="3" active="0"></ds-pagedots>
+ * @fires select - A person picked a dot, by a click or a key. `detail` is
+ *   `{ index, previous }`. Cancelable: unless it is cancelled, the dot becomes
+ *   current.
+ *
+ * The element is a group of buttons. Only the current dot is in the tab
+ * order; the arrow keys (following the reading direction), Home and End move
+ * to the others and pick them.
+ *
+ * @example
+ * <ds-pagedots count="5" active="1"></ds-pagedots>
  */
 export class Pagedots extends LitElement {
     constructor() {
         super();
+        /** The role this element last set, so a role the page wrote is left alone. */
+        this.ownRole = null;
+        this.focusAfterUpdate = false;
+        this.relabel = () => this.requestUpdate();
         this.count = 3;
         this.active = 0;
+        this.end = false;
+        this.literal = false;
+    }
+    /** The number of dots drawn: a whole number, never below zero. */
+    get dots() {
+        return Number.isFinite(this.count) ? Math.max(0, Math.floor(this.count)) : 0;
+    }
+    /** The current dot, inside the count. */
+    get current() {
+        const active = Number.isFinite(this.active) ? Math.floor(this.active) : 0;
+        return Math.max(0, Math.min(this.dots - 1, active));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("language-changed", this.relabel);
+        window.addEventListener("translations-loaded", this.relabel);
+        const role = this.getAttribute("role");
+        if (role === null || role === this.ownRole) {
+            this.ownRole = "group";
+            this.setAttribute("role", "group");
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener("language-changed", this.relabel);
+        window.removeEventListener("translations-loaded", this.relabel);
+        super.disconnectedCallback();
+    }
+    words(value, fallback, params) {
+        const text = value && this.literal ? value : getText(value || fallback, params) || value || fallback;
+        return params ? text.replace(/\{\{?(\w+)\}?\}/g, (whole, name) => (name in params ? String(params[name]) : whole)) : text;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.hasAttribute("aria-labelledby"))
+            this.setAttribute("aria-label", this.words(this.label, "Slides"));
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (!this.focusAfterUpdate)
+            return;
+        this.focusAfterUpdate = false;
+        this.renderRoot.querySelector('[aria-current="true"]')?.focus();
+    }
+    /** Pick a dot as a person would: fires `select` and, unless it is cancelled, makes it current. */
+    select(index) {
+        if (this.dots === 0)
+            return false;
+        const target = Math.max(0, Math.min(this.dots - 1, Math.floor(index)));
+        const event = new CustomEvent("select", {
+            bubbles: true, composed: true, cancelable: true, detail: { index: target, previous: this.current },
+        });
+        if (!this.dispatchEvent(event))
+            return false;
+        this.active = target;
+        return true;
+    }
+    keydown(event, index) {
+        const to = dotForKey(event.key, index, this.dots, getComputedStyle(this).direction === "rtl");
+        if (to === undefined)
+            return;
+        event.preventDefault();
+        if (this.select(to)) {
+            this.focusAfterUpdate = true;
+            return;
+        }
+        // A cancelled pick leaves the current dot as it is; focus still follows the key.
+        this.renderRoot.querySelectorAll(".ds-pagedots__dot")[to]?.focus();
     }
     render() {
-        const dots = Array.from({ length: this.count }, (_, i) => i);
-        return html `
-      ${dots.map((index) => html `
-          <span
-            class="dot ${index === this.active ? "active" : ""}"
-            role="button"
-            aria-label="Slide ${index + 1}"
-            aria-current="${index === this.active ? "true" : "false"}"
-          ></span>
-        `)}
-    `;
+        const current = this.current;
+        return html `<div class="ds-pagedots" part="dots">
+      ${Array.from({ length: this.dots }, (_, index) => {
+            const state = dotState(index, current, this.dots, this.end);
+            return html `<button
+          class="ds-pagedots__dot"
+          part="dot"
+          type="button"
+          data-state=${state}
+          aria-label=${this.words(this.dotLabel, "Slide {index}", { index: index + 1 })}
+          aria-current=${state === "current" ? "true" : "false"}
+          tabindex=${state === "current" ? 0 : -1}
+          @click=${() => this.select(index)}
+          @keydown=${(event) => this.keydown(event, index)}
+        ></button>`;
+        })}
+    </div>`;
     }
 }
 Pagedots.properties = {
-    /** Number of dots to display */
     count: { type: Number, reflect: true },
-    /** Index of the active dot (0-based) */
     active: { type: Number, reflect: true },
+    end: { type: Boolean, reflect: true },
+    label: { type: String },
+    dotLabel: { type: String, attribute: "dot-label" },
+    literal: { type: Boolean, reflect: true },
 };
-Pagedots.styles = unsafeCSS(styles);
-customElements.define("ds-pagedots", Pagedots);
+Pagedots.styles = [unsafeCSS(metrics), unsafeCSS(carousel), unsafeCSS(styles)];
+define("ds-pagedots", Pagedots);