ux4g-components-web 1.4.0 → 1.5.0

package/dist/__tests__/dom-generators.validation.property.test.js

@@ -0,0 +1,327 @@
+/**
+ * Property-based tests for DOM Generator validation helpers
+ * Property 6: Invalid props throw descriptive errors
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ *
+ * Validates: Requirements 3.7
+ */
+import * as fc from 'fast-check';
+import { DOMGeneratorValidationError } from '../dom-generators/types';
+import { validateRequired, validateType, validateEnum, validateRange, validateArray, } from '../dom-generators/validate';
+/**
+ * Property 6.1: validateRequired throws on null/undefined
+ *
+ * For any component name and prop name, calling validateRequired with null or
+ * undefined throws DOMGeneratorValidationError.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.1: validateRequired throws on null/undefined', () => {
+    it('throws DOMGeneratorValidationError for null values', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), (componentName, propName) => {
+            try {
+                validateRequired(componentName, propName, null);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+    it('throws DOMGeneratorValidationError for undefined values', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), (componentName, propName) => {
+            try {
+                validateRequired(componentName, propName, undefined);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.2: validateRequired does NOT throw on valid values
+ *
+ * For any non-null/undefined value, validateRequired does not throw.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.2: validateRequired does NOT throw on valid values', () => {
+    it('does not throw for non-null/undefined values', () => {
+        const nonNullArb = fc.oneof(fc.string(), fc.integer(), fc.boolean(), fc.constant(0), fc.constant(''), fc.constant(false), fc.constant([]), fc.constant({}));
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), nonNullArb, (componentName, propName, value) => {
+            try {
+                validateRequired(componentName, propName, value);
+                return true;
+            }
+            catch {
+                return false;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.3: validateType throws on wrong type
+ *
+ * For any value where typeof value !== expectedType, validateType throws
+ * DOMGeneratorValidationError with the prop name and value in the message.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.3: validateType throws on wrong type', () => {
+    it('throws DOMGeneratorValidationError when typeof value !== expectedType', () => {
+        // Generate value/expectedType pairs where typeof value !== expectedType
+        const mismatchArb = fc.oneof(
+        // string value but expecting number
+        fc.tuple(fc.string(), fc.constant('number')), 
+        // number value but expecting string
+        fc.tuple(fc.integer(), fc.constant('string')), 
+        // boolean value but expecting string
+        fc.tuple(fc.boolean(), fc.constant('string')), 
+        // number value but expecting boolean
+        fc.tuple(fc.integer(), fc.constant('boolean')), 
+        // string value but expecting boolean
+        fc.tuple(fc.string(), fc.constant('boolean')), 
+        // boolean value but expecting number
+        fc.tuple(fc.boolean(), fc.constant('number')));
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), mismatchArb, (componentName, propName, [value, expectedType]) => {
+            try {
+                validateType(componentName, propName, value, expectedType);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                if (!(e instanceof DOMGeneratorValidationError))
+                    return false;
+                // Error message must contain the prop name and value
+                if (!e.message.includes(propName))
+                    return false;
+                if (!e.message.includes(JSON.stringify(value)))
+                    return false;
+                return true;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.4: validateEnum throws on non-member values
+ *
+ * For any value not in the allowed set, validateEnum throws with the value
+ * in the error message.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.4: validateEnum throws on non-member values', () => {
+    it('throws DOMGeneratorValidationError for values not in allowedValues', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.array(fc.string({ minLength: 1 }), { minLength: 1, maxLength: 5 }), (componentName, propName, value, allowedValues) => {
+            // Ensure value is NOT in allowedValues
+            if (allowedValues.includes(value))
+                return true; // skip this case
+            try {
+                validateEnum(componentName, propName, value, allowedValues);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                if (!(e instanceof DOMGeneratorValidationError))
+                    return false;
+                // Error message must contain the value
+                if (!e.message.includes(JSON.stringify(value)))
+                    return false;
+                return true;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.5: validateRange throws on out-of-range numbers
+ *
+ * For numbers outside [min, max], validateRange throws.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.5: validateRange throws on out-of-range numbers', () => {
+    it('throws DOMGeneratorValidationError for numbers below min', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.integer({ min: 0, max: 100 }), fc.integer({ min: 101, max: 1000 }), (componentName, propName, min, max) => {
+            const value = min - 1; // Below min
+            try {
+                validateRange(componentName, propName, value, min, max);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+    it('throws DOMGeneratorValidationError for numbers above max', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.integer({ min: 0, max: 100 }), fc.integer({ min: 101, max: 1000 }), (componentName, propName, min, max) => {
+            const value = max + 1; // Above max
+            try {
+                validateRange(componentName, propName, value, min, max);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+    it('throws DOMGeneratorValidationError for non-number values', () => {
+        const nonNumberArb = fc.oneof(fc.string(), fc.boolean(), fc.constant(null), fc.constant(undefined));
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), nonNumberArb, (componentName, propName, value) => {
+            try {
+                validateRange(componentName, propName, value, 0, 100);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.6: validateArray throws on non-arrays
+ *
+ * For any non-array value, validateArray throws.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.6: validateArray throws on non-arrays', () => {
+    it('throws DOMGeneratorValidationError for non-array values', () => {
+        const nonArrayArb = fc.oneof(fc.string(), fc.integer(), fc.boolean(), fc.constant(null), fc.constant(undefined), fc.constant({}), fc.constant(42));
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), nonArrayArb, (componentName, propName, value) => {
+            try {
+                validateArray(componentName, propName, value);
+                return false; // Should have thrown
+            }
+            catch (e) {
+                return e instanceof DOMGeneratorValidationError;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.7: Error messages contain prop name and value
+ *
+ * All thrown errors have propName and propValue properties matching what was passed in.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.7: Error messages contain prop name and value', () => {
+    it('thrown errors have propName and propValue properties matching input', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), (componentName, propName) => {
+            try {
+                validateRequired(componentName, propName, null);
+                return false;
+            }
+            catch (e) {
+                if (!(e instanceof DOMGeneratorValidationError))
+                    return false;
+                if (e.propName !== propName)
+                    return false;
+                if (e.propValue !== null)
+                    return false;
+                if (e.componentName !== componentName)
+                    return false;
+                return true;
+            }
+        }), { numRuns: 100 });
+    });
+    it('validateType errors have correct propName and propValue', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.string(), (componentName, propName, value) => {
+            try {
+                validateType(componentName, propName, value, 'number');
+                return false;
+            }
+            catch (e) {
+                if (!(e instanceof DOMGeneratorValidationError))
+                    return false;
+                if (e.propName !== propName)
+                    return false;
+                if (e.propValue !== value)
+                    return false;
+                if (e.componentName !== componentName)
+                    return false;
+                return true;
+            }
+        }), { numRuns: 100 });
+    });
+    it('validateEnum errors have correct propName and propValue', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), fc.integer(), (componentName, propName, value) => {
+            try {
+                validateEnum(componentName, propName, value, ['a', 'b', 'c']);
+                return false;
+            }
+            catch (e) {
+                if (!(e instanceof DOMGeneratorValidationError))
+                    return false;
+                if (e.propName !== propName)
+                    return false;
+                if (e.propValue !== value)
+                    return false;
+                if (e.componentName !== componentName)
+                    return false;
+                return true;
+            }
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6.8: Error name is DOMGeneratorValidationError
+ *
+ * All thrown errors have name === 'DOMGeneratorValidationError'.
+ *
+ * Tag: Feature: ux4g-native-framework-experience, Property 6: Invalid props throw descriptive errors
+ * Validates: Requirements 3.7
+ */
+describe('Property 6.8: Error name is DOMGeneratorValidationError', () => {
+    it('all validation errors have name === "DOMGeneratorValidationError"', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }), fc.string({ minLength: 1 }), (componentName, propName) => {
+            const errors = [];
+            // validateRequired
+            try {
+                validateRequired(componentName, propName, null);
+            }
+            catch (e) {
+                errors.push(e);
+            }
+            // validateType
+            try {
+                validateType(componentName, propName, 'string', 'number');
+            }
+            catch (e) {
+                errors.push(e);
+            }
+            // validateEnum
+            try {
+                validateEnum(componentName, propName, 'invalid', ['a', 'b']);
+            }
+            catch (e) {
+                errors.push(e);
+            }
+            // validateRange
+            try {
+                validateRange(componentName, propName, -1, 0, 100);
+            }
+            catch (e) {
+                errors.push(e);
+            }
+            // validateArray
+            try {
+                validateArray(componentName, propName, 'not-an-array');
+            }
+            catch (e) {
+                errors.push(e);
+            }
+            // All errors must have the correct name
+            if (errors.length !== 5)
+                return false;
+            return errors.every((e) => e.name === 'DOMGeneratorValidationError');
+        }), { numRuns: 100 });
+    });
+});

