@vmz/ui 0.2.3 → 0.2.4

package/src/components/Menu.vmz

@@ -1,50 +1,22 @@
 <template>
-  <div class="vmz-ui-menu" data-vmz-ui="menu" :data-vmz-overlay-open="open">
-      <button
-        type="button"
-        class="vmz-ui-menu__trigger"
-        data-vmz-menu="trigger"
-        aria-haspopup="menu"
-        :aria-expanded="open ? 'true' : 'false'"
-        :aria-controls="menuId"
-        @click="toggle"
-        :onKeyDown="onTriggerKeyDown"
-      >
-        {{ label }}
-      </button>
-      <div
-        v-if="open"
-        :id="menuId"
-        class="vmz-ui-menu__panel"
-        role="menu"
-        data-vmz-overlay="menu"
-        data-vmz-overlay-owner="menu"
-        data-vmz-focus="enter"
-        tabindex="-1"
-        :onKeyDown="onMenuKeyDown"
-      >
-        <button
-          v-for="item in items"
-          :key="item.id"
-          type="button"
-          class="vmz-ui-menu__item"
-          role="menuitem"
-          :data-vmz-menu-item="item.id"
-          @click="onItemClick"
-        >
-          {{ item.title }}
+    <div data-vmz-ui="menu" :data-vmz-overlay-open="open" class="vmz-ui-menu">
+        <button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded='open ? "true" : "false"' :aria-controls="menuId" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-menu__trigger">
+            {{ label }}
         </button>
-      </div>
+        <div v-if="open" :id="menuId" role="menu" data-vmz-overlay="menu" data-vmz-overlay-owner="menu" data-vmz-focus="enter" tabindex="-1" :onKeyDown="onMenuKeyDown" class="vmz-ui-menu__panel">
+            <button v-for="item in items" :key="item.id" type="button" role="menuitem" :data-vmz-menu-item="item.id" @click="onItemClick" class="vmz-ui-menu__item">
+                {{ item.title }}
+            </button>
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-menu {
+.vmz-ui-menu {
     position: relative;
     display: inline-block;
-  }
+}
 
