@wpmoo/ui 2.1.0 → 2.2.0

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v2.1.0 (https://wpmoo.org/)
+ * Moo UI moo-ui.js v2.2.0 (https://wpmoo.org/)
  * Copyright 2026 WPMoo Authors
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -247,11 +247,7 @@ var Combobox = class _Combobox {
   _clearStaleSelection() {
     if (this._isMultiple) {
       this._input.value = "";
-      this._options.forEach((option) => {
-        option.hidden = false;
-      });
-      this._syncGroupVisibility();
-      this._empty.hidden = true;
+      this._showAllOptions();
       return;
     }
     const selected = this._selectedOptions()[0] || null;
@@ -262,6 +258,14 @@ var Combobox = class _Combobox {
     this._clearSelection();
     this._input.value = "";
   }
+  _showAllOptions() {
+    this._options.forEach((option) => {
+      option.hidden = false;
+    });
+    this._syncGroupVisibility();
+    this._empty.hidden = true;
+    this._liveRegion.textContent = "";
+  }
   _activeOption() {
     const activeId = this._input.getAttribute("aria-activedescendant");
     if (!activeId) {
@@ -348,6 +352,7 @@ var Combobox = class _Combobox {
     if (this._hidden) {
       this._hidden.value = option.dataset.value || "";
     }
+    this._showAllOptions();
     this._toggleClear(true);
     this._setActiveOption(option);
     this._emitChange();
@@ -440,6 +445,12 @@ var Combobox = class _Combobox {
     }
   }
   _handleKeydown(event) {
+    if (event.isComposing || event.keyCode === 229) {
+      if (event.key === "Tab") {
+        this._closeMenu();
+      }
+      return;
+    }
     const available = this._visibleOptions();
     const current = available.findIndex(
       (option) => option.id === this._input.getAttribute("aria-activedescendant")
@@ -544,12 +555,17 @@ var ContextMenu = class _ContextMenu {
     this._bindEvents();
   }
   dispose() {
+    if (this._disposing) {
+      return;
+    }
+    this._disposing = true;
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
     });
     this._listeners = [];
-    this._dropdown.dispose();
     this._syncExpanded(false);
+    this._dropdown.hide();
+    this._dropdown.dispose();
     this._invoker = null;
     this._pointerRect = null;
     instances2.delete(this._element);
@@ -661,7 +677,7 @@ var ContextMenu = class _ContextMenu {
       event.preventDefault();
       event.stopPropagation();
       const group = radioButton.dataset.contextMenuRadioGroup;
-      this._menu.querySelectorAll(`[data-context-menu-radio-group="${group}"]`).forEach((button) => {
+      this._menu.querySelectorAll(`[data-context-menu-radio-group="${CSS.escape(String(group))}"]`).forEach((button) => {
         const checked = button === radioButton;
         button.classList.toggle("active", checked);
         button.setAttribute("aria-pressed", String(checked));
@@ -749,9 +765,30 @@ function ownerPortalRoot(owner) {
 
 // src/js/components/datatable.js
 var instances3 = /* @__PURE__ */ new WeakMap();
+var SORT_COLLATOR = new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+var PLAIN_NUMBER = /^[-+]?(?:\d+\.?\d*|\.\d+)$/;
+function sortNumber(value) {
+  return PLAIN_NUMBER.test(value) ? Number(value) : null;
+}
+function compareSortValues(a, b) {
+  const aNumber = sortNumber(a);
+  const bNumber = sortNumber(b);
+  if (aNumber !== null && bNumber !== null) {
+    return Math.sign(aNumber - bNumber);
+  }
+  if (aNumber !== null || bNumber !== null) {
+    return aNumber !== null ? -1 : 1;
+  }
+  return SORT_COLLATOR.compare(a, b);
+}
 function normalize2(value) {
   return (value ?? "").toString().trim().toLowerCase();
 }
+var ESCAPE_OWNER_SELECTOR = ".modal, .offcanvas, .dropdown-menu, .popover, [role='dialog'], [role='menu'], [role='listbox']";
+function escapeBelongsElsewhere(event) {
+  const target = event.target;
+  return typeof target?.closest === "function" && (Boolean(target.closest(ESCAPE_OWNER_SELECTOR)) || target.getAttribute("aria-expanded") === "true");
+}
 var DataTable = class _DataTable {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances3.get(element) || null : null;
@@ -1201,7 +1238,7 @@ var DataTable = class _DataTable {
     );
   }
   _sortValue(row, key) {
-    const cell = row.element.querySelector(`:scope > [data-datatable-column="${key}"]`);
+    const cell = row.element.querySelector(`:scope > [data-datatable-column="${CSS.escape(String(key))}"]`);
     if (!cell) {
       return "";
     }
@@ -1228,10 +1265,8 @@ var DataTable = class _DataTable {
       filtered.sort((a, b) => {
         const aValue = this._sortValue(a, this._sortKey);
         const bValue = this._sortValue(b, this._sortKey);
-        if (aValue === bValue) {
-          return a.index - b.index;
-        }
-        return aValue > bValue ? direction : -direction;
+        const order = compareSortValues(aValue, bValue);
+        return order ? order * direction : a.index - b.index;
       });
     } else {
       filtered.sort((a, b) => a.index - b.index);
@@ -1298,7 +1333,7 @@ var DataTable = class _DataTable {
           summary.appendChild(this._createFacetBadge(`${selected.size} selected`));
         } else {
           selected.forEach((value) => {
-            const option = facetRoot.querySelector(`[data-datatable-facet-option="${value}"]`);
+            const option = facetRoot.querySelector(`[data-datatable-facet-option="${CSS.escape(String(value))}"]`);
             const label = option?.querySelector("[data-datatable-facet-option-label]")?.textContent ?? value;
             summary.appendChild(this._createFacetBadge(label));
           });
@@ -1527,17 +1562,17 @@ var DataTable = class _DataTable {
     return withEllipsis;
   }
   _isColumnFixed(key) {
-    return this._element.querySelector(`th[data-datatable-column="${key}"]`)?.hasAttribute("data-datatable-column-fixed") || false;
+    return this._element.querySelector(`th[data-datatable-column="${CSS.escape(String(key))}"]`)?.hasAttribute("data-datatable-column-fixed") || false;
   }
   _setColumnVisible(key, visible, { syncViewToggle = true } = {}) {
     if (!visible && this._isColumnFixed(key)) {
       return;
     }
-    this._element.querySelectorAll(`[data-datatable-column="${key}"], [data-datatable-detail-column="${key}"]`).forEach((cell) => {
+    this._element.querySelectorAll(`[data-datatable-column="${CSS.escape(String(key))}"], [data-datatable-detail-column="${CSS.escape(String(key))}"]`).forEach((cell) => {
       cell.classList.toggle("datatable-col-hidden", !visible);
     });
     if (syncViewToggle) {
-      this._element.querySelectorAll(`[data-datatable-column-toggle="${key}"]`).forEach((toggle) => {
+      this._element.querySelectorAll(`[data-datatable-column-toggle="${CSS.escape(String(key))}"]`).forEach((toggle) => {
         toggle.classList.toggle("active", visible);
         toggle.setAttribute("aria-pressed", String(visible));
       });
@@ -1674,8 +1709,8 @@ var DataTable = class _DataTable {
     if (group) {
       const key = group.dataset.datatableFilterGroup;
       this._showFilterPickerPanel(key);
-      const search = this._element.querySelector(`[data-datatable-filter-option-search="${key}"]`);
-      const option = this._element.querySelector(`[data-datatable-filter-option-key="${key}"]`);
+      const search = this._element.querySelector(`[data-datatable-filter-option-search="${CSS.escape(String(key))}"]`);
+      const option = this._element.querySelector(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`);
       (search || option)?.focus({ preventScroll: true });
       return;
     }
@@ -1690,7 +1725,7 @@ var DataTable = class _DataTable {
     }
     const key = search.dataset.datatableFilterOptionSearch;
     const query = normalize2(search.value);
-    this._element.querySelectorAll(`[data-datatable-filter-option-key="${key}"]`).forEach((option) => {
+    this._element.querySelectorAll(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`).forEach((option) => {
       const label = normalize2(option.querySelector("[data-datatable-filter-option-label]")?.textContent || option.textContent);
       option.closest("li")?.classList.toggle("datatable-filter-option-search-hidden", query.length > 0 && !label.includes(query));
     });
@@ -1707,7 +1742,7 @@ var DataTable = class _DataTable {
     }
     const key = search.dataset.datatableFilterOptionSearch;
     const options = Array.from(
-      this._element.querySelectorAll(`[data-datatable-filter-option-key="${key}"]`)
+      this._element.querySelectorAll(`[data-datatable-filter-option-key="${CSS.escape(String(key))}"]`)
     );
     const firstVisible = options.find(
       (option) => !option.closest("li")?.classList.contains("datatable-filter-option-search-hidden")
@@ -1832,7 +1867,7 @@ var DataTable = class _DataTable {
       }
       row.element.setAttribute(`data-datatable-facet-${key}`, value);
       row.facets[key] = value;
-      const cell = row.element.querySelector(`[data-datatable-column="${key}"]`);
+      const cell = row.element.querySelector(`[data-datatable-column="${CSS.escape(String(key))}"]`);
       if (!cell) {
         return;
       }
@@ -1846,7 +1881,7 @@ var DataTable = class _DataTable {
       if (currentIcon && icon) {
         currentIcon.replaceWith(icon.cloneNode(true));
       }
-      const cardValue = row.cardElement?.querySelector(`[data-datatable-detail-column="${key}"] .datatable-card-value`);
+      const cardValue = row.cardElement?.querySelector(`[data-datatable-detail-column="${CSS.escape(String(key))}"] .datatable-card-value`);
       if (cardValue) {
         cardValue.innerHTML = cell.innerHTML;
       }
@@ -1940,11 +1975,11 @@ var DataTable = class _DataTable {
       }
     });
     this._listen(this._document, "click", (event) => this._handleSortAction(event));
-    this._listen(this._document, "keydown", (event) => {
-      if (event.key === "Escape" && this._selectedIds.size > 0) {
+    this._listen(this._window, "keydown", (event) => {
+      if (event.key === "Escape" && this._selectedIds.size > 0 && !escapeBelongsElsewhere(event)) {
         this._clearSelection();
       }
-    });
+    }, { capture: true });
     this._listen(this._element, "show.bs.dropdown", (event) => {
       this._reparentRowActionMenu(event.target);
       this._reparentSortMenu(event.target);
@@ -2141,6 +2176,15 @@ function dispatch(element, window2, name, detail = {}, cancelable = false) {
     })
   );
 }
+function formDefaultValue(input) {
+  if (!input) {
+    return "";
+  }
+  if (!("datepickerFormDefault" in input.dataset)) {
+    input.dataset.datepickerFormDefault = input.getAttribute("value") || "";
+  }
+  return input.dataset.datepickerFormDefault;
+}
 function setHiddenValue(input, value) {
   if (!input) return;
   input.value = value || "";
@@ -2544,6 +2588,7 @@ var MooCalendar = class _MooCalendar {
       ArrowUp: -7
     };
     let nextDate = null;
+    let stepTowardActive = false;
     if (event.key in keyMap) {
       nextDate = addDays(this._activeDate, keyMap[event.key]);
     } else if (event.key === "Home") {
@@ -2554,10 +2599,13 @@ var MooCalendar = class _MooCalendar {
       const weekStart = firstDayOfWeek(this._config.locale);
       const weekdayOffset = (this._activeDate.getDay() - weekStart + 7) % 7;
       nextDate = addDays(this._activeDate, 6 - weekdayOffset);
-    } else if (event.key === "PageUp") {
-      nextDate = addMonths(this._activeDate, -1);
-    } else if (event.key === "PageDown") {
-      nextDate = addMonths(this._activeDate, 1);
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      const target = addMonths(this._activeDate, event.key === "PageUp" ? -1 : 1);
+      const { minDate, maxDate } = this._config;
+      nextDate = limitToRange(target, minDate, maxDate);
+      stepTowardActive = [minDate, maxDate].some(
+        (edge) => edge && compareDates(nextDate, edge) === 0
+      );
     } else if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
       event.preventDefault();
       this._selectDate(this._activeDate, true);
@@ -2566,7 +2614,8 @@ var MooCalendar = class _MooCalendar {
       return;
     }
     event.preventDefault();
-    this._setActiveDate(nextDate, true, compareDates(nextDate, this._activeDate) < 0 ? -1 : 1);
+    const backward = compareDates(nextDate, this._activeDate) < 0;
+    this._setActiveDate(nextDate, true, backward !== stepTowardActive ? -1 : 1);
   }
   _setActiveDate(date, focus = false, step = 0) {
     const nextDate = step === 0 ? this._nearestEnabledDate(date) : this._nextEnabledDate(date, step);
@@ -2832,7 +2881,7 @@ var MooDatepicker = class _MooDatepicker {
       value: config.value || this._input.value || element.dataset.datepickerValue
     });
     this._placeholder = this._config.placeholder;
-    this._defaultValue = this._input.defaultValue || this._input.getAttribute("value") || "";
+    this._defaultValue = formDefaultValue(this._input);
     this.calendar = MooCalendar.getOrCreateInstance(this._calendarRoot, {
       ...this._config,
       mode: "single",
@@ -2997,8 +3046,8 @@ var MooDateRangePicker = class _MooDateRangePicker {
       endValue: config.endValue || this._endInput.value || element.dataset.datepickerEndValue
     });
     this._placeholder = this._config.placeholder;
-    this._defaultStartValue = this._startInput.defaultValue || this._startInput.getAttribute("value") || "";
-    this._defaultEndValue = this._endInput.defaultValue || this._endInput.getAttribute("value") || "";
+    this._defaultStartValue = formDefaultValue(this._startInput);
+    this._defaultEndValue = formDefaultValue(this._endInput);
     this.calendar = MooCalendar.getOrCreateInstance(this._calendarRoot, this._config);
     rangePickerInstances.set(element, this);
     this._syncFromCalendar();
@@ -3143,6 +3192,13 @@ var MooDateRangePicker = class _MooDateRangePicker {
 
 // src/js/components/sidebar.js
 var instances4 = /* @__PURE__ */ new WeakMap();
+var FLYOUT_FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]";
+function flyoutFocusables(flyout) {
+  const view = flyout.ownerDocument.defaultView;
+  return [...flyout.querySelectorAll(FLYOUT_FOCUSABLE_SELECTOR)].filter(
+    (element) => !element.matches(":disabled") && element.tabIndex >= 0 && !element.closest("[hidden], [inert]") && element.getClientRects().length > 0 && view.getComputedStyle(element).visibility === "visible"
+  );
+}
 var Sidebar = class _Sidebar {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances4.get(element) || null : null;
@@ -3570,7 +3626,37 @@ var Sidebar = class _Sidebar {
       this._closeFlyouts();
     } else {
       this._openFlyout(item);
+      if (event.detail === 0) {
+        if (this._flyout) {
+          flyoutFocusables(this._flyout)[0]?.focus();
+        }
+      }
+    }
+  }
+  // The flyout lives in a portal, away from its trigger, so Escape and Tab
+  // out of it return to the trigger instead of wandering. Tab between its
+  // items stays native; a key a flyout control already handled is left alone.
+  _handleFlyoutKeydown(event) {
+    const owner = this._flyoutOwner;
+    if (event.defaultPrevented || !this._flyout || !owner || !(event.key === "Escape" || event.key === "Tab")) {
+      return false;
+    }
+    const inFlyout = this._flyout.contains(event.target);
+    if (!inFlyout && !(event.key === "Escape" && owner.contains(event.target))) {
+      return false;
     }
+    if (event.key === "Tab") {
+      const items = flyoutFocusables(this._flyout);
+      const edge = event.shiftKey ? items[0] : items[items.length - 1];
+      if (edge && event.target !== edge) {
+        return false;
+      }
+    }
+    event.preventDefault();
+    const trigger = owner.querySelector(":scope > .sidebar-menu-sub-trigger");
+    this._closeFlyouts();
+    trigger?.focus();
+    return true;
   }
   _handleOutsideFlyoutClick(event) {
     if (!this._flyout) {
@@ -3583,6 +3669,9 @@ var Sidebar = class _Sidebar {
     }
   }
   _handleShortcut(event) {
+    if (this._handleFlyoutKeydown(event)) {
+      return;
+    }
     const target = event.target;
     const isEditable = target instanceof this._window.Element && (target.matches("input, textarea, select") || target.isContentEditable);
     if (event.defaultPrevented || event.isComposing || isEditable || !this._config.keyboard || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "b" || !this._isDesktop()) {
@@ -4508,6 +4597,241 @@ var FloatingPanel = class _FloatingPanel {
   }
 };
 
+// src/js/components/image-gallery.js
+var instances9 = /* @__PURE__ */ new WeakMap();
+var SLIDESHOW_INTERVAL = 5e3;
+var RESIZE_DURATION = 250;
+var ImageGallery = class _ImageGallery {
+  static getInstance(element) {
+    return element?.nodeType === 1 ? instances9.get(element) || null : null;
+  }
+  static getOrCreateInstance(element) {
+    return _ImageGallery.getInstance(element) || new _ImageGallery(element);
+  }
+  constructor(element) {
+    if (element?.nodeType !== 1 || !element.matches("[data-image-gallery]")) {
+      throw new TypeError("ImageGallery requires a [data-image-gallery] root element.");
+    }
+    const existing = instances9.get(element);
+    if (existing) return existing;
+    this._element = element;
+    this._window = element.ownerDocument.defaultView;
+    this._dialog = element.querySelector(".modal");
+    this._carousel = this._dialog?.querySelector(".carousel");
+    if (!this._dialog || !this._carousel) {
+      throw new TypeError("ImageGallery requires a lightbox Dialog with a Carousel.");
+    }
+    this._slides = Array.from(this._carousel.querySelectorAll(".carousel-item"));
+    this._counter = this._dialog.querySelector("[data-gallery-counter]");
+    this._caption = this._dialog.querySelector("[data-gallery-caption]");
+    this._credit = this._dialog.querySelector("[data-gallery-credit]");
+    this._stage = this._dialog.querySelector("[data-gallery-stage]");
+    this._frame = this._dialog.querySelector(".modal-dialog");
+    this._progress = this._dialog.querySelector(".progress");
+    this._progressBar = this._progress?.querySelector(".progress-bar");
+    this._progress?.setAttribute("aria-hidden", "true");
+    const controls = (suffix) => this._dialog.id ? element.ownerDocument.getElementById(`${this._dialog.id}-${suffix}`) : null;
+    this._enterButton = controls("fullscreen");
+    this._exitButton = controls("windowed");
+    this._playButton = controls("play");
+    this._pauseButton = controls("pause");
+    this._listeners = [];
+    this._listen(this._dialog, "show.bs.modal", (event) => this._onShow(event));
+    this._listen(this._window, "resize", () => this._layoutStage());
+    this._listen(this._dialog, "shown.bs.modal", () => this._carouselInstance());
+    this._listen(this._carousel, "slide.bs.carousel", (event) => this.show(event.to, false));
+    this._listen(this._carousel, "slid.bs.carousel", () => this._restartTimer());
+    this._listen(this._dialog, "keydown", (event) => this._onKeydown(event));
+    this._listen(this._dialog, "hidden.bs.modal", () => {
+      this.play(false);
+      this.fullscreen(false);
+    });
+    const actions = [
+      [controls("previous"), () => this._step(false)],
+      [controls("next"), () => this._step(true)],
+      [this._playButton, () => this.play(true, true)],
+      [this._pauseButton, () => this.play(false, true)],
+      [this._enterButton, () => this.fullscreen(true, true)],
+      [this._exitButton, () => this.fullscreen(false, true)]
+    ];
+    for (const [button, action] of actions) {
+      if (button) this._listen(button, "click", action);
+    }
+    instances9.set(element, this);
+  }
+  get index() {
+    const active = this._slides.findIndex((slide) => slide.classList.contains("active"));
+    return Math.max(active, 0);
+  }
+  /** Marks photo `index` current, loads it and its neighbours. */
+  show(index, activate = true) {
+    const count = this._slides.length;
+    if (!count) return this;
+    const current = (Number(index) % count + count) % count;
+    if (activate) {
+      this._slides.forEach((slide2, position) => {
+        slide2.classList.toggle("active", position === current);
+      });
+    }
+    for (const offset of [0, 1, -1]) {
+      this._load(this._slides[(current + offset + count) % count]);
+    }
+    const slide = this._slides[current];
+    if (this._caption) {
+      this._caption.textContent = slide.getAttribute("data-gallery-slide-title") || slide.querySelector("img")?.alt || "";
+    }
+    if (this._credit) {
+      const credit = slide.getAttribute("data-gallery-slide-credit") || "";
+      this._credit.textContent = credit;
+      this._credit.classList.toggle("d-none", !credit);
+    }
+    if (this._counter) {
+      const template = this._counter.getAttribute("data-gallery-counter") || "{current} / {total}";
+      this._counter.textContent = template.replaceAll("{current}", String(current + 1)).replaceAll("{total}", String(count));
+    }
+    return this;
+  }
+  /** Starts or stops the slideshow. */
+  play(on = true, moveFocus = false) {
+    this._playing = Boolean(on) && Boolean(this._carouselInstance());
+    this._progress?.classList.toggle("d-none", !this._playing);
+    this._restartTimer();
+    this._playButton?.classList.toggle("d-none", this._playing);
+    this._pauseButton?.classList.toggle("d-none", !this._playing);
+    this._counter?.setAttribute("aria-live", this._playing ? "off" : "polite");
+    if (moveFocus) (this._playing ? this._pauseButton : this._playButton)?.focus();
+    return this;
+  }
+  get isFullscreen() {
+    return Boolean(this._frame?.classList.contains("modal-fullscreen"));
+  }
+  /** Switches between the large dialog and full screen. */
+  fullscreen(on = true, moveFocus = false) {
+    if (!this._frame) return this;
+    const value = Boolean(on);
+    this._resize(() => {
+      this._frame.classList.toggle("modal-fullscreen", value);
+      this._layoutStage();
+    });
+    if (moveFocus) (value ? this._exitButton : this._enterButton)?.focus();
+    return this;
+  }
+  dispose() {
+    this._stopTimer();
+    for (const [target, type, listener] of this._listeners) {
+      target.removeEventListener(type, listener);
+    }
+    this._listeners = [];
+    instances9.delete(this._element);
+  }
+  _listen(target, type, listener) {
+    target.addEventListener(type, listener);
+    this._listeners.push([target, type, listener]);
+  }
+  // The dialog fills the screen after the full-screen button, or below the
+  // breakpoint of Bootstrap's .modal-fullscreen-{breakpoint}-down.
+  _fillsScreen() {
+    if (this.isFullscreen) return true;
+    const breakpoint = this._frame?.className.match(/\bmodal-fullscreen-(\w+)-down\b/)?.[1];
+    if (!breakpoint) return false;
+    const width = Number.parseFloat(this._window.getComputedStyle(this._element.ownerDocument.documentElement).getPropertyValue(`--bs-breakpoint-${breakpoint}`));
+    return Number.isFinite(width) && this._window.matchMedia(`(max-width: ${width - 0.02}px)`).matches;
+  }
+  // Runs one photo's time on the Progress bar, then shows the next photo.
+  _restartTimer() {
+    this._stopTimer();
+    if (!this._playing) return;
+    const advance = () => {
+      if (this._playing) this._step(true);
+    };
+    if (typeof this._progressBar?.animate === "function") {
+      const timer = this._progressBar.animate(
+        [{ width: "0%" }, { width: "100%" }],
+        { duration: SLIDESHOW_INTERVAL, easing: "linear", fill: "forwards" }
+      );
+      timer.addEventListener("finish", () => {
+        if (this._timer === timer) advance();
+      });
+      this._timer = timer;
+    } else {
+      this._timeout = this._window.setTimeout(advance, SLIDESHOW_INTERVAL);
+    }
+  }
+  _stopTimer() {
+    this._timer?.cancel();
+    this._timer = null;
+    this._window.clearTimeout(this._timeout);
+  }
+  // Animates the dialog from its old box to the new one: the content keeps
+  // its final layout and starts scaled to where it was (first, last, invert,
+  // play). Without motion the change applies at once.
+  _resize(change) {
+    const content = this._frame.querySelector(".modal-content");
+    const reduced = this._window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!content || typeof content.animate !== "function" || reduced || !this._dialog.classList.contains("show")) {
+      change();
+      return;
+    }
+    this._resizing?.cancel();
+    const first = content.getBoundingClientRect();
+    change();
+    const last = content.getBoundingClientRect();
+    if (!first.width || !first.height || !last.width || !last.height) return;
+    this._resizing = content.animate([
+      {
+        transformOrigin: "0 0",
+        transform: `translate(${first.left - last.left}px, ${first.top - last.top}px) scale(${first.width / last.width}, ${first.height / last.height})`
+      },
+      { transformOrigin: "0 0", transform: "none" }
+    ], { duration: RESIZE_DURATION, easing: "cubic-bezier(0.2, 0, 0, 1)" });
+  }
+  _layoutStage() {
+    const fill = this._fillsScreen();
+    this._stage?.classList.toggle("gallery-stage", !fill);
+    this._enterButton?.classList.toggle("d-none", fill);
+    this._exitButton?.classList.toggle("d-none", !this.isFullscreen);
+  }
+  _onShow(event) {
+    this._layoutStage();
+    const trigger = event.relatedTarget;
+    const value = trigger?.closest?.("[data-gallery-index]")?.getAttribute("data-gallery-index");
+    this.show(value === null || value === void 0 ? 0 : Number.parseInt(value, 10) || 0);
+  }
+  _onKeydown(event) {
+    if (!["ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    if (this._carousel.contains(event.target)) return;
+    event.preventDefault();
+    const rtl = this._element.ownerDocument.documentElement.dir === "rtl";
+    this._step(event.key === "ArrowRight" !== rtl);
+  }
+  _step(forward) {
+    const carousel = this._carouselInstance();
+    if (!carousel) return;
+    if (forward) carousel.next();
+    else carousel.prev();
+  }
+  _carouselInstance(create = true) {
+    const Carousel = this._window.bootstrap?.Carousel;
+    if (!Carousel) return null;
+    if (!create) return Carousel.getInstance(this._carousel);
+    return Carousel.getOrCreateInstance(this._carousel, {
+      interval: false,
+      pause: false,
+      ride: false,
+      keyboard: true,
+      touch: true,
+      wrap: true
+    });
+  }
+  _load(slide) {
+    const image = slide?.querySelector("img[data-gallery-src]");
+    if (!image || image.hasAttribute("src")) return;
+    const srcset = image.getAttribute("data-gallery-srcset");
+    if (srcset) image.setAttribute("srcset", srcset);
+    image.setAttribute("src", image.getAttribute("data-gallery-src"));
+  }
+};
+
 // src/js/moo-ui.js
 import PasswordRequirements from "./password-requirements.js";
 async function loadChart() {
@@ -4517,6 +4841,7 @@ async function loadChart() {
 var MooUI = {
   PasswordRequirements,
   FloatingPanel,
+  ImageGallery,
   loadChart,
   Combobox,
   ContextMenu,
@@ -4537,6 +4862,7 @@ export {
   DataTable,
   MooDatepicker as Datepicker,
   FloatingPanel,
+  ImageGallery,
   MooCalendar,
   MooDateRangePicker,
   OverlayScrollbar,