ux4g-components-web 1.4.0 → 1.5.0

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

@@ -0,0 +1,189 @@
+/**
+ * Property-based tests for Phase 6 build functions
+ *
+ * Property 1: List class string contains all required tokens and has no duplicates
+ * Property 2: Dropdown class string contains all required tokens and correctly toggles is-open
+ * Property 3: Combobox class string contains all required tokens and correctly toggles is-open
+ * Property 4: Modal backdrop class string contains required tokens and correctly toggles blur and is-open
+ * Property 5: Modal box class string contains required tokens and correctly toggles center-content
+ * Property 6: Inline alert class string contains required tokens and applies mutually exclusive layout modifiers
+ * Property 7: Context-alert class string uses ux4g-context-alert as base and does not include standalone ux4g-alert
+ * Property 8: Alert container class string contains required tokens for all positions
+ * Property 9: Search container class string contains required tokens for all sizes, and extra param is always appended
+ */
+import * as fc from 'fast-check';
+import { buildListClasses, buildDropdownClasses, buildComboboxClasses, buildModalBackdropClasses, buildModalBoxClasses, buildAlertClasses, buildContextAlertClasses, buildAlertContainerClasses, buildSearchContainerClasses, } from '../../src/types';
+/**
+ * Property 1: List class string contains all required tokens and has no duplicates
+ * Tag: Feature: ux4g-phase6-components, Property 1
+ * Validates: Requirements 12.1, 12.2
+ */
+describe('Property 1: List class string contains all required tokens and has no duplicates', () => {
+    it('Feature: ux4g-phase6-components, Property 1', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'error', 'success', 'warning'), fc.constantFrom('s', 'm', 'l', 'xl'), (variant, size) => {
+            const result = buildListClasses(variant, size);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-list');
+            const hasVariant = tokens.includes(`ux4g-list-${variant}`);
+            const hasSize = tokens.includes(`ux4g-list-${size}`);
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasVariant && hasSize && noDuplicates;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 2: Dropdown class string contains all required tokens and correctly toggles is-open
+ * Tag: Feature: ux4g-phase6-components, Property 2
+ * Validates: Requirements 12.4, 12.5
+ */
+describe('Property 2: Dropdown class string contains all required tokens and correctly toggles is-open', () => {
+    it('Feature: ux4g-phase6-components, Property 2', () => {
+        fc.assert(fc.property(fc.constantFrom('selection', 'button', 'overflow'), fc.constantFrom('single', 'multi'), fc.constantFrom('sm', 'md', 'lg'), fc.constantFrom('default', 'error', 'success', 'warning'), fc.boolean(), (type, mode, size, state, open) => {
+            const result = buildDropdownClasses(type, mode, size, state, open);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-dropdown');
+            const hasType = tokens.includes(`ux4g-dropdown-${type}`);
+            const hasMode = tokens.includes(`ux4g-dropdown-${mode}`);
+            const hasSize = tokens.includes(`ux4g-dropdown-${size}`);
+            const hasState = tokens.includes(`ux4g-dropdown-${state}`);
+            const openCorrect = open ? tokens.includes('is-open') : !tokens.includes('is-open');
+            return hasBase && hasType && hasMode && hasSize && hasState && openCorrect;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 3: Combobox class string contains all required tokens and correctly toggles is-open
+ * Tag: Feature: ux4g-phase6-components, Property 3
+ * Validates: Requirements 12.6, 12.7
+ */
+describe('Property 3: Combobox class string contains all required tokens and correctly toggles is-open', () => {
+    it('Feature: ux4g-phase6-components, Property 3', () => {
+        fc.assert(fc.property(fc.constantFrom('single', 'multi'), fc.constantFrom('sm', 'md', 'lg'), fc.constantFrom('default', 'error', 'success', 'warning'), fc.boolean(), (type, size, state, open) => {
+            const result = buildComboboxClasses(type, size, state, open);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-combobox');
+            const hasType = tokens.includes(`ux4g-combobox-${type}`);
+            const hasSize = tokens.includes(`ux4g-combobox-${size}`);
+            const hasState = tokens.includes(`ux4g-combobox-${state}`);
+            const openCorrect = open ? tokens.includes('is-open') : !tokens.includes('is-open');
+            return hasBase && hasType && hasSize && hasState && openCorrect;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 4: Modal backdrop class string contains required tokens and correctly toggles blur and is-open
+ * Tag: Feature: ux4g-phase6-components, Property 4
+ * Validates: Requirements 12.8, 12.9, 12.10
+ */
+describe('Property 4: Modal backdrop class string contains required tokens and correctly toggles blur and is-open', () => {
+    it('Feature: ux4g-phase6-components, Property 4', () => {
+        fc.assert(fc.property(fc.constantFrom('25', '50', '75'), fc.boolean(), fc.boolean(), (opacity, blur, open) => {
+            const result = buildModalBackdropClasses(opacity, blur, open);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-modal-backdrop');
+            const hasOpacity = tokens.includes(`ux4g-modal-backdrop-${opacity}`);
+            const blurCorrect = blur ? tokens.includes('ux4g-modal-backdrop-blur') : !tokens.includes('ux4g-modal-backdrop-blur');
+            const openCorrect = open ? tokens.includes('is-open') : !tokens.includes('is-open');
+            return hasBase && hasOpacity && blurCorrect && openCorrect;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 5: Modal box class string contains required tokens and correctly toggles center-content
+ * Tag: Feature: ux4g-phase6-components, Property 5
+ * Validates: Requirements 12.11, 12.12
+ */
+describe('Property 5: Modal box class string contains required tokens and correctly toggles center-content', () => {
+    it('Feature: ux4g-phase6-components, Property 5', () => {
+        fc.assert(fc.property(fc.constantFrom('s', 'm', 'l'), fc.boolean(), (size, centerContent) => {
+            const result = buildModalBoxClasses(size, centerContent);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-modal-box');
+            const hasSize = tokens.includes(`ux4g-modal-${size}`);
+            const centerCorrect = centerContent
+                ? tokens.includes('ux4g-modal-center-content')
+                : !tokens.includes('ux4g-modal-center-content');
+            return hasBase && hasSize && centerCorrect;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 6: Inline alert class string contains required tokens and applies mutually exclusive layout modifiers
+ * Tag: Feature: ux4g-phase6-components, Property 6
+ * Validates: Requirements 12.13, 12.14
+ */
+describe('Property 6: Inline alert class string contains required tokens and applies mutually exclusive layout modifiers', () => {
+    it('Feature: ux4g-phase6-components, Property 6', () => {
+        fc.assert(fc.property(fc.constantFrom('info', 'success', 'warning', 'error'), fc.constantFrom('fluid', 'center', 'wide'), (variant, layout) => {
+            const result = buildAlertClasses(variant, layout);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-alert');
+            const hasVariant = tokens.includes(`ux4g-alert-${variant}`);
+            let layoutCorrect;
+            if (layout === 'center') {
+                layoutCorrect = tokens.includes('ux4g-alert-center') && !tokens.includes('ux4g-alert-wide');
+            }
+            else if (layout === 'wide') {
+                layoutCorrect = tokens.includes('ux4g-alert-wide') && !tokens.includes('ux4g-alert-center');
+            }
+            else {
+                // fluid — neither modifier present
+                layoutCorrect = !tokens.includes('ux4g-alert-center') && !tokens.includes('ux4g-alert-wide');
+            }
+            return hasBase && hasVariant && layoutCorrect;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 7: Context-alert class string uses ux4g-context-alert as base and does not include standalone ux4g-alert
+ * Tag: Feature: ux4g-phase6-components, Property 7
+ * Validates: Requirements 12.15
+ */
+describe('Property 7: Context-alert class string uses ux4g-context-alert as base and does not include standalone ux4g-alert', () => {
+    it('Feature: ux4g-phase6-components, Property 7', () => {
+        fc.assert(fc.property(fc.constantFrom('info', 'success', 'warning', 'error'), (variant) => {
+            const result = buildContextAlertClasses(variant);
+            const tokens = result.split(' ');
+            const hasContextBase = tokens.includes('ux4g-context-alert');
+            const hasVariant = tokens.includes(`ux4g-alert-${variant}`);
+            // 'ux4g-alert' must NOT appear as a standalone token (exact match)
+            const noStandaloneAlert = !tokens.includes('ux4g-alert');
+            return hasContextBase && hasVariant && noStandaloneAlert;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 8: Alert container class string contains required tokens for all positions
+ * Tag: Feature: ux4g-phase6-components, Property 8
+ * Validates: Requirements 12.16
+ */
+describe('Property 8: Alert container class string contains required tokens for all positions', () => {
+    it('Feature: ux4g-phase6-components, Property 8', () => {
+        fc.assert(fc.property(fc.constantFrom('top-left', 'top-right', 'bottom-left', 'bottom-right'), (position) => {
+            const result = buildAlertContainerClasses(position);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-alert-container');
+            const hasPosition = tokens.includes(`ux4g-alert-${position}`);
+            return hasBase && hasPosition;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 9: Search container class string contains required tokens for all sizes, and extra param is always appended
+ * Tag: Feature: ux4g-phase6-components, Property 9
+ * Validates: Requirements 12.17, 12.18
+ */
+describe('Property 9: Search container class string contains required tokens for all sizes, and extra param is always appended', () => {
+    it('Feature: ux4g-phase6-components, Property 9', () => {
+        fc.assert(fc.property(fc.constantFrom('s', 'm', 'lg'), fc.option(fc.stringMatching(/^[a-z][a-z0-9-]*$/), { nil: undefined }), (size, extra) => {
+            const result = buildSearchContainerClasses(size, extra);
+            const tokens = result.split(' ');
+            const hasBase = tokens.includes('ux4g-search-container');
+            const hasSize = tokens.includes(`ux4g-search-${size}`);
+            const extraCorrect = extra !== undefined
+                ? tokens.includes(extra) && tokens.length === new Set(tokens).size
+                : true;
+            return hasBase && hasSize && extraCorrect;
+        }), { numRuns: 100 });
+    });
+});

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

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

package/dist/__tests__/types.phase6.test.js

@@ -0,0 +1,121 @@
+import { buildListClasses, buildDropdownClasses, buildComboboxClasses, buildModalBackdropClasses, buildModalBoxClasses, buildAlertClasses, buildContextAlertClasses, buildAlertContainerClasses, buildSearchContainerClasses, } from '../../src/types';
+// ── buildListClasses ──────────────────────────────────────────────────────────
+// Requirements: 4.3
+describe('buildListClasses', () => {
+    it("variant='default' size='m' → base + variant + size", () => {
+        expect(buildListClasses('default', 'm')).toBe('ux4g-list ux4g-list-default ux4g-list-m');
+    });
+    it("variant='error' size='s' → base + variant + size", () => {
+        expect(buildListClasses('error', 's')).toBe('ux4g-list ux4g-list-error ux4g-list-s');
+    });
+    it("variant='success' size='xl' with extra → appends extra class", () => {
+        expect(buildListClasses('success', 'xl', 'my-list')).toBe('ux4g-list ux4g-list-success ux4g-list-xl my-list');
+    });
+});
+// ── buildDropdownClasses ──────────────────────────────────────────────────────
+// Requirements: 4.8
+describe('buildDropdownClasses', () => {
+    it("type='selection' mode='single' size='md' state='default' → all five tokens", () => {
+        expect(buildDropdownClasses('selection', 'single', 'md', 'default')).toBe('ux4g-dropdown ux4g-dropdown-selection ux4g-dropdown-single ux4g-dropdown-md ux4g-dropdown-default');
+    });
+    it("type='button' mode='multi' size='lg' state='error' open=true → includes is-open", () => {
+        expect(buildDropdownClasses('button', 'multi', 'lg', 'error', true)).toBe('ux4g-dropdown ux4g-dropdown-button ux4g-dropdown-multi ux4g-dropdown-lg ux4g-dropdown-error is-open');
+    });
+    it("type='overflow' mode='single' size='sm' state='default' open=false → no is-open", () => {
+        const result = buildDropdownClasses('overflow', 'single', 'sm', 'default', false);
+        expect(result).not.toContain('is-open');
+        expect(result).toBe('ux4g-dropdown ux4g-dropdown-overflow ux4g-dropdown-single ux4g-dropdown-sm ux4g-dropdown-default');
+    });
+});
+// ── buildComboboxClasses ──────────────────────────────────────────────────────
+// Requirements: 4.12
+describe('buildComboboxClasses', () => {
+    it("type='single' size='md' state='default' → all four tokens", () => {
+        expect(buildComboboxClasses('single', 'md', 'default')).toBe('ux4g-combobox ux4g-combobox-single ux4g-combobox-md ux4g-combobox-default');
+    });
+    it("type='multi' size='lg' state='error' open=true → includes is-open", () => {
+        expect(buildComboboxClasses('multi', 'lg', 'error', true)).toBe('ux4g-combobox ux4g-combobox-multi ux4g-combobox-lg ux4g-combobox-error is-open');
+    });
+});
+// ── buildModalBackdropClasses ─────────────────────────────────────────────────
+// Requirements: 4.15
+describe('buildModalBackdropClasses', () => {
+    it("opacity='50' → base + opacity only", () => {
+        expect(buildModalBackdropClasses('50')).toBe('ux4g-modal-backdrop ux4g-modal-backdrop-50');
+    });
+    it("opacity='75' blur=true open=true → includes blur and is-open", () => {
+        expect(buildModalBackdropClasses('75', true, true)).toBe('ux4g-modal-backdrop ux4g-modal-backdrop-75 ux4g-modal-backdrop-blur is-open');
+    });
+    it("opacity='25' blur=false open=false → no blur, no is-open", () => {
+        const result = buildModalBackdropClasses('25', false, false);
+        expect(result).not.toContain('ux4g-modal-backdrop-blur');
+        expect(result).not.toContain('is-open');
+        expect(result).toBe('ux4g-modal-backdrop ux4g-modal-backdrop-25');
+    });
+});
+// ── buildModalBoxClasses ──────────────────────────────────────────────────────
+// Requirements: 4.16
+describe('buildModalBoxClasses', () => {
+    it("size='m' → base + size", () => {
+        expect(buildModalBoxClasses('m')).toBe('ux4g-modal-box ux4g-modal-m');
+    });
+    it("size='l' centerContent=true → includes center-content", () => {
+        expect(buildModalBoxClasses('l', true)).toBe('ux4g-modal-box ux4g-modal-l ux4g-modal-center-content');
+    });
+    it("size='s' centerContent=false → no center-content", () => {
+        const result = buildModalBoxClasses('s', false);
+        expect(result).not.toContain('ux4g-modal-center-content');
+        expect(result).toBe('ux4g-modal-box ux4g-modal-s');
+    });
+});
+// ── buildAlertClasses ─────────────────────────────────────────────────────────
+// Requirements: 4.19
+describe('buildAlertClasses', () => {
+    it("variant='info' → base + variant only", () => {
+        expect(buildAlertClasses('info')).toBe('ux4g-alert ux4g-alert-info');
+    });
+    it("variant='warning' layout='center' → includes center modifier", () => {
+        expect(buildAlertClasses('warning', 'center')).toBe('ux4g-alert ux4g-alert-warning ux4g-alert-center');
+    });
+    it("variant='error' layout='wide' → includes wide modifier", () => {
+        expect(buildAlertClasses('error', 'wide')).toBe('ux4g-alert ux4g-alert-error ux4g-alert-wide');
+    });
+    it("variant='success' layout='fluid' → no layout modifier", () => {
+        const result = buildAlertClasses('success', 'fluid');
+        expect(result).not.toContain('ux4g-alert-fluid');
+        expect(result).toBe('ux4g-alert ux4g-alert-success');
+    });
+});
+// ── buildContextAlertClasses ──────────────────────────────────────────────────
+// Requirements: 4.20
+describe('buildContextAlertClasses', () => {
+    it("variant='info' → ux4g-context-alert + variant modifier", () => {
+        expect(buildContextAlertClasses('info')).toBe('ux4g-context-alert ux4g-alert-info');
+    });
+    it("variant='error' → ux4g-context-alert + variant modifier", () => {
+        expect(buildContextAlertClasses('error')).toBe('ux4g-context-alert ux4g-alert-error');
+    });
+});
+// ── buildAlertContainerClasses ────────────────────────────────────────────────
+// Requirements: 4.22
+describe('buildAlertContainerClasses', () => {
+    it("position='top-right' → base + position", () => {
+        expect(buildAlertContainerClasses('top-right')).toBe('ux4g-alert-container ux4g-alert-top-right');
+    });
+    it("position='bottom-left' → base + position", () => {
+        expect(buildAlertContainerClasses('bottom-left')).toBe('ux4g-alert-container ux4g-alert-bottom-left');
+    });
+});
+// ── buildSearchContainerClasses ───────────────────────────────────────────────
+// Requirements: 4.24
+describe('buildSearchContainerClasses', () => {
+    it("size='m' → base + size", () => {
+        expect(buildSearchContainerClasses('m')).toBe('ux4g-search-container ux4g-search-m');
+    });
+    it("size='s' → base + size", () => {
+        expect(buildSearchContainerClasses('s')).toBe('ux4g-search-container ux4g-search-s');
+    });
+    it("size='lg' → base + size", () => {
+        expect(buildSearchContainerClasses('lg')).toBe('ux4g-search-container ux4g-search-lg');
+    });
+});

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

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

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

@@ -0,0 +1,217 @@
+/**
+ * Property-based tests for Phase 7 build functions
+ *
+ * Property 1: Pagination class correctly toggles dotted variant and style modifiers
+ * Property 2: Table class contains all required tokens and correctly toggles divider, zebra, and boolean flags
+ * Property 3: Popover class contains required tokens and correctly toggles show
+ * Property 4: Tooltip class contains all required tokens for all placement and size combinations
+ * Property 5: Tab class contains all required tokens and correctly toggles vertical
+ * Property 6: Icon button class contains all required tokens and correctly toggles pill
+ * Property 7: Extra param is always appended and never duplicated across all build functions
+ */
+import * as fc from 'fast-check';
+import { buildPaginationClasses, buildTableClasses, buildPopoverClasses, buildTooltipClasses, buildTabClasses, buildIconButtonClasses, } from '../../src/types';
+/**
+ * Property 1: Pagination class string contains required tokens and correctly applies dotted variant and style modifiers
+ * Tag: Feature: ux4g-phase7-components, Property 1
+ * Validates: Requirements 12.1, 12.2, 12.3, 12.4, 12.5
+ */
+describe('Property 1: Pagination class correctly toggles dotted variant and style modifiers', () => {
+    it('Feature: ux4g-phase7-components, Property 1', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'dotted'), fc.constantFrom('default', 'solid', 'translucent'), (variant, paginationStyle) => {
+            const result = buildPaginationClasses(variant, paginationStyle);
+            const tokens = result.split(' ');
+            // Always contains base class
+            const hasBase = tokens.includes('ux4g-pagination');
+            // Dotted variant toggles correctly
+            const dottedCorrect = variant === 'dotted'
+                ? tokens.includes('ux4g-pagination-dotted')
+                : !tokens.includes('ux4g-pagination-dotted');
+            // Style modifiers only apply when dotted; mutually exclusive
+            let styleCorrect;
+            if (variant === 'dotted' && paginationStyle === 'solid') {
+                styleCorrect = tokens.includes('ux4g-pagination-solid') && !tokens.includes('ux4g-pagination-translucent');
+            }
+            else if (variant === 'dotted' && paginationStyle === 'translucent') {
+                styleCorrect = tokens.includes('ux4g-pagination-translucent') && !tokens.includes('ux4g-pagination-solid');
+            }
+            else {
+                // variant='default' (any style) or variant='dotted' paginationStyle='default' — no style modifier
+                styleCorrect = !tokens.includes('ux4g-pagination-solid') && !tokens.includes('ux4g-pagination-translucent');
+            }
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && dottedCorrect && styleCorrect && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 2: Table class string contains all required tokens and correctly toggles divider, zebra, and boolean modifier flags
+ * Tag: Feature: ux4g-phase7-components, Property 2
+ * Validates: Requirements 12.6, 12.7, 12.8, 12.9, 12.10, 12.11, 12.12, 12.13
+ */
+describe('Property 2: Table class contains all required tokens and correctly toggles divider, zebra, and boolean flags', () => {
+    it('Feature: ux4g-phase7-components, Property 2', () => {
+        fc.assert(fc.property(fc.constantFrom('s', 'm', 'lg'), fc.constantFrom('row', 'column', 'none'), fc.constantFrom('none', 'rows', 'cols'), fc.boolean(), fc.boolean(), fc.boolean(), fc.boolean(), (size, divider, zebra, interactive, sortable, resizable, headerBrand) => {
+            const result = buildTableClasses(size, divider, zebra, interactive, sortable, resizable, headerBrand);
+            const tokens = result.split(' ');
+            // Always contains base and size
+            const hasBase = tokens.includes('ux4g-table');
+            const hasSize = tokens.includes(`ux4g-table-${size}`);
+            // Divider modifiers are mutually exclusive
+            let dividerCorrect;
+            if (divider === 'column') {
+                dividerCorrect = tokens.includes('ux4g-table-column-dividers') && !tokens.includes('ux4g-table-no-row-dividers');
+            }
+            else if (divider === 'none') {
+                dividerCorrect = tokens.includes('ux4g-table-no-row-dividers') && !tokens.includes('ux4g-table-column-dividers');
+            }
+            else {
+                // divider === 'row' — no modifier
+                dividerCorrect = !tokens.includes('ux4g-table-column-dividers') && !tokens.includes('ux4g-table-no-row-dividers');
+            }
+            // Zebra modifiers are mutually exclusive
+            let zebraCorrect;
+            if (zebra === 'rows') {
+                zebraCorrect = tokens.includes('ux4g-table-zebra-rows') && !tokens.includes('ux4g-table-zebra-cols');
+            }
+            else if (zebra === 'cols') {
+                zebraCorrect = tokens.includes('ux4g-table-zebra-cols') && !tokens.includes('ux4g-table-zebra-rows');
+            }
+            else {
+                // zebra === 'none' — no modifier
+                zebraCorrect = !tokens.includes('ux4g-table-zebra-rows') && !tokens.includes('ux4g-table-zebra-cols');
+            }
+            // Boolean flags toggle independently
+            const interactiveCorrect = interactive ? tokens.includes('ux4g-table-interactive') : !tokens.includes('ux4g-table-interactive');
+            const sortableCorrect = sortable ? tokens.includes('ux4g-table-sortable') : !tokens.includes('ux4g-table-sortable');
+            const resizableCorrect = resizable ? tokens.includes('ux4g-table-resizable') : !tokens.includes('ux4g-table-resizable');
+            const headerBrandCorrect = headerBrand ? tokens.includes('ux4g-table-header-brand') : !tokens.includes('ux4g-table-header-brand');
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasSize && dividerCorrect && zebraCorrect
+                && interactiveCorrect && sortableCorrect && resizableCorrect && headerBrandCorrect
+                && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 3: Popover class string contains required tokens and correctly toggles show
+ * Tag: Feature: ux4g-phase7-components, Property 3
+ * Validates: Requirements 12.14, 12.15, 12.16
+ */
+describe('Property 3: Popover class contains required tokens and correctly toggles show', () => {
+    it('Feature: ux4g-phase7-components, Property 3', () => {
+        fc.assert(fc.property(fc.constantFrom('top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'), fc.boolean(), (placement, show) => {
+            const result = buildPopoverClasses(placement, show);
+            const tokens = result.split(' ');
+            // Always contains base and placement
+            const hasBase = tokens.includes('ux4g-popover');
+            const hasPlacement = tokens.includes(`ux4g-popover-${placement}`);
+            // show toggles correctly
+            const showCorrect = show ? tokens.includes('show') : !tokens.includes('show');
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasPlacement && showCorrect && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 4: Tooltip class string contains all required tokens for all valid placement and size combinations
+ * Tag: Feature: ux4g-phase7-components, Property 4
+ * Validates: Requirements 12.17, 12.18
+ */
+describe('Property 4: Tooltip class contains all required tokens for all placement and size combinations', () => {
+    it('Feature: ux4g-phase7-components, Property 4', () => {
+        fc.assert(fc.property(fc.constantFrom('top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right', 'left-center', 'right-center'), fc.constantFrom('s', 'xs'), (placement, size) => {
+            const result = buildTooltipClasses(placement, size);
+            const tokens = result.split(' ');
+            // Always contains base, placement, and size
+            const hasBase = tokens.includes('ux4g-tooltip');
+            const hasPlacement = tokens.includes(`ux4g-tooltip-${placement}`);
+            const hasSize = tokens.includes(`ux4g-tooltip-${size}`);
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasPlacement && hasSize && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 5: Tab class string contains all required tokens and correctly toggles vertical modifier
+ * Tag: Feature: ux4g-phase7-components, Property 5
+ * Validates: Requirements 12.19, 12.20, 12.21
+ */
+describe('Property 5: Tab class contains all required tokens and correctly toggles vertical', () => {
+    it('Feature: ux4g-phase7-components, Property 5', () => {
+        fc.assert(fc.property(fc.constantFrom('underline', 'pill'), fc.constantFrom('sm', 'md', 'lg'), fc.boolean(), (variant, size, vertical) => {
+            const result = buildTabClasses(variant, size, vertical);
+            const tokens = result.split(' ');
+            // Always contains base, variant, and size
+            const hasBase = tokens.includes('ux4g-tab');
+            const hasVariant = tokens.includes(`ux4g-tab-${variant}`);
+            const hasSize = tokens.includes(`ux4g-tab-${size}`);
+            // vertical toggles correctly
+            const verticalCorrect = vertical
+                ? tokens.includes('ux4g-tab-vertical')
+                : !tokens.includes('ux4g-tab-vertical');
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasVariant && hasSize && verticalCorrect && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 6: Icon button class string contains all required tokens and correctly toggles pill modifier
+ * Tag: Feature: ux4g-phase7-components, Property 6
+ * Validates: Requirements 12.22, 12.23, 12.24
+ */
+describe('Property 6: Icon button class contains all required tokens and correctly toggles pill', () => {
+    it('Feature: ux4g-phase7-components, Property 6', () => {
+        fc.assert(fc.property(fc.constantFrom('primary', 'outline-primary', 'tonal-primary', 'text-primary'), fc.constantFrom('xl', 'lg', 'md', 'sm', 'xs'), fc.boolean(), (variant, size, pill) => {
+            const result = buildIconButtonClasses(variant, size, pill);
+            const tokens = result.split(' ');
+            // Always contains base, variant, and size
+            const hasBase = tokens.includes('ux4g-icon-btn');
+            const hasVariant = tokens.includes(`ux4g-icon-btn-${variant}`);
+            const hasSize = tokens.includes(`ux4g-icon-btn-${size}`);
+            // pill toggles correctly
+            const pillCorrect = pill
+                ? tokens.includes('ux4g-icon-btn-pill')
+                : !tokens.includes('ux4g-icon-btn-pill');
+            // No duplicates
+            const noDuplicates = tokens.length === new Set(tokens).size;
+            return hasBase && hasVariant && hasSize && pillCorrect && noDuplicates;
+        }), { numRuns: 25 });
+    });
+});
+/**
+ * Property 7: Extra param is always appended as a space-separated token and never duplicates existing tokens
+ * Tag: Feature: ux4g-phase7-components, Property 7
+ * Validates: Requirements 12.25
+ */
+describe('Property 7: Extra param is always appended and never duplicated across all build functions', () => {
+    it('Feature: ux4g-phase7-components, Property 7', () => {
+        // Generator for a non-empty extra token with no spaces (valid CSS class name)
+        const extraArb = fc.stringMatching(/^[a-z][a-z0-9-]*$/);
+        fc.assert(fc.property(extraArb, (extra) => {
+            const results = [
+                buildPaginationClasses('dotted', 'solid', extra),
+                buildTableClasses('m', 'column', 'cols', true, true, true, true, extra),
+                buildPopoverClasses('bottom', true, extra),
+                buildTooltipClasses('top-center', 's', extra),
+                buildTabClasses('underline', 'md', true, extra),
+                buildIconButtonClasses('primary', 'md', true, extra),
+            ];
+            return results.every((result) => {
+                const tokens = result.split(' ');
+                // Extra token appears in result
+                const hasExtra = tokens.includes(extra);
+                // No duplicates
+                const noDuplicates = tokens.length === new Set(tokens).size;
+                // Extra token appears exactly once
+                const exactlyOnce = tokens.filter((t) => t === extra).length === 1;
+                return hasExtra && noDuplicates && exactlyOnce;
+            });
+        }), { numRuns: 25 });
+    });
+});

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

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