@vmz/ui 0.3.7 → 0.3.8

package/src/components/ConsoleShell.vmz

@@ -1,10 +1,15 @@
 <template>
-    <div data-vmz-ui="console-shell" class="vmz-ui-console-shell">
+    <div data-vmz-ui="console-shell" :onKeyDown="onShellKeyDown" class="vmz-ui-console-shell">
         <aside data-vmz-shell="sidebar" :aria-label="navLabel" class="vmz-ui-console-shell__sidebar">
-            <a :href="homeHref" class="vmz-ui-console-shell__brand">
-                {{ brand }}
-            </a>
-            <nav class="vmz-ui-console-shell__nav">
+            <div class="vmz-ui-console-shell__sidebar-top">
+                <a v-if="brand" :href="homeHref" class="vmz-ui-console-shell__brand">
+                    {{ brand }}
+                </a>
+                <button v-if="nav.length" type="button" :aria-label="menuLabel || navLabel" :aria-expanded="menuOpen ? 'true' : 'false'" aria-controls="vmz-console-shell-nav" @click="toggleMenu" class="vmz-ui-console-shell__menu">
+                    <Icon :name="menuOpen ? 'action.close' : 'action.menu'" size="md" decorative />
+                </button>
+            </div>
+            <nav id="vmz-console-shell-nav" :data-open="menuOpen ? 'true' : null" class="vmz-ui-console-shell__nav">
                 <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeNavId ? 'true' : null" :aria-current="item.id === activeNavId ? 'page' : null">
                     {{ item.title }}
                 </a>
@@ -12,11 +17,14 @@
         </aside>
         <div class="vmz-ui-console-shell__body">
             <header data-vmz-shell="header" class="vmz-ui-console-shell__header">
+                <a v-if="backLabel && backHref" :href="backHref" class="vmz-ui-console-shell__back">
+                    {{ backLabel }}
+                </a>
                 <div class="vmz-ui-console-shell__header-copy">
                     <p v-if="breadcrumbLabel" data-vmz-shell="breadcrumb" class="vmz-ui-console-shell__breadcrumb">
                         {{ breadcrumbLabel }}
                     </p>
-                    <h1 class="vmz-ui-console-shell__title">
+                    <h1 v-if="title" class="vmz-ui-console-shell__title">
                         {{ title }}
                     </h1>
                     <p v-if="subtitle" class="vmz-ui-console-shell__subtitle">
@@ -28,7 +36,9 @@
                 </a>
             </header>
             <main data-vmz-shell="main" class="vmz-ui-console-shell__main">
-                <slot />
+                <div class="vmz-ui-console-shell__panel">
+                    <slot />
+                </div>
             </main>
             <footer v-if="footer" data-vmz-shell="footer" class="vmz-ui-console-shell__footer">
                 {{ footer }}
@@ -44,61 +54,106 @@
     min-height: 100vh;
     min-height: 100dvh;
     height: 100dvh;
-    color: inherit;
-    background: var(--vmz-surface-page, #f5f6f8);
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-page);
+    font-family: var(--vmz-font-sans);
 }
 
 .vmz-ui-console-shell__sidebar {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    padding: 1rem 0.75rem 1.5rem;
-    border-right: 1px solid var(--vmz-line-subtle, #e5e6eb);
+    gap: var(--vmz-space-4, 1rem);
+    padding: var(--vmz-space-3, 0.75rem);
+    border-right: 1px solid var(--vmz-line-subtle);
     min-height: 100%;
     align-self: stretch;
     background: var(--vmz-surface-paper);
 }
 
+.vmz-ui-console-shell__sidebar-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vmz-space-2, 0.5rem);
+}
+
+.vmz-ui-console-shell__menu {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--vmz-control-height, 2rem);
+    min-height: var(--vmz-control-height, 2rem);
+    padding: 0;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-steel);
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-console-shell__menu:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
 .vmz-ui-console-shell__brand {
-    font: inherit;
-    font-weight: 600;
+    padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-3, 0.75rem);
+    color: var(--vmz-text-ink);
     font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5rem;
     letter-spacing: 0;
     text-decoration: none;
