@vmz/ui 0.3.6 → 0.3.8

package/src/components/ConsoleShell.vmz

@@ -1,251 +1,405 @@
-<template>
-    <div data-vmz-ui="console-shell" 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">
-                <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>
-            </nav>
-        </aside>
-        <div class="vmz-ui-console-shell__body">
-            <header data-vmz-shell="header" class="vmz-ui-console-shell__header">
-                <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">
-                        {{ title }}
-                    </h1>
-                    <p v-if="subtitle" class="vmz-ui-console-shell__subtitle">
-                        {{ subtitle }}
-                    </p>
-                </div>
-                <a v-if="primaryActionLabel && primaryActionHref" :href="primaryActionHref" class="vmz-ui-console-shell__action">
-                    {{ primaryActionLabel }}
-                </a>
-            </header>
-            <main data-vmz-shell="main" class="vmz-ui-console-shell__main">
-                <slot />
-            </main>
-            <footer v-if="footer" data-vmz-shell="footer" class="vmz-ui-console-shell__footer">
-                {{ footer }}
-            </footer>
-        </div>
-    </div>
-</template>
-<style>
-.vmz-ui-console-shell {
-    display: grid;
-    grid-template-columns: 13rem minmax(0, 1fr);
-    grid-template-rows: minmax(100%, 100%);
-    min-height: 100vh;
-    min-height: 100dvh;
-    height: 100dvh;
-    color: inherit;
-    background: var(--vmz-surface-page, #f5f6f8);
-}
-
-.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);
-    min-height: 100%;
-    align-self: stretch;
-    background: #fff;
-}
-
-.vmz-ui-console-shell__brand {
-    font: inherit;
-    font-weight: 600;
-    font-size: 1rem;
-    letter-spacing: 0;
-    text-decoration: none;
-    color: #1f2329;
-}
-
-.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;
-    flex: 1;
-}
-
-.vmz-ui-console-shell__nav a {
-    font: inherit;
-    font-weight: 400;
-    font-size: 0.875rem;
-    line-height: 1.375rem;
-    text-decoration: none;
-    color: #51565d;
-    padding: 0.5rem 0.5rem;
-    border-radius: 6px;
-}
-
-.vmz-ui-console-shell__nav a[data-active="true"] {
-    color: #0958d9;
-    font-weight: 500;
-    background: #e6f4ff;
-}
-
-.vmz-ui-console-shell__nav a:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-console-shell__body {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-    min-height: 0;
-    height: 100%;
-    overflow: auto;
-}
-
-.vmz-ui-console-shell__header {
-    position: sticky;
-    top: 0;
-    z-index: 20;
-    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);
-    background: #fff;
-}
-
-.vmz-ui-console-shell__header-copy {
-    display: grid;
-    gap: 0.125rem;
-    min-width: 0;
-}
-
-.vmz-ui-console-shell__breadcrumb {
-    margin: 0;
-    color: #646a73;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-}
-
-.vmz-ui-console-shell__title {
-    margin: 0;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    font-weight: 600;
-    color: #1f2329;
-}
-
-.vmz-ui-console-shell__subtitle {
-    margin: 0;
-    color: #51565d;
-    font-size: 0.875rem;
-    line-height: 1.375rem;
-}
-
-.vmz-ui-console-shell__action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 2rem;
-    padding: 0.25rem 0.75rem;
-    border-radius: 6px;
-    background: #1677ff;
-    color: #fff;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-decoration: none;
-    white-space: nowrap;
-}
-
-.vmz-ui-console-shell__action:hover {
-    color: #fff;
-    background: #0958d9;
-}
-
-.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;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.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;
-    background: #fff;
-}
-
-@media (max-width: 40rem) {
-    .vmz-ui-console-shell {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto minmax(0, 1fr);
-        height: auto;
-        min-height: 100dvh;
-    }
-
-    .vmz-ui-console-shell__sidebar {
-        border-right: 0;
-        border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
-    }
-
-    .vmz-ui-console-shell__nav {
-        flex-direction: row;
-        flex-wrap: wrap;
-        flex: 0;
-    }
-
-    .vmz-ui-console-shell__header {
-        flex-direction: column;
-        align-items: flex-start;
-        padding-inline: 1rem;
-    }
-
-    .vmz-ui-console-shell__main {
-        padding: 1rem;
-    }
-}
-</style>
-<script client>
-/**
- * VMZ UI — ConsoleShell (Console composition).
- * Sidebar + sticky header + main slot + optional footer. Parent supplies nav.
- */
-export default class ConsoleShell {
-    public brand: string = "VMZ";
-    public homeHref: string = "/";
-    public title: string = "Console";
-    public subtitle: string = "";
-    public breadcrumbLabel: string = "";
-    public primaryActionLabel: string = "";
-    public primaryActionHref: string = "";
-    public activeNavId: string = "";
-    public navLabel: string = "Console";
-    public footer: string = "";
-    /** @type {{ id: string, title: string, href: string }[]} */
-    public nav: {
-        id: string;
-        title: string;
-        href: string;
-    }[] = [];
-}
-</script>
+<template>
+    <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">
+            <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>
+            </nav>
+        </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 v-if="title" class="vmz-ui-console-shell__title">
+                        {{ title }}
+                    </h1>
+                    <p v-if="subtitle" class="vmz-ui-console-shell__subtitle">
+                        {{ subtitle }}
+                    </p>
+                </div>
+                <a v-if="primaryActionLabel && primaryActionHref" :href="primaryActionHref" class="vmz-ui-console-shell__action">
+                    {{ primaryActionLabel }}
+                </a>
+            </header>
+            <main data-vmz-shell="main" class="vmz-ui-console-shell__main">
+                <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 }}
+            </footer>
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-console-shell {
+    display: grid;
+    grid-template-columns: 13rem minmax(0, 1fr);
+    grid-template-rows: minmax(100%, 100%);
+    min-height: 100vh;
+    min-height: 100dvh;
+    height: 100dvh;
+    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: 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 {
+    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;
+    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 {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__nav {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    flex: 1;
+}
+
+.vmz-ui-console-shell__nav a {
+    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;
+    font-weight: 500;
+    line-height: 1.25rem;
+    text-decoration: none;
+    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-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 {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: auto;
+    background: var(--vmz-surface-page);
+}
+
+.vmz-ui-console-shell__header {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    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;
+    min-width: 0;
+}
+
+.vmz-ui-console-shell__breadcrumb {
+    margin: 0;
+    color: var(--vmz-text-tertiary);
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+}
+
+.vmz-ui-console-shell__title {
+    margin: 0;
+    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.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 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 {
+    background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-console-shell__action:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__main {
+    flex: 1 1 auto;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 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: 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: 720px) {
+    .vmz-ui-console-shell {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto minmax(0, 1fr);
+        height: auto;
+        min-height: 100dvh;
+    }
+
+    .vmz-ui-console-shell__sidebar {
+        border-right: 0;
+        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 {
+        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 {
+        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: 0;
+    }
+
+    .vmz-ui-console-shell__panel {
+        padding: var(--vmz-space-4, 1rem);
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — ConsoleShell (Console composition).
+ * Sidebar + 56px sticky header + white panel + optional footer. Parent owns nav/copy.
+ */
+export default class ConsoleShell {
+    public brand: string = "";
+    public homeHref: string = "/";
+    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 = "";
+    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>