@vmz/ui 0.3.7 → 0.3.8

package/src/components/Popover.vmz

@@ -1,18 +1,27 @@
 <template>
     <div data-vmz-ui="popover" :data-vmz-overlay-open="open" class="vmz-ui-popover-root">
         <div v-if="open" data-vmz-overlay="popover" data-vmz-overlay-owner="popover" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-popover">
-            <button type="button" data-vmz-overlay-layer="backdrop" aria-label="Dismiss popover" @click="dismiss" class="vmz-ui-popover__backdrop" />
-            <div role="dialog" aria-modal="false" :aria-labelledby="titleId" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" :onKeyDown="onPanelKeyDown" class="vmz-ui-popover__panel">
-                <h2 :id="titleId" class="vmz-ui-popover__title">
-                    {{ title }}
-                </h2>
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="dismissLabel || closeLabel || title" @click="dismiss" class="vmz-ui-popover__backdrop" />
+            <div role="dialog" aria-modal="false" :aria-labelledby="title ? titleId : null" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" :onKeyDown="onPanelKeyDown" class="vmz-ui-popover__panel">
+                <span aria-hidden="true" data-vmz-popover="arrow" class="vmz-ui-popover__arrow" />
+                <header v-if="title || description" class="vmz-ui-popover__header">
+                    <div class="vmz-ui-popover__heading">
+                        <h2 v-if="title" :id="titleId" class="vmz-ui-popover__title">
+                            {{ title }}
+                        </h2>
+                        <p v-if="description" class="vmz-ui-popover__description">
+                            {{ description }}
+                        </p>
+                    </div>
+                    <button type="button" data-vmz-focus="close" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-popover__close">
+                        <Icon name="action.close" size="md" decorative />
+                    </button>
+                </header>
                 <div class="vmz-ui-popover__body">
                     <slot />
                 </div>
                 <div class="vmz-ui-popover__actions">
-                    <button type="button" data-vmz-focus="close" @click="dismiss" class="vmz-ui-popover__close">
-                        Close
-                    </button>
+                    <slot name="actions" />
                 </div>
             </div>
         </div>
@@ -60,55 +69,168 @@
     left: 50%;
     transform: translateX(-50%);
     box-sizing: border-box;
-    width: min(20rem, calc(100vw - 2rem));
-    min-height: 8rem;
-    padding: 0.85rem 1rem 1rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-action-primary-foreground);
-    color: var(--vmz-action-primary-active);
+    width: min(320px, calc(100vw - 32px));
+    padding: 12px;
+    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;
     pointer-events: auto;
