@happyvertical/smrt-ui 0.51.39 → 0.53.0

package/dist/components/display/Icon.svelte

@@ -9,6 +9,8 @@
  * - Uses aria-hidden="true" by default (decorative)
  */
 
+import { resolveIconPath } from './icons.svelte.js';
+
 /** Props for Icon component */
 export interface Props {
   /** Preset icon name */
@@ -36,22 +38,7 @@ const {
 
 const isInformative = $derived(!!ariaLabel);
 
-// Common M3 Icon Paths (Simplified)
-const presets: Record<string, string> = {
-  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',
-};
-
-const finalPath = $derived(path ?? (name ? presets[name] : ''));
+const finalPath = $derived(path ?? (name ? resolveIconPath(name) : ''));
 const pxSize = $derived(typeof size === 'number' ? `${size}px` : size);
 </script>
 

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

@@ -1,12 +1,3 @@
-/**
- * Icon - SVG icon component
- *
- * Displays SVG icons from presets or custom paths.
- *
- * Accessibility:
- * - Use aria-label for informative icons
- * - Uses aria-hidden="true" by default (decorative)
- */
 /** Props for Icon component */
 export interface Props {
     /** Preset icon name */

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/Icon.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,+BAA+B;AAC/B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/Icon.svelte.ts"],"names":[],"mappings":"AAeA,+BAA+B;AAC/B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA8BD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/display/StatusBadge.svelte

@@ -3,10 +3,10 @@
  * StatusBadge - Generic status indicator badge
  *
  * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
- * or allows custom styling via CSS variables.
+ * or an explicit semantic tone for custom status vocabulary.
  */
 
-import type { StatusType } from './types.js';
+import type { StatusTone, StatusType } from './types.js';
 
 /** Props for StatusBadge component */
 export interface Props {
@@ -14,6 +14,8 @@ export interface Props {
   status: string;
   /** Pre-defined color scheme type */
   type?: StatusType;
+  /** Semantic tone overriding the domain color scheme. */
+  tone?: StatusTone;
   /** Badge size */
   size?: 'sm' | 'md' | 'lg';
   /** Visual variant */
@@ -25,6 +27,7 @@ export interface Props {
 const {
   status,
   type = 'default',
+  tone,
   size = 'md',
   variant = 'filled',
   label,
@@ -201,11 +204,35 @@ const colorSchemes: Record<
   },
 };
 
+const toneSchemes: Record<StatusTone, { bg: string; text: string }> = {
+  success: {
+    bg: 'var(--smrt-color-success-container)',
+    text: 'var(--smrt-color-on-success-container)',
+  },
+  warning: {
+    bg: 'var(--smrt-color-warning-container)',
+    text: 'var(--smrt-color-on-warning-container)',
+  },
+  danger: {
+    bg: 'var(--smrt-color-error-container)',
+    text: 'var(--smrt-color-on-error-container)',
+  },
+  info: {
+    bg: 'var(--smrt-color-primary-container)',
+    text: 'var(--smrt-color-on-primary-container)',
+  },
+  neutral: {
+    bg: 'var(--smrt-color-surface-container-highest)',
+    text: 'var(--smrt-color-on-surface-variant)',
+  },
+};
+
 // Normalize status for lookup (lowercase, handle spaces/underscores)
 const normalizedStatus = $derived(status.toLowerCase().replace(/[\s-]/g, '_'));
 
 // Get colors for current status
 const colors = $derived.by(() => {
+  if (tone && Object.hasOwn(toneSchemes, tone)) return toneSchemes[tone];
   const scheme = colorSchemes[type] ?? colorSchemes.default;
   return (
     scheme[normalizedStatus] ?? {

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

@@ -2,15 +2,17 @@
  * StatusBadge - Generic status indicator badge
  *
  * Provides pre-defined color schemes for common status domains (invoice, project, etc.)
- * or allows custom styling via CSS variables.
+ * or an explicit semantic tone for custom status vocabulary.
  */
-import type { StatusType } from './types.js';
+import type { StatusTone, StatusType } from './types.js';
 /** Props for StatusBadge component */
 export interface Props {
     /** The status value to display */
     status: string;
     /** Pre-defined color scheme type */
     type?: StatusType;
+    /** Semantic tone overriding the domain color scheme. */
+    tone?: StatusTone;
     /** Badge size */
     size?: 'sm' | 'md' | 'lg';
     /** Visual variant */

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoND,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"StatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/display/StatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAGzD,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wDAAwD;IACxD,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6OD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -8,7 +8,7 @@
  * offsets from `now`. Tests assert the real API from DateDisplay.svelte.
  */
 import { render, screen } from '@testing-library/svelte';
-import { describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import DateDisplay from '../DateDisplay.svelte';
 const LOCALE = 'en-CA';
@@ -25,6 +25,83 @@ const LONG = {
     day: 'numeric',
 };
 describe('DateDisplay', () => {
+    afterEach(() => vi.useRealTimers());
+    it.each([
+        'America/Edmonton',
+        'UTC',
+        'Asia/Tokyo',
+    ])('formats timestamp dates and times in %s', (timeZone) => {
+        const instant = '2026-10-01T04:00:00Z';
+        const { container } = render(DateDisplay, {
+            props: { date: instant, timeZone, showTime: true },
+        });
+        expect(container.querySelector('time')?.textContent?.trim()).toBe(expected(new Date(instant), {
+            ...MEDIUM,
+            timeZone,
+            hour: 'numeric',
+            minute: '2-digit',
+        }));
+    });
+    it.each([
+        'America/Edmonton',
+        'Asia/Tokyo',
+    ])('keeps a bare calendar date in %s', (timeZone) => {
+        const { container } = render(DateDisplay, {
+            props: { date: '2026-09-30', timeZone },
+        });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', '2026-09-30');
+        expect(container.querySelector('time')?.textContent?.trim()).toBe(expected(new Date('2026-09-30T00:00:00Z'), {
+            ...MEDIUM,
+            timeZone: 'UTC',
+        }));
+    });
+    it('keeps date-only values stable in the default browser zone', () => {
+        render(DateDisplay, { props: { date: '2026-09-30' } });
+        expect(screen.getByText(expected(new Date('2026-09-30T00:00:00Z'), {
+            ...MEDIUM,
+            timeZone: 'UTC',
+        }))).toBeInTheDocument();
+    });
+    it.each([
+        '2026-02-30',
+        '2025-02-29',
+        '2026-13-01',
+    ])('rejects impossible calendar date %s', (date) => {
+        render(DateDisplay, { props: { date, fallback: 'Invalid date' } });
+        expect(screen.getByText('Invalid date')).toBeInTheDocument();
+    });
+    it('accepts a leap day', () => {
+        const { container } = render(DateDisplay, {
+            props: { date: '2028-02-29' },
+        });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', '2028-02-29');
+    });
+    it.each([
+        ['2026-10-01T06:30:00Z', '2026-10-01T05:30:00Z', 'yesterday'],
+        ['2026-10-01T05:30:00Z', '2026-10-01T06:30:00Z', 'tomorrow'],
+        ['2026-10-01T06:30:00Z', '2026-10-01T07:30:00Z', 'today'],
+        ['2026-03-09T06:30:00Z', '2026-03-08T07:30:00Z', 'yesterday'],
+        ['2026-10-01T05:30:00Z', '2026-09-30', 'today'],
+        ['2026-10-01T05:30:00Z', '2026-10-01', 'tomorrow'],
+        ['2026-10-01T05:30:00Z', '2026-09-29', 'yesterday'],
+    ])('uses calendar boundaries for %s → %s', (now, date, text) => {
+        vi.useFakeTimers({ toFake: ['Date'] });
+        vi.setSystemTime(new Date(now));
+        render(DateDisplay, {
+            props: { date, format: 'relative', timeZone: 'America/Edmonton' },
+        });
+        expect(screen.getByText(text)).toBeInTheDocument();
+    });
+    it('uses the fallback for an invalid explicit zone', () => {
+        render(DateDisplay, {
+            props: {
+                date: '2026-09-30T00:00:00Z',
+                timeZone: 'not/a/zone',
+                fallback: 'Invalid date',
+            },
+        });
+        expect(screen.getByText('Invalid date')).toBeInTheDocument();
+    });
     // Use a fixed local-noon date so date-part is timezone-stable.
     const sample = new Date(2024, 0, 15, 12, 0, 0); // 15 Jan 2024, local noon
     it('renders a <time> element with the ISO datetime attribute', () => {
@@ -79,6 +156,10 @@ describe('DateDisplay', () => {
         const span = screen.getByText('No date');
         expect(span).toHaveClass('date-fallback');
     });
+    it('renders the fallback for an invalid Date instance', () => {
+        render(DateDisplay, { props: { date: new Date(Number.NaN) } });
+        expect(screen.getByText('N/A')).toBeInTheDocument();
+    });
     it('renders the default fallback for an invalid date string', () => {
         render(DateDisplay, { props: { date: 'not-a-date' } });
         expect(screen.getByText('N/A')).toBeInTheDocument();

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"}