@classic-homes/theme-svelte 1.22.0 → 1.22.2

package/dist/__tests__/a11y/SegmentedControl.a11y.test.js

@@ -1,50 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import SegmentedControl from '../../lib/components/SegmentedControl.svelte';
-const options = [
-    { value: 'community', label: 'Community' },
-    { value: 'collection', label: 'Collection' },
-    { value: 'floor-plan', label: 'Floor Plan', disabled: true },
-];
-describe('SegmentedControl accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(SegmentedControl, {
-            props: { options, label: 'Group homes by' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('is a labelled radiogroup of radios', () => {
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        const group = screen.getByRole('radiogroup', { name: 'Group homes by' });
-        expect(group).toBeInTheDocument();
-        expect(screen.getAllByRole('radio')).toHaveLength(3);
-    });
-    it('selects the first enabled option by default', () => {
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        expect(screen.getByRole('radio', { name: 'Community' })).toHaveAttribute('aria-checked', 'true');
-        expect(screen.getByRole('radio', { name: 'Floor Plan' })).toBeDisabled();
-    });
-    it('moves selection with arrow keys and skips disabled options', async () => {
-        const user = userEvent.setup();
-        const onValueChange = vi.fn();
-        render(SegmentedControl, { props: { options, label: 'Group homes by', onValueChange } });
-        const community = screen.getByRole('radio', { name: 'Community' });
-        const collection = screen.getByRole('radio', { name: 'Collection' });
-        community.focus();
-        await user.keyboard('{ArrowRight}');
-        expect(collection).toHaveAttribute('aria-checked', 'true');
-        expect(onValueChange).toHaveBeenLastCalledWith('collection');
-        // Floor Plan is disabled, so the next step loops back to Community
-        await user.keyboard('{ArrowRight}');
-        expect(community).toHaveAttribute('aria-checked', 'true');
-    });
-    it('never deselects: clicking the selected option keeps it checked', async () => {
-        const user = userEvent.setup();
-        render(SegmentedControl, { props: { options, label: 'Group homes by' } });
-        const community = screen.getByRole('radio', { name: 'Community' });
-        await user.click(community);
-        expect(community).toHaveAttribute('aria-checked', 'true');
-    });
-});

package/dist/__tests__/a11y/Switch.a11y.test.js

