@xoong/controls 0.0.41 → 0.0.43

package/src/otp.js

@@ -0,0 +1,152 @@
+// @ts-check
+/**
+ * <xo-otp> is a one-time code: one box per digit.
+ *
+ *   <xo-otp name="code" label="Verification code" length="6"></xo-otp>
+ *
+ * - It draws `.xo-otp[role=group]` with `length` (6 by default) `input[maxlength=1][inputmode=numeric]`. The group is named by `label`; each box is
+ *   named "Digit n"; the first box has `autocomplete="one-time-code"` so the browser and the phone offer the SMS code.
+ * - Digits only: anything else is dropped. Typing a digit moves to the next box; Backspace clears the box (or the one before when this one is empty)
+ *   and moves back; Delete clears the box; ArrowLeft/ArrowRight/Home/End move between boxes. Pasting (or an autofill that puts the whole code in one
+ *   box) splits the digits across the boxes.
+ * - `value` is the string of digits typed so far ("" when empty). A partly filled code is invalid ("Enter all 6 digits."); `required` rejects an empty one.
+ * - `complete` fires (bubbles, detail `{ value }`) when the person fills the last box. `input` fires on every edit; `change` fires when the code
+ *   is complete and when the focus leaves the group after an edit.
+ */
+import { XoControl, define, text } from '@xoong/core';
+
+const digitsOf = (/** @type {any} */ v) => String(v ?? '').replace(/\D/g, '');
+
+class XoOtp extends XoControl {
+  static props = { ...XoControl.props, label: String, length: Number };
+
+  /** @type {HTMLElement | null} */ #group = null;
+  /** @type {HTMLInputElement[]} */ #boxes = [];
+  /** @type {string[]} one entry per box, '' when empty (a gap is possible after Delete) */ #cells = [];
+  #own = false;
+  #pending = false;
+  get #len() { const n = Math.floor(this.length); return n >= 1 ? Math.min(n, 12) : 6; }
+
+  setValue(v) {
+    const d = digitsOf(v).slice(0, this.#len);
+    super.setValue(d);
+    if (!this.#own) this.#cells = Array.from({ length: this.#len }, (_, i) => d[i] ?? '');
+    this.#paint();
+  }
+  reset() { super.reset(); this.setValue(super.value); }
+  validate(v) { return v !== '' && String(v).length < this.#len ? text('xoong.otp.incomplete', 'Enter all {n} digits.', { n: this.#len }) : ''; }
+  get focusTarget() { return this.#boxes[Math.min(super.value.length, this.#boxes.length - 1)] ?? this.#boxes[0] ?? null; }
+
+  connected() {
+    this.#build();
+    this.addEventListener('focusout', (e) => { if (this.#pending && !this.contains(/** @type {Node | null} */ (e.relatedTarget))) { this.#pending = false; this.userChange(); } });
+    queueMicrotask(() => this.setValue(super.value));
+  }
+
+  #build() {
+    const group = document.createElement('div');
+    group.className = 'xo-otp';
+    group.setAttribute('role', 'group');
+    this.#boxes = Array.from({ length: this.#len }, (_, i) => {
+      const box = document.createElement('input');
+      box.type = 'text';
+      box.maxLength = 1;
+      box.setAttribute('inputmode', 'numeric');
+      box.setAttribute('pattern', '[0-9]*');
+      box.autocomplete = i === 0 ? 'one-time-code' : 'off';
+      box.addEventListener('input', (e) => { e.stopPropagation(); this.#typed(i); });
+      box.addEventListener('change', (e) => e.stopPropagation());
+      box.addEventListener('keydown', (e) => this.#key(i, e));
+      box.addEventListener('paste', (e) => this.#paste(i, e));
+      box.addEventListener('focus', () => box.select());
+      return box;
+    });
+    group.append(...this.#boxes);
+    this.#group = group;
+    this.replaceChildren(group);
+    this.#cells = Array.from({ length: this.#len }, (_, i) => super.value[i] ?? '');
+  }
+
+  attributeChangedCallback(attr, old, value) {
+    super.attributeChangedCallback(attr, old, value);
+    if (attr === 'length' && this.#group && this.#boxes.length !== this.#len) { this.#build(); this.setValue(super.value); }
+    else this.#paint();
+  }
+
+  #focus(/** @type {number} */ i) {
+    const box = this.#boxes[Math.max(0, Math.min(i, this.#boxes.length - 1))];
+    box?.focus();
+    box?.select();
+  }
+
+  #typed(/** @type {number} */ i) {
+    const d = digitsOf(this.#boxes[i].value);
+    if (d.length > 1) { this.#fill(i, d); return; }
+    this.#cells[i] = d;
+    this.#boxes[i].value = d; // a letter is dropped
+    this.#commit();
+    if (d && i < this.#boxes.length - 1) this.#focus(i + 1);
+  }
+
+  #key(/** @type {number} */ i, /** @type {KeyboardEvent} */ e) {
+    const k = e.key;
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    if (k === 'Backspace') {
+      e.preventDefault();
+      if (this.isDisabled || this.readonly) return;
+      if (this.#cells[i]) { this.#cells[i] = ''; this.#commit(); this.#focus(i - 1); }
+      else if (i > 0) { this.#cells[i - 1] = ''; this.#commit(); this.#focus(i - 1); }
+    } else if (k === 'Delete') {
+      e.preventDefault();
+      if (!this.isDisabled && !this.readonly && this.#cells[i]) { this.#cells[i] = ''; this.#commit(); }
+    } else if (k === 'ArrowLeft') { e.preventDefault(); this.#focus(i - 1); }
+    else if (k === 'ArrowRight') { e.preventDefault(); this.#focus(i + 1); }
+    else if (k === 'Home') { e.preventDefault(); this.#focus(0); }
+    else if (k === 'End') { e.preventDefault(); this.#focus(this.#boxes.length - 1); }
+    else if (k.length === 1 && !/\d/.test(k)) e.preventDefault(); // letters and symbols do nothing
+  }
+
+  #paste(/** @type {number} */ i, /** @type {ClipboardEvent} */ e) {
+    e.preventDefault();
+    if (this.isDisabled || this.readonly) return;
+    const d = digitsOf(e.clipboardData?.getData('text'));
+    if (d) this.#fill(d.length >= this.#boxes.length ? 0 : i, d);
+  }
+
+  #fill(/** @type {number} */ start, /** @type {string} */ d) {
+    let n = 0;
+    for (; n < d.length && start + n < this.#boxes.length; n++) this.#cells[start + n] = d[n];
+    this.#paint();
+    this.#commit();
+    this.#focus(start + n);
+  }
+
+  #commit() {
+    if (this.isDisabled || this.readonly) { this.#paint(); return; }
+    const v = this.#cells.join('');
+    const before = super.value;
+    if (v === before) { this.#paint(); return; } // a letter that was dropped, or the same digit again
+    this.#own = true;
+    try { this.userInput(v); } finally { this.#own = false; }
+    this.#pending = true;
+    if (v.length === this.#boxes.length && before !== v) {
+      this.#pending = false;
+      this.userChange();
+      this.emit('complete', { value: v });
+    }
+  }
+
+  #paint() {
+    const g = this.#group;
+    if (!g) return;
+    g.setAttribute('aria-label', this.label || text('xoong.otp.label', 'Verification code'));
+    this.#boxes.forEach((box, i) => {
+      box.value = this.#cells[i] ?? '';
+      box.setAttribute('aria-label', text('xoong.otp.digit', 'Digit {n}', { n: i + 1 }));
+      box.disabled = this.isDisabled;
+      box.readOnly = this.readonly;
+      if (this.required) box.setAttribute('aria-required', 'true'); else box.removeAttribute('aria-required');
+    });
+  }
+}
+define('xo-otp', XoOtp);

package/src/progress.js

@@ -0,0 +1,98 @@
+// @ts-check
+/**
+ * <xo-progress> is a bar that shows how much is done; <xo-spinner> shows that something is happening and nobody knows for how long.
+ *
+ *   <xo-progress value="45" label="Upload"></xo-progress>
+ *   <xo-progress value="30" max="50" thin label="Characters used"></xo-progress>
+ *   <xo-progress label="Importing"></xo-progress>            <!-- no value: indeterminate -->
+ *   <xo-spinner label="Saving" size="md"></xo-spinner>
+ *
+ * - <xo-progress> draws `.xo-progress[role=progressbar] > i`, with `aria-valuemin="0"`, `aria-valuemax` (`max`, 100 by default) and `aria-valuenow`
+ *   (`value`, clamped between 0 and `max`). The bar's width is set through the CSS object model (strict CSP: no style attribute). `label` is its name.
+ *   Without a `value` attribute (or with `value` set to null) the bar is indeterminate: no `aria-valuenow`, `data-state="indeterminate"`, and the
+ *   bar shows a short fixed fill. `thin` is the 4px bar (`.xo-progress--thin`).
+ * - <xo-spinner> draws `.xo-spinner` (`size="md"` or `"lg"` for the larger ones) with `role=status` and the name `label` ("Loading" by default).
+ *   `label=""` makes it decorative (`aria-hidden`, no role) for a spinner that sits next to text that already says it. Reduced motion is handled by the CSS.
+ */
+import { XoElement, define, text, signal } from '@xoong/core';
+
+class XoProgress extends XoElement {
+  static props = { max: Number, label: String, thin: Boolean };
+  static get observedAttributes() { return [...super.observedAttributes, 'value']; }
+
+  #value = signal(/** @type {number | null} */ (null));
+  /** @type {HTMLElement | null} */ #bar = null;
+  /** @type {HTMLElement | null} */ #fill = null;
+
+  /** The amount done, or null when it is not known (indeterminate). */
+  get value() { return this.#value.value; }
+  set value(v) { this.#value.value = v == null || v === '' || Number.isNaN(Number(v)) ? null : Number(v); this.#paint(); }
+
+  connected() {
+    const bar = document.createElement('div');
+    bar.setAttribute('role', 'progressbar');
+    const fill = document.createElement('i');
+    bar.append(fill);
+    this.#bar = bar; this.#fill = fill;
+    this.replaceChildren(bar);
+    if (this.hasAttribute('value')) this.#value.value = this.#number(this.getAttribute('value'));
+    this.#paint();
+  }
+
+  #number(/** @type {string | null} */ raw) { return raw == null || raw.trim() === '' || Number.isNaN(Number(raw)) ? null : Number(raw); }
+
+  attributeChangedCallback(attr, old, value) {
+    super.attributeChangedCallback(attr, old, value);
+    if (attr === 'value') this.#value.value = this.#number(value);
+    this.#paint();
+  }
+
+  #paint() {
+    const bar = this.#bar, fill = this.#fill;
+    if (!bar || !fill) return;
+    const max = this.max > 0 ? this.max : 100;
+    const v = this.#value.peek();
+    bar.className = this.thin ? 'xo-progress xo-progress--thin' : 'xo-progress';
+    bar.setAttribute('aria-valuemin', '0');
+    bar.setAttribute('aria-valuemax', String(max));
+    bar.setAttribute('aria-label', this.label || text('xoong.progress.label', 'Progress'));
+    if (v === null) {
+      bar.removeAttribute('aria-valuenow');
+      this.dataset.state = 'indeterminate';
+      fill.style.width = '40%';
+    } else {
+      const now = Math.min(max, Math.max(0, v));
+      bar.setAttribute('aria-valuenow', String(now));
+      this.dataset.state = now >= max ? 'complete' : 'progress';
+      fill.style.width = `${(now / max) * 100}%`;
+    }
+  }
+}
+define('xo-progress', XoProgress);
+
+class XoSpinner extends XoElement {
+  static props = { label: String, size: String };
+
+  /** @type {HTMLElement | null} */ #dot = null;
+
+  connected() {
+    const dot = document.createElement('span');
+    this.#dot = dot;
+    this.replaceChildren(dot);
+    this.#paint();
+  }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
+
+  #paint() {
+    const dot = this.#dot;
+    if (!dot) return;
+    dot.className = 'xo-spinner' + (this.size === 'md' || this.size === 'lg' ? ` xo-spinner--${this.size}` : '');
+    if (this.hasAttribute('label') && this.label === '') {
+      dot.removeAttribute('role'); dot.removeAttribute('aria-label'); dot.setAttribute('aria-hidden', 'true');
+    } else {
+      dot.removeAttribute('aria-hidden'); dot.setAttribute('role', 'status');
+      dot.setAttribute('aria-label', this.label || text('xoong.spinner.label', 'Loading'));
+    }
+  }
+}
+define('xo-spinner', XoSpinner);

package/src/range-slider.js

@@ -0,0 +1,83 @@
+// @ts-check
+/**
+ * <xo-range-slider> picks a minimum and a maximum on one track: two native range inputs, the part between them filled.
+ *
+ *   <xo-range-slider name="price" label="Price" min="0" max="100" step="5" value="20,70" min-label="Minimum price" max-label="Maximum price"></xo-range-slider>
+ *
+ * - The value is `[min, max]` (numbers); the attribute is `value="20,70"`. The thumbs cannot cross: the one you move stops at the other.
+ * - Each input is named (`min-label`, `max-label`, default "Minimum" and "Maximum"); the group is named by `label`. Native keys work on each thumb.
+ * - `input` fires while dragging, `change` on release. The fill is placed through the CSS object model (no style attribute).
+ */
+import { XoControl, define, text } from '@xoong/core';
+
+const pair = (/** @type {any} */ v) => (Array.isArray(v) ? v : typeof v === 'string' && v.includes(',') ? v.split(',') : []).map(Number);
+
+class XoRangeSlider extends XoControl {
+  static props = { ...XoControl.props, label: String, min: Number, max: Number, step: Number, minLabel: String, maxLabel: String };
+
+  /** @type {HTMLInputElement[]} */ #inputs = [];
+  /** @type {HTMLElement | null} */ #fill = null;
+
+  get #lo() { return this.hasAttribute('min') ? this.min : 0; } // an absent Number prop reads as 0
+  get #hi() { return this.hasAttribute('max') ? this.max : 100; }
+  setValue(v) {
+    let [a, b] = pair(v);
+    if (Number.isNaN(a) || a === undefined) { a = this.#lo; b = this.#hi; }
+    if (Number.isNaN(b) || b === undefined) b = this.#hi;
+    a = Math.min(Math.max(a, this.#lo), this.#hi); b = Math.min(Math.max(b, this.#lo), this.#hi);
+    super.setValue(a <= b ? [a, b] : [b, a]);
+    this.#paint();
+  }
+  serialize(v) { return Array.isArray(v) ? v.join(',') : null; }
+  isEmpty() { return false; }
+  get focusTarget() { return this.#inputs[0] ?? null; }
+
+  connected() {
+    const box = document.createElement('div');
+    box.className = 'xo-range-dual';
+    box.setAttribute('role', 'group');
+    const track = document.createElement('div');
+    track.className = 'xo-range-dual__track';
+    const fill = document.createElement('div');
+    fill.className = 'xo-range-dual__fill';
+    track.append(fill);
+    box.append(track);
+    this.#fill = fill;
+    this.#inputs = [0, 1].map((i) => {
+      const input = document.createElement('input');
+      input.type = 'range'; input.className = 'xo-range';
+      input.addEventListener('input', (e) => { e.stopPropagation(); this.#move(i); });
+      input.addEventListener('change', (e) => { e.stopPropagation(); this.userChange(); });
+      box.append(input);
+      return input;
+    });
+    this.replaceChildren(box);
+    if (this.hasAttribute('value')) this.setValue(this.getAttribute('value'));
+    else if (!Array.isArray(super.value)) this.setValue('');
+    this.#paint();
+  }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); if (attr === 'value' && this.#inputs.length) this.setValue(value); else this.#paint(); }
+
+  #move(/** @type {number} */ i) {
+    const [a, b] = this.#inputs.map((x) => Number(x.value));
+    this.userInput(i === 0 ? [Math.min(a, b), b] : [a, Math.max(a, b)]);
+    this.#paint();
+  }
+
+  #paint() {
+    if (!this.#inputs.length) return;
+    const v = super.value;
+    const [a, b] = Array.isArray(v) ? v : [this.#lo, this.#hi];
+    const span = this.#hi - this.#lo || 1;
+    this.#inputs.forEach((x, i) => {
+      x.min = String(this.#lo); x.max = String(this.#hi); x.step = String(this.step || 1);
+      x.value = String(i ? b : a);
+      x.disabled = this.isDisabled || this.readonly;
+      x.setAttribute('aria-label', (i ? this.maxLabel : this.minLabel) || (i ? text('xoong.controls.maximum', 'Maximum') : text('xoong.controls.minimum', 'Minimum')));
+      x.style.pointerEvents = 'none'; // the thumbs take the pointer (the CSS gives it back to them), the track under them does not
+    });
+    /** @type {HTMLElement} */ (this.firstElementChild).setAttribute('aria-label', this.label || this.name || text('xoong.controls.range', 'Range'));
+    if (this.#fill) { this.#fill.style.left = `${((a - this.#lo) / span) * 100}%`; this.#fill.style.right = `${100 - ((b - this.#lo) / span) * 100}%`; }
+  }
+}
+define('xo-range-slider', XoRangeSlider);

package/src/segmented.js

@@ -0,0 +1,73 @@
+// @ts-check
+/**
+ * <xo-segmented> is a group of buttons where one is chosen (a view switch, a filter, a billing period).
+ *
+ *   <xo-segmented name="period" label="Billing" value="month">
+ *     <button value="month">Monthly</button><button value="year">Yearly <span class="xo-count">-20%</span></button>
+ *   </xo-segmented>
+ *
+ * - The children are the segments (their `value`, text and icons are kept). The value is the chosen segment's `value`; with `multiple` it is an array
+ *   and each segment toggles on its own. Draws `.xo-seg[role=group]` with `aria-pressed` on every button.
+ * - Arrow keys move the focus between segments (Home/End too, wrapping off); Space or Enter chooses. `change` fires when the choice changes.
+ * - `clearable` lets a click on the chosen segment unchoose it (value '').
+ */
+import { XoControl, define } from '@xoong/core';
+
+class XoSegmented extends XoControl {
+  static props = { ...XoControl.props, label: String, multiple: Boolean, clearable: Boolean };
+
+  /** @type {HTMLButtonElement[]} */ #buttons = [];
+
+  setValue(v) { super.setValue(this.multiple ? (Array.isArray(v) ? v.map(String) : v ? String(v).split(',') : []) : Array.isArray(v) ? String(v[0] ?? '') : v == null ? '' : String(v)); this.#paint(); }
+  serialize(v) { return Array.isArray(v) ? (v.length ? v.join(',') : null) : super.serialize(v); }
+  get focusTarget() { return this.#buttons.find((b) => b.tabIndex === 0) ?? this.#buttons[0] ?? null; }
+
+  connected() { void this.ready().then(() => this.#build()); } // the segments are the children
+
+  #build() {
+    if (this.#buttons.length) return;
+    const group = document.createElement('div');
+    group.className = 'xo-seg';
+    group.setAttribute('role', 'group');
+    if (this.label) group.setAttribute('aria-label', this.label);
+    this.#buttons = [...this.children].filter((c) => c instanceof HTMLButtonElement).map((b) => {
+      const btn = /** @type {HTMLButtonElement} */ (b);
+      btn.type = 'button';
+      btn.addEventListener('click', () => this.#pick(btn.value));
+      btn.addEventListener('keydown', (e) => this.#key(e, btn));
+      group.append(btn);
+      return btn;
+    });
+    this.replaceChildren(group);
+    if (!this.multiple && super.value === '' && this.hasAttribute('value')) this.setValue(this.getAttribute('value'));
+    else if (this.multiple && this.hasAttribute('value') && !(super.value ?? []).length) this.setValue(this.getAttribute('value'));
+    this.#paint();
+  }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); if (attr === 'value' && this.#buttons.length) this.setValue(value); }
+
+  #pick(/** @type {string} */ v) {
+    if (this.isDisabled || this.readonly) return;
+    const now = super.value;
+    const next = this.multiple ? (now.includes(v) ? now.filter((x) => x !== v) : [...now, v]) : now === v ? (this.clearable ? '' : v) : v;
+    if (JSON.stringify(next) === JSON.stringify(now)) return;
+    this.userInput(next);
+    this.userChange();
+    this.#paint();
+  }
+  #key(/** @type {KeyboardEvent} */ e, /** @type {HTMLButtonElement} */ btn) {
+    const i = this.#buttons.indexOf(btn), n = this.#buttons.length;
+    const to = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: n - 1 }[e.key];
+    if (to === undefined) return;
+    e.preventDefault();
+    const next = this.#buttons[Math.min(n - 1, Math.max(0, to))];
+    next.focus();
+    this.#buttons.forEach((b) => { b.tabIndex = b === next ? 0 : -1; });
+  }
+  #paint() {
+    const v = super.value;
+    const on = (/** @type {string} */ x) => (Array.isArray(v) ? v.includes(x) : v === x);
+    const current = this.#buttons.find((b) => on(b.value)) ?? this.#buttons[0];
+    for (const b of this.#buttons) { b.setAttribute('aria-pressed', String(on(b.value))); b.disabled = this.isDisabled; b.tabIndex = b === current ? 0 : -1; }
+  }
+}
+define('xo-segmented', XoSegmented);

package/src/slider.js

@@ -26,6 +26,7 @@ class XoSlider extends XoControl {
     input.addEventListener('change', (e) => { e.stopPropagation(); this.userChange(); });
     this.#input = input;
     this.replaceChildren(input);
+    if (this.hasAttribute('value')) this.setValue(this.getAttribute('value')); // the base class would keep the attribute text: a number control holds a number
     queueMicrotask(() => this.#paint());
   }
   attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
@@ -33,7 +34,7 @@ class XoSlider extends XoControl {
   #paint() {
     const i = this.#input;
     if (!i) return;
-    const min = this.min ?? 0, max = this.max ?? 100;
+    const min = this.hasAttribute('min') ? this.min : 0, max = this.hasAttribute('max') ? this.max : 100; // an absent Number prop reads as 0
     i.min = String(min); i.max = String(max); i.step = String(this.step || 1);
     i.disabled = this.isDisabled || this.readonly;
     i.setAttribute('aria-label', this.label || this.name || 'Value');

package/src/split-button.js

@@ -0,0 +1,42 @@
+// @ts-check
+/**
+ * <xo-split-button> is a main action with a menu of related actions next to it.
+ *
+ *   <xo-split-button more="More publish options">
+ *     <button class="primary" xo-click="POST /articles/{id}/publish">Publish</button>
+ *     <button xo-click="POST /articles/{id}/schedule">Schedule</button>
+ *     <a href="/articles/{id}/preview">Preview</a>
+ *   </xo-split-button>
+ *
+ * - The first child is the main button. The others become the items of an <xo-menu> opened by the arrow button, which is named by `more`
+ *   (default "More options") and has `aria-haspopup="menu"`. The arrow keys open the menu from the arrow button (the menu's own keys).
+ * - Draws `.xo-split-button > main button + xo-menu > button.icon-only[xo-menu-trigger] + items`. A `primary` class on the main button is carried over to the arrow.
+ */
+import { XoElement, define, text } from '@xoong/core';
+
+class XoSplitButton extends XoElement {
+  static props = { more: String };
+
+  connected() { void this.ready().then(() => this.#build()); } // the buttons are the children
+
+  #build() {
+    if (this.querySelector(':scope > .xo-split-button')) return;
+    const [main, ...items] = [...this.children].filter((c) => c instanceof HTMLElement);
+    if (!main) return;
+    const wrap = document.createElement('div');
+    wrap.className = 'xo-split-button';
+    const arrow = document.createElement('button');
+    arrow.type = 'button';
+    arrow.className = `${main.classList.contains('primary') ? 'primary ' : ''}icon-only`;
+    arrow.setAttribute('xo-menu-trigger', '');
+    arrow.setAttribute('aria-haspopup', 'menu');
+    arrow.setAttribute('aria-label', this.more || text('xoong.controls.moreOptions', 'More options'));
+    arrow.innerHTML = '<span class="ic" data-ic="chevron-down" aria-hidden="true"></span>';
+    const menu = document.createElement('xo-menu');
+    menu.setAttribute('label', arrow.getAttribute('aria-label') ?? '');
+    menu.append(arrow, ...items);
+    wrap.append(main, menu);
+    this.replaceChildren(wrap);
+  }
+}
+define('xo-split-button', XoSplitButton);

package/src/stat.js

@@ -0,0 +1,58 @@
+// @ts-check
+/**
+ * <xo-stat> is a KPI tile: a label, a big value, a change against before, and a sparkline from a series.
+ *
+ *   <xo-stat label="Visits" value="48,210" delta="12.4" delta-label="vs last week" series="20,22,18,26,24,32,29"></xo-stat>
+ *
+ * - `delta` is a number: positive shows an up arrow, negative a down arrow (the sign and the arrow carry the meaning, not only the colour);
+ *   `trend="down-is-good"` swaps which direction counts as good (costs, errors). `delta-label` is the text after it.
+ * - `series` (comma-separated numbers, or `el.seriesData = [...]`) draws the sparkline; it is decoration (`aria-hidden`), the numbers are in the text.
+ * - Draws `.xo-kpi > .xo-kpi__label + .xo-kpi__value + .xo-kpi__delta + svg.xo-kpi__spark`.
+ */
+import { XoElement, define, text } from '@xoong/core';
+
+const NS = 'http://www.w3.org/2000/svg';
+
+class XoStat extends XoElement {
+  static props = { label: String, value: String, delta: Number, deltaLabel: String, series: String, trend: String };
+
+  #list = /** @type {number[] | null} */ (null);
+  #built = false;
+  get seriesData() { return this.#list ?? (this.series ?? '').split(',').map((s) => s.trim()).filter(Boolean).map(Number).filter((n) => !Number.isNaN(n)); }
+  set seriesData(v) { this.#list = Array.isArray(v) ? v.map(Number) : null; if (this.#built) this.#draw(); }
+
+  connected() { this.#built = true; this.#draw(); }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); if (this.#built) this.#draw(); }
+
+  #draw() {
+    this.classList.add('xo-kpi');
+    const parts = [];
+    const span = (/** @type {string} */ cls, /** @type {string} */ t) => { const s = document.createElement('span'); s.className = cls; s.textContent = t; return s; };
+    parts.push(span('xo-kpi__label', this.label ?? ''), span('xo-kpi__value', this.value ?? ''));
+    if (this.hasAttribute('delta') && !Number.isNaN(this.delta)) {
+      const d = this.delta;
+      const el = span('xo-kpi__delta', '');
+      const good = this.trend === 'down-is-good' ? d <= 0 : d >= 0;
+      el.dataset.good = String(good);
+      el.dataset.direction = d > 0 ? 'up' : d < 0 ? 'down' : 'flat';
+      const icon = document.createElement('span');
+      icon.className = 'ic'; icon.dataset.ic = d >= 0 ? 'arrow-up' : 'arrow-down'; icon.setAttribute('aria-hidden', 'true');
+      const sign = d > 0 ? '+' : d < 0 ? '−' : '';
+      el.append(icon, `${sign}${Math.abs(d)}%${this.deltaLabel ? ` ${this.deltaLabel}` : ''}`);
+      el.setAttribute('aria-label', (good ? text('xoong.stat.better', '{change} better', { change: `${sign}${Math.abs(d)}%` }) : text('xoong.stat.worse', '{change} worse', { change: `${sign}${Math.abs(d)}%` })) + (this.deltaLabel ? ` ${this.deltaLabel}` : ''));
+      parts.push(el);
+    }
+    const data = this.seriesData;
+    if (data.length > 1) {
+      const lo = Math.min(...data), hi = Math.max(...data), r = hi - lo || 1;
+      const svg = document.createElementNS(NS, 'svg');
+      svg.setAttribute('class', 'xo-kpi__spark'); svg.setAttribute('viewBox', '0 0 100 32'); svg.setAttribute('preserveAspectRatio', 'none'); svg.setAttribute('aria-hidden', 'true');
+      const path = document.createElementNS(NS, 'path');
+      path.setAttribute('d', data.map((v, i) => `${i ? 'L' : 'M'}${((i / (data.length - 1)) * 100).toFixed(1)} ${(30 - ((v - lo) / r) * 28).toFixed(1)}`).join(' '));
+      svg.append(path);
+      parts.push(svg);
+    }
+    this.replaceChildren(...parts);
+  }
+}
+define('xo-stat', XoStat);

package/src/stepper.js

@@ -18,7 +18,9 @@ class XoStepper extends XoControl {
 
   setValue(v) { const n = Number(v); super.setValue(v === '' || v == null || Number.isNaN(n) ? '' : this.#clamp(n)); this.#paint(); }
   get focusTarget() { return this.#input; }
-  #clamp(/** @type {number} */ n) { return Math.min(this.max ?? Infinity, Math.max(this.min ?? -Infinity, n)); }
+  get #min() { return this.hasAttribute('min') ? /** @type {number} */ (this.min) : -Infinity; } // an absent Number prop reads as 0, so the attribute decides
+  get #max() { return this.hasAttribute('max') ? /** @type {number} */ (this.max) : Infinity; }
+  #clamp(/** @type {number} */ n) { return Math.min(this.#max, Math.max(this.#min, n)); }
   get #step() { return this.step || 1; }
 
   connected() {
@@ -42,19 +44,20 @@ class XoStepper extends XoControl {
       if (k === 'Enter') { this.#commit(); return; }
       const by = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 }[k];
       if (by) { e.preventDefault(); this.#move(by); }
-      else if ((k === 'Home' && this.min != null) || (k === 'End' && this.max != null)) { e.preventDefault(); this.#set(k === 'Home' ? /** @type {number} */ (this.min) : /** @type {number} */ (this.max)); }
+      else if ((k === 'Home' && this.hasAttribute('min')) || (k === 'End' && this.hasAttribute('max'))) { e.preventDefault(); this.#set(k === 'Home' ? /** @type {number} */ (this.min) : /** @type {number} */ (this.max)); }
     });
     this.#input = input;
     this.#buttons = [button(-1, text('xoong.controls.decrease', 'Decrease'), 'minus'), button(1, text('xoong.controls.increase', 'Increase'), 'plus')];
     wrap.append(this.#buttons[0], input, this.#buttons[1]);
     this.replaceChildren(wrap);
+    if (this.hasAttribute('value')) this.setValue(this.getAttribute('value')); // the base class would keep the attribute text: a number control holds a number
     queueMicrotask(() => this.#paint());
   }
   attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
 
   #move(/** @type {number} */ steps) {
     if (this.isDisabled || this.readonly) return;
-    const now = super.value === '' ? (this.min ?? 0) - (steps > 0 ? this.#step : 0) : super.value;
+    const now = super.value === '' ? (this.hasAttribute('min') ? /** @type {number} */ (this.min) : 0) - (steps > 0 ? this.#step : 0) : super.value;
     this.#set(now + steps * this.#step);
   }
   #set(/** @type {number} */ n) {
@@ -75,11 +78,11 @@ class XoStepper extends XoControl {
     const v = super.value;
     i.value = v === '' ? '' : String(v);
     i.setAttribute('aria-label', this.label || this.name || 'Number');
-    for (const [a, val] of [['aria-valuemin', this.min], ['aria-valuemax', this.max], ['aria-valuenow', v === '' ? undefined : v]]) { if (val == null) i.removeAttribute(/** @type {string} */ (a)); else i.setAttribute(/** @type {string} */ (a), String(val)); }
+    for (const [a, val] of [['aria-valuemin', this.hasAttribute('min') ? this.min : undefined], ['aria-valuemax', this.hasAttribute('max') ? this.max : undefined], ['aria-valuenow', v === '' ? undefined : v]]) { if (val == null) i.removeAttribute(/** @type {string} */ (a)); else i.setAttribute(/** @type {string} */ (a), String(val)); }
     const off = this.isDisabled || this.readonly;
     i.disabled = off;
-    this.#buttons[0].disabled = off || (v !== '' && this.min != null && v <= this.min);
-    this.#buttons[1].disabled = off || (v !== '' && this.max != null && v >= this.max);
+    this.#buttons[0].disabled = off || (v !== '' && this.hasAttribute('min') && v <= /** @type {number} */ (this.min));
+    this.#buttons[1].disabled = off || (v !== '' && this.hasAttribute('max') && v >= /** @type {number} */ (this.max));
   }
 }
 define('xo-stepper', XoStepper);

package/src/steps.js

@@ -0,0 +1,73 @@
+// @ts-check
+/**
+ * <xo-steps> shows where the person is in a flow of a few steps.
+ *
+ *   <xo-steps current="1"><span>Account</span><span>Plan</span><span>Done</span></xo-steps>
+ *   <xo-steps current="0"><ol><li>Choose</li><li>Details</li><li>Insert</li></ol></xo-steps>
+ *
+ * - The children are the data: each `li`, `[data-step]` or (when there are none of those) each child element is one step and its text is the title.
+ *   The element replaces them with `.xo-steps > .xo-step(--done) + .xo-steps__line(--done) + ...`.
+ * - `current` is the zero-based index of the step being worked on (0 by default). Steps before it are done: a check mark in the circle (named
+ *   "Completed"), never colour alone, and the line before the current step is filled. The current step has `aria-current="step"`, its circle is
+ *   marked (`is-current`) and its title is bold. A `current` equal to the number of steps (or more) marks everything done; no step is current.
+ * - The container is a `role=list` of `role=listitem` steps. It is display only: nothing is clickable and there is no value.
+ */
+import { XoElement, define, text } from '@xoong/core';
+
+class XoSteps extends XoElement {
+  static props = { current: Number, label: String };
+
+  /** @type {string[] | null} */ #titles = null;
+  #built = false;
+
+  connected() { void this.ready().then(() => this.#read()); }
+
+  #read() {
+    if (this.#built || !this.isConnected) return;
+    this.#built = true;
+    let items = [...this.querySelectorAll('li,[data-step]')];
+    if (!items.length) items = [...this.children];
+    this.#titles = items.map((el) => (el.textContent ?? '').replace(/\s+/g, ' ').trim()).filter(Boolean);
+    this.#paint();
+  }
+
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
+
+  #paint() {
+    const titles = this.#titles;
+    if (!titles) return;
+    const current = Math.floor(this.current) || 0;
+    const root = document.createElement('div');
+    root.className = 'xo-steps';
+    root.setAttribute('role', 'list');
+    if (this.label) root.setAttribute('aria-label', this.label);
+    titles.forEach((title, i) => {
+      const done = i < current;
+      const here = i === current;
+      if (i > 0) {
+        const line = document.createElement('span');
+        line.className = 'xo-steps__line' + (i <= current ? ' xo-steps__line--done' : '');
+        line.setAttribute('aria-hidden', 'true');
+        root.append(line);
+      }
+      const step = document.createElement('span');
+      step.className = 'xo-step' + (done ? ' xo-step--done' : '');
+      step.setAttribute('role', 'listitem');
+      if (here) step.setAttribute('aria-current', 'step');
+      const n = document.createElement('span');
+      n.className = 'xo-step__n' + (here ? ' is-current' : '');
+      if (done) {
+        n.setAttribute('role', 'img');
+        n.setAttribute('aria-label', text('xoong.steps.done', 'Completed'));
+        n.innerHTML = '<span class="ic" data-ic="check" aria-hidden="true"></span>';
+      } else n.textContent = String(i + 1);
+      const name = document.createElement(here ? 'b' : 'span');
+      if (!done && !here) name.className = 'muted';
+      name.textContent = title;
+      step.append(n, name);
+      root.append(step);
+    });
+    this.replaceChildren(root);
+  }
+}
+define('xo-steps', XoSteps);