@vmz/ui 0.3.7 → 0.3.8

package/README.md

@@ -25,6 +25,8 @@ Headline surface for this cut:
 - Upload multipart binary (parent-owned FormData → `#server` File/Blob; progress/cancel)
 - Density / RTL / preset materialize
 - Motion continuity + interrupt/cancel
+- Form rule validation (`Form#rules` + `values` → `invalid`), destructive `Popconfirm`,
+  transient `Message`, read-only `Descriptions`
 - Motion compiler IR thin gate (`pnpm verify -- motion-ir`)
 - UI7 conformance pack (`@vmz/ui/conformance` + `pnpm verify -- ui7`)
 - `@vmz/ui-data-grid` thin gate (virtualization + pinned column — not tree/group/pivot/edit)

package/contracts/token-requirements.v0.json

@@ -192,7 +192,7 @@
                 "density.control.padding-x"
             ],
             "surfaces": ["WebSurface"],
-            "contracts": ["submit-reset", "error-summary", "no-parallel-form-store", "novalidate"]
+            "contracts": ["submit-reset", "error-summary", "no-parallel-form-store", "novalidate", "rule-validation"]
         },
         "FormItem": {
             "source": "src/components/FormItem.vmz",
@@ -326,6 +326,63 @@
                 "overlay-stacking"
             ]
         },
+        "Popconfirm": {
+            "source": "src/components/Popconfirm.vmz",
+            "stableHint": "ui.Popconfirm",
+            "tokens": [
+                "line.subtle",
+                "surface.paper",
+                "text.ink",
+                "text.steel",
+                "radius.lg",
+                "shadow.popup",
+                "status.danger.accent",
+                "status.warning.accent",
+                "status.info.accent",
+                "focus.ring",
+                "motion.overlay.duration",
+                "motion.overlay.easing"
+            ],
+            "surfaces": ["WebSurface"],
+            "contracts": [
+                "destructive-confirm",
+                "overlay-ownership",
+                "outside-dismiss",
+                "focus-enter",
+                "focus-restore",
+                "escape-dismiss",
+                "overlay-stacking"
+            ]
+        },
+        "Message": {
+            "source": "src/components/Message.vmz",
+            "stableHint": "ui.Message",
+            "tokens": [
+                "surface.paper",
+                "text.ink",
+                "text.steel",
+                "text.tertiary",
+                "line.subtle",
+                "radius.lg",
+                "shadow.popup",
+                "status.info.accent",
+                "status.success.accent",
+                "status.warning.accent",
+                "status.danger.accent",
+                "focus.ring",
+                "motion.overlay.duration",
+                "motion.overlay.easing"
+            ],
+            "surfaces": ["WebSurface"],
+            "contracts": ["transient-feedback", "auto-dismiss", "tone-matrix", "status-tokens"]
+        },
+        "Descriptions": {
+            "source": "src/components/Descriptions.vmz",
+            "stableHint": "ui.Descriptions",
+            "tokens": ["text.ink", "text.steel", "line.default", "line.subtle", "radius.md"],
+            "surfaces": ["WebSurface"],
+            "contracts": ["read-only-detail", "column-layout", "no-column-inference"]
+        },
         "AppShell": {
             "source": "src/components/AppShell.vmz",
             "stableHint": "ui.AppShell",

package/package.json

@@ -19,6 +19,7 @@
     "./Content": "./src/components/Content.vmz",
     "./DataTable": "./src/components/DataTable.vmz",
     "./DatePicker": "./src/components/DatePicker.vmz",
+    "./Descriptions": "./src/components/Descriptions.vmz",
     "./Dialog": "./src/components/Dialog.vmz",
     "./Divider": "./src/components/Divider.vmz",
     "./Drawer": "./src/components/Drawer.vmz",
@@ -37,8 +38,10 @@
     "./Link": "./src/components/Link.vmz",
     "./List": "./src/components/List.vmz",
     "./Menu": "./src/components/Menu.vmz",
+    "./Message": "./src/components/Message.vmz",
     "./Notification": "./src/components/Notification.vmz",
     "./Pagination": "./src/components/Pagination.vmz",
+    "./Popconfirm": "./src/components/Popconfirm.vmz",
     "./Popover": "./src/components/Popover.vmz",
     "./Progress": "./src/components/Progress.vmz",
     "./Prose": "./src/components/Prose.vmz",
@@ -82,7 +85,7 @@
   "license": "MIT",
   "name": "@vmz/ui",
   "peerDependencies": {
-    "@vmz/ui-icons": "0.3.7"
+    "@vmz/ui-icons": "0.3.8"
   },
   "peerDependenciesMeta": {
     "@vmz/ui-icons": {
@@ -98,5 +101,5 @@
     "url": "git+https://github.com/doki-land/vmz-framework.git"
   },
   "type": "module",
-  "version": "0.3.7"
+  "version": "0.3.8"
 }

package/presets/web-surface.v0.json

@@ -9,29 +9,31 @@
             "sm": "4px",
             "md": "6px",
             "lg": "8px",
+            "xl": "12px",
             "pill": "999px"
         },
