ux4g-components-web 1.4.0 → 1.5.0

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

@@ -0,0 +1,347 @@
+// src/__tests__/types.phase9.property.test.ts
+// Property-based tests for all Phase 9 build functions
+// Requirements: 38.1-38.45
+import * as fc from 'fast-check';
+import { buildDateTimePickerClasses, buildStatusPipelineClasses, buildJourneyTimelineClasses, buildFormFieldGroupClasses, buildOtpInputClasses, buildFileUploadClasses, buildProgressIndicatorClasses, buildFeedbackClasses, buildDraftStatusBannerClasses, buildSlaProgressIndicatorClasses, buildCarouselClasses, buildEmptyStateClasses, buildChipGroupClasses, buildNavbarClasses, buildSocialLinksClasses, } from '../../src/types';
+// Helper: split result into tokens
+const tokens = (s) => s.split(' ');
+const hasDuplicates = (arr) => new Set(arr).size !== arr.length;
+// ── Property 1: DateTimePicker ────────────────────────────────────────────────
+// **Validates: Requirements 38.1-38.3**
+describe('Property 1: DateTimePicker class is exactly the correct base class for each mode', () => {
+    it('mode determines class exactly, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('date', 'time'), (mode) => {
+            const result = buildDateTimePickerClasses(mode);
+            const toks = tokens(result);
+            if (mode === 'date') {
+                expect(result).toBe('ux4g-date-picker-container');
+            }
+            else {
+                expect(result).toBe('ux4g-time-picker-container');
+            }
+            // never contains both
+            expect(toks).not.toContain(mode === 'date' ? 'ux4g-time-picker-container' : 'ux4g-date-picker-container');
+            // no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 2: StatusPipeline ────────────────────────────────────────────────
+// **Validates: Requirements 38.4-38.12**
+describe('Property 2: StatusPipeline class string contains required tokens and correctly applies all modifiers', () => {
+    it('base token always present, orientation/alignment/variant/size toggle correctly, alignment ignored when vertical, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('horizontal', 'vertical'), fc.constantFrom('default', 'center', 'left'), fc.constantFrom('default', 'bottom-line', 'bottom-line-fill', 'mobile', 'progress'), fc.constantFrom('default', 's'), (orientation, alignment, variant, size) => {
+            const result = buildStatusPipelineClasses(orientation, alignment, variant, size);
+            const toks = tokens(result);
+            // always contains base
+            expect(toks).toContain('ux4g-status-pipeline-stepper');
+            if (orientation === 'vertical') {
+                expect(toks).toContain('ux4g-status-pipeline-vertical');
+                // alignment ignored — no horizontal, center, or left classes
+                expect(toks).not.toContain('ux4g-status-pipeline-horizontal');
+                expect(toks).not.toContain('ux4g-status-pipeline-center');
+                expect(toks).not.toContain('ux4g-status-pipeline-left');
+            }
+            else {
+                // horizontal
+                expect(toks).not.toContain('ux4g-status-pipeline-vertical');
+                if (alignment === 'center') {
+                    expect(toks).toContain('ux4g-status-pipeline-horizontal');
+                    expect(toks).toContain('ux4g-status-pipeline-center');
+                }
+                else if (alignment === 'left') {
+                    expect(toks).toContain('ux4g-status-pipeline-horizontal');
+                    expect(toks).toContain('ux4g-status-pipeline-left');
+                }
+            }
+            if (variant === 'bottom-line-fill') {
+                expect(toks).toContain('ux4g-status-pipeline-bottom-line');
+                expect(toks).toContain('ux4g-status-pipeline-bottom-line-fill');
+            }
+            else if (variant === 'bottom-line') {
+                expect(toks).toContain('ux4g-status-pipeline-bottom-line');
+                expect(toks).not.toContain('ux4g-status-pipeline-bottom-line-fill');
+            }
+            else if (variant === 'mobile') {
+                expect(toks).toContain('ux4g-status-pipeline-mobile');
+            }
+            else if (variant === 'progress') {
+                expect(toks).toContain('ux4g-status-pipeline-progress');
+            }
+            if (size === 's') {
+                expect(toks).toContain('ux4g-status-pipeline-s');
+            }
+            // no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 3: JourneyTimeline ───────────────────────────────────────────────
+// **Validates: Requirements 38.13-38.15**
+describe('Property 3: JourneyTimeline class string always contains base token and exactly one orientation modifier', () => {
+    it('base always present, exactly one orientation modifier, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('vertical', 'horizontal'), (orientation) => {
+            const result = buildJourneyTimelineClasses(orientation);
+            const toks = tokens(result);
+            expect(toks).toContain('ux4g-journey-timeline');
+            if (orientation === 'vertical') {
+                expect(toks).toContain('ux4g-journey-timeline--vertical');
+                expect(toks).not.toContain('ux4g-journey-timeline--horizontal');
+            }
+            else {
+                expect(toks).toContain('ux4g-journey-timeline--horizontal');
+                expect(toks).not.toContain('ux4g-journey-timeline--vertical');
+            }
+            // no duplicates
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 4: Single-class wrappers ─────────────────────────────────────────
+// **Validates: Requirements 38.16-38.17, 38.28-38.29, 38.34-38.35, 38.39**
+describe('Property 4: Single-class wrappers always return exactly their base class', () => {
+    it('each single-class wrapper returns exactly its base class, extra appended, no duplicates', () => {
+        fc.assert(fc.property(fc.option(fc.string({ minLength: 1 }).filter(s => !s.includes(' '))), (extra) => {
+            const extraArg = extra ?? undefined;
+            // buildFormFieldGroupClasses
+            const formResult = buildFormFieldGroupClasses(extraArg);
+            const formToks = tokens(formResult);
+            expect(formToks).toContain('ux4g-form-group');
+            if (extraArg)
+                expect(formToks).toContain(extraArg);
+            expect(hasDuplicates(formToks)).toBe(false);
+            // buildFeedbackClasses
+            const feedbackResult = buildFeedbackClasses(extraArg);
+            const feedbackToks = tokens(feedbackResult);
+            expect(feedbackToks).toContain('ux4g-feedback');
+            if (extraArg)
+                expect(feedbackToks).toContain(extraArg);
+            expect(hasDuplicates(feedbackToks)).toBe(false);
+            // buildCarouselClasses
+            const carouselResult = buildCarouselClasses(extraArg);
+            const carouselToks = tokens(carouselResult);
+            expect(carouselToks).toContain('ux4g-carousel');
+            if (extraArg)
+                expect(carouselToks).toContain(extraArg);
+            expect(hasDuplicates(carouselToks)).toBe(false);
+            // buildEmptyStateClasses
+            const emptyResult = buildEmptyStateClasses(extraArg);
+            const emptyToks = tokens(emptyResult);
+            expect(emptyToks).toContain('ux4g-empty-state');
+            if (extraArg)
+                expect(emptyToks).toContain(extraArg);
+            expect(hasDuplicates(emptyToks)).toBe(false);
+            // buildNavbarClasses
+            const navbarResult = buildNavbarClasses(extraArg);
+            const navbarToks = tokens(navbarResult);
+            expect(navbarToks).toContain('ux4g-navbar');
+            if (extraArg)
+                expect(navbarToks).toContain(extraArg);
+            expect(hasDuplicates(navbarToks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 5: OTP Input ─────────────────────────────────────────────────────
+// **Validates: Requirements 38.18-38.22**
+describe('Property 5: OTP Input class string contains base token and correctly toggles state modifiers', () => {
+    it('base always present, state modifiers mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'success', 'error', 'locked'), (state) => {
+            const result = buildOtpInputClasses(state);
+            const toks = tokens(result);
+            expect(toks).toContain('ux4g-otp');
+            if (state === 'default') {
+                expect(toks).not.toContain('ux4g-otp-success');
+                expect(toks).not.toContain('ux4g-otp-error');
+                expect(toks).not.toContain('ux4g-otp-locked');
+            }
+            else if (state === 'success') {
+                expect(toks).toContain('ux4g-otp-success');
+                expect(toks).not.toContain('ux4g-otp-error');
+                expect(toks).not.toContain('ux4g-otp-locked');
+            }
+            else if (state === 'error') {
+                expect(toks).toContain('ux4g-otp-error');
+                expect(toks).not.toContain('ux4g-otp-success');
+                expect(toks).not.toContain('ux4g-otp-locked');
+            }
+            else if (state === 'locked') {
+                expect(toks).toContain('ux4g-otp-locked');
+                expect(toks).not.toContain('ux4g-otp-success');
+                expect(toks).not.toContain('ux4g-otp-error');
+            }
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 6: File Upload ───────────────────────────────────────────────────
+// **Validates: Requirements 38.23-38.25**
+describe('Property 6: File Upload class string contains base token and correctly appends state modifier', () => {
+    it('base always present, state modifier appended when provided, no duplicates', () => {
+        fc.assert(fc.property(fc.option(fc.constantFrom('default', 'default-vle', 'selecting', 'scanning', 'uploaded', 'uploaded-vle', 'error')), (state) => {
+            const stateArg = state ?? undefined;
+            const result = buildFileUploadClasses(stateArg);
+            const toks = tokens(result);
+            expect(toks).toContain('ux4g-upload');
+            if (stateArg) {
+                expect(toks).toContain(`ux4g-upload-state-${stateArg}`);
+            }
+            else {
+                expect(result).toBe('ux4g-upload');
+            }
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 7: Progress Indicator ───────────────────────────────────────────
+// **Validates: Requirements 38.26-38.27**
+describe('Property 7: Progress Indicator class is exactly the correct base class for each type', () => {
+    it('type determines class exactly, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('bar', 'circle'), (type) => {
+            const result = buildProgressIndicatorClasses(type);
+            const toks = tokens(result);
+            if (type === 'bar') {
+                expect(result).toBe('ux4g-progress-bar');
+                expect(toks).not.toContain('ux4g-progress-circle');
+            }
+            else {
+                expect(result).toBe('ux4g-progress-circle');
+                expect(toks).not.toContain('ux4g-progress-bar');
+            }
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 8: Draft Status Banner ──────────────────────────────────────────
+// **Validates: Requirements 38.30-38.32**
+describe('Property 8: Draft Status Banner class is exactly the correct variant class with vendor typo preserved', () => {
+    it('variant determines class exactly, vendor typo preserved, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('default', 'auto', 'success'), (variant) => {
+            const result = buildDraftStatusBannerClasses(variant);
+            const toks = tokens(result);
+            if (variant === 'default') {
+                expect(result).toBe('ux4g-daft-staus-bar');
+            }
+            else if (variant === 'auto') {
+                expect(result).toBe('ux4g-auto-daft-staus-bar');
+            }
+            else {
+                expect(result).toBe('ux4g-success-daft-staus-bar');
+            }
+            // never contains more than one variant class
+            const variantClasses = toks.filter(t => t === 'ux4g-daft-staus-bar' ||
+                t === 'ux4g-auto-daft-staus-bar' ||
+                t === 'ux4g-success-daft-staus-bar');
+            expect(variantClasses.length).toBe(1);
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 9: SLA Progress Indicator ───────────────────────────────────────
+// **Validates: Requirements 38.33**
+describe('Property 9: SLA Progress Indicator class is exactly ux4g-sla-{type}', () => {
+    it('result is exactly ux4g-sla-{type}, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('circle', 'linear', 'badge'), (type) => {
+            const result = buildSlaProgressIndicatorClasses(type);
+            const toks = tokens(result);
+            expect(result).toBe(`ux4g-sla-${type}`);
+            // never contains more than one type class
+            const typeClasses = toks.filter(t => t === 'ux4g-sla-circle' || t === 'ux4g-sla-linear' || t === 'ux4g-sla-badge');
+            expect(typeClasses.length).toBe(1);
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 10: Chip Group ───────────────────────────────────────────────────
+// **Validates: Requirements 38.36-38.38**
+describe('Property 10: Chip Group class string contains correct variant class and correctly toggles active', () => {
+    it('variant classes mutually exclusive, active toggles correctly, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('filter', 'choice'), fc.boolean(), (variant, active) => {
+            const result = buildChipGroupClasses(variant, active);
+            const toks = tokens(result);
+            if (variant === 'filter') {
+                expect(toks).toContain('ux4g-filter-chip-group');
+                expect(toks).not.toContain('ux4g-choice-chip-group');
+            }
+            else {
+                expect(toks).toContain('ux4g-choice-chip-group');
+                expect(toks).not.toContain('ux4g-filter-chip-group');
+            }
+            if (active) {
+                expect(toks).toContain('active');
+            }
+            else {
+                expect(toks).not.toContain('active');
+            }
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 11: Social Links ─────────────────────────────────────────────────
+// **Validates: Requirements 38.40-38.43**
+describe('Property 11: Social Links class always contains ux4g-d-flex and exactly one gap class', () => {
+    it('ux4g-d-flex always present, exactly one gap class, mutually exclusive, no duplicates', () => {
+        fc.assert(fc.property(fc.constantFrom('sm', 'md', 'lg'), (size) => {
+            const result = buildSocialLinksClasses(size);
+            const toks = tokens(result);
+            expect(toks).toContain('ux4g-d-flex');
+            if (size === 'sm') {
+                expect(toks).toContain('ux4g-gap-xs');
+                expect(toks).not.toContain('ux4g-gap-s');
+                expect(toks).not.toContain('ux4g-gap-m');
+            }
+            else if (size === 'md') {
+                expect(toks).toContain('ux4g-gap-s');
+                expect(toks).not.toContain('ux4g-gap-xs');
+                expect(toks).not.toContain('ux4g-gap-m');
+            }
+            else {
+                expect(toks).toContain('ux4g-gap-m');
+                expect(toks).not.toContain('ux4g-gap-xs');
+                expect(toks).not.toContain('ux4g-gap-s');
+            }
+            // exactly two tokens when no extra
+            expect(toks.length).toBe(2);
+            expect(hasDuplicates(toks)).toBe(false);
+        }), { numRuns: 100 });
+    });
+});
+// ── Property 12: Extra param ──────────────────────────────────────────────────
+// **Validates: Requirements 38.44-38.45**
+describe('Property 12: Extra param is always appended as a space-separated token and never duplicates existing tokens for all Phase 9 build functions', () => {
+    it('extra token appended exactly once, no duplicates, across all 15 build functions', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1 }).filter(s => !s.includes(' ')), (extra) => {
+            const cases = [
+                buildDateTimePickerClasses('date', extra),
+                buildDateTimePickerClasses('time', extra),
+                buildStatusPipelineClasses('horizontal', 'default', 'default', 'default', extra),
+                buildStatusPipelineClasses('vertical', 'default', 'default', 'default', extra),
+                buildJourneyTimelineClasses('vertical', extra),
+                buildJourneyTimelineClasses('horizontal', extra),
+                buildFormFieldGroupClasses(extra),
+                buildOtpInputClasses('success', extra),
+                buildFileUploadClasses('error', extra),
+                buildProgressIndicatorClasses('bar', extra),
+                buildProgressIndicatorClasses('circle', extra),
+                buildFeedbackClasses(extra),
+                buildDraftStatusBannerClasses('default', extra),
+                buildDraftStatusBannerClasses('auto', extra),
+                buildDraftStatusBannerClasses('success', extra),
+                buildSlaProgressIndicatorClasses('circle', extra),
+                buildCarouselClasses(extra),
+                buildEmptyStateClasses(extra),
+                buildChipGroupClasses('filter', false, extra),
+                buildNavbarClasses(extra),
+                buildSocialLinksClasses('md', extra),
+            ];
+            for (const result of cases) {
+                const toks = tokens(result);
+                // extra token is present
+                expect(toks).toContain(extra);
+                // extra token appears exactly once
+                expect(toks.filter(t => t === extra).length).toBe(1);
+                // no duplicates overall
+                expect(hasDuplicates(toks)).toBe(false);
+            }
+        }), { numRuns: 100 });
+    });
+});

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

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

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

@@ -0,0 +1,226 @@
+// src/__tests__/types.phase9.test.ts
+// Unit tests for all Phase 9 build functions
+// Requirements: 18.1-18.17
+import { buildDateTimePickerClasses, buildStatusPipelineClasses, buildJourneyTimelineClasses, buildFormFieldGroupClasses, buildOtpInputClasses, buildFileUploadClasses, buildProgressIndicatorClasses, buildFeedbackClasses, buildDraftStatusBannerClasses, buildSlaProgressIndicatorClasses, buildCarouselClasses, buildEmptyStateClasses, buildChipGroupClasses, buildNavbarClasses, buildSocialLinksClasses, } from '../../src/types';
+// ── DateTimePicker ────────────────────────────────────────────────────────────
+describe('buildDateTimePickerClasses', () => {
+    it("mode='date' -> 'ux4g-date-picker-container'", () => {
+        expect(buildDateTimePickerClasses('date')).toBe('ux4g-date-picker-container');
+    });
+    it("mode='time' -> 'ux4g-time-picker-container'", () => {
+        expect(buildDateTimePickerClasses('time')).toBe('ux4g-time-picker-container');
+    });
+    it("mode='date' with extra -> 'ux4g-date-picker-container my'", () => {
+        expect(buildDateTimePickerClasses('date', 'my')).toBe('ux4g-date-picker-container my');
+    });
+});
+// ── StatusPipeline ────────────────────────────────────────────────────────────
+describe('buildStatusPipelineClasses', () => {
+    it('no args -> base only', () => {
+        expect(buildStatusPipelineClasses()).toBe('ux4g-status-pipeline-stepper');
+    });
+    it("orientation='horizontal' -> base only", () => {
+        expect(buildStatusPipelineClasses('horizontal')).toBe('ux4g-status-pipeline-stepper');
+    });
+    it("orientation='horizontal', alignment='center'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'center')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-horizontal ux4g-status-pipeline-center');
+    });
+    it("orientation='horizontal', alignment='left'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'left')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-horizontal ux4g-status-pipeline-left');
+    });
+    it("orientation='vertical' -> vertical class only", () => {
+        expect(buildStatusPipelineClasses('vertical')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-vertical');
+    });
+    it("orientation='vertical', alignment='center' -> alignment ignored", () => {
+        expect(buildStatusPipelineClasses('vertical', 'center')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-vertical');
+    });
+    it("variant='bottom-line'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'default', 'bottom-line')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-bottom-line');
+    });
+    it("variant='bottom-line-fill' adds both bottom-line and bottom-line-fill", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'default', 'bottom-line-fill')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-bottom-line ux4g-status-pipeline-bottom-line-fill');
+    });
+    it("variant='mobile'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'default', 'mobile')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-mobile');
+    });
+    it("variant='progress'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'default', 'progress')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-progress');
+    });
+    it("size='s'", () => {
+        expect(buildStatusPipelineClasses('horizontal', 'default', 'default', 's')).toBe('ux4g-status-pipeline-stepper ux4g-status-pipeline-s');
+    });
+});
+// ── JourneyTimeline ───────────────────────────────────────────────────────────
+describe('buildJourneyTimelineClasses', () => {
+    it('no args -> vertical default', () => {
+        expect(buildJourneyTimelineClasses()).toBe('ux4g-journey-timeline ux4g-journey-timeline--vertical');
+    });
+    it("orientation='vertical'", () => {
+        expect(buildJourneyTimelineClasses('vertical')).toBe('ux4g-journey-timeline ux4g-journey-timeline--vertical');
+    });
+    it("orientation='horizontal'", () => {
+        expect(buildJourneyTimelineClasses('horizontal')).toBe('ux4g-journey-timeline ux4g-journey-timeline--horizontal');
+    });
+    it("orientation='vertical' with extra", () => {
+        expect(buildJourneyTimelineClasses('vertical', 'my')).toBe('ux4g-journey-timeline ux4g-journey-timeline--vertical my');
+    });
+});
+// ── FormFieldGroup ────────────────────────────────────────────────────────────
+describe('buildFormFieldGroupClasses', () => {
+    it('no args -> ux4g-form-group', () => {
+        expect(buildFormFieldGroupClasses()).toBe('ux4g-form-group');
+    });
+    it('with extra', () => {
+        expect(buildFormFieldGroupClasses('my')).toBe('ux4g-form-group my');
+    });
+});
+// ── OtpInput ─────────────────────────────────────────────────────────────────
+describe('buildOtpInputClasses', () => {
+    it('no args -> ux4g-otp', () => {
+        expect(buildOtpInputClasses()).toBe('ux4g-otp');
+    });
+    it("state='default' -> no modifier", () => {
+        expect(buildOtpInputClasses('default')).toBe('ux4g-otp');
+    });
+    it("state='success'", () => {
+        expect(buildOtpInputClasses('success')).toBe('ux4g-otp ux4g-otp-success');
+    });
+    it("state='error'", () => {
+        expect(buildOtpInputClasses('error')).toBe('ux4g-otp ux4g-otp-error');
+    });
+    it("state='locked'", () => {
+        expect(buildOtpInputClasses('locked')).toBe('ux4g-otp ux4g-otp-locked');
+    });
+});
+// ── FileUpload ────────────────────────────────────────────────────────────────
+describe('buildFileUploadClasses', () => {
+    it('no args -> ux4g-upload', () => {
+        expect(buildFileUploadClasses()).toBe('ux4g-upload');
+    });
+    it("state='default'", () => {
+        expect(buildFileUploadClasses('default')).toBe('ux4g-upload ux4g-upload-state-default');
+    });
+    it("state='selecting'", () => {
+        expect(buildFileUploadClasses('selecting')).toBe('ux4g-upload ux4g-upload-state-selecting');
+    });
+    it("state='error'", () => {
+        expect(buildFileUploadClasses('error')).toBe('ux4g-upload ux4g-upload-state-error');
+    });
+    it("state='uploaded-vle' with extra", () => {
+        expect(buildFileUploadClasses('uploaded-vle', 'my')).toBe('ux4g-upload ux4g-upload-state-uploaded-vle my');
+    });
+});
+// ── ProgressIndicator ─────────────────────────────────────────────────────────
+describe('buildProgressIndicatorClasses', () => {
+    it("type='bar' -> 'ux4g-progress-bar'", () => {
+        expect(buildProgressIndicatorClasses('bar')).toBe('ux4g-progress-bar');
+    });
+    it("type='circle' -> 'ux4g-progress-circle'", () => {
+        expect(buildProgressIndicatorClasses('circle')).toBe('ux4g-progress-circle');
+    });
+    it("type='bar' with extra", () => {
+        expect(buildProgressIndicatorClasses('bar', 'my')).toBe('ux4g-progress-bar my');
+    });
+});
+// ── Feedback ─────────────────────────────────────────────────────────────────
+describe('buildFeedbackClasses', () => {
+    it('no args -> ux4g-feedback', () => {
+        expect(buildFeedbackClasses()).toBe('ux4g-feedback');
+    });
+    it('with extra', () => {
+        expect(buildFeedbackClasses('my')).toBe('ux4g-feedback my');
+    });
+});
+// ── DraftStatusBanner ─────────────────────────────────────────────────────────
+describe('buildDraftStatusBannerClasses', () => {
+    it("no args -> 'ux4g-daft-staus-bar' (vendor typo preserved)", () => {
+        expect(buildDraftStatusBannerClasses()).toBe('ux4g-daft-staus-bar');
+    });
+    it("variant='default' -> 'ux4g-daft-staus-bar'", () => {
+        expect(buildDraftStatusBannerClasses('default')).toBe('ux4g-daft-staus-bar');
+    });
+    it("variant='auto' -> 'ux4g-auto-daft-staus-bar'", () => {
+        expect(buildDraftStatusBannerClasses('auto')).toBe('ux4g-auto-daft-staus-bar');
+    });
+    it("variant='success' -> 'ux4g-success-daft-staus-bar'", () => {
+        expect(buildDraftStatusBannerClasses('success')).toBe('ux4g-success-daft-staus-bar');
+    });
+});
+// ── SlaProgressIndicator ──────────────────────────────────────────────────────
+describe('buildSlaProgressIndicatorClasses', () => {
+    it("type='circle' -> 'ux4g-sla-circle'", () => {
+        expect(buildSlaProgressIndicatorClasses('circle')).toBe('ux4g-sla-circle');
+    });
+    it("type='linear' -> 'ux4g-sla-linear'", () => {
+        expect(buildSlaProgressIndicatorClasses('linear')).toBe('ux4g-sla-linear');
+    });
+    it("type='badge' -> 'ux4g-sla-badge'", () => {
+        expect(buildSlaProgressIndicatorClasses('badge')).toBe('ux4g-sla-badge');
+    });
+});
+// ── Carousel ─────────────────────────────────────────────────────────────────
+describe('buildCarouselClasses', () => {
+    it('no args -> ux4g-carousel', () => {
+        expect(buildCarouselClasses()).toBe('ux4g-carousel');
+    });
+    it('with extra', () => {
+        expect(buildCarouselClasses('my')).toBe('ux4g-carousel my');
+    });
+});
+// ── EmptyState ────────────────────────────────────────────────────────────────
+describe('buildEmptyStateClasses', () => {
+    it('no args -> ux4g-empty-state', () => {
+        expect(buildEmptyStateClasses()).toBe('ux4g-empty-state');
+    });
+    it('with extra', () => {
+        expect(buildEmptyStateClasses('my')).toBe('ux4g-empty-state my');
+    });
+});
+// ── ChipGroup ─────────────────────────────────────────────────────────────────
+describe('buildChipGroupClasses', () => {
+    it('no args -> ux4g-filter-chip-group (default)', () => {
+        expect(buildChipGroupClasses()).toBe('ux4g-filter-chip-group');
+    });
+    it("variant='filter'", () => {
+        expect(buildChipGroupClasses('filter')).toBe('ux4g-filter-chip-group');
+    });
+    it("variant='choice'", () => {
+        expect(buildChipGroupClasses('choice')).toBe('ux4g-choice-chip-group');
+    });
+    it("variant='filter', active=true", () => {
+        expect(buildChipGroupClasses('filter', true)).toBe('ux4g-filter-chip-group active');
+    });
+    it("variant='choice', active=false", () => {
+        expect(buildChipGroupClasses('choice', false)).toBe('ux4g-choice-chip-group');
+    });
+    it("variant='filter', active=true, extra='my'", () => {
+        expect(buildChipGroupClasses('filter', true, 'my')).toBe('ux4g-filter-chip-group active my');
+    });
+});
+// ── Navbar ────────────────────────────────────────────────────────────────────
+describe('buildNavbarClasses', () => {
+    it('no args -> ux4g-navbar', () => {
+        expect(buildNavbarClasses()).toBe('ux4g-navbar');
+    });
+    it('with extra', () => {
+        expect(buildNavbarClasses('my')).toBe('ux4g-navbar my');
+    });
+});
+// ── SocialLinks ───────────────────────────────────────────────────────────────
+describe('buildSocialLinksClasses', () => {
+    it('no args -> ux4g-d-flex ux4g-gap-s (md default)', () => {
+        expect(buildSocialLinksClasses()).toBe('ux4g-d-flex ux4g-gap-s');
+    });
+    it("size='sm' -> ux4g-d-flex ux4g-gap-xs", () => {
+        expect(buildSocialLinksClasses('sm')).toBe('ux4g-d-flex ux4g-gap-xs');
+    });
+    it("size='md' -> ux4g-d-flex ux4g-gap-s", () => {
+        expect(buildSocialLinksClasses('md')).toBe('ux4g-d-flex ux4g-gap-s');
+    });
+    it("size='lg' -> ux4g-d-flex ux4g-gap-m", () => {
+        expect(buildSocialLinksClasses('lg')).toBe('ux4g-d-flex ux4g-gap-m');
+    });
+    it("size='md' with extra", () => {
+        expect(buildSocialLinksClasses('md', 'my')).toBe('ux4g-d-flex ux4g-gap-s my');
+    });
+});

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

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

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

@@ -0,0 +1,76 @@
+/**
+ * Property-based tests for UX4G Package Restructure
+ * Properties 1-2
+ * Tag: Feature: ux4g-package-restructure
+ *
+ * Validates: Requirements 7.1, 7.2, 7.3
+ */
+import * as fc from 'fast-check';
+import { buildButtonClasses, VARIANT_CLASS_MAP, SIZE_CLASS_MAP, } from '../../src/types';
+const allButtonVariants = [
+    'primary',
+    'outline-primary',
+    'text-primary',
+    'tonal-primary',
+    'danger',
+    'outline-danger',
+    'text-danger',
+    'tonal-danger',
+];
+const allButtonSizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+const allButtonShapes = ['rectangle', 'pill'];
+/**
+ * Property 1: Class_Builder output is preserved after restructure
+ *
+ * For any valid input combination to buildButtonClasses(), the output from
+ * ux4g-components-web/types SHALL be identical to the expected pre-restructure output.
+ * The returned class string must be non-empty and contain the expected variant/size
+ * class substrings.
+ *
+ * Tag: Feature: ux4g-package-restructure, Property 1
+ * Validates: Requirements 7.1, 7.2
+ */
+describe('Property 1: Class_Builder output is preserved after restructure', () => {
+    it('Feature: ux4g-package-restructure, Property 1 — buildButtonClasses output is non-empty and contains expected variant and size substrings', () => {
+        fc.assert(fc.property(fc.constantFrom(...allButtonVariants), fc.constantFrom(...allButtonSizes), fc.boolean(), fc.boolean(), fc.option(fc.constantFrom(...allButtonShapes), { nil: undefined }), fc.option(fc.string(), { nil: undefined }), (variant, size, disabled, loading, shape, extra) => {
+            const result = buildButtonClasses(variant, size, disabled, loading, shape, extra);
+            // Output must be non-empty
+            if (!result || result.trim().length === 0)
+                return false;
+            // Must contain the expected variant class
+            const expectedVariantClass = VARIANT_CLASS_MAP[variant];
+            if (!result.includes(expectedVariantClass))
+                return false;
+            // Must contain the expected size class
+            const expectedSizeClass = SIZE_CLASS_MAP[size];
+            if (!expectedSizeClass)
+                return false;
+            if (!result.includes(expectedSizeClass))
+                return false;
+            return true;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 2: SIZE_CLASS_MAP maps every size to a non-null, non-empty class string
+ *
+ * For any size value in the Button SIZE_CLASS_MAP (xl, lg, md, sm, xs), the mapped
+ * CSS class string SHALL be non-null and non-empty.
+ *
+ * Tag: Feature: ux4g-package-restructure, Property 2
+ * Validates: Requirements 7.3
+ */
+describe('Property 2: SIZE_CLASS_MAP maps every size to a non-null, non-empty class string', () => {
+    it('Feature: ux4g-package-restructure, Property 2 — every size maps to a non-null, non-empty string', () => {
+        fc.assert(fc.property(fc.constantFrom('xl', 'lg', 'md', 'sm', 'xs'), (size) => {
+            const mapped = SIZE_CLASS_MAP[size];
+            // Must be non-null
+            if (mapped === null || mapped === undefined)
+                return false;
+            // Must be non-empty
+            if (mapped.trim().length === 0)
+                return false;
+            return true;
+        }), { numRuns: 100 });
+    });
+});