ux4g-components-web 1.4.0 → 1.5.0

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

@@ -0,0 +1,654 @@
+declare module "dom-generators/types" {
+    /**
+     * Represents a single DOM element in a tree structure.
+     * DOM Generator functions return trees of NodeDescriptor objects
+     * which framework wrappers convert to rendered output.
+     */
+    export interface NodeDescriptor {
+        tag: string;
+        props: {
+            className?: string;
+            id?: string;
+            role?: string;
+            tabIndex?: number;
+            [key: string]: string | boolean | number | undefined;
+        };
+        children: (NodeDescriptor | string)[];
+    }
+    /**
+     * Error thrown when a DOM Generator receives an invalid prop value.
+     * Provides detailed context about which component, prop, and value caused the issue.
+     */
+    export class DOMGeneratorValidationError extends Error {
+        componentName: string;
+        propName: string;
+        propValue: unknown;
+        expectedType: string;
+        constructor(componentName: string, propName: string, propValue: unknown, expectedType: string);
+    }
+}
+declare module "dom-generators/id-generator" {
+    /**
+     * 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 function generateId(prefix: string): string;
+    /**
+     * Resets the ID counter to zero. Useful for testing to ensure deterministic output.
+     */
+    export function resetIdCounter(): void;
+}
+declare module "dom-generators/validate" {
+    /**
+     * Throws if the value is null or undefined.
+     */
+    export function validateRequired(componentName: string, propName: string, value: unknown): void;
+    /**
+     * Throws if typeof value does not match the expected type string.
+     */
+    export function validateType(componentName: string, propName: string, value: unknown, expectedType: string): void;
+    /**
+     * Throws if the value is not a member of the allowed values set.
+     */
+    export function validateEnum(componentName: string, propName: string, value: unknown, allowedValues: readonly unknown[]): void;
+    /**
+     * Throws if the numeric value is outside the given [min, max] range (inclusive).
+     */
+    export function validateRange(componentName: string, propName: string, value: unknown, min: number, max: number): void;
+    /**
+     * Throws if the value is not an array.
+     */
+    export function validateArray(componentName: string, propName: string, value: unknown): void;
+}
+declare module "types" {
+    export type ButtonVariant = 'primary' | 'outline-primary' | 'text-primary' | 'tonal-primary' | 'danger' | 'outline-danger' | 'text-danger' | 'tonal-danger' | 'outline-neutral' | 'text-neutral';
+    export type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    export type ButtonShape = 'rectangle' | 'pill';
+    export const VARIANT_CLASS_MAP: Record<ButtonVariant, string>;
+    export const SIZE_CLASS_MAP: Record<ButtonSize, string | null>;
+    export function buildButtonClasses(variant: ButtonVariant, size: ButtonSize, disabled: boolean, loading: boolean, shape?: ButtonShape, extra?: string): string;
+    export type SpinnerVariant = 'primary' | 'inverse' | 'danger';
+    export type SpinnerSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    export type SpinnerType = 'full' | 'split' | 'partial';
+    export const SPINNER_VARIANT_CLASS_PART: Record<SpinnerVariant, string>;
+    export const SPINNER_SIZE_CLASS_PART: Record<SpinnerSize, string>;
+    export const SPINNER_TYPE_CLASS_PART: Record<SpinnerType, string>;
+    /** Returns the CSS class(es) for a spinner.
+     *  Base class: `ux4g-spinner-{variant}-{type}` (always present)
+     *  Size class:  `ux4g-spinner-{size}` (omitted when size is 'md' — the default)
+     *  e.g. `ux4g-spinner-primary-full` (md default)
+     *       `ux4g-spinner-primary-full ux4g-spinner-xl` (xl size)
+     */
+    export function buildSpinnerClasses(variant: SpinnerVariant, size: SpinnerSize, type: SpinnerType, extra?: string): string;
+    export type LinkVariant = 'default' | 'neutral';
+    export type LinkSize = 'sm' | 'md';
+    export function buildLinkClasses(variant: LinkVariant, size: LinkSize, extra?: string): string;
+    export type BadgeType = 'dot' | 'icon' | 'digit';
+    export type BadgeColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary' | 'tertiary' | 'neutral';
+    export type BadgeSize = 's' | 'm' | 'l' | 'profile-l' | 'profile-xl' | 'profile-2xl' | 'profile-3xl';
+    export function buildBadgeClasses(type: BadgeType, color: BadgeColor, size?: BadgeSize, extra?: string): string;
+    export type AvatarType = 'status' | 'profile' | 'group';
+    export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+    export function buildAvatarClasses(avatarType: AvatarType, size?: AvatarSize, extra?: string): string;
+    export type ImageRatio = '1-1' | '4-3' | '3-2' | '16-10' | '16-9' | '2-1' | '5-2' | '3-1' | '1-16' | '2-3' | '3-4';
+    export type ImageOverlayPosition = 'bottom' | 'top';
+    export function buildImageContainerClasses(ratio?: ImageRatio, rounded?: boolean, overlay?: boolean, extra?: string): string;
+    export type ChipType = 'filter' | 'choice' | 'input';
+    export type ChipSize = 'md' | 'sm' | 'xs';
+    export function buildChipClasses(chipType: ChipType, size: ChipSize, active?: boolean, extra?: string): string;
+    export type TagVariant = 'tonal' | 'filled' | 'outline' | 'text';
+    export type TagColor = 'neutral' | 'brand' | 'success' | 'warning' | 'error' | 'info';
+    export function buildTagClasses(variant: TagVariant, color: TagColor, small?: boolean, extra?: string): string;
+    export type DividerOrientation = 'horizontal' | 'vertical';
+    export function buildDividerClasses(orientation: DividerOrientation, extra?: string): string;
+    export type BreadcrumbSeparator = 'divider' | 'icon';
+    export function buildBreadcrumbClasses(separator: BreadcrumbSeparator, extra?: string): string;
+    export type CheckboxSize = 'sm' | 'md' | 'lg';
+    export function buildCheckboxClasses(size: CheckboxSize, error?: boolean, extra?: string): string;
+    export type RadioSize = 'sm' | 'md' | 'lg';
+    export function buildRadioClasses(size: RadioSize, error?: boolean, extra?: string): string;
+    export type SwitchSize = 'sm' | 'md' | 'lg';
+    export function buildSwitchClasses(size: SwitchSize, extra?: string): string;
+    export type CardVariant = 'solid' | 'outline' | 'no-fill';
+    export type CardLayout = 'vertical' | 'horizontal';
+    export function buildCardClasses(variant: CardVariant, layout: CardLayout, extra?: string): string;
+    export type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+    export type InputState = 'default' | 'error' | 'success' | 'warning';
+    export function buildInputContainerClasses(size: InputSize, state: InputState, extra?: string): string;
+    export type ListVariant = 'default' | 'error' | 'success' | 'warning';
+    export type ListSize = 's' | 'm' | 'l' | 'xl';
+    export function buildListClasses(variant: ListVariant, size: ListSize, extra?: string): string;
+    export type DropdownType = 'selection' | 'button' | 'overflow';
+    export type DropdownMode = 'single' | 'multi';
+    export type DropdownSize = 'sm' | 'md' | 'lg';
+    export type DropdownState = 'default' | 'error' | 'success' | 'warning';
+    export function buildDropdownClasses(type: DropdownType, mode: DropdownMode, size: DropdownSize, state: DropdownState, open?: boolean, extra?: string): string;
+    export type ComboboxType = 'single' | 'multi';
+    export type ComboboxSize = 'sm' | 'md' | 'lg';
+    export type ComboboxState = 'default' | 'error' | 'success' | 'warning';
+    export function buildComboboxClasses(type: ComboboxType, size: ComboboxSize, state: ComboboxState, open?: boolean, extra?: string): string;
+    export type ModalSize = 's' | 'm' | 'l';
+    export type ModalOpacity = '25' | '50' | '75';
+    export function buildModalBackdropClasses(opacity: ModalOpacity, blur?: boolean, open?: boolean, extra?: string): string;
+    export function buildModalBoxClasses(size: ModalSize, centerContent?: boolean, extra?: string): string;
+    export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+    export type AlertLayout = 'fluid' | 'center' | 'wide';
+    export type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    export function buildAlertClasses(variant: AlertVariant, layout?: AlertLayout, extra?: string): string;
+    export function buildContextAlertClasses(variant: AlertVariant, extra?: string): string;
+    export function buildAlertContainerClasses(position: AlertPosition, extra?: string): string;
+    export type SearchSize = 's' | 'm' | 'lg';
+    export function buildSearchContainerClasses(size: SearchSize, extra?: string): string;
+    export type PaginationVariant = 'default' | 'dotted';
+    export type PaginationStyle = 'default' | 'solid' | 'translucent';
+    export function buildPaginationClasses(variant: PaginationVariant, paginationStyle?: PaginationStyle, extra?: string): string;
+    export type TableSize = 's' | 'm' | 'lg';
+    export type TableDivider = 'row' | 'column' | 'none';
+    export type TableZebra = 'none' | 'rows' | 'cols';
+    export function buildTableClasses(size: TableSize, divider?: TableDivider, zebra?: TableZebra, interactive?: boolean, sortable?: boolean, resizable?: boolean, headerBrand?: boolean, extra?: string): string;
+    export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+    export function buildPopoverClasses(placement: PopoverPlacement, show?: boolean, extra?: string): string;
+    export type TooltipPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-center' | 'right-center';
+    export type TooltipSize = 's' | 'xs';
+    export function buildTooltipClasses(placement: TooltipPlacement, size: TooltipSize, extra?: string): string;
+    export type TabVariant = 'underline' | 'pill';
+    export type TabSize = 'sm' | 'md' | 'lg';
+    export function buildTabClasses(variant: TabVariant, size: TabSize, vertical?: boolean, extra?: string): string;
+    export type IconButtonVariant = 'primary' | 'outline-primary' | 'tonal-primary' | 'text-primary';
+    export type IconButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+    export function buildIconButtonClasses(variant: IconButtonVariant, size: IconButtonSize, pill?: boolean, extra?: string): string;
+    export function buildAccessibilityBarClasses(extra?: string): string;
+    export type AccordionArrowPosition = 'right' | 'left';
+    export type AccordionVariant = 'default' | 'bordered';
+    export function buildAccordionClasses(arrowPosition?: AccordionArrowPosition, variant?: AccordionVariant, extra?: string): string;
+    export type StepperOrientation = 'horizontal' | 'vertical';
+    export type StepperAlignment = 'default' | 'center' | 'left';
+    export type StepperVariant = 'default' | 'bottom-line' | 'bottom-line-fill' | 'mobile' | 'progress';
+    export type StepperSize = 'default' | 's';
+    export function buildStepperClasses(orientation?: StepperOrientation, alignment?: StepperAlignment, variant?: StepperVariant, size?: StepperSize, extra?: string): string;
+    export type SliderSize = 'sm' | 'md';
+    export function buildSliderFieldClasses(size?: SliderSize, extra?: string): string;
+    export type DrawerPlacement = 'right' | 'left' | 'top' | 'bottom';
+    export function buildDrawerClasses(placement: DrawerPlacement, open?: boolean, extra?: string): string;
+    export type DateTimePickerMode = 'date' | 'time';
+    export function buildDateTimePickerClasses(mode: DateTimePickerMode, extra?: string): string;
+    export type StatusPipelineOrientation = 'horizontal' | 'vertical';
+    export type StatusPipelineAlignment = 'default' | 'center' | 'left';
+    export type StatusPipelineVariant = 'default' | 'bottom-line' | 'bottom-line-fill' | 'mobile' | 'progress';
+    export type StatusPipelineSize = 'default' | 's';
+    export function buildStatusPipelineClasses(orientation?: StatusPipelineOrientation, alignment?: StatusPipelineAlignment, variant?: StatusPipelineVariant, size?: StatusPipelineSize, extra?: string): string;
+    export type JourneyTimelineOrientation = 'vertical' | 'horizontal';
+    export function buildJourneyTimelineClasses(orientation?: JourneyTimelineOrientation, extra?: string): string;
+    export function buildFormFieldGroupClasses(extra?: string): string;
+    export type OtpInputState = 'default' | 'success' | 'error' | 'locked';
+    export function buildOtpInputClasses(state?: OtpInputState, extra?: string): string;
+    export type FileUploadState = 'default' | 'default-vle' | 'selecting' | 'scanning' | 'uploaded' | 'uploaded-vle' | 'error';
+    export function buildFileUploadClasses(state?: FileUploadState, extra?: string): string;
+    export type ProgressIndicatorType = 'bar' | 'circle';
+    export type ProgressIndicatorSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+    export function buildProgressIndicatorClasses(type: ProgressIndicatorType, extra?: string): string;
+    export function buildFeedbackClasses(extra?: string): string;
+    export type DraftStatusBannerVariant = 'default' | 'auto' | 'success';
+    export function buildDraftStatusBannerClasses(variant?: DraftStatusBannerVariant, extra?: string): string;
+    export type SlaProgressIndicatorType = 'circle' | 'linear' | 'badge';
+    export function buildSlaProgressIndicatorClasses(type: SlaProgressIndicatorType, extra?: string): string;
+    export function buildCarouselClasses(extra?: string): string;
+    export function buildEmptyStateClasses(extra?: string): string;
+    export type ChipGroupVariant = 'filter' | 'choice';
+    export function buildChipGroupClasses(variant?: ChipGroupVariant, active?: boolean, extra?: string): string;
+    export function buildNavbarClasses(extra?: string): string;
+    export type SocialLinksSize = 'sm' | 'md' | 'lg';
+    export function buildSocialLinksClasses(size?: SocialLinksSize, extra?: string): string;
+    export type SlotGridVariant = 'weekly' | 'compact';
+    export function buildSlotGridClasses(variant?: SlotGridVariant, extra?: string): string;
+    export type FooterTheme = 'default' | 'primary' | 'dark';
+    export function buildFooterClasses(theme?: FooterTheme, extra?: string): string;
+    export type ResultListRowVariation = 'default' | 'v1' | 'v2' | 'v3' | 'v4' | 'v5';
+    export function buildResultListRowClasses(variation?: ResultListRowVariation, extra?: string): string;
+    /** Returns the CSS class string for the mega-menu root element.
+     *  Base class: `ux4g-mega-menu` (always present)
+     *  Dropdown:   `ux4g-mega-menu--dropdown` (when dropdown is true)
+     *  Right:      `ux4g-mega-menu--dropdown-right` (only when BOTH dropdown AND dropdownRight are true)
+     */
+    export function buildMegaMenuClasses(dropdown?: boolean, dropdownRight?: boolean, extra?: string): string;
+    /** Returns the CSS class string for the mega-menu wrapper element (dropdown positioning context).
+     *  Base class: `ux4g-mega-menu-wrapper` (always present)
+     *  Active:     `ux4g-mega-menu-wrapper--active` (when active is true)
+     */
+    export function buildMegaMenuWrapperClasses(active?: boolean, extra?: string): string;
+}
+declare module "dom-generators/modal" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { ModalSize, ModalOpacity } from "types";
+    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 function generateModalDOM(props: ModalGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/carousel" {
+    import { NodeDescriptor } from "dom-generators/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 function generateCarouselDOM(props: CarouselGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/dropdown" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { DropdownSize, DropdownState } from "types";
+    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 function generateDropdownDOM(props: DropdownGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/tabs" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { TabVariant, TabSize } from "types";
+    export interface TabsGeneratorProps {
+        tabs: Array<{
+            label: string;
+            content: string;
+            disabled?: boolean;
+        }>;
+        activeIndex?: number;
+        variant?: TabVariant;
+        size?: TabSize;
+        vertical?: boolean;
+    }
+    /**
+     * Generates a complete Tabs DOM descriptor tree.
+     *
+     * Produces a tablist container with `role="tablist"`, individual tabs with
+     * `role="tab"` and `aria-selected`, and corresponding panels with
+     * `role="tabpanel"` and `aria-labelledby`.
+     */
+    export function generateTabsDOM(props: TabsGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/accordion" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { AccordionArrowPosition, AccordionVariant } from "types";
+    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 function generateAccordionDOM(props: AccordionGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/time-picker" {
+    import { NodeDescriptor } from "dom-generators/types";
+    export interface TimePickerGeneratorProps {
+        value?: string;
+        min?: string;
+        max?: string;
+        step?: number;
+        format?: '12h' | '24h';
+    }
+    /**
+     * Generates a complete TimePicker DOM descriptor tree.
+     *
+     * Produces hour, minute, and (for 12h format) period spinbutton elements
+     * with appropriate ARIA attributes: `role="spinbutton"`, `aria-valuemin`,
+     * `aria-valuemax`, `aria-valuenow`, and `aria-label`.
+     *
+     * The root element uses CSS classes from `buildDateTimePickerClasses('time')`.
+     */
+    export function generateTimePickerDOM(props: TimePickerGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/search" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { SearchSize } from "types";
+    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 function generateSearchDOM(props: SearchGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/drawer" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { DrawerPlacement } from "types";
+    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 function generateDrawerDOM(props: DrawerGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/combobox" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { ComboboxSize, ComboboxState } from "types";
+    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 function generateComboboxDOM(props: ComboboxGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/date-picker" {
+    import { NodeDescriptor } from "dom-generators/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 function generateDatePickerDOM(props: DatePickerGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/stepper" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { StepperOrientation, StepperVariant, StepperSize } from "types";
+    export interface StepperGeneratorProps {
+        steps: Array<{
+            label: string;
+            description?: string;
+        }>;
+        activeStep: number;
+        orientation?: StepperOrientation;
+        variant?: StepperVariant;
+        size?: StepperSize;
+    }
+    /**
+     * Generates a complete Stepper DOM descriptor tree.
+     *
+     * Produces step indicators with completed/current/pending states.
+     * Steps before `activeStep` are marked as completed, the step at
+     * `activeStep` has `aria-current="step"`, and subsequent steps
+     * are marked as pending.
+     */
+    export function generateStepperDOM(props: StepperGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/file-upload" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { FileUploadState } from "types";
+    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 function generateFileUploadDOM(props: FileUploadGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/progress" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { ProgressIndicatorType, ProgressIndicatorSize } from "types";
+    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 function generateProgressDOM(props: ProgressGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/table" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { TableSize, TableDivider, TableZebra } from "types";
+    export interface TableGeneratorProps {
+        columns: Array<{
+            key: string;
+            label: string;
+            sortable?: boolean;
+            width?: string;
+        }>;
+        data: Array<Record<string, unknown>>;
+        size?: TableSize;
+        divider?: TableDivider;
+        zebra?: TableZebra;
+        interactive?: boolean;
+    }
+    /**
+     * Generates a complete Table DOM descriptor tree.
+     *
+     * Produces a `<table>` with `<thead>` containing one `<th>` per column
+     * and `<tbody>` containing one `<tr>` per data row, each with one `<td>` per column.
+     * Sortable columns receive `aria-sort="none"` on their `<th>`.
+     */
+    export function generateTableDOM(props: TableGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/otp" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { OtpInputState } from "types";
+    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 function generateOtpDOM(props: OtpGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/avatar" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { AvatarSize } from "types";
+    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 function generateAvatarDOM(props: AvatarNativeGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/tooltip" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { TooltipPlacement, TooltipSize } from "types";
+    export interface TooltipGeneratorProps {
+        text: string;
+        placement?: TooltipPlacement;
+        size?: TooltipSize;
+        triggerId?: string;
+    }
+    /**
+     * Generates a complete Tooltip DOM descriptor tree.
+     *
+     * Produces a tooltip container with `role="tooltip"`, an arrow element,
+     * `data-ux4g-tooltip` on the trigger element, `data-placement` for positioning,
+     * and `aria-describedby` on the trigger referencing the tooltip ID.
+     * Compatible with Runtime_JS MutationObserver-based initialization.
+     */
+    export function generateTooltipDOM(props: TooltipGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/chip" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { ChipType, ChipSize } from "types";
+    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 function generateChipDOM(props: ChipNativeGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/popover" {
+    import { NodeDescriptor } from "dom-generators/types";
+    import { PopoverPlacement } from "types";
+    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 function generatePopoverDOM(props: PopoverGeneratorProps): NodeDescriptor;
+}
+declare module "dom-generators/index" {
+    export { NodeDescriptor, DOMGeneratorValidationError } from "dom-generators/types";
+    export { generateId, resetIdCounter } from "dom-generators/id-generator";
+    export { validateRequired, validateType, validateEnum, validateRange, validateArray, } from "dom-generators/validate";
+    export { generateModalDOM } from "dom-generators/modal";
+    export type { ModalGeneratorProps } from "dom-generators/modal";
+    export { generateCarouselDOM, CarouselGeneratorProps } from "dom-generators/carousel";
+    export { generateDropdownDOM, DropdownGeneratorProps } from "dom-generators/dropdown";
+    export { generateTabsDOM, TabsGeneratorProps } from "dom-generators/tabs";
+    export { generateAccordionDOM, AccordionGeneratorProps } from "dom-generators/accordion";
+    export { generateTimePickerDOM, TimePickerGeneratorProps } from "dom-generators/time-picker";
+    export { generateSearchDOM, SearchGeneratorProps } from "dom-generators/search";
+    export { generateDrawerDOM, DrawerGeneratorProps } from "dom-generators/drawer";
+    export { generateComboboxDOM, ComboboxGeneratorProps } from "dom-generators/combobox";
+    export { generateDatePickerDOM, DatePickerGeneratorProps } from "dom-generators/date-picker";
+    export { generateStepperDOM, StepperGeneratorProps } from "dom-generators/stepper";
+    export { generateFileUploadDOM } from "dom-generators/file-upload";
+    export type { FileUploadGeneratorProps } from "dom-generators/file-upload";
+    export { generateProgressDOM, ProgressGeneratorProps } from "dom-generators/progress";
+    export { generateTableDOM, TableGeneratorProps } from "dom-generators/table";
+    export { generateOtpDOM, OtpGeneratorProps } from "dom-generators/otp";
+    export { generateAvatarDOM } from "dom-generators/avatar";
+    export type { AvatarNativeGeneratorProps } from "dom-generators/avatar";
+    export { generateTooltipDOM } from "dom-generators/tooltip";
+    export type { TooltipGeneratorProps } from "dom-generators/tooltip";
+    export { generateChipDOM } from "dom-generators/chip";
+    export type { ChipNativeGeneratorProps } from "dom-generators/chip";
+    export { generatePopoverDOM, PopoverGeneratorProps } from "dom-generators/popover";
+}