@happyvertical/smrt-ui 0.53.1 → 0.53.3

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

@@ -1,130 +0,0 @@
-/**
- * Tests for the themeScript() pre-paint bootstrap generator. The generated
- * script must mirror ThemeProvider's persistence resolution so apps stop
- * hand-duplicating it in app.html.
- */
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { createTheme, registerTheme } from '../create-theme.js';
-import { themeScript } from '../theme-script.js';
-function mockSystemDark(matches) {
-    window.matchMedia = vi.fn().mockImplementation((query) => ({
-        matches,
-        media: query,
-    }));
-}
-function run(script) {
-    // biome-ignore lint/security/noGlobalEval: the browser evals this inline bootstrap; testing that is the point
-    (0, eval)(script);
-}
-describe('themeScript', () => {
-    beforeEach(() => {
-        vi.restoreAllMocks();
-        localStorage.clear();
-        document.documentElement.removeAttribute('data-theme');
-        document.documentElement.removeAttribute('data-color-scheme');
-        document.documentElement.classList.remove('dark');
-    });
-    it("uses Vitest's original jsdom Storage rather than Node host storage", () => {
-        expect(localStorage).toBe(globalThis.jsdom
-            .window.localStorage);
-    });
-    it('resolves system preference when nothing is stored', () => {
-        mockSystemDark(true);
-        run(themeScript({ preset: 'material' }));
-        expect(document.documentElement.getAttribute('data-theme')).toBe('material');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        expect(document.documentElement.classList.contains('dark')).toBe(true);
-    });
-    it('honours a stored scheme and preset over system and defaults', () => {
-        mockSystemDark(true);
-        localStorage.setItem('smrt-theme', JSON.stringify({ preset: 'studio', colorScheme: 'light' }));
-        run(themeScript({ preset: 'material' }));
-        expect(document.documentElement.getAttribute('data-theme')).toBe('studio');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-        expect(document.documentElement.classList.contains('dark')).toBe(false);
-    });
-    it('ships no inline variable payload — static CSS owns the values', () => {
-        mockSystemDark(false);
-        const script = themeScript({ preset: 'studio' });
-        // The pre-paint script only stamps attributes; variable values come from
-        // the static per-preset stylesheets selected by those attributes.
-        expect(script).not.toContain('--smrt-');
-        expect(script).not.toContain('bootstrap');
-        expect(script.length).toBeLessThan(1024);
-        run(script);
-        for (const property of Array.from(document.documentElement.style)) {
-            expect(property.startsWith('--smrt-')).toBe(false);
-        }
-    });
-    it('uses the custom storageKey', () => {
-        mockSystemDark(false);
-        localStorage.setItem('my-theme', JSON.stringify({ colorScheme: 'dark' }));
-        run(themeScript({ storageKey: 'my-theme' }));
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-    });
-    it('does not read stored preferences when persistence is disabled', () => {
-        mockSystemDark(false);
-        localStorage.setItem('smrt-theme', JSON.stringify({ preset: 'studio', colorScheme: 'dark' }));
-        run(themeScript({
-            persist: false,
-            preset: 'material',
-            defaultColorScheme: 'light',
-        }));
-        expect(document.documentElement.getAttribute('data-theme')).toBe('material');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-    });
-    it('ignores a raw (non-JSON) stored value like ThemeProvider', () => {
-        mockSystemDark(true);
-        localStorage.setItem('smrt-theme', 'light');
-        run(themeScript());
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        expect(document.documentElement.classList.contains('dark')).toBe(true);
-    });
-    it('ignores invalid persisted enum values', () => {
-        mockSystemDark(false);
-        localStorage.setItem('smrt-theme', JSON.stringify({
-            preset: 'not-a-theme',
-            colorScheme: 'sepia',
-        }));
-        run(themeScript({ preset: 'material', defaultColorScheme: 'light' }));
-        expect(document.documentElement.getAttribute('data-theme')).toBe('material');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('light');
-    });
-    it('stamps a persisted registered custom theme pre-paint', () => {
-        const brandTheme = createTheme({
-            id: 'bootstrap-test-brand',
-            name: 'Bootstrap Test Brand',
-            light: { primary: '#336699', background: '#fefefe' },
-            dark: { primary: '#99ccff', background: '#101820' },
-        });
-        registerTheme(brandTheme);
-        mockSystemDark(false);
-        localStorage.setItem('smrt-theme', JSON.stringify({
-            preset: 'bootstrap-test-brand',
-            colorScheme: 'dark',
-        }));
-        run(themeScript());
-        expect(document.documentElement.getAttribute('data-theme')).toBe('bootstrap-test-brand');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        expect(document.documentElement.classList.contains('dark')).toBe(true);
-    });
-    it('still applies the fallback when localStorage access throws', () => {
-        mockSystemDark(true);
-        vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
-            throw new DOMException('denied', 'SecurityError');
-        });
-        run(themeScript({ preset: 'studio' }));
-        expect(document.documentElement.getAttribute('data-theme')).toBe('studio');
-        expect(document.documentElement.getAttribute('data-color-scheme')).toBe('dark');
-        expect(document.documentElement.classList.contains('dark')).toBe(true);
-    });
-    it('escapes executable inline-script terminators and separators', () => {
-        const script = themeScript({
-            storageKey: '</script><script>alert(1)</script>\u2028\u2029',
-        });
-        expect(script.toLowerCase()).not.toContain('</script');
-        expect(script).not.toContain('\u2028');
-        expect(script).not.toContain('\u2029');
-        expect(script).toContain('\\u003c/script>');
-    });
-});

