@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-SFI2U4YW.mjs → chunk-MA2SZZFB.mjs}

@@ -1,9 +1,12 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  controllerFor,
+  deepActiveElement,
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/lightbox.ts
 var _defaults = {
@@ -14,16 +17,17 @@ var _defaults = {
   onCloseStart: null,
   onCloseEnd: null
 };
-var _Lightbox = class _Lightbox extends Component {
+var Lightbox = class extends Component {
   constructor(el, options) {
-    super(el, options, _Lightbox);
-    /** Ancestors forced to `overflow: visible`, with the inline value to put back. */
-    this._changedAncestorList = [];
+    super(el, options);
     this._timers = /* @__PURE__ */ new Map();
     this._motion = window.matchMedia("(prefers-reduced-motion: reduce)");
     this._isOpen = false;
     this._destroyed = false;
     this._revision = 0;
+    // Counts opens and closes only. _revision also moves when reduced motion
+    // flushes a transition, which must still report its end.
+    this._phase = 0;
     this._handleMotionChange = () => {
       if (!this._motion.matches) return;
       const callbacks = [...this._timers.values()];
@@ -37,7 +41,7 @@ var _Lightbox = class _Lightbox extends Component {
       }
     };
     this._handleLightboxKeypress = (e) => {
-      if (this._trigger === this.el && (e.key === Utils.keys.ENTER || e.key === " ")) {
+      if (this._trigger === this.el && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
         this._handleLightboxToggle();
       }
@@ -49,36 +53,43 @@ var _Lightbox = class _Lightbox extends Component {
     this._handleWindowChange = () => {
       if (this.overlayActive) this.close();
     };
+    // On keydown, and taken, so a dialog around the lightbox does not close on
+    // the same press.
     this._handleWindowEscape = (e) => {
-      if (e.key === Utils.keys.ESC) this.close();
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      this.close();
+    };
+    // The image zooms in place, not in a modal, so Tab would reach the page
+    // behind the overlay. Tab closes it instead, then moves focus as usual.
+    this._handleWindowTab = (e) => {
+      if (e.key === "Tab") this.close();
     };
     /**
      * Open lightbox.
      */
     this.open = () => {
       if (this._destroyed || this._isOpen) return;
+      this._phase++;
       const revision = this._cancel();
       if (this.overlayActive) this._reset();
-      this._isOpen = true;
       this._updateVars();
       const originRect = this.el.getBoundingClientRect();
       const placeholderRect = this.placeholder.getBoundingClientRect();
+      if (!originRect.width || !originRect.height) return;
+      this._isOpen = true;
       this.originalWidth = originRect.width;
       this.originalHeight = originRect.height;
       this.doneAnimating = false;
       this.el.classList.add("active");
       this.overlayActive = true;
-      if (typeof this.options.onOpenStart === "function")
-        this.options.onOpenStart.call(this, this.el);
-      if (revision !== this._revision) return;
+      if (!this._notify("open", this.options.onOpenStart, { current: () => revision === this._revision })) return;
       this.placeholder.style.width = placeholderRect.width + "px";
       this.placeholder.style.height = placeholderRect.height + "px";
-      this.placeholder.style.position = "relative";
-      this.placeholder.style.top = "0";
-      this.placeholder.style.left = "0";
-      this._makeAncestorsOverflowVisible();
       this.el.style.position = "absolute";
-      this.el.style.zIndex = "1000";
+      this.el.style.inset = "auto";
+      this.el.style.left = placeholderRect.left + window.scrollX + "px";
+      this.el.style.top = placeholderRect.top + window.scrollY + "px";
       this.el.style.willChange = "left, top, width, height";
       this.attrWidth = this.el.getAttribute("width");
       this.attrHeight = this.el.getAttribute("height");
@@ -91,6 +102,7 @@ var _Lightbox = class _Lightbox extends Component {
         this.el.removeAttribute("height");
       }
       this._addOverlay();
+      this._showOnTop(this.el);
       if (this.caption !== "") this._addCaption();
       const widthPercent = this.originalWidth / this.windowWidth;
       const heightPercent = this.originalHeight / this.windowHeight;
@@ -103,9 +115,13 @@ var _Lightbox = class _Lightbox extends Component {
         this.newWidth = this.windowHeight * 0.9 * ratio;
         this.newHeight = this.windowHeight * 0.9;
       }
-      window.addEventListener("scroll", this._handleWindowChange, { passive: true });
-      window.addEventListener("resize", this._handleWindowChange, { passive: true });
-      window.addEventListener("keyup", this._handleWindowEscape);
+      this._windowEvents?.abort();
+      this._windowEvents = controllerFor(this.el);
+      const { signal } = this._windowEvents;
+      window.addEventListener("scroll", this._handleWindowChange, { passive: true, signal });
+      window.addEventListener("resize", this._handleWindowChange, { passive: true, signal });
+      window.addEventListener("keydown", this._handleWindowEscape, { signal });
+      window.addEventListener("keydown", this._handleWindowTab, { signal });
       this._animateImageIn();
     };
     /**
@@ -113,24 +129,17 @@ var _Lightbox = class _Lightbox extends Component {
      */
     this.close = () => {
       if (this._destroyed || !this._isOpen) return;
+      this._phase++;
       const revision = this._cancel();
       this._isOpen = false;
       this.doneAnimating = false;
-      if (typeof this.options.onCloseStart === "function")
-        this.options.onCloseStart.call(this, this.el);
-      if (revision !== this._revision) return;
-      window.removeEventListener("scroll", this._handleWindowChange);
-      window.removeEventListener("resize", this._handleWindowChange);
-      window.removeEventListener("keyup", this._handleWindowEscape);
+      if (!this._notify("close", this.options.onCloseStart, { current: () => revision === this._revision })) return;
+      this._windowEvents?.abort();
+      this._restoreFocus();
       if (this._overlay) this._fadeOut(this._overlay);
       if (this._photoCaption) this._fadeOut(this._photoCaption);
       this._animateImageOut();
     };
-    this.el["Expressive_Lightbox"] = this;
-    this.options = {
-      ..._Lightbox.defaults,
-      ...options
-    };
     this.overlayActive = false;
     this.doneAnimating = true;
     this.placeholder = document.createElement("div");
@@ -149,53 +158,34 @@ var _Lightbox = class _Lightbox extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Lightbox.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _Lightbox);
-  }
-  static getInstance(el) {
-    return el["Expressive_Lightbox"];
-  }
   destroy() {
     if (this._destroyed) return;
     this._destroyed = true;
-    const root = this.el.getRootNode();
-    const focused = root.activeElement === this.el;
-    this._removeEventHandlers();
+    const focused = this.el.getRootNode().activeElement === this.el;
     this._cancel();
     this._reset();
     this.placeholder.replaceWith(this.el);
-    let active = document.activeElement;
-    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
-    if (focused && (active === document.body || active === root.host)) this._trigger.focus();
-    if (this._tabindex === null) this.el.removeAttribute("tabindex");
-    else this.el.setAttribute("tabindex", this._tabindex);
-    this.el["Expressive_Lightbox"] = void 0;
+    if (focused) this._restoreFocus();
+    restoreAttribute(this.el, "tabindex", this._tabindex);
+    super.destroy();
+  }
+  // Back to the trigger when focus fell to the body (or the shadow host), as
+  // a click on the overlay, which cannot take focus, leaves it.
+  _restoreFocus() {
+    const root = this.el.getRootNode();
+    const active = deepActiveElement(document);
+    if ([document.body, root.host].includes(active)) this._trigger.focus({ preventScroll: true });
   }
   _reset() {
-    window.removeEventListener("scroll", this._handleWindowChange);
-    window.removeEventListener("resize", this._handleWindowChange);
-    window.removeEventListener("keyup", this._handleWindowEscape);
+    this._windowEvents?.abort();
     this._overlay?.remove();
     this._photoCaption?.remove();
-    for (const ancestor of this._changedAncestorList) {
-      const saved = _Lightbox._overflow.get(ancestor);
-      if (--saved.count === 0) {
-        ancestor.style.setProperty("overflow", saved.value, saved.priority);
-        _Lightbox._overflow.delete(ancestor);
-      }
-    }
-    this._changedAncestorList = [];
+    this.el.removeAttribute("popover");
     if (this.attrWidth != null) this.el.setAttribute("width", this.attrWidth);
     if (this.attrHeight != null) this.el.setAttribute("height", this.attrHeight);
     this.el.classList.remove("active");
     this.placeholder.removeAttribute("style");
-    if (this.originInlineStyles === null) this.el.removeAttribute("style");
-    else this.el.setAttribute("style", this.originInlineStyles);
+    restoreAttribute(this.el, "style", this.originInlineStyles);
     this.overlayActive = false;
     this._isOpen = false;
     this.doneAnimating = true;
@@ -217,37 +207,23 @@ var _Lightbox = class _Lightbox extends Component {
     this._timers.set(timer, callback);
   }
   _setupEventHandlers() {
-    this._motion.addEventListener("change", this._handleMotionChange);
-    this._trigger.addEventListener("click", this._handleLightboxToggle);
-    this.el.addEventListener("keydown", this._handleLightboxKeypress);
-  }
-  _removeEventHandlers() {
-    this._motion.removeEventListener("change", this._handleMotionChange);
-    this._trigger.removeEventListener("click", this._handleLightboxToggle);
-    this.el.removeEventListener("keydown", this._handleLightboxKeypress);
+    const { signal } = this._events;
+    this._motion.addEventListener("change", this._handleMotionChange, { signal });
+    this._trigger.addEventListener("click", this._handleLightboxToggle, { signal });
+    this.el.addEventListener("keydown", this._handleLightboxKeypress, { signal });
   }
-  _makeAncestorsOverflowVisible() {
-    this._changedAncestorList = [];
-    let ancestor = this.placeholder.parentNode;
-    while (ancestor != null && ancestor !== document) {
-      const curr = ancestor;
-      if (curr.style && (curr.style.overflow !== "visible" || _Lightbox._overflow.has(curr))) {
-        const saved = _Lightbox._overflow.get(curr) ?? { count: 0, value: curr.style.overflow, priority: curr.style.getPropertyPriority("overflow") };
-        saved.count++;
-        _Lightbox._overflow.set(curr, saved);
-        this._changedAncestorList.push(curr);
-        curr.style.overflow = "visible";
-      }
-      ancestor = ancestor.parentNode ?? ancestor.host;
-    }
+  /**
+   * Shows `el` as a manual popover, so it is in the top layer: no ancestor
+   * clips or covers it, and it stacks above what was shown before it.
+   */
+  _showOnTop(el) {
+    el.setAttribute("popover", "manual");
+    el.showPopover();
   }
-  _offset(el) {
-    const box = el.getBoundingClientRect();
-    const docElem = document.documentElement;
-    return {
-      top: box.top + window.scrollY - docElem.clientTop,
-      left: box.left + window.scrollX - docElem.clientLeft
-    };
+  /** The placeholder's document position, where the image rests. */
+  _restingPlace() {
+    const box = this.placeholder.getBoundingClientRect();
+    return { left: box.left + window.scrollX + "px", top: box.top + window.scrollY + "px" };
   }
   _updateVars() {
     this.windowWidth = window.innerWidth;
@@ -256,6 +232,7 @@ var _Lightbox = class _Lightbox extends Component {
   }
   // Image
   _animateImageIn() {
+    const phase = this._phase;
     this.el.style.maxHeight = this.newHeight.toString() + "px";
     this.el.style.maxWidth = this.newWidth.toString() + "px";
     const duration = this._motion.matches ? 0 : this.options.inDuration;
@@ -263,7 +240,6 @@ var _Lightbox = class _Lightbox extends Component {
     this.el.style.height = this.originalHeight + "px";
     this.el.style.width = this.originalWidth + "px";
     this._schedule(() => {
-      const placeholderOffset = this._offset(this.placeholder);
       this.el.style.transition = `height ${duration}ms ease,
         width ${duration}ms ease,
         left ${duration}ms ease,
@@ -271,15 +247,16 @@ var _Lightbox = class _Lightbox extends Component {
       `;
       this.el.style.height = this.newHeight + "px";
       this.el.style.width = this.newWidth + "px";
-      this.el.style.left = Utils.getDocumentScrollLeft() + this.windowWidth / 2 - placeholderOffset.left - this.newWidth / 2 + "px";
-      this.el.style.top = Utils.getDocumentScrollTop() + this.windowHeight / 2 - placeholderOffset.top - this.newHeight / 2 + "px";
+      this.el.style.left = window.scrollX + (this.windowWidth - this.newWidth) / 2 + "px";
+      this.el.style.top = window.scrollY + (this.windowHeight - this.newHeight) / 2 + "px";
     }, 1);
     this._schedule(() => {
       this.doneAnimating = true;
-      if (typeof this.options.onOpenEnd === "function") this.options.onOpenEnd.call(this, this.el);
+      this._notify("opened", this.options.onOpenEnd, { current: () => phase === this._phase });
     }, duration);
   }
   _animateImageOut() {
+    const phase = this._phase;
     const duration = this._motion.matches ? 0 : this.options.outDuration;
     this.el.style.transition = `height ${duration}ms ease,
       width ${duration}ms ease,
@@ -288,12 +265,10 @@ var _Lightbox = class _Lightbox extends Component {
     `;
     this.el.style.height = this.originalHeight + "px";
     this.el.style.width = this.originalWidth + "px";
-    this.el.style.left = "0";
-    this.el.style.top = "0";
+    Object.assign(this.el.style, this._restingPlace());
     this._schedule(() => {
       this._reset();
-      if (typeof this.options.onCloseEnd === "function")
-        this.options.onCloseEnd.call(this, this.el);
+      this._notify("closed", this.options.onCloseEnd, { current: () => phase === this._phase });
     }, duration);
   }
   // Caption
@@ -303,6 +278,7 @@ var _Lightbox = class _Lightbox extends Component {
     this._photoCaption.innerText = this.caption;
     Utils.portalRoot(this.el).append(this._photoCaption);
     this._photoCaption.style.display = "inline";
+    this._showOnTop(this._photoCaption);
     this._fadeIn(this._photoCaption);
   }
   // Overlay
@@ -318,11 +294,7 @@ var _Lightbox = class _Lightbox extends Component {
       { once: true }
     );
     this.el.before(this._overlay);
-    const overlayOffset = this._overlay.getBoundingClientRect();
-    this._overlay.style.width = this.windowWidth + "px";
-    this._overlay.style.height = this.windowHeight + "px";
-    this._overlay.style.left = -1 * overlayOffset.left + "px";
-    this._overlay.style.top = -1 * overlayOffset.top + "px";
+    this._showOnTop(this._overlay);
     this._fadeIn(this._overlay);
   }
   _fadeIn(el) {
@@ -340,10 +312,9 @@ var _Lightbox = class _Lightbox extends Component {
     el.style.opacity = "0";
   }
 };
-_Lightbox._overflow = /* @__PURE__ */ new WeakMap();
-var Lightbox = _Lightbox;
+Lightbox.key = "Expressive_Lightbox";
 
 export {
   Lightbox
 };
-//# sourceMappingURL=chunk-SFI2U4YW.mjs.map
+//# sourceMappingURL=chunk-MA2SZZFB.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/lightbox.ts"],
+  "sourcesContent": ["import { Utils, controllerFor, deepActiveElement, restoreAttribute } from '../core/utils';\nimport { BaseOptions, Component } from '../core/component';\n\nexport interface LightboxOptions extends BaseOptions {\n  /**\n   * Transition in duration in milliseconds.\n   * @default 275\n   */\n  inDuration: number;\n  /**\n   * Transition out duration in milliseconds.\n   * @default 200\n   */\n  outDuration: number;\n  /**\n   * Callback function called before lightbox is opened.\n   * @default null\n   */\n  onOpenStart: (el: Element) => void;\n  /**\n   * Callback function called after lightbox is opened.\n   * @default null\n   */\n  onOpenEnd: (el: Element) => void;\n  /**\n   * Callback function called before lightbox is closed.\n   * @default null\n   */\n  onCloseStart: (el: Element) => void;\n  /**\n   * Callback function called after lightbox is closed.\n   * @default null\n   */\n  onCloseEnd: (el: Element) => void;\n}\n\nconst _defaults: LightboxOptions = {\n  inDuration: 275,\n  outDuration: 200,\n  onOpenStart: null,\n  onOpenEnd: null,\n  onCloseStart: null,\n  onCloseEnd: null\n};\n\nexport class Lightbox extends Component<LightboxOptions> {\n  /** If the lightbox overlay is showing. */\n  overlayActive: boolean;\n  /** If the lightbox is no longer being animated. */\n  doneAnimating: boolean;\n  /** Caption, if specified. */\n  caption: string;\n  /** Original width of image. */\n  originalWidth: number;\n  /** Original height of image. */\n  originalHeight: number;\n  private originInlineStyles: string;\n  private placeholder: HTMLElement;\n  private newHeight: number;\n  private newWidth: number;\n  private windowWidth: number;\n  private windowHeight: number;\n  private attrWidth: string;\n  private attrHeight: string;\n  private _overlay: HTMLElement;\n  private _photoCaption: HTMLElement;\n  private _trigger: HTMLElement;\n  private _tabindex: string | null;\n  private _timers = new Map<ReturnType<typeof setTimeout>, () => void>();\n  private _motion = window.matchMedia('(prefers-reduced-motion: reduce)');\n  private _isOpen = false;\n  private _destroyed = false;\n  /** Removes the listeners that close an open lightbox. */\n  private _windowEvents: AbortController | undefined;\n  private _revision = 0;\n  // Counts opens and closes only. _revision also moves when reduced motion\n  // flushes a transition, which must still report its end.\n  private _phase = 0;\n\n  constructor(el: HTMLElement, options: Partial<LightboxOptions>) {\n    super(el, options);\n\n    this.overlayActive = false;\n    this.doneAnimating = true;\n    this.placeholder = document.createElement('div');\n    this.placeholder.classList.add('material-placeholder');\n    this.originalWidth = 0;\n    this.originalHeight = 0;\n    this.originInlineStyles = this.el.getAttribute('style');\n    this.caption = this.el.getAttribute('data-caption') || '';\n    this._tabindex = this.el.getAttribute('tabindex');\n    this._trigger = this.el.closest('button') ?? this.el;\n    this.el.tabIndex = this._trigger === this.el ? 0 : -1;\n    // Wrap\n    this.el.before(this.placeholder);\n    this.placeholder.append(this.el);\n    this._setupEventHandlers();\n  }\n\n  static get defaults(): LightboxOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Lightbox';\n\n  destroy() {\n    if (this._destroyed) return;\n    this._destroyed = true;\n    const focused = (this.el.getRootNode() as Document | ShadowRoot).activeElement === this.el;\n    this._cancel();\n    this._reset();\n    this.placeholder.replaceWith(this.el);\n    if (focused) this._restoreFocus();\n    restoreAttribute(this.el, 'tabindex', this._tabindex);\n    super.destroy();\n  }\n\n  // Back to the trigger when focus fell to the body (or the shadow host), as\n  // a click on the overlay, which cannot take focus, leaves it.\n  private _restoreFocus() {\n    const root = this.el.getRootNode() as Document | ShadowRoot;\n    const active = deepActiveElement(document);\n    if ([document.body, (root as ShadowRoot).host].includes(active)) this._trigger.focus({ preventScroll: true });\n  }\n\n  private _reset() {\n    this._windowEvents?.abort();\n    // Removing a popover, or its attribute, takes it out of the top layer.\n    this._overlay?.remove();\n    this._photoCaption?.remove();\n    this.el.removeAttribute('popover');\n    if (this.attrWidth != null) this.el.setAttribute('width', this.attrWidth);\n    if (this.attrHeight != null) this.el.setAttribute('height', this.attrHeight);\n    this.el.classList.remove('active');\n    this.placeholder.removeAttribute('style');\n    restoreAttribute(this.el, 'style', this.originInlineStyles);\n    this.overlayActive = false;\n    this._isOpen = false;\n    this.doneAnimating = true;\n  }\n\n  private _cancel() {\n    for (const timer of this._timers.keys()) clearTimeout(timer);\n    this._timers.clear();\n    return ++this._revision;\n  }\n\n  private _schedule(callback: () => void, delay: number) {\n    if (this._motion.matches) { callback(); return; }\n    const timer = setTimeout(() => { this._timers.delete(timer); callback(); }, delay);\n    this._timers.set(timer, callback);\n  }\n\n  private _handleMotionChange = () => {\n    if (!this._motion.matches) return;\n    const callbacks = [...this._timers.values()];\n    const revision = this._cancel();\n    for (const callback of callbacks) {\n      if (revision !== this._revision) break;\n      callback();\n    }\n    if (this.overlayActive) {\n      for (const el of [this.el, this._overlay, this._photoCaption]) if (el) el.style.transition = 'none';\n    }\n  };\n\n  private _setupEventHandlers() {\n    const { signal } = this._events;\n    this._motion.addEventListener('change', this._handleMotionChange, { signal });\n    this._trigger.addEventListener('click', this._handleLightboxToggle, { signal });\n    this.el.addEventListener('keydown', this._handleLightboxKeypress, { signal });\n  }\n\n  private _handleLightboxKeypress = (e: KeyboardEvent) => {\n    if (this._trigger === this.el && (e.key === 'Enter' || e.key === ' ')) {\n      e.preventDefault();\n      this._handleLightboxToggle();\n    }\n  };\n\n  private _handleLightboxToggle = () => {\n    // If already modal, return to original\n    if (this._isOpen) this.close();\n    else this.open();\n  };\n\n  private _handleWindowChange = () => {\n    if (this.overlayActive) this.close();\n  };\n\n  // On keydown, and taken, so a dialog around the lightbox does not close on\n  // the same press.\n  private _handleWindowEscape = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape') return;\n    e.preventDefault();\n    this.close();\n  };\n\n  // The image zooms in place, not in a modal, so Tab would reach the page\n  // behind the overlay. Tab closes it instead, then moves focus as usual.\n  private _handleWindowTab = (e: KeyboardEvent) => {\n    if (e.key === 'Tab') this.close();\n  };\n\n  /**\n   * Shows `el` as a manual popover, so it is in the top layer: no ancestor\n   * clips or covers it, and it stacks above what was shown before it.\n   */\n  private _showOnTop(el: HTMLElement) {\n    el.setAttribute('popover', 'manual');\n    el.showPopover();\n  }\n\n  /** The placeholder's document position, where the image rests. */\n  private _restingPlace() {\n    const box = this.placeholder.getBoundingClientRect();\n    return { left: box.left + window.scrollX + 'px', top: box.top + window.scrollY + 'px' };\n  }\n\n  private _updateVars(): void {\n    this.windowWidth = window.innerWidth;\n    this.windowHeight = window.innerHeight;\n    this.caption = this.el.getAttribute('data-caption') || '';\n  }\n\n  // Image\n  private _animateImageIn(): void {\n    const phase = this._phase;\n    this.el.style.maxHeight = this.newHeight.toString() + 'px';\n    this.el.style.maxWidth = this.newWidth.toString() + 'px';\n    const duration = this._motion.matches ? 0 : this.options.inDuration;\n    // from\n    this.el.style.transition = 'none';\n    this.el.style.height = this.originalHeight + 'px';\n    this.el.style.width = this.originalWidth + 'px';\n    this._schedule(() => {\n      // easeOutQuad\n      this.el.style.transition = `height ${duration}ms ease,\n        width ${duration}ms ease,\n        left ${duration}ms ease,\n        top ${duration}ms ease\n      `;\n      // to\n      this.el.style.height = this.newHeight + 'px';\n      this.el.style.width = this.newWidth + 'px';\n      this.el.style.left = window.scrollX + (this.windowWidth - this.newWidth) / 2 + 'px';\n      this.el.style.top = window.scrollY + (this.windowHeight - this.newHeight) / 2 + 'px';\n    }, 1);\n\n    this._schedule(() => {\n      this.doneAnimating = true;\n      this._notify('opened', this.options.onOpenEnd, { current: () => phase === this._phase });\n    }, duration);\n\n  }\n  private _animateImageOut(): void {\n    const phase = this._phase;\n    const duration = this._motion.matches ? 0 : this.options.outDuration;\n    // easeOutQuad\n    this.el.style.transition = `height ${duration}ms ease,\n      width ${duration}ms ease,\n      left ${duration}ms ease,\n      top ${duration}ms ease\n    `;\n    // to\n    this.el.style.height = this.originalHeight + 'px'; // was originalWidth\n    this.el.style.width = this.originalWidth + 'px';\n    Object.assign(this.el.style, this._restingPlace());\n    this._schedule(() => {\n      this._reset();\n      // onCloseEnd callback\n      this._notify('closed', this.options.onCloseEnd, { current: () => phase === this._phase });\n    }, duration);\n  }\n\n  // Caption\n  private _addCaption(): void {\n    this._photoCaption = document.createElement('div');\n    this._photoCaption.classList.add('lightbox-caption');\n    this._photoCaption.innerText = this.caption;\n    Utils.portalRoot(this.el).append(this._photoCaption);\n    this._photoCaption.style.display = 'inline';\n    this._showOnTop(this._photoCaption);\n    this._fadeIn(this._photoCaption);\n  }\n\n  // Overlay\n  private _addOverlay(): void {\n    this._overlay = document.createElement('div');\n    this._overlay.id = 'lightbox-overlay';\n    this._overlay.addEventListener(\n      'click',\n      (event) => {\n        event.stopPropagation();\n        this.close();\n      },\n      { once: true }\n    );\n\n    this.el.before(this._overlay);\n    this._showOnTop(this._overlay);\n    this._fadeIn(this._overlay);\n  }\n\n  private _fadeIn(el: HTMLElement): void {\n    el.style.transition = 'none';\n    el.style.opacity = '0';\n    const duration = this._motion.matches ? 0 : this.options.inDuration;\n    this._schedule(() => {\n      el.style.transition = `opacity ${duration}ms ease`;\n      el.style.opacity = '1';\n    }, 1);\n  }\n\n  private _fadeOut(el: HTMLElement): void {\n    const duration = this._motion.matches ? 0 : this.options.outDuration;\n    el.style.transition = `opacity ${duration}ms ease`;\n    el.style.opacity = '0';\n  }\n\n  /**\n   * Open lightbox.\n   */\n  open = () => {\n    if (this._destroyed || this._isOpen) return;\n    this._phase++;\n    const revision = this._cancel();\n    if (this.overlayActive) this._reset();\n    this._updateVars();\n    // Both rects are read up front: measuring the placeholder after writing\n    // its width forced a second layout for the height.\n    const originRect = this.el.getBoundingClientRect();\n    const placeholderRect = this.placeholder.getBoundingClientRect();\n    // An image not yet loaded, or hidden, has no size to zoom from; the\n    // ratios below would be 0 / 0.\n    if (!originRect.width || !originRect.height) return;\n    this._isOpen = true;\n    this.originalWidth = originRect.width;\n    this.originalHeight = originRect.height;\n    // Set states\n    this.doneAnimating = false;\n    this.el.classList.add('active');\n    this.overlayActive = true;\n    // onOpenStart callback\n    if (!this._notify('open', this.options.onOpenStart, { current: () => revision === this._revision })) return;\n    // Set positioning for placeholder\n    this.placeholder.style.width = placeholderRect.width + 'px';\n    this.placeholder.style.height = placeholderRect.height + 'px';\n    // In the top layer the image is positioned in the document, starting\n    // where the placeholder holds its place.\n    this.el.style.position = 'absolute';\n    this.el.style.inset = 'auto';\n    this.el.style.left = placeholderRect.left + window.scrollX + 'px';\n    this.el.style.top = placeholderRect.top + window.scrollY + 'px';\n    this.el.style.willChange = 'left, top, width, height';\n    // Change from width or height attribute to css\n    this.attrWidth = this.el.getAttribute('width');\n    this.attrHeight = this.el.getAttribute('height');\n    if (this.attrWidth) {\n      this.el.style.width = this.attrWidth + 'px';\n      this.el.removeAttribute('width');\n    }\n    if (this.attrHeight) {\n      this.el.style.height = this.attrHeight + 'px'; // was width, from the height attribute\n      this.el.removeAttribute('height');\n    }\n    // The overlay, the image and the caption go into the top layer in that\n    // order, so each stacks above the one before.\n    this._addOverlay();\n    this._showOnTop(this.el);\n    if (this.caption !== '') this._addCaption();\n    // Resize Image\n    const widthPercent = this.originalWidth / this.windowWidth;\n    const heightPercent = this.originalHeight / this.windowHeight;\n    if (widthPercent > heightPercent) {\n      // Width first\n      const ratio = this.originalHeight / this.originalWidth;\n      this.newWidth = this.windowWidth * 0.9;\n      this.newHeight = this.windowWidth * 0.9 * ratio;\n    } else {\n      // Height first\n      const ratio = this.originalWidth / this.originalHeight;\n      this.newWidth = this.windowHeight * 0.9 * ratio;\n      this.newHeight = this.windowHeight * 0.9;\n    }\n    // Handle Exit triggers\n    this._windowEvents?.abort();\n    this._windowEvents = controllerFor(this.el);\n    const { signal } = this._windowEvents;\n    window.addEventListener('scroll', this._handleWindowChange, { passive: true, signal });\n    window.addEventListener('resize', this._handleWindowChange, { passive: true, signal });\n    window.addEventListener('keydown', this._handleWindowEscape, { signal });\n    window.addEventListener('keydown', this._handleWindowTab, { signal });\n    this._animateImageIn();\n  };\n\n  /**\n   * Close lightbox.\n   */\n  close = () => {\n    if (this._destroyed || !this._isOpen) return;\n    this._phase++;\n    const revision = this._cancel();\n    this._isOpen = false;\n    this.doneAnimating = false;\n    // onCloseStart callback\n    if (!this._notify('close', this.options.onCloseStart, { current: () => revision === this._revision })) return;\n    // disable exit handlers\n    this._windowEvents?.abort();\n    this._restoreFocus();\n    if (this._overlay) this._fadeOut(this._overlay);\n    if (this._photoCaption) this._fadeOut(this._photoCaption);\n    this._animateImageOut();\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,121 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/inputMask.ts
+var _defaults = Object.freeze({});
+var SLOTS = { "0": /[0-9]/, a: /\p{L}/u, "*": /[0-9\p{L}]/u };
+var DELETES = { deleteContentBackward: -1, deleteContentForward: 1 };
+var deleteStep = (e) => e.isComposing || !e.cancelable ? void 0 : DELETES[e.inputType];
+var parse = (mask) => (mask.match(/\\[^]|[^]/gu) ?? []).map((part) => SLOTS[part] ? { accepts: SLOTS[part] } : { literal: part.slice(-1) });
+function landing(tokens, t, ch) {
+  if (tokens[t]?.literal === ch) return t;
+  const slot = tokens.findIndex((token, i) => i >= t && "accepts" in token);
+  return slot < 0 ? tokens.length : slot;
+}
+function place(tokens, t, ch, chars) {
+  const at = landing(tokens, t, ch);
+  const token = tokens[at];
+  if (!token) return t;
+  if ("literal" in token) return at + 1;
+  if (!token.accepts.test(ch)) return t;
+  chars.push(ch);
+  return at + 1;
+}
+function read(tokens, value, caret) {
+  const chars = [];
+  let t = 0;
+  let at = 0;
+  let before = 0;
+  for (const typed of value) {
+    for (const ch of typed.normalize("NFKC")) t = place(tokens, t, ch, chars);
+    at += typed.length;
+    if (at <= caret) before = chars.length;
+  }
+  return { chars, before };
+}
+function write(tokens, chars) {
+  let text = "";
+  let pending = "";
+  const ends = [];
+  for (const token of tokens) {
+    if (ends.length === chars.length) break;
+    if ("literal" in token) pending += token.literal;
+    else {
+      text += pending + chars[ends.length];
+      pending = "";
+      ends.push(text.length);
+    }
+  }
+  return { text, ends };
+}
+var InputMask = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._onInput = (e) => {
+      if (!e.isComposing) this._format();
+    };
+    /**
+     * Backspace after a literal, or Delete before one, would remove the
+     * literal, which the mask then writes back. It removes the slot character
+     * across the literal instead.
+     */
+    this._onBeforeInput = (e) => {
+      const step = deleteStep(e);
+      const index = step && this.el.selectionStart === this.el.selectionEnd ? this._acrossLiteral(step) : -1;
+      if (index < 0) return;
+      e.preventDefault();
+      this._remove(index, e.inputType);
+    };
+    this._format = () => {
+      const caret = this._rewrite();
+      if (caret !== null && this.el.ownerDocument.activeElement === this.el) this.el.setSelectionRange(caret, caret);
+    };
+    this._tokens = parse(el.dataset.mask ?? "");
+    if (!this._tokens.some((token) => "accepts" in token)) return;
+    const signal = this._events.signal;
+    el.addEventListener("input", this._onInput, { capture: true, signal });
+    el.addEventListener("compositionend", this._format, { signal });
+    el.addEventListener("beforeinput", this._onBeforeInput, { signal });
+    afterFormReset(el, () => this._rewrite(), signal);
+    this._rewrite();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  /** The index among the slot characters to delete when the character `step` from the caret is a literal, or -1. */
+  _acrossLiteral(step) {
+    const { selectionStart: caret, value } = this.el;
+    const here = read(this._tokens, value, caret);
+    const index = here.before + Math.min(step, 0);
+    return read(this._tokens, value, caret + step).before === here.before && index in here.chars ? index : -1;
+  }
+  /** Removes slot character `index`, puts the caret where it was, and reports the edit as typing would. */
+  _remove(index, inputType) {
+    const { chars } = read(this._tokens, this.el.value, 0);
+    chars.splice(index, 1);
+    const { text, ends } = write(this._tokens, chars);
+    this.el.value = text;
+    const caret = ends[index - 1] ?? 0;
+    this.el.setSelectionRange(caret, caret);
+    this.el.dispatchEvent(new InputEvent("input", { bubbles: true, composed: true, inputType }));
+  }
+  /** Rewrites the value to the mask. Returns where the caret goes, or null when the value already fit. */
+  _rewrite() {
+    const el = this.el;
+    const { chars, before } = read(this._tokens, el.value, el.selectionEnd ?? el.value.length);
+    const { text, ends } = write(this._tokens, chars);
+    if (text === el.value) return null;
+    el.value = text;
+    return ends[before - 1] ?? 0;
+  }
+};
+InputMask.key = "Expressive_InputMask";
+
+export {
+  InputMask
+};
+//# sourceMappingURL=chunk-MDBZAMIV.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/inputMask.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { afterFormReset } from '../core/utils';\n\nconst _defaults = Object.freeze({});\n\n/** A mask position: a slot that takes the characters `accepts` matches, or a literal the mask writes itself. */\ntype Token = { accepts: RegExp } | { literal: string };\n\n/** What each slot character in a mask accepts. */\nconst SLOTS: Record<string, RegExp> = { '0': /[0-9]/, a: /\\p{L}/u, '*': /[0-9\\p{L}]/u };\n\n/** Which way a one-character delete from a collapsed caret goes. */\nconst DELETES: Record<string, number> = { deleteContentBackward: -1, deleteContentForward: 1 };\n/** How a delete moves, unless it is the IME's or cannot be taken over. */\nconst deleteStep = (e: InputEvent) => (e.isComposing || !e.cancelable ? undefined : DELETES[e.inputType]);\n\n/** Splits a mask into tokens. A backslash makes the character after it a literal. */\nconst parse = (mask: string): Token[] =>\n  (mask.match(/\\\\[^]|[^]/gu) ?? []).map((part) => (SLOTS[part] ? { accepts: SLOTS[part] } : { literal: part.slice(-1) }));\n\n/**\n * The token `ch` lands on from token `t`: the literal at `t` when `ch` is that\n * literal, otherwise the next slot. Only the literal at `t` counts, so a\n * digit is not taken for a literal further on, such as the 1 in `+1 (000)`.\n */\nfunction landing(tokens: Token[], t: number, ch: string) {\n  if ((tokens[t] as { literal?: string })?.literal === ch) return t;\n  const slot = tokens.findIndex((token, i) => i >= t && 'accepts' in token);\n  return slot < 0 ? tokens.length : slot;\n}\n\n/** Feeds `ch` to the mask at token `t`, keeping it in `chars` if a slot takes it. Returns the next token. */\nfunction place(tokens: Token[], t: number, ch: string, chars: string[]) {\n  const at = landing(tokens, t, ch);\n  const token = tokens[at];\n  if (!token) return t;\n  if ('literal' in token) return at + 1;\n  if (!token.accepts.test(ch)) return t;\n  chars.push(ch);\n  return at + 1;\n}\n\n/**\n * The slot characters in `value`, in order, and how many of them come before\n * `caret`. Characters are normalized first, so full-width digits from an IME\n * fill digit slots. A character that neither fits a slot nor matches the next\n * literal is dropped, and so is any past the last slot.\n */\nfunction read(tokens: Token[], value: string, caret: number) {\n  const chars: string[] = [];\n  let t = 0;\n  let at = 0;\n  let before = 0;\n  for (const typed of value) {\n    for (const ch of typed.normalize('NFKC')) t = place(tokens, t, ch, chars);\n    at += typed.length;\n    if (at <= caret) before = chars.length;\n  }\n  return { chars, before };\n}\n\n/**\n * Writes `chars` into the mask's slots, with the literals that come before\n * each filled slot and none after the last. Returns the text and the index\n * just after each slot character.\n */\nfunction write(tokens: Token[], chars: string[]) {\n  let text = '';\n  let pending = '';\n  const ends: number[] = [];\n  for (const token of tokens) {\n    if (ends.length === chars.length) break;\n    if ('literal' in token) pending += token.literal;\n    else {\n      text += pending + chars[ends.length];\n      pending = '';\n      ends.push(text.length);\n    }\n  }\n  return { text, ends };\n}\n\n/**\n * Input mask. Formats a text field's value to the pattern in its `data-mask`\n * attribute as people type, paste or compose: `0` takes a digit, `a` a\n * letter, `*` either, and every other character is a literal the mask writes\n * itself. The form submits the value as the field shows it.\n */\nexport class InputMask extends Component<BaseOptions> {\n  declare el: HTMLInputElement;\n  static key = 'Expressive_InputMask';\n  private _tokens: Token[];\n\n  constructor(el: HTMLInputElement, options: Partial<BaseOptions>) {\n    super(el, options);\n    this._tokens = parse(el.dataset.mask ?? '');\n    // A mask with no slot would format every value to nothing, erasing a\n    // saved value, so the component leaves such a field alone.\n    if (!this._tokens.some((token) => 'accepts' in token)) return;\n    const signal = this._events.signal;\n    // Capture, which runs before the field's own bubble listeners, so the\n    // page's input listeners read the formatted value.\n    el.addEventListener('input', this._onInput, { capture: true, signal });\n    // An IME writes as it composes; the mask waits until it is done. Engines\n    // fire the last input before or after compositionend, and formatting\n    // twice changes nothing.\n    el.addEventListener('compositionend', this._format, { signal });\n    el.addEventListener('beforeinput', this._onBeforeInput, { signal });\n    // The mask formats the value a reset restores, in a shadow root too.\n    afterFormReset(el, () => this._rewrite(), signal);\n    this._rewrite();\n  }\n\n  static get defaults(): BaseOptions {\n    return _defaults;\n  }\n\n  private _onInput = (e: InputEvent) => {\n    if (!e.isComposing) this._format();\n  };\n\n  /**\n   * Backspace after a literal, or Delete before one, would remove the\n   * literal, which the mask then writes back. It removes the slot character\n   * across the literal instead.\n   */\n  private _onBeforeInput = (e: InputEvent) => {\n    const step = deleteStep(e);\n    const index = step && this.el.selectionStart === this.el.selectionEnd ? this._acrossLiteral(step) : -1;\n    if (index < 0) return;\n    e.preventDefault();\n    this._remove(index, e.inputType);\n  };\n\n  /** The index among the slot characters to delete when the character `step` from the caret is a literal, or -1. */\n  private _acrossLiteral(step: number) {\n    const { selectionStart: caret, value } = this.el;\n    const here = read(this._tokens, value, caret);\n    const index = here.before + Math.min(step, 0);\n    // Stepping over a literal passes no slot character.\n    return read(this._tokens, value, caret + step).before === here.before && index in here.chars ? index : -1;\n  }\n\n  /** Removes slot character `index`, puts the caret where it was, and reports the edit as typing would. */\n  private _remove(index: number, inputType: string) {\n    const { chars } = read(this._tokens, this.el.value, 0);\n    chars.splice(index, 1);\n    const { text, ends } = write(this._tokens, chars);\n    this.el.value = text;\n    const caret = ends[index - 1] ?? 0;\n    this.el.setSelectionRange(caret, caret);\n    this.el.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true, inputType }));\n  }\n\n  private _format = () => {\n    const caret = this._rewrite();\n    if (caret !== null && this.el.ownerDocument.activeElement === this.el) this.el.setSelectionRange(caret, caret);\n  };\n\n  /** Rewrites the value to the mask. Returns where the caret goes, or null when the value already fit. */\n  private _rewrite() {\n    const el = this.el;\n    const { chars, before } = read(this._tokens, el.value, el.selectionEnd ?? el.value.length);\n    const { text, ends } = write(this._tokens, chars);\n    if (text === el.value) return null;\n    el.value = text;\n    return ends[before - 1] ?? 0;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,75 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+
+// src/ts/components/loadingOverlay.ts
+var _defaults = {
+  i18n: {
+    loading: "Loading",
+    loaded: "Loaded"
+  }
+};
+var focusLost = (doc) => !doc.activeElement || doc.activeElement === doc.body;
+var LoadingOverlay = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    this._busy = false;
+    /** The region's own `inert`, put back when it clears. */
+    this._wasInert = false;
+    /** The element inside the region that had focus when it became busy. */
+    this._focus = null;
+    this._status = el.ownerDocument.createElement("span");
+    this._status.className = "loading-overlay-status";
+    this._status.setAttribute("role", "status");
+    el.after(this._status);
+    this._observer = new MutationObserver(() => this._sync());
+    this._observer.observe(el, { attributeFilter: ["aria-busy"] });
+    this._sync();
+    if (this._busy) {
+      this._status.textContent = "";
+      requestAnimationFrame(() => this._announceStart());
+    }
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    this._observer.disconnect();
+    if (this._busy) this.el.inert = this._wasInert;
+    this._status.remove();
+    super.destroy();
+  }
+  /** Follows `aria-busy`. Other values than "true" clear, as ARIA treats them. */
+  _sync() {
+    const busy = this.el.getAttribute("aria-busy") === "true";
+    if (busy === this._busy) return;
+    this._busy = busy;
+    if (busy) this._start();
+    else this._clear();
+  }
+  _start() {
+    const active = this.el.getRootNode().activeElement;
+    this._focus = active instanceof HTMLElement && this.el.contains(active) ? active : null;
+    this._wasInert = this.el.inert;
+    this.el.inert = true;
+    this._focus?.blur();
+    this._status.textContent = this.options.i18n.loading;
+  }
+  _clear() {
+    this.el.inert = this._wasInert;
+    this._status.textContent = this.options.i18n.loaded;
+    const focus = this._focus;
+    this._focus = null;
+    if (focus?.isConnected && focusLost(this.el.ownerDocument)) focus.focus();
+  }
+  /** The deferred first announcement, unless the region cleared or the instance went first. */
+  _announceStart() {
+    if (this._busy && this._status.isConnected) this._status.textContent = this.options.i18n.loading;
+  }
+};
+LoadingOverlay.key = "Expressive_LoadingOverlay";
+
+export {
+  LoadingOverlay
+};
+//# sourceMappingURL=chunk-NODZ5VAD.mjs.map