@expressivecss/expressive 0.14.1 → 0.16.0

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

@@ -0,0 +1,152 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/pullToRefresh.ts
+var _defaults = {
+  threshold: 64,
+  onRefresh: null,
+  i18n: {
+    refreshing: "Refreshing",
+    refreshed: "Refreshed"
+  }
+};
+var SLOP = 4;
+var SCROLLING = /* @__PURE__ */ new Set(["auto", "scroll"]);
+var stopsAt = (node, el) => SCROLLING.has(getComputedStyle(node).overflowY) && (node.scrollTop > 0 || node.contains(el));
+var _PullToRefresh = class _PullToRefresh extends Component {
+  constructor(el, options) {
+    super(el, options);
+    /** Where the finger went down and on what, while it may still become a pull. */
+    this._start = null;
+    this._pulling = false;
+    this._travel = 0;
+    /** The running refresh. A new object each time, so a promise from an earlier one cannot end it. */
+    this._refresh = null;
+    this._onStart = (event) => {
+      if (this._refresh) return;
+      if (event.touches.length !== 1) {
+        this._endPull();
+        return;
+      }
+      const { clientX, clientY } = event.touches[0];
+      this._start = { x: clientX, y: clientY, target: Utils.eventTarget(event) };
+    };
+    this._onMove = (event) => {
+      if (!this._start) return;
+      const { clientX, clientY } = event.touches[0];
+      const dx = clientX - this._start.x;
+      const dy = clientY - this._start.y;
+      if (!this._pulling) this._decide(dx, dy, this._start.target);
+      if (this._pulling) this._drag(event, dy);
+    };
+    this._onEnd = () => {
+      const ready = this._pulling && this._travel >= this.options.threshold;
+      this._endPull();
+      if (ready) this.refresh();
+    };
+    this._endPull = () => {
+      this._start = null;
+      this._pulling = false;
+      this._travel = 0;
+      this.el.classList.remove("pulling");
+      this.el.style.removeProperty("--pull-to-refresh-offset");
+      this.el.style.removeProperty("--pull-to-refresh-progress");
+    };
+    this._onClick = (event) => {
+      const button = Utils.eventTarget(event)?.closest("[data-refresh]");
+      if (button && this.el.contains(button)) this.refresh();
+    };
+    if (!(this.options.threshold > 0)) this.options.threshold = _defaults.threshold;
+    this._status = el.ownerDocument.createElement("span");
+    this._status.className = "pull-to-refresh-status";
+    this._status.setAttribute("role", "status");
+    el.append(this._status);
+    const signal = this._events.signal;
+    el.addEventListener("touchstart", this._onStart, { passive: true, signal });
+    el.addEventListener("touchmove", this._onMove, { passive: false, signal });
+    el.addEventListener("touchend", this._onEnd, { signal });
+    el.addEventListener("touchcancel", this._endPull, { signal });
+    el.addEventListener("click", this._onClick, { signal });
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /** Starts a refresh, as a pull or the refresh button does. Does nothing while one runs. */
+  refresh() {
+    if (this._refresh || _PullToRefresh.getInstance(this.el) !== this) return;
+    const run = { pending: 0 };
+    this._refresh = run;
+    this.el.setAttribute("aria-busy", "true");
+    this._status.textContent = this.options.i18n.refreshing;
+    const settle = () => {
+      if (--run.pending === 0 && this._refresh === run) this.complete();
+    };
+    const detail = {
+      waitUntil: (promise) => {
+        run.pending++;
+        Promise.resolve(promise).finally(settle);
+      }
+    };
+    this._fireRefresh(run, detail);
+  }
+  /** Ends the running refresh: the indicator hides, `aria-busy` goes and the finish is announced. */
+  complete() {
+    if (this._refresh) this._status.textContent = this.options.i18n.refreshed;
+    this._refresh = null;
+    this.el.removeAttribute("aria-busy");
+  }
+  destroy() {
+    this._endPull();
+    this.complete();
+    this._status.remove();
+    super.destroy();
+  }
+  /**
+   * Runs `onRefresh` and fires the event. A callback that throws ends the
+   * refresh it started, so later pulls still work, and the error still reaches the page.
+   */
+  _fireRefresh(run, detail) {
+    try {
+      this._notify("refresh", this.options.onRefresh, { args: [detail], detail });
+    } catch (error) {
+      if (this._refresh === run) this.complete();
+      throw error;
+    }
+  }
+  /**
+   * Whether a downward drag from `target` would scroll something instead: a
+   * scrolled-down scroller inside the container, the container itself, or
+   * the scroller it sits in, which is the page when no ancestor scrolls.
+   */
+  _canScrollUp(target) {
+    let node = target;
+    while (node && !stopsAt(node, this.el)) node = node.parentElement;
+    return (node ?? this.el.ownerDocument.scrollingElement).scrollTop > 0;
+  }
+  /** Pulls once the finger moves down, or leaves the touch to scrolling when it moves another way first. */
+  _decide(dx, dy, target) {
+    if (Math.max(Math.abs(dx), Math.abs(dy)) <= SLOP) return;
+    if (dy > Math.abs(dx) && !this._canScrollUp(target)) this._pulling = true;
+    else this._start = null;
+  }
+  /** Moves the indicator down with the finger, at half its travel, and fades it in toward the threshold. */
+  _drag(event, dy) {
+    if (event.cancelable) event.preventDefault();
+    const { threshold } = this.options;
+    this._travel = Math.max(dy, 0);
+    this.el.classList.add("pulling");
+    this.el.style.setProperty("--pull-to-refresh-offset", `${Math.min(this._travel, threshold * 2) / 2}px`);
+    this.el.style.setProperty("--pull-to-refresh-progress", `${Math.min(this._travel / threshold, 1)}`);
+  }
+};
+_PullToRefresh.key = "Expressive_PullToRefresh";
+var PullToRefresh = _PullToRefresh;
+
+export {
+  PullToRefresh
+};
+//# sourceMappingURL=chunk-T3BNSRP3.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/pullToRefresh.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils } from '../core/utils';\n\n/** What `expressive:refresh` carries, and what `onRefresh` receives. */\nexport interface PullToRefreshDetail {\n  /** Keeps the refresh running until the promise settles, fulfilled or rejected. */\n  waitUntil(promise: PromiseLike<unknown>): void;\n}\n\n/** What the container's status region announces. */\nexport interface PullToRefreshI18nOptions {\n  /** Announced when a refresh starts. */\n  refreshing: string;\n  /** Announced when it finishes. */\n  refreshed: string;\n}\n\nexport interface PullToRefreshOptions extends BaseOptions {\n  /**\n   * How far a finger must pull down, in pixels, for the release to refresh.\n   * A value that is not a positive number falls back to the default.\n   * @default 64\n   */\n  threshold: number;\n  /**\n   * Called when a refresh starts, with the event's detail.\n   * @default null\n   */\n  onRefresh: ((detail: PullToRefreshDetail) => void) | null;\n  /** What the status region announces when a refresh starts and finishes. */\n  i18n: Partial<PullToRefreshI18nOptions>;\n}\n\nconst _defaults: PullToRefreshOptions = {\n  threshold: 64,\n  onRefresh: null,\n  i18n: {\n    refreshing: 'Refreshing',\n    refreshed: 'Refreshed'\n  }\n};\n\n/** One refresh, with how many `waitUntil()` promises it still waits for. */\ntype Run = { pending: number };\n\n/** Past this the finger was moving, not resting. Hand jitter, in pixels. */\nconst SLOP = 4;\n/** `overflow-y` values that make an element a scroll container. */\nconst SCROLLING = new Set(['auto', 'scroll']);\n\n/**\n * Whether the walk up from a touch stops at `node`: a scroll container that\n * is scrolled down, so a downward drag scrolls it, or the one that holds the\n * pull-to-refresh container, which decides on its own.\n */\nconst stopsAt = (node: Element, el: Element) =>\n  SCROLLING.has(getComputedStyle(node).overflowY) && (node.scrollTop > 0 || node.contains(el));\n\n/**\n * Pull-to-refresh. A touch pull down from the top of the container, or a\n * `[data-refresh]` button inside it, starts a refresh. The refresh runs until\n * every promise passed to `waitUntil()` settles or the page calls `complete()`.\n *\n * Touch events rather than pointer events: a pointer drag the browser takes\n * for a pan ends in `pointercancel`, and Safari has no directional\n * `touch-action` to keep a downward pull from it. A mouse never fires touch\n * events; a stylus does where the browser reports it as touch, as Safari on\n * iPadOS does.\n */\nexport class PullToRefresh extends Component<PullToRefreshOptions> {\n  static key = 'Expressive_PullToRefresh';\n  /** Where the finger went down and on what, while it may still become a pull. */\n  private _start: { x: number; y: number; target: Element | null } | null = null;\n  private _pulling = false;\n  private _travel = 0;\n  /** The running refresh. A new object each time, so a promise from an earlier one cannot end it. */\n  private _refresh: Run | null = null;\n  /**\n   * Announces the start and the finish. The author's indicator cannot: it is\n   * hidden once the refresh ends, which would drop the finish.\n   */\n  private _status: HTMLElement;\n\n  constructor(el: HTMLElement, options: Partial<PullToRefreshOptions>) {\n    super(el, options);\n    // Markup options are untrusted; zero or less would refresh on any pull.\n    if (!(this.options.threshold > 0)) this.options.threshold = _defaults.threshold;\n    this._status = el.ownerDocument.createElement('span');\n    this._status.className = 'pull-to-refresh-status';\n    this._status.setAttribute('role', 'status');\n    el.append(this._status);\n    const signal = this._events.signal;\n    el.addEventListener('touchstart', this._onStart, { passive: true, signal });\n    // Not passive: a pull cancels the move so the container does not also scroll.\n    el.addEventListener('touchmove', this._onMove, { passive: false, signal });\n    el.addEventListener('touchend', this._onEnd, { signal });\n    el.addEventListener('touchcancel', this._endPull, { signal });\n    el.addEventListener('click', this._onClick, { signal });\n  }\n\n  static get defaults(): PullToRefreshOptions {\n    return _defaults;\n  }\n\n  /** Starts a refresh, as a pull or the refresh button does. Does nothing while one runs. */\n  refresh() {\n    if (this._refresh || PullToRefresh.getInstance(this.el) !== this) return;\n    const run: Run = { pending: 0 };\n    this._refresh = run;\n    this.el.setAttribute('aria-busy', 'true');\n    this._status.textContent = this.options.i18n.refreshing;\n    const settle = () => {\n      if (--run.pending === 0 && this._refresh === run) this.complete();\n    };\n    const detail: PullToRefreshDetail = {\n      waitUntil: (promise) => {\n        run.pending++;\n        // finally() passes a rejection on, so a failure the page does not\n        // catch still reaches unhandledrejection.\n        Promise.resolve(promise).finally(settle);\n      }\n    };\n    this._fireRefresh(run, detail);\n  }\n\n  /** Ends the running refresh: the indicator hides, `aria-busy` goes and the finish is announced. */\n  complete() {\n    if (this._refresh) this._status.textContent = this.options.i18n.refreshed;\n    this._refresh = null;\n    this.el.removeAttribute('aria-busy');\n  }\n\n  destroy() {\n    this._endPull();\n    this.complete();\n    this._status.remove();\n    super.destroy();\n  }\n\n  /**\n   * Runs `onRefresh` and fires the event. A callback that throws ends the\n   * refresh it started, so later pulls still work, and the error still reaches the page.\n   */\n  private _fireRefresh(run: Run, detail: PullToRefreshDetail) {\n    try {\n      this._notify('refresh', this.options.onRefresh, { args: [detail], detail });\n    } catch (error) {\n      if (this._refresh === run) this.complete();\n      throw error;\n    }\n  }\n\n  /**\n   * Whether a downward drag from `target` would scroll something instead: a\n   * scrolled-down scroller inside the container, the container itself, or\n   * the scroller it sits in, which is the page when no ancestor scrolls.\n   */\n  private _canScrollUp(target: Element | null) {\n    let node = target;\n    while (node && !stopsAt(node, this.el)) node = node.parentElement;\n    return (node ?? this.el.ownerDocument.scrollingElement!).scrollTop > 0;\n  }\n\n  private _onStart = (event: TouchEvent) => {\n    if (this._refresh) return;\n    // A second finger is a pinch or a mistake, not a pull.\n    if (event.touches.length !== 1) {\n      this._endPull();\n      return;\n    }\n    const { clientX, clientY } = event.touches[0];\n    this._start = { x: clientX, y: clientY, target: Utils.eventTarget(event) };\n  };\n\n  private _onMove = (event: TouchEvent) => {\n    if (!this._start) return;\n    const { clientX, clientY } = event.touches[0];\n    const dx = clientX - this._start.x;\n    const dy = clientY - this._start.y;\n    if (!this._pulling) this._decide(dx, dy, this._start.target);\n    if (this._pulling) this._drag(event, dy);\n  };\n\n  /** Pulls once the finger moves down, or leaves the touch to scrolling when it moves another way first. */\n  private _decide(dx: number, dy: number, target: Element | null) {\n    if (Math.max(Math.abs(dx), Math.abs(dy)) <= SLOP) return;\n    if (dy > Math.abs(dx) && !this._canScrollUp(target)) this._pulling = true;\n    else this._start = null;\n  }\n\n  /** Moves the indicator down with the finger, at half its travel, and fades it in toward the threshold. */\n  private _drag(event: TouchEvent, dy: number) {\n    if (event.cancelable) event.preventDefault();\n    const { threshold } = this.options;\n    this._travel = Math.max(dy, 0);\n    this.el.classList.add('pulling');\n    this.el.style.setProperty('--pull-to-refresh-offset', `${Math.min(this._travel, threshold * 2) / 2}px`);\n    this.el.style.setProperty('--pull-to-refresh-progress', `${Math.min(this._travel / threshold, 1)}`);\n  }\n\n  private _onEnd = () => {\n    const ready = this._pulling && this._travel >= this.options.threshold;\n    this._endPull();\n    if (ready) this.refresh();\n  };\n\n  private _endPull = () => {\n    this._start = null;\n    this._pulling = false;\n    this._travel = 0;\n    this.el.classList.remove('pulling');\n    this.el.style.removeProperty('--pull-to-refresh-offset');\n    this.el.style.removeProperty('--pull-to-refresh-progress');\n  };\n\n  private _onClick = (event: MouseEvent) => {\n    const button = Utils.eventTarget(event)?.closest('[data-refresh]');\n    if (button && this.el.contains(button)) this.refresh();\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,108 @@
+import {
+  Utils,
+  controllerFor
+} from "./chunk-ZVLOUDIJ.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-TFABTUAZ.mjs.map

package/dist/js/chunks/chunk-TFABTUAZ.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": []
+}