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

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

@@ -0,0 +1,86 @@
+import { LitElement, type PropertyDeclarations, type PropertyValues } from "lit";
+import "./ds-icon";
+/**
+ * A number a person sets by hand, in the inspector's way: the value on the field's fill, one control
+ * high on the sixteen and a whole number of squares wide (`width`, four by default). Its lead, a short
+ * `label` or an `icon` in the title grey, is the handle: dragging it sideways scrubs the value a `step`
+ * a pixel (Shift: `big-step`), and a double-click puts back `default`. The arrows step it, Shift by the
+ * big step. What is typed is read as arithmetic (`10 + 5`, `(3 − 1) × 4`), and an operator first works
+ * on the value already there (`*2`, `/2`, `+10`); Enter takes it, Escape puts the value back.
+ *
+ * `input` fires as a drag moves the value and `change` when a value is taken (the drag's end, Enter,
+ * leaving the field, an arrow). `value` is a number; the field takes part in its form under `name`.
+ *
+ * `drag="value"` makes the whole field the handle, as a music program's tempo is: press the value and
+ * drag up to raise it, a step every three pixels (Shift: the big step); a press without a drag types.
+ */
+export declare class NumberField extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    value: number;
+    min: number | undefined;
+    max: number | undefined;
+    step: number;
+    bigStep: number | undefined;
+    places: number | undefined;
+    defaultValue: number | undefined;
+    label: string;
+    icon: string;
+    unit: string;
+    width: number;
+    dragMode: "lead" | "value";
+    name: string;
+    disabled: boolean;
+    readonly: boolean;
+    ariaLabel: string | null;
+    _text: string;
+    _editing: boolean;
+    _scrubbing: boolean;
+    private internals;
+    private drag;
+    constructor();
+    /** The decimals the field keeps: `places`, or as many as `step` has. */
+    get decimals(): number;
+    focus(options?: FocusOptions): void;
+    private get input();
+    private get locked();
+    /** Kept inside min and max, at the field's decimals. */
+    private clamp;
+    /** Steps from a value, exactly: 1.03 a step of 0.05 up is 1.08, as typed values keep their own figures. */
+    private stepped;
+    private emit;
+    /** Sets the value as a person did: `input` while it is still moving, `change` once it is taken. */
+    private set;
+    private commitText;
+    private onFocus;
+    private onBlur;
+    private onKeydown;
+    private onText;
+    /** Sideways from the lead, a step a pixel; up from the value (`drag="value"`), a step every three. */
+    private onLeadDown;
+    private onLeadMove;
+    private onLeadUp;
+    private onLeadCancel;
+    private onLeadDouble;
+    /** Escape during a drag puts the value back where the drag began. */
+    private onWindowKey;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The value as the field writes it. */
+    get written(): string;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** A value outside `min` or `max` (one never set by hand, such as a starting 0 above a min) keeps its form from being sent. */
+    private validate;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-number": NumberField;
+    }
+}
+//# sourceMappingURL=ds-number.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-number.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-number.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAA4B,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI3G,OAAO,WAAW,CAAC;AAQnB;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,cAAc,UAAQ;IAC7B,MAAM,CAAC,MAAM,0BAAqB;IAClC,MAAM,CAAC,UAAU,EAAE,oBAAoB,CAoBrC;IAEM,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,SAAS,CAA8E;IAC/F,OAAO,CAAC,IAAI,CAA0G;;IAmBtH,wEAAwE;IACxE,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,wDAAwD;IACxD,OAAO,CAAC,KAAK;IAQb,2GAA2G;IAC3G,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,IAAI;IAIZ,mGAAmG;IACnG,OAAO,CAAC,GAAG;IAOX,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,OAAO,CAIb;IAEF,OAAO,CAAC,MAAM,CAEZ;IAEF,OAAO,CAAC,SAAS,CAoBf;IAEF,OAAO,CAAC,MAAM,CAGZ;IAEF,sGAAsG;IACtG,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,UAAU,CAehB;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,qEAAqE;IACrE,OAAO,CAAC,WAAW,CAMjB;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,wCAAwC;IACxC,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAIlD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM/C,+HAA+H;IAC/H,OAAO,CAAC,QAAQ;IAShB,aAAa;IAIb,cAAc;IAId,iBAAiB;IAKjB,MAAM;CAmDP;AAGD,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,WAAW,EAAE,WAAW,CAAA;KAAE;CAAE"}

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

