@vmz/ui 0.3.7 → 0.3.9

package/src/components/TextArea.vmz

@@ -3,7 +3,7 @@
         <label v-if="label" :for="controlId" class="vmz-ui-textarea__label">
             {{ label }}
         </label>
-        <textarea :id="controlId" :rows="rows" :value="value" :disabled="disabled" :readonly="readonly" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-textarea__control" />
+        <textarea :id="controlId" :rows="rows" :value="value" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-textarea__control" />
         <p v-if="description" :id="descriptionId" class="vmz-ui-textarea__description">
             {{ description }}
         </p>
@@ -16,7 +16,7 @@
 .vmz-ui-textarea {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2);
     max-width: none;
     width: 100%;
 }
@@ -25,32 +25,31 @@
     font: inherit;
     font-weight: 500;
     font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-textarea__control {
     box-sizing: border-box;
     width: 100%;
-    font-family: var(--vmz-font-sans, inherit);
+    font-family: inherit;
     font-size: 0.875rem;
     line-height: 1.5715;
-    min-height: 5.5rem;
-    padding: var(--vmz-density-control-padding-y, 0.25rem)
-        var(--vmz-density-control-padding-x, 0.75rem);
-    border: 1px solid var(--vmz-line-default, #d9d9d9);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink, inherit);
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
     outline: none;
     resize: vertical;
     transition:
-        border-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));
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-textarea__control::placeholder {
-    color: var(--vmz-text-steel, #8c8c8c);
+    color: var(--vmz-text-tertiary);
     opacity: 1;
 }
 
@@ -58,8 +57,13 @@
     border-color: var(--vmz-status-danger-accent);
 }
 
