@vmz/ui 0.3.6 → 0.3.8

package/src/components/Popover.vmz

@@ -1,223 +1,341 @@
-<template>
-    <div data-vmz-ui="popover" :data-vmz-overlay-open="open" class="vmz-ui-popover-root">
-        <div v-if="open" data-vmz-overlay="popover" data-vmz-overlay-owner="popover" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-popover">
-            <button type="button" data-vmz-overlay-layer="backdrop" aria-label="Dismiss popover" @click="dismiss" class="vmz-ui-popover__backdrop" />
-            <div role="dialog" aria-modal="false" :aria-labelledby="titleId" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" :onKeyDown="onPanelKeyDown" class="vmz-ui-popover__panel">
-                <h2 :id="titleId" class="vmz-ui-popover__title">
-                    {{ title }}
-                </h2>
-                <div class="vmz-ui-popover__body">
-                    <slot />
-                </div>
-                <div class="vmz-ui-popover__actions">
-                    <button type="button" data-vmz-focus="close" @click="dismiss" class="vmz-ui-popover__close">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<style>
-.vmz-ui-popover-root {
-    display: block;
-}
-
-.vmz-ui-popover {
-    position: fixed;
-    inset: 0;
-    z-index: 35;
-    pointer-events: none;
-}
-
-.vmz-ui-popover[data-vmz-overlay-stack="1"] {
-    z-index: 50;
-}
-
-.vmz-ui-popover[data-vmz-overlay-stack="2"] {
-    z-index: 60;
-}
-
-.vmz-ui-popover[data-vmz-overlay-stack="3"] {
-    z-index: 70;
-}
-
-.vmz-ui-popover__backdrop {
-    position: absolute;
-    inset: 0;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    cursor: default;
-    background: transparent;
-    pointer-events: auto;
-}
-
-.vmz-ui-popover__panel {
-    position: absolute;
-    z-index: 1;
-    top: 30%;
-    left: 50%;
-    transform: translateX(-50%);
-    box-sizing: border-box;
-    width: min(20rem, calc(100vw - 2rem));
-    min-height: 8rem;
-    padding: 0.85rem 1rem 1rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-action-primary-foreground);
-    color: var(--vmz-action-primary-active);
-    outline: none;
-    pointer-events: auto;
-}
-
-.vmz-ui-popover__panel:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-popover__title {
-    margin: 0 0 0.5rem;
-    font-size: 1rem;
-}
-
-.vmz-ui-popover__body {
-    margin-bottom: 0.75rem;
-}
-
-.vmz-ui-popover__close {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.375rem 0.7rem;
-    border: 1px solid transparent;
-    border-radius: var(--vmz-radius-md, 6px);
-    cursor: pointer;
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-}
-
-.vmz-ui-popover__close:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-</style>
-<script client>
-/**
- * VMZ UI — Popover (UI2).
- * Non-modal disclosure: Escape + outside dismiss + focus enter/restore.
- * Parent owns live `open`. Fixed min size for layout stability.
- * `stackLevel` raises z-index; Escape dismisses only the topmost stacked overlay.
- */
-export default class Popover {
-    public open: boolean = false;
-    public title: string = "Popover";
-    public titleId: string = "vmz-popover-title";
-    public stackLevel: string = "0";
-    public onClose: (() => void) | null = null;
-    _restoreFocus = null;
-    _panel = null;
-    _docKeyHandler = null;
-    _observer = null;
-    async onMount() {
-        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-        const root = this.__vmzDomRoot;
-        if (!root || typeof root.querySelector !== "function") return;
-        this._observer = new MutationObserver(() => this._syncFromDom());
-        this._observer.observe(root, {
-            childList: true,
-            subtree: true,
-        });
-        this._syncFromDom();
-    }
-    onDestroy() {
-        if (this._observer) {
-            this._observer.disconnect();
-            this._observer = null;
-        }
-        this._teardownDocKey();
-        this._panel = null;
-        this._restoreFocus = null;
-    }
-    dismiss() {
-        this.emit("close");
-        if (typeof this.onClose === "function") this.onClose();
-    }
-    _stackValue() {
-        const n = Number(this.stackLevel);
-        return Number.isFinite(n) ? n : 0;
-    }
-    _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;
-        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;
-        return (Number.isFinite(myStack) ? myStack : 0) >= max;
-    }
-    onPanelKeyDown(ev) {
-        if (!ev || ev.key !== "Escape") return;
-        if (!this._isTopmostStack()) return;
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.dismiss();
-    }
-    _syncFromDom() {
-        const root = this.__vmzDomRoot;
-        const panel =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector('[data-vmz-overlay="popover"] [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;
-        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() {
-        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="popover" :data-vmz-overlay-open="open" class="vmz-ui-popover-root">
+        <div v-if="open" data-vmz-overlay="popover" data-vmz-overlay-owner="popover" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-popover">
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="dismissLabel || closeLabel || title" @click="dismiss" class="vmz-ui-popover__backdrop" />
+            <div role="dialog" aria-modal="false" :aria-labelledby="title ? titleId : null" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" :onKeyDown="onPanelKeyDown" class="vmz-ui-popover__panel">
+                <span aria-hidden="true" data-vmz-popover="arrow" class="vmz-ui-popover__arrow" />
+                <header v-if="title || description" class="vmz-ui-popover__header">
+                    <div class="vmz-ui-popover__heading">
+                        <h2 v-if="title" :id="titleId" class="vmz-ui-popover__title">
+                            {{ title }}
+                        </h2>
+                        <p v-if="description" class="vmz-ui-popover__description">
+                            {{ description }}
+                        </p>
+                    </div>
+                    <button type="button" data-vmz-focus="close" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-popover__close">
+                        <Icon name="action.close" size="md" decorative />
+                    </button>
+                </header>
+                <div class="vmz-ui-popover__body">
+                    <slot />
+                </div>
+                <div class="vmz-ui-popover__actions">
+                    <slot name="actions" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-popover-root {
+    display: block;
+}
+
+.vmz-ui-popover {
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    pointer-events: none;
+}
+
+.vmz-ui-popover[data-vmz-overlay-stack="1"] {
+    z-index: 50;
+}
+
+.vmz-ui-popover[data-vmz-overlay-stack="2"] {
+    z-index: 60;
+}
+
+.vmz-ui-popover[data-vmz-overlay-stack="3"] {
+    z-index: 70;
+}
+
+.vmz-ui-popover__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: default;
+    background: transparent;
+    pointer-events: auto;
+}
+
+.vmz-ui-popover__panel {
+    position: absolute;
+    z-index: 1;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    width: min(320px, calc(100vw - 32px));
+    padding: 12px;
+    border: 1px solid var(--vmz-line-subtle);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-popup);
+    outline: none;
+    pointer-events: auto;
+    animation: vmz-ui-popover-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-popover__arrow {
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-top: 1px solid var(--vmz-line-subtle);
+    border-left: 1px solid var(--vmz-line-subtle);
+    border-radius: 1px 0 0 0;
+    background: var(--vmz-surface-paper);
+    transform: translateX(-50%) rotate(45deg);
+}
+
+.vmz-ui-popover__panel:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring), var(--vmz-shadow-popup);
+}
+
+.vmz-ui-popover__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.vmz-ui-popover__heading {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.vmz-ui-popover__title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-popover__description {
+    margin: 2px 0 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-popover__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: -4px -4px 0 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-popover__close:hover {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-popover__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-popover__body {
+    margin-top: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-popover__header + .vmz-ui-popover__body {
+    margin-top: 8px;
+}
+
+.vmz-ui-popover__body :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 2px;
+}
+
+.vmz-ui-popover__body :where(a):hover {
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-popover__body :where(a):active {
+    background: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-popover__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.vmz-ui-popover__actions:empty {
+    display: none;
+}
+
+.vmz-ui-popover__actions :where(button, a) {
+    min-height: var(--vmz-control-height, 32px);
+}
+
+@keyframes vmz-ui-popover-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-6px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-popover__panel,
+    .vmz-ui-popover__close {
+        animation: none;
+        transition: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Popover (UI2).
+ * Non-modal disclosure: Escape + outside dismiss + focus enter/restore.
+ * Parent owns live `open`. `stackLevel` raises z-index; Escape dismisses only
+ * the topmost stacked overlay.
+ *
+ * Appearance props: `title`, `description`. Visible copy is author-supplied;
+ * `closeLabel` / `dismissLabel` only name the icon button and backdrop.
+ */
+export default class Popover {
+    public open: boolean = false;
+    public title: string = "";
+    public description: string = "";
+    public closeLabel: string = "";
+    public dismissLabel: string = "";
+    public titleId: string = "vmz-popover-title";
+    public stackLevel: string = "0";
+    public onClose: (() => void) | null = null;
+    _restoreFocus = null;
+    _panel = null;
+    _docKeyHandler = null;
+    _observer = null;
+    async onMount() {
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+        const root = this.__vmzDomRoot;
+        if (!root || typeof root.querySelector !== "function") return;
+        this._observer = new MutationObserver(() => this._syncFromDom());
+        this._observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+        this._syncFromDom();
+    }
+    onDestroy() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        this._teardownDocKey();
+        this._panel = null;
+        this._restoreFocus = null;
+    }
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+    _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;
+        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;
+        return (Number.isFinite(myStack) ? myStack : 0) >= max;
+    }
+    onPanelKeyDown(ev) {
+        if (!ev || ev.key !== "Escape") return;
+        if (!this._isTopmostStack()) return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.dismiss();
+    }
+    _syncFromDom() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="popover"] [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;
+        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() {
+        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>

package/src/components/Progress.vmz

@@ -13,27 +13,38 @@
 .vmz-ui-progress {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--vmz-space-3);
     width: 100%;
 }
+
 .vmz-ui-progress__track {
-    height: 0.5rem;
+    height: var(--vmz-space-2);
     flex: 1;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--vmz-radius-pill);
     background: var(--vmz-surface-mist);
 }
+
 .vmz-ui-progress__track span {
     display: block;
     height: 100%;
     border-radius: inherit;
     background: var(--vmz-action-primary-background);
-    transition: width var(--vmz-motion-control-duration, 0.16s);
+    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
+
 .vmz-ui-progress__text {
-    min-width: 2.5rem;
+    min-width: var(--vmz-space-7);
     color: var(--vmz-text-steel);
     font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5715;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-progress__track span {
+        transition: none;
+    }
 }
 </style>
 <script client>