@@ -0,0 +1,326 @@
+// ds-number.ts
+// Number field: a value one control high, scrubbed by its lead, stepped by the arrows, typed as arithmetic.
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { live } from "lit/directives/live.js";
+import { define } from "../0-face/define";
+import { formatNumberValue, readNumberExpression, stepPlaces } from "./number-expression";
+import "./ds-icon";
+import styles from "./styles/ds-number.css?inline";
+/** How far the pointer moves before a press becomes a drag. */
+const DRAG_THRESHOLD = 3;
+/** With `drag="value"`, the pixels of upward travel a step takes, as a music program's tempo drags. */
+const VALUE_PIXELS = 3;
+/**
+ * A number a person sets by hand, in the inspector's way: the value on the field's fill, one control
+ * high on the sixteen and a whole number of squares wide (`width`, four by default). Its lead, a short
+ * `label` or an `icon` in the title grey, is the handle: dragging it sideways scrubs the value a `step`
+ * a pixel (Shift: `big-step`), and a double-click puts back `default`. The arrows step it, Shift by the
+ * big step. What is typed is read as arithmetic (`10 + 5`, `(3 − 1) × 4`), and an operator first works
+ * on the value already there (`*2`, `/2`, `+10`); Enter takes it, Escape puts the value back.
+ *
+ * `input` fires as a drag moves the value and `change` when a value is taken (the drag's end, Enter,
+ * leaving the field, an arrow). `value` is a number; the field takes part in its form under `name`.
+ *
+ * `drag="value"` makes the whole field the handle, as a music program's tempo is: press the value and
+ * drag up to raise it, a step every three pixels (Shift: the big step); a press without a drag types.
+ */
+export class NumberField extends LitElement {
+    constructor() {
+        super();
+        this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+        this.drag = null;
+        this.onFocus = () => {
+            this._editing = true;
+            this._text = this.written;
+            void this.updateComplete.then(() => this.input?.select());
+        };
+        this.onBlur = () => {
+            if (this._editing)
+                this.commitText();
+        };
+        this.onKeydown = (event) => {
+            if (this.locked)
+                return;
+            if (event.key === "Enter") {
+                event.preventDefault();
+                this.commitText();
+                this._editing = true;
+                this._text = this.written;
+                void this.updateComplete.then(() => this.input?.select());
+            }
+            else if (event.key === "Escape") {
+                event.preventDefault();
+                this._editing = false;
+                this.input?.blur();
+            }
+            else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                const from = readNumberExpression(this._text, this.value) ?? this.value;
+                const size = event.shiftKey ? (this.bigStep ?? this.step * 10) : this.step;
+                this.set(this.stepped(from, event.key === "ArrowUp" ? 1 : -1, size), "change");
+                this._text = this.written;
+                void this.updateComplete.then(() => this.input?.select());
+            }
+        };
+        this.onText = (event) => {
+            event.stopPropagation();
+            this._text = event.target.value;
+        };
+        /** Sideways from the lead, a step a pixel; up from the value (`drag="value"`), a step every three. */
+        this.onLeadDown = (event) => {
+            if (this.locked || event.button !== 0 || this.drag)
+                return;
+            const vertical = this.dragMode === "value";
+            // With the value as the handle, a press on a field already being typed in places the caret.
+            if (vertical && this._editing)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            if (this._editing)
+                this.commitText();
+            this.drag = { id: event.pointerId, at: vertical ? -event.clientY : event.clientX, from: this.value, moved: false, rest: 0, vertical };
+        };
+        this.onLeadMove = (event) => {
+            const drag = this.drag;
+            if (!drag || drag.id !== event.pointerId)
+                return;
+            const at = drag.vertical ? -event.clientY : event.clientX;
+            if (!drag.moved && Math.abs(at - drag.at) < DRAG_THRESHOLD)
+                return;
+            if (!drag.moved) {
+                drag.moved = true;
+                this._scrubbing = true;
+            }
+            const size = event.shiftKey ? (this.bigStep ?? this.step * 10) : this.step;
+            const travel = (at - drag.at) / (drag.vertical ? VALUE_PIXELS : 1) + drag.rest;
+            const steps = Math.trunc(travel);
+            drag.rest = travel - steps;
+            drag.at = at;
+            if (steps)
+                this.set(this.stepped(this.value, steps, size), "input");
+        };
+        this.onLeadUp = (event) => {
+            const drag = this.drag;
+            if (!drag || drag.id !== event.pointerId)
+                return;
+            this.drag = null;
+            this._scrubbing = false;
+            if (drag.moved && this.value !== drag.from)
+                this.emit("change");
+            else if (!drag.moved)
+                this.focus();
+        };
+        this.onLeadCancel = (event) => {
+            const drag = this.drag;
+            if (!drag || drag.id !== event.pointerId)
+                return;
+            this.drag = null;
+            this._scrubbing = false;
+            if (this.value !== drag.from)
+                this.set(drag.from, "input");
+        };
+        this.onLeadDouble = () => {
+            if (this.locked || this.defaultValue === undefined)
+                return;
+            // A double-click on the value began as a press that started typing: leave the typing first.
+            if (this._editing) {
+                this._editing = false;
+                this.input?.blur();
+            }
+            if (this.value !== this.clamp(this.defaultValue))
+                this.set(this.defaultValue, "change");
+        };
+        /** Escape during a drag puts the value back where the drag began. */
+        this.onWindowKey = (event) => {
+            if (event.key !== "Escape" || !this.drag)
+                return;
+            const from = this.drag.from;
+            this.drag = null;
+            this._scrubbing = false;
+            if (this.value !== from)
+                this.set(from, "input");
+        };
+        this.value = 0;
+        this.step = 1;
+        this.label = "";
+        this.icon = "";
+        this.unit = "";
+        this.width = 4;
+        this.dragMode = "lead";
+        this.name = "";
+        this.disabled = false;
+        this.readonly = false;
+        this._text = "";
+        this._editing = false;
+        this._scrubbing = false;
+    }
+    /** The decimals the field keeps: `places`, or as many as `step` has. */
+    get decimals() {
+        return this.places ?? stepPlaces(this.step || 1);
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    get input() {
+        return this.renderRoot.querySelector("input");
+    }
+    get locked() {
+        return this.disabled || this.readonly;
+    }
+    /** Kept inside min and max, at the field's decimals. */
+    clamp(value) {
+        let next = value;
+        if (this.min !== undefined && next < this.min)
+            next = this.min;
+        if (this.max !== undefined && next > this.max)
+            next = this.max;
+        const factor = 10 ** this.decimals;
+        return Math.round(next * factor) / factor;
+    }
+    /** Steps from a value, exactly: 1.03 a step of 0.05 up is 1.08, as typed values keep their own figures. */
+    stepped(from, steps, size) {
+        return this.clamp(from + steps * (size || 1));
+    }
+    emit(type) {
+        this.dispatchEvent(new Event(type, { bubbles: true, composed: true }));
+    }
+    /** Sets the value as a person did: `input` while it is still moving, `change` once it is taken. */
+    set(value, type) {
+        const next = this.clamp(value);
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.emit(type);
+    }
+    commitText() {
+        const read = readNumberExpression(this._text, this.value);
+        this._editing = false;
+        if (read === null)
+            return this.requestUpdate();
+        const before = this.value;
+        this.value = this.clamp(read);
+        if (this.value !== before)
+            this.emit("change");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener("keydown", this.onWindowKey);
+    }
+    disconnectedCallback() {
+        window.removeEventListener("keydown", this.onWindowKey);
+        super.disconnectedCallback();
+    }
+    /** The value as the field writes it. */
+    get written() {
+        return formatNumberValue(Number.isFinite(this.value) ? this.value : 0, this.decimals);
+    }
+    willUpdate(changed) {
+        if (changed.has("value") && typeof this.value === "string")
+            this.value = Number(this.value);
+    }
+    updated(changed) {
+        if (changed.has("width"))
+            this.style.setProperty("--ds-number-squares", String(Math.max(1, Math.round(this.width || 4))));
+        if (changed.has("value") || changed.has("disabled"))
+            this.internals?.setFormValue(this.disabled ? null : String(this.value));
+        this.validate();
+    }
+    /** A value outside `min` or `max` (one never set by hand, such as a starting 0 above a min) keeps its form from being sent. */
+    validate() {
+        if (!this.internals?.setValidity)
+            return;
+        const low = this.min !== undefined && this.value < this.min;
+        const high = this.max !== undefined && this.value > this.max;
+        const message = low ? `At least ${formatNumberValue(this.min, this.decimals)}` : high ? `At most ${formatNumberValue(this.max, this.decimals)}` : "";
+        if (low || high)
+            this.internals.setValidity({ rangeUnderflow: low, rangeOverflow: high }, message, this.input ?? undefined);
+        else
+            this.internals.setValidity({});
+    }
+    checkValidity() {
+        return this.internals?.checkValidity() ?? true;
+    }
+    reportValidity() {
+        return this.internals?.reportValidity() ?? true;
+    }
+    formResetCallback() {
+        const initial = Number(this.getAttribute("value") ?? 0);
+        this.value = Number.isFinite(initial) ? initial : 0;
+    }
+    render() {
+        const lead = this.icon
+            ? html `<ds-icon type=${this.icon} size="large"></ds-icon>`
+            : this.label ? html `<span class="lead__words">${this.label}</span>` : nothing;
+        const valueText = this.unit ? `${this.written} ${this.unit}` : this.written;
+        const handle = this.dragMode === "value";
+        return html `<span
+      class=${this._scrubbing ? "face scrubbing" : "face"}
+      part="face"
+      @pointerdown=${handle ? this.onLeadDown : nothing}
+      @pointermove=${handle ? this.onLeadMove : nothing}
+      @pointerup=${handle ? this.onLeadUp : nothing}
+      @pointercancel=${handle ? this.onLeadCancel : nothing}
+      @lostpointercapture=${handle ? this.onLeadCancel : nothing}
+      @dblclick=${handle ? this.onLeadDouble : nothing}
+    >
+      ${lead === nothing ? nothing : html `<span
+        class="lead"
+        part="lead"
+        aria-hidden="true"
+        @pointerdown=${handle ? nothing : this.onLeadDown}
+        @pointermove=${handle ? nothing : this.onLeadMove}
+        @pointerup=${handle ? nothing : this.onLeadUp}
+        @pointercancel=${handle ? nothing : this.onLeadCancel}
+        @lostpointercapture=${handle ? nothing : this.onLeadCancel}
+        @dblclick=${handle ? nothing : this.onLeadDouble}
+      >${lead}</span>`}
+      <input
+        part="input"
+        type="text"
+        inputmode="decimal"
+        autocomplete="off"
+        spellcheck="false"
+        role="spinbutton"
+        aria-label=${this.ariaLabel || this.label || nothing}
+        aria-valuenow=${this.value}
+        aria-valuemin=${this.min ?? nothing}
+        aria-valuemax=${this.max ?? nothing}
+        aria-valuetext=${valueText}
+        .value=${live(this._editing ? this._text : this.written)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        @keydown=${this.onKeydown}
+        @input=${this.onText}
+        @change=${(event) => event.stopPropagation()}
+      />
+      ${this.unit ? html `<span class="unit" part="unit" aria-hidden="true">${this.unit}</span>` : nothing}
+    </span>`;
+    }
+}
+NumberField.formAssociated = true;
+NumberField.styles = unsafeCSS(styles);
+NumberField.properties = {
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    bigStep: { type: Number, attribute: "big-step" },
+    places: { type: Number },
+    defaultValue: { type: Number, attribute: "default" },
+    label: { type: String },
+    icon: { type: String },
+    unit: { type: String },
+    width: { type: Number, reflect: true },
+    dragMode: { type: String, attribute: "drag", reflect: true },
+    name: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    readonly: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" },
+    _text: { state: true },
+    _editing: { state: true },
+    _scrubbing: { state: true },
+};
+define("ds-number", NumberField);

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

