@classic-homes/theme-svelte 1.22.0 → 1.22.1

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

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

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

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

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

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

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

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

package/dist/__tests__/code-field.test.js

@@ -1,65 +0,0 @@
-/**
- * CodeField: Tab indents instead of leaving the field, with Escape as the way
- * out, and indenting a selection works line by line.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync } from 'svelte';
-import CodeField from '../lib/components/CodeField.svelte';
-let instance = null;
-function render(props) {
-    const host = document.createElement('div');
-    document.body.appendChild(host);
-    instance = mount(CodeField, { target: host, props });
-    flushSync();
-    return host.querySelector('textarea');
-}
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    document.body.innerHTML = '';
-});
-function press(field, key, shiftKey = false) {
-    const event = new KeyboardEvent('keydown', { key, shiftKey, bubbles: true, cancelable: true });
-    field.dispatchEvent(event);
-    return event;
-}
-describe('CodeField', () => {
-    it('is a labelled, monospaced, unspellchecked field with its keyboard hint', () => {
-        const field = render({ value: 'graph TD', label: 'Diagram source' });
-        expect(field.getAttribute('aria-label')).toBe('Diagram source');
-        expect(field.getAttribute('spellcheck')).toBe('false');
-        expect(field.className).toContain('font-mono');
-        const hint = document.getElementById(field.getAttribute('aria-describedby').split(' ')[0]);
-        expect(hint?.textContent).toMatch(/Escape, then Tab/);
-    });
-    it('indents at the cursor on Tab and reports the new value', () => {
-        const onValueChange = vi.fn();
-        const field = render({ value: 'ab', label: 'Code', onValueChange });
-        field.setSelectionRange(1, 1);
-        expect(press(field, 'Tab').defaultPrevented).toBe(true);
-        expect(field.value).toBe('a  b');
-        expect(onValueChange).toHaveBeenLastCalledWith('a  b');
-    });
-    it('indents and outdents every selected line', () => {
-        const field = render({ value: 'one\ntwo\nthree', label: 'Code' });
-        field.setSelectionRange(0, 7);
-        press(field, 'Tab');
-        expect(field.value).toBe('  one\n  two\nthree');
-        field.setSelectionRange(0, 11);
-        press(field, 'Tab', true);
-        expect(field.value).toBe('one\ntwo\nthree');
-    });
-    it('lets Tab leave after Escape', () => {
-        const field = render({ value: 'x', label: 'Code' });
-        press(field, 'Escape');
-        expect(press(field, 'Tab').defaultPrevented).toBe(false);
-        expect(field.value).toBe('x');
-        // and only once
-        expect(press(field, 'Tab').defaultPrevented).toBe(true);
-    });
-    it('does not indent a read-only field', () => {
-        const field = render({ value: 'x', label: 'Code', readonly: true });
-        expect(press(field, 'Tab').defaultPrevented).toBe(false);
-    });
-});

package/dist/__tests__/control-text-color.test.js

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import Input from '../lib/components/Input.svelte';
-import Textarea from '../lib/components/Textarea.svelte';
-import Select from '../lib/components/Select.svelte';
-import PasswordInput from '../lib/components/PasswordInput.svelte';
-// Form controls paint their own light surface (bg-background), so they must
-// also set their own text color. Otherwise a dark parent that sets white text
-// (Toolbar's text-toolbar-foreground) leaks into the value: white on white.
-describe('light-surface controls own their text color', () => {
-    it('Input', () => {
-        render(Input, { props: { 'aria-label': 'Search' } });
-        expect(screen.getByRole('textbox', { name: 'Search' })).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('Textarea', () => {
-        render(Textarea, { props: { 'aria-label': 'Notes' } });
-        expect(screen.getByRole('textbox', { name: 'Notes' })).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('PasswordInput', () => {
-        const { container } = render(PasswordInput, { props: { id: 'pw' } });
-        expect(container.querySelector('#pw')).toHaveClass('bg-background', 'text-foreground');
-    });
-    it('Select trigger', () => {
-        const { container } = render(Select, {
-            props: { id: 'status', options: [{ value: 'a', label: 'Active' }], value: 'a' },
-        });
-        expect(container.querySelector('#status')).toHaveClass('bg-background', 'text-foreground');
-    });
-});

package/dist/__tests__/data-panel-card-gestures.test.js

@@ -1,138 +0,0 @@
-/**
- * DataPanel phone card: gestures and layout.
- *
- * - A cancelled pointer (iOS's swipe up from the home indicator to leave the
- *   app) must not expand the card. It used to be handled like pointerup, so a
- *   quick cancel read as a tap.
- * - The phone card is laid out at its expanded height and slid with
- *   `translate`, padded by the safe-area inset so its collapsed header sits
- *   above the home indicator.
- */
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
-import DataPanel from '../lib/components/DataPanel.svelte';
-const children = createRawSnippet(() => ({ render: () => '<p>Legend body</p>' }));
-let instance = null;
-let host;
-function pointer(type, target, y) {
-    const event = new MouseEvent(type, { bubbles: true, clientX: 100, clientY: y });
-    Object.defineProperty(event, 'pointerId', { value: 1 });
-    target.dispatchEvent(event);
-}
-function mountCard(props = {}) {
-    host = document.createElement('div');
-    document.body.appendChild(host);
-    instance = mount(DataPanel, {
-        target: host,
-        props: {
-            title: 'Legend & Information',
-            variant: 'card',
-            disableClose: true,
-            mobileBreakpoint: 768,
-            children,
-            ...props,
-        },
-    });
-    flushSync();
-    return {
-        panel: host.querySelector('[role="dialog"]'),
-        header: host.querySelector('[data-panel-header]'),
-    };
-}
-beforeEach(() => {
-    var _a, _b, _c, _d;
-    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
-    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800);
-    vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(390);
-    // jsdom has no pointer capture
-    (_a = HTMLElement.prototype).setPointerCapture ?? (_a.setPointerCapture = () => { });
-    (_b = HTMLElement.prototype).releasePointerCapture ?? (_b.releasePointerCapture = () => { });
-    (_c = HTMLElement.prototype).hasPointerCapture ?? (_c.hasPointerCapture = () => false);
-    // ...nor Web Animations, which the scrim's fade transition uses
-    (_d = Element.prototype).animate ?? (_d.animate = function () {
-        const animation = {
-            onfinish: null,
-            cancel() { },
-            finished: Promise.resolve(),
-        };
-        queueMicrotask(() => animation.onfinish?.());
-        return animation;
-    });
-});
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    host?.remove();
-    vi.useRealTimers();
-    vi.restoreAllMocks();
-});
-describe('DataPanel card pointer cancel', () => {
-    it('does not expand when the OS cancels the pointer', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointercancel', header, 790);
-        flushSync();
-        expect(onExpandedChange).not.toHaveBeenCalled();
-    });
-    it('does not expand on a fast upward cancel either', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointermove', header, 700);
-        flushSync();
-        pointer('pointercancel', header, 600);
-        flushSync();
-        expect(onExpandedChange).not.toHaveBeenCalled();
-    });
-    it('still expands on a tap', () => {
-        const onExpandedChange = vi.fn();
-        const { header } = mountCard({ expanded: false, onExpandedChange });
-        pointer('pointerdown', header, 790);
-        flushSync();
-        pointer('pointerup', header, 790);
-        flushSync();
-        expect(onExpandedChange).toHaveBeenCalledWith(true);
-    });
-});
-describe('DataPanel phone card layout', () => {
-    it('slides a full-height sheet instead of resizing it, clear of the home indicator', () => {
-        const { panel, header } = mountCard({ expanded: false });
-        // 0.85 of an 800px viewport
-        // jsdom cannot parse env() (it drops padding-bottom and garbles height),
-        // so the safe-area padding itself is checked in a browser
-        expect(panel.style.height).toContain('680px');
-        expect(panel.style.height).toContain('safe-area-inset-bottom');
-        // Collapsed: everything but the 72px header is below the fold
-        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
-        expect(header.classList.contains('touch-none')).toBe(true);
-    });
-    it('keeps content mounted while the card animates closed', () => {
-        vi.useFakeTimers();
-        // Uncontrolled: the chevron drives expanded state
-        const { panel } = mountCard();
-        const chevron = () => host.querySelector('button[title="Expand"], button[title="Collapse"]');
-        if (chevron().title === 'Expand')
-            chevron().click();
-        flushSync();
-        expect(panel.style.getPropertyValue('translate')).toBe('0 0px');
-        expect(host.textContent).toContain('Legend body');
-        chevron().click();
-        flushSync();
-        expect(panel.style.getPropertyValue('translate')).toBe('0 608px');
-        expect(host.textContent).toContain('Legend body');
-        vi.advanceTimersByTime(400);
-        flushSync();
-        expect(host.textContent).not.toContain('Legend body');
-    });
-    it('leaves the desktop card sized by height', () => {
-        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1280);
-        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1280);
-        const { panel } = mountCard({ expanded: false });
-        expect(panel.style.height).toBe('72px');
-        expect(panel.style.getPropertyValue('translate')).toBe('');
-    });
-});

