@vmz/ui 0.3.7 → 0.3.8

package/src/components/Steps.vmz

@@ -2,7 +2,10 @@
     <ol data-vmz-ui="steps" :aria-label="label" class="vmz-ui-steps">
         <li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current="current === item.id ? 'step' : 'false'" class="vmz-ui-steps__item">
             <span :data-vmz-step-index="item.id" class="vmz-ui-steps__index">
-                {{ item.index }}
+                <Icon v-if="item.status === 'done'" name="action.check" size="md" decorative />
+                <span v-else class="vmz-ui-steps__number">
+                    {{ item.index }}
+                </span>
             </span>
             <span class="vmz-ui-steps__body">
                 <span class="vmz-ui-steps__title">
@@ -22,37 +25,31 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    gap: var(--vmz-density-control-gap);
+    gap: var(--vmz-space-3, 0.75rem);
     max-width: 36rem;
 }
 
 .vmz-ui-steps__item {
     display: flex;
     align-items: flex-start;
-    gap: 0.75rem;
-    color: var(--vmz-text-steel);
-}
-
-.vmz-ui-steps__item[data-status="done"] {
-    color: var(--vmz-status-success-foreground);
-}
-
-.vmz-ui-steps__item[data-status="current"] {
-    color: var(--vmz-action-primary-active);
+    gap: var(--vmz-space-3, 0.75rem);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-steps__index {
     flex: 0 0 auto;
-    min-width: 1.75rem;
-    height: 1.75rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: 999px;
-    font-weight: 700;
-    font-size: 0.85rem;
-    color: inherit;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-pill, 999px);
+    background: var(--vmz-surface-paper);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__index {
@@ -63,23 +60,41 @@
 
 .vmz-ui-steps__item[data-status="done"] .vmz-ui-steps__index {
     border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 18%, transparent);
+    background: var(--vmz-status-success-background);
+    color: var(--vmz-status-success-foreground);
 }
 
 .vmz-ui-steps__body {
     display: flex;
     flex-direction: column;
-    gap: 0.2rem;
+    gap: var(--vmz-space-1, 0.25rem);
     padding-top: 0.125rem;
+    min-width: 0;
 }
 
 .vmz-ui-steps__title {
-    font-weight: 700;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__title {
+    color: var(--vmz-action-primary-active);
 }
 
 .vmz-ui-steps__description {
-    font-size: 0.9em;
-    opacity: 0.9;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--vmz-text-tertiary);
+}
+
+:where([data-density="compact"]) .vmz-ui-steps {
+    gap: var(--vmz-density-compact-gap);
+}
+
+:where([data-density="dense"]) .vmz-ui-steps {
+    gap: var(--vmz-density-dense-gap);
 }
 </style>
 <script client>
@@ -89,7 +104,7 @@
  * Navigation actions stay on the page (no private wizard store).
  */
 export default class Steps {
-    public label: string = "Steps";
+    public label: string = "";
     public current: string = "";
     /** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
     public items: {

package/src/components/Switch.vmz

@@ -1,6 +1,6 @@
 <template>
-    <label data-vmz-ui="switch" :for="controlId" class="vmz-ui-switch">
-        <button :id="controlId" type="button" role="switch" :aria-checked="checked" :aria-describedby="describedBy" :disabled="disabled" @click="toggle" :onKeyDown="onKeyDown" class="vmz-ui-switch__control">
+    <label data-vmz-ui="switch" :for="controlId" :data-disabled="disabled ? 'true' : 'false'" class="vmz-ui-switch">
+        <button :id="controlId" type="button" role="switch" :aria-checked="checked ? 'true' : 'false'" :data-checked="checked ? 'true' : 'false'" :aria-describedby="describedBy" :disabled="disabled" @click="toggle" :onKeyDown="onKeyDown" class="vmz-ui-switch__control">
             <span aria-hidden="true" class="vmz-ui-switch__thumb" />
         </button>
         <span class="vmz-ui-switch__label">
@@ -12,28 +12,50 @@
 .vmz-ui-switch {
     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-switch__control {
     position: relative;
-    width: 2.4rem;
-    height: 1.35rem;
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    width: 2.5rem;
+    height: 1.5rem;
     padding: 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: 999px;
-    background: transparent;
+    border: 0;
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-line-strong);
     cursor: pointer;
     outline: none;
+    transition:
+        background-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-switch__control:hover:not(:disabled):not([aria-checked="true"]) {
+    background: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-switch__control[aria-checked="true"],
-.vmz-ui-switch__control[aria-checked=""] {
+.vmz-ui-switch__control[data-checked="true"] {
     background: var(--vmz-action-primary-background);
 }
 
+.vmz-ui-switch__control[aria-checked="true"]:hover:not(:disabled),
+.vmz-ui-switch__control[data-checked="true"]:hover:not(:disabled) {
+    background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-switch__control:active:not(:disabled)[aria-checked="true"],
+.vmz-ui-switch__control:active:not(:disabled)[data-checked="true"] {
+    background: var(--vmz-action-primary-active);
+}
+
 .vmz-ui-switch__control:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
@@ -45,25 +67,36 @@
 
 .vmz-ui-switch__thumb {
     position: absolute;
-    top: 0.12rem;
-    left: 0.12rem;
+    top: var(--vmz-space-1);
+    left: var(--vmz-space-1);
     width: 1rem;
     height: 1rem;
-    border-radius: 999px;
+    border-radius: var(--vmz-radius-pill);
     background: var(--vmz-action-primary-foreground);
     transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-switch__control[aria-checked="true"] .vmz-ui-switch__thumb,
-.vmz-ui-switch__control[aria-checked=""] .vmz-ui-switch__thumb {
-    transform: translateX(1.05rem);
+.vmz-ui-switch__control[data-checked="true"] .vmz-ui-switch__thumb {
+    transform: translateX(1rem);
 }
 
 .vmz-ui-switch__label {
-    font-weight: 600;
+    font-weight: 400;
+}
+
+.vmz-ui-switch[data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-switch[data-disabled="true"] .vmz-ui-switch__control,
+.vmz-ui-switch[data-disabled="true"] .vmz-ui-switch__label {
+    cursor: not-allowed;
 }
 
 @media (prefers-reduced-motion: reduce) {
+    .vmz-ui-switch__control,
     .vmz-ui-switch__thumb {
         transition: none;
     }

package/src/components/Table.vmz

@@ -3,9 +3,16 @@
         <table class="vmz-ui-table">
             <thead @click="onHeadClick">
                 <tr>
-                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
-                        <button type="button" :data-vmz-sort="col.id" class="vmz-ui-table__sort">
-                            {{ col.title }}
+                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id" :data-align="columnAlign(col)" :aria-sort="sortAria(col.id)">
+                        <button type="button" :data-vmz-sort="col.id" :data-active="col.id === sortKey ? 'true' : 'false'" class="vmz-ui-table__sort">
+                            <span class="vmz-ui-table__title">
+                                {{ col.title }}
+                            </span>
+                            <span class="vmz-ui-table__sort-icon">
+                                <Icon v-if="col.id === sortKey && sortDir === 'asc'" name="action.sort-asc" size="sm" decorative />
+                                <Icon v-else-if="col.id === sortKey && sortDir === 'desc'" name="action.sort-desc" size="sm" decorative />
+                                <Icon v-else name="action.sort" size="sm" decorative />
+                            </span>
                         </button>
                     </th>
                     <th v-if="hasRowAction" scope="col">
@@ -15,7 +22,7 @@
             </thead>
             <tbody @click="onBodyClick">
                 <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
-                    <td v-for="cell in row.cells">
+                    <td v-for="(cell, index) in row.cells" :key="index" :data-align="cellAlign(index, cell)">
                         {{ cell }}
                     </td>
                     <td v-if="hasRowAction">
@@ -24,14 +31,30 @@
                         </button>
                     </td>
                 </tr>
+                <tr v-if="loading" class="vmz-ui-table__state-row">
+                    <td :colspan="columnSpan()" class="vmz-ui-table__state">
+                        <Spinner :label="loadingLabel" />
+                        <span v-if="loadingText" class="vmz-ui-table__state-text">
+                            {{ loadingText }}
+                        </span>
+                    </td>
+                </tr>
+                <tr v-else-if="rows.length === 0" class="vmz-ui-table__state-row">
+                    <td :colspan="columnSpan()" class="vmz-ui-table__state">
+                        <span class="vmz-ui-table__state-text">
+                            {{ emptyText }}
+                        </span>
+                    </td>
+                </tr>
             </tbody>
         </table>
     </div>
 </template>
 <style>
 .vmz-ui-table-wrap {
-    overflow-x: auto;
-    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    width: 100%;
+    overflow: auto;
+    border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-lg, 8px);
     background: var(--vmz-surface-paper);
 }
@@ -41,24 +64,37 @@
     border-collapse: collapse;
     font: inherit;
     font-size: 0.875rem;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-table th,
 .vmz-ui-table td {
-    padding: 0.75rem 1rem;
+    height: 3rem;
+    padding: 0 1rem;
     text-align: left;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
     vertical-align: middle;
+    border: 0;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    white-space: nowrap;
 }
 
-/* Header is structure, not brand: quiet ink on a tinted band. */
 .vmz-ui-table th {
+    height: 2.75rem;
+    font-size: 0.75rem;
     font-weight: 600;
-    font-size: 0.8125rem;
-    letter-spacing: 0.01em;
-    color: var(--vmz-text-steel);
+    color: var(--vmz-text-tertiary);
     background: var(--vmz-surface-mist);
-    white-space: nowrap;
+}
+
+.vmz-ui-table td[data-align="right"],
+.vmz-ui-table th[data-align="right"] {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.vmz-ui-table td[data-align="center"],
+.vmz-ui-table th[data-align="center"] {
+    text-align: center;
 }
 
 .vmz-ui-table tbody tr {
@@ -67,7 +103,7 @@
 }
 
 .vmz-ui-table tbody tr:hover {
-    background: var(--vmz-surface-mist);
+    background: var(--vmz-surface-fill);
 }
 
 .vmz-ui-table tbody tr:last-child td {
@@ -77,41 +113,69 @@
 .vmz-ui-table__sort {
     display: inline-flex;
     align-items: center;
+    justify-content: flex-start;
     gap: 0.25rem;
-    font: inherit;
-    font-weight: 600;
+    width: 100%;
     padding: 0;
     border: 0;
     background: transparent;
     color: inherit;
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
     cursor: pointer;
     outline: none;
     border-radius: var(--vmz-radius-xs, 2px);
 }
 
+.vmz-ui-table th[data-align="right"] .vmz-ui-table__sort {
+    justify-content: flex-end;
+}
+
+.vmz-ui-table th[data-align="center"] .vmz-ui-table__sort {
+    justify-content: center;
+}
+
+.vmz-ui-table__sort:hover {
+    color: var(--vmz-action-primary-background);
+}
+
 .vmz-ui-table__sort:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
+.vmz-ui-table__sort-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-table__sort:hover .vmz-ui-table__sort-icon,
+.vmz-ui-table__sort[data-active="true"] .vmz-ui-table__sort-icon {
+    color: var(--vmz-action-primary-background);
+}
+
 .vmz-ui-table__row-action {
+    height: 2rem;
+    padding: 0 0.5rem;
     font: inherit;
+    font-size: 0.875rem;
     font-weight: 500;
-    padding: 0.25rem 0.625rem;
-    border: 1px solid var(--vmz-line-default);
+    border: 0;
     border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
+    background: transparent;
     color: var(--vmz-action-primary-background);
     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)),
-        border-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-table__row-action:hover:not(:disabled) {
+    background: var(--vmz-action-primary-soft);
     color: var(--vmz-action-primary-hover);
-    border-color: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-table__row-action:focus-visible {
@@ -121,18 +185,37 @@
 .vmz-ui-table__row-action:disabled {
     opacity: 0.55;
     cursor: not-allowed;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-table tbody tr.vmz-ui-table__state-row:hover {
+    background: transparent;
+}
+
+.vmz-ui-table__state {
+    height: 3rem;
+    text-align: center;
+    color: var(--vmz-text-tertiary);
+    white-space: normal;
+}
+
+.vmz-ui-table__state-text {
+    margin-left: 0.5rem;
+    font-size: 0.875rem;
 }
 </style>
 <script client>
 /**
- * VMZ UI — Table (UI5 Console Surface).
+ * VMZ UI — Table (commercial data surface).
  * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
+ * Numeric cells right-align automatically; column `align` overrides.
  */
 export default class Table {
-    /** @type {{ id: string, title: string }[]} */
+    /** @type {{ id: string, title: string, align?: string }[]} */
     public columns: {
         id: string;
         title: string;
+        align?: string;
     }[] = [];
     /** @type {{ id: string, cells: string[] }[]} */
     public rows: {
@@ -141,12 +224,34 @@ export default class Table {
     }[] = [];
     public hasRowAction: boolean = false;
     public rowActionDisabled: boolean = false;
-    public actionTitle: string = "Action";
-    public actionLabel: string = "Open";
+    public actionTitle: string = "";
+    public actionLabel: string = "";
     public sortKey: string = "";
     public sortDir: string = "asc";
+    public loading: boolean = false;
+    public loadingLabel: string = "";
+    public loadingText: string = "";
+    public emptyText: string = "";
     public onRowAction: ((rowId: string) => void) | null = null;
     public onSort: ((columnId: string) => void) | null = null;
+    columnAlign(col) {
+        return col && col.align ? col.align : "left";
+    }
+    cellAlign(index, cell) {
+        const col = (this.columns || [])[index];
+        if (col && col.align) return col.align;
+        const text = String(cell == null ? "" : cell).trim();
+        if (!text) return "left";
+        return /^[-+]?[\d.,%]+$/.test(text) ? "right" : "left";
+    }
+    columnSpan() {
+        const count = (this.columns || []).length + (this.hasRowAction ? 1 : 0);
+        return Math.max(1, count);
+    }
+    sortAria(id) {
+        if (id !== this.sortKey) return null;
+        return this.sortDir === "desc" ? "descending" : "ascending";
+    }
     onBodyClick(ev) {
         const t = ev && ev.target;
         const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;

package/src/components/Tabs.vmz

@@ -14,30 +14,43 @@
 .vmz-ui-tabs {
     display: flex;
     flex-direction: column;
-    gap: 0.625rem;
-    max-width: 36rem;
+    gap: 1rem;
+    width: 100%;
+    min-width: 0;
 }
 
 .vmz-ui-tabs__list {
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    flex-wrap: nowrap;
+    gap: 1.5rem;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    scrollbar-width: thin;
 }
 
 .vmz-ui-tabs__tab {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 400;
-    padding: 0.5rem 0;
-    margin: 0 1rem 0 0;
+    display: inline-flex;
+    align-items: center;
+    height: 2.5rem;
+    padding: 0;
+    margin: 0;
     border: 0;
     border-bottom: 2px solid transparent;
     border-radius: 0;
     background: transparent;
     color: var(--vmz-text-ink);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    white-space: nowrap;
     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));
+}
+
+.vmz-ui-tabs__tab:hover {
+    color: var(--vmz-action-primary-background);
 }
 
 .vmz-ui-tabs__tab[aria-selected="true"] {
@@ -48,7 +61,9 @@
 }
 
 .vmz-ui-tabs__tab:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    outline: 2px solid var(--vmz-action-primary-background);
+    outline-offset: -2px;
+    border-radius: var(--vmz-radius-sm, 4px);
 }
 
 .vmz-ui-tabs__panel {
@@ -62,12 +77,12 @@
 </style>
 <script client>
 /**
- * VMZ UI — Tabs (UI2).
+ * VMZ UI — Tabs.
  * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
  * Panel content is the default slot (page chooses which body to show).
  */
 export default class Tabs {
-    public label: string = "Tabs";
+    public label: string = "";
     public selected: string = "";
     public panelId: string = "";
     /** @type {{ id: string, title: string, controls?: string }[]} */

package/src/components/Tag.vmz

@@ -7,32 +7,49 @@
 .vmz-ui-tag {
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
-    min-height: 1.5rem;
-    padding: 0 0.5rem;
+    gap: var(--vmz-space-1);
+    min-height: var(--vmz-space-5);
+    max-width: 100%;
+    padding: 0 var(--vmz-space-2);
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-sm, 4px);
+    border-radius: var(--vmz-radius-sm);
     background: var(--vmz-surface-mist);
     color: var(--vmz-text-steel);
     font-size: 0.75rem;
     font-weight: 500;
-    line-height: 1;
+    line-height: 1.6667;
     white-space: nowrap;
 }
+
 .vmz-ui-tag[data-status="success"] {
     color: var(--vmz-status-success-foreground);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-success-accent) 45%, var(--vmz-line-default));
+    background: var(--vmz-status-success-background);
+    border-color: var(--vmz-status-success-border);
 }
+
 .vmz-ui-tag[data-status="warning"] {
     color: var(--vmz-status-warning-foreground);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-warning-accent) 45%, var(--vmz-line-default));
+    background: var(--vmz-status-warning-background);
+    border-color: var(--vmz-status-warning-border);
 }
-.vmz-ui-tag[data-status="error"] {
+
+.vmz-ui-tag[data-status="error"],
+.vmz-ui-tag[data-status="danger"] {
     color: var(--vmz-status-danger-foreground);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-danger-accent) 45%, var(--vmz-line-default));
+    background: var(--vmz-status-danger-background);
+    border-color: var(--vmz-status-danger-border);
+}
+
+.vmz-ui-tag[data-status="info"] {
+    color: var(--vmz-status-info-foreground);
+    background: var(--vmz-status-info-background);
+    border-color: var(--vmz-status-info-border);
+}
+
+.vmz-ui-tag[data-status="brand"] {
+    color: var(--vmz-action-primary-active);
+    background: var(--vmz-action-primary-soft);
+    border-color: var(--vmz-action-primary-hover);
 }
 </style>
 <script client>