@vmz/ui 0.3.7 → 0.3.9

package/src/components/Footer.vmz

@@ -5,9 +5,12 @@
 </template>
 <style>
 .vmz-ui-footer {
-    padding: 1.5rem;
-    color: var(--vmz-text-steel, #646a73);
-    font-size: 0.875rem;
+    padding: var(--vmz-space-6, 2rem) var(--vmz-space-5, 1.5rem);
+    border-top: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.8125rem;
+    line-height: 1.5;
     text-align: center;
 }
 </style>

package/src/components/Form.vmz

@@ -34,6 +34,9 @@
 /**
  * VMZ UI — Form (hand-written commercial form shell).
  * Parent owns field values + validation presentation; no parallel form store.
+ * `rules` + `values` are evaluated at submit only: failures emit `invalid`
+ * (field -> rule key: required | min | max | pattern | custom) and suppress
+ * `submit`. Copy stays author-supplied.
  * Native submit/reset guarded; browser HTML5 validation left off (data-novalidate + preventDefault).
  */
 export default class Form {
@@ -43,14 +46,52 @@ export default class Form {
     public describedBy: string = "";
     public disabled: boolean = false;
     public disabledAttr: string = "false";
+    public rules: Record<string, {
+        required?: boolean;
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+        test?: (value: string, values: Record<string, unknown>) => boolean;
+    }> = {};
+    public values: Record<string, unknown> = {};
     public onSubmit: (() => void) | null = null;
     public onReset: (() => void) | null = null;
+    public onInvalid: ((errors: Record<string, string>) => void) | null = null;
     onSubmitGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
         if (this.disabled) return;
+        const errors = this.collectErrors();
+        if (Object.keys(errors).length > 0) {
+            this.emit("invalid", errors);
+            if (typeof this.onInvalid === "function") this.onInvalid(errors);
+            return;
+        }
         this.emit("submit");
         if (typeof this.onSubmit === "function") this.onSubmit();
     }
+    collectErrors() {
+        const errors: Record<string, string> = {};
+        const rules = this.rules || {};
+        const values = this.values || {};
+        for (const field of Object.keys(rules)) {
+            const rule = rules[field] || {};
+            const raw = values[field];
+            const text = raw == null ? "" : String(raw);
+            const filled = text.trim().length > 0;
+            if (rule.required && !filled) {
+                errors[field] = "required";
+            } else if (rule.minLength && filled && text.length < Number(rule.minLength)) {
+                errors[field] = "min";
+            } else if (rule.maxLength && text.length > Number(rule.maxLength)) {
+                errors[field] = "max";
+            } else if (rule.pattern && filled && !new RegExp(String(rule.pattern)).test(text)) {
+                errors[field] = "pattern";
+            } else if (typeof rule.test === "function" && !rule.test(text, values)) {
+                errors[field] = "custom";
+            }
+        }
+        return errors;
+    }
     onResetGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
         if (this.disabled) return;

package/src/components/FormItem.vmz

@@ -1,5 +1,5 @@
 <template>
-    <div data-vmz-ui="form-item" :data-required="requiredAttr" :data-invalid="invalidAttr" class="vmz-ui-form-item">
+    <div data-vmz-ui="form-item" :data-required="required ? 'true' : 'false'" :data-invalid="error ? 'true' : 'false'" class="vmz-ui-form-item">
         <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
             <span>
                 {{ label }}
@@ -24,6 +24,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.375rem;
+    width: 100%;
     max-width: 28rem;
 }
 
@@ -70,8 +71,6 @@ export default class FormItem {
     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";

package/src/components/Grid.vmz

@@ -1,5 +1,5 @@
 <template>
-    <div data-vmz-ui="grid" class="vmz-ui-grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap">
+    <div data-vmz-ui="grid" :data-columns="columns" class="vmz-ui-grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap">
         <slot />
     </div>
 </template>
@@ -7,13 +7,16 @@
 .vmz-ui-grid {
     display: grid;
     grid-template-columns: repeat(var(--ui-grid-columns, 3), minmax(0, 1fr));
-    gap: var(--ui-grid-gap, 1rem);
+    gap: var(--ui-grid-gap, var(--vmz-space-4));
+    align-items: stretch;
 }
+
 @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;
@@ -23,6 +26,6 @@
 <script client>
 export default class Grid {
     public columns: number = 3;
-    public gap: string = "1rem";
+    public gap: string = "var(--vmz-space-4)";
 }
 </script>

package/src/components/Header.vmz

@@ -1,18 +1,205 @@
 <template>
-    <header data-vmz-ui="header" class="vmz-ui-header">
+    <header data-vmz-ui="header" :data-structured="hasNav() ? 'true' : 'false'" :onKeyDown="onMenuKeyDown" class="vmz-ui-header">
+        <div v-if="hasNav()" class="vmz-ui-header__inner">
+            <a v-if="brand" :href="homeHref" class="vmz-ui-header__brand">
+                {{ brand }}
+            </a>
+            <nav :id="navId" :aria-label="navLabel" :data-open="menuOpen ? 'true' : null" class="vmz-ui-header__nav">
+                <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" @click="closeMenu" class="vmz-ui-header__nav-item">
+                    {{ item.title }}
+                </a>
+            </nav>
+            <div class="vmz-ui-header__actions">
+                <slot name="actions" />
+            </div>
+            <button type="button" :aria-label="menuLabel ? menuLabel : navLabel" :aria-expanded="menuOpen ? 'true' : 'false'" :aria-controls="navId" @click="toggleMenu" class="vmz-ui-header__menu">
+                <Icon :name="menuOpen ? 'action.close' : 'action.menu'" size="md" decorative />
+            </button>
+        </div>
         <slot />
     </header>
 </template>
 <style>
 .vmz-ui-header {
-    min-height: 4rem;
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    background: var(--vmz-surface-paper);
+    border-bottom: 1px solid var(--vmz-line-subtle);
+}
+.vmz-ui-header[data-structured="false"] {
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-6, 2rem);
+    min-height: var(--vmz-layout-header-height, 4rem);
+    padding: 0 var(--vmz-layout-gutter, 1rem);
+}
+.vmz-ui-header__inner {
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - (var(--vmz-layout-gutter, 1rem) * 2)));
+    height: var(--vmz-layout-header-height, 4rem);
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    padding: 0 1.5rem;
-    border-bottom: 1px solid var(--vmz-line-default, #d9d9d9);
-    background: var(--vmz-surface-paper, #fff);
+    gap: var(--vmz-space-6, 2rem);
+}
+.vmz-ui-header__brand {
+    flex: none;
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-sans);
+    font-size: 1.0625rem;
+    font-weight: 600;
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+    text-decoration: none;
+    border-radius: var(--vmz-radius-sm, 4px);
+    outline: none;
+    transition: color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.vmz-ui-header__brand:hover {
+    color: var(--vmz-action-primary-background);
+}
+.vmz-ui-header__brand:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+.vmz-ui-header__nav {
+    flex: 0 1 auto;
+    min-width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-5, 1.5rem);
+}
+.vmz-ui-header__nav-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    border-bottom: 2px solid transparent;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.vmz-ui-header__nav-item:hover {
+    color: var(--vmz-action-primary-background);
+}
+.vmz-ui-header__nav-item[data-active="true"] {
+    color: var(--vmz-action-primary-background);
+    border-bottom-color: var(--vmz-action-primary-background);
+}
+.vmz-ui-header__nav-item:focus-visible {
+    border-radius: var(--vmz-radius-sm, 4px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+.vmz-ui-header__actions {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-2, 0.5rem);
+    margin-left: auto;
+}
+.vmz-ui-header__menu {
+    display: none;
+}
+@media (max-width: 720px) {
+    .vmz-ui-header[data-structured="false"] {
+        min-height: var(--vmz-layout-header-height-compact, 3.5rem);
+        gap: var(--vmz-space-3, 0.75rem);
+    }
+    .vmz-ui-header__inner {
+        height: var(--vmz-layout-header-height-compact, 3.5rem);
+        gap: var(--vmz-space-3, 0.75rem);
+    }
+    .vmz-ui-header__nav {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+        padding: var(--vmz-space-2, 0.5rem) var(--vmz-layout-gutter, 1rem) var(--vmz-space-4, 1rem);
+        border-bottom: 1px solid var(--vmz-line-subtle);
+        background: var(--vmz-surface-paper);
+        box-shadow: var(--vmz-shadow-popup);
+    }
+    .vmz-ui-header__nav[data-open="true"] {
+        display: flex;
+    }
+    .vmz-ui-header__nav-item {
+        height: 2.5rem;
+        padding: 0 var(--vmz-space-1, 0.25rem);
+        border-bottom: 0;
+    }
+    .vmz-ui-header__menu {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--vmz-radius-md, 6px);
+        background: transparent;
+        color: var(--vmz-text-ink);
+        cursor: pointer;
+        outline: none;
+        transition: background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    }
+    .vmz-ui-header__menu:hover {
+        background: var(--vmz-surface-mist);
+    }
+    .vmz-ui-header__menu:focus-visible {
+        box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    }
 }
 </style>
 <script client>
