@vmz/ui 0.2.3 → 0.2.5

package/src/components/Drawer.vmz

@@ -1,73 +1,47 @@
 <template>
-  <div
-      class="vmz-ui-drawer-root"
-      data-vmz-ui="drawer"
-      :data-vmz-overlay-open="open"
-    >
-      <div
-        v-if="open"
-        class="vmz-ui-drawer"
-        data-vmz-overlay="drawer"
-        data-vmz-overlay-owner="drawer"
-        :data-vmz-overlay-stack="stackLevel"
-      >
-        <button
-          type="button"
-          class="vmz-ui-drawer__backdrop"
-          data-vmz-overlay-layer="backdrop"
-          aria-label="Dismiss drawer"
-          @click="dismiss"
-        ></button>
-        <div
-          class="vmz-ui-drawer__panel"
-          role="dialog"
-          aria-modal="true"
-          :aria-labelledby="titleId"
-          tabindex="-1"
-          data-vmz-overlay-layer="panel"
-          data-vmz-focus="enter"
-          data-vmz-motion="overlay-enter"
-          data-vmz-motion-token="motion.overlay"
-          :onKeyDown="onPanelKeyDown"
-        >
-          <h2 :id="titleId" class="vmz-ui-drawer__title">{{ title }}</h2>
-          <div class="vmz-ui-drawer__body">
-            <slot />
-          </div>
-          <div class="vmz-ui-drawer__actions">
-            <button type="button" class="vmz-ui-drawer__close" data-vmz-focus="close" @click="dismiss">
-              Close
-            </button>
-          </div>
+    <div data-vmz-ui="drawer" :data-vmz-overlay-open="open" class="vmz-ui-drawer-root">
+        <div v-if="open" data-vmz-overlay="drawer" data-vmz-overlay-owner="drawer" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-drawer">
+            <button type="button" data-vmz-overlay-layer="backdrop" aria-label="Dismiss drawer" @click="dismiss" class="vmz-ui-drawer__backdrop" />
+            <div role="dialog" aria-modal="true" :aria-labelledby="titleId" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" data-vmz-motion="overlay-enter" data-vmz-motion-token="motion.overlay" :onKeyDown="onPanelKeyDown" class="vmz-ui-drawer__panel">
+                <h2 :id="titleId" class="vmz-ui-drawer__title">
+                    {{ title }}
+                </h2>
+                <div class="vmz-ui-drawer__body">
+                    <slot />
+                </div>
+                <div class="vmz-ui-drawer__actions">
+                    <button type="button" data-vmz-focus="close" @click="dismiss" class="vmz-ui-drawer__close">
+                        Close
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-drawer-root {
+.vmz-ui-drawer-root {
     display: block;
-  }
+}
 
-  .vmz-ui-drawer {
+.vmz-ui-drawer {
     position: fixed;
     inset: 0;
     z-index: 40;
-  }
+}
 
-  .vmz-ui-drawer[data-vmz-overlay-stack='1'] {
+.vmz-ui-drawer[data-vmz-overlay-stack="1"] {
     z-index: 50;
-  }
+}
 
-  .vmz-ui-drawer[data-vmz-overlay-stack='2'] {
+.vmz-ui-drawer[data-vmz-overlay-stack="2"] {
     z-index: 60;
-  }
+}
 
-  .vmz-ui-drawer[data-vmz-overlay-stack='3'] {
+.vmz-ui-drawer[data-vmz-overlay-stack="3"] {
     z-index: 70;
-  }
+}
 
