@vmz/ui 0.2.2 → 0.2.4

package/src/components/Checkbox.vmz

@@ -1,74 +1,55 @@
 <template>
-  <label class="vmz-ui-checkbox" data-vmz-ui="checkbox" :for="controlId">
-      <input
-        :id="controlId"
-        class="vmz-ui-checkbox__input"
-        type="checkbox"
-        :checked="checked"
-        :disabled="disabled"
-        :aria-describedby="describedBy"
-        @click="onToggle"
-      />
-      <span class="vmz-ui-checkbox__label">{{ label }}</span>
+    <label data-vmz-ui="checkbox" :for="controlId" class="vmz-ui-checkbox">
+        <input :id="controlId" type="checkbox" :checked="checked" :disabled="disabled" :aria-describedby="describedBy" @change="onToggle" class="vmz-ui-checkbox__input" />
+        <span class="vmz-ui-checkbox__label">
+            {{ label }}
+        </span>
     </label>
 </template>
-
 <style>
-  .vmz-ui-checkbox {
+.vmz-ui-checkbox {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
     font: inherit;
     cursor: pointer;
-  }
+}
 
-  .vmz-ui-checkbox__input {
+.vmz-ui-checkbox__input {
     width: 1rem;
     height: 1rem;
     accent-color: var(--vmz-action-primary-background);
     outline: none;
-  }
+}
 
