@happyvertical/smrt-ui 0.53.0 → 0.53.2

package/dist/themes/__tests__/css-generator.test.js

@@ -1,129 +0,0 @@
-/**
- * Unit tests for the theme CSS generator (coverage uplift, S6 gate).
- */
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { generateAllThemesCSS, generateThemeCSS, generateThemeVariables, variablesToStyleString, } from '../css-generator';
-import { getTheme } from '../registry';
-// Raw CSS text of the static studio preset, used to prove the static-CSS
-// delivery path and the JS generator emit identical elevation values (#1586).
-// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin runs
-// each package's suite with cwd === the package root, so this is stable here,
-// whereas `new URL('…', import.meta.url)` fails to resolve under the vite-node
-// loader this suite runs in.
-const studioCss = readFileSync(join(process.cwd(), 'src/themes/styles/studio.css'), 'utf8');
-/**
- * Pull the `--smrt-elevation-0..5` values out of a specific
- * `[data-theme="<preset>"][data-color-scheme="<scheme>"]` block of a static CSS
- * preset file.
- */
-function staticElevation(css, preset, scheme) {
-    const selector = `[data-theme="${preset}"][data-color-scheme="${scheme}"]`;
-    const start = css.indexOf(selector);
-    if (start === -1)
-        throw new Error(`block not found: ${selector}`);
-    const open = css.indexOf('{', start);
-    const close = css.indexOf('}', open);
-    const body = css.slice(open + 1, close);
-    const out = {};
-    for (const line of body.split('\n')) {
-        const m = line.match(/(--smrt-elevation-\d):\s*(.+);/);
-        if (m)
-            out[m[1]] = m[2].trim();
-    }
-    return out;
-}
-describe('theme CSS generator', () => {
-    const theme = getTheme('material');
-    it('generateThemeVariables returns --smrt-* custom properties', () => {
-        const vars = generateThemeVariables(theme);
-        const keys = Object.keys(vars);
-        expect(keys.length).toBeGreaterThan(0);
-        expect(keys.some((k) => k.startsWith('--smrt-'))).toBe(true);
-    });
-    it('variablesToStyleString emits "name: value;" declarations', () => {
-        const css = variablesToStyleString({
-            '--smrt-x': '1px',
-            '--smrt-y': 'red',
-        });
-        expect(css).toContain('--smrt-x: 1px');
-        expect(css).toContain('--smrt-y: red');
-    });
-    it('generateThemeCSS produces an embeddable block', () => {
-        const css = generateThemeCSS(theme);
-        expect(typeof css).toBe('string');
-        expect(css).toContain('--smrt-');
-    });
-    it('generateAllThemesCSS resolves to a non-empty string', async () => {
-        const css = await generateAllThemesCSS();
-        expect(css.length).toBeGreaterThan(0);
-    });
-    describe('studio per-scheme elevation (#1586)', () => {
-        const studio = getTheme('studio');
-        it('emits distinct dark-scheme elevation, not the light values', () => {
-            const light = generateThemeVariables(studio, false);
-            const dark = generateThemeVariables(studio, true);
-            // Level 1 is a white inset hairline in dark vs a tinted inset in light.
-            expect(dark['--smrt-elevation-1']).toContain('rgba(255, 255, 255');
-            expect(light['--smrt-elevation-1']).toContain('rgba(60, 64, 67');
-            expect(dark['--smrt-elevation-1']).not.toBe(light['--smrt-elevation-1']);
-            // Deeper black shadows above level 1.
-            expect(dark['--smrt-elevation-5']).toContain('rgba(0, 0, 0, 0.25)');
-        });
-        it('matches every static preset CSS on colour values (drift guard)', () => {
-            // The elevation guard below caught shadows drifting; colours drifted too
-            // and nothing noticed — smrt.css carried `--smrt-theme-name: SMRT` long
-            // after the theme was renamed `s-m-r-t` (#2322). The alias test only
-            // checks that token NAMES appear in each stylesheet, so a stale VALUE
-            // sails through it. Compare the values themselves, for every preset.
-            const files = {
-                material: 'material.css',
-                glass: 'glass.css',
-                studio: 'studio.css',
-                smrt: 'smrt.css',
-                happyvertical: 'happyvertical.css',
-            };
-            const drift = [];
-            for (const [id, file] of Object.entries(files)) {
-                const css = readFileSync(join(process.cwd(), 'src/themes/styles', file), 'utf8');
-                for (const scheme of ['light', 'dark']) {
-                    const selector = `[data-theme="${id}"][data-color-scheme="${scheme}"]`;
-                    const start = css.indexOf(selector);
-                    expect(start, `${file} must define ${selector}`).toBeGreaterThan(-1);
-                    const open = css.indexOf('{', start);
-                    const body = css.slice(open + 1, css.indexOf('\n}', open));
-                    const defined = {};
-                    for (const match of body.matchAll(/(--smrt-[a-z0-9-]+):\s*([^;]+);/gi)) {
-                        defined[match[1]] = match[2].trim();
-                    }
-                    const generated = generateThemeVariables(getTheme(id), scheme === 'dark');
-                    for (const [token, value] of Object.entries(generated)) {
-                        if (!token.startsWith('--smrt-color-') &&
-                            token !== '--smrt-theme-name')
-                            continue;
-                        // Only compare tokens the stylesheet actually declares; absence is
-                        // the alias test's job, not this one's.
-                        if (defined[token] !== undefined &&
-                            defined[token] !== String(value)) {
-                            drift.push(`${file} ${scheme} ${token}: css=${defined[token]} generator=${value}`);
-                        }
-                    }
-                }
-            }
-            expect(drift).toEqual([]);
-        });
-        it('matches the static studio.css for both schemes (drift guard)', () => {
-            // The static-CSS delivery path and the JS generator must agree on VALUES,
-            // not just token names — this is what let the studio dark shadows diverge.
-            for (const scheme of ['light', 'dark']) {
-                const generated = generateThemeVariables(studio, scheme === 'dark');
-                const fromCss = staticElevation(studioCss, 'studio', scheme);
-                for (let level = 0; level <= 5; level += 1) {
-                    const key = `--smrt-elevation-${level}`;
-                    expect(fromCss[key], `${scheme} ${key}`).toBe(generated[key]);
-                }
-            }
-        });
-    });
-});

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

