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

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

@@ -19,8 +19,8 @@ export const EMPTY_HEADING = "Nothing here yet";
  *   stand with `literal`. Unset, the shared words' "Nothing here yet".
  * @prop {string} text - The line under it: 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 on the square above the title.
- * @prop {boolean} centered - Centre the words in the space the element stands in.
+ * @prop {string} icon - An icon from the library inline before the title.
+ * @prop {boolean} centered - Centre the words in the space the element stands in (the default).
  * @prop {number} level - Make the title a heading of this level (1–6).
  * @prop {string} tone - `done`: empty because everything is finished; the
  *   check (or `icon`) on a mark in the success green, the title in that green.
@@ -61,7 +61,7 @@ export class Empty extends LitElement {
   constructor() {
     super();
     this.literal = false;
-    this.centered = false;
+    this.centered = true;
   }
 
   connectedCallback() {
@@ -104,13 +104,15 @@ export class Empty extends LitElement {
     const hasActions = this.slotted("actions");
     const level = this.level && this.level >= 1 && this.level <= 6 ? Math.round(this.level) : undefined;
     const changed = () => this.requestUpdate();
-    return html`<div class="ds-empty${this.centered ? " ds-empty--centered" : ""}${done ? " ds-empty--done" : ""}" part="empty">
+    return html`<div class="ds-empty${this.centered ? " ds-empty--centered" : " ds-empty--start"}${done ? " ds-empty--done" : ""}" part="empty">
+      <div class="ds-empty__heading" part="heading">
       <div class="ds-empty__icon" part="icon" aria-hidden="true" ?hidden=${!hasIcon}>
         <slot name="icon" @slotchange=${changed}>${icon ? html`<ds-icon size=${done ? "small" : "large"} .type=${icon}></ds-icon>` : nothing}</slot>
       </div>
       <div class="ds-empty__title" part="title" role=${level ? "heading" : nothing} aria-level=${level ?? nothing}>
         <slot name="heading" @slotchange=${changed}>${heading}</slot>
       </div>
+      </div>
       <div class="ds-empty__text" part="text" ?hidden=${!hasText}><slot @slotchange=${changed}></slot>${slottedText ? nothing : text}</div>
       <div class="ds-empty__actions" part="actions" ?hidden=${!hasActions}><slot name="actions" @slotchange=${changed}></slot></div>
     </div>`;

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

@@ -12,6 +12,14 @@ import { getText, currentLanguage } from "../0-face/i18n";
 import "./ds-text";
 import styles from "./styles/ds-input.css?inline";
 
+/** The autofill a field's type implies when it names none of its own. */
+const TYPE_AUTOCOMPLETE: Partial<Record<string, string>> = {
+  email: "email",
+  tel: "tel",
+  url: "url",
+  password: "current-password",
+};
+
 export class Input extends LitElement {
   static formAssociated = true;
   private readonly focusFromLabel = (event: MouseEvent) => {
@@ -163,7 +171,7 @@ export class Input extends LitElement {
     this.readonly = false;
     this.required = false;
     this.autofocus = false;
-    this.autocomplete = "off";
+    this.autocomplete = "";
     this.pattern = "";
     this.minlength = 0;
     this.maxlength = -1;
@@ -353,6 +361,18 @@ export class Input extends LitElement {
     }
   }
 
+  /**
+   * What the browser may fill in. Without `autocomplete` an email, phone,
+   * web address or password field says what it holds (a sign-up's password
+   * sets "new-password"), and any other field is left to the browser, as a
+   * native input is; "off" still turns it off.
+   */
+  protected resolvedAutocomplete(): string | undefined {
+    if (this.autocomplete) return this.autocomplete;
+    if (this.multiline) return undefined;
+    return TYPE_AUTOCOMPLETE[this.type];
+  }
+
   protected accessibleLabel(): string | undefined {
     if (this.ariaLabel) return this.ariaLabel;
     const root = this.getRootNode() as Document | ShadowRoot;
@@ -552,7 +572,7 @@ export class Input extends LitElement {
       ?readonly=${this.readonly}
       ?required=${this.required}
       ?autofocus=${this.autofocus}
-      autocomplete=${this.autocomplete}
+      autocomplete=${ifDefined(this.resolvedAutocomplete())}
       minlength=${ifDefined(this.minlength || undefined)}
       maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}
       rows=${rows}
@@ -587,7 +607,7 @@ export class Input extends LitElement {
       ?readonly=${this.readonly}
       ?required=${this.required}
       ?autofocus=${this.autofocus}
-      autocomplete=${this.autocomplete}
+      autocomplete=${ifDefined(this.resolvedAutocomplete())}
       pattern=${ifDefined(this.pattern || undefined)}
       minlength=${ifDefined(this.minlength || undefined)}
       maxlength=${ifDefined(this.maxlength >= 0 ? this.maxlength : undefined)}

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

@@ -5,9 +5,11 @@
 // page leading to the site's iPhone app (0-face/app-banner.ts decides where).
 // Drawn by 1-root/notice.css, the same classes a page without scripts writes.
 
+import { reportFailure, type Failure } from "../0-face/failures";
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { getText } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-icon";
 import "./ds-toast";
 import type { ToastPosition } from "../0-face/toast-queue";
@@ -77,6 +79,7 @@ export interface MessageDismissDetail { tone: MessageTone }
  */
 export class Message extends LitElement {
   static properties = {
+    failure: { attribute: false },
     expand: { type: Boolean },
     visibleToasts: { type: Number, attribute: "visible-toasts" },
     richColors: { type: Boolean, attribute: "rich-colors" },
@@ -103,6 +106,12 @@ export class Message extends LitElement {
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(controls), unsafeCSS(styles)];
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".ds-notice__title, .ds-notice__text" });
+
+  /** Authored diagnostic for a real failure; never derived from slotted user content. */
+  declare failure: Failure | undefined;
+  private reportedFailure = "";
 
   declare expand: boolean;
   declare visibleToasts: number;
@@ -180,6 +189,19 @@ export class Message extends LitElement {
     else if (changed.get("form") === "app") this.hidden = false;
   }
 
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (!this.failure || this.hidden || this.form === "toast" || this.form === "app") {
+      this.reportedFailure = "";
+      return;
+    }
+    const key = JSON.stringify(this.failure);
+    if (key !== this.reportedFailure) {
+      this.reportedFailure = key;
+      reportFailure(this.failure);
+    }
+  }
+
   private get app(): AppBannerOptions {
     return { appId: this.appId, appUrl: this.appUrl, open: this.open, key: this.remember };
   }

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

@@ -0,0 +1,349 @@
+// 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, type PropertyDeclarations, type PropertyValues } 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 {
+  static formAssociated = true;
+  static styles = unsafeCSS(styles);
+  static properties: PropertyDeclarations = {
+    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 },
+  };
+
+  declare value: number;
+  declare min: number | undefined;
+  declare max: number | undefined;
+  declare step: number;
+  declare bigStep: number | undefined;
+  declare places: number | undefined;
+  declare defaultValue: number | undefined;
+  declare label: string;
+  declare icon: string;
+  declare unit: string;
+  declare width: number;
+  declare dragMode: "lead" | "value";
+  declare name: string;
+  declare disabled: boolean;
+  declare readonly: boolean;
+  declare ariaLabel: string | null;
+  declare _text: string;
+  declare _editing: boolean;
+  declare _scrubbing: boolean;
+
+  private internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+  private drag: { id: number; at: number; from: number; moved: boolean; rest: number; vertical: boolean } | null = null;
+
+  constructor() {
+    super();
+    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(): number {
+    return this.places ?? stepPlaces(this.step || 1);
+  }
+
+  focus(options?: FocusOptions) {
+    this.input?.focus(options);
+  }
+
+  private get input(): HTMLInputElement | null {
+    return this.renderRoot.querySelector("input");
+  }
+
+  private get locked(): boolean {
+    return this.disabled || this.readonly;
+  }
+
+  /** Kept inside min and max, at the field's decimals. */
+  private clamp(value: number): number {
+    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. */
+  private stepped(from: number, steps: number, size: number): number {
+    return this.clamp(from + steps * (size || 1));
+  }
+
+  private emit(type: "input" | "change") {
+    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. */
+  private set(value: number, type: "input" | "change") {
+    const next = this.clamp(value);
+    if (next === this.value) return;
+    this.value = next;
+    this.emit(type);
+  }
+
+  private 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");
+  }
+
+  private onFocus = () => {
+    this._editing = true;
+    this._text = this.written;
+    void this.updateComplete.then(() => this.input?.select());
+  };
+
+  private onBlur = () => {
+    if (this._editing) this.commitText();
+  };
+
+  private onKeydown = (event: KeyboardEvent) => {
+    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());
+    }
+  };
+
+  private onText = (event: Event) => {
+    event.stopPropagation();
+    this._text = (event.target as HTMLInputElement).value;
+  };
+
+  /** Sideways from the lead, a step a pixel; up from the value (`drag="value"`), a step every three. */
+  private onLeadDown = (event: PointerEvent) => {
+    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 as HTMLElement).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 };
+  };
+
+  private onLeadMove = (event: PointerEvent) => {
+    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");
+  };
+
+  private onLeadUp = (event: PointerEvent) => {
+    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();
+  };
+
+  private onLeadCancel = (event: PointerEvent) => {
+    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");
+  };
+
+  private 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. */
+  private onWindowKey = (event: KeyboardEvent) => {
+    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");
+  };
+
+  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(): string {
+    return formatNumberValue(Number.isFinite(this.value) ? this.value : 0, this.decimals);
+  }
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("value") && typeof this.value === "string") this.value = Number(this.value);
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    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. */
+  private 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) => event.stopPropagation()}
+      />
+      ${this.unit ? html`<span class="unit" part="unit" aria-hidden="true">${this.unit}</span>` : nothing}
+    </span>`;
+  }
+}
+
+define("ds-number", NumberField);
+declare global { interface HTMLElementTagNameMap { "ds-number": NumberField } }

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

@@ -10,6 +10,7 @@
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } 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, type FigureFormat, type MeterAria } from "./figures";
@@ -124,6 +125,8 @@ export class Progress extends LitElement {
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(progress), unsafeCSS(styles)];
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".ds-progress__label" });
 
   declare value: number;
   declare min: number;

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

