@classic-homes/theme-svelte 1.22.0 → 1.22.1

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

@@ -1,126 +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('AlertDialog accessibility', () => {
-    it('should have no axe violations when open', async () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc" class="fixed z-50 bg-background p-6 shadow-lg">
-        <h2 id="alertdialog-title" class="text-lg font-semibold">Confirm Action</h2>
-        <p id="alertdialog-desc" class="text-sm text-muted-foreground">Are you sure you want to proceed?</p>
-        <div>
-          <button type="button">Cancel</button>
-          <button type="button">Continue</button>
-        </div>
-      </div>
-    `;
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-        document.body.removeChild(container);
-    });
-    it('should have role="alertdialog"', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Continue</button>
-      </div>
-    `;
-        const dialog = screen.getByRole('alertdialog');
-        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="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Continue</button>
-      </div>
-    `;
-        const dialog = screen.getByRole('alertdialog');
-        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="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Delete Item</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Delete</button>
-      </div>
-    `;
-        expect(screen.getByText('Delete Item')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have accessible description', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc">
-        <h2 id="alertdialog-title">Delete Item</h2>
-        <p id="alertdialog-desc">This action cannot be undone.</p>
-        <button type="button">Cancel</button>
-        <button type="button">Delete</button>
-      </div>
-    `;
-        expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-    it('should have cancel and confirm buttons', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button">Cancel</button>
-        <button type="button">Confirm</button>
-      </div>
-    `;
-        expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
-        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="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title">
-        <h2 id="alertdialog-title">Confirm Action</h2>
-        <button type="button" id="cancel-btn">Cancel</button>
-        <button type="button" id="confirm-btn">Confirm</button>
-      </div>
-    `;
-        const cancelBtn = container.querySelector('#cancel-btn');
-        const confirmBtn = container.querySelector('#confirm-btn');
-        cancelBtn.focus();
-        expect(cancelBtn).toHaveFocus();
-        await user.tab();
-        expect(confirmBtn).toHaveFocus();
-        document.body.removeChild(container);
-    });
-    it('should have labeled buttons that describe the action', () => {
-        const container = document.createElement('div');
-        document.body.appendChild(container);
-        container.innerHTML = `
-      <div role="alertdialog" aria-modal="true" aria-labelledby="alertdialog-title" aria-describedby="alertdialog-desc">
-        <h2 id="alertdialog-title">Delete Account</h2>
-        <p id="alertdialog-desc">This will permanently delete your account and all associated data.</p>
-        <button type="button">Cancel</button>
-        <button type="button">Delete Account</button>
-      </div>
-    `;
-        const deleteBtn = screen.getByRole('button', { name: 'Delete Account' });
-        expect(deleteBtn).toBeInTheDocument();
-        document.body.removeChild(container);
-    });
-});

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

@@ -1,66 +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 Button from '../../lib/components/Button.svelte';
-function textSnippet(text) {
-    return createRawSnippet(() => ({
-        render: () => `<span>${text}</span>`,
-    }));
-}
-describe('Button accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = render(Button, {
-            props: { children: textSnippet('Click me') },
-        });
-        const results = await axe(container);
-        expect(results).toHaveNoViolations();
-    });
-    it('should have no axe violations with different variants', async () => {
-        const { container } = render(Button, {
-            props: { variant: 'default', children: textSnippet('Default') },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-        const { container: container2 } = render(Button, {
-            props: { variant: 'secondary', children: textSnippet('Secondary') },
-        });
-        expect(await axe(container2)).toHaveNoViolations();
-        const { container: container3 } = render(Button, {
-            props: { variant: 'destructive', children: textSnippet('Destructive') },
-        });
-        expect(await axe(container3)).toHaveNoViolations();
-    });
-    it('should be focusable', async () => {
-        render(Button, {
-            props: { children: textSnippet('Click me') },
-        });
-        const button = screen.getByRole('button');
-        await userEvent.tab();
-        expect(button).toHaveFocus();
-    });
-    it('should be activatable with keyboard', async () => {
-        let clicked = false;
-        render(Button, {
-            props: {
-                children: textSnippet('Click me'),
-                onclick: () => {
-                    clicked = true;
-                },
-            },
-        });
-        await userEvent.tab();
-        await userEvent.keyboard('{Enter}');
-        expect(clicked).toBe(true);
-    });
-    it('should not be focusable when disabled', async () => {
-        render(Button, {
-            props: {
-                disabled: true,
-                children: textSnippet('Disabled'),
-            },
-        });
-        const button = screen.getByRole('button');
-        expect(button).toBeDisabled();
-    });
-});

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