@vmz/ui 0.3.6 → 0.3.8

package/src/components/Alert.vmz

@@ -1,82 +1,179 @@
 <template>
     <div data-vmz-ui="alert" :data-tone="tone" :role="roleName" class="vmz-ui-alert">
-        <p v-if="title" class="vmz-ui-alert__title">
-            {{ title }}
-        </p>
-        <p v-if="description" class="vmz-ui-alert__description">
-            {{ description }}
-        </p>
-        <div class="vmz-ui-alert__actions">
-            <slot />
+        <span aria-hidden="true" class="vmz-ui-alert__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-alert__content">
+            <p v-if="title" class="vmz-ui-alert__title">
+                {{ title }}
+            </p>
+            <p v-if="description" class="vmz-ui-alert__description">
+                {{ description }}
+            </p>
+            <div class="vmz-ui-alert__actions">
+                <slot />
+            </div>
         </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-alert__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
     </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: 1px;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+    border: 1px solid var(--vmz-status-info-border, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-status-info-background, var(--vmz-surface-mist));
     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);
+    border-color: var(--vmz-status-info-border, var(--vmz-line-default));
+    background: var(--vmz-status-info-background, var(--vmz-surface-mist));
     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);
+    border-color: var(--vmz-status-success-border, var(--vmz-line-default));
+    background: var(--vmz-status-success-background, var(--vmz-surface-mist));
     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);
+    border-color: var(--vmz-status-warning-border, var(--vmz-line-default));
+    background: var(--vmz-status-warning-background, var(--vmz-surface-mist));
     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);
+    border-color: var(--vmz-status-danger-border, var(--vmz-line-default));
+    background: var(--vmz-status-danger-background, var(--vmz-surface-mist));
     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[data-tone="info"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-alert[data-tone="success"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-alert[data-tone="warning"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-alert[data-tone="danger"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-alert__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-alert__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
 }
 
 .vmz-ui-alert__title {
     margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
+    line-height: 1.5;
+    color: inherit;
 }
 
 .vmz-ui-alert__description {
     margin: 0;
-    opacity: 0.9;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-alert__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vmz-space-2, 0.5rem);
+    margin-top: var(--vmz-space-1, 0.25rem);
 }
 
 .vmz-ui-alert__actions:empty {
     display: none;
 }
+
+.vmz-ui-alert__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-alert__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-alert__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+:where([data-density="compact"]) .vmz-ui-alert {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-alert {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-2, 0.5rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Alert (UI4 status tone matrix).
- * tone → status.{info|success|warning|danger}.* tokens from Style Theme.
+ * tone → status.{info|success|warning|danger}.{accent|foreground|background|border}.
  */
 export default class Alert {
     public title: string = "";
     public description: string = "";
     public tone: string = "info";
     public roleName: string = "status";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public onClose: (() => void) | null = null;
+
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
 }
 </script>

package/src/components/AppShell.vmz

@@ -1,21 +1,29 @@
 <template>
     <div data-vmz-ui="app-shell" class="vmz-ui-app-shell">
-        <header data-vmz-shell="header" class="vmz-ui-app-shell__header">
+        <header data-vmz-shell="header" :onKeyDown="onHeaderKeyDown" class="vmz-ui-app-shell__header">
             <div class="vmz-ui-app-shell__header-inner">
-                <a :href="homeHref" class="vmz-ui-app-shell__brand">
+                <a v-if="brand" :href="homeHref" class="vmz-ui-app-shell__brand">
                     {{ brand }}
                 </a>
-                <nav :aria-label="navLabel" class="vmz-ui-app-shell__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" class="vmz-ui-app-shell__nav-item">{{ item.title }}</a>
+                <nav :id="navId" :aria-label="navLabel" :data-open="menuOpen ? 'true' : null" class="vmz-ui-app-shell__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-app-shell__nav-item">
+                        {{ item.title }}
+                    </a>
                 </nav>
                 <div class="vmz-ui-app-shell__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-app-shell__menu">
+                    <Icon :name="menuOpen ? 'action.close' : 'action.menu'" size="md" decorative />
+                </button>
             </div>
         </header>
         <main data-vmz-shell="main" class="vmz-ui-app-shell__main">
             <slot />
         </main>
+        <footer v-if="footer" data-vmz-shell="footer" class="vmz-ui-app-shell__footer">
+            {{ footer }}
+        </footer>
     </div>
 </template>
 <style>
@@ -24,26 +32,25 @@
     flex-direction: column;
     min-height: 100%;
     color: var(--vmz-text-ink);
-    background: transparent;
+    background: var(--vmz-surface-page);
+    font-family: var(--vmz-font-sans);
 }
 
 .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: color-mix(in srgb, var(--vmz-surface-paper) 88%, transparent);
-    backdrop-filter: saturate(180%) blur(0.5rem);
-    -webkit-backdrop-filter: saturate(180%) blur(0.5rem);
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
 }
 
 .vmz-ui-app-shell__header-inner {
-    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
-    min-height: 3.5rem;
+    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;
-    gap: 1.5rem;
+    gap: var(--vmz-space-6, 2rem);
 }
 
 .vmz-ui-app-shell__brand {
@@ -51,7 +58,8 @@
     color: var(--vmz-text-ink);
     font-family: var(--vmz-font-sans);
     font-size: 1.0625rem;
-    font-weight: 650;
+    font-weight: 600;
+    line-height: 1.25;
     letter-spacing: -0.01em;
     text-decoration: none;
     border-radius: var(--vmz-radius-sm, 4px);
@@ -68,110 +76,170 @@
 }
 
 .vmz-ui-app-shell__nav {
-    display: flex;
-    flex: 1 1 auto;
-    flex-wrap: wrap;
-    gap: 0.125rem;
+    flex: 0 1 auto;
     min-width: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-5, 1.5rem);
 }
 
 .vmz-ui-app-shell__nav-item {
     position: relative;
-    padding: 0.375rem 0.75rem;
-    border-radius: var(--vmz-radius-sm, 4px);
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+    border-bottom: 2px solid transparent;
     color: var(--vmz-text-steel);
-    font: inherit;
     font-size: 0.875rem;
     font-weight: 500;
-    line-height: 1.4286;
+    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)),
-        background-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-app-shell__nav-item:hover {
-    color: var(--vmz-text-ink);
-    background: var(--vmz-surface-mist, #fafafa);
-}
-
-.vmz-ui-app-shell__nav-item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    color: var(--vmz-action-primary-background);
 }
 
