@siemens/ix-react 3.2.0 → 4.0.0

package/dist/components.server.js

@@ -1,113 +1,12 @@
-import { defineCustomElement, IxActionCard as IxActionCard$1 } from '@siemens/ix/components/ix-action-card.js';
-import { defineCustomElement as defineCustomElement$2, IxApplicationHeader as IxApplicationHeader$1 } from '@siemens/ix/components/ix-application-header.js';
-import { defineCustomElement as defineCustomElement$1, IxApplication as IxApplication$1 } from '@siemens/ix/components/ix-application.js';
-import { defineCustomElement as defineCustomElement$3, IxAvatar as IxAvatar$1 } from '@siemens/ix/components/ix-avatar.js';
-import { defineCustomElement as defineCustomElement$4, IxBasicNavigation as IxBasicNavigation$1 } from '@siemens/ix/components/ix-basic-navigation.js';
-import { defineCustomElement as defineCustomElement$5, IxBlind as IxBlind$1 } from '@siemens/ix/components/ix-blind.js';
-import { defineCustomElement as defineCustomElement$7, IxBreadcrumbItem as IxBreadcrumbItem$1 } from '@siemens/ix/components/ix-breadcrumb-item.js';
-import { defineCustomElement as defineCustomElement$6, IxBreadcrumb as IxBreadcrumb$1 } from '@siemens/ix/components/ix-breadcrumb.js';
-import { defineCustomElement as defineCustomElement$8, IxButton as IxButton$1 } from '@siemens/ix/components/ix-button.js';
-import { defineCustomElement as defineCustomElement$a, IxCardAccordion as IxCardAccordion$1 } from '@siemens/ix/components/ix-card-accordion.js';
-import { defineCustomElement as defineCustomElement$b, IxCardContent as IxCardContent$1 } from '@siemens/ix/components/ix-card-content.js';
-import { defineCustomElement as defineCustomElement$c, IxCardList as IxCardList$1 } from '@siemens/ix/components/ix-card-list.js';
-import { defineCustomElement as defineCustomElement$d, IxCardTitle as IxCardTitle$1 } from '@siemens/ix/components/ix-card-title.js';
-import { defineCustomElement as defineCustomElement$9, IxCard as IxCard$1 } from '@siemens/ix/components/ix-card.js';
-import { defineCustomElement as defineCustomElement$e, IxCategoryFilter as IxCategoryFilter$1 } from '@siemens/ix/components/ix-category-filter.js';
-import { defineCustomElement as defineCustomElement$g, IxCheckboxGroup as IxCheckboxGroup$1 } from '@siemens/ix/components/ix-checkbox-group.js';
-import { defineCustomElement as defineCustomElement$f, IxCheckbox as IxCheckbox$1 } from '@siemens/ix/components/ix-checkbox.js';
-import { defineCustomElement as defineCustomElement$h, IxChip as IxChip$1 } from '@siemens/ix/components/ix-chip.js';
-import { defineCustomElement as defineCustomElement$i, IxCol as IxCol$1 } from '@siemens/ix/components/ix-col.js';
-import { defineCustomElement as defineCustomElement$k, IxContentHeader as IxContentHeader$1 } from '@siemens/ix/components/ix-content-header.js';
-import { defineCustomElement as defineCustomElement$j, IxContent as IxContent$1 } from '@siemens/ix/components/ix-content.js';
-import { defineCustomElement as defineCustomElement$l, IxCustomField as IxCustomField$1 } from '@siemens/ix/components/ix-custom-field.js';
-import { defineCustomElement as defineCustomElement$m, IxDateDropdown as IxDateDropdown$1 } from '@siemens/ix/components/ix-date-dropdown.js';
-import { defineCustomElement as defineCustomElement$n, IxDateInput as IxDateInput$1 } from '@siemens/ix/components/ix-date-input.js';
-import { defineCustomElement as defineCustomElement$o, IxDatePicker as IxDatePicker$1 } from '@siemens/ix/components/ix-date-picker.js';
-import { defineCustomElement as defineCustomElement$p, IxDatetimePicker as IxDatetimePicker$1 } from '@siemens/ix/components/ix-datetime-picker.js';
-import { defineCustomElement as defineCustomElement$q, IxDivider as IxDivider$1 } from '@siemens/ix/components/ix-divider.js';
-import { defineCustomElement as defineCustomElement$r, IxDrawer as IxDrawer$1 } from '@siemens/ix/components/ix-drawer.js';
-import { defineCustomElement as defineCustomElement$t, IxDropdownButton as IxDropdownButton$1 } from '@siemens/ix/components/ix-dropdown-button.js';
-import { defineCustomElement as defineCustomElement$u, IxDropdownHeader as IxDropdownHeader$1 } from '@siemens/ix/components/ix-dropdown-header.js';
-import { defineCustomElement as defineCustomElement$v, IxDropdownItem as IxDropdownItem$1 } from '@siemens/ix/components/ix-dropdown-item.js';
-import { defineCustomElement as defineCustomElement$w, IxDropdownQuickActions as IxDropdownQuickActions$1 } from '@siemens/ix/components/ix-dropdown-quick-actions.js';
-import { defineCustomElement as defineCustomElement$s, IxDropdown as IxDropdown$1 } from '@siemens/ix/components/ix-dropdown.js';
-import { defineCustomElement as defineCustomElement$x, IxEmptyState as IxEmptyState$1 } from '@siemens/ix/components/ix-empty-state.js';
-import { defineCustomElement as defineCustomElement$z, IxEventListItem as IxEventListItem$1 } from '@siemens/ix/components/ix-event-list-item.js';
-import { defineCustomElement as defineCustomElement$y, IxEventList as IxEventList$1 } from '@siemens/ix/components/ix-event-list.js';
-import { defineCustomElement as defineCustomElement$A, IxExpandingSearch as IxExpandingSearch$1 } from '@siemens/ix/components/ix-expanding-search.js';
-import { defineCustomElement as defineCustomElement$B, IxFieldLabel as IxFieldLabel$1 } from '@siemens/ix/components/ix-field-label.js';
-import { defineCustomElement as defineCustomElement$C, IxFilterChip as IxFilterChip$1 } from '@siemens/ix/components/ix-filter-chip.js';
-import { defineCustomElement as defineCustomElement$E, IxFlipTileContent as IxFlipTileContent$1 } from '@siemens/ix/components/ix-flip-tile-content.js';
-import { defineCustomElement as defineCustomElement$D, IxFlipTile as IxFlipTile$1 } from '@siemens/ix/components/ix-flip-tile.js';
-import { defineCustomElement as defineCustomElement$G, IxGroupContextMenu as IxGroupContextMenu$1 } from '@siemens/ix/components/ix-group-context-menu.js';
-import { defineCustomElement as defineCustomElement$H, IxGroupItem as IxGroupItem$1 } from '@siemens/ix/components/ix-group-item.js';
-import { defineCustomElement as defineCustomElement$F, IxGroup as IxGroup$1 } from '@siemens/ix/components/ix-group.js';
-import { defineCustomElement as defineCustomElement$I, IxHelperText as IxHelperText$1 } from '@siemens/ix/components/ix-helper-text.js';
-import { defineCustomElement as defineCustomElement$J, IxIconButton as IxIconButton$1 } from '@siemens/ix/components/ix-icon-button.js';
-import { defineCustomElement as defineCustomElement$K, IxIconToggleButton as IxIconToggleButton$1 } from '@siemens/ix/components/ix-icon-toggle-button.js';
-import { defineCustomElement as defineCustomElement$M, IxInputGroup as IxInputGroup$1 } from '@siemens/ix/components/ix-input-group.js';
-import { defineCustomElement as defineCustomElement$L, IxInput as IxInput$1 } from '@siemens/ix/components/ix-input.js';
-import { defineCustomElement as defineCustomElement$O, IxKeyValueList as IxKeyValueList$1 } from '@siemens/ix/components/ix-key-value-list.js';
-import { defineCustomElement as defineCustomElement$N, IxKeyValue as IxKeyValue$1 } from '@siemens/ix/components/ix-key-value.js';
-import { defineCustomElement as defineCustomElement$P, IxKpi as IxKpi$1 } from '@siemens/ix/components/ix-kpi.js';
-import { defineCustomElement as defineCustomElement$Q, IxLayoutAuto as IxLayoutAuto$1 } from '@siemens/ix/components/ix-layout-auto.js';
-import { defineCustomElement as defineCustomElement$R, IxLayoutGrid as IxLayoutGrid$1 } from '@siemens/ix/components/ix-layout-grid.js';
-import { defineCustomElement as defineCustomElement$S, IxLinkButton as IxLinkButton$1 } from '@siemens/ix/components/ix-link-button.js';
-import { defineCustomElement as defineCustomElement$U, IxMapNavigationOverlay as IxMapNavigationOverlay$1 } from '@siemens/ix/components/ix-map-navigation-overlay.js';
-import { defineCustomElement as defineCustomElement$T, IxMapNavigation as IxMapNavigation$1 } from '@siemens/ix/components/ix-map-navigation.js';
-import { defineCustomElement as defineCustomElement$X, IxMenuAboutItem as IxMenuAboutItem$1 } from '@siemens/ix/components/ix-menu-about-item.js';
-import { defineCustomElement as defineCustomElement$Y, IxMenuAboutNews as IxMenuAboutNews$1 } from '@siemens/ix/components/ix-menu-about-news.js';
-import { defineCustomElement as defineCustomElement$W, IxMenuAbout as IxMenuAbout$1 } from '@siemens/ix/components/ix-menu-about.js';
-import { defineCustomElement as defineCustomElement$_, IxMenuAvatarItem as IxMenuAvatarItem$1 } from '@siemens/ix/components/ix-menu-avatar-item.js';
-import { defineCustomElement as defineCustomElement$Z, IxMenuAvatar as IxMenuAvatar$1 } from '@siemens/ix/components/ix-menu-avatar.js';
-import { defineCustomElement as defineCustomElement$$, IxMenuCategory as IxMenuCategory$1 } from '@siemens/ix/components/ix-menu-category.js';
-import { defineCustomElement as defineCustomElement$10, IxMenuItem as IxMenuItem$1 } from '@siemens/ix/components/ix-menu-item.js';
-import { defineCustomElement as defineCustomElement$12, IxMenuSettingsItem as IxMenuSettingsItem$1 } from '@siemens/ix/components/ix-menu-settings-item.js';
-import { defineCustomElement as defineCustomElement$11, IxMenuSettings as IxMenuSettings$1 } from '@siemens/ix/components/ix-menu-settings.js';
-import { defineCustomElement as defineCustomElement$V, IxMenu as IxMenu$1 } from '@siemens/ix/components/ix-menu.js';
-import { defineCustomElement as defineCustomElement$13, IxMessageBar as IxMessageBar$1 } from '@siemens/ix/components/ix-message-bar.js';
-import { defineCustomElement as defineCustomElement$15, IxModalContent as IxModalContent$1 } from '@siemens/ix/components/ix-modal-content.js';
-import { defineCustomElement as defineCustomElement$16, IxModalFooter as IxModalFooter$1 } from '@siemens/ix/components/ix-modal-footer.js';
-import { defineCustomElement as defineCustomElement$17, IxModalHeader as IxModalHeader$1 } from '@siemens/ix/components/ix-modal-header.js';
-import { defineCustomElement as defineCustomElement$14, IxModal as IxModal$1 } from '@siemens/ix/components/ix-modal.js';
-import { defineCustomElement as defineCustomElement$18, IxNumberInput as IxNumberInput$1 } from '@siemens/ix/components/ix-number-input.js';
-import { defineCustomElement as defineCustomElement$19, IxPagination as IxPagination$1 } from '@siemens/ix/components/ix-pagination.js';
-import { defineCustomElement as defineCustomElement$1b, IxPaneLayout as IxPaneLayout$1 } from '@siemens/ix/components/ix-pane-layout.js';
-import { defineCustomElement as defineCustomElement$1a, IxPane as IxPane$1 } from '@siemens/ix/components/ix-pane.js';
-import { defineCustomElement as defineCustomElement$1c, IxPill as IxPill$1 } from '@siemens/ix/components/ix-pill.js';
-import { defineCustomElement as defineCustomElement$1d, IxProgressIndicator as IxProgressIndicator$1 } from '@siemens/ix/components/ix-progress-indicator.js';
-import { defineCustomElement as defineCustomElement$1e, IxPushCard as IxPushCard$1 } from '@siemens/ix/components/ix-push-card.js';
-import { defineCustomElement as defineCustomElement$1g, IxRadioGroup as IxRadioGroup$1 } from '@siemens/ix/components/ix-radio-group.js';
-import { defineCustomElement as defineCustomElement$1f, IxRadio as IxRadio$1 } from '@siemens/ix/components/ix-radio.js';
-import { defineCustomElement as defineCustomElement$1h, IxRow as IxRow$1 } from '@siemens/ix/components/ix-row.js';
-import { defineCustomElement as defineCustomElement$1j, IxSelectItem as IxSelectItem$1 } from '@siemens/ix/components/ix-select-item.js';
-import { defineCustomElement as defineCustomElement$1i, IxSelect as IxSelect$1 } from '@siemens/ix/components/ix-select.js';
-import { defineCustomElement as defineCustomElement$1k, IxSlider as IxSlider$1 } from '@siemens/ix/components/ix-slider.js';
-import { defineCustomElement as defineCustomElement$1l, IxSpinner as IxSpinner$1 } from '@siemens/ix/components/ix-spinner.js';
-import { defineCustomElement as defineCustomElement$1m, IxSplitButton as IxSplitButton$1 } from '@siemens/ix/components/ix-split-button.js';
-import { defineCustomElement as defineCustomElement$1n, IxTabItem as IxTabItem$1 } from '@siemens/ix/components/ix-tab-item.js';
-import { defineCustomElement as defineCustomElement$1o, IxTabs as IxTabs$1 } from '@siemens/ix/components/ix-tabs.js';
-import { defineCustomElement as defineCustomElement$1p, IxTextarea as IxTextarea$1 } from '@siemens/ix/components/ix-textarea.js';
-import { defineCustomElement as defineCustomElement$1q, IxTile as IxTile$1 } from '@siemens/ix/components/ix-tile.js';
-import { defineCustomElement as defineCustomElement$1r, IxTimeInput as IxTimeInput$1 } from '@siemens/ix/components/ix-time-input.js';
-import { defineCustomElement as defineCustomElement$1s, IxTimePicker as IxTimePicker$1 } from '@siemens/ix/components/ix-time-picker.js';
-import { defineCustomElement as defineCustomElement$1u, IxToastContainer as IxToastContainer$1 } from '@siemens/ix/components/ix-toast-container.js';
-import { defineCustomElement as defineCustomElement$1t, IxToast as IxToast$1 } from '@siemens/ix/components/ix-toast.js';
-import { defineCustomElement as defineCustomElement$1w, IxToggleButton as IxToggleButton$1 } from '@siemens/ix/components/ix-toggle-button.js';
-import { defineCustomElement as defineCustomElement$1v, IxToggle as IxToggle$1 } from '@siemens/ix/components/ix-toggle.js';
-import { defineCustomElement as defineCustomElement$1x, IxTooltip as IxTooltip$1 } from '@siemens/ix/components/ix-tooltip.js';
-import { defineCustomElement as defineCustomElement$1y, IxTypography as IxTypography$1 } from '@siemens/ix/components/ix-typography.js';
-import { defineCustomElement as defineCustomElement$1z, IxUpload as IxUpload$1 } from '@siemens/ix/components/ix-upload.js';
-import { defineCustomElement as defineCustomElement$1A, IxValidationTooltip as IxValidationTooltip$1 } from '@siemens/ix/components/ix-validation-tooltip.js';
-import { defineCustomElement as defineCustomElement$1B, IxWorkflowStep as IxWorkflowStep$1 } from '@siemens/ix/components/ix-workflow-step.js';
-import { defineCustomElement as defineCustomElement$1C, IxWorkflowSteps as IxWorkflowSteps$1 } from '@siemens/ix/components/ix-workflow-steps.js';
+import * as clientComponents from '@siemens/ix';
 import { createComponent } from '@stencil/react-output-target/ssr';
