ux4g-components-web 1.4.0 → 1.5.0

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

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

package/dist/__tests__/types.test.js

@@ -0,0 +1,175 @@
+import { buildButtonClasses, VARIANT_CLASS_MAP, SIZE_CLASS_MAP, } from '../../src/types';
+describe('buildButtonClasses', () => {
+    const variants = [
+        'primary',
+        'outline-primary',
+        'text-primary',
+        'tonal-primary',
+        'danger',
+        'outline-danger',
+        'text-danger',
+        'tonal-danger',
+    ];
+    const sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+    describe('variant class mapping', () => {
+        variants.forEach((variant) => {
+            it(`variant "${variant}" produces class "${VARIANT_CLASS_MAP[variant]}"`, () => {
+                const result = buildButtonClasses(variant, 'md', false, false);
+                expect(result).toContain(VARIANT_CLASS_MAP[variant]);
+            });
+        });
+    });
+    describe('size class mapping', () => {
+        sizes.forEach((size) => {
+            if (size === 'md') {
+                it('size "md" produces no size class', () => {
+                    const result = buildButtonClasses('primary', 'md', false, false);
+                    expect(result).not.toMatch(/ux4g-btn-(xl|lg|sm|xs)/);
+                });
+            }
+            else {
+                it(`size "${size}" produces class "${SIZE_CLASS_MAP[size]}"`, () => {
+                    const result = buildButtonClasses('primary', size, false, false);
+                    expect(result).toContain(SIZE_CLASS_MAP[size]);
+                });
+            }
+        });
+    });
+    describe('disabled state', () => {
+        it('disabled=true adds ux4g-btn-disabled', () => {
+            const result = buildButtonClasses('primary', 'md', true, false);
+            expect(result).toContain('ux4g-btn-disabled');
+        });
+        it('disabled=false does not add ux4g-btn-disabled', () => {
+            const result = buildButtonClasses('primary', 'md', false, false);
+            expect(result).not.toContain('ux4g-btn-disabled');
+        });
+    });
+    describe('loading state', () => {
+        it('loading=true adds ux4g-btn-loading', () => {
+            const result = buildButtonClasses('primary', 'md', false, true);
+            expect(result).toContain('ux4g-btn-loading');
+        });
+        it('loading=false does not add ux4g-btn-loading', () => {
+            const result = buildButtonClasses('primary', 'md', false, false);
+            expect(result).not.toContain('ux4g-btn-loading');
+        });
+    });
+    describe('combined disabled + loading state', () => {
+        it('disabled=true and loading=true adds both classes', () => {
+            const result = buildButtonClasses('primary', 'md', true, true);
+            expect(result).toContain('ux4g-btn-disabled');
+            expect(result).toContain('ux4g-btn-loading');
+        });
+    });
+    describe('extra class', () => {
+        it('appends extra class when provided', () => {
+            const result = buildButtonClasses('primary', 'md', false, false, 'rectangle', 'my-custom-class');
+            expect(result).toContain('my-custom-class');
+        });
+        it('does not append extra class when undefined', () => {
+            const result = buildButtonClasses('primary', 'md', false, false);
+            const classes = result.split(' ');
+            expect(classes).toHaveLength(2); // variant class + md size class (Rule 10: md always emits a class)
+        });
+    });
+    describe('class ordering', () => {
+        it('variant class is always first', () => {
+            const result = buildButtonClasses('danger', 'xl', true, true);
+            const classes = result.split(' ');
+            expect(classes[0]).toBe('ux4g-btn-danger');
+        });
+        it('returns space-separated string', () => {
+            const result = buildButtonClasses('primary', 'lg', false, false);
+            expect(result).toBe('ux4g-btn-primary ux4g-btn-lg');
+        });
+    });
+    describe('shape', () => {
+        it('pill shape adds ux4g-btn-pill', () => {
+            const result = buildButtonClasses('primary', 'md', false, false, 'pill');
+            expect(result).toContain('ux4g-btn-pill');
+        });
+        it('rectangle shape does not add ux4g-btn-pill', () => {
+            const result = buildButtonClasses('primary', 'md', false, false, 'rectangle');
+            expect(result).not.toContain('ux4g-btn-pill');
+        });
+        it('undefined shape does not add ux4g-btn-pill', () => {
+            const result = buildButtonClasses('primary', 'md', false, false);
+            expect(result).not.toContain('ux4g-btn-pill');
+        });
+    });
+});
+import { buildSpinnerClasses, } from '../../src/types';
+describe('buildSpinnerClasses', () => {
+    const variants = ['primary', 'inverse', 'danger'];
+    const sizes = ['xl', 'lg', 'md', 'sm', 'xs'];
+    const types = ['full', 'split', 'partial'];
+    describe('all 45 combinations produce correct class pattern', () => {
+        variants.forEach((variant) => {
+            sizes.forEach((size) => {
+                types.forEach((type) => {
+                    const base = `ux4g-spinner-${variant}-${type}`;
+                    const expected = size !== 'md' ? `${base} ux4g-spinner-${size}` : base;
+                    it(`buildSpinnerClasses('${variant}', '${size}', '${type}') → '${expected}'`, () => {
+                        expect(buildSpinnerClasses(variant, size, type)).toBe(expected);
+                    });
+                });
+            });
+        });
+    });
+    describe('default combination', () => {
+        it("buildSpinnerClasses('primary', 'md', 'full') → 'ux4g-spinner-primary-full' (no size class for md)", () => {
+            expect(buildSpinnerClasses('primary', 'md', 'full')).toBe('ux4g-spinner-primary-full');
+        });
+    });
+    describe('non-md sizes add a separate size class', () => {
+        it("buildSpinnerClasses('primary', 'xl', 'full') → 'ux4g-spinner-primary-full ux4g-spinner-xl'", () => {
+            expect(buildSpinnerClasses('primary', 'xl', 'full')).toBe('ux4g-spinner-primary-full ux4g-spinner-xl');
+        });
+        it("buildSpinnerClasses('danger', 'sm', 'split') → 'ux4g-spinner-danger-split ux4g-spinner-sm'", () => {
+            expect(buildSpinnerClasses('danger', 'sm', 'split')).toBe('ux4g-spinner-danger-split ux4g-spinner-sm');
+        });
+    });
+    describe('extra class parameter', () => {
+        it('appends extra class when provided (md — no size class)', () => {
+            const result = buildSpinnerClasses('primary', 'md', 'full', 'my-extra');
+            expect(result).toBe('ux4g-spinner-primary-full my-extra');
+        });
+        it('appends extra class when provided (non-md — size class present)', () => {
+            const result = buildSpinnerClasses('primary', 'xl', 'full', 'my-extra');
+            expect(result).toBe('ux4g-spinner-primary-full ux4g-spinner-xl my-extra');
+        });
+        it('does not append extra class when not provided', () => {
+            const result = buildSpinnerClasses('primary', 'md', 'full');
+            expect(result).toBe('ux4g-spinner-primary-full');
+            expect(result).not.toMatch(/ $/); // no trailing space
+        });
+        it('does not append extra class when undefined', () => {
+            const result = buildSpinnerClasses('danger', 'xs', 'partial', undefined);
+            expect(result).toBe('ux4g-spinner-danger-partial ux4g-spinner-xs');
+        });
+    });
+});
+import * as fc from 'fast-check';
+/**
+ * Property 1: Spinner class string matches correct pattern
+ * Validates: Requirements 2a.5, 3.5
+ * Tag: Feature: ux4g-spinner-focus-ring, Property 1
+ */
+describe('Property 1: Spinner class string matches compound pattern', () => {
+    it('buildSpinnerClasses(variant, size, type) returns ux4g-spinner-${variant}-${type} with optional ux4g-spinner-${size} for non-md', () => {
+        const variantArb = fc.constantFrom('primary', 'inverse', 'danger');
+        const sizeArb = fc.constantFrom('xl', 'lg', 'md', 'sm', 'xs');
+        const typeArb = fc.constantFrom('full', 'split', 'partial');
+        fc.assert(fc.property(variantArb, sizeArb, typeArb, (variant, size, type) => {
+            const result = buildSpinnerClasses(variant, size, type);
+            const base = `ux4g-spinner-${variant}-${type}`;
+            if (size === 'md') {
+                return result === base;
+            }
+            else {
+                return result === `${base} ux4g-spinner-${size}`;
+            }
+        }), { numRuns: 20 });
+    });
+});