+.vmz-ui-textarea[data-invalid="true"] .vmz-ui-textarea__control:hover:not(:disabled),
+.vmz-ui-textarea[data-invalid="true"] .vmz-ui-textarea__control:focus-visible {
+    border-color: var(--vmz-status-danger-foreground);
+}
+
 .vmz-ui-textarea__control:hover:not(:disabled):not(:focus-visible) {
-    border-color: var(--vmz-action-primary-background);
+    border-color: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-textarea__control:focus-visible {
@@ -67,28 +71,30 @@
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
-.vmz-ui-textarea__control:disabled,
-.vmz-ui-textarea__control:read-only {
-    cursor: default;
-    background: var(--vmz-surface-mist, #fafafa);
-}
-
 .vmz-ui-textarea__control:disabled {
+    opacity: 0.6;
+    color: var(--vmz-text-muted);
     cursor: not-allowed;
-    opacity: 0.55;
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-textarea__control:read-only {
+    cursor: default;
+    background: var(--vmz-surface-mist);
 }
 
 .vmz-ui-textarea__description {
     margin: 0;
-    color: var(--vmz-text-steel, #8c8c8c);
+    color: var(--vmz-text-steel);
     font-size: 0.875rem;
-    line-height: 1.4;
+    line-height: 1.5715;
 }
 
 .vmz-ui-textarea__error {
     margin: 0;
     color: var(--vmz-status-danger-foreground);
     font-size: 0.875rem;
+    line-height: 1.5715;
 }
 </style>
 <script client>
@@ -101,6 +107,7 @@ export default class TextArea {
     public description: string = "";
     public error: string = "";
     public value: string = "";
+    public placeholder: string = "";
     public rows: number = 4;
     public disabled: boolean = false;
     public readonly: boolean = false;

package/src/components/Timeline.vmz

@@ -1,15 +1,18 @@
 <template>
     <ol data-vmz-ui="timeline" :aria-label="label" class="vmz-ui-timeline">
         <li v-for="item in items" :key="item.id" :data-vmz-audit="item.id" class="vmz-ui-timeline__item">
-            <p class="vmz-ui-timeline__time">
-                {{ item.time }}
-            </p>
-            <p class="vmz-ui-timeline__title">
-                {{ item.title }}
-            </p>
-            <p v-if="item.detail" class="vmz-ui-timeline__detail">
-                {{ item.detail }}
-            </p>
+            <span aria-hidden="true" class="vmz-ui-timeline__marker" />
+            <div class="vmz-ui-timeline__content">
+                <p class="vmz-ui-timeline__time">
+                    {{ item.time }}
+                </p>
+                <p class="vmz-ui-timeline__title">
+                    {{ item.title }}
+                </p>
+                <p v-if="item.detail" class="vmz-ui-timeline__detail">
+                    {{ item.detail }}
+                </p>
+            </div>
         </li>
     </ol>
 </template>
@@ -20,42 +23,74 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    gap: var(--vmz-density-compact-gap);
-    border-left: 2px solid var(--vmz-line-default);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-timeline__item {
-    position: relative;
-    padding: 0.125rem 0 0.125rem 0.85rem;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vmz-space-3, 0.75rem);
+    padding: var(--vmz-space-3, 0.75rem) 0;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
 }
 
-.vmz-ui-timeline__item::before {
-    content: "";
-    position: absolute;
-    left: -0.35rem;
-    top: 0.45rem;
-    width: 0.55rem;
-    height: 0.55rem;
-    border-radius: 999px;
+.vmz-ui-timeline__item:first-child {
+    padding-top: 0;
+}
+
+.vmz-ui-timeline__item:last-child {
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.vmz-ui-timeline__marker {
+    flex: 0 0 auto;
+    width: 0.5rem;
+    height: 0.5rem;
+    margin-top: 0.45rem;
+    border-radius: var(--vmz-radius-pill, 999px);
     background: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 3px var(--vmz-action-primary-soft, var(--vmz-surface-mist));
+}
+
+.vmz-ui-timeline__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
 }
 
 .vmz-ui-timeline__time {
     margin: 0;
-    font-size: 0.85em;
-    opacity: 0.75;
-    color: var(--vmz-action-primary-active);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-timeline__title {
-    margin: 0.125rem 0 0;
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-timeline__detail {
-    margin: 0.2rem 0 0;
-    opacity: 0.9;
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-steel);
+}
+
+:where([data-density="compact"]) .vmz-ui-timeline__item {
+    gap: var(--vmz-density-compact-gap);
+    padding-block: var(--vmz-density-compact-gap);
+}
+
+:where([data-density="dense"]) .vmz-ui-timeline__item {
+    gap: var(--vmz-density-dense-gap);
+    padding-block: var(--vmz-density-dense-gap);
 }
 </style>
 <script client>
@@ -64,7 +99,7 @@
  * Parent owns audit items; stable ids for list identity.
  */
 export default class Timeline {
-    public label: string = "Audit";
+    public label: string = "";
     /** @type {{ id: string, time: string, title: string, detail?: string }[]} */
     public items: {
         id: string;

package/src/components/Toc.vmz

@@ -1,10 +1,10 @@
 <template>
-    <aside data-vmz-ui="toc" :aria-label="label" class="vmz-ui-toc">
-        <p class="vmz-ui-toc__title">
+    <aside data-vmz-ui="toc" :aria-label="label ? label : null" class="vmz-ui-toc">
+        <p v-if="label" class="vmz-ui-toc__title">
             {{ label }}
         </p>
         <nav class="vmz-ui-toc__nav">
-            <a v-for="item in items" :key="item.id" :href="item.href" :data-vmz-toc="item.id" class="vmz-ui-toc__link">
+            <a v-for="item in items" :key="item.id" :href="item.href" :data-vmz-toc="item.id" :data-level="item.level ? item.level : 1" :data-active="item.id === activeId ? 'true' : null" :aria-current="item.id === activeId ? 'location' : null" class="vmz-ui-toc__link">
                 {{ item.title }}
             </a>
         </nav>
@@ -12,63 +12,79 @@
 </template>
 <style>
 .vmz-ui-toc {
+    position: sticky;
+    top: 5rem;
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
-    min-width: 11rem;
-    padding: 0.85rem 0.75rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-mist);
+    gap: var(--vmz-space-2, 0.5rem);
+    min-width: 0;
+    max-height: calc(100dvh - 6rem);
+    overflow-y: auto;
     color: var(--vmz-text-ink);
 }
-
 .vmz-ui-toc__title {
     margin: 0;
-    font-family: var(--vmz-font-display);
-    font-size: 0.8rem;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--vmz-text-steel);
+    padding: 0 var(--vmz-space-3, 0.75rem);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.25rem;
 }
-
 .vmz-ui-toc__nav {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
 }
-
 .vmz-ui-toc__link {
-    font: inherit;
-    font-weight: 600;
-    font-size: 0.92rem;
+    display: block;
+    padding: 0.375rem var(--vmz-space-3, 0.75rem);
+    border-left: 2px solid transparent;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
     text-decoration: none;
-    color: var(--vmz-action-primary-active);
     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));
 }
-
 .vmz-ui-toc__link:hover {
     color: var(--vmz-action-primary-background);
 }
-
+.vmz-ui-toc__link[data-active="true"] {
+    color: var(--vmz-action-primary-background);
+    font-weight: 500;
+    border-left-color: var(--vmz-action-primary-background);
+}
+.vmz-ui-toc__link[data-level="2"] {
+    padding-left: var(--vmz-space-5, 1.5rem);
+}
+.vmz-ui-toc__link[data-level="3"] {
+    padding-left: 2.25rem;
+}
+.vmz-ui-toc__link[data-level="4"] {
+    padding-left: 3rem;
+}
 .vmz-ui-toc__link:focus-visible {
+    border-radius: var(--vmz-radius-sm, 4px);
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-    border-radius: var(--vmz-radius-md, 6px);
 }
 </style>
 <script client>
 /**
  * VMZ UI — Toc (Document/Product composition).
- * In-page outline; parent supplies items. Readable without JS.
+ * Sticky in-page outline; parent supplies items and the current anchor.
+ * Readable without JS.
  */
 export default class Toc {
-    public label: string = "On this page";
-    /** @type {{ id: string, title: string, href: string }[]} */
+    public label: string = "";
+    public activeId: string = "";
+    /** @type {{ id: string, title: string, href: string, level?: number }[]} */
     public items: {
         id: string;
         title: string;
         href: string;
+        level?: number;
     }[] = [];
 }
 </script>

package/src/components/Tooltip.vmz

@@ -4,50 +4,99 @@
             <slot />
         </div>
         <div v-if="open" role="tooltip" :id="tooltipId" data-vmz-tooltip="bubble" class="vmz-ui-tooltip__bubble">
+            <span aria-hidden="true" data-vmz-tooltip="arrow" class="vmz-ui-tooltip__arrow" />
             {{ content }}
         </div>
     </div>
 </template>
 <style>
 .vmz-ui-tooltip {
-    position: relative;
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.375rem;
-    max-width: 28rem;
+    gap: 6px;
 }
 
 .vmz-ui-tooltip__trigger {
     display: inline-flex;
     align-items: center;
-    gap: 0.375rem;
+    min-height: var(--vmz-control-height, 32px);
+    border-radius: var(--vmz-radius-sm);
+}
+
+.vmz-ui-tooltip__trigger :where(button, a, [tabindex]):focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-tooltip__bubble {
-    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
     max-width: 18rem;
-    padding: 0.375rem 0.625rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-    font-size: 0.88rem;
-    line-height: 1.4;
-    box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 70%, transparent);
-}
-
-.vmz-ui-tooltip[data-open="true"]
-    .vmz-ui-tooltip__trigger
-    :where(button, a, [tabindex]):focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    padding: 6px 10px;
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-ink);
+    color: var(--vmz-text-on-ink);
+    font-size: 14px;
+    line-height: 22px;
+    box-shadow: var(--vmz-shadow-popup);
+    animation: vmz-ui-tooltip-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-tooltip__arrow {
+    position: absolute;
+    top: -4px;
+    left: 14px;
+    width: 8px;
+    height: 8px;
+    border-radius: 1px 0 0 0;
+    background: var(--vmz-surface-ink);
+    transform: rotate(45deg);
+}
+
+.vmz-ui-tooltip__bubble :where(a) {
+    color: inherit;
+    text-decoration: underline;
+}
+
+@keyframes vmz-ui-tooltip-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-contrast: more) {
+    .vmz-ui-tooltip__bubble {
+        border: 1px solid var(--vmz-line-default);
+        background: var(--vmz-surface-paper);
+        color: var(--vmz-text-ink);
+    }
+
+    .vmz-ui-tooltip__arrow {
+        border-top: 1px solid var(--vmz-line-default);
+        border-left: 1px solid var(--vmz-line-default);
+        background: var(--vmz-surface-paper);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-tooltip__bubble {
+        animation: none;
+    }
 }
 </style>
 <script client>
 /**
- * VMZ UI — Tooltip.
- * Parent owns live `open` + content string. Not a second overlay runtime;
+ * VMZ UI — Tooltip (UI1).
+ * Hover/focus-visible adoption + tooltipId/aria-describedby on the trigger.
  * Escape/outside policies stay with richer Popover/Dialog when needed.
+ * The parent owns live `open`; `openAttr` mirrors it for CSS and automation.
  */
 export default class Tooltip {
     public open: boolean = false;

package/src/components/Tree.vmz

@@ -4,9 +4,9 @@
             {{ label }}
         </p>
         <ul role="tree" :aria-labelledby="labelId" :aria-label="label" @click="onTreeClick" :onKeyDown="onTreeKeyDown" class="vmz-ui-tree__items">
-            <li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="item.padStyle">
+            <li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="rowStyle(item)">
                 <button v-if="item.expandable" type="button" :data-vmz-tree-twist="item.id" :aria-label="item.twistLabel" tabindex="-1" class="vmz-ui-tree__twist">
-                    {{ item.expanded ? '−' : '+' }}
+                    <Icon :name="item.expanded ? 'action.chevron-down' : 'action.chevron-right'" size="sm" decorative />
                 </button>
                 <span v-if="!item.expandable" aria-hidden="true" class="vmz-ui-tree__twist-spacer" />
                 <span :data-vmz-tree-title="item.id" class="vmz-ui-tree__title">
@@ -20,22 +20,24 @@
 .vmz-ui-tree {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
+    gap: var(--vmz-space-2, 0.5rem);
     max-width: 28rem;
 }
 
 .vmz-ui-tree__label {
     margin: 0;
+    font-size: 0.875rem;
     font-weight: 600;
     color: var(--vmz-text-ink);
 }
 
 .vmz-ui-tree__items {
     margin: 0;
-    padding: 0.25rem;
+    padding: var(--vmz-space-1, 0.25rem);
     list-style: none;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    overflow: hidden;
+    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);
 }
@@ -43,57 +45,72 @@
 .vmz-ui-tree__item {
     display: flex;
     align-items: center;
-    gap: 0.375rem;
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    gap: var(--vmz-space-1, 0.25rem);
+    min-height: var(--vmz-control-height, 2rem);
+    padding-inline-end: var(--vmz-space-3, 0.75rem);
     border-radius: var(--vmz-radius-md, 6px);
+    font-size: 0.875rem;
+    line-height: 1.5;
     cursor: pointer;
     outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
 }
 
-.vmz-ui-tree__item[aria-selected="true"] {
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
+.vmz-ui-tree__item:hover {
+    background: var(--vmz-surface-mist);
 }
 
-.vmz-ui-tree__item:hover {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
+.vmz-ui-tree__item[aria-selected="true"] {
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
+    color: var(--vmz-action-primary-active);
+    font-weight: 500;
 }
 
 .vmz-ui-tree__item[aria-selected="true"]:hover {
-    background: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
 }
 
 .vmz-ui-tree__item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-tree__twist {
     flex: 0 0 auto;
-    width: 1.35rem;
-    height: 1.35rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
     padding: 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-mist);
-    color: inherit;
+    border: none;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
     font: inherit;
-    font-weight: 700;
     line-height: 1;
     cursor: pointer;
     outline: none;
 }
 
+.vmz-ui-tree__twist:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
 .vmz-ui-tree__twist:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-tree__twist-spacer {
     flex: 0 0 auto;
-    width: 1.35rem;
+    width: 1.25rem;
 }
 
 .vmz-ui-tree__title {
     flex: 1 1 auto;
+    min-width: 0;
 }
 </style>
 <script client>
@@ -103,7 +120,7 @@
  * Not virtualized / not DataGrid tree mode.
  */
 export default class Tree {
-    public label: string = "Tree";
+    public label: string = "";
     public labelId: string = "vmz-tree-label";
     public selected: string = "";
     /**
@@ -136,6 +153,12 @@ export default class Tree {
     toggle(id) {
         if (typeof this.onToggle === "function") this.onToggle(id);
     }
+    rowStyle(item) {
+        const provided = String(item?.padStyle || "").trim();
+        if (provided) return provided;
+        const depth = Math.max(0, Number(item?.depth) || 0);
+        return `padding-inline-start: ${0.75 + depth}rem`;
+    }
     onTreeClick(ev) {
         const t = ev && ev.target;
         const twist =