@siemens/ix-react 4.3.0 → 5.0.0

package/dist/{components.js → components/components.js}

@@ -1,4 +1,6 @@
 "use client";
+import { createComponent } from '@stencil/react-output-target/runtime';
+import React from 'react';
 import { defineCustomElement as defineCustomElement$1, IxActionCard as IxActionCard$1 } from '@siemens/ix/components/ix-action-card.js';
 import { defineCustomElement as defineCustomElement$3, IxApplicationHeader as IxApplicationHeader$1 } from '@siemens/ix/components/ix-application-header.js';
 import { defineCustomElement as defineCustomElement$2, IxApplication as IxApplication$1 } from '@siemens/ix/components/ix-application.js';
@@ -23,9 +25,9 @@ import { defineCustomElement as defineCustomElement$l, IxCustomField as IxCustom
 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$p, IxDatetimeInput as IxDatetimeInput$1 } from '@siemens/ix/components/ix-datetime-input.js';
+import { defineCustomElement as defineCustomElement$q, IxDatetimePicker as IxDatetimePicker$1 } from '@siemens/ix/components/ix-datetime-picker.js';
+import { defineCustomElement as defineCustomElement$r, IxDivider as IxDivider$1 } from '@siemens/ix/components/ix-divider.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';
@@ -45,38 +47,38 @@ import { defineCustomElement as defineCustomElement$F, IxGroup as IxGroup$1 } fr
 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$V, IxMenuAboutItem as IxMenuAboutItem$1 } from '@siemens/ix/components/ix-menu-about-item.js';
-import { defineCustomElement as defineCustomElement$W, IxMenuAboutNews as IxMenuAboutNews$1 } from '@siemens/ix/components/ix-menu-about-news.js';
-import { defineCustomElement as defineCustomElement$U, IxMenuAbout as IxMenuAbout$1 } from '@siemens/ix/components/ix-menu-about.js';
-import { defineCustomElement as defineCustomElement$Y, IxMenuAvatarItem as IxMenuAvatarItem$1 } from '@siemens/ix/components/ix-menu-avatar-item.js';
-import { defineCustomElement as defineCustomElement$X, IxMenuAvatar as IxMenuAvatar$1 } from '@siemens/ix/components/ix-menu-avatar.js';
-import { defineCustomElement as defineCustomElement$Z, IxMenuCategory as IxMenuCategory$1 } from '@siemens/ix/components/ix-menu-category.js';
-import { defineCustomElement as defineCustomElement$_, IxMenuItem as IxMenuItem$1 } from '@siemens/ix/components/ix-menu-item.js';
-import { defineCustomElement as defineCustomElement$10, IxMenuSettingsItem as IxMenuSettingsItem$1 } from '@siemens/ix/components/ix-menu-settings-item.js';
-import { defineCustomElement as defineCustomElement$$, IxMenuSettings as IxMenuSettings$1 } from '@siemens/ix/components/ix-menu-settings.js';
-import { defineCustomElement as defineCustomElement$T, IxMenu as IxMenu$1 } from '@siemens/ix/components/ix-menu.js';
-import { defineCustomElement as defineCustomElement$11, IxMessageBar as IxMessageBar$1 } from '@siemens/ix/components/ix-message-bar.js';
-import { defineCustomElement as defineCustomElement$12, IxModalContent as IxModalContent$1 } from '@siemens/ix/components/ix-modal-content.js';
-import { defineCustomElement as defineCustomElement$13, IxModalFooter as IxModalFooter$1 } from '@siemens/ix/components/ix-modal-footer.js';
-import { defineCustomElement as defineCustomElement$14, IxModalHeader as IxModalHeader$1 } from '@siemens/ix/components/ix-modal-header.js';
+import { defineCustomElement as defineCustomElement$N, IxKeyValueList as IxKeyValueList$1 } from '@siemens/ix/components/ix-key-value-list.js';
+import { defineCustomElement as defineCustomElement$M, IxKeyValue as IxKeyValue$1 } from '@siemens/ix/components/ix-key-value.js';
+import { defineCustomElement as defineCustomElement$O, IxKpi as IxKpi$1 } from '@siemens/ix/components/ix-kpi.js';
+import { defineCustomElement as defineCustomElement$P, IxLayoutAuto as IxLayoutAuto$1 } from '@siemens/ix/components/ix-layout-auto.js';
+import { defineCustomElement as defineCustomElement$Q, IxLayoutGrid as IxLayoutGrid$1 } from '@siemens/ix/components/ix-layout-grid.js';
+import { defineCustomElement as defineCustomElement$R, IxLinkButton as IxLinkButton$1 } from '@siemens/ix/components/ix-link-button.js';
+import { defineCustomElement as defineCustomElement$U, IxMenuAboutItem as IxMenuAboutItem$1 } from '@siemens/ix/components/ix-menu-about-item.js';
+import { defineCustomElement as defineCustomElement$V, IxMenuAboutNews as IxMenuAboutNews$1 } from '@siemens/ix/components/ix-menu-about-news.js';
+import { defineCustomElement as defineCustomElement$T, IxMenuAbout as IxMenuAbout$1 } from '@siemens/ix/components/ix-menu-about.js';
+import { defineCustomElement as defineCustomElement$X, IxMenuAvatarItem as IxMenuAvatarItem$1 } from '@siemens/ix/components/ix-menu-avatar-item.js';
+import { defineCustomElement as defineCustomElement$W, IxMenuAvatar as IxMenuAvatar$1 } from '@siemens/ix/components/ix-menu-avatar.js';
+import { defineCustomElement as defineCustomElement$Y, IxMenuCategory as IxMenuCategory$1 } from '@siemens/ix/components/ix-menu-category.js';
+import { defineCustomElement as defineCustomElement$Z, IxMenuItem as IxMenuItem$1 } from '@siemens/ix/components/ix-menu-item.js';
+import { defineCustomElement as defineCustomElement$$, IxMenuSettingsItem as IxMenuSettingsItem$1 } from '@siemens/ix/components/ix-menu-settings-item.js';
+import { defineCustomElement as defineCustomElement$_, IxMenuSettings as IxMenuSettings$1 } from '@siemens/ix/components/ix-menu-settings.js';
+import { defineCustomElement as defineCustomElement$S, IxMenu as IxMenu$1 } from '@siemens/ix/components/ix-menu.js';
+import { defineCustomElement as defineCustomElement$10, IxMessageBar as IxMessageBar$1 } from '@siemens/ix/components/ix-message-bar.js';
+import { defineCustomElement as defineCustomElement$11, IxModalContent as IxModalContent$1 } from '@siemens/ix/components/ix-modal-content.js';
+import { defineCustomElement as defineCustomElement$12, IxModalFooter as IxModalFooter$1 } from '@siemens/ix/components/ix-modal-footer.js';
+import { defineCustomElement as defineCustomElement$13, IxModalHeader as IxModalHeader$1 } from '@siemens/ix/components/ix-modal-header.js';
 import { defineCustomElement, IxModal as IxModal$1 } from '@siemens/ix/components/ix-modal.js';
