@vmz/ui 0.1.0 → 0.1.2

package/src/components/Pagination.vmz

@@ -1,81 +1,79 @@
 <template>
   <nav class="vmz-ui-pagination" data-vmz-ui="pagination" aria-label={label}>
-    <button
-      type="button"
-      class="vmz-ui-pagination__btn"
-      disabled={prevDisabled}
-      onClick={onPrevClick}
-    >
-      Previous
-    </button>
-    <p class="vmz-ui-pagination__status" data-dogfood="page-status">{status}</p>
-    <button
-      type="button"
-      class="vmz-ui-pagination__btn"
-      disabled={nextDisabled}
-      onClick={onNextClick}
-    >
-      Next
-    </button>
-  </nav>
+      <button
+        type="button"
+        class="vmz-ui-pagination__btn"
+        disabled={prevDisabled}
+        onClick={onPrevClick}
+      >
+        Previous
+      </button>
+      <p class="vmz-ui-pagination__status" data-dogfood="page-status">{status}</p>
+      <button
+        type="button"
+        class="vmz-ui-pagination__btn"
+        disabled={nextDisabled}
+        onClick={onNextClick}
+      >
+        Next
+      </button>
+    </nav>
 </template>
 
 <style>
-.vmz-ui-pagination {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.65rem 1rem;
-}
+  .vmz-ui-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.65rem 1rem;
+  }
 
-.vmz-ui-pagination__btn {
-  font: inherit;
-  font-weight: 600;
-  padding: 0.35rem 0.7rem;
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-  background: transparent;
-  color: var(--vmz-action-primary-active);
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-pagination__btn {
+    font: inherit;
+    font-weight: 600;
+    padding: 0.35rem 0.7rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+    color: var(--vmz-action-primary-active);
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-pagination__btn:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-pagination__btn:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-pagination__btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
+  .vmz-ui-pagination__btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
 
-.vmz-ui-pagination__status {
-  margin: 0;
-  font-weight: 600;
-}
+  .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>

package/src/components/Popover.vmz

@@ -1,253 +1,236 @@
 <template>
   <div
-    class="vmz-ui-popover-root"
-    data-vmz-ui="popover"
-    data-vmz-overlay-open={open}
-  >
-    <div
-      if={open}
-      class="vmz-ui-popover"
-      data-vmz-overlay="popover"
-      data-vmz-overlay-owner="popover"
-      data-vmz-overlay-stack={stackLevel}
+      class="vmz-ui-popover-root"
+      data-vmz-ui="popover"
+      data-vmz-overlay-open={open}
     >
-      <button
-        type="button"
-        class="vmz-ui-popover__backdrop"
-        data-vmz-overlay-layer="backdrop"
-        aria-label="Dismiss popover"
-        onClick={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}
+        if={open}
+        class="vmz-ui-popover"
+        data-vmz-overlay="popover"
+        data-vmz-overlay-owner="popover"
+        data-vmz-overlay-stack={stackLevel}
       >
-        <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" onClick={dismiss}>
-            Close
-          </button>
+        <button
+          type="button"
+          class="vmz-ui-popover__backdrop"
+          data-vmz-overlay-layer="backdrop"
+          aria-label="Dismiss popover"
+          onClick={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" onClick={dismiss}>
+              Close
+            </button>
+          </div>
         </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-action-primary-background);
-  border-radius: 2px;
-  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 2px 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.4rem 0.7rem;
-  border: 1px solid transparent;
-  border-radius: 2px;
-  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 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.
- */
-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;
+  .vmz-ui-popover-root {
+    display: block;
+  }
 
-  _restoreFocus = null;
-  _panel = null;
-  _docKeyHandler = null;
-  _observer = null;
+  .vmz-ui-popover {
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    pointer-events: none;
+  }
 
-  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();
+  .vmz-ui-popover[data-vmz-overlay-stack='1'] {
+    z-index: 50;
   }
 
-  onDestroy() {
-    if (this._observer) {
-      this._observer.disconnect();
-      this._observer = null;
-    }
-    this._teardownDocKey();
-    this._panel = null;
-    this._restoreFocus = null;
+  .vmz-ui-popover[data-vmz-overlay-stack='2'] {
+    z-index: 60;
   }
 
-  dismiss() {
-    if (typeof this.onClose === 'function') this.onClose();
+  .vmz-ui-popover[data-vmz-overlay-stack='3'] {
+    z-index: 70;
   }
 
-  _stackValue() {
-    const n = Number(this.stackLevel);
-    return Number.isFinite(n) ? n : 0;
+  .vmz-ui-popover__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: default;
+    background: transparent;
+    pointer-events: auto;
   }
 
-  _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;
+  .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;
   }
 
-  onPanelKeyDown(ev) {
-    if (!ev || ev.key !== 'Escape') return;
-    if (!this._isTopmostStack()) return;
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.dismiss();
+  .vmz-ui-popover__panel:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
   }
 
-  _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();
+  .vmz-ui-popover__title {
+    margin: 0 0 0.5rem;
+    font-size: 1rem;
   }
 
-  _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);
-    }
+  .vmz-ui-popover__body {
+    margin-bottom: 0.75rem;
   }
 
-  _exitFocus() {
-    this._teardownDocKey();
-    this._panel = null;
-    const restore = this._restoreFocus;
-    this._restoreFocus = null;
-    if (restore && typeof restore.focus === 'function' && document.contains(restore)) {
-      restore.focus();
-    }
+  .vmz-ui-popover__close {
+    font: inherit;
+    font-weight: 600;
+    padding: 0.4rem 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);
   }
 
-  _teardownDocKey() {
-    if (typeof document !== 'undefined' && this._docKeyHandler) {
-      document.removeEventListener('keydown', this._docKeyHandler);
-    }
-    this._docKeyHandler = null;
+  .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.
+*/
+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() {
+		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

@@ -0,0 +1,18 @@
+<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 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}
+</style>
+<script client>
+export default class Progress {
+  public percent: number = 0;
+  public showInfo: boolean = true;
+}
+</script>