@@ -1,231 +0,0 @@
-/**
- * HappyVertical "Day Shift" preset contract (#2318).
- *
- * The brand identity ships as a preset, so its guarantees have to be executable
- * rather than described: every text/surface pairing clears WCAG AA in BOTH
- * hand-authored schemes, structure and the amber focus ring clear 3:1 non-text,
- * green is never a text color, and the static stylesheet is the generator's
- * output verbatim (#1586 lockstep — checked on the whole block, not just
- * elevation).
- */
-import { readdirSync, readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { generateThemeCSS, generateThemeVariables } from '../css-generator.js';
-import { happyverticalTheme } from '../happyvertical/index.js';
-// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin runs
-// each package's suite with cwd === the package root.
-const staticCss = readFileSync(join(process.cwd(), 'src/themes/styles/happyvertical.css'), 'utf8');
-const themeProviderSource = readFileSync(join(process.cwd(), 'src/themes/ThemeProvider.svelte'), 'utf8');
-/** Relative luminance per WCAG 2.1. */
-function luminance(hex) {
-    const value = Number.parseInt(hex.replace('#', ''), 16);
-    const channels = [(value >> 16) & 255, (value >> 8) & 255, value & 255];
-    const [r, g, b] = channels.map((channel) => {
-        const s = channel / 255;
-        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-    });
-    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-/** WCAG contrast ratio between two opaque hex colors. */
-function contrast(a, b) {
-    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-    return (hi + 0.05) / (lo + 0.05);
-}
-/** on<Role> ↔ <Role> pairs that carry normal text. */
-const ON_PAIRS = [
-    ['onPrimary', 'primary'],
-    ['onPrimaryContainer', 'primaryContainer'],
-    ['onSecondary', 'secondary'],
-    ['onSecondaryContainer', 'secondaryContainer'],
-    ['onTertiary', 'tertiary'],
-    ['onTertiaryContainer', 'tertiaryContainer'],
-    ['onError', 'error'],
-    ['onErrorContainer', 'errorContainer'],
-    ['onWarning', 'warning'],
-    ['onWarningContainer', 'warningContainer'],
-    ['onSuccess', 'success'],
-    ['onSuccessContainer', 'successContainer'],
-    ['onSurface', 'surface'],
-    ['onSurfaceVariant', 'surfaceVariant'],
-    ['onBackground', 'background'],
-    ['inverseOnSurface', 'inverseSurface'],
-];
-const SURFACES = [
-    'surface',
-    'surfaceVariant',
-    'surfaceContainer',
-    'surfaceContainerLow',
-    'surfaceContainerHigh',
-    'surfaceContainerHighest',
-    'surfaceContainerLowest',
-    'surfaceDim',
-    'surfaceBright',
-    'background',
-];
-const INK = ['onSurface', 'onSurfaceVariant'];
-/**
- * Accent roles that may be rendered as text on a surface. `success` is
- * deliberately absent: the brand rule is that green is a lamp, marker, or fill
- * and never a text color, so it is only held to the 3:1 marker floor below.
- */
-const ACCENT_TEXT = [
-    'primary',
-    'error',
-    'warning',
-    'tertiary',
-    'secondary',
-];
-const SCHEMES = [
-    ['light', happyverticalTheme.light],
-    ['dark', happyverticalTheme.dark],
-];
-describe('happyvertical preset — WCAG AA (#2318)', () => {
-    for (const [scheme, palette] of SCHEMES) {
-        it(`${scheme}: every on<Role> pairing clears 4.5:1`, () => {
-            for (const [on, base] of ON_PAIRS) {
-                expect(contrast(palette[on], palette[base]), `${scheme} ${on} on ${base}`).toBeGreaterThanOrEqual(4.5);
-            }
-        });
-        it(`${scheme}: ink clears 4.5:1 on every surface slot`, () => {
-            for (const ink of INK) {
-                for (const surface of SURFACES) {
-                    expect(contrast(palette[ink], palette[surface]), `${scheme} ${ink} on ${surface}`).toBeGreaterThanOrEqual(4.5);
-                }
-            }
-        });
-        it(`${scheme}: accent text clears 4.5:1 on every surface slot`, () => {
-            for (const accent of ACCENT_TEXT) {
-                for (const surface of SURFACES) {
-                    expect(contrast(palette[accent], palette[surface]), `${scheme} ${accent} on ${surface}`).toBeGreaterThanOrEqual(4.5);
-                }
-            }
-        });
-        it(`${scheme}: the bezel is never the same value as a surface it borders`, () => {
-            // outline-variant is a deliberately quiet hairline, but it still has to
-            // exist: authored at #2A3238, it originally collided byte-for-byte with
-            // surfaceContainerHighest and surfaceBright, so a bezel-bordered panel on
-            // either had a 1.00:1 border — no border at all.
-            for (const surface of SURFACES) {
-                expect(palette[surface], `${scheme} ${surface} must differ from outline-variant`).not.toBe(palette.outlineVariant);
-            }
-        });
-        it(`${scheme}: outline, focus ring, and status lamp clear 3:1 non-text`, () => {
-            for (const surface of SURFACES) {
-                for (const structural of ['outline', 'primary', 'success']) {
-                    expect(contrast(palette[structural], palette[surface]), `${scheme} ${structural} on ${surface}`).toBeGreaterThanOrEqual(3);
-                }
-            }
-        });
-    }
-});
-describe('happyvertical preset — brand invariants (#2318)', () => {
-    it('hand-authors both schemes rather than deriving dark from light', () => {
-        // A generated dark scheme mirrors the light hues; Day Shift's night palette
-        // is authored independently and shares no surface value with the day one.
-        for (const surface of SURFACES) {
-            expect(happyverticalTheme.dark[surface]).not.toBe(happyverticalTheme.light[surface]);
-        }
-    });
-    it('keeps the dark scheme blue-graphite rather than neutral near-black', () => {
-        // Blue-graphite means the blue channel leads the red one on every dark
-        // surface; a collapse to neutral/near-black would flatten that difference.
-        for (const surface of SURFACES) {
-            const hex = happyverticalTheme.dark[surface];
-            const value = Number.parseInt(hex.replace('#', ''), 16);
-            const red = (value >> 16) & 255;
-            const blue = value & 255;
-            expect(blue, `dark ${surface} (${hex}) should keep a blue cast`).toBeGreaterThan(red);
-        }
-    });
-    it('carries both accent hues into dark — amber and green', () => {
-        expect(happyverticalTheme.dark.primary).toBe('#ffb454');
-        expect(happyverticalTheme.dark.success).toBe('#53c989');
-        expect(happyverticalTheme.dark.primary).not.toBe(happyverticalTheme.dark.success);
-    });
-    it('is not undermined by a component painting text with the success token', () => {
-        // "Green is never text" is only a real guarantee if nothing renders it as
-        // one: light `#1e7a4b` measures 4.44:1 on the enamel ground, just under AA.
-        // Omitting `success` from ACCENT_TEXT above states the rule; this scan
-        // enforces it for the components this package owns.
-        const svelteFiles = [];
-        const walk = (dir) => {
-            for (const entry of readdirSync(dir, { withFileTypes: true })) {
-                const full = join(dir, entry.name);
-                if (entry.isDirectory())
-                    walk(full);
-                else if (entry.name.endsWith('.svelte'))
-                    svelteFiles.push(full);
-            }
-        };
-        walk(join(process.cwd(), 'src'));
-        // Match on the DECLARATION VALUE rather than requiring `var(` to sit
-        // adjacent to `color:`, so wrappers count too — `color-mix(…)`,
-        // `light-dark(…)`, and `var(--x, var(--smrt-color-success))` all paint
-        // text just as directly. `(?![\w-])` keeps `--smrt-color-success-container`
-        // (a fill, with its own ink) from reading as a hit.
-        const declaration = /(?<![-\w])color\s*:\s*([^;{}]*)/g;
-        const successToken = /--smrt-color-success(?![\w-])/;
-        // One level of indirection: `--alert-color: var(--smrt-color-success)` and
-        // then `color: var(--alert-color)` is Alert.svelte's exact shape today, one
-        // edit away from painting text green invisibly.
-        const customProperty = /(--[\w-]+)\s*:\s*([^;{}]*)/g;
-        const offenders = svelteFiles.filter((file) => {
-            const source = readFileSync(file, 'utf8');
-            const greenProperties = new Set();
-            for (const [, name, value] of source.matchAll(customProperty)) {
-                if (successToken.test(value))
-                    greenProperties.add(name);
-            }
-            for (const [, value] of source.matchAll(declaration)) {
-                if (successToken.test(value))
-                    return true;
-                for (const property of greenProperties) {
-                    if (value.includes(`var(${property}`))
-                        return true;
-                }
-            }
-            return false;
-        });
-        expect(offenders.map((file) => file.replace(process.cwd(), '')), 'success is a lamp/marker/fill, never a text color').toEqual([]);
-    });
-    it('uses one calm easing for every motion token', () => {
-        const curves = new Set(Object.values(happyverticalTheme.easing));
-        expect(curves.size).toBe(1);
-    });
-    it('sets ~120ms as the standard state-transition duration', () => {
-        expect(happyverticalTheme.duration.normal).toBe('120ms');
-    });
-    it('names the B612 Mono stack as the preset monospace family', () => {
-        const light = generateThemeVariables(happyverticalTheme, false);
-        const dark = generateThemeVariables(happyverticalTheme, true);
-        expect(light['--smrt-font-family-mono']).toContain('B612 Mono');
-        expect(dark['--smrt-font-family-mono']).toContain('B612 Mono');
-    });
-    it('defines a 2px amber focus outline with offset on BOTH delivery paths', () => {
-        // The preset ships two ways — a static stylesheet import and
-        // <ThemeProvider preset="happyvertical">. A focus rule that exists in only
-        // one of them means half the consumers silently lose the brand indicator.
-        const sources = [
-            [staticCss, /\[data-theme="happyvertical"\] :focus-visible \{([^}]*)\}/],
-            [
-                themeProviderSource,
-                /:global\(\[data-theme='happyvertical'\] :focus-visible\) \{([^}]*)\}/,
-            ],
-        ];
-        for (const [source, pattern] of sources) {
-            const focusBlock = source.match(pattern);
-            expect(focusBlock, 'focus-visible rule should exist').not.toBeNull();
-            expect(focusBlock?.[1]).toContain('outline: 2px solid var(--smrt-color-primary)');
-            expect(focusBlock?.[1]).toMatch(/outline-offset:\s*2px/);
-        }
-    });
-});
-describe('happyvertical static CSS lockstep (#1586)', () => {
-    for (const scheme of ['light', 'dark']) {
-        it(`${scheme} block matches generateThemeCSS output verbatim`, () => {
-            const generated = generateThemeCSS(happyverticalTheme, scheme === 'dark');
-            expect(staticCss).toContain(generated);
-        });
-    }
-});