package/dist/dom-generators/accordion.d.ts

@@ -0,0 +1,23 @@
+import { NodeDescriptor } from './types';
+import { AccordionArrowPosition, AccordionVariant } from '../types.js';
+export interface AccordionGeneratorProps {
+    items: Array<{
+        header: string;
+        content: string;
+        expanded?: boolean;
+        disabled?: boolean;
+    }>;
+    arrowPosition?: AccordionArrowPosition;
+    variant?: AccordionVariant;
+    multiExpand?: boolean;
+}
+/**
+ * Generates a complete Accordion DOM descriptor tree.
+ *
+ * Produces headers with `data-ux4g-accordion-toggle` for Runtime_JS,
+ * panels with unique IDs, aria-expanded on toggles, aria-controls
+ * referencing panel IDs, and role="region" on panels.
+ */
+export declare function generateAccordionDOM(props: AccordionGeneratorProps): NodeDescriptor;
+
+

package/dist/dom-generators/avatar.d.ts

@@ -0,0 +1,19 @@
+import { NodeDescriptor } from './types';
+import { AvatarSize } from '../types.js';
+export interface AvatarNativeGeneratorProps {
+    src?: string;
+    alt?: string;
+    size?: AvatarSize;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    fallbackInitials?: string;
+}
+/**
+ * Generates a complete Avatar DOM descriptor tree.
+ *
+ * Produces a container with avatar classes from buildAvatarClasses(),
+ * an img element with alt text (or fallback initials span),
+ * and an optional status indicator element.
+ */
+export declare function generateAvatarDOM(props: AvatarNativeGeneratorProps): NodeDescriptor;
+
+

