ux4g-components-web 1.4.0 → 1.5.0

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

@@ -0,0 +1,205 @@
+/**
+ * Property-based tests for NodeDescriptor type validation
+ * Property 1: DOM Generator returns valid NodeDescriptor
+ * Tag: Feature: ux4g-native-framework-experience, Property 1: DOM Generator returns valid NodeDescriptor
+ *
+ * **Validates: Requirements 3.2**
+ */
+import * as fc from 'fast-check';
+import { generateId, resetIdCounter } from '../dom-generators/id-generator';
+// --- Helper: recursive NodeDescriptor validator ---
+/**
+ * Recursively validates that a value conforms to the NodeDescriptor contract:
+ * - `tag` is a non-empty string
+ * - `props` is an object (not null, not array)
+ * - `children` is an array where each element is either a string or a valid NodeDescriptor
+ */
+function isValidNodeDescriptor(node) {
+    if (node === null || node === undefined || typeof node !== 'object') {
+        return false;
+    }
+    const descriptor = node;
+    // tag must be a non-empty string
+    if (typeof descriptor.tag !== 'string' || descriptor.tag.length === 0) {
+        return false;
+    }
+    // props must be a non-null object (not an array)
+    if (descriptor.props === null ||
+        descriptor.props === undefined ||
+        typeof descriptor.props !== 'object' ||
+        Array.isArray(descriptor.props)) {
+        return false;
+    }
+    // children must be an array
+    if (!Array.isArray(descriptor.children)) {
+        return false;
+    }
+    // each child must be either a string or a valid NodeDescriptor
+    for (const child of descriptor.children) {
+        if (typeof child === 'string') {
+            continue;
+        }
+        if (!isValidNodeDescriptor(child)) {
+            return false;
+        }
+    }
+    return true;
+}
+// --- Arbitraries: generate random NodeDescriptor trees ---
+/**
+ * Creates a recursive fc.Arbitrary<NodeDescriptor> that generates valid NodeDescriptor trees.
+ * Uses fc.letrec for safe recursion with bounded depth.
+ */
+function nodeDescriptorArbitrary() {
+    const { tree } = fc.letrec((tie) => ({
+        tree: fc.record({
+            tag: fc.stringOf(fc.char().filter((c) => c.trim().length > 0), { minLength: 1, maxLength: 20 }),
+            props: fc.dictionary(fc.stringOf(fc.char().filter((c) => /[a-z\-]/.test(c)), { minLength: 1, maxLength: 15 }), fc.oneof(fc.string(), fc.boolean(), fc.integer(), fc.constant(undefined))),
+            children: fc.array(fc.oneof(fc.string(), tie('tree')), { maxLength: 4 }),
+        }),
+    }));
+    return tree;
+}
+// --- Property 1: DOM Generator returns valid NodeDescriptor ---
+describe('Property 1: DOM Generator returns valid NodeDescriptor', () => {
+    /**
+     * For any generated NodeDescriptor tree, the isValidNodeDescriptor helper
+     * should confirm it conforms to the type contract.
+     *
+     * Tag: Feature: ux4g-native-framework-experience, Property 1: DOM Generator returns valid NodeDescriptor
+     */
+    it('any generated NodeDescriptor tree conforms to the type contract', () => {
+        fc.assert(fc.property(nodeDescriptorArbitrary(), (descriptor) => {
+            // tag is a non-empty string
+            expect(typeof descriptor.tag).toBe('string');
+            expect(descriptor.tag.length).toBeGreaterThan(0);
+            // props is an object
+            expect(typeof descriptor.props).toBe('object');
+            expect(descriptor.props).not.toBeNull();
+            expect(Array.isArray(descriptor.props)).toBe(false);
+            // children is an array
+            expect(Array.isArray(descriptor.children)).toBe(true);
+            // recursive validation passes
+            expect(isValidNodeDescriptor(descriptor)).toBe(true);
+        }), { numRuns: 100 });
+    });
+    it('children elements are either strings or valid NodeDescriptors', () => {
+        fc.assert(fc.property(nodeDescriptorArbitrary(), (descriptor) => {
+            for (const child of descriptor.children) {
+                if (typeof child !== 'string') {
+                    expect(isValidNodeDescriptor(child)).toBe(true);
+                }
+            }
+            return true;
+        }), { numRuns: 100 });
+    });
+    it('deeply nested NodeDescriptor trees are valid', () => {
+        fc.assert(fc.property(nodeDescriptorArbitrary(), (descriptor) => {
+            // Recursively walk the tree and confirm every node is valid
+            const stack = [descriptor];
+            while (stack.length > 0) {
+                const current = stack.pop();
+                expect(typeof current.tag).toBe('string');
+                expect(current.tag.length).toBeGreaterThan(0);
+                expect(typeof current.props).toBe('object');
+                expect(current.props).not.toBeNull();
+                expect(Array.isArray(current.children)).toBe(true);
+                for (const child of current.children) {
+                    if (typeof child !== 'string') {
+                        stack.push(child);
+                    }
+                }
+            }
+            return true;
+        }), { numRuns: 100 });
+    });
+});
+// --- generateId() tests ---
+describe('generateId returns strings matching the pattern', () => {
+    beforeEach(() => {
+        resetIdCounter();
+    });
+    it('returns a string in the format prefix-number', () => {
+        fc.assert(fc.property(fc.stringOf(fc.char().filter((c) => /[a-z\-]/.test(c)), { minLength: 1, maxLength: 20 }), (prefix) => {
+            resetIdCounter();
+            const id = generateId(prefix);
+            const pattern = new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}-\\d+$`);
+            expect(id).toMatch(pattern);
+        }), { numRuns: 100 });
+    });
+    it('generates incrementing counter values', () => {
+        resetIdCounter();
+        const id1 = generateId('ux4g-test');
+        const id2 = generateId('ux4g-test');
+        const id3 = generateId('ux4g-test');
+        expect(id1).toBe('ux4g-test-1');
+        expect(id2).toBe('ux4g-test-2');
+        expect(id3).toBe('ux4g-test-3');
+    });
+});
+// --- resetIdCounter() tests ---
+describe('resetIdCounter resets properly', () => {
+    it('resets counter so next generateId starts from 1', () => {
+        generateId('ux4g-component');
+        generateId('ux4g-component');
+        resetIdCounter();
+        const id = generateId('ux4g-component');
+        expect(id).toBe('ux4g-component-1');
+    });
+    it('multiple resets produce consistent results', () => {
+        fc.assert(fc.property(fc.integer({ min: 1, max: 50 }), (callsBefore) => {
+            // Generate some IDs
+            for (let i = 0; i < callsBefore; i++) {
+                generateId('ux4g-prefix');
+            }
+            // Reset
+            resetIdCounter();
+            // Next ID should always be 1
+            const id = generateId('ux4g-prefix');
+            expect(id).toBe('ux4g-prefix-1');
+        }), { numRuns: 100 });
+    });
+});
+// --- NodeDescriptor trees with nested children validation ---
+describe('NodeDescriptor trees with nested children are valid', () => {
+    it('manually constructed nested trees pass validation', () => {
+        const nestedTree = {
+            tag: 'div',
+            props: { className: 'ux4g-container', id: 'root' },
+            children: [
+                {
+                    tag: 'ul',
+                    props: { role: 'listbox' },
+                    children: [
+                        {
+                            tag: 'li',
+                            props: { role: 'option', 'aria-selected': true },
+                            children: ['Option 1'],
+                        },
+                        {
+                            tag: 'li',
+                            props: { role: 'option', 'aria-selected': false },
+                            children: ['Option 2'],
+                        },
+                    ],
+                },
+                'Some text content',
+            ],
+        };
+        expect(isValidNodeDescriptor(nestedTree)).toBe(true);
+    });
+    it('invalid descriptors fail validation', () => {
+        // Missing tag
+        expect(isValidNodeDescriptor({ tag: '', props: {}, children: [] })).toBe(false);
+        // Null props
+        expect(isValidNodeDescriptor({ tag: 'div', props: null, children: [] })).toBe(false);
+        // Children not array
+        expect(isValidNodeDescriptor({ tag: 'div', props: {}, children: 'bad' })).toBe(false);
+        // Nested invalid child
+        expect(isValidNodeDescriptor({
+            tag: 'div',
+            props: {},
+            children: [{ tag: '', props: {}, children: [] }],
+        })).toBe(false);
+    });
+});

package/dist/__tests__/dom-generators.states.property.test.d.ts

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

package/dist/__tests__/dom-generators.table.property.test.d.ts

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

package/dist/__tests__/dom-generators.tier1.property.test.d.ts

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

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

@@ -0,0 +1,403 @@
+/**
+ * Property-based tests for Tier 1 DOM Generators (Properties 2, 3, 4)
+ * Tag: Feature: ux4g-native-framework-experience
+ *
+ * Property 2: Generated DOM contains all required data-ux4g-* attributes
+ * Property 3: Generated DOM contains correct CSS classes
+ * Property 4: Generated DOM satisfies ARIA requirements
+ *
+ * **Validates: Requirements 3.3, 3.4, 3.5, 9.1-9.6**
+ */
+import * as fc from 'fast-check';
+import { resetIdCounter } from '../dom-generators/id-generator';
+import { generateDropdownDOM } from '../dom-generators/dropdown';
+import { generateAccordionDOM } from '../dom-generators/accordion';
+import { generateTabsDOM } from '../dom-generators/tabs';
+import { generateModalDOM } from '../dom-generators/modal';
+import { generateCarouselDOM } from '../dom-generators/carousel';
+import { generateDatePickerDOM } from '../dom-generators/date-picker';
+import { generateTimePickerDOM } from '../dom-generators/time-picker';
+import { generateDrawerDOM } from '../dom-generators/drawer';
+import { generateComboboxDOM } from '../dom-generators/combobox';
+import { generateSearchDOM } from '../dom-generators/search';
+// --- Helpers ---
+/**
+ * Recursively searches a NodeDescriptor tree for a node with a given prop key.
+ * Optionally matches a specific value.
+ */
+function findNodeByProp(tree, key, value) {
+    if (tree.props[key] !== undefined) {
+        if (value === undefined || tree.props[key] === value) {
+            return tree;
+        }
+    }
+    for (const child of tree.children) {
+        if (typeof child !== 'string') {
+            const found = findNodeByProp(child, key, value);
+            if (found)
+                return found;
+        }
+    }
+    return undefined;
+}
+/**
+ * Recursively searches a NodeDescriptor tree for a node with a given tag.
+ */
+function findNodeByTag(tree, tag) {
+    if (tree.tag === tag)
+        return tree;
+    for (const child of tree.children) {
+        if (typeof child !== 'string') {
+            const found = findNodeByTag(child, tag);
+            if (found)
+                return found;
+        }
+    }
+    return undefined;
+}
+/**
+ * Finds ALL nodes matching a given prop key (optionally with value).
+ */
+function findAllNodesByProp(tree, key, value) {
+    const results = [];
+    if (tree.props[key] !== undefined) {
+        if (value === undefined || tree.props[key] === value) {
+            results.push(tree);
+        }
+    }
+    for (const child of tree.children) {
+        if (typeof child !== 'string') {
+            results.push(...findAllNodesByProp(child, key, value));
+        }
+    }
+    return results;
+}
+// --- Arbitraries ---
+const dropdownOptionArb = fc.record({
+    label: fc.string({ minLength: 1, maxLength: 20 }),
+    value: fc.string({ minLength: 1, maxLength: 20 }),
+    disabled: fc.boolean(),
+});
+const dropdownPropsArb = fc.record({
+    options: fc.array(dropdownOptionArb, { minLength: 1, maxLength: 10 }),
+    value: fc.option(fc.string({ minLength: 1, maxLength: 20 }), { nil: undefined }),
+    placeholder: fc.option(fc.string({ minLength: 1, maxLength: 30 }), { nil: undefined }),
+    searchable: fc.boolean(),
+    multiple: fc.boolean(),
+    disabled: fc.boolean(),
+    size: fc.constantFrom('sm', 'md', 'lg'),
+    state: fc.constantFrom('default', 'error', 'success', 'warning'),
+    open: fc.boolean(),
+});
+const accordionItemArb = fc.record({
+    header: fc.string({ minLength: 1, maxLength: 30 }),
+    content: fc.string({ minLength: 1, maxLength: 50 }),
+    expanded: fc.boolean(),
+    disabled: fc.boolean(),
+});
+const accordionPropsArb = fc.record({
+    items: fc.array(accordionItemArb, { minLength: 1, maxLength: 8 }),
+    arrowPosition: fc.constantFrom('right', 'left'),
+    variant: fc.constantFrom('default', 'bordered'),
+    multiExpand: fc.boolean(),
+});
+const tabItemArb = fc.record({
+    label: fc.string({ minLength: 1, maxLength: 20 }),
+    content: fc.string({ minLength: 1, maxLength: 50 }),
+    disabled: fc.boolean(),
+});
+const tabsPropsArb = fc.record({
+    tabs: fc.array(tabItemArb, { minLength: 1, maxLength: 8 }),
+    activeIndex: fc.nat({ max: 7 }),
+    variant: fc.constantFrom('underline', 'pill'),
+    size: fc.constantFrom('sm', 'md', 'lg'),
+    vertical: fc.boolean(),
+});
+const modalPropsArb = fc.record({
+    open: fc.boolean(),
+    size: fc.constantFrom('s', 'm', 'l'),
+    title: fc.option(fc.string({ minLength: 1, maxLength: 30 }), { nil: undefined }),
+    closable: fc.boolean(),
+    backdropOpacity: fc.constantFrom('25', '50', '75'),
+    backdropBlur: fc.boolean(),
+});
+const carouselSlideArb = fc.record({
+    content: fc.string({ minLength: 1, maxLength: 50 }),
+    label: fc.option(fc.string({ minLength: 1, maxLength: 20 }), { nil: undefined }),
+});
+const carouselPropsArb = fc.record({
+    slides: fc.array(carouselSlideArb, { minLength: 1, maxLength: 10 }),
+    activeIndex: fc.nat({ max: 9 }),
+    showIndicators: fc.boolean(),
+    showNavigation: fc.boolean(),
+});
+const datePickerPropsArb = fc.record({
+    value: fc.option(fc.tuple(fc.integer({ min: 2000, max: 2030 }), fc.integer({ min: 1, max: 12 }), fc.integer({ min: 1, max: 28 })).map(([y, m, d]) => `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`), { nil: undefined }),
+    displayMonth: fc.integer({ min: 0, max: 11 }),
+    displayYear: fc.integer({ min: 2000, max: 2030 }),
+});
+const timePickerPropsArb = fc.record({
+    value: fc.option(fc.tuple(fc.integer({ min: 0, max: 23 }), fc.integer({ min: 0, max: 59 }))
+        .map(([h, m]) => `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`), { nil: undefined }),
+    format: fc.constantFrom('12h', '24h'),
+});
+const drawerPropsArb = fc.record({
+    open: fc.boolean(),
+    placement: fc.constantFrom('right', 'left', 'top', 'bottom'),
+    title: fc.option(fc.string({ minLength: 1, maxLength: 30 }), { nil: undefined }),
+    closable: fc.boolean(),
+});
+const comboboxOptionArb = fc.record({
+    label: fc.string({ minLength: 1, maxLength: 20 }),
+    value: fc.string({ minLength: 1, maxLength: 20 }),
+    disabled: fc.boolean(),
+});
+const comboboxPropsArb = fc.record({
+    options: fc.array(comboboxOptionArb, { minLength: 1, maxLength: 10 }),
+    value: fc.option(fc.string({ minLength: 1, maxLength: 20 }), { nil: undefined }),
+    inputValue: fc.option(fc.string({ minLength: 0, maxLength: 20 }), { nil: undefined }),
+    placeholder: fc.option(fc.string({ minLength: 1, maxLength: 30 }), { nil: undefined }),
+    multiple: fc.boolean(),
+    disabled: fc.boolean(),
+    size: fc.constantFrom('sm', 'md', 'lg'),
+    state: fc.constantFrom('default', 'error', 'success', 'warning'),
+    open: fc.boolean(),
+});
+const searchSuggestionArb = fc.record({
+    label: fc.string({ minLength: 1, maxLength: 20 }),
+    value: fc.string({ minLength: 1, maxLength: 20 }),
+});
+const searchPropsArb = fc.record({
+    value: fc.option(fc.string({ minLength: 0, maxLength: 30 }), { nil: undefined }),
+    placeholder: fc.option(fc.string({ minLength: 1, maxLength: 30 }), { nil: undefined }),
+    suggestions: fc.array(searchSuggestionArb, { minLength: 0, maxLength: 5 }),
+    showSuggestions: fc.boolean(),
+    size: fc.constantFrom('s', 'm', 'lg'),
+});
+// --- Test Setup ---
+beforeEach(() => {
+    resetIdCounter();
+});
+// --- Property 2: data-ux4g-* attributes ---
+describe('Property 2: data-ux4g-* attributes', () => {
+    it('generateDropdownDOM → tree contains data-ux4g-dropdown-toggle', () => {
+        fc.assert(fc.property(dropdownPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateDropdownDOM(props);
+            const node = findNodeByProp(tree, 'data-ux4g-dropdown-toggle');
+            expect(node).toBeDefined();
+        }), { numRuns: 100 });
+    });
+    it('generateAccordionDOM → tree contains data-ux4g-accordion-toggle on header elements', () => {
+        fc.assert(fc.property(accordionPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateAccordionDOM(props);
+            const toggleNodes = findAllNodesByProp(tree, 'data-ux4g-accordion-toggle');
+            // Should have one toggle per item
+            expect(toggleNodes.length).toBe(props.items.length);
+            // Each toggle should be on a button element
+            for (const node of toggleNodes) {
+                expect(node.tag).toBe('button');
+            }
+        }), { numRuns: 100 });
+    });
+    it('generateModalDOM → tree contains data-ux4g-modal-close when closable=true', () => {
+        fc.assert(fc.property(modalPropsArb.filter((p) => p.closable === true), (props) => {
+            resetIdCounter();
+            const tree = generateModalDOM(props);
+            const node = findNodeByProp(tree, 'data-ux4g-modal-close');
+            expect(node).toBeDefined();
+        }), { numRuns: 100 });
+    });
+    it('generateCarouselDOM → tree contains data-ux4g-carousel-next and data-ux4g-carousel-prev when showNavigation=true', () => {
+        fc.assert(fc.property(carouselPropsArb.filter((p) => p.showNavigation === true), (props) => {
+            resetIdCounter();
+            const safeProps = { ...props, activeIndex: Math.min(props.activeIndex, props.slides.length - 1) };
+            const tree = generateCarouselDOM(safeProps);
+            const prevNode = findNodeByProp(tree, 'data-ux4g-carousel-prev');
+            const nextNode = findNodeByProp(tree, 'data-ux4g-carousel-next');
+            expect(prevNode).toBeDefined();
+            expect(nextNode).toBeDefined();
+        }), { numRuns: 100 });
+    });
+    it('generateDrawerDOM → tree contains data-ux4g-drawer-close when closable=true', () => {
+        fc.assert(fc.property(drawerPropsArb.filter((p) => p.closable === true), (props) => {
+            resetIdCounter();
+            const tree = generateDrawerDOM(props);
+            const node = findNodeByProp(tree, 'data-ux4g-drawer-close');
+            expect(node).toBeDefined();
+        }), { numRuns: 100 });
+    });
+});
+// --- Property 3: CSS classes ---
+describe('Property 3: CSS classes', () => {
+    it('Dropdown → root contains ux4g-dropdown', () => {
+        fc.assert(fc.property(dropdownPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateDropdownDOM(props);
+            expect(tree.props.className).toContain('ux4g-dropdown');
+        }), { numRuns: 100 });
+    });
+    it('Accordion → root contains ux4g-accordion', () => {
+        fc.assert(fc.property(accordionPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateAccordionDOM(props);
+            expect(tree.props.className).toContain('ux4g-accordion');
+        }), { numRuns: 100 });
+    });
+    it('Tabs → root contains ux4g-tab', () => {
+        fc.assert(fc.property(tabsPropsArb, (props) => {
+            resetIdCounter();
+            const safeProps = { ...props, activeIndex: Math.min(props.activeIndex, props.tabs.length - 1) };
+            const tree = generateTabsDOM(safeProps);
+            expect(tree.props.className).toContain('ux4g-tab');
+        }), { numRuns: 100 });
+    });
+    it('Modal → root contains ux4g-modal', () => {
+        fc.assert(fc.property(modalPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateModalDOM(props);
+            expect(tree.props.className).toContain('ux4g-modal');
+        }), { numRuns: 100 });
+    });
+    it('Carousel → root contains ux4g-carousel', () => {
+        fc.assert(fc.property(carouselPropsArb, (props) => {
+            resetIdCounter();
+            const safeProps = { ...props, activeIndex: Math.min(props.activeIndex, props.slides.length - 1) };
+            const tree = generateCarouselDOM(safeProps);
+            expect(tree.props.className).toContain('ux4g-carousel');
+        }), { numRuns: 100 });
+    });
+    it('DatePicker → root contains ux4g-date-picker-container', () => {
+        fc.assert(fc.property(datePickerPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateDatePickerDOM(props);
+            expect(tree.props.className).toContain('ux4g-date-picker-container');
+        }), { numRuns: 100 });
+    });
+    it('TimePicker → root contains ux4g-time-picker-container', () => {
+        fc.assert(fc.property(timePickerPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateTimePickerDOM(props);
+            expect(tree.props.className).toContain('ux4g-time-picker-container');
+        }), { numRuns: 100 });
+    });
+    it('Drawer → root contains ux4g-drawer', () => {
+        fc.assert(fc.property(drawerPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateDrawerDOM(props);
+            // The drawer panel (not wrapper) contains the ux4g-drawer class
+            const drawerPanel = findAllNodesByProp(tree, 'role', 'dialog');
+            expect(drawerPanel.length).toBeGreaterThan(0);
+            // Check wrapper or panel contains ux4g-drawer
+            const hasDrawerClass = (tree.props.className || '').includes('ux4g-drawer') ||
+                drawerPanel.some((n) => (n.props.className || '').includes('ux4g-drawer'));
+            expect(hasDrawerClass).toBe(true);
+        }), { numRuns: 100 });
+    });
+    it('Combobox → root contains ux4g-combobox', () => {
+        fc.assert(fc.property(comboboxPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateComboboxDOM(props);
+            expect(tree.props.className).toContain('ux4g-combobox');
+        }), { numRuns: 100 });
+    });
+    it('Search → root contains ux4g-search-container', () => {
+        fc.assert(fc.property(searchPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateSearchDOM(props);
+            expect(tree.props.className).toContain('ux4g-search-container');
+        }), { numRuns: 100 });
+    });
+});
+// --- Property 4: ARIA requirements ---
+describe('Property 4: ARIA requirements', () => {
+    it('Dropdown → menu has role="listbox", trigger has aria-haspopup', () => {
+        fc.assert(fc.property(dropdownPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateDropdownDOM(props);
+            // Menu has role="listbox"
+            const listbox = findNodeByProp(tree, 'role', 'listbox');
+            expect(listbox).toBeDefined();
+            // Trigger has aria-haspopup
+            const trigger = findNodeByProp(tree, 'aria-haspopup');
+            expect(trigger).toBeDefined();
+        }), { numRuns: 100 });
+    });
+    it('Accordion → panels have role="region", toggles have aria-expanded', () => {
+        fc.assert(fc.property(accordionPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateAccordionDOM(props);
+            // Panels with role="region"
+            const regions = findAllNodesByProp(tree, 'role', 'region');
+            expect(regions.length).toBe(props.items.length);
+            // Toggles with aria-expanded
+            const toggles = findAllNodesByProp(tree, 'aria-expanded');
+            expect(toggles.length).toBe(props.items.length);
+        }), { numRuns: 100 });
+    });
+    it('Tabs → tablist has role="tablist", tabs have role="tab", panels have role="tabpanel"', () => {
+        fc.assert(fc.property(tabsPropsArb, (props) => {
+            resetIdCounter();
+            const safeProps = { ...props, activeIndex: Math.min(props.activeIndex, props.tabs.length - 1) };
+            const tree = generateTabsDOM(safeProps);
+            // tablist
+            const tablist = findNodeByProp(tree, 'role', 'tablist');
+            expect(tablist).toBeDefined();
+            // tabs
+            const tabs = findAllNodesByProp(tree, 'role', 'tab');
+            expect(tabs.length).toBe(props.tabs.length);
+            // tabpanels
+            const panels = findAllNodesByProp(tree, 'role', 'tabpanel');
+            expect(panels.length).toBe(props.tabs.length);
+        }), { numRuns: 100 });
+    });
+    it('Modal → dialog box has role="dialog" and aria-modal="true"', () => {
+        fc.assert(fc.property(modalPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateModalDOM(props);
+            const dialog = findNodeByProp(tree, 'role', 'dialog');
+            expect(dialog).toBeDefined();
+            expect(dialog.props['aria-modal']).toBe('true');
+        }), { numRuns: 100 });
+    });
+    it('Carousel → root has aria-roledescription="carousel"', () => {
+        fc.assert(fc.property(carouselPropsArb, (props) => {
+            resetIdCounter();
+            const safeProps = { ...props, activeIndex: Math.min(props.activeIndex, props.slides.length - 1) };
+            const tree = generateCarouselDOM(safeProps);
+            expect(tree.props['aria-roledescription']).toBe('carousel');
+        }), { numRuns: 100 });
+    });
+    it('Combobox → input has role="combobox" and aria-autocomplete="list"', () => {
+        fc.assert(fc.property(comboboxPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateComboboxDOM(props);
+            const combobox = findNodeByProp(tree, 'role', 'combobox');
+            expect(combobox).toBeDefined();
+            expect(combobox.props['aria-autocomplete']).toBe('list');
+        }), { numRuns: 100 });
+    });
+    it('Search → input has role="searchbox"', () => {
+        fc.assert(fc.property(searchPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateSearchDOM(props);
+            const searchbox = findNodeByProp(tree, 'role', 'searchbox');
+            expect(searchbox).toBeDefined();
+        }), { numRuns: 100 });
+    });
+    it('TimePicker → spinbuttons have role="spinbutton"', () => {
+        fc.assert(fc.property(timePickerPropsArb, (props) => {
+            resetIdCounter();
+            const tree = generateTimePickerDOM(props);
+            const spinbuttons = findAllNodesByProp(tree, 'role', 'spinbutton');
+            // At least 2 spinbuttons (hour + minute), 3 if 12h format (+ period)
+            if (props.format === '12h') {
+                expect(spinbuttons.length).toBe(3);
+            }
+            else {
+                expect(spinbuttons.length).toBe(2);
+            }
+        }), { numRuns: 100 });
+    });
+});

package/dist/__tests__/dom-generators.validation.property.test.d.ts

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