@vmz/ui 0.1.0 → 0.1.2

package/src/components/CodeBlock.vmz

@@ -1,67 +1,67 @@
 <template>
   <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
-    <div class="vmz-ui-code-block__bar">
-      <figcaption if={caption} class="vmz-ui-code-block__caption">{caption}</figcaption>
-      <Button type="button" variant="ghost" onClick={onCopy}>{copyLabel}</Button>
-    </div>
-    <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{code}</code></pre>
-  </figure>
+      <div class="vmz-ui-code-block__bar">
+        <figcaption if={caption} class="vmz-ui-code-block__caption">{caption}</figcaption>
+        <Button type="button" variant="ghost" onClick={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 {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-  border: 1px solid var(--vmz-line-default);
-  border-radius: 2px;
-  background: var(--vmz-surface-mist);
-  overflow: hidden;
-}
+  .vmz-ui-code-block {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-mist);
+    overflow: hidden;
+  }
 
-.vmz-ui-code-block__bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.45rem;
-  padding: 0.35rem 0.55rem;
-  border-bottom: 1px solid var(--vmz-line-default);
-  background: var(--vmz-surface-paper);
-}
+  .vmz-ui-code-block__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.45rem;
+    padding: 0.35rem 0.55rem;
+    border-bottom: 1px solid var(--vmz-line-default);
+    background: var(--vmz-surface-paper);
+  }
 
-.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__caption {
+    margin: 0;
+    font-family: var(--vmz-font-mono);
+    font-size: 0.8rem;
+    color: var(--vmz-text-steel);
+  }
 
-.vmz-ui-code-block__pre {
-  margin: 0;
-  padding: 0.85rem 1rem;
-  overflow-x: auto;
-}
+  .vmz-ui-code-block__pre {
+    margin: 0;
+    padding: 0.85rem 1rem;
+    overflow-x: auto;
+  }
 
-.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;
-}
+  .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

@@ -0,0 +1,20 @@
+<template>
+  <div class="vmz-ui-collapse" data-vmz-ui="collapse">
+    <details each={items} as="item" key={item.id}>
+      <summary>{item.title}</summary>
+      <div 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}
+</style>
+<script client>
+export default class Collapse {
+  public items: Array<{ id: string; title: string; body: string }> = [];
+}
+</script>

package/src/components/ConsoleShell.vmz

@@ -1,127 +1,162 @@
 <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 each={nav} as="item" 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>
+      <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 each={nav} as="item" 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 if={footer} class="vmz-ui-console-shell__footer" data-vmz-shell="footer">
+          {footer}
+        </footer>
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-console-shell {
-  display: grid;
-  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
-  min-height: 100%;
-  color: inherit;
-}
-
-.vmz-ui-console-shell__sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem 0.9rem;
-  border-right: 1px solid var(--vmz-action-primary-background);
-}
+  .vmz-ui-console-shell {
+    display: grid;
+    grid-template-columns: minmax(12rem, 15rem) 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);
+  }
 
-.vmz-ui-console-shell__brand {
-  font: inherit;
-  font-weight: 700;
-  font-size: 1.05rem;
-  letter-spacing: 0.04em;
-  text-decoration: none;
-  color: var(--vmz-action-primary-background);
-}
+  .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));
+    min-height: 100%;
+    align-self: stretch;
+  }
 
-.vmz-ui-console-shell__brand:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-console-shell__brand {
+    font: inherit;
+    font-weight: 700;
+    font-size: 1.05rem;
+    letter-spacing: 0.04em;
+    text-decoration: none;
+    color: var(--vmz-action-primary-background);
+  }
 
-.vmz-ui-console-shell__nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.45rem;
-}
+  .vmz-ui-console-shell__brand:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-console-shell__nav a {
-  font: inherit;
-  font-weight: 600;
-  text-decoration: none;
-  color: var(--vmz-action-primary-active);
-  padding: 0.35rem 0.4rem;
-}
+  .vmz-ui-console-shell__nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    flex: 1;
+  }
 
-.vmz-ui-console-shell__nav a:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-console-shell__nav a {
+    font: inherit;
+    font-weight: 600;
+    text-decoration: none;
+    color: var(--vmz-action-primary-active);
+    padding: 0.45rem 0.55rem;
+  }
 
-.vmz-ui-console-shell__body {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
+  .vmz-ui-console-shell__nav a:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-console-shell__header {
-  padding: 0.85rem 1.1rem;
-  border-bottom: 1px solid var(--vmz-action-primary-background);
-}
+  .vmz-ui-console-shell__body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    overflow: auto;
+  }
 
-.vmz-ui-console-shell__title {
-  margin: 0;
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--vmz-action-primary-active);
-}
+  .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);
+  }
 
-.vmz-ui-console-shell__main {
-  flex: 1;
-  padding: 1rem 1.1rem 1.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.85rem;
-}
+  .vmz-ui-console-shell__title {
+    margin: 0;
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: var(--vmz-action-primary-active);
+  }
 
-@media (max-width: 40rem) {
-  .vmz-ui-console-shell {
-    grid-template-columns: 1fr;
+  .vmz-ui-console-shell__main {
+    flex: 1 1 auto;
+    padding: 1.15rem 1.25rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.85rem;
   }
 
-  .vmz-ui-console-shell__sidebar {
-    border-right: 0;
-    border-bottom: 1px solid var(--vmz-action-primary-background);
+  .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);
+    font-size: 0.82rem;
+    background: var(--vmz-surface-paper, #fff);
   }
 
-  .vmz-ui-console-shell__nav {
-    flex-direction: row;
-    flex-wrap: wrap;
+  @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, var(--vmz-line-default));
+    }
+
+    .vmz-ui-console-shell__nav {
+      flex-direction: row;
+      flex-wrap: wrap;
+      flex: 0;
+    }
   }
-}
 </style>
 
 <script client>
 /**
- * VMZ UI — ConsoleShell (Console composition).
- * Sidebar + header landmarks + main slot. Parent supplies nav; no private theme.
- */
+* 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';
-  /** @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 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

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