@happyvertical/smrt-ui 0.53.1 → 0.53.2

package/dist/components/layout/__tests__/EmptyState.test.js

@@ -1,83 +0,0 @@
-/**
- * Component tests for the EmptyState layout primitive (Sweep S11, #1416).
- *
- * Asserts the title/description render, the built-in vs. custom-snippet icon,
- * the optional action (link vs. button + onaction callback), the size variant,
- * and axe-clean output.
- */
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import EmptyState from '../EmptyState.svelte';
-function iconSnippet(text) {
-    return createRawSnippet(() => ({
-        render: () => `<span data-testid="custom-icon">${text}</span>`,
-    }));
-}
-describe('EmptyState', () => {
-    it('renders the title as a heading', () => {
-        render(EmptyState, { props: { title: 'No results' } });
-        expect(screen.getByRole('heading', { name: 'No results' })).toBeInTheDocument();
-    });
-    it('renders the optional description', () => {
-        render(EmptyState, {
-            props: { title: 'Empty', description: 'Try adjusting your filters.' },
-        });
-        expect(screen.getByText('Try adjusting your filters.')).toBeInTheDocument();
-    });
-    it('renders a default built-in icon when icon is a string name', () => {
-        const { container } = render(EmptyState, {
-            props: { title: 'Empty', icon: 'search' },
-        });
-        expect(container.querySelector('.icon-container svg')).not.toBeNull();
-    });
-    it('renders a custom icon snippet', () => {
-        render(EmptyState, {
-            props: { title: 'Empty', icon: iconSnippet('★') },
-        });
-        expect(screen.getByTestId('custom-icon')).toHaveTextContent('★');
-    });
-    it('renders the action as a link when actionHref is set', () => {
-        render(EmptyState, {
-            props: {
-                title: 'Empty',
-                actionLabel: 'Create one',
-                actionHref: '/new',
-            },
-        });
-        const link = screen.getByRole('link', { name: 'Create one' });
-        expect(link).toHaveAttribute('href', '/new');
-    });
-    it('renders the action as a button and fires onaction when clicked', async () => {
-        const onaction = vi.fn();
-        render(EmptyState, {
-            props: { title: 'Empty', actionLabel: 'Reload', onaction },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Reload' }));
-        expect(onaction).toHaveBeenCalledTimes(1);
-    });
-    it('renders no action control when no actionLabel is provided', () => {
-        render(EmptyState, { props: { title: 'Empty' } });
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
-        expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    });
-    it('applies the size variant class', () => {
-        const { container } = render(EmptyState, {
-            props: { title: 'Empty', size: 'sm' },
-        });
-        expect(container.querySelector('.empty-state')).toHaveClass('sm');
-    });
-    it('is axe-clean with a description and button action', async () => {
-        const { container } = render(EmptyState, {
-            props: {
-                title: 'Nothing here yet',
-                description: 'Add your first item to get started.',
-                actionLabel: 'Add item',
-                onaction: () => { },
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/Footer.test.js

@@ -1,50 +0,0 @@
-/**
- * Component tests for the Footer layout primitive (Sweep S11, #1416).
- *
- * Footer renders a top-level <footer> (contentinfo landmark) with an
- * i18n-resolved copyright line and optional children (footer links).
- * useI18n() falls back to registered English defaults outside a Provider.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Footer from '../Footer.svelte';
-function snippet(html) {
-    return createRawSnippet(() => ({ render: () => html }));
-}
-describe('Footer', () => {
-    it('renders a top-level contentinfo landmark', () => {
-        render(Footer, { props: {} });
-        expect(screen.getByRole('contentinfo')).toBeInTheDocument();
-    });
-    it('renders the current year and i18n-resolved rights notice', () => {
-        render(Footer, { props: {} });
-        const year = String(new Date().getFullYear());
-        const copyright = screen.getByText((_, el) => el?.classList.contains('copyright') === true &&
-            el.textContent?.includes(year) === true &&
-            el.textContent?.includes('All rights reserved.') === true);
-        expect(copyright).toBeInTheDocument();
-    });
-    it('renders the children (footer links)', () => {
-        render(Footer, {
-            props: {
-                children: snippet('<a href="/privacy">Privacy</a>'),
-            },
-        });
-        const link = screen.getByRole('link', { name: 'Privacy' });
-        expect(link).toHaveAttribute('href', '/privacy');
-    });
-    it('omits the footer-links container when no children are provided', () => {
-        const { container } = render(Footer, { props: {} });
-        expect(container.querySelector('.footer-links')).toBeNull();
-    });
-    it('is axe-clean with footer links', async () => {
-        const { container } = render(Footer, {
-            props: {
-                children: snippet('<a href="/privacy">Privacy</a>'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/Grid.test.js

@@ -1,121 +0,0 @@
-/**
- * Component tests for the Grid layout primitive (Sweep S11, #1416).
- *
- * Asserts the column/gap/alignment prop API maps to the expected
- * classes/inline styles, snippet rendering, attribute pass-through, and
- * axe-clean output.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Grid from '../Grid.svelte';
-function textSnippet(text) {
-    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
-}
-/** The grid element is the `.grid` div (the header lives in a sibling div). */
-function gridEl(container) {
-    const el = container.querySelector('div.grid');
-    if (!el)
-        throw new Error('grid element not found');
-    return el;
-}
-describe('Grid', () => {
-    it('renders slotted children', () => {
-        render(Grid, { props: { children: textSnippet('Cell') } });
-        expect(screen.getByText('Cell')).toBeInTheDocument();
-    });
-    it('uses auto-fill grid-template-columns by default (columns=auto)', () => {
-        const { container } = render(Grid, {
-            props: { children: textSnippet('x') },
-        });
-        expect(gridEl(container).getAttribute('style')).toContain('grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))');
-    });
-    it('maps a numeric column count to a fixed-column template', () => {
-        const { container } = render(Grid, {
-            props: { columns: 3, children: textSnippet('x') },
-        });
-        expect(gridEl(container).getAttribute('style')).toContain('grid-template-columns: repeat(3, 1fr)');
-    });
-    it('emits responsive CSS variables and the grid-responsive class for a responsive columns object', () => {
-        const { container } = render(Grid, {
-            props: { columns: { md: 2, xl: 4 }, children: textSnippet('x') },
-        });
-        const el = gridEl(container);
-        expect(el).toHaveClass('grid-responsive');
-        const style = el.getAttribute('style') ?? '';
-        expect(style).toContain('--grid-columns-md: 2');
-        expect(style).toContain('--grid-columns-xl: 4');
-        // Unspecified breakpoints are not emitted (CSS cascade handles inheritance).
-        expect(style).not.toContain('--grid-columns-sm');
-    });
-    it('applies a uniform gap class when row and column gaps match (default md)', () => {
-        const { container } = render(Grid, {
-            props: { children: textSnippet('x') },
-        });
-        expect(gridEl(container)).toHaveClass('gap-md');
-    });
-    it.each([
-        'sm',
-        'md',
-        'lg',
-        'xl',
-    ])('maps a uniform gap=%s to gap-%s', (gap) => {
-        const { container } = render(Grid, {
-            props: { gap, children: textSnippet('x') },
-        });
-        expect(gridEl(container)).toHaveClass(`gap-${gap}`);
-    });
-    it('splits row/column gap classes when they differ', () => {
-        const { container } = render(Grid, {
-            props: { gap: { row: 'sm', column: 'lg' }, children: textSnippet('x') },
-        });
-        const el = gridEl(container);
-        expect(el).toHaveClass('row-gap-sm', 'col-gap-lg');
-        expect(el).not.toHaveClass('gap-sm');
-    });
-    it('maps alignItems / justifyItems / autoFlow to inline styles', () => {
-        const { container } = render(Grid, {
-            props: {
-                alignItems: 'center',
-                justifyItems: 'end',
-                autoFlow: 'column',
-                children: textSnippet('x'),
-            },
-        });
-        const style = gridEl(container).getAttribute('style') ?? '';
-        expect(style).toContain('align-items: center');
-        expect(style).toContain('justify-items: end');
-        expect(style).toContain('grid-auto-flow: column');
-    });
-    it('renders the header snippet above the grid', () => {
-        render(Grid, {
-            props: {
-                header: textSnippet('Grid Heading'),
-                children: textSnippet('Cell'),
-            },
-        });
-        expect(screen.getByText('Grid Heading')).toBeInTheDocument();
-    });
-    it('passes ...rest attributes through to the grid element', () => {
-        const { container } = render(Grid, {
-            props: {
-                children: textSnippet('x'),
-                id: 'gallery',
-                'data-testid': 'grid',
-            },
-        });
-        const el = gridEl(container);
-        expect(el).toHaveAttribute('id', 'gallery');
-        expect(el).toHaveAttribute('data-testid', 'grid');
-    });
-    it('is axe-clean with content', async () => {
-        const { container } = render(Grid, {
-            props: {
-                header: textSnippet('Items'),
-                children: textSnippet('Accessible cell'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/Header.test.js

@@ -1,48 +0,0 @@
-/**
- * Component tests for the Header (site header) layout primitive (Sweep S11, #1416).
- *
- * Header renders a top-level <header> (banner landmark) wrapping a Container,
- * with optional logo and nav snippets.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Header from '../Header.svelte';
-function snippet(html) {
-    return createRawSnippet(() => ({ render: () => html }));
-}
-describe('Header', () => {
-    it('renders a top-level banner landmark', () => {
-        render(Header, { props: {} });
-        expect(screen.getByRole('banner')).toBeInTheDocument();
-    });
-    it('renders the logo snippet', () => {
-        render(Header, {
-            props: { logo: snippet('<h1>Acme</h1>') },
-        });
-        expect(screen.getByRole('heading', { name: 'Acme' })).toBeInTheDocument();
-    });
-    it('renders the nav snippet inside a navigation landmark', () => {
-        render(Header, {
-            props: { nav: snippet('<a href="/about">About</a>') },
-        });
-        const nav = screen.getByRole('navigation');
-        expect(nav).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
-    });
-    it('omits logo and nav when their snippets are not provided', () => {
-        const { container } = render(Header, { props: {} });
-        expect(container.querySelector('.logo')).toBeNull();
-        expect(container.querySelector('.nav')).toBeNull();
-    });
-    it('is axe-clean with logo and nav', async () => {
-        const { container } = render(Header, {
-            props: {
-                logo: snippet('<h1><a href="/">Acme</a></h1>'),
-                nav: snippet('<a href="/about">About</a>'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/Masthead.test.js

@@ -1,93 +0,0 @@
-/**
- * Component tests for the Masthead layout primitive (Sweep S11, #1416).
- *
- * Masthead renders a date (as a <time>), an optional location link, and
- * nav/mobileNav snippets inside <nav> landmarks. The root is a plain <div>
- * (no banner landmark). The mobile home icon's aria-label is i18n-resolved;
- * useI18n() falls back to registered English defaults outside a Provider.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Masthead from '../Masthead.svelte';
-function snippet(html) {
-    return createRawSnippet(() => ({ render: () => html }));
-}
-describe('Masthead', () => {
-    it('renders a provided date string', () => {
-        render(Masthead, { props: { date: 'Monday, June 1, 2026' } });
-        expect(screen.getAllByText('Monday, June 1, 2026').length).toBeGreaterThan(0);
-    });
-    it('renders the date inside a <time> element', () => {
-        const { container } = render(Masthead, {
-            props: { date: 'June 1, 2026' },
-        });
-        const time = container.querySelector('time');
-        expect(time).not.toBeNull();
-        expect(time).toHaveTextContent('June 1, 2026');
-    });
-    it('wraps the date in a link when dateHref is provided', () => {
-        render(Masthead, {
-            props: { date: 'June 1, 2026', dateHref: '/archive/2026-06-01' },
-        });
-        const link = screen.getByRole('link', { name: 'June 1, 2026' });
-        expect(link).toHaveAttribute('href', '/archive/2026-06-01');
-    });
-    it('renders the location as a link to locationHref', () => {
-        render(Masthead, {
-            props: { location: 'New York', locationHref: '/ny' },
-        });
-        const link = screen.getByRole('link', { name: 'New York' });
-        expect(link).toHaveAttribute('href', '/ny');
-    });
-    it('omits the location link when location is empty', () => {
-        const { container } = render(Masthead, { props: { location: '' } });
-        expect(container.querySelector('.location')).toBeNull();
-    });
-    it('renders the nav snippet inside a navigation landmark', () => {
-        render(Masthead, {
-            props: { nav: snippet('<a href="/sections">Sections</a>') },
-        });
-        // Masthead renders both a desktop and a mobile layout in the DOM (CSS hides
-        // one); with no `mobileNav`, the mobile layout falls back to `nav`, so the
-        // link appears in both. Assert at least one navigation landmark + link.
-        expect(screen.getAllByRole('navigation').length).toBeGreaterThan(0);
-        expect(screen.getAllByRole('link', { name: 'Sections' }).length).toBeGreaterThan(0);
-    });
-    it('renders a distinct mobileNav snippet when provided', () => {
-        render(Masthead, {
-            props: {
-                nav: snippet('<a href="/sections">Sections</a>'),
-                mobileNav: snippet('<a href="/menu">Menu</a>'),
-            },
-        });
-        expect(screen.getByRole('link', { name: 'Menu' })).toBeInTheDocument();
-    });
-    it('exposes a home icon link with an accessible (i18n-resolved) label', () => {
-        render(Masthead, { props: { locationHref: '/home' } });
-        const link = screen.getByRole('link', { name: 'Home' });
-        expect(link).toHaveAttribute('href', '/home');
-    });
-    it('labels the desktop and mobile nav landmarks distinctly', () => {
-        // Masthead emits both a desktop and a mobile layout (one CSS-hidden). Each
-        // <nav> carries a distinct aria-label so the two landmarks stay unique.
-        render(Masthead, {
-            props: { nav: snippet('<a href="/sections">Sections</a>') },
-        });
-        expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument();
-        expect(screen.getByRole('navigation', { name: 'Mobile' })).toBeInTheDocument();
-    });
-    it('is axe-clean with date, location, and nav', async () => {
-        const { container } = render(Masthead, {
-            props: {
-                date: 'June 1, 2026',
-                dateHref: '/archive',
-                location: 'New York',
-                locationHref: '/ny',
-                nav: snippet('<a href="/sections">Sections</a>'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/PageHeader.test.js

@@ -1,166 +0,0 @@
-/**
- * Component tests for the PageHeader layout primitive (Sweep S11, #1416).
- *
- * PageHeader renders a top-level <header> (banner landmark) with an <h1>
- * title, optional subtitle, optional back link, and actions/children snippets.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet, flushSync } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import PageHeader from '../PageHeader.svelte';
-function snippet(html) {
-    return createRawSnippet(() => ({ render: () => html }));
-}
-describe('PageHeader', () => {
-    it('renders the title as a level-1 heading', () => {
-        render(PageHeader, { props: { title: 'Dashboard' } });
-        const heading = screen.getByRole('heading', {
-            name: 'Dashboard',
-            level: 1,
-        });
-        expect(heading).toBeInTheDocument();
-    });
-    it('renders a top-level banner landmark', () => {
-        render(PageHeader, { props: { title: 'Dashboard' } });
-        expect(screen.getByRole('banner')).toBeInTheDocument();
-    });
-    it('renders the optional subtitle', () => {
-        render(PageHeader, {
-            props: { title: 'Dashboard', subtitle: 'Overview of your account' },
-        });
-        expect(screen.getByText('Overview of your account')).toBeInTheDocument();
-    });
-    it('renders a back link with the default label when backHref is set', () => {
-        render(PageHeader, {
-            props: { title: 'Detail', backHref: '/list' },
-        });
-        const link = screen.getByRole('link', { name: 'Back' });
-        expect(link).toHaveAttribute('href', '/list');
-    });
-    it('uses a custom back label', () => {
-        render(PageHeader, {
-            props: { title: 'Detail', backHref: '/list', backLabel: 'All items' },
-        });
-        expect(screen.getByRole('link', { name: 'All items' })).toBeInTheDocument();
-    });
-    it('renders the actions snippet', () => {
-        render(PageHeader, {
-            props: {
-                title: 'Detail',
-                actions: snippet('<button type="button">Edit</button>'),
-            },
-        });
-        expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
-    });
-    it('renders extra children below the title', () => {
-        render(PageHeader, {
-            props: {
-                title: 'Detail',
-                children: snippet('<p>Extra content</p>'),
-            },
-        });
-        expect(screen.getByText('Extra content')).toBeInTheDocument();
-    });
-    it('omits the back link when backHref is not provided', () => {
-        render(PageHeader, { props: { title: 'Detail' } });
-        expect(screen.queryByRole('link')).not.toBeInTheDocument();
-    });
-    it('renders ancestors-only crumbs above the title', () => {
-        render(PageHeader, {
-            props: {
-                title: 'Fair opens Friday',
-                crumbs: [
-                    { label: 'Alpha Times', href: '/sites/alpha' },
-                    { label: 'Content', href: '/sites/alpha/articles' },
-                ],
-            },
-        });
-        const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
-        expect(nav).toHaveAttribute('data-shell-breadcrumbs');
-        const links = nav.querySelectorAll('a');
-        expect([...links].map((a) => a.textContent)).toEqual([
-            'Alpha Times',
-            'Content',
-        ]);
-        // The current page is the heading, not a crumb.
-        expect(nav).not.toHaveTextContent('Fair opens Friday');
-        expect(screen.getByRole('heading', { level: 1, name: 'Fair opens Friday' })).toHaveAttribute('data-shell-page-title');
-    });
-    it('renders no crumb row without ancestors', () => {
-        render(PageHeader, { props: { title: 'Content', crumbs: [] } });
-        expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
-    });
-    it('renders the meta snippet under the title', () => {
-        render(PageHeader, {
-            props: { title: 'Detail', meta: snippet('<span>Draft</span>') },
-        });
-        expect(screen.getByText('Draft')).toBeInTheDocument();
-    });
-    it('takes its trail from the shell and reports its title', () => {
-        const reports = [];
-        const context = new Map([
-            [
-                Symbol.for('smrt-ui.page-header'),
-                {
-                    crumbs: (parents) => [
-                        { label: 'Alpha Times', href: '/sites/alpha' },
-                        ...parents,
-                    ],
-                    report: (page) => {
-                        reports.push(page);
-                        return undefined;
-                    },
-                },
-            ],
-        ]);
-        render(PageHeader, {
-            props: {
-                title: 'Create video',
-                parents: [{ label: 'Videos', href: '/sites/alpha/articles/a1/videos' }],
-            },
-            context,
-        });
-        const nav = screen.getByRole('navigation', { name: 'Breadcrumb' });
-        expect([...nav.querySelectorAll('a')].map((a) => a.textContent)).toEqual([
-            'Alpha Times',
-            'Videos',
-        ]);
-        flushSync();
-        expect(reports).toEqual([
-            {
-                title: 'Create video',
-                parents: [{ label: 'Videos', href: '/sites/alpha/articles/a1/videos' }],
-            },
-        ]);
-    });
-    it('renders an editable title inside the h1 and keeps it visible on phones', async () => {
-        const { container } = render(PageHeader, {
-            props: {
-                title: 'Council passes budget',
-                titleField: snippet('<input name="title" aria-label="Title" value="Council passes budget" />'),
-            },
-        });
-        const heading = screen.getByRole('heading', { level: 1 });
-        const field = screen.getByRole('textbox', { name: 'Title' });
-        expect(heading).toContainElement(field);
-        // The heading is named by the field's value; the field keeps its label.
-        expect(heading).toHaveAccessibleName('Council passes budget');
-        // No data-shell-page-title: the shell must not hide the input on phones.
-        expect(heading).not.toHaveAttribute('data-shell-page-title');
-        expect(heading).toHaveAttribute('data-page-title-field');
-        expect(container.querySelectorAll('h1')).toHaveLength(1);
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean with subtitle, back link, and actions', async () => {
-        const { container } = render(PageHeader, {
-            props: {
-                title: 'Settings',
-                subtitle: 'Manage your preferences',
-                backHref: '/home',
-                actions: snippet('<button type="button">Save</button>'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/layout/__tests__/SummaryCard.test.js

@@ -1,104 +0,0 @@
-/**
- * Component tests for the SummaryCard layout primitive (Sweep S11, #1416).
- *
- * Asserts the label/value render, the optional count badge and icon, the
- * variant→value-color-class mapping, the clickable link variant, and
- * axe-clean output across a couple of states.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import SummaryCard from '../SummaryCard.svelte';
-describe('SummaryCard', () => {
-    it('renders the label and value', () => {
-        render(SummaryCard, { props: { label: 'Revenue', value: '$1,200' } });
-        expect(screen.getByText('Revenue')).toBeInTheDocument();
-        expect(screen.getByText('$1,200')).toBeInTheDocument();
-    });
-    it('renders a numeric value', () => {
-        render(SummaryCard, { props: { label: 'Orders', value: 42 } });
-        expect(screen.getByText('42')).toBeInTheDocument();
-    });
-    it('renders the optional count badge', () => {
-        const { container } = render(SummaryCard, {
-            props: { label: 'Tasks', value: 'Open', count: 7 },
-        });
-        expect(container.querySelector('.card-count')).toHaveTextContent('7');
-    });
-    it('renders a count badge of 0 (undefined check, not falsy)', () => {
-        const { container } = render(SummaryCard, {
-            props: { label: 'Tasks', value: 'Done', count: 0 },
-        });
-        expect(container.querySelector('.card-count')).toHaveTextContent('0');
-    });
-    it('omits the count badge when count is undefined', () => {
-        const { container } = render(SummaryCard, {
-            props: { label: 'Tasks', value: 'Open' },
-        });
-        expect(container.querySelector('.card-count')).toBeNull();
-    });
-    it('renders an icon via the Icon component when icon is a known name', () => {
-        const { container } = render(SummaryCard, {
-            // `search` is a real Icon preset, so the rendered <path> must carry a
-            // non-empty `d` — proving the icon-name path actually resolved (an
-            // unknown name would still render an <svg> but with an empty path).
-            props: { label: 'Visitors', value: 99, icon: 'search' },
-        });
-        const iconPath = container.querySelector('.card-icon svg path');
-        expect(iconPath?.getAttribute('d')).toBeTruthy();
-    });
-    it('does NOT inject a raw SVG string as markup (no {@html} sink) — #1591', () => {
-        const { container } = render(SummaryCard, {
-            props: {
-                label: 'Visitors',
-                value: 99,
-                // A would-be XSS payload: the string is forwarded to <Icon name>, never
-                // rendered as HTML, so the attacker-controlled element must be absent.
-                icon: '<svg data-evil="1" viewBox="0 0 24 24"></svg>',
-            },
-        });
-        expect(container.querySelector('svg[data-evil]')).toBeNull();
-    });
-    it('renders custom icon markup via the iconContent snippet', () => {
-        const iconContent = createRawSnippet(() => ({
-            render: () => '<span data-testid="custom-icon">★</span>',
-        }));
-        const { container } = render(SummaryCard, {
-            props: { label: 'Starred', value: 1, iconContent },
-        });
-        expect(container.querySelector('.card-icon [data-testid="custom-icon"]')).not.toBeNull();
-    });
-    it('renders as a clickable link when href is provided', () => {
-        render(SummaryCard, {
-            props: { label: 'Reports', value: 12, href: '/reports' },
-        });
-        const link = screen.getByRole('link');
-        expect(link).toHaveAttribute('href', '/reports');
-        expect(link).toHaveClass('clickable');
-    });
-    it('applies the highlight class when highlight is set', () => {
-        const { container } = render(SummaryCard, {
-            props: { label: 'Featured', value: 1, highlight: true },
-        });
-        expect(container.querySelector('.summary-card')).toHaveClass('highlight');
-    });
-    it.each([
-        ['default', 'color-default'],
-        ['success', 'color-success'],
-        ['warning', 'color-warning'],
-        ['danger', 'color-error'],
-    ])('maps variant=%s to the %s value class', (variant, expected) => {
-        const { container } = render(SummaryCard, {
-            props: { label: 'Metric', value: 5, variant },
-        });
-        expect(container.querySelector('.card-value')).toHaveClass(expected);
-    });
-    it.each([
-        { label: 'Static', value: '$10' },
-        { label: 'Linked', value: 3, href: '/go', count: 2 },
-    ])('is axe-clean (%o)', async (props) => {
-        const { container } = render(SummaryCard, { props });
-        await expectNoA11yViolations(container);
-    });
-});