@happyvertical/smrt-ui 0.53.1 → 0.53.3

package/dist/components/nav/__tests__/FilterChips.test.js

@@ -1,94 +0,0 @@
-/**
- * Component test for FilterChips (Sweep S11, #1416).
- *
- * FilterChips is a single-select filter: a `role="radiogroup"` of
- * `role="radio"` buttons where the selected option carries `aria-checked`.
- * (There is no per-chip remove/dismiss affordance in the source — selection is
- * the only interaction.) This suite asserts that structure/state, drives
- * selection via click, and proves axe-cleanliness, including the optional
- * "All" option.
- */
-import { render, screen, within } 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 FilterChips from '../FilterChips.svelte';
-const OPTIONS = [
-    { value: 'all-news', label: 'News', count: 12 },
-    { value: 'sports', label: 'Sports', count: 5 },
-    { value: 'tech', label: 'Tech' },
-];
-describe('FilterChips', () => {
-    it('renders a radiogroup with one radio per option', () => {
-        render(FilterChips, { props: { options: OPTIONS, selected: 'all-news' } });
-        const group = screen.getByRole('radiogroup');
-        expect(within(group).getAllByRole('radio')).toHaveLength(3);
-    });
-    it('marks the selected option with aria-checked=true and others false', () => {
-        render(FilterChips, { props: { options: OPTIONS, selected: 'sports' } });
-        expect(screen.getByRole('radio', { name: /Sports/ })).toHaveAttribute('aria-checked', 'true');
-        expect(screen.getByRole('radio', { name: /News/ })).toHaveAttribute('aria-checked', 'false');
-    });
-    it('renders the optional count alongside its chip label', () => {
-        render(FilterChips, { props: { options: OPTIONS, selected: 'all-news' } });
-        expect(screen.getByRole('radio', { name: /News/ })).toHaveTextContent('12');
-    });
-    it('fires onchange with the clicked option value', async () => {
-        const onchange = vi.fn();
-        render(FilterChips, {
-            props: { options: OPTIONS, selected: 'all-news', onchange },
-        });
-        await userEvent.click(screen.getByRole('radio', { name: /Tech/ }));
-        expect(onchange).toHaveBeenCalledWith('tech');
-    });
-    it('does not fire onchange when the already-selected chip is clicked', async () => {
-        const onchange = vi.fn();
-        render(FilterChips, {
-            props: { options: OPTIONS, selected: 'sports', onchange },
-        });
-        await userEvent.click(screen.getByRole('radio', { name: /Sports/ }));
-        expect(onchange).not.toHaveBeenCalled();
-    });
-    it('does not fire onchange for a disabled option', async () => {
-        const onchange = vi.fn();
-        const options = [
-            { value: 'a', label: 'A' },
-            { value: 'b', label: 'B', disabled: true },
-        ];
-        render(FilterChips, { props: { options, selected: 'a', onchange } });
-        const disabled = screen.getByRole('radio', { name: 'B' });
-        expect(disabled).toBeDisabled();
-        await userEvent.click(disabled);
-        expect(onchange).not.toHaveBeenCalled();
-    });
-    it('prepends an "All" option (empty value) when showAll is set', async () => {
-        const onchange = vi.fn();
-        render(FilterChips, {
-            props: {
-                options: OPTIONS,
-                selected: 'sports',
-                showAll: true,
-                allLabel: 'Everything',
-                onchange,
-            },
-        });
-        const radios = screen.getAllByRole('radio');
-        expect(radios).toHaveLength(4);
-        const all = screen.getByRole('radio', { name: /Everything/ });
-        expect(all).toHaveAttribute('aria-checked', 'false');
-        await userEvent.click(all);
-        expect(onchange).toHaveBeenCalledWith('');
-    });
-    it('is axe-clean for a default selected group', async () => {
-        const { container } = render(FilterChips, {
-            props: { options: OPTIONS, selected: 'all-news' },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean with the "All" option enabled', async () => {
-        const { container } = render(FilterChips, {
-            props: { options: OPTIONS, selected: '', showAll: true },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/nav/__tests__/LinkTabs.test.js

@@ -1,117 +0,0 @@
-/** Link tabs: a navigation row of URLs with overflow, badges, active-in-view. */
-import { render, screen, within } 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 Tabs from '../Tabs.svelte';
-import { splitTabs } from '../tabs-overflow.js';
-const TABS = [
-    { id: 'article', label: 'Article', href: '/c/1' },
-    { id: 'images', label: 'Images', href: '/c/1/images', badge: 3 },
-    { id: 'videos', label: 'Videos', href: '/c/1/videos' },
-    { id: 'social', label: 'Social', href: '/c/1/social' },
-    { id: 'review', label: 'Review', href: '/c/1/review', badge: '!' },
-    { id: 'jobs', label: 'Background work', href: '/c/1/jobs' },
-];
-describe('splitTabs', () => {
-    it('keeps everything in the row under the limit', () => {
-        expect(splitTabs(TABS, 'article', 10).overflow).toEqual([]);
-        expect(splitTabs(TABS, 'article', undefined).overflow).toEqual([]);
-    });
-    it('promotes the active tab into the row', () => {
-        const { visible, overflow } = splitTabs(TABS, 'jobs', 4);
-        expect(visible.map((tab) => tab.id)).toEqual([
-            'article',
-            'images',
-            'videos',
-            'jobs',
-        ]);
-        expect(overflow.map((tab) => tab.id)).toEqual(['social', 'review']);
-    });
-});
-describe('Tabs with hrefs', () => {
-    it('renders navigation links, not a tablist, with aria-current on the active tab', () => {
-        render(Tabs, {
-            props: { tabs: TABS, active: 'images', 'aria-label': 'Content sections' },
-        });
-        const nav = screen.getByRole('navigation', { name: 'Content sections' });
-        expect(nav).toHaveAttribute('data-shell-tabs');
-        expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
-        const active = within(nav).getByRole('link', { name: /Images/ });
-        expect(active).toHaveAttribute('href', '/c/1/images');
-        expect(active).toHaveAttribute('aria-current', 'page');
-        expect(active).toHaveTextContent('3');
-        expect(within(nav).getByRole('link', { name: 'Article' })).not.toHaveAttribute('aria-current');
-    });
-    it('moves extra tabs under "More", keeps the active one visible, and dots the menu for a hidden badge', async () => {
-        const { container } = render(Tabs, {
-            props: {
-                tabs: TABS,
-                active: 'jobs',
-                maxVisible: 4,
-                'aria-label': 'Content sections',
-            },
-        });
-        const row = container.querySelector('.tabs-links-row');
-        expect(within(row)
-            .getAllByRole('link')
-            .map((link) => link.dataset.tabId)).toEqual(['article', 'images', 'videos', 'jobs']);
-        const more = container.querySelector('details.tabs-more');
-        expect(within(more).getByText('More')).toBeInTheDocument();
-        expect(within(more).getByText('(has updates)')).toBeInTheDocument();
-        await userEvent.click(within(more).getByText('More'));
-        expect(more.open).toBe(true);
-        expect(within(more).getByRole('link', { name: /Review/ })).toHaveAttribute('href', '/c/1/review');
-    });
-    it('a disabled link tab never fires onchange', async () => {
-        const onchange = vi.fn();
-        render(Tabs, {
-            props: {
-                tabs: [
-                    { id: 'article', label: 'Article', href: '/c/1' },
-                    {
-                        id: 'locked',
-                        label: 'Locked',
-                        href: '/c/1/locked',
-                        disabled: true,
-                    },
-                ],
-                active: 'article',
-                onchange,
-                'aria-label': 'Content sections',
-            },
-        });
-        const locked = screen.getByText('Locked').closest('a');
-        await userEvent.click(locked);
-        expect(onchange).not.toHaveBeenCalled();
-    });
-    it('does not dot "More" for an empty-string badge, matching the tab itself', () => {
-        const { container } = render(Tabs, {
-            props: {
-                tabs: [
-                    { id: 'a', label: 'A', href: '/a' },
-                    { id: 'b', label: 'B', href: '/b' },
-                    { id: 'c', label: 'C', href: '/c', badge: '' },
-                ],
-                active: 'a',
-                maxVisible: 2,
-                'aria-label': 'Sections',
-            },
-        });
-        const more = container.querySelector('details.tabs-more');
-        expect(more).not.toBeNull();
-        expect(more.querySelector('.tab-dot')).toBeNull();
-        expect(more.querySelector('.tab-badge')).toBeNull();
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Tabs, {
-            props: {
-                tabs: TABS,
-                active: 'article',
-                maxVisible: 4,
-                'aria-label': 'Content sections',
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/nav/__tests__/Tabs.test.js

@@ -1,128 +0,0 @@
-/**
- * Component test for Tabs (Sweep S11, #1416).
- *
- * Tabs renders an ARIA tablist of `role="tab"` buttons with roving tabindex,
- * `aria-selected` on the active tab, and a `role="tabpanel"` for children.
- * This suite asserts that structure/state, drives click + Arrow/Home/End
- * keyboard navigation (which fire `onchange`), and proves axe-cleanliness.
- */
-import { render, screen, within } 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 Tabs from '../Tabs.svelte';
-const TABS = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'activity', label: 'Activity', count: 4 },
-    { id: 'settings', label: 'Settings' },
-];
-/** Build a text Snippet for the Tabs `children` (panel) prop. */
-function panelSnippet(text) {
-    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
-}
-describe('Tabs', () => {
-    it('renders a tablist with one tab button per tab', () => {
-        render(Tabs, {
-            props: { tabs: TABS, active: 'overview', 'aria-label': 'Sections' },
-        });
-        const tablist = screen.getByRole('tablist', { name: 'Sections' });
-        expect(within(tablist).getAllByRole('tab')).toHaveLength(3);
-    });
-    it('marks the active tab with aria-selected and a tabindex of 0', () => {
-        render(Tabs, { props: { tabs: TABS, active: 'activity' } });
-        const active = screen.getByRole('tab', { name: /Activity/ });
-        expect(active).toHaveAttribute('aria-selected', 'true');
-        expect(active).toHaveAttribute('tabindex', '0');
-        const inactive = screen.getByRole('tab', { name: 'Overview' });
-        expect(inactive).toHaveAttribute('aria-selected', 'false');
-        expect(inactive).toHaveAttribute('tabindex', '-1');
-    });
-    it('renders the optional count alongside its tab label', () => {
-        render(Tabs, { props: { tabs: TABS, active: 'overview' } });
-        expect(screen.getByRole('tab', { name: /Activity/ })).toHaveTextContent('4');
-    });
-    it('renders children inside a tabpanel labelled by the active tab', () => {
-        render(Tabs, {
-            props: {
-                tabs: TABS,
-                active: 'overview',
-                children: panelSnippet('Overview content'),
-            },
-        });
-        const panel = screen.getByRole('tabpanel');
-        expect(within(panel).getByText('Overview content')).toBeInTheDocument();
-    });
-    it('fires onchange with the clicked tab id', async () => {
-        const onchange = vi.fn();
-        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
-        await userEvent.click(screen.getByRole('tab', { name: 'Settings' }));
-        expect(onchange).toHaveBeenCalledWith('settings');
-    });
-    it('does not fire onchange when the already-active tab is clicked', async () => {
-        const onchange = vi.fn();
-        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
-        await userEvent.click(screen.getByRole('tab', { name: 'Overview' }));
-        expect(onchange).not.toHaveBeenCalled();
-    });
-    // ArrowRight/ArrowLeft are asserted in separate renders rather than chained:
-    // the component moves focus to the newly-activated tab, so a second arrow key
-    // in the same render would target whichever tab focus landed on — racy across
-    // suite ordering. Each test focuses one known tab and asserts a single hop.
-    it('moves to the next tab with ArrowRight', async () => {
-        const onchange = vi.fn();
-        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
-        screen.getByRole('tab', { name: 'Overview' }).focus();
-        await userEvent.keyboard('{ArrowRight}');
-        expect(onchange).toHaveBeenLastCalledWith('activity');
-    });
-    it('moves to the previous tab with ArrowLeft', async () => {
-        const onchange = vi.fn();
-        // Render with Activity active so it owns the roving tabindex and is focusable.
-        // Activity carries a count badge, so its accessible name is "Activity 4".
-        render(Tabs, { props: { tabs: TABS, active: 'activity', onchange } });
-        screen.getByRole('tab', { name: /Activity/ }).focus();
-        await userEvent.keyboard('{ArrowLeft}');
-        expect(onchange).toHaveBeenLastCalledWith('overview');
-    });
-    it('wraps from the first tab to the last with ArrowLeft', async () => {
-        const onchange = vi.fn();
-        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
-        screen.getByRole('tab', { name: 'Overview' }).focus();
-        await userEvent.keyboard('{ArrowLeft}');
-        expect(onchange).toHaveBeenLastCalledWith('settings');
-    });
-    it('jumps to the first/last tab with Home/End', async () => {
-        const onchange = vi.fn();
-        render(Tabs, { props: { tabs: TABS, active: 'activity', onchange } });
-        screen.getByRole('tab', { name: /Activity/ }).focus();
-        await userEvent.keyboard('{End}');
-        expect(onchange).toHaveBeenLastCalledWith('settings');
-        await userEvent.keyboard('{Home}');
-        expect(onchange).toHaveBeenLastCalledWith('overview');
-    });
-    it('skips disabled tabs during keyboard navigation', async () => {
-        const onchange = vi.fn();
-        const tabs = [
-            { id: 'a', label: 'A' },
-            { id: 'b', label: 'B', disabled: true },
-            { id: 'c', label: 'C' },
-        ];
-        render(Tabs, { props: { tabs, active: 'a', onchange } });
-        expect(screen.getByRole('tab', { name: 'B' })).toBeDisabled();
-        screen.getByRole('tab', { name: 'A' }).focus();
-        await userEvent.keyboard('{ArrowRight}');
-        expect(onchange).toHaveBeenLastCalledWith('c');
-    });
-    it('is axe-clean with a labelled tablist and panel', async () => {
-        const { container } = render(Tabs, {
-            props: {
-                tabs: TABS,
-                active: 'overview',
-                'aria-label': 'Sections',
-                children: panelSnippet('Panel content'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/roles/__tests__/RoleSelector.test.js

@@ -1,134 +0,0 @@
-/**
- * Component test for RoleSelector (#1586 remediation, epic #1354).
- *
- * RoleSelector is a single-select listbox: a trigger button (`aria-haspopup`/
- * `aria-expanded`) opens a `role="listbox"` of `role="option"` buttons. This
- * suite covers the keyboard support added to match the WAI-ARIA listbox pattern
- * (mirroring `ui/Dropdown.svelte`): open on Enter/ArrowDown, focus-into-list,
- * Arrow/Home/End roving focus, Enter to select, and Escape to close + refocus
- * the trigger. Axe-cleanliness is asserted for both open and closed states.
- */
-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 RoleSelector from '../RoleSelector.svelte';
-function role(id, name, isSystem = false) {
-    return {
-        id,
-        slug: id,
-        created_at: null,
-        updated_at: null,
-        tenantId: null,
-        name,
-        description: `${name} role`,
-        isSystem,
-    };
-}
-const ROLES = [
-    role('admin', 'Admin', true),
-    role('editor', 'Editor'),
-    role('viewer', 'Viewer'),
-];
-describe('RoleSelector', () => {
-    it('exposes a collapsed listbox trigger by default', () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        const trigger = screen.getByRole('button');
-        expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
-        expect(trigger).toHaveAttribute('aria-expanded', 'false');
-        expect(screen.queryByRole('listbox')).toBeNull();
-    });
-    it('shows the placeholder when no role is selected', () => {
-        render(RoleSelector, {
-            props: { roles: ROLES, onchange: vi.fn(), placeholder: 'Pick one' },
-        });
-        expect(screen.getByText('Pick one')).toBeInTheDocument();
-    });
-    it('opens via click and exposes the options as a listbox', async () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        await userEvent.click(screen.getByRole('button'));
-        expect(screen.getByRole('listbox')).toBeInTheDocument();
-        expect(screen.getAllByRole('option')).toHaveLength(3);
-    });
-    it('opens on Enter and moves focus onto the first option', async () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        screen.getByRole('button').focus();
-        await userEvent.keyboard('{Enter}');
-        const options = screen.getAllByRole('option');
-        expect(options[0]).toHaveFocus();
-    });
-    it('opens on ArrowDown and focuses the already-selected option', async () => {
-        render(RoleSelector, {
-            props: { roles: ROLES, value: 'viewer', onchange: vi.fn() },
-        });
-        screen.getByRole('button').focus();
-        await userEvent.keyboard('{ArrowDown}');
-        const viewer = screen.getByRole('option', { name: /Viewer/ });
-        expect(viewer).toHaveFocus();
-    });
-    it('roves focus with ArrowDown/ArrowUp and wraps at the ends', async () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        screen.getByRole('button').focus();
-        await userEvent.keyboard('{Enter}'); // focuses option 0 (Admin)
-        const options = screen.getAllByRole('option');
-        await userEvent.keyboard('{ArrowDown}');
-        expect(options[1]).toHaveFocus();
-        await userEvent.keyboard('{ArrowDown}');
-        expect(options[2]).toHaveFocus();
-        await userEvent.keyboard('{ArrowDown}'); // wraps to first
-        expect(options[0]).toHaveFocus();
-        await userEvent.keyboard('{ArrowUp}'); // wraps to last
-        expect(options[2]).toHaveFocus();
-    });
-    it('jumps to the first/last option with Home/End', async () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        screen.getByRole('button').focus();
-        await userEvent.keyboard('{Enter}');
-        const options = screen.getAllByRole('option');
-        await userEvent.keyboard('{End}');
-        expect(options[2]).toHaveFocus();
-        await userEvent.keyboard('{Home}');
-        expect(options[0]).toHaveFocus();
-    });
-    it('selects the focused option with Enter and fires onchange', async () => {
-        const onchange = vi.fn();
-        render(RoleSelector, { props: { roles: ROLES, onchange } });
-        screen.getByRole('button').focus();
-        await userEvent.keyboard('{Enter}'); // open, focus Admin
-        await userEvent.keyboard('{ArrowDown}'); // focus Editor
-        await userEvent.keyboard('{Enter}'); // select Editor
-        expect(onchange).toHaveBeenCalledWith('editor');
-        expect(screen.queryByRole('listbox')).toBeNull();
-    });
-    it('closes on Escape and restores focus to the trigger', async () => {
-        render(RoleSelector, { props: { roles: ROLES, onchange: vi.fn() } });
-        const trigger = screen.getByRole('button');
-        trigger.focus();
-        await userEvent.keyboard('{Enter}');
-        expect(screen.getByRole('listbox')).toBeInTheDocument();
-        await userEvent.keyboard('{Escape}');
-        expect(screen.queryByRole('listbox')).toBeNull();
-        expect(trigger).toHaveFocus();
-    });
-    it('does not open when disabled', async () => {
-        render(RoleSelector, {
-            props: { roles: ROLES, onchange: vi.fn(), disabled: true },
-        });
-        const trigger = screen.getByRole('button');
-        await userEvent.click(trigger);
-        expect(screen.queryByRole('listbox')).toBeNull();
-    });
-    it('is axe-clean when closed', async () => {
-        const { container } = render(RoleSelector, {
-            props: { roles: ROLES, value: 'admin', onchange: vi.fn() },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean when open', async () => {
-        const { container } = render(RoleSelector, {
-            props: { roles: ROLES, onchange: vi.fn(), showDescription: true },
-        });
-        await userEvent.click(screen.getByRole('button'));
-        await expectNoA11yViolations(container);
-    });
-});

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

@@ -1,76 +0,0 @@
-/**
- * Component test for Badge (Sweep S11, #1416).
- *
- * Badge is a presentational `<span>` — it renders children plus variant/size
- * classes and forwards rest attributes. This suite asserts that real API
- * (props from Badge.svelte) and proves the output is axe-clean.
- */
-import { render, screen } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Badge from '../Badge.svelte';
-/** Build a text Snippet for the Badge's `children` prop. */
-function textSnippet(text) {
-    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
-}
-describe('Badge', () => {
-    it('renders its children content', () => {
-        render(Badge, { props: { children: textSnippet('New') } });
-        expect(screen.getByText('New')).toBeInTheDocument();
-    });
-    it('applies the default variant and md size classes', () => {
-        const { container } = render(Badge, {
-            props: { children: textSnippet('Default') },
-        });
-        const badge = container.querySelector('.badge');
-        expect(badge).toHaveClass('default');
-        expect(badge).toHaveClass('md');
-    });
-    it.each([
-        'primary',
-        'success',
-        'warning',
-        'error',
-        'info',
-    ])('reflects the %s variant as a class', (variant) => {
-        const { container } = render(Badge, {
-            props: { variant, children: textSnippet('Status') },
-        });
-        expect(container.querySelector('.badge')).toHaveClass(variant);
-    });
-    it('reflects the sm size as a class', () => {
-        const { container } = render(Badge, {
-            props: { size: 'sm', children: textSnippet('Small') },
-        });
-        expect(container.querySelector('.badge')).toHaveClass('sm');
-    });
-    it('forwards rest attributes (e.g. aria-label, data-testid) to the span', () => {
-        const { container } = render(Badge, {
-            props: {
-                'aria-label': 'Unread count: 3',
-                'data-testid': 'unread-badge',
-                children: textSnippet('3'),
-            },
-        });
-        const badge = container.querySelector('.badge');
-        expect(badge).toHaveAttribute('aria-label', 'Unread count: 3');
-        expect(badge).toHaveAttribute('data-testid', 'unread-badge');
-    });
-    it('is axe-clean for a default badge', async () => {
-        const { container } = render(Badge, {
-            props: { children: textSnippet('Accessible') },
-        });
-        await expectNoA11yViolations(container);
-    });
-    it('is axe-clean for a variant badge with an accessible label', async () => {
-        const { container } = render(Badge, {
-            props: {
-                variant: 'error',
-                'aria-label': '5 errors',
-                children: textSnippet('5'),
-            },
-        });
-        await expectNoA11yViolations(container);
-    });
-});