-    color: var(--vmz-text-ink);
+    outline: none;
+    border-radius: var(--vmz-radius-md, 6px);
+}
+
+.vmz-ui-console-shell__brand:hover {
+    color: var(--vmz-action-primary-background);
 }
 
 .vmz-ui-console-shell__brand:focus-visible {
-    outline: none;
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-console-shell__nav {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--vmz-space-1, 0.25rem);
     flex: 1;
 }
 
 .vmz-ui-console-shell__nav a {
-    font: inherit;
-    font-weight: 400;
+    display: flex;
+    align-items: center;
+    min-height: 2.25rem;
+    padding: 0 var(--vmz-space-3, 0.75rem);
+    border-radius: var(--vmz-radius-md, 6px);
+    color: var(--vmz-text-steel);
     font-size: 0.875rem;
-    line-height: 1.375rem;
+    font-weight: 500;
+    line-height: 1.25rem;
     text-decoration: none;
-    color: var(--vmz-text-steel);
-    padding: 0.5rem 0.5rem;
-    border-radius: var(--vmz-radius-sm);
+    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));
+}
+
+.vmz-ui-console-shell__nav a:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
 }
 
 .vmz-ui-console-shell__nav a[data-active="true"] {
-    color: var(--vmz-action-link-foreground);
-    font-weight: 500;
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-soft);
+    font-weight: 600;
+    box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
 }
 
 .vmz-ui-console-shell__nav a:focus-visible {
-    outline: none;
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
@@ -109,6 +164,7 @@
     min-height: 0;
     height: 100%;
     overflow: auto;
+    background: var(--vmz-surface-page);
 }
 
 .vmz-ui-console-shell__header {
@@ -118,13 +174,34 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 1rem;
-    min-height: 3.5rem;
-    padding: 0.75rem 1.5rem;
-    border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
+    gap: var(--vmz-space-4, 1rem);
+    min-height: var(--vmz-layout-header-height-compact, 3.5rem);
+    padding: 0 var(--vmz-space-5, 1.5rem);
+    border-bottom: 1px solid var(--vmz-line-subtle);
     background: var(--vmz-surface-paper);
 }
 
