@vmz/ui 0.3.7 → 0.3.8

package/src/components/Breadcrumb.vmz

@@ -1,13 +1,16 @@
 <template>
     <nav data-vmz-ui="breadcrumb" :aria-label="label" class="vmz-ui-breadcrumb">
         <ol class="vmz-ui-breadcrumb__list">
-            <li v-for="item in items" :key="item.id" :data-vmz-crumb="item.id" class="vmz-ui-breadcrumb__item">
+            <li v-for="(item, index) in items" :key="item.id" :data-vmz-crumb="item.id" class="vmz-ui-breadcrumb__item">
                 <a v-if="item.href" :href="item.href" class="vmz-ui-breadcrumb__link">
                     {{ item.title }}
                 </a>
                 <span v-if="!item.href" aria-current="page" class="vmz-ui-breadcrumb__current">
                     {{ item.title }}
                 </span>
+                <span v-if="index < items.length - 1" aria-hidden="true" class="vmz-ui-breadcrumb__sep">
+                    <Icon name="action.chevron-right" size="xs" decorative />
+                </span>
             </li>
         </ol>
     </nav>
@@ -15,12 +18,14 @@
 <style>
 .vmz-ui-breadcrumb {
     font: inherit;
+    font-size: 0.875rem;
+    color: var(--vmz-text-steel);
 }
 
 .vmz-ui-breadcrumb__list {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.375rem 0.5rem;
+    gap: 0.25rem;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -30,20 +35,20 @@
 .vmz-ui-breadcrumb__item {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
-    font-weight: 600;
+    gap: 0.25rem;
+    min-width: 0;
 }
 
-.vmz-ui-breadcrumb__item:not(:last-child)::after {
-    content: "/";
-    color: var(--vmz-action-primary-active);
-    opacity: 0.55;
-    font-weight: 400;
+.vmz-ui-breadcrumb__link {
+    color: var(--vmz-text-steel);
+    text-decoration: none;
+    border-radius: var(--vmz-radius-xs, 2px);
+    transition: color var(--vmz-motion-control-duration, 150ms)
+        var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
-.vmz-ui-breadcrumb__link {
+.vmz-ui-breadcrumb__link:hover {
     color: var(--vmz-action-primary-background);
-    text-decoration: none;
 }
 
 .vmz-ui-breadcrumb__link:focus-visible {
@@ -52,16 +57,25 @@
 }
 
 .vmz-ui-breadcrumb__current {
-    color: var(--vmz-action-primary-active);
+    color: var(--vmz-text-ink);
+    font-weight: 500;
+}
+
+.vmz-ui-breadcrumb__sep {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.75rem;
+    color: var(--vmz-text-tertiary);
 }
 </style>
 <script client>
 /**
- * VMZ UI — Breadcrumb (UI5 Console Surface).
+ * VMZ UI — Breadcrumb (commercial path).
  * Parent owns items; last crumb typically has no href (current page).
+ * Separators use the shared chevron-right Icon (no CSS pseudo-elements).
  */
 export default class Breadcrumb {
-    public label: string = "Breadcrumb";
+    public label: string = "";
     /** @type {{ id: string, title: string, href?: string }[]} */
     public items: {
         id: string;

package/src/components/BulkActions.vmz

@@ -14,11 +14,12 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 0.625rem 1rem;
-    padding: 0.625rem 0.85rem;
-    border: 1px solid var(--vmz-line-default);
+    gap: 0.5rem 1rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--vmz-action-primary-background);
     border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
+    background: var(--vmz-action-primary-soft);
+    color: var(--vmz-text-ink);
 }
 
 /* Keep host+slot mounted so default slot projects at create time (not inside v-if). */
@@ -28,23 +29,27 @@
 
 .vmz-ui-bulk-actions__count {
     margin: 0;
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-bulk-actions__actions {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     gap: 0.5rem;
+    margin-left: auto;
 }
 </style>
 <script client>
 /**
- * VMZ UI — BulkActions (Console composition).
+ * VMZ UI — BulkActions (selection toolbar).
  * Hides when selectedCount is falsy but keeps the tree mounted so parent slot children project.
+ * Count copy is parent-owned via `count-label`.
  */
 export default class BulkActions {
-    public label: string = "Bulk actions";
+    public label: string = "";
     public selectedCount: number = 0;
     public countLabel: string = "";
 }

package/src/components/Button.vmz

@@ -1,9 +1,9 @@
 <template>
-    <a v-if="href" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :href="href" :target="target" :rel="rel" @click="onDomClick" class="vmz-ui-btn">
+    <a v-if="href" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :href="href" :target="target" :rel="rel" :aria-busy="loading ? 'true' : 'false'" @click="onDomClick" class="vmz-ui-btn">
         <span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
         <slot />
     </a>
-    <button v-else :type="type" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :data-loading="loading ? 'true' : 'false'" :disabled="disabled" :aria-busy="loading ? 'true' : 'false'" :aria-haspopup="ariaHaspopup" :aria-controls="ariaControls" @click="onDomClick" class="vmz-ui-btn">
+    <button v-else :type="type" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block="block ? 'true' : 'false'" :data-loading="loading ? 'true' : 'false'" :disabled="disabled" :aria-busy="loading ? 'true' : 'false'" :aria-haspopup="ariaHaspopup" :aria-controls="ariaControls" :aria-expanded="ariaExpanded ? ariaExpanded : null" @click="onDomClick" class="vmz-ui-btn">
         <span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
         <slot />
     </button>
@@ -13,13 +13,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.375rem;
+    gap: var(--vmz-space-2);
     /* Inline control: never stretch when the parent is a flex column (shells, card bodies). */
     width: fit-content;
-    min-height: var(--vmz-control-height, 2rem);
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border: 1px solid transparent;
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-md);
     font: inherit;
     font-size: 0.875rem;
     font-weight: 500;
@@ -29,39 +30,46 @@
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
     outline: none;
-    box-shadow: 0 2px 0 color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
+    box-shadow: none;
     transition:
-        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        border-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        box-shadow var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        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-btn[data-size="small"] {
-    min-height: var(--vmz-control-height-sm, 1.5rem);
-    padding: 0 0.625rem;
-    font-size: 0.8125rem;
+    min-height: var(--vmz-control-height-sm);
+    padding: 0 var(--vmz-space-3);
+    font-size: 0.875rem;
 }
+
 .vmz-ui-btn[data-size="large"] {
-    min-height: var(--vmz-control-height-lg, 2.5rem);
-    padding: 0.4375rem 1.125rem;
-    font-size: 1rem;
+    min-height: var(--vmz-control-height-lg);
+    padding: var(--vmz-density-control-padding-y) var(--vmz-space-4);
+    font-size: 0.875rem;
 }
+
 .vmz-ui-btn[data-block="true"] {
     width: 100%;
 }
+
 .vmz-ui-btn[data-loading="true"] {
     cursor: wait;
 }
+
 .vmz-ui-btn__spinner {
+    flex: 0 0 auto;
     width: 1em;
     height: 1em;
     border: 1.5px solid currentColor;
     border-right-color: transparent;
-    border-radius: 50%;
-    opacity: 0.8;
+    border-radius: var(--vmz-radius-pill);
+    color: currentColor;
+    opacity: 0.9;
     animation: vmz-btn-spin 0.7s linear infinite;
 }
+
 @keyframes vmz-btn-spin {
     to {
         transform: rotate(360deg);
@@ -74,49 +82,73 @@
 
 .vmz-ui-btn:active:not(:disabled) {
     background: var(--vmz-action-primary-active);
-    transform: translateY(0.5px);
 }
 
 .vmz-ui-btn[data-variant="secondary"] {
     background: var(--vmz-action-secondary-background);
     color: var(--vmz-action-secondary-foreground);
     border-color: var(--vmz-action-secondary-border);
-    box-shadow: none;
 }
+
 .vmz-ui-btn[data-variant="default"] {
-    background: var(--vmz-surface-paper);
+    background: var(--vmz-action-secondary-background);
     color: var(--vmz-text-ink);
     border-color: var(--vmz-line-default);
-    box-shadow: none;
 }
+
 .vmz-ui-btn[data-variant="default"]:hover:not(:disabled) {
     color: var(--vmz-action-primary-hover);
     border-color: var(--vmz-action-primary-hover);
-    background: var(--vmz-surface-paper);
+    background: var(--vmz-action-secondary-background);
+}
+
+.vmz-ui-btn[data-variant="default"]:active:not(:disabled) {
+    color: var(--vmz-action-primary-active);
+    border-color: var(--vmz-action-primary-active);
+    background: var(--vmz-action-secondary-active);
 }
+
 .vmz-ui-btn[data-variant="text"],
 .vmz-ui-btn[data-variant="link"] {
     min-height: auto;
-    padding: 0.25rem 0.5rem;
+    padding: var(--vmz-space-1) var(--vmz-space-2);
     border-color: transparent;
     background: transparent;
-    color: var(--vmz-action-primary-background);
-    box-shadow: none;
+    color: var(--vmz-action-link-foreground);
+}
+
+.vmz-ui-btn[data-variant="text"]:hover:not(:disabled),
+.vmz-ui-btn[data-variant="link"]:hover:not(:disabled) {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-action-link-hover);
 }
+
+.vmz-ui-btn[data-variant="text"]:active:not(:disabled),
+.vmz-ui-btn[data-variant="link"]:active:not(:disabled) {
+    background: var(--vmz-surface-fill);
+}
+
 .vmz-ui-btn[data-variant="dashed"] {
-    background: var(--vmz-surface-paper);
+    background: var(--vmz-action-secondary-background);
     color: var(--vmz-text-ink);
     border: 1px dashed var(--vmz-line-default);
-    box-shadow: none;
+}
+
+.vmz-ui-btn[data-variant="dashed"]:hover:not(:disabled) {
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-btn[data-variant="secondary"]:hover:not(:disabled) {
     background: var(--vmz-action-secondary-hover);
+    border-color: var(--vmz-action-primary-hover);
+    color: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-btn[data-variant="secondary"]:active:not(:disabled) {
-    background: var(--vmz-action-secondary-hover);
+    background: var(--vmz-action-secondary-active);
     border-color: var(--vmz-action-primary-active);
+    color: var(--vmz-action-primary-active);
 }
 
 .vmz-ui-btn[data-variant="ghost"] {
@@ -126,11 +158,11 @@
 }
 
 .vmz-ui-btn[data-variant="ghost"]:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
+    background: var(--vmz-surface-mist);
 }
 
 .vmz-ui-btn[data-variant="ghost"]:active:not(:disabled) {
-    background: var(--vmz-surface-mist);
+    background: var(--vmz-surface-fill);
 }
 
 .vmz-ui-btn[data-variant="danger"] {
@@ -140,7 +172,7 @@
 }
 
 .vmz-ui-btn[data-variant="danger"]:hover:not(:disabled) {
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 82%, var(--vmz-text-ink));
+    background: var(--vmz-status-danger-foreground);
 }
 
 .vmz-ui-btn[data-variant="danger"]:active:not(:disabled) {
@@ -151,15 +183,6 @@
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
-.vmz-ui-btn[data-variant="default"]:focus-visible,
-.vmz-ui-btn[data-variant="dashed"]:focus-visible,
-.vmz-ui-btn[data-variant="secondary"]:focus-visible,
-.vmz-ui-btn[data-variant="ghost"]:focus-visible,
-.vmz-ui-btn[data-variant="text"]:focus-visible,
-.vmz-ui-btn[data-variant="link"]:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
 .vmz-ui-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
@@ -179,8 +202,8 @@
     .vmz-ui-btn {
         transition: none;
     }
-    .vmz-ui-btn:active:not(:disabled) {
-        transform: none;
+    .vmz-ui-btn__spinner {
+        animation-duration: 1.4s;
     }
 }
 </style>
@@ -188,7 +211,7 @@
 /**
  * VMZ UI — Button (variants + motion control feedback).
  * Colors / motion come only from Style Theme semantic tokens — never brand hex.
- * Variants: primary | secondary | ghost | danger
+ * Variants: primary | secondary | default | dashed | ghost | text | link | danger
  */
 export default class Button {
     /** @type {'contents'} Direct host: no layout box (`ui-direct-host-box`). */
@@ -204,6 +227,7 @@ export default class Button {
     public rel: string = "";
     public ariaHaspopup: string = "";
     public ariaControls: string = "";
+    public ariaExpanded: string = "";
     public onClick: ((e: Event) => void) | null = null;
     onDomClick(e: Event) {
         this.emit("click", e);

package/src/components/Callout.vmz

@@ -1,77 +1,178 @@
 <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 />
+        <span aria-hidden="true" class="vmz-ui-callout__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-callout__content">
+            <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>
         </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-callout__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
     </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));
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem);
+    border: 1px solid var(--vmz-status-info-border, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-status-info-background, 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));
+    border-color: var(--vmz-status-info-border, var(--vmz-line-default));
+    background: var(--vmz-status-info-background, 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));
+    border-color: var(--vmz-status-success-border, var(--vmz-line-default));
+    background: var(--vmz-status-success-background, 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));
+    border-color: var(--vmz-status-warning-border, var(--vmz-line-default));
+    background: var(--vmz-status-warning-background, 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));
+    border-color: var(--vmz-status-danger-border, var(--vmz-line-default));
+    background: var(--vmz-status-danger-background, var(--vmz-surface-paper));
     color: var(--vmz-status-danger-foreground);
 }
 
+.vmz-ui-callout[data-tone="info"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-callout[data-tone="success"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-callout[data-tone="warning"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-callout[data-tone="danger"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-callout__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-callout__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
+}
+
 .vmz-ui-callout__title {
     margin: 0;
-    font-family: var(--vmz-font-display);
-    font-weight: 700;
+    font-family: var(--vmz-font-display, inherit);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: inherit;
 }
 
 .vmz-ui-callout__description {
     margin: 0;
-    line-height: 1.5;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-callout__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2, 0.5rem);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-callout__body:empty {
     display: none;
 }
+
+.vmz-ui-callout__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-callout__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-callout__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+:where([data-density="compact"]) .vmz-ui-callout {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-callout {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Callout (Document/Product composition).
- * Inline guidance block for prose; shares status.* tones with Alert.
+ * Inline guidance block for prose; shares status.{accent|foreground|background|border} tones with Alert.
  */
 export default class Callout {
     public title: string = "";
     public description: string = "";
     public tone: string = "info";
     public roleName: string = "note";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public onClose: (() => void) | null = null;
+
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
 }
 </script>