-import React from 'react';
 
 /**
  * This file was automatically generated by the Stencil React Output Target.
  * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
  */
+/* eslint-disable */
+// @ts-ignore - ignore potential type issues as the project is importing itself
 const serializeShadowRoot = { "scoped": [], "default": "declarative-shadow-dom" };
 const IxActionCard = /*@__PURE__*/ createComponent({
     tagName: 'ix-action-card',
@@ -121,12 +20,8 @@ const IxActionCard = /*@__PURE__*/ createComponent({
         ariaLabelCard: 'aria-label-card'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxActionCard,
     serializeShadowRoot,
-    elementClass: IxActionCard$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement
 });
 const IxApplication = /*@__PURE__*/ createComponent({
     tagName: 'ix-application',
@@ -138,32 +33,28 @@ const IxApplication = /*@__PURE__*/ createComponent({
         appSwitchConfig: 'app-switch-config'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxApplication,
     serializeShadowRoot,
-    elementClass: IxApplication$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1
 });
 const IxApplicationHeader = /*@__PURE__*/ createComponent({
     tagName: 'ix-application-header',
     properties: {
         name: 'name',
+        nameSuffix: 'name-suffix',
+        companyLogo: 'company-logo',
+        companyLogoAlt: 'company-logo-alt',
+        appIcon: 'app-icon',
+        appIconAlt: 'app-icon-alt',
+        appIconOutline: 'app-icon-outline',
+        hideBottomBorder: 'hide-bottom-border',
         showMenu: 'show-menu',
         ariaLabelMenuExpandIconButton: 'aria-label-menu-expand-icon-button',
         ariaLabelAppSwitchIconButton: 'aria-label-app-switch-icon-button',
         ariaLabelMoreMenuIconButton: 'aria-label-more-menu-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxApplicationHeader,
     serializeShadowRoot,
-    elementClass: IxApplicationHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onMenuToggle: 'menuToggle',
-        onOpenAppSwitch: 'openAppSwitch'
-    },
-    defineCustomElement: defineCustomElement$2
 });
 const IxAvatar = /*@__PURE__*/ createComponent({
     tagName: 'ix-avatar',
@@ -172,31 +63,13 @@ const IxAvatar = /*@__PURE__*/ createComponent({
         image: 'image',
         initials: 'initials',
         username: 'username',
-        extra: 'extra'
-    },
-    hydrateModule: import('@siemens/ix/hydrate'),
-    serializeShadowRoot,
-    elementClass: IxAvatar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$3
-});
-const IxBasicNavigation = /*@__PURE__*/ createComponent({
-    tagName: 'ix-basic-navigation',
-    properties: {
-        applicationName: 'application-name',
-        hideHeader: 'hide-header',
-        forceBreakpoint: 'force-breakpoint',
-        breakpoints: 'breakpoints'
+        extra: 'extra',
+        tooltipText: 'tooltip-text',
+        ariaLabelTooltip: 'aria-label-tooltip'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxAvatar,
     serializeShadowRoot,
-    elementClass: IxBasicNavigation$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$4
 });
 const IxBlind = /*@__PURE__*/ createComponent({
     tagName: 'ix-blind',
@@ -208,31 +81,20 @@ const IxBlind = /*@__PURE__*/ createComponent({
         variant: 'variant'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxBlind,
     serializeShadowRoot,
-    elementClass: IxBlind$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCollapsedChange: 'collapsedChange' },
-    defineCustomElement: defineCustomElement$5
 });
 const IxBreadcrumb = /*@__PURE__*/ createComponent({
     tagName: 'ix-breadcrumb',
     properties: {
         visibleItemCount: 'visible-item-count',
         nextItems: 'next-items',
-        ghost: 'ghost',
+        subtle: 'subtle',
         ariaLabelPreviousButton: 'aria-label-previous-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxBreadcrumb,
     serializeShadowRoot,
-    elementClass: IxBreadcrumb$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onItemClick: 'itemClick',
-        onNextClick: 'nextClick'
-    },
-    defineCustomElement: defineCustomElement$6
 });
 const IxBreadcrumbItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-breadcrumb-item',
@@ -240,41 +102,38 @@ const IxBreadcrumbItem = /*@__PURE__*/ createComponent({
         ariaLabelButton: 'aria-label-button',
         label: 'label',
         icon: 'icon',
-        ghost: 'ghost',
-        visible: 'visible',
-        showChevron: 'show-chevron',
+        href: 'href',
+        target: 'target',
+        rel: 'rel',
+        subtle: 'subtle',
+        invisible: 'invisible',
+        hideChevron: 'hide-chevron',
         isDropdownTrigger: 'is-dropdown-trigger'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxBreadcrumbItem,
     serializeShadowRoot,
-    elementClass: IxBreadcrumbItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$7
 });
 const IxButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-button',
     properties: {
         ariaLabelButton: 'aria-label-button',
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         disabled: 'disabled',
         type: 'type',
         loading: 'loading',
         form: 'form',
         icon: 'icon',
+        iconRight: 'icon-right',
         alignment: 'alignment',
-        iconSize: 'icon-size'
+        iconSize: 'icon-size',
+        href: 'href',
+        target: 'target',
+        rel: 'rel'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxButton,
     serializeShadowRoot,
-    elementClass: IxButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$8
 });
 const IxCard = /*@__PURE__*/ createComponent({
     tagName: 'ix-card',
@@ -283,37 +142,26 @@ const IxCard = /*@__PURE__*/ createComponent({
         selected: 'selected'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCard,
     serializeShadowRoot,
-    elementClass: IxCard$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$9
 });
 const IxCardAccordion = /*@__PURE__*/ createComponent({
     tagName: 'ix-card-accordion',
     properties: {
         ariaLabelExpandButton: 'aria-label-expand-button',
-        collapse: 'collapse'
+        collapse: 'collapse',
+        variant: 'variant'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCardAccordion,
     serializeShadowRoot,
-    elementClass: IxCardAccordion$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$a
 });
 const IxCardContent = /*@__PURE__*/ createComponent({
     tagName: 'ix-card-content',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCardContent,
     serializeShadowRoot,
-    elementClass: IxCardContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$b
 });
 const IxCardList = /*@__PURE__*/ createComponent({
     tagName: 'ix-card-list',
@@ -326,31 +174,19 @@ const IxCardList = /*@__PURE__*/ createComponent({
         showAllCount: 'show-all-count',
         suppressOverflowHandling: 'suppress-overflow-handling',
         hideShowAll: 'hide-show-all',
-        i18nShowAll: 'i-1-8n-show-all',
-        i18nMoreCards: 'i-1-8n-more-cards'
+        i18nShowAll: 'i18n-show-all',
+        i18nMoreCards: 'i18n-more-cards'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCardList,
     serializeShadowRoot,
-    elementClass: IxCardList$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onCollapseChanged: 'collapseChanged',
-        onShowAllClick: 'showAllClick',
-        onShowMoreCardClick: 'showMoreCardClick'
-    },
-    defineCustomElement: defineCustomElement$c
 });
 const IxCardTitle = /*@__PURE__*/ createComponent({
     tagName: 'ix-card-title',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCardTitle,
     serializeShadowRoot,
-    elementClass: IxCardTitle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$d
 });
 const IxCategoryFilter = /*@__PURE__*/ createComponent({
     tagName: 'ix-category-filter',
@@ -365,26 +201,16 @@ const IxCategoryFilter = /*@__PURE__*/ createComponent({
         icon: 'icon',
         hideIcon: 'hide-icon',
         staticOperator: 'static-operator',
-        repeatCategories: 'repeat-categories',
-        tmpDisableScrollIntoView: 'tmp-disable-scroll-into-view',
+        uniqueCategories: 'unique-categories',
         labelCategories: 'label-categories',
-        i18nPlainText: 'i-1-8n-plain-text',
+        i18nPlainText: 'i18n-plain-text',
         ariaLabelResetButton: 'aria-label-reset-button',
         ariaLabelOperatorButton: 'aria-label-operator-button',
         ariaLabelFilterInput: 'aria-label-filter-input'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCategoryFilter,
     serializeShadowRoot,
-    elementClass: IxCategoryFilter$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onCategoryChanged: 'categoryChanged',
-        onInputChanged: 'inputChanged',
-        onFilterChanged: 'filterChanged',
-        onFilterCleared: 'filterCleared'
-    },
-    defineCustomElement: defineCustomElement$e
 });
 const IxCheckbox = /*@__PURE__*/ createComponent({
     tagName: 'ix-checkbox',
@@ -398,16 +224,8 @@ const IxCheckbox = /*@__PURE__*/ createComponent({
         required: 'required'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCheckbox,
     serializeShadowRoot,
-    elementClass: IxCheckbox$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onCheckedChange: 'checkedChange',
-        onValueChange: 'valueChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$f
 });
 const IxCheckboxGroup = /*@__PURE__*/ createComponent({
     tagName: 'ix-checkbox-group',
@@ -423,18 +241,14 @@ const IxCheckboxGroup = /*@__PURE__*/ createComponent({
         required: 'required'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCheckboxGroup,
     serializeShadowRoot,
-    elementClass: IxCheckboxGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$g
 });
 const IxChip = /*@__PURE__*/ createComponent({
     tagName: 'ix-chip',
     properties: {
         variant: 'variant',
-        active: 'active',
+        inactive: 'inactive',
         closable: 'closable',
         icon: 'icon',
         background: 'background',
@@ -445,12 +259,8 @@ const IxChip = /*@__PURE__*/ createComponent({
         ariaLabelCloseButton: 'aria-label-close-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxChip,
     serializeShadowRoot,
-    elementClass: IxChip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseChip: 'closeChip' },
-    defineCustomElement: defineCustomElement$h
 });
 const IxCol = /*@__PURE__*/ createComponent({
     tagName: 'ix-col',
@@ -461,23 +271,15 @@ const IxCol = /*@__PURE__*/ createComponent({
         sizeLg: 'size-lg'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCol,
     serializeShadowRoot,
-    elementClass: IxCol$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$i
 });
 const IxContent = /*@__PURE__*/ createComponent({
     tagName: 'ix-content',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxContent,
     serializeShadowRoot,
-    elementClass: IxContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$j
 });
 const IxContentHeader = /*@__PURE__*/ createComponent({
     tagName: 'ix-content-header',
@@ -488,12 +290,8 @@ const IxContentHeader = /*@__PURE__*/ createComponent({
         hasBackButton: 'has-back-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxContentHeader,
     serializeShadowRoot,
-    elementClass: IxContentHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onBackButtonClick: 'backButtonClick' },
-    defineCustomElement: defineCustomElement$k
 });
 const IxCustomField = /*@__PURE__*/ createComponent({
     tagName: 'ix-custom-field',
@@ -508,31 +306,25 @@ const IxCustomField = /*@__PURE__*/ createComponent({
         showTextAsTooltip: 'show-text-as-tooltip'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxCustomField,
     serializeShadowRoot,
-    elementClass: IxCustomField$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$l
 });
 const IxDateDropdown = /*@__PURE__*/ createComponent({
     tagName: 'ix-date-dropdown',
     properties: {
         disabled: 'disabled',
         format: 'format',
-        range: 'range',
+        singleSelection: 'single-selection',
         from: 'from',
         to: 'to',
         minDate: 'min-date',
         maxDate: 'max-date',
         dateRangeId: 'date-range-id',
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         loading: 'loading',
         showWeekNumbers: 'show-week-numbers',
         ariaLabelDropdownButton: 'aria-label-dropdown-button',
-        customRangeAllowed: 'custom-range-allowed',
+        customRangeDisabled: 'custom-range-disabled',
         dateRangeOptions: 'date-range-options',
         locale: 'locale',
         weekStartIndex: 'week-start-index',
@@ -542,12 +334,8 @@ const IxDateDropdown = /*@__PURE__*/ createComponent({
         today: 'today'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDateDropdown,
     serializeShadowRoot,
-    elementClass: IxDateDropdown$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onDateRangeChange: 'dateRangeChange' },
-    defineCustomElement: defineCustomElement$m
 });
 const IxDateInput = /*@__PURE__*/ createComponent({
     tagName: 'ix-date-input',
@@ -577,21 +365,14 @@ const IxDateInput = /*@__PURE__*/ createComponent({
         ariaLabelNextMonthButton: 'aria-label-next-month-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDateInput,
     serializeShadowRoot,
-    elementClass: IxDateInput$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange'
-    },
-    defineCustomElement: defineCustomElement$n
 });
 const IxDatePicker = /*@__PURE__*/ createComponent({
     tagName: 'ix-date-picker',
     properties: {
         format: 'format',
-        range: 'range',
+        singleSelection: 'single-selection',
         corners: 'corners',
         from: 'from',
         to: 'to',
@@ -603,28 +384,17 @@ const IxDatePicker = /*@__PURE__*/ createComponent({
         weekStartIndex: 'week-start-index',
         locale: 'locale',
         showWeekNumbers: 'show-week-numbers',
-        standaloneAppearance: 'standalone-appearance',
+        embedded: 'embedded',
         today: 'today'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDatePicker,
     serializeShadowRoot,
-    elementClass: IxDatePicker$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDateChange: 'dateChange',
-        onDateRangeChange: 'dateRangeChange',
-        onDateSelect: 'dateSelect'
-    },
-    defineCustomElement: defineCustomElement$o
 });
 const IxDatetimePicker = /*@__PURE__*/ createComponent({
     tagName: 'ix-datetime-picker',
     properties: {
-        range: 'range',
-        showHour: 'show-hour',
-        showMinutes: 'show-minutes',
-        showSeconds: 'show-seconds',
+        singleSelection: 'single-selection',
         minDate: 'min-date',
         maxDate: 'max-date',
         dateFormat: 'date-format',
@@ -635,7 +405,7 @@ const IxDatetimePicker = /*@__PURE__*/ createComponent({
         showTimeReference: 'show-time-reference',
         timeReference: 'time-reference',
         i18nDone: 'i18n-done',
-        i18nTime: 'i-1-8n-time',
+        i18nTime: 'i18n-time',
         ariaLabelPreviousMonthButton: 'aria-label-previous-month-button',
         ariaLabelNextMonthButton: 'aria-label-next-month-button',
         weekStartIndex: 'week-start-index',
@@ -643,27 +413,15 @@ const IxDatetimePicker = /*@__PURE__*/ createComponent({
         showWeekNumbers: 'show-week-numbers'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDatetimePicker,
     serializeShadowRoot,
-    elementClass: IxDatetimePicker$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onTimeChange: 'timeChange',
-        onDateChange: 'dateChange',
-        onDateSelect: 'dateSelect'
-    },
-    defineCustomElement: defineCustomElement$p
 });
 const IxDivider = /*@__PURE__*/ createComponent({
     tagName: 'ix-divider',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDivider,
     serializeShadowRoot,
-    elementClass: IxDivider$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$q
 });
 const IxDrawer = /*@__PURE__*/ createComponent({
     tagName: 'ix-drawer',
@@ -677,15 +435,8 @@ const IxDrawer = /*@__PURE__*/ createComponent({
         ariaLabelCloseButton: 'aria-label-close-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDrawer,
     serializeShadowRoot,
-    elementClass: IxDrawer$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onOpen: 'open',
-        onDrawerClose: 'drawerClose'
-    },
-    defineCustomElement: defineCustomElement$r
 });
 const IxDropdown = /*@__PURE__*/ createComponent({
     tagName: 'ix-dropdown',
@@ -705,19 +456,13 @@ const IxDropdown = /*@__PURE__*/ createComponent({
         suppressOverflowBehavior: 'suppress-overflow-behavior'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDropdown,
     serializeShadowRoot,
-    elementClass: IxDropdown$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onShowChanged: 'showChanged' },
-    defineCustomElement: defineCustomElement$s
 });
 const IxDropdownButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-dropdown-button',
     properties: {
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         disabled: 'disabled',
         label: 'label',
         icon: 'icon',
@@ -726,23 +471,15 @@ const IxDropdownButton = /*@__PURE__*/ createComponent({
         ariaLabelDropdownButton: 'aria-label-dropdown-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDropdownButton,
     serializeShadowRoot,
-    elementClass: IxDropdownButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$t
 });
 const IxDropdownHeader = /*@__PURE__*/ createComponent({
     tagName: 'ix-dropdown-header',
     properties: { label: 'label' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDropdownHeader,
     serializeShadowRoot,
-    elementClass: IxDropdownHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$u
 });
 const IxDropdownItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-dropdown-item',
@@ -758,23 +495,15 @@ const IxDropdownItem = /*@__PURE__*/ createComponent({
         suppressChecked: 'suppress-checked'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDropdownItem,
     serializeShadowRoot,
-    elementClass: IxDropdownItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$v
 });
 const IxDropdownQuickActions = /*@__PURE__*/ createComponent({
     tagName: 'ix-dropdown-quick-actions',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxDropdownQuickActions,
     serializeShadowRoot,
-    elementClass: IxDropdownQuickActions$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$w
 });
 const IxEmptyState = /*@__PURE__*/ createComponent({
     tagName: 'ix-empty-state',
@@ -787,12 +516,8 @@ const IxEmptyState = /*@__PURE__*/ createComponent({
         ariaLabelEmptyStateIcon: 'aria-label-empty-state-icon'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxEmptyState,
     serializeShadowRoot,
-    elementClass: IxEmptyState$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onActionClick: 'actionClick' },
-    defineCustomElement: defineCustomElement$x
 });
 const IxEventList = /*@__PURE__*/ createComponent({
     tagName: 'ix-event-list',
@@ -803,28 +528,21 @@ const IxEventList = /*@__PURE__*/ createComponent({
         chevron: 'chevron'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxEventList,
     serializeShadowRoot,
-    elementClass: IxEventList$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$y
 });
 const IxEventListItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-event-list-item',
     properties: {
+        variant: 'variant',
         itemColor: 'item-color',
         selected: 'selected',
         disabled: 'disabled',
         chevron: 'chevron'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxEventListItem,
     serializeShadowRoot,
-    elementClass: IxEventListItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onItemClick: 'itemClick' },
-    defineCustomElement: defineCustomElement$z
 });
 const IxExpandingSearch = /*@__PURE__*/ createComponent({
     tagName: 'ix-expanding-search',
@@ -834,19 +552,13 @@ const IxExpandingSearch = /*@__PURE__*/ createComponent({
         value: 'value',
         fullWidth: 'full-width',
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         ariaLabelSearchIconButton: 'aria-label-search-icon-button',
         ariaLabelClearIconButton: 'aria-label-clear-icon-button',
         ariaLabelSearchInput: 'aria-label-search-input'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxExpandingSearch,
     serializeShadowRoot,
-    elementClass: IxExpandingSearch$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onValueChange: 'valueChange' },
-    defineCustomElement: defineCustomElement$A
 });
 const IxFieldLabel = /*@__PURE__*/ createComponent({
     tagName: 'ix-field-label',
@@ -857,12 +569,8 @@ const IxFieldLabel = /*@__PURE__*/ createComponent({
         isInvalid: 'is-invalid'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxFieldLabel,
     serializeShadowRoot,
-    elementClass: IxFieldLabel$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$B
 });
 const IxFilterChip = /*@__PURE__*/ createComponent({
     tagName: 'ix-filter-chip',
@@ -872,40 +580,28 @@ const IxFilterChip = /*@__PURE__*/ createComponent({
         ariaLabelCloseIconButton: 'aria-label-close-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxFilterChip,
     serializeShadowRoot,
-    elementClass: IxFilterChip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseClick: 'closeClick' },
-    defineCustomElement: defineCustomElement$C
 });
 const IxFlipTile = /*@__PURE__*/ createComponent({
     tagName: 'ix-flip-tile',
     properties: {
-        state: 'state',
+        variant: 'variant',
         height: 'height',
         width: 'width',
         index: 'index',
         ariaLabelEyeIconButton: 'aria-label-eye-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxFlipTile,
     serializeShadowRoot,
-    elementClass: IxFlipTile$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onToggle: 'toggle' },
-    defineCustomElement: defineCustomElement$D
 });
 const IxFlipTileContent = /*@__PURE__*/ createComponent({
     tagName: 'ix-flip-tile-content',
     properties: { contentVisible: 'content-visible' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxFlipTileContent,
     serializeShadowRoot,
-    elementClass: IxFlipTileContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$E
 });
 const IxGroup = /*@__PURE__*/ createComponent({
     tagName: 'ix-group',
@@ -913,33 +609,21 @@ const IxGroup = /*@__PURE__*/ createComponent({
         suppressHeaderSelection: 'suppress-header-selection',
         header: 'header',
         subHeader: 'sub-header',
-        collapsed: 'collapsed',
+        expanded: 'expanded',
         selected: 'selected',
         index: 'index',
         expandOnHeaderClick: 'expand-on-header-click'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxGroup,
     serializeShadowRoot,
-    elementClass: IxGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onSelectGroup: 'selectGroup',
-        onSelectItem: 'selectItem',
-        onCollapsedChanged: 'collapsedChanged'
-    },
-    defineCustomElement: defineCustomElement$F
 });
 const IxGroupContextMenu = /*@__PURE__*/ createComponent({
     tagName: 'ix-group-context-menu',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxGroupContextMenu,
     serializeShadowRoot,
-    elementClass: IxGroupContextMenu$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$G
 });
 const IxGroupItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-group-item',
@@ -949,17 +633,14 @@ const IxGroupItem = /*@__PURE__*/ createComponent({
         text: 'text',
         secondaryText: 'secondary-text',
         suppressSelection: 'suppress-selection',
+        groupFooter: 'group-footer',
         selected: 'selected',
-        focusable: 'focusable',
+        disabled: 'disabled',
         index: 'index'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxGroupItem,
     serializeShadowRoot,
-    elementClass: IxGroupItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onSelectedChanged: 'selectedChanged' },
-    defineCustomElement: defineCustomElement$H
 });
 const IxHelperText = /*@__PURE__*/ createComponent({
     tagName: 'ix-helper-text',
@@ -972,20 +653,14 @@ const IxHelperText = /*@__PURE__*/ createComponent({
         warningText: 'warning-text'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxHelperText,
     serializeShadowRoot,
-    elementClass: IxHelperText$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$I
 });
 const IxIconButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-icon-button',
     properties: {
         a11yLabel: 'a11y-label',
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         oval: 'oval',
         icon: 'icon',
         size: 'size',
@@ -995,12 +670,8 @@ const IxIconButton = /*@__PURE__*/ createComponent({
         loading: 'loading'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxIconButton,
     serializeShadowRoot,
-    elementClass: IxIconButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$J
 });
 const IxIconToggleButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-icon-toggle-button',
@@ -1017,12 +688,8 @@ const IxIconToggleButton = /*@__PURE__*/ createComponent({
         ariaLabelIconButton: 'aria-label-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxIconToggleButton,
     serializeShadowRoot,
-    elementClass: IxIconToggleButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onPressedChange: 'pressedChange' },
-    defineCustomElement: defineCustomElement$K
 });
 const IxInput = /*@__PURE__*/ createComponent({
     tagName: 'ix-input',
@@ -1047,27 +714,15 @@ const IxInput = /*@__PURE__*/ createComponent({
         allowedCharactersPattern: 'allowed-characters-pattern'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxInput,
     serializeShadowRoot,
-    elementClass: IxInput$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$L
 });
 const IxInputGroup = /*@__PURE__*/ createComponent({
     tagName: 'ix-input-group',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxInputGroup,
     serializeShadowRoot,
-    elementClass: IxInputGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$M
 });
 const IxKeyValue = /*@__PURE__*/ createComponent({
     tagName: 'ix-key-value',
@@ -1079,23 +734,15 @@ const IxKeyValue = /*@__PURE__*/ createComponent({
         value: 'value'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxKeyValue,
     serializeShadowRoot,
-    elementClass: IxKeyValue$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$N
 });
 const IxKeyValueList = /*@__PURE__*/ createComponent({
     tagName: 'ix-key-value-list',
     properties: { striped: 'striped' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxKeyValueList,
     serializeShadowRoot,
-    elementClass: IxKeyValueList$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$O
 });
 const IxKpi = /*@__PURE__*/ createComponent({
     tagName: 'ix-kpi',
@@ -1109,23 +756,15 @@ const IxKpi = /*@__PURE__*/ createComponent({
         orientation: 'orientation'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxKpi,
     serializeShadowRoot,
-    elementClass: IxKpi$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$P
 });
 const IxLayoutAuto = /*@__PURE__*/ createComponent({
     tagName: 'ix-layout-auto',
     properties: { layout: 'layout' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxLayoutAuto,
     serializeShadowRoot,
-    elementClass: IxLayoutAuto$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$Q
 });
 const IxLayoutGrid = /*@__PURE__*/ createComponent({
     tagName: 'ix-layout-grid',
@@ -1135,12 +774,8 @@ const IxLayoutGrid = /*@__PURE__*/ createComponent({
         columns: 'columns'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxLayoutGrid,
     serializeShadowRoot,
-    elementClass: IxLayoutGrid$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$R
 });
 const IxLinkButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-link-button',
@@ -1150,49 +785,8 @@ const IxLinkButton = /*@__PURE__*/ createComponent({
         target: 'target'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxLinkButton,
     serializeShadowRoot,
-    elementClass: IxLinkButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$S
-});
-const IxMapNavigation = /*@__PURE__*/ createComponent({
-    tagName: 'ix-map-navigation',
-    properties: {
-        applicationName: 'application-name',
-        navigationTitle: 'navigation-title',
-        hideContextMenu: 'hide-context-menu',
-        ariaLabelContextIconButton: 'aria-label-context-icon-button'
-    },
-    hydrateModule: import('@siemens/ix/hydrate'),
-    serializeShadowRoot,
-    elementClass: IxMapNavigation$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onNavigationToggled: 'navigationToggled',
-        onContextMenuClick: 'contextMenuClick'
-    },
-    defineCustomElement: defineCustomElement$T
-});
-const IxMapNavigationOverlay = /*@__PURE__*/ createComponent({
-    tagName: 'ix-map-navigation-overlay',
-    properties: {
-        name: 'name',
-        icon: 'icon',
-        ariaLabelIcon: 'aria-label-icon',
-        ariaLabelCloseIconButton: 'aria-label-close-icon-button',
-        color: 'color',
-        iconColor: 'icon-color'
-    },
-    hydrateModule: import('@siemens/ix/hydrate'),
-    serializeShadowRoot,
-    elementClass: IxMapNavigationOverlay$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseClick: 'closeClick' },
-    defineCustomElement: defineCustomElement$U
 });
 const IxMenu = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu',
@@ -1200,33 +794,22 @@ const IxMenu = /*@__PURE__*/ createComponent({
         showSettings: 'show-settings',
         showAbout: 'show-about',
         enableToggleTheme: 'enable-toggle-theme',
-        enableSettings: 'enable-settings',
         enableMapExpand: 'enable-map-expand',
         applicationName: 'application-name',
         applicationDescription: 'application-description',
-        i18nExpandSidebar: 'i-1-8n-expand-sidebar',
+        i18nExpandSidebar: 'i18n-expand-sidebar',
         expand: 'expand',
         startExpanded: 'start-expanded',
         pinned: 'pinned',
-        i18nLegal: 'i-1-8n-legal',
-        i18nSettings: 'i-1-8n-settings',
-        i18nToggleTheme: 'i-1-8n-toggle-theme',
-        i18nExpand: 'i-1-8n-expand',
-        i18nCollapse: 'i-1-8n-collapse'
+        i18nLegal: 'i18n-legal',
+        i18nSettings: 'i18n-settings',
+        i18nToggleTheme: 'i18n-toggle-theme',
+        i18nExpand: 'i18n-expand',
+        i18nCollapse: 'i18n-collapse'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenu,
     serializeShadowRoot,
-    elementClass: IxMenu$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onExpandChange: 'expandChange',
-        onMapExpandChange: 'mapExpandChange',
-        onOpenAppSwitch: 'openAppSwitch',
-        onOpenSettings: 'openSettings',
-        onOpenAbout: 'openAbout'
-    },
-    defineCustomElement: defineCustomElement$V
 });
 const IxMenuAbout = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about',
@@ -1236,47 +819,28 @@ const IxMenuAbout = /*@__PURE__*/ createComponent({
         show: 'show'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuAbout,
     serializeShadowRoot,
-    elementClass: IxMenuAbout$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onTabChange: 'tabChange',
-        onClose: 'close'
-    },
-    defineCustomElement: defineCustomElement$W
 });
 const IxMenuAboutItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about-item',
     properties: { label: 'label' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuAboutItem,
     serializeShadowRoot,
-    elementClass: IxMenuAboutItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onLabelChange: 'labelChange' },
-    defineCustomElement: defineCustomElement$X
 });
 const IxMenuAboutNews = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about-news',
     properties: {
         show: 'show',
         label: 'label',
-        i18nShowMore: 'i-1-8n-show-more',
+        i18nShowMore: 'i18n-show-more',
         aboutItemLabel: 'about-item-label',
-        offsetBottom: 'offset-bottom',
         expanded: 'expanded'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuAboutNews,
     serializeShadowRoot,
-    elementClass: IxMenuAboutNews$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onShowMore: 'showMore',
-        onClosePopover: 'closePopover'
-    },
-    defineCustomElement: defineCustomElement$Y
 });
 const IxMenuAvatar = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-avatar',
@@ -1285,16 +849,12 @@ const IxMenuAvatar = /*@__PURE__*/ createComponent({
         bottom: 'bottom',
         image: 'image',
         initials: 'initials',
-        i18nLogout: 'i-1-8n-logout',
-        showLogoutButton: 'show-logout-button'
+        i18nLogout: 'i18n-logout',
+        hideLogoutButton: 'hide-logout-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuAvatar,
     serializeShadowRoot,
-    elementClass: IxMenuAvatar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onLogoutClick: 'logoutClick' },
-    defineCustomElement: defineCustomElement$Z
 });
 const IxMenuAvatarItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-avatar-item',
@@ -1303,27 +863,20 @@ const IxMenuAvatarItem = /*@__PURE__*/ createComponent({
         label: 'label'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuAvatarItem,
     serializeShadowRoot,
-    elementClass: IxMenuAvatarItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onItemClick: 'itemClick' },
-    defineCustomElement: defineCustomElement$_
 });
 const IxMenuCategory = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-category',
     properties: {
         label: 'label',
         icon: 'icon',
-        notifications: 'notifications'
+        notifications: 'notifications',
+        tooltipText: 'tooltip-text'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuCategory,
     serializeShadowRoot,
-    elementClass: IxMenuCategory$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$$
 });
 const IxMenuItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-item',
@@ -1335,15 +888,15 @@ const IxMenuItem = /*@__PURE__*/ createComponent({
         notifications: 'notifications',
         active: 'active',
         disabled: 'disabled',
+        tooltipText: 'tooltip-text',
+        href: 'href',
+        target: 'target',
+        rel: 'rel',
         isCategory: 'is-category'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuItem,
     serializeShadowRoot,
-    elementClass: IxMenuItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$10
 });
 const IxMenuSettings = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-settings',
@@ -1353,87 +906,54 @@ const IxMenuSettings = /*@__PURE__*/ createComponent({
         show: 'show'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuSettings,
     serializeShadowRoot,
-    elementClass: IxMenuSettings$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onTabChange: 'tabChange',
-        onClose: 'close'
-    },
-    defineCustomElement: defineCustomElement$11
 });
 const IxMenuSettingsItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-settings-item',
     properties: { label: 'label' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMenuSettingsItem,
     serializeShadowRoot,
-    elementClass: IxMenuSettingsItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onLabelChange: 'labelChange' },
-    defineCustomElement: defineCustomElement$12
 });
 const IxMessageBar = /*@__PURE__*/ createComponent({
     tagName: 'ix-message-bar',
     properties: {
         type: 'type',
-        dismissible: 'dismissible'
+        persistent: 'persistent'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxMessageBar,
     serializeShadowRoot,
-    elementClass: IxMessageBar$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onClosedChange: 'closedChange',
-        onCloseAnimationCompleted: 'closeAnimationCompleted'
-    },
-    defineCustomElement: defineCustomElement$13
 });
 const IxModal = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal',
     properties: {
         size: 'size',
-        animation: 'animation',
-        backdrop: 'backdrop',
+        disableAnimation: 'disable-animation',
+        hideBackdrop: 'hide-backdrop',
         closeOnBackdropClick: 'close-on-backdrop-click',
         beforeDismiss: 'before-dismiss',
         centered: 'centered',
-        closeOnEscape: 'close-on-escape'
+        disableEscapeClose: 'disable-escape-close'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxModal,
     serializeShadowRoot,
-    elementClass: IxModal$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onDialogClose: 'dialogClose',
-        onDialogDismiss: 'dialogDismiss'
-    },
-    defineCustomElement: defineCustomElement$14
 });
 const IxModalContent = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal-content',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxModalContent,
     serializeShadowRoot,
-    elementClass: IxModalContent$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$15
 });
 const IxModalFooter = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal-footer',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxModalFooter,
     serializeShadowRoot,
-    elementClass: IxModalFooter$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$16
 });
 const IxModalHeader = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal-header',
@@ -1445,12 +965,8 @@ const IxModalHeader = /*@__PURE__*/ createComponent({
         iconColor: 'icon-color'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxModalHeader,
     serializeShadowRoot,
-    elementClass: IxModalHeader$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseClick: 'closeClick' },
-    defineCustomElement: defineCustomElement$17
 });
 const IxNumberInput = /*@__PURE__*/ createComponent({
     tagName: 'ix-number-input',
@@ -1476,41 +992,26 @@ const IxNumberInput = /*@__PURE__*/ createComponent({
         step: 'step'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxNumberInput,
     serializeShadowRoot,
-    elementClass: IxNumberInput$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$18
 });
 const IxPagination = /*@__PURE__*/ createComponent({
     tagName: 'ix-pagination',
     properties: {
         advanced: 'advanced',
         itemCount: 'item-count',
-        showItemCount: 'show-item-count',
+        hideItemCount: 'hide-item-count',
         count: 'count',
         selectedPage: 'selected-page',
-        i18nPage: 'i-1-8n-page',
-        i18nOf: 'i-1-8n-of',
-        i18nItems: 'i-1-8n-items',
+        i18nPage: 'i18n-page',
+        i18nOf: 'i18n-of',
+        i18nItems: 'i18n-items',
         ariaLabelChevronLeftIconButton: 'aria-label-chevron-left-icon-button',
         ariaLabelChevronRightIconButton: 'aria-label-chevron-right-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxPagination,
     serializeShadowRoot,
-    elementClass: IxPagination$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onPageSelected: 'pageSelected',
-        onItemCountChanged: 'itemCountChanged'
-    },
-    defineCustomElement: defineCustomElement$19
 });
 const IxPane = /*@__PURE__*/ createComponent({
     tagName: 'ix-pane',
@@ -1523,21 +1024,15 @@ const IxPane = /*@__PURE__*/ createComponent({
         expanded: 'expanded',
         composition: 'composition',
         icon: 'icon',
+        closeOnClickOutside: 'close-on-click-outside',
         ariaLabelIcon: 'aria-label-icon',
+        ariaLabelCollapseCloseButton: 'aria-label-collapse-close-button',
         ignoreLayoutSettings: 'ignore-layout-settings',
         isMobile: 'is-mobile'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxPane,
     serializeShadowRoot,
-    elementClass: IxPane$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onExpandedChanged: 'expandedChanged',
-        onVariantChanged: 'variantChanged',
-        onBorderlessChanged: 'borderlessChanged'
-    },
-    defineCustomElement: defineCustomElement$1a
 });
 const IxPaneLayout = /*@__PURE__*/ createComponent({
     tagName: 'ix-pane-layout',
@@ -1547,12 +1042,8 @@ const IxPaneLayout = /*@__PURE__*/ createComponent({
         borderless: 'borderless'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxPaneLayout,
     serializeShadowRoot,
-    elementClass: IxPaneLayout$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1b
 });
 const IxPill = /*@__PURE__*/ createComponent({
     tagName: 'ix-pill',
@@ -1567,12 +1058,8 @@ const IxPill = /*@__PURE__*/ createComponent({
         tooltipText: 'tooltip-text'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxPill,
     serializeShadowRoot,
-    elementClass: IxPill$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1c
 });
 const IxProgressIndicator = /*@__PURE__*/ createComponent({
     tagName: 'ix-progress-indicator',
@@ -1589,12 +1076,8 @@ const IxProgressIndicator = /*@__PURE__*/ createComponent({
         showTextAsTooltip: 'show-text-as-tooltip'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxProgressIndicator,
     serializeShadowRoot,
-    elementClass: IxProgressIndicator$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1d
 });
 const IxPushCard = /*@__PURE__*/ createComponent({
     tagName: 'ix-push-card',
@@ -1605,15 +1088,11 @@ const IxPushCard = /*@__PURE__*/ createComponent({
         heading: 'heading',
         subheading: 'subheading',
         variant: 'variant',
-        collapse: 'collapse'
+        expanded: 'expanded'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxPushCard,
     serializeShadowRoot,
-    elementClass: IxPushCard$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1e
 });
 const IxRadio = /*@__PURE__*/ createComponent({
     tagName: 'ix-radio',
@@ -1626,16 +1105,8 @@ const IxRadio = /*@__PURE__*/ createComponent({
         required: 'required'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxRadio,
     serializeShadowRoot,
-    elementClass: IxRadio$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onCheckedChange: 'checkedChange',
-        onValueChange: 'valueChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$1f
 });
 const IxRadioGroup = /*@__PURE__*/ createComponent({
     tagName: 'ix-radio-group',
@@ -1652,23 +1123,15 @@ const IxRadioGroup = /*@__PURE__*/ createComponent({
         required: 'required'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxRadioGroup,
     serializeShadowRoot,
-    elementClass: IxRadioGroup$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onValueChange: 'valueChange' },
-    defineCustomElement: defineCustomElement$1g
 });
 const IxRow = /*@__PURE__*/ createComponent({
     tagName: 'ix-row',
     properties: {},
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxRow,
     serializeShadowRoot,
-    elementClass: IxRow$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1h
 });
 const IxSelect = /*@__PURE__*/ createComponent({
     tagName: 'ix-select',
@@ -1690,26 +1153,17 @@ const IxSelect = /*@__PURE__*/ createComponent({
         editable: 'editable',
         disabled: 'disabled',
         readonly: 'readonly',
-        i18nPlaceholder: 'i-1-8n-placeholder',
-        i18nPlaceholderEditable: 'i-1-8n-placeholder-editable',
-        i18nSelectListHeader: 'i-1-8n-select-list-header',
-        i18nNoMatches: 'i-1-8n-no-matches',
+        i18nPlaceholder: 'i18n-placeholder',
+        i18nPlaceholderEditable: 'i18n-placeholder-editable',
+        i18nSelectListHeader: 'i18n-select-list-header',
+        i18nNoMatches: 'i18n-no-matches',
         hideListHeader: 'hide-list-header',
         dropdownWidth: 'dropdown-width',
         dropdownMaxWidth: 'dropdown-max-width'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxSelect,
     serializeShadowRoot,
-    elementClass: IxSelect$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onInputChange: 'inputChange',
-        onAddItem: 'addItem',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$1i
 });
 const IxSelectItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-select-item',
@@ -1720,12 +1174,8 @@ const IxSelectItem = /*@__PURE__*/ createComponent({
         hover: 'hover'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxSelectItem,
     serializeShadowRoot,
-    elementClass: IxSelectItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onItemClick: 'itemClick' },
-    defineCustomElement: defineCustomElement$1j
 });
 const IxSlider = /*@__PURE__*/ createComponent({
     tagName: 'ix-slider',
@@ -1741,12 +1191,8 @@ const IxSlider = /*@__PURE__*/ createComponent({
         error: 'error'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxSlider,
     serializeShadowRoot,
-    elementClass: IxSlider$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onValueChange: 'valueChange' },
-    defineCustomElement: defineCustomElement$1k
 });
 const IxSpinner = /*@__PURE__*/ createComponent({
     tagName: 'ix-spinner',
@@ -1756,20 +1202,14 @@ const IxSpinner = /*@__PURE__*/ createComponent({
         hideTrack: 'hide-track'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxSpinner,
     serializeShadowRoot,
-    elementClass: IxSpinner$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1l
 });
 const IxSplitButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-split-button',
     properties: {
         variant: 'variant',
         closeBehavior: 'close-behavior',
-        outline: 'outline',
-        ghost: 'ghost',
         label: 'label',
         ariaLabelButton: 'aria-label-button',
         icon: 'icon',
@@ -1779,12 +1219,8 @@ const IxSplitButton = /*@__PURE__*/ createComponent({
         placement: 'placement'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxSplitButton,
     serializeShadowRoot,
-    elementClass: IxSplitButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onButtonClick: 'buttonClick' },
-    defineCustomElement: defineCustomElement$1m
 });
 const IxTabItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-tab-item',
@@ -1799,12 +1235,8 @@ const IxTabItem = /*@__PURE__*/ createComponent({
         placement: 'placement'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTabItem,
     serializeShadowRoot,
-    elementClass: IxTabItem$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onTabClick: 'tabClick' },
-    defineCustomElement: defineCustomElement$1n
 });
 const IxTabs = /*@__PURE__*/ createComponent({
     tagName: 'ix-tabs',
@@ -1818,12 +1250,8 @@ const IxTabs = /*@__PURE__*/ createComponent({
         ariaLabelChevronRightIconButton: 'aria-label-chevron-right-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTabs,
     serializeShadowRoot,
-    elementClass: IxTabs$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onSelectedChange: 'selectedChange' },
-    defineCustomElement: defineCustomElement$1o
 });
 const IxTextarea = /*@__PURE__*/ createComponent({
     tagName: 'ix-textarea',
@@ -1850,27 +1278,15 @@ const IxTextarea = /*@__PURE__*/ createComponent({
         minLength: 'min-length'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTextarea,
     serializeShadowRoot,
-    elementClass: IxTextarea$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$1p
 });
 const IxTile = /*@__PURE__*/ createComponent({
     tagName: 'ix-tile',
     properties: { size: 'size' },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTile,
     serializeShadowRoot,
-    elementClass: IxTile$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1q
 });
 const IxTimeInput = /*@__PURE__*/ createComponent({
     tagName: 'ix-time-input',
@@ -1899,39 +1315,27 @@ const IxTimeInput = /*@__PURE__*/ createComponent({
         i18nHourColumnHeader: 'i18n-hour-column-header',
         i18nMinuteColumnHeader: 'i18n-minute-column-header',
         i18nSecondColumnHeader: 'i18n-second-column-header',
-        i18nMillisecondColumnHeader: 'i18n-millisecond-column-header'
+        i18nMillisecondColumnHeader: 'i18n-millisecond-column-header',
+        hideHeader: 'hide-header'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTimeInput,
     serializeShadowRoot,
-    elementClass: IxTimeInput$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange'
-    },
-    defineCustomElement: defineCustomElement$1r
 });
 const IxTimePicker = /*@__PURE__*/ createComponent({
     tagName: 'ix-time-picker',
     properties: {
         format: 'format',
         corners: 'corners',
-        standaloneAppearance: 'standalone-appearance',
+        embedded: 'embedded',
         dateTimePickerAppearance: 'date-time-picker-appearance',
-        showHour: 'show-hour',
-        showMinutes: 'show-minutes',
-        showSeconds: 'show-seconds',
         hideHeader: 'hide-header',
         hourInterval: 'hour-interval',
         minuteInterval: 'minute-interval',
         secondInterval: 'second-interval',
         millisecondInterval: 'millisecond-interval',
         time: 'time',
-        timeReference: 'time-reference',
-        textSelectTime: 'text-select-time',
         i18nConfirmTime: 'i18n-confirm-time',
-        textTime: 'text-time',
         i18nHeader: 'i18n-header',
         i18nHourColumnHeader: 'i18n-column-header',
         i18nMinuteColumnHeader: 'i18n-minute-column-header',
@@ -1939,15 +1343,8 @@ const IxTimePicker = /*@__PURE__*/ createComponent({
         i18nMillisecondColumnHeader: 'i18n-millisecond-column-header'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTimePicker,
     serializeShadowRoot,
-    elementClass: IxTimePicker$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onTimeSelect: 'timeSelect',
-        onTimeChange: 'timeChange'
-    },
-    defineCustomElement: defineCustomElement$1s
 });
 const IxToast = /*@__PURE__*/ createComponent({
     tagName: 'ix-toast',
@@ -1955,18 +1352,14 @@ const IxToast = /*@__PURE__*/ createComponent({
         type: 'type',
         toastTitle: 'toast-title',
         autoCloseDelay: 'auto-close-delay',
-        autoClose: 'auto-close',
+        preventAutoClose: 'prevent-auto-close',
         icon: 'icon',
         iconColor: 'icon-color',
         ariaLabelCloseIconButton: 'aria-label-close-icon-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxToast,
     serializeShadowRoot,
-    elementClass: IxToast$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onCloseToast: 'closeToast' },
-    defineCustomElement: defineCustomElement$1t
 });
 const IxToastContainer = /*@__PURE__*/ createComponent({
     tagName: 'ix-toast-container',
@@ -1976,12 +1369,8 @@ const IxToastContainer = /*@__PURE__*/ createComponent({
         position: 'position'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxToastContainer,
     serializeShadowRoot,
-    elementClass: IxToastContainer$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1u
 });
 const IxToggle = /*@__PURE__*/ createComponent({
     tagName: 'ix-toggle',
@@ -1998,35 +1387,23 @@ const IxToggle = /*@__PURE__*/ createComponent({
         required: 'required'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxToggle,
     serializeShadowRoot,
-    elementClass: IxToggle$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {
-        onCheckedChange: 'checkedChange',
-        onIxBlur: 'ixBlur'
-    },
-    defineCustomElement: defineCustomElement$1v
 });
 const IxToggleButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-toggle-button',
     properties: {
         variant: 'variant',
-        outline: 'outline',
-        ghost: 'ghost',
         disabled: 'disabled',
         loading: 'loading',
         icon: 'icon',
+        iconRight: 'icon-right',
         pressed: 'pressed',
         ariaLabelButton: 'aria-label-button'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxToggleButton,
     serializeShadowRoot,
-    elementClass: IxToggleButton$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onPressedChange: 'pressedChange' },
-    defineCustomElement: defineCustomElement$1w
 });
 const IxTooltip = /*@__PURE__*/ createComponent({
     tagName: 'ix-tooltip',
@@ -2040,12 +1417,8 @@ const IxTooltip = /*@__PURE__*/ createComponent({
         animationFrame: 'animation-frame'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTooltip,
     serializeShadowRoot,
-    elementClass: IxTooltip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1x
 });
 const IxTypography = /*@__PURE__*/ createComponent({
     tagName: 'ix-typography',
@@ -2056,12 +1429,8 @@ const IxTypography = /*@__PURE__*/ createComponent({
         textDecoration: 'text-decoration'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxTypography,
     serializeShadowRoot,
-    elementClass: IxTypography$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1y
 });
 const IxUpload = /*@__PURE__*/ createComponent({
     tagName: 'ix-upload',
@@ -2075,16 +1444,12 @@ const IxUpload = /*@__PURE__*/ createComponent({
         loadingText: 'loading-text',
         uploadFailedText: 'upload-failed-text',
         uploadSuccessText: 'upload-success-text',
-        i18nUploadFile: 'i-1-8n-upload-file',
-        i18nUploadDisabled: 'i-1-8n-upload-disabled'
+        i18nUploadFile: 'i18n-upload-file',
+        i18nUploadDisabled: 'i18n-upload-disabled'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxUpload,
     serializeShadowRoot,
-    elementClass: IxUpload$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onFilesChanged: 'filesChanged' },
-    defineCustomElement: defineCustomElement$1z
 });
 const IxValidationTooltip = /*@__PURE__*/ createComponent({
     tagName: 'ix-validation-tooltip',
@@ -2094,12 +1459,8 @@ const IxValidationTooltip = /*@__PURE__*/ createComponent({
         suppressAutomaticPlacement: 'suppress-automatic-placement'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxValidationTooltip,
     serializeShadowRoot,
-    elementClass: IxValidationTooltip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1A
 });
 const IxWorkflowStep = /*@__PURE__*/ createComponent({
     tagName: 'ix-workflow-step',
@@ -2112,12 +1473,8 @@ const IxWorkflowStep = /*@__PURE__*/ createComponent({
         position: 'position'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxWorkflowStep,
     serializeShadowRoot,
-    elementClass: IxWorkflowStep$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1B
 });
 const IxWorkflowSteps = /*@__PURE__*/ createComponent({
     tagName: 'ix-workflow-steps',
@@ -2127,13 +1484,9 @@ const IxWorkflowSteps = /*@__PURE__*/ createComponent({
         selectedIndex: 'selected-index'
     },
     hydrateModule: import('@siemens/ix/hydrate'),
+    clientModule: clientComponents.IxWorkflowSteps,
     serializeShadowRoot,
-    elementClass: IxWorkflowSteps$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: { onStepSelected: 'stepSelected' },
-    defineCustomElement: defineCustomElement$1C
 });
 
-export { IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBasicNavigation, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMapNavigation, IxMapNavigationOverlay, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxProgressIndicator, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimeInput, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, serializeShadowRoot };
+export { IxActionCard, IxApplication, IxApplicationHeader, IxAvatar, IxBlind, IxBreadcrumb, IxBreadcrumbItem, IxButton, IxCard, IxCardAccordion, IxCardContent, IxCardList, IxCardTitle, IxCategoryFilter, IxCheckbox, IxCheckboxGroup, IxChip, IxCol, IxContent, IxContentHeader, IxCustomField, IxDateDropdown, IxDateInput, IxDatePicker, IxDatetimePicker, IxDivider, IxDrawer, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, IxInputGroup, IxKeyValue, IxKeyValueList, IxKpi, IxLayoutAuto, IxLayoutGrid, IxLinkButton, IxMenu, IxMenuAbout, IxMenuAboutItem, IxMenuAboutNews, IxMenuAvatar, IxMenuAvatarItem, IxMenuCategory, IxMenuItem, IxMenuSettings, IxMenuSettingsItem, IxMessageBar, IxModal, IxModalContent, IxModalFooter, IxModalHeader, IxNumberInput, IxPagination, IxPane, IxPaneLayout, IxPill, IxProgressIndicator, IxPushCard, IxRadio, IxRadioGroup, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimeInput, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTypography, IxUpload, IxValidationTooltip, IxWorkflowStep, IxWorkflowSteps, serializeShadowRoot };
 //# sourceMappingURL=components.server.js.map