@classic-homes/theme-svelte 1.22.0 → 1.22.2

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

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

@@ -1,145 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { axe } from 'vitest-axe';
-import Audio from '../../lib/components/media/Audio.svelte';
-import Image from '../../lib/components/media/Image.svelte';
-import Lightbox from '../../lib/components/media/Lightbox.svelte';
-import MediaCarousel from '../../lib/components/media/MediaCarousel.svelte';
-import MediaEmbed from '../../lib/components/media/MediaEmbed.svelte';
-import MediaGrid from '../../lib/components/media/MediaGrid.svelte';
-import Video from '../../lib/components/media/Video.svelte';
-const items = [
-    { id: '1', kind: 'image', src: '/one.jpg', alt: 'A harbour at dawn', caption: 'Dawn' },
-    { id: '2', kind: 'image', src: '/two.jpg', alt: 'A field of wheat' },
-    { id: '3', kind: 'video', src: '/clip.mp4', poster: '/clip.jpg', title: 'Walkthrough' },
-];
-const captions = [{ src: '/clip.en.vtt', srclang: 'en', label: 'English', default: true }];
-beforeEach(() => {
-    // Video warns when captions are missing; those cases are covered elsewhere.
-    vi.spyOn(console, 'warn').mockImplementation(() => { });
-});
-describe('Image accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Image, { props: { src: '/photo.jpg', alt: 'A landscape' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('has no violations with a decorative empty alt', async () => {
-        const { container } = render(Image, { props: { src: '/divider.png', alt: '' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('exposes the alt text as the image name', () => {
-        render(Image, { props: { src: '/photo.jpg', alt: 'A landscape' } });
-        expect(screen.getByRole('img', { name: 'A landscape' })).toBeInTheDocument();
-    });
-});
-describe('Video accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Video, {
-            props: { src: '/clip.mp4', label: 'Product tour', tracks: captions },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the region and every transport control', () => {
-        render(Video, { props: { src: '/clip.mp4', label: 'Product tour', tracks: captions } });
-        expect(screen.getByRole('region')).toHaveAccessibleName('Product tour');
-        expect(screen.getByRole('button', { name: 'Play' })).toBeInTheDocument();
-        expect(screen.getByRole('slider', { name: 'Seek' })).toBeInTheDocument();
-        expect(screen.getByRole('slider', { name: 'Volume' })).toBeInTheDocument();
-    });
-    it('announces the seek position as a spoken timestamp, not raw seconds', () => {
-        render(Video, { props: { src: '/clip.mp4', tracks: captions } });
-        expect(screen.getByRole('slider', { name: 'Seek' })).toHaveAttribute('aria-valuetext', '0 seconds of 0 seconds');
-    });
-});
-describe('Audio accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(Audio, {
-            props: { src: '/episode.mp3', title: 'Episode 12', artist: 'Design Notes' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('MediaEmbed accessibility', () => {
-    it('has no axe violations in its facade state', async () => {
-        const { container } = render(MediaEmbed, {
-            props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the facade with the provider and title', () => {
-        render(MediaEmbed, { props: { url: 'https://youtu.be/dQw4w9WgXcQ', title: 'A song' } });
-        expect(screen.getByRole('button')).toHaveAccessibleName('Play A song on YouTube');
-    });
-    it('has no axe violations for a Matterport tour facade', async () => {
-        const { container } = render(MediaEmbed, {
-            props: { provider: 'matterport', modelId: 'SxQL3iGyoDo', title: 'Show home' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('says a tour opens rather than plays', () => {
-        render(MediaEmbed, {
-            props: { provider: 'matterport', modelId: 'SxQL3iGyoDo', title: 'Show home' },
-        });
-        expect(screen.getByRole('button')).toHaveAccessibleName('Open Show home as a 3D tour on Matterport');
-    });
-});
-describe('MediaGrid accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(MediaGrid, { props: { items, label: 'Project photos' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('names the list and every tile', () => {
-        render(MediaGrid, { props: { items, label: 'Project photos' } });
-        expect(screen.getByRole('list')).toHaveAccessibleName('Project photos');
-        expect(screen.getByRole('button', { name: 'A harbour at dawn' })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Walkthrough' })).toBeInTheDocument();
-    });
-    it('has no violations in the masonry variant', async () => {
-        const { container } = render(MediaGrid, { props: { items, variant: 'masonry' } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('MediaCarousel accessibility', () => {
-    it('has no axe violations', async () => {
-        const { container } = render(MediaCarousel, {
-            props: { items, label: 'Project gallery' },
-        });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('carries the carousel and slide role descriptions', () => {
-        render(MediaCarousel, { props: { items, label: 'Project gallery' } });
-        const carousel = screen.getByRole('region', { name: 'Project gallery' });
-        expect(carousel).toHaveAttribute('aria-roledescription', 'carousel');
-        const slides = screen.getAllByRole('group');
-        expect(slides[0]).toHaveAttribute('aria-roledescription', 'slide');
-        expect(slides[0]).toHaveAccessibleName('1 of 3');
-    });
-    it('offers a pause control whenever autoplay is enabled (WCAG 2.2.2)', () => {
-        render(MediaCarousel, { props: { items, autoplay: true } });
-        expect(screen.getByRole('button', { name: 'Stop automatic slideshow' })).toBeInTheDocument();
-    });
-    it('has no violations with the thumbnail strip shown', async () => {
-        const { container } = render(MediaCarousel, { props: { items, showThumbnails: true } });
-        expect(await axe(container)).toHaveNoViolations();
-    });
-});
-describe('Lightbox accessibility', () => {
-    it('has no axe violations when open', async () => {
-        render(Lightbox, { props: { items, open: true } });
-        await screen.findByRole('dialog');
-        // The dialog is portalled to the body, so axe has to run against it.
-        expect(await axe(document.body)).toHaveNoViolations();
-    });
-    it('is a modal dialog with an accessible name and description', async () => {
-        render(Lightbox, { props: { items, open: true } });
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toHaveAttribute('aria-modal', 'true');
-        expect(dialog).toHaveAccessibleName('A harbour at dawn');
-        expect(dialog).toHaveAccessibleDescription('Dawn');
-    });
-    it('has no violations with the thumbnail strip shown', async () => {
-        render(Lightbox, { props: { items, open: true, showThumbnails: true } });
-        await screen.findByRole('dialog');
-        expect(await axe(document.body)).toHaveNoViolations();
-    });
-});

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

@@ -1,139 +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 PublicLayout from '../../lib/components/layout/PublicLayout.svelte';
-function textSnippet(text) {
-    return createRawSnippet(() => ({
-        render: () => `<span>${text}</span>`,
-    }));
-}
-const navigation = [
-    { name: 'Orientation', href: '/orientation' },
-    { name: 'Home Info', href: '/home-information-sheet' },
-    { name: 'Warranty Transfer', href: '/warranty-transfer', active: true },
-];
-const footerLinks = [
-    {
-        title: 'Resources',
-        items: [
-            { name: 'Documentation', href: '/docs' },
-            { name: 'GitHub', href: 'https://github.com', external: true },
-        ],
-    },
-];
-function renderLayout(extra = {}) {
-    return render(PublicLayout, {
-        props: { navigation, footerLinks, children: textSnippet('Page content'), ...extra },
-    });
-}
-/** A drawer CTA that calls the `close` argument PublicLayout hands to mobileNavEnd. */
-function ctaSnippet(label) {
-    return createRawSnippet((args) => ({
-        render: () => `<button type="button">${label}</button>`,
-        setup: (el) => {
-            el.addEventListener('click', () => args().close());
-        },
-    }));
-}
-/**
- * jsdom has no layout engine, so getBoundingClientRect() returns zeros and target
- * size cannot be measured here. These assert the classes that produce a 44x44px
- * target (WCAG 2.5.5); the geometry itself is verified in a real browser.
- */
-describe('PublicLayout accessibility', () => {
-    it('should have no axe violations', async () => {
-        const { container } = renderLayout();
-        expect(await axe(container)).toHaveNoViolations();
-    });
-    it('should expand desktop nav links to a 44px touch target', () => {
-        renderLayout();
-        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
-        const links = [...nav.querySelectorAll(':scope > a')];
-        expect(links).toHaveLength(navigation.length);
-        for (const link of links) {
-            // 20px text line box + 2 x 12px padding = 44px border box; -m-3 cancels
-            // it in layout so the nav's gap-6 spacing is unchanged.
-            expect(link.className).toContain('p-3');
-            expect(link.className).toContain('-m-3');
-            expect(link.className).not.toContain('after:');
-        }
-    });
-    it('should give the logo link a 44px-tall touch target', () => {
-        renderLayout();
-        const logo = screen.getByRole('banner').querySelector('a[href="/"]');
-        expect(logo?.className).toContain('relative');
-        expect(logo?.className).toContain('after:h-11');
-    });
-    it('should give mobile drawer links a 44px touch target', async () => {
-        renderLayout();
-        // The drawer is only in the DOM while the menu is open.
-        await userEvent.click(screen.getByRole('button', { name: 'Open menu' }));
-        const drawerNav = screen.getByRole('navigation', { name: 'Mobile navigation' });
-        for (const link of drawerNav.querySelectorAll('a')) {
-            expect(link.className).toContain('py-3');
-        }
-    });
-    it('should give footer links a 44px-tall full-width touch target', () => {
-        renderLayout();
-        const footerNav = screen.getByRole('navigation', { name: 'Footer navigation' });
-        for (const link of footerNav.querySelectorAll('a')) {
-            // block + py-3 = 12 + 20 + 12; the list carries no space-y, so rows never overlap
-            expect(link.className).toContain('block');
-            expect(link.className).toContain('py-3');
-        }
-    });
-    it('should render headerEnd unwrapped when there is no mobileNavEnd', () => {
-        renderLayout({ headerEnd: textSnippet('Service Request') });
-        const cta = screen.getByText('Service Request');
-        expect(cta.parentElement?.className).not.toContain('hidden');
-    });
-    it('should hide headerEnd below the mobile breakpoint when mobileNavEnd is given', () => {
-        renderLayout({
-            headerEnd: textSnippet('Service Request'),
-            mobileNavEnd: ctaSnippet('Drawer CTA'),
-        });
-        const cta = screen.getByText('Service Request');
-        expect(cta.parentElement?.className).toContain('hidden');
-        expect(cta.parentElement?.className).toContain('md:contents');
-    });
-    it('should switch the header to the drawer at the given mobileBreakpoint', () => {
-        renderLayout({
-            mobileBreakpoint: 'lg',
-            headerEnd: textSnippet('Service Request'),
-            mobileNavEnd: ctaSnippet('Drawer CTA'),
-        });
-        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
-        expect(nav.className).toContain('lg:flex');
-        expect(nav.className).not.toContain('md:flex');
-        expect(screen.getByRole('button', { name: 'Open menu' }).className).toContain('lg:hidden');
-        expect(screen.getByText('Service Request').parentElement?.className).toContain('lg:contents');
-    });
-    it('should render mobileNavEnd in the drawer and close it via the close argument', async () => {
-        renderLayout({
-            headerEnd: textSnippet('Service Request'),
-            mobileNavEnd: ctaSnippet('Drawer CTA'),
-        });
-        expect(screen.queryByRole('button', { name: 'Drawer CTA' })).toBeNull();
-        await userEvent.click(screen.getByRole('button', { name: 'Open menu' }));
-        const drawerNav = screen.getByRole('navigation', { name: 'Mobile navigation' });
-        const cta = screen.getByRole('button', { name: 'Drawer CTA' });
-        expect(drawerNav.contains(cta)).toBe(true);
-        await userEvent.click(cta);
-        expect(screen.queryByRole('navigation', { name: 'Mobile navigation' })).toBeNull();
-    });
-    it('should cue hover for a trackpad pointer that reports hover: none', () => {
-        renderLayout();
-        const nav = screen.getByRole('navigation', { name: 'Main navigation' });
-        const footerNav = screen.getByRole('navigation', { name: 'Footer navigation' });
-        // hoverOnlyWhenSupported gates hover: behind (hover: hover) and (pointer: fine),
-        // which iPadOS never matches even with a trackpad attached.
-        for (const link of [
-            ...nav.querySelectorAll(':scope > a'),
-            ...footerNav.querySelectorAll('a'),
-        ]) {
-            expect(link.className).toContain('[@media(any-pointer:fine)]:[&:hover]:');
-        }
-    });
-});