package/dist/__tests__/data-panel-viewport.test.js

@@ -1,45 +0,0 @@
-/**
- * DataPanel card sizing uses the layout viewport, not window.innerWidth.
- *
- * innerWidth includes a vertical scrollbar; the layout width does not. With
- * a 15px scrollbar the card used to be 16px from the left edge and 1px from
- * the right, because both its width and its centred offset came from the
- * wider number.
- */
-import { describe, it, expect, vi, afterEach } from 'vitest';
-import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
-import DataPanel from '../lib/components/DataPanel.svelte';
-const children = createRawSnippet(() => ({ render: () => '<p>Legend</p>' }));
-let instance = null;
-afterEach(() => {
-    if (instance)
-        unmount(instance);
-    instance = null;
-    vi.restoreAllMocks();
-});
-describe('DataPanel card viewport width', () => {
-    it('insets the card equally when a scrollbar makes innerWidth wider than the layout', () => {
-        // 390px window with a 15px vertical scrollbar: 375px of layout
-        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
-        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(375);
-        const host = document.createElement('div');
-        document.body.appendChild(host);
-        instance = mount(DataPanel, {
-            target: host,
-            props: {
-                title: 'Legend & Information',
-                variant: 'card',
-                expanded: false,
-                disableClose: true,
-                mobileBreakpoint: 768,
-                cardConfig: { maxWidth: 480, horizontalMargin: 16 },
-                children,
-            },
-        });
-        flushSync();
-        const panel = host.querySelector('[role="dialog"]');
-        expect(panel.style.left).toBe('16px');
-        // 375 - 2 * 16, so the right margin is 16px too
-        expect(panel.style.width).toBe('343px');
-    });
-});

