ux4g-components-web 1.4.0 → 1.5.0

package/dist/__tests__/css-bundle.property.test.js

@@ -0,0 +1,393 @@
+/**
+ * Property 1: CSS bundle contains all button class names
+ * Tag: Feature: ux4g-button-npm-package, Property 1
+ * Validates: Requirements 2.3, 2.5, 2.6
+ *
+ * Property 2: CSS class names are ux4g-prefixed
+ * Tag: Feature: ux4g-button-npm-package, Property 2
+ * Validates: Requirements 2.8
+ *
+ * Property 3: CSS bundle preserves layer ordering
+ * Tag: Feature: ux4g-button-npm-package, Property 3
+ * Validates: Requirements 2.1
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Known set of button class names defined in the design system
+const VARIANT_CLASS_NAMES = [
+    'ux4g-btn-primary',
+    'ux4g-btn-outline-primary',
+    'ux4g-btn-text-primary',
+    'ux4g-btn-tonal-primary',
+    'ux4g-btn-danger',
+    'ux4g-btn-outline-danger',
+    'ux4g-btn-text-danger',
+];
+const SIZE_CLASS_NAMES = [
+    'ux4g-btn-xl',
+    'ux4g-btn-lg',
+    'ux4g-btn-sm',
+    'ux4g-btn-xs',
+];
+const STATE_CLASS_NAMES = [];
+const ALL_BUTTON_CLASS_NAMES = [
+    ...VARIANT_CLASS_NAMES,
+    ...SIZE_CLASS_NAMES,
+    ...STATE_CLASS_NAMES,
+];
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+/**
+ * Property 2: CSS class names are ux4g-prefixed
+ * Tag: Feature: ux4g-button-npm-package, Property 2
+ * Validates: Requirements 2.8
+ *
+ * Known vendor exceptions (non-ux4g-prefixed classes used by the design system):
+ *   - .is-open    — open-state modifier used by Dropdown, Combobox, Modal
+ *   - .is-selected — selected-state modifier used by Dropdown, Combobox
+ *   - .has-selection — selection-state modifier used by Dropdown, Combobox
+ *   - .active     — active-state modifier used by List
+ */
+describe('Property 2: CSS class names are ux4g-prefixed', () => {
+    let cssContent;
+    let classSelectors;
+    // Known vendor classes that are intentionally not ux4g-prefixed
+    const KNOWN_NON_PREFIXED = new Set([
+        // State modifiers used across multiple components
+        '.is-open',
+        '.is-selected',
+        '.has-selection',
+        '.active',
+        '.show',
+        '.is-hovered',
+        '.is-active',
+        '.is-focused',
+        '.is-placeholder',
+        '.has-value',
+        '.disabled',
+        '.is-disabled',
+        '.is-empty',
+        '.is-muted',
+        '.collapsed',
+        '.collapsing',
+        '.selected',
+        // Vendor component classes (non-prefixed legacy patterns)
+        '.card-group',
+        '.avatar-badge',
+        '.btn-link',
+        '.next',
+        '.prev',
+        '.bordered',
+        // Date/time picker vendor classes
+        '.is-today',
+        '.is-in-range',
+        '.is-range-start',
+        '.is-range-end',
+        // Journey timeline vendor classes
+        '.journey-timeline-card',
+        '.journey-timeline-title',
+        '.journey-timeline-description',
+        // Feedback vendor classes
+        '.feedback-thumb-wrapper',
+        '.feedback-thumb-down',
+        '.feedback-thumb-up',
+        '.feedback-nps-button',
+        '.feedback-emoji-button',
+        '.feedback-submitted-wrapper',
+        '.contact-wrapper',
+        // Time slot vendor classes
+        '.holiday',
+        '.weekly-off',
+        '.limited',
+        '.no-slots',
+        '.today',
+        '.success',
+        '.warning',
+        '.grid-2',
+        // Accessibility/navbar vendor classes
+        '.india-flag',
+        '.acc-top-divider',
+        '.icon-language',
+        // Misc vendor references (from svg/external links in CSS)
+        '.w3',
+        '.org',
+        '.check-purple',
+        '.border-yellow',
+        '.muted',
+    ]);
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+        // Parse all class selectors from the CSS content, excluding known vendor exceptions
+        const allSelectors = cssContent.match(/\.[a-zA-Z][a-zA-Z0-9_-]*/g) ?? [];
+        classSelectors = allSelectors.filter((s) => !KNOWN_NON_PREFIXED.has(s));
+    });
+    it('every class selector in the CSS bundle starts with .ux4g- (excluding known vendor exceptions)', () => {
+        if (classSelectors.length === 0) {
+            // CSS bundle is empty or has no class selectors — pass trivially
+            return;
+        }
+        fc.assert(fc.property(fc.constantFrom(...classSelectors), (selector) => {
+            return selector.startsWith('.ux4g-');
+        }), {
+            numRuns: Math.min(classSelectors.length, 20),
+        });
+    });
+});
+describe('Property 1: CSS bundle contains all button class names', () => {
+    let cssContent;
+    beforeAll(() => {
+        // Read the CSS bundle once before all tests
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * Property 1: For any button class name from the known set,
+     * that class name SHALL appear as a selector in styles/ux4g.css.
+     *
+     * Validates: Requirements 2.3, 2.5, 2.6
+     */
+    it('every button class name appears as a selector in the CSS bundle', () => {
+        fc.assert(fc.property(fc.constantFrom(...ALL_BUTTON_CLASS_NAMES), (className) => {
+            // The class should appear as a CSS selector: .className
+            const selector = `.${className}`;
+            return cssContent.includes(selector);
+        }), {
+            numRuns: 20,
+        });
+    });
+});
+/**
+ * Property 3: CSS bundle preserves layer ordering
+ * Tag: Feature: ux4g-button-npm-package, Property 3
+ * Validates: Requirements 2.1
+ *
+ * The layer order is: tokens → semantic → components
+ * - Token layer:     CSS custom properties like `--ux4g-color-` or `--ux4g-spacing-`
+ * - Semantic layer:  CSS custom properties like `--ux4g-bg-` or `--ux4g-text-`
+ * - Component layer: class selectors like `.ux4g-btn-`
+ *
+ * Character offsets are used to verify ordering in the (potentially minified) bundle.
+ * If the bundle is empty or markers are absent, the test passes trivially.
+ */
+describe('Property 3: CSS bundle preserves layer ordering', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    /**
+     * Property 3: token rules precede semantic rules, which precede component rules.
+     *
+     * Token layer markers:     --ux4g-color- or --ux4g-spacing-
+     * Semantic layer markers:  --ux4g-bg- or --ux4g-text-
+     * Component layer markers: .ux4g-btn-
+     *
+     * **Validates: Requirements 2.1**
+     */
+    it('token layer appears before semantic layer, which appears before component layer', () => {
+        // Token layer: find the FIRST occurrence of a token custom property *definition* in :root
+        // Semantic layer: find the FIRST occurrence of a semantic custom property *definition* in :root
+        // Component layer: find the FIRST occurrence of a component class selector
+        //
+        // Note: The CSS bundle may reference semantic variables in base/reset rules before :root,
+        // so we look for the first *definition* (i.e., inside a :root block) rather than any reference.
+        // We use the :root{ marker to find where definitions start.
+        const rootIdx = cssContent.indexOf(':root{');
+        if (rootIdx === -1) {
+            // No :root block found — pass trivially
+            return;
+        }
+        const rootContent = cssContent.substring(rootIdx);
+        const tokenMarkers = ['--ux4g-color-', '--ux4g-spacing-'];
+        const semanticMarkers = ['--ux4g-bg-', '--ux4g-text-'];
+        const componentMarkers = ['.ux4g-btn-'];
+        // Find first token-layer offset within :root
+        let firstTokenOffset = -1;
+        for (const marker of tokenMarkers) {
+            const idx = rootContent.indexOf(marker);
+            if (idx !== -1 && (firstTokenOffset === -1 || idx < firstTokenOffset)) {
+                firstTokenOffset = idx;
+            }
+        }
+        // Find first semantic-layer offset within :root
+        let firstSemanticOffset = -1;
+        for (const marker of semanticMarkers) {
+            const idx = rootContent.indexOf(marker);
+            if (idx !== -1 && (firstSemanticOffset === -1 || idx < firstSemanticOffset)) {
+                firstSemanticOffset = idx;
+            }
+        }
+        // Find first component-layer offset in full CSS (components are outside :root)
+        let firstComponentOffset = -1;
+        for (const marker of componentMarkers) {
+            const idx = cssContent.indexOf(marker);
+            if (idx !== -1 && (firstComponentOffset === -1 || idx < firstComponentOffset)) {
+                firstComponentOffset = idx;
+            }
+        }
+        // If none of the markers are found (e.g. empty/placeholder bundle), pass trivially
+        if (firstTokenOffset === -1 && firstSemanticOffset === -1 && firstComponentOffset === -1) {
+            return;
+        }
+        // Within :root: token definitions must precede semantic definitions
+        if (firstTokenOffset !== -1 && firstSemanticOffset !== -1) {
+            expect(firstTokenOffset).toBeLessThan(firstSemanticOffset);
+        }
+        // Component classes must appear after the :root block (i.e., after rootIdx)
+        if (firstComponentOffset !== -1) {
+            expect(firstComponentOffset).toBeGreaterThan(rootIdx);
+        }
+    });
+});
+const SPINNER_VARIANTS = ['primary', 'inverse', 'danger'];
+const SPINNER_SIZES = ['xl', 'lg', 'md', 'sm', 'xs'];
+const SPINNER_TYPES = ['full', 'split', 'partial'];
+describe('Property 9: CSS bundle contains all spinner class patterns', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    /**
+     * Property 9: For any SpinnerVariant × SpinnerSize × SpinnerType triple,
+     * the CSS bundle SHALL contain the base attribute selector, variant selector,
+     * size class selector, and type selector.
+     *
+     * Note: minified CSS omits quotes in attribute selectors, so we check both forms.
+     *
+     * **Validates: Requirements 2.1, 2.3, 2.4, 2.7**
+     */
+    it('CSS bundle contains base spinner attribute selector for all triples', () => {
+        fc.assert(fc.property(fc.constantFrom(...SPINNER_VARIANTS), fc.constantFrom(...SPINNER_SIZES), fc.constantFrom(...SPINNER_TYPES), (_variant, _size, _type) => {
+            // Base selector — check both quoted and unquoted forms (minified CSS omits quotes)
+            const baseQuoted = '[class^="ux4g-spinner-"]';
+            const baseUnquoted = '[class^=ux4g-spinner-]';
+            return cssContent.includes(baseQuoted) || cssContent.includes(baseUnquoted);
+        }), { numRuns: 20 });
+    });
+    it('CSS bundle contains variant attribute selector for all spinner variants', () => {
+        fc.assert(fc.property(fc.constantFrom(...SPINNER_VARIANTS), fc.constantFrom(...SPINNER_SIZES), fc.constantFrom(...SPINNER_TYPES), (variant, _size, _type) => {
+            // Variant selector — check both quoted and unquoted forms
+            const variantQuoted = `[class*="spinner-${variant}"]`;
+            const variantUnquoted = `[class*=spinner-${variant}]`;
+            return cssContent.includes(variantQuoted) || cssContent.includes(variantUnquoted);
+        }), { numRuns: 20 });
+    });
+    it('CSS bundle contains size class selector for all spinner sizes', () => {
+        fc.assert(fc.property(fc.constantFrom(...SPINNER_VARIANTS), fc.constantFrom(...SPINNER_SIZES), fc.constantFrom(...SPINNER_TYPES), (_variant, size, _type) => {
+            // Size class selector
+            const sizeSelector = `.ux4g-spinner-${size}`;
+            return cssContent.includes(sizeSelector);
+        }), { numRuns: 20 });
+    });
+    it('CSS bundle contains type attribute selector for all spinner types', () => {
+        fc.assert(fc.property(fc.constantFrom(...SPINNER_VARIANTS), fc.constantFrom(...SPINNER_SIZES), fc.constantFrom(...SPINNER_TYPES), (_variant, _size, type) => {
+            // Type selector — check both quoted and unquoted forms
+            const typeQuoted = `[class*="-${type}"]`;
+            const typeUnquoted = `[class*=-${type}]`;
+            return cssContent.includes(typeQuoted) || cssContent.includes(typeUnquoted);
+        }), { numRuns: 20 });
+    });
+});
+/**
+ * Property 9: CSS bundle contains all new component selectors
+ * Tag: Feature: ux4g-phase3-components, Property 9
+ */
+describe('Property 9: CSS bundle contains all new Phase 3 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    const phase3Selectors = [
+        '.ux4g-text-link-sm',
+        '.ux4g-text-link-neutral-md',
+        '.ux4g-avatar',
+        '.ux4g-img',
+    ];
+    it('Feature: ux4g-phase3-components, Property 9 — CSS bundle contains all Phase 3 selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...phase3Selectors), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+    it('CSS bundle contains badge selectors (dot, icon, digit)', () => {
+        const hasDot = cssContent.includes('ux4g-badge-dot-') || cssContent.includes('[class*=ux4g-badge-dot-]');
+        const hasIcon = cssContent.includes('ux4g-badge-icon-') || cssContent.includes('[class*=ux4g-badge-icon-]');
+        const hasDigit = cssContent.includes('ux4g-badge-digit-') || cssContent.includes('[class*=ux4g-badge-digit-]');
+        expect(hasDot).toBe(true);
+        expect(hasIcon).toBe(true);
+        expect(hasDigit).toBe(true);
+    });
+});
+/**
+ * Property 9: CSS bundle contains all new Phase 4 component selectors
+ * Tag: Feature: ux4g-phase4-components, Property 9
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4
+ */
+describe('Property 9: CSS bundle contains all new Phase 4 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    const phase4Selectors = [
+        // Chip — all 7 base classes
+        '.ux4g-filter-chip-md',
+        '.ux4g-filter-chip-sm',
+        '.ux4g-choice-chip-md',
+        '.ux4g-choice-chip-sm',
+        '.ux4g-input-chip-md',
+        '.ux4g-input-chip-sm',
+        '.ux4g-input-chip-xs',
+        // Tag — representative compound classes
+        '.ux4g-tag-tonal-neutral',
+        '.ux4g-tag-filled-primary', // vendor CSS uses 'primary' for brand/primary color in filled variant
+        '.ux4g-tag-outline-error',
+        '.ux4g-tag-text-info',
+        '.ux4g-tag-s',
+        // Divider
+        '.ux4g-divider-horizontal',
+        '.ux4g-divider-vertical',
+        // Breadcrumb
+        '.ux4g-breadcrumb',
+        '.ux4g-breadcrumb-divider',
+        '.ux4g-breadcrumb-icon',
+    ];
+    /**
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4**
+     */
+    it('Feature: ux4g-phase4-components, Property 9 — CSS bundle contains all Phase 4 selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...phase4Selectors), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+});

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

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

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

@@ -0,0 +1,71 @@
+/**
+ * Property-based tests for DOM Generator determinism
+ * Property 7: DOM Generator is deterministic
+ * Tag: Feature: ux4g-native-framework-experience, Property 7: DOM Generator is deterministic
+ *
+ * **Validates: Requirements 3.8**
+ */
+import * as fc from 'fast-check';
+import { generateId, resetIdCounter } from '../dom-generators/id-generator';
+beforeEach(() => {
+    resetIdCounter();
+});
+/**
+ * Property 7: DOM Generator is deterministic
+ * Tag: Feature: ux4g-native-framework-experience, Property 7: DOM Generator is deterministic
+ *
+ * **Validates: Requirements 3.8**
+ */
+describe('Property 7: DOM Generator is deterministic', () => {
+    it('ID Generator determinism: same prefix sequence after reset produces identical IDs', () => {
+        fc.assert(fc.property(fc.array(fc.string({ minLength: 1, maxLength: 20 }), { minLength: 1, maxLength: 50 }), (prefixes) => {
+            // First run: generate IDs from the prefix sequence
+            resetIdCounter();
+            const firstRun = prefixes.map((prefix) => generateId(prefix));
+            // Second run: reset and replay the same sequence
+            resetIdCounter();
+            const secondRun = prefixes.map((prefix) => generateId(prefix));
+            // Both runs must produce identical results
+            if (firstRun.length !== secondRun.length)
+                return false;
+            return firstRun.every((id, i) => id === secondRun[i]);
+        }), { numRuns: 100 });
+    });
+    it('Structural determinism: same factory function called twice after reset produces deeply equal NodeDescriptor trees', () => {
+        fc.assert(fc.property(fc.string({ minLength: 1, maxLength: 20 }), fc.array(fc.string({ minLength: 1, maxLength: 15 }), { minLength: 0, maxLength: 5 }), fc.constantFrom('div', 'span', 'button', 'ul', 'li', 'section', 'nav'), (componentPrefix, childLabels, tag) => {
+            // Factory function that builds a NodeDescriptor tree using generateId()
+            const buildTree = () => {
+                const rootId = generateId(componentPrefix);
+                const children = childLabels.map((label) => {
+                    const childId = generateId(`${componentPrefix}-item`);
+                    return {
+                        tag: 'li',
+                        props: {
+                            id: childId,
+                            className: `ux4g-${componentPrefix}-item`,
+                            'aria-labelledby': rootId,
+                        },
+                        children: [label],
+                    };
+                });
+                return {
+                    tag,
+                    props: {
+                        id: rootId,
+                        className: `ux4g-${componentPrefix}`,
+                        role: 'list',
+                    },
+                    children,
+                };
+            };
+            // First call
+            resetIdCounter();
+            const tree1 = buildTree();
+            // Second call with same ID counter state
+            resetIdCounter();
+            const tree2 = buildTree();
+            // Deep equality check
+            return JSON.stringify(tree1) === JSON.stringify(tree2);
+        }), { numRuns: 100 });
+    });
+});

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

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

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

@@ -0,0 +1,99 @@
+/**
+ * Property-based tests for ID Generator uniqueness and format
+ * Property 5: Generated IDs are unique and correctly formatted
+ * Tag: Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted
+ *
+ * **Validates: Requirements 3.6**
+ */
+import * as fc from 'fast-check';
+import { generateId, resetIdCounter } from '../dom-generators/id-generator';
+beforeEach(() => {
+    resetIdCounter();
+});
+/**
+ * Property 5.1: Uniqueness — For any sequence of generateId() calls with arbitrary prefixes,
+ * all returned IDs are unique (no duplicates in a Set).
+ */
+describe('Property 5.1: All generated IDs are unique', () => {
+    it('Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted', () => {
+        fc.assert(fc.property(fc.array(fc.stringMatching(/^[a-z][a-z0-9-]*$/), { minLength: 1, maxLength: 50 }), (prefixes) => {
+            resetIdCounter();
+            const ids = prefixes.map((prefix) => generateId(prefix));
+            const uniqueIds = new Set(ids);
+            return uniqueIds.size === ids.length;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 5.2: Format — Every generated ID matches the regex pattern /^.+-\d+$/
+ * where the prefix can be anything like `ux4g-dropdown`, `ux4g-tab-panel`, etc.
+ */
+describe('Property 5.2: Every generated ID matches the expected format', () => {
+    it('Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted', () => {
+        const formatRegex = /^.+-\d+$/;
+        fc.assert(fc.property(fc.stringMatching(/^[a-z][a-z0-9-]*$/), (prefix) => {
+            resetIdCounter();
+            const id = generateId(prefix);
+            return formatRegex.test(id);
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 5.3: Monotonic increment — The numeric suffix of sequential IDs from the same prefix
+ * is monotonically increasing.
+ */
+describe('Property 5.3: Numeric suffixes are monotonically increasing', () => {
+    it('Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted', () => {
+        fc.assert(fc.property(fc.stringMatching(/^[a-z][a-z0-9-]*$/), fc.integer({ min: 2, max: 50 }), (prefix, count) => {
+            resetIdCounter();
+            const ids = Array.from({ length: count }, () => generateId(prefix));
+            const suffixes = ids.map((id) => {
+                const lastDash = id.lastIndexOf('-');
+                return parseInt(id.slice(lastDash + 1), 10);
+            });
+            for (let i = 1; i < suffixes.length; i++) {
+                if (suffixes[i] <= suffixes[i - 1])
+                    return false;
+            }
+            return true;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 5.4: Reset behavior — After resetIdCounter(), the counter starts from 1 again.
+ */
+describe('Property 5.4: Reset counter restarts from 1', () => {
+    it('Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted', () => {
+        fc.assert(fc.property(fc.stringMatching(/^[a-z][a-z0-9-]*$/), fc.integer({ min: 1, max: 20 }), (prefix, callsBefore) => {
+            resetIdCounter();
+            // Generate some IDs first
+            for (let i = 0; i < callsBefore; i++) {
+                generateId(prefix);
+            }
+            // Reset and verify next ID ends with -1
+            resetIdCounter();
+            const idAfterReset = generateId(prefix);
+            const lastDash = idAfterReset.lastIndexOf('-');
+            const suffix = parseInt(idAfterReset.slice(lastDash + 1), 10);
+            return suffix === 1;
+        }), { numRuns: 100 });
+    });
+});
+/**
+ * Property 5.5: Cross-prefix uniqueness — IDs generated with different prefixes still have
+ * unique numeric suffixes (since they share the same counter).
+ */
+describe('Property 5.5: Cross-prefix IDs have unique numeric suffixes', () => {
+    it('Feature: ux4g-native-framework-experience, Property 5: Generated IDs are unique and correctly formatted', () => {
+        fc.assert(fc.property(fc.array(fc.stringMatching(/^[a-z][a-z0-9-]*$/), { minLength: 2, maxLength: 30 }), (prefixes) => {
+            resetIdCounter();
+            const ids = prefixes.map((prefix) => generateId(prefix));
+            const suffixes = ids.map((id) => {
+                const lastDash = id.lastIndexOf('-');
+                return parseInt(id.slice(lastDash + 1), 10);
+            });
+            const uniqueSuffixes = new Set(suffixes);
+            return uniqueSuffixes.size === suffixes.length;
+        }), { numRuns: 100 });
+    });
+});

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

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

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

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