@@ -1,4 +1,5 @@
 import { LitElement, type PropertyValues } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import { type FigureFormat, type MeterAria } from "./figures";
 import "./ds-icon";
 /** Where a step stands: before the current one, the current one, after it, or stopped. */
@@ -138,6 +139,8 @@ export declare class Progress extends LitElement {
         };
     };
     static styles: import("lit").CSSResult[];
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
     value: number;
     min: number;
     max: number;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-progress.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-progress.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ds-progress.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-progress.ts"],"names":[],"mappings":"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"}

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

@@ -9,6 +9,7 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import { formatNumber } from "../0-face/format";
 import { dotForKey, dotState } from "../0-face/carousel";
 import { figureFormat, meterAria } from "./figures";
@@ -81,6 +82,8 @@ export function stepStates(steps, current) {
 export class Progress extends LitElement {
     constructor() {
         super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".ds-progress__label" });
         /** The role this element last set, so a role the page wrote is left alone. */
         this.ownRole = null;
         this.focusAfterUpdate = false;

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

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 /** Native radios keep their group, keyboard, labels and form. DS1 owns the face. */
 export declare class Radio extends LitElement {
     static properties: {
@@ -19,6 +20,8 @@ export declare class Radio extends LitElement {
         };
     };
     static styles: import("lit").CSSResult;
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
     choice: boolean;
     compact: boolean;
     preview: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ds-radio.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,oFAAoF;AACpF,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;;IAEtB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,KAAK,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-radio.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C,oFAAoF;AACpF,qBAAa,KAAM,SAAQ,UAAU;IACnC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IACF,MAAM,CAAC,MAAM,0BAAqB;IAClC,yHAAyH;IACzH,SAAS,CAAC,QAAQ,CAAC,IAAI,WAA8C;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;;IAEtB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAC5B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,KAAK,CAAA;KAAE;CAAE"}

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

@@ -1,9 +1,18 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import styles from "./styles/ds-radio.css?inline";
 /** Native radios keep their group, keyboard, labels and form. DS1 owns the face. */
 export class Radio extends LitElement {
-    constructor() { super(); this.choice = false; this.compact = false; this.preview = false; this.label = ""; }
+    constructor() {
+        super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".label" });
+        this.choice = false;
+        this.compact = false;
+        this.preview = false;
+        this.label = "";
+    }
     focus(options) { this.querySelector(":scope > input")?.focus(options); }
     render() {
         return html `<slot></slot>${this.choice ? html `<span class="face" aria-hidden="true">${this.preview ? html `<span class="preview"><slot name="preview"></slot></span>` : null}<span class="label">${this.label}</span></span>` : null}`;

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

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { CutFades } from "../0-face/cut-fade";
 import { type FigureFormat } from "./figures";
 import "./ds-icon";
 export type StatTone = "danger" | "warning";
@@ -88,6 +89,8 @@ export declare class Stat extends LitElement {
         };
     };
     static styles: import("lit").CSSResult[];
+    /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+    protected readonly cuts: CutFades;
     label: string | undefined;
     value: number | undefined;
     figure: string | undefined;

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

@@ -1 +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"}
+{"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,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,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;IAC5E,yHAAyH;IACzH,SAAS,CAAC,QAAQ,CAAC,IAAI,WAAwD;IAEvE,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

@@ -5,6 +5,7 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import { figureCells, figureFormat, formatFigure } from "./figures";
 import "./ds-icon";
 import metrics from "../1-root/component-metrics.css?inline";
@@ -41,6 +42,8 @@ const TONES = ["danger", "warning"];
 export class Stat extends LitElement {
     constructor() {
         super();
+        /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+        this.cuts = new CutFades(this, { selector: ".ds-stat__figure" });
         this.relabel = () => this.requestUpdate();
         this.format = "number";
         this.minor = false;

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

@@ -1,7 +1,20 @@
 import { LitElement } from "lit";
 /** The switch: a pill with a white round thumb, grey when off and the darker green when on,
-    whatever the page's accent. The slotted button retains native activation and refs. */
+    whatever the page's accent. Compact and monochrome are opt-in control-panel variants. The slotted button retains native activation and refs. */
 export declare class Switch extends LitElement {
+    static properties: {
+        compact: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        monochrome: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    compact: boolean;
+    monochrome: boolean;
+    constructor();
     static styles: import("lit").CSSResult;
     focus(options?: FocusOptions): void;
     render(): import("lit").TemplateResult<1>;

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;yFACyF;AACzF,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;mJACmJ;AACnJ,qBAAa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;MAA+F;IACxG,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;;IAE5B,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,10 +2,12 @@ import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
 import styles from "./styles/ds-switch.css?inline";
 /** The switch: a pill with a white round thumb, grey when off and the darker green when on,
-    whatever the page's accent. The slotted button retains native activation and refs. */
+    whatever the page's accent. Compact and monochrome are opt-in control-panel variants. The slotted button retains native activation and refs. */
 export class Switch extends LitElement {
+    constructor() { super(); this.compact = false; this.monochrome = false; }
     focus(options) { this.querySelector(":scope > button")?.focus(options); }
     render() { return html `<slot></slot>`; }
 }
+Switch.properties = { compact: { type: Boolean, reflect: true }, monochrome: { type: Boolean, reflect: true } };
 Switch.styles = unsafeCSS(styles);
 define("ds-switch", Switch);

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

@@ -1,7 +1,14 @@
 import { LitElement } from "lit";
-/** A noninteractive label whose width follows its words, without grid rounding. */
+import { CutFades } from "../0-face/cut-fade";
+/**
+ * A noninteractive label whose width follows its words, without grid rounding.
+ * Words that do not fit fade out over their last square, never an ellipsis,
+ * while the fill stays whole.
+ */
 export declare class Tag extends LitElement {
     static styles: import("lit").CSSResult;
+    /** Marks the words `data-cut="end"` while they are wider than the tag. */
+    protected readonly cuts: CutFades;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-tag.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,mFAAmF;AACnF,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,MAAM,0BAAqB;IAClC,MAAM;CACP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,QAAQ,EAAE,GAAG,CAAA;KAAE;CAAE"}
+{"version":3,"file":"ds-tag.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;;;GAIG;AACH,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,MAAM,0BAAqB;IAClC,0EAA0E;IAC1E,SAAS,CAAC,QAAQ,CAAC,IAAI,WAA0D;IACjF,MAAM;CACP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,QAAQ,EAAE,GAAG,CAAA;KAAE;CAAE"}

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

@@ -1,9 +1,19 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import styles from "./styles/ds-tag.css?inline";
-/** A noninteractive label whose width follows its words, without grid rounding. */
+/**
+ * A noninteractive label whose width follows its words, without grid rounding.
+ * Words that do not fit fade out over their last square, never an ellipsis,
+ * while the fill stays whole.
+ */
 export class Tag extends LitElement {
-    render() { return html `<span class="frame" part="frame"><slot></slot></span>`; }
+    constructor() {
+        super(...arguments);
+        /** Marks the words `data-cut="end"` while they are wider than the tag. */
+        this.cuts = new CutFades(this, { selector: ".words", text: true });
+    }
+    render() { return html `<span class="frame" part="frame"><span class="words"><slot @slotchange=${() => this.cuts.measure()}></slot></span></span>`; }
 }
 Tag.styles = unsafeCSS(styles);
 define("ds-tag", Tag);