@vmz/ui 0.0.2 → 0.0.4

package/src/components/Select.vmz

@@ -0,0 +1,351 @@
+<template>
+  <div
+    class={'vmz-ui-select' + (open ? ' is-opened' : '')}
+    data-vmz-ui="select"
+    data-invalid={invalidAttr}
+  >
+    <label if={label} class="vmz-ui-select__label" for={controlId}>{label}</label>
+    <button
+      type="button"
+      id={controlId}
+      class="vmz-ui-select__control"
+      disabled={disabled}
+      aria-haspopup="listbox"
+      aria-expanded={open ? 'true' : 'false'}
+      aria-controls={listId}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      onClick={toggle}
+      onKeyDown={onTriggerKeyDown}
+    >
+      <span class="vmz-ui-select__value">{displayLabel}</span>
+      <span class="vmz-ui-select__chev" aria-hidden="true"></span>
+    </button>
+    <ul
+      if={open}
+      id={listId}
+      class="vmz-ui-select__list"
+      role="listbox"
+      tabindex="-1"
+      data-vmz-overlay="select"
+      data-vmz-overlay-owner="select"
+      data-vmz-focus="enter"
+      onKeyDown={onListKeyDown}
+    >
+      <li each={options} as="opt" key={opt.value} role="presentation">
+        <button
+          type="button"
+          class={'vmz-ui-select__option' + (opt.value === value ? ' is-on' : '')}
+          role="option"
+          data-vmz-option={opt.value}
+          aria-selected={opt.value === value ? 'true' : 'false'}
+          onClick={onOptionClick}
+        >{opt.label}</button>
+      </li>
+    </ul>
+    <p if={description} id={descriptionId} class="vmz-ui-select__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-select__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-select {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-select__label {
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-select__control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  text-align: left;
+  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: var(--vmz-surface-paper, transparent);
+  color: inherit;
+  outline: none;
+  cursor: pointer;
+}
+
+.vmz-ui-select[data-invalid='true'] .vmz-ui-select__control {
+  border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-select__control:focus-visible,
+.vmz-ui-select.is-opened .vmz-ui-select__control {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-select__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vmz-ui-select__chev {
+  flex: 0 0 auto;
+  width: 0.45rem;
+  height: 0.45rem;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg) translate(-1px, -2px);
+  opacity: 0.7;
+}
+
+.vmz-ui-select.is-opened .vmz-ui-select__chev {
+  transform: rotate(225deg) translate(-1px, -1px);
+}
+
+.vmz-ui-select__list {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  max-height: 16rem;
+  overflow: auto;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper, #fff);
+  color: inherit;
+  box-shadow: 0 10px 24px color-mix(in srgb, #000 16%, transparent);
+  outline: none;
+}
+
+.vmz-ui-select__option {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+  font: inherit;
+  padding: 0.4rem 0.65rem;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-select__option:hover,
+.vmz-ui-select__option:focus-visible {
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
+}
+
+.vmz-ui-select__option.is-on {
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 28%, transparent);
+  font-weight: 600;
+}
+
+.vmz-ui-select__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-select__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Select.
+ * Owned listbox (button + options panel). Never native <select> option popup:
+ * OS popup cannot carry Style Theme / density / overlay ownership.
+ * Parent owns value + options; change via onChange Event-like { target: { value } }.
+ */
+export default class Select {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public value: string = '';
+  public options: Array<{ value: string; label: string }> = [];
+  public disabled: boolean = false;
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-select';
+  public listId: string = 'vmz-select-list';
+  public descriptionId: string = 'vmz-select-desc';
+  public errorId: string = 'vmz-select-err';
+  public describedBy: string = '';
+  public onChange: ((e: { target: { value: string } }) => void) | null = null;
+
+  open = false;
+  displayLabel = '';
+
+  _docKeyHandler = null;
+  _docPointerHandler = null;
+  _observer = null;
+
+  onMount() {
+    this.syncLabel();
+    this.listId = `${this.controlId}-list`;
+    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return;
+    const root = this.__vmzDomRoot;
+    if (!root || typeof root.querySelector !== 'function') return;
+    this._observer = new MutationObserver(() => this._syncOverlay());
+    this._observer.observe(root, { childList: true, subtree: true });
+  }
+
+  onDestroy() {
+    if (this._observer) {
+      this._observer.disconnect();
+      this._observer = null;
+    }
+    this._teardownDoc();
+  }
+
+  syncLabel() {
+    const hit = (this.options || []).find((o) => o.value === this.value);
+    this.displayLabel = hit ? hit.label : this.value || '—';
+  }
+
+  toggle() {
+    if (this.disabled) return;
+    if (this.open) this.close();
+    else this.open = true;
+  }
+
+  close() {
+    this.open = false;
+  }
+
+  choose(next: string) {
+    this.close();
+    if (next === this.value) return;
+    if (typeof this.onChange === 'function') {
+      this.onChange({ target: { value: next } });
+    }
+  }
+
+  onOptionClick(ev: Event) {
+    const el = ev?.currentTarget as HTMLElement | null;
+    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-option') : null;
+    if (id) this.choose(id);
+  }
+
+  onTriggerKeyDown(ev: KeyboardEvent) {
+    if (!ev || this.disabled) return;
+    if ((ev.key === 'ArrowDown' || ev.key === 'Enter' || ev.key === ' ') && !this.open) {
+      ev.preventDefault();
+      this.open = true;
+    } else if (ev.key === 'Escape' && this.open) {
+      ev.preventDefault();
+      this.close();
+    }
+  }
+
+  onListKeyDown(ev: KeyboardEvent) {
+    if (!ev) return;
+    if (ev.key === 'Escape') {
+      ev.preventDefault();
+      this.close();
+      return;
+    }
+    const root = this.__vmzDomRoot;
+    const list =
+      root && typeof root.querySelector === 'function'
+        ? root.querySelector(`[data-vmz-overlay="select"]`)
+        : null;
+    if (!list) return;
+    const nodes = [...list.querySelectorAll('[role="option"]')].filter(
+      (n) => n instanceof HTMLElement && n.offsetParent !== null,
+    );
+    if (!nodes.length) return;
+    const idx = nodes.indexOf(document.activeElement as Element);
+    if (ev.key === 'ArrowDown') {
+      ev.preventDefault();
+      (nodes[(idx + 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+    } else if (ev.key === 'ArrowUp') {
+      ev.preventDefault();
+      (nodes[(idx - 1 + nodes.length) % nodes.length] as HTMLElement).focus();
+    } else if (ev.key === 'Home') {
+      ev.preventDefault();
+      (nodes[0] as HTMLElement).focus();
+    } else if (ev.key === 'End') {
+      ev.preventDefault();
+      (nodes[nodes.length - 1] as HTMLElement).focus();
+    } else if (ev.key === 'Enter' || ev.key === ' ') {
+      const active = document.activeElement as HTMLElement | null;
+      const id = active?.getAttribute?.('data-vmz-option');
+      if (id) {
+        ev.preventDefault();
+        this.choose(id);
+      }
+    }
+  }
+
+  _syncOverlay() {
+    const root = this.__vmzDomRoot;
+    const panel =
+      root && typeof root.querySelector === 'function'
+        ? root.querySelector('[data-vmz-overlay="select"][data-vmz-focus="enter"]')
+        : null;
+    if (panel && this.open) this._bindDoc(panel as HTMLElement);
+    else if (!panel) this._teardownDoc();
+    this.syncLabel();
+  }
+
+  _bindDoc(panel: HTMLElement) {
+    if (typeof document === 'undefined') return;
+    if (!this._docKeyHandler) {
+      this._docKeyHandler = (ev: KeyboardEvent) => {
+        if (ev.key === 'Escape') {
+          ev.preventDefault();
+          this.close();
+        }
+      };
+      document.addEventListener('keydown', this._docKeyHandler);
+    }
+    if (!this._docPointerHandler) {
+      const root = this.__vmzDomRoot;
+      this._docPointerHandler = (ev: Event) => {
+        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);
+    }
+    const first = panel.querySelector('[role="option"]');
+    if (first instanceof HTMLElement) first.focus();
+    else panel.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/Skeleton.vmz

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="vmz-ui-skeleton"
+    data-vmz-ui="skeleton"
+    data-loading={loadingAttr}
+    role="status"
+    aria-live="polite"
+    aria-busy={loadingAttr}
+  >
+    <div if={loading} class="vmz-ui-skeleton__block" data-vmz-skeleton="block"></div>
+    <div if={loading} class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
+    <div if={loading} class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
+    <div if={!loading} class="vmz-ui-skeleton__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-compact-gap);
+  min-height: 4.5rem;
+}
+
+.vmz-ui-skeleton__block,
+.vmz-ui-skeleton__line {
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
+  animation: vmz-ui-skeleton-pulse var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing) infinite alternate;
+}
+
+.vmz-ui-skeleton__block {
+  width: 100%;
+  height: 2.5rem;
+}
+
+.vmz-ui-skeleton__line {
+  width: 72%;
+  height: 0.75rem;
+}
+
+.vmz-ui-skeleton__line + .vmz-ui-skeleton__line {
+  width: 48%;
+}
+
+.vmz-ui-skeleton__content {
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
+}
+
+@keyframes vmz-ui-skeleton-pulse {
+  from {
+    opacity: 0.55;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vmz-ui-skeleton__block,
+  .vmz-ui-skeleton__line {
+    animation: none;
+  }
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Skeleton (UI5 Console Surface).
+ * Loading placeholder with stable min-height (CLS guard); parent owns loading.
+ */
+export default class Skeleton {
+  public loading: boolean = true;
+  public loadingAttr: string = 'true';
+}
+</script>

package/src/components/Spinner.vmz

@@ -0,0 +1,45 @@
+<template>
+  <span
+    class="vmz-ui-spinner"
+    data-vmz-ui="spinner"
+    role="status"
+    aria-label={label}
+  ></span>
+</template>
+
+<style>
+.vmz-ui-spinner {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid color-mix(in srgb, var(--vmz-action-primary-background) 25%, transparent);
+  border-top-color: var(--vmz-action-primary-background);
+  border-radius: 50%;
+  vertical-align: -0.15em;
+  animation: vmz-ui-spin var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing) infinite;
+}
+
+@keyframes vmz-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vmz-ui-spinner {
+    animation: none;
+    border-color: var(--vmz-action-primary-background);
+    opacity: 0.55;
+  }
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Spinner (Foundation).
+ * Loading indicator; reduced-motion keeps static feedback.
+ */
+export default class Spinner {
+  public label: string = 'Loading';
+}
+</script>

package/src/components/Steps.vmz

@@ -0,0 +1,107 @@
+<template>
+  <ol class="vmz-ui-steps" data-vmz-ui="steps" aria-label={label}>
+    <li
+      each={items}
+      as="item"
+      key={item.id}
+      class="vmz-ui-steps__item"
+      data-vmz-step={item.id}
+      data-status={item.status}
+      aria-current={current === item.id ? 'step' : 'false'}
+    >
+      <span class="vmz-ui-steps__index" data-vmz-step-index={item.id}>{item.index}</span>
+      <span class="vmz-ui-steps__body">
+        <span class="vmz-ui-steps__title">{item.title}</span>
+        <span if={item.description} class="vmz-ui-steps__description">{item.description}</span>
+      </span>
+    </li>
+  </ol>
+</template>
+
+<style>
+.vmz-ui-steps {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-control-gap);
+  max-width: 36rem;
+}
+
+.vmz-ui-steps__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  color: var(--vmz-text-steel);
+}
+
+.vmz-ui-steps__item[data-status='done'] {
+  color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-steps__item[data-status='current'] {
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-steps__index {
+  flex: 0 0 auto;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 0.85rem;
+  color: inherit;
+}
+
+.vmz-ui-steps__item[data-status='current'] .vmz-ui-steps__index {
+  border-color: var(--vmz-action-primary-background);
+  background: var(--vmz-action-primary-background);
+  color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-steps__item[data-status='done'] .vmz-ui-steps__index {
+  border-color: var(--vmz-status-success-accent);
+  background: color-mix(in srgb, var(--vmz-status-success-accent) 18%, transparent);
+}
+
+.vmz-ui-steps__body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding-top: 0.15rem;
+}
+
+.vmz-ui-steps__title {
+  font-weight: 700;
+}
+
+.vmz-ui-steps__description {
+  font-size: 0.9em;
+  opacity: 0.9;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Steps.
+ * Parent owns `current` id and item `status` (upcoming|current|done).
+ * Navigation actions stay on the page (no private wizard store).
+ */
+export default class Steps {
+  public label: string = 'Steps';
+  public current: string = '';
+  /** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
+  public items: {
+    id: string;
+    index: string;
+    title: string;
+    description?: string;
+    status: string;
+  }[] = [];
+}
+</script>

package/src/components/Switch.vmz

@@ -0,0 +1,109 @@
+<template>
+  <label class="vmz-ui-switch" data-vmz-ui="switch" for={controlId}>
+    <button
+      id={controlId}
+      type="button"
+      class="vmz-ui-switch__control"
+      role="switch"
+      aria-checked={checked}
+      aria-describedby={describedBy}
+      disabled={disabled}
+      onClick={toggle}
+      onKeyDown={onKeyDown}
+    >
+      <span class="vmz-ui-switch__thumb" aria-hidden="true"></span>
+    </button>
+    <span class="vmz-ui-switch__label">{label}</span>
+  </label>
+</template>
+
+<style>
+.vmz-ui-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vmz-ui-switch__control {
+  position: relative;
+  width: 2.4rem;
+  height: 1.35rem;
+  padding: 0;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 999px;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-switch__control[aria-checked='true'],
+.vmz-ui-switch__control[aria-checked=''] {
+  background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-switch__control:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-switch__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-switch__thumb {
+  position: absolute;
+  top: 0.12rem;
+  left: 0.12rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  background: var(--vmz-action-primary-foreground);
+  transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-switch__control[aria-checked='true'] .vmz-ui-switch__thumb,
+.vmz-ui-switch__control[aria-checked=''] .vmz-ui-switch__thumb {
+  transform: translateX(1.05rem);
+}
+
+.vmz-ui-switch__label {
+  font-weight: 600;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vmz-ui-switch__thumb {
+    transition: none;
+  }
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Switch (UI2).
+ * role=switch + aria-checked; parent owns checked (no parallel form store).
+ */
+export default class Switch {
+  public label: string = '';
+  public checked: boolean = false;
+  public disabled: boolean = false;
+  public controlId: string = 'vmz-switch';
+  public describedBy: string = '';
+  public onChange: ((checked: boolean) => void) | null = null;
+
+  toggle() {
+    if (this.disabled) return;
+    const next = !this.checked;
+    if (typeof this.onChange === 'function') this.onChange(next);
+  }
+
+  onKeyDown(ev) {
+    if (!ev) return;
+    if (ev.key === ' ' || ev.key === 'Enter') {
+      ev.preventDefault();
+      this.toggle();
+    }
+  }
+}
+</script>