package/dist/themes/__tests__/token-aliases.test.js

@@ -1,178 +0,0 @@
-/**
- * Design-token alias contract (issue #1431).
- *
- * Components consume a Material-3 token vocabulary (`radius-small`,
- * `duration-short2`, `spacing-md`, `typography-*-font`, …) that must resolve to
- * real values across every preset. These tests pin the additive aliases emitted
- * by the canonical preset generator (`css-generator.ts`) and the simple
- * `src/theme/` ThemeProvider so a regression that drops a consumed alias fails
- * here as well as in scripts/check-svelte-tokens.mjs.
- */
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { generateThemeVariables as generateSimpleThemeVariables } from '../../theme/tokens.js';
-import { generateThemeVariables } from '../css-generator.js';
-import { themes } from '../registry.js';
-/** Material-3 + helper aliases that components consume and expect emitted. */
-const REQUIRED_ALIASES = [
-    // Radius (Material-3 named scale)
-    '--smrt-radius-extra-small',
-    '--smrt-radius-small',
-    '--smrt-radius-medium',
-    '--smrt-radius-large',
-    '--smrt-radius-extra-large',
-    // Spacing (named aliases)
-    '--smrt-spacing-xs',
-    '--smrt-spacing-sm',
-    '--smrt-spacing-md',
-    '--smrt-spacing-lg',
-    '--smrt-spacing-xl',
-    '--smrt-spacing-2xl',
-    '--smrt-spacing-3xl',
-    // Motion (Material-3 duration scale)
-    '--smrt-duration-short1',
-    '--smrt-duration-short2',
-    '--smrt-duration-short3',
-    '--smrt-duration-short4',
-    '--smrt-duration-medium1',
-    '--smrt-duration-medium2',
-    '--smrt-duration-medium3',
-    '--smrt-duration-medium4',
-    '--smrt-duration-long1',
-    '--smrt-duration-long2',
-    '--smrt-duration-long3',
-    '--smrt-duration-long4',
-    // Helper tokens (theme-independent)
-    '--smrt-font-family-mono',
-    '--smrt-typography-weight-normal',
-    '--smrt-typography-weight-medium',
-    '--smrt-typography-weight-semibold',
-    '--smrt-typography-weight-bold',
-    '--smrt-z-index-dialog',
-    '--smrt-z-index-loading',
-];
-const SPACING_NUMERIC_TOKENS = [
-    '--smrt-spacing-0',
-    '--smrt-spacing-0_5',
-    '--smrt-spacing-1',
-    '--smrt-spacing-1_5',
-    '--smrt-spacing-2',
-    '--smrt-spacing-2_5',
-    '--smrt-spacing-3',
-    '--smrt-spacing-3_5',
-    '--smrt-spacing-4',
-    '--smrt-spacing-5',
-    '--smrt-spacing-6',
-    '--smrt-spacing-7',
-    '--smrt-spacing-8',
-    '--smrt-spacing-9',
-    '--smrt-spacing-10',
-    '--smrt-spacing-11',
-    '--smrt-spacing-12',
-    '--smrt-spacing-14',
-    '--smrt-spacing-16',
-    '--smrt-spacing-20',
-    '--smrt-spacing-24',
-];
-const TYPOGRAPHY_FONT_SHORTHANDS = [
-    '--smrt-typography-body-large-font',
-    '--smrt-typography-body-medium-font',
-    '--smrt-typography-body-small-font',
-    '--smrt-typography-label-large-font',
-    '--smrt-typography-label-medium-font',
-    '--smrt-typography-label-small-font',
-    '--smrt-typography-title-large-font',
-    '--smrt-typography-title-medium-font',
-    '--smrt-typography-title-small-font',
-    '--smrt-typography-headline-small-font',
-    '--smrt-typography-headline-medium-font',
-];
-const BASE_COMPONENT_COLOR_TOKENS = [
-    '--smrt-color-surface-container-highest',
-    '--smrt-color-surface-container-lowest',
-    '--smrt-color-surface-dim',
-    '--smrt-color-surface-bright',
-    '--smrt-color-shadow',
-];
-const packageRoot = process.cwd().endsWith('packages/smrt-ui')
-    ? process.cwd()
-    : join(process.cwd(), 'packages/smrt-ui');
-const STATIC_STYLE_PATHS = {
-    material: join(packageRoot, 'src/themes/styles/material.css'),
-    glass: join(packageRoot, 'src/themes/styles/glass.css'),
-    studio: join(packageRoot, 'src/themes/styles/studio.css'),
-    smrt: join(packageRoot, 'src/themes/styles/smrt.css'),
-    happyvertical: join(packageRoot, 'src/themes/styles/happyvertical.css'),
-};
-function collectDefinedTokens(css) {
-    return new Set([...css.matchAll(/(--smrt-[a-z0-9_-]+)\s*:/gi)].map((match) => match[1]));
-}
-describe('preset generator alias emission (#1431)', () => {
-    for (const theme of Object.values(themes)) {
-        for (const isDark of [false, true]) {
-            it(`${theme.id} ${isDark ? 'dark' : 'light'} emits every consumed alias`, () => {
-                const vars = generateThemeVariables(theme, isDark);
-                for (const token of [
-                    ...REQUIRED_ALIASES,
-                    ...SPACING_NUMERIC_TOKENS,
-                    ...TYPOGRAPHY_FONT_SHORTHANDS,
-                ]) {
-                    expect(vars[token], `${token} should be emitted`).toBeDefined();
-                    expect(vars[token]).not.toBe('');
-                }
-            });
-        }
-    }
-    it('maps Material-3 radius aliases onto canonical t-shirt values', () => {
-        const vars = generateThemeVariables(themes.material, false);
-        expect(vars['--smrt-radius-small']).toBe(vars['--smrt-radius-sm']);
-        expect(vars['--smrt-radius-medium']).toBe(vars['--smrt-radius-md']);
-        expect(vars['--smrt-radius-large']).toBe(vars['--smrt-radius-lg']);
-    });
-    it('maps named spacing aliases onto numeric-scale values', () => {
-        const vars = generateThemeVariables(themes.material, false);
-        expect(vars['--smrt-spacing-sm']).toBe(vars['--smrt-spacing-2']);
-        expect(vars['--smrt-spacing-md']).toBe(vars['--smrt-spacing-4']);
-        expect(vars['--smrt-spacing-xl']).toBe(vars['--smrt-spacing-8']);
-    });
-    it('builds the typography `font` shorthand from the emitted longhands', () => {
-        const vars = generateThemeVariables(themes.material, false);
-        const shorthand = vars['--smrt-typography-body-medium-font'];
-        expect(shorthand).toContain(vars['--smrt-typography-body-medium-size']);
-        // weight size/line-height family
-        expect(shorthand).toMatch(/^\d+\s+\S+\/\S+\s+.+$/);
-    });
-});
-describe('static preset CSS token surface (#1431)', () => {
-    for (const theme of Object.values(themes)) {
-        it(`${theme.id} stylesheet contains the generated token surface`, () => {
-            const css = readFileSync(STATIC_STYLE_PATHS[theme.id], 'utf8');
-            const defined = collectDefinedTokens(css);
-            const generatedTokens = new Set([
-                ...Object.keys(generateThemeVariables(theme, false)),
-                ...Object.keys(generateThemeVariables(theme, true)),
-            ]);
-            const missing = [...generatedTokens]
-                .filter((token) => !defined.has(token))
-                .sort();
-            expect(missing).toEqual([]);
-        });
-    }
-});
-describe('simple ThemeProvider alias emission (#1431)', () => {
-    for (const isDark of [false, true]) {
-        it(`${isDark ? 'dark' : 'light'} emits shared aliases and component scale tokens`, () => {
-            const vars = generateSimpleThemeVariables(isDark);
-            for (const token of [
-                ...REQUIRED_ALIASES,
-                ...SPACING_NUMERIC_TOKENS,
-                ...TYPOGRAPHY_FONT_SHORTHANDS,
-                ...BASE_COMPONENT_COLOR_TOKENS,
-            ]) {
-                expect(vars[token], `${token} should be emitted`).toBeDefined();
-                expect(vars[token]).not.toBe('');
-            }
-        });
-    }
-});

