@classic-homes/theme-svelte 1.22.0 → 1.22.1

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

@@ -1,132 +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';
-// Test wrapper component for DropdownMenu
-import { createRawSnippet } from 'svelte';
-import DropdownMenu from '../../lib/components/DropdownMenu.svelte';
-describe('DropdownMenu accessibility', () => {
-    const items = [
-        { label: 'Edit', value: 'edit', onSelect: () => { } },
-        { label: 'Delete', value: 'delete', destructive: true, onSelect: () => { } },
-    ];
-    // Create a snippet for the trigger
-    const createTriggerSnippet = () => createRawSnippet(() => ({
-        render: () => '<span>Menu</span>',
-    }));
-    it('should render trigger as a button element', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        // The trigger should be an actual button element, not a span with role="button"
-        const trigger = screen.getByRole('button');
-        expect(trigger).toBeInTheDocument();
-        expect(trigger.tagName.toLowerCase()).toBe('button');
-    });
-    it('trigger button should have type="button"', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        const trigger = screen.getByRole('button');
-        expect(trigger).toHaveAttribute('type', 'button');
-    });
-    it('should have no axe violations when closed', async () => {
-        const { container } = render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('trigger should be focusable', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        const trigger = screen.getByRole('button');
-        await userEvent.tab();
-        expect(trigger).toHaveFocus();
-    });
-    it('trigger should open menu on Enter key', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        const trigger = screen.getByRole('button');
-        await userEvent.tab();
-        expect(trigger).toHaveFocus();
-        await userEvent.keyboard('{Enter}');
-        // Menu should be open - check for menu items
-        expect(await screen.findByRole('menu')).toBeInTheDocument();
-    });
-    it('trigger should open menu on Space key', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        screen.getByRole('button');
-        await userEvent.tab();
-        await userEvent.keyboard(' ');
-        expect(await screen.findByRole('menu')).toBeInTheDocument();
-    });
-    it('should open menu with Enter key after focus', async () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-            },
-        });
-        const trigger = screen.getByRole('button');
-        trigger.focus();
-        // Open with Enter
-        await userEvent.keyboard('{Enter}');
-        // Wait for menu to open
-        const menu = await screen.findByRole('menu');
-        expect(menu).toBeInTheDocument();
-        // Menu items should be present
-        const menuItems = screen.getAllByRole('menuitem');
-        expect(menuItems.length).toBeGreaterThan(0);
-    });
-    it('applies triggerLabel and triggerClass to the trigger button', () => {
-        render(DropdownMenu, {
-            props: {
-                items,
-                trigger: createTriggerSnippet(),
-                triggerLabel: 'More actions',
-                triggerClass: 'custom-trigger',
-            },
-        });
-        const trigger = screen.getByRole('button', { name: 'More actions' });
-        expect(trigger).toHaveClass('custom-trigger');
-        // No nested buttons
-        expect(trigger.querySelector('button')).toBeNull();
-    });
-    it('renders href items as links', async () => {
-        render(DropdownMenu, {
-            props: {
-                items: [{ label: 'Open', href: '/somewhere', icon: 'external-link' }, ...items],
-                trigger: createTriggerSnippet(),
-            },
-        });
-        // Earlier tests leave Bits UI's `pointer-events: none` on <body> in jsdom.
-        await userEvent.setup({ pointerEventsCheck: 0 }).click(screen.getByRole('button'));
-        const link = await screen.findByRole('menuitem', { name: 'Open' });
-        expect(link.tagName.toLowerCase()).toBe('a');
-        expect(link).toHaveAttribute('href', '/somewhere');
-        expect(screen.getByRole('menuitem', { name: 'Edit' }).tagName.toLowerCase()).toBe('div');
-    });
-});

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