package/dist/themes/__tests__/registry.test.js

@@ -1,43 +0,0 @@
-/**
- * Unit tests for the theme registry (coverage uplift toward smrt-svelte's T2
- * floor, S11 #1416 / S6 gate). Pure logic — no rendering.
- */
-import { describe, expect, it } from 'vitest';
-import { availablePresets, getAllThemes, getCustomTheme, getTheme, getThemeName, getThemeOptions, hasCustomTheme, isValidPreset, registerCustomTheme, themes, } from '../registry';
-describe('theme registry', () => {
-    it('returns each built-in preset from getTheme', () => {
-        for (const preset of availablePresets) {
-            const theme = getTheme(preset);
-            expect(theme).toBeDefined();
-            expect(theme.name).toBeTruthy();
-        }
-    });
-    it('throws on an unknown preset', () => {
-        expect(() => getTheme('nope')).toThrow(/Unknown theme preset/);
-    });
-    it('validates presets', () => {
-        expect(isValidPreset('material')).toBe(true);
-        expect(isValidPreset('bogus')).toBe(false);
-    });
-    it('returns display names with a fallback', () => {
-        expect(getThemeName('material')).toBe(themes.material.name);
-        expect(getThemeName('bogus')).toBe('bogus');
-    });
-    it('lists all built-in themes and options', () => {
-        expect(getAllThemes()).toHaveLength(availablePresets.length);
-        const options = getThemeOptions();
-        expect(options.length).toBeGreaterThanOrEqual(availablePresets.length);
-        expect(options[0]).toHaveProperty('value');
-        expect(options[0]).toHaveProperty('label');
-    });
-    it('registers, resolves, and reports custom themes', () => {
-        const custom = { id: 'unit-custom', name: 'Unit Custom' };
-        expect(hasCustomTheme('unit-custom')).toBe(false);
-        registerCustomTheme(custom);
-        expect(hasCustomTheme('unit-custom')).toBe(true);
-        expect(getCustomTheme('unit-custom')).toBe(custom);
-        expect(isValidPreset('unit-custom')).toBe(true);
-        expect(getTheme('unit-custom')).toBe(custom);
-        expect(getThemeName('unit-custom')).toBe('Unit Custom');
-    });
-});

