@happyvertical/smrt-ui 0.52.0 → 0.53.1

package/dist/components/display/__tests__/Icon.test.js

@@ -6,10 +6,14 @@
  * from Icon.svelte — preset/path resolution, size/color, and axe-cleanliness in
  * both decorative and labelled modes.
  */
-import { render } from '@testing-library/svelte';
-import { describe, expect, it } from 'vitest';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { act, render } from '@testing-library/svelte';
+import { hydrate, tick, unmount } from 'svelte';
+import { createServer } from 'vite';
+import { afterEach, describe, expect, it } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import Icon from '../Icon.svelte';
+import { registerIcons } from '../icons.svelte.js';
 /** The 'check' preset path, used to assert preset resolution. */
 const CHECK_PATH = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z';
 describe('Icon', () => {
@@ -91,3 +95,129 @@ describe('Icon', () => {
         await expectNoA11yViolations(container);
     });
 });
+const cleanupRegistrations = [];
+afterEach(() => {
+    for (const cleanup of cleanupRegistrations.splice(0))
+        cleanup();
+});
+describe('Icon catalog and application registration', () => {
+    it.each([
+        'alert',
+        'warning',
+        'info',
+        'home',
+        'user',
+        'settings',
+        'trash',
+        'edit',
+        'calendar',
+        'clock',
+        'camera',
+        'upload',
+        'download',
+    ])('ships a nonempty %s glyph', (name) => {
+        const { container } = render(Icon, { props: { name } });
+        expect(container.querySelector('path')?.getAttribute('d')).toMatch(/^M/);
+    });
+    it('updates already mounted icons when an application set is registered and removed', async () => {
+        const { container } = render(Icon, { props: { name: 'shop-machine' } });
+        const path = container.querySelector('path');
+        expect(path).not.toHaveAttribute('d');
+        let cleanup = () => { };
+        await act(() => {
+            cleanup = registerIcons({ 'shop-machine': 'M2 2h20v20H2z' });
+        });
+        cleanupRegistrations.push(cleanup);
+        expect(path).toHaveAttribute('d', 'M2 2h20v20H2z');
+        await act(cleanup);
+        expect(path).not.toHaveAttribute('d');
+    });
+    it('preserves override precedence and supports out-of-order, repeated cleanup', async () => {
+        const { container } = render(Icon, { props: { name: 'check' } });
+        const path = container.querySelector('path');
+        const first = registerIcons({ check: 'M1 1h2v2H1z' });
+        const second = registerIcons({ check: 'M3 3h4v4H3z' });
+        cleanupRegistrations.push(first, second);
+        await act(() => { });
+        expect(path).toHaveAttribute('d', 'M3 3h4v4H3z');
+        await act(first);
+        expect(path).toHaveAttribute('d', 'M3 3h4v4H3z');
+        await act(first);
+        expect(path).toHaveAttribute('d', 'M3 3h4v4H3z');
+        await act(second);
+        expect(path).toHaveAttribute('d', CHECK_PATH);
+    });
+    it('keeps explicit path higher priority than a registered name', () => {
+        cleanupRegistrations.push(registerIcons({ check: 'M1 1h2v2H1z' }));
+        const { container } = render(Icon, {
+            props: {
+                name: 'check',
+                path: 'M0 0h10v10H0z',
+                'aria-label': 'Custom check',
+            },
+        });
+        expect(container.querySelector('path')).toHaveAttribute('d', 'M0 0h10v10H0z');
+        expect(container.querySelector('svg')).toHaveAccessibleName('Custom check');
+    });
+    it('snapshots caller maps and rejects malformed mixed sets atomically', () => {
+        const icons = { brand: 'M1 1h2v2H1z' };
+        cleanupRegistrations.push(registerIcons(icons));
+        icons.brand = 'M3 3h4v4H3z';
+        expect(() => registerIcons({ brand: 'M5 5h6v6H5z', bad: 3 })).toThrow(TypeError);
+        expect(() => registerIcons({ '': 'M1 1h2v2H1z' })).toThrow(TypeError);
+        expect(() => registerIcons({ empty: '' })).toThrow(TypeError);
+        const { container } = render(Icon, { props: { name: 'brand' } });
+        expect(container.querySelector('path')).toHaveAttribute('d', 'M1 1h2v2H1z');
+    });
+    it('does not resolve inherited map properties or builtin prototype names', () => {
+        cleanupRegistrations.push(registerIcons(Object.create({ inherited: 'M1 1h2v2H1z' })));
+        for (const name of ['inherited', 'toString', '__proto__', 'constructor']) {
+            const { container } = render(Icon, { props: { name } });
+            expect(container.querySelector('path')).not.toHaveAttribute('d');
+        }
+    });
+});
+it('renders registered icons on the server and hydrates with the same application set', async () => {
+    const vite = await createServer({
+        configFile: false,
+        plugins: [svelte()],
+        root: process.cwd(),
+        server: { middlewareMode: true },
+    });
+    const custom = 'M4 4h16v16H4z';
+    const unregisterClient = registerIcons({ brand: custom });
+    cleanupRegistrations.push(unregisterClient);
+    try {
+        const { default: ServerIcon } = await vite.ssrLoadModule('/src/components/display/Icon.svelte');
+        const { registerIcons: registerServerIcons } = await vite.ssrLoadModule('/src/components/display/icons.svelte.ts');
+        const unregisterServer = registerServerIcons({ brand: custom });
+        try {
+            const { render: renderSsr } = await vite.ssrLoadModule('svelte/server');
+            const props = { name: 'brand', 'aria-label': 'Brand' };
+            const result = await renderSsr(ServerIcon, { props });
+            expect(result.body).toContain(`d="${custom}"`);
+            const host = document.createElement('div');
+            host.innerHTML = result.body;
+            document.body.append(host);
+            const instance = hydrate(Icon, { target: host, props });
+            try {
+                expect(host.querySelector('svg')).toHaveAccessibleName('Brand');
+                expect(host.querySelector('path')).toHaveAttribute('d', custom);
+                const override = registerIcons({ brand: 'M2 2h20v20H2z' });
+                cleanupRegistrations.push(override);
+                await tick();
+                expect(host.querySelector('path')).toHaveAttribute('d', 'M2 2h20v20H2z');
+            }
+            finally {
+                await unmount(instance);
+                host.remove();
+            }
+        }
+        finally {
+            unregisterServer();
+        }
+    }
+    finally {
+        await vite.close();
+    }
+});