-  .vmz-ui-drawer__backdrop {
+.vmz-ui-drawer__backdrop {
     position: absolute;
     inset: 0;
     border: 0;
@@ -75,10 +49,11 @@
     margin: 0;
     cursor: pointer;
     background: rgba(0, 0, 0, 0.45);
-    animation: vmz-ui-drawer-fade-in var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
-  }
+    animation: vmz-ui-drawer-fade-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
 
-  .vmz-ui-drawer__panel {
+.vmz-ui-drawer__panel {
     position: absolute;
     top: 0;
     right: 0;
@@ -94,41 +69,44 @@
     outline: none;
     display: flex;
     flex-direction: column;
-    animation: vmz-ui-drawer-panel-in var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
-  }
+    animation: vmz-ui-drawer-panel-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
 
-  .vmz-ui-drawer[data-vmz-motion-adopt='true'] .vmz-ui-drawer__backdrop,
-  .vmz-ui-drawer[data-vmz-motion-adopt='true'] .vmz-ui-drawer__panel {
+.vmz-ui-drawer[data-vmz-motion-adopt="true"] .vmz-ui-drawer__backdrop,
+.vmz-ui-drawer[data-vmz-motion-adopt="true"] .vmz-ui-drawer__panel {
     animation: none;
-  }
+}
 
-  .vmz-ui-drawer[data-vmz-motion-phase='exit'] .vmz-ui-drawer__backdrop {
-    animation: vmz-ui-drawer-fade-out var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
-  }
+.vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__backdrop {
+    animation: vmz-ui-drawer-fade-out var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
 
-  .vmz-ui-drawer[data-vmz-motion-phase='exit'] .vmz-ui-drawer__panel {
-    animation: vmz-ui-drawer-panel-out var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
-  }
+.vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__panel {
+    animation: vmz-ui-drawer-panel-out var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
 
-  .vmz-ui-drawer__panel:focus-visible {
+.vmz-ui-drawer__panel:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-drawer__title {
+.vmz-ui-drawer__title {
     margin: 0 0 0.75rem;
     font-size: 1rem;
     font-weight: 600;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-drawer__body {
+.vmz-ui-drawer__body {
     flex: 1;
     margin-bottom: 1rem;
     overflow: auto;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-drawer__close {
+.vmz-ui-drawer__close {
     font: inherit;
     font-size: 0.875rem;
     font-weight: 400;
@@ -139,282 +117,311 @@
     cursor: pointer;
     background: var(--vmz-surface-paper, #fff);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-drawer__close:hover {
+.vmz-ui-drawer__close:hover {
     color: var(--vmz-action-primary-background);
     border-color: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-drawer__close:focus-visible {
+.vmz-ui-drawer__close:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  @keyframes vmz-ui-drawer-fade-in {
+@keyframes vmz-ui-drawer-fade-in {
     from {
-      opacity: 0;
+        opacity: 0;
     }
     to {
-      opacity: 1;
+        opacity: 1;
     }
-  }
+}
 
-  @keyframes vmz-ui-drawer-panel-in {
+@keyframes vmz-ui-drawer-panel-in {
     from {
-      opacity: 0;
-      transform: translateX(0.75rem);
+        opacity: 0;
+        transform: translateX(0.75rem);
     }
     to {
-      opacity: 1;
-      transform: none;
+        opacity: 1;
+        transform: none;
     }
-  }
+}
 
-  @keyframes vmz-ui-drawer-fade-out {
+@keyframes vmz-ui-drawer-fade-out {
     from {
-      opacity: 1;
+        opacity: 1;
     }
     to {
-      opacity: 0;
+        opacity: 0;
     }
-  }
+}
 
-  @keyframes vmz-ui-drawer-panel-out {
+@keyframes vmz-ui-drawer-panel-out {
     from {
-      opacity: 1;
-      transform: none;
+        opacity: 1;
+        transform: none;
     }
     to {
-      opacity: 0;
-      transform: translateX(0.75rem);
+        opacity: 0;
+        transform: translateX(0.75rem);
     }
-  }
+}
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .vmz-ui-drawer__backdrop,
     .vmz-ui-drawer__panel,
-    .vmz-ui-drawer[data-vmz-motion-phase='exit'] .vmz-ui-drawer__backdrop,
-    .vmz-ui-drawer[data-vmz-motion-phase='exit'] .vmz-ui-drawer__panel {
-      animation: none;
+    .vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__backdrop,
+    .vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__panel {
+        animation: none;
     }
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Drawer (UI2).
-* Same overlay ownership / focus / Escape / stack as Dialog.
-* SSR/resume adopt skips enter replay; dismiss plays overlay-exit then calls onClose.
-*/
+ * VMZ UI — Drawer (UI2).
+ * Same overlay ownership / focus / Escape / stack as Dialog.
+ * SSR/resume adopt skips enter replay; dismiss plays overlay-exit then calls onClose.
+ */
 export default class Drawer {
-	public open: boolean = false;
-	public title: string = "Drawer";
-	public titleId: string = "vmz-drawer-title";
-	public stackLevel: string = "0";
-	public onClose: (() => void) | null = null;
-	_restoreFocus = null;
-	_panel = null;
-	_docKeyHandler = null;
-	_observer = null;
-	_adoptNextEnter = false;
-	_exiting = false;
-	_exitTimer = null;
-	/** Motion generation — exit timer and cancel edges key off this owner counter. */
-	_motionGen = 0;
-	async onMount() {
-		if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-		const root = this.__vmzDomRoot;
-		if (!root || typeof root.querySelector !== "function") return;
-		if (root.querySelector("[data-vmz-overlay=\"drawer\"]")) this._adoptNextEnter = true;
-		this._observer = new MutationObserver(() => this._syncFromDom());
-		this._observer.observe(root, {
-			childList: true,
-			subtree: true
-		});
-		this._syncFromDom();
-	}
-	onDestroy() {
-		if (this._exitTimer) {
-			clearTimeout(this._exitTimer);
-			this._exitTimer = null;
-		}
-		this._exiting = false;
-		if (this._observer) {
-			this._observer.disconnect();
-			this._observer = null;
-		}
-		this._teardownDocKey();
-		this._panel = null;
-		this._restoreFocus = null;
-	}
-	dismiss() {
-		if (!this._isTopmostStack()) return;
-		if (this._exiting) {
-			this._cancelExit("reverse");
-			return;
-		}
-		const panel = this._panel;
-		const overlay = panel && typeof panel.closest === "function" ? panel.closest("[data-vmz-overlay=\"drawer\"]") : null;
-		const reduce = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-		if (panel && overlay && !reduce) {
-			this._exiting = true;
-			const exitGen = this._motionGen;
-			overlay.setAttribute("data-vmz-motion-phase", "exit");
-			overlay.removeAttribute("data-vmz-motion-cancelled");
-			panel.setAttribute("data-vmz-motion", "overlay-exit");
-			const ms = this._overlayDurationMs(panel);
-			this._exitTimer = setTimeout(() => {
-				this._exitTimer = null;
-				if (!this._exiting || exitGen !== this._motionGen) return;
-				this._exiting = false;
-				this.emit("close");
-				if (typeof this.onClose === "function") this.onClose();
-			}, ms);
-			return;
-		}
-		this.emit("close");
-		if (typeof this.onClose === "function") this.onClose();
-	}
-	_cancelExit(reason) {
-		if (this._exitTimer) {
-			clearTimeout(this._exitTimer);
-			this._exitTimer = null;
-		}
-		this._exiting = false;
-		this._motionGen += 1;
-		const panel = this._panel;
-		const overlay = panel && typeof panel.closest === "function" ? panel.closest("[data-vmz-overlay=\"drawer\"]") : null;
-		if (overlay) {
-			overlay.removeAttribute("data-vmz-motion-phase");
-			overlay.setAttribute("data-vmz-motion-cancelled", reason || "true");
-			overlay.setAttribute("data-vmz-motion-gen", String(this._motionGen));
-		}
-		if (panel) {
-			panel.setAttribute("data-vmz-motion", "overlay-enter");
-		}
-	}
-	_overlayDurationMs(panel) {
-		try {
-			const raw = (getComputedStyle(panel).getPropertyValue("--vmz-motion-overlay-duration") || "").trim() || "180ms";
-			if (raw.endsWith("ms")) return Math.max(0, Number.parseFloat(raw) || 180);
-			if (raw.endsWith("s")) return Math.max(0, (Number.parseFloat(raw) || .18) * 1e3);
-			return 180;
-		} catch {
-			return 180;
-		}
-	}
-	_isTopmostStack() {
-		if (typeof document === "undefined") return true;
-		const root = this.__vmzDomRoot;
-		const mine = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-overlay][data-vmz-overlay-stack]") : null;
-		if (!mine) return true;
-		const myStack = Number(mine.getAttribute("data-vmz-overlay-stack") || this.stackLevel || "0");
-		const open = [...document.querySelectorAll("[data-vmz-overlay][data-vmz-overlay-stack]")];
-		let max = -Infinity;
-		for (const el of open) {
-			const n = Number(el.getAttribute("data-vmz-overlay-stack") || "0");
-			if (Number.isFinite(n) && n > max) max = n;
-		}
-		if (!Number.isFinite(max)) return true;
-		if ((Number.isFinite(myStack) ? myStack : 0) < max) return false;
-		if ((Number.isFinite(myStack) ? myStack : 0) > max) return true;
-		const same = open.filter((el) => Number(el.getAttribute("data-vmz-overlay-stack") || "0") === max);
-		return same[same.length - 1] === mine;
-	}
-	onPanelKeyDown(ev) {
-		if (!ev || ev.key !== "Tab") return;
-		const panel = this._panel;
-		if (!panel) return;
-		const nodes = panel.querySelectorAll("a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])");
-		const list = [];
-		for (const n of nodes) {
-			if (n instanceof HTMLElement && n.offsetParent !== null) list.push(n);
-		}
-		if (panel.tabIndex >= 0) list.unshift(panel);
-		if (!list.length) {
-			ev.preventDefault();
-			panel.focus();
-			return;
-		}
-		const first = list[0];
-		const last = list[list.length - 1];
-		const active = document.activeElement;
-		if (ev.shiftKey) {
-			if (active === first || active === panel) {
-				ev.preventDefault();
-				last.focus();
-			}
-		} else if (active === last) {
-			ev.preventDefault();
-			first.focus();
-		}
-	}
-	_syncFromDom() {
-		const root = this.__vmzDomRoot;
-		const panel = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-overlay=\"drawer\"] [data-vmz-focus=\"enter\"]") : null;
-		if (panel && !this._panel) this._enterFocus(panel);
-		else if (!panel && this._panel) this._exitFocus();
-	}
-	_enterFocus(panel) {
-		if (typeof document === "undefined") return;
-		const active = document.activeElement;
-		if (!this._restoreFocus) {
-			const root = this.__vmzDomRoot;
-			const outside = active instanceof HTMLElement && active !== document.body && !(root && typeof root.contains === "function" && root.contains(active));
-			if (outside) this._restoreFocus = active;
-		}
-		this._panel = panel instanceof HTMLElement ? panel : null;
-		const overlay = this._panel && typeof this._panel.closest === "function" ? this._panel.closest("[data-vmz-overlay=\"drawer\"]") : null;
-		if (this._exiting) {
-			this._cancelExit("reenter");
-		} else {
-			this._motionGen += 1;
-		}
-		if (overlay) {
-			overlay.setAttribute("data-vmz-motion-gen", String(this._motionGen));
-		}
-		if (this._adoptNextEnter && overlay) {
-			overlay.setAttribute("data-vmz-motion-adopt", "true");
-			this._panel.setAttribute("data-vmz-motion", "overlay-stable");
-			this._adoptNextEnter = false;
-		} else if (overlay) {
-			overlay.removeAttribute("data-vmz-motion-adopt");
-			overlay.removeAttribute("data-vmz-motion-phase");
-			overlay.removeAttribute("data-vmz-motion-cancelled");
-			this._panel.setAttribute("data-vmz-motion", "overlay-enter");
-		}
-		if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
-		if (!this._docKeyHandler) {
-			this._docKeyHandler = (ev) => {
-				if (ev.key !== "Escape") return;
-				if (ev.defaultPrevented) return;
-				if (!this._isTopmostStack()) return;
-				ev.preventDefault();
-				ev.stopPropagation();
-				this.dismiss();
-			};
-			document.addEventListener("keydown", this._docKeyHandler);
-		}
-	}
-	_exitFocus() {
-		if (this._exitTimer) {
-			clearTimeout(this._exitTimer);
-			this._exitTimer = null;
-		}
-		this._exiting = false;
-		this._teardownDocKey();
-		this._panel = null;
-		const restore = this._restoreFocus;
-		this._restoreFocus = null;
-		if (restore && typeof restore.focus === "function" && document.contains(restore)) {
-			restore.focus();
-		}
-	}
-	_teardownDocKey() {
-		if (typeof document !== "undefined" && this._docKeyHandler) {
-			document.removeEventListener("keydown", this._docKeyHandler);
-		}
-		this._docKeyHandler = null;
-	}
+    public open: boolean = false;
+    public title: string = "Drawer";
+    public titleId: string = "vmz-drawer-title";
+    public stackLevel: string = "0";
+    public onClose: (() => void) | null = null;
+    _restoreFocus = null;
+    _panel = null;
+    _docKeyHandler = null;
+    _observer = null;
+    _adoptNextEnter = false;
+    _exiting = false;
+    _exitTimer = null;
+    /** Motion generation — exit timer and cancel edges key off this owner counter. */
+    _motionGen = 0;
+    async onMount() {
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+        const root = this.__vmzDomRoot;
+        if (!root || typeof root.querySelector !== "function") return;
+        if (root.querySelector('[data-vmz-overlay="drawer"]')) this._adoptNextEnter = true;
+        this._observer = new MutationObserver(() => this._syncFromDom());
+        this._observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+        this._syncFromDom();
+    }
+    onDestroy() {
+        if (this._exitTimer) {
+            clearTimeout(this._exitTimer);
+            this._exitTimer = null;
+        }
+        this._exiting = false;
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        this._teardownDocKey();
+        this._panel = null;
+        this._restoreFocus = null;
+    }
+    dismiss() {
+        if (!this._isTopmostStack()) return;
+        if (this._exiting) {
+            this._cancelExit("reverse");
+            return;
+        }
+        const panel = this._panel;
+        const overlay =
+            panel && typeof panel.closest === "function"
+                ? panel.closest('[data-vmz-overlay="drawer"]')
+                : null;
+        const reduce =
+            typeof window !== "undefined" &&
+            typeof window.matchMedia === "function" &&
+            window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (panel && overlay && !reduce) {
+            this._exiting = true;
+            const exitGen = this._motionGen;
+            overlay.setAttribute("data-vmz-motion-phase", "exit");
+            overlay.removeAttribute("data-vmz-motion-cancelled");
+            panel.setAttribute("data-vmz-motion", "overlay-exit");
+            const ms = this._overlayDurationMs(panel);
+            this._exitTimer = setTimeout(() => {
+                this._exitTimer = null;
+                if (!this._exiting || exitGen !== this._motionGen) return;
+                this._exiting = false;
+                this.emit("close");
+                if (typeof this.onClose === "function") this.onClose();
+            }, ms);
+            return;
+        }
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+    _cancelExit(reason) {
+        if (this._exitTimer) {
+            clearTimeout(this._exitTimer);
+            this._exitTimer = null;
+        }
+        this._exiting = false;
+        this._motionGen += 1;
+        const panel = this._panel;
+        const overlay =
+            panel && typeof panel.closest === "function"
+                ? panel.closest('[data-vmz-overlay="drawer"]')
+                : null;
+        if (overlay) {
+            overlay.removeAttribute("data-vmz-motion-phase");
+            overlay.setAttribute("data-vmz-motion-cancelled", reason || "true");
+            overlay.setAttribute("data-vmz-motion-gen", String(this._motionGen));
+        }
+        if (panel) {
+            panel.setAttribute("data-vmz-motion", "overlay-enter");
+        }
+    }
+    _overlayDurationMs(panel) {
+        try {
+            const raw =
+                (
+                    getComputedStyle(panel).getPropertyValue("--vmz-motion-overlay-duration") || ""
+                ).trim() || "180ms";
+            if (raw.endsWith("ms")) return Math.max(0, Number.parseFloat(raw) || 180);
+            if (raw.endsWith("s")) return Math.max(0, (Number.parseFloat(raw) || 0.18) * 1e3);
+            return 180;
+        } catch {
+            return 180;
+        }
+    }
+    _isTopmostStack() {
+        if (typeof document === "undefined") return true;
+        const root = this.__vmzDomRoot;
+        const mine =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector("[data-vmz-overlay][data-vmz-overlay-stack]")
+                : null;
+        if (!mine) return true;
+        const myStack = Number(
+            mine.getAttribute("data-vmz-overlay-stack") || this.stackLevel || "0",
+        );
+        const open = [...document.querySelectorAll("[data-vmz-overlay][data-vmz-overlay-stack]")];
+        let max = -Infinity;
+        for (const el of open) {
+            const n = Number(el.getAttribute("data-vmz-overlay-stack") || "0");
+            if (Number.isFinite(n) && n > max) max = n;
+        }
+        if (!Number.isFinite(max)) return true;
+        if ((Number.isFinite(myStack) ? myStack : 0) < max) return false;
+        if ((Number.isFinite(myStack) ? myStack : 0) > max) return true;
+        const same = open.filter(
+            (el) => Number(el.getAttribute("data-vmz-overlay-stack") || "0") === max,
+        );
+        return same[same.length - 1] === mine;
+    }
+    onPanelKeyDown(ev) {
+        if (!ev || ev.key !== "Tab") return;
+        const panel = this._panel;
+        if (!panel) return;
+        const nodes = panel.querySelectorAll(
+            'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])',
+        );
+        const list = [];
+        for (const n of nodes) {
+            if (n instanceof HTMLElement && n.offsetParent !== null) list.push(n);
+        }
+        if (panel.tabIndex >= 0) list.unshift(panel);
+        if (!list.length) {
+            ev.preventDefault();
+            panel.focus();
+            return;
+        }
+        const first = list[0];
+        const last = list[list.length - 1];
+        const active = document.activeElement;
+        if (ev.shiftKey) {
+            if (active === first || active === panel) {
+                ev.preventDefault();
+                last.focus();
+            }
+        } else if (active === last) {
+            ev.preventDefault();
+            first.focus();
+        }
+    }
+    _syncFromDom() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="drawer"] [data-vmz-focus="enter"]')
+                : null;
+        if (panel && !this._panel) this._enterFocus(panel);
+        else if (!panel && this._panel) this._exitFocus();
+    }
+    _enterFocus(panel) {
+        if (typeof document === "undefined") return;
+        const active = document.activeElement;
+        if (!this._restoreFocus) {
+            const root = this.__vmzDomRoot;
+            const outside =
+                active instanceof HTMLElement &&
+                active !== document.body &&
+                !(root && typeof root.contains === "function" && root.contains(active));
+            if (outside) this._restoreFocus = active;
+        }
+        this._panel = panel instanceof HTMLElement ? panel : null;
+        const overlay =
+            this._panel && typeof this._panel.closest === "function"
+                ? this._panel.closest('[data-vmz-overlay="drawer"]')
+                : null;
+        if (this._exiting) {
+            this._cancelExit("reenter");
+        } else {
+            this._motionGen += 1;
+        }
+        if (overlay) {
+            overlay.setAttribute("data-vmz-motion-gen", String(this._motionGen));
+        }
+        if (this._adoptNextEnter && overlay) {
+            overlay.setAttribute("data-vmz-motion-adopt", "true");
+            this._panel.setAttribute("data-vmz-motion", "overlay-stable");
+            this._adoptNextEnter = false;
+        } else if (overlay) {
+            overlay.removeAttribute("data-vmz-motion-adopt");
+            overlay.removeAttribute("data-vmz-motion-phase");
+            overlay.removeAttribute("data-vmz-motion-cancelled");
+            this._panel.setAttribute("data-vmz-motion", "overlay-enter");
+        }
+        if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev) => {
+                if (ev.key !== "Escape") return;
+                if (ev.defaultPrevented) return;
+                if (!this._isTopmostStack()) return;
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.dismiss();
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+    }
+    _exitFocus() {
+        if (this._exitTimer) {
+            clearTimeout(this._exitTimer);
+            this._exitTimer = null;
+        }
+        this._exiting = false;
+        this._teardownDocKey();
+        this._panel = null;
+        const restore = this._restoreFocus;
+        this._restoreFocus = null;
+        if (restore && typeof restore.focus === "function" && document.contains(restore)) {
+            restore.focus();
+        }
+    }
+    _teardownDocKey() {
+        if (typeof document !== "undefined" && this._docKeyHandler) {
+            document.removeEventListener("keydown", this._docKeyHandler);
+        }
+        this._docKeyHandler = null;
+    }
 }
 </script>