@vmz/ui 0.0.4 → 0.1.1

package/src/components/AppShell.vmz

@@ -1,47 +1,52 @@
 <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>
+      <header class="vmz-ui-app-shell__header" data-vmz-shell="header"><div class="vmz-ui-app-shell__header-inner">
+        <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>
+      </div></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 {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    color: var(--vmz-text-ink);
+    background: transparent;
+  }
 
 .vmz-ui-app-shell__header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+  background: var(--vmz-surface-paper);
+}
+.vmz-ui-app-shell__header-inner {
+  width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+  min-height: 3rem;
+  margin: 0 auto;
   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);
+  gap: 1.5rem;
 }
 
 .vmz-ui-app-shell__brand {
-  font-family: var(--vmz-font-display);
-  font-weight: 700;
-  font-size: 1.2rem;
-  letter-spacing: 0.03em;
+  font-family: var(--vmz-font-sans);
+  font-weight: 600;
+  font-size: 1.125rem;
+  letter-spacing: 0;
   text-decoration: none;
-  color: var(--vmz-action-primary-background);
+  color: var(--vmz-text-ink);
 }
 
 .vmz-ui-app-shell__brand:focus-visible {
@@ -52,18 +57,22 @@
 .vmz-ui-app-shell__nav {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.55rem 1rem;
+  gap: 0.25rem 0.15rem;
 }
 
 .vmz-ui-app-shell__nav a {
   font: inherit;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 400;
   text-decoration: none;
-  color: var(--vmz-text-steel);
+  color: var(--vmz-text-ink);
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--vmz-radius-md, 6px);
 }
 
 .vmz-ui-app-shell__nav a:hover {
-  color: var(--vmz-action-primary-active);
+  color: var(--vmz-action-primary-background);
+  background: var(--vmz-surface-mist, #fafafa);
 }
 
 .vmz-ui-app-shell__nav a:focus-visible {
@@ -73,25 +82,35 @@
 
 .vmz-ui-app-shell__main {
   flex: 1;
-  width: min(68rem, calc(100% - 2rem));
+  width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
   margin: 0 auto;
-  padding: 1.5rem 1rem 2.5rem;
+  padding: 1.5rem 0 2.5rem;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
+  @media (max-width: 720px) {
+    .vmz-ui-app-shell__header-inner { min-height: 3.5rem; align-items: flex-start; flex-direction: column; gap: .35rem; padding: .7rem 0; }
+    .vmz-ui-app-shell__nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
+    .vmz-ui-app-shell__nav a { white-space: nowrap; }
+    .vmz-ui-app-shell__main { padding-top: 1.25rem; }
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — AppShell (Commercial composition).
- * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
- */
+* 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 }[] = [];
+	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

@@ -1,176 +1,177 @@
 <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}
+      class="vmz-ui-autocomplete"
+      data-vmz-ui="autocomplete"
+      data-invalid={invalidAttr}
+      data-open={openAttr}
     >
-      <li
-        each={options}
-        as="opt"
-        key={opt.value}
-        class="vmz-ui-autocomplete__option"
-        role="option"
-        data-vmz-option={opt.value}
-        tabindex="-1"
+      <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}
       >
-        {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>
+        <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 {
+    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__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__control {
+    font: inherit;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    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[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: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__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__list {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    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 {
+    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__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__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__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;
-}
+  .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.
- */
+* 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();
-  }
+	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/Avatar.vmz

@@ -0,0 +1,16 @@
+<template>
+  <span class="vmz-ui-avatar" data-vmz-ui="avatar" data-size={size} aria-label={label}><img if={src} src={src} alt="" /><span if={!src}>{text}</span></span>
+</template>
+
+<style>
+  .vmz-ui-avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--vmz-action-primary-background,#1677ff) 14%,white);color:var(--vmz-action-primary-active,#0958d9);font-weight:650}.vmz-ui-avatar[data-size='small']{width:1.5rem;height:1.5rem;font-size:.75rem}.vmz-ui-avatar[data-size='large']{width:2.75rem;height:2.75rem;font-size:1.1rem}.vmz-ui-avatar img{width:100%;height:100%;object-fit:cover}
+</style>
+
+<script client>
+export default class Avatar {
+	public src: string = "";
+	public text: string = "";
+	public label: string = "";
+	public size: string = "middle";
+}
+</script>

package/src/components/Badge.vmz

@@ -1,63 +1,63 @@
 <template>
   <span class="vmz-ui-badge" data-vmz-ui="badge" data-tone={tone}>
-    <slot />
-  </span>
+      <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 {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.15rem 0.45rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    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='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='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='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='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);
-}
+  .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.
- */
+* VMZ UI — Badge (Foundation).
+* Compact status / label chip; tones share status.* + action tokens.
+*/
 export default class Badge {
-  public tone: string = 'brand';
+	public tone: string = "brand";
 }
 </script>