-  .vmz-ui-menu__trigger {
+.vmz-ui-menu__trigger {
     font: inherit;
     font-size: 0.875rem;
     font-weight: 400;
@@ -56,18 +28,18 @@
     background: var(--vmz-surface-paper, #fff);
     color: var(--vmz-text-ink);
     outline: none;
-  }
+}
 
-  .vmz-ui-menu__trigger:hover {
+.vmz-ui-menu__trigger:hover {
     color: var(--vmz-action-primary-background);
     border-color: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-menu__trigger:focus-visible {
+.vmz-ui-menu__trigger:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-menu__panel {
+.vmz-ui-menu__panel {
     position: absolute;
     z-index: 30;
     top: calc(100% + 0.25rem);
@@ -80,13 +52,13 @@
     color: var(--vmz-text-ink);
     box-shadow: var(--vmz-shadow-popup);
     outline: none;
-  }
+}
 
-  .vmz-ui-menu__panel:focus-visible {
+.vmz-ui-menu__panel:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-menu__item {
+.vmz-ui-menu__item {
     display: block;
     width: 100%;
     text-align: left;
@@ -98,161 +70,174 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-menu__item:hover,
-  .vmz-ui-menu__item:focus-visible {
+.vmz-ui-menu__item:hover,
+.vmz-ui-menu__item:focus-visible {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-  }
+}
 
-  .vmz-ui-menu__item:focus-visible {
+.vmz-ui-menu__item:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Menu (UI2).
-* Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
-*/
+ * VMZ UI — Menu (UI2).
+ * Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
+ */
 export default class Menu {
-	public label: string = "Menu";
-	public open: boolean = false;
-	public menuId: string = "vmz-menu";
-	/** @type {{ id: string, title: string }[]} */
-	public items: {
-		id: string;
-		title: string;
-	}[] = [];
-	public onOpenChange: ((open: boolean) => void) | null = null;
-	public onSelect: ((id: string) => void) | null = null;
-	_restoreFocus = null;
-	_panel = null;
-	_docKeyHandler = null;
-	_docPointerHandler = 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._teardownDoc();
-		this._panel = null;
-		this._restoreFocus = null;
-	}
-	toggle() {
-		if (typeof this.onOpenChange === "function") this.onOpenChange(!this.open);
-	}
-	close() {
-		if (typeof this.onOpenChange === "function") this.onOpenChange(false);
-	}
-	choose(id) {
-		if (typeof this.onSelect === "function") this.onSelect(id);
-		this.close();
-	}
-	onItemClick(ev) {
-		const el = ev?.currentTarget;
-		const id = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-menu-item") : null;
-		if (id) this.choose(id);
-	}
-	onTriggerKeyDown(ev) {
-		if (!ev) return;
-		if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
-			ev.preventDefault();
-			if (typeof this.onOpenChange === "function") this.onOpenChange(true);
-		}
-	}
-	onMenuKeyDown(ev) {
-		if (!ev || !this._panel) return;
-		if (ev.key === "Escape") {
-			ev.preventDefault();
-			this.close();
-			return;
-		}
-		const nodes = [...this._panel.querySelectorAll("[role=\"menuitem\"]")].filter((n) => n instanceof HTMLElement && n.offsetParent !== null);
-		if (!nodes.length) return;
-		const idx = nodes.indexOf(document.activeElement);
-		if (ev.key === "ArrowDown") {
-			ev.preventDefault();
-			nodes[(idx + 1 + nodes.length) % nodes.length].focus();
-		} else if (ev.key === "ArrowUp") {
-			ev.preventDefault();
-			nodes[(idx - 1 + nodes.length) % nodes.length].focus();
-		} else if (ev.key === "Home") {
-			ev.preventDefault();
-			nodes[0].focus();
-		} else if (ev.key === "End") {
-			ev.preventDefault();
-			nodes[nodes.length - 1].focus();
-		}
-	}
-	_syncFromDom() {
-		const root = this.__vmzDomRoot;
-		const panel = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-overlay=\"menu\"][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 root = this.__vmzDomRoot;
-		const trigger = root && typeof root.querySelector === "function" ? root.querySelector("[data-vmz-menu=\"trigger\"]") : null;
-		const active = document.activeElement;
-		if (!this._restoreFocus) {
-			if (trigger instanceof HTMLElement) this._restoreFocus = trigger;
-			else if (active instanceof HTMLElement) this._restoreFocus = active;
-		}
-		this._panel = panel instanceof HTMLElement ? panel : null;
-		const first = this._panel && typeof this._panel.querySelector === "function" ? this._panel.querySelector("[role=\"menuitem\"]") : null;
-		if (first && typeof first.focus === "function") first.focus();
-		else if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
-		if (!this._docKeyHandler) {
-			this._docKeyHandler = (ev) => {
-				if (ev.key === "Escape") {
-					ev.preventDefault();
-					this.close();
-				}
-			};
-			document.addEventListener("keydown", this._docKeyHandler);
-		}
-		if (!this._docPointerHandler) {
-			this._docPointerHandler = (ev) => {
-				const t = ev.target;
-				if (!(t instanceof Node)) return;
-				if (root && typeof root.contains === "function" && root.contains(t)) return;
-				this.close();
-			};
-			document.addEventListener("pointerdown", this._docPointerHandler, true);
-		}
-	}
-	_exitFocus() {
-		this._teardownDoc();
-		this._panel = null;
-		const restore = this._restoreFocus;
-		this._restoreFocus = null;
-		if (restore && typeof restore.focus === "function" && document.contains(restore)) {
-			restore.focus();
-		}
-	}
-	_teardownDoc() {
-		if (typeof document !== "undefined") {
-			if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
-			if (this._docPointerHandler) {
-				document.removeEventListener("pointerdown", this._docPointerHandler, true);
-			}
-		}
-		this._docKeyHandler = null;
-		this._docPointerHandler = null;
-	}
+    public label: string = "Menu";
+    public open: boolean = false;
+    public menuId: string = "vmz-menu";
+    /** @type {{ id: string, title: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+    }[] = [];
+    public onOpenChange: ((open: boolean) => void) | null = null;
+    public onSelect: ((id: string) => void) | null = null;
+    _restoreFocus = null;
+    _panel = null;
+    _docKeyHandler = null;
+    _docPointerHandler = 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._teardownDoc();
+        this._panel = null;
+        this._restoreFocus = null;
+    }
+    toggle() {
+        if (typeof this.onOpenChange === "function") this.onOpenChange(!this.open);
+    }
+    close() {
+        if (typeof this.onOpenChange === "function") this.onOpenChange(false);
+    }
+    choose(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+        this.close();
+    }
+    onItemClick(ev) {
+        const el = ev?.currentTarget;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-menu-item")
+                : null;
+        if (id) this.choose(id);
+    }
+    onTriggerKeyDown(ev) {
+        if (!ev) return;
+        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
+            ev.preventDefault();
+            if (typeof this.onOpenChange === "function") this.onOpenChange(true);
+        }
+    }
+    onMenuKeyDown(ev) {
+        if (!ev || !this._panel) return;
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.close();
+            return;
+        }
+        const nodes = [...this._panel.querySelectorAll('[role="menuitem"]')].filter(
+            (n) => n instanceof HTMLElement && n.offsetParent !== null,
+        );
+        if (!nodes.length) return;
+        const idx = nodes.indexOf(document.activeElement);
+        if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            nodes[(idx + 1 + nodes.length) % nodes.length].focus();
+        } else if (ev.key === "ArrowUp") {
+            ev.preventDefault();
+            nodes[(idx - 1 + nodes.length) % nodes.length].focus();
+        } else if (ev.key === "Home") {
+            ev.preventDefault();
+            nodes[0].focus();
+        } else if (ev.key === "End") {
+            ev.preventDefault();
+            nodes[nodes.length - 1].focus();
+        }
+    }
+    _syncFromDom() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="menu"][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 root = this.__vmzDomRoot;
+        const trigger =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-menu="trigger"]')
+                : null;
+        const active = document.activeElement;
+        if (!this._restoreFocus) {
+            if (trigger instanceof HTMLElement) this._restoreFocus = trigger;
+            else if (active instanceof HTMLElement) this._restoreFocus = active;
+        }
+        this._panel = panel instanceof HTMLElement ? panel : null;
+        const first =
+            this._panel && typeof this._panel.querySelector === "function"
+                ? this._panel.querySelector('[role="menuitem"]')
+                : null;
+        if (first && typeof first.focus === "function") first.focus();
+        else if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev) => {
+                if (ev.key === "Escape") {
+                    ev.preventDefault();
+                    this.close();
+                }
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+        if (!this._docPointerHandler) {
+            this._docPointerHandler = (ev) => {
+                const t = ev.target;
+                if (!(t instanceof Node)) return;
+                if (root && typeof root.contains === "function" && root.contains(t)) return;
+                this.close();
+            };
+            document.addEventListener("pointerdown", this._docPointerHandler, true);
+        }
+    }
+    _exitFocus() {
+        this._teardownDoc();
+        this._panel = null;
+        const restore = this._restoreFocus;
+        this._restoreFocus = null;
+        if (restore && typeof restore.focus === "function" && document.contains(restore)) {
+            restore.focus();
+        }
+    }
+    _teardownDoc() {
+        if (typeof document !== "undefined") {
+            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
+            if (this._docPointerHandler) {
+                document.removeEventListener("pointerdown", this._docPointerHandler, true);
+            }
+        }
+        this._docKeyHandler = null;
+        this._docPointerHandler = null;
+    }
 }
 </script>

package/src/components/Notification.vmz

@@ -1,20 +1,18 @@
 <template>
-  <div
-      class="vmz-ui-notification"
-      data-vmz-ui="notification"
-      :data-tone="tone"
-      :role="roleName"
-    >
-      <p v-if="title" class="vmz-ui-notification__title">{{ title }}</p>
-      <p v-if="description" class="vmz-ui-notification__description">{{ description }}</p>
-      <div class="vmz-ui-notification__actions">
-        <slot />
-      </div>
+    <div data-vmz-ui="notification" :data-tone="tone" :role="roleName" class="vmz-ui-notification">
+        <p v-if="title" class="vmz-ui-notification__title">
+            {{ title }}
+        </p>
+        <p v-if="description" class="vmz-ui-notification__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-notification__actions">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-notification {
+.vmz-ui-notification {
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-control-gap);
@@ -23,61 +21,60 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-notification[data-tone='info'] {
+.vmz-ui-notification[data-tone="info"] {
     border-color: var(--vmz-status-info-accent);
     background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-notification[data-tone='success'] {
+.vmz-ui-notification[data-tone="success"] {
     border-color: var(--vmz-status-success-accent);
     background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, transparent);
     color: var(--vmz-status-success-foreground);
-  }
+}
 
-  .vmz-ui-notification[data-tone='warning'] {
+.vmz-ui-notification[data-tone="warning"] {
     border-color: var(--vmz-status-warning-accent);
     background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, transparent);
     color: var(--vmz-status-warning-foreground);
-  }
+}
 
-  .vmz-ui-notification[data-tone='danger'] {
+.vmz-ui-notification[data-tone="danger"] {
     border-color: var(--vmz-status-danger-accent);
     background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, transparent);
     color: var(--vmz-status-danger-foreground);
-  }
+}
 
-  :where([data-density='compact']) .vmz-ui-notification {
+:where([data-density="compact"]) .vmz-ui-notification {
     gap: var(--vmz-density-compact-gap);
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  }
+}
 
-  .vmz-ui-notification__title {
+.vmz-ui-notification__title {
     margin: 0;
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-notification__description {
+.vmz-ui-notification__description {
     margin: 0;
     opacity: 0.9;
-  }
+}
 
-  .vmz-ui-notification__actions:empty {
+.vmz-ui-notification__actions:empty {
     display: none;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Notification (UI4 Commercial Surface).
-* Ephemeral feedback surface; tones share status.* tokens with Alert.
-*/
+ * VMZ UI — Notification (UI4 Commercial Surface).
+ * Ephemeral feedback surface; tones share status.* tokens with Alert.
+ */
 export default class Notification {
-	public title: string = "";
-	public description: string = "";
-	public tone: string = "info";
-	public roleName: string = "status";
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "info";
+    public roleName: string = "status";
 }
 </script>

package/src/components/Pagination.vmz

@@ -1,34 +1,25 @@
 <template>
-  <nav class="vmz-ui-pagination" data-vmz-ui="pagination" :aria-label="label">
-      <button
-        type="button"
-        class="vmz-ui-pagination__btn"
-        :disabled="prevDisabled"
-        @click="onPrevClick"
-      >
-        Previous
-      </button>
-      <p class="vmz-ui-pagination__status" data-vmz-fixture="page-status">{{ status }}</p>
-      <button
-        type="button"
-        class="vmz-ui-pagination__btn"
-        :disabled="nextDisabled"
-        @click="onNextClick"
-      >
-        Next
-      </button>
+    <nav data-vmz-ui="pagination" :aria-label="label" class="vmz-ui-pagination">
+        <button type="button" :disabled="prevDisabled" @click="onPrevClick" class="vmz-ui-pagination__btn">
+            Previous
+        </button>
+        <p data-vmz-fixture="page-status" class="vmz-ui-pagination__status">
+            {{ status }}
+        </p>
+        <button type="button" :disabled="nextDisabled" @click="onNextClick" class="vmz-ui-pagination__btn">
+            Next
+        </button>
     </nav>
 </template>
-
 <style>
-  .vmz-ui-pagination {
+.vmz-ui-pagination {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 0.65rem 1rem;
-  }
+}
 
-  .vmz-ui-pagination__btn {
+.vmz-ui-pagination__btn {
     font: inherit;
     font-weight: 600;
     padding: 0.35rem 0.7rem;
@@ -38,42 +29,41 @@
     color: var(--vmz-action-primary-active);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-pagination__btn:focus-visible {
+.vmz-ui-pagination__btn:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-pagination__btn:disabled {
+.vmz-ui-pagination__btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-pagination__status {
+.vmz-ui-pagination__status {
     margin: 0;
     font-weight: 600;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Pagination (Console composition skeleton).
-* Parent owns page / pageCount; buttons call onPrev / onNext.
-*/
+ * VMZ UI — Pagination (Console composition skeleton).
+ * Parent owns page / pageCount; buttons call onPrev / onNext.
+ */
 export default class Pagination {
-	public label: string = "Pagination";
-	public status: string = "Page 1 / 1";
-	public prevDisabled: boolean = true;
-	public nextDisabled: boolean = true;
-	public onPrev: (() => void) | null = null;
-	public onNext: (() => void) | null = null;
-	onPrevClick() {
-		if (this.prevDisabled) return;
-		if (typeof this.onPrev === "function") this.onPrev();
-	}
-	onNextClick() {
-		if (this.nextDisabled) return;
-		if (typeof this.onNext === "function") this.onNext();
-	}
+    public label: string = "Pagination";
+    public status: string = "Page 1 / 1";
+    public prevDisabled: boolean = true;
+    public nextDisabled: boolean = true;
+    public onPrev: (() => void) | null = null;
+    public onNext: (() => void) | null = null;
+    onPrevClick() {
+        if (this.prevDisabled) return;
+        if (typeof this.onPrev === "function") this.onPrev();
+    }
+    onNextClick() {
+        if (this.nextDisabled) return;
+        if (typeof this.onNext === "function") this.onNext();
+    }
 }
 </script>