@3fn/core 14.0.0 → 15.0.0

package/src/__tests__/browser-distribution/bundler-resolution.test.ts

@@ -1,223 +0,0 @@
-/**
- * @jest-environment node
- * @category evergreen
- * @purpose Verify npm package exports resolve correctly for bundlers
- */
-
-/**
- * Bundler Resolution Tests
- *
- * Tests that verify package.json exports configuration enables bundlers
- * to correctly resolve imports to the ESM browser bundle.
- *
- * Updated for Spec 095 — ESM-only root export, new export paths,
- * legacy CJS and BlendUtilities exports removed.
- *
- * @see .kiro/specs/095-ecosystem-package-assembly/design.md
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-describe('Bundler Resolution', () => {
-  const PROJECT_ROOT = process.cwd();
-  const PACKAGE_JSON_PATH = path.join(PROJECT_ROOT, 'package.json');
-
-  let packageJson: Record<string, any>;
-
-  beforeAll(() => {
-    const packageJsonContent = fs.readFileSync(PACKAGE_JSON_PATH, 'utf-8');
-    packageJson = JSON.parse(packageJsonContent);
-  });
-
-  describe('Package Identity', () => {
-    it('should be named @3fn/core', () => {
-      expect(packageJson.name).toBe('@3fn/core');
-    });
-  });
-
-  describe('Exports Configuration', () => {
-    it('should have exports field defined', () => {
-      expect(packageJson.exports).toBeDefined();
-      expect(typeof packageJson.exports).toBe('object');
-    });
-
-    it('should have ESM-only root export (no require condition)', () => {
-      const mainExport = packageJson.exports['.'];
-      expect(mainExport.import).toBe('./dist/browser/designerpunk.esm.js');
-      expect(mainExport.types).toBe('./dist/browser-entry.d.ts');
-      expect(mainExport.require).toBeUndefined();
-    });
-
-    it('should have ./components alias for root', () => {
-      const comp = packageJson.exports['./components'];
-      expect(comp.import).toBe('./dist/browser/designerpunk.esm.js');
-    });
-
-    it('should have tokens.css pointing to generated output', () => {
-      expect(packageJson.exports['./tokens.css']).toBe('./dist/DesignTokens.web.css');
-    });
-
-    it('should have component-tokens.css export', () => {
-      expect(packageJson.exports['./component-tokens.css']).toBe('./dist/ComponentTokens.web.css');
-    });
-
-    it('should have config export with types', () => {
-      const config = packageJson.exports['./config'];
-      expect(config.import).toBe('./dist/config/index.js');
-      expect(config.types).toBe('./dist/config/index.d.ts');
-    });
-
-    // Spec 118 Task 9.2 (Increment 3b): the three raw-`.ts` subpath exports were
-    // reconciled to compiled dist (mirroring the `./config` precedent), so a packed
-    // consumer resolves them to JS without a TS loader. See findings + consumer guard.
-    it('should have blend export pointing to compiled dist', () => {
-      const blend = packageJson.exports['./blend'];
-      expect(blend.import).toBe('./dist/blend/index.js');
-      expect(blend.require).toBe('./dist/blend/index.js');
-      expect(blend.types).toBe('./dist/blend/index.d.ts');
-    });
-
-    it('should have build export pointing to compiled dist', () => {
-      const build = packageJson.exports['./build'];
-      expect(build.import).toBe('./dist/build/tokens/index.js');
-      expect(build.require).toBe('./dist/build/tokens/index.js');
-      expect(build.types).toBe('./dist/build/tokens/index.d.ts');
-    });
-
-    it('should have types export pointing to compiled dist', () => {
-      const types = packageJson.exports['./types'];
-      expect(types.import).toBe('./dist/types/index.js');
-      expect(types.require).toBe('./dist/types/index.js');
-      expect(types.types).toBe('./dist/types/index.d.ts');
-    });
-
-    it('should have grid.css export', () => {
-      expect(packageJson.exports['./grid.css']).toBe('./src/styles/responsive-grid.css');
-    });
-
-    it('should have font exports', () => {
-      expect(packageJson.exports['./fonts/inter.css']).toBe('./src/assets/fonts/inter/inter.css');
-      expect(packageJson.exports['./fonts/rajdhani.css']).toBe('./src/assets/fonts/rajdhani/rajdhani.css');
-    });
-
-    it('should NOT have legacy BlendUtilities export', () => {
-      expect(packageJson.exports['./BlendUtilities']).toBeUndefined();
-    });
-  });
-
-  describe('Legacy Field Configuration', () => {
-    it('should have browser field pointing to ESM bundle', () => {
-      expect(packageJson.browser).toBe('./dist/browser/designerpunk.esm.js');
-    });
-
-    it('should have module field pointing to ESM bundle', () => {
-      expect(packageJson.module).toBe('./dist/browser/designerpunk.esm.js');
-    });
-
-    it('should have main field pointing to ESM bundle', () => {
-      expect(packageJson.main).toBe('./dist/browser/designerpunk.esm.js');
-    });
-
-    it('should have types field pointing to browser-entry declarations', () => {
-      expect(packageJson.types).toBe('./dist/browser-entry.d.ts');
-    });
-  });
-
-  describe('Export Target File Existence', () => {
-    it('should have ESM bundle at export path', () => {
-      const esmPath = path.join(PROJECT_ROOT, 'dist', 'browser', 'designerpunk.esm.js');
-      expect(fs.existsSync(esmPath)).toBe(true);
-    });
-
-    it('should have design tokens CSS at export path', () => {
-      const tokensPath = path.join(PROJECT_ROOT, 'dist', 'DesignTokens.web.css');
-      expect(fs.existsSync(tokensPath)).toBe(true);
-    });
-
-    it('should have component tokens CSS at export path', () => {
-      const tokensPath = path.join(PROJECT_ROOT, 'dist', 'ComponentTokens.web.css');
-      expect(fs.existsSync(tokensPath)).toBe(true);
-    });
-
-    it('should have blend utilities at export path', () => {
-      const blendPath = path.join(PROJECT_ROOT, 'src', 'blend', 'index.ts');
-      expect(fs.existsSync(blendPath)).toBe(true);
-    });
-
-    it('should have responsive grid CSS at export path', () => {
-      const gridPath = path.join(PROJECT_ROOT, 'src', 'styles', 'responsive-grid.css');
-      expect(fs.existsSync(gridPath)).toBe(true);
-    });
-
-    it('should have font CSS files at export paths', () => {
-      expect(fs.existsSync(path.join(PROJECT_ROOT, 'src', 'assets', 'fonts', 'inter', 'inter.css'))).toBe(true);
-      expect(fs.existsSync(path.join(PROJECT_ROOT, 'src', 'assets', 'fonts', 'rajdhani', 'rajdhani.css'))).toBe(true);
-    });
-  });
-
-  describe('Bundler Resolution Simulation', () => {
-    it('should resolve ESM import to browser bundle', () => {
-      const resolvedPath = resolvePackageExport(packageJson, '.', 'import');
-      expect(resolvedPath).toBe('./dist/browser/designerpunk.esm.js');
-
-      const absolutePath = path.join(PROJECT_ROOT, resolvedPath!);
-      expect(fs.existsSync(absolutePath)).toBe(true);
-
-      const content = fs.readFileSync(absolutePath, 'utf-8');
-      expect(content).toMatch(/export\s*\{/);
-    });
-
-    it('should resolve tokens.css import correctly', () => {
-      const resolvedPath = resolvePackageExport(packageJson, './tokens.css', 'import');
-      expect(resolvedPath).toBe('./dist/DesignTokens.web.css');
-
-      const absolutePath = path.join(PROJECT_ROOT, resolvedPath!);
-      expect(fs.existsSync(absolutePath)).toBe(true);
-
-      const content = fs.readFileSync(absolutePath, 'utf-8');
-      expect(content).toContain(':root');
-    });
-
-    it('should fall back to module field for legacy bundlers', () => {
-      expect(packageJson.module).toBe('./dist/browser/designerpunk.esm.js');
-      const absolutePath = path.join(PROJECT_ROOT, packageJson.module);
-      expect(fs.existsSync(absolutePath)).toBe(true);
-    });
-  });
-
-  describe('ESM Bundle Content Verification', () => {
-    it('should have valid ESM module that exports components', () => {
-      const esmPath = path.join(PROJECT_ROOT, 'dist', 'browser', 'designerpunk.esm.js');
-      const content = fs.readFileSync(esmPath, 'utf-8');
-
-      expect(content).toMatch(/export\s*\{[^}]*ButtonCTA[^}]*\}/);
-      expect(content).toMatch(/export\s*\{[^}]*IconBaseElement[^}]*\}/);
-      expect(content).toMatch(/export\s*\{[^}]*ContainerBaseWeb[^}]*\}/);
-    });
-
-    it('should not have CommonJS syntax in ESM bundle', () => {
-      const esmPath = path.join(PROJECT_ROOT, 'dist', 'browser', 'designerpunk.esm.js');
-      const content = fs.readFileSync(esmPath, 'utf-8');
-
-      expect(content).not.toMatch(/module\.exports\s*=/);
-      expect(content).not.toMatch(/exports\.\w+\s*=/);
-    });
-  });
-});
-
-function resolvePackageExport(
-  packageJson: Record<string, any>,
-  exportPath: string,
-  condition: 'import' | 'require'
-): string | undefined {
-  if (packageJson.exports) {
-    const exportEntry = packageJson.exports[exportPath];
-    if (typeof exportEntry === 'string') return exportEntry;
-    if (typeof exportEntry === 'object' && exportEntry !== null) return exportEntry[condition];
-  }
-  if (exportPath === '.') {
-    return condition === 'import' ? (packageJson.module || packageJson.browser) : packageJson.main;
-  }
-  return undefined;
-}

package/src/__tests__/browser-distribution/component-registration.test.ts

@@ -1,217 +0,0 @@
-/**
- * @jest-environment jsdom
- * @category evergreen
- * @purpose Verify custom element auto-registration in browser bundles
- */
-
-/**
- * Component Registration Tests
- *
- * Tests that verify:
- * 1. All four components register automatically on bundle load (Requirements 4.1, 4.2, 4.3, 4.4)
- * 2. ESM bundle registration (Requirements 1.2, 1.3)
- * 3. UMD bundle registration and global object (Requirements 2.2, 2.3)
- *
- * @see .kiro/specs/028-web-component-browser-distribution/design.md
- * @see Requirements: 1.2, 1.3, 2.2, 2.3, 4.1, 4.2, 4.3, 4.4
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-import * as vm from 'vm';
-
-describe('Component Registration', () => {
-  const BROWSER_DIST_DIR = path.join(process.cwd(), 'dist', 'browser');
-  const ESM_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-  const UMD_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-
-  beforeAll(() => {
-    if (!fs.existsSync(BROWSER_DIST_DIR)) {
-      throw new Error('Browser bundles not found. Run "npm run build:browser" first.');
-    }
-  });
-
-  describe('ESM Bundle Component Registration', () => {
-    let bundleContent: string;
-
-    beforeAll(() => {
-      bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-    });
-
-    it('should contain safeDefine and all component registrations', () => {
-      expect(bundleContent).toContain('safeDefine');
-      expect(bundleContent).toContain('input-text-base');
-      expect(bundleContent).toContain('input-text-email');
-      expect(bundleContent).toContain('button-cta');
-      expect(bundleContent).toContain('icon-base');
-      expect(bundleContent).toContain('container-base');
-    });
-
-    it('should register all custom elements via safeDefine', () => {
-      // Requirements 4.1, 4.2, 4.3, 4.4
-      // Note: text-input-field removed - use input-text-base instead (Stemma System migration)
-      // Note: dp-icon and dp-container deprecated names removed
-      // Note: button-vertical-list-item added in spec 038
-      // Note: button-vertical-list-set added in spec 041
-      expect(bundleContent).toMatch(/safeDefine\s*\(\s*['"]input-text-base['"]/);
-      expect(bundleContent).toMatch(/safeDefine\s*\(\s*['"]input-text-email['"]/);
-      expect(bundleContent).toMatch(/safeDefine\s*\(\s*['"]button-cta['"]/);
-      expect(bundleContent).toMatch(/safeDefine\s*\(\s*['"]icon-base['"]/);
-      expect(bundleContent).toMatch(/safeDefine\s*\(\s*['"]container-base['"]/);
-    });
-
-    it('should export all component classes', () => {
-      // Requirements 1.2, 1.3
-      // Note: Stemma System migration - legacy exports removed, using new naming
-      expect(bundleContent).toMatch(/export\s*\{[^}]*InputTextBase[^}]*\}/);
-      expect(bundleContent).toMatch(/export\s*\{[^}]*InputTextEmail[^}]*\}/);
-      expect(bundleContent).toMatch(/export\s*\{[^}]*ButtonCTA[^}]*\}/);
-      expect(bundleContent).toMatch(/export\s*\{[^}]*IconBaseElement[^}]*\}/);
-      expect(bundleContent).toMatch(/export\s*\{[^}]*ContainerBaseWeb[^}]*\}/);
-    });
-  });
-
-  describe('UMD Bundle Component Registration', () => {
-    let bundleContent: string;
-    let mockContext: Record<string, unknown>;
-    let registeredElements: Map<string, CustomElementConstructor>;
-
-    beforeAll(() => {
-      bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      registeredElements = new Map();
-
-      mockContext = {
-        React: {
-          createElement: jest.fn(),
-          useState: jest.fn(() => [null, jest.fn()]),
-          useEffect: jest.fn(),
-          useRef: jest.fn(() => ({ current: null })),
-          useCallback: jest.fn((fn: unknown) => fn),
-          useMemo: jest.fn((fn: () => unknown) => fn()),
-          forwardRef: jest.fn((c: unknown) => c),
-          memo: jest.fn((c: unknown) => c),
-        },
-        jsxRuntime: { jsx: jest.fn(), jsxs: jest.fn(), Fragment: 'Fragment' },
-        emotionReact: { css: jest.fn(() => ''), keyframes: jest.fn(() => '') },
-        document: {
-          documentElement: {},
-          readyState: 'complete',
-          createElement: jest.fn(() => ({
-            attachShadow: jest.fn(() => ({ appendChild: jest.fn() })),
-          })),
-          addEventListener: jest.fn(),
-        },
-        getComputedStyle: jest.fn(() => ({
-          getPropertyValue: jest.fn(() => '#FF00FF'),
-        })),
-        customElements: {
-          get: jest.fn((name: string) => registeredElements.get(name)),
-          define: jest.fn((name: string, ctor: CustomElementConstructor) => {
-            registeredElements.set(name, ctor);
-          }),
-        },
-        console: { warn: jest.fn(), log: jest.fn(), error: jest.fn() },
-        HTMLElement: class MockHTMLElement {},
-        // Browser animation API - required for token loading check
-        requestAnimationFrame: jest.fn((callback: () => void) => {
-          callback();
-          return 0;
-        }),
-      };
-
-      // Execute bundle once
-      const script = new vm.Script(bundleContent);
-      const context = vm.createContext(mockContext);
-      script.runInContext(context);
-    });
-
-    it('should expose DesignerPunk global object (Req 2.2)', () => {
-      expect(mockContext.DesignerPunk).toBeDefined();
-    });
-
-    it('should register all custom elements (Req 2.3, 4.1-4.4)', () => {
-      // Note: text-input-field removed - use input-text-base instead (Stemma System migration)
-      // Note: dp-icon and dp-container deprecated names removed
-      // Note: button-vertical-list-item added in spec 038
-      // Note: button-vertical-list-set added in spec 041
-      expect(registeredElements.has('input-text-base')).toBe(true);
-      expect(registeredElements.has('button-cta')).toBe(true);
-      expect(registeredElements.has('icon-base')).toBe(true);
-      expect(registeredElements.has('container-base')).toBe(true);
-    });
-
-    it('should expose all components in DesignerPunk global', () => {
-      const dp = mockContext.DesignerPunk as Record<string, unknown>;
-      // Note: Stemma System migration - legacy exports removed, using new naming
-      expect(dp.InputTextBase).toBeDefined();
-      expect(dp.ButtonCTA).toBeDefined();
-      expect(dp.IconBaseElement).toBeDefined();
-      expect(dp.ContainerBaseWeb).toBeDefined();
-    });
-
-    it('should expose Icon, IconBase, Container, ContainerBase, and TextInputField aliases', () => {
-      const dp = mockContext.DesignerPunk as Record<string, unknown>;
-      expect(dp.Icon).toBe(dp.IconBaseElement);
-      expect(dp.IconBase).toBe(dp.IconBaseElement);
-      expect(dp.Container).toBe(dp.ContainerBaseWeb);
-      expect(dp.ContainerBase).toBe(dp.ContainerBaseWeb);
-      // Legacy alias for backward compatibility
-      expect(dp.TextInputField).toBe(dp.InputTextBase);
-    });
-  });
-
-  describe('Browser Entry Source Verification', () => {
-    let content: string;
-
-    beforeAll(() => {
-      const browserEntryPath = path.join(process.cwd(), 'src', 'browser-entry.ts');
-      content = fs.readFileSync(browserEntryPath, 'utf-8');
-    });
-
-    it('should have correct component imports', () => {
-      // Note: Stemma System migration - legacy imports removed, using new naming
-      expect(content).toContain("import { InputTextBase }");
-      expect(content).toContain("import { InputTextEmail }");
-      expect(content).toContain("import { ButtonCTA }");
-      expect(content).toContain("import { IconBaseElement }");
-      expect(content).toContain("import { ContainerBaseWeb }");
-    });
-
-    it('should have safeDefine calls for all five components', () => {
-      // Note: text-input-field removed - use input-text-base instead (Stemma System migration)
-      // Note: dp-icon and dp-container deprecated names removed
-      expect(content).toContain("safeDefine('input-text-base', InputTextBase)");
-      expect(content).toContain("safeDefine('input-text-email', InputTextEmail)");
-      expect(content).toContain("safeDefine('button-cta', ButtonCTA)");
-      expect(content).toContain("safeDefine('icon-base', IconBaseElement)");
-      expect(content).toContain("safeDefine('container-base', ContainerBaseWeb)");
-    });
-
-    it('should export all components for UMD global access', () => {
-      // Note: Stemma System migration - legacy exports removed, using new naming
-      // ButtonVerticalListItem added as part of spec 038
-      // ButtonVerticalListSet added as part of spec 041
-      // AvatarBaseElement added as part of spec 042
-      // Badge components added as part of spec 044
-      // Checkbox components added as part of spec 046
-      // NavHeaderBase, NavHeaderApp, NavHeaderPage, ProgressBarBase added as part of spec 094
-      expect(content).toContain('export { InputTextBase, InputTextEmail, InputTextPassword, InputTextPhoneNumber, ButtonCTA, IconBaseElement, ButtonIcon, ContainerBaseWeb, ButtonVerticalListItem, ButtonVerticalListSet, AvatarBaseElement, BadgeLabelBase, BadgeCountBase, BadgeCountNotification, InputCheckboxBaseElement, InputCheckboxLegalElement, ChipBaseElement, ChipFilterElement, ChipInputElement, ContainerCardBaseWeb, InputRadioBaseElement, InputRadioSetElement, ProgressIndicatorNodeBase, ProgressIndicatorConnectorBase, ProgressIndicatorLabelBase, ProgressPaginationBase, ProgressStepperBase, ProgressStepperDetailed, NavSegmentedChoiceBase, NavTabBarBase, NavHeaderBase, NavHeaderApp, NavHeaderPage, ProgressBarBase }');
-      expect(content).toContain('export const Icon = IconBaseElement');
-      expect(content).toContain('export const IconBase = IconBaseElement');
-      expect(content).toContain('export const Container = ContainerBaseWeb');
-      expect(content).toContain('export const ContainerBase = ContainerBaseWeb');
-      // Avatar aliases for intuitive naming
-      expect(content).toContain('export const Avatar = AvatarBaseElement');
-      expect(content).toContain('export const AvatarBase = AvatarBaseElement');
-      // Badge aliases for intuitive naming
-      expect(content).toContain('export const BadgeLabel = BadgeLabelBase');
-      expect(content).toContain('export const BadgeCount = BadgeCountBase');
-      expect(content).toContain('export const BadgeNotification = BadgeCountNotification');
-      // Checkbox aliases for intuitive naming
-      expect(content).toContain('export const CheckboxBase = InputCheckboxBaseElement');
-      expect(content).toContain('export const CheckboxLegal = InputCheckboxLegalElement');
-      // Legacy alias for backward compatibility
-      expect(content).toContain('export const TextInputField = InputTextBase');
-    });
-  });
-});

package/src/__tests__/browser-distribution/css-bundling.test.ts

@@ -1,233 +0,0 @@
-/**
- * @jest-environment node
- * @category evergreen
- * @purpose Verify CSS is bundled into JS for browser distribution
- */
-
-/**
- * CSS Bundling Tests
- *
- * Tests that verify:
- * 1. CSS is bundled into JS (no external CSS file requests)
- * 2. Components use <style> tags instead of <link> tags in shadow DOM
- * 3. CSS content is properly escaped and included in bundles
- *
- * This validates the esbuild CSS-as-string plugin approach where component
- * CSS is imported as strings and injected via <style> tags in shadow DOM.
- *
- * @see .kiro/specs/028-web-component-browser-distribution/design.md
- * @see scripts/esbuild-css-plugin.js
- * @see Requirements: 8.2 (components render correctly)
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-
-describe('CSS Bundling for Browser Distribution', () => {
-  const BROWSER_DIST_DIR = path.join(process.cwd(), 'dist', 'browser');
-  const ESM_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.esm.js');
-  const UMD_BUNDLE_PATH = path.join(BROWSER_DIST_DIR, 'designerpunk.umd.js');
-
-  beforeAll(() => {
-    if (!fs.existsSync(BROWSER_DIST_DIR)) {
-      throw new Error('Browser bundles not found. Run "npm run build:browser" first.');
-    }
-  });
-
-  describe('CSS Inlined in Bundles', () => {
-    /**
-     * Requirement 8.2: Components render correctly in browser bundles
-     * 
-     * CSS should be bundled into JS, not loaded via external files.
-     * This test verifies that component CSS content is present in the bundle.
-     */
-    it('should contain ButtonCTA CSS styles in ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // ButtonCTA CSS should be inlined - check for distinctive CSS rules
-      expect(bundleContent).toContain('.button-cta');
-      expect(bundleContent).toContain('.button-cta--primary');
-      expect(bundleContent).toContain('.button-cta--secondary');
-      expect(bundleContent).toContain('.button-cta--tertiary');
-      expect(bundleContent).toContain('.button-cta--small');
-      expect(bundleContent).toContain('.button-cta--medium');
-      expect(bundleContent).toContain('.button-cta--large');
-    });
-
-    it('should contain ButtonCTA CSS styles in UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      
-      // ButtonCTA CSS should be inlined - check for distinctive CSS rules
-      expect(bundleContent).toContain('.button-cta');
-      expect(bundleContent).toContain('.button-cta--primary');
-      expect(bundleContent).toContain('.button-cta--secondary');
-      expect(bundleContent).toContain('.button-cta--tertiary');
-    });
-
-    it('should contain Icon CSS styles in ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Icon-Base CSS should be inlined - check for distinctive CSS rules
-      // Icon-Base component uses .icon-base class (Stemma System naming)
-      expect(bundleContent).toContain('.icon-base');
-      expect(bundleContent).toContain('.icon-base--size-100');
-    });
-
-    it('should contain Icon CSS styles in UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      
-      // Icon-Base CSS should be inlined
-      // Icon-Base component uses .icon-base class (Stemma System naming)
-      expect(bundleContent).toContain('.icon-base');
-      expect(bundleContent).toContain('.icon-base--size-100');
-    });
-  });
-
-  describe('No External CSS File Dependencies', () => {
-    /**
-     * Requirement 8.2: Components render correctly without external CSS files
-     * 
-     * Browser bundles should not reference external CSS files via <link> tags.
-     * All component CSS should be bundled into the JS.
-     */
-    it('should not contain link tag references for component CSS in ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Should not have link tags referencing component CSS files
-      // Note: tokens.css is still loaded via link tag (that's correct)
-      expect(bundleContent).not.toMatch(/<link[^>]*ButtonCTA\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*Icon\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*Container\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*TextInputField\.web\.css/);
-    });
-
-    it('should not contain link tag references for component CSS in UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      
-      // Should not have link tags referencing component CSS files
-      expect(bundleContent).not.toMatch(/<link[^>]*ButtonCTA\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*Icon\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*Container\.web\.css/);
-      expect(bundleContent).not.toMatch(/<link[^>]*TextInputField\.web\.css/);
-    });
-
-    it('should not have fetch or import calls for CSS files in ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Should not dynamically load CSS files
-      expect(bundleContent).not.toMatch(/fetch\([^)]*\.css/);
-      expect(bundleContent).not.toMatch(/import\([^)]*\.css/);
-    });
-
-    it('should not have fetch or import calls for CSS files in UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      
-      // Should not dynamically load CSS files
-      expect(bundleContent).not.toMatch(/fetch\([^)]*\.css/);
-      expect(bundleContent).not.toMatch(/import\([^)]*\.css/);
-    });
-  });
-
-  describe('Style Tag Usage Pattern', () => {
-    /**
-     * Requirement 8.2: Components use <style> tags in shadow DOM
-     * 
-     * Components should inject CSS via <style> tags, not <link> tags.
-     * This pattern is used by Lit, Shoelace, and other web component libraries.
-     */
-    it('should use style tag pattern for CSS injection in ESM bundle', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Should have <style> tag pattern for CSS injection
-      // The pattern is: <style>${cssContent}</style>
-      expect(bundleContent).toMatch(/<style>/);
-    });
-
-    it('should use style tag pattern for CSS injection in UMD bundle', () => {
-      const bundleContent = fs.readFileSync(UMD_BUNDLE_PATH, 'utf-8');
-      
-      // Should have <style> tag pattern for CSS injection
-      expect(bundleContent).toMatch(/<style>/);
-    });
-  });
-
-  describe('CSS Content Integrity', () => {
-    /**
-     * Verify that CSS content is properly escaped and complete in bundles.
-     */
-    it('should contain complete CSS rules with selectors and properties', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // CSS should have proper structure with selectors and properties
-      // Check for CSS custom property usage (design tokens)
-      expect(bundleContent).toMatch(/var\(--[a-zA-Z0-9-]+\)/);
-      
-      // Check for common CSS properties used in components
-      expect(bundleContent).toContain('background');
-      expect(bundleContent).toContain('color');
-      expect(bundleContent).toContain('padding');
-      expect(bundleContent).toContain('border');
-    });
-
-    it('should contain focus state styles for accessibility', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Components should have focus styles for accessibility
-      expect(bundleContent).toMatch(/:focus|:focus-visible/);
-    });
-
-    it('should contain hover state styles for interactivity', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-      
-      // Components should have hover styles
-      expect(bundleContent).toMatch(/:hover/);
-    });
-
-    it('should not contain disabled state styles (no-disabled-states philosophy)', () => {
-      const bundleContent = fs.readFileSync(ESM_BUNDLE_PATH, 'utf-8');
-
-      // DesignerPunk does not support disabled states: if an action is
-      // unavailable, the component should not be rendered. No component CSS
-      // should ship disabled selectors or modifier classes.
-      expect(bundleContent).not.toMatch(/:disabled|--disabled/);
-    });
-  });
-
-  describe('Source Component CSS Files', () => {
-    /**
-     * Verify that source CSS files exist and are properly structured
-     * for the CSS-as-string import pattern.
-     */
-    it('should have ButtonCTA CSS source file', () => {
-      const cssPath = path.join(process.cwd(), 'src/components/core/Button-CTA/platforms/web/ButtonCTA.web.css');
-      expect(fs.existsSync(cssPath)).toBe(true);
-      
-      const cssContent = fs.readFileSync(cssPath, 'utf-8');
-      expect(cssContent).toContain('.button-cta');
-    });
-
-    it('should have Icon CSS source file', () => {
-      const cssPath = path.join(process.cwd(), 'src/components/core/Icon-Base/platforms/web/styles.css');
-      expect(fs.existsSync(cssPath)).toBe(true);
-      
-      const cssContent = fs.readFileSync(cssPath, 'utf-8');
-      // Icon-Base component uses .icon-base class (Stemma System naming)
-      expect(cssContent).toContain('.icon-base');
-    });
-  });
-
-  describe('CSS TypeScript Declaration', () => {
-    /**
-     * Verify that TypeScript declaration for CSS imports exists.
-     * This enables type-safe CSS imports in TypeScript components.
-     */
-    it('should have CSS module declaration file', () => {
-      const declarationPath = path.join(process.cwd(), 'src/types/css.d.ts');
-      expect(fs.existsSync(declarationPath)).toBe(true);
-      
-      const content = fs.readFileSync(declarationPath, 'utf-8');
-      // Should declare CSS modules as string exports
-      expect(content).toMatch(/declare\s+module\s+['"].*\.css['"]/);
-    });
-  });
-});