package/dist/themes/__tests__/styles-lockstep.test.js

@@ -1,32 +0,0 @@
-/**
- * Static stylesheet lockstep (#1586, all presets).
- *
- * Every built-in preset ships a static stylesheet whose two
- * `[data-theme][data-color-scheme]` token blocks must be the verbatim output
- * of the theme generator — ThemeProvider defaults built-in presets to this
- * static delivery path, so drift between the theme definitions and the
- * shipped CSS would silently change rendered values. Run
- * `pnpm --filter @happyvertical/smrt-ui generate:themes` to regenerate after
- * editing a preset definition.
- */
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { generateThemeCSS } from '../css-generator.js';
-import { availablePresets, getTheme } from '../registry.js';
-// Resolved from process.cwd() (NOT import.meta.url): the smrt-vitest plugin
-// runs each package's suite with cwd === the package root.
-describe('static stylesheets match the generator verbatim (#1586)', () => {
-    for (const preset of availablePresets) {
-        const theme = getTheme(preset);
-        const staticCss = readFileSync(join(process.cwd(), `src/themes/styles/${preset}.css`), 'utf8');
-        for (const [scheme, isDark] of [
-            ['light', false],
-            ['dark', true],
-        ]) {
-            it(`${preset} ${scheme} block matches generateThemeCSS output`, () => {
-                expect(staticCss).toContain(generateThemeCSS(theme, isDark));
-            });
-        }
-    }
-});

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

