@greypan/web-ui 6.4.0 → 7.0.0

package/dist/components/image-preview/index.js

@@ -7,27 +7,28 @@ import i from "../../icons/generated/lucide-minus.js";
 import a from "../../icons/generated/ooui-close.js";
 import o from "../../icons/generated/radix-icons-reset.js";
 import s from "../../assets/glass.js";
-import { getFallbackOverlayRoot as c } from "../../shared/overlay/overlay-root.js";
-import { findNearestTheme as l, findRootTheme as u } from "../../shared/overlay/theme-overlay-scope.js";
-import { defineScrollLockLease as d } from "../../shared/scroll-lock/scroll-lock.js";
+import { defineOpenOverlay as c } from "../../shared/overlay/open-overlay.js";
+import { getFallbackOverlayRoot as l } from "../../shared/overlay/overlay-root.js";
+import { findNearestTheme as u, findRootTheme as d } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease as f } from "../../shared/scroll-lock/scroll-lock.js";
 import "../button/index.js";
-import { defineNativeDialogPresence as f } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as p } from "../../shared/gesture/drag-gesture.js";
-import { clamp as m } from "../../shared/gesture/physics.js";
-import { attachPinchGesture as h } from "../../shared/gesture/pinch-gesture.js";
-import g from "./style.js";
-import { LitElement as _, html as v, nothing as y, unsafeCSS as b } from "lit";
-import { customElement as x, property as S, state as C } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
-import { styleMap as T } from "lit/directives/style-map.js";
+import { defineNativeDialogPresence as p } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as m } from "../../shared/gesture/drag-gesture.js";
+import { clamp as h } from "../../shared/gesture/physics.js";
+import { attachPinchGesture as g } from "../../shared/gesture/pinch-gesture.js";
+import _ from "./style.js";
+import { LitElement as v, html as y, nothing as b, unsafeCSS as x } from "lit";
+import { customElement as S, property as C, state as w } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import { styleMap as E } from "lit/directives/style-map.js";
 //#region src/components/image-preview/index.ts
