@vmz/ui 0.1.0 → 0.1.2

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>

package/src/components/Breadcrumb.vmz

@@ -1,66 +1,70 @@
 <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>
+      <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 {
+    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__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 {
+    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__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 {
+    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__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);
-}
+  .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).
- */
+* 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 }[] = [];
+	public label: string = "Breadcrumb";
+	/** @type {{ id: string, title: string, href?: string }[]} */
+	public items: {
+		id: string;
+		title: string;
+		href?: string;
+	}[] = [];
 }
 </script>

package/src/components/BulkActions.vmz

@@ -1,52 +1,52 @@
 <template>
   <div
-    if={selectedCount}
-    class="vmz-ui-bulk-actions"
-    data-vmz-ui="bulk-actions"
-    role="region"
-    aria-label={label}
-  >
-    <p class="vmz-ui-bulk-actions__count" data-dogfood="bulk-count">{countLabel}</p>
-    <div class="vmz-ui-bulk-actions__actions">
-      <slot />
+      if={selectedCount}
+      class="vmz-ui-bulk-actions"
+      data-vmz-ui="bulk-actions"
+      role="region"
+      aria-label={label}
+    >
+      <p class="vmz-ui-bulk-actions__count" data-dogfood="bulk-count">{countLabel}</p>
+      <div class="vmz-ui-bulk-actions__actions">
+        <slot />
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-bulk-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.65rem 1rem;
-  padding: 0.65rem 0.85rem;
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-  background: transparent;
-}
+  .vmz-ui-bulk-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.65rem 1rem;
+    padding: 0.65rem 0.85rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+  }
 
-.vmz-ui-bulk-actions__count {
-  margin: 0;
-  font-weight: 700;
-  color: var(--vmz-action-primary-active);
-}
+  .vmz-ui-bulk-actions__count {
+    margin: 0;
+    font-weight: 700;
+    color: var(--vmz-action-primary-active);
+  }
 
-.vmz-ui-bulk-actions__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
+  .vmz-ui-bulk-actions__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — BulkActions (Console composition).
- * Renders when selectedCount is truthy; parent owns selection count + label.
- */
+* VMZ UI — BulkActions (Console composition).
+* Renders when selectedCount is truthy; parent owns selection count + label.
+*/
 export default class BulkActions {
-  public label: string = 'Bulk actions';
-  public selectedCount: number = 0;
-  public countLabel: string = '';
+	public label: string = "Bulk actions";
+	public selectedCount: number = 0;
+	public countLabel: string = "";
 }
 </script>