package/dist/dom-generators/carousel.d.ts

@@ -0,0 +1,20 @@
+import { NodeDescriptor } from './types';
+export interface CarouselGeneratorProps {
+    slides: Array<{
+        content: string;
+        label?: string;
+    }>;
+    activeIndex?: number;
+    showIndicators?: boolean;
+    showNavigation?: boolean;
+}
+/**
+ * Generates a complete Carousel DOM descriptor tree.
+ *
+ * Produces a root element with `aria-roledescription="carousel"`, slide items with
+ * `role="group"` and `aria-roledescription="slide"`, navigation buttons with
+ * `data-ux4g-carousel-prev` and `data-ux4g-carousel-next` for Runtime_JS, and
+ * indicator dots for slide navigation.
+ */
+export declare function generateCarouselDOM(props: CarouselGeneratorProps): NodeDescriptor;
+

package/dist/dom-generators/chip.d.ts

@@ -0,0 +1,18 @@
+import { NodeDescriptor } from './types';
+import { ChipType, ChipSize } from '../types.js';
+export interface ChipNativeGeneratorProps {
+    label: string;
+    type?: ChipType;
+    size?: ChipSize;
+    active?: boolean;
+    dismissible?: boolean;
+}
+/**
+ * Generates a complete Chip DOM descriptor tree.
+ *
+ * Produces a chip container with CSS classes from `buildChipClasses()`,
+ * a label span, and an optional dismiss button with `aria-label="Remove {label}"`.
+ */
+export declare function generateChipDOM(props: ChipNativeGeneratorProps): NodeDescriptor;
+
+

package/dist/dom-generators/combobox.d.ts

@@ -0,0 +1,28 @@
+import { NodeDescriptor } from './types';
+import { ComboboxSize, ComboboxState } from '../types.js';
+export interface ComboboxGeneratorProps {
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    value?: string | string[];
+    inputValue?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: ComboboxSize;
+    state?: ComboboxState;
+    open?: boolean;
+}
+/**
+ * Generates a complete Combobox DOM descriptor tree.
+ *
+ * Produces an input with `role="combobox"` and `aria-autocomplete="list"`,
+ * a listbox with `role="listbox"`, and option items with `role="option"`.
+ * Supports `aria-activedescendant` pointing to the first selected option.
+ * Compatible with Runtime_JS MutationObserver-based initialization.
+ */
+export declare function generateComboboxDOM(props: ComboboxGeneratorProps): NodeDescriptor;
+
+

package/dist/dom-generators/date-picker.d.ts

@@ -0,0 +1,19 @@
+import { NodeDescriptor } from './types';
+export interface DatePickerGeneratorProps {
+    value?: string;
+    min?: string;
+    max?: string;
+    locale?: string;
+    displayMonth?: number;
+    displayYear?: number;
+}
+/**
+ * Generates a complete DatePicker DOM descriptor tree.
+ *
+ * Produces a calendar grid with `role="grid"`, day cells with `role="gridcell"`,
+ * month/year navigation buttons, weekday column headers with `role="columnheader"`,
+ * and full accessibility attributes including `aria-label` on each day cell and
+ * `aria-selected`/`aria-disabled` states.
+ */
+export declare function generateDatePickerDOM(props: DatePickerGeneratorProps): NodeDescriptor;
+