-var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F = 320, I = class extends _ {
+var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I = 320, L = class extends v {
 	constructor(...e) {
-		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = E, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = d().make(), this._presence = f().make({
+		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = D, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = f().make(), this._overlay = c().make({ requestClose: () => this.close() }), this._handle = null, this._presence = p().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this._open
-		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = E, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
+		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = D, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
 			let t = e.currentTarget;
 			t && (this._loadedSources.add(t.src), this.requestUpdate());
 		}, this._handleCancel = (e) => {
@@ -58,7 +59,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			if (!this._open) return;
 			e.preventDefault();
 			let t = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY, n = this._stageOrigin();
-			this._zoomAt(this._scale * Math.exp(-t * k), e.clientX - n.x, e.clientY - n.y);
+			this._zoomAt(this._scale * Math.exp(-t * A), e.clientX - n.x, e.clientY - n.y);
 		}, this._handleClick = (e) => {
 			if (!this._open) return;
 			let t = this._blankPointerDown;
@@ -70,7 +71,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 				this.noBackdropClose || this.close();
 			}
 		}, this._handleDoubleClick = (e) => {
-			this._open && e.target === this._image && (this._scale > E ? this.resetZoom() : this._setScale(D / 2));
+			this._open && e.target === this._image && (this._scale > D ? this.resetZoom() : this._setScale(O / 2));
 		}, this._handlePinchStart = (e) => {
 			if (!this._open) return;
 			this._endGesture(), this._dragging = !0, this._dragged = !0;
@@ -78,7 +79,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			this._pinchScale = this._scale, this._pinchLocalX = (e.centerX - t.x - this._offsetX) / this._scale, this._pinchLocalY = (e.centerY - t.y - this._offsetY) / this._scale;
 		}, this._handlePinchMove = (e) => {
 			if (!this._open) return;
-			let t = m(this._pinchScale * e.ratio, E, D), n = this._stageOrigin();
+			let t = h(this._pinchScale * e.ratio, D, O), n = this._stageOrigin();
 			this._applyScale(t, e.centerX - n.x - this._pinchLocalX * t, e.centerY - n.y - this._pinchLocalY * t);
 		}, this._handlePinchEnd = () => {
 			this._dragging = !1;
@@ -90,9 +91,9 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			if (!this._open || (this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0, e.button !== 0 || e.isPrimary === !1)) return;
 			this._blankPointerDown = this._isBlank(e.target), this._dragged = !1;
 			let t = this._stage;
-			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === E && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = p(e, {
+			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === D && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = m(e, {
 				axis: "both",
-				threshold: A,
+				threshold: j,
 				onMove: (e) => {
 					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
 				},
@@ -109,7 +110,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		};
 	}
 	static {
-		this.styles = [b(s), b(g)];
+		this.styles = [x(s), x(_)];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -127,7 +128,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		return this._scale;
 	}
 	configure(e) {
-		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = m(e.index, 0, Math.max(0, e.images.length - 1));
+		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = h(e.index, 0, Math.max(0, e.images.length - 1));
 	}
 	show() {
 		this._open ||= (this._dismissed = !1, !0);
@@ -138,7 +139,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 	goTo(e) {
 		let t = this.images.length;
 		if (t === 0) return;
-		let n = this.loop ? (e % t + t) % t : m(e, 0, t - 1);
+		let n = this.loop ? (e % t + t) % t : h(e, 0, t - 1);
 		n !== this._index && (this._index = n, this.resetZoom());
 	}
 	next() {
@@ -148,17 +149,29 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		this.goTo(this._index - 1);
 	}
 	zoomIn() {
-		this._setScale(this._scale + O);
+		this._setScale(this._scale + k);
 	}
 	zoomOut() {
-		this._setScale(this._scale - O);
+		this._setScale(this._scale - k);
 	}
 	resetZoom() {
-		(this._scale !== E || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = E, this._offsetX = 0, this._offsetY = 0);
+		(this._scale !== D || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = D, this._offsetX = 0, this._offsetY = 0);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._attachPinch(), this._reclaimIfOpen();
+	}
+	_reclaimIfOpen() {
+		if (!this._open || this._handle) return;
+		let e = this.dialog;
+		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }));
 	}
 	firstUpdated() {
+		this._attachPinch();
+	}
+	_attachPinch() {
+		if (this._pinch) return;
 		let e = this._stage;
-		e && (this._pinch = h(e, {
+		e && (this._pinch = g(e, {
 			onStart: this._handlePinchStart,
 			onMove: this._handlePinchMove,
 			onEnd: this._handlePinchEnd,
@@ -166,10 +179,17 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		}));
 	}
 	updated(e) {
-		super.updated(e), this.isConnected && (e.has("_open") && (this._presence.sync(this._open), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed())), (e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock());
+		if (super.updated(e), this.isConnected) {
+			if (e.has("_open")) {
+				this._presence.sync(this._open);
+				let e = this.dialog;
+				e && (this._open ? (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this })) : (this._handle?.release(), this._handle = null)), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed());
+			}
+			(e.has("_open") || e.has("noScrollLock")) && this._syncScrollLock();
+		}
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release();
+		super.disconnectedCallback(), this._endGesture(), this._pinch?.destroy(), this._pinch = void 0, this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null;
 	}
 	_syncScrollLock() {
 		this._scrollLock.sync(this._open && !this.noScrollLock);
@@ -178,13 +198,13 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
 	}
 	_zoomAt(e, t, n) {
-		let r = m(e, E, D);
+		let r = h(e, D, O);
 		if (r === this._scale) return;
 		let i = r / this._scale;
 		this._applyScale(r, t - (t - this._offsetX) * i, n - (n - this._offsetY) * i);
 	}
 	_applyScale(e, t, n) {
-		if (this._scale = e, e === E) {
+		if (this._scale = e, e === D) {
 			this._offsetX = 0, this._offsetY = 0;
 			return;
 		}
@@ -225,7 +245,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 	}
 	_clampOffsets() {
 		let e = this._offsetBounds();
-		this._offsetX = m(this._offsetX, -e.x, e.x), this._offsetY = m(this._offsetY, -e.y, e.y);
+		this._offsetX = h(this._offsetX, -e.x, e.x), this._offsetY = h(this._offsetY, -e.y, e.y);
 	}
 	_isBlank(e) {
 		return e === this.dialog || e === this._stage;
@@ -259,16 +279,16 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
 			this._swipeOffset = 0;
 			return;
 		}
-		let a = Math.max(1, Math.round(i * j)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= M || Math.abs(e) >= N && Math.max(Math.abs(t), Math.abs(s)) >= P) && this._adjacentIndex(r) !== -1;
-		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), F);
+		let a = Math.max(1, Math.round(i * M)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= N || Math.abs(e) >= P && Math.max(Math.abs(t), Math.abs(s)) >= F) && this._adjacentIndex(r) !== -1;
+		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), I);
 	}
 	_panTo(e, t) {
 		let n = this._offsetBounds();
-		this._offsetX = m(this._panOriginX + e, -n.x, n.x), this._offsetY = m(this._panOriginY + t, -n.y, n.y);
+		this._offsetX = h(this._panOriginX + e, -n.x, n.x), this._offsetY = h(this._panOriginY + t, -n.y, n.y);
 	}
 	render() {
-		let e = this.images.length, s = this._scale > E, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = s ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
-		return v`
+		let e = this.images.length, s = this._scale > D, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = s ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return y`
       <dialog
         aria-label="图片预览"
         @cancel=${this._handleCancel}
@@ -284,7 +304,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
         <div class="wui-image-preview-content">
           <div class="wui-image-preview-surface">
             <div
-              class=${w({
+              class=${T({
 			"wui-image-preview-stage": !0,
 			"is-zoomed": s,
 			"is-dragging": this._dragging,
@@ -293,65 +313,65 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
             >
               <div
                 class="wui-image-preview-track"
-                style=${T({ transform: u })}
+                style=${E({ transform: u })}
                 @transitionend=${this._handleSwipeSettleEnd}
               >
-                ${c >= 0 ? v`
+                ${c >= 0 ? y`
                         <div class="wui-image-preview-slide is-prev" aria-hidden="true">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[c].src)
 		})}
                             src=${this.images[c].src}
                             alt=${this.images[c].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: f })}
+                            style=${E({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
-                ${e > 0 ? v`
+                      ` : b}
+                ${e > 0 ? y`
                         <div class="wui-image-preview-slide is-current">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[this._index].src)
 		})}
                             src=${this.images[this._index].src}
                             alt=${this.images[this._index].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: d })}
+                            style=${E({ transform: d })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
-                ${l >= 0 ? v`
+                      ` : b}
+                ${l >= 0 ? y`
                         <div class="wui-image-preview-slide is-next" aria-hidden="true">
                           <img
-                            class=${w({
+                            class=${T({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[l].src)
 		})}
                             src=${this.images[l].src}
                             alt=${this.images[l].alt ?? ""}
                             draggable="false"
-                            style=${T({ transform: f })}
+                            style=${E({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : y}
+                      ` : b}
               </div>
             </div>
           </div>
           <div class="wui-image-preview-controls">
-            ${this.indicator ? v`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+            ${this.indicator ? y`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
                     >${this._index + 1} / ${e}</span
-                  >` : y}
-            ${this.closable ? v`
+                  >` : b}
+            ${this.closable ? y`
                     <web-ui-button
                       class="wui-image-preview-close"
                       variant="glass"
@@ -362,8 +382,8 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                     >
                       <web-ui-icon size="16" .icon=${a}></web-ui-icon>
                     </web-ui-button>
-                  ` : y}
-            ${this.nav && e > 1 ? v`
+                  ` : b}
+            ${this.nav && e > 1 ? y`
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-prev"
                       variant="glass"
@@ -386,15 +406,15 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                     >
                       <web-ui-icon size="20" .icon=${n}></web-ui-icon>
                     </web-ui-button>
-                  ` : y}
-            ${this.toolbar ? v`
+                  ` : b}
+            ${this.toolbar ? y`
                     <div class="wui-image-preview-toolbar wui-glass">
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
                         aria-label="缩小"
-                        ?disabled=${this._scale <= E}
+                        ?disabled=${this._scale <= D}
                         @click=${this.zoomOut}
                       >
                         <web-ui-icon size="16" .icon=${i}></web-ui-icon>
@@ -405,7 +425,7 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                         icon
                         size="30"
                         aria-label="放大"
-                        ?disabled=${this._scale >= D}
+                        ?disabled=${this._scale >= O}
                         @click=${this.zoomIn}
                       >
                         <web-ui-icon size="16" .icon=${r}></web-ui-icon>
@@ -415,27 +435,27 @@ var E = 1, D = 4, O = .5, k = .002, A = 3, j = .15, M = 320, N = 16, P = 160, F
                         icon
                         size="30"
                         aria-label="重置缩放"
-                        ?disabled=${this._scale <= E && !this._isPanned}
+                        ?disabled=${this._scale <= D && !this._isPanned}
                         @click=${this.resetZoom}
                       >
                         <web-ui-icon size="16" .icon=${o}></web-ui-icon>
                       </web-ui-button>
                     </div>
-                  ` : y}
+                  ` : b}
           </div>
         </div>
       </dialog>
     `;
 	}
 };
-e([S({ attribute: !1 })], I.prototype, "images", void 0), e([S({ attribute: !1 })], I.prototype, "loop", void 0), e([S({ attribute: !1 })], I.prototype, "nav", void 0), e([S({ attribute: !1 })], I.prototype, "toolbar", void 0), e([S({ attribute: !1 })], I.prototype, "closable", void 0), e([S({ attribute: !1 })], I.prototype, "indicator", void 0), e([S({ attribute: !1 })], I.prototype, "swipe", void 0), e([S({ attribute: !1 })], I.prototype, "noScrollLock", void 0), e([S({ attribute: !1 })], I.prototype, "noBackdropClose", void 0), e([C()], I.prototype, "_open", void 0), e([C()], I.prototype, "_index", void 0), e([C()], I.prototype, "_scale", void 0), e([C()], I.prototype, "_offsetX", void 0), e([C()], I.prototype, "_offsetY", void 0), e([C()], I.prototype, "_swipeOffset", void 0), e([C()], I.prototype, "_swipeSettling", void 0), e([C()], I.prototype, "_dragging", void 0), I = e([x("web-ui-image-preview")], I);
-function L(e) {
+e([C({ attribute: !1 })], L.prototype, "images", void 0), e([C({ attribute: !1 })], L.prototype, "loop", void 0), e([C({ attribute: !1 })], L.prototype, "nav", void 0), e([C({ attribute: !1 })], L.prototype, "toolbar", void 0), e([C({ attribute: !1 })], L.prototype, "closable", void 0), e([C({ attribute: !1 })], L.prototype, "indicator", void 0), e([C({ attribute: !1 })], L.prototype, "swipe", void 0), e([C({ attribute: !1 })], L.prototype, "noScrollLock", void 0), e([C({ attribute: !1 })], L.prototype, "noBackdropClose", void 0), e([w()], L.prototype, "_open", void 0), e([w()], L.prototype, "_index", void 0), e([w()], L.prototype, "_scale", void 0), e([w()], L.prototype, "_offsetX", void 0), e([w()], L.prototype, "_offsetY", void 0), e([w()], L.prototype, "_swipeOffset", void 0), e([w()], L.prototype, "_swipeSettling", void 0), e([w()], L.prototype, "_dragging", void 0), L = e([S("web-ui-image-preview")], L);
+function R(e) {
 	let t = (e.images ?? []).map((e) => ({
 		src: e.src,
 		alt: e.alt ?? ""
 	}));
 	if (t.length === 0) throw Error("[web-ui-image-preview] imagePreview requires at least one image");
-	let n = e.target ? l(e.target) : u(), r = e.container ?? n?.getOverlayRoot() ?? c(), i = document.createElement("web-ui-image-preview");
+	let n = e.target ? u(e.target) : d(), r = e.container ?? n?.getOverlayRoot() ?? l(), i = document.createElement("web-ui-image-preview");
 	i.configure({
 		images: t,
 		index: e.index ?? 0,
@@ -476,6 +496,6 @@ function L(e) {
 	};
 }
 //#endregion
-export { L as imagePreview };
+export { R as imagePreview };
 
 //# sourceMappingURL=index.js.map