package/dist/utils/forms/__tests__/formatters.test.js

@@ -1,27 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { formatEmail, formatText, matchOption, parseSpokenBoolean, } from '../formatters';
-describe('Form Formatters', () => {
-    it('should format email correctly', () => {
-        expect(formatEmail('john at example dot com')).toBe('john@example.com');
-        expect(formatEmail('JOHN DOT DOE AT GMAIL DOT COM')).toBe('john.doe@gmail.com');
-    });
-    it('should format text correctly', () => {
-        expect(formatText('my name is John')).toBe('John');
-        expect(formatText('um so well hello')).toBe('hello');
-    });
-    it('should parse spoken boolean correctly', () => {
-        expect(parseSpokenBoolean('yes please')).toBe(true);
-        expect(parseSpokenBoolean('no way')).toBe(false);
-        expect(parseSpokenBoolean('maybe')).toBe(null);
-    });
-    it('should match options correctly', () => {
-        const options = [
-            { label: 'Red', value: 'red' },
-            { label: 'Green', value: 'green' },
-            { label: 'Blue', value: 'blue' },
-        ];
-        expect(matchOption('red', options)).toBe('red');
-        expect(matchOption('I want green', options)).toBe('green');
-        expect(matchOption('yellow', options)).toBe(null);
-    });
-});

