@vmz/ui 0.0.3 → 0.1.0

package/package.json

@@ -1,16 +1,64 @@
 {
   "name": "@vmz/ui",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",
   "exports": {
     "./contracts/token-requirements": "./contracts/token-requirements.v0.json",
-    "./Button": "./src/components/Button.vmz"
+    "./presets/web-surface": "./presets/web-surface.v0.json",
+    "./conformance/pack": "./conformance/pack.v0.json",
+    "./Button": "./src/components/Button.vmz",
+    "./Link": "./src/components/Link.vmz",
+    "./Badge": "./src/components/Badge.vmz",
+    "./Spinner": "./src/components/Spinner.vmz",
+    "./Tooltip": "./src/components/Tooltip.vmz",
+    "./Autocomplete": "./src/components/Autocomplete.vmz",
+    "./DatePicker": "./src/components/DatePicker.vmz",
+    "./Upload": "./src/components/Upload.vmz",
+    "./Field": "./src/components/Field.vmz",
+    "./Form": "./src/components/Form.vmz",
+    "./FormItem": "./src/components/FormItem.vmz",
+    "./TextArea": "./src/components/TextArea.vmz",
+    "./Select": "./src/components/Select.vmz",
+    "./RadioGroup": "./src/components/RadioGroup.vmz",
+    "./Dialog": "./src/components/Dialog.vmz",
+    "./Checkbox": "./src/components/Checkbox.vmz",
+    "./Switch": "./src/components/Switch.vmz",
+    "./Tabs": "./src/components/Tabs.vmz",
+    "./Menu": "./src/components/Menu.vmz",
+    "./Drawer": "./src/components/Drawer.vmz",
+    "./Popover": "./src/components/Popover.vmz",
+    "./AppShell": "./src/components/AppShell.vmz",
+    "./Card": "./src/components/Card.vmz",
+    "./Alert": "./src/components/Alert.vmz",
+    "./Empty": "./src/components/Empty.vmz",
+    "./Notification": "./src/components/Notification.vmz",
+    "./Result": "./src/components/Result.vmz",
+    "./Prose": "./src/components/Prose.vmz",
+    "./Toc": "./src/components/Toc.vmz",
+    "./Callout": "./src/components/Callout.vmz",
+    "./CodeBlock": "./src/components/CodeBlock.vmz",
+    "./ConsoleShell": "./src/components/ConsoleShell.vmz",
+    "./FilterBar": "./src/components/FilterBar.vmz",
+    "./Table": "./src/components/Table.vmz",
+    "./BulkActions": "./src/components/BulkActions.vmz",
+    "./Pagination": "./src/components/Pagination.vmz",
+    "./Breadcrumb": "./src/components/Breadcrumb.vmz",
+    "./QueryForm": "./src/components/QueryForm.vmz",
+    "./Skeleton": "./src/components/Skeleton.vmz",
+    "./Timeline": "./src/components/Timeline.vmz",
+    "./DataTable": "./src/components/DataTable.vmz",
+    "./Accordion": "./src/components/Accordion.vmz",
+    "./Steps": "./src/components/Steps.vmz",
+    "./List": "./src/components/List.vmz",
+    "./Tree": "./src/components/Tree.vmz"
   },
   "files": [
     "src",
     "contracts",
+    "presets",
+    "conformance",
     "README.md"
   ],
   "keywords": [

package/presets/web-surface.v0.json

@@ -0,0 +1,34 @@
+{
+    "schema": "vmz.ui.preset.v0",
+    "id": "web-surface",
+    "package": "@vmz/ui",
+    "materialize": "Copy or resolve into application /designs Style Theme (tokens/*.json + themes/*.json). Preset is not a second runtime theme.",
+    "density": {
+        "control": {
+            "padding-y": "0.55rem",
+            "padding-x": "0.95rem",
+            "gap": "0.75rem"
+        },
+        "compact": {
+            "padding-y": "0.35rem",
+            "padding-x": "0.65rem",
+            "gap": "0.45rem"
+        },
+        "dense": {
+            "padding-y": "0.2rem",
+            "padding-x": "0.45rem",
+            "gap": "0.3rem"
+        }
+    },
+    "activation": {
+        "densityAttr": "data-density",
+        "densityValues": ["comfortable", "compact", "dense"],
+        "themeAttr": "data-theme",
+        "dirValues": ["ltr", "rtl"]
+    },
+    "themes": {
+        "default": "application tokens base",
+        "dark": "themes/dark.json overlay",
+        "high-contrast": "themes/high-contrast.json overlay — stronger ink/line/focus"
+    }
+}

package/src/components/Accordion.vmz

@@ -0,0 +1,112 @@
+<template>
+  <div class="vmz-ui-accordion" data-vmz-ui="accordion" aria-label={label}>
+    <div each={items} as="item" key={item.id} class="vmz-ui-accordion__item" data-vmz-accordion={item.id}>
+      <h3 class="vmz-ui-accordion__heading">
+        <button
+          type="button"
+          class="vmz-ui-accordion__trigger"
+          id={item.triggerId}
+          data-vmz-accordion-trigger={item.id}
+          aria-expanded={openId === item.id ? 'true' : 'false'}
+          aria-controls={item.panelId}
+          onClick={() => this.toggle(item.id)}
+        >
+          {item.title}
+        </button>
+      </h3>
+      <div
+        if={openId === item.id}
+        id={item.panelId}
+        class="vmz-ui-accordion__panel"
+        role="region"
+        data-vmz-accordion-panel={item.id}
+        aria-labelledby={item.triggerId}
+      >
+        {item.body}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 36rem;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-accordion__item {
+  border-bottom: 1px solid var(--vmz-line-default);
+}
+
+.vmz-ui-accordion__item:last-child {
+  border-bottom: none;
+}
+
+.vmz-ui-accordion__heading {
+  margin: 0;
+  font: inherit;
+}
+
+.vmz-ui-accordion__trigger {
+  display: block;
+  width: 100%;
+  text-align: start;
+  font: inherit;
+  font-weight: 600;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  outline: none;
+}
+
+.vmz-ui-accordion__trigger:hover {
+  background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
+}
+
+.vmz-ui-accordion__trigger:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-accordion__trigger[aria-expanded='true'] {
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-accordion__panel {
+  padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
+  color: var(--vmz-text-steel);
+  line-height: 1.5;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Accordion.
+ * Exclusive open: parent owns `openId`. Toggle same id closes.
+ * Panel body lives on items (no per-panel slot runtime).
+ */
+export default class Accordion {
+  public label: string = 'Accordion';
+  public openId: string = '';
+  /** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
+  public items: {
+    id: string;
+    title: string;
+    body: string;
+    triggerId: string;
+    panelId: string;
+  }[] = [];
+  public onToggle: ((id: string) => void) | null = null;
+
+  toggle(id) {
+    if (typeof this.onToggle === 'function') this.onToggle(id);
+  }
+}
+</script>

package/src/components/Alert.vmz

@@ -0,0 +1,84 @@
+<template>
+  <div
+    class="vmz-ui-alert"
+    data-vmz-ui="alert"
+    data-tone={tone}
+    role={roleName}
+  >
+    <p if={title} class="vmz-ui-alert__title">{title}</p>
+    <p if={description} class="vmz-ui-alert__description">{description}</p>
+    <div class="vmz-ui-alert__actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-alert {
+  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-left-width: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-alert[data-tone='info'] {
+  border-color: var(--vmz-status-info-accent);
+  background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-alert[data-tone='success'] {
+  border-color: var(--vmz-status-success-accent);
+  background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, transparent);
+  color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-alert[data-tone='warning'] {
+  border-color: var(--vmz-status-warning-accent);
+  background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, transparent);
+  color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-alert[data-tone='danger'] {
+  border-color: var(--vmz-status-danger-accent);
+  background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+  color: var(--vmz-status-danger-foreground);
+}
+
+:where([data-density='compact']) .vmz-ui-alert {
+  gap: var(--vmz-density-compact-gap);
+  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+}
+
+.vmz-ui-alert__title {
+  margin: 0;
+  font-weight: 700;
+}
+
+.vmz-ui-alert__description {
+  margin: 0;
+  opacity: 0.9;
+}
+
+.vmz-ui-alert__actions:empty {
+  display: none;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Alert (UI4 status tone matrix).
+ * tone → status.{info|success|warning|danger}.* tokens from Style Theme.
+ */
+export default class Alert {
+  public title: string = '';
+  public description: string = '';
+  public tone: string = 'info';
+  public roleName: string = 'status';
+}
+</script>

package/src/components/AppShell.vmz

@@ -0,0 +1,97 @@
+<template>
+  <div class="vmz-ui-app-shell" data-vmz-ui="app-shell">
+    <header class="vmz-ui-app-shell__header" data-vmz-shell="header">
+      <a class="vmz-ui-app-shell__brand" href={homeHref}>{brand}</a>
+      <nav class="vmz-ui-app-shell__nav" aria-label={navLabel}>
+        <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
+          {item.title}
+        </a>
+      </nav>
+    </header>
+    <main class="vmz-ui-app-shell__main" data-vmz-shell="main">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style>
+.vmz-ui-app-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  color: var(--vmz-text-ink);
+  background: transparent;
+}
+
+.vmz-ui-app-shell__header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem 1.25rem;
+  padding: 0.9rem clamp(1rem, 3vw, 1.75rem);
+  border-bottom: 1px solid var(--vmz-line-default);
+  box-shadow: inset 0 -2px 0 var(--vmz-action-primary-background);
+  background: color-mix(in srgb, var(--vmz-surface-paper) 92%, transparent);
+}
+
+.vmz-ui-app-shell__brand {
+  font-family: var(--vmz-font-display);
+  font-weight: 700;
+  font-size: 1.2rem;
+  letter-spacing: 0.03em;
+  text-decoration: none;
+  color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-app-shell__brand:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-app-shell__nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem 1rem;
+}
+
+.vmz-ui-app-shell__nav a {
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--vmz-text-steel);
+}
+
+.vmz-ui-app-shell__nav a:hover {
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-app-shell__nav a:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-app-shell__main {
+  flex: 1;
+  width: min(68rem, calc(100% - 2rem));
+  margin: 0 auto;
+  padding: 1.5rem 1rem 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — AppShell (Commercial composition).
+ * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
+ */
+export default class AppShell {
+  public brand: string = 'VMZ';
+  public homeHref: string = '/';
+  public navLabel: string = 'Primary';
+  /** @type {{ id: string, title: string, href: string }[]} */
+  public nav: { id: string; title: string; href: string }[] = [];
+}
+</script>

package/src/components/Autocomplete.vmz

@@ -0,0 +1,176 @@
+<template>
+  <div
+    class="vmz-ui-autocomplete"
+    data-vmz-ui="autocomplete"
+    data-invalid={invalidAttr}
+    data-open={openAttr}
+  >
+    <label if={label} class="vmz-ui-autocomplete__label" for={controlId}>{label}</label>
+    <input
+      id={controlId}
+      class="vmz-ui-autocomplete__control"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-expanded={openAttr}
+      aria-controls={listId}
+      aria-invalid={error ? 'true' : 'false'}
+      aria-describedby={describedBy}
+      value={value}
+      disabled={disabled}
+      onInput={onInput}
+      onKeyDown={onKeyDown}
+    />
+    <ul
+      if={listOpen}
+      id={listId}
+      class="vmz-ui-autocomplete__list"
+      role="listbox"
+      data-vmz-autocomplete="list"
+      onClick={onListClick}
+    >
+      <li
+        each={options}
+        as="opt"
+        key={opt.value}
+        class="vmz-ui-autocomplete__option"
+        role="option"
+        data-vmz-option={opt.value}
+        tabindex="-1"
+      >
+        {opt.label}
+      </li>
+    </ul>
+    <p if={showEmpty} class="vmz-ui-autocomplete__empty" data-vmz-autocomplete="empty">{emptyText}</p>
+    <p if={description} id={descriptionId} class="vmz-ui-autocomplete__description">{description}</p>
+    <p if={error} id={errorId} class="vmz-ui-autocomplete__error" role="alert">{error}</p>
+  </div>
+</template>
+
+<style>
+.vmz-ui-autocomplete {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  max-width: 28rem;
+}
+
+.vmz-ui-autocomplete__label {
+  font: inherit;
+  font-weight: 600;
+}
+
+.vmz-ui-autocomplete__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-autocomplete[data-invalid='true'] .vmz-ui-autocomplete__control {
+  border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-autocomplete__control:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-autocomplete__control:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-autocomplete__list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  max-height: 12rem;
+  overflow: auto;
+}
+
+.vmz-ui-autocomplete__option {
+  margin: 0;
+  padding: 0.45rem 0.75rem;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-autocomplete__option:hover,
+.vmz-ui-autocomplete__option:focus {
+  background: var(--vmz-surface-mist);
+  outline: none;
+}
+
+.vmz-ui-autocomplete__empty {
+  margin: 0;
+  color: var(--vmz-text-steel);
+  font-size: 0.9em;
+}
+
+.vmz-ui-autocomplete__description {
+  margin: 0;
+  opacity: 0.75;
+  font-size: 0.9em;
+}
+
+.vmz-ui-autocomplete__error {
+  margin: 0;
+  color: var(--vmz-status-danger-foreground);
+  font-size: 0.9em;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Autocomplete.
+ * Parent owns value, listOpen, and filtered options — no parallel query/store.
+ * Selection notifies via onSelect(value); Escape closes via onClose.
+ */
+export default class Autocomplete {
+  public label: string = '';
+  public description: string = '';
+  public error: string = '';
+  public value: string = '';
+  public options: Array<{ value: string; label: string }> = [];
+  public listOpen: boolean = false;
+  public openAttr: string = 'false';
+  public showEmpty: boolean = false;
+  public emptyText: string = 'No matches';
+  public disabled: boolean = false;
+  public invalidAttr: string = 'false';
+  public controlId: string = 'vmz-autocomplete';
+  public listId: string = 'vmz-autocomplete-list';
+  public descriptionId: string = 'vmz-autocomplete-desc';
+  public errorId: string = 'vmz-autocomplete-err';
+  public describedBy: string = '';
+  public onInput: ((e: Event) => void) | null = null;
+  public onSelect: ((value: string) => void) | null = null;
+  public onClose: (() => void) | null = null;
+
+  onListClick(ev) {
+    if (this.disabled) return;
+    const t = ev && ev.target;
+    if (!t || typeof t.closest !== 'function') return;
+    const opt = t.closest('[data-vmz-option]');
+    if (!opt) return;
+    const next = opt.getAttribute('data-vmz-option') || '';
+    if (!next) return;
+    if (typeof this.onSelect === 'function') this.onSelect(next);
+  }
+
+  onKeyDown(ev) {
+    if (!ev || ev.key !== 'Escape') return;
+    ev.preventDefault();
+    if (typeof this.onClose === 'function') this.onClose();
+  }
+}
+</script>

package/src/components/Badge.vmz

@@ -0,0 +1,63 @@
+<template>
+  <span class="vmz-ui-badge" data-vmz-ui="badge" data-tone={tone}>
+    <slot />
+  </span>
+</template>
+
+<style>
+.vmz-ui-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.45rem;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  background: var(--vmz-surface-mist);
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-badge[data-tone='brand'] {
+  border-color: color-mix(in srgb, var(--vmz-action-primary-background) 35%, var(--vmz-line-default));
+  background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, var(--vmz-surface-paper));
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-badge[data-tone='info'] {
+  border-color: var(--vmz-status-info-accent);
+  background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, var(--vmz-surface-paper));
+  color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-badge[data-tone='success'] {
+  border-color: var(--vmz-status-success-accent);
+  background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
+  color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-badge[data-tone='warning'] {
+  border-color: var(--vmz-status-warning-accent);
+  background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
+  color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-badge[data-tone='danger'] {
+  border-color: var(--vmz-status-danger-accent);
+  background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
+  color: var(--vmz-status-danger-foreground);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Badge (Foundation).
+ * Compact status / label chip; tones share status.* + action tokens.
+ */
+export default class Badge {
+  public tone: string = 'brand';
+}
+</script>

package/src/components/Breadcrumb.vmz

@@ -0,0 +1,66 @@
+<template>
+  <nav class="vmz-ui-breadcrumb" data-vmz-ui="breadcrumb" aria-label={label}>
+    <ol class="vmz-ui-breadcrumb__list">
+      <li each={items} as="item" key={item.id} class="vmz-ui-breadcrumb__item" data-vmz-crumb={item.id}>
+        <a if={item.href} class="vmz-ui-breadcrumb__link" href={item.href}>{item.title}</a>
+        <span if={!item.href} class="vmz-ui-breadcrumb__current" aria-current="page">{item.title}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<style>
+.vmz-ui-breadcrumb {
+  font: inherit;
+}
+
+.vmz-ui-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.55rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  align-items: center;
+}
+
+.vmz-ui-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  font-weight: 600;
+}
+
+.vmz-ui-breadcrumb__item:not(:last-child)::after {
+  content: '/';
+  color: var(--vmz-action-primary-active);
+  opacity: 0.55;
+  font-weight: 400;
+}
+
+.vmz-ui-breadcrumb__link {
+  color: var(--vmz-action-primary-background);
+  text-decoration: none;
+}
+
+.vmz-ui-breadcrumb__link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-breadcrumb__current {
+  color: var(--vmz-action-primary-active);
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Breadcrumb (UI5 Console Surface).
+ * Parent owns items; last crumb typically has no href (current page).
+ */
+export default class Breadcrumb {
+  public label: string = 'Breadcrumb';
+  /** @type {{ id: string, title: string, href?: string }[]} */
+  public items: { id: string; title: string; href?: string }[] = [];
+}
+</script>