@vmz/ui 0.3.6 → 0.3.8

package/src/components/Drawer.vmz

@@ -1,427 +1,518 @@
-<template>
-    <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>
-</template>
-<style>
-.vmz-ui-drawer-root {
-    display: block;
-}
-
-.vmz-ui-drawer {
-    position: fixed;
-    inset: 0;
-    z-index: 40;
-}
-
-.vmz-ui-drawer[data-vmz-overlay-stack="1"] {
-    z-index: 50;
-}
-
-.vmz-ui-drawer[data-vmz-overlay-stack="2"] {
-    z-index: 60;
-}
-
-.vmz-ui-drawer[data-vmz-overlay-stack="3"] {
-    z-index: 70;
-}
-
-.vmz-ui-drawer__backdrop {
-    position: absolute;
-    inset: 0;
-    border: 0;
-    padding: 0;
-    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);
-}
-
-.vmz-ui-drawer__panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-    box-sizing: border-box;
-    width: min(23.75rem, 100vw);
-    height: 100%;
-    padding: 1.25rem 1.5rem;
-    border-left: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink);
-    box-shadow: var(--vmz-shadow-popup);
-    outline: none;
-    display: flex;
-    flex-direction: column;
-    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 {
-    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__panel {
-    animation: vmz-ui-drawer-panel-out var(--vmz-motion-overlay-duration)
-        var(--vmz-motion-overlay-easing);
-}
-
-.vmz-ui-drawer__panel:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-drawer__title {
-    margin: 0 0 0.75rem;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-drawer__body {
-    flex: 1;
-    margin-bottom: 1rem;
-    overflow: auto;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-drawer__close {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 400;
-    min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 1rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    cursor: pointer;
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-drawer__close:hover {
-    color: var(--vmz-action-primary-background);
-    border-color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-drawer__close:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-@keyframes vmz-ui-drawer-fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes vmz-ui-drawer-panel-in {
-    from {
-        opacity: 0;
-        transform: translateX(0.75rem);
-    }
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-@keyframes vmz-ui-drawer-fade-out {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes vmz-ui-drawer-panel-out {
-    from {
-        opacity: 1;
-        transform: none;
-    }
-    to {
-        opacity: 0;
-        transform: translateX(0.75rem);
-    }
-}
-
-@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;
-    }
-}
-</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.
- */
-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) || 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>
+<template>
+    <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" :data-size="size" class="vmz-ui-drawer">
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="dismissLabel || closeLabel || title" @click="dismiss" class="vmz-ui-drawer__backdrop" />
+            <div role="dialog" aria-modal="true" :aria-labelledby="title ? titleId : null" 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">
+                <header class="vmz-ui-drawer__header">
+                    <div class="vmz-ui-drawer__heading">
+                        <h2 v-if="title" :id="titleId" class="vmz-ui-drawer__title">
+                            {{ title }}
+                        </h2>
+                        <p v-if="description" class="vmz-ui-drawer__description">
+                            {{ description }}
+                        </p>
+                    </div>
+                    <button type="button" data-vmz-focus="close" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-drawer__close">
+                        <Icon name="action.close" size="md" decorative />
+                    </button>
+                </header>
+                <div class="vmz-ui-drawer__body">
+                    <slot />
+                </div>
+                <footer class="vmz-ui-drawer__footer">
+                    <slot name="footer" />
+                </footer>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-drawer-root {
+    display: block;
+}
+
+.vmz-ui-drawer {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+}
+
+.vmz-ui-drawer[data-vmz-overlay-stack="1"] {
+    z-index: 50;
+}
+
+.vmz-ui-drawer[data-vmz-overlay-stack="2"] {
+    z-index: 60;
+}
+
+.vmz-ui-drawer[data-vmz-overlay-stack="3"] {
+    z-index: 70;
+}
+
+.vmz-ui-drawer__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    background: color-mix(in srgb, var(--vmz-surface-ink) 45%, transparent);
+    animation: vmz-ui-drawer-fade-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-drawer__panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: min(420px, 100vw);
+    height: 100%;
+    border-left: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-popup);
+    outline: none;
+    animation: vmz-ui-drawer-panel-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-drawer[data-size="sm"] .vmz-ui-drawer__panel {
+    width: min(320px, 100vw);
+}
+
+.vmz-ui-drawer[data-size="lg"] .vmz-ui-drawer__panel {
+    width: min(560px, 100vw);
+}
+
+.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__panel {
+    animation: vmz-ui-drawer-panel-out var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-drawer__panel:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring), var(--vmz-shadow-popup);
+}
+
+.vmz-ui-drawer__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-drawer__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.vmz-ui-drawer__title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-drawer__description {
+    margin: 4px 0 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-drawer__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: -4px -8px -4px 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--vmz-radius-md);
+    background: transparent;
+    color: var(--vmz-text-steel);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-drawer__close:hover {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-drawer__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-drawer__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 16px 20px;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-drawer__body :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 2px;
+}
+
+.vmz-ui-drawer__body :where(a):hover {
+    color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-drawer__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 20px;
+    border-top: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-drawer__footer:empty {
+    display: none;
+}
+
+.vmz-ui-drawer__footer :where(button, a) {
+    min-height: var(--vmz-control-height, 32px);
+}
+
+@keyframes vmz-ui-drawer-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes vmz-ui-drawer-panel-in {
+    from {
+        opacity: 0;
+        transform: translateX(16px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes vmz-ui-drawer-fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes vmz-ui-drawer-panel-out {
+    from {
+        opacity: 1;
+        transform: none;
+    }
+    to {
+        opacity: 0;
+        transform: translateX(16px);
+    }
+}
+
+@media (max-width: 720px) {
+    .vmz-ui-drawer__panel {
+        width: 100vw;
+        border-left: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-drawer__backdrop,
+    .vmz-ui-drawer__panel,
+    .vmz-ui-drawer__close,
+    .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;
+        transition: 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.
+ *
+ * Appearance props: `size` (sm 320 / md 420 / lg 560), `description`.
+ * Visible copy is author-supplied; `closeLabel` / `dismissLabel` only name the
+ * icon button and backdrop for assistive tech.
+ */
+export default class Drawer {
+    public open: boolean = false;
+    public title: string = "";
+    public description: string = "";
+    /** sm | md | lg */
+    public size: string = "md";
+    public closeLabel: string = "";
+    public dismissLabel: string = "";
+    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>