@vmz/ui 0.3.6 → 0.3.8

package/src/components/Descriptions.vmz

@@ -0,0 +1,90 @@
+<template>
+    <dl data-vmz-ui="descriptions" :data-columns="normalizeColumns()" :data-bordered="bordered ? 'true' : 'false'" class="vmz-ui-descriptions">
+        <div v-for="item in items" :key="item.term" class="vmz-ui-descriptions__item">
+            <dt class="vmz-ui-descriptions__term">
+                {{ item.term }}
+            </dt>
+            <dd :data-vmz-fixture="item.fixture || null" class="vmz-ui-descriptions__detail">
+                {{ item.detail }}
+            </dd>
+        </div>
+        <slot />
+    </dl>
+</template>
+<style>
+.vmz-ui-descriptions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.85rem 1.25rem;
+    margin: 0;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-descriptions[data-columns="1"] {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.vmz-ui-descriptions[data-columns="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.vmz-ui-descriptions__item {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+.vmz-ui-descriptions__term {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+}
+
+.vmz-ui-descriptions__detail {
+    margin: 0;
+    color: var(--vmz-text-ink);
+    font-size: 0.875rem;
+    line-height: 1.375rem;
+    overflow-wrap: anywhere;
+}
+
+.vmz-ui-descriptions[data-bordered="true"] {
+    gap: 0;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md);
+    overflow: hidden;
+}
+
+.vmz-ui-descriptions[data-bordered="true"] .vmz-ui-descriptions__item {
+    padding: 0.65rem 0.85rem;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-descriptions[data-bordered="true"] .vmz-ui-descriptions__item:last-child {
+    border-bottom: 0;
+}
+
+@media (max-width: 40rem) {
+    .vmz-ui-descriptions,
+    .vmz-ui-descriptions[data-columns="3"] {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Descriptions.
+ * Read-only key/value detail block (drawer and record detail). Parent owns `items`.
+ * No data fetching, no column inference, no editing.
+ */
+export default class Descriptions {
+    public items: { term: string; detail: string; fixture?: string }[] = [];
+    public columns: string = "2";
+    public bordered: boolean = false;
+    normalizeColumns() {
+        const n = Number(this.columns);
+        return n === 1 || n === 2 || n === 3 ? String(n) : "2";
+    }
+}
+</script>

package/src/components/Dialog.vmz

@@ -1,18 +1,26 @@
 <template>
     <div data-vmz-ui="dialog" :data-vmz-overlay-open="open" class="vmz-ui-dialog-root">
-        <div v-if="open" data-vmz-overlay="dialog" data-vmz-overlay-owner="dialog" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-dialog">
-            <button type="button" data-vmz-overlay-layer="backdrop" aria-label="Dismiss dialog" @click="dismiss" class="vmz-ui-dialog__backdrop" />
-            <div role="dialog" aria-modal="true" :aria-labelledby="titleId" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" data-vmz-motion="overlay-enter" data-vmz-motion-token="motion.overlay" :onKeyDown="onPanelKeyDown" class="vmz-ui-dialog__panel">
-                <h2 :id="titleId" class="vmz-ui-dialog__title">
-                    {{ title }}
-                </h2>
+        <div v-if="open" data-vmz-overlay="dialog" data-vmz-overlay-owner="dialog" :data-vmz-overlay-stack="stackLevel" :data-size="size" :data-action-size="actionSize" :data-tone="danger ? 'danger' : 'default'" class="vmz-ui-dialog">
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="dismissLabel || closeLabel || label || title" @click="dismiss" class="vmz-ui-dialog__backdrop" />
+            <div role="dialog" aria-modal="true" :aria-labelledby="title ? titleId : null" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" data-vmz-motion="overlay-enter" data-vmz-motion-token="motion.overlay" :onKeyDown="onPanelKeyDown" class="vmz-ui-dialog__panel">
+                <header class="vmz-ui-dialog__header">
+                    <div class="vmz-ui-dialog__heading">
+                        <h2 v-if="title" :id="titleId" class="vmz-ui-dialog__title">
+                            {{ title }}
+                        </h2>
+                        <p v-if="description" class="vmz-ui-dialog__description">
+                            {{ description }}
+                        </p>
+                    </div>
+                    <button type="button" data-vmz-focus="close" :aria-label="closeLabel || label || title" @click="dismiss" class="vmz-ui-dialog__close">
+                        <Icon name="action.close" size="md" decorative />
+                    </button>
+                </header>
                 <div class="vmz-ui-dialog__body">
                     <slot />
                 </div>
                 <div class="vmz-ui-dialog__actions">
-                    <button type="button" data-vmz-focus="close" @click="dismiss" class="vmz-ui-dialog__close">
-                        Close
-                    </button>
+                    <slot name="actions" />
                 </div>
             </div>
         </div>
@@ -29,6 +37,8 @@
     z-index: 40;
     display: grid;
     place-items: center;
+    box-sizing: border-box;
+    padding: 24px;
 }
 
 .vmz-ui-dialog[data-vmz-overlay-stack="1"] {
@@ -50,7 +60,7 @@
     padding: 0;
     margin: 0;
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.45);
+    background: color-mix(in srgb, var(--vmz-surface-ink) 45%, transparent);
     animation: vmz-ui-overlay-fade-in var(--vmz-motion-overlay-duration)
         var(--vmz-motion-overlay-easing);
 }
@@ -58,11 +68,14 @@
 .vmz-ui-dialog__panel {
     position: relative;
     z-index: 1;
-    width: min(32rem, calc(100vw - 2rem));
-    padding: 1.25rem 1.5rem 1.25rem;
-    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    border-radius: var(--vmz-radius-lg, 8px);
-    background: var(--vmz-surface-paper, #fff);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: min(520px, 100%);
+    max-height: calc(100vh - 48px);
+    border: 1px solid var(--vmz-line-subtle);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
     box-shadow: var(--vmz-shadow-popup);
     outline: none;
@@ -70,6 +83,14 @@
         var(--vmz-motion-overlay-easing);
 }
 
+.vmz-ui-dialog[data-size="sm"] .vmz-ui-dialog__panel {
+    width: min(400px, 100%);
+}
+
+.vmz-ui-dialog[data-size="lg"] .vmz-ui-dialog__panel {
+    width: min(720px, 100%);
+}
+
 .vmz-ui-dialog[data-vmz-motion-adopt="true"] .vmz-ui-dialog__backdrop,
 .vmz-ui-dialog[data-vmz-motion-adopt="true"] .vmz-ui-dialog__panel {
     animation: none;
@@ -86,47 +107,109 @@
 }
 
 .vmz-ui-dialog__panel:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring), var(--vmz-shadow-popup);
+}
+
+.vmz-ui-dialog__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 20px 24px 16px;
+}
+
+.vmz-ui-dialog__heading {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .vmz-ui-dialog__title {
-    margin: 0 0 0.75rem;
-    font-size: 1rem;
+    margin: 0;
+    font-size: 18px;
     font-weight: 600;
-    line-height: 1.4;
+    line-height: 24px;
     color: var(--vmz-text-ink);
 }
 
-.vmz-ui-dialog__body {
-    margin-bottom: 1rem;
-    color: var(--vmz-text-ink);
+.vmz-ui-dialog[data-tone="danger"] .vmz-ui-dialog__title {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-dialog__description {
+    margin: 6px 0 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-dialog__close {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 500;
-    min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 0.9375rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    margin: -4px -8px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--vmz-radius-md);
+    background: transparent;
+    color: var(--vmz-text-steel);
     cursor: pointer;
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
+    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));
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-dialog__close:hover {
-    color: var(--vmz-action-primary-hover);
-    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-dialog__close:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
+.vmz-ui-dialog__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 0 24px 20px;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-dialog__body :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 2px;
+}
+
+.vmz-ui-dialog__body :where(a):hover {
+    color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-dialog__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 0 24px 20px;
+}
+
+.vmz-ui-dialog__actions:empty {
+    display: none;
+}
+
+.vmz-ui-dialog__actions :where(button, a) {
+    min-height: var(--vmz-control-height, 32px);
+}
+
+.vmz-ui-dialog[data-action-size="lg"] .vmz-ui-dialog__actions :where(button, a) {
+    min-height: 40px;
+}
+
 @keyframes vmz-ui-overlay-fade-in {
     from {
         opacity: 0;
@@ -139,7 +222,7 @@
 @keyframes vmz-ui-overlay-panel-in {
     from {
         opacity: 0;
-        transform: translateY(0.35rem);
+        transform: translateY(8px) scale(0.98);
     }
     to {
         opacity: 1;
@@ -163,16 +246,18 @@
     }
     to {
         opacity: 0;
-        transform: translateY(0.35rem);
+        transform: translateY(8px) scale(0.98);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
     .vmz-ui-dialog__backdrop,
     .vmz-ui-dialog__panel,
+    .vmz-ui-dialog__close,
     .vmz-ui-dialog[data-vmz-motion-phase="exit"] .vmz-ui-dialog__backdrop,
     .vmz-ui-dialog[data-vmz-motion-phase="exit"] .vmz-ui-dialog__panel {
         animation: none;
+        transition: none;
     }
 }
 </style>
@@ -181,10 +266,24 @@
  * VMZ UI — Dialog (UI1).
  * Live `open` + overlay ownership + focus + Escape/outside dismiss + stackLevel.
  * SSR/resume adopt skips enter replay; dismiss plays overlay-exit then calls onClose.
+ *
+ * Appearance props: `size` (sm 400 / md 520 / lg 720), `danger` tone,
+ * `description`, `actionSize` (md 32 / lg 40 action buttons).
+ * Visible copy is author-supplied; `closeLabel` / `dismissLabel` only name the
+ * icon button and backdrop for assistive tech.
  */
 export default class Dialog {
     public open: boolean = false;
-    public title: string = "Dialog";
+    public title: string = "";
+    public label: string = "";
+    public description: string = "";
+    /** sm | md | lg */
+    public size: string = "md";
+    /** md | lg */
+    public actionSize: string = "md";
+    public danger: boolean = false;
+    public closeLabel: string = "";
+    public dismissLabel: string = "";
     public titleId: string = "vmz-dialog-title";
     public stackLevel: string = "0";
     public onClose: (() => void) | null = null;

package/src/components/Divider.vmz

@@ -9,11 +9,13 @@
 .vmz-ui-divider {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--vmz-space-3);
     width: 100%;
     color: var(--vmz-text-steel);
     font-size: 0.875rem;
+    line-height: 1.5715;
 }
+
 .vmz-ui-divider:before,
 .vmz-ui-divider:after {
     content: "";
@@ -21,18 +23,23 @@
     flex: 1;
     background: var(--vmz-line-default);
 }
+
 .vmz-ui-divider:not(:has(span)):before {
     flex: 1;
 }
+
 .vmz-ui-divider:not(:has(span)):after {
     display: none;
 }
+
 .vmz-ui-divider[data-direction="vertical"] {
     display: inline-block;
     width: 1px;
     height: 1em;
+    margin: 0 var(--vmz-space-2);
     background: var(--vmz-line-default);
 }
+
 .vmz-ui-divider[data-direction="vertical"]:before,
 .vmz-ui-divider[data-direction="vertical"]:after {
     display: none;