package/dist/utils/theme/__tests__/color.test.js

@@ -1,89 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { generateTheme, getContrastRatio, getLuminance, hexToRgb, meetsContrastAA, meetsContrastAAA, rgbToHex, } from '../color';
-describe('Theme Color Utilities', () => {
-    it('should convert hex to rgb correctly', () => {
-        expect(hexToRgb('#000000')).toEqual({ r: 0, g: 0, b: 0 });
-        expect(hexToRgb('#ffffff')).toEqual({ r: 255, g: 255, b: 255 });
-        expect(hexToRgb('#FF5733')).toEqual({ r: 255, g: 87, b: 51 });
-    });
-    it('expands 3-digit shorthand hex (#abc -> #aabbcc) (#1586)', () => {
-        // Regression: shorthand hex used to NaN-poison the b channel (only the first
-        // 2 chars were read), corrupting any palette generated from a 3-digit seed.
-        expect(hexToRgb('#abc')).toEqual({ r: 170, g: 187, b: 204 });
-        expect(hexToRgb('#000')).toEqual({ r: 0, g: 0, b: 0 });
-        expect(hexToRgb('#fff')).toEqual({ r: 255, g: 255, b: 255 });
-    });
-    it('parses functional rgb()/rgba() notation (#1586)', () => {
-        expect(hexToRgb('rgb(0, 122, 255)')).toEqual({ r: 0, g: 122, b: 255 });
-        expect(hexToRgb('rgb(0 122 255)')).toEqual({ r: 0, g: 122, b: 255 });
-        expect(hexToRgb('rgba(0, 122, 255, 0.5)')).toEqual({
-            r: 0,
-            g: 122,
-            b: 255,
-        });
-        expect(hexToRgb('rgb(100%, 0%, 50%)')).toEqual({ r: 255, g: 0, b: 128 });
-    });
-    it('should convert rgb to hex correctly', () => {
-        expect(rgbToHex(0, 0, 0)).toBe('#000000');
-        expect(rgbToHex(255, 255, 255)).toBe('#ffffff');
-        expect(rgbToHex(255, 87, 51)).toBe('#ff5733');
-    });
-    it('should generate a theme palette from a seed color', () => {
-        const seed = '#6750A4'; // M3 Baseline Purple
-        const theme = generateTheme(seed);
-        // Check for critical M3 keys
-        expect(theme).toHaveProperty('primary');
-        expect(theme).toHaveProperty('onPrimary');
-        expect(theme).toHaveProperty('primaryContainer');
-        expect(theme).toHaveProperty('onPrimaryContainer');
-        expect(theme).toHaveProperty('secondary');
-        expect(theme).toHaveProperty('surface');
-        expect(theme).toHaveProperty('background');
-        expect(theme).toHaveProperty('error');
-        // Basic validity check (strings should be hex colors)
-        expect(theme.primary).toMatch(/^#[0-9a-fA-F]{6}$/);
-    });
-    it('should generate different palettes for light and dark modes', () => {
-        const seed = '#6750A4';
-        const lightTheme = generateTheme(seed, 'light');
-        const darkTheme = generateTheme(seed, 'dark');
-        expect(lightTheme.primary).not.toBe(darkTheme.primary);
-        // In M3, dark mode primary is usually lighter/desaturated compared to light mode
-    });
-});
-describe('Color Contrast Utilities', () => {
-    it('should calculate luminance correctly', () => {
-        // Black has luminance 0
-        expect(getLuminance({ r: 0, g: 0, b: 0 })).toBe(0);
-        // White has luminance 1
-        expect(getLuminance({ r: 255, g: 255, b: 255 })).toBe(1);
-        // Mid gray should be around 0.2
-        const midGray = getLuminance({ r: 128, g: 128, b: 128 });
-        expect(midGray).toBeGreaterThan(0.1);
-        expect(midGray).toBeLessThan(0.3);
-    });
-    it('should calculate contrast ratio correctly', () => {
-        const black = { r: 0, g: 0, b: 0 };
-        const white = { r: 255, g: 255, b: 255 };
-        // Black on white should be 21:1 (maximum contrast)
-        expect(getContrastRatio(black, white)).toBeCloseTo(21, 0);
-        // Same color should be 1:1 (no contrast)
-        expect(getContrastRatio(black, black)).toBe(1);
-    });
-    it('should validate WCAG AA contrast requirements', () => {
-        // Black on white passes AA
-        expect(meetsContrastAA('#000000', '#ffffff')).toBe(true);
-        // Light gray on white fails AA for normal text
-        expect(meetsContrastAA('#999999', '#ffffff')).toBe(false);
-        // Light gray on white passes AA for large text (3:1 threshold)
-        expect(meetsContrastAA('#767676', '#ffffff', true)).toBe(true);
-    });
-    it('should validate WCAG AAA contrast requirements', () => {
-        // Black on white passes AAA
-        expect(meetsContrastAAA('#000000', '#ffffff')).toBe(true);
-        // Medium gray on white fails AAA for normal text (needs 7:1)
-        expect(meetsContrastAAA('#666666', '#ffffff')).toBe(false);
-        // Darker gray passes AAA for large text (4.5:1 threshold)
-        expect(meetsContrastAAA('#595959', '#ffffff', true)).toBe(true);
-    });
-});

package/dist/utils/theme/__tests__/typography.test.js

@@ -1,11 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { elevationTokens, typographyTokens } from '../typography';
-describe('Typography & Elevation Tokens', () => {
-    it('should have valid typography tokens', () => {
-        expect(typographyTokens['--md-sys-typescale-body-large-font']).toBeDefined();
-        expect(typographyTokens['--md-sys-typescale-display-large-font']).toContain('Roboto');
-    });
-    it('should have valid elevation tokens', () => {
-        expect(elevationTokens['--md-sys-elevation-level1']).toBeDefined();
-    });
-});