@vmz/ui 0.0.2 → 0.0.4

package/src/components/Drawer.vmz

@@ -0,0 +1,435 @@
+<template>
+  <div
+    class="vmz-ui-drawer-root"
+    data-vmz-ui="drawer"
+    data-vmz-overlay-open={open}
+  >
+    <div
+      if={open}
+      class="vmz-ui-drawer"
+      data-vmz-overlay="drawer"
+      data-vmz-overlay-owner="drawer"
+      data-vmz-overlay-stack={stackLevel}
+    >
+      <button
+        type="button"
+        class="vmz-ui-drawer__backdrop"
+        data-vmz-overlay-layer="backdrop"
+        aria-label="Dismiss drawer"
+        onClick={dismiss}
+      ></button>
+      <div
+        class="vmz-ui-drawer__panel"
+        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}
+      >
+        <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" class="vmz-ui-drawer__close" data-vmz-focus="close" onClick={dismiss}>
+            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: color-mix(in srgb, var(--vmz-action-primary-active) 35%, 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;
+  width: min(22rem, 100vw);
+  height: 100%;
+  padding: 1rem 1.1rem 1.1rem;
+  border-left: 1px solid var(--vmz-action-primary-background);
+  background: var(--vmz-action-primary-foreground);
+  color: var(--vmz-action-primary-active);
+  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 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-drawer__title {
+  margin: 0 0 0.65rem;
+  font-size: 1.1rem;
+}
+
+.vmz-ui-drawer__body {
+  flex: 1;
+  margin-bottom: 0.9rem;
+  overflow: auto;
+}
+
+.vmz-ui-drawer__close {
+  font: inherit;
+  font-weight: 600;
+  padding: 0.45rem 0.8rem;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  cursor: pointer;
+  background: var(--vmz-action-primary-background);
+  color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-drawer__close:focus-visible {
+  box-shadow: 0 0 0 2px 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;
+        if (typeof this.onClose === 'function') this.onClose();
+      }, ms);
+      return;
+    }
+    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) * 1000);
+      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>

package/src/components/Empty.vmz

@@ -0,0 +1,52 @@
+<template>
+  <div class="vmz-ui-empty" data-vmz-ui="empty">
+    <h2 class="vmz-ui-empty__title">{title}</h2>
+    <p if={description} class="vmz-ui-empty__description">{description}</p>
+    <div class="vmz-ui-empty__actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.65rem;
+  padding: 1.5rem 1.15rem;
+  border: 1px dashed var(--vmz-line-default);
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--vmz-surface-mist) 70%, var(--vmz-surface-paper));
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-empty__title {
+  margin: 0;
+  font-family: var(--vmz-font-display);
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
+.vmz-ui-empty__description {
+  margin: 0;
+  color: var(--vmz-text-steel);
+  max-width: 36rem;
+  line-height: 1.45;
+}
+
+.vmz-ui-empty__actions:empty {
+  display: none;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Empty (Commercial composition).
+ * Empty / zero-state surface with optional action slot.
+ */
+export default class Empty {
+  public title: string = 'Nothing here yet';
+  public description: string = '';
+}
+</script>

package/src/components/Field.vmz

@@ -0,0 +1,88 @@
+<template>
+  <div class="vmz-ui-field" data-vmz-ui="field" data-invalid={invalidAttr}>
+    <label if={label} class="vmz-ui-field__label" for={controlId}>{label}</label>
+    <input
+      id={controlId}
+      class="vmz-ui-field__control"
+      type={type}
+      value={value}
+      disabled={disabled}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      onInput={onInput}
+    />
+    <p if={description} id={descriptionId} class="vmz-ui-field__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-field__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-field__label {
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-field__control {
+  font: inherit;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  outline: none;
+}
+
+.vmz-ui-field[data-invalid='true'] .vmz-ui-field__control {
+  border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-field__control:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-field__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-field__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-field__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Field (UI1).
+ * Label / description / error association via for + aria-describedby.
+ * Colors only from Style Theme semantic tokens.
+ */
+export default class Field {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public value: string = '';
+  public type: string = 'text';
+  public disabled: boolean = false;
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-field';
+  public descriptionId: string = 'vmz-field-desc';
+  public errorId: string = 'vmz-field-err';
+  public describedBy: string = '';
+  public onInput: ((e: Event) => void) | null = null;
+}
+</script>

package/src/components/FilterBar.vmz

@@ -0,0 +1,27 @@
+<template>
+  <section class="vmz-ui-filter-bar" data-vmz-ui="filter-bar" aria-label={label}>
+    <slot />
+  </section>
+</template>
+
+<style>
+.vmz-ui-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.75rem 1rem;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — FilterBar (Console composition).
+ * Dense filter/query landmark; parent projects Field + action controls.
+ */
+export default class FilterBar {
+  public label: string = 'Filters';
+}
+</script>

package/src/components/Form.vmz

@@ -0,0 +1,72 @@
+<template>
+  <form
+    class="vmz-ui-form"
+    data-vmz-ui="form"
+    data-disabled={disabledAttr}
+    data-novalidate="true"
+    aria-label={label}
+    aria-describedby={describedBy}
+    onSubmit={onSubmitGuard}
+    onReset={onResetGuard}
+  >
+    <div if={errorSummary} id={summaryId} class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
+      {errorSummary}
+    </div>
+    <slot />
+  </form>
+</template>
+
+<style>
+.vmz-ui-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-control-gap);
+  max-width: 36rem;
+}
+
+.vmz-ui-form[data-disabled='true'] {
+  opacity: 0.72;
+  pointer-events: none;
+}
+
+.vmz-ui-form__summary {
+  margin: 0;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-status-danger-accent);
+  border-left-width: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+  color: var(--vmz-status-danger-foreground);
+  font-weight: 600;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Form (hand-written commercial form shell).
+ * Parent owns field values + validation presentation; no parallel form store.
+ * Native submit/reset guarded; browser HTML5 validation left off (data-novalidate + preventDefault).
+ */
+export default class Form {
+  public label: string = 'Form';
+  public errorSummary: string = '';
+  public summaryId: string = 'vmz-form-summary';
+  public describedBy: string = '';
+  public disabled: boolean = false;
+  public disabledAttr: string = 'false';
+  public onSubmit: (() => void) | null = null;
+  public onReset: (() => void) | null = null;
+
+  onSubmitGuard(ev) {
+    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
+    if (this.disabled) return;
+    if (typeof this.onSubmit === 'function') this.onSubmit();
+  }
+
+  onResetGuard(ev) {
+    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
+    if (this.disabled) return;
+    if (typeof this.onReset === 'function') this.onReset();
+  }
+}
+</script>