+    animation: vmz-ui-popover-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-popover__arrow {
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    border-top: 1px solid var(--vmz-line-subtle);
+    border-left: 1px solid var(--vmz-line-subtle);
+    border-radius: 1px 0 0 0;
+    background: var(--vmz-surface-paper);
+    transform: translateX(-50%) rotate(45deg);
 }
 
 .vmz-ui-popover__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-popover__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.vmz-ui-popover__heading {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 .vmz-ui-popover__title {
-    margin: 0 0 0.5rem;
-    font-size: 1rem;
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
 }
 
-.vmz-ui-popover__body {
-    margin-bottom: 0.75rem;
+.vmz-ui-popover__description {
+    margin: 2px 0 0;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-popover__close {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.375rem 0.7rem;
-    border: 1px solid transparent;
-    border-radius: var(--vmz-radius-md, 6px);
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: -4px -4px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--vmz-radius-md);
+    background: transparent;
+    color: var(--vmz-text-steel);
     cursor: pointer;
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
+    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-popover__close:hover {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-popover__close:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
+
+.vmz-ui-popover__body {
+    margin-top: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-popover__header + .vmz-ui-popover__body {
+    margin-top: 8px;
+}
+
+.vmz-ui-popover__body :where(a) {
+    color: var(--vmz-action-primary-background);
+    text-underline-offset: 2px;
+}
+
+.vmz-ui-popover__body :where(a):hover {
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-popover__body :where(a):active {
+    background: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-popover__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.vmz-ui-popover__actions:empty {
+    display: none;
+}
+
+.vmz-ui-popover__actions :where(button, a) {
+    min-height: var(--vmz-control-height, 32px);
+}
+
+@keyframes vmz-ui-popover-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-6px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-popover__panel,
+    .vmz-ui-popover__close {
+        animation: none;
+        transition: none;
+    }
+}
 </style>
 <script client>
 /**
  * VMZ UI — Popover (UI2).
  * Non-modal disclosure: Escape + outside dismiss + focus enter/restore.
- * Parent owns live `open`. Fixed min size for layout stability.
- * `stackLevel` raises z-index; Escape dismisses only the topmost stacked overlay.
+ * Parent owns live `open`. `stackLevel` raises z-index; Escape dismisses only
+ * the topmost stacked overlay.
+ *
+ * Appearance props: `title`, `description`. Visible copy is author-supplied;
+ * `closeLabel` / `dismissLabel` only name the icon button and backdrop.
  */
 export default class Popover {
     public open: boolean = false;
-    public title: string = "Popover";
+    public title: string = "";
+    public description: string = "";
+    public closeLabel: string = "";
+    public dismissLabel: string = "";
     public titleId: string = "vmz-popover-title";
     public stackLevel: string = "0";
     public onClose: (() => void) | null = null;
@@ -140,10 +262,6 @@ export default class Popover {
         this.emit("close");
         if (typeof this.onClose === "function") this.onClose();
     }
-    _stackValue() {
-        const n = Number(this.stackLevel);
-        return Number.isFinite(n) ? n : 0;
-    }
     _isTopmostStack() {
         if (typeof document === "undefined") return true;
         const root = this.__vmzDomRoot;

package/src/components/Progress.vmz

@@ -13,27 +13,38 @@
 .vmz-ui-progress {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--vmz-space-3);
     width: 100%;
 }
+
 .vmz-ui-progress__track {
-    height: 0.5rem;
+    height: var(--vmz-space-2);
     flex: 1;
     overflow: hidden;
-    border-radius: 999px;
+    border-radius: var(--vmz-radius-pill);
     background: var(--vmz-surface-mist);
 }
+
 .vmz-ui-progress__track span {
     display: block;
     height: 100%;
     border-radius: inherit;
     background: var(--vmz-action-primary-background);
-    transition: width var(--vmz-motion-control-duration, 0.16s);
+    transition: width var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
+
 .vmz-ui-progress__text {
-    min-width: 2.5rem;
+    min-width: var(--vmz-space-7);
     color: var(--vmz-text-steel);
     font-size: 0.875rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.5715;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-progress__track span {
+        transition: none;
+    }
 }
 </style>
 <script client>

package/src/components/Prose.vmz

@@ -5,71 +5,170 @@
 </template>
 <style>
 .vmz-ui-prose {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 42rem;
+    max-width: 46rem;
     color: var(--vmz-text-ink);
     font-family: var(--vmz-font-sans);
-    line-height: 1.65;
+    font-size: 1rem;
+    line-height: 1.625;
 }
-
-.vmz-ui-prose :where(h1, h2, h3) {
+.vmz-ui-prose :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure, table, hr) {
     margin: 0;
-    font-family: var(--vmz-font-display);
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
+}
+.vmz-ui-prose > * + * {
+    margin-top: 1em;
+}
+.vmz-ui-prose :where(div, section, article) > * + * {
+    margin-top: 1em;
+}
+.vmz-ui-prose :where(h1, h2, h3, h4, h5, h6) {
+    margin: 1.5em 0 0.5em;
     color: var(--vmz-text-ink);
-    scroll-margin-top: 1.25rem;
+    font-family: var(--vmz-font-display);
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    scroll-margin-top: 5rem;
 }
-
 .vmz-ui-prose :where(h1) {
-    font-size: clamp(1.85rem, 4vw, 2.35rem);
+    font-size: 1.875rem;
+    line-height: 1.2;
 }
-
 .vmz-ui-prose :where(h2) {
-    font-size: 1.35rem;
-    margin-top: 0.5rem;
+    font-size: 1.5rem;
+    line-height: 1.33;
 }
-
 .vmz-ui-prose :where(h3) {
-    font-size: 1.1rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+}
+.vmz-ui-prose :where(h4) {
+    font-size: 1.0625rem;
+    line-height: 1.47;
+}
+.vmz-ui-prose :where(h5) {
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.vmz-ui-prose :where(h6) {
+    font-size: 0.875rem;
+    line-height: 1.57;
+    color: var(--vmz-text-tertiary);
+}
+.vmz-ui-prose > :first-child,
+.vmz-ui-prose :where(div, section, article) > :first-child {
+    margin-top: 0;
+}
+.vmz-ui-prose > :last-child,
+.vmz-ui-prose :where(div, section, article) > :last-child {
+    margin-bottom: 0;
 }
-
 .vmz-ui-prose :where(p) {
-    margin: 0;
     color: var(--vmz-text-ink);
 }
-
 .vmz-ui-prose :where(p.lead) {
-    font-size: 1.05rem;
     color: var(--vmz-text-steel);
+    font-size: 1.125rem;
+    line-height: 1.6;
 }
-
 .vmz-ui-prose :where(ul, ol) {
-    margin: 0;
-    padding-left: 1.25rem;
+    padding-left: 1.25em;
     color: var(--vmz-text-ink);
 }
-
 .vmz-ui-prose :where(li + li) {
-    margin-top: 0.375rem;
+    margin-top: 0.35em;
+}
+.vmz-ui-prose :where(dl) {
+    display: grid;
+    gap: 0.35em;
+}
+.vmz-ui-prose :where(dt) {
+    font-weight: 600;
+}
+.vmz-ui-prose :where(dd) {
+    margin: 0;
+    padding-left: 1.25em;
+    color: var(--vmz-text-steel);
 }
-
 .vmz-ui-prose :where(a) {
     color: var(--vmz-action-primary-background);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
     text-underline-offset: 0.15em;
+    transition: color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-
 .vmz-ui-prose :where(a:hover) {
     color: var(--vmz-action-primary-hover);
 }
-
+.vmz-ui-prose :where(a:focus-visible) {
+    border-radius: var(--vmz-radius-xs, 2px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    outline: none;
+}
+.vmz-ui-prose :where(strong) {
+    font-weight: 600;
+}
+.vmz-ui-prose :where(small) {
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875em;
+}
+.vmz-ui-prose :where(blockquote) {
+    padding: 0.25em 0 0.25em 1em;
+    border-left: 3px solid var(--vmz-line-default);
+    color: var(--vmz-text-steel);
+}
+.vmz-ui-prose :where(blockquote) :where(p) {
+    color: inherit;
+}
 .vmz-ui-prose :where(hr) {
+    margin: 2em 0;
     border: 0;
     border-top: 1px solid var(--vmz-line-default);
-    margin: 0.5rem 0;
+}
+.vmz-ui-prose :where(img, video) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--vmz-radius-md, 6px);
+}
+.vmz-ui-prose :where(pre:not(.vmz-ui-code-block__pre)) {
+    padding: var(--vmz-space-4, 1rem);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-code);
+    color: var(--vmz-text-on-brand);
+    font-family: var(--vmz-font-mono);
+    font-size: 0.875rem;
+    line-height: 1.5714;
+    overflow-x: auto;
+}
+.vmz-ui-prose :where(pre:not(.vmz-ui-code-block__pre)) :where(code) {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+}
+.vmz-ui-prose :where(p, li, td, th, blockquote, dd) :where(code, kbd, samp) {
+    padding: 0.15em 0.35em;
+    border-radius: var(--vmz-radius-xs, 2px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-mono);
+    font-size: 0.875em;
+}
+.vmz-ui-prose :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+}
+.vmz-ui-prose :where(th, td) {
+    padding: 0.625em 0.75em;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    text-align: left;
+    vertical-align: top;
+}
+.vmz-ui-prose :where(thead th) {
+    color: var(--vmz-text-tertiary);
+    font-weight: 600;
+    border-bottom-color: var(--vmz-line-default);
 }
 </style>
 <script client>

package/src/components/QueryForm.vmz

@@ -5,22 +5,44 @@
 </template>
 <style>
 .vmz-ui-query-form {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    gap: var(--vmz-density-compact-gap);
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+    align-items: end;
+    gap: 0.75rem;
+    padding: 1rem;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-query-form .vmz-ui-field__control,
+.vmz-ui-query-form .vmz-ui-select__control,
+.vmz-ui-query-form .vmz-ui-btn {
+    min-height: 2rem;
+}
+
+.vmz-ui-query-form > :has(.vmz-ui-btn),
+.vmz-ui-query-form > button.vmz-ui-btn {
+    justify-self: end;
+}
+
+.vmz-ui-query-form .vmz-ui-field {
+    min-width: 0;
+}
+
+@media (max-width: 640px) {
+    .vmz-ui-query-form {
+        grid-template-columns: 1fr;
+    }
 }
 </style>
 <script client>
 /**
- * VMZ UI — QueryForm (UI5 Console Surface).
- * Dense multi-field query landmark; spacing from density.compact.* tokens.
+ * VMZ UI — QueryForm (Console composition).
+ * Dense multi-field query landmark; single column on narrow screens.
  */
 export default class QueryForm {
-    public label: string = "Query";
+    public label: string = "";
     public onSubmit: (() => void) | null = null;
     onSubmitGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();