@vmz/ui 0.3.7 → 0.3.9

package/src/components/Card.vmz

@@ -1,7 +1,7 @@
 <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">
+        <header v-if="title || description" class="vmz-ui-card__header">
+            <h2 v-if="title" class="vmz-ui-card__title">
                 {{ title }}
             </h2>
             <p v-if="description" class="vmz-ui-card__description">
@@ -11,108 +11,129 @@
         <div class="vmz-ui-card__body">
             <slot />
         </div>
+        <footer v-if="footer" class="vmz-ui-card__footer">
+            {{ footer }}
+        </footer>
     </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));
+    box-sizing: border-box;
+    height: 100%;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
     border-radius: var(--vmz-radius-lg, 8px);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
-    box-shadow: var(--vmz-shadow-card, none);
+    font-family: var(--vmz-font-sans, inherit);
+    box-shadow: 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));
+    transition: border-color var(--vmz-motion-control-duration, 120ms)
+        var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 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);
+    border-color: var(--vmz-line-strong);
 }
+
 .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);
+.vmz-ui-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-5, 1.5rem);
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
 }
 
-: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__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: var(--vmz-space-3, 0.75rem);
+    padding: var(--vmz-space-5, 1.5rem);
 }
 
-.vmz-ui-card__header {
+.vmz-ui-card__footer {
     display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
+    align-items: center;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem) var(--vmz-space-5, 1.5rem);
+    border-top: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-card[data-size="small"] .vmz-ui-card__header,
+.vmz-ui-card[data-size="small"] .vmz-ui-card__body {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+}
+
+.vmz-ui-card[data-size="small"] .vmz-ui-card__footer {
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
 }
 
 .vmz-ui-card__title {
     margin: 0;
-    font-family: var(--vmz-font-sans, inherit);
+    font-family: var(--vmz-font-display, var(--vmz-font-sans, inherit));
     font-size: 1rem;
     font-weight: 600;
+    line-height: 1.4;
     color: var(--vmz-text-ink);
 }
 
 .vmz-ui-card__description {
     margin: 0;
-    color: var(--vmz-text-steel);
-    line-height: 1.45;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-tertiary);
 }
 
-.vmz-ui-card__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--vmz-density-control-gap);
+:where([data-density="compact"]) .vmz-ui-card__header,
+:where([data-density="compact"]) .vmz-ui-card__body {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
 }
 
-/* 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="compact"]) .vmz-ui-card__footer {
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
 }
 
+:where([data-density="dense"]) .vmz-ui-card__header,
 :where([data-density="dense"]) .vmz-ui-card__body {
-    gap: var(--vmz-density-dense-gap);
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-card__footer {
+    padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-3, 0.75rem);
 }
 </style>
 <script client>
 /**
  * VMZ UI — Card (Commercial Surface).
- * Surface container; spacing from density.*; chrome from surface/line/text.
+ * Surface container: paper + 1px line + radius.lg; spacing from space/density tokens.
  */
 export default class Card {
     public title: string = "";
     public description: string = "";
+    public footer: string = "";
     public size: string = "middle";
     public bordered: boolean = true;
     public hoverable: boolean = false;

package/src/components/Checkbox.vmz

@@ -1,6 +1,9 @@
 <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" />
+    <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>
@@ -10,16 +13,54 @@
 .vmz-ui-checkbox {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    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;
-    accent-color: var(--vmz-action-primary-background);
+    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 {
@@ -27,12 +68,47 @@
 }
 
 .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: 600;
+    font-weight: 400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-checkbox__input,
+    .vmz-ui-checkbox__check {
+        transition: none;
+    }
 }
 </style>
 <script client>

package/src/components/CodeBlock.vmz

@@ -12,8 +12,11 @@
                     {{ caption }}
                 </span>
             </div>
-            <Button v-if="canCopy()" type="button" variant="text" size="sm" @click="onCopy" class="vmz-ui-code-block__copy">
-                {{ 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">
@@ -28,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;
 }
 
@@ -38,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;
@@ -69,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:hover .vmz-ui-code-block__copy,
-.vmz-ui-code-block__copy:focus-visible {
-    opacity: 1;
+.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__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;
 }
@@ -112,13 +144,13 @@
 
 .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).
- * Readable `<pre><code>` shell: no syntax highlighting (use `<Shiki>` / `<Code>`).
+ * 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.
  */
@@ -130,8 +162,8 @@ export default class CodeBlock {
     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";
+    /** 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. */

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>