@xoong/controls 0.0.39 → 0.0.42

package/src/inline-edit.js

@@ -0,0 +1,99 @@
+// @ts-check
+/**
+ * <xo-inline-edit> is a piece of text (a title, a name) that the person can rename in place.
+ *
+ *   <xo-inline-edit name="title" value="Greece Golden Visa" label="Rename"></xo-inline-edit>
+ *
+ * - At rest it draws `.xo-inline-edit` with the text and a ghost icon button (a pencil) named by `label` ("Rename" by default). A click on the
+ *   text or on the button starts editing: the text is replaced by an input (named by `label`), focused with everything selected.
+ * - Enter saves, Escape cancels, leaving the input (blur) saves. Focus goes back to the button after Enter and Escape.
+ *   An empty text cancels (the old value stays). The text is trimmed.
+ * - `value` is the string. When the person saves a changed text: `input`, `change` and `save` (detail `{ value }`) fire. `cancel` fires when
+ *   editing is abandoned (Escape, or an empty text). Saving an unchanged text just closes the editor with no event.
+ * - `edit()` starts editing from code. `disabled` and `readonly` hide the pencil's action: the text is shown and nothing can be edited.
+ */
+import { XoControl, define, text } from '@xoong/core';
+
+class XoInlineEdit extends XoControl {
+  static props = { ...XoControl.props, label: String };
+
+  /** @type {HTMLElement | null} */ #root = null;
+  /** @type {HTMLElement | null} */ #text = null;
+  /** @type {HTMLButtonElement | null} */ #button = null;
+  /** @type {HTMLInputElement | null} */ #input = null;
+
+  setValue(v) { super.setValue(v == null ? '' : String(v)); this.#paintText(); }
+  reset() { super.reset(); this.#paintText(); }
+  get focusTarget() { return this.#input ?? this.#button; }
+  /** True while the input is shown. */
+  get editing() { return !!this.#input; }
+
+  connected() {
+    const root = document.createElement('span');
+    root.className = 'xo-inline-edit';
+    const label = document.createElement('span');
+    label.className = 'xo-inline-edit__text';
+    label.addEventListener('click', () => this.edit());
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'ghost icon-only sm';
+    button.innerHTML = '<span class="ic" data-ic="edit" aria-hidden="true"></span>';
+    button.addEventListener('click', () => this.edit());
+    root.append(label, button);
+    this.#root = root; this.#text = label; this.#button = button;
+    this.replaceChildren(root);
+    queueMicrotask(() => this.#paintText());
+  }
+
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paintText(); }
+
+  /** Start editing: an input replaces the text, focused with the text selected. */
+  edit() {
+    const root = this.#root, label = this.#text, button = this.#button;
+    if (!root || !label || !button || this.#input || this.isDisabled || this.readonly) return;
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = String(super.value);
+    input.setAttribute('aria-label', this.label || text('xoong.inlineEdit.rename', 'Rename'));
+    input.addEventListener('input', (e) => e.stopPropagation());
+    input.addEventListener('change', (e) => e.stopPropagation());
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); this.#finish(true, true); }
+      else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); this.#finish(false, true); }
+    });
+    input.addEventListener('blur', () => this.#finish(true, false));
+    this.#input = input;
+    root.replaceChildren(input); // removed rather than hidden: a button's own display rule would beat [hidden]
+    input.focus();
+    input.select();
+  }
+
+  /** @param {boolean} save @param {boolean} refocus */
+  #finish(save, refocus) {
+    const input = this.#input, label = this.#text, button = this.#button;
+    if (!input || !label || !button) return;
+    this.#input = null; // first: removing the focused input may fire blur
+    const next = input.value.trim();
+    this.#root?.replaceChildren(label, button);
+    if (save && next !== '') {
+      if (next !== super.value) {
+        this.userInput(next);
+        this.userChange();
+        this.emit('save', { value: next });
+      }
+    } else this.emit('cancel', {});
+    this.#paintText();
+    if (refocus) button.focus();
+  }
+
+  #paintText() {
+    const label = this.#text, button = this.#button;
+    if (!label || !button) return;
+    label.textContent = String(super.value);
+    const name = this.label || text('xoong.inlineEdit.rename', 'Rename');
+    button.setAttribute('aria-label', name);
+    button.title = name;
+    button.disabled = this.isDisabled || this.readonly;
+  }
+}
+define('xo-inline-edit', XoInlineEdit);

package/src/layer.js