-        "controlHeight": { "sm": "1.5rem", "middle": "2rem", "lg": "2.5rem" },
+        "controlHeight": { "sm": "1.5rem", "middle": "2rem", "lg": "2.5rem", "mobile": "2.75rem" },
         "layoutMaxWidth": "75rem",
-        "surfacePage": "#F5F5F5",
-        "surfaceFill": "#FAFAFA",
-        "textTertiary": "#8C8C8C",
-        "lineDefault": "#D9D9D9",
-        "lineSubtle": "#F0F0F0",
+        "surfacePage": "#F5F6F8",
+        "surfaceFill": "#FAFBFC",
+        "textTertiary": "#646A73",
+        "textMuted": "#8A9099",
+        "lineDefault": "#E5E6EB",
+        "lineSubtle": "#F0F1F3",
         "shadowCard": "none",
-        "shadowCardHover": "0 1px 2px -2px rgba(0,0,0,.08), 0 3px 6px 0 rgba(0,0,0,.06), 0 5px 12px 4px rgba(0,0,0,.04)",
-        "shadowPopup": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)",
+        "shadowCardHover": "none",
+        "shadowPopup": "0 12px 32px 0 rgba(15,23,42,.12), 0 2px 8px 0 rgba(15,23,42,.06)",
         "elevation": {
             "note": "Floating layers only. Cards stay flat per visualIntent; interactive surfaces lift on hover, never at rest.",
-            "float-sm": "0 1px 2px 0 rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.02)",
-            "float-md": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)",
-            "float-lg": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05), 0 12px 48px 16px rgba(0,0,0,.03)"
+            "float-sm": "0 1px 2px 0 rgba(15,23,42,.04), 0 1px 4px -1px rgba(15,23,42,.03)",
+            "float-md": "0 4px 12px 0 rgba(15,23,42,.08), 0 1px 3px 0 rgba(15,23,42,.04)",
+            "float-lg": "0 12px 32px 0 rgba(15,23,42,.12), 0 2px 8px 0 rgba(15,23,42,.06)"
         }
     },
     "density": {
         "control": {
             "padding-y": "0.25rem",
-            "padding-x": "0.9375rem",
+            "padding-x": "0.75rem",
             "gap": "0.5rem"
         },
         "compact": {

package/src/components/Accordion.vmz

@@ -2,8 +2,11 @@
     <div data-vmz-ui="accordion" :aria-label="label" class="vmz-ui-accordion">
         <div v-for="item in items" :key="item.id" :data-vmz-accordion="item.id" class="vmz-ui-accordion__item">
             <h3 class="vmz-ui-accordion__heading">
-                <button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded="openId === item.id ? 'true' : 'false'" :aria-controls="item.panelId" @click="(() => toggle(item.id))" class="vmz-ui-accordion__trigger">
-                    {{ item.title }}
+                <button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded="openId === item.id ? 'true' : 'false'" :aria-controls="item.panelId" @click="toggle(item.id)" class="vmz-ui-accordion__trigger">
+                    <span class="vmz-ui-accordion__title">
+                        {{ item.title }}
+                    </span>
+                    <Icon name="action.chevron-down" size="sm" decorative />
                 </button>
             </h3>
             <div v-if="openId === item.id" :id="item.panelId" role="region" :data-vmz-accordion-panel="item.id" :aria-labelledby="item.triggerId" class="vmz-ui-accordion__panel">
@@ -16,16 +19,16 @@
 .vmz-ui-accordion {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
-    max-width: 36rem;
+    box-sizing: border-box;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-lg);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
+    overflow: hidden;
 }
 
 .vmz-ui-accordion__item {
-    border-bottom: 1px solid var(--vmz-line-default);
+    border-bottom: 1px solid var(--vmz-line-subtle);
 }
 
 .vmz-ui-accordion__item:last-child {
@@ -38,35 +41,65 @@
 }
 
 .vmz-ui-accordion__trigger {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 12px;
     width: 100%;
+    min-height: 40px;
+    box-sizing: border-box;
     text-align: start;
     font: inherit;
+    font-size: 14px;
     font-weight: 600;
+    line-height: 22px;
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border: 0;
     background: transparent;
-    color: inherit;
+    color: var(--vmz-text-ink);
     cursor: pointer;
     outline: none;
+    transition: background-color var(--vmz-motion-control-duration)
+        var(--vmz-motion-control-easing);
 }
 
-.vmz-ui-accordion__trigger:hover {
-    background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
+.vmz-ui-accordion__title {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
-.vmz-ui-accordion__trigger:focus-visible {
-    box-shadow: inset 0 0 0 3px var(--vmz-focus-ring);
+.vmz-ui-accordion__trigger .vmz-ui-icon {
+    flex: 0 0 auto;
+    color: var(--vmz-text-tertiary);
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
-.vmz-ui-accordion__trigger[aria-expanded="true"] {
+.vmz-ui-accordion__trigger[aria-expanded="true"] .vmz-ui-icon {
     color: var(--vmz-action-primary-active);
+    transform: rotate(180deg);
+}
+
+.vmz-ui-accordion__trigger:hover {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-accordion__trigger:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-accordion__panel {
-    padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
+    padding: 0 16px 16px;
+    font-size: 14px;
+    line-height: 26px;
     color: var(--vmz-text-steel);
-    line-height: 1.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-accordion__trigger,
+    .vmz-ui-accordion__trigger .vmz-ui-icon {
+        transition: none;
+    }
 }
 </style>
 <script client>
@@ -76,7 +109,7 @@
  * Panel body lives on items (no per-panel slot runtime).
  */
 export default class Accordion {
-    public label: string = "Accordion";
+    public label: string = "";
     public openId: string = "";
     /** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
     public items: {

package/src/components/Alert.vmz

@@ -1,82 +1,179 @@
 <template>
     <div data-vmz-ui="alert" :data-tone="tone" :role="roleName" class="vmz-ui-alert">
-        <p v-if="title" class="vmz-ui-alert__title">
-            {{ title }}
-        </p>
-        <p v-if="description" class="vmz-ui-alert__description">
-            {{ description }}
-        </p>
-        <div class="vmz-ui-alert__actions">
-            <slot />
+        <span aria-hidden="true" class="vmz-ui-alert__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-alert__content">
+            <p v-if="title" class="vmz-ui-alert__title">
+                {{ title }}
+            </p>
+            <p v-if="description" class="vmz-ui-alert__description">
+                {{ description }}
+            </p>
+            <div class="vmz-ui-alert__actions">
+                <slot />
+            </div>
         </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-alert__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
     </div>
 </template>
 <style>
 .vmz-ui-alert {
     display: flex;
-    flex-direction: column;
-    gap: var(--vmz-density-control-gap);
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-status-info-accent);
-    border-left-width: 1px;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+    border: 1px solid var(--vmz-status-info-border, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-status-info-background, var(--vmz-surface-mist));
     color: var(--vmz-status-info-foreground);
 }
 
 .vmz-ui-alert[data-tone="info"] {
-    border-color: var(--vmz-status-info-accent);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+    border-color: var(--vmz-status-info-border, var(--vmz-line-default));
+    background: var(--vmz-status-info-background, var(--vmz-surface-mist));
     color: var(--vmz-status-info-foreground);
 }
 
 .vmz-ui-alert[data-tone="success"] {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, transparent);
+    border-color: var(--vmz-status-success-border, var(--vmz-line-default));
+    background: var(--vmz-status-success-background, var(--vmz-surface-mist));
     color: var(--vmz-status-success-foreground);
 }
 
 .vmz-ui-alert[data-tone="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, transparent);
+    border-color: var(--vmz-status-warning-border, var(--vmz-line-default));
+    background: var(--vmz-status-warning-background, var(--vmz-surface-mist));
     color: var(--vmz-status-warning-foreground);
 }
 
 .vmz-ui-alert[data-tone="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+    border-color: var(--vmz-status-danger-border, var(--vmz-line-default));
+    background: var(--vmz-status-danger-background, var(--vmz-surface-mist));
     color: var(--vmz-status-danger-foreground);
 }
 
-:where([data-density="compact"]) .vmz-ui-alert {
-    gap: var(--vmz-density-compact-gap);
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+.vmz-ui-alert[data-tone="info"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-alert[data-tone="success"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-alert[data-tone="warning"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-alert[data-tone="danger"] .vmz-ui-alert__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-alert__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-alert__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
 }
 
 .vmz-ui-alert__title {
     margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
+    line-height: 1.5;
+    color: inherit;
 }
 
 .vmz-ui-alert__description {
     margin: 0;
-    opacity: 0.9;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-alert__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vmz-space-2, 0.5rem);
+    margin-top: var(--vmz-space-1, 0.25rem);
 }
 
 .vmz-ui-alert__actions:empty {
     display: none;
 }
+
+.vmz-ui-alert__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-alert__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-alert__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+:where([data-density="compact"]) .vmz-ui-alert {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-alert {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-2, 0.5rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Alert (UI4 status tone matrix).
- * tone → status.{info|success|warning|danger}.* tokens from Style Theme.
+ * tone → status.{info|success|warning|danger}.{accent|foreground|background|border}.
  */
 export default class Alert {
     public title: string = "";
     public description: string = "";
     public tone: string = "info";
     public roleName: string = "status";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public onClose: (() => void) | null = null;
+
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
 }
 </script>