@@ -1,95 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import Switch from '../../lib/components/Switch.svelte';
-describe('Switch accessibility', () => {
-    it('should have no axe violations with aria-label', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-label': 'Enable notifications' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with aria-labelledby', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-labelledby': 'switch-label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'switch-label';
-        labelSpan.textContent = 'Enable notifications';
-        container.insertBefore(labelSpan, container.firstChild);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations when checked', async () => {
-        const { container } = render(Switch, {
-            props: { 'aria-label': 'Enable feature', checked: true },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch' },
-        });
-        const switchElement = screen.getByRole('switch');
-        await userEvent.tab();
-        expect(switchElement).toHaveFocus();
-    });
-    it('should be togglable with keyboard (Space)', async () => {
-        let checked = false;
-        render(Switch, {
-            props: {
-                'aria-label': 'Test switch',
-                onchange: (value) => {
-                    checked = value;
-                },
-            },
-        });
-        await userEvent.tab();
-        await userEvent.keyboard(' ');
-        expect(checked).toBe(true);
-    });
-    it('should not be focusable when disabled', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Disabled switch', disabled: true },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toBeDisabled();
-    });
-    it('should have correct aria-checked state when unchecked', () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch', checked: false },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-checked', 'false');
-    });
-    it('should have correct aria-checked state when checked', () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch', checked: true },
-        });
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-checked', 'true');
-    });
-    it('should support aria-labelledby', () => {
-        const { container } = render(Switch, {
-            props: { 'aria-labelledby': 'label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'label';
-        labelSpan.textContent = 'Custom Label';
-        container.insertBefore(labelSpan, container.firstChild);
-        const switchElement = screen.getByRole('switch');
-        expect(switchElement).toHaveAttribute('aria-labelledby', 'label');
-    });
-    it('should have visible focus indicator', async () => {
-        render(Switch, {
-            props: { 'aria-label': 'Test switch' },
-        });
-        const switchElement = screen.getByRole('switch');
-        await userEvent.tab();
-        expect(switchElement).toHaveFocus();
-        // Focus styles are applied via focus-visible classes
-    });
-});

package/dist/__tests__/a11y/Tabs.a11y.test.js

@@ -1,116 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import { createRawSnippet } from 'svelte';
-import Tabs from '../../lib/components/Tabs.svelte';
-describe('Tabs accessibility', () => {
-    const defaultTabs = [
-        { id: 'tab1', label: 'Tab 1' },
-        { id: 'tab2', label: 'Tab 2' },
-        { id: 'tab3', label: 'Tab 3' },
-    ];
-    it('should have no axe violations', async () => {
-        const { container } = render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs', id: 'test-tabs' },
-        });
-        // Add tab panels so aria-controls references are valid
-        defaultTabs.forEach((tab, i) => {
-            const panel = document.createElement('div');
-            panel.id = `test-tabs-panel-${tab.id}`;
-            panel.setAttribute('role', 'tabpanel');
-            panel.setAttribute('aria-labelledby', `test-tabs-tab-${tab.id}`);
-            panel.textContent = `Panel ${i + 1}`;
-            if (i > 0)
-                panel.hidden = true;
-            container.appendChild(panel);
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have proper tablist role', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tablist = screen.getByRole('tablist');
-        expect(tablist).toBeInTheDocument();
-    });
-    it('should have proper tab roles', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-    });
-    it('should have accessible label on tablist', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Account settings' },
-        });
-        const tablist = screen.getByRole('tablist');
-        expect(tablist).toHaveAttribute('aria-label', 'Account settings');
-    });
-    it('should indicate selected tab with aria-selected', () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
-        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
-    });
-    it('should navigate with arrow keys', async () => {
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        // Focus first tab
-        tabs[0].focus();
-        expect(tabs[0]).toHaveFocus();
-        // Navigate right
-        await userEvent.keyboard('{ArrowRight}');
-        expect(tabs[1]).toHaveFocus();
-        // Navigate right again
-        await userEvent.keyboard('{ArrowRight}');
-        expect(tabs[2]).toHaveFocus();
-        // Navigate left
-        await userEvent.keyboard('{ArrowLeft}');
-        expect(tabs[1]).toHaveFocus();
-    });
-    it('should activate tab with click', async () => {
-        const user = userEvent.setup();
-        render(Tabs, {
-            props: { tabs: defaultTabs, value: 'tab1', label: 'Test tabs' },
-        });
-        const tabs = screen.getAllByRole('tab');
-        // Click second tab
-        await user.click(tabs[1]);
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-    });
-    it('should omit aria-controls when no panel exists', () => {
-        // Without children there is no panel in the DOM; an aria-controls pointing
-        // at a missing element is an ARIA validity failure (axe: aria-valid-attr-value)
-        render(Tabs, {
-            props: { tabs: defaultTabs, label: 'Test tabs' },
-        });
-        for (const tab of screen.getAllByRole('tab')) {
-            expect(tab).not.toHaveAttribute('aria-controls');
-        }
-    });
-    it('should have aria-controls referencing a real panel when children exist', () => {
-        const children = createRawSnippet(() => ({
-            render: () => '<div id="test-tabs-panel-tab1" role="tabpanel">Panel 1</div>',
-        }));
-        render(Tabs, {
-            props: { tabs: defaultTabs, value: 'tab1', id: 'test-tabs', label: 'Test tabs', children },
-        });
-        const tabs = screen.getAllByRole('tab');
-        const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true');
-        expect(selectedTab).toHaveAttribute('aria-controls', 'test-tabs-panel-tab1');
-        // The reference must resolve to an element that exists
-        expect(document.getElementById('test-tabs-panel-tab1')).not.toBeNull();
-        // Unselected tabs have no panel mounted, so no aria-controls
-        for (const tab of tabs.filter((t) => t !== selectedTab)) {
-            expect(tab).not.toHaveAttribute('aria-controls');
-        }
-    });
-});

package/dist/__tests__/a11y/Textarea.a11y.test.js

