@classic-homes/theme-svelte 1.22.0 → 1.22.2

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

@@ -1,77 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-describe('Card accessibility', () => {
-    it('should have no axe violations with basic card structure', async () => {
-        // Create a card structure manually for testing
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div class="rounded-md bg-card text-card-foreground border border-border">
-        <div class="flex flex-col space-y-1.5 p-6">
-          <h3 class="text-2xl font-semibold leading-none tracking-tight">Card Title</h3>
-          <p class="text-sm text-muted-foreground">Card description text</p>
-        </div>
-        <div class="p-6 pt-0">Card content goes here</div>
-        <div class="flex items-center p-6 pt-0">Footer content</div>
-      </div>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have no axe violations with different heading levels', async () => {
-        const container = document.createElement('main');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <h1>Page Title</h1>
-      <section>
-        <h2>Section Title</h2>
-        <div class="rounded-md bg-card text-card-foreground border border-border">
-          <h3 class="text-2xl font-semibold leading-none tracking-tight">Card Title</h3>
-          <p>Card content</p>
-        </div>
-      </section>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-});
-describe('CardTitle heading levels', () => {
-    it('should support configurable heading level via as prop', async () => {
-        // Import the actual component to verify the API exists
-        await import('../../lib/components/CardTitle.svelte');
-        // Verify the component exists and can be rendered
-        // We test structure with manual HTML since snippets don't work well in tests
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        // Test h2 level structure
-        container.innerHTML = `<h2 class="text-2xl font-semibold leading-none tracking-tight">H2 Title</h2>`;
-        let heading = screen.getByRole('heading', { level: 2 });
-        expect(heading).toBeInTheDocument();
-        expect(heading).toHaveTextContent('H2 Title');
-        // Clean up and test h3 level
-        container.innerHTML = `<h3 class="text-2xl font-semibold leading-none tracking-tight">H3 Title</h3>`;
-        heading = screen.getByRole('heading', { level: 3 });
-        expect(heading).toBeInTheDocument();
-        expect(heading).toHaveTextContent('H3 Title');
-        // Test h4 level
-        container.innerHTML = `<h4 class="text-2xl font-semibold leading-none tracking-tight">H4 Title</h4>`;
-        heading = screen.getByRole('heading', { level: 4 });
-        expect(heading).toBeInTheDocument();
-        expect(heading).toHaveTextContent('H4 Title');
-        document.body.removeChild(container);
-    });
-    it('should have no axe violations at any heading level', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        // Test each heading level
-        for (const level of [1, 2, 3, 4, 5, 6]) {
-            container.innerHTML = `<h${level} class="text-2xl font-semibold leading-none tracking-tight">Heading Level ${level}</h${level}>`;
-            const results = await axe(container);
-            expect(results).toHaveNoViolations();
-        }
-        document.body.removeChild(container);
-    });
-});

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

@@ -1,209 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-import Combobox from '../../lib/components/Combobox.svelte';
-describe('Combobox accessibility', () => {
-    const options = [
-        { value: 'apple', label: 'Apple' },
-        { value: 'banana', label: 'Banana' },
-        { value: 'cherry', label: 'Cherry' },
-        { value: 'date', label: 'Date' },
-    ];
-    it('should have no axe violations when closed', async () => {
-        const { container } = render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should open dropdown when clicked', async () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        // Open the combobox
-        const input = screen.getByRole('combobox');
-        await userEvent.click(input);
-        // Wait for dropdown to appear
-        await waitFor(() => {
-            expect(screen.getByRole('listbox')).toBeInTheDocument();
-        });
-        // Should have options in listbox
-        const listOptions = screen.getAllByRole('option');
-        expect(listOptions.length).toBe(options.length);
-    });
-    it('should have proper combobox role', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        expect(combobox).toBeInTheDocument();
-    });
-    it('should be keyboard navigable', async () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        await userEvent.tab();
-        expect(combobox).toHaveFocus();
-    });
-    it('should open on focus', async () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        await userEvent.click(combobox);
-        await waitFor(() => {
-            expect(screen.getByRole('listbox')).toBeInTheDocument();
-        });
-    });
-    it('should have aria-invalid when error is present', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-                error: 'This field is required',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        expect(combobox).toHaveAttribute('aria-invalid', 'true');
-    });
-    it('should have aria-describedby pointing to error', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-                id: 'fruit-select',
-                error: 'Please select a fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        expect(combobox).toHaveAttribute('aria-describedby', expect.stringContaining('fruit-select-error'));
-        const errorMessage = document.getElementById('fruit-select-error');
-        expect(errorMessage).toHaveTextContent('Please select a fruit');
-    });
-    it('error should have role="alert"', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-                error: 'Selection required',
-            },
-        });
-        const alert = screen.getByRole('alert');
-        expect(alert).toHaveTextContent('Selection required');
-    });
-    it('should have LiveRegion for screen reader announcements', async () => {
-        const { container } = render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        // The LiveRegion component should be rendered
-        const liveRegion = container.querySelector('[aria-live]');
-        expect(liveRegion).toBeInTheDocument();
-    });
-    it('should announce number of results when filtering', async () => {
-        const { container } = render(Combobox, {
-            props: {
-                options,
-                label: 'Select a fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        await userEvent.click(combobox);
-        // Wait for dropdown
-        await waitFor(() => {
-            expect(screen.getByRole('listbox')).toBeInTheDocument();
-        });
-        // Type to filter
-        await userEvent.type(combobox, 'a');
-        // Check for live region announcement
-        const liveRegion = container.querySelector('[aria-live="polite"]');
-        expect(liveRegion).toBeInTheDocument();
-    });
-    it('should announce loading state', async () => {
-        const { container } = render(Combobox, {
-            props: {
-                options: [],
-                label: 'Select a fruit',
-                loading: true,
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        await userEvent.click(combobox);
-        // The live region should announce loading
-        await waitFor(() => {
-            const liveRegion = container.querySelector('[aria-live="polite"]');
-            expect(liveRegion?.textContent).toContain('Loading');
-        });
-    });
-    it('should announce empty state', async () => {
-        const { container } = render(Combobox, {
-            props: {
-                options: [],
-                label: 'Select a fruit',
-                emptyMessage: 'No fruits found',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        await userEvent.click(combobox);
-        await waitFor(() => {
-            const liveRegion = container.querySelector('[aria-live="polite"]');
-            expect(liveRegion?.textContent).toContain('No fruits found');
-        });
-    });
-    it('should have proper label association', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Favorite fruit',
-                id: 'fav-fruit',
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        expect(combobox).toHaveAttribute('id', 'fav-fruit');
-        const label = screen.getByText('Favorite fruit');
-        expect(label).toHaveAttribute('for', 'fav-fruit');
-    });
-    it('should indicate required field', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Required fruit',
-                required: true,
-            },
-        });
-        // Visual indicator
-        expect(screen.getByText('*')).toBeInTheDocument();
-        // Screen reader text
-        expect(screen.getByText('(required)')).toHaveClass('sr-only');
-    });
-    it('should respect disabled state', () => {
-        render(Combobox, {
-            props: {
-                options,
-                label: 'Disabled combobox',
-                disabled: true,
-            },
-        });
-        const combobox = screen.getByRole('combobox');
-        expect(combobox).toBeDisabled();
-    });
-});

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

@@ -1,103 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'vitest-axe';
-describe('Dialog accessibility', () => {
-    it('should have no axe violations when open', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-desc" class="fixed z-50 bg-background p-6 shadow-lg">
-        <h2 id="dialog-title" class="text-lg font-semibold">Test Dialog</h2>
-        <p id="dialog-desc" class="text-sm text-muted-foreground">This is a test dialog description</p>
-        <button type="button" aria-label="Close dialog">Close</button>
-      </div>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have role="dialog"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <h2 id="dialog-title">Test Dialog</h2>
-        <p>Dialog content</p>
-      </div>
-    `;
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have aria-modal="true"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <h2 id="dialog-title">Test Dialog</h2>
-      </div>
-    `;
-        const dialog = screen.getByRole('dialog');
-        expect(dialog).toHaveAttribute('aria-modal', 'true');
-        document.body.removeChild(container);
-    });
-    it('should have accessible title', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <h2 id="dialog-title">My Dialog Title</h2>
-      </div>
-    `;
-        expect(screen.getByText('My Dialog Title')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have accessible description', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-desc">
-        <h2 id="dialog-title">Test Dialog</h2>
-        <p id="dialog-desc">Dialog description text</p>
-      </div>
-    `;
-        expect(screen.getByText('Dialog description text')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have accessible close button', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <h2 id="dialog-title">Test Dialog</h2>
-        <button type="button" aria-label="Close dialog">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-    `;
-        const closeButton = screen.getByRole('button', { name: /close/i });
-        expect(closeButton).toBeInTheDocument();
-        expect(closeButton).toHaveAttribute('aria-label');
-        document.body.removeChild(container);
-    });
-    it('should be keyboard accessible', async () => {
-        const user = userEvent.setup();
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
-        <h2 id="dialog-title">Test Dialog</h2>
-        <button type="button" id="close-btn" aria-label="Close dialog">Close</button>
-        <button type="button" id="action-btn">Action</button>
-      </div>
-    `;
-        const closeBtn = container.querySelector('#close-btn');
-        const actionBtn = container.querySelector('#action-btn');
-        closeBtn.focus();
-        expect(closeBtn).toHaveFocus();
-        await user.tab();
-        expect(actionBtn).toHaveFocus();
-        document.body.removeChild(container);
-    });
-});

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');
-    });
-});