@vmz/ui 0.3.4 → 0.3.6

package/src/components/Callout.vmz

@@ -1,77 +1,77 @@
-<template>
-    <aside data-vmz-ui="callout" :data-tone="tone" :role="roleName" class="vmz-ui-callout">
-        <p v-if="title" class="vmz-ui-callout__title">
-            {{ title }}
-        </p>
-        <p v-if="description" class="vmz-ui-callout__description">
-            {{ description }}
-        </p>
-        <div class="vmz-ui-callout__body">
-            <slot />
-        </div>
-    </aside>
-</template>
-<style>
-.vmz-ui-callout {
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-status-info-accent);
-    border-left-width: 1px;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
-    color: var(--vmz-status-info-foreground);
-}
-
-.vmz-ui-callout[data-tone="info"] {
-    border-color: var(--vmz-status-info-accent);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
-    color: var(--vmz-status-info-foreground);
-}
-
-.vmz-ui-callout[data-tone="success"] {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, var(--vmz-surface-paper));
-    color: var(--vmz-status-success-foreground);
-}
-
-.vmz-ui-callout[data-tone="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, var(--vmz-surface-paper));
-    color: var(--vmz-status-warning-foreground);
-}
-
-.vmz-ui-callout[data-tone="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, var(--vmz-surface-paper));
-    color: var(--vmz-status-danger-foreground);
-}
-
-.vmz-ui-callout__title {
-    margin: 0;
-    font-family: var(--vmz-font-display);
-    font-weight: 700;
-}
-
-.vmz-ui-callout__description {
-    margin: 0;
-    line-height: 1.5;
-}
-
-.vmz-ui-callout__body:empty {
-    display: none;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Callout (Document/Product composition).
- * Inline guidance block for prose; shares status.* tones with Alert.
- */
-export default class Callout {
-    public title: string = "";
-    public description: string = "";
-    public tone: string = "info";
-    public roleName: string = "note";
-}
-</script>
+<template>
+    <aside data-vmz-ui="callout" :data-tone="tone" :role="roleName" class="vmz-ui-callout">
+        <p v-if="title" class="vmz-ui-callout__title">
+            {{ title }}
+        </p>
+        <p v-if="description" class="vmz-ui-callout__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-callout__body">
+            <slot />
+        </div>
+    </aside>
+</template>
+<style>
+.vmz-ui-callout {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-status-info-accent);
+    border-left-width: 1px;
+    border-radius: var(--vmz-radius-md, 6px);
+    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-callout[data-tone="info"] {
+    border-color: var(--vmz-status-info-accent);
+    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-callout[data-tone="success"] {
+    border-color: var(--vmz-status-success-accent);
+    background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-callout[data-tone="warning"] {
+    border-color: var(--vmz-status-warning-accent);
+    background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-callout[data-tone="danger"] {
+    border-color: var(--vmz-status-danger-accent);
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, var(--vmz-surface-paper));
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-callout__title {
+    margin: 0;
+    font-family: var(--vmz-font-display);
+    font-weight: 700;
+}
+
+.vmz-ui-callout__description {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.vmz-ui-callout__body:empty {
+    display: none;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Callout (Document/Product composition).
+ * Inline guidance block for prose; shares status.* tones with Alert.
+ */
+export default class Callout {
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "info";
+    public roleName: string = "note";
+}
+</script>

package/src/components/Card.vmz

@@ -1,106 +1,120 @@
-<template>
-    <section data-vmz-ui="card" :data-size="size" :data-bordered="bordered ? 'true' : 'false'" :data-hoverable="hoverable ? 'true' : 'false'" class="vmz-ui-card">
-        <header v-if="title" class="vmz-ui-card__header">
-            <h2 class="vmz-ui-card__title">
-                {{ title }}
-            </h2>
-            <p v-if="description" class="vmz-ui-card__description">
-                {{ description }}
-            </p>
-        </header>
-        <div class="vmz-ui-card__body">
-            <slot />
-        </div>
-    </section>
-</template>
-<style>
-.vmz-ui-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1rem 1.25rem;
-    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    border-radius: var(--vmz-radius-lg, 8px);
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-    box-shadow: var(--vmz-shadow-card, none);
-}
-.vmz-ui-card[data-bordered="false"] {
-    border-color: transparent;
-}
-.vmz-ui-card[data-hoverable="true"] {
-    transition:
-        border-color var(--vmz-motion-control-duration, 0.16s),
-        box-shadow var(--vmz-motion-control-duration, 0.16s);
-}
-.vmz-ui-card[data-hoverable="true"]:hover {
-    box-shadow: var(
-        --vmz-shadow-card-hover,
-        0 1px 2px -2px rgba(0, 0, 0, 0.08),
-        0 3px 6px 0 rgba(0, 0, 0, 0.06)
-    );
-}
-.vmz-ui-card[data-size="small"] {
-    gap: 0.5rem;
-    padding: 0.75rem 1rem;
-}
-
-:where([data-density="compact"]) .vmz-ui-card {
-    gap: var(--vmz-density-compact-gap);
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-}
-
-:where([data-density="dense"]) .vmz-ui-card {
-    gap: var(--vmz-density-dense-gap);
-    padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
-}
-
-.vmz-ui-card__header {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-}
-
-.vmz-ui-card__title {
-    margin: 0;
-    font-family: var(--vmz-font-sans, inherit);
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-card__description {
-    margin: 0;
-    color: var(--vmz-text-steel);
-    line-height: 1.45;
-}
-
-.vmz-ui-card__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--vmz-density-control-gap);
-}
-
-/* Direct host default is display:contents (runtime); Badge-only CSS special-case removed. */
-
-:where([data-density="compact"]) .vmz-ui-card__body {
-    gap: var(--vmz-density-compact-gap);
-}
-
-:where([data-density="dense"]) .vmz-ui-card__body {
-    gap: var(--vmz-density-dense-gap);
-}
-</style>
-<script client>
-/**
- * VMZ UI — Card (Commercial Surface).
- * Surface container; spacing from density.*; chrome from surface/line/text.
- */
-export default class Card {
-    public title: string = "";
-    public description: string = "";
-    public size: string = "middle";
-    public bordered: boolean = true;
-    public hoverable: boolean = false;
-}
-</script>
+<template>
+    <section data-vmz-ui="card" :data-size="size" :data-bordered="bordered ? 'true' : 'false'" :data-hoverable="hoverable ? 'true' : 'false'" class="vmz-ui-card">
+        <header v-if="title" class="vmz-ui-card__header">
+            <h2 class="vmz-ui-card__title">
+                {{ title }}
+            </h2>
+            <p v-if="description" class="vmz-ui-card__description">
+                {{ description }}
+            </p>
+        </header>
+        <div class="vmz-ui-card__body">
+            <slot />
+        </div>
+    </section>
+</template>
+<style>
+.vmz-ui-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-card, none);
+}
+.vmz-ui-card[data-bordered="false"] {
+    border-color: transparent;
+}
+.vmz-ui-card[data-hoverable="true"] {
+    transition:
+        border-color var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
+        box-shadow var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
+        transform var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1));
+}
+.vmz-ui-card[data-hoverable="true"]:hover {
+    border-color: var(--vmz-line-default);
+    box-shadow: var(
+        --vmz-shadow-card-hover,
+        0 1px 2px -2px rgba(0, 0, 0, 0.08),
+        0 3px 6px 0 rgba(0, 0, 0, 0.06)
+    );
+    transform: translateY(-1px);
+}
+.vmz-ui-card[data-hoverable="true"]:focus-within {
+    border-color: var(--vmz-action-primary-background);
+}
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-card[data-hoverable="true"] {
+        transition: none;
+    }
+    .vmz-ui-card[data-hoverable="true"]:hover {
+        transform: none;
+    }
+}
+.vmz-ui-card[data-size="small"] {
+    gap: 0.5rem;
+    padding: 0.875rem 1rem;
+}
+
+:where([data-density="compact"]) .vmz-ui-card {
+    gap: var(--vmz-density-compact-gap);
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+}
+
+:where([data-density="dense"]) .vmz-ui-card {
+    gap: var(--vmz-density-dense-gap);
+    padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
+}
+
+.vmz-ui-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.vmz-ui-card__title {
+    margin: 0;
+    font-family: var(--vmz-font-sans, inherit);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-card__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    line-height: 1.45;
+}
+
+.vmz-ui-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-density-control-gap);
+}
+
+/* Direct host default is display:contents (runtime); Badge-only CSS special-case removed. */
+
+:where([data-density="compact"]) .vmz-ui-card__body {
+    gap: var(--vmz-density-compact-gap);
+}
+
+:where([data-density="dense"]) .vmz-ui-card__body {
+    gap: var(--vmz-density-dense-gap);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Card (Commercial Surface).
+ * Surface container; spacing from density.*; chrome from surface/line/text.
+ */
+export default class Card {
+    public title: string = "";
+    public description: string = "";
+    public size: string = "middle";
+    public bordered: boolean = true;
+    public hoverable: boolean = false;
+}
+</script>

package/src/components/Checkbox.vmz

@@ -1,55 +1,55 @@
-<template>
-    <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 {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    font: inherit;
-    cursor: pointer;
-}
-
-.vmz-ui-checkbox__input {
-    width: 1rem;
-    height: 1rem;
-    accent-color: var(--vmz-action-primary-background);
-    outline: none;
-}
-
-.vmz-ui-checkbox__input:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-checkbox__input:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.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).
- * 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 = "";
-    onToggle(ev) {
-        if (this.disabled) return;
-        this.emit("change", !!ev?.target?.checked);
-    }
-}
-</script>
+<template>
+    <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 {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: inherit;
+    cursor: pointer;
+}
+
+.vmz-ui-checkbox__input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--vmz-action-primary-background);
+    outline: none;
+}
+
+.vmz-ui-checkbox__input:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-checkbox__input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.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).
+ * 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 = "";
+    onToggle(ev) {
+        if (this.disabled) return;
+        this.emit("change", !!ev?.target?.checked);
+    }
+}
+</script>

package/src/components/CodeBlock.vmz

@@ -1,10 +1,12 @@
 <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 type="button" variant="text" size="sm" class="vmz-ui-code-block__copy" @click="onCopy">
                 {{ copyLabel }}
             </Button>
         </div>
@@ -20,43 +22,91 @@
     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>
@@ -67,7 +117,16 @@
 export default class CodeBlock {
     public code: string = "";
     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 = "";
     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.onCopy);
+    }
 }
 </script>