@xoong/controls 0.0.0-stage → 0.0.34

package/src/date.js

@@ -0,0 +1,254 @@
+// @ts-check
+/**
+ * <xo-date> is a date field with a calendar popover; `range` picks a start and an end.
+ *
+ *   <xo-date name="publishedAt" label="Publish on" min="2026-01-01" max="2026-12-31"></xo-date>
+ *   <xo-date name="stay" label="Stay" range></xo-date>
+ *
+ * - The value is ISO `YYYY-MM-DD` (a range: `{ start, end }`); the field shows the date in the user's locale (`Intl`) and also accepts typing
+ *   (the locale order, or ISO). The calendar is the picker: a click on a day chooses it.
+ * - Enter or ArrowDown opens. In the calendar: arrows move by day and week, PageUp/PageDown by month, Home/End to the start/end of the week,
+ *   Escape closes and returns the focus to the field. Shift+arrow extends a range.
+ * - The calendar is a `role=dialog` named "Choose date"; days are buttons (`aria-pressed` when chosen, `aria-current=date` for today), days
+ *   outside `min`/`max` are disabled. A range shows its length in a polite live region with Clear and Apply.
+ * - `week-start` (1 = Monday ... 7 = Sunday) defaults to the locale's first day of the week. `change` fires when the person chooses.
+ */
+import { XoControl, define, text } from '@xoong/core';
+import { prepareLayer, showLayer, hideLayer } from './layer.js';
+
+let counter = 0;
+const pad = (n) => String(n).padStart(2, '0');
+const iso = (/** @type {Date} */ d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+const day = (/** @type {string} */ s) => { const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s ?? ''); if (!m) return null; const d = new Date(+m[1], +m[2] - 1, +m[3], 12); return iso(d) === s ? d : null; };
+const add = (/** @type {Date} */ d, /** @type {number} */ days) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + days, 12);
+const months = (/** @type {Date} */ d, /** @type {number} */ n) => { const t = new Date(d.getFullYear(), d.getMonth() + n, 1, 12); t.setDate(Math.min(d.getDate(), new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate())); return t; };
+const empty = { start: '', end: '' };
+
+class XoDate extends XoControl {
+  static props = { ...XoControl.props, label: String, min: String, max: String, range: Boolean, placeholder: String, weekStart: Number };
+
+  /** @type {HTMLInputElement | null} */ #input = null;
+  /** @type {HTMLButtonElement | null} */ #opener = null;
+  /** @type {HTMLElement | null} */ #panel = null;
+  #open = false;
+  #id = `xo-date-${++counter}`;
+  #cursor = new Date();
+  /** @type {string} */ #pending = ''; // a range start chosen, waiting for its end
+  #draft = { ...empty }; // a range being picked, applied with Apply
+  #stop = () => {};
+  #onDocument = (/** @type {Event} */ e) => { if (!this.contains(/** @type {Node} */ (e.target))) this.#close(false); };
+
+  setValue(v) { super.setValue(this.#clean(v)); this.#showText(); }
+  #clean(v) {
+    if (this.range) { const o = v && typeof v === 'object' ? v : {}; return { start: day(o.start) ? o.start : '', end: day(o.end) ? o.end : '' }; }
+    return day(v) ? v : '';
+  }
+  serialize(v) { return this.range ? (v.start ? JSON.stringify(v) : null) : v || null; }
+  isEmpty(v) { return this.range ? !v?.start : !v; }
+  get focusTarget() { return this.#input; }
+  validate(v) {
+    const [lo, hi] = [this.min, this.max];
+    for (const d of this.range ? [v.start, v.end] : [v]) { if (d && ((lo && d < lo) || (hi && d > hi))) return text('xoong.controls.dateRange', 'Choose a date within the allowed range.'); }
+    return '';
+  }
+
+  connected() {
+    const wrap = document.createElement('div');
+    wrap.className = 'xo-input-wrap xo-input-wrap--end';
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.autocomplete = 'off';
+    input.setAttribute('aria-label', this.label || this.name || text('xoong.controls.date', 'Date'));
+    input.setAttribute('aria-haspopup', 'dialog');
+    input.setAttribute('aria-expanded', 'false');
+    input.placeholder = this.placeholder || (this.range ? text('xoong.controls.dateRangeHint', 'Start - end') : this.#sample());
+    const opener = document.createElement('button');
+    opener.type = 'button';
+    opener.className = 'xo-date-open';
+    opener.setAttribute('aria-label', text('xoong.controls.chooseDate', 'Choose date'));
+    opener.innerHTML = '<span class="ic" data-ic="calendar" aria-hidden="true"></span>';
+    opener.addEventListener('click', () => (this.#open ? this.#close(true) : this.#openCalendar()));
+    wrap.append(input, opener);
+    const panel = document.createElement('div');
+    panel.className = 'xo-float xo-date-panel';
+    panel.id = `${this.#id}-panel`;
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-label', text('xoong.controls.chooseDate', 'Choose date'));
+    prepareLayer(panel);
+    panel.addEventListener('keydown', (e) => this.#panelKey(e));
+    this.replaceChildren(wrap, panel);
+    this.#input = input; this.#opener = opener; this.#panel = panel;
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowDown' || (e.key === 'Enter' && !this.#open && !input.value.trim())) { e.preventDefault(); this.#openCalendar(); }
+      else if (e.key === 'Enter') this.#commitText();
+      else if (e.key === 'Escape' && this.#open) { e.stopPropagation(); this.#close(true); }
+    });
+    input.addEventListener('change', () => this.#commitText());
+    queueMicrotask(() => this.#showText()); // the base class applies a `value` attribute after connected()
+    this.#sync2();
+  }
+  disconnected() { document.removeEventListener('pointerdown', this.#onDocument); this.#stop(); }
+
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#sync2(); }
+  #sync2() { if (this.#input) { this.#input.disabled = this.isDisabled; this.#input.readOnly = this.readonly; if (this.#opener) this.#opener.disabled = this.isDisabled || this.readonly; } }
+
+  // ---- text <-> value ------------------------------------------------------------------------------------------------------
+
+  get #locale() { return this.closest('[lang]')?.getAttribute('lang') || document.documentElement.lang || undefined; }
+  #fmt(/** @type {string} */ s) { const d = day(s); return d ? new Intl.DateTimeFormat(this.#locale, { day: '2-digit', month: '2-digit', year: 'numeric' }).format(d) : ''; }
+  #sample() { return this.#fmt('2026-11-25') || 'YYYY-MM-DD'; }
+  #showText() {
+    if (!this.#input) return;
+    const v = super.value;
+    this.#input.value = this.range ? (v?.start ? `${this.#fmt(v.start)} - ${v.end ? this.#fmt(v.end) : ''}` : '') : this.#fmt(v);
+  }
+  /** Read a typed date: ISO, or numbers in the locale's day/month/year order. */
+  #parse(/** @type {string} */ s) {
+    s = s.trim();
+    if (day(s)) return s;
+    const n = s.match(/\d+/g);
+    if (!n || n.length !== 3) return '';
+    const order = new Intl.DateTimeFormat(this.#locale).formatToParts(new Date(2026, 10, 25)).filter((p) => p.type === 'day' || p.type === 'month' || p.type === 'year').map((p) => p.type);
+    const f = Object.fromEntries(order.map((k, i) => [k, +n[i]]));
+    if (f.year < 100) f.year += 2000;
+    const r = `${f.year}-${pad(f.month)}-${pad(f.day)}`;
+    return day(r) ? r : '';
+  }
+  #commitText() {
+    const raw = /** @type {HTMLInputElement} */ (this.#input).value.trim();
+    let v;
+    if (this.range) { const parts = raw.split(/\s+[-–—]\s+|\s*\/\s*/); const a = raw ? this.#parse(parts[0]) : ''; const b = parts[1] ? this.#parse(parts[1]) : ''; v = a ? (b && b < a ? { start: b, end: a } : { start: a, end: b }) : { ...empty }; }
+    else v = raw ? this.#parse(raw) : '';
+    if (raw && (this.range ? !v.start : !v)) { this.#showText(); return; } // not a date: keep what was chosen
+    this.#choose(v);
+  }
+  #choose(v) {
+    this.setValue(v);
+    this.userInput(super.value);
+    this.userChange();
+  }
+
+  // ---- calendar --------------------------------------------------------------------------------------------------------------
+
+  get #first() { return this.weekStart || (() => { try { return /** @type {any} */ (new Intl.Locale(this.#locale || navigator.language)).weekInfo?.firstDay ?? 1; } catch { return 1; } })(); }
+
+  #openCalendar() {
+    if (this.isDisabled || this.readonly || this.#open) return;
+    const v = super.value;
+    this.#draft = this.range ? { ...v } : { ...empty };
+    this.#pending = '';
+    this.#cursor = day(this.range ? v.start : v) ?? new Date();
+    this.#open = true;
+    this.#draw();
+    this.#stop = showLayer(/** @type {HTMLElement} */ (this.#panel), /** @type {HTMLElement} */ (this.#input).parentElement ?? this);
+    this.#input?.setAttribute('aria-expanded', 'true');
+    document.addEventListener('pointerdown', this.#onDocument);
+    this.#focusDay();
+  }
+  #close(refocus) {
+    if (!this.#open) return;
+    this.#open = false;
+    this.#stop();
+    hideLayer(/** @type {HTMLElement} */ (this.#panel));
+    this.#input?.setAttribute('aria-expanded', 'false');
+    document.removeEventListener('pointerdown', this.#onDocument);
+    if (refocus) this.#input?.focus();
+  }
+  #focusDay() { /** @type {HTMLElement | null} */ (this.#panel?.querySelector(`button[data-date="${iso(this.#cursor)}"]`))?.focus(); }
+
+  #out(/** @type {string} */ d) { return (!!this.min && d < this.min) || (!!this.max && d > this.max); }
+
+  #draw() {
+    const panel = /** @type {HTMLElement} */ (this.#panel);
+    const loc = this.#locale;
+    const y = this.#cursor.getFullYear(), m = this.#cursor.getMonth();
+    const head = document.createElement('div');
+    head.className = 'xo-date-head';
+    const nav = (/** @type {number} */ n, /** @type {string} */ label, /** @type {string} */ glyph) => {
+      const b = document.createElement('button');
+      b.type = 'button'; b.className = 'icon-only sm ghost'; b.setAttribute('aria-label', label); b.textContent = glyph;
+      b.addEventListener('click', () => { this.#cursor = months(this.#cursor, n); this.#draw(); this.#focusDay(); });
+      return b;
+    };
+    const title = document.createElement('b');
+    title.setAttribute('aria-live', 'polite');
+    title.textContent = new Intl.DateTimeFormat(loc, { month: 'long', year: 'numeric' }).format(new Date(y, m, 1, 12));
+    head.append(nav(-1, text('xoong.controls.prevMonth', 'Previous month'), '‹'), title, nav(1, text('xoong.controls.nextMonth', 'Next month'), '›'));
+
+    const grid = document.createElement('div');
+    grid.className = 'xo-calendar';
+    const first = this.#first;
+    const start = add(new Date(y, m, 1, 12), -((new Date(y, m, 1).getDay() || 7) - first + 7) % 7);
+    for (let i = 0; i < 7; i++) { const s = document.createElement('span'); s.textContent = new Intl.DateTimeFormat(loc, { weekday: 'short' }).format(add(start, i)).slice(0, 2); s.setAttribute('aria-hidden', 'true'); grid.append(s); }
+    const today = iso(new Date());
+    const v = super.value;
+    const [a, b] = this.range ? [this.#draft.start, this.#draft.end] : [v, ''];
+    for (let i = 0; i < 42; i++) {
+      const d = add(start, i), s = iso(d);
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.dataset.date = s;
+      btn.textContent = String(d.getDate());
+      btn.tabIndex = s === iso(this.#cursor) ? 0 : -1;
+      btn.setAttribute('aria-label', new Intl.DateTimeFormat(loc, { dateStyle: 'full' }).format(d));
+      if (d.getMonth() !== m) btn.classList.add('is-out');
+      if (s === today) { btn.classList.add('is-today'); btn.setAttribute('aria-current', 'date'); }
+      const sel = s === a || s === b;
+      if (sel) btn.classList.add('is-sel');
+      if (a && b && s > a && s < b) btn.classList.add('is-range');
+      btn.setAttribute('aria-pressed', String(sel));
+      if (this.#out(s)) btn.disabled = true;
+      btn.addEventListener('click', () => this.#pick(s));
+      grid.append(btn);
+    }
+    panel.replaceChildren(head, grid);
+    if (this.range) {
+      const foot = document.createElement('div');
+      foot.className = 'cal-foot';
+      const hint = document.createElement('span');
+      hint.className = 'hint'; hint.setAttribute('aria-live', 'polite'); hint.id = `${this.#id}-sum`;
+      hint.textContent = this.#summary();
+      const row = document.createElement('span');
+      row.className = 'row-inline';
+      const clear = document.createElement('button'); clear.type = 'button'; clear.className = 'sm'; clear.textContent = text('xoong.controls.clear', 'Clear');
+      clear.addEventListener('click', () => { this.#draft = { ...empty }; this.#pending = ''; this.#draw(); this.#focusDay(); });
+      const apply = document.createElement('button'); apply.type = 'button'; apply.className = 'sm primary'; apply.textContent = text('xoong.controls.apply', 'Apply');
+      apply.addEventListener('click', () => { this.#choose({ ...this.#draft }); this.#close(true); });
+      row.append(clear, apply);
+      foot.append(hint, row);
+      panel.append(foot);
+    }
+  }
+  #summary() {
+    const { start, end } = this.#draft;
+    if (!start) return text('xoong.controls.pickStart', 'Pick the first day');
+    if (!end) return `${this.#fmt(start)} - ${text('xoong.controls.pickEnd', 'pick the last day')}`;
+    const n = Math.round((+day(end) - +day(start)) / 864e5) + 1;
+    return `${this.#fmt(start)} - ${this.#fmt(end)} · ${text('xoong.controls.days', '{n} days', { n })}`;
+  }
+  #pick(/** @type {string} */ s) {
+    if (this.#out(s)) return;
+    this.#cursor = /** @type {Date} */ (day(s));
+    if (!this.range) { this.#choose(s); this.#close(true); return; }
+    if (!this.#pending) { this.#pending = s; this.#draft = { start: s, end: '' }; }
+    else { const a = this.#pending; this.#pending = ''; this.#draft = a <= s ? { start: a, end: s } : { start: s, end: a }; }
+    this.#draw();
+    this.#focusDay();
+  }
+  #panelKey(/** @type {KeyboardEvent} */ e) {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); this.#close(true); return; }
+    const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[e.key];
+    let next = null;
+    if (step) next = add(this.#cursor, step);
+    else if (e.key === 'PageUp') next = months(this.#cursor, e.shiftKey ? -12 : -1);
+    else if (e.key === 'PageDown') next = months(this.#cursor, e.shiftKey ? 12 : 1);
+    else if (e.key === 'Home' || e.key === 'End') { const off = (this.#cursor.getDay() || 7) - this.#first; const w = ((off % 7) + 7) % 7; next = add(this.#cursor, e.key === 'Home' ? -w : 6 - w); }
+    if (!next || !(e.target instanceof HTMLButtonElement && e.target.dataset.date)) return;
+    e.preventDefault();
+    this.#cursor = next;
+    if (this.range && e.shiftKey && step && this.#pending) { const a = this.#pending, s = iso(next); this.#draft = a <= s ? { start: a, end: s } : { start: s, end: a }; }
+    this.#draw();
+    this.#focusDay();
+  }
+}
+define('xo-date', XoDate);

package/src/index.js

@@ -0,0 +1,13 @@
+// Importing the package registers every control.
+import './tabs.js';
+import './menu.js';
+import './tooltip.js';
+import './combobox.js';
+import './carousel.js';
+import './switch.js';
+import './date.js';
+import './time.js';
+import './slider.js';
+import './stepper.js';
+import './password.js';
+import './copy.js';

package/src/layer.js

@@ -0,0 +1,46 @@
+// @ts-check
+/**
+ * Where a popup (menu, option list) is drawn. With the Popover API it goes into the top layer, so a table, a dialog or a scroll area never
+ * clips it; the position is set through the CSS object model (allowed under a strict CSP, unlike a style attribute). Without the API the
+ * popup stays a normal element that `controls.css` positions under its anchor.
+ */
+
+/** Prepare a popup element once. */
+export function prepareLayer(/** @type {HTMLElement} */ panel) {
+  panel.hidden = true;
+  if ('showPopover' in panel) panel.setAttribute('popover', 'manual'); // manual: the control decides when it closes, the same in every browser
+}
+
+/**
+ * Show the popup under `anchor`. Returns a function that stops following the anchor on scroll and resize.
+ * @param {HTMLElement} panel
+ * @param {HTMLElement} anchor
+ * @param {{ matchWidth?: boolean }} [options]
+ */
+export function showLayer(panel, anchor, { matchWidth = false } = {}) {
+  panel.hidden = false;
+  const top = panel.hasAttribute('popover');
+  if (top && !panel.matches(':popover-open')) panel.showPopover();
+  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' } : {}),
+    });
+  };
+  place();
+  if (!top) return () => {};
+  addEventListener('resize', place);
+  addEventListener('scroll', place, true);
+  return () => { removeEventListener('resize', place); removeEventListener('scroll', place, true); };
+}
+
+export function hideLayer(/** @type {HTMLElement} */ panel) {
+  if (panel.hasAttribute('popover') && panel.matches(':popover-open')) panel.hidePopover();
+  panel.hidden = true;
+}

package/src/menu.js

@@ -0,0 +1,150 @@
+// @ts-check
+/**
+ * <xo-menu> is an action menu (the WAI-ARIA menu button pattern): one trigger and a list of items.
+ *
+ *   <xo-menu label="Row actions">
+ *     <button xo-menu-trigger>Actions</button>
+ *     <button xo-click="POST /users/{id}/disable">Disable</button>
+ *     <a href="/users/{id}">Open</a>
+ *   </xo-menu>
+ *
+ * - The trigger is the child with `xo-menu-trigger` (the first button when none has it); every other child is an item.
+ * - Open with a click, Enter, Space or ArrowDown (ArrowUp opens on the last item). Inside: ArrowUp/ArrowDown (wrapping), Home, End,
+ *   typing a letter jumps to the next item that starts with it. Escape closes and returns the focus to the trigger; Tab closes.
+ *   Choosing an item (click or Enter) closes the menu and runs the item as usual (xo-click, a link, a click handler).
+ * - Where the browser has the Popover API the list is drawn in the top layer, so it is never clipped by a table or a scroll area.
+ * - `xo-menu-open` and `xo-menu-close` fire on the element. An `<hr>` between items is a divider (role=separator, skipped by the keys).
+ * - A choice menu: items with a `value` attribute are radio items (`menuitemradio`, `aria-checked`); the menu's `value` says which one is on.
+ *   Choosing one sets `value` (an attribute, so CSS can read it) and fires `xo-menu-select` with `{ value }`.
+ *
+ *     <xo-menu label="Palette" value="calm"><button xo-menu-trigger>Palette</button><button value="calm">Calm</button><button value="ember">Ember</button></xo-menu>
+ */
+import { XoElement, define } from '@xoong/core';
+import { prepareLayer, showLayer, hideLayer } from './layer.js';
+
+let counter = 0;
+
+class XoMenu extends XoElement {
+  static props = { label: String, value: String };
+
+  /** @type {HTMLElement | null} */ #trigger = null;
+  /** @type {HTMLElement | null} */ #panel = null;
+  #stopFollowing = () => {};
+  #onDocument = (/** @type {Event} */ event) => { if (!this.contains(/** @type {Node} */ (event.target))) this.close(); };
+  // Escape works wherever the focus is: a click leaves it on the trigger (or on the page, in Safari, which does not focus buttons on click)
+  #onEscape = (/** @type {KeyboardEvent} */ event) => { if (event.key === 'Escape' && this.isOpen) { event.preventDefault(); this.close({ focus: true }); } };
+
+  connected() {
+    this.effect(() => this.#check(this.value));
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => this.#build(), { once: true });
+    else queueMicrotask(() => this.#build());
+  }
+
+  disconnected() { document.removeEventListener('pointerdown', this.#onDocument); document.removeEventListener('keydown', this.#onEscape); }
+
+  get isOpen() { return !!this.#panel && !this.#panel.hidden; }
+  get #items() { return /** @type {HTMLElement[]} */ ([...(this.#panel?.children ?? [])]).filter((i) => i.getAttribute('role') !== 'separator'); }
+
+  #build() {
+    if (this.#panel || !this.isConnected) return;
+    const children = /** @type {HTMLElement[]} */ ([...this.children]);
+    const trigger = children.find((c) => c.hasAttribute('xo-menu-trigger')) ?? children.find((c) => c.localName === 'button');
+    if (!trigger) { console.error('xoong: <xo-menu> needs a trigger button (xo-menu-trigger)'); return; }
+    const id = `xo-menu-${++counter}`;
+    const panel = document.createElement('div');
+    panel.id = id;
+    panel.setAttribute('role', 'menu');
+    if (this.label) panel.setAttribute('aria-label', this.label);
+    for (const item of children) {
+      if (item === trigger) continue;
+      if (item.localName === 'hr') { item.setAttribute('role', 'separator'); panel.append(item); continue; } // a divider: not an item, skipped by the keys
+      item.setAttribute('role', item.hasAttribute('value') ? 'menuitemradio' : 'menuitem');
+      item.tabIndex = -1;
+      panel.append(item);
+    }
+    this.append(panel);
+    trigger.setAttribute('aria-haspopup', 'menu');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-controls', id);
+    if (trigger instanceof HTMLButtonElement && !trigger.type) trigger.type = 'button';
+    this.#trigger = trigger;
+    this.#panel = panel;
+    prepareLayer(panel);
+    this.#check(this.value);
+    trigger.addEventListener('click', () => (this.isOpen ? this.close() : this.open()));
+    trigger.addEventListener('keydown', (event) => {
+      if (event.key === 'ArrowDown') { event.preventDefault(); this.open('first'); }
+      else if (event.key === 'ArrowUp') { event.preventDefault(); this.open('last'); }
+    });
+    panel.addEventListener('click', (event) => {
+      const item = /** @type {Element} */ (event.target).closest('[role=menuitem], [role=menuitemradio]');
+      if (!item) return;
+      if (item.getAttribute('role') === 'menuitemradio') {
+        const value = item.getAttribute('value') ?? '';
+        const changed = value !== this.value;
+        this.setAttribute('value', value);
+        if (changed) this.dispatchEvent(new CustomEvent('xo-menu-select', { bubbles: true, detail: { value } }));
+      }
+      this.close({ focus: true });
+    });
+    panel.addEventListener('keydown', (event) => this.#onKey(event));
+  }
+
+  /** @param {'first' | 'last'} [at] focus an item (a mouse click opens without moving the focus) */
+  open(at) {
+    const panel = this.#panel;
+    if (!panel || this.isOpen) { if (at) this.#focusItem(at === 'last' ? this.#items.length - 1 : 0); return; }
+    this.#stopFollowing = showLayer(panel, /** @type {HTMLElement} */ (this.#trigger));
+    this.#trigger?.setAttribute('aria-expanded', 'true');
+    document.addEventListener('pointerdown', this.#onDocument);
+    document.addEventListener('keydown', this.#onEscape);
+    if (at) this.#focusItem(at === 'last' ? this.#items.length - 1 : 0);
+    this.dispatchEvent(new CustomEvent('xo-menu-open', { bubbles: true }));
+  }
+
+  close({ focus = false } = {}) {
+    const panel = this.#panel;
+    if (!panel || !this.isOpen) return;
+    this.#stopFollowing();
+    hideLayer(panel);
+    this.#trigger?.setAttribute('aria-expanded', 'false');
+    document.removeEventListener('pointerdown', this.#onDocument);
+    document.removeEventListener('keydown', this.#onEscape);
+    if (focus) this.#trigger?.focus();
+    this.dispatchEvent(new CustomEvent('xo-menu-close', { bubbles: true }));
+  }
+
+  /** The radio item whose `value` is the menu's is the checked one. */
+  #check(/** @type {string | null | undefined} */ value) {
+    for (const item of this.#items) if (item.getAttribute('role') === 'menuitemradio') item.setAttribute('aria-checked', String(item.getAttribute('value') === value));
+  }
+
+  #focusItem(/** @type {number} */ index) {
+    const items = this.#items;
+    items[(index + items.length) % items.length]?.focus();
+  }
+
+  #onKey(/** @type {KeyboardEvent} */ event) {
+    const items = this.#items;
+    const at = items.indexOf(/** @type {HTMLElement} */ (document.activeElement));
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); this.close({ focus: true }); return; }
+    if (event.key === 'Tab') { this.close(); return; }
+    if (event.key === ' ' && /** @type {Element} */ (event.target).localName === 'a') { event.preventDefault(); /** @type {HTMLElement} */ (event.target).click(); return; } // Space activates a link, as it does a button
+    /** @type {number | null} */ let next = null;
+    if (event.key === 'ArrowDown') next = at + 1;
+    else if (event.key === 'ArrowUp') next = at < 0 ? items.length - 1 : at - 1;
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = items.length - 1;
+    else if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      const letter = event.key.toLowerCase();
+      const order = [...items.slice(at + 1), ...items.slice(0, at + 1)];
+      const hit = order.find((i) => (i.textContent ?? '').trim().toLowerCase().startsWith(letter));
+      if (hit) { event.preventDefault(); hit.focus(); }
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    this.#focusItem(next);
+  }
+}
+define('xo-menu', XoMenu);

package/src/password.js

@@ -0,0 +1,53 @@
+// @ts-check
+/**
+ * <xo-password> is a password field with a button that shows or hides the text.
+ *
+ *   <xo-password name="password" label="Password" autocomplete="new-password"></xo-password>
+ *
+ * - The eye button is `aria-pressed` while the text is shown and named "Show password" / "Hide password"; nothing else is announced.
+ * - `value` is the string; `autocomplete` goes to the input so password managers work.
+ */
+import { XoControl, define, text } from '@xoong/core';
+
+class XoPassword extends XoControl {
+  static props = { ...XoControl.props, label: String, placeholder: String, autocomplete: String };
+
+  /** @type {HTMLInputElement | null} */ #input = null;
+  /** @type {HTMLButtonElement | null} */ #eye = null;
+
+  setValue(v) { super.setValue(v == null ? '' : String(v)); if (this.#input && this.#input.value !== super.value) this.#input.value = super.value; }
+  get focusTarget() { return this.#input; }
+
+  connected() {
+    const wrap = document.createElement('div');
+    wrap.className = 'xo-input-wrap xo-input-wrap--end';
+    const input = document.createElement('input');
+    input.type = 'password';
+    input.addEventListener('input', (e) => { e.stopPropagation(); this.userInput(input.value); });
+    input.addEventListener('change', (e) => { e.stopPropagation(); this.userChange(); });
+    const eye = document.createElement('button');
+    eye.type = 'button';
+    eye.className = 'ghost icon-only sm xo-input-end';
+    eye.innerHTML = '<span class="ic" data-ic="eye" aria-hidden="true"></span>';
+    eye.addEventListener('click', () => { input.type = input.type === 'password' ? 'text' : 'password'; this.#paint(); });
+    wrap.append(input, eye);
+    this.#input = input; this.#eye = eye;
+    this.replaceChildren(wrap);
+    queueMicrotask(() => { input.value = super.value; this.#paint(); });
+  }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
+
+  #paint() {
+    const i = this.#input, e = this.#eye;
+    if (!i || !e) return;
+    const shown = i.type === 'text';
+    e.setAttribute('aria-pressed', String(shown));
+    e.setAttribute('aria-label', shown ? text('xoong.controls.hidePassword', 'Hide password') : text('xoong.controls.showPassword', 'Show password'));
+    i.setAttribute('aria-label', this.label || this.name || text('xoong.controls.password', 'Password'));
+    i.placeholder = this.placeholder || '';
+    if (this.autocomplete) i.autocomplete = /** @type {any} */ (this.autocomplete);
+    i.disabled = e.disabled = this.isDisabled;
+    i.readOnly = this.readonly;
+  }
+}
+define('xo-password', XoPassword);

package/src/slider.js

@@ -0,0 +1,47 @@
+// @ts-check
+/**
+ * <xo-slider> is a number on a track (a native range input, styled by the theme); `value` is a number.
+ *
+ *   <xo-slider name="quality" label="Image quality" min="0" max="100" step="5" value="80"></xo-slider>
+ *
+ * - The native keys work (arrows, Page, Home/End). `input` fires while dragging, `change` when released.
+ * - `labels` names the stops for screen readers and for the visible value: `labels="Low,Medium,High"` with min=0 max=2 step=1 says "Medium".
+ * - The filled part of the track follows the value (the custom property `--p`, set through the CSS object model).
+ */
+import { XoControl, define } from '@xoong/core';
+
+class XoSlider extends XoControl {
+  static props = { ...XoControl.props, label: String, min: Number, max: Number, step: Number, labels: String };
+
+  /** @type {HTMLInputElement | null} */ #input = null;
+
+  setValue(v) { const n = Number(v); super.setValue(v === '' || v == null || Number.isNaN(n) ? '' : n); this.#paint(); }
+  get focusTarget() { return this.#input; }
+
+  connected() {
+    const input = document.createElement('input');
+    input.type = 'range';
+    input.className = 'xo-range';
+    input.addEventListener('input', (e) => { e.stopPropagation(); this.userInput(Number(input.value)); this.#paint(); });
+    input.addEventListener('change', (e) => { e.stopPropagation(); this.userChange(); });
+    this.#input = input;
+    this.replaceChildren(input);
+    queueMicrotask(() => this.#paint());
+  }
+  attributeChangedCallback(attr, old, value) { super.attributeChangedCallback(attr, old, value); this.#paint(); }
+
+  #paint() {
+    const i = this.#input;
+    if (!i) return;
+    const min = this.min ?? 0, max = this.max ?? 100;
+    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');
+    const v = super.value === '' ? min : super.value;
+    i.value = String(v);
+    i.style.setProperty('--p', `${max > min ? ((v - min) / (max - min)) * 100 : 0}%`);
+    const stop = this.labels ? this.labels.split(',')[Math.round((v - min) / (this.step || 1))]?.trim() : '';
+    if (stop) i.setAttribute('aria-valuetext', stop); else i.removeAttribute('aria-valuetext');
+  }
+}
+define('xo-slider', XoSlider);

package/src/stepper.js

@@ -0,0 +1,85 @@
+// @ts-check
+/**
+ * <xo-stepper> is a number with minus and plus buttons; `value` is a number (or '' when empty).
+ *
+ *   <xo-stepper name="perPage" label="Items per page" min="1" max="100" step="5" value="25"></xo-stepper>
+ *
+ * - ArrowUp/ArrowDown change by `step`, PageUp/PageDown by ten steps, Home/End go to `min`/`max` when they are set. The value is clamped;
+ *   at the limit the matching button is disabled. Typing is free until the field is left, then the number is clamped.
+ * - The input has the spinbutton semantics (`role=spinbutton`, `aria-valuemin/max/now`); the buttons are named Decrease and Increase.
+ */
+import { XoControl, define, text } from '@xoong/core';
+
+class XoStepper extends XoControl {
+  static props = { ...XoControl.props, label: String, min: Number, max: Number, step: Number };
+
+  /** @type {HTMLInputElement | null} */ #input = null;
+  /** @type {HTMLButtonElement[]} */ #buttons = [];
+
+  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 #step() { return this.step || 1; }
+
+  connected() {
+    const wrap = document.createElement('div');
+    wrap.className = 'xo-stepper';
+    const button = (/** @type {number} */ dir, /** @type {string} */ label, /** @type {string} */ icon) => {
+      const b = document.createElement('button');
+      b.type = 'button'; b.setAttribute('aria-label', label); b.tabIndex = -1;
+      b.innerHTML = `<span class="ic" data-ic="${icon}" aria-hidden="true"></span>`;
+      b.addEventListener('click', () => this.#move(dir));
+      return b;
+    };
+    const input = document.createElement('input');
+    input.setAttribute('inputmode', 'numeric');
+    input.setAttribute('role', 'spinbutton');
+    input.autocomplete = 'off';
+    input.addEventListener('input', (e) => e.stopPropagation()); // typing is free: the value is read when the field is left
+    input.addEventListener('change', (e) => { e.stopPropagation(); this.#commit(); });
+    input.addEventListener('keydown', (e) => {
+      const k = e.key;
+      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)); }
+    });
+    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);
+    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;
+    this.#set(now + steps * this.#step);
+  }
+  #set(/** @type {number} */ n) {
+    const before = super.value;
+    this.setValue(n);
+    if (super.value !== before) { this.userInput(super.value); this.userChange(); }
+  }
+  #commit() {
+    const raw = /** @type {HTMLInputElement} */ (this.#input).value.trim();
+    if (raw === '') { if (super.value !== '') { this.setValue(''); this.userInput(''); this.userChange(); } return; }
+    const n = Number(raw.replace(',', '.'));
+    if (Number.isNaN(n)) this.#paint(); else this.#set(n);
+    this.#paint();
+  }
+  #paint() {
+    const i = this.#input;
+    if (!i) return;
+    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)); }
+    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);
+  }
+}
+define('xo-stepper', XoStepper);