@@ -1,5 +1,6 @@
 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. */
@@ -11,6 +12,8 @@ export class Radio extends LitElement {
     label: { type: String },
   };
   static styles = unsafeCSS(styles);
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".label" });
   declare choice: boolean;
   declare compact: boolean;
   declare preview: boolean;

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

@@ -6,6 +6,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, type FigureFormat, type FigureOptions } from "./figures";
 import "./ds-icon";
 import metrics from "../1-root/component-metrics.css?inline";
@@ -63,6 +64,8 @@ export class Stat extends LitElement {
   };
 
   static styles = [unsafeCSS(metrics), unsafeCSS(figures), unsafeCSS(styles)];
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".ds-stat__figure" });
 
   declare label: string | undefined;
   declare value: number | undefined;

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

@@ -3,8 +3,12 @@ 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 {
+  static properties = { compact: { type: Boolean, reflect: true }, monochrome: { type: Boolean, reflect: true } };
+  declare compact: boolean;
+  declare monochrome: boolean;
+  constructor() { super(); this.compact = false; this.monochrome = false; }
   static styles = unsafeCSS(styles);
   focus(options?: FocusOptions) { this.querySelector<HTMLButtonElement>(":scope > button")?.focus(options); }
   render() { return html`<slot></slot>`; }

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

@@ -1,11 +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-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 {
   static styles = unsafeCSS(styles);
-  render() { return html`<span class="frame" part="frame"><slot></slot></span>`; }
+  /** Marks the words `data-cut="end"` while they are wider than the tag. */
+  protected readonly 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>`; }
 }
 define("ds-tag", Tag);
 declare global { interface HTMLElementTagNameMap { "ds-tag": Tag } }

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

@@ -1,6 +1,7 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { getText, currentLanguage } from "../0-face/i18n";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import styles from "./styles/ds-text.css?inline";
 
 /**
@@ -18,6 +19,10 @@ import styles from "./styles/ds-text.css?inline";
  * @prop {boolean} strong - The medium weight
  * @prop {boolean} wrap - Let the text run over several lines, each one square
  *
+ * Literal text that does not fit its width is cut and fades out over its last
+ * square, never an ellipsis: the element marks itself `data-cut="end"` while
+ * its words are wider than its box, and takes the mark off when they fit.
+ *
  * The four work alike for a translation key and for literal text. For a
  * heading, give the element `role="heading"` and `aria-level`.
  *
@@ -56,6 +61,8 @@ export class Text extends LitElement {
   declare _text: string;
   declare _currentLanguage: string;
   private _slotKey: string = "";
+  /** Marks the element cut while its literal words are wider than its box. */
+  protected readonly cuts = new CutFades(this, { targets: () => (this.literal && !this.wrap ? [this] : []), text: true });
   private boundHandlers: { languageChanged: EventListener };
 
   constructor() {

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

@@ -1,5 +1,6 @@
 import { LitElement, html, unsafeCSS } from "lit";
 import { define } from "../0-face/define";
+import { CutFades } from "../0-face/cut-fade";
 import "./ds-button";
 import "./ds-icon";
 import styles from "./styles/ds-token.css?inline";
@@ -13,6 +14,8 @@ export class Token extends LitElement {
     disabled: { type: Boolean, reflect: true }, fieldDisabled: { state: true },
   };
   static styles = unsafeCSS(styles);
+  /** Words cut short fade over their last square, never an ellipsis: marks them `data-cut="end"` while they do not fit. */
+  protected readonly cuts = new CutFades(this, { selector: ".copy > span, small" });
   declare value: string; declare label: string; declare detail: string;
   declare removeLabel: string; declare disabled: boolean; declare fieldDisabled: boolean;
   private fieldsetDisabled = false;