-/* Current section: ink emphasis plus a hairline marker, no brand fill. */
 .vmz-ui-app-shell__nav-item[data-active="true"] {
-    color: var(--vmz-text-ink);
-    font-weight: 600;
+    color: var(--vmz-action-primary-background);
+    border-bottom-color: var(--vmz-action-primary-background);
 }
 
-.vmz-ui-app-shell__nav-item[data-active="true"]::after {
-    content: "";
-    position: absolute;
-    inset: auto 0.75rem 0;
-    height: 2px;
-    border-radius: var(--vmz-radius-pill, 999px);
-    background: var(--vmz-action-primary-background);
+.vmz-ui-app-shell__nav-item:focus-visible {
+    border-radius: var(--vmz-radius-sm, 4px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-app-shell__actions {
     flex: none;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2, 0.5rem);
     margin-left: auto;
 }
 
+.vmz-ui-app-shell__menu {
+    display: none;
+}
+
 .vmz-ui-app-shell__main {
     flex: 1;
-    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+    box-sizing: border-box;
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - (var(--vmz-layout-gutter, 1rem) * 2)));
     margin: 0 auto;
-    padding: 1.75rem 0 3rem;
+    padding: var(--vmz-space-6, 2rem) 0 var(--vmz-space-8, 4rem);
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--vmz-space-6, 2rem);
+}
+
+.vmz-ui-app-shell__footer {
+    border-top: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+    padding: var(--vmz-space-6, 2rem) var(--vmz-space-5, 1.5rem);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-align: center;
 }
 
 @media (max-width: 720px) {
     .vmz-ui-app-shell__header-inner {
-        flex-wrap: wrap;
-        gap: 0.5rem 0.75rem;
-        padding: 0.625rem 0;
+        height: var(--vmz-layout-header-height-compact, 3.5rem);
+        gap: var(--vmz-space-3, 0.75rem);
     }
     .vmz-ui-app-shell__nav {
-        order: 3;
-        flex-basis: 100%;
-        overflow-x: auto;
-        flex-wrap: nowrap;
-        padding-bottom: 0.125rem;
-        scrollbar-width: none;
-    }
-    .vmz-ui-app-shell__nav::-webkit-scrollbar {
         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-app-shell__nav[data-open="true"] {
+        display: flex;
+    }
+    .vmz-ui-app-shell__nav-item {
+        height: 2.5rem;
+        padding: 0 var(--vmz-space-1, 0.25rem);
+        border-bottom: 0;
+    }
+    .vmz-ui-app-shell__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-app-shell__menu:hover {
+        background: var(--vmz-surface-mist);
+    }
+    .vmz-ui-app-shell__menu:focus-visible {
+        box-shadow: 0 0 0 3px var(--vmz-focus-ring);
     }
     .vmz-ui-app-shell__main {
-        padding-top: 1.25rem;
+        padding: var(--vmz-space-5, 1.5rem) 0 var(--vmz-space-7, 3rem);
+        gap: var(--vmz-space-5, 1.5rem);
     }
 }
 </style>
 <script client>
 /**
  * VMZ UI — AppShell (Commercial composition).
- * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
+ * Landmark header/nav + main slot. `nav` stays flat link-only; non-nav controls
+ * go into the named `actions` slot. Parent supplies copy; no private theme.
  */
 export default class AppShell {
-    public brand: string = "VMZ";
+    public brand: string = "";
     public homeHref: string = "/";
-    public navLabel: string = "Primary";
+    public navLabel: string = "";
+    public menuLabel: string = "";
     /** Id of the nav item representing the current page, for `aria-current` + marker. */
     public activeId: string = "";
+    public navId: string = "vmz-ui-app-shell-nav";
+    /** Optional footer copy; the footer band only renders when supplied. */
+    public footer: string = "";
     /** @type {{ id: string, title: string, href: string }[]} */
     public nav: {
         id: string;
         title: string;
         href: string;
     }[] = [];
+    menuOpen = false;
+
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+
+    closeMenu() {
+        if (this.menuOpen) this.menuOpen = false;
+    }
+
+    onHeaderKeyDown(e) {
+        if (e && e.key === "Escape") this.closeMenu();
+    }
 }
 </script>