-import { defineCustomElement as defineCustomElement$15, IxNumberInput as IxNumberInput$1 } from '@siemens/ix/components/ix-number-input.js';
-import { defineCustomElement as defineCustomElement$16, IxPagination as IxPagination$1 } from '@siemens/ix/components/ix-pagination.js';
-import { defineCustomElement as defineCustomElement$18, IxPaneLayout as IxPaneLayout$1 } from '@siemens/ix/components/ix-pane-layout.js';
-import { defineCustomElement as defineCustomElement$17, IxPane as IxPane$1 } from '@siemens/ix/components/ix-pane.js';
-import { defineCustomElement as defineCustomElement$19, IxPill as IxPill$1 } from '@siemens/ix/components/ix-pill.js';
-import { defineCustomElement as defineCustomElement$1a, IxProgressIndicator as IxProgressIndicator$1 } from '@siemens/ix/components/ix-progress-indicator.js';
-import { defineCustomElement as defineCustomElement$1b, IxPushCard as IxPushCard$1 } from '@siemens/ix/components/ix-push-card.js';
-import { defineCustomElement as defineCustomElement$1d, IxRadioGroup as IxRadioGroup$1 } from '@siemens/ix/components/ix-radio-group.js';
-import { defineCustomElement as defineCustomElement$1c, IxRadio as IxRadio$1 } from '@siemens/ix/components/ix-radio.js';
+import { defineCustomElement as defineCustomElement$14, IxNumberInput as IxNumberInput$1 } from '@siemens/ix/components/ix-number-input.js';
+import { defineCustomElement as defineCustomElement$15, IxPagination as IxPagination$1 } from '@siemens/ix/components/ix-pagination.js';
+import { defineCustomElement as defineCustomElement$17, IxPaneLayout as IxPaneLayout$1 } from '@siemens/ix/components/ix-pane-layout.js';
+import { defineCustomElement as defineCustomElement$16, IxPane as IxPane$1 } from '@siemens/ix/components/ix-pane.js';
+import { defineCustomElement as defineCustomElement$18, IxPill as IxPill$1 } from '@siemens/ix/components/ix-pill.js';
+import { defineCustomElement as defineCustomElement$19, IxProgressIndicator as IxProgressIndicator$1 } from '@siemens/ix/components/ix-progress-indicator.js';
+import { defineCustomElement as defineCustomElement$1a, IxPushCard as IxPushCard$1 } from '@siemens/ix/components/ix-push-card.js';
+import { defineCustomElement as defineCustomElement$1c, IxRadioGroup as IxRadioGroup$1 } from '@siemens/ix/components/ix-radio-group.js';
+import { defineCustomElement as defineCustomElement$1b, IxRadio as IxRadio$1 } from '@siemens/ix/components/ix-radio.js';
+import { defineCustomElement as defineCustomElement$1d, IxRangeField as IxRangeField$1 } from '@siemens/ix/components/ix-range-field.js';
 import { defineCustomElement as defineCustomElement$1e, IxRow as IxRow$1 } from '@siemens/ix/components/ix-row.js';
 import { defineCustomElement as defineCustomElement$1g, IxSelectItem as IxSelectItem$1 } from '@siemens/ix/components/ix-select-item.js';
 import { defineCustomElement as defineCustomElement$1f, IxSelect as IxSelect$1 } from '@siemens/ix/components/ix-select.js';