@@ -1,158 +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 FileUpload from '../../lib/components/FileUpload.svelte';
-describe('FileUpload accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(FileUpload, {
-            props: {
-                label: 'Upload documents',
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should use label element for the drop zone', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                id: 'file-upload',
-            },
-        });
-        // The drop zone should be a label wrapping the input
-        const label = screen.getByText('Click to upload').closest('label');
-        expect(label).toBeInTheDocument();
-        expect(label).toHaveAttribute('for', 'file-upload');
-    });
-    it('should have a properly associated file input', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                id: 'file-upload',
-            },
-        });
-        // The file input should exist and be associated with the label
-        const input = document.getElementById('file-upload');
-        expect(input).toBeInTheDocument();
-        expect(input).toHaveAttribute('type', 'file');
-    });
-    it('should be keyboard accessible', async () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-            },
-        });
-        // Tab to the file input (which is inside the label)
-        await userEvent.tab();
-        // The file input should be focusable
-        const input = screen.getByLabelText('Upload files');
-        expect(input).toBeInTheDocument();
-    });
-    it('should have no axe violations with error state', async () => {
-        const { container } = render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                error: 'File too large',
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should announce errors with role="alert"', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                error: 'Invalid file type',
-            },
-        });
-        const errorMessage = screen.getByRole('alert');
-        expect(errorMessage).toBeInTheDocument();
-        expect(errorMessage).toHaveTextContent('Invalid file type');
-    });
-    it('should have aria-describedby pointing to error message', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                id: 'upload',
-                error: 'File size exceeds limit',
-            },
-        });
-        const dropZone = screen.getByText('Click to upload').closest('label');
-        expect(dropZone).toHaveAttribute('aria-describedby', 'upload-error');
-        const errorMessage = document.getElementById('upload-error');
-        expect(errorMessage).toHaveTextContent('File size exceeds limit');
-    });
-    it('should have accessible file list when files are uploaded', async () => {
-        const files = [
-            {
-                id: '1',
-                filename: 'document.pdf',
-                contentType: 'application/pdf',
-                size: 1024,
-                uploading: false,
-                progress: 100,
-            },
-        ];
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                files,
-            },
-        });
-        // File list should be present with accessible label
-        const fileList = screen.getByRole('list', { name: 'Uploaded files' });
-        expect(fileList).toBeInTheDocument();
-    });
-    it('remove button should have accessible label', async () => {
-        const files = [
-            {
-                id: '1',
-                filename: 'test.pdf',
-                contentType: 'application/pdf',
-                size: 1024,
-                uploading: false,
-                progress: 100,
-            },
-        ];
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                files,
-            },
-        });
-        const removeButton = screen.getByRole('button', { name: 'Remove test.pdf' });
-        expect(removeButton).toBeInTheDocument();
-    });
-    it('should respect disabled state', async () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                disabled: true,
-            },
-        });
-        // Find the input
-        const input = screen.getByLabelText('Upload files');
-        expect(input).toBeDisabled();
-    });
-    it('should support multiple files when maxFiles > 1', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                maxFiles: 5,
-            },
-        });
-        const input = screen.getByLabelText('Upload files');
-        expect(input).toHaveAttribute('multiple');
-    });
-    it('should not have multiple attribute when maxFiles is 1', () => {
-        render(FileUpload, {
-            props: {
-                label: 'Upload files',
-                maxFiles: 1,
-            },
-        });
-        const input = screen.getByLabelText('Upload files');
-        expect(input).not.toHaveAttribute('multiple');
-    });
-});

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

