@vmz/ui 0.3.6 → 0.3.7

package/src/components/ConsoleShell.vmz

@@ -1,251 +1,251 @@
-<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" 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: var(--vmz-surface-paper);
+}
+
+.vmz-ui-console-shell__brand {
+    font: inherit;
+    font-weight: 600;
+    font-size: 1rem;
+    letter-spacing: 0;
+    text-decoration: none;
+    color: var(--vmz-text-ink);
+}
+
+.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: var(--vmz-text-steel);
+    padding: 0.5rem 0.5rem;
+    border-radius: var(--vmz-radius-sm);
+}
+
+.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));
+}
+
+.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: var(--vmz-surface-paper);
+}
+
+.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-steel);
+    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: var(--vmz-text-ink);
+}
+
+.vmz-ui-console-shell__subtitle {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    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: var(--vmz-radius-sm);
+    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;
+}
+
+.vmz-ui-console-shell__action:hover {
+    color: var(--vmz-action-primary-foreground);
+    background: var(--vmz-action-primary-active);
+}
+
+.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: var(--vmz-surface-paper);
+}
+
+@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>