ux4g-components-web 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1,144 @@
+export type ButtonVariant = 'primary' | 'outline-primary' | 'text-primary' | 'tonal-primary' | 'danger' | 'outline-danger' | 'text-danger' | 'tonal-danger';
+export type ButtonSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type ButtonShape = 'rectangle' | 'pill';
+export declare const VARIANT_CLASS_MAP: Record<ButtonVariant, string>;
+export declare const SIZE_CLASS_MAP: Record<ButtonSize, string | null>;
+export declare 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 declare const SPINNER_VARIANT_CLASS_PART: Record<SpinnerVariant, string>;
+export declare const SPINNER_SIZE_CLASS_PART: Record<SpinnerSize, string>;
+export declare 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 declare function buildSpinnerClasses(variant: SpinnerVariant, size: SpinnerSize, type: SpinnerType, extra?: string): string;
+export type LinkVariant = 'default' | 'neutral';
+export type LinkSize = 'sm' | 'md';
+export declare 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 declare 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 declare 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 declare function buildImageContainerClasses(ratio?: ImageRatio, rounded?: boolean, overlay?: boolean, extra?: string): string;
+export type ChipType = 'filter' | 'choice' | 'input';
+export type ChipSize = 'md' | 'sm' | 'xs';
+export declare 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 declare function buildTagClasses(variant: TagVariant, color: TagColor, small?: boolean, extra?: string): string;
+export type DividerOrientation = 'horizontal' | 'vertical';
+export declare function buildDividerClasses(orientation: DividerOrientation, extra?: string): string;
+export type BreadcrumbSeparator = 'divider' | 'icon';
+export declare function buildBreadcrumbClasses(separator: BreadcrumbSeparator, extra?: string): string;
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export declare function buildCheckboxClasses(size: CheckboxSize, error?: boolean, extra?: string): string;
+export type RadioSize = 'sm' | 'md' | 'lg';
+export declare function buildRadioClasses(size: RadioSize, error?: boolean, extra?: string): string;
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export declare function buildSwitchClasses(size: SwitchSize, extra?: string): string;
+export type CardVariant = 'solid' | 'outline' | 'no-fill';
+export type CardLayout = 'vertical' | 'horizontal';
+export declare function buildCardClasses(variant: CardVariant, layout: CardLayout, extra?: string): string;
+export type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+export type InputState = 'default' | 'error' | 'success' | 'warning';
+export declare function buildInputContainerClasses(size: InputSize, state: InputState, extra?: string): string;
+export type ListVariant = 'default' | 'error' | 'success' | 'warning';
+export type ListSize = 's' | 'm' | 'l' | 'xl';
+export declare 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 declare 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 declare 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 declare function buildModalBackdropClasses(opacity: ModalOpacity, blur?: boolean, open?: boolean, extra?: string): string;
+export declare 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 declare function buildAlertClasses(variant: AlertVariant, layout?: AlertLayout, extra?: string): string;
+export declare function buildContextAlertClasses(variant: AlertVariant, extra?: string): string;
+export declare function buildAlertContainerClasses(position: AlertPosition, extra?: string): string;
+export type SearchSize = 's' | 'm' | 'lg';
+export declare function buildSearchContainerClasses(size: SearchSize, extra?: string): string;
+export type PaginationVariant = 'default' | 'dotted';
+export type PaginationStyle = 'default' | 'solid' | 'translucent';
+export declare 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 declare 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 declare 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 declare function buildTooltipClasses(placement: TooltipPlacement, size: TooltipSize, extra?: string): string;
+export type TabVariant = 'underline' | 'pill';
+export type TabSize = 'sm' | 'md' | 'lg';
+export declare 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 declare function buildIconButtonClasses(variant: IconButtonVariant, size: IconButtonSize, pill?: boolean, extra?: string): string;
+export declare function buildAccessibilityBarClasses(extra?: string): string;
+export type AccordionArrowPosition = 'right' | 'left';
+export type AccordionVariant = 'default' | 'bordered';
+export declare 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 declare function buildStepperClasses(orientation?: StepperOrientation, alignment?: StepperAlignment, variant?: StepperVariant, size?: StepperSize, extra?: string): string;
+export type SliderSize = 'sm' | 'md';
+export declare function buildSliderFieldClasses(size?: SliderSize, extra?: string): string;
+export type DrawerPlacement = 'right' | 'left' | 'top' | 'bottom';
+export declare function buildDrawerClasses(placement: DrawerPlacement, open?: boolean, extra?: string): string;
+export type DateTimePickerMode = 'date' | 'time';
+export declare 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 declare function buildStatusPipelineClasses(orientation?: StatusPipelineOrientation, alignment?: StatusPipelineAlignment, variant?: StatusPipelineVariant, size?: StatusPipelineSize, extra?: string): string;
+export type JourneyTimelineOrientation = 'vertical' | 'horizontal';
+export declare function buildJourneyTimelineClasses(orientation?: JourneyTimelineOrientation, extra?: string): string;
+export declare function buildFormFieldGroupClasses(extra?: string): string;
+export type OtpInputState = 'default' | 'success' | 'error' | 'locked';
+export declare function buildOtpInputClasses(state?: OtpInputState, extra?: string): string;
+export type FileUploadState = 'default' | 'default-vle' | 'selecting' | 'scanning' | 'uploaded' | 'uploaded-vle' | 'error';
+export declare function buildFileUploadClasses(state?: FileUploadState, extra?: string): string;
+export type ProgressIndicatorType = 'bar' | 'circle';
+export type ProgressIndicatorSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export declare function buildProgressIndicatorClasses(type: ProgressIndicatorType, extra?: string): string;
+export declare function buildFeedbackClasses(extra?: string): string;
+export type DraftStatusBannerVariant = 'default' | 'auto' | 'success';
+export declare function buildDraftStatusBannerClasses(variant?: DraftStatusBannerVariant, extra?: string): string;
+export type SlaProgressIndicatorType = 'circle' | 'linear' | 'badge';
+export declare function buildSlaProgressIndicatorClasses(type: SlaProgressIndicatorType, extra?: string): string;
+export declare function buildCarouselClasses(extra?: string): string;
+export declare function buildEmptyStateClasses(extra?: string): string;
+export type ChipGroupVariant = 'filter' | 'choice';
+export declare function buildChipGroupClasses(variant?: ChipGroupVariant, active?: boolean, extra?: string): string;
+export declare function buildNavbarClasses(extra?: string): string;
+export type SocialLinksSize = 'sm' | 'md' | 'lg';
+export declare function buildSocialLinksClasses(size?: SocialLinksSize, extra?: string): string;
+export type SlotGridVariant = 'weekly' | 'compact';
+export declare function buildSlotGridClasses(variant?: SlotGridVariant, extra?: string): string;
+export type FooterTheme = 'default' | 'primary' | 'dark';
+export declare function buildFooterClasses(theme?: FooterTheme, extra?: string): string;
+export type ResultListRowVariation = 'default' | 'v1' | 'v2' | 'v3' | 'v4' | 'v5';
+export declare function buildResultListRowClasses(variation?: ResultListRowVariation, extra?: string): string;

