@vmz/ui 0.3.7 → 0.3.9

package/src/components/Menu.vmz

@@ -1,12 +1,34 @@
 <template>
     <div data-vmz-ui="menu" :data-vmz-overlay-open="open" class="vmz-ui-menu">
         <button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded="open ? 'true' : 'false'" :aria-controls="menuId" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-menu__trigger">
-            {{ label }}
+            <span class="vmz-ui-menu__trigger-label">
+                {{ label }}
+            </span>
+            <Icon name="action.chevron-down" size="sm" decorative />
         </button>
         <div v-if="open" :id="menuId" role="menu" data-vmz-overlay="menu" data-vmz-overlay-owner="menu" data-vmz-focus="enter" tabindex="-1" :onKeyDown="onMenuKeyDown" class="vmz-ui-menu__panel">
-            <button v-for="item in items" :key="item.id" type="button" role="menuitem" :data-vmz-menu-item="item.id" @click="onItemClick" class="vmz-ui-menu__item">
-                {{ item.title }}
-            </button>
+            <div v-for="item in items" :key="item.id" :data-kind="item.kind || 'item'" :data-vmz-menu-row="item.id" class="vmz-ui-menu__row">
+                <div v-if="item.kind === 'divider'" role="separator" class="vmz-ui-menu__divider" />
+                <div v-else-if="item.kind === 'group'" role="presentation" class="vmz-ui-menu__group">
+                    {{ item.title }}
+                </div>
+                <div v-else-if="item.children && item.children.length" :data-open="subOpen(item.id) ? 'true' : 'false'" :data-danger="item.danger ? 'true' : 'false'" class="vmz-ui-menu__submenu">
+                    <button type="button" role="menuitem" aria-haspopup="menu" :aria-expanded="subOpen(item.id) ? 'true' : 'false'" :disabled="item.disabled" @click="toggleSub(item.id)" class="vmz-ui-menu__item vmz-ui-menu__item--sub">
+                        <span class="vmz-ui-menu__label">
+                            {{ item.title }}
+                        </span>
+                        <Icon name="action.chevron-right" size="sm" decorative />
+                    </button>
+                    <div v-if="subOpen(item.id)" role="menu" class="vmz-ui-menu__subpanel">
+                        <button v-for="child in item.children" :key="child.id" type="button" role="menuitem" :data-vmz-menu-item="child.id" :data-danger="child.danger ? 'true' : 'false'" :data-active="child.active ? 'true' : 'false'" :disabled="child.disabled" @click="onItemClick" class="vmz-ui-menu__item">
+                            {{ child.title }}
+                        </button>
+                    </div>
+                </div>
+                <button v-else type="button" role="menuitem" :data-vmz-menu-item="item.id" :data-danger="item.danger ? 'true' : 'false'" :data-active="item.active ? 'true' : 'false'" :disabled="item.disabled" @click="onItemClick" class="vmz-ui-menu__item">
+                    {{ item.title }}
+                </button>
+            </div>
         </div>
     </div>
 </template>
@@ -17,17 +39,24 @@
 }
 
 .vmz-ui-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     font: inherit;
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 400;
-    min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 0.75rem;
+    line-height: 22px;
+    min-height: var(--vmz-control-height, 32px);
+    padding: 0 12px;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-md);
     cursor: pointer;
