@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-5CEAOLUA.mjs → chunk-SYBOA5HC.mjs}

@@ -1,16 +1,17 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/slider.ts
 var _defaults = {};
 var _authored = /* @__PURE__ */ new WeakMap();
-var Slider = class _Slider extends Component {
+var _Slider = class _Slider extends Component {
   constructor(el, options) {
-    super(el, options, _Slider);
+    super(el, options);
     this._resizeObserver = null;
     this._handleRangeChange = () => {
       this._clampDual();
@@ -41,45 +42,27 @@ var Slider = class _Slider extends Component {
         this.thumb.classList.remove("active");
       }
     };
-    this.el["Expressive_Slider"] = this;
-    this.options = {
-      ..._Slider.defaults,
-      ...options
-    };
     this._pointerDown = false;
     this._setupThumb();
     this._sync();
     this._setupEventHandlers();
-    if (typeof ResizeObserver !== "undefined") {
-      this._resizeObserver = new ResizeObserver(() => this._sync());
-      this._resizeObserver.observe(this.el);
-    }
+    this._resizeObserver = new ResizeObserver(() => this._sync());
+    this._resizeObserver.observe(this.el);
+    if (this.el.parentElement) this._resizeObserver.observe(this.el.parentElement);
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Slider.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Slider);
-  }
-  static getInstance(el) {
-    return el["Expressive_Slider"];
-  }
   destroy() {
     this._resizeObserver?.disconnect();
-    this._removeEventHandlers();
     this._removeThumb();
-    this.el["Expressive_Slider"] = void 0;
+    super.destroy();
     const host = this._host();
     for (const el of [this.el, host]) {
       for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);
       _authored.delete(el);
     }
-    host?.querySelectorAll('input[type="range"]').forEach((el) => el["Expressive_Slider"]?._sync());
+    host?.querySelectorAll('input[type="range"]').forEach((el) => _Slider.getInstance(el)?._sync());
   }
   _set(el, name, value) {
     const authored = _authored.get(el) ?? {};
@@ -91,22 +74,15 @@ var Slider = class _Slider extends Component {
   // twice - once for mouse, once for touch. One of the touch spellings,
   // `touchleave`, was never implemented by any browser at all.
   _setupEventHandlers() {
-    this.el.addEventListener("change", this._handleRangeChange);
-    this.el.addEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.addEventListener("input", this._handleRangeInput);
-    this.el.addEventListener("pointerup", this._handleRangePointerUp);
-    this.el.addEventListener("pointercancel", this._handleRangePointerUp);
-    this.el.addEventListener("blur", this._handleRangeRelease);
-    this.el.addEventListener("mouseout", this._handleRangeRelease);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("change", this._handleRangeChange);
-    this.el.removeEventListener("pointerdown", this._handleRangePointerDown);
-    this.el.removeEventListener("input", this._handleRangeInput);
-    this.el.removeEventListener("pointerup", this._handleRangePointerUp);
-    this.el.removeEventListener("pointercancel", this._handleRangePointerUp);
-    this.el.removeEventListener("blur", this._handleRangeRelease);
-    this.el.removeEventListener("mouseout", this._handleRangeRelease);
+    const { signal } = this._events;
+    this.el.addEventListener("change", this._handleRangeChange, { signal });
+    this.el.addEventListener("pointerdown", this._handleRangePointerDown, { signal });
+    this.el.addEventListener("input", this._handleRangeInput, { signal });
+    this.el.addEventListener("pointerup", this._handleRangePointerUp, { signal });
+    this.el.addEventListener("pointercancel", this._handleRangePointerUp, { signal });
+    this.el.addEventListener("blur", this._handleRangeRelease, { signal });
+    this.el.addEventListener("mouseout", this._handleRangeRelease, { signal });
+    afterFormReset(this.el, () => this._sync(), signal);
   }
   _setupThumb() {
     this.thumb = document.createElement("span");
@@ -123,7 +99,7 @@ var Slider = class _Slider extends Component {
     return !!this.el.closest(".vertical");
   }
   _host() {
-    return this.el.closest(".slider, .range, .range-field, label");
+    return this.el.closest(".slider, label");
   }
   _clampDual() {
     const host = this._host();
@@ -193,12 +169,14 @@ var Slider = class _Slider extends Component {
    */
   static Init() {
     Utils.onDocumentReady(() => {
-      _Slider.init(document.querySelectorAll("input[type=range]"));
+      _Slider.init(document.querySelectorAll("input[type=range]:not(.image-compare > input, .color-picker-hue)"));
     });
   }
 };
+_Slider.key = "Expressive_Slider";
+var Slider = _Slider;
 
 export {
   Slider
 };
-//# sourceMappingURL=chunk-5CEAOLUA.mjs.map
+//# sourceMappingURL=chunk-SYBOA5HC.mjs.map

package/dist/js/chunks/chunk-SYBOA5HC.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/slider.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, afterFormReset } from '../core/utils';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface SliderOptions extends BaseOptions {}\n\nconst _defaults: SliderOptions = {};\n\n// Inline values _set() replaced, per element, so destroy() can put back what\n// an author wrote. Per element, not per instance: both handles of a range\n// write the same host properties.\nconst _authored = new WeakMap<HTMLElement, Record<string, string>>();\n\nexport class Slider extends Component<SliderOptions> {\n  declare el: HTMLInputElement;\n  private _pointerDown: boolean;\n  private _resizeObserver: ResizeObserver | null = null;\n  value: HTMLElement;\n  thumb: HTMLElement;\n\n  constructor(el: HTMLInputElement, options: Partial<SliderOptions>) {\n    super(el, options);\n\n    this._pointerDown = false;\n    this._setupThumb();\n    this._sync();\n    this._setupEventHandlers();\n    this._resizeObserver = new ResizeObserver(() => this._sync());\n    this._resizeObserver.observe(this.el);\n    // The bubble and stop row are placed from the input's offsets, which\n    // move when the host resizes around an input that keeps its size.\n    if (this.el.parentElement) this._resizeObserver.observe(this.el.parentElement);\n  }\n\n  static get defaults(): SliderOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Slider';\n\n  destroy() {\n    this._resizeObserver?.disconnect();\n    this._removeThumb();\n    super.destroy();\n    const host = this._host();\n    for (const el of [this.el, host]) {\n      for (const name in _authored.get(el)) el.style.setProperty(name, _authored.get(el)[name]);\n      _authored.delete(el);\n    }\n    // The other handle of a range writes the shared host properties again.\n    host?.querySelectorAll('input[type=\"range\"]').forEach((el) => Slider.getInstance(el)?._sync());\n  }\n\n  _set(el: HTMLElement, name: string, value: string) {\n    const authored = _authored.get(el) ?? {};\n    _authored.set(el, authored);\n    authored[name] ??= el.style.getPropertyValue(name);\n    el.style.setProperty(name, value);\n  }\n\n  // Eleven listeners used to cover four stages, because each one was written\n  // twice - once for mouse, once for touch. One of the touch spellings,\n  // `touchleave`, was never implemented by any browser at all.\n  _setupEventHandlers() {\n    const { signal } = this._events;\n    this.el.addEventListener('change', this._handleRangeChange, { signal });\n    this.el.addEventListener('pointerdown', this._handleRangePointerDown, { signal });\n    // `input` alone tracks a drag. A `pointermove` sync used to run as well,\n    // twice per frame, and before the browser had moved the value.\n    this.el.addEventListener('input', this._handleRangeInput, { signal });\n    this.el.addEventListener('pointerup', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('pointercancel', this._handleRangePointerUp, { signal });\n    this.el.addEventListener('blur', this._handleRangeRelease, { signal });\n    // `mouseout`, not `pointerout`: this used to be a `mouseout`/`touchleave`\n    // pair, and `touchleave` was never implemented by any browser, so the\n    // handler has only ever run for a mouse. `pointerout` also fires when a\n    // touch lifts, which would clear the thumb's active state at a moment\n    // nothing cleared it before.\n    this.el.addEventListener('mouseout', this._handleRangeRelease, { signal });\n    // A form reset restores the value without an input event.\n    afterFormReset(this.el, () => this._sync(), signal);\n  }\n\n  _handleRangeChange = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerDown = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    if (e.pointerType === 'mouse' && e.button !== 0) return;\n    this._pointerDown = true;\n    this.el.classList.add('active');\n    this._clampDual();\n    this._sync();\n    // An `e.type !== 'input'` guard used to sit here. This handler is only ever\n    // bound to a press, so it was never anything but true.\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangeInput = () => {\n    this._clampDual();\n    this._sync();\n    this.thumb.classList.add('active');\n  };\n\n  _handleRangePointerUp = (e: PointerEvent) => {\n    if (!e.isPrimary) return;\n    this._pointerDown = false;\n    this.el.classList.remove('active');\n  };\n\n  _handleRangeRelease = () => {\n    if (!this._pointerDown) {\n      this.thumb.classList.remove('active');\n    }\n  };\n\n  _setupThumb() {\n    this.thumb = document.createElement('span');\n    this.value = document.createElement('span');\n    this.thumb.classList.add('thumb');\n    this.value.classList.add('value');\n    this.thumb.append(this.value);\n    this.el.after(this.thumb);\n  }\n\n  _removeThumb() {\n    this.thumb.remove();\n  }\n\n  _isVertical(): boolean {\n    return !!this.el.closest('.vertical');\n  }\n\n  _host(): HTMLElement | null {\n    // `.slider` is the documented host now; without it here a dual-handle\n    // control could not find its wrapper, so the handles never clamped and the\n    // shared start/end fractions never tracked the interval.\n    return this.el.closest('.slider, label');\n  }\n\n  _clampDual() {\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (!peers || peers.length !== 2) return;\n    const start = peers[0] as HTMLInputElement;\n    const end = peers[1] as HTMLInputElement;\n    if (this.el === start && +start.value > +end.value) start.value = end.value;\n    if (this.el === end && +end.value < +start.value) end.value = start.value;\n  }\n\n  /** The input's range, defaulting like the browser does: 0 to 100. */\n  private _bounds(el: HTMLInputElement) {\n    const parsedMax = parseFloat(el.max);\n    return { max: Number.isNaN(parsedMax) ? 100 : parsedMax, min: parseFloat(el.min) || 0 };\n  }\n\n  _fraction(el: HTMLInputElement): number {\n    const { max, min } = this._bounds(el);\n    const val = parseFloat(el.value) || 0;\n    return max === min ? 0 : (val - min) / (max - min);\n  }\n\n  _sync() {\n    const percent = this._fraction(this.el);\n    const fraction = `${percent * 100}%`;\n\n    // Read before writing. This runs on every pointer move during a drag, and\n    // setting the custom property first made each of the four offset reads\n    // below flush a fresh layout.\n    const left = this.el.offsetLeft;\n    const top = this.el.offsetTop;\n    const width = this.el.offsetWidth;\n    const height = this.el.offsetHeight;\n    const style = getComputedStyle(this.el);\n    const rtl = style.direction === 'rtl';\n    const vertical = this._isVertical();\n    const handle = parseFloat(style.getPropertyValue('--md-comp-slider-handle-width')) || 4;\n    const length = vertical ? height : width;\n    const position = handle / 2 + percent * (length - handle);\n\n    this._set(this.el, '--md-comp-slider-active-fraction', fraction);\n    this._set(this.el, '--md-comp-slider-active-position', `${position}px`);\n\n    const host = this._host();\n    const peers = host?.querySelectorAll('input[type=\"range\"]');\n    if (host && peers && peers.length === 2) {\n      const nums = Array.from(peers).map((el) => this._fraction(el as HTMLInputElement));\n      this._set(host, '--md-comp-slider-start-fraction', `${Math.min(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-end-fraction', `${Math.max(...nums) * 100}%`);\n      this._set(host, '--md-comp-slider-start-position', `${handle / 2 + Math.min(...nums) * (length - handle)}px`);\n      this._set(host, '--md-comp-slider-end-position', `${handle / 2 + Math.max(...nums) * (length - handle)}px`);\n    }\n    if (host?.classList.contains('stops')) {\n      const { max, min } = this._bounds(this.el);\n      const step = parseFloat(this.el.step);\n      // Stops sit at min + k * step up to max, so a step that does not divide\n      // the range ends short of max. No step, `any`, zero or a negative step\n      // clears the spacing, and the host paints no dots.\n      const stops = step > 0 && Number.isFinite(step) && max > min;\n      this._set(host, '--md-comp-slider-stop-count', stops ? String(Math.floor((max - min) / step + 1e-9) + 1) : '');\n      this._set(host, '--md-comp-slider-stop-spacing', stops ? `${((length - handle) * step) / (max - min)}px` : '');\n      // The tick row is the host's ::after, which cannot read the input's\n      // properties. A dual host has no single position.\n      if (peers?.length === 1) {\n        this._set(host, '--md-comp-slider-active-position', `${position}px`);\n        this._set(host, '--md-comp-slider-track-center', `${top + height / 2}px`);\n      }\n    }\n\n    this.value.textContent = this.el.value;\n    if (vertical) {\n      this.thumb.style.left = `${left + width / 2}px`;\n      this.thumb.style.top = `${top + height - position}px`;\n    } else {\n      this.thumb.style.left = `${left + (rtl ? width - position : position)}px`;\n      this.thumb.style.top = `${top}px`;\n    }\n  }\n\n  /**\n   * Initializes every range input in the current document.\n   */\n  static Init() {\n    // Deferred like every other Init(): this ran at import time, so a bundle\n    // loaded in <head> found no inputs at all.\n    Utils.onDocumentReady(() => {\n      // An image compare's range is invisible and drawn by its container; a\n      // color picker's hue range paints its own track.\n      Slider.init(document.querySelectorAll<HTMLInputElement>('input[type=range]:not(.image-compare > input, .color-picker-hue)'));\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-T4MOBP3J.mjs

@@ -0,0 +1,108 @@
+import {
+  Utils,
+  controllerFor
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/behaviors/sortable.ts
+var itemSelector = ".sortable > li";
+var _Sortable = class _Sortable {
+  // A second Init adds nothing: addEventListener ignores a listener it has.
+  static Init() {
+    if (typeof document === "undefined") return;
+    document.addEventListener("click", _Sortable._onClick);
+    document.addEventListener("pointerdown", _Sortable._onPointerDown);
+  }
+  /** Moves an item to a zero-based position in its list, then announces it and fires `change`. */
+  static move(item, to) {
+    const list = item.parentElement;
+    const items = [...list.children];
+    const from = items.indexOf(item);
+    to = Math.min(Math.max(to, 0), items.length - 1);
+    if (to === from) return;
+    const active = item.getRootNode().activeElement;
+    const focused = item.contains(active) ? active : null;
+    list.insertBefore(item, items[to > from ? to + 1 : to] ?? null);
+    focused?.focus();
+    _Sortable._done(list, item, from, to);
+  }
+  static _done(list, item, from, to) {
+    let region = _Sortable._regions.get(list);
+    if (!region) {
+      region = document.createElement("div");
+      region.className = "visually-hidden";
+      region.setAttribute("aria-live", "polite");
+      list.after(region);
+      _Sortable._regions.set(list, region);
+    }
+    region.textContent = _Sortable.i18n.moved.replace("{position}", String(to + 1)).replace("{total}", String(list.children.length));
+    list.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: { item, from, to } }));
+  }
+  static _onClick(e) {
+    const button = Utils.closestInPath(e, "[data-move]");
+    const item = button?.closest(itemSelector);
+    if (!item || button.matches(':disabled, [aria-disabled="true"]')) return;
+    const index = [...item.parentElement.children].indexOf(item);
+    const direction = button.getAttribute("data-move");
+    if (direction === "up") _Sortable.move(item, index - 1);
+    else if (direction === "down") _Sortable.move(item, index + 1);
+  }
+  static _onPointerDown(e) {
+    const handle = Utils.closestInPath(e, ".drag-handle");
+    const item = handle?.closest(itemSelector);
+    if (!item || e.button !== 0 || _Sortable._drag) return;
+    e.preventDefault();
+    const list = item.parentElement;
+    const events = controllerFor(item);
+    _Sortable._drag = { item, list, from: [...list.children].indexOf(item), pointerId: e.pointerId, events };
+    item.classList.add("dragged");
+    const { signal } = events;
+    document.addEventListener("pointermove", _Sortable._onPointerMove, { signal });
+    document.addEventListener("pointerup", _Sortable._onPointerEnd, { signal });
+    document.addEventListener("pointercancel", _Sortable._onPointerEnd, { signal });
+    document.addEventListener("keydown", _Sortable._onKeyDown, { signal });
+  }
+  static _onPointerMove(e) {
+    const drag = _Sortable._drag;
+    if (!drag || e.pointerId !== drag.pointerId) return;
+    const previous = drag.item.previousElementSibling;
+    const next = drag.item.nextElementSibling;
+    const middle = (el) => {
+      const rect = el.getBoundingClientRect();
+      return rect.top + rect.height / 2;
+    };
+    if (previous && e.clientY < middle(previous)) drag.list.insertBefore(drag.item, previous);
+    else if (next && e.clientY > middle(next)) drag.list.insertBefore(drag.item, next.nextElementSibling);
+  }
+  static _onPointerEnd(e) {
+    if (e.pointerId === _Sortable._drag?.pointerId) _Sortable._finish(e.type === "pointercancel");
+  }
+  // Listening only while a drag is active. preventDefault keeps the Escape
+  // from also closing a modal <dialog> the list sits in.
+  static _onKeyDown(e) {
+    if (e.key !== "Escape") return;
+    e.preventDefault();
+    _Sortable._finish(true);
+  }
+  static _finish(cancel) {
+    const drag = _Sortable._drag;
+    if (!drag) return;
+    _Sortable._drag = null;
+    drag.events.abort();
+    drag.item.classList.remove("dragged");
+    const to = [...drag.list.children].indexOf(drag.item);
+    if (cancel) {
+      drag.list.insertBefore(drag.item, drag.list.children[drag.from > to ? drag.from + 1 : drag.from] ?? null);
+    } else if (to !== drag.from) {
+      _Sortable._done(drag.list, drag.item, drag.from, to);
+    }
+  }
+};
+_Sortable.i18n = { moved: "Moved to position {position} of {total}" };
+_Sortable._drag = null;
+_Sortable._regions = /* @__PURE__ */ new WeakMap();
+var Sortable = _Sortable;
+
+export {
+  Sortable
+};
+//# sourceMappingURL=chunk-T4MOBP3J.mjs.map

package/dist/js/chunks/chunk-T4MOBP3J.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/behaviors/sortable.ts"],
+  "sourcesContent": ["import { Utils, controllerFor } from '../core/utils';\n\nconst itemSelector = '.sortable > li';\n\ninterface Drag {\n  item: HTMLElement;\n  list: HTMLElement;\n  from: number;\n  pointerId: number;\n  /** Removes the document listeners of this drag. */\n  events: AbortController;\n}\n\n/**\n * Sortable lists. In a `.sortable` list, an item moves by dragging its\n * `.drag-handle`, or with a `[data-move=\"up\"]` or `[data-move=\"down\"]` button\n * inside it. The buttons are the keyboard path and the single-pointer\n * alternative to dragging, so every sortable list needs them; they can sit in\n * the row or in a menu. Escape during a drag puts the item back.\n *\n * After each move the list fires a bubbling `change` event whose `detail`\n * holds `{ item, from, to }` (zero-based), and a polite live region beside the\n * list announces the new position. `Sortable.i18n.moved` holds that text.\n */\nexport class Sortable {\n  static i18n = { moved: 'Moved to position {position} of {total}' };\n  private static _drag: Drag | null = null;\n  private static _regions = new WeakMap<HTMLElement, HTMLElement>();\n\n  // A second Init adds nothing: addEventListener ignores a listener it has.\n  static Init() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('click', Sortable._onClick);\n    document.addEventListener('pointerdown', Sortable._onPointerDown);\n  }\n\n  /** Moves an item to a zero-based position in its list, then announces it and fires `change`. */\n  static move(item: HTMLElement, to: number) {\n    const list = item.parentElement;\n    const items = [...list.children] as HTMLElement[];\n    const from = items.indexOf(item);\n    to = Math.min(Math.max(to, 0), items.length - 1);\n    if (to === from) return;\n    // Moving a node drops focus from inside it, so it is put back after.\n    const active = (item.getRootNode() as Document | ShadowRoot).activeElement;\n    const focused = item.contains(active) ? (active as HTMLElement) : null;\n    list.insertBefore(item, items[to > from ? to + 1 : to] ?? null);\n    focused?.focus();\n    Sortable._done(list, item, from, to);\n  }\n\n  private static _done(list: HTMLElement, item: HTMLElement, from: number, to: number) {\n    let region = Sortable._regions.get(list);\n    if (!region) {\n      region = document.createElement('div');\n      region.className = 'visually-hidden';\n      region.setAttribute('aria-live', 'polite');\n      list.after(region);\n      Sortable._regions.set(list, region);\n    }\n    region.textContent = Sortable.i18n.moved\n      .replace('{position}', String(to + 1))\n      .replace('{total}', String(list.children.length));\n    list.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { item, from, to } }));\n  }\n\n  private static _onClick(e: MouseEvent) {\n    const button = Utils.closestInPath(e, '[data-move]');\n    const item = button?.closest<HTMLElement>(itemSelector);\n    if (!item || button.matches(':disabled, [aria-disabled=\"true\"]')) return;\n    const index = [...item.parentElement.children].indexOf(item);\n    const direction = button.getAttribute('data-move');\n    if (direction === 'up') Sortable.move(item, index - 1);\n    else if (direction === 'down') Sortable.move(item, index + 1);\n  }\n\n  private static _onPointerDown(e: PointerEvent) {\n    const handle = Utils.closestInPath(e, '.drag-handle');\n    const item = handle?.closest<HTMLElement>(itemSelector);\n    if (!item || e.button !== 0 || Sortable._drag) return;\n    e.preventDefault();\n    const list = item.parentElement;\n    const events = controllerFor(item);\n    Sortable._drag = { item, list, from: [...list.children].indexOf(item), pointerId: e.pointerId, events };\n    item.classList.add('dragged');\n    // On the document, not the handle: each swap moves the item in the DOM,\n    // which releases any pointer capture the handle held.\n    const { signal } = events;\n    document.addEventListener('pointermove', Sortable._onPointerMove, { signal });\n    document.addEventListener('pointerup', Sortable._onPointerEnd, { signal });\n    document.addEventListener('pointercancel', Sortable._onPointerEnd, { signal });\n    document.addEventListener('keydown', Sortable._onKeyDown, { signal });\n  }\n\n  private static _onPointerMove(e: PointerEvent) {\n    const drag = Sortable._drag;\n    if (!drag || e.pointerId !== drag.pointerId) return;\n    // Swap with a neighbour once the pointer passes its middle.\n    const previous = drag.item.previousElementSibling;\n    const next = drag.item.nextElementSibling;\n    const middle = (el: Element) => {\n      const rect = el.getBoundingClientRect();\n      return rect.top + rect.height / 2;\n    };\n    if (previous && e.clientY < middle(previous)) drag.list.insertBefore(drag.item, previous);\n    else if (next && e.clientY > middle(next)) drag.list.insertBefore(drag.item, next.nextElementSibling);\n  }\n\n  private static _onPointerEnd(e: PointerEvent) {\n    if (e.pointerId === Sortable._drag?.pointerId) Sortable._finish(e.type === 'pointercancel');\n  }\n\n  // Listening only while a drag is active. preventDefault keeps the Escape\n  // from also closing a modal <dialog> the list sits in.\n  private static _onKeyDown(e: KeyboardEvent) {\n    if (e.key !== 'Escape') return;\n    e.preventDefault();\n    Sortable._finish(true);\n  }\n\n  private static _finish(cancel: boolean) {\n    const drag = Sortable._drag;\n    if (!drag) return;\n    Sortable._drag = null;\n    drag.events.abort();\n    drag.item.classList.remove('dragged');\n    const to = [...drag.list.children].indexOf(drag.item);\n    if (cancel) {\n      drag.list.insertBefore(drag.item, drag.list.children[drag.from > to ? drag.from + 1 : drag.from] ?? null);\n    } else if (to !== drag.from) {\n      Sortable._done(drag.list, drag.item, drag.from, to);\n    }\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-TM7HPGTV.mjs

@@ -0,0 +1,342 @@
+import {
+  FormSelect
+} from "./chunk-XJPMW5SP.mjs";
+import {
+  Utils
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/treeSelect.ts
+function optionTree(options) {
+  const byValue = /* @__PURE__ */ new Map();
+  options.forEach((option) => {
+    if (!byValue.has(option.value)) byValue.set(option.value, option);
+  });
+  const parentOf = (option) => byValue.get(option.dataset.parent || void 0);
+  const loops = (option) => {
+    let parent = parentOf(option);
+    for (let steps = 0; parent && parent !== option && steps < options.length; steps++) parent = parentOf(parent);
+    return parent === option;
+  };
+  const nodes = new Map(options.map((option) => [option, { option, children: [] }]));
+  const roots = [];
+  options.forEach((option) => {
+    const parent = loops(option) ? void 0 : parentOf(option);
+    (parent ? nodes.get(parent).children : roots).push(nodes.get(option));
+  });
+  return roots;
+}
+var STEPS = { ArrowUp: -1, ArrowDown: 1 };
+var move = (tree, _row, e) => tree._focusRow(Utils.focusTarget(tree._visibleRows(), e, STEPS));
+var activate = (tree, row) => tree._activate(row);
+var TREE_KEYS = {
+  ArrowDown: move,
+  ArrowUp: move,
+  Home: move,
+  End: move,
+  ArrowRight: (tree, row) => tree._openOrEnter(row),
+  ArrowLeft: (tree, row) => tree._closeOrLeave(row),
+  "*": (tree, row) => tree._openSiblings(row),
+  Enter: activate,
+  " ": activate
+};
+var typeahead = (tree, row, e) => tree._typeahead(row, e.key);
+var MIRRORED = { ArrowLeft: "ArrowRight", ArrowRight: "ArrowLeft" };
+var TreeSelect = class extends FormSelect {
+  constructor(el, options) {
+    super(el, options);
+    /** What typeahead has read so far, and the timer that clears it. */
+    this._typed = "";
+    this._handleTreeKeydown = Utils.ignoringComposition((e) => {
+      const row = Utils.eventTarget(e)?.closest('li[role="treeitem"]');
+      const action = row && this._keyFor(e);
+      if (!action) return;
+      e.preventDefault();
+      e.stopPropagation();
+      action(this, row, e);
+    });
+    // Only a row's label acts. A disabled row passes clicks through to its
+    // group, which must not toggle the branch around it.
+    this._handleTreeClick = (e) => {
+      const target = Utils.eventTarget(e);
+      if (!this.tree.contains(target)) return;
+      const label = target.closest('li[role="treeitem"] > span');
+      e.preventDefault();
+      e.stopPropagation();
+      if (label) this._activate(label.parentElement);
+    };
+    if (!this.menuEl) return;
+    const { signal } = this._events;
+    if (!this._searchInput) {
+      this.menuEl.setAttribute("role", "presentation");
+      this.input.setAttribute("aria-haspopup", "tree");
+      this.input.setAttribute("aria-controls", this.tree.id);
+    }
+    this.menuEl.removeAttribute("aria-multiselectable");
+    this._nameTree();
+    this._leaveImplicitBranch();
+    this._handleSelectChange();
+    if (!this._searchInput) this.menuEl.addEventListener("keydown", this._handleTreeKeydown, { signal, capture: true });
+    this.menuEl.addEventListener("click", this._handleTreeClick, { signal, capture: true });
+  }
+  _setValueToInput() {
+    if (this.isMultiple) this._branches.forEach((option) => {
+      option.selected = false;
+    });
+    super._setValueToInput();
+  }
+  _canSearch() {
+    return this.options.searchable;
+  }
+  _searchList() {
+    return this.tree;
+  }
+  _searchRows() {
+    return this._enabledRows();
+  }
+  _filterSearch(query) {
+    const matches = this._matchingRows(query);
+    this.tree.querySelectorAll('li[role="treeitem"]').forEach((row) => {
+      row.hidden = !matches.has(row);
+    });
+    this._searchExpansion(query);
+  }
+  _matchingRows(query) {
+    const matches = /* @__PURE__ */ new Set();
+    this._values.filter(({ el }) => el.textContent.trim().toLowerCase().includes(query)).forEach(({ optionEl }) => {
+      for (let row = optionEl; row; row = this._parentRow(row)) matches.add(row);
+    });
+    return matches;
+  }
+  _searchExpansion(query) {
+    if (query) {
+      this._searchOpen ?? (this._searchOpen = this._openValues());
+      this._branches.forEach((_option, row) => {
+        if (!row.hidden) this._setExpanded(row, true);
+      });
+      return;
+    }
+    const saved = this._searchOpen;
+    this._searchOpen = void 0;
+    if (saved) this._branches.forEach((option, row) => this._setExpanded(row, saved.has(option.value)));
+  }
+  _searchNavigate(e) {
+    if (e.target === this._searchInput) super._searchNavigate(e);
+    else this._handleTreeKeydown(e);
+  }
+  destroy() {
+    clearTimeout(this._typedTimer);
+    this._restoreBranches();
+    super.destroy();
+  }
+  /**
+   * Rebuilds the tree from the native options, keeping open each branch whose
+   * value is still there and, while the popup is open, focus on the same row.
+   */
+  refresh() {
+    const focused = this._focusedOption();
+    this._keepOpen = this._searchOpen ?? this._openValues();
+    super.refresh();
+    this._keepOpen = void 0;
+    this._restoreOpenFocus(focused);
+  }
+  _restoreOpenFocus(option) {
+    if (option && this.menu?.isOpen) this._restoreFocus(option);
+  }
+  /** The option whose row has focus, if one does. */
+  _focusedOption() {
+    const root = this.menuEl?.getRootNode();
+    return this._optionOf(root?.activeElement?.closest('li[role="treeitem"]'));
+  }
+  /** The values of the open branches. */
+  _openValues() {
+    return new Set(Array.from(this._branches ?? [], ([li, option]) => li.ariaExpanded === "true" ? option.value : null));
+  }
+  /** Focuses the row for `option` again, or the first enabled row once it is gone or disabled, or the field. */
+  _restoreFocus(option) {
+    const row = this._rowOf(option);
+    this._expandTo(row);
+    const rows = this._enabledRows();
+    const target = rows.includes(row) ? row : rows[0];
+    if (target) this._focusRow(target);
+    else (this._searchInput ?? this.input).focus();
+  }
+  /** Names the tree as the field is named: aria-labelledby, then aria-label, then its labels. */
+  _nameTree() {
+    const { input } = this;
+    if (input.hasAttribute("aria-labelledby")) this.tree.setAttribute("aria-labelledby", input.getAttribute("aria-labelledby"));
+    else if (input.ariaLabel) this.tree.ariaLabel = input.ariaLabel;
+    else this._labelTree();
+  }
+  _labelTree() {
+    const ids = Array.from(this.input.labels ?? [], (label, index) => label.id || (label.id = `${this.input.id}-label-${index}`));
+    if (ids.length) this.tree.setAttribute("aria-labelledby", ids.join(" "));
+  }
+  // The tree takes its keys and clicks on the menu itself.
+  _setupOptionHandlers() {
+  }
+  _buildOptions() {
+    this._restoreBranches();
+    this._branches = /* @__PURE__ */ new Map();
+    this.selectOptions = this._nativeOptions();
+    this._values = [];
+    const options = this.selectOptions.filter((option) => option.tagName === "OPTION");
+    if (!this.tree) {
+      this.tree = document.createElement("ul");
+      this.tree.id = "select-tree-" + Utils.guid();
+      this.tree.setAttribute("role", "tree");
+    }
+    this.tree.ariaMultiSelectable = String(this.isMultiple);
+    this.tree.replaceChildren(...optionTree(options).map((node) => this._row(node)));
+    this.menuEl.append(this.tree);
+  }
+  /**
+   * A select with no selected option picks its first one, which is often a
+   * branch, and disabling the branch does not move the selection. Unless the
+   * markup selected it, move to the option a form reset would pick now that
+   * branches are disabled: the first enabled leaf, or none. Only on start:
+   * after that a selected branch is one a script chose.
+   */
+  _leaveImplicitBranch() {
+    if (this.isMultiple || !this._browserPickedBranch()) return;
+    const leaf = Array.from(this.el.options).find((option) => !option.disabled);
+    if (leaf) leaf.selected = true;
+    else this.el.selectedIndex = -1;
+  }
+  /** Whether the selection is a branch this disabled, which the markup did not select. */
+  _browserPickedBranch() {
+    const chosen = this.el.selectedOptions[0];
+    return !!chosen && !chosen.defaultSelected && this._disabledBranches.has(chosen);
+  }
+  _row(node) {
+    const li = document.createElement("li");
+    li.id = "select-option-" + Utils.guid();
+    li.setAttribute("role", "treeitem");
+    li.tabIndex = -1;
+    const label = document.createElement("span");
+    label.textContent = node.option.textContent;
+    li.append(label);
+    if (node.children.length) this._branch(li, node);
+    else this._leaf(li, node.option);
+    return li;
+  }
+  _branch(li, node) {
+    const group = document.createElement("ul");
+    group.setAttribute("role", "group");
+    group.append(...node.children.map((child) => this._row(child)));
+    li.append(group);
+    this._setExpanded(li, !!this._keepOpen?.has(node.option.value));
+    this._branches.set(li, node.option);
+    if (node.option.disabled) return;
+    node.option.disabled = true;
+    this._disabledBranches.add(node.option);
+  }
+  _leaf(li, option) {
+    if (this.el.matches(":disabled") || option.disabled) {
+      li.classList.add("disabled");
+      li.ariaDisabled = "true";
+    }
+    this._values.push({ el: option, optionEl: li });
+  }
+  _restoreBranches() {
+    this._disabledBranches?.forEach((option) => {
+      option.disabled = false;
+    });
+    this._disabledBranches = /* @__PURE__ */ new Set();
+  }
+  _setExpanded(li, open) {
+    li.ariaExpanded = String(open);
+    li.querySelector(":scope > ul").hidden = !open;
+  }
+  /** The rows not inside a closed branch, in document order. */
+  _visibleRows() {
+    return Array.from(this.tree.querySelectorAll('li[role="treeitem"]')).filter((li) => !li.closest("[hidden]"));
+  }
+  _enabledRows() {
+    return this._visibleRows().filter((row) => !row.matches(".disabled"));
+  }
+  _focusRow(row) {
+    row?.focus({ preventScroll: true });
+    row?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+  /** Opens the chosen leaf's branches and focuses it, or the first row a person can choose or open. */
+  _focusSelected() {
+    if (!this.menu.options.autoFocus || Utils.focusIsIn(this.menuEl)) return;
+    const chosen = this._values.find(({ el, optionEl }) => el.selected && !optionEl.matches(".disabled"));
+    this._restoreFocus(chosen?.el);
+  }
+  /** Opens every branch around `row`. */
+  _expandTo(row) {
+    for (let branch = this._parentRow(row); branch; branch = this._parentRow(branch)) this._setExpanded(branch, true);
+  }
+  /** The branch row holding `row`, never an element outside the tree. */
+  _parentRow(row) {
+    const parent = row?.parentElement.closest('li[role="treeitem"]');
+    return this._branches.has(parent) ? parent : null;
+  }
+  _optionOf(row) {
+    return this._branches?.get(row) ?? this._values?.find(({ optionEl }) => optionEl === row)?.el;
+  }
+  _rowOf(option) {
+    const branch = Array.from(this._branches).find(([, branchOption]) => branchOption === option)?.[0];
+    return branch ?? this._values.find(({ el }) => el === option)?.optionEl;
+  }
+  /** Chooses a leaf, or opens or closes a branch. */
+  _activate(row) {
+    if (row.closest("[hidden]")) return;
+    if (this._branches.has(row)) this._toggle(row, row.ariaExpanded !== "true");
+    else this._selectOptionElement(row);
+  }
+  /** Opens a closed branch, or moves into an open one. */
+  _openOrEnter(row) {
+    if (!this._branches.has(row)) return;
+    if (row.ariaExpanded !== "true") this._toggle(row, true);
+    else this._focusRow(row.querySelector(":scope > ul > li:not(.disabled, [hidden])"));
+  }
+  /** Closes an open branch, or moves to the parent row. */
+  _closeOrLeave(row) {
+    if (row.ariaExpanded === "true") this._toggle(row, false);
+    else this._focusRow(this._parentRow(row));
+  }
+  /** Opens every branch beside `row`. */
+  _openSiblings(row) {
+    Array.from(row.parentElement.children).forEach((sibling) => {
+      if (this._branches.has(sibling) && !sibling.hasAttribute("hidden")) this._toggle(sibling, true);
+    });
+  }
+  /**
+   * Moves to the next row whose text starts with the characters typed in the
+   * last second, as Menu's typeahead does. A repeated search starts on the
+   * focused row, so typing more of its text keeps it.
+   */
+  _typeahead(row, key) {
+    clearTimeout(this._typedTimer);
+    this._typed += key.toLowerCase();
+    this._typedTimer = setTimeout(() => {
+      this._typed = "";
+    }, 1e3);
+    const rows = this._enabledRows();
+    const from = rows.indexOf(row) + (this._typed.length === 1 ? 1 : 0);
+    const match = [...rows.slice(from), ...rows.slice(0, from)].find((candidate) => candidate.firstChild.textContent.trim().toLowerCase().startsWith(this._typed));
+    this._focusRow(match);
+  }
+  _toggle(row, open) {
+    this._setExpanded(row, open);
+    if (this.menu?.isOpen) this.menu.recalculateDimensions();
+  }
+  _keyFor(e) {
+    if (!Utils.plainKey(e)) return void 0;
+    return TREE_KEYS[this._logicalKey(e.key)] ?? (e.key.length === 1 ? typeahead : void 0);
+  }
+  /** The key as in a left-to-right tree. */
+  _logicalKey(key) {
+    const rtl = getComputedStyle(this.tree).direction === "rtl";
+    return rtl && MIRRORED[key] || key;
+  }
+};
+TreeSelect.key = "Expressive_TreeSelect";
+
+export {
+  optionTree,
+  TreeSelect
+};
+//# sourceMappingURL=chunk-TM7HPGTV.mjs.map