-  .vmz-ui-checkbox__input:focus-visible {
+.vmz-ui-checkbox__input:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-checkbox__input:disabled {
+.vmz-ui-checkbox__input:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-checkbox__label {
+.vmz-ui-checkbox__label {
     font-weight: 600;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Checkbox (UI2).
-* Label association via wrapping label + for/id; parent owns checked (no parallel form store).
-* Toggle goes through onChange so live `checked` prop stays authoritative.
-*/
+ * VMZ UI — Checkbox (UI2).
+ * Label association via wrapping label + for/id; parent owns checked (no parallel form store).
+ * Native change reports the committed checked state to the parent.
+ */
 export default class Checkbox {
-	public label: string = "";
-	public checked: boolean = false;
-	public disabled: boolean = false;
-	public controlId: string = "vmz-checkbox";
-	public describedBy: string = "";
-	public onChange: ((e: {
-		target: {
-			checked: boolean;
-		};
-	}) => void) | null = null;
-	onToggle(ev) {
-		if (this.disabled) return;
-		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-		const next = !this.checked;
-		const payload = { target: { checked: next } };
-		this.emit("change", payload);
-		if (typeof this.onChange === "function") {
-			this.onChange(payload);
-		}
-	}
+    public label: string = "";
+    public checked: boolean = false;
+    public disabled: boolean = false;
+    public controlId: string = "vmz-checkbox";
+    public describedBy: string = "";
+    onToggle(ev) {
+        if (this.disabled) return;
+        this.emit("change", !!ev?.target?.checked);
+    }
 }
 </script>

package/src/components/CodeBlock.vmz

@@ -1,15 +1,22 @@
 <template>
-  <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
-      <div class="vmz-ui-code-block__bar">
-        <figcaption v-if="caption" class="vmz-ui-code-block__caption">{{ caption }}</figcaption>
-        <Button type="button" variant="ghost" @click="onCopy">{{ copyLabel }}</Button>
-      </div>
-      <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{{ code }}</code></pre>
+    <figure data-vmz-ui="code-block" class="vmz-ui-code-block">
+        <div class="vmz-ui-code-block__bar">
+            <figcaption v-if="caption" class="vmz-ui-code-block__caption">
+                {{ caption }}
+            </figcaption>
+            <Button type="button" variant="ghost" @click="onCopy">
+                {{ copyLabel }}
+            </Button>
+        </div>
+        <pre class="vmz-ui-code-block__pre">
+            <code class="vmz-ui-code-block__code">
+                {{ code }}
+            </code>
+        </pre>
     </figure>
 </template>
-
 <style>
-  .vmz-ui-code-block {
+.vmz-ui-code-block {
     margin: 0;
     display: flex;
     flex-direction: column;
@@ -18,9 +25,9 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-mist);
     overflow: hidden;
-  }
+}
 
-  .vmz-ui-code-block__bar {
+.vmz-ui-code-block__bar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -29,39 +36,38 @@
     padding: 0.35rem 0.55rem;
     border-bottom: 1px solid var(--vmz-line-default);
     background: var(--vmz-surface-paper);
-  }
+}
 
-  .vmz-ui-code-block__caption {
+.vmz-ui-code-block__caption {
     margin: 0;
     font-family: var(--vmz-font-mono);
     font-size: 0.8rem;
     color: var(--vmz-text-steel);
-  }
+}
 
-  .vmz-ui-code-block__pre {
+.vmz-ui-code-block__pre {
     margin: 0;
     padding: 0.85rem 1rem;
     overflow-x: auto;
-  }
+}
 
-  .vmz-ui-code-block__code {
+.vmz-ui-code-block__code {
     font-family: var(--vmz-font-mono);
     font-size: 0.88rem;
     line-height: 1.5;
     color: var(--vmz-text-ink);
     white-space: pre;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — CodeBlock (Document/Product composition).
-* Source is readable in SSR HTML; copy is progressive enhancement via onCopy.
-*/
+ * VMZ UI — CodeBlock (Document/Product composition).
+ * Source is readable in SSR HTML; copy is progressive enhancement via onCopy.
+ */
 export default class CodeBlock {
-	public code: string = "";
-	public caption: string = "";
-	public copyLabel: string = "Copy";
-	public onCopy: ((e: Event) => void) | null = null;
+    public code: string = "";
+    public caption: string = "";
+    public copyLabel: string = "Copy";
+    public onCopy: ((e: Event) => void) | null = null;
 }
 </script>

package/src/components/Collapse.vmz

@@ -1,24 +1,42 @@
 <template>
-  <div class="vmz-ui-collapse" data-vmz-ui="collapse">
-    <details
-      v-for="item in items"
-      :key="item.id"
-      :data-vmz-collapse-item="item.id"
-    >
-      <summary :data-vmz-collapse-trigger="item.id">{{ item.title }}</summary>
-      <div class="vmz-ui-collapse__body" :data-vmz-collapse-body="item.id">{{ item.body }}</div>
-    </details>
-  </div>
+    <div data-vmz-ui="collapse" class="vmz-ui-collapse">
+        <details v-for="item in items" :key="item.id" :data-vmz-collapse-item="item.id">
+            <summary :data-vmz-collapse-trigger="item.id">
+                {{ item.title }}
+            </summary>
+            <div :data-vmz-collapse-body="item.id" class="vmz-ui-collapse__body">
+                {{ item.body }}
+            </div>
+        </details>
+    </div>
 </template>
 <style>
-.vmz-ui-collapse{border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-lg,8px);background:var(--vmz-surface-paper);overflow:hidden}
-.vmz-ui-collapse details+details{border-top:1px solid var(--vmz-line-default)}
-.vmz-ui-collapse summary{padding:.85rem 1rem;font-weight:600;cursor:pointer;background:var(--vmz-surface-paper)}
-.vmz-ui-collapse summary:hover{background:var(--vmz-surface-mist)}
-.vmz-ui-collapse__body{padding:0 1rem 1rem;color:var(--vmz-text-steel);line-height:1.6}
+.vmz-ui-collapse {
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    overflow: hidden;
+}
+.vmz-ui-collapse details + details {
+    border-top: 1px solid var(--vmz-line-default);
+}
+.vmz-ui-collapse summary {
+    padding: 0.85rem 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    background: var(--vmz-surface-paper);
+}
+.vmz-ui-collapse summary:hover {
+    background: var(--vmz-surface-mist);
+}
+.vmz-ui-collapse__body {
+    padding: 0 1rem 1rem;
+    color: var(--vmz-text-steel);
+    line-height: 1.6;
+}
 </style>
 <script client>
 export default class Collapse {
-  public items: Array<{ id: string; title: string; body: string }> = [];
+    public items: Array<{ id: string; title: string; body: string }> = [];
 }
 </script>

package/src/components/ConsoleShell.vmz

@@ -1,162 +1,251 @@
 <template>
-  <div class="vmz-ui-console-shell" data-vmz-ui="console-shell">
-      <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" :aria-label="navLabel">
-        <a class="vmz-ui-console-shell__brand" :href="homeHref">{{ 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">
-            {{ item.title }}
-          </a>
-        </nav>
-      </aside>
-      <div class="vmz-ui-console-shell__body">
-        <header class="vmz-ui-console-shell__header" data-vmz-shell="header">
-          <h1 class="vmz-ui-console-shell__title">{{ title }}</h1>
-        </header>
-        <main class="vmz-ui-console-shell__main" data-vmz-shell="main">
-          <slot />
-        </main>
-        <footer v-if="footer" class="vmz-ui-console-shell__footer" data-vmz-shell="footer">
-          {{ footer }}
-        </footer>
-      </div>
+    <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 {
+.vmz-ui-console-shell {
     display: grid;
-    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr);
+    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, #f5f5f5);
-  }
+    background: var(--vmz-surface-page, #f5f6f8);
+}
 
-  .vmz-ui-console-shell__sidebar {
+.vmz-ui-console-shell__sidebar {
     display: flex;
     flex-direction: column;
     gap: 1rem;
-    padding: 1.15rem 0.95rem 1.5rem;
-    border-right: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    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 {
+.vmz-ui-console-shell__brand {
     font: inherit;
-    font-weight: 700;
-    font-size: 1.05rem;
-    letter-spacing: 0.04em;
+    font-weight: 600;
+    font-size: 1rem;
+    letter-spacing: 0;
     text-decoration: none;
-    color: var(--vmz-action-primary-background);
-  }
+    color: #1f2329;
+}
 
-  .vmz-ui-console-shell__brand:focus-visible {
+.vmz-ui-console-shell__brand:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-console-shell__nav {
+.vmz-ui-console-shell__nav {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.25rem;
     flex: 1;
-  }
+}
 
-  .vmz-ui-console-shell__nav a {
+.vmz-ui-console-shell__nav a {
     font: inherit;
-    font-weight: 600;
+    font-weight: 400;
+    font-size: 0.875rem;
+    line-height: 1.375rem;
     text-decoration: none;
-    color: var(--vmz-action-primary-active);
+    color: #51565d;
     padding: 0.45rem 0.55rem;
-  }
+    border-radius: 6px;
+}
 
-  .vmz-ui-console-shell__nav a:focus-visible {
+.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 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-console-shell__body {
+.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 {
+.vmz-ui-console-shell__header {
     position: sticky;
     top: 0;
     z-index: 20;
-    padding: 0.9rem 1.25rem;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    background: var(--vmz-surface-paper, #fff);
-  }
+    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.15rem;
+    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 {
+.vmz-ui-console-shell__title {
     margin: 0;
-    font-size: 1.15rem;
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
-  }
+    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__main {
+.vmz-ui-console-shell__action:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__main {
     flex: 1 1 auto;
-    padding: 1.15rem 1.25rem 1.5rem;
+    padding: 1.5rem;
     display: flex;
     flex-direction: column;
-    gap: 0.85rem;
-  }
+    gap: 1rem;
+}
 
-  .vmz-ui-console-shell__footer {
+.vmz-ui-console-shell__footer {
     margin-top: auto;
-    padding: 0.85rem 1.25rem 1.1rem;
-    border-top: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    color: var(--vmz-text-steel, #6b7466);
+    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, #fff);
-  }
+    background: #fff;
+}
 
-  @media (max-width: 40rem) {
+@media (max-width: 40rem) {
     .vmz-ui-console-shell {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto minmax(0, 1fr);
-      height: auto;
-      min-height: 100dvh;
+        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, var(--vmz-line-default));
+        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;
+        flex-direction: row;
+        flex-wrap: wrap;
+        flex: 0;
     }
-  }
-</style>
 
+    .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.
-*/
+ * 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 navLabel: string = "Console";
-	public footer: string = "";
-	/** @type {{ id: string, title: string, href: string }[]} */
-	public nav: {
-		id: string;
-		title: string;
-		href: string;
-	}[] = [];
+    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>

package/src/components/Content.vmz

@@ -1,11 +1,15 @@
 <template>
-  <main class="vmz-ui-content" data-vmz-ui="content"><slot /></main>
+    <main data-vmz-ui="content" class="vmz-ui-content">
+        <slot />
+    </main>
 </template>
-
 <style>
-  .vmz-ui-content{flex:1;min-width:0;padding:1.5rem}
+.vmz-ui-content {
+    flex: 1;
+    min-width: 0;
+    padding: 1.5rem;
+}
 </style>
-
 <script client>
 export default class Content {}
 </script>