-    background: var(--vmz-surface-paper, #fff);
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
     outline: none;
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-menu__trigger:hover {
@@ -39,61 +68,196 @@
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
+.vmz-ui-menu__trigger-label:empty {
+    display: none;
+}
+
+.vmz-ui-menu[data-vmz-overlay-open="true"] .vmz-ui-menu__trigger {
+    border-color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-menu[data-vmz-overlay-open="true"] .vmz-ui-menu__trigger .vmz-ui-icon {
+    transform: rotate(180deg);
+}
+
 .vmz-ui-menu__panel {
     position: absolute;
     z-index: 30;
-    top: calc(100% + 0.25rem);
+    top: calc(100% + 4px);
     left: 0;
-    min-width: 10rem;
-    padding: 0.25rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
+    min-width: 176px;
+    max-height: 320px;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 4px;
+    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;
+    animation: vmz-ui-menu-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
 }
 
 .vmz-ui-menu__panel:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
+.vmz-ui-menu__row {
+    display: contents;
+}
+
 .vmz-ui-menu__item {
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 8px;
     width: 100%;
+    min-height: 32px;
+    box-sizing: border-box;
     text-align: left;
     font: inherit;
-    padding: 0.375rem 0.625rem;
+    font-size: 14px;
+    line-height: 22px;
+    padding: 0 12px;
     border: 0;
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-md);
     background: transparent;
-    color: inherit;
+    color: var(--vmz-text-ink);
     cursor: pointer;
     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-menu__item:hover,
-.vmz-ui-menu__item:focus-visible {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
+.vmz-ui-menu__item:hover {
+    background: var(--vmz-surface-mist);
 }
 
 .vmz-ui-menu__item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    background: var(--vmz-surface-mist);
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring) inset;
+}
+
+.vmz-ui-menu__item[data-active="true"] {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 10%, transparent);
+    box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-menu__item[data-active="true"]:hover,
+.vmz-ui-menu__item[data-active="true"]:focus-visible {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 16%, transparent);
+}
+
+.vmz-ui-menu__item[data-danger="true"] {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-menu__item[data-danger="true"]:hover,
+.vmz-ui-menu__item[data-danger="true"]:focus-visible {
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+}
+
+.vmz-ui-menu__item:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-menu__item--sub .vmz-ui-icon {
+    flex: 0 0 auto;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__group {
+    padding: 8px 12px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__divider {
+    height: 1px;
+    margin: 4px 8px;
+    background: var(--vmz-line-subtle);
+}
+
+.vmz-ui-menu__submenu {
+    position: relative;
+}
+
+.vmz-ui-menu__submenu[data-open="true"] > .vmz-ui-menu__item--sub {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-menu__subpanel {
+    display: flex;
+    flex-direction: column;
+    margin: 2px 0 4px;
+    padding: 4px 0 4px 12px;
+    border-left: 1px solid var(--vmz-line-subtle);
+}
+
+@keyframes vmz-ui-menu-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-menu__panel,
+    .vmz-ui-menu__trigger,
+    .vmz-ui-menu__item {
+        animation: none;
+        transition: none;
+    }
 }
 </style>
 <script client>
 /**
  * VMZ UI — Menu (UI2).
  * Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
+ *
+ * Item model: `{ id, title, kind?: "item"|"group"|"divider", danger?, disabled?,
+ * active?, children?: MenuItem[] }`. Submenus render a nested panel with a
+ * chevron-right affordance.
  */
 export default class Menu {
-    public label: string = "Menu";
+    public label: string = "";
     public open: boolean = false;
     public menuId: string = "vmz-menu";
-    /** @type {{ id: string, title: string }[]} */
+    /** @type {{ id: string, title: string, kind?: string, danger?: boolean, disabled?: boolean, active?: boolean, children?: { id: string, title: string, danger?: boolean, disabled?: boolean, active?: boolean }[] }[]} */
     public items: {
         id: string;
         title: string;
+        kind?: string;
+        danger?: boolean;
+        disabled?: boolean;
+        active?: boolean;
+        children?: {
+            id: string;
+            title: string;
+            danger?: boolean;
+            disabled?: boolean;
+            active?: boolean;
+        }[];
     }[] = [];
     public onOpenChange: ((open: boolean) => void) | null = null;
     public onSelect: ((id: string) => void) | null = null;
@@ -102,6 +266,7 @@ export default class Menu {
     _docKeyHandler = null;
     _docPointerHandler = null;
     _observer = null;
+    _subOpen: Record<string, boolean> = {};
     async onMount() {
         if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
         const root = this.__vmzDomRoot;
@@ -122,6 +287,12 @@ export default class Menu {
         this._panel = null;
         this._restoreFocus = null;
     }
+    subOpen(id) {
+        return !!this._subOpen[id];
+    }
+    toggleSub(id) {
+        this._subOpen = { ...this._subOpen, [id]: !this._subOpen[id] };
+    }
     toggle() {
         if (typeof this.onOpenChange === "function") this.onOpenChange(!this.open);
     }
@@ -134,6 +305,7 @@ export default class Menu {
     }
     onItemClick(ev) {
         const el = ev?.currentTarget;
+        if (el && typeof el.getAttribute === "function" && el.disabled) return;
         const id =
             el && typeof el.getAttribute === "function"
                 ? el.getAttribute("data-vmz-menu-item")
@@ -223,6 +395,7 @@ export default class Menu {
     _exitFocus() {
         this._teardownDoc();
         this._panel = null;
+        this._subOpen = {};
         const restore = this._restoreFocus;
         this._restoreFocus = null;
         if (restore && typeof restore.focus === "function" && document.contains(restore)) {

package/src/components/Message.vmz

@@ -0,0 +1,167 @@
+<template>
+    <span data-vmz-ui="message" :data-tone="tone" :role="roleAttr()" class="vmz-ui-message">
+        <span aria-hidden="true" class="vmz-ui-message__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <span class="vmz-ui-message__content">
+            <span class="vmz-ui-message__title">
+                {{ title }}
+            </span>
+            <span v-if="description" class="vmz-ui-message__description">
+                {{ description }}
+            </span>
+        </span>
+        <button v-if="closable" type="button" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-message__close">
+            <Icon name="action.close" size="sm" decorative />
+        </button>
+    </span>
+</template>
+<style>
+.vmz-ui-message {
+    position: fixed;
+    top: 1.25rem;
+    left: 50%;
+    z-index: 45;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    width: max-content;
+    max-width: min(420px, calc(100vw - 2rem));
+    padding: 0.6rem 0.85rem;
+    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);
+    animation: vmz-ui-message-in var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-message__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-message[data-tone="success"] .vmz-ui-message__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-message[data-tone="warning"] .vmz-ui-message__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-message[data-tone="danger"] .vmz-ui-message__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-message__content {
+    flex: 1 1 auto;
+    display: block;
+    min-width: 0;
+    padding-top: 0.1rem;
+}
+
+.vmz-ui-message__title {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-message__description {
+    display: block;
+    margin-top: 1px;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-message__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);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition: color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-message__close:hover {
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-message__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+@keyframes vmz-ui-message-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-message {
+        animation: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Message.
+ * Transient confirmation toast for completed operations (render with `v-if`).
+ * Parent owns visibility. `duration > 0` auto-dismisses and emits `close`;
+ * the caller decides what side effects follow.
+ */
+export default class Message {
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "success";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public duration: number = 3200;
+    public onClose: (() => void) | null = null;
+    _timer = null;
+    onMount() {
+        const ms = Number(this.duration);
+        if (!Number.isFinite(ms) || ms <= 0) return;
+        this._timer = setTimeout(() => this.dismiss(), ms);
+    }
+    onDestroy() {
+        if (this._timer) clearTimeout(this._timer);
+        this._timer = null;
+    }
+    roleAttr() {
+        return String(this.tone).toLowerCase() === "danger" ? "alert" : "status";
+    }
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+    dismiss() {
+        if (this._timer) clearTimeout(this._timer);
+        this._timer = null;
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+}
+</script>

package/src/components/Notification.vmz

@@ -1,80 +1,175 @@
 <template>
     <div data-vmz-ui="notification" :data-tone="tone" :role="roleName" class="vmz-ui-notification">
-        <p v-if="title" class="vmz-ui-notification__title">
-            {{ title }}
-        </p>
-        <p v-if="description" class="vmz-ui-notification__description">
-            {{ description }}
-        </p>
-        <div class="vmz-ui-notification__actions">
-            <slot />
+        <span aria-hidden="true" class="vmz-ui-notification__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-notification__content">
+            <p v-if="title" class="vmz-ui-notification__title">
+                {{ title }}
+            </p>
+            <p v-if="description" class="vmz-ui-notification__description">
+                {{ description }}
+            </p>
+            <div class="vmz-ui-notification__actions">
+                <slot />
+            </div>
         </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-notification__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
     </div>
 </template>
 <style>
 .vmz-ui-notification {
     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-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
-    color: var(--vmz-status-info-foreground);
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem);
+    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);
+    box-shadow: var(--vmz-shadow-popup, none);
+    animation: vmz-ui-notification-in var(--vmz-motion-overlay-duration, 160ms)
+        var(--vmz-motion-overlay-easing, cubic-bezier(0.2, 0, 0, 1));
 }
 
-.vmz-ui-notification[data-tone="info"] {
-    border-color: var(--vmz-status-info-accent);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
-    color: var(--vmz-status-info-foreground);
+.vmz-ui-notification[data-tone="info"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-info-accent);
 }
 
-.vmz-ui-notification[data-tone="success"] {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, transparent);
-    color: var(--vmz-status-success-foreground);
+.vmz-ui-notification[data-tone="success"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-success-accent);
 }
 
-.vmz-ui-notification[data-tone="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, transparent);
-    color: var(--vmz-status-warning-foreground);
+.vmz-ui-notification[data-tone="warning"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-warning-accent);
 }
 
-.vmz-ui-notification[data-tone="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, transparent);
-    color: var(--vmz-status-danger-foreground);
+.vmz-ui-notification[data-tone="danger"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-danger-accent);
 }
 
-:where([data-density="compact"]) .vmz-ui-notification {
-    gap: var(--vmz-density-compact-gap);
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+.vmz-ui-notification__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-notification__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
 }
 
 .vmz-ui-notification__title {
     margin: 0;
-    font-weight: 700;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-notification__description {
     margin: 0;
-    opacity: 0.9;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-notification__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vmz-space-2, 0.5rem);
+    margin-top: var(--vmz-space-1, 0.25rem);
 }
 
 .vmz-ui-notification__actions:empty {
     display: none;
 }
+
+.vmz-ui-notification__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-notification__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-notification__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+@keyframes vmz-ui-notification-in {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-notification {
+        animation: none;
+    }
+}
+
+:where([data-density="compact"]) .vmz-ui-notification {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-notification {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Notification (UI4 Commercial Surface).
- * Ephemeral feedback surface; tones share status.* tokens with Alert.
+ * Ephemeral feedback surface: paper + popup shadow + tone accent icon; 160ms enter.
  */
 export default class Notification {
     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>