@vmz/ui 0.3.5 → 0.3.7

package/src/components/CodeBlock.vmz

@@ -1,10 +1,18 @@
 <template>
     <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">
+        <div v-if="barVisible()" class="vmz-ui-code-block__bar">
+            <div class="vmz-ui-code-block__heading">
+                <span v-if="language" class="vmz-ui-code-block__lang">
+                    {{ language }}
+                </span>
+                <span v-if="title" class="vmz-ui-code-block__caption">
+                    {{ title }}
+                </span>
+                <span v-else-if="caption" class="vmz-ui-code-block__caption">
+                    {{ caption }}
+                </span>
+            </div>
+            <Button v-if="canCopy()" type="button" variant="text" size="sm" @click="onCopy" class="vmz-ui-code-block__copy">
                 {{ copyLabel }}
             </Button>
         </div>
@@ -20,54 +28,120 @@
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.45rem;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-lg, 8px);
     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);
+    gap: 0.5rem;
+    min-height: 2.25rem;
+    padding: 0 0.5rem 0 0.75rem;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
     background: var(--vmz-surface-paper);
 }
 
-.vmz-ui-code-block__caption {
-    margin: 0;
+.vmz-ui-code-block__heading {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+}
+
+.vmz-ui-code-block__lang {
+    flex: none;
+    padding: 0.0625rem 0.4375rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-xs, 2px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-steel);
     font-family: var(--vmz-font-mono);
-    font-size: 0.8rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    line-height: 1.4;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.vmz-ui-code-block__caption {
+    overflow: hidden;
     color: var(--vmz-text-steel);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-code-block__copy {
+    flex: none;
+    opacity: 0.72;
+    transition: opacity var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-code-block:hover .vmz-ui-code-block__copy,
+.vmz-ui-code-block__copy:focus-visible {
+    opacity: 1;
 }
 
 .vmz-ui-code-block__pre {
     margin: 0;
-    padding: 0.85rem 1rem;
+    padding: 0.875rem 1rem;
     overflow-x: auto;
+    overflow-y: auto;
+    max-height: 32rem;
 }
 
 .vmz-ui-code-block__code {
-    font-family: var(--vmz-font-mono);
-    font-size: 0.88rem;
-    line-height: 1.5;
+    display: block;
     color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-mono);
+    font-size: 0.8125rem;
+    line-height: 1.65;
     white-space: pre;
+    tab-size: 2;
+}
+
+.vmz-ui-code-block__pre::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+}
+
+.vmz-ui-code-block__pre::-webkit-scrollbar-thumb {
+    border-radius: var(--vmz-radius-pill, 999px);
+    background: var(--vmz-line-default);
 }
 </style>
 <script client>
 /**
  * VMZ UI — CodeBlock (Document/Product composition).
- * Source is readable in SSR HTML; copy is progressive enhancement via onCopy.
+ * Readable `<pre><code>` shell: no syntax highlighting (use `<Shiki>` / `<Code>`).
+ * `title` wins over legacy `caption`; `language` is a display-only chip.
+ * Source and bar are server-rendered; copy is progressive enhancement via onCopy.
  */
 export default class CodeBlock {
     public code: string = "";
+    /** Legacy heading text; kept for existing callers and used when `title` is empty. */
     public caption: string = "";
+    /** Preferred heading text; falls back to `caption` when absent. */
+    public title: string = "";
+    /** Optional syntax label rendered as a chip in the bar (e.g. `ts`, `bash`). */
+    public language: string = "";
+    /** Visible label of the copy control. */
     public copyLabel: string = "Copy";
     public onCopy: ((e: Event) => void) | null = null;
+
+    /** The bar renders when there is anything to show in it. */
+    public barVisible(): boolean {
+        return !!(this.title || this.caption || this.language || this.canCopy());
+    }
+
+    /** Copy is a real control only when a handler exists; no dead button. */
+    public canCopy(): boolean {
+        return typeof this.onCopy === "function";
+    }
 }
 </script>

package/src/components/ConsoleShell.vmz

@@ -56,7 +56,7 @@
     border-right: 1px solid var(--vmz-line-subtle, #e5e6eb);
     min-height: 100%;
     align-self: stretch;
-    background: #fff;
+    background: var(--vmz-surface-paper);
 }
 
 .vmz-ui-console-shell__brand {
@@ -65,12 +65,12 @@
     font-size: 1rem;
     letter-spacing: 0;
     text-decoration: none;
-    color: #1f2329;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-console-shell__brand:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-console-shell__nav {
@@ -86,20 +86,20 @@
     font-size: 0.875rem;
     line-height: 1.375rem;
     text-decoration: none;
-    color: #51565d;
-    padding: 0.45rem 0.55rem;
-    border-radius: 6px;
+    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: #0958d9;
+    color: var(--vmz-action-link-foreground);
     font-weight: 500;
-    background: #e6f4ff;
+    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 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-console-shell__body {
@@ -122,18 +122,18 @@
     min-height: 3.5rem;
     padding: 0.75rem 1.5rem;
     border-bottom: 1px solid var(--vmz-line-subtle, #e5e6eb);
-    background: #fff;
+    background: var(--vmz-surface-paper);
 }
 
 .vmz-ui-console-shell__header-copy {
     display: grid;
-    gap: 0.15rem;
+    gap: 0.125rem;
     min-width: 0;
 }
 
 .vmz-ui-console-shell__breadcrumb {
     margin: 0;
-    color: #646a73;
+    color: var(--vmz-text-steel);
     font-size: 0.8125rem;
     line-height: 1.25rem;
 }
@@ -143,12 +143,12 @@
     font-size: 1.5rem;
     line-height: 2rem;
     font-weight: 600;
-    color: #1f2329;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-console-shell__subtitle {
     margin: 0;
-    color: #51565d;
+    color: var(--vmz-text-steel);
     font-size: 0.875rem;
     line-height: 1.375rem;
 }
@@ -159,9 +159,9 @@
     justify-content: center;
     min-height: 2rem;
     padding: 0.25rem 0.75rem;
-    border-radius: 6px;
-    background: #1677ff;
-    color: #fff;
+    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;
@@ -169,13 +169,13 @@
 }
 
 .vmz-ui-console-shell__action:hover {
-    color: #fff;
-    background: #0958d9;
+    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 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-console-shell__main {
@@ -192,7 +192,7 @@
     border-top: 1px solid var(--vmz-line-subtle, #e5e6eb);
     color: var(--vmz-text-steel, #646a73);
     font-size: 0.82rem;
-    background: #fff;
+    background: var(--vmz-surface-paper);
 }
 
 @media (max-width: 40rem) {

package/src/components/DataTable.vmz

@@ -80,7 +80,7 @@
 }
 
 .vmz-ui-datatable__box:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-datatable tr[data-selected="true"] {
@@ -99,13 +99,13 @@
 }
 
 .vmz-ui-datatable__sort:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-datatable__row-action {
     font: inherit;
     font-weight: 600;
-    padding: 0.3rem 0.55rem;
+    padding: 0.25rem 0.5rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
@@ -115,7 +115,7 @@
 }
 
 .vmz-ui-datatable__row-action:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-datatable__row-action:disabled {

package/src/components/DatePicker.vmz

@@ -63,7 +63,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 
@@ -76,7 +76,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.55rem;
+    gap: 0.5rem;
     width: 100%;
     box-sizing: border-box;
     font: inherit;
@@ -96,7 +96,7 @@
 
 .vmz-ui-date-picker__control:focus-visible,
 .vmz-ui-date-picker.is-opened .vmz-ui-date-picker__control {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-date-picker__control:disabled {
@@ -133,7 +133,7 @@
     left: 0;
     right: 0;
     box-sizing: border-box;
-    padding: 0.65rem 0.75rem 0.75rem;
+    padding: 0.625rem 0.75rem 0.75rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper, #fff);
@@ -147,7 +147,7 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5rem;
-    margin-bottom: 0.55rem;
+    margin-bottom: 0.5rem;
 }
 
 .vmz-ui-date-picker__month {
@@ -176,13 +176,13 @@
 .vmz-ui-date-picker__nav:hover,
 .vmz-ui-date-picker__nav:focus-visible {
     border-color: var(--vmz-action-primary-background);
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-date-picker__weekdays {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 0.15rem;
+    gap: 0.125rem;
     margin-bottom: 0.25rem;
     font-size: 0.75rem;
     opacity: 0.7;
@@ -192,7 +192,7 @@
 .vmz-ui-date-picker__grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
-    gap: 0.15rem;
+    gap: 0.125rem;
 }
 
 .vmz-ui-date-picker__day {
@@ -211,7 +211,7 @@
 .vmz-ui-date-picker__day:hover,
 .vmz-ui-date-picker__day:focus-visible {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-date-picker__day.is-outside {

package/src/components/Dialog.vmz

@@ -86,7 +86,7 @@
 }
 
 .vmz-ui-dialog__panel:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-dialog__title {
@@ -105,23 +105,42 @@
 .vmz-ui-dialog__close {
     font: inherit;
     font-size: 0.875rem;
-    font-weight: 400;
+    font-weight: 500;
     min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 0.95rem;
+    padding: 0.25rem 0.9375rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     cursor: pointer;
-    background: var(--vmz-surface-paper, #fff);
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-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-dialog__close[data-variant="primary"] {
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+    border-color: transparent;
+}
+
+.vmz-ui-dialog__close[data-variant="primary"]:hover {
+    background: var(--vmz-action-primary-hover);
+    border-color: transparent;
+}
+
+.vmz-ui-dialog__close[data-variant="primary"]:active {
+    background: var(--vmz-action-primary-active);
 }
 
 .vmz-ui-dialog__close:hover {
-    color: var(--vmz-action-primary-background);
-    border-color: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-dialog__close:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 @keyframes vmz-ui-overlay-fade-in {

package/src/components/Drawer.vmz

@@ -89,7 +89,7 @@
 }
 
 .vmz-ui-drawer__panel:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-drawer__title {
@@ -111,7 +111,7 @@
     font-size: 0.875rem;
     font-weight: 400;
     min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 0.95rem;
+    padding: 0.25rem 1rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     cursor: pointer;
@@ -125,7 +125,7 @@
 }
 
 .vmz-ui-drawer__close:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 @keyframes vmz-ui-drawer-fade-in {