@happyvertical/smrt-ui 0.53.0 → 0.53.2

package/dist/components/ui/__tests__/Button.test.js

@@ -1,166 +0,0 @@
-/**
- * Golden test for Button (Sweep L4, #1423).
- *
- * The reference pattern for component tests in this package: render via Testing
- * Library, assert role/name/state, drive interaction with user-event, and prove
- * the rendered output is axe-clean. New primitive tests should mirror this shape.
- */
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Button from '../Button.svelte';
-/** Build a text Snippet for the Button's `children` prop. */
-function textSnippet(text) {
-    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
-}
-describe('Button', () => {
-    it('renders children as a <button> with type=button by default', () => {
-        render(Button, { props: { children: textSnippet('Save') } });
-        const button = screen.getByRole('button', { name: 'Save' });
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveAttribute('type', 'button');
-    });
-    it('fires onclick when clicked', async () => {
-        const onclick = vi.fn();
-        render(Button, { props: { children: textSnippet('Go'), onclick } });
-        await userEvent.click(screen.getByRole('button', { name: 'Go' }));
-        expect(onclick).toHaveBeenCalledTimes(1);
-    });
-    it('is keyboard-activatable when focused', async () => {
-        const onclick = vi.fn();
-        render(Button, { props: { children: textSnippet('Go'), onclick } });
-        const button = screen.getByRole('button', { name: 'Go' });
-        button.focus();
-        expect(button).toHaveFocus();
-        await userEvent.keyboard('{Enter}');
-        expect(onclick).toHaveBeenCalled();
-    });
-    it('does not fire onclick when disabled', async () => {
-        const onclick = vi.fn();
-        render(Button, {
-            props: { children: textSnippet('Go'), disabled: true, onclick },
-        });
-        const button = screen.getByRole('button', { name: 'Go' });
-        expect(button).toBeDisabled();
-        await userEvent.click(button);
-        expect(onclick).not.toHaveBeenCalled();
-    });
-    it('reflects loading as aria-busy and disables interaction', () => {
-        render(Button, { props: { children: textSnippet('Go'), loading: true } });
-        const button = screen.getByRole('button', { name: 'Go' });
-        expect(button).toHaveAttribute('aria-busy', 'true');
-        expect(button).toBeDisabled();
-    });
-    it('renders as a link (role=link) when href is provided', () => {
-        render(Button, {
-            props: { children: textSnippet('Home'), href: '/home' },
-        });
-        const link = screen.getByRole('link', { name: 'Home' });
-        expect(link).toHaveAttribute('href', '/home');
-    });
-    it('appends a custom class while keeping the base button styling (#1589)', () => {
-        render(Button, {
-            props: { children: textSnippet('Save'), class: 'topic-action-btn' },
-        });
-        const button = screen.getByRole('button', { name: 'Save' });
-        // Caller's class is applied (so custom-styled buttons can adopt Button)...
-        expect(button).toHaveClass('topic-action-btn');
-        // ...without dropping the primitive's own base/variant styling.
-        expect(button).toHaveClass('button');
-        expect(button).toHaveClass('primary');
-    });
-    it('appends a custom class in link mode too', () => {
-        render(Button, {
-            props: {
-                children: textSnippet('Home'),
-                href: '/home',
-                class: 'nav-link',
-            },
-        });
-        const link = screen.getByRole('link', { name: 'Home' });
-        expect(link).toHaveClass('nav-link');
-        expect(link).toHaveClass('button');
-    });
-    it('passes target/rel through to the anchor in link mode (#1589)', () => {
-        // External links migrated from `<a target="_blank" rel="...">` to Button
-        // must keep their new-tab + opener-isolation semantics on the rendered <a>.
-        render(Button, {
-            props: {
-                children: textSnippet('Open'),
-                href: 'https://example.com',
-                target: '_blank',
-                rel: 'noreferrer',
-            },
-        });
-        const link = screen.getByRole('link', { name: 'Open' });
-        expect(link).toHaveAttribute('target', '_blank');
-        expect(link).toHaveAttribute('rel', 'noreferrer');
-    });
-    it('drops anchor-only attrs in button mode (no invalid <button target>) (#1608)', () => {
-        // In button mode the anchor-only props must NOT reach the <button> — they
-        // are pulled out of `rest` so the runtime matches the "ignored in button
-        // mode" doc and never emits invalid HTML.
-        render(Button, {
-            props: {
-                children: textSnippet('Save'),
-                target: '_blank',
-                rel: 'noreferrer',
-            },
-        });
-        const button = screen.getByRole('button', { name: 'Save' });
-        expect(button).not.toHaveAttribute('target');
-        expect(button).not.toHaveAttribute('rel');
-    });
-    it('is not navigable when disabled in link mode', async () => {
-        const { container } = render(Button, {
-            props: { children: textSnippet('Home'), href: '/home', disabled: true },
-        });
-        // A disabled link-mode Button must be genuinely non-navigable: it drops its
-        // href (no navigation target), leaves the tab order, and is announced as
-        // disabled. Previously it kept a live href + tab stop and only blocked the
-        // mouse via CSS pointer-events, so keyboard/AT users could still activate
-        // it (flagged by the PR #1599 auto-review).
-        const anchor = container.querySelector('a');
-        if (anchor === null)
-            throw new Error('expected a rendered <a> in link mode');
-        expect(anchor).not.toHaveAttribute('href');
-        expect(anchor).toHaveAttribute('tabindex', '-1');
-        expect(anchor).toHaveAttribute('aria-disabled', 'true');
-        // No href => no implicit link role => not reachable as a link by AT.
-        expect(screen.queryByRole('link')).toBeNull();
-        // ...and keyboard focus can't land on it, so Enter can't navigate.
-        await userEvent.tab();
-        expect(anchor).not.toHaveFocus();
-        await expectNoA11yViolations(container);
-    });
-    it('keeps a disabled link non-navigable even when the caller passes tabindex/aria-disabled', async () => {
-        const { container } = render(Button, {
-            props: {
-                children: textSnippet('Home'),
-                href: '/home',
-                disabled: true,
-                // Passthrough props that must NOT win over the disabled semantics:
-                // `rest` is spread after the component's own attributes on the <a>.
-                tabindex: 0,
-                'aria-disabled': false,
-            },
-        });
-        const anchor = container.querySelector('a');
-        if (anchor === null)
-            throw new Error('expected a rendered <a> in link mode');
-        expect(anchor).toHaveAttribute('tabindex', '-1');
-        expect(anchor).toHaveAttribute('aria-disabled', 'true');
-        expect(anchor).not.toHaveAttribute('href');
-        await userEvent.tab();
-        expect(anchor).not.toHaveFocus();
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Button, {
-            props: { children: textSnippet('Accessible') },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/Card.test.js

@@ -1,103 +0,0 @@
-/**
- * Component test for Card (Sweep S11, #1416).
- *
- * Mirrors the Button golden pattern: render → assert structure/variant → axe.
- * Card is a presentational surface — it has no interactive behavior of its own
- * (no clickable/keyboard handler in the source), so this suite covers rendering
- * of content/header/footer snippets, variant + padding classes, the hoverable
- * flag, attribute pass-through (`...rest`), and a11y.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Card from '../Card.svelte';
-/** Build a text Snippet for a Card slot. */
-function textSnippet(text) {
-    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
-}
-describe('Card', () => {
-    it('renders children inside the card content region', () => {
-        render(Card, { props: { children: textSnippet('Body text') } });
-        expect(screen.getByText('Body text')).toBeInTheDocument();
-    });
-    it('applies the default variant and md padding classes', () => {
-        const { container } = render(Card, {
-            props: { children: textSnippet('Body') },
-        });
-        const card = container.querySelector('.card');
-        expect(card).toHaveClass('default');
-        expect(card).toHaveClass('padding-md');
-    });
-    it('reflects an explicit variant and padding', () => {
-        const { container } = render(Card, {
-            props: {
-                variant: 'elevated',
-                padding: 'lg',
-                children: textSnippet('Body'),
-            },
-        });
-        const card = container.querySelector('.card');
-        expect(card).toHaveClass('elevated');
-        expect(card).toHaveClass('padding-lg');
-    });
-    it('adds the hoverable class only when hoverable is true', () => {
-        const { container: plain } = render(Card, {
-            props: { children: textSnippet('Body') },
-        });
-        expect(plain.querySelector('.card')).not.toHaveClass('hoverable');
-        const { container: hover } = render(Card, {
-            props: { hoverable: true, children: textSnippet('Body') },
-        });
-        expect(hover.querySelector('.card')).toHaveClass('hoverable');
-    });
-    it('renders header and footer slots when provided', () => {
-        const { container } = render(Card, {
-            props: {
-                header: textSnippet('Header'),
-                footer: textSnippet('Footer'),
-                children: textSnippet('Body'),
-            },
-        });
-        expect(container.querySelector('.card-header')).toBeInTheDocument();
-        expect(container.querySelector('.card-footer')).toBeInTheDocument();
-        expect(screen.getByText('Header')).toBeInTheDocument();
-        expect(screen.getByText('Footer')).toBeInTheDocument();
-    });
-    it('omits header and footer regions when those slots are absent', () => {
-        const { container } = render(Card, {
-            props: { children: textSnippet('Body') },
-        });
-        expect(container.querySelector('.card-header')).toBeNull();
-        expect(container.querySelector('.card-footer')).toBeNull();
-    });
-    it('forwards rest attributes (e.g. data-testid, aria-label) to the root', () => {
-        const { container } = render(Card, {
-            props: {
-                'data-testid': 'profile-card',
-                'aria-label': 'Profile',
-                children: textSnippet('Body'),
-            },
-        });
-        const card = container.querySelector('.card');
-        expect(card).toHaveAttribute('data-testid', 'profile-card');
-        expect(card).toHaveAttribute('aria-label', 'Profile');
-    });
-    it('is axe-clean for a content-only card', async () => {
-        const { container } = render(Card, {
-            props: { children: textSnippet('Accessible body') },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean with header and footer regions', async () => {
-        const { container } = render(Card, {
-            props: {
-                variant: 'outlined',
-                header: textSnippet('Heading'),
-                footer: textSnippet('Actions'),
-                children: textSnippet('Accessible body'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/IconToggle.test.js

@@ -1,59 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import IconToggle from '../IconToggle.svelte';
-const icon = createRawSnippet(() => ({
-    render: () => '<svg viewBox="0 0 24 24" width="18" height="18"></svg>',
-}));
-describe('IconToggle', () => {
-    it('is a labelled toggle button reflecting pressed', () => {
-        render(IconToggle, {
-            props: { label: 'Grid', pressed: true, children: icon },
-        });
-        const button = screen.getByRole('button', { name: 'Grid' });
-        expect(button).toHaveAttribute('aria-pressed', 'true');
-        expect(button).toHaveAttribute('type', 'button');
-    });
-    it('shows a count badge that is part of the name and the tooltip', () => {
-        render(IconToggle, {
-            props: { label: 'Draft', count: 12, children: icon },
-        });
-        const button = screen.getByRole('button', { name: 'Draft (12)' });
-        expect(button).toHaveAttribute('aria-pressed', 'false');
-        expect(screen.getByRole('tooltip')).toHaveTextContent('Draft (12)');
-        expect(button.querySelector('.count')).toHaveTextContent('12');
-    });
-    it('keeps no state of its own: it calls onclick and the owner decides', async () => {
-        const onclick = vi.fn();
-        render(IconToggle, {
-            props: { label: 'Cards', pressed: false, onclick, children: icon },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Cards' }));
-        expect(onclick).toHaveBeenCalledTimes(1);
-        expect(screen.getByRole('button', { name: 'Cards' })).toHaveAttribute('aria-pressed', 'false');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(IconToggle, {
-            props: { label: 'Grid', count: 3, children: icon },
-        });
-        await expectNoA11yViolations(container);
-    });
-});
-describe('IconToggle tone', () => {
-    it('carries its tone as a custom property and a toned class', () => {
-        render(IconToggle, {
-            props: { label: 'Draft', tone: 'var(--status-draft)', children: icon },
-        });
-        const button = screen.getByRole('button', { name: 'Draft' });
-        expect(button).toHaveClass('toned');
-        expect(button.style.getPropertyValue('--icon-toggle-tone')).toBe('var(--status-draft)');
-    });
-    it('has no tone styling unless asked', () => {
-        render(IconToggle, { props: { label: 'Grid', children: icon } });
-        const button = screen.getByRole('button', { name: 'Grid' });
-        expect(button).not.toHaveClass('toned');
-        expect(button.style.getPropertyValue('--icon-toggle-tone')).toBe('');
-    });
-});

package/dist/components/ui/__tests__/IconToggleGroup.test.js

@@ -1,30 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import IconToggleGroup from '../IconToggleGroup.svelte';
-const buttons = createRawSnippet(() => ({
-    render: () => '<span><button type="button" aria-pressed="true" aria-label="Draft (2)">D</button><button type="button" aria-pressed="false" aria-label="Review (0)">R</button></span>',
-}));
-describe('IconToggleGroup', () => {
-    it('is a named group around its toggles', () => {
-        render(IconToggleGroup, {
-            props: { label: 'Filter by status', children: buttons },
-        });
-        const group = screen.getByRole('group', { name: 'Filter by status' });
-        expect(group.querySelectorAll('button')).toHaveLength(2);
-    });
-    it('adds no state: the toggles keep their own pressed value', () => {
-        render(IconToggleGroup, {
-            props: { label: 'Filter by status', children: buttons },
-        });
-        expect(screen.getByRole('button', { name: 'Draft (2)' })).toHaveAttribute('aria-pressed', 'true');
-        expect(screen.getByRole('button', { name: 'Review (0)' })).toHaveAttribute('aria-pressed', 'false');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(IconToggleGroup, {
-            props: { label: 'Filter by status', children: buttons },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/Pagination.test.js

@@ -1,113 +0,0 @@
-/**
- * Component test for Pagination (Sweep S11, #1416).
- *
- * Pagination has two modes: link mode (anchors, default) and callback mode
- * (buttons + `onPageChange`). This suite exercises the callback mode for
- * interaction (clicking pages/prev/next fires the callback; bounds disable the
- * edge controls) and verifies the navigation landmark, current-page marking,
- * and a11y. aria-labels resolve to their registered English defaults outside a
- * Provider (e.g. "Previous page", "Go to page 2").
- */
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Pagination from '../Pagination.svelte';
-describe('Pagination', () => {
-    it('renders nothing when there is a single page', () => {
-        const { container } = render(Pagination, {
-            props: { currentPage: 1, totalPages: 1 },
-        });
-        expect(container.querySelector('.pagination')).toBeNull();
-    });
-    it('renders a navigation landmark with the provided aria-label', () => {
-        render(Pagination, {
-            props: { currentPage: 1, totalPages: 5, 'aria-label': 'Article pages' },
-        });
-        expect(screen.getByRole('navigation', { name: 'Article pages' })).toBeInTheDocument();
-    });
-    it('marks the current page with aria-current and renders it as a non-link', () => {
-        render(Pagination, {
-            props: { currentPage: 3, totalPages: 5, onPageChange: vi.fn() },
-        });
-        const current = screen.getByText('3');
-        expect(current).toHaveAttribute('aria-current', 'page');
-        // current page is a span, not a button
-        expect(current.tagName).toBe('SPAN');
-    });
-    it('fires onPageChange with the clicked page number (callback mode)', async () => {
-        const onPageChange = vi.fn();
-        render(Pagination, {
-            props: { currentPage: 1, totalPages: 5, onPageChange },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Go to page 3' }));
-        expect(onPageChange).toHaveBeenCalledWith(3);
-    });
-    it('fires onPageChange for prev and next relative to the current page', async () => {
-        const onPageChange = vi.fn();
-        render(Pagination, {
-            props: { currentPage: 3, totalPages: 5, onPageChange },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Previous page' }));
-        expect(onPageChange).toHaveBeenLastCalledWith(2);
-        await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
-        expect(onPageChange).toHaveBeenLastCalledWith(4);
-    });
-    it('disables prev/first on the first page and blocks their callback', async () => {
-        const onPageChange = vi.fn();
-        render(Pagination, {
-            props: { currentPage: 1, totalPages: 5, onPageChange },
-        });
-        const prev = screen.getByRole('button', { name: 'Previous page' });
-        const first = screen.getByRole('button', { name: 'First page' });
-        expect(prev).toBeDisabled();
-        expect(first).toBeDisabled();
-        await userEvent.click(prev);
-        expect(onPageChange).not.toHaveBeenCalled();
-    });
-    it('disables next/last on the last page and blocks their callback', async () => {
-        const onPageChange = vi.fn();
-        render(Pagination, {
-            props: { currentPage: 5, totalPages: 5, onPageChange },
-        });
-        const next = screen.getByRole('button', { name: 'Next page' });
-        const last = screen.getByRole('button', { name: /Last page/ });
-        expect(next).toBeDisabled();
-        expect(last).toBeDisabled();
-        await userEvent.click(next);
-        expect(onPageChange).not.toHaveBeenCalled();
-    });
-    it('renders numbered pages as links in link mode (no onPageChange)', () => {
-        render(Pagination, {
-            props: { currentPage: 1, totalPages: 3, baseUrl: '/articles' },
-        });
-        const page2 = screen.getByRole('link', { name: 'Go to page 2' });
-        expect(page2).toHaveAttribute('href', '/articles/page/2');
-    });
-    it('renders both ellipses on a deep middle page without key collision (#1586)', async () => {
-        // currentPage in the middle of many pages emits two 'ellipsis' sentinels.
-        // Keying the {#each} by value would collide; keying by index keeps both.
-        const onPageChange = vi.fn();
-        const { container, rerender } = render(Pagination, {
-            props: { currentPage: 10, totalPages: 20, onPageChange },
-        });
-        expect(container.querySelectorAll('.ellipsis')).toHaveLength(2);
-        // Re-render to an adjacent deep page: still two ellipses, still one current.
-        await rerender({ currentPage: 11, totalPages: 20, onPageChange });
-        expect(container.querySelectorAll('.ellipsis')).toHaveLength(2);
-        expect(container.querySelectorAll('[aria-current="page"]')).toHaveLength(1);
-        expect(screen.getByText('11')).toHaveAttribute('aria-current', 'page');
-    });
-    it('is axe-clean in callback mode on a middle page', async () => {
-        const { container } = render(Pagination, {
-            props: { currentPage: 3, totalPages: 10, onPageChange: vi.fn() },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean in link mode at the first-page boundary', async () => {
-        const { container } = render(Pagination, {
-            props: { currentPage: 1, totalPages: 4, baseUrl: '/articles' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/Popover.test.js

@@ -1,44 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Popover from '../Popover.svelte';
-const icon = createRawSnippet(() => ({
-    render: () => '<svg viewBox="0 0 24 24" width="18" height="18"></svg>',
-}));
-const body = createRawSnippet(() => ({
-    render: () => '<p>No main picture</p>',
-}));
-describe('Popover', () => {
-    it('names an icon-only trigger with triggerLabel and opens its panel', async () => {
-        render(Popover, {
-            props: {
-                label: 'Issues',
-                triggerLabel: '3 issues',
-                trigger: icon,
-                children: body,
-            },
-        });
-        const trigger = screen.getByRole('button', { name: '3 issues' });
-        expect(trigger).toHaveAttribute('aria-expanded', 'false');
-        await userEvent.click(trigger);
-        expect(trigger).toHaveAttribute('aria-expanded', 'true');
-        expect(screen.getByRole('dialog', { name: 'Issues' })).toHaveTextContent('No main picture');
-    });
-    it('is named by its visible content when there is no triggerLabel', () => {
-        render(Popover, { props: { label: 'Filters', children: body } });
-        expect(screen.getByRole('button', { name: 'Filters' })).not.toHaveAttribute('aria-label');
-    });
-    it('is axe-clean with an icon-only trigger', async () => {
-        const { container } = render(Popover, {
-            props: {
-                label: 'Issues',
-                triggerLabel: '3 issues',
-                trigger: icon,
-                children: body,
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/dropdown-popover-icon.test.js

@@ -1,125 +0,0 @@
-/**
- * Dropdown menu items take an icon, and Dropdown and Popover each offer an
- * icon-only trigger look (a borderless 44px round button in the surrounding
- * colour), so an app does not restyle `.dropdown__trigger` / `.popover__trigger`.
- */
-import { readFileSync } from 'node:fs';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it, vi } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Dropdown from '../Dropdown.svelte';
-import Popover from '../Popover.svelte';
-const glyph = createRawSnippet(() => ({
-    render: () => '<svg data-testid="glyph" viewBox="0 0 24 24" width="18" height="18"></svg>',
-}));
-const body = createRawSnippet(() => ({ render: () => '<p>Details</p>' }));
-describe('Dropdown icons', () => {
-    it('shows an item icon beside the label and hides it from assistive technology', async () => {
-        render(Dropdown, {
-            props: {
-                label: 'Actions',
-                items: [
-                    { id: 'edit', label: 'Edit', icon: glyph },
-                    { id: 'plain', label: 'Plain' },
-                ],
-            },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
-        const edit = screen.getByRole('menuitem', { name: 'Edit' });
-        const icon = edit.querySelector('.dropdown__item-icon');
-        expect(icon).not.toBeNull();
-        expect(icon).toHaveAttribute('aria-hidden', 'true');
-        expect(icon?.querySelector('svg')).not.toBeNull();
-        expect(screen
-            .getByRole('menuitem', { name: 'Plain' })
-            .querySelector('.dropdown__item-icon')).toBeNull();
-    });
-    it('is an icon-only 44px trigger named by triggerLabel', async () => {
-        const { container } = render(Dropdown, {
-            props: {
-                variant: 'icon',
-                triggerLabel: 'Actions for July 14 Council',
-                trigger: glyph,
-                items: [{ id: 'edit', label: 'Edit', icon: glyph }],
-            },
-        });
-        const trigger = screen.getByRole('button', {
-            name: 'Actions for July 14 Council',
-        });
-        expect(trigger).toHaveClass('dropdown__trigger--icon');
-        expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
-        await userEvent.click(trigger);
-        await expectNoA11yViolations(container);
-    });
-    it('an icon trigger falls back to label, and warns when it has no name at all', () => {
-        const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
-        render(Dropdown, {
-            props: {
-                variant: 'icon',
-                label: 'Row actions',
-                trigger: glyph,
-                items: [{ id: 'a', label: 'A' }],
-            },
-        });
-        expect(screen.getByRole('button', { name: 'Row actions' })).toHaveClass('dropdown__trigger--icon');
-        expect(warn).not.toHaveBeenCalled();
-        render(Dropdown, {
-            props: {
-                variant: 'icon',
-                trigger: glyph,
-                items: [{ id: 'a', label: 'A' }],
-            },
-        });
-        expect(warn).toHaveBeenCalledWith(expect.stringContaining('triggerLabel'));
-        warn.mockRestore();
-    });
-    it('keeps the bordered button look by default', () => {
-        render(Dropdown, {
-            props: { label: 'Actions', items: [{ id: 'a', label: 'A' }] },
-        });
-        expect(screen.getByRole('button', { name: 'Actions' })).not.toHaveClass('dropdown__trigger--icon');
-    });
-});
-describe('Popover icon variant', () => {
-    it('renders the icon trigger and opens its panel', async () => {
-        render(Popover, {
-            props: {
-                label: 'Issues',
-                triggerLabel: '2 issues',
-                variant: 'icon',
-                trigger: glyph,
-                children: body,
-            },
-        });
-        const trigger = screen.getByRole('button', { name: '2 issues' });
-        expect(trigger).toHaveClass('popover__trigger--icon');
-        await userEvent.click(trigger);
-        expect(screen.getByRole('dialog', { name: 'Issues' })).toHaveTextContent('Details');
-    });
-    it('an icon trigger without triggerLabel is named by label', () => {
-        render(Popover, {
-            props: {
-                label: 'Issues',
-                variant: 'icon',
-                trigger: glyph,
-                children: body,
-            },
-        });
-        expect(screen.getByRole('button', { name: 'Issues' })).toHaveClass('popover__trigger--icon');
-    });
-    it('keeps the standard primary focus ring on the icon trigger', () => {
-        const source = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '..', 'Popover.svelte'), 'utf8');
-        const css = source.slice(source.indexOf('<style>'));
-        expect(css).toMatch(/\.popover__trigger:focus-visible[^{]*\{ outline: 2px solid var\(--smrt-color-primary\)/);
-        // No icon-specific outline override (a currentColor ring under 3:1).
-        expect(css).not.toMatch(/\.popover__trigger--icon:focus-visible \{[^}]*outline/);
-    });
-    it('keeps the bordered button look by default', () => {
-        render(Popover, { props: { label: 'Filters', children: body } });
-        expect(screen.getByRole('button', { name: 'Filters' })).not.toHaveClass('popover__trigger--icon');
-    });
-});