@@ -96,11 +98,8 @@ import { defineCustomElement as defineCustomElement$1s, IxToggle as IxToggle$1 }
 import { defineCustomElement as defineCustomElement$1u, IxTooltip as IxTooltip$1 } from '@siemens/ix/components/ix-tooltip.js';
 import { defineCustomElement as defineCustomElement$1v, IxTypography as IxTypography$1 } from '@siemens/ix/components/ix-typography.js';
 import { defineCustomElement as defineCustomElement$1w, IxUpload as IxUpload$1 } from '@siemens/ix/components/ix-upload.js';
-import { defineCustomElement as defineCustomElement$1x, IxValidationTooltip as IxValidationTooltip$1 } from '@siemens/ix/components/ix-validation-tooltip.js';
-import { defineCustomElement as defineCustomElement$1y, IxWorkflowStep as IxWorkflowStep$1 } from '@siemens/ix/components/ix-workflow-step.js';
-import { defineCustomElement as defineCustomElement$1z, IxWorkflowSteps as IxWorkflowSteps$1 } from '@siemens/ix/components/ix-workflow-steps.js';
-import { createComponent } from '@stencil/react-output-target/runtime';
-import React from 'react';
+import { defineCustomElement as defineCustomElement$1x, IxWorkflowStep as IxWorkflowStep$1 } from '@siemens/ix/components/ix-workflow-step.js';
+import { defineCustomElement as defineCustomElement$1y, IxWorkflowSteps as IxWorkflowSteps$1 } from '@siemens/ix/components/ix-workflow-steps.js';
 
 const IxActionCard = /*@__PURE__*/ createComponent({
     tagName: 'ix-action-card',
@@ -304,7 +303,8 @@ const IxDateInput = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange'
+        onValidityStateChange: 'validityStateChange',
+        onIxChange: 'ixChange'
     },
     defineCustomElement: defineCustomElement$n
 });
@@ -320,6 +320,20 @@ const IxDatePicker = /*@__PURE__*/ createComponent({
     },
     defineCustomElement: defineCustomElement$o
 });
