@happyvertical/smrt-ui 0.53.1 → 0.53.2

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

@@ -1,195 +0,0 @@
-/**
- * Component tests for DateDisplay (Sweep S11, #1416).
- *
- * DateDisplay parses a Date/ISO/timestamp and renders a <time datetime> element
- * (or a fallback <span> for null/invalid input). Expected formatted strings are
- * derived via Intl.DateTimeFormat with the SAME options the component uses, so
- * assertions stay locale/timezone-robust. Relative mode is exercised with
- * offsets from `now`. Tests assert the real API from DateDisplay.svelte.
- */
-import { render, screen } from '@testing-library/svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import DateDisplay from '../DateDisplay.svelte';
-const LOCALE = 'en-CA';
-/** Build the component's expected output for an absolute format. */
-function expected(date, options, locale = LOCALE) {
-    return new Intl.DateTimeFormat(locale, options).format(date);
-}
-const SHORT = { month: 'short', day: 'numeric' };
-const MEDIUM = { year: 'numeric', month: 'short', day: 'numeric' };
-const LONG = {
-    weekday: 'long',
-    year: 'numeric',
-    month: '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', () => {
-        const { container } = render(DateDisplay, { props: { date: sample } });
-        const time = container.querySelector('time');
-        expect(time).toBeInTheDocument();
-        expect(time).toHaveAttribute('datetime', sample.toISOString());
-    });
-    it('formats with medium options by default', () => {
-        render(DateDisplay, { props: { date: sample } });
-        expect(screen.getByText(expected(sample, MEDIUM))).toBeInTheDocument();
-    });
-    it('formats with short options', () => {
-        render(DateDisplay, { props: { date: sample, format: 'short' } });
-        expect(screen.getByText(expected(sample, SHORT))).toBeInTheDocument();
-    });
-    it('formats with long options', () => {
-        render(DateDisplay, { props: { date: sample, format: 'long' } });
-        expect(screen.getByText(expected(sample, LONG))).toBeInTheDocument();
-    });
-    it('includes time when showTime is set', () => {
-        render(DateDisplay, { props: { date: sample, showTime: true } });
-        const withTime = expected(sample, {
-            ...MEDIUM,
-            hour: 'numeric',
-            minute: '2-digit',
-        });
-        expect(screen.getByText(withTime)).toBeInTheDocument();
-    });
-    it('respects a custom locale', () => {
-        render(DateDisplay, {
-            props: { date: sample, format: 'long', locale: 'fr-CA' },
-        });
-        expect(screen.getByText(expected(sample, LONG, 'fr-CA'))).toBeInTheDocument();
-    });
-    it('parses an ISO string input', () => {
-        const iso = '2024-01-15T12:00:00.000Z';
-        const d = new Date(iso);
-        const { container } = render(DateDisplay, { props: { date: iso } });
-        expect(container.querySelector('time')).toHaveAttribute('datetime', d.toISOString());
-    });
-    it('parses a numeric timestamp input', () => {
-        const ts = sample.getTime();
-        const { container } = render(DateDisplay, { props: { date: ts } });
-        expect(container.querySelector('time')).toHaveAttribute('datetime', new Date(ts).toISOString());
-    });
-    it('renders the fallback span for null input', () => {
-        const { container } = render(DateDisplay, {
-            props: { date: null, fallback: 'No date' },
-        });
-        expect(container.querySelector('time')).not.toBeInTheDocument();
-        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();
-    });
-    it('renders "just now" for the current time in relative mode', () => {
-        render(DateDisplay, { props: { date: new Date(), format: 'relative' } });
-        expect(screen.getByText('just now')).toBeInTheDocument();
-    });
-    it('renders "yesterday" for ~1 day ago in relative mode', () => {
-        const d = new Date(Date.now() - 25 * 60 * 60 * 1000); // 25h ago → 1 day
-        render(DateDisplay, { props: { date: d, format: 'relative' } });
-        expect(screen.getByText('yesterday')).toBeInTheDocument();
-    });
-    it('renders "tomorrow" for a near-future date in relative mode', () => {
-        const d = new Date(Date.now() + 23 * 60 * 60 * 1000); // 23h ahead → tomorrow
-        render(DateDisplay, { props: { date: d, format: 'relative' } });
-        expect(screen.getByText('tomorrow')).toBeInTheDocument();
-    });
-    it('appends a custom class to the time element', () => {
-        const { container } = render(DateDisplay, {
-            props: { date: sample, class: 'my-date' },
-        });
-        expect(container.querySelector('time')).toHaveClass('my-date');
-    });
-    it('is axe-clean with a date', async () => {
-        const { container } = render(DateDisplay, { props: { date: sample } });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean with the fallback', async () => {
-        const { container } = render(DateDisplay, { props: { date: null } });
-        await expectNoA11yViolations(container);
-    });
-});

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

