@tatchi-xyz/sdk 0.21.0 → 0.31.1

package/dist/cjs/react/src/core/WebAuthnManager/LitComponents/Drawer/index.js

@@ -0,0 +1,660 @@
+const require_rolldown_runtime = require('../../../../../_virtual/rolldown_runtime.js');
+const require_tags = require('../tags.js');
+const require_LitElementWithProps = require('../LitElementWithProps.js');
+const require_lit_events = require('../lit-events.js');
+const require_css_loader = require('../css/css-loader.js');
+let lit = require("lit");
+lit = require_rolldown_runtime.__toESM(lit);
+
+//#region src/core/WebAuthnManager/LitComponents/Drawer/index.ts
+const SHEET_HEIGHT_VH = 100;
+const DEFAULT_VISIBLE_VH = 50;
+const FLICK_UP_CLOSE_THRESHOLD = -.6;
+const FLICK_DOWN_CLOSE_THRESHOLD = .7;
+const NEAR_CLOSED_PX = 50;
+const OVERPULL_SHEET_FACTOR = .5;
+const OVERPULL_VIEWPORT_FACTOR = .5;
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(max, n));
+}
+var DrawerElement = class extends require_LitElementWithProps.LitElementWithProps {
+	static properties = {
+		open: {
+			type: Boolean,
+			reflect: true
+		},
+		theme: {
+			type: String,
+			reflect: true
+		},
+		loading: { type: Boolean },
+		errorMessage: { type: String },
+		dragToClose: {
+			type: Boolean,
+			attribute: "drag-to-close"
+		},
+		showCloseButton: {
+			type: Boolean,
+			attribute: "show-close-button"
+		},
+		height: { type: String },
+		overpullPx: {
+			type: Number,
+			attribute: "overpull-px"
+		}
+	};
+	isDragging = false;
+	pendingDrag = false;
+	startY = 0;
+	currentY = 0;
+	dragDistance = 0;
+	lastDragTime = 0;
+	velocity = 0;
+	drawerElement = null;
+	overlayElement = null;
+	bodyElement = null;
+	drawerHeight = 0;
+	startTranslateYPx = 0;
+	openRestTranslateYPx = 0;
+	dragStartTime = 0;
+	isClosing = false;
+	aboveFoldResizeObserver;
+	drawerResizeObserver;
+	detachViewportSync;
+	_syncRAF = null;
+	_lastOpenTranslatePct;
+	_contentAnimRAF = null;
+	_activeHeightTransitions = 0;
+	detachContentAnimSync;
+	_initialMount = true;
+	_firstOpen = true;
+	_stylesReady = false;
+	_stylePromises = [];
+	_stylesAwaiting = null;
+	_childObserver = null;
+	createRenderRoot() {
+		const root = this;
+		const p = require_css_loader.ensureExternalStyles(root, "drawer.css", "data-w3a-drawer-css");
+		this._stylePromises.push(p);
+		p.catch(() => {});
+		return root;
+	}
+	constructor() {
+		super();
+		this.open = false;
+		this.theme = "dark";
+		this.loading = false;
+		this.dragToClose = true;
+		this.showCloseButton = true;
+		this.height = void 0;
+		this.overpullPx = 120;
+	}
+	getComponentPrefix() {
+		return "modal";
+	}
+	_initialChildren = null;
+	connectedCallback() {
+		if (!this._initialChildren) {
+			this._initialChildren = Array.from(this.childNodes);
+			try {
+				for (const n of this._initialChildren) this.removeChild(n);
+			} catch {}
+		}
+		super.connectedCallback();
+		this.attachViewportSync();
+	}
+	shouldUpdate(_changed) {
+		if (this._stylesReady) return true;
+		if (!this._stylesAwaiting) {
+			const settle = Promise.all(this._stylePromises).then(() => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r()))));
+			this._stylesAwaiting = settle.then(() => {
+				this._stylesReady = true;
+				this.requestUpdate();
+			});
+		}
+		return false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeDragListeners();
+		this.drawerElement?.removeEventListener("transitionend", this.handleTransitionEnd);
+		this.aboveFoldResizeObserver?.disconnect();
+		this.drawerResizeObserver?.disconnect();
+		if (this.detachViewportSync) {
+			this.detachViewportSync();
+			this.detachViewportSync = void 0;
+		}
+		if (this.detachContentAnimSync) {
+			this.detachContentAnimSync();
+			this.detachContentAnimSync = void 0;
+		}
+		if (this._childObserver) {
+			this._childObserver.disconnect();
+			this._childObserver = null;
+		}
+	}
+	attributeChangedCallback(name, oldVal, newVal) {
+		super.attributeChangedCallback?.(name, oldVal, newVal);
+		if (name === "open" && newVal !== oldVal) {
+			if (newVal !== null) this.isClosing = false;
+		}
+	}
+	firstUpdated() {
+		const root = this.renderRoot;
+		this.drawerElement = root.querySelector(".drawer");
+		this.overlayElement = root.querySelector(".overlay");
+		this.bodyElement = root.querySelector(".body");
+		this.syncCssVarsForOpenTranslate();
+		try {
+			this.setCssVars({ "--w3a-drawer__drag-translate": "var(--w3a-drawer__open-translate)" });
+		} catch {}
+		requestAnimationFrame(() => {
+			this._initialMount = false;
+			this.requestUpdate();
+		});
+		this.drawerElement?.addEventListener("transitionend", this.handleTransitionEnd);
+		this.setupAnimateWithContentSync();
+		window.addEventListener("resize", this.syncCssVarsForOpenTranslate.bind(this));
+		const above = root.querySelector(".above-fold");
+		if (above && "ResizeObserver" in window) {
+			this.aboveFoldResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());
+			this.aboveFoldResizeObserver.observe(above);
+		}
+		if (this.drawerElement && "ResizeObserver" in window) {
+			this.drawerResizeObserver = new ResizeObserver(() => this.syncCssVarsForOpenTranslate());
+			this.drawerResizeObserver.observe(this.drawerElement);
+		}
+		this.setupDragListeners();
+		this.adoptContentIntoSlot();
+		this._childObserver = new MutationObserver(() => this.adoptContentIntoSlot());
+		this._childObserver.observe(this, { childList: true });
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("open")) if (this.open) {
+			this.isClosing = false;
+			this._firstOpen = false;
+			this.dispatchEvent(new CustomEvent("w3a:drawer-open-start", {
+				bubbles: true,
+				composed: true
+			}));
+		} else this.dispatchEvent(new CustomEvent("w3a:drawer-close-start", {
+			bubbles: true,
+			composed: true
+		}));
+		if (changedProperties.has("dragToClose")) {
+			this.removeDragListeners();
+			this.setupDragListeners();
+		}
+		if (changedProperties.has("height") || changedProperties.has("open")) setTimeout(() => this.syncCssVarsForOpenTranslate(), 0);
+	}
+	adoptContentIntoSlot() {
+		const root = this.renderRoot;
+		const above = root.querySelector(".above-fold");
+		if (!above) return;
+		const host = this;
+		const toMove = [];
+		host.childNodes.forEach((n) => {
+			if (n.nodeType !== Node.ELEMENT_NODE) return;
+			const el = n;
+			if (el.classList?.contains("overlay")) return;
+			if (el.classList?.contains("drawer")) return;
+			toMove.push(n);
+		});
+		toMove.forEach((n) => above.appendChild(n));
+		this.syncCssVarsForOpenTranslate();
+	}
+	get contentRoot() {
+		const root = this.renderRoot;
+		return root && root.querySelector(".above-fold") || null;
+	}
+	getVisibleVh() {
+		const h = (this.height || "").trim();
+		const m = h.match(/^([0-9]+(?:\.[0-9]+)?)\s*(d?vh|svh|lvh|vh)$/i);
+		if (m) return clamp(parseFloat(m[1]), 0, 100);
+		return DEFAULT_VISIBLE_VH;
+	}
+	getOpenTranslateRatio() {
+		const visible = this.getVisibleVh();
+		return clamp((SHEET_HEIGHT_VH - visible) / SHEET_HEIGHT_VH, 0, 1);
+	}
+	_performSyncCssVarsForOpenTranslate() {
+		const drawer = this.drawerElement;
+		if (!drawer) return;
+		if (this.isDragging || this.pendingDrag) return;
+		const h = (this.height || "").trim();
+		const m = h.match(/^([0-9]+(?:\.[0-9]+)?)\s*(d?vh|svh|lvh|vh)$/i);
+		if (m) {
+			const unit$1 = (m[2] || "vh").toLowerCase();
+			const visibleVh = clamp(parseFloat(m[1]), 0, 100);
+			const pct$1 = clamp(100 - visibleVh, 0, 100);
+			this.setCssVars({ "--w3a-drawer__sheet-height": `100${unit$1}` });
+			if (!this.open) this.setCssVars({ "--w3a-drawer__open-translate": pct$1 + "%" });
+			return;
+		}
+		const unit = typeof CSS !== "undefined" && CSS.supports && CSS.supports("height", "1dvh") ? "dvh" : "vh";
+		this.setCssVars({ "--w3a-drawer__sheet-height": `${SHEET_HEIGHT_VH}${unit}` });
+		const root = this.renderRoot;
+		const above = root.querySelector(".above-fold");
+		if (!above) return;
+		const drawerRect = drawer.getBoundingClientRect();
+		const aboveRect = above.getBoundingClientRect();
+		const contentBottomPx = Math.max(0, Math.round(aboveRect.bottom - drawerRect.top));
+		const sheetPx = drawer.offsetHeight || (typeof window !== "undefined" ? window.innerHeight : contentBottomPx);
+		const measured = clamp(1 - contentBottomPx / Math.max(1, sheetPx), 0, 1);
+		const ratio = measured;
+		const pct = (ratio * 100).toFixed(4) + "%";
+		if (pct === this._lastOpenTranslatePct) return;
+		if (this.open) this.drawerElement?.classList.remove("vv-sync");
+		this.setCssVars({ "--w3a-drawer__open-translate": pct });
+		this._lastOpenTranslatePct = pct;
+	}
+	syncCssVarsForOpenTranslate() {
+		if (this._syncRAF != null) return;
+		this._syncRAF = requestAnimationFrame(() => {
+			this._syncRAF = null;
+			this._performSyncCssVarsForOpenTranslate();
+		});
+	}
+	handleTransitionEnd = (e) => {
+		if (!this.drawerElement) return;
+		if (e.target !== this.drawerElement) return;
+		if (e.propertyName !== "transform") return;
+		const type = this.open ? "w3a:drawer-open-end" : "w3a:drawer-close-end";
+		this.dispatchEvent(new CustomEvent(type, {
+			bubbles: true,
+			composed: true
+		}));
+	};
+	setupAnimateWithContentSync() {
+		const root = this.renderRoot;
+		const host = root.querySelector(".drawer");
+		if (!host) return;
+		const ensureLoop = () => {
+			if (this._contentAnimRAF != null) return;
+			const step = () => {
+				this._contentAnimRAF = null;
+				this._performSyncCssVarsForOpenTranslate();
+				this._contentAnimRAF = requestAnimationFrame(step);
+			};
+			this._contentAnimRAF = requestAnimationFrame(step);
+		};
+		const stopLoop = () => {
+			if (this._contentAnimRAF != null) {
+				cancelAnimationFrame(this._contentAnimRAF);
+				this._contentAnimRAF = null;
+			}
+			this.syncCssVarsForOpenTranslate();
+		};
+		const syncTimingFromElement = (el) => {
+			const cs = getComputedStyle(el);
+			const props = (cs.transitionProperty || "").split(",").map((s) => s.trim());
+			const durations = (cs.transitionDuration || "").split(",").map((s) => s.trim());
+			const easings = (cs.transitionTimingFunction || "").split(",").map((s) => s.trim());
+			let idx = props.findIndex((p) => p === "height");
+			if (idx < 0) idx = props.findIndex((p) => p === "all");
+			if (idx < 0) idx = 0;
+			const dur = durations[Math.min(idx, durations.length - 1)] || "100ms";
+			const ease = easings[Math.min(idx, easings.length - 1)] || "cubic-bezier(0.2, 0.6, 0.2, 1)";
+			this.setCssVars({
+				"--w3a-drawer__transition-duration": dur,
+				"--w3a-drawer__transition-easing": ease
+			});
+		};
+		const onRun = (ev) => {
+			const e = ev;
+			if (!this.open) return;
+			if (e.propertyName !== "height") return;
+			this._activeHeightTransitions++;
+			ensureLoop();
+		};
+		const onStart = (ev) => {
+			const e = ev;
+			if (!this.open) return;
+			if (e.propertyName !== "height") return;
+			if (e.target && e.target instanceof Element) syncTimingFromElement(e.target);
+			this._activeHeightTransitions++;
+			ensureLoop();
+		};
+		const onEnd = (ev) => {
+			const e = ev;
+			if (e.propertyName !== "height") return;
+			this._activeHeightTransitions = Math.max(0, this._activeHeightTransitions - 1);
+			if (this._activeHeightTransitions === 0) stopLoop();
+		};
+		host.addEventListener("transitionrun", onRun, true);
+		host.addEventListener("transitionstart", onStart, true);
+		host.addEventListener("transitionend", onEnd, true);
+		this.detachContentAnimSync = () => {
+			host.removeEventListener("transitionrun", onRun, true);
+			host.removeEventListener("transitionstart", onStart, true);
+			host.removeEventListener("transitionend", onEnd, true);
+			if (this._contentAnimRAF != null) {
+				cancelAnimationFrame(this._contentAnimRAF);
+				this._contentAnimRAF = null;
+			}
+			this._activeHeightTransitions = 0;
+		};
+	}
+	setupDragListeners() {
+		if (!this.dragToClose) return;
+		setTimeout(() => {
+			const root = this.renderRoot;
+			const drawerElement = root.querySelector(".drawer");
+			if (!drawerElement) {
+				console.warn("Drawer element not found for drag listeners");
+				return;
+			}
+			this.removeDragListeners();
+			const supportsPointer = typeof window !== "undefined" && "PointerEvent" in window;
+			if (supportsPointer) {
+				drawerElement.addEventListener("pointerdown", this.handlePointerDown, { capture: true });
+				document.addEventListener("pointermove", this.handlePointerMove);
+				document.addEventListener("pointerup", this.handlePointerUp);
+				document.addEventListener("pointercancel", this.handlePointerCancel);
+			} else {
+				drawerElement.addEventListener("mousedown", this.handleMouseDown, { capture: true });
+				document.addEventListener("mousemove", this.handleMouseMove);
+				document.addEventListener("mouseup", this.handleMouseUp);
+				drawerElement.addEventListener("touchstart", this.handleTouchStart, {
+					passive: false,
+					capture: true
+				});
+				document.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+				document.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+			}
+		}, 0);
+	}
+	attachViewportSync() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		const vv = typeof window !== "undefined" ? window.visualViewport : void 0;
+		const schedule = () => this.suppressTransitionForViewportTick();
+		window.addEventListener("resize", schedule, { passive: true });
+		window.addEventListener("orientationchange", schedule, { passive: true });
+		vv && vv.addEventListener && vv.addEventListener("resize", schedule);
+		vv && vv.addEventListener && vv.addEventListener("scroll", schedule);
+		this.detachViewportSync = () => {
+			window.removeEventListener("resize", schedule);
+			window.removeEventListener("orientationchange", schedule);
+			vv && vv.removeEventListener && vv.removeEventListener("resize", schedule);
+			vv && vv.removeEventListener && vv.removeEventListener("scroll", schedule);
+		};
+	}
+	suppressTransitionForViewportTick() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		if (!this.isDragging) drawerElement.classList.add("vv-sync");
+	}
+	removeDragListeners() {
+		const root = this.renderRoot;
+		const drawerElement = root.querySelector(".drawer");
+		if (!drawerElement) return;
+		drawerElement.removeEventListener("touchstart", this.handleTouchStart);
+		drawerElement.removeEventListener("mousedown", this.handleMouseDown);
+		drawerElement.removeEventListener("pointerdown", this.handlePointerDown);
+		document.removeEventListener("touchmove", this.handleTouchMove);
+		document.removeEventListener("touchend", this.handleTouchEnd);
+		document.removeEventListener("mousemove", this.handleMouseMove);
+		document.removeEventListener("mouseup", this.handleMouseUp);
+		document.removeEventListener("pointermove", this.handlePointerMove);
+		document.removeEventListener("pointerup", this.handlePointerUp);
+		document.removeEventListener("pointercancel", this.handlePointerCancel);
+	}
+	handlePointerDown = (e) => {
+		if (this.loading || !this.open) return;
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		this.pendingDrag = true;
+		this.startY = e.clientY;
+		this.currentY = e.clientY;
+		this.dragStartTime = Date.now();
+	};
+	handlePointerMove = (e) => {
+		if (!this.pendingDrag && !this.isDragging) return;
+		const y = e.clientY;
+		if (this.pendingDrag) {
+			const dy = y - this.startY;
+			const absDy = Math.abs(dy);
+			const ACTIVATE_PX = 8;
+			const body = this.bodyElement;
+			const atTop = !body || body.scrollTop <= 0;
+			if (absDy >= ACTIVATE_PX && atTop) {
+				this.pendingDrag = false;
+				this.startDrag(this.startY);
+				e.target?.setPointerCapture?.(e.pointerId);
+			} else return;
+		}
+		if (this.isDragging) {
+			this.updateDrag(y);
+			e.preventDefault();
+		}
+	};
+	handlePointerUp = (e) => {
+		if (this.pendingDrag) this.pendingDrag = false;
+		if (this.isDragging) {
+			this.endDrag();
+			e.preventDefault();
+		}
+		e.target?.releasePointerCapture?.(e.pointerId);
+	};
+	handlePointerCancel = (e) => {
+		if (this.pendingDrag) this.pendingDrag = false;
+		if (this.isDragging) this.endDrag();
+		e.target?.releasePointerCapture?.(e.pointerId);
+	};
+	handleTouchStart = (e) => {
+		if (this.loading || !this.open) return;
+		const target = e.target;
+		if (target && target.closest && target.closest(".close-btn")) return;
+		const touch = e.touches[0];
+		this.pendingDrag = true;
+		this.startY = touch.clientY;
+		this.currentY = touch.clientY;
+	};
+	handleTouchMove = (e) => {
+		const touch = e.touches[0];
+		if (this.pendingDrag && !this.isDragging) {
+			const dy = touch.clientY - this.startY;
+			const absDy = Math.abs(dy);
+			const ACTIVATE_PX = 8;
+			const body = this.bodyElement;
+			body && (body.scrollHeight, body.clientHeight);
+			const atTop = !body || body.scrollTop <= 0;
+			if (absDy >= ACTIVATE_PX) {
+				if (atTop) {
+					this.startDrag(this.startY);
+					this.isDragging = true;
+					this.pendingDrag = false;
+				}
+			}
+		}
+		if (!this.isDragging) return;
+		this.updateDrag(touch.clientY);
+		e.preventDefault();
+	};
+	handleTouchEnd = (e) => {
+		this.pendingDrag = false;
+		if (!this.isDragging) return;
+		this.endDrag();
+		e.preventDefault();
+	};
+	handleMouseDown = (e) => {
+		if (this.loading || !this.open) return;
+		this.startDrag(e.clientY);
+		e.preventDefault();
+	};
+	handleMouseMove = (e) => {
+		if (!this.isDragging) return;
+		this.updateDrag(e.clientY);
+		e.preventDefault();
+	};
+	handleMouseUp = (e) => {
+		if (!this.isDragging) return;
+		this.endDrag();
+		e.preventDefault();
+	};
+	startDrag(y) {
+		this.isDragging = true;
+		this.startY = y;
+		this.currentY = y;
+		this.dragDistance = 0;
+		this.dragStartTime = Date.now();
+		this.lastDragTime = this.dragStartTime;
+		this.velocity = 0;
+		if (this.drawerElement) {
+			this.drawerHeight = this.drawerElement.offsetHeight;
+			this.openRestTranslateYPx = this.drawerHeight * this.getOpenTranslateRatio();
+			const computed = getComputedStyle(this.drawerElement);
+			const transform = computed.transform || "";
+			const ty = this.parseTranslateY(transform);
+			this.startTranslateYPx = Number.isFinite(ty) ? ty : this.openRestTranslateYPx;
+			if (Number.isFinite(ty)) this.openRestTranslateYPx = ty;
+			this.setCssVars({ "--w3a-drawer__drag-translate": `${this.startTranslateYPx}px` });
+			try {
+				this.drawerElement.offsetHeight;
+			} catch {}
+			this.drawerElement.classList.add("dragging");
+		}
+	}
+	updateDrag(y) {
+		if (!this.isDragging || !this.drawerElement) return;
+		const now = Date.now();
+		const deltaTime = now - this.lastDragTime;
+		const deltaY = y - this.currentY;
+		if (deltaTime > 0) this.velocity = deltaY / deltaTime;
+		this.currentY = y;
+		this.dragDistance = y - this.startY;
+		const viewportHalf = typeof window !== "undefined" && window.innerHeight ? window.innerHeight * OVERPULL_VIEWPORT_FACTOR : 0;
+		const maxOverdragUpPx = Math.max(this.drawerHeight * OVERPULL_SHEET_FACTOR, viewportHalf, this.overpullPx);
+		const rawTargetTranslateY = this.startTranslateYPx + this.dragDistance;
+		let targetTranslateY = rawTargetTranslateY;
+		if (rawTargetTranslateY < this.openRestTranslateYPx) {
+			const overdragUp = this.openRestTranslateYPx - rawTargetTranslateY;
+			const elasticUp = maxOverdragUpPx * (1 - 1 / (overdragUp / maxOverdragUpPx + 1));
+			targetTranslateY = this.openRestTranslateYPx - elasticUp;
+		}
+		this.setCssVars({ "--w3a-drawer__drag-translate": `${targetTranslateY}px` });
+		this.lastDragTime = now;
+	}
+	endDrag() {
+		if (!this.isDragging || !this.drawerElement) return;
+		this.isDragging = false;
+		this.pendingDrag = false;
+		this.drawerElement.classList.remove("dragging");
+		const drawerHeight = this.drawerHeight || this.drawerElement.offsetHeight;
+		const openRestPx = Number.isFinite(this.openRestTranslateYPx) ? this.openRestTranslateYPx : drawerHeight * .2;
+		const now = Date.now();
+		const gestureMs = Math.max(1, now - this.dragStartTime);
+		const totalDeltaPx = this.currentY - this.startY;
+		const avgVelocity = totalDeltaPx / gestureMs;
+		const effectiveDownV = Math.max(this.velocity, avgVelocity);
+		const effectiveUpV = Math.min(this.velocity, avgVelocity);
+		if (effectiveUpV <= FLICK_UP_CLOSE_THRESHOLD) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		if (effectiveDownV >= FLICK_DOWN_CLOSE_THRESHOLD) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		const currentTransformTy = this.parseTranslateY(getComputedStyle(this.drawerElement).transform);
+		const currentTranslatePx = Number.isFinite(currentTransformTy) ? currentTransformTy : openRestPx;
+		if (currentTranslatePx >= drawerHeight - NEAR_CLOSED_PX) {
+			this.closeDrawer();
+			this.resetDragState();
+			return;
+		}
+		this.resetDragState();
+	}
+	resetDragState() {
+		this.dragDistance = 0;
+		this.velocity = 0;
+	}
+	parseTranslateY(transform) {
+		if (!transform || transform === "none") return NaN;
+		if (transform.startsWith("matrix(")) {
+			const values = transform.slice(7, -1).split(",").map((v) => parseFloat(v.trim()));
+			return values.length === 6 ? values[5] : NaN;
+		}
+		if (transform.startsWith("matrix3d(")) {
+			const values = transform.slice(9, -1).split(",").map((v) => parseFloat(v.trim()));
+			return values.length === 16 ? values[13] : NaN;
+		}
+		const match = transform.match(/translateY\(([-\d.]+)px\)/);
+		if (match) return parseFloat(match[1]);
+		return NaN;
+	}
+	closeDrawer() {
+		if (this.isClosing) return;
+		this.isClosing = true;
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		require_lit_events.dispatchLitCancel(this);
+		setTimeout(() => {
+			this.isClosing = false;
+		}, 300);
+	}
+	onClose = () => {
+		if (this.loading) return;
+		if (this.isClosing) return;
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		require_lit_events.dispatchLitCancel(this);
+		this.isClosing = true;
+		setTimeout(() => {
+			this.isClosing = false;
+		}, 300);
+	};
+	onHandleClick = () => {
+		if (!this.open) this.show();
+		else this.hide("handle");
+	};
+	show() {
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = true;
+	}
+	hide(reason = "programmatic") {
+		if (this.drawerElement) this.drawerElement.classList.remove("dragging");
+		this.open = false;
+		require_lit_events.dispatchLitCancel(this, { reason });
+	}
+	toggle(force) {
+		const target = typeof force === "boolean" ? force : !this.open;
+		if (target) this.show();
+		else this.hide("toggle");
+	}
+	handleOpen() {
+		this.show();
+	}
+	handleClose() {
+		this.hide("handleClose");
+	}
+	render() {
+		return lit.html`
+      <div class="overlay" @click=${this.onClose}></div>
+      <section class="drawer ${this._initialMount ? "init" : ""}" role="dialog" aria-modal="true">
+        <div class="relative">
+          <div class="handle" @click=${this.onHandleClick}></div>
+          ${this.showCloseButton ? lit.html`<button aria-label="Close" title="Close" class="close-btn" @click=${this.onClose} @touchend=${this.onClose}>×</button>` : null}
+        </div>
+        <div class="body">
+          ${this.errorMessage ? lit.html`<div class="error">${this.errorMessage}</div>` : null}
+          <div class="above-fold">${this._initialChildren}</div>
+        </div>
+      </section>
+    `;
+	}
+};
+var Drawer_default = (function ensureDefined() {
+	const TAG = require_tags.W3A_DRAWER_ID;
+	if (!customElements.get(TAG)) customElements.define(TAG, DrawerElement);
+	return DrawerElement;
+})();
+
+//#endregion
+exports.default = Drawer_default;
+//# sourceMappingURL=index.js.map