+const IxDatetimeInput = /*@__PURE__*/ createComponent({
+    tagName: 'ix-datetime-input',
+    elementClass: IxDatetimeInput$1,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onValueChange: 'valueChange',
+        onValidityStateChange: 'validityStateChange',
+        onIxFocus: 'ixFocus',
+        onIxBlur: 'ixBlur',
+        onIxChange: 'ixChange'
+    },
+    defineCustomElement: defineCustomElement$p
+});
 const IxDatetimePicker = /*@__PURE__*/ createComponent({
     tagName: 'ix-datetime-picker',
     elementClass: IxDatetimePicker$1,
@@ -330,7 +344,7 @@ const IxDatetimePicker = /*@__PURE__*/ createComponent({
         onDateChange: 'dateChange',
         onDateSelect: 'dateSelect'
     },
-    defineCustomElement: defineCustomElement$p
+    defineCustomElement: defineCustomElement$q
 });
 const IxDivider = /*@__PURE__*/ createComponent({
     tagName: 'ix-divider',
@@ -338,17 +352,6 @@ const IxDivider = /*@__PURE__*/ createComponent({
     // @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',
-    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({
@@ -356,7 +359,10 @@ const IxDropdown = /*@__PURE__*/ createComponent({
     elementClass: IxDropdown$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onShowChanged: 'showChanged' },
+    events: {
+        onShowChange: 'showChange',
+        onShowChanged: 'showChanged'
+    },
     defineCustomElement: defineCustomElement$s
 });
 const IxDropdownButton = /*@__PURE__*/ createComponent({
@@ -364,7 +370,10 @@ const IxDropdownButton = /*@__PURE__*/ createComponent({
     elementClass: IxDropdownButton$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: {},
+    events: {
+        onShowChange: 'showChange',
+        onShowChanged: 'showChanged'
+    },
     defineCustomElement: defineCustomElement$t
 });
 const IxDropdownHeader = /*@__PURE__*/ createComponent({
@@ -515,25 +524,18 @@ const IxInput = /*@__PURE__*/ createComponent({
     events: {
         onValueChange: 'valueChange',
         onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
+        onIxBlur: 'ixBlur',
+        onIxChange: 'ixChange'
     },
     defineCustomElement: defineCustomElement$L
 });
-const IxInputGroup = /*@__PURE__*/ createComponent({
-    tagName: 'ix-input-group',
-    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',
     elementClass: IxKeyValue$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$N
+    defineCustomElement: defineCustomElement$M
 });
 const IxKeyValueList = /*@__PURE__*/ createComponent({
     tagName: 'ix-key-value-list',
@@ -541,7 +543,7 @@ const IxKeyValueList = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$O
+    defineCustomElement: defineCustomElement$N
 });
 const IxKpi = /*@__PURE__*/ createComponent({
     tagName: 'ix-kpi',
@@ -549,7 +551,7 @@ const IxKpi = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$P
+    defineCustomElement: defineCustomElement$O
 });
 const IxLayoutAuto = /*@__PURE__*/ createComponent({
     tagName: 'ix-layout-auto',
@@ -557,7 +559,7 @@ const IxLayoutAuto = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$Q
+    defineCustomElement: defineCustomElement$P
 });
 const IxLayoutGrid = /*@__PURE__*/ createComponent({
     tagName: 'ix-layout-grid',
@@ -565,7 +567,7 @@ const IxLayoutGrid = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$R
+    defineCustomElement: defineCustomElement$Q
 });
 const IxLinkButton = /*@__PURE__*/ createComponent({
     tagName: 'ix-link-button',
@@ -573,7 +575,7 @@ const IxLinkButton = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$S
+    defineCustomElement: defineCustomElement$R
 });
 const IxMenu = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu',
@@ -587,7 +589,7 @@ const IxMenu = /*@__PURE__*/ createComponent({
         onOpenSettings: 'openSettings',
         onOpenAbout: 'openAbout'
     },
-    defineCustomElement: defineCustomElement$T
+    defineCustomElement: defineCustomElement$S
 });
 const IxMenuAbout = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about',
@@ -598,7 +600,7 @@ const IxMenuAbout = /*@__PURE__*/ createComponent({
         onTabChange: 'tabChange',
         onClose: 'close'
     },
-    defineCustomElement: defineCustomElement$U
+    defineCustomElement: defineCustomElement$T
 });
 const IxMenuAboutItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about-item',
@@ -606,7 +608,7 @@ const IxMenuAboutItem = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onLabelChange: 'labelChange' },
-    defineCustomElement: defineCustomElement$V
+    defineCustomElement: defineCustomElement$U
 });
 const IxMenuAboutNews = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-about-news',
@@ -617,7 +619,7 @@ const IxMenuAboutNews = /*@__PURE__*/ createComponent({
         onShowMore: 'showMore',
         onClosePopover: 'closePopover'
     },
-    defineCustomElement: defineCustomElement$W
+    defineCustomElement: defineCustomElement$V
 });
 const IxMenuAvatar = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-avatar',
@@ -625,7 +627,7 @@ const IxMenuAvatar = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onLogoutClick: 'logoutClick' },
-    defineCustomElement: defineCustomElement$X
+    defineCustomElement: defineCustomElement$W
 });
 const IxMenuAvatarItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-avatar-item',
@@ -633,7 +635,7 @@ const IxMenuAvatarItem = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onItemClick: 'itemClick' },
-    defineCustomElement: defineCustomElement$Y
+    defineCustomElement: defineCustomElement$X
 });
 const IxMenuCategory = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-category',
