@vmz/ui 0.2.3 → 0.2.5

package/src/components/Popover.vmz

@@ -1,72 +1,48 @@
 <template>
-  <div
-      class="vmz-ui-popover-root"
-      data-vmz-ui="popover"
-      :data-vmz-overlay-open="open"
-    >
-      <div
-        v-if="open"
-        class="vmz-ui-popover"
-        data-vmz-overlay="popover"
-        data-vmz-overlay-owner="popover"
-        :data-vmz-overlay-stack="stackLevel"
-      >
-        <button
-          type="button"
-          class="vmz-ui-popover__backdrop"
-          data-vmz-overlay-layer="backdrop"
-          aria-label="Dismiss popover"
-          @click="dismiss"
-        ></button>
-        <div
-          class="vmz-ui-popover__panel"
-          role="dialog"
-          aria-modal="false"
-          :aria-labelledby="titleId"
-          tabindex="-1"
-          data-vmz-overlay-layer="panel"
-          data-vmz-focus="enter"
-          :onKeyDown="onPanelKeyDown"
-        >
-          <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" class="vmz-ui-popover__close" data-vmz-focus="close" @click="dismiss">
-              Close
-            </button>
-          </div>
+    <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>
     </div>
 </template>
-
 <style>
-  .vmz-ui-popover-root {
+.vmz-ui-popover-root {
     display: block;
-  }
+}
 
-  .vmz-ui-popover {
+.vmz-ui-popover {
     position: fixed;
     inset: 0;
     z-index: 35;
     pointer-events: none;
-  }
+}
 
-  .vmz-ui-popover[data-vmz-overlay-stack='1'] {
+.vmz-ui-popover[data-vmz-overlay-stack="1"] {
     z-index: 50;
-  }
+}
 
-  .vmz-ui-popover[data-vmz-overlay-stack='2'] {
+.vmz-ui-popover[data-vmz-overlay-stack="2"] {
     z-index: 60;
-  }
+}
 
-  .vmz-ui-popover[data-vmz-overlay-stack='3'] {
+.vmz-ui-popover[data-vmz-overlay-stack="3"] {
     z-index: 70;
-  }
+}
 
-  .vmz-ui-popover__backdrop {
+.vmz-ui-popover__backdrop {
     position: absolute;
     inset: 0;
     border: 0;
@@ -75,9 +51,9 @@
     cursor: default;
     background: transparent;
     pointer-events: auto;
-  }
+}
 
-  .vmz-ui-popover__panel {
+.vmz-ui-popover__panel {
     position: absolute;
     z-index: 1;
     top: 30%;
@@ -93,22 +69,22 @@
     color: var(--vmz-action-primary-active);
     outline: none;
     pointer-events: auto;
-  }
+}
 
-  .vmz-ui-popover__panel:focus-visible {
+.vmz-ui-popover__panel:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-popover__title {
+.vmz-ui-popover__title {
     margin: 0 0 0.5rem;
     font-size: 1rem;
-  }
+}
 
-  .vmz-ui-popover__body {
+.vmz-ui-popover__body {
     margin-bottom: 0.75rem;
-  }
+}
 
-  .vmz-ui-popover__close {
+.vmz-ui-popover__close {
     font: inherit;
     font-weight: 600;
     padding: 0.4rem 0.7rem;
@@ -117,121 +93,131 @@
     cursor: pointer;
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
-  }
+}
 
-  .vmz-ui-popover__close:focus-visible {
+.vmz-ui-popover__close:focus-visible {
     box-shadow: 0 0 0 2px 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.
-*/
+ * 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;
-	}
+    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>

package/src/components/Progress.vmz

@@ -1,18 +1,44 @@
 <template>
-  <div class="vmz-ui-progress" data-vmz-ui="progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="100" :aria-valuenow="percent">
-    <div class="vmz-ui-progress__track"><span :style="'width:' + percent + '%'"></span></div>
-    <span v-if="showInfo" class="vmz-ui-progress__text">{{ percent }}%</span>
-  </div>
+    <div data-vmz-ui="progress" role="progressbar" :aria-valuemin="0" :aria-valuemax="100" :aria-valuenow="percent" class="vmz-ui-progress">
+        <div class="vmz-ui-progress__track">
+            <span :style='"width:" + percent + "%"' />
+        </div>
+        <span v-if="showInfo" class="vmz-ui-progress__text">
+            {{ percent }}
+            %
+        </span>
+    </div>
 </template>
 <style>
-.vmz-ui-progress{display:flex;align-items:center;gap:.75rem;width:100%}
-.vmz-ui-progress__track{height:.5rem;flex:1;overflow:hidden;border-radius:999px;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,.16s)}
-.vmz-ui-progress__text{min-width:2.5rem;color:var(--vmz-text-steel);font-size:.875rem}
+.vmz-ui-progress {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+}
+.vmz-ui-progress__track {
+    height: 0.5rem;
+    flex: 1;
+    overflow: hidden;
+    border-radius: 999px;
+    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);
+}
+.vmz-ui-progress__text {
+    min-width: 2.5rem;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+}
 </style>
 <script client>
 export default class Progress {
-  public percent: number = 0;
-  public showInfo: boolean = true;
+    public percent: number = 0;
+    public showInfo: boolean = true;
 }
 </script>

