@vmz/ui 0.3.7 → 0.3.8

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,61 +107,107 @@
 }
 
 .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)),
-        background-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[data-variant="primary"] {
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-    border-color: transparent;
+.vmz-ui-dialog__close:hover {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
 }
 
-.vmz-ui-dialog__close[data-variant="primary"]:hover {
-    background: var(--vmz-action-primary-hover);
-    border-color: transparent;
+.vmz-ui-dialog__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
-.vmz-ui-dialog__close[data-variant="primary"]:active {
-    background: var(--vmz-action-primary-active);
+.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__close:hover {
+.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);
-    border-color: var(--vmz-action-primary-hover);
 }
 
-.vmz-ui-dialog__close:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+.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 {
@@ -155,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;
@@ -179,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>
@@ -197,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;

package/src/components/Drawer.vmz

@@ -1,19 +1,27 @@
 <template>
     <div data-vmz-ui="drawer" :data-vmz-overlay-open="open" class="vmz-ui-drawer-root">
-        <div v-if="open" data-vmz-overlay="drawer" data-vmz-overlay-owner="drawer" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-drawer">
-            <button type="button" data-vmz-overlay-layer="backdrop" aria-label="Dismiss drawer" @click="dismiss" class="vmz-ui-drawer__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-drawer__panel">
-                <h2 :id="titleId" class="vmz-ui-drawer__title">
-                    {{ title }}
-                </h2>
+        <div v-if="open" data-vmz-overlay="drawer" data-vmz-overlay-owner="drawer" :data-vmz-overlay-stack="stackLevel" :data-size="size" class="vmz-ui-drawer">
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="dismissLabel || closeLabel || title" @click="dismiss" class="vmz-ui-drawer__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-drawer__panel">
+                <header class="vmz-ui-drawer__header">
+                    <div class="vmz-ui-drawer__heading">
+                        <h2 v-if="title" :id="titleId" class="vmz-ui-drawer__title">
+                            {{ title }}
+                        </h2>
+                        <p v-if="description" class="vmz-ui-drawer__description">
+                            {{ description }}
+                        </p>
+                    </div>
+                    <button type="button" data-vmz-focus="close" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-drawer__close">
+                        <Icon name="action.close" size="md" decorative />
+                    </button>
+                </header>
                 <div class="vmz-ui-drawer__body">
                     <slot />
                 </div>
-                <div class="vmz-ui-drawer__actions">
-                    <button type="button" data-vmz-focus="close" @click="dismiss" class="vmz-ui-drawer__close">
-                        Close
-                    </button>
-                </div>
+                <footer class="vmz-ui-drawer__footer">
+                    <slot name="footer" />
+                </footer>
             </div>
         </div>
     </div>
@@ -48,7 +56,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-drawer-fade-in var(--vmz-motion-overlay-duration)
         var(--vmz-motion-overlay-easing);
 }
@@ -59,20 +67,27 @@
     right: 0;
     z-index: 1;
     box-sizing: border-box;
-    width: min(23.75rem, 100vw);
+    display: flex;
+    flex-direction: column;
+    width: min(420px, 100vw);
     height: 100%;
-    padding: 1.25rem 1.5rem;
-    border-left: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    background: var(--vmz-surface-paper, #fff);
+    border-left: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
     box-shadow: var(--vmz-shadow-popup);
     outline: none;
-    display: flex;
-    flex-direction: column;
     animation: vmz-ui-drawer-panel-in var(--vmz-motion-overlay-duration)
         var(--vmz-motion-overlay-easing);
 }
 
+.vmz-ui-drawer[data-size="sm"] .vmz-ui-drawer__panel {
+    width: min(320px, 100vw);
+}
+
+.vmz-ui-drawer[data-size="lg"] .vmz-ui-drawer__panel {
+    width: min(560px, 100vw);
+}
+
 .vmz-ui-drawer[data-vmz-motion-adopt="true"] .vmz-ui-drawer__backdrop,
 .vmz-ui-drawer[data-vmz-motion-adopt="true"] .vmz-ui-drawer__panel {
     animation: none;
@@ -89,45 +104,103 @@
 }
 
 .vmz-ui-drawer__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-drawer__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-drawer__heading {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .vmz-ui-drawer__title {
-    margin: 0 0 0.75rem;
-    font-size: 1rem;
+    margin: 0;
+    font-size: 16px;
     font-weight: 600;
+    line-height: 24px;
     color: var(--vmz-text-ink);
 }
 
-.vmz-ui-drawer__body {
-    flex: 1;
-    margin-bottom: 1rem;
-    overflow: auto;
-    color: var(--vmz-text-ink);
+.vmz-ui-drawer__description {
+    margin: 4px 0 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-drawer__close {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 400;
-    min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 1rem;
-    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 -4px 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, #fff);
-    color: var(--vmz-text-ink);
+    outline: none;
+    transition:
+        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-drawer__close:hover {
-    color: var(--vmz-action-primary-background);
-    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-drawer__close:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
+.vmz-ui-drawer__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding: 16px 20px;
+    overflow: auto;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-drawer__body :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 2px;
+}
+
+.vmz-ui-drawer__body :where(a):hover {
+    color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-drawer__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 12px 20px;
+    border-top: 1px solid var(--vmz-line-subtle);
+}
+
+.vmz-ui-drawer__footer:empty {
+    display: none;
+}
+
+.vmz-ui-drawer__footer :where(button, a) {
+    min-height: var(--vmz-control-height, 32px);
+}
+
 @keyframes vmz-ui-drawer-fade-in {
     from {
         opacity: 0;
@@ -140,7 +213,7 @@
 @keyframes vmz-ui-drawer-panel-in {
     from {
         opacity: 0;
-        transform: translateX(0.75rem);
+        transform: translateX(16px);
     }
     to {
         opacity: 1;
@@ -164,16 +237,25 @@
     }
     to {
         opacity: 0;
-        transform: translateX(0.75rem);
+        transform: translateX(16px);
+    }
+}
+
+@media (max-width: 720px) {
+    .vmz-ui-drawer__panel {
+        width: 100vw;
+        border-left: 0;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
     .vmz-ui-drawer__backdrop,
     .vmz-ui-drawer__panel,
+    .vmz-ui-drawer__close,
     .vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__backdrop,
     .vmz-ui-drawer[data-vmz-motion-phase="exit"] .vmz-ui-drawer__panel {
         animation: none;
+        transition: none;
     }
 }
 </style>
@@ -182,10 +264,19 @@
  * VMZ UI — Drawer (UI2).
  * Same overlay ownership / focus / Escape / stack as Dialog.
  * SSR/resume adopt skips enter replay; dismiss plays overlay-exit then calls onClose.
+ *
+ * Appearance props: `size` (sm 320 / md 420 / lg 560), `description`.
+ * Visible copy is author-supplied; `closeLabel` / `dismissLabel` only name the
+ * icon button and backdrop for assistive tech.
  */
 export default class Drawer {
     public open: boolean = false;
-    public title: string = "Drawer";
+    public title: string = "";
+    public description: string = "";
+    /** sm | md | lg */
+    public size: string = "md";
+    public closeLabel: string = "";
+    public dismissLabel: string = "";
     public titleId: string = "vmz-drawer-title";
     public stackLevel: string = "0";
     public onClose: (() => void) | null = null;