-export default class Header {}
+/**
+ * VMZ UI — Header (Commercial chrome).
+ * Flat nav links plus a named `actions` slot. With no `nav` items the default
+ * slot renders as a plain padded bar. Copy stays with the parent.
+ */
+export default class Header {
+    public brand: string = "";
+    public homeHref: string = "/";
+    public navLabel: string = "";
+    public menuLabel: string = "";
+    /** Id of the nav item representing the current page. */
+    public activeId: string = "";
+    public navId: string = "vmz-ui-header-nav";
+    /** Parent-supplied labels; the component never hardcodes copy. */
+    public nav: {
+        id: string;
+        title: string;
+        href: string;
+    }[] = [];
+    menuOpen = false;
+
+    hasNav() {
+        return Array.isArray(this.nav) && this.nav.length > 0;
+    }
+
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+
+    closeMenu() {
+        if (this.menuOpen) this.menuOpen = false;
+    }
+
+    onMenuKeyDown(e) {
+        if (e && e.key === "Escape") this.closeMenu();
+    }
+}
 </script>

package/src/components/Layout.vmz

@@ -8,7 +8,9 @@
     display: flex;
     flex-direction: column;
     min-height: 100%;
-    background: var(--vmz-surface-page, var(--vmz-surface-mist, #f5f5f5));
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-page);
+    font-family: var(--vmz-font-sans);
 }
 </style>
 <script client>

