@vmz/ui 0.0.2 → 0.0.4

package/src/components/FormItem.vmz

@@ -0,0 +1,78 @@
+<template>
+  <div
+    class="vmz-ui-form-item"
+    data-vmz-ui="form-item"
+    data-required={requiredAttr}
+    data-invalid={invalidAttr}
+  >
+    <label if={label} class="vmz-ui-form-item__label" for={controlId}>
+      <span>{label}</span>
+      <span if={required} class="vmz-ui-form-item__required" aria-hidden="true">*</span>
+    </label>
+    <div class="vmz-ui-form-item__control">
+      <slot />
+    </div>
+    <p if={description} id={descriptionId} class="vmz-ui-form-item__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-form-item__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-form-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-form-item__label {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-form-item__required {
+  color: var(--vmz-status-danger-accent);
+  font-weight: 700;
+}
+
+.vmz-ui-form-item__control {
+  min-width: 0;
+}
+
+.vmz-ui-form-item__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-form-item__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+
+.vmz-ui-form-item[data-invalid='true'] .vmz-ui-form-item__control :where(input, select, textarea) {
+  border-color: var(--vmz-status-danger-accent);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — FormItem.
+ * Label / description / error shell for slotted controls; parent owns validation strings.
+ */
+export default class FormItem {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public required: boolean = false;
+  public requiredAttr: string = 'false';
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-form-item';
+  public descriptionId: string = 'vmz-form-item-desc';
+  public errorId: string = 'vmz-form-item-err';
+}
+</script>

package/src/components/Link.vmz

@@ -0,0 +1,48 @@
+<template>
+  <a
+    class="vmz-ui-link"
+    data-vmz-ui="link"
+    href={href}
+    target={target}
+    rel={rel}
+  >
+    <slot />
+  </a>
+</template>
+
+<style>
+.vmz-ui-link {
+  font: inherit;
+  font-weight: 600;
+  color: var(--vmz-action-primary-background);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  text-decoration-thickness: 1px;
+  outline: none;
+}
+
+.vmz-ui-link:hover {
+  color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-link:active {
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-link:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  border-radius: 2px;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Link (Foundation).
+ * Navigation / inline text link; tokens only, no brand hex.
+ */
+export default class Link {
+  public href: string = '#';
+  public target: string = '';
+  public rel: string = '';
+}
+</script>

package/src/components/List.vmz

@@ -0,0 +1,116 @@
+<template>
+  <div class="vmz-ui-list" data-vmz-ui="list">
+    <p if={label} class="vmz-ui-list__label" id={labelId}>{label}</p>
+    <ul
+      class="vmz-ui-list__items"
+      role="listbox"
+      aria-labelledby={labelId}
+      aria-label={label}
+      onClick={onListClick}
+      onKeyDown={onListKeyDown}
+    >
+      <li
+        each={items}
+        as="item"
+        key={item.id}
+        class="vmz-ui-list__item"
+        role="option"
+        id={item.id}
+        data-vmz-list-item={item.id}
+        aria-selected={selected === item.id ? 'true' : 'false'}
+        tabindex={selected === item.id ? 0 : -1}
+      >
+        {item.title}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+.vmz-ui-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-list__label {
+  margin: 0;
+  font-weight: 600;
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-list__items {
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-list__item {
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border-radius: 2px;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-list__item[aria-selected='true'] {
+  background: var(--vmz-action-primary-background);
+  color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-list__item:hover {
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
+}
+
+.vmz-ui-list__item[aria-selected='true']:hover {
+  background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-list__item:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — List (ordinary selectable list).
+ * Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
+ */
+export default class List {
+  public label: string = 'List';
+  public labelId: string = 'vmz-list-label';
+  public selected: string = '';
+  /** @type {{ id: string, title: string }[]} */
+  public items: { id: string; title: string }[] = [];
+  public onSelect: ((id: string) => void) | null = null;
+
+  select(id) {
+    if (typeof this.onSelect === 'function') this.onSelect(id);
+  }
+
+  onListClick(ev) {
+    const t = ev && ev.target;
+    const el = t && typeof t.closest === 'function' ? t.closest('[data-vmz-list-item]') : null;
+    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-list-item') : null;
+    if (id) this.select(id);
+  }
+
+  onListKeyDown(ev) {
+    if (!ev || !this.items?.length) return;
+    const ids = this.items.map((it) => it.id);
+    const idx = Math.max(0, ids.indexOf(this.selected));
+    let next = idx;
+    if (ev.key === 'ArrowDown') next = (idx + 1) % ids.length;
+    else if (ev.key === 'ArrowUp') next = (idx - 1 + ids.length) % ids.length;
+    else if (ev.key === 'Home') next = 0;
+    else if (ev.key === 'End') next = ids.length - 1;
+    else return;
+    ev.preventDefault();
+    this.select(ids[next]);
+  }
+}
+</script>

package/src/components/Menu.vmz

@@ -0,0 +1,270 @@
+<template>
+  <div class="vmz-ui-menu" data-vmz-ui="menu" data-vmz-overlay-open={open}>
+    <button
+      type="button"
+      class="vmz-ui-menu__trigger"
+      data-vmz-menu="trigger"
+      aria-haspopup="menu"
+      aria-expanded={open ? 'true' : 'false'}
+      aria-controls={menuId}
+      onClick={toggle}
+      onKeyDown={onTriggerKeyDown}
+    >
+      {label}
+    </button>
+    <div
+      if={open}
+      id={menuId}
+      class="vmz-ui-menu__panel"
+      role="menu"
+      data-vmz-overlay="menu"
+      data-vmz-overlay-owner="menu"
+      data-vmz-focus="enter"
+      tabindex="-1"
+      onKeyDown={onMenuKeyDown}
+    >
+      <button
+        each={items}
+        as="item"
+        key={item.id}
+        type="button"
+        class="vmz-ui-menu__item"
+        role="menuitem"
+        data-vmz-menu-item={item.id}
+        onClick={onItemClick}
+      >
+        {item.title}
+      </button>
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-menu {
+  position: relative;
+  display: inline-block;
+}
+
+.vmz-ui-menu__trigger {
+  font: inherit;
+  font-weight: 600;
+  padding: 0.45rem 0.8rem;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  cursor: pointer;
+  background: var(--vmz-action-primary-background);
+  color: var(--vmz-action-primary-foreground);
+  outline: none;
+}
+
+.vmz-ui-menu__trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-menu__panel {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  min-width: 10rem;
+  padding: 0.25rem;
+  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;
+}
+
+.vmz-ui-menu__panel:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-menu__item {
+  display: block;
+  width: 100%;
+  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-menu__item:hover,
+.vmz-ui-menu__item:focus-visible {
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
+}
+
+.vmz-ui-menu__item:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Menu (UI2).
+ * Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
+ */
+export default class Menu {
+  public label: string = 'Menu';
+  public open: boolean = false;
+  public menuId: string = 'vmz-menu';
+  /** @type {{ id: string, title: string }[]} */
+  public items: { id: string; title: string }[] = [];
+  public onOpenChange: ((open: boolean) => void) | null = null;
+  public onSelect: ((id: string) => void) | null = null;
+
+  _restoreFocus = null;
+  _panel = null;
+  _docKeyHandler = null;
+  _docPointerHandler = 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._teardownDoc();
+    this._panel = null;
+    this._restoreFocus = null;
+  }
+
+  toggle() {
+    if (typeof this.onOpenChange === 'function') this.onOpenChange(!this.open);
+  }
+
+  close() {
+    if (typeof this.onOpenChange === 'function') this.onOpenChange(false);
+  }
+
+  choose(id) {
+    if (typeof this.onSelect === 'function') this.onSelect(id);
+    this.close();
+  }
+
+  onItemClick(ev) {
+    const el = ev?.currentTarget;
+    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-menu-item') : null;
+    if (id) this.choose(id);
+  }
+
+  onTriggerKeyDown(ev) {
+    if (!ev) return;
+    if ((ev.key === 'ArrowDown' || ev.key === 'Enter' || ev.key === ' ') && !this.open) {
+      ev.preventDefault();
+      if (typeof this.onOpenChange === 'function') this.onOpenChange(true);
+    }
+  }
+
+  onMenuKeyDown(ev) {
+    if (!ev || !this._panel) return;
+    if (ev.key === 'Escape') {
+      ev.preventDefault();
+      this.close();
+      return;
+    }
+    const nodes = [...this._panel.querySelectorAll('[role="menuitem"]')].filter(
+      (n) => n instanceof HTMLElement && n.offsetParent !== null,
+    );
+    if (!nodes.length) return;
+    const idx = nodes.indexOf(document.activeElement);
+    if (ev.key === 'ArrowDown') {
+      ev.preventDefault();
+      nodes[(idx + 1 + nodes.length) % nodes.length].focus();
+    } else if (ev.key === 'ArrowUp') {
+      ev.preventDefault();
+      nodes[(idx - 1 + nodes.length) % nodes.length].focus();
+    } else if (ev.key === 'Home') {
+      ev.preventDefault();
+      nodes[0].focus();
+    } else if (ev.key === 'End') {
+      ev.preventDefault();
+      nodes[nodes.length - 1].focus();
+    }
+  }
+
+  _syncFromDom() {
+    const root = this.__vmzDomRoot;
+    const panel =
+      root && typeof root.querySelector === 'function'
+        ? root.querySelector('[data-vmz-overlay="menu"][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 root = this.__vmzDomRoot;
+    const trigger =
+      root && typeof root.querySelector === 'function'
+        ? root.querySelector('[data-vmz-menu="trigger"]')
+        : null;
+    const active = document.activeElement;
+    if (!this._restoreFocus) {
+      if (trigger instanceof HTMLElement) this._restoreFocus = trigger;
+      else if (active instanceof HTMLElement) this._restoreFocus = active;
+    }
+    this._panel = panel instanceof HTMLElement ? panel : null;
+    const first =
+      this._panel && typeof this._panel.querySelector === 'function'
+        ? this._panel.querySelector('[role="menuitem"]')
+        : null;
+    if (first && typeof first.focus === 'function') first.focus();
+    else if (this._panel && typeof this._panel.focus === 'function') this._panel.focus();
+
+    if (!this._docKeyHandler) {
+      this._docKeyHandler = (ev) => {
+        if (ev.key === 'Escape') {
+          ev.preventDefault();
+          this.close();
+        }
+      };
+      document.addEventListener('keydown', this._docKeyHandler);
+    }
+    if (!this._docPointerHandler) {
+      this._docPointerHandler = (ev) => {
+        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);
+    }
+  }
+
+  _exitFocus() {
+    this._teardownDoc();
+    this._panel = null;
+    const restore = this._restoreFocus;
+    this._restoreFocus = null;
+    if (restore && typeof restore.focus === 'function' && document.contains(restore)) {
+      restore.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/Notification.vmz

@@ -0,0 +1,83 @@
+<template>
+  <div
+    class="vmz-ui-notification"
+    data-vmz-ui="notification"
+    data-tone={tone}
+    role={roleName}
+  >
+    <p if={title} class="vmz-ui-notification__title">{title}</p>
+    <p if={description} class="vmz-ui-notification__description">{description}</p>
+    <div class="vmz-ui-notification__actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-notification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-control-gap);
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-status-info-accent);
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-notification[data-tone='info'] {
+  border-color: var(--vmz-status-info-accent);
+  background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-notification[data-tone='success'] {
+  border-color: var(--vmz-status-success-accent);
+  background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, transparent);
+  color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-notification[data-tone='warning'] {
+  border-color: var(--vmz-status-warning-accent);
+  background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, transparent);
+  color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-notification[data-tone='danger'] {
+  border-color: var(--vmz-status-danger-accent);
+  background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, transparent);
+  color: var(--vmz-status-danger-foreground);
+}
+
+:where([data-density='compact']) .vmz-ui-notification {
+  gap: var(--vmz-density-compact-gap);
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+}
+
+.vmz-ui-notification__title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.vmz-ui-notification__description {
+  margin: 0;
+  opacity: 0.9;
+}
+
+.vmz-ui-notification__actions:empty {
+  display: none;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Notification (UI4 Commercial Surface).
+ * Ephemeral feedback surface; tones share status.* tokens with Alert.
+ */
+export default class Notification {
+  public title: string = '';
+  public description: string = '';
+  public tone: string = 'info';
+  public roleName: string = 'status';
+}
+</script>

package/src/components/Pagination.vmz

@@ -0,0 +1,81 @@
+<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>
+</template>
+
+<style>
+.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: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__status {
+  margin: 0;
+  font-weight: 600;
+}
+</style>
+
+<script client>
+/**
+ * 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();
+  }
+}
+</script>