@vmz/ui 0.3.6 → 0.3.8

package/src/components/Checkbox.vmz

@@ -1,55 +1,131 @@
-<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" :data-disabled="disabled ? 'true' : 'false'" class="vmz-ui-checkbox">
+        <span class="vmz-ui-checkbox__box">
+            <input :id="controlId" type="checkbox" :checked="checked" :disabled="disabled" :aria-describedby="describedBy" @change="onToggle" class="vmz-ui-checkbox__input" />
+            <Icon name="action.check" size="md" decorative class="vmz-ui-checkbox__check" />
+        </span>
+        <span class="vmz-ui-checkbox__label">
+            {{ label }}
+        </span>
+    </label>
+</template>
+<style>
+.vmz-ui-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--vmz-space-2);
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+}
+
+.vmz-ui-checkbox__box {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+}
+
+.vmz-ui-checkbox__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    appearance: none;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-sm);
+    background: var(--vmz-surface-paper);
+    outline: none;
+    cursor: pointer;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-checkbox__input:hover:not(:disabled):not(:checked) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-checkbox__input:checked {
+    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-checkbox__input:checked:hover:not(:disabled) {
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-checkbox__input:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-checkbox__input:disabled {
+    cursor: not-allowed;
+}
+
+.vmz-ui-checkbox__check {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    margin: auto;
+    color: var(--vmz-action-primary-foreground);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-checkbox .vmz-ui-checkbox__box .vmz-ui-checkbox__check {
+    font-size: 0.75rem;
+}
+
+.vmz-ui-checkbox__input:checked + .vmz-ui-checkbox__check {
+    opacity: 1;
+}
+
+.vmz-ui-checkbox[data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-checkbox[data-disabled="true"] .vmz-ui-checkbox__input,
+.vmz-ui-checkbox[data-disabled="true"] .vmz-ui-checkbox__label {
+    cursor: not-allowed;
+}
+
+.vmz-ui-checkbox__label {
+    font-weight: 400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-checkbox__input,
+    .vmz-ui-checkbox__check {
+        transition: none;
+    }
+}
+</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,12 +2,21 @@
     <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">
-                {{ copyLabel }}
+            <Button v-if="canCopy()" type="button" variant="text" size="small" @click="onCopy" class="vmz-ui-code-block__copy">
+                <Icon name="action.copy" size="md" decorative />
+                <span v-if="copyLabel" class="vmz-ui-code-block__copy-text">
+                    {{ copyLabel }}
+                </span>
             </Button>
         </div>
         <pre class="vmz-ui-code-block__pre">
@@ -22,9 +31,8 @@
     margin: 0;
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-lg, 8px);
-    background: var(--vmz-surface-mist);
+    background: var(--vmz-surface-code);
     overflow: hidden;
 }
 
@@ -32,27 +40,27 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2, 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);
+    padding: 0 var(--vmz-space-2, 0.5rem) 0 var(--vmz-space-3, 0.75rem);
+    border-bottom: 1px solid color-mix(in srgb, var(--vmz-text-on-brand) 10%, transparent);
+    background: var(--vmz-surface-graphite);
 }
 
 .vmz-ui-code-block__heading {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2, 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: 1px solid color-mix(in srgb, var(--vmz-text-on-brand) 18%, transparent);
     border-radius: var(--vmz-radius-xs, 2px);
-    background: var(--vmz-surface-mist);
-    color: var(--vmz-text-steel);
+    background: color-mix(in srgb, var(--vmz-text-on-brand) 8%, transparent);
+    color: color-mix(in srgb, var(--vmz-text-on-brand) 72%, transparent);
     font-family: var(--vmz-font-mono);
     font-size: 0.6875rem;
     font-weight: 600;
@@ -63,38 +71,68 @@
 
 .vmz-ui-code-block__caption {
     overflow: hidden;
-    color: var(--vmz-text-steel);
+    color: color-mix(in srgb, var(--vmz-text-on-brand) 72%, transparent);
     font-size: 0.8125rem;
     line-height: 1.5;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-.vmz-ui-code-block__copy {
+.vmz-ui-code-block .vmz-ui-code-block__bar .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));
+    min-height: 1.75rem;
+    padding: 0 var(--vmz-space-2, 0.5rem);
+    gap: var(--vmz-space-1, 0.25rem);
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: color-mix(in srgb, var(--vmz-text-on-brand) 72%, transparent);
+    font-family: var(--vmz-font-sans);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.5;
+    cursor: pointer;
+    outline: none;
+    transition:
+        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-code-block .vmz-ui-code-block__bar .vmz-ui-code-block__copy:hover:not(:disabled) {
+    color: var(--vmz-text-on-brand);
+    background: color-mix(in srgb, var(--vmz-text-on-brand) 12%, transparent);
+}
+
+.vmz-ui-code-block .vmz-ui-code-block__bar .vmz-ui-code-block__copy:active:not(:disabled) {
+    background: color-mix(in srgb, var(--vmz-text-on-brand) 16%, transparent);
+}
+
+.vmz-ui-code-block .vmz-ui-code-block__bar .vmz-ui-code-block__copy:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
-.vmz-ui-code-block:hover .vmz-ui-code-block__copy,
-.vmz-ui-code-block__copy:focus-visible {
-    opacity: 1;
+.vmz-ui-code-block__copy-text {
+    overflow: hidden;
+    max-width: 10rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .vmz-ui-code-block__pre {
     margin: 0;
-    padding: 0.875rem 1rem;
+    padding: var(--vmz-space-4, 1rem) 1.25rem;
     overflow-x: auto;
     overflow-y: auto;
     max-height: 32rem;
+    background: var(--vmz-surface-code);
 }
 
 .vmz-ui-code-block__code {
     display: block;
-    color: var(--vmz-text-ink);
+    color: var(--vmz-text-on-brand);
     font-family: var(--vmz-font-mono);
-    font-size: 0.8125rem;
-    line-height: 1.65;
+    font-size: 0.875rem;
+    line-height: 1.5714;
     white-space: pre;
     tab-size: 2;
 }
@@ -106,27 +144,36 @@
 
 .vmz-ui-code-block__pre::-webkit-scrollbar-thumb {
     border-radius: var(--vmz-radius-pill, 999px);
-    background: var(--vmz-line-default);
+    background: color-mix(in srgb, var(--vmz-text-on-brand) 20%, transparent);
 }
 </style>
 <script client>
 /**
  * VMZ UI — CodeBlock (Document/Product composition).
- * Source is readable in SSR HTML; copy is progressive enhancement via onCopy.
+ * Dark `<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 = "";
-    public copyLabel: string = "Copy";
+    /** Accessible label of the copy control. */
+    public copyLabel: string = "";
     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>

package/src/components/Collapse.vmz

@@ -1,8 +1,11 @@
 <template>
     <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 }}
+        <details v-for="item in items" :key="item.id" :data-vmz-collapse-item="item.id" class="vmz-ui-collapse__item">
+            <summary :data-vmz-collapse-trigger="item.id" class="vmz-ui-collapse__trigger">
+                <span class="vmz-ui-collapse__title">
+                    {{ item.title }}
+                </span>
+                <Icon name="action.chevron-down" size="sm" decorative />
             </summary>
             <div :data-vmz-collapse-body="item.id" class="vmz-ui-collapse__body">
                 {{ item.body }}
@@ -12,27 +15,77 @@
 </template>
 <style>
 .vmz-ui-collapse {
+    box-sizing: border-box;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-lg, 8px);
+    border-radius: var(--vmz-radius-lg);
     background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
     overflow: hidden;
 }