@@ -1,147 +0,0 @@
-/**
- * Regression tests for ThemeProvider persistence behavior.
- *
- * Bug: the prop-sync `$effect`s re-asserted the `colorScheme`/`preset` props on
- * every mount, clobbering the persisted localStorage preference loaded in
- * `onMount` — a toggled light/dark choice snapped back to the prop (typically
- * "system") on reload. Fixed by only syncing props on actual prop changes.
- */
-import { render, waitFor } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import ThemeProvider from '../ThemeProvider.svelte';
-function child() {
-    return createRawSnippet(() => ({ render: () => '<span>child</span>' }));
-}
-function mockSystemDark(matches) {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
-        matches,
-        media: query,
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-    }));
-}
-describe('ThemeProvider persistence', () => {
-    beforeEach(() => {
-        localStorage.clear();
-        document.documentElement.removeAttribute('data-theme');
-        document.documentElement.removeAttribute('data-color-scheme');
-    });
-    it('keeps the persisted color scheme instead of clobbering it with the prop', async () => {
-        localStorage.setItem('smrt-theme', JSON.stringify({ colorScheme: 'light' }));
-        mockSystemDark(true); // system is dark; stored choice is light
-        render(ThemeProvider, {
-            props: { colorScheme: 'system', children: child() },
-        });
-        await waitFor(() => {
-            expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-        });
-        // The stored preference must survive too (not rewritten to the prop value)
-        expect(JSON.parse(localStorage.getItem('smrt-theme'))).toMatchObject({
-            colorScheme: 'light',
-        });
-    });
-    it('falls back to the system scheme when nothing is persisted', async () => {
-        mockSystemDark(true);
-        render(ThemeProvider, {
-            props: { colorScheme: 'system', children: child() },
-        });
-        await waitFor(() => {
-            expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        });
-    });
-    it('still applies prop changes after mount', async () => {
-        mockSystemDark(false);
-        const { rerender } = render(ThemeProvider, {
-            props: { colorScheme: 'system', children: child() },
-        });
-        await waitFor(() => {
-            expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-        });
-        await rerender({ colorScheme: 'dark', children: child() });
-        await waitFor(() => {
-            expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        });
-    });
-    it('paints the surface by default and opts out via paintSurface=false', async () => {
-        mockSystemDark(false);
-        const { container, rerender } = render(ThemeProvider, {
-            props: { children: child() },
-        });
-        const root = container.querySelector('.smrt-theme-root');
-        expect(root).not.toHaveClass('no-paint');
-        await rerender({ paintSurface: false, children: child() });
-        expect(root).toHaveClass('no-paint');
-    });
-    it('ignores invalid persisted theme values instead of breaking hydration', async () => {
-        localStorage.setItem('smrt-theme', JSON.stringify({
-            preset: 'not-a-theme',
-            colorScheme: 'sepia',
-            borderRadius: 'enormous',
-        }));
-        mockSystemDark(false);
-        render(ThemeProvider, {
-            props: {
-                preset: 'material',
-                colorScheme: 'system',
-                children: child(),
-            },
-        });
-        await waitFor(() => {
-            expect(document.documentElement.getAttribute('data-theme')).toBe('material');
-            expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-        });
-    });
-    it('renders no inline variable payload for built-in presets (static-first)', () => {
-        mockSystemDark(false);
-        const { container } = render(ThemeProvider, {
-            props: { children: child() },
-        });
-        const root = container.querySelector('.smrt-theme-root');
-        const style = root?.getAttribute('style') ?? '';
-        // Built-in presets ship their full variable set as static stylesheets
-        // selected by the data attributes — the wrapper carries no ~200-var style.
-        expect(style).not.toContain('--smrt-color-background');
-        expect(root).toHaveAttribute('data-theme');
-        expect(root).toHaveAttribute('data-color-scheme');
-    });
-    it('applies only the explicit accent/overrides inline for built-in presets', () => {
-        mockSystemDark(false);
-        const { container } = render(ThemeProvider, {
-            props: {
-                primaryColor: '#123456',
-                overrides: { '--smrt-color-tertiary': '#654321' },
-                children: child(),
-            },
-        });
-        const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
-        expect(style).toContain('--smrt-color-primary: #123456');
-        expect(style).toContain('--smrt-color-tertiary: #654321');
-        expect(style).not.toContain('--smrt-color-background');
-    });
-    it('keeps runtime variable generation for custom registered themes', async () => {
-        const { createTheme, registerTheme } = await import('../create-theme.js');
-        registerTheme(createTheme({
-            id: 'provider-test-brand',
-            name: 'Provider Test Brand',
-            light: { primary: '#336699', background: '#fefefe' },
-            dark: { primary: '#99ccff', background: '#101820' },
-        }));
-        mockSystemDark(false);
-        const { container } = render(ThemeProvider, {
-            props: { preset: 'provider-test-brand', children: child() },
-        });
-        const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
-        // No static stylesheet can exist for a registered custom theme, so the
-        // provider falls back to the legacy runtime-generated variable set.
-        expect(style).toContain('--smrt-color-background: #fefefe');
-    });
-    it('opts a built-in preset back into runtime generation via inlineVariables', () => {
-        mockSystemDark(false);
-        const { container } = render(ThemeProvider, {
-            props: { preset: 'material', inlineVariables: true, children: child() },
-        });
-        const style = container.querySelector('.smrt-theme-root')?.getAttribute('style') ?? '';
-        expect(style).toContain('--smrt-color-background');
-    });
-});