@vmz/ui 0.0.2 → 0.0.4

package/src/components/Popover.vmz

@@ -0,0 +1,253 @@
+<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}
+    >
+      <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>
+</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;
+
+  _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/Prose.vmz

@@ -0,0 +1,83 @@
+<template>
+  <article class="vmz-ui-prose" data-vmz-ui="prose">
+    <slot />
+  </article>
+</template>
+
+<style>
+.vmz-ui-prose {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 42rem;
+  color: var(--vmz-text-ink);
+  font-family: var(--vmz-font-sans);
+  line-height: 1.65;
+}
+
+.vmz-ui-prose :where(h1, h2, h3) {
+  margin: 0;
+  font-family: var(--vmz-font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  color: var(--vmz-text-ink);
+  scroll-margin-top: 1.25rem;
+}
+
+.vmz-ui-prose :where(h1) {
+  font-size: clamp(1.85rem, 4vw, 2.35rem);
+}
+
+.vmz-ui-prose :where(h2) {
+  font-size: 1.35rem;
+  margin-top: 0.5rem;
+}
+
+.vmz-ui-prose :where(h3) {
+  font-size: 1.1rem;
+}
+
+.vmz-ui-prose :where(p) {
+  margin: 0;
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-prose :where(p.lead) {
+  font-size: 1.05rem;
+  color: var(--vmz-text-steel);
+}
+
+.vmz-ui-prose :where(ul, ol) {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-prose :where(li + li) {
+  margin-top: 0.35rem;
+}
+
+.vmz-ui-prose :where(a) {
+  color: var(--vmz-action-primary-background);
+  text-underline-offset: 0.15em;
+}
+
+.vmz-ui-prose :where(a:hover) {
+  color: var(--vmz-action-primary-hover);
+}
+
+.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.
+ */
+export default class Prose {}
+</script>

package/src/components/QueryForm.vmz

@@ -0,0 +1,39 @@
+<template>
+  <form
+    class="vmz-ui-query-form"
+    data-vmz-ui="query-form"
+    data-dense="true"
+    aria-label={label}
+    onSubmit={onSubmitGuard}
+  >
+    <slot />
+  </form>
+</template>
+
+<style>
+.vmz-ui-query-form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--vmz-density-compact-gap);
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+}
+</style>
+
+<script client>
+/**
+ * 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();
+    if (typeof this.onSubmit === 'function') this.onSubmit();
+  }
+}
+</script>

package/src/components/RadioGroup.vmz

@@ -0,0 +1,135 @@
+<template>
+  <fieldset
+    class="vmz-ui-radio-group"
+    data-vmz-ui="radio-group"
+    data-invalid={invalidAttr}
+    aria-describedby={describedBy}
+    disabled={disabled}
+  >
+    <legend class="vmz-ui-radio-group__legend">{label}</legend>
+    <div class="vmz-ui-radio-group__list" role="radiogroup" aria-label={label} onClick={onListClick}>
+      <label
+        each={items}
+        as="item"
+        key={item.value}
+        class="vmz-ui-radio-group__option"
+        for={item.id}
+      >
+        <input
+          id={item.id}
+          class="vmz-ui-radio-group__input"
+          type="radio"
+          name={name}
+          value={item.value}
+          checked={value === item.value}
+          disabled={disabled}
+          data-vmz-radio={item.value}
+        />
+        <span class="vmz-ui-radio-group__text">{item.label}</span>
+      </label>
+    </div>
+    <p if={description} id={descriptionId} class="vmz-ui-radio-group__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-radio-group__error" role="alert">{error}</p>
+  </fieldset>
+</template>
+
+<style>
+.vmz-ui-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  max-width: 28rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.vmz-ui-radio-group__legend {
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-radio-group__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.vmz-ui-radio-group__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vmz-ui-radio-group__input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--vmz-action-primary-background);
+  outline: none;
+}
+
+.vmz-ui-radio-group__input:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-radio-group__input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-radio-group__text {
+  font-weight: 600;
+}
+
+.vmz-ui-radio-group__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-radio-group__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+
+.vmz-ui-radio-group[data-invalid='true'] .vmz-ui-radio-group__legend {
+  color: var(--vmz-status-danger-foreground);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — RadioGroup.
+ * Parent owns selected value; click path updates via onChange (live prop remains authoritative).
+ */
+export default class RadioGroup {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public name: string = 'vmz-radio';
+  public value: string = '';
+  public items: Array<{ id: string; value: string; label: string }> = [];
+  public disabled: boolean = false;
+  public invalidAttr: string = 'false';
+  public descriptionId: string = 'vmz-radio-desc';
+  public errorId: string = 'vmz-radio-err';
+  public describedBy: string = '';
+  public onChange: ((value: string) => void) | null = null;
+
+  onListClick(ev) {
+    if (this.disabled) return;
+    const t = ev && ev.target;
+    if (!t || typeof t.closest !== 'function') return;
+    const input = t.closest('input[data-vmz-radio]');
+    if (!input) return;
+    const next = input.getAttribute('data-vmz-radio') || input.value || '';
+    if (!next || next === this.value) return;
+    if (typeof this.onChange === 'function') this.onChange(next);
+  }
+}
+</script>

package/src/components/Result.vmz

@@ -0,0 +1,84 @@
+<template>
+  <section
+    class="vmz-ui-result"
+    data-vmz-ui="result"
+    data-status={status}
+  >
+    <p class="vmz-ui-result__title">{title}</p>
+    <p if={description} class="vmz-ui-result__description">{description}</p>
+    <div class="vmz-ui-result__actions">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<style>
+.vmz-ui-result {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--vmz-density-control-gap);
+  padding: calc(var(--vmz-density-control-padding-y) * 1.5) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-status-info-accent);
+  border-radius: 2px;
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-result[data-status='info'] {
+  border-color: var(--vmz-status-info-accent);
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-result[data-status='success'] {
+  border-color: var(--vmz-status-success-accent);
+  color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-result[data-status='warning'] {
+  border-color: var(--vmz-status-warning-accent);
+  color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-result[data-status='danger'] {
+  border-color: var(--vmz-status-danger-accent);
+  color: var(--vmz-status-danger-foreground);
+}
+
+:where([data-density='compact']) .vmz-ui-result {
+  gap: var(--vmz-density-compact-gap);
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+}
+
+.vmz-ui-result__title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.vmz-ui-result__description {
+  margin: 0;
+  opacity: 0.9;
+}
+
+.vmz-ui-result__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.vmz-ui-result__actions:empty {
+  display: none;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Result (UI4 Commercial Surface).
+ * Outcome block for success/error flows; status → status.* tokens.
+ */
+export default class Result {
+  public title: string = '';
+  public description: string = '';
+  public status: string = 'info';
+}
+</script>