@@ -1,223 +0,0 @@
-/**
- * Component tests for Icon (Sweep S11, #1416).
- *
- * Icon is a presentational SVG primitive: decorative by default (aria-hidden),
- * informative when given an aria-label (role="img"). Tests assert the real API
- * from Icon.svelte — preset/path resolution, size/color, and axe-cleanliness in
- * both decorative and labelled modes.
- */
-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', () => {
-    it('renders an svg that is decorative (aria-hidden) by default', () => {
-        const { container } = render(Icon, { props: { name: 'check' } });
-        const svg = container.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-        expect(svg).not.toHaveAttribute('role');
-    });
-    it('resolves a named preset to its path', () => {
-        const { container } = render(Icon, { props: { name: 'check' } });
-        const path = container.querySelector('svg path');
-        expect(path).toHaveAttribute('d', CHECK_PATH);
-    });
-    it('renders a custom path verbatim, taking precedence over name', () => {
-        const custom = 'M0 0h10v10H0z';
-        const { container } = render(Icon, {
-            props: { name: 'check', path: custom },
-        });
-        const path = container.querySelector('svg path');
-        expect(path).toHaveAttribute('d', custom);
-    });
-    it('renders a path with no shape for an unknown preset name', () => {
-        // finalPath resolves to '' for an unknown preset; Svelte omits the empty
-        // `d` attribute entirely, so the path element renders without a shape.
-        const { container } = render(Icon, { props: { name: 'does-not-exist' } });
-        const path = container.querySelector('svg path');
-        expect(path).toBeInTheDocument();
-        expect(path).not.toHaveAttribute('d');
-    });
-    it('becomes informative (role=img + aria-label) when given an aria-label', () => {
-        const { container } = render(Icon, {
-            props: { name: 'search', 'aria-label': 'Search' },
-        });
-        const svg = container.querySelector('svg');
-        expect(svg).toHaveAttribute('role', 'img');
-        expect(svg).toHaveAttribute('aria-label', 'Search');
-        expect(svg).toHaveAttribute('aria-hidden', 'false');
-    });
-    it('converts a numeric size to a px width/height', () => {
-        const { container } = render(Icon, { props: { name: 'menu', size: 32 } });
-        const svg = container.querySelector('svg');
-        expect(svg).toHaveAttribute('width', '32px');
-        expect(svg).toHaveAttribute('height', '32px');
-    });
-    it('passes a string size through unchanged', () => {
-        const { container } = render(Icon, {
-            props: { name: 'menu', size: '1.5em' },
-        });
-        const svg = container.querySelector('svg');
-        expect(svg).toHaveAttribute('width', '1.5em');
-        expect(svg).toHaveAttribute('height', '1.5em');
-    });
-    it('applies the color prop as the svg fill', () => {
-        const { container } = render(Icon, {
-            props: { name: 'menu', color: '#ff0000' },
-        });
-        expect(container.querySelector('svg')).toHaveAttribute('fill', '#ff0000');
-    });
-    it('uses currentColor as the default fill', () => {
-        const { container } = render(Icon, { props: { name: 'menu' } });
-        expect(container.querySelector('svg')).toHaveAttribute('fill', 'currentColor');
-    });
-    it('applies a custom viewBox', () => {
-        const { container } = render(Icon, {
-            props: { name: 'menu', viewBox: '0 0 48 48' },
-        });
-        expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 48 48');
-    });
-    it('is axe-clean when decorative', async () => {
-        const { container } = render(Icon, { props: { name: 'close' } });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean when labelled', async () => {
-        const { container } = render(Icon, {
-            props: { name: 'close', 'aria-label': 'Close dialog' },
-        });
-        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

@@ -1,191 +0,0 @@
-/**
- * Component tests for StatusBadge (Sweep S11, #1416).
- *
- * StatusBadge is a presentational chip: it normalizes a status string, maps it
- * to a color scheme per domain `type`, and renders a humanized label. Tests
- * assert the real API from StatusBadge.svelte — label formatting, custom label
- * override, size/variant classes, scheme-driven CSS custom properties, and
- * axe-cleanliness across variants.
- */
-import { render, screen } from '@testing-library/svelte';
-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();
-    });
-    it('humanizes underscores in the status into spaces', () => {
-        render(StatusBadge, { props: { status: 'on_hold', type: 'project' } });
-        expect(screen.getByText('on hold')).toBeInTheDocument();
-    });
-    it('prefers an explicit label over the status value', () => {
-        render(StatusBadge, {
-            props: { status: 'paid', type: 'invoice', label: 'Paid in full' },
-        });
-        expect(screen.getByText('Paid in full')).toBeInTheDocument();
-        expect(screen.queryByText('paid')).not.toBeInTheDocument();
-    });
-    it('always carries the base status-badge class', () => {
-        const { container } = render(StatusBadge, { props: { status: 'active' } });
-        expect(container.querySelector('span')).toHaveClass('status-badge');
-    });
-    it.each([
-        ['sm', 'sm'],
-        ['lg', 'lg'],
-    ])('applies the %s size class', (size, cls) => {
-        const { container } = render(StatusBadge, {
-            props: { status: 'active', size },
-        });
-        expect(container.querySelector('span')).toHaveClass(cls);
-    });
-    it('omits a size class for the default md size', () => {
-        const { container } = render(StatusBadge, { props: { status: 'active' } });
-        const span = container.querySelector('span');
-        expect(span).not.toHaveClass('sm');
-        expect(span).not.toHaveClass('lg');
-    });
-    it('applies the outline class for the outline variant', () => {
-        const { container } = render(StatusBadge, {
-            props: { status: 'active', variant: 'outline' },
-        });
-        expect(container.querySelector('span')).toHaveClass('outline');
-    });
-    it('maps a known status to its scheme colors via CSS custom properties', () => {
-        const { container } = render(StatusBadge, {
-            props: { status: 'overdue', type: 'invoice' },
-        });
-        const span = container.querySelector('span');
-        // invoice/overdue → error container scheme
-        expect(span.style.getPropertyValue('--badge-bg')).toContain('smrt-color-error-container');
-        expect(span.style.getPropertyValue('--badge-text')).toContain('smrt-color-on-error-container');
-    });
-    it('falls back to a neutral scheme for an unknown status', () => {
-        const { container } = render(StatusBadge, {
-            props: { status: 'totally-unknown', type: 'invoice' },
-        });
-        const span = container.querySelector('span');
-        // The neutral fallback resolves to canonical surface tokens, not a literal
-        // hex. smrt-ui owns the theme system, so the tokens are always defined; a
-        // hardcoded fallback would freeze the wrong color across presets (#1586).
-        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-surface-container-highest)');
-        expect(span.style.getPropertyValue('--badge-text')).toBe('var(--smrt-color-on-surface-variant)');
-    });
-    it('uses bare design tokens with no literal hex fallback in scheme colors', () => {
-        // Regression for #1586: the `var(--token, #hex)` fallbacks were the wrong
-        // colors (e.g. primary-container → green #dcfce7 vs real material light blue
-        // #d3e3fd). Every emitted custom property must be a bare token reference.
-        const { container } = render(StatusBadge, {
-            props: { status: 'paid', type: 'invoice' },
-        });
-        const span = container.querySelector('span');
-        expect(span.style.getPropertyValue('--badge-bg')).toBe('var(--smrt-color-primary-container)');
-        expect(span.style.getPropertyValue('--badge-bg')).not.toContain('#');
-        expect(span.style.getPropertyValue('--badge-text')).not.toContain('#');
-    });
-    it('normalizes spaces and hyphens when matching a scheme key', () => {
-        // 'On-Hold' normalizes to 'on_hold', a known project status.
-        const { container } = render(StatusBadge, {
-            props: { status: 'On-Hold', type: 'project' },
-        });
-        const span = container.querySelector('span');
-        expect(span.style.getPropertyValue('--badge-bg')).toContain('smrt-color-secondary-container');
-    });
-    it.each([
-        ['default', 'active'],
-        ['invoice', 'paid'],
-        ['project', 'completed'],
-        ['expense', 'reimbursed'],
-        ['time', 'approved'],
-        ['compliance', 'valid'],
-        ['estimate', 'accepted'],
-    ])('is axe-clean for type=%s status=%s', async (type, status) => {
-        const { container } = render(StatusBadge, { props: { status, type } });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean for the outline variant', async () => {
-        const { container } = render(StatusBadge, {
-            props: { status: 'active', variant: 'outline' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});