@happyvertical/smrt-ui 0.53.1 → 0.53.3

package/dist/components/ui/__tests__/gap-primitives-interactive.test.js

@@ -1,112 +0,0 @@
-/**
- * Golden tests for the L3 gap primitives — batch 2 (Tooltip, Dropdown, Tree).
- * Render + keyboard/pointer interaction + a11y, per the L4 harness (#1422).
- */
-import { render, screen, waitFor } 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 Tooltip from '../Tooltip.svelte';
-import Tree from '../Tree.svelte';
-const triggerSnippet = (text) => createRawSnippet(() => ({ render: () => `<button>${text}</button>` }));
-describe('Tooltip', () => {
-    it('wires the trigger to the bubble via aria-describedby', () => {
-        render(Tooltip, {
-            props: { text: 'More info', children: triggerSnippet('Help') },
-        });
-        const tip = screen.getByRole('tooltip');
-        expect(tip).toHaveTextContent('More info');
-        // The trigger wrapper (direct parent of the snippet content) is described
-        // by the bubble.
-        const trigger = screen.getByRole('button', { name: 'Help' }).parentElement;
-        expect(trigger).toHaveAttribute('aria-describedby', tip.id);
-    });
-    it('reveals on hover', async () => {
-        render(Tooltip, {
-            props: { text: 'More info', delay: 0, children: triggerSnippet('Help') },
-        });
-        await userEvent.hover(screen.getByRole('button', { name: 'Help' }));
-        await waitFor(() => expect(screen.getByRole('tooltip')).toHaveClass('open'));
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Tooltip, {
-            props: { text: 'More info', children: triggerSnippet('Help') },
-        });
-        await expectNoA11yViolations(container);
-    });
-});
-const MENU = [
-    { id: 'edit', label: 'Edit' },
-    { id: 'dup', label: 'Duplicate' },
-    { id: 'del', label: 'Delete' },
-];
-describe('Dropdown', () => {
-    it('trigger advertises a collapsed menu', () => {
-        render(Dropdown, { props: { label: 'Actions', items: MENU } });
-        const trigger = screen.getByRole('button', { name: 'Actions' });
-        expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
-        expect(trigger).toHaveAttribute('aria-expanded', 'false');
-    });
-    it('opens a menu and reports selection', async () => {
-        const onselect = vi.fn();
-        render(Dropdown, { props: { label: 'Actions', items: MENU, onselect } });
-        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
-        expect(screen.getByRole('menu')).toBeInTheDocument();
-        expect(screen.getAllByRole('menuitem')).toHaveLength(3);
-        await userEvent.click(screen.getByRole('menuitem', { name: 'Delete' }));
-        expect(onselect).toHaveBeenCalledWith('del');
-        expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    });
-    it('closes on Escape', async () => {
-        render(Dropdown, { props: { label: 'Actions', items: MENU } });
-        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
-        await userEvent.keyboard('{Escape}');
-        expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    });
-    it('is axe-clean when open', async () => {
-        const { container } = render(Dropdown, {
-            props: { label: 'Actions', items: MENU },
-        });
-        await userEvent.click(screen.getByRole('button', { name: 'Actions' }));
-        await expectNoA11yViolations(container);
-    });
-});
-const NODES = [
-    {
-        id: 'src',
-        label: 'src',
-        children: [
-            { id: 'a', label: 'a.ts' },
-            { id: 'b', label: 'b.ts' },
-        ],
-    },
-    { id: 'readme', label: 'README.md' },
-];
-describe('Tree', () => {
-    it('is a labelled tree with levelled items', () => {
-        render(Tree, { props: { nodes: NODES, 'aria-label': 'Files' } });
-        expect(screen.getByRole('tree', { name: 'Files' })).toBeInTheDocument();
-        const folder = screen.getByRole('treeitem', { name: /src/ });
-        expect(folder).toHaveAttribute('aria-level', '1');
-        expect(folder).toHaveAttribute('aria-expanded', 'false');
-    });
-    it('expands a node to reveal children', async () => {
-        render(Tree, { props: { nodes: NODES } });
-        await userEvent.click(screen.getByRole('treeitem', { name: /src/ }));
-        expect(screen.getByRole('treeitem', { name: 'a.ts' })).toHaveAttribute('aria-level', '2');
-    });
-    it('reports leaf selection', async () => {
-        const onselect = vi.fn();
-        render(Tree, { props: { nodes: NODES, onselect } });
-        await userEvent.click(screen.getByRole('treeitem', { name: 'README.md' }));
-        expect(onselect).toHaveBeenCalledWith('readme');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Tree, {
-            props: { nodes: NODES, expanded: ['src'], 'aria-label': 'Files' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/gap-primitives.test.js

@@ -1,84 +0,0 @@
-/**
- * Golden tests for the L3 gap primitives — batch 1 (Avatar, Chip, Skeleton).
- * Render + interaction + a11y, per the L4 harness pattern (#1422 / #1423).
- */
-import { fireEvent, 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 Avatar from '../Avatar.svelte';
-import Chip from '../Chip.svelte';
-import Skeleton from '../Skeleton.svelte';
-describe('Avatar', () => {
-    it('shows initials + accessible name when no src', () => {
-        render(Avatar, { props: { name: 'Ada Lovelace' } });
-        const img = screen.getByRole('img', { name: 'Ada Lovelace' });
-        expect(img).toHaveTextContent('AL');
-    });
-    it('renders an <img> with alt when src is set', () => {
-        render(Avatar, { props: { name: 'Ada', src: 'https://x/a.png' } });
-        expect(screen.getByRole('img', { name: 'Ada' }).tagName).toBe('IMG');
-    });
-    it('announces presence status', () => {
-        render(Avatar, { props: { name: 'Ada', status: 'online' } });
-        expect(screen.getByText('Online')).toBeInTheDocument();
-    });
-    it('falls back to initials when the image fails to load', async () => {
-        render(Avatar, {
-            props: { name: 'Ada Lovelace', src: 'https://x/broken.png' },
-        });
-        const img = screen.getByRole('img', { name: 'Ada Lovelace' });
-        expect(img.tagName).toBe('IMG');
-        await fireEvent.error(img);
-        expect(screen.getByRole('img', { name: 'Ada Lovelace' })).toHaveTextContent('AL');
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Avatar, {
-            props: { name: 'Ada Lovelace', status: 'away' },
-        });
-        await expectNoA11yViolations(container);
-    });
-});
-describe('Chip', () => {
-    it('renders its label', () => {
-        render(Chip, { props: { label: 'TypeScript' } });
-        expect(screen.getByText('TypeScript')).toBeInTheDocument();
-    });
-    it('selectable: toggle button exposes aria-pressed and fires onselect', async () => {
-        const onselect = vi.fn();
-        render(Chip, {
-            props: { label: 'Tag', selectable: true, selected: true, onselect },
-        });
-        const btn = screen.getByRole('button', { name: 'Tag', pressed: true });
-        await userEvent.click(btn);
-        expect(onselect).toHaveBeenCalledTimes(1);
-    });
-    it('closeable: labelled remove button fires onclose', async () => {
-        const onclose = vi.fn();
-        render(Chip, { props: { label: 'Tag', closeable: true, onclose } });
-        await userEvent.click(screen.getByRole('button', { name: 'Remove Tag' }));
-        expect(onclose).toHaveBeenCalledTimes(1);
-    });
-    it('is axe-clean (selectable + closeable)', async () => {
-        const { container } = render(Chip, {
-            props: { label: 'Tag', selectable: true, closeable: true },
-        });
-        await expectNoA11yViolations(container);
-    });
-});
-describe('Skeleton', () => {
-    it('is a labelled status region', () => {
-        render(Skeleton, { props: { label: 'Loading profile' } });
-        expect(screen.getByRole('status', { name: 'Loading profile' })).toBeInTheDocument();
-    });
-    it('renders one placeholder per text line', () => {
-        const { container } = render(Skeleton, {
-            props: { variant: 'text', lines: 3 },
-        });
-        expect(container.querySelectorAll('.skeleton')).toHaveLength(3);
-    });
-    it('is axe-clean', async () => {
-        const { container } = render(Skeleton, { props: { variant: 'circle' } });
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-import Accordion from '../Accordion.svelte';
-import AccordionItem from '../AccordionItem.svelte';
-import Disclosure from '../Disclosure.svelte';
-import Popover from '../Popover.svelte';
-</script>
-
-<Popover label="Filters"><p>Filter controls</p></Popover>
-<Disclosure title="Details"><p>Disclosure details</p></Disclosure>
-<Accordion>
-  <AccordionItem value="one" title="First section"><p>First content</p></AccordionItem>
-  <AccordionItem value="two" title="Second section"><p>Second content</p></AccordionItem>
-</Accordion>

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte.d.ts

@@ -1,19 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const InteractionPrimitives: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type InteractionPrimitives = InstanceType<typeof InteractionPrimitives>;
-export default InteractionPrimitives;
-//# sourceMappingURL=interaction-primitives.fixture.svelte.d.ts.map

package/dist/components/ui/__tests__/interaction-primitives.fixture.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"interaction-primitives.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/__tests__/interaction-primitives.fixture.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,qBAAqB;;kBAA+E,CAAC;AACzF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC1E,eAAe,qBAAqB,CAAC"}

package/dist/components/ui/__tests__/interaction-primitives.test.js

@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it } from 'vitest';
-import { expectNoA11yViolations } from '../../../test-support/a11y';
-import Fixture from './interaction-primitives.fixture.svelte';
-describe('interaction primitives', () => {
-    it('opens and dismisses a popover', async () => {
-        render(Fixture);
-        const trigger = screen.getByRole('button', { name: 'Filters' });
-        await userEvent.click(trigger);
-        expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
-        await userEvent.keyboard('{Escape}');
-        expect(screen.queryByRole('dialog', { name: 'Filters' })).not.toBeInTheDocument();
-        expect(trigger).toHaveFocus();
-    });
-    it('supports disclosure and single-value accordion semantics', async () => {
-        render(Fixture);
-        await userEvent.click(screen.getByText('Details'));
-        expect(screen.getByText('Disclosure details')).toBeVisible();
-        await userEvent.click(screen.getByRole('button', { name: 'First section' }));
-        expect(screen.getByRole('region', { name: 'First section' })).toHaveTextContent('First content');
-        await userEvent.click(screen.getByRole('button', { name: 'Second section' }));
-        expect(screen.queryByText('First content')).not.toBeInTheDocument();
-    });
-    it('is axe-clean with interactive content open', async () => {
-        const { container } = render(Fixture);
-        await userEvent.click(screen.getByRole('button', { name: 'Filters' }));
-        await userEvent.click(screen.getByRole('button', { name: 'First section' }));
-        await expectNoA11yViolations(container);
-    });
-});

package/dist/components/ui/__tests__/phone-touch-targets.test.js

@@ -1,39 +0,0 @@
-/**
- * Touch targets: on phones (48rem and under) Button of every size and the
- * Switch row are at least 44px tall, and TagsInput's remove button is a 44px
- * target on phones and touch screens. The sizing lives in each component's
- * stylesheet, so an app never needs its own `min-height: 44px` override.
- */
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-const root = process.cwd().endsWith('packages/smrt-ui')
-    ? process.cwd()
-    : join(process.cwd(), 'packages/smrt-ui');
-const read = (path) => readFileSync(join(root, 'src/components', path), 'utf8');
-/** The body of the first `@media (…max-width: 48rem…)` block in `source`. */
-function phoneBlock(source) {
-    const start = source.indexOf('@media (max-width: 48rem)');
-    expect(start).toBeGreaterThan(-1);
-    return source.slice(start, source.indexOf('\n  }', start) + 4);
-}
-describe('phone touch targets', () => {
-    it('Button is at least 44px tall on phones, in every size', () => {
-        const phone = phoneBlock(read('ui/Button.svelte'));
-        expect(phone).toMatch(/\.button\s*\{[^}]*min-block-size:\s*2\.75rem/);
-    });
-    it('Switch is at least 44px tall on phones', () => {
-        expect(read('forms/Switch.svelte')).toMatch(/@media \(max-width: 48rem\)\s*\{\s*\.switch\s*\{\s*min-block-size:\s*2\.75rem/);
-    });
-    it('TagsInput remove buttons are 44px on phones and touch screens', () => {
-        const source = read('forms/TagsInput.svelte');
-        const start = source.indexOf('@media (max-width: 48rem), (pointer: coarse)');
-        expect(start).toBeGreaterThan(-1);
-        const block = source.slice(start, source.indexOf('\n  }', start));
-        expect(block).toMatch(/\.tag button\s*\{[^}]*min-inline-size:\s*2\.75rem/);
-        expect(block).toMatch(/\.tag button\s*\{[^}]*min-block-size:\s*2\.75rem/);
-    });
-    it('Dropdown menu rows are at least 44px tall', () => {
-        expect(read('ui/Dropdown.svelte')).toMatch(/\.dropdown__item\s*\{[^}]*min-block-size:\s*2\.75rem/);
-    });
-});

package/dist/i18n/__tests__/i18n.test.js

@@ -1,74 +0,0 @@
-/**
- * Unit coverage for the client i18n core (S13 #1418): the message-default
- * registry, the reactive store's resolution order, and `{var}` interpolation.
- */
-import { afterEach, describe, expect, it } from 'vitest';
-import { clearRegisteredMessages, createI18nContext, defineMessages, getRegisteredDefault, } from '../index.js';
-afterEach(() => {
-    clearRegisteredMessages();
-});
-describe('defineMessages', () => {
-    it('registers English defaults and returns a typed key map', () => {
-        const M = defineMessages({
-            'ui.demo.hello': 'Hello',
-            'ui.demo.bye': 'Goodbye',
-        });
-        expect(M['ui.demo.hello']).toBe('ui.demo.hello');
-        expect(getRegisteredDefault('ui.demo.hello')).toBe('Hello');
-        expect(getRegisteredDefault('ui.demo.bye')).toBe('Goodbye');
-    });
-    it('is idempotent for an identical default', () => {
-        defineMessages({ 'ui.demo.hello': 'Hello' });
-        expect(() => defineMessages({ 'ui.demo.hello': 'Hello' })).not.toThrow();
-    });
-    it('throws when a key is redefined with a different default', () => {
-        defineMessages({ 'ui.demo.hello': 'Hello' });
-        expect(() => defineMessages({ 'ui.demo.hello': 'Hi' })).toThrow(/already registered/);
-    });
-});
-describe('I18nStore.t resolution order', () => {
-    it('falls back to the registered default when no snapshot has the key', () => {
-        defineMessages({ 'ui.demo.empty': 'No data available' });
-        const store = createI18nContext();
-        expect(store.t('ui.demo.empty')).toBe('No data available');
-        expect(store.locale).toBe('en');
-    });
-    it('prefers the snapshot template over the registered default', () => {
-        defineMessages({ 'ui.demo.empty': 'No data available' });
-        const store = createI18nContext({
-            locale: 'fr',
-            messages: { 'ui.demo.empty': 'Aucune donnée' },
-        });
-        expect(store.t('ui.demo.empty')).toBe('Aucune donnée');
-        expect(store.locale).toBe('fr');
-    });
-    it('falls back to the key itself for an unknown message (never blank)', () => {
-        const store = createI18nContext();
-        expect(store.t('ui.demo.unknown')).toBe('ui.demo.unknown');
-    });
-    it('reflects a snapshot reassignment (locale switch)', () => {
-        defineMessages({ 'ui.demo.empty': 'No data available' });
-        const store = createI18nContext();
-        expect(store.t('ui.demo.empty')).toBe('No data available');
-        store.snapshot = {
-            locale: 'es',
-            messages: { 'ui.demo.empty': 'Sin datos' },
-        };
-        expect(store.locale).toBe('es');
-        expect(store.t('ui.demo.empty')).toBe('Sin datos');
-    });
-});
-describe('interpolation', () => {
-    it('substitutes {var} placeholders from the snapshot template', () => {
-        const store = createI18nContext({
-            locale: 'en',
-            messages: { 'ui.demo.range': 'Showing {count} of {total}' },
-        });
-        expect(store.t('ui.demo.range', { count: 3, total: 9 })).toBe('Showing 3 of 9');
-    });
-    it('collapses missing variables to empty strings', () => {
-        defineMessages({ 'ui.demo.greet': 'Hi {name}{title}' });
-        const store = createI18nContext();
-        expect(store.t('ui.demo.greet', { name: 'Ada' })).toBe('Hi Ada');
-    });
-});

package/dist/i18n/__tests__/render-parity.spec.js

@@ -1,37 +0,0 @@
-/**
- * Pins the client's inlined `renderTemplate` (src/i18n/render.ts) against the
- * canonical `@happyvertical/smrt-languages` implementation so the two
- * interpolation contracts never drift (S13 #1418). The client keeps its own
- * copy to avoid bundling the heavy languages package; this test is the guard.
- *
- * Importing the languages root triggers its `__smrt-register__` manifest
- * side-effect, which throws under vitest's source-alias (dev-server URL, not a
- * file) — unrelated to the pure `renderTemplate`. Record-not-throw via
- * SMRT_STRICT_REGISTRY=false set before a dynamic import.
- */
-import { beforeAll, describe, expect, it, vi } from 'vitest';
-import { renderTemplate as clientRender } from '../render.js';
-let languagesRender;
-beforeAll(async () => {
-    vi.stubEnv('SMRT_STRICT_REGISTRY', 'false');
-    ({ renderTemplate: languagesRender } = await import('@happyvertical/smrt-languages'));
-});
-const NOW = new Date('2026-06-17T12:00:00.000Z');
-const cases = [
-    ['No interpolation here', undefined],
-    ['No interpolation here', {}],
-    ['Showing {count} of {total}', { count: 3, total: 9 }],
-    ['Hi {name}{title}', { name: 'Ada' }], // missing → empty
-    ['Null is {x} here', { x: null }],
-    ['Date: {when}', { when: NOW }],
-    ['List: {items}', { items: [1, 2, 3] }],
-    ['Obj: {meta}', { meta: { a: 1 } }],
-    ['Trim {  spaced  } key', { spaced: 'ok' }],
-    ['Number {n}', { n: 0 }],
-    ['Bool {b}', { b: false }],
-];
-describe('renderTemplate parity with @happyvertical/smrt-languages', () => {
-    it.each(cases)('renders %j identically', (template, vars) => {
-        expect(clientRender(template, vars)).toBe(languagesRender(template, vars));
-    });
-});

package/dist/svelte/__tests__/playground.test.js

@@ -1,20 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import playground from '../playground.js';
-describe('smrt-ui playground', () => {
-    it('publishes themed base-control, data-table, and capture previews', () => {
-        expect(playground.packageName).toBe('@happyvertical/smrt-ui');
-        expect(playground.entries.map((entry) => entry.id)).toEqual([
-            'base-controls',
-            'interactive-controls',
-            'feedback-overlays',
-            'collections',
-            'data-table',
-            'calendar',
-            'capture',
-        ]);
-        for (const entry of playground.entries) {
-            expect(entry.loadComponent).toEqual(expect.any(Function));
-            expect(entry.modes).toHaveProperty('mock');
-        }
-    });
-});

package/dist/themes/__tests__/control-boundary-contrast.test.js

@@ -1,112 +0,0 @@
-/**
- * Control-boundary contrast floor, every preset (#2322).
- *
- * WCAG 2.2 SC 1.4.11 requires the visual boundary that identifies a UI
- * component to clear 3:1 against its adjacent background. The form primitives
- * used to draw their resting border with `outline-variant` — the divider role,
- * which measures 1.2–1.7:1 in every preset — so an input's edge was effectively
- * invisible. They now consume `outline`, and this test pins the other half of
- * that contract: `outline` must actually be a boundary-strength value in every
- * preset and scheme, on every surface a control can sit on.
- *
- * `outlineVariant` is deliberately NOT held to this floor. It is the quiet
- * hairline for dividers, panel edges, and readout rows; raising it would erase
- * the distinction the two tokens exist to draw.
- */
-import { describe, expect, it } from 'vitest';
-import { themes } from '../registry.js';
-/** Every surface role a control can be placed on. */
-const SURFACES = [
-    'surface',
-    'surfaceVariant',
-    'surfaceContainer',
-    'surfaceContainerLow',
-    'surfaceContainerHigh',
-    'surfaceContainerHighest',
-    'surfaceContainerLowest',
-    'surfaceDim',
-    'surfaceBright',
-    'background',
-];
-/**
- * Parse `#rrggbb` or `rgba(r, g, b, a)` into a straight-alpha colour.
- *
- * The glass preset expresses its surfaces and outlines as `rgba(...)`, so a
- * hex-only parser silently skips exactly the preset whose translucency makes
- * contrast hardest to reason about — which is how glass sat at 1.42:1 unnoticed.
- */
-function parseColor(value) {
-    const hex = value.trim().match(/^#([0-9a-f]{6})$/i);
-    if (hex) {
-        const n = Number.parseInt(hex[1], 16);
-        return { rgb: [(n >> 16) & 255, (n >> 8) & 255, n & 255], alpha: 1 };
-    }
-    const rgba = value
-        .trim()
-        .match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)(?:[\s,/]+([\d.]+))?\s*\)$/i);
-    if (rgba) {
-        return {
-            rgb: [Number(rgba[1]), Number(rgba[2]), Number(rgba[3])],
-            alpha: rgba[4] === undefined ? 1 : Number(rgba[4]),
-        };
-    }
-    return null;
-}
-/** Composite `value` over an opaque backdrop, resolving any alpha. */
-function flatten(value, backdrop) {
-    const parsed = parseColor(value);
-    if (!parsed)
-        return null;
-    const { rgb, alpha } = parsed;
-    return rgb.map((c, i) => Math.round(c * alpha + backdrop[i] * (1 - alpha)));
-}
-function relativeLuminance([r, g, b]) {
-    const [rr, gg, bb] = [r, g, b].map((n) => {
-        const s = n / 255;
-        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-    });
-    return 0.2126 * rr + 0.7152 * gg + 0.0722 * bb;
-}
-function contrast(a, b) {
-    const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
-    return (hi + 0.05) / (lo + 0.05);
-}
-describe('control boundaries clear the 3:1 non-text floor (#2322)', () => {
-    for (const theme of Object.values(themes)) {
-        for (const scheme of ['light', 'dark']) {
-            const palette = theme[scheme];
-            it(`${theme.id} ${scheme}: outline is boundary-strength on every surface`, () => {
-                // Translucent surfaces resolve against the scheme's own background,
-                // which is the only backdrop the theme can promise.
-                const page = flatten(palette.background, [255, 255, 255]);
-                expect(page, `${theme.id} ${scheme} background must be parseable`).not.toBeNull();
-                const failures = [];
-                for (const surfaceName of SURFACES) {
-                    // Assert each parse BEFORE it is used as the next one's backdrop.
-                    // Folding these together would let an unparseable surface reach
-                    // `flatten` as a null backdrop, and the test would die on a
-                    // TypeError instead of naming the token that could not be read.
-                    const surface = flatten(palette[surfaceName], page);
-                    expect(surface, `${theme.id} ${scheme} ${surfaceName} must be parseable`).not.toBeNull();
-                    const outline = flatten(palette.outline, surface);
-                    expect(outline, `${theme.id} ${scheme} outline must be parseable`).not.toBeNull();
-                    const ratio = contrast(outline, surface);
-                    if (ratio < 3)
-                        failures.push(`${surfaceName} ${ratio.toFixed(2)}:1`);
-                }
-                expect(failures, `${theme.id} ${scheme} outline below 3:1`).toEqual([]);
-            });
-        }
-    }
-    it('keeps outline and outlineVariant as distinct roles', () => {
-        // If a preset ever "fixes" its bezel by setting it equal to the boundary,
-        // dividers become as loud as control edges and the two-token system
-        // collapses. The hairline is allowed to be quiet — it just may not BE the
-        // boundary token.
-        for (const theme of Object.values(themes)) {
-            for (const scheme of ['light', 'dark']) {
-                expect(theme[scheme].outlineVariant, `${theme.id} ${scheme} outlineVariant must stay distinct from outline`).not.toBe(theme[scheme].outline);
-            }
-        }
-    });
-});

package/dist/themes/__tests__/create-theme.test.js

@@ -1,79 +0,0 @@
-/**
- * Regression tests for createTheme color handling (#1586, epic #1354).
- *
- * The dark-color derivation and primary-container derivation used to assume the
- * primary was 6-digit hex. For `rgb()`, 3-digit hex, or a named color they
- * emitted invalid CSS — `rgb(0,122,255)20`, `#f6320`, `#NaNNaNNaN`. Inputs are
- * now normalized to RGB first (or rejected with a clear error), so the generated
- * palette is always valid CSS.
- */
-import { describe, expect, it } from 'vitest';
-import { createTheme } from '../create-theme';
-const HEX6 = /^#[0-9a-fA-F]{6}$/;
-const HEX_ALPHA = /^#[0-9a-fA-F]{8}$/;
-/** Every color value in a palette must be syntactically valid CSS. */
-function expectAllColorsValid(colors) {
-    for (const [key, value] of Object.entries(colors)) {
-        expect(typeof value).toBe('string');
-        // The regression: derivations used to emit '#NaNNaNNaN' / 'rgb(...)20'.
-        expect(value, `${key}=${value}`).not.toContain('NaN');
-        // Hex values must be well-formed: exactly 3, 4, 6, or 8 digits (all valid
-        // CSS). A 5- or 7-digit hex (e.g. the '#f6320' the bug produced) must fail.
-        // rgb()/rgba() and other formats pass through unchanged.
-        if (value.startsWith('#')) {
-            expect(value, `${key}=${value}`).toMatch(/^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/);
-        }
-    }
-}
-describe('createTheme color handling (#1586)', () => {
-    it('derives a valid primary container from a 6-digit hex primary', () => {
-        const theme = createTheme({
-            id: 'brand6',
-            name: 'Brand 6',
-            light: { primary: '#0b57d0', background: '#ffffff' },
-        });
-        // 8-digit hex alpha form: primary + "20".
-        expect(theme.light.primaryContainer).toMatch(HEX_ALPHA);
-        expect(theme.light.primaryContainer.toLowerCase()).toBe('#0b57d020');
-        expectAllColorsValid(theme.light);
-        expectAllColorsValid(theme.dark);
-    });
-    it('normalizes an rgb() primary instead of emitting invalid CSS', () => {
-        const theme = createTheme({
-            id: 'brandRgb',
-            name: 'Brand RGB',
-            light: { primary: 'rgb(0, 122, 255)', background: '#ffffff' },
-        });
-        // Was 'rgb(0, 122, 255)20' (invalid); now a normalized 8-digit hex.
-        expect(theme.light.primaryContainer).not.toContain('rgb(');
-        expect(theme.light.primaryContainer).toMatch(HEX_ALPHA);
-        expect(theme.light.primaryContainer.toLowerCase()).toBe('#007aff20');
-        // Auto-generated dark colors used to be '#NaNNaNNaN' for an rgb() input;
-        // every value is now valid CSS (hex values are well-formed, rgb() values
-        // pass through unchanged).
-        expectAllColorsValid(theme.light);
-        expectAllColorsValid(theme.dark);
-        // The brightness-derived dark colors normalize to proper hex.
-        expect(theme.dark.onPrimary).toMatch(HEX6);
-        expect(theme.dark.secondary).toMatch(HEX6);
-    });
-    it('expands a 3-digit hex primary correctly', () => {
-        const theme = createTheme({
-            id: 'brand3',
-            name: 'Brand 3',
-            light: { primary: '#07f', background: '#fff' },
-        });
-        // '#07f' -> '#0077ff', container '#0077ff20'.
-        expect(theme.light.primaryContainer.toLowerCase()).toBe('#0077ff20');
-        expectAllColorsValid(theme.light);
-        expectAllColorsValid(theme.dark);
-        expect(theme.dark.onPrimary).toMatch(HEX6);
-    });
-    it('throws a clear error for an unsupported named color', () => {
-        expect(() => createTheme({
-            id: 'brandNamed',
-            name: 'Brand Named',
-            light: { primary: 'tomato', background: '#ffffff' },
-        })).toThrow(/unsupported color "tomato"/);
-    });
-});