package/dist/dom-generators/dom-generators/accordion.d.ts

@@ -0,0 +1,21 @@
+import { NodeDescriptor } from './types.js';
+import { AccordionArrowPosition, AccordionVariant } from '../types.js';
+export interface AccordionGeneratorProps {
+    items: Array<{
+        header: string;
+        content: string;
+        expanded?: boolean;
+        disabled?: boolean;
+    }>;
+    arrowPosition?: AccordionArrowPosition;
+    variant?: AccordionVariant;
+    multiExpand?: boolean;
+}
+/**
+ * Generates a complete Accordion DOM descriptor tree.
+ *
+ * Produces headers with `data-ux4g-accordion-toggle` for Runtime_JS,
+ * panels with unique IDs, aria-expanded on toggles, aria-controls
+ * referencing panel IDs, and role="region" on panels.
+ */
+export declare function generateAccordionDOM(props: AccordionGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/avatar.d.ts

@@ -0,0 +1,17 @@
+import { NodeDescriptor } from './types.js';
+import { AvatarSize } from '../types.js';
+export interface AvatarNativeGeneratorProps {
+    src?: string;
+    alt?: string;
+    size?: AvatarSize;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+    fallbackInitials?: string;
+}
+/**
+ * Generates a complete Avatar DOM descriptor tree.
+ *
+ * Produces a container with avatar classes from buildAvatarClasses(),
+ * an img element with alt text (or fallback initials span),
+ * and an optional status indicator element.
+ */
+export declare function generateAvatarDOM(props: AvatarNativeGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/carousel.d.ts

@@ -0,0 +1,19 @@
+import { NodeDescriptor } from './types.js';
+export interface CarouselGeneratorProps {
+    slides: Array<{
+        content: string;
+        label?: string;
+    }>;
+    activeIndex?: number;
+    showIndicators?: boolean;
+    showNavigation?: boolean;
+}
+/**
+ * Generates a complete Carousel DOM descriptor tree.
+ *
+ * Produces a root element with `aria-roledescription="carousel"`, slide items with
+ * `role="group"` and `aria-roledescription="slide"`, navigation buttons with
+ * `data-ux4g-carousel-prev` and `data-ux4g-carousel-next` for Runtime_JS, and
+ * indicator dots for slide navigation.
+ */
+export declare function generateCarouselDOM(props: CarouselGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/chip.d.ts

@@ -0,0 +1,16 @@
+import { NodeDescriptor } from './types.js';
+import { ChipType, ChipSize } from '../types.js';
+export interface ChipNativeGeneratorProps {
+    label: string;
+    type?: ChipType;
+    size?: ChipSize;
+    active?: boolean;
+    dismissible?: boolean;
+}
+/**
+ * Generates a complete Chip DOM descriptor tree.
+ *
+ * Produces a chip container with CSS classes from `buildChipClasses()`,
+ * a label span, and an optional dismiss button with `aria-label="Remove {label}"`.
+ */
+export declare function generateChipDOM(props: ChipNativeGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/combobox.d.ts

@@ -0,0 +1,26 @@
+import { NodeDescriptor } from './types.js';
+import { ComboboxSize, ComboboxState } from '../types.js';
+export interface ComboboxGeneratorProps {
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    value?: string | string[];
+    inputValue?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: ComboboxSize;
+    state?: ComboboxState;
+    open?: boolean;
+}
+/**
+ * Generates a complete Combobox DOM descriptor tree.
+ *
+ * Produces an input with `role="combobox"` and `aria-autocomplete="list"`,
+ * a listbox with `role="listbox"`, and option items with `role="option"`.
+ * Supports `aria-activedescendant` pointing to the first selected option.
+ * Compatible with Runtime_JS MutationObserver-based initialization.
+ */
+export declare function generateComboboxDOM(props: ComboboxGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/date-picker.d.ts

@@ -0,0 +1,18 @@
+import { NodeDescriptor } from './types.js';
+export interface DatePickerGeneratorProps {
+    value?: string;
+    min?: string;
+    max?: string;
+    locale?: string;
+    displayMonth?: number;
+    displayYear?: number;
+}
+/**
+ * Generates a complete DatePicker DOM descriptor tree.
+ *
+ * Produces a calendar grid with `role="grid"`, day cells with `role="gridcell"`,
+ * month/year navigation buttons, weekday column headers with `role="columnheader"`,
+ * and full accessibility attributes including `aria-label` on each day cell and
+ * `aria-selected`/`aria-disabled` states.
+ */
+export declare function generateDatePickerDOM(props: DatePickerGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/drawer.d.ts

@@ -0,0 +1,17 @@
+import { NodeDescriptor } from './types.js';
+import { DrawerPlacement } from '../types.js';
+export interface DrawerGeneratorProps {
+    open?: boolean;
+    placement?: DrawerPlacement;
+    title?: string;
+    closable?: boolean;
+}
+/**
+ * Generates a complete Drawer DOM descriptor tree.
+ *
+ * Produces a backdrop element and a drawer panel with `role="dialog"`,
+ * `aria-modal="true"`, an optional close button with `data-ux4g-drawer-close`,
+ * and an optional title heading. Compatible with Runtime_JS
+ * MutationObserver-based initialization.
+ */
+export declare function generateDrawerDOM(props: DrawerGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/dropdown.d.ts

@@ -0,0 +1,26 @@
+import { NodeDescriptor } from './types.js';
+import { DropdownSize, DropdownState } from '../types.js';
+export interface DropdownGeneratorProps {
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+        group?: string;
+    }>;
+    value?: string | string[];
+    placeholder?: string;
+    searchable?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    size?: DropdownSize;
+    state?: DropdownState;
+    open?: boolean;
+}
+/**
+ * Generates a complete Dropdown DOM descriptor tree.
+ *
+ * Produces a trigger button with `data-ux4g-dropdown-toggle`, a menu container
+ * with `role="listbox"`, and option items with `role="option"` and `aria-selected`.
+ * Compatible with Runtime_JS MutationObserver-based initialization.
+ */
+export declare function generateDropdownDOM(props: DropdownGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/file-upload.d.ts

@@ -0,0 +1,20 @@
+import { NodeDescriptor } from './types.js';
+import { FileUploadState } from '../types.js';
+export interface FileUploadGeneratorProps {
+    files?: Array<{
+        name: string;
+        size: number;
+    }>;
+    accept?: string;
+    maxSizeBytes?: number;
+    multiple?: boolean;
+    state?: FileUploadState;
+}
+/**
+ * Generates a complete FileUpload DOM descriptor tree.
+ *
+ * Produces a drop zone with `role="button"`, a visually hidden file input,
+ * and a file list displaying name and size of each selected file.
+ * Compatible with Runtime_JS MutationObserver-based initialization.
+ */
+export declare function generateFileUploadDOM(props: FileUploadGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/id-generator.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a unique ID by combining the given prefix with an incrementing counter.
+ * Produces IDs like `ux4g-dropdown-1`, `ux4g-tab-panel-2`, etc.
+ */
+export declare function generateId(prefix: string): string;
+/**
+ * Resets the ID counter to zero. Useful for testing to ensure deterministic output.
+ */
+export declare function resetIdCounter(): void;

package/dist/dom-generators/dom-generators/index.d.ts

@@ -0,0 +1,27 @@
+export { NodeDescriptor, DOMGeneratorValidationError } from './types.js';
+export { generateId, resetIdCounter } from './id-generator.js';
+export { validateRequired, validateType, validateEnum, validateRange, validateArray, } from './validate.js';
+export { generateModalDOM } from './modal.js';
+export type { ModalGeneratorProps } from './modal.js';
+export { generateCarouselDOM, CarouselGeneratorProps } from './carousel.js';
+export { generateDropdownDOM, DropdownGeneratorProps } from './dropdown.js';
+export { generateTabsDOM, TabsGeneratorProps } from './tabs.js';
+export { generateAccordionDOM, AccordionGeneratorProps } from './accordion.js';
+export { generateTimePickerDOM, TimePickerGeneratorProps } from './time-picker.js';
+export { generateSearchDOM, SearchGeneratorProps } from './search.js';
+export { generateDrawerDOM, DrawerGeneratorProps } from './drawer.js';
+export { generateComboboxDOM, ComboboxGeneratorProps } from './combobox.js';
+export { generateDatePickerDOM, DatePickerGeneratorProps } from './date-picker.js';
+export { generateStepperDOM, StepperGeneratorProps } from './stepper.js';
+export { generateFileUploadDOM } from './file-upload.js';
+export type { FileUploadGeneratorProps } from './file-upload.js';
+export { generateProgressDOM, ProgressGeneratorProps } from './progress.js';
+export { generateTableDOM, TableGeneratorProps } from './table.js';
+export { generateOtpDOM, OtpGeneratorProps } from './otp.js';
+export { generateAvatarDOM } from './avatar.js';
+export type { AvatarNativeGeneratorProps } from './avatar.js';
+export { generateTooltipDOM } from './tooltip.js';
+export type { TooltipGeneratorProps } from './tooltip.js';
+export { generateChipDOM } from './chip.js';
+export type { ChipNativeGeneratorProps } from './chip.js';
+export { generatePopoverDOM, PopoverGeneratorProps } from './popover.js';

package/dist/dom-generators/dom-generators/modal.d.ts

@@ -0,0 +1,19 @@
+import { NodeDescriptor } from './types.js';
+import { ModalSize, ModalOpacity } from '../types.js';
+export interface ModalGeneratorProps {
+    open?: boolean;
+    size?: ModalSize;
+    title?: string;
+    closable?: boolean;
+    backdropOpacity?: ModalOpacity;
+    backdropBlur?: boolean;
+}
+/**
+ * Generates a complete Modal DOM descriptor tree.
+ *
+ * Produces a backdrop element and a modal dialog box with `role="dialog"`,
+ * `aria-modal="true"`, an optional close button with `data-ux4g-modal-close`,
+ * and an optional title heading. Compatible with Runtime_JS
+ * MutationObserver-based initialization.
+ */
+export declare function generateModalDOM(props: ModalGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/otp.d.ts

@@ -0,0 +1,16 @@
+import { NodeDescriptor } from './types.js';
+import { OtpInputState } from '../types.js';
+export interface OtpGeneratorProps {
+    length: number;
+    values?: string[];
+    state?: OtpInputState;
+    disabled?: boolean;
+}
+/**
+ * Generates a complete OTP Input DOM descriptor tree.
+ *
+ * Produces individual `<input>` cells each accepting a single character,
+ * with maxLength=1. The root container gets CSS classes from `buildOtpInputClasses(state)`.
+ * When disabled, each cell receives `aria-disabled="true"` and `disabled=true`.
+ */
+export declare function generateOtpDOM(props: OtpGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/popover.d.ts

@@ -0,0 +1,17 @@
+import { NodeDescriptor } from './types.js';
+import { PopoverPlacement } from '../types.js';
+export interface PopoverGeneratorProps {
+    placement?: PopoverPlacement;
+    show?: boolean;
+    triggerId?: string;
+}
+/**
+ * Generates a complete Popover DOM descriptor tree.
+ *
+ * Produces a trigger wrapper element with `data-ux4g-popover` and
+ * `aria-describedby` referencing the popover content container.
+ * The popover container uses CSS classes from `buildPopoverClasses()`
+ * for placement and visibility. Compatible with Runtime_JS
+ * MutationObserver-based initialization.
+ */
+export declare function generatePopoverDOM(props: PopoverGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/progress.d.ts

@@ -0,0 +1,16 @@
+import { NodeDescriptor } from './types.js';
+import { ProgressIndicatorType, ProgressIndicatorSize } from '../types.js';
+export interface ProgressGeneratorProps {
+    value: number;
+    type?: ProgressIndicatorType;
+    size?: ProgressIndicatorSize;
+    label?: string;
+}
+/**
+ * Generates a complete Progress Indicator DOM descriptor tree.
+ *
+ * Produces a progress element with `role="progressbar"`,
+ * `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
+ * Supports both 'bar' and 'circle' visualization types.
+ */
+export declare function generateProgressDOM(props: ProgressGeneratorProps): NodeDescriptor;

package/dist/dom-generators/dom-generators/search.d.ts

@@ -0,0 +1,20 @@
+import { NodeDescriptor } from './types.js';
+import { SearchSize } from '../types.js';
+export interface SearchGeneratorProps {
+    value?: string;
+    placeholder?: string;
+    suggestions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    showSuggestions?: boolean;
+    size?: SearchSize;
+}
+/**
+ * Generates a complete Search DOM descriptor tree.
+ *
+ * Produces a search input with `role="searchbox"`, a clear button visible when
+ * there is a value, and a suggestions listbox with `role="listbox"`.
+ * Compatible with Runtime_JS MutationObserver-based initialization.
+ */
+export declare function generateSearchDOM(props: SearchGeneratorProps): NodeDescriptor;