package/dist/types/index.mjs

@@ -0,0 +1,524 @@
+// Maps variant → CSS class
+const VARIANT_CLASS_MAP = {
+    'primary': 'ux4g-btn-primary',
+    'outline-primary': 'ux4g-btn-outline-primary',
+    'text-primary': 'ux4g-btn-text-primary',
+    'tonal-primary': 'ux4g-btn-tonal-primary',
+    'danger': 'ux4g-btn-danger',
+    'outline-danger': 'ux4g-btn-outline-danger',
+    'text-danger': 'ux4g-btn-text-danger',
+    'tonal-danger': 'ux4g-btn-tonal-danger',
+};
+// Maps size → CSS class
+const SIZE_CLASS_MAP = {
+    'xl': 'ux4g-btn-xl',
+    'lg': 'ux4g-btn-lg',
+    'md': 'ux4g-btn-md',
+    'sm': 'ux4g-btn-sm',
+    'xs': 'ux4g-btn-xs',
+};
+// Pure utility — used by both React and Angular wrappers
+function buildButtonClasses(variant, size, disabled, loading, shape, extra) {
+    const classes = [VARIANT_CLASS_MAP[variant]];
+    const sizeClass = SIZE_CLASS_MAP[size];
+    if (sizeClass)
+        classes.push(sizeClass);
+    if (shape === 'pill')
+        classes.push('ux4g-btn-pill');
+    if (disabled)
+        classes.push('ux4g-btn-disabled');
+    if (loading)
+        classes.push('ux4g-btn-loading');
+    if (extra)
+        classes.push(extra);
+    return classes.join(' ');
+}
+const SPINNER_VARIANT_CLASS_PART = {
+    primary: 'primary',
+    inverse: 'inverse',
+    danger: 'danger',
+};
+const SPINNER_SIZE_CLASS_PART = {
+    xl: 'xl',
+    lg: 'lg',
+    md: 'md',
+    sm: 'sm',
+    xs: 'xs',
+};
+const SPINNER_TYPE_CLASS_PART = {
+    full: 'full',
+    split: 'split',
+    partial: 'partial',
+};
+/** 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)
+ */
+function buildSpinnerClasses(variant, size, type, extra) {
+    const base = `ux4g-spinner-${variant}-${type}`;
+    const sizeClass = size !== 'md' ? `ux4g-spinner-${size}` : null;
+    const parts = [base];
+    if (sizeClass)
+        parts.push(sizeClass);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildLinkClasses(variant, size, extra) {
+    const base = variant === 'neutral'
+        ? `ux4g-text-link-neutral-${size}`
+        : `ux4g-text-link-${size}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildBadgeClasses(type, color, size, extra) {
+    const parts = [`ux4g-badge-${type}-${color}`];
+    if (size)
+        parts.push(`ux4g-badge-${size}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildAvatarClasses(avatarType, size, extra) {
+    if (avatarType === 'group') {
+        return extra ? `ux4g-avatar-group ${extra}` : 'ux4g-avatar-group';
+    }
+    const parts = ['ux4g-avatar', `ux4g-avatar-${avatarType}`];
+    if (size)
+        parts.push(`ux4g-avatar-${size}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildImageContainerClasses(ratio, rounded, overlay, extra) {
+    const parts = [];
+    if (overlay)
+        parts.push('ux4g-img-overlay');
+    if (rounded)
+        parts.push('ux4g-img-rounded');
+    if (ratio)
+        parts.push(`ux4g-ratio-${ratio}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildChipClasses(chipType, size, active, extra) {
+    // xs is only valid for input chips; filter and choice clamp to sm
+    const effectiveSize = (chipType !== 'input' && size === 'xs') ? 'sm' : size;
+    const parts = [`ux4g-${chipType}-chip-${effectiveSize}`];
+    if (active)
+        parts.push('active');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildTagClasses(variant, color, small, extra) {
+    const parts = [`ux4g-tag-${variant}-${color}`];
+    if (small)
+        parts.push('ux4g-tag-s');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildDividerClasses(orientation, extra) {
+    const base = `ux4g-divider-${orientation}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildBreadcrumbClasses(separator, extra) {
+    const base = `ux4g-breadcrumb ux4g-breadcrumb-${separator}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildCheckboxClasses(size, error, extra) {
+    const parts = ['ux4g-checkbox', `ux4g-checkbox-${size}`];
+    if (error)
+        parts.push('ux4g-checkbox-error');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildRadioClasses(size, error, extra) {
+    const parts = ['ux4g-radio', `ux4g-radio-${size}`];
+    if (error)
+        parts.push('ux4g-radio-error');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildSwitchClasses(size, extra) {
+    const base = `ux4g-switch ux4g-switch-${size}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildCardClasses(variant, layout, extra) {
+    const parts = ['ux4g-card', `ux4g-card-${variant}`, `ux4g-card-${layout}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildInputContainerClasses(size, state, extra) {
+    const parts = ['ux4g-input-container', `ux4g-input-${size}`, `ux4g-input-${state}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildListClasses(variant, size, extra) {
+    const parts = ['ux4g-list', `ux4g-list-${variant}`, `ux4g-list-${size}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildDropdownClasses(type, mode, size, state, open, extra) {
+    const parts = [
+        'ux4g-dropdown',
+        `ux4g-dropdown-${type}`,
+        `ux4g-dropdown-${mode}`,
+        `ux4g-dropdown-${size}`,
+        `ux4g-dropdown-${state}`,
+    ];
+    if (open)
+        parts.push('is-open');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildComboboxClasses(type, size, state, open, extra) {
+    const parts = [
+        'ux4g-combobox',
+        `ux4g-combobox-${type}`,
+        `ux4g-combobox-${size}`,
+        `ux4g-combobox-${state}`,
+    ];
+    if (open)
+        parts.push('is-open');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildModalBackdropClasses(opacity, blur, open, extra) {
+    const parts = ['ux4g-modal-backdrop', `ux4g-modal-backdrop-${opacity}`];
+    if (blur)
+        parts.push('ux4g-modal-backdrop-blur');
+    if (open)
+        parts.push('is-open');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildModalBoxClasses(size, centerContent, extra) {
+    const parts = ['ux4g-modal-box', `ux4g-modal-${size}`];
+    if (centerContent)
+        parts.push('ux4g-modal-center-content');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildAlertClasses(variant, layout, extra) {
+    const parts = ['ux4g-alert', `ux4g-alert-${variant}`];
+    if (layout === 'center')
+        parts.push('ux4g-alert-center');
+    else if (layout === 'wide')
+        parts.push('ux4g-alert-wide');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildContextAlertClasses(variant, extra) {
+    const parts = ['ux4g-context-alert', `ux4g-alert-${variant}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildAlertContainerClasses(position, extra) {
+    const parts = ['ux4g-alert-container', `ux4g-alert-${position}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildSearchContainerClasses(size, extra) {
+    const base = `ux4g-search-container ux4g-search-${size}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildPaginationClasses(variant, paginationStyle, extra) {
+    const parts = ['ux4g-pagination'];
+    if (variant === 'dotted') {
+        parts.push('ux4g-pagination-dotted');
+        if (paginationStyle === 'solid')
+            parts.push('ux4g-pagination-solid');
+        else if (paginationStyle === 'translucent')
+            parts.push('ux4g-pagination-translucent');
+    }
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildTableClasses(size, divider, zebra, interactive, sortable, resizable, headerBrand, extra) {
+    const parts = ['ux4g-table', `ux4g-table-${size}`];
+    if (divider === 'column')
+        parts.push('ux4g-table-column-dividers');
+    else if (divider === 'none')
+        parts.push('ux4g-table-no-row-dividers');
+    if (zebra === 'rows')
+        parts.push('ux4g-table-zebra-rows');
+    else if (zebra === 'cols')
+        parts.push('ux4g-table-zebra-cols');
+    if (interactive)
+        parts.push('ux4g-table-interactive');
+    if (sortable)
+        parts.push('ux4g-table-sortable');
+    if (resizable)
+        parts.push('ux4g-table-resizable');
+    if (headerBrand)
+        parts.push('ux4g-table-header-brand');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildPopoverClasses(placement, show, extra) {
+    const parts = ['ux4g-popover', `ux4g-popover-${placement}`];
+    if (show)
+        parts.push('show');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildTooltipClasses(placement, size, extra) {
+    const parts = ['ux4g-tooltip', `ux4g-tooltip-${placement}`, `ux4g-tooltip-${size}`];
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildTabClasses(variant, size, vertical, extra) {
+    const parts = ['ux4g-tab', `ux4g-tab-${variant}`, `ux4g-tab-${size}`];
+    if (vertical)
+        parts.push('ux4g-tab-vertical');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildIconButtonClasses(variant, size, pill, extra) {
+    const parts = ['ux4g-icon-btn', `ux4g-icon-btn-${variant}`, `ux4g-icon-btn-${size}`];
+    if (pill)
+        parts.push('ux4g-icon-btn-pill');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+// -- Accessibility Bar --------------------------------------------------------
+function buildAccessibilityBarClasses(extra) {
+    return extra ? `ux4g-topbar ${extra}` : 'ux4g-topbar';
+}
+function buildAccordionClasses(arrowPosition, variant, extra) {
+    const parts = ['ux4g-accordion'];
+    if (arrowPosition === 'right')
+        parts.push('ux4g-accordion-arrow-right');
+    else if (arrowPosition === 'left')
+        parts.push('ux4g-accordion-arrow-left');
+    if (variant === 'bordered')
+        parts.push('ux4g-accordion-bordered');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildStepperClasses(orientation, alignment, variant, size, extra) {
+    const parts = ['ux4g-stepper'];
+    if (orientation === 'vertical') {
+        parts.push('ux4g-stepper-vertical');
+    }
+    else {
+        // horizontal (default) — only add classes if alignment is non-default
+        if (alignment === 'center') {
+            parts.push('ux4g-stepper-horizontal');
+            parts.push('ux4g-stepper-center');
+        }
+        else if (alignment === 'left') {
+            parts.push('ux4g-stepper-horizontal');
+            parts.push('ux4g-stepper-left');
+        }
+    }
+    if (variant === 'bottom-line')
+        parts.push('ux4g-stepper-bottom-line');
+    else if (variant === 'bottom-line-fill') {
+        parts.push('ux4g-stepper-bottom-line');
+        parts.push('ux4g-stepper-bottom-line-fill');
+    }
+    else if (variant === 'mobile')
+        parts.push('ux4g-stepper-mobile');
+    else if (variant === 'progress')
+        parts.push('ux4g-stepper-progress');
+    if (size === 's')
+        parts.push('ux4g-stepper-s');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildSliderFieldClasses(size, extra) {
+    const parts = ['ux4g-slider-field'];
+    if (size === 'md')
+        parts.push('ux4g-slider-md');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildDrawerClasses(placement, open, extra) {
+    const parts = ['ux4g-drawer', `ux4g-drawer-${placement}`];
+    if (open)
+        parts.push('ux4g-drawer-open');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildDateTimePickerClasses(mode, extra) {
+    const base = mode === 'date' ? 'ux4g-date-picker-container' : 'ux4g-time-picker-container';
+    return extra ? `${base} ${extra}` : base;
+}
+function buildStatusPipelineClasses(orientation, alignment, variant, size, extra) {
+    const parts = ['ux4g-status-pipeline-stepper'];
+    if (orientation === 'vertical') {
+        parts.push('ux4g-status-pipeline-vertical');
+        // alignment is IGNORED when orientation='vertical'
+    }
+    else {
+        // horizontal (default) — only add classes if alignment is non-default
+        if (alignment === 'center') {
+            parts.push('ux4g-status-pipeline-horizontal');
+            parts.push('ux4g-status-pipeline-center');
+        }
+        else if (alignment === 'left') {
+            parts.push('ux4g-status-pipeline-horizontal');
+            parts.push('ux4g-status-pipeline-left');
+        }
+    }
+    if (variant === 'bottom-line') {
+        parts.push('ux4g-status-pipeline-bottom-line');
+    }
+    else if (variant === 'bottom-line-fill') {
+        parts.push('ux4g-status-pipeline-bottom-line');
+        parts.push('ux4g-status-pipeline-bottom-line-fill');
+    }
+    else if (variant === 'mobile') {
+        parts.push('ux4g-status-pipeline-mobile');
+    }
+    else if (variant === 'progress') {
+        parts.push('ux4g-status-pipeline-progress');
+    }
+    if (size === 's')
+        parts.push('ux4g-status-pipeline-s');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildJourneyTimelineClasses(orientation, extra) {
+    const effectiveOrientation = orientation ?? 'vertical';
+    const base = `ux4g-journey-timeline ux4g-journey-timeline--${effectiveOrientation}`;
+    return extra ? `${base} ${extra}` : base;
+}
+// -- Form Field Group ---------------------------------------------------------
+function buildFormFieldGroupClasses(extra) {
+    return extra ? `ux4g-form-group ${extra}` : 'ux4g-form-group';
+}
+function buildOtpInputClasses(state, extra) {
+    const parts = ['ux4g-otp'];
+    if (state && state !== 'default')
+        parts.push(`ux4g-otp-${state}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildFileUploadClasses(state, extra) {
+    const parts = ['ux4g-upload'];
+    if (state)
+        parts.push(`ux4g-upload-state-${state}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+function buildProgressIndicatorClasses(type, extra) {
+    const base = type === 'bar' ? 'ux4g-progress-bar' : 'ux4g-progress-circle';
+    return extra ? `${base} ${extra}` : base;
+}
+// -- Feedback -----------------------------------------------------------------
+function buildFeedbackClasses(extra) {
+    return extra ? `ux4g-feedback ${extra}` : 'ux4g-feedback';
+}
+function buildDraftStatusBannerClasses(variant, extra) {
+    let base;
+    if (variant === 'auto') {
+        base = 'ux4g-auto-daft-staus-bar';
+    }
+    else if (variant === 'success') {
+        base = 'ux4g-success-daft-staus-bar';
+    }
+    else {
+        // 'default' or undefined
+        base = 'ux4g-daft-staus-bar';
+    }
+    return extra ? `${base} ${extra}` : base;
+}
+function buildSlaProgressIndicatorClasses(type, extra) {
+    const base = `ux4g-sla-${type}`;
+    return extra ? `${base} ${extra}` : base;
+}
+// -- Carousel -----------------------------------------------------------------
+function buildCarouselClasses(extra) {
+    return extra ? `ux4g-carousel ${extra}` : 'ux4g-carousel';
+}
+// -- Empty State --------------------------------------------------------------
+function buildEmptyStateClasses(extra) {
+    return extra ? `ux4g-empty-state ${extra}` : 'ux4g-empty-state';
+}
+function buildChipGroupClasses(variant, active, extra) {
+    const base = variant === 'choice' ? 'ux4g-choice-chip-group' : 'ux4g-filter-chip-group';
+    const parts = [base];
+    if (active)
+        parts.push('active');
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+// -- Navbar -------------------------------------------------------------------
+function buildNavbarClasses(extra) {
+    return extra ? `ux4g-navbar ${extra}` : 'ux4g-navbar';
+}
+function buildSocialLinksClasses(size, extra) {
+    let gapClass;
+    if (size === 'sm') {
+        gapClass = 'ux4g-gap-xs';
+    }
+    else if (size === 'lg') {
+        gapClass = 'ux4g-gap-m';
+    }
+    else {
+        // 'md' or undefined (default)
+        gapClass = 'ux4g-gap-s';
+    }
+    const base = `ux4g-d-flex ${gapClass}`;
+    return extra ? `${base} ${extra}` : base;
+}
+function buildSlotGridClasses(variant, extra) {
+    const base = variant === 'compact'
+        ? 'ux4g-time-slot-compact-container'
+        : 'ux4g-time-slot-weekly-container';
+    return extra ? `${base} ${extra}` : base;
+}
+function buildFooterClasses(theme, extra) {
+    let base;
+    if (theme === 'primary')
+        base = 'ux4g-footer-primary';
+    else if (theme === 'dark')
+        base = 'ux4g-footer-dark';
+    else
+        base = '';
+    if (extra)
+        return base ? `${base} ${extra}` : extra;
+    return base;
+}
+function buildResultListRowClasses(variation, extra) {
+    const parts = ['ux4g-result-list'];
+    if (variation && variation !== 'default')
+        parts.push(`ux4g-result-list-${variation}`);
+    if (extra)
+        parts.push(extra);
+    return parts.join(' ');
+}
+
+export { SIZE_CLASS_MAP, SPINNER_SIZE_CLASS_PART, SPINNER_TYPE_CLASS_PART, SPINNER_VARIANT_CLASS_PART, VARIANT_CLASS_MAP, buildAccessibilityBarClasses, buildAccordionClasses, buildAlertClasses, buildAlertContainerClasses, buildAvatarClasses, buildBadgeClasses, buildBreadcrumbClasses, buildButtonClasses, buildCardClasses, buildCarouselClasses, buildCheckboxClasses, buildChipClasses, buildChipGroupClasses, buildComboboxClasses, buildContextAlertClasses, buildDateTimePickerClasses, buildDividerClasses, buildDraftStatusBannerClasses, buildDrawerClasses, buildDropdownClasses, buildEmptyStateClasses, buildFeedbackClasses, buildFileUploadClasses, buildFooterClasses, buildFormFieldGroupClasses, buildIconButtonClasses, buildImageContainerClasses, buildInputContainerClasses, buildJourneyTimelineClasses, buildLinkClasses, buildListClasses, buildModalBackdropClasses, buildModalBoxClasses, buildNavbarClasses, buildOtpInputClasses, buildPaginationClasses, buildPopoverClasses, buildProgressIndicatorClasses, buildRadioClasses, buildResultListRowClasses, buildSearchContainerClasses, buildSlaProgressIndicatorClasses, buildSliderFieldClasses, buildSlotGridClasses, buildSocialLinksClasses, buildSpinnerClasses, buildStatusPipelineClasses, buildStepperClasses, buildSwitchClasses, buildTabClasses, buildTableClasses, buildTagClasses, buildTooltipClasses };