package/dist/__tests__/megamenu.classbuilder.property.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/megamenu.classbuilder.property.test.js

@@ -0,0 +1,88 @@
+// src/__tests__/megamenu.classbuilder.property.test.ts
+// Property-based tests for Mega Menu class builder functions
+// Feature: ux4g-megamenu-component
+import * as fc from 'fast-check';
+import { buildMegaMenuClasses, buildMegaMenuWrapperClasses, } from '../../src/types';
+// Helper: split result into tokens
+const tokens = (s) => s.split(' ');
+// Arbitrary for extra class string: lowercase alphanumeric with hyphens, non-empty, no spaces
+const extraArb = fc.stringMatching(/^[a-z][a-z0-9-]*$/).filter(s => s.length > 0 && s.length <= 30);
+// ── Property 1: buildMegaMenuClasses produces correct class string for all input combinations ──
+// **Validates: Requirements 1.2, 1.3, 1.4, 1.5, 1.6**
+describe('Feature: ux4g-megamenu-component, Property 1: buildMegaMenuClasses produces correct class string for all input combinations', () => {
+    it('always starts with ux4g-mega-menu, contains --dropdown iff dropdown=true, contains --dropdown-right iff both dropdown AND dropdownRight are true, ends with extra if non-empty', () => {
+        fc.assert(fc.property(fc.boolean(), fc.boolean(), fc.oneof(fc.constant(undefined), extraArb), (dropdown, dropdownRight, extra) => {
+            const result = buildMegaMenuClasses(dropdown, dropdownRight, extra);
+            const toks = tokens(result);
+            // Always starts with 'ux4g-mega-menu' as the first class
+            expect(toks[0]).toBe('ux4g-mega-menu');
+            // Contains 'ux4g-mega-menu--dropdown' if and only if dropdown is true
+            if (dropdown) {
+                expect(toks).toContain('ux4g-mega-menu--dropdown');
+            }
+            else {
+                expect(toks).not.toContain('ux4g-mega-menu--dropdown');
+            }
+            // Contains 'ux4g-mega-menu--dropdown-right' if and only if both dropdown AND dropdownRight are true
+            if (dropdown && dropdownRight) {
+                expect(toks).toContain('ux4g-mega-menu--dropdown-right');
+            }
+            else {
+                expect(toks).not.toContain('ux4g-mega-menu--dropdown-right');
+            }
+            // Ends with extra string if provided and non-empty
+            if (extra !== undefined) {
+                expect(toks[toks.length - 1]).toBe(extra);
+            }
+            // No duplicate tokens
+            expect(new Set(toks).size).toBe(toks.length);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 2: buildMegaMenuWrapperClasses produces correct class string for all input combinations ──
+// **Validates: Requirements 1.7, 1.8, 1.9**
+describe('Feature: ux4g-megamenu-component, Property 2: buildMegaMenuWrapperClasses produces correct class string for all input combinations', () => {
+    it('always starts with ux4g-mega-menu-wrapper, contains --active iff active=true, ends with extra if non-empty', () => {
+        fc.assert(fc.property(fc.boolean(), fc.oneof(fc.constant(undefined), extraArb), (active, extra) => {
+            const result = buildMegaMenuWrapperClasses(active, extra);
+            const toks = tokens(result);
+            // Always starts with 'ux4g-mega-menu-wrapper' as the first class
+            expect(toks[0]).toBe('ux4g-mega-menu-wrapper');
+            // Contains 'ux4g-mega-menu-wrapper--active' if and only if active is true
+            if (active) {
+                expect(toks).toContain('ux4g-mega-menu-wrapper--active');
+            }
+            else {
+                expect(toks).not.toContain('ux4g-mega-menu-wrapper--active');
+            }
+            // Ends with extra string if provided and non-empty
+            if (extra !== undefined) {
+                expect(toks[toks.length - 1]).toBe(extra);
+            }
+            // No duplicate tokens
+            expect(new Set(toks).size).toBe(toks.length);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 3: Class builder functions are pure (deterministic) ──────────────
+// **Validates: Requirements 8.4**
+describe('Feature: ux4g-megamenu-component, Property 3: Class builder functions are pure (deterministic)', () => {
+    it('buildMegaMenuClasses returns identical output for identical inputs across multiple calls', () => {
+        fc.assert(fc.property(fc.boolean(), fc.boolean(), fc.oneof(fc.constant(undefined), extraArb), (dropdown, dropdownRight, extra) => {
+            const result1 = buildMegaMenuClasses(dropdown, dropdownRight, extra);
+            const result2 = buildMegaMenuClasses(dropdown, dropdownRight, extra);
+            const result3 = buildMegaMenuClasses(dropdown, dropdownRight, extra);
+            expect(result1).toBe(result2);
+            expect(result2).toBe(result3);
+        }), { numRuns: 100 });
+    });
+    it('buildMegaMenuWrapperClasses returns identical output for identical inputs across multiple calls', () => {
+        fc.assert(fc.property(fc.boolean(), fc.oneof(fc.constant(undefined), extraArb), (active, extra) => {
+            const result1 = buildMegaMenuWrapperClasses(active, extra);
+            const result2 = buildMegaMenuWrapperClasses(active, extra);
+            const result3 = buildMegaMenuWrapperClasses(active, extra);
+            expect(result1).toBe(result2);
+            expect(result2).toBe(result3);
+        }), { numRuns: 100 });
+    });
+});

package/dist/__tests__/smoke.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/smoke.test.js

@@ -0,0 +1,65 @@
+import * as fs from 'fs';
+import * as path from 'path';
+const PKG_ROOT = path.resolve(__dirname, '../..');
+describe('ux4g-components-web smoke tests', () => {
+    let pkg;
+    beforeAll(() => {
+        const pkgPath = path.join(PKG_ROOT, 'package.json');
+        pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    });
+    // --- package.json identity ---
+    it('package name is "ux4g-components-web"', () => {
+        expect(pkg.name).toBe('ux4g-components-web');
+    });
+    // --- exports shape ---
+    it('exports["./styles.css"] exists and resolves to ./styles/ux4g.css', () => {
+        const exports = pkg.exports;
+        expect(exports).toBeDefined();
+        const stylesCss = exports['./styles.css'];
+        expect(stylesCss).toBeDefined();
+        expect(stylesCss['default']).toBe('./styles/ux4g.css');
+    });
+    it('exports["./types"] exists with types, import, require, default fields', () => {
+        const exports = pkg.exports;
+        const typesEntry = exports['./types'];
+        expect(typesEntry).toBeDefined();
+        expect(typesEntry['types']).toBeDefined();
+        expect(typesEntry['import']).toBeDefined();
+        expect(typesEntry['require']).toBeDefined();
+        expect(typesEntry['default']).toBeDefined();
+    });
+    // --- dist artifact existence ---
+    it('styles/ux4g.css exists and has non-zero size', () => {
+        const cssPath = path.join(PKG_ROOT, 'styles', 'ux4g.css');
+        expect(fs.existsSync(cssPath)).toBe(true);
+        expect(fs.statSync(cssPath).size).toBeGreaterThan(0);
+    });
+    it('dist/types/index.mjs exists', () => {
+        expect(fs.existsSync(path.join(PKG_ROOT, 'dist', 'types', 'index.mjs'))).toBe(true);
+    });
+    it('dist/types/index.cjs exists', () => {
+        expect(fs.existsSync(path.join(PKG_ROOT, 'dist', 'types', 'index.cjs'))).toBe(true);
+    });
+    it('dist/types/index.d.ts exists', () => {
+        expect(fs.existsSync(path.join(PKG_ROOT, 'dist', 'types', 'index.d.ts'))).toBe(true);
+    });
+    // --- no cross-framework contamination ---
+    it('has no react, react-dom, or @angular/* in any dependency field', () => {
+        const depFields = [
+            'dependencies',
+            'devDependencies',
+            'peerDependencies',
+            'optionalDependencies',
+        ];
+        const forbidden = ['react', 'react-dom'];
+        for (const field of depFields) {
+            const deps = (pkg[field] ?? {});
+            for (const forbidden_pkg of forbidden) {
+                expect(Object.keys(deps)).not.toContain(forbidden_pkg);
+            }
+            // No @angular/* keys
+            const angularKeys = Object.keys(deps).filter((k) => k.startsWith('@angular/'));
+            expect(angularKeys).toHaveLength(0);
+        }
+    });
+});

package/dist/__tests__/types.phase10.property.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/types.phase10.property.test.js

@@ -0,0 +1,166 @@
+// src/__tests__/types.phase10.property.test.ts
+// Property-based tests for all Phase 10 build functions
+// Feature: ux4g-phase10-components
+import * as fc from 'fast-check';
+import { buildSlotGridClasses, buildFooterClasses, buildResultListRowClasses, } from '../../src/types';
+// Helper: split result into tokens
+const tokens = (s) => s.split(' ');
+const hasDuplicates = (arr) => new Set(arr).size !== arr.length;
+// ── Property 1: SlotGrid ──────────────────────────────────────────────────────
+// **Validates: Requirements 1.2, 1.3, 1.7, 1.11, 6.7**
+describe('Property 1: SlotGrid class is exactly the correct container class for each variant', () => {
+    it('variant determines container class exactly, mutually exclusive, no duplicates, extra appended, idempotent', () => {
+        fc.assert(fc.property(fc.constantFrom('weekly', 'compact'), fc.oneof(fc.constant(undefined), fc.stringMatching(/^[a-z][a-z0-9-]*$/).filter(s => s.length > 0 && s.length <= 20)), (variant, extra) => {
+            const result = buildSlotGridClasses(variant, extra);
+            const toks = tokens(result);
+            // variant='weekly' → contains weekly container, NOT compact
+            if (variant === 'weekly') {
+                expect(toks).toContain('ux4g-time-slot-weekly-container');
+                expect(toks).not.toContain('ux4g-time-slot-compact-container');
+            }
+            // variant='compact' → contains compact container, NOT weekly
+            if (variant === 'compact') {
+                expect(toks).toContain('ux4g-time-slot-compact-container');
+                expect(toks).not.toContain('ux4g-time-slot-weekly-container');
+            }
+            // result never contains both simultaneously
+            const hasWeekly = toks.includes('ux4g-time-slot-weekly-container');
+            const hasCompact = toks.includes('ux4g-time-slot-compact-container');
+            expect(hasWeekly && hasCompact).toBe(false);
+            // when extra provided, result contains extra token
+            if (extra !== undefined) {
+                expect(toks).toContain(extra);
+            }
+            // token array has no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+            // idempotent: calling twice with same inputs returns same string
+            const result2 = buildSlotGridClasses(variant, extra);
+            expect(result2).toBe(result);
+        }), { numRuns: 10 });
+    });
+});
+// ── Property 2: Footer ────────────────────────────────────────────────────────
+// **Validates: Requirements 2.2, 2.3, 2.4, 2.9, 2.13, 6.8**
+describe('Property 2: Footer class is exactly the correct theme class for each theme value', () => {
+    it('theme determines footer class exactly, empty for default, mutually exclusive, no duplicates, extra appended, idempotent', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'primary', 'dark'), fc.oneof(fc.constant(undefined), fc.stringMatching(/^[a-z][a-z0-9-]*$/).filter(s => s.length > 0 && s.length <= 20)), (theme, extra) => {
+            const result = buildFooterClasses(theme, extra);
+            // filter out empty string tokens before checking duplicates
+            const toks = result === '' ? [] : result.split(' ');
+            const nonEmptyToks = toks.filter(t => t !== '');
+            // theme='primary' → result contains 'ux4g-footer-primary'
+            if (theme === 'primary') {
+                expect(result).toContain('ux4g-footer-primary');
+            }
+            // theme='dark' → result contains 'ux4g-footer-dark'
+            if (theme === 'dark') {
+                expect(result).toContain('ux4g-footer-dark');
+            }
+            // theme='default' with no extra → result is exactly ''
+            if (theme === 'default' && extra === undefined) {
+                expect(result).toBe('');
+            }
+            // theme='default' with extra → result is exactly the extra string
+            if (theme === 'default' && extra !== undefined) {
+                expect(result).toBe(extra);
+            }
+            // result never contains both 'ux4g-footer-primary' and 'ux4g-footer-dark' simultaneously
+            const hasPrimary = result.includes('ux4g-footer-primary');
+            const hasDark = result.includes('ux4g-footer-dark');
+            expect(hasPrimary && hasDark).toBe(false);
+            // when extra provided, result contains extra token
+            if (extra !== undefined) {
+                expect(nonEmptyToks).toContain(extra);
+            }
+            // token array has no duplicates (filter out empty string tokens before checking)
+            expect(hasDuplicates(nonEmptyToks)).toBe(false);
+            // idempotent: calling twice with same inputs returns same string
+            const result2 = buildFooterClasses(theme, extra);
+            expect(result2).toBe(result);
+        }), { numRuns: 10 });
+    });
+});
+// ── Property 3: ResultListRow ─────────────────────────────────────────────────
+// **Validates: Requirements 3.2, 3.3, 3.4, 3.5, 3.6, 3.7, 3.11, 3.15, 6.9**
+describe('Property 3: ResultListRow class always contains base token and correctly toggles variation modifier', () => {
+    it('base token always present, variation modifier toggles correctly, mutually exclusive, no duplicates, extra appended, idempotent', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'v1', 'v2', 'v3', 'v4', 'v5'), fc.oneof(fc.constant(undefined), fc.stringMatching(/^[a-z][a-z0-9-]*$/).filter(s => s.length > 0 && s.length <= 20)), (variation, extra) => {
+            const result = buildResultListRowClasses(variation, extra);
+            const toks = tokens(result);
+            // result always contains 'ux4g-result-list' (base token)
+            expect(toks).toContain('ux4g-result-list');
+            // when variation='v1'–'v5' result contains 'ux4g-result-list-v{N}'
+            if (variation !== 'default') {
+                expect(toks).toContain(`ux4g-result-list-${variation}`);
+            }
+            // when variation='default' result contains no variation modifier class (none of v1-v5)
+            if (variation === 'default') {
+                expect(toks).not.toContain('ux4g-result-list-v1');
+                expect(toks).not.toContain('ux4g-result-list-v2');
+                expect(toks).not.toContain('ux4g-result-list-v3');
+                expect(toks).not.toContain('ux4g-result-list-v4');
+                expect(toks).not.toContain('ux4g-result-list-v5');
+            }
+            // result never contains more than one variation modifier class simultaneously
+            const variationModifiers = ['v1', 'v2', 'v3', 'v4', 'v5']
+                .map(v => `ux4g-result-list-${v}`)
+                .filter(cls => toks.includes(cls));
+            expect(variationModifiers.length).toBeLessThanOrEqual(1);
+            // when extra provided, result contains extra token
+            if (extra !== undefined) {
+                expect(toks).toContain(extra);
+            }
+            // token array has no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+            // idempotent: calling twice with same inputs returns same string
+            const result2 = buildResultListRowClasses(variation, extra);
+            expect(result2).toBe(result);
+        }), { numRuns: 10 });
+    });
+});
+// ── Property 4: Extra param across all Phase 10 build functions ───────────────
+// **Validates: Requirements 1.4, 2.5, 3.8**
+describe('Property 4: Extra param is always appended as a space-separated token and never duplicates existing tokens for all Phase 10 build functions', () => {
+    // Non-empty extra string with no spaces
+    const extraArb = fc.string({ minLength: 1 }).filter(s => !s.includes(' '));
+    it('buildSlotGridClasses: extra token is present exactly once and no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('weekly', 'compact'), extraArb, (variant, extra) => {
+            const result = buildSlotGridClasses(variant, extra);
+            const toks = result.split(' ');
+            // extra token is present as a space-separated token
+            expect(toks).toContain(extra);
+            // extra token appears exactly once
+            const count = toks.filter(t => t === extra).length;
+            expect(count).toBe(1);
+            // token array has no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 10 });
+    });
+    it('buildFooterClasses: extra token is present exactly once and no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'primary', 'dark'), extraArb, (theme, extra) => {
+            const result = buildFooterClasses(theme, extra);
+            // result is never empty when extra is provided
+            const toks = result.split(' ').filter(t => t !== '');
+            // extra token is present as a space-separated token
+            expect(toks).toContain(extra);
+            // extra token appears exactly once
+            const count = toks.filter(t => t === extra).length;
+            expect(count).toBe(1);
+            // token array has no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 10 });
+    });
+    it('buildResultListRowClasses: extra token is present exactly once and no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'v1', 'v2', 'v3', 'v4', 'v5'), extraArb, (variation, extra) => {
+            const result = buildResultListRowClasses(variation, extra);
+            const toks = result.split(' ');
+            // extra token is present as a space-separated token
+            expect(toks).toContain(extra);
+            // extra token appears exactly once
+            const count = toks.filter(t => t === extra).length;
+            expect(count).toBe(1);
+            // token array has no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 10 });
+    });
+});

package/dist/__tests__/types.phase10.test.d.ts

@@ -0,0 +1 @@
+export {};