@@ -1,111 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import Textarea from '../../lib/components/Textarea.svelte';
-describe('Textarea accessibility', () => {
-    it('should have no axe violations with aria-label', async () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-label': 'Description' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with aria-invalid', async () => {
-        const { container } = render(Textarea, {
-            props: {
-                'aria-label': 'Description',
-                'aria-invalid': true,
-                'aria-describedby': 'error',
-            },
-        });
-        const errorSpan = document.createElement('span');
-        errorSpan.id = 'error';
-        errorSpan.textContent = 'Description is required';
-        container.appendChild(errorSpan);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Test textarea' },
-        });
-        const textarea = screen.getByRole('textbox');
-        await userEvent.tab();
-        expect(textarea).toHaveFocus();
-    });
-    it('should support aria-describedby for help text', () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-label': 'Comments', 'aria-describedby': 'help' },
-        });
-        const helpSpan = document.createElement('span');
-        helpSpan.id = 'help';
-        helpSpan.textContent = 'Enter your comments here';
-        container.appendChild(helpSpan);
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-describedby', 'help');
-    });
-    it('should support aria-labelledby', () => {
-        const { container } = render(Textarea, {
-            props: { 'aria-labelledby': 'label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'label';
-        labelSpan.textContent = 'Custom Label';
-        container.insertBefore(labelSpan, container.firstChild);
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-labelledby', 'label');
-    });
-    it('should apply error styling when aria-invalid is true', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('aria-invalid', 'true');
-        expect(textarea.className).toContain('border-destructive');
-    });
-    it('should apply error styling when aria-invalid is "true" string', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': 'true' },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea.className).toContain('border-destructive');
-    });
-    it('should not apply error styling when aria-invalid is false', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Description', 'aria-invalid': false },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea.className).not.toContain('border-destructive');
-    });
-    it('should be disabled when disabled prop is true', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Disabled textarea', disabled: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toBeDisabled();
-    });
-    it('should support required attribute', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Required field', required: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toBeRequired();
-    });
-    it('should support readonly attribute', () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Readonly field', readonly: true },
-        });
-        const textarea = screen.getByRole('textbox');
-        expect(textarea).toHaveAttribute('readonly');
-    });
-    it('should have visible focus indicator', async () => {
-        render(Textarea, {
-            props: { 'aria-label': 'Test textarea' },
-        });
-        const textarea = screen.getByRole('textbox');
-        await userEvent.tab();
-        expect(textarea).toHaveFocus();
-        // Focus styles are applied via focus-visible classes
-    });
-});

package/dist/__tests__/a11y/Toolbar.a11y.test.js

@@ -1,31 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import { createRawSnippet } from 'svelte';
-import Toolbar from '../../lib/components/Toolbar.svelte';
-const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
-describe('Toolbar accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(Toolbar, {
-            props: {
-                label: 'Inventory tools',
-                children: snippet('<button type="button">Filters</button>'),
-                end: snippet('<button type="button">Map</button>'),
-            },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('is a labelled group that renders both slots', () => {
-        render(Toolbar, {
-            props: {
-                label: 'Inventory tools',
-                children: snippet('<span>89 homes</span>'),
-                end: snippet('<button type="button">Map</button>'),
-            },
-        });
-        const group = screen.getByRole('group', { name: 'Inventory tools' });
-        expect(group).toHaveClass('bg-toolbar');
-        expect(screen.getByText('89 homes')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Map' })).toBeInTheDocument();
-    });
-});

package/dist/__tests__/a11y/ViewToggle.a11y.test.js

@@ -1,40 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import ViewToggle from '../../lib/components/ViewToggle.svelte';
-describe('ViewToggle accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(ViewToggle);
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('exposes list / grid / map radios with accessible names', () => {
-        render(ViewToggle);
-        expect(screen.getByRole('radiogroup', { name: 'View' })).toBeInTheDocument();
-        expect(screen.getByRole('radio', { name: 'List view' })).toHaveAttribute('aria-checked', 'true');
-        expect(screen.getByRole('radio', { name: 'Grid view' })).toBeInTheDocument();
-        expect(screen.getByRole('radio', { name: 'Map view' })).toBeInTheDocument();
-    });
-    it('changes the view with the keyboard and reports it', async () => {
-        const user = userEvent.setup();
-        const onValueChange = vi.fn();
-        render(ViewToggle, { props: { onValueChange } });
-        screen.getByRole('radio', { name: 'List view' }).focus();
-        await user.keyboard('{ArrowRight}');
-        expect(screen.getByRole('radio', { name: 'Grid view' })).toHaveAttribute('aria-checked', 'true');
-        expect(onValueChange).toHaveBeenLastCalledWith('grid');
-    });
-    it('honours a custom option set and value', () => {
-        render(ViewToggle, {
-            props: {
-                label: 'Layout',
-                value: 'cards',
-                options: [
-                    { value: 'table', icon: 'list', label: 'Table' },
-                    { value: 'cards', icon: 'grid', label: 'Cards' },
-                ],
-            },
-        });
-        expect(screen.getByRole('radio', { name: 'Cards' })).toHaveAttribute('aria-checked', 'true');
-    });
-});

package/dist/__tests__/action-header.test.js