+.vmz-ui-console-shell__back {
+    display: none;
+    align-items: center;
+    flex: none;
+    min-height: var(--vmz-control-height, 2rem);
+    color: var(--vmz-action-link-foreground);
+    font-size: var(--vmz-type-caption);
+    line-height: var(--vmz-type-line-height-caption);
+    text-decoration: none;
+    white-space: nowrap;
+    outline: none;
+}
+
+.vmz-ui-console-shell__back:hover {
+    color: var(--vmz-action-link-hover);
+}
+
+.vmz-ui-console-shell__back:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
 .vmz-ui-console-shell__header-copy {
     display: grid;
     gap: 0.125rem;
@@ -133,69 +210,79 @@
 
 .vmz-ui-console-shell__breadcrumb {
     margin: 0;
-    color: var(--vmz-text-steel);
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
+    color: var(--vmz-text-tertiary);
+    font-size: 0.75rem;
+    line-height: 1.125rem;
 }
 
 .vmz-ui-console-shell__title {
     margin: 0;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    font-weight: 600;
     color: var(--vmz-text-ink);
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 600;
 }
 
 .vmz-ui-console-shell__subtitle {
     margin: 0;
     color: var(--vmz-text-steel);
-    font-size: 0.875rem;
-    line-height: 1.375rem;
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
 }
 
 .vmz-ui-console-shell__action {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex: none;
     min-height: 2rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: var(--vmz-radius-sm);
+    padding: 0 var(--vmz-space-3, 0.75rem);
+    border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
     font-size: 0.875rem;
     font-weight: 500;
     text-decoration: none;
     white-space: nowrap;
+    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-console-shell__action:hover {
-    color: var(--vmz-action-primary-foreground);
-    background: var(--vmz-action-primary-active);
+    background: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-console-shell__action:focus-visible {
-    outline: none;
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-console-shell__main {
     flex: 1 1 auto;
-    padding: 1.5rem;
+    padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+}
+
+/* The shell owns the page axis, not a card boundary. Pages place their own
+   workspace panel so header and content share one left edge. */
+.vmz-ui-console-shell__panel {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-4, 1rem);
+    padding: var(--vmz-space-5, 1.5rem);
 }
 
 .vmz-ui-console-shell__footer {
     margin-top: auto;
-    padding: 0.85rem 1.5rem 1.1rem;
-    border-top: 1px solid var(--vmz-line-subtle, #e5e6eb);
-    color: var(--vmz-text-steel, #646a73);
-    font-size: 0.82rem;
+    padding: var(--vmz-space-4, 1rem) var(--vmz-space-5, 1.5rem);
+    border-top: 1px solid var(--vmz-line-subtle);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.8125rem;
     background: var(--vmz-surface-paper);
 }
 
-@media (max-width: 40rem) {
+@media (max-width: 720px) {
     .vmz-ui-console-shell {
         grid-template-columns: 1fr;
         grid-template-rows: auto minmax(0, 1fr);
@@ -205,47 +292,114 @@
 
     .vmz-ui-console-shell__sidebar {
         border-right: 0;
-        border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
+        border-bottom: 1px solid var(--vmz-line-subtle);
+        gap: var(--vmz-space-2, 0.5rem);
+        padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
+    }
+
+    .vmz-ui-console-shell__menu {
+        display: inline-flex;
+        width: calc(var(--vmz-control-height, 2rem) * 1.5);
+        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
     }
 
     .vmz-ui-console-shell__nav {
-        flex-direction: row;
-        flex-wrap: wrap;
-        flex: 0;
+        display: none;
+        flex-direction: column;
+        gap: var(--vmz-space-1, 0.25rem);
+        flex: none;
+    }
+
+    .vmz-ui-console-shell__nav[data-open="true"] {
+        display: flex;
+    }
+
+    .vmz-ui-console-shell__nav a {
+        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        white-space: normal;
     }
 
     .vmz-ui-console-shell__header {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-inline: 1rem;
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        align-items: center;
+        gap: var(--vmz-space-2, 0.5rem);
+        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+        padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+    }
+
+    .vmz-ui-console-shell__back {
+        display: inline-flex;
+        grid-column: 1;
+        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
+    }
+
+    .vmz-ui-console-shell__header-copy {
+        grid-column: 2;
+        gap: 0;
+    }
+
+    .vmz-ui-console-shell__breadcrumb,
+    .vmz-ui-console-shell__subtitle {
+        display: none;
+    }
+
+    .vmz-ui-console-shell__title {
+        font-size: var(--vmz-type-subtitle);
+        line-height: var(--vmz-type-line-height-title);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .vmz-ui-console-shell__action {
+        grid-column: 3;
+        justify-self: end;
+        min-height: calc(var(--vmz-control-height, 2rem) * 1.5);
     }
 
     .vmz-ui-console-shell__main {
-        padding: 1rem;
+        padding: 0;
+    }
+
+    .vmz-ui-console-shell__panel {
+        padding: var(--vmz-space-4, 1rem);
     }
 }
 </style>
 <script client>
 /**
  * VMZ UI — ConsoleShell (Console composition).
- * Sidebar + sticky header + main slot + optional footer. Parent supplies nav.
+ * Sidebar + 56px sticky header + white panel + optional footer. Parent owns nav/copy.
  */
 export default class ConsoleShell {
-    public brand: string = "VMZ";
+    public brand: string = "";
     public homeHref: string = "/";
-    public title: string = "Console";
+    public title: string = "";
     public subtitle: string = "";
     public breadcrumbLabel: string = "";
     public primaryActionLabel: string = "";
     public primaryActionHref: string = "";
+    public backLabel: string = "";
+    public backHref: string = "";
     public activeNavId: string = "";
-    public navLabel: string = "Console";
+    public navLabel: string = "";
+    public menuLabel: string = "";
     public footer: string = "";
+    public menuOpen: boolean = false;
     /** @type {{ id: string, title: string, href: string }[]} */
     public nav: {
         id: string;
         title: string;
         href: string;
     }[] = [];
+    toggleMenu() {
+        this.menuOpen = !this.menuOpen;
+    }
+    onShellKeyDown(ev) {
+        if (ev && ev.key === "Escape" && this.menuOpen) {
+            this.menuOpen = false;
+        }
+    }
 }
 </script>

package/src/components/Content.vmz

@@ -7,7 +7,21 @@
 .vmz-ui-content {
     flex: 1;
     min-width: 0;
-    padding: 1.5rem;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--vmz-layout-max-width, 75rem);
+    margin: 0 auto;
+    padding: var(--vmz-space-6, 2rem) var(--vmz-layout-gutter, 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-6, 2rem);
+    color: var(--vmz-text-ink);
+}
+@media (max-width: 720px) {
+    .vmz-ui-content {
+        padding: var(--vmz-space-5, 1.5rem) var(--vmz-space-4, 1rem);
+        gap: var(--vmz-space-5, 1.5rem);
+    }
 }
 </style>
 <script client>