@happyvertical/smrt-ui 0.30.0

package/dist/components/layout/SummaryCard.svelte.d.ts

@@ -0,0 +1,20 @@
+export interface Props {
+    /** Card label */
+    label: string;
+    /** Primary value to display */
+    value: string | number;
+    /** Optional count badge */
+    count?: number;
+    /** Highlight the card */
+    highlight?: boolean;
+    /** Make card clickable with href */
+    href?: string;
+    /** Optional icon (name for Icon or SVG string) */
+    icon?: string;
+    /** Value color variant */
+    variant?: 'default' | 'success' | 'warning' | 'danger';
+}
+declare const SummaryCard: import("svelte").Component<Props, {}, "">;
+type SummaryCard = ReturnType<typeof SummaryCard>;
+export default SummaryCard;
+//# sourceMappingURL=SummaryCard.svelte.d.ts.map

package/dist/components/layout/SummaryCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SummaryCard.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxD;AAoFD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,62 @@
+/**
+ * Component tests for the Container layout primitive (Sweep S11, #1416).
+ *
+ * Mirrors the Button golden pattern: render via Testing Library, assert the
+ * rendered DOM/class/attribute API, and prove 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 Container from '../Container.svelte';
+/** Build a text Snippet for the `children` prop. */
+function textSnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+describe('Container', () => {
+    it('renders slotted children', () => {
+        render(Container, { props: { children: textSnippet('Inside') } });
+        expect(screen.getByText('Inside')).toBeInTheDocument();
+    });
+    it('applies the default lg max-width class', () => {
+        const { container } = render(Container, {
+            props: { children: textSnippet('x') },
+        });
+        const div = container.querySelector('div.container');
+        expect(div).not.toBeNull();
+        expect(div).toHaveClass('container', 'max-w-lg');
+    });
+    it.each([
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        'full',
+    ])('maps maxWidth=%s to the max-w-%s class', (maxWidth) => {
+        const { container } = render(Container, {
+            props: { maxWidth, children: textSnippet('x') },
+        });
+        expect(container.querySelector('div.container')).toHaveClass(`max-w-${maxWidth}`);
+    });
+    it('passes ...rest attributes through to the root element', () => {
+        const { container } = render(Container, {
+            props: {
+                children: textSnippet('x'),
+                id: 'main-region',
+                'data-testid': 'wrap',
+                role: 'region',
+                'aria-label': 'Main content',
+            },
+        });
+        const div = container.querySelector('div.container');
+        expect(div).toHaveAttribute('id', 'main-region');
+        expect(div).toHaveAttribute('data-testid', 'wrap');
+        expect(screen.getByRole('region', { name: 'Main content' })).toBe(div);
+    });
+    it('is axe-clean with content', async () => {
+        const { container } = render(Container, {
+            props: { children: textSnippet('Accessible content') },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,83 @@
+/**
+ * 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

@@ -0,0 +1,50 @@
+/**
+ * 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

@@ -0,0 +1,121 @@
+/**
+ * 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

@@ -0,0 +1,48 @@
+/**
+ * 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

@@ -0,0 +1,93 @@
+/**
+ * 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

@@ -0,0 +1,80 @@
+/**
+ * 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 } 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('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

@@ -0,0 +1,82 @@
+/**
+ * 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 { 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 a raw SVG icon when icon starts with <svg', () => {
+        const { container } = render(SummaryCard, {
+            props: {
+                label: 'Visitors',
+                value: 99,
+                icon: '<svg data-testid="svg-icon" viewBox="0 0 24 24"></svg>',
+            },
+        });
+        expect(container.querySelector('.card-icon svg')).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);
+    });
+});

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

@@ -0,0 +1,12 @@
+/**
+ * Layout components - Page structure and containers
+ */
+export { default as Container } from './Container.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Masthead } from './Masthead.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as SummaryCard } from './SummaryCard.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}