@@ -1,62 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import { createRawSnippet } from 'svelte';
-import FilterToolbar from '../../lib/components/FilterToolbar.svelte';
-import ActiveFilterChips from '../../lib/components/ActiveFilterChips.svelte';
-const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
-/** Two labelled selects; labels are sr-only when inline. */
-const filters = createRawSnippet((args) => ({
-    render: () => {
-        const labelClass = args().inline ? ' class="sr-only"' : '';
-        return `<div>
-      <label for="f-status"${labelClass}>Status</label><select id="f-status"><option>Any</option></select>
-      <label for="f-type"${labelClass}>Type</label><select id="f-type"><option>Any</option></select>
-    </div>`;
-    },
-}));
-const search = snippet('<input type="search" aria-label="Search signs" />');
-describe('FilterToolbar', () => {
-    it('keeps filters inline at or under maxInline controls', () => {
-        render(FilterToolbar, {
-            props: { label: 'Sign tools', search, filters, filterCount: 2 },
-        });
-        expect(screen.queryByRole('button', { name: /Filters/ })).not.toBeInTheDocument();
-        expect(screen.getByLabelText('Status')).toBeInTheDocument();
-    });
-    it('folds filters behind a Filters button past maxInline', async () => {
-        const { container } = render(FilterToolbar, {
-            props: { label: 'Sign tools', search, filters, filterCount: 3, activeCount: 2 },
-        });
-        const button = screen.getByRole('button', { name: 'Filters, 2 active' });
-        expect(button).toHaveAttribute('aria-expanded', 'false');
-        const panel = screen.getByRole('region', { hidden: true });
-        expect(button).toHaveAttribute('aria-controls', panel.id);
-        // Svelte sets `inert` as a property; jsdom doesn't reflect it to an attribute.
-        const content = panel.firstElementChild;
-        expect(content.inert).toBe(true);
-        await fireEvent.click(button);
-        expect(button).toHaveAttribute('aria-expanded', 'true');
-        expect(content.inert).toBe(false);
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('ActiveFilterChips', () => {
-    it('removes a single filter or all of them', async () => {
-        const onRemove = vi.fn();
-        const onClearAll = vi.fn();
-        const { container } = render(ActiveFilterChips, {
-            props: { chips: [{ key: 'status', label: 'Status: Installed', onRemove }], onClearAll },
-        });
-        expect(screen.getByRole('group', { name: 'Active filters' })).toBeInTheDocument();
-        await fireEvent.click(screen.getByRole('button', { name: 'Remove filter Status: Installed' }));
-        expect(onRemove).toHaveBeenCalledOnce();
-        await fireEvent.click(screen.getByRole('button', { name: 'Clear all' }));
-        expect(onClearAll).toHaveBeenCalledOnce();
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('renders nothing without chips', () => {
-        const { container } = render(ActiveFilterChips, { props: { chips: [] } });
-        expect(container.querySelector('[role="group"]')).toBeNull();
-    });
-});

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

@@ -1,119 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import Icon from '../../lib/components/Icon.svelte';
-describe('Icon accessibility', () => {
-    it('should have no axe violations for decorative icons', async () => {
-        const { container } = render(Icon, {
-            props: {
-                name: 'check',
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should always have aria-hidden="true" on the SVG element', () => {
-        render(Icon, {
-            props: {
-                name: 'check',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('should have aria-hidden="true" even when label is provided', () => {
-        render(Icon, {
-            props: {
-                name: 'check',
-                label: 'Success',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('should render visually hidden text when label is provided', () => {
-        render(Icon, {
-            props: {
-                name: 'alert-circle',
-                label: 'Warning',
-            },
-        });
-        // Check for sr-only text
-        const srOnlyText = screen.getByText('Warning');
-        expect(srOnlyText).toBeInTheDocument();
-        expect(srOnlyText).toHaveClass('sr-only');
-    });
-    it('should not render sr-only text when no label is provided', () => {
-        const { container } = render(Icon, {
-            props: {
-                name: 'check',
-            },
-        });
-        const srOnlyElements = container.querySelectorAll('.sr-only');
-        expect(srOnlyElements.length).toBe(0);
-    });
-    it('should have no axe violations when used with label', async () => {
-        const { container } = render(Icon, {
-            props: {
-                name: 'trash',
-                label: 'Delete item',
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should work correctly for loading spinner icon', () => {
-        render(Icon, {
-            props: {
-                name: 'loading',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('should work correctly for more (vertical dots) icon', () => {
-        render(Icon, {
-            props: {
-                name: 'more',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('should work correctly for more-horizontal icon', () => {
-        render(Icon, {
-            props: {
-                name: 'more-horizontal',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('should work correctly for grip icon', () => {
-        render(Icon, {
-            props: {
-                name: 'grip',
-            },
-        });
-        const svg = document.querySelector('svg');
-        expect(svg).toBeInTheDocument();
-        expect(svg).toHaveAttribute('aria-hidden', 'true');
-    });
-    it('icon with label should be accessible to screen readers', async () => {
-        const { container } = render(Icon, {
-            props: {
-                name: 'info',
-                label: 'Information',
-            },
-        });
-        // The accessible text should be present
-        expect(screen.getByText('Information')).toBeInTheDocument();
-        // No axe violations
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-});

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

@@ -1,96 +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 Input from '../../lib/components/Input.svelte';
-describe('Input accessibility', () => {
-    it('should have no axe violations with aria-label', async () => {
-        const { container } = render(Input, {
-            props: { 'aria-label': 'Email address', type: 'email' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with aria-invalid', async () => {
-        const { container } = render(Input, {
-            props: {
-                'aria-label': 'Email',
-                'aria-invalid': true,
-                'aria-describedby': 'error',
-            },
-        });
-        // Add error element to container
-        const errorSpan = document.createElement('span');
-        errorSpan.id = 'error';
-        errorSpan.textContent = 'Please enter a valid email';
-        container.appendChild(errorSpan);
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Input, {
-            props: { 'aria-label': 'Test input' },
-        });
-        const input = screen.getByRole('textbox');
-        await userEvent.tab();
-        expect(input).toHaveFocus();
-    });
-    it('should support aria-describedby for help text', () => {
-        const { container } = render(Input, {
-            props: { 'aria-label': 'Username', 'aria-describedby': 'help' },
-        });
-        const helpSpan = document.createElement('span');
-        helpSpan.id = 'help';
-        helpSpan.textContent = 'Enter your username';
-        container.appendChild(helpSpan);
-        const input = screen.getByRole('textbox');
-        expect(input).toHaveAttribute('aria-describedby', 'help');
-    });
-    it('should support aria-labelledby', () => {
-        const { container } = render(Input, {
-            props: { 'aria-labelledby': 'label' },
-        });
-        const labelSpan = document.createElement('span');
-        labelSpan.id = 'label';
-        labelSpan.textContent = 'Custom Label';
-        container.insertBefore(labelSpan, container.firstChild);
-        const input = screen.getByRole('textbox');
-        expect(input).toHaveAttribute('aria-labelledby', 'label');
-    });
-    it('should apply error styling when aria-invalid is true', () => {
-        render(Input, {
-            props: { 'aria-label': 'Email', 'aria-invalid': true },
-        });
-        const input = screen.getByRole('textbox');
-        expect(input).toHaveAttribute('aria-invalid', 'true');
-        expect(input.className).toContain('border-destructive');
-    });
-    it('should apply error styling when aria-invalid is "true" string', () => {
-        render(Input, {
-            props: { 'aria-label': 'Email', 'aria-invalid': 'true' },
-        });
-        const input = screen.getByRole('textbox');
-        expect(input.className).toContain('border-destructive');
-    });
-    it('should not apply error styling when aria-invalid is false', () => {
-        render(Input, {
-            props: { 'aria-label': 'Email', 'aria-invalid': false },
-        });
-        const input = screen.getByRole('textbox');
-        expect(input.className).not.toContain('border-destructive');
-    });
-    it('should be disabled when disabled prop is true', () => {
-        render(Input, {
-            props: { 'aria-label': 'Disabled input', disabled: true },
-        });
-        const input = screen.getByRole('textbox');
-        expect(input).toBeDisabled();
-    });
-    it('should support required attribute', () => {
-        render(Input, {
-            props: { 'aria-label': 'Required field', required: true },
-        });
-        const input = screen.getByRole('textbox');
-        expect(input).toBeRequired();
-    });
-});

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

@@ -1,102 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import LiveRegion from '../../lib/components/LiveRegion.svelte';
-describe('LiveRegion accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(LiveRegion, {
-            props: { message: 'Status update' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with assertive politeness', async () => {
-        const { container } = render(LiveRegion, {
-            props: { message: 'Error occurred', politeness: 'assertive' },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have role="status"', () => {
-        render(LiveRegion, {
-            props: { message: 'Test message' },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toBeInTheDocument();
-    });
-    it('should have aria-live="polite" by default', () => {
-        render(LiveRegion, {
-            props: { message: 'Test message' },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toHaveAttribute('aria-live', 'polite');
-    });
-    it('should have aria-live="assertive" when specified', () => {
-        render(LiveRegion, {
-            props: { message: 'Urgent message', politeness: 'assertive' },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toHaveAttribute('aria-live', 'assertive');
-    });
-    it('should have aria-atomic="true" by default', () => {
-        render(LiveRegion, {
-            props: { message: 'Test message' },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toHaveAttribute('aria-atomic', 'true');
-    });
-    it('should support aria-atomic="false"', () => {
-        render(LiveRegion, {
-            props: { message: 'Test message', atomic: false },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toHaveAttribute('aria-atomic', 'false');
-    });
-    it('should be visually hidden by default', () => {
-        render(LiveRegion, {
-            props: { message: 'Hidden message' },
-        });
-        const region = screen.getByRole('status');
-        expect(region).toHaveClass('sr-only');
-    });
-    it('should be visible when visuallyHidden is false', () => {
-        render(LiveRegion, {
-            props: { message: 'Visible message', visuallyHidden: false },
-        });
-        const region = screen.getByRole('status');
-        expect(region).not.toHaveClass('sr-only');
-    });
-    it('should render message content', () => {
-        render(LiveRegion, {
-            props: { message: 'Status: Loading' },
-        });
-        expect(screen.getByText('Status: Loading')).toBeInTheDocument();
-    });
-    it('should render children content', () => {
-        render(LiveRegion, {
-            props: {
-                children: () => {
-                    const span = document.createElement('span');
-                    span.textContent = 'Dynamic content';
-                    return span;
-                },
-            },
-        });
-        // Children rendering in Svelte tests is different - verify region exists
-        const region = screen.getByRole('status');
-        expect(region).toBeInTheDocument();
-    });
-    it('should prefer message over children when both provided', () => {
-        render(LiveRegion, {
-            props: {
-                message: 'Message text',
-                children: () => {
-                    const span = document.createElement('span');
-                    span.textContent = 'Children text';
-                    return span;
-                },
-            },
-        });
-        expect(screen.getByText('Message text')).toBeInTheDocument();
-    });
-});