package/src/components/Prose.vmz

@@ -1,11 +1,10 @@
 <template>
-  <article class="vmz-ui-prose" data-vmz-ui="prose">
-      <slot />
+    <article data-vmz-ui="prose" class="vmz-ui-prose">
+        <slot />
     </article>
 </template>
-
 <style>
-  .vmz-ui-prose {
+.vmz-ui-prose {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -13,9 +12,9 @@
     color: var(--vmz-text-ink);
     font-family: var(--vmz-font-sans);
     line-height: 1.65;
-  }
+}
 
-  .vmz-ui-prose :where(h1, h2, h3) {
+.vmz-ui-prose :where(h1, h2, h3) {
     margin: 0;
     font-family: var(--vmz-font-display);
     font-weight: 700;
@@ -23,61 +22,60 @@
     line-height: 1.2;
     color: var(--vmz-text-ink);
     scroll-margin-top: 1.25rem;
-  }
+}
 
-  .vmz-ui-prose :where(h1) {
+.vmz-ui-prose :where(h1) {
     font-size: clamp(1.85rem, 4vw, 2.35rem);
-  }
+}
 
-  .vmz-ui-prose :where(h2) {
+.vmz-ui-prose :where(h2) {
     font-size: 1.35rem;
     margin-top: 0.5rem;
-  }
+}
 
-  .vmz-ui-prose :where(h3) {
+.vmz-ui-prose :where(h3) {
     font-size: 1.1rem;
-  }
+}
 
-  .vmz-ui-prose :where(p) {
+.vmz-ui-prose :where(p) {
     margin: 0;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-prose :where(p.lead) {
+.vmz-ui-prose :where(p.lead) {
     font-size: 1.05rem;
     color: var(--vmz-text-steel);
-  }
+}
 
-  .vmz-ui-prose :where(ul, ol) {
+.vmz-ui-prose :where(ul, ol) {
     margin: 0;
     padding-left: 1.25rem;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-prose :where(li + li) {
+.vmz-ui-prose :where(li + li) {
     margin-top: 0.35rem;
-  }
+}
 
-  .vmz-ui-prose :where(a) {
+.vmz-ui-prose :where(a) {
     color: var(--vmz-action-primary-background);
     text-underline-offset: 0.15em;
-  }
+}
 
-  .vmz-ui-prose :where(a:hover) {
+.vmz-ui-prose :where(a:hover) {
     color: var(--vmz-action-primary-hover);
-  }
+}
 
-  .vmz-ui-prose :where(hr) {
+.vmz-ui-prose :where(hr) {
     border: 0;
     border-top: 1px solid var(--vmz-line-default);
     margin: 0.5rem 0;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Prose (Document/Product composition).
-* Typography measure for long-form content; values from Style Theme only.
-*/
+ * VMZ UI — Prose (Document/Product composition).
+ * Typography measure for long-form content; values from Style Theme only.
+ */
 export default class Prose {}
 </script>

package/src/components/QueryForm.vmz

@@ -1,17 +1,10 @@
 <template>
-  <form
-      class="vmz-ui-query-form"
-      data-vmz-ui="query-form"
-      data-dense="true"
-      :aria-label="label"
-      @submit="onSubmitGuard"
-    >
-      <slot />
+    <form data-vmz-ui="query-form" data-dense="true" :aria-label="label" @submit="onSubmitGuard" class="vmz-ui-query-form">
+        <slot />
     </form>
 </template>
-
 <style>
-  .vmz-ui-query-form {
+.vmz-ui-query-form {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
@@ -19,21 +12,20 @@
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — QueryForm (UI5 Console Surface).
-* Dense multi-field query landmark; spacing from density.compact.* tokens.
-*/
+ * VMZ UI — QueryForm (UI5 Console Surface).
+ * Dense multi-field query landmark; spacing from density.compact.* tokens.
+ */
 export default class QueryForm {
-	public label: string = "Query";
-	public onSubmit: (() => void) | null = null;
-	onSubmitGuard(ev) {
-		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-		this.emit("submit");
-		if (typeof this.onSubmit === "function") this.onSubmit();
-	}
+    public label: string = "Query";
+    public onSubmit: (() => void) | null = null;
+    onSubmitGuard(ev) {
+        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+        this.emit("submit");
+        if (typeof this.onSubmit === "function") this.onSubmit();
+    }
 }
 </script>