@vmz/ui 0.2.3 → 0.2.4

package/src/components/FormItem.vmz

@@ -1,78 +1,79 @@
 <template>
-  <div
-      class="vmz-ui-form-item"
-      data-vmz-ui="form-item"
-      :data-required="requiredAttr"
-      :data-invalid="invalidAttr"
-    >
-      <label v-if="label" class="vmz-ui-form-item__label" :for="controlId">
-        <span>{{ label }}</span>
-        <span v-if="required" class="vmz-ui-form-item__required" aria-hidden="true">*</span>
-      </label>
-      <div class="vmz-ui-form-item__control">
-        <slot />
-      </div>
-      <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-form-item__error" role="alert">{{ error }}</p>
+    <div data-vmz-ui="form-item" :data-required="requiredAttr" :data-invalid="invalidAttr" class="vmz-ui-form-item">
+        <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
+            <span>
+                {{ label }}
+            </span>
+            <span v-if="required" aria-hidden="true" class="vmz-ui-form-item__required">
+                *
+            </span>
+        </label>
+        <div class="vmz-ui-form-item__control">
+            <slot />
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-form-item__error">
+            {{ error }}
+        </p>
     </div>
 </template>
-
 <style>
-  .vmz-ui-form-item {
+.vmz-ui-form-item {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-form-item__label {
+.vmz-ui-form-item__label {
     display: inline-flex;
     align-items: baseline;
     gap: 0.25rem;
     font: inherit;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-form-item__required {
+.vmz-ui-form-item__required {
     color: var(--vmz-status-danger-accent);
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-form-item__control {
+.vmz-ui-form-item__control {
     min-width: 0;
-  }
+}
 
-  .vmz-ui-form-item__description {
+.vmz-ui-form-item__description {
     margin: 0;
     opacity: 0.75;
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-form-item__error {
+.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) {
+.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.
-*/
+ * 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";
+    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/Grid.vmz

@@ -1,12 +1,28 @@
-<template><div class="vmz-ui-grid" data-vmz-ui="grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap"><slot /></div></template>
+<template>
+    <div data-vmz-ui="grid" class="vmz-ui-grid" :style='"--ui-grid-columns:" + columns + ";--ui-grid-gap:" + gap'>
+        <slot />
+    </div>
+</template>
 <style>
-.vmz-ui-grid{display:grid;grid-template-columns:repeat(var(--ui-grid-columns,3),minmax(0,1fr));gap:var(--ui-grid-gap,1rem)}
-@media(max-width:900px){.vmz-ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
-@media(max-width:600px){.vmz-ui-grid{grid-template-columns:1fr}}
+.vmz-ui-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--ui-grid-columns, 3), minmax(0, 1fr));
+    gap: var(--ui-grid-gap, 1rem);
+}
+@media (max-width: 900px) {
+    .vmz-ui-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+@media (max-width: 600px) {
+    .vmz-ui-grid {
+        grid-template-columns: 1fr;
+    }
+}
 </style>
 <script client>
 export default class Grid {
-  public columns: number = 3;
-  public gap: string = '1rem';
+    public columns: number = 3;
+    public gap: string = "1rem";
 }
 </script>

package/src/components/Header.vmz

@@ -1,11 +1,18 @@
 <template>
-  <header class="vmz-ui-header" data-vmz-ui="header"><slot /></header>
+    <header data-vmz-ui="header" class="vmz-ui-header">
+        <slot />
+    </header>
 </template>
-
 <style>
-  .vmz-ui-header{min-height:4rem;display:flex;align-items:center;padding:0 1.5rem;border-bottom:1px solid var(--vmz-line-default,#d9d9d9);background:var(--vmz-surface-paper,#fff)}
+.vmz-ui-header {
+    min-height: 4rem;
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    border-bottom: 1px solid var(--vmz-line-default, #d9d9d9);
+    background: var(--vmz-surface-paper, #fff);
+}
 </style>
-
 <script client>
 export default class Header {}
 </script>

package/src/components/Icon.vmz

@@ -6,30 +6,30 @@
     </span>
 </template>
 <style>
-    .vmz-ui-icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 1em;
-        height: 1em;
-        vertical-align: -0.125em;
-        color: inherit;
-        line-height: 1;
-    }
-    .vmz-ui-icon[data-size="sm"] {
-        font-size: 0.875rem;
-    }
-    .vmz-ui-icon[data-size="md"] {
-        font-size: 1rem;
-    }
-    .vmz-ui-icon[data-size="lg"] {
-        font-size: 1.25rem;
-    }
-    .vmz-ui-icon__svg {
-        width: 1em;
-        height: 1em;
-        display: block;
-    }
+.vmz-ui-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+    color: inherit;
+    line-height: 1;
+}
+.vmz-ui-icon[data-size="sm"] {
+    font-size: 0.875rem;
+}
+.vmz-ui-icon[data-size="md"] {
+    font-size: 1rem;
+}
+.vmz-ui-icon[data-size="lg"] {
+    font-size: 1.25rem;
+}
+.vmz-ui-icon__svg {
+    width: 1em;
+    height: 1em;
+    display: block;
+}
 </style>
 <script client>
 /**
@@ -37,41 +37,40 @@
  * Pass `pathD` for custom SVG paths, or `name` for the built-in chrome set.
  * Full semantic registries live in optional `@vmz/ui-icons`.
  */
-const FALLBACK_PATH =
-    'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z';
+const FALLBACK_PATH = "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z";
 
 const CHROME_PATHS = {
-    check: 'M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z',
-    close: 'M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z',
-    search: 'M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z',
-    'chevron-down': 'M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z',
-    'chevron-right': 'M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z',
-    info: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
+    check: "M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z",
+    close: "M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z",
+    search: "M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z",
+    "chevron-down": "M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z",
+    "chevron-right": "M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z",
+    info: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z",
     warning:
-        'M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z',
-    success: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z',
-    danger: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z',
-    menu: 'M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z',
-    plus: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z',
+        "M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z",
+    success: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z",
+    danger: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z",
+    menu: "M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z",
+    plus: "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z",
 };
 
 function resolveChromePath(name) {
-    const key = String(name || '').trim();
+    const key = String(name || "").trim();
     if (!key) return FALLBACK_PATH;
     return CHROME_PATHS[key] || FALLBACK_PATH;
 }
 
 export default class Icon {
-    static __vmzHostBox = 'contents';
-    public name: string = 'info';
-    public size: string = 'md';
-    public label: string = '';
+    static __vmzHostBox = "contents";
+    public name: string = "info";
+    public size: string = "md";
+    public label: string = "";
     public decorative: boolean = true;
     /** Optional author SVG path override. When set, `name` is ignored for rendering. */
-    public pathD: string = '';
+    public pathD: string = "";
 
     iconPath() {
-        const explicit = String(this.pathD || '').trim();
+        const explicit = String(this.pathD || "").trim();
         return explicit || resolveChromePath(this.name);
     }
 }

package/src/components/Layout.vmz

@@ -1,11 +1,16 @@
 <template>
-  <div class="vmz-ui-layout" data-vmz-ui="layout"><slot /></div>
+    <div data-vmz-ui="layout" class="vmz-ui-layout">
+        <slot />
+    </div>
 </template>
-
 <style>
-  .vmz-ui-layout{display:flex;flex-direction:column;min-height:100%;background:var(--vmz-surface-page,var(--vmz-surface-mist,#f5f5f5))}
+.vmz-ui-layout {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    background: var(--vmz-surface-page, var(--vmz-surface-mist, #f5f5f5));
+}
 </style>
-
 <script client>
 export default class Layout {}
 </script>

package/src/components/Link.vmz

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

package/src/components/List.vmz

@@ -1,45 +1,30 @@
 <template>
-  <div class="vmz-ui-list" data-vmz-ui="list">
-      <p v-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"
-        @click="onListClick"
-        :onKeyDown="onListKeyDown"
-      >
-        <li
-          v-for="item in items"
-          :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 data-vmz-ui="list" class="vmz-ui-list">
+        <p v-if="label" :id="labelId" class="vmz-ui-list__label">
+            {{ label }}
+        </p>
+        <ul role="listbox" :aria-labelledby="labelId" :aria-label="label" @click="onListClick" :onKeyDown="onListKeyDown" class="vmz-ui-list__items">
+            <li v-for="item in items" :key="item.id" role="option" :id="item.id" :data-vmz-list-item="item.id" :aria-selected='selected === item.id ? "true" : "false"' :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-list__item">
+                {{ item.title }}
+            </li>
+        </ul>
     </div>
 </template>
-
 <style>
-  .vmz-ui-list {
+.vmz-ui-list {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-list__label {
+.vmz-ui-list__label {
     margin: 0;
     font-weight: 600;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-list__items {
+.vmz-ui-list__items {
     margin: 0;
     padding: 0.25rem;
     list-style: none;
@@ -47,69 +32,71 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-list__item {
+.vmz-ui-list__item {
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border-radius: var(--vmz-radius-md, 6px);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-list__item[aria-selected='true'] {
+.vmz-ui-list__item[aria-selected="true"] {
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
-  }
+}
 
-  .vmz-ui-list__item:hover {
+.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 {
+.vmz-ui-list__item[aria-selected="true"]:hover {
     background: var(--vmz-action-primary-hover);
-  }
+}
 
-  .vmz-ui-list__item:focus-visible {
+.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.
-*/
+ * 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]);
-	}
+    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>