@@ -641,7 +643,7 @@ const IxMenuCategory = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$Z
+    defineCustomElement: defineCustomElement$Y
 });
 const IxMenuItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-item',
@@ -649,7 +651,7 @@ const IxMenuItem = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$_
+    defineCustomElement: defineCustomElement$Z
 });
 const IxMenuSettings = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-settings',
@@ -660,15 +662,15 @@ const IxMenuSettings = /*@__PURE__*/ createComponent({
         onTabChange: 'tabChange',
         onClose: 'close'
     },
-    defineCustomElement: defineCustomElement$$
+    defineCustomElement: defineCustomElement$_
 });
 const IxMenuSettingsItem = /*@__PURE__*/ createComponent({
     tagName: 'ix-menu-settings-item',
     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$10
+    events: {},
+    defineCustomElement: defineCustomElement$$
 });
 const IxMessageBar = /*@__PURE__*/ createComponent({
     tagName: 'ix-message-bar',
@@ -679,7 +681,7 @@ const IxMessageBar = /*@__PURE__*/ createComponent({
         onClosedChange: 'closedChange',
         onCloseAnimationCompleted: 'closeAnimationCompleted'
     },
-    defineCustomElement: defineCustomElement$11
+    defineCustomElement: defineCustomElement$10
 });
 const IxModal = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal',
@@ -698,7 +700,7 @@ const IxModalContent = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$12
+    defineCustomElement: defineCustomElement$11
 });
 const IxModalFooter = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal-footer',