package/dist/components/display/__tests__/StatusBadge.test.js

@@ -12,6 +12,84 @@ import { describe, expect, it } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import StatusBadge from '../StatusBadge.svelte';
 describe('StatusBadge', () => {
+    it.each([
+        [
+            'success',
+            'var(--smrt-color-success-container)',
+            'var(--smrt-color-on-success-container)',
+        ],
+        [
+            'warning',
+            'var(--smrt-color-warning-container)',
+            'var(--smrt-color-on-warning-container)',
+        ],
+        [
+            'danger',
+            'var(--smrt-color-error-container)',
+            'var(--smrt-color-on-error-container)',
+        ],
+        [
+            'info',
+            'var(--smrt-color-primary-container)',
+            'var(--smrt-color-on-primary-container)',
+        ],
+        [
+            'neutral',
+            'var(--smrt-color-surface-container-highest)',
+            'var(--smrt-color-on-surface-variant)',
+        ],
+    ])('applies %s tone to a custom status', (tone, background, foreground) => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'awaiting_cert', tone },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toBe(background);
+        expect(span.style.getPropertyValue('--badge-text')).toBe(foreground);
+        expect(screen.getByText('awaiting cert')).toBeInTheDocument();
+    });
+    it('lets explicit tone override a domain scheme and updates reactively', async () => {
+        const { container, rerender } = render(StatusBadge, {
+            props: {
+                status: 'overdue',
+                type: 'invoice',
+                tone: 'success',
+                variant: 'outline',
+                size: 'sm',
+                label: 'Reviewed',
+            },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-success-container)');
+        expect(span).toHaveClass('outline', 'sm');
+        expect(screen.getByText('Reviewed')).toBeInTheDocument();
+        await rerender({ status: 'overdue', type: 'invoice', tone: 'warning' });
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-warning-container)');
+        await rerender({ status: 'overdue', type: 'invoice', tone: undefined });
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-error-container)');
+    });
+    it.each([
+        'unknown',
+        '__proto__',
+        'constructor',
+    ])('safely ignores invalid runtime tone %s', (tone) => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'paid', type: 'invoice', tone: tone },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-primary-container)');
+    });
+    it.each([
+        'success',
+        'warning',
+        'danger',
+        'info',
+        'neutral',
+    ])('is axe-clean for custom status tone=%s', async (tone) => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'awaiting_cert', tone },
+        });
+        await expectNoA11yViolations(container);
+    });
     it('renders the status value as its label', () => {
         render(StatusBadge, { props: { status: 'active' } });
         expect(screen.getByText('active')).toBeInTheDocument();

package/dist/components/display/icons.svelte.d.ts

@@ -0,0 +1,11 @@
+/** Application icon paths, using the Icon component's configured viewBox. */
+export type IconPathMap = Readonly<Record<string, string>>;
+/**
+ * Register an application icon set, returning an idempotent cleanup function.
+ * Last active registration wins; caller-owned maps are snapshotted. Register
+ * static application sets at startup, not request-specific or identity data.
+ */
+export declare function registerIcons(icons: IconPathMap): () => void;
+/** Resolve the last active application path, falling back to the builtin set. */
+export declare function resolveIconPath(name: string): string | undefined;
+//# sourceMappingURL=icons.svelte.d.ts.map

package/dist/components/display/icons.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/icons.svelte.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AA0C3D;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,IAAI,CAkB5D;AAED,iFAAiF;AACjF,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAMhE"}

package/dist/components/display/icons.svelte.js

@@ -0,0 +1,60 @@
+// Common M3 Icon Paths (Simplified)
+const presets = new Map(Object.entries({
+    menu: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z',
+    search: 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z',
+    close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z',
+    'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z',
+    'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z',
+    'chevron-down': 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z',
+    check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z',
+    add: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
+    mic: 'M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.04 6.43 5 7.07V21h4v-2.93c2.96-.64 5-3.54 5-7.07h-2z',
+    alert: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z',
+    warning: 'M1 21h22L12 2 1 21zm12-3h-2v-2h2zm0-4h-2v-4h2z',
+    info: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2zm0-8h-2V7h2z',
+    home: 'M3 10 12 2 21 10v11h-6v-7H9v7H3z',
+    user: 'M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM4 21v-2c0-4 16-4 16 0v2H4z',
+    settings: 'M10 2h4l1 3 3-1 3 3-1 3 3 1v4l-3 1 1 3-3 3-3-1-1 3h-4l-1-3-3 1-3-3 1-3-3-1v-4l3-1-1-3 3-3 3 1 1-3zm2 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z',
+    trash: 'M7 3h10v2h4v2H3V5h4V3zm-2 6h14v12H5V9zm4 2v8h2v-8H9zm4 0v8h2v-8h-2z',
+    edit: 'M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z',
+    calendar: 'M7 2h2v2h6V2h2v2h4v18H3V4h4V2zm-2 8v10h14V10H5zm2 2h4v4H7v-4z',
+    clock: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm-1 2h2v5.5l4 2.5-1 1.5-5-3V6z',
+    camera: 'M9 3h6l2 3h4v15H3V6h4l2-3zm3 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z',
+    upload: 'M11 16V7l-4 4-1.5-1.5L12 3l6.5 6.5L17 11l-4-4v9h-2zM3 18h18v3H3v-3z',
+    download: 'M11 3h2v9l4-4 1.5 1.5L12 16l-6.5-6.5L7 8l4 4V3zM3 18h18v3H3v-3z',
+}));
+let registrations = $state.raw([]);
+/**
+ * Register an application icon set, returning an idempotent cleanup function.
+ * Last active registration wins; caller-owned maps are snapshotted. Register
+ * static application sets at startup, not request-specific or identity data.
+ */
+export function registerIcons(icons) {
+    if (!icons || typeof icons !== 'object' || Array.isArray(icons)) {
+        throw new TypeError('Icon set must be a map of names to SVG path strings');
+    }
+    const entries = Object.entries(icons);
+    for (const [name, path] of entries) {
+        if (!name.trim() || typeof path !== 'string' || !path.trim()) {
+            throw new TypeError('Icon names and paths must be nonempty strings');
+        }
+    }
+    const registration = { paths: new Map(entries) };
+    registrations = [...registrations, registration];
+    let active = true;
+    return () => {
+        if (!active)
+            return;
+        active = false;
+        registrations = registrations.filter((entry) => entry !== registration);
+    };
+}
+/** Resolve the last active application path, falling back to the builtin set. */
+export function resolveIconPath(name) {
+    for (let index = registrations.length - 1; index >= 0; index--) {
+        const path = registrations[index].paths.get(name);
+        if (path !== undefined)
+            return path;
+    }
+    return presets.get(name);
+}

package/dist/components/display/index.d.ts

@@ -6,5 +6,7 @@ export { default as CurrencyDisplay } from './CurrencyDisplay.svelte';
 export { default as DateDisplay } from './DateDisplay.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
-export type { StatusType } from './types.js';
+export type { IconPathMap } from './icons.svelte.js';
+export { registerIcons } from './icons.svelte.js';
+export type { StatusTone, StatusType } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAO9D,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAM9D,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/display/index.js

@@ -7,3 +7,4 @@ export { default as CurrencyDisplay } from './CurrencyDisplay.svelte';
 export { default as DateDisplay } from './DateDisplay.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as StatusBadge } from './StatusBadge.svelte';
+export { registerIcons } from './icons.svelte.js';

package/dist/components/display/types.d.ts

@@ -2,4 +2,6 @@
  * Display component types
  */
 export type StatusType = 'default' | 'invoice' | 'project' | 'expense' | 'time' | 'compliance' | 'estimate';
+/** Semantic tone for custom status vocabulary. */
+export type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
 //# sourceMappingURL=types.d.ts.map

package/dist/components/display/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/display/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/display/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEf,kDAAkD;AAClD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC"}

package/dist/components/feedback/ConfirmDialog.svelte

@@ -6,13 +6,11 @@
  * Provides a consistent confirmation dialog for destructive actions
  * or important decisions.
  *
- * Accessibility (#1586): the dialog is a `role="dialog" aria-modal="true"`
- * surface with managed focus — on open it records the previously-focused element
- * and moves focus to the confirm button; Tab/Shift+Tab are trapped within the
- * dialog; Escape (caught at the document level while open) cancels; and focus is
- * restored to the opener when the dialog closes.
+ * Native showModal() puts confirmations above existing Modal/Drawer surfaces,
+ * traps focus and makes the background inert. Escape is handled locally so
+ * only the active confirmation requests cancellation.
  */
-import { tick } from 'svelte';
+import { type Snippet, tick } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
 
 /** Props for ConfirmDialog component */
@@ -21,8 +19,8 @@ export interface Props {
   open: boolean;
   /** Dialog title */
   title: string;
-  /** Dialog message */
-  message: string;
+  /** Plain text or rich message snippet */
+  message: string | Snippet;
   /** Confirm button label */
   confirmLabel?: string;
   /** Cancel button label */
@@ -49,7 +47,8 @@ const {
   oncancel,
 }: Props = $props();
 
-let backdropEl = $state<HTMLElement | null>(null);
+const instanceId = $props.id();
+let backdropEl = $state<HTMLDialogElement | null>(null);
 let confirmBtnEl = $state<HTMLButtonElement | null>(null);
 // The element focused before the dialog opened, restored on close.
 let previouslyFocused: HTMLElement | null = null;
@@ -63,38 +62,43 @@ function focusableEls(): HTMLElement[] {
   );
 }
 
-// Move focus into the dialog on open; restore it to the opener on close.
+// Keep the parent's open prop authoritative; native cancellation requests it.
 $effect(() => {
-  if (typeof document === 'undefined') return;
-
-  if (open) {
-    previouslyFocused = document.activeElement as HTMLElement | null;
-    // Wait for the dialog DOM to mount, then move focus into the dialog: the
-    // confirm action by default, the first focusable if confirm is disabled, or
-    // the dialog container itself when every control is disabled (loading) so
-    // focus is still contained and Escape stays reachable.
-    void tick().then(() => {
-      if (!open) return;
-      const target = confirmBtnEl?.disabled
-        ? (focusableEls()[0] ?? backdropEl)
-        : confirmBtnEl;
-      target?.focus();
-    });
-  } else if (previouslyFocused) {
-    previouslyFocused.focus();
+  const dialog = backdropEl;
+  if (!open || !dialog) return;
+  previouslyFocused = document.activeElement as HTMLElement | null;
+  dialog.showModal();
+  void tick().then(() => {
+    if (!dialog.open) return;
+    const target = confirmBtnEl?.disabled
+      ? (focusableEls()[0] ?? dialog)
+      : confirmBtnEl;
+    target?.focus();
+  });
+  return () => {
+    if (dialog.open) dialog.close();
+    previouslyFocused?.focus();
     previouslyFocused = null;
-  }
+  };
 });
 
+function handleCancel(event: Event) {
+  event.preventDefault();
+  event.stopPropagation();
+  oncancel?.();
+}
+
 function handleBackdropClick(e: MouseEvent) {
   if (e.target === e.currentTarget) {
     oncancel?.();
   }
 }
 
-// Escape handling lives at the document level (below) so it fires regardless of
-// where focus currently is. This handler, bound to the dialog, only traps Tab.
 function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    handleCancel(e);
+    return;
+  }
   if (e.key !== 'Tab') return;
 
   // Trap focus within the dialog so Tab can't escape to the page behind.
@@ -117,33 +121,30 @@ function handleKeydown(e: KeyboardEvent) {
     first.focus();
   }
 }
-
-function handleWindowKeydown(e: KeyboardEvent) {
-  if (open && e.key === 'Escape') {
-    e.preventDefault();
-    oncancel?.();
-  }
-}
 </script>
 
-<svelte:window onkeydown={handleWindowKeydown} />
-
 {#if open}
   <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <div
+  <dialog
     bind:this={backdropEl}
     class="dialog-backdrop"
-    role="dialog"
     aria-modal="true"
-    aria-labelledby="dialog-title"
-    aria-describedby="dialog-message"
+    aria-labelledby={`${instanceId}-title`}
+    aria-describedby={`${instanceId}-message`}
     tabindex="-1"
     onclick={handleBackdropClick}
     onkeydown={handleKeydown}
+    oncancel={handleCancel}
   >
     <div class="dialog-content">
-      <h2 id="dialog-title" class="dialog-title">{title}</h2>
-      <p id="dialog-message" class="dialog-message">{message}</p>
+      <h2 id={`${instanceId}-title`} class="dialog-title">{title}</h2>
+      <div id={`${instanceId}-message`} class="dialog-message">
+        {#if typeof message === 'string'}
+          {message}
+        {:else}
+          {@render message()}
+        {/if}
+      </div>
 
       <div class="dialog-actions">
         <button
@@ -171,7 +172,7 @@ function handleWindowKeydown(e: KeyboardEvent) {
         </button>
       </div>
     </div>
-  </div>
+  </dialog>
 {/if}
 
 <style>
@@ -181,9 +182,19 @@ function handleWindowKeydown(e: KeyboardEvent) {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--smrt-color-scrim, rgba(0, 0, 0, 0.4));
-    z-index: var(--smrt-z-index-dialog, 1000);
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    margin: 0;
+    border: none;
+    box-sizing: border-box;
+    background: transparent;
     padding: 1rem;
+  }
+
+  .dialog-backdrop::backdrop {
+    background-color: var(--smrt-color-scrim, rgba(0, 0, 0, 0.4));
     backdrop-filter: blur(2px);
   }
 

package/dist/components/feedback/ConfirmDialog.svelte.d.ts

@@ -1,11 +1,23 @@
+/**
+ * ConfirmDialog - Modal confirmation dialog
+ * refactored for Material 3
+ *
+ * Provides a consistent confirmation dialog for destructive actions
+ * or important decisions.
+ *
+ * Native showModal() puts confirmations above existing Modal/Drawer surfaces,
+ * traps focus and makes the background inert. Escape is handled locally so
+ * only the active confirmation requests cancellation.
+ */
+import { type Snippet } from 'svelte';
 /** Props for ConfirmDialog component */
 export interface Props {
     /** Whether the dialog is open */
     open: boolean;
     /** Dialog title */
     title: string;
-    /** Dialog message */
-    message: string;
+    /** Plain text or rich message snippet */
+    message: string | Snippet;
     /** Confirm button label */
     confirmLabel?: string;
     /** Cancel button label */

package/dist/components/feedback/ConfirmDialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAoBA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA2HD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,KAAK,OAAO,EAAQ,MAAM,QAAQ,CAAC;AAI5C,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA8HD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}