@vmz/ui 0.3.6 → 0.3.7

package/src/components/Card.vmz

@@ -1,120 +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: 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>
+<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.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>
+<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

@@ -2,11 +2,17 @@
     <figure data-vmz-ui="code-block" class="vmz-ui-code-block">
         <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>
+                <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">
+            <Button v-if="canCopy()" type="button" variant="text" size="sm" @click="onCopy" class="vmz-ui-code-block__copy">
                 {{ copyLabel }}
             </Button>
         </div>
@@ -112,21 +118,30 @@
 <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.onCopy);
+        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>