-.vmz-ui-collapse details + details {
-    border-top: 1px solid var(--vmz-line-default);
+
+.vmz-ui-collapse__item + .vmz-ui-collapse__item {
+    border-top: 1px solid var(--vmz-line-subtle);
 }
-.vmz-ui-collapse summary {
-    padding: 0.85rem 1rem;
+
+.vmz-ui-collapse__trigger {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 40px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    font-size: 14px;
     font-weight: 600;
+    line-height: 22px;
+    list-style: none;
     cursor: pointer;
     background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    outline: none;
+    transition: background-color var(--vmz-motion-control-duration)
+        var(--vmz-motion-control-easing);
 }
-.vmz-ui-collapse summary:hover {
+
+.vmz-ui-collapse summary::-webkit-details-marker {
+    display: none;
+}
+
+.vmz-ui-collapse__trigger:hover {
     background: var(--vmz-surface-mist);
 }
+
+.vmz-ui-collapse__trigger:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-collapse__title {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.vmz-ui-collapse__trigger .vmz-ui-icon {
+    flex: 0 0 auto;
+    color: var(--vmz-text-tertiary);
+    transition: transform var(--vmz-motion-control-duration)
+        var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-collapse__item[open] > .vmz-ui-collapse__trigger .vmz-ui-icon {
+    transform: rotate(180deg);
+}
+
 .vmz-ui-collapse__body {
-    padding: 0 1rem 1rem;
+    padding: 0 16px 16px;
+    font-size: 14px;
+    line-height: 26px;
     color: var(--vmz-text-steel);
-    line-height: 1.6;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-collapse__trigger,
+    .vmz-ui-collapse__trigger .vmz-ui-icon {
+        transition: none;
+    }
 }
 </style>
 <script client>