package/src/components/Link.vmz

@@ -6,22 +6,21 @@
 <style>
 .vmz-ui-link {
     font: inherit;
-    font-weight: 600;
-    color: var(--vmz-action-primary-background);
+    font-weight: 500;
+    color: var(--vmz-action-link-foreground);
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-thickness: 1px;
-    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
+    text-decoration-color: currentColor;
     outline: none;
-    border-radius: var(--vmz-radius-sm, 4px);
+    border-radius: var(--vmz-radius-sm);
     transition:
-        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        text-decoration-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        text-decoration-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-link:hover {
-    color: var(--vmz-action-primary-hover);
-    text-decoration-color: currentColor;
+    color: var(--vmz-action-link-hover);
 }
 
 .vmz-ui-link:active {
@@ -39,21 +38,33 @@
 }
 
 .vmz-ui-link[data-variant="muted"]:hover {
-    color: var(--vmz-action-primary-background);
+    color: var(--vmz-action-link-hover);
     text-decoration-color: currentColor;
 }
 
 /* Navigation link: chrome, not prose — underline is the hover affordance. */
 .vmz-ui-link[data-variant="nav"] {
     font-weight: 500;
+    color: var(--vmz-text-ink);
     text-decoration: none;
     text-decoration-color: transparent;
 }
 
 .vmz-ui-link[data-variant="nav"]:hover {
+    color: var(--vmz-action-link-hover);
     text-decoration: underline;
     text-decoration-color: currentColor;
 }
+
+.vmz-ui-link[data-variant="nav"]:active {
+    color: var(--vmz-action-primary-active);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-link {
+        transition: none;
+    }
+}
 </style>
 <script client>
 /**

package/src/components/List.vmz

@@ -14,48 +14,70 @@
 .vmz-ui-list {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
+    gap: var(--vmz-space-2, 0.5rem);
     max-width: 28rem;
 }
 
 .vmz-ui-list__label {
     margin: 0;
+    font-size: 0.875rem;
     font-weight: 600;
     color: var(--vmz-text-ink);
 }
 
 .vmz-ui-list__items {
     margin: 0;
-    padding: 0.25rem;
+    padding: 0;
     list-style: none;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    overflow: hidden;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-lg, 8px);
     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: var(--vmz-radius-md, 6px);
+    display: flex;
+    align-items: center;
+    min-height: var(--vmz-control-height, 2rem);
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
+    font-size: 0.875rem;
+    line-height: 1.5;
     cursor: pointer;
     outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
 }
 
-.vmz-ui-list__item[aria-selected="true"] {
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
+.vmz-ui-list__item + .vmz-ui-list__item {
+    border-top: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
 }
 
 .vmz-ui-list__item:hover {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-list__item[aria-selected="true"] {
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
+    color: var(--vmz-action-primary-active);
+    font-weight: 500;
 }
 
 .vmz-ui-list__item[aria-selected="true"]:hover {
-    background: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
 }
 
 .vmz-ui-list__item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+}
+
+:where([data-density="compact"]) .vmz-ui-list__item {
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+}
+
+:where([data-density="dense"]) .vmz-ui-list__item {
+    padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
 }
 </style>
 <script client>
@@ -64,7 +86,7 @@
  * Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
  */
 export default class List {
-    public label: string = "List";
+    public label: string = "";
     public labelId: string = "vmz-list-label";
     public selected: string = "";
     /** @type {{ id: string, title: string }[]} */