@@ -1,150 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, within } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import { createRawSnippet } from 'svelte';
-import ActionHeader from '../lib/components/ActionHeader.svelte';
-// Bits UI leaves `pointer-events: none` on <body> after a menu closes in jsdom.
-const user = userEvent.setup({ pointerEventsCheck: 0 });
-const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
-const actions = [
-    { label: 'Export', icon: 'download', onSelect: () => { } },
-    { label: 'Add sign', icon: 'plus', priority: 'primary', onSelect: () => { } },
-    { label: 'Archive', priority: 'overflow', onSelect: () => { } },
-    { label: 'Delete', priority: 'overflow', destructive: true, onSelect: () => { } },
-    { label: 'Secret', priority: 'overflow', hidden: true, onSelect: () => { } },
-];
-async function openMenu(container, selector) {
-    const wrapper = container.querySelector(selector);
-    await user.click(within(wrapper).getByRole('button', { name: 'More actions' }));
-    return screen.findByRole('menu');
-}
-describe('ActionHeader', () => {
-    it('renders title and subtitle with the requested heading level', () => {
-        render(ActionHeader, {
-            props: { title: 'Signs', subtitle: 'All signage', headingLevel: 2 },
-        });
-        expect(screen.getByRole('heading', { level: 2, name: 'Signs' })).toBeInTheDocument();
-        expect(screen.getByText('All signage')).toBeInTheDocument();
-    });
-    it('styles the title per heading level: serif italic h1, sans h2', () => {
-        const { unmount } = render(ActionHeader, { props: { title: 'Homes' } });
-        expect(screen.getByRole('heading', { level: 1 })).toHaveClass('font-serif', 'italic');
-        unmount();
-        render(ActionHeader, { props: { title: 'Flying Horse', headingLevel: 2 } });
-        expect(screen.getByRole('heading', { level: 2 })).toHaveClass('font-sans', 'font-semibold');
-    });
-    it('renders the caption under the actions', () => {
-        const { container } = render(ActionHeader, {
-            props: { title: 'Homes', caption: 'Updated 5 minutes ago', actions },
-        });
-        expect(screen.getByText('Updated 5 minutes ago')).toHaveClass('ah-caption');
-        expect(container.querySelector('header')).toHaveAttribute('data-has-caption');
-    });
-    it('defaults to h1 and renders no action cluster without actions', () => {
-        const { container } = render(ActionHeader, { props: { title: 'Account' } });
-        expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
-        expect(container.querySelector('.ah-actions')).toBeNull();
-        expect(screen.queryByRole('button')).toBeNull();
-    });
-    it('renders a labelled back link', () => {
-        render(ActionHeader, { props: { title: 'Sign 12', backHref: '/signs', backLabel: 'Signs' } });
-        const back = screen.getByRole('link', { name: 'Back to Signs' });
-        expect(back).toHaveAttribute('href', '/signs');
-    });
-    it('places primary and secondary actions inline, and omits hidden ones', () => {
-        const { container } = render(ActionHeader, { props: { title: 'Signs', actions } });
-        const secondary = container.querySelector('.ah-secondary');
-        expect(within(secondary).getByRole('button', { name: 'Export' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Add sign' })).toBeInTheDocument();
-        expect(screen.queryByText('Secret')).toBeNull();
-    });
-    it('wide menu holds only overflow actions, destructive last', async () => {
-        const { container } = render(ActionHeader, { props: { title: 'Signs', actions } });
-        const menu = await openMenu(container, '.ah-menu-wide');
-        const names = within(menu)
-            .getAllByRole('menuitem')
-            .map((el) => el.textContent?.trim());
-        expect(names).toEqual(['Archive', 'Delete']);
-        const separator = within(menu).queryByRole('separator') ?? menu.querySelector('.h-px');
-        expect(separator).not.toBeNull();
-    });
-    it('narrow menu folds secondary actions in before overflow', async () => {
-        const { container } = render(ActionHeader, { props: { title: 'Signs', actions } });
-        const menu = await openMenu(container, '.ah-menu-narrow');
-        const names = within(menu)
-            .getAllByRole('menuitem')
-            .map((el) => el.textContent?.trim());
-        expect(names).toEqual(['Export', 'Archive', 'Delete']);
-    });
-    it('with no secondary actions renders a single overflow menu', () => {
-        const { container } = render(ActionHeader, {
-            props: {
-                title: 'Sign',
-                actions: [
-                    { label: 'Check in', priority: 'primary' },
-                    { label: 'Delete', priority: 'overflow', destructive: true },
-                ],
-            },
-        });
-        expect(container.querySelector('.ah-menu-narrow')).toBeNull();
-        expect(screen.getAllByRole('button', { name: 'More actions' })).toHaveLength(1);
-    });
-    it('collapseAt="never" keeps every non-primary action inline with no menu', () => {
-        render(ActionHeader, { props: { title: 'Signs', actions, collapseAt: 'never' } });
-        expect(screen.getByRole('button', { name: 'Archive' })).toBeInTheDocument();
-        expect(screen.queryByRole('button', { name: 'More actions' })).toBeNull();
-    });
-    it('auto collapse uses lg with 2+ secondary actions, md otherwise', () => {
-        const { container, unmount } = render(ActionHeader, { props: { title: 'A', actions } });
-        expect(container.querySelector('header')).toHaveAttribute('data-collapse', 'md');
-        unmount();
-        const two = [{ label: 'One' }, { label: 'Two' }];
-        const second = render(ActionHeader, { props: { title: 'B', actions: two } });
-        expect(second.container.querySelector('header')).toHaveAttribute('data-collapse', 'lg');
-    });
-    it('calls onSelect for inline and menu actions', async () => {
-        const onPrimary = vi.fn();
-        const onOverflow = vi.fn();
-        const { container } = render(ActionHeader, {
-            props: {
-                title: 'Signs',
-                actions: [
-                    { label: 'Add', priority: 'primary', onSelect: onPrimary },
-                    { label: 'Archive', priority: 'overflow', onSelect: onOverflow },
-                ],
-            },
-        });
-        await user.click(screen.getByRole('button', { name: 'Add' }));
-        expect(onPrimary).toHaveBeenCalledOnce();
-        const menu = await openMenu(container, '.ah');
-        await user.click(within(menu).getByRole('menuitem', { name: 'Archive' }));
-        expect(onOverflow).toHaveBeenCalledOnce();
-    });
-    it('renders badges, tools and toolbar snippets', () => {
-        render(ActionHeader, {
-            props: {
-                title: 'Sign 12',
-                badges: snippet('<span>Active</span>'),
-                tools: snippet('<button type="button" aria-label="Related">R</button>'),
-                toolbar: snippet('<div>View toggle</div>'),
-            },
-        });
-        expect(screen.getByText('Active')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Related' })).toBeInTheDocument();
-        expect(screen.getByText('View toggle')).toBeInTheDocument();
-    });
-    it('has no axe violations', async () => {
-        const { container } = render(ActionHeader, {
-            props: {
-                title: 'Sign 12',
-                subtitle: 'Main entrance monument',
-                backHref: '/signs',
-                backLabel: 'Signs',
-                actions,
-                badges: snippet('<span>Active</span>'),
-            },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});

package/dist/__tests__/alert-dialog-dismiss.test.js

@@ -1,54 +0,0 @@
-/**
- * AlertDialog: however it closes — Cancel, confirm, Escape — exactly one of
- * onConfirm / onCancel runs, so `{#if x}<AlertDialog open onCancel=…>` callers
- * can reset their state on Escape too.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync, tick } from 'svelte';
-import AlertDialog from '../lib/components/AlertDialog.svelte';
-let instance = null;
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    document.body.innerHTML = '';
-});
-async function mountOpen() {
-    const onConfirm = vi.fn();
-    const onCancel = vi.fn();
-    instance = mount(AlertDialog, {
-        target: document.body,
-        props: { open: true, title: 'Delete?', onConfirm, onCancel },
-    });
-    flushSync();
-    await tick();
-    const button = (label) => [...document.querySelectorAll('button')].find((b) => b.textContent?.trim() === label);
-    return { onConfirm, onCancel, button };
-}
-describe('AlertDialog dismiss', () => {
-    it('calls onCancel once on Cancel', async () => {
-        const { onConfirm, onCancel, button } = await mountOpen();
-        button('Cancel').click();
-        flushSync();
-        await tick();
-        expect(onCancel).toHaveBeenCalledTimes(1);
-        expect(onConfirm).not.toHaveBeenCalled();
-    });
-    it('calls onConfirm once and not onCancel on confirm', async () => {
-        const { onConfirm, onCancel, button } = await mountOpen();
-        button('Continue').click();
-        flushSync();
-        await tick();
-        expect(onConfirm).toHaveBeenCalledTimes(1);
-        expect(onCancel).not.toHaveBeenCalled();
-    });
-    it('calls onCancel on Escape', async () => {
-        const { onConfirm, onCancel } = await mountOpen();
-        const content = document.querySelector('[role="alertdialog"]');
-        content.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
-        flushSync();
-        await tick();
-        expect(onCancel).toHaveBeenCalledTimes(1);
-        expect(onConfirm).not.toHaveBeenCalled();
-    });
-});