@@ -706,7 +708,7 @@ const IxModalFooter = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$13
+    defineCustomElement: defineCustomElement$12
 });
 const IxModalHeader = /*@__PURE__*/ createComponent({
     tagName: 'ix-modal-header',
@@ -714,7 +716,7 @@ const IxModalHeader = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onCloseClick: 'closeClick' },
-    defineCustomElement: defineCustomElement$14
+    defineCustomElement: defineCustomElement$13
 });
 const IxNumberInput = /*@__PURE__*/ createComponent({
     tagName: 'ix-number-input',
@@ -724,9 +726,10 @@ const IxNumberInput = /*@__PURE__*/ createComponent({
     events: {
         onValueChange: 'valueChange',
         onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
+        onIxBlur: 'ixBlur',
+        onIxChange: 'ixChange'
     },
-    defineCustomElement: defineCustomElement$15
+    defineCustomElement: defineCustomElement$14
 });
 const IxPagination = /*@__PURE__*/ createComponent({
     tagName: 'ix-pagination',
@@ -737,7 +740,7 @@ const IxPagination = /*@__PURE__*/ createComponent({
         onPageSelected: 'pageSelected',
         onItemCountChanged: 'itemCountChanged'
     },
-    defineCustomElement: defineCustomElement$16
+    defineCustomElement: defineCustomElement$15
 });
 const IxPane = /*@__PURE__*/ createComponent({
     tagName: 'ix-pane',
@@ -749,7 +752,7 @@ const IxPane = /*@__PURE__*/ createComponent({
         onVariantChanged: 'variantChanged',
         onBorderlessChanged: 'borderlessChanged'
     },
-    defineCustomElement: defineCustomElement$17
+    defineCustomElement: defineCustomElement$16
 });
 const IxPaneLayout = /*@__PURE__*/ createComponent({
     tagName: 'ix-pane-layout',
@@ -757,7 +760,7 @@ const IxPaneLayout = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$18
+    defineCustomElement: defineCustomElement$17
 });
 const IxPill = /*@__PURE__*/ createComponent({
     tagName: 'ix-pill',
@@ -765,7 +768,7 @@ const IxPill = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$19
+    defineCustomElement: defineCustomElement$18
 });
 const IxProgressIndicator = /*@__PURE__*/ createComponent({
     tagName: 'ix-progress-indicator',
@@ -773,7 +776,7 @@ const IxProgressIndicator = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$1a
+    defineCustomElement: defineCustomElement$19
 });
 const IxPushCard = /*@__PURE__*/ createComponent({
     tagName: 'ix-push-card',
@@ -781,7 +784,7 @@ const IxPushCard = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$1b
+    defineCustomElement: defineCustomElement$1a
 });
 const IxRadio = /*@__PURE__*/ createComponent({
     tagName: 'ix-radio',
@@ -793,7 +796,7 @@ const IxRadio = /*@__PURE__*/ createComponent({
         onValueChange: 'valueChange',
         onIxBlur: 'ixBlur'
     },
-    defineCustomElement: defineCustomElement$1c
+    defineCustomElement: defineCustomElement$1b
 });
 const IxRadioGroup = /*@__PURE__*/ createComponent({
     tagName: 'ix-radio-group',
@@ -801,6 +804,14 @@ const IxRadioGroup = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onValueChange: 'valueChange' },
+    defineCustomElement: defineCustomElement$1c
+});
+const IxRangeField = /*@__PURE__*/ createComponent({
+    tagName: 'ix-range-field',
+    elementClass: IxRangeField$1,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
     defineCustomElement: defineCustomElement$1d
 });
 const IxRow = /*@__PURE__*/ createComponent({
@@ -861,7 +872,10 @@ const IxTabItem = /*@__PURE__*/ createComponent({
     elementClass: IxTabItem$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onTabClick: 'tabClick' },
+    events: {
+        onTabClick: 'tabClick',
+        onTabClose: 'tabClose'
+    },
     defineCustomElement: defineCustomElement$1k
 });
 const IxTabs = /*@__PURE__*/ createComponent({
@@ -869,7 +883,10 @@ const IxTabs = /*@__PURE__*/ createComponent({
     elementClass: IxTabs$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onSelectedChange: 'selectedChange' },
+    events: {
+        onTabChange: 'tabChange',
+        onTabClose: 'tabClose'
+    },
     defineCustomElement: defineCustomElement$1l
 });
 const IxTextarea = /*@__PURE__*/ createComponent({
@@ -880,7 +897,8 @@ const IxTextarea = /*@__PURE__*/ createComponent({
     events: {
         onValueChange: 'valueChange',
         onValidityStateChange: 'validityStateChange',
-        onIxBlur: 'ixBlur'
+        onIxBlur: 'ixBlur',
+        onIxChange: 'ixChange'
     },
     defineCustomElement: defineCustomElement$1m
 });
@@ -899,7 +917,8 @@ const IxTimeInput = /*@__PURE__*/ createComponent({
     react: React,
     events: {
         onValueChange: 'valueChange',
-        onValidityStateChange: 'validityStateChange'
+        onValidityStateChange: 'validityStateChange',
+        onIxChange: 'ixChange'
     },
     defineCustomElement: defineCustomElement$1o
 });
@@ -973,21 +992,13 @@ const IxUpload = /*@__PURE__*/ createComponent({
     events: { onFilesChanged: 'filesChanged' },
     defineCustomElement: defineCustomElement$1w
 });
-const IxValidationTooltip = /*@__PURE__*/ createComponent({
-    tagName: 'ix-validation-tooltip',
-    elementClass: IxValidationTooltip$1,
-    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
-    react: React,
-    events: {},
-    defineCustomElement: defineCustomElement$1x
-});
 const IxWorkflowStep = /*@__PURE__*/ createComponent({
     tagName: 'ix-workflow-step',
     elementClass: IxWorkflowStep$1,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {},
-    defineCustomElement: defineCustomElement$1y
+    defineCustomElement: defineCustomElement$1x
 });
 const IxWorkflowSteps = /*@__PURE__*/ createComponent({
     tagName: 'ix-workflow-steps',
@@ -995,8 +1006,8 @@ const IxWorkflowSteps = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: { onStepSelected: 'stepSelected' },
-    defineCustomElement: defineCustomElement$1z
+    defineCustomElement: defineCustomElement$1y
 });
 
-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 };
+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, IxDatetimeInput, IxDatetimePicker, IxDivider, IxDropdown, IxDropdownButton, IxDropdownHeader, IxDropdownItem, IxDropdownQuickActions, IxEmptyState, IxEventList, IxEventListItem, IxExpandingSearch, IxFieldLabel, IxFilterChip, IxFlipTile, IxFlipTileContent, IxGroup, IxGroupContextMenu, IxGroupItem, IxHelperText, IxIconButton, IxIconToggleButton, IxInput, 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, IxRangeField, IxRow, IxSelect, IxSelectItem, IxSlider, IxSpinner, IxSplitButton, IxTabItem, IxTabs, IxTextarea, IxTile, IxTimeInput, IxTimePicker, IxToast, IxToastContainer, IxToggle, IxToggleButton, IxTooltip, IxTypography, IxUpload, IxWorkflowStep, IxWorkflowSteps };
 //# sourceMappingURL=components.js.map