@@ -21,17 +21,23 @@ export function showLayer(panel, anchor, { matchWidth = false } = {}) {
   panel.hidden = false;
   const top = panel.hasAttribute('popover');
   if (top && !panel.matches(':popover-open')) panel.showPopover();
+  const MARGIN = 8;
   const place = () => {
     if (!top) return;
     const r = anchor.getBoundingClientRect();
-    const room = (globalThis.innerHeight || 768) - r.bottom;
-    const height = panel.getBoundingClientRect().height;
-    const flip = room < height + 8 && r.top > room; // not enough room below and more above: open upwards
-    Object.assign(panel.style, {
-      position: 'fixed', inset: 'auto', margin: '0', left: `${r.left}px`,
-      top: flip ? `${Math.max(4, r.top - height)}px` : `${r.bottom}px`,
-      ...(matchWidth ? { width: `${r.width}px`, boxSizing: 'border-box' } : {}),
-    });
+    const vw = globalThis.innerWidth || 1024;
+    const vh = globalThis.innerHeight || 768;
+    // measure at the natural size, then fit: first the side with room, then a height limit when neither side has enough
+    Object.assign(panel.style, { position: 'fixed', inset: 'auto', margin: '0', maxHeight: '', ...(matchWidth ? { width: `${r.width}px`, boxSizing: 'border-box' } : {}) });
+    const size = panel.getBoundingClientRect();
+    const below = vh - r.bottom - MARGIN;
+    const above = r.top - MARGIN;
+    const up = below < size.height && above > below; // not enough room below and more above: open upwards
+    const room = Math.max(up ? above : below, 80);
+    const height = Math.min(size.height, room);
+    if (size.height > room) panel.style.maxHeight = `${room}px`; // the panel scrolls (the lists already have overflow)
+    const left = Math.min(Math.max(r.left, MARGIN), Math.max(MARGIN, vw - size.width - MARGIN)); // keep it inside the viewport sideways
+    Object.assign(panel.style, { left: `${left}px`, top: up ? `${Math.max(MARGIN, r.top - height)}px` : `${r.bottom}px` });
   };
   place();
   if (!top) return () => {};

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/popover.js

@@ -0,0 +1,72 @@
+// @ts-check
+/**
+ * <xo-popover> is a small panel that opens from a button (notifications, a menu of settings, a mini form).
+ *
+ *   <div class="xo-notify">
+ *     <button aria-label="Notifications">...</button>
+ *     <xo-popover label="Notifications">...</xo-popover>
+ *   </div>
+ *
+ * - The trigger is the element named by `anchor` (a selector), or the element just before the popover. It gets `aria-expanded` and `aria-controls`.
+ * - A click on the trigger toggles it. Escape closes it and gives the focus back to the trigger; a click outside, or Tab out of the panel, closes it.
+ * - `open()`, `close()` and `toggle()`; the property/attribute `open`; `xo-popover-open` and `xo-popover-close` fire on the element.
+ * - The panel has the class `xo-popover` (the theme draws it) and `role="region"` named by `label`. With the Popover API it is drawn in the top layer under the
+ *   trigger and kept inside the viewport (flips up when there is more room above, scrolls when neither side has enough).
+ */
+import { XoElement, define } from '@xoong/core';
+import { prepareLayer, showLayer, hideLayer } from './layer.js';
+
+let counter = 0;
+
+class XoPopover extends XoElement {
+  static props = { anchor: String, label: String, open: Boolean };
+
+  #id = `xo-popover-${++counter}`;
+  /** @type {HTMLElement | null} */ #trigger = null;
+  #onClick = () => this.toggle();
+  #onDocument = (/** @type {Event} */ e) => { const t = /** @type {Node} */ (e.target); if (!this.contains(t) && !this.#trigger?.contains(t)) this.close(); };
+
+  connected() {
+    this.classList.add('xo-popover');
+    prepareLayer(this);
+    this.setAttribute('role', 'region');
+    if (!this.id) this.id = this.#id;
+    this.#trigger = this.anchor ? document.querySelector(this.anchor) : /** @type {HTMLElement | null} */ (this.previousElementSibling);
+    const t = this.#trigger;
+    if (t) { t.setAttribute('aria-controls', this.id); t.setAttribute('aria-haspopup', 'true'); t.addEventListener('click', this.#onClick); }
+    this.addEventListener('keydown', (e) => { if (e.key === 'Escape') { e.stopPropagation(); this.close(true); } });
+    this.addEventListener('focusout', (e) => { if (this.open && e.relatedTarget && !this.contains(/** @type {Node} */ (e.relatedTarget)) && e.relatedTarget !== this.#trigger) this.close(); });
+    this.#paint();
+  }
+  disconnected() { this.#trigger?.removeEventListener('click', this.#onClick); document.removeEventListener('pointerdown', this.#onDocument); this.#stop(); }
+  #stop = () => {};
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
+
+  /** Open it; the focus moves to the first focusable element of the panel. */
+  show() { this.setAttribute('open', ''); }
+  toggle() { this.open ? this.close() : this.show(); }
+  /** @param {boolean} [refocus] give the focus back to the trigger */
+  close(refocus = false) { if (!this.open) return; this.removeAttribute('open'); if (refocus) this.#trigger?.focus(); }
+
+  #paint() {
+    if (!this.isConnected) return;
+    if (this.label) this.setAttribute('aria-label', this.label); else this.removeAttribute('aria-label');
+    this.#trigger?.setAttribute('aria-expanded', String(this.open));
+    if (this.open === this.#wasOpen) return;
+    if (this.open) {
+      this.#stop();
+      this.#stop = showLayer(this, this.#trigger ?? this);
+      document.addEventListener('pointerdown', this.#onDocument);
+      this.dispatchEvent(new Event('xo-popover-open', { bubbles: true }));
+      /** @type {HTMLElement | null} */ (this.querySelector('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])'))?.focus();
+    } else {
+      this.#stop();
+      hideLayer(this);
+      document.removeEventListener('pointerdown', this.#onDocument);
+      this.dispatchEvent(new Event('xo-popover-close', { bubbles: true }));
+    }
+    this.#wasOpen = this.open;
+  }
+  #wasOpen = false;
+}
+define('xo-popover', XoPopover);

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');