package/dist/__tests__/dropdown-trigger.test.js

@@ -1,39 +0,0 @@
-/**
- * DropdownMenu trigger styling
- *
- * `triggerVariant` styles the trigger <button> as a Button variant, so a menu
- * in a header looks like the buttons beside it without app-side classes.
- * Without it the trigger stays unstyled, as before.
- */
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import DropdownMenu from '../lib/components/DropdownMenu.svelte';
-import { buttonVariants } from '../lib/components/button-variants.js';
-const trigger = createRawSnippet(() => ({ render: () => '<span>Menu</span>' }));
-const items = [{ label: 'One', href: '/one' }];
-describe('DropdownMenu trigger', () => {
-    it('is unstyled by default', () => {
-        render(DropdownMenu, { props: { items, trigger, triggerClass: 'custom' } });
-        expect(screen.getByRole('button', { name: 'Menu' }).className).toBe('custom');
-    });
-    it('takes Button variant classes from triggerVariant, plus triggerClass', () => {
-        render(DropdownMenu, {
-            props: { items, trigger, triggerVariant: 'ghost', triggerClass: 'custom' },
-        });
-        const button = screen.getByRole('button', { name: 'Menu' });
-        for (const cls of buttonVariants({ variant: 'ghost', size: 'sm' }).split(' ')) {
-            expect(button.classList.contains(cls)).toBe(true);
-        }
-        expect(button.classList.contains('custom')).toBe(true);
-    });
-    it('adds a disclosure chevron only with showChevron', () => {
-        const { unmount } = render(DropdownMenu, { props: { items, trigger } });
-        expect(screen.getByRole('button', { name: 'Menu' }).querySelector('svg')).toBeNull();
-        unmount();
-        render(DropdownMenu, { props: { items, trigger, triggerVariant: 'ghost', showChevron: true } });
-        const chevron = screen.getByRole('button', { name: 'Menu' }).querySelector('svg');
-        expect(chevron).not.toBeNull();
-        expect(chevron?.getAttribute('aria-hidden')).toBe('true');
-    });
-});