@siemens/ix 2.4.0 → 2.4.1

package/hydrate/index.js

@@ -2455,13 +2455,13 @@ class ApplicationLayoutService {
                 breakPointIndex = matchBreakpoints.length - 1;
             }
             const [breakpoint, _] = matchBreakpoints[breakPointIndex];
-            __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+            requestAnimationFrame(() => __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint));
             __classPrivateFieldSet$1(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
             return;
         }
         for (const [breakpoint, match] of matchBreakpoints.reverse()) {
             if (match) {
-                __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint);
+                requestAnimationFrame(() => __classPrivateFieldGet$1(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint));
                 __classPrivateFieldSet$1(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
                 break;
             }
@@ -3068,12 +3068,12 @@ class ApplicationHeader {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '58565e3136e17a2d3cae46a4add8f2ba245b59bc', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (hAsync("ix-menu-expand-icon", { key: 'da63965f1ced1898c799a48212eb7a4afdf35ffd', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (hAsync(Host, { key: 'daa15d8fe5e43669a666ff21fa8ec64bfbbf9f74', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (hAsync("ix-menu-expand-icon", { key: 'd933cf1ad8cac41c0633cff21029caf9bbcdfd2c', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (hAsync("ix-icon-button", { key: 'fce7acda771398cd8f8f79dcb05254354e9524c8', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), hAsync("div", { key: '20d47359153147df9636a2170e4987113871e701', class: "logo" }, hAsync("slot", { key: '3889ece809965cd8c5a256e6551b1d4961774977', name: "logo" })), hAsync("div", { key: '4e9c07f44beb7c476d61657bb303764c74ee174e', class: "name" }, this.name), hAsync("div", { key: '099a3a4842da94cd54f789ee29380ab057957550', class: "content" }, this.breakpoint === 'sm' ? (hAsync(Fragment, null, hAsync("ix-icon-button", { class: {
+            this.suppressResponsive === false && (hAsync("ix-icon-button", { key: 'e229c4af7e86153052d5bd30306c833433ccff8f', onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), hAsync("div", { key: '2abd4e6983d4102448c8636952cec2acb869dd12', class: "logo" }, hAsync("slot", { key: 'a927c764166256416a9d5d6a64310b54f6aa4ed5', name: "logo" })), hAsync("ix-typography", { key: '6443801e36e42c2ae6c48a0efd7b0252d40c1a9e', format: "body-lg", class: "name" }, this.name), hAsync("div", { key: '2f1f3681f79bc2a330d8d95deaecc65f855f1434', class: "content" }, this.breakpoint === 'sm' ? (hAsync(Fragment, null, hAsync("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), hAsync("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, hAsync("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, hAsync("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (hAsync("slot", { onSlotchange: () => this.updateIsSlottedContent() })), hAsync("slot", { key: 'ba4c1d46798c9cb325b933905df7bb17a4aedfc6', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), hAsync("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, hAsync("div", { class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, hAsync("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (hAsync("slot", { onSlotchange: () => this.updateIsSlottedContent() })), hAsync("slot", { key: '260364bf65695be4bf64e80c09d76c96fce192ed', name: "ix-application-header-avatar" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return IxApplicationHeaderStyle0; }
@@ -4575,7 +4575,7 @@ function BaseButton(props, children) {
         props.afterContent ? props.afterContent : null));
 }
 
-const avatarCss = "/*!@:host*/.sc-ix-avatar-h{display:flex;position:relative;width:-moz-fit-content;width:fit-content}/*!@:host .avatar*/.sc-ix-avatar-h .avatar.sc-ix-avatar{display:flex;align-items:center}/*!@:host .avatar > .avatar-image*/.sc-ix-avatar-h .avatar.sc-ix-avatar>.avatar-image.sc-ix-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}/*!@:host .avatar > .avatar-initials*/.sc-ix-avatar-h .avatar.sc-ix-avatar>.avatar-initials.sc-ix-avatar{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}/*!@:host .avatar #avatar-path-background*/.sc-ix-avatar-h .avatar.sc-ix-avatar #avatar-path-background.sc-ix-avatar{fill:var(--theme-avatar--background)}/*!@:host .avatar #avatar-path-person*/.sc-ix-avatar-h .avatar.sc-ix-avatar #avatar-path-person.sc-ix-avatar{fill:var(--theme-avatar--color)}/*!@:host .user-info*/.sc-ix-avatar-h .user-info.sc-ix-avatar{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}/*!@:host .user-info .avatar*/.sc-ix-avatar-h .user-info.sc-ix-avatar .avatar.sc-ix-avatar{width:2rem;pointer-events:none}/*!@:host .user-info .user*/.sc-ix-avatar-h .user-info.sc-ix-avatar .user.sc-ix-avatar{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}/*!@:host .user-info .username*/.sc-ix-avatar-h .user-info.sc-ix-avatar .username.sc-ix-avatar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/*!@:host .user-info .extra*/.sc-ix-avatar-h .user-info.sc-ix-avatar .extra.sc-ix-avatar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/*!@:host(.avatar-button) button*/.avatar-button.sc-ix-avatar-h button.sc-ix-avatar{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}/*!@:host(.avatar-button) .btn-invisible-primary*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar{border-radius:var(--theme-btn--border-radius)}/*!@:host(.avatar-button) .btn-invisible-primary, :host(.avatar-button) .btn-invisible-primary.focus, :host(.avatar-button) .btn-invisible-primary:focus-visible*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.focus.sc-ix-avatar,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}/*!@:host(.avatar-button) .btn-invisible-primary.selected*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active, :host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled):active,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active, :host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):active,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}/*!@:host(.avatar-button) li*/.avatar-button.sc-ix-avatar-h li.sc-ix-avatar{transform:scale(0.8)}";
+const avatarCss = "/*!@:host*/.sc-ix-avatar-h{display:flex;position:relative;width:-moz-fit-content;width:fit-content}/*!@:host ::-webkit-scrollbar-button*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){.sc-ix-avatar-h *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}/*!@:host ::-webkit-scrollbar*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar{width:0.5rem;height:0.5rem}/*!@:host ::-webkit-scrollbar-track*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}/*!@:host ::-webkit-scrollbar-track:hover*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}/*!@:host ::-webkit-scrollbar-thumb*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}/*!@:host ::-webkit-scrollbar-thumb:hover*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}/*!@:host ::-webkit-scrollbar-corner*/.sc-ix-avatar-h .sc-ix-avatar::-webkit-scrollbar-corner{display:none}/*!@:host .avatar*/.sc-ix-avatar-h .avatar.sc-ix-avatar{display:flex;align-items:center}/*!@:host .avatar > .avatar-image*/.sc-ix-avatar-h .avatar.sc-ix-avatar>.avatar-image.sc-ix-avatar{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}/*!@:host .avatar > .avatar-initials*/.sc-ix-avatar-h .avatar.sc-ix-avatar>.avatar-initials.sc-ix-avatar{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}/*!@:host .avatar #avatar-path-background*/.sc-ix-avatar-h .avatar.sc-ix-avatar #avatar-path-background.sc-ix-avatar{fill:var(--theme-avatar--background)}/*!@:host .avatar #avatar-path-person*/.sc-ix-avatar-h .avatar.sc-ix-avatar #avatar-path-person.sc-ix-avatar{fill:var(--theme-avatar--color)}/*!@:host .user-info*/.sc-ix-avatar-h .user-info.sc-ix-avatar{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}/*!@:host .user-info .avatar*/.sc-ix-avatar-h .user-info.sc-ix-avatar .avatar.sc-ix-avatar{width:2rem;pointer-events:none}/*!@:host .user-info .user*/.sc-ix-avatar-h .user-info.sc-ix-avatar .user.sc-ix-avatar{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}/*!@:host .user-info .username*/.sc-ix-avatar-h .user-info.sc-ix-avatar .username.sc-ix-avatar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/*!@:host .user-info .extra*/.sc-ix-avatar-h .user-info.sc-ix-avatar .extra.sc-ix-avatar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/*!@:host(.avatar-button) button*/.avatar-button.sc-ix-avatar-h button.sc-ix-avatar{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}/*!@:host(.avatar-button) .btn-invisible-primary*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar{border-radius:var(--theme-btn--border-radius)}/*!@:host(.avatar-button) .btn-invisible-primary, :host(.avatar-button) .btn-invisible-primary.focus, :host(.avatar-button) .btn-invisible-primary:focus-visible*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.focus.sc-ix-avatar,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}/*!@:host(.avatar-button) .btn-invisible-primary.selected*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover, :host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active, :host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled):active,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.selected.sc-ix-avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover, :host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled)*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled){cursor:pointer}/*!@:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active, :host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active*/.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled):active,.avatar-button.sc-ix-avatar-h .btn-invisible-primary.sc-ix-avatar:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}/*!@:host(.avatar-button) li*/.avatar-button.sc-ix-avatar-h li.sc-ix-avatar{transform:scale(0.8)}";
 var IxAvatarStyle0 = avatarCss;
 
 function DefaultAvatar(props) {
@@ -17711,6 +17711,7 @@ class Dropdown {
             this.registerKeyListener();
         }
         else {
+            this.destroyAutoUpdate();
             (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
             this.itemObserver.disconnect();
             (_b = this.disposeKeyListener) === null || _b === void 0 ? void 0 : _b.call(this);
@@ -17719,6 +17720,12 @@ class Dropdown {
     changedTrigger(newTriggerValue) {
         this.registerListener(newTriggerValue);
     }
+    destroyAutoUpdate() {
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+            this.autoUpdateCleanup = null;
+        }
+    }
     isAnchorSubmenu() {
         var _a;
         if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {
@@ -17755,10 +17762,7 @@ class Dropdown {
         if (this.offset) {
             positionConfig.middleware.push(offset(this.offset));
         }
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-            this.autoUpdateCleanup = null;
-        }
+        this.destroyAutoUpdate();
         this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.dropdownRef, async () => {
             const computeResponse = await computePosition(this.anchorElement, this.dropdownRef, positionConfig);
             Object.assign(this.dropdownRef.style, {
@@ -17825,7 +17829,7 @@ class Dropdown {
         this.applyDropdownPosition();
     }
     render() {
-        return (hAsync(Host, { key: '4f50f3c00bce087ae0c36c463f49c29adfe20f78', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (hAsync(Host, { key: '1b165268d8ee5fa5f18bca276b0541da36bd3130', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -17833,7 +17837,7 @@ class Dropdown {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, hAsync("div", { key: 'be529e836ffcf39ed344416cb41d1cc45a0d9abb', style: { display: 'contents' } }, this.header && hAsync("div", { key: 'af768a37fd188144b84836abc87b3fd06f0b4808', class: "dropdown-header" }, this.header), hAsync("slot", { key: '2b4e76a579c4cadb18e3ce7baa1f83c942e2d28f' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, hAsync("div", { key: 'cdecec289e6c242a31b6160e93cb63b80bf5e535', style: { display: 'contents' } }, this.header && hAsync("div", { key: '27b86587be67c8086480ecec8059f8d6ae8aa5b7', class: "dropdown-header" }, this.header), this.show && hAsync("slot", { key: '32d6960a187e91492e24fa7ee0d9407df1209829' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -18568,15 +18572,15 @@ class Group {
         this.selectGroup = createEvent(this, "selectGroup", 7);
         this.selectItem = createEvent(this, "selectItem", 7);
         this.collapsedChanged = createEvent(this, "collapsedChanged", 7);
+        this.observer = null;
         this.suppressHeaderSelection = false;
         this.header = undefined;
         this.subHeader = undefined;
         this.collapsed = true;
-        this.selected = undefined;
+        this.selected = false;
         this.index = undefined;
         this.expandOnHeaderClick = false;
         this.itemSelected = false;
-        this.dropdownTriggerRef = undefined;
         this.slotSize = this.groupItems.length;
         this.footerVisible = false;
         this.showExpandCollapsedIcon = false;
@@ -18588,7 +18592,8 @@ class Group {
         return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
     }
     get groupContent() {
-        return this.hostElement.shadowRoot.querySelector('.group-content');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
         this.collapsed = !this.collapsed;
@@ -18602,15 +18607,10 @@ class Group {
         }
     }
     onItemClick(index) {
-        if (index === this.index) {
-            this.index = undefined;
-            this.selectItem.emit(undefined);
-        }
-        else {
-            this.index = index;
-            this.selectItem.emit(index);
-        }
-        if (this.index >= 0) {
+        const newIndex = index === this.index ? undefined : index;
+        this.selectItem.emit(newIndex);
+        this.index = newIndex;
+        if (this.index !== undefined && this.index >= 0) {
             this.itemSelected = true;
         }
         else
@@ -18624,7 +18624,8 @@ class Group {
         }
     }
     onSlotChange() {
-        const slot = this.hostElement.shadowRoot.querySelector('slot[name="footer"]');
+        var _a;
+        const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="footer"]');
         if (slot) {
             this.footerVisible = hasSlottedElements(slot);
         }
@@ -18642,13 +18643,21 @@ class Group {
         });
     }
     componentDidLoad() {
+        var _a;
         this.observer = createMutationObserver(() => {
             this.slotSize = this.groupItems.length;
         });
+        if (!this.groupContent) {
+            return;
+        }
         this.observer.observe(this.groupContent, {
             childList: true,
         });
-        this.groupContent.addEventListener('selectedChanged', (evt) => {
+        (_a = this.groupContent) === null || _a === void 0 ? void 0 : _a.addEventListener('selectedChanged', (evt) => {
+            if (evt.detail.suppressSelection) {
+                evt.stopPropagation();
+                return;
+            }
             this.onItemClick(evt.detail.index);
         });
     }
@@ -18658,26 +18667,27 @@ class Group {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'a6c09009cd058c03a46699d1514a51e5befb5018' }, hAsync("div", { key: '7d0802bd7566f7d47062e91a8264b6d783a8a44b', class: {
+        return (hAsync(Host, { key: '8153fe3f0c5fd78f733287dacb9fb5cfd23e624c' }, hAsync("div", { key: '109139ea65795878ffd08e539ef5a59ade8c05ba', class: {
                 'group-header': true,
                 expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, hAsync("div", { key: '3f2e851b6d35893c2a3393348474e6cefa06ae79', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: 'dfed4e7962f4f3b071cc6b8d64b4efa06f139ebb', class: {
+            }, tabindex: "0" }, hAsync("div", { key: '262c00872bbfb8958de008e6a5d9f847a6121777', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: 'c64dc6333e5b8cd876d5dac4ed294885fa9d97db', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), hAsync("div", { key: 'afe8c9b382b2506f1c86a56abe4b29da07c52b9f', class: "btn-expand-header" }, hAsync("ix-icon", { key: 'de63d1492943de8e4bcf2f1f76b61feab1beea50', "data-testid": "expand-collapsed-icon", class: {
+            } }), hAsync("div", { key: 'b295acc0552867f1d97803cf7ffa2fcdafe30931', class: "btn-expand-header" }, hAsync("ix-icon", { key: 'd0b798aa02a970d77d1636ff38677f2b5777dc0b', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), hAsync("div", { key: '5ca15ab167295402b4fc5f226b14697777b3abba', class: "group-header-content" }, this.header ? (hAsync("div", { class: "group-header-props-container" }, hAsync("div", { class: "group-header-title" }, hAsync("span", { title: this.header }, this.header)), hAsync("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, hAsync("slot", { key: '2f78d4b163682214e6325b49ce69f2f737da0399', name: "header" }))), hAsync("ix-group-context-menu", { key: '56a4bcd4e623012de4a7a1bcc66bb1f280f66e90' }, hAsync("slot", { key: '439f0ba04c6ec4543f740ca70b965cd50eae669f', name: "dropdown" }))), hAsync("div", { key: '3cd56e5f026a12ad05ccf85760d2bb4a72ad47d4', class: {
+            }, name: this.collapsed ? 'chevron-right-small' : 'chevron-down-small', onClick: (e) => this.onExpandClick(e) })), hAsync("div", { key: 'fa7a41f9e379ec4972d1c3db364f0ab82e57a0b5', class: "group-header-content" }, this.header ? (hAsync("div", { class: "group-header-props-container" }, hAsync("div", { class: "group-header-title" }, hAsync("span", { title: this.header }, this.header)), hAsync("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, hAsync("slot", { key: '4caba82a4558a06a999723d52dd05ed1c19c772b', name: "header" }))), hAsync("ix-group-context-menu", { key: 'ca29c2ff305e9a0ba11299771cdb27c509cf887c' }, hAsync("slot", { key: 'dfd21416520cac904b790be7fceb0f02f8ef630d', name: "dropdown" }))), hAsync("div", { key: '07470786706f46bd197ea7ff9ce6b0b97d8b114a', class: {
                 'group-content': true,
-            } }, hAsync("div", { key: 'c4fb98c378079efb91edc03c5e88e7a01b33a223', style: {
+            } }, hAsync("div", { key: 'f9ec75f57035ff5583dd728d34907139f7d787f5', style: {
                 display: this.collapsed ? 'none' : 'contents',
-            } }, hAsync("slot", { key: 'f77631e111614e753f99ec942ff88142c2739c36', onSlotchange: () => {
-                const slot = this.hostElement.shadowRoot.querySelector('slot:not([name])');
+            } }, hAsync("slot", { key: 'bc86c0d2b2cc896e350c61aeb98896979ffb3647', onSlotchange: () => {
+                var _a;
+                const slot = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), hAsync("ix-group-item", { key: '9f84823ab01988af424b0b3beff5acc7ec963d01', suppressSelection: true, focusable: false, class: {
+            } }), hAsync("ix-group-item", { key: 'ad82143a05418d19517e06205452ed1db0367258', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            } }, hAsync("slot", { key: '14b0b37dfd590c88021c8c4c714a362dc0e82188', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, hAsync("slot", { key: 'e4aec4e664f7f4479e9be7d90bec9ea19c1b8677', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return IxGroupStyle0; }
@@ -18693,7 +18703,6 @@ class Group {
             "index": [1538],
             "expandOnHeaderClick": [4, "expand-on-header-click"],
             "itemSelected": [32],
-            "dropdownTriggerRef": [32],
             "slotSize": [32],
             "footerVisible": [32],
             "showExpandCollapsedIcon": [32]
@@ -18753,7 +18762,7 @@ class GroupContextMenu {
     }; }
 }
 
-const groupItemCss = "/*!@:host*/.sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem}/*!@:host *,\n:host *::after,\n:host *::before*/.sc-ix-group-item-h *.sc-ix-group-item,.sc-ix-group-item-h *.sc-ix-group-item::after,.sc-ix-group-item-h *.sc-ix-group-item::before{box-sizing:border-box}/*!@:host ::-webkit-scrollbar-button*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){.sc-ix-group-item-h *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}/*!@:host ::-webkit-scrollbar*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar{width:0.5rem;height:0.5rem}/*!@:host ::-webkit-scrollbar-track*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}/*!@:host ::-webkit-scrollbar-track:hover*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}/*!@:host ::-webkit-scrollbar-thumb*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}/*!@:host ::-webkit-scrollbar-thumb:hover*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}/*!@:host ::-webkit-scrollbar-corner*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-corner{display:none}/*!@:host > button*/.sc-ix-group-item-h>button.sc-ix-group-item{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}/*!@:host > button:focus-visible*/.sc-ix-group-item-h>button.sc-ix-group-item:focus-visible{border:1px solid var(--theme-color-focus-bdr)}/*!@:host ix-icon*/.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}/*!@:host .group-entry-selection-indicator*/.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}/*!@:host .group-entry-text*/.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host .group-entry-text-secondary*/.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}/*!@:host .group-entry-text-secondary,\n:host .group-entry-text-secondary span*/.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host(.suppress-selection)*/.suppress-selection.sc-ix-group-item-h{pointer-events:none}/*!@:host(.selected)*/.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}/*!@:host(.selected) .group-entry-selection-indicator*/.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-group-item-indicator--background--selected)}/*!@:host(:hover)*/.sc-ix-group-item-h:hover{background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}/*!@:host(.selected:hover)*/.selected.sc-ix-group-item-h:hover{background-color:var(--theme-color-ghost--selected-hover)}/*!@:host(:active)*/.sc-ix-group-item-h:active{background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}/*!@:host(.selected:active)*/.selected.sc-ix-group-item-h:active{background-color:var(--theme-color-ghost--selected-active)}";
+const groupItemCss = "/*!@:host*/.sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem}/*!@:host *,\n:host *::after,\n:host *::before*/.sc-ix-group-item-h *.sc-ix-group-item,.sc-ix-group-item-h *.sc-ix-group-item::after,.sc-ix-group-item-h *.sc-ix-group-item::before{box-sizing:border-box}/*!@:host ::-webkit-scrollbar-button*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){.sc-ix-group-item-h *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}/*!@:host ::-webkit-scrollbar*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar{width:0.5rem;height:0.5rem}/*!@:host ::-webkit-scrollbar-track*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}/*!@:host ::-webkit-scrollbar-track:hover*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}/*!@:host ::-webkit-scrollbar-thumb*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}/*!@:host ::-webkit-scrollbar-thumb:hover*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}/*!@:host ::-webkit-scrollbar-corner*/.sc-ix-group-item-h .sc-ix-group-item::-webkit-scrollbar-corner{display:none}/*!@:host > button*/.sc-ix-group-item-h>button.sc-ix-group-item{display:flex;height:100%;width:100%;align-items:center;justify-content:flex-start;position:relative;outline:none;background-color:var(--theme-group-item--background);border:1px solid transparent;color:var(--theme-color-std-text);cursor:pointer;padding-left:2.5rem}/*!@:host > button:focus-visible*/.sc-ix-group-item-h>button.sc-ix-group-item:focus-visible{border:1px solid var(--theme-color-focus-bdr)}/*!@:host ix-icon*/.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}/*!@:host .group-entry-selection-indicator*/.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}/*!@:host .group-entry-text*/.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host .group-entry-text-secondary*/.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}/*!@:host .group-entry-text-secondary,\n:host .group-entry-text-secondary span*/.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@:host(.selected)*/.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}/*!@:host(.selected) .group-entry-selection-indicator*/.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-group-item-indicator--background--selected)}/*!@:host(:hover)*/.sc-ix-group-item-h:hover{background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}/*!@:host(.selected:hover)*/.selected.sc-ix-group-item-h:hover{background-color:var(--theme-color-ghost--selected-hover)}/*!@:host(:active)*/.sc-ix-group-item-h:active{background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}/*!@:host(.selected:active)*/.selected.sc-ix-group-item-h:active{background-color:var(--theme-color-ghost--selected-active)}";
 var IxGroupItemStyle0 = groupItemCss;
 
 class GroupItem {
@@ -18764,21 +18773,17 @@ class GroupItem {
         this.text = undefined;
         this.secondaryText = undefined;
         this.suppressSelection = false;
-        this.selected = undefined;
+        this.selected = false;
         this.focusable = true;
         this.index = undefined;
     }
     clickListen() {
-        if (this.suppressSelection) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (hAsync(Host, { key: '1263d38096b46d1f07775d0907018af567054e6d', class: {
+        return (hAsync(Host, { key: 'ae51a9df7d4b27336b05017a18300c5ee91473c7', class: {
                 selected: this.selected && !this.suppressSelection,
-                'suppress-selection': this.suppressSelection,
-            } }, hAsync("button", { key: 'f5ca23ab1328e745e9bb8299db8d15a450cd3af7', tabindex: this.focusable ? 0 : -1 }, hAsync("div", { key: '3a60d30b7686a8b3b67343e7c5cbd5b1faacf0e4', class: "group-entry-selection-indicator" }), this.icon ? hAsync("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (hAsync("span", { class: "group-entry-text" }, hAsync("span", { title: this.text }, this.text))) : null, this.secondaryText ? (hAsync("span", { class: "group-entry-text-secondary" }, hAsync("span", { title: this.secondaryText }, this.secondaryText))) : null, hAsync("slot", { key: 'a24a61b86fea34c7124b5345bd41c08550a145b5' }))));
+            } }, hAsync("button", { key: 'd70ce085f9deb507c5365c4d4c3c75dac4864560', tabindex: this.focusable ? 0 : -1 }, hAsync("div", { key: '194d910fb5b1dc94e27b504568ef9b5d774fcaca', class: "group-entry-selection-indicator" }), this.icon ? hAsync("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (hAsync("span", { class: "group-entry-text" }, hAsync("span", { title: this.text }, this.text))) : null, this.secondaryText ? (hAsync("span", { class: "group-entry-text-secondary" }, hAsync("span", { title: this.secondaryText }, this.secondaryText))) : null, hAsync("slot", { key: '4934b9729052b030c04ea695d23abde6634eaf10' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return IxGroupItemStyle0; }
@@ -21371,7 +21376,7 @@ class Pagination {
             },
         };
         this.maxCountPages = 7;
-        this.advanced = undefined;
+        this.advanced = false;
         this.itemCount = 15;
         this.showItemCount = true;
         this.count = undefined;
@@ -21465,10 +21470,10 @@ class Pagination {
         return hAsync("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (hAsync(Host, { key: 'dfb53c78222c3c907d955c9548da14d68b0e94f8' }, hAsync("ix-icon-button", { key: '80935e6cfdff052b4a9280fd0edeed6a2c27e007', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { variant: "default" }, this.i18nPage), hAsync("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (hAsync(Host, { key: '6cc3a3f4bbfaa4d41c08c8f864e08a26ef7a0977' }, hAsync("ix-icon-button", { key: 'e457ad80d07a9503a87a09cddf9445037010cdbb', disabled: !this.count || this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { variant: "default" }, this.i18nPage), hAsync("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: 'd6d17f40ee390398252466da12abecef4952b7ce', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (hAsync("span", { class: "item-count" }, hAsync("ix-typography", { variant: "default" }, this.i18nItems), hAsync("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: '7638a95799a72d60fb3090dc033e7e397580e391', disabled: !this.count || this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (hAsync("span", { class: "item-count" }, hAsync("ix-typography", { variant: "default" }, this.i18nItems), hAsync("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, hAsync("ix-select-item", { label: "10", value: "10" }), hAsync("ix-select-item", { label: "15", value: "15" }), hAsync("ix-select-item", { label: "20", value: "20" }), hAsync("ix-select-item", { label: "40", value: "40" }), hAsync("ix-select-item", { label: "100", value: "100" })))) : ('')));
@@ -23025,7 +23030,7 @@ class SelectItem {
     }; }
 }
 
-const sliderCss = "/*!@:host*/.sc-ix-slider-h{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4)}/*!@:host *,\n:host *::after,\n:host *::before*/.sc-ix-slider-h *.sc-ix-slider,.sc-ix-slider-h *.sc-ix-slider::after,.sc-ix-slider-h *.sc-ix-slider::before{box-sizing:border-box}/*!@:host ::-webkit-scrollbar-button*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){.sc-ix-slider-h *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}/*!@:host ::-webkit-scrollbar*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar{width:0.5rem;height:0.5rem}/*!@:host ::-webkit-scrollbar-track*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}/*!@:host ::-webkit-scrollbar-track:hover*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}/*!@:host ::-webkit-scrollbar-thumb*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}/*!@:host ::-webkit-scrollbar-thumb:hover*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}/*!@:host ::-webkit-scrollbar-corner*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-corner{display:none}/*!@:host input[type=range]*/.sc-ix-slider-h input[type=range].sc-ix-slider{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}/*!@:host input[type=range].trace::before*/.sc-ix-slider-h input[type=range].trace.sc-ix-slider::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}/*!@:host input[type=range].trace::after*/.sc-ix-slider-h input[type=range].trace.sc-ix-slider::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}/*!@:host input[type=range]::-webkit-slider-runnable-track*/.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-runnable-track{background:transparent;height:0.25rem}/*!@:host input[type=range]::-moz-range-track*/.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-track{background:transparent;height:0.25rem}/*!@:host input[type=range i]::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range i].sc-ix-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}/*!@:host input[type=range i]::-moz-range-thumb*/.sc-ix-slider-h input[type=range i].sc-ix-slider::-moz-range-thumb{border:none;border-radius:0}/*!@:host input[type=range]::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}/*!@:host input[type=range]::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}/*!@:host input[type=range]:hover::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:hover::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:active::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:active::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:focus*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus{outline:none}/*!@:host input[type=range]:focus-visible::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}/*!@:host input[type=range]:focus-visible::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}/*!@:host .ticks*/.sc-ix-slider-h .ticks.sc-ix-slider{display:flex;position:relative;top:50%;transform:translateY(-50%)}/*!@:host .ticks .tick*/.sc-ix-slider-h .ticks.sc-ix-slider .tick.sc-ix-slider{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}/*!@:host .ticks .tick.tick-active*/.sc-ix-slider-h .ticks.sc-ix-slider .tick.tick-active.sc-ix-slider{background-color:var(--tick-color--active)}/*!@:host .slider*/.sc-ix-slider-h .slider.sc-ix-slider{position:relative;display:block;width:100%;height:1.5rem}/*!@:host .track*/.sc-ix-slider-h .track.sc-ix-slider{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}/*!@:host .thumb*/.sc-ix-slider-h .thumb.sc-ix-slider{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}/*!@:host .hide-tooltip*/.sc-ix-slider-h .hide-tooltip.sc-ix-slider{display:none}/*!@:host .label*/.sc-ix-slider-h .label.sc-ix-slider{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}/*!@:host .label-start*/.sc-ix-slider-h .label-start.sc-ix-slider{margin-left:0.5rem}/*!@:host .label-end*/.sc-ix-slider-h .label-end.sc-ix-slider{margin-right:0.5rem}/*!@:host .label-error*/.sc-ix-slider-h .label-error.sc-ix-slider{margin-left:0.5rem}/*!@:host(.error)*/.error.sc-ix-slider-h{--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}/*!@:host(.error) input[type=range]::-webkit-slider-thumb*/.error.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}/*!@:host(.error) input[type=range]::-moz-range-thumb*/.error.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{background-color:var(--theme-color-alarm)}/*!@:host(.disabled)*/.disabled.sc-ix-slider-h{pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}/*!@:host(.disabled) input[type=range]::-webkit-slider-thumb*/.disabled.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{background-color:var(--theme-color-7)}/*!@:host(.disabled) input[type=range]::-moz-range-thumb*/.disabled.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{background-color:var(--theme-color-7)}";
+const sliderCss = "/*!@:host*/.sc-ix-slider-h{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4)}/*!@:host *,\n:host *::after,\n:host *::before*/.sc-ix-slider-h *.sc-ix-slider,.sc-ix-slider-h *.sc-ix-slider::after,.sc-ix-slider-h *.sc-ix-slider::before{box-sizing:border-box}/*!@:host ::-webkit-scrollbar-button*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){.sc-ix-slider-h *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}/*!@:host ::-webkit-scrollbar*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar{width:0.5rem;height:0.5rem}/*!@:host ::-webkit-scrollbar-track*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}/*!@:host ::-webkit-scrollbar-track:hover*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}/*!@:host ::-webkit-scrollbar-thumb*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}/*!@:host ::-webkit-scrollbar-thumb:hover*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}/*!@:host ::-webkit-scrollbar-corner*/.sc-ix-slider-h .sc-ix-slider::-webkit-scrollbar-corner{display:none}/*!@:host input[type=range]*/.sc-ix-slider-h input[type=range].sc-ix-slider{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}/*!@:host input[type=range].trace::before*/.sc-ix-slider-h input[type=range].trace.sc-ix-slider::before{content:\"\";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}/*!@:host input[type=range].trace:not(.hide-trace-reference)::after*/.sc-ix-slider-h input[type=range].trace.sc-ix-slider:not(.hide-trace-reference)::after{content:\"\";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}/*!@:host input[type=range]::-webkit-slider-runnable-track*/.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-runnable-track{background:transparent;height:0.25rem}/*!@:host input[type=range]::-moz-range-track*/.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-track{background:transparent;height:0.25rem}/*!@:host input[type=range i]::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range i].sc-ix-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}/*!@:host input[type=range i]::-moz-range-thumb*/.sc-ix-slider-h input[type=range i].sc-ix-slider::-moz-range-thumb{border:none;border-radius:0}/*!@:host input[type=range]::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}/*!@:host input[type=range]::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}/*!@:host input[type=range]:hover::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:hover::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:active::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:active::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}/*!@:host input[type=range]:focus*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus{outline:none}/*!@:host input[type=range]:focus-visible::-webkit-slider-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}/*!@:host input[type=range]:focus-visible::-moz-range-thumb*/.sc-ix-slider-h input[type=range].sc-ix-slider:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}/*!@:host .ticks*/.sc-ix-slider-h .ticks.sc-ix-slider{display:flex;position:relative;top:50%;transform:translateY(-50%)}/*!@:host .ticks .tick*/.sc-ix-slider-h .ticks.sc-ix-slider .tick.sc-ix-slider{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}/*!@:host .ticks .tick.tick-active*/.sc-ix-slider-h .ticks.sc-ix-slider .tick.tick-active.sc-ix-slider{background-color:var(--tick-color--active)}/*!@:host .slider*/.sc-ix-slider-h .slider.sc-ix-slider{position:relative;display:block;width:100%;height:1.5rem}/*!@:host .track*/.sc-ix-slider-h .track.sc-ix-slider{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}/*!@:host .thumb*/.sc-ix-slider-h .thumb.sc-ix-slider{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}/*!@:host .hide-tooltip*/.sc-ix-slider-h .hide-tooltip.sc-ix-slider{display:none}/*!@:host .label*/.sc-ix-slider-h .label.sc-ix-slider{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}/*!@:host .label-start*/.sc-ix-slider-h .label-start.sc-ix-slider{margin-left:0.5rem}/*!@:host .label-end*/.sc-ix-slider-h .label-end.sc-ix-slider{margin-right:0.5rem}/*!@:host .label-error*/.sc-ix-slider-h .label-error.sc-ix-slider{margin-left:0.5rem}/*!@:host(.error)*/.error.sc-ix-slider-h{--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}/*!@:host(.error) input[type=range]::-webkit-slider-thumb*/.error.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}/*!@:host(.error) input[type=range]::-moz-range-thumb*/.error.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{background-color:var(--theme-color-alarm)}/*!@:host(.disabled)*/.disabled.sc-ix-slider-h{pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}/*!@:host(.disabled) input[type=range]::-webkit-slider-thumb*/.disabled.sc-ix-slider-h input[type=range].sc-ix-slider::-webkit-slider-thumb{background-color:var(--theme-color-7)}/*!@:host(.disabled) input[type=range]::-moz-range-thumb*/.disabled.sc-ix-slider-h input[type=range].sc-ix-slider::-moz-range-thumb{background-color:var(--theme-color-7)}";
 var IxSliderStyle0 = sliderCss;
 
 /*
@@ -23067,7 +23072,7 @@ class Slider {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChange = createEvent(this, "valueChange", 7);
-        this.step = undefined;
+        this.step = 1;
         this.min = 0;
         this.max = 100;
         this.value = 0;
@@ -23083,20 +23088,24 @@ class Slider {
         this.showTooltip = false;
     }
     get tooltip() {
-        return this.hostElement.shadowRoot.querySelector('ix-tooltip');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-tooltip');
     }
     get pseudoThumb() {
-        return this.hostElement.shadowRoot.querySelector('.thumb');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.thumb');
     }
     get slider() {
-        return this.hostElement.shadowRoot.getElementById('slider');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('slider');
     }
     onShowTooltipChange() {
+        var _a, _b;
         if (this.showTooltip) {
-            this.tooltip.showTooltip(this.pseudoThumb);
+            (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.showTooltip(this.pseudoThumb);
             return;
         }
-        this.tooltip.hideTooltip();
+        (_b = this.tooltip) === null || _b === void 0 ? void 0 : _b.hideTooltip();
     }
     componentWillLoad() {
         this.a11yAttributes = a11yHostAttributes(this.hostElement, [
@@ -23147,12 +23156,12 @@ class Slider {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (hAsync(Host, { key: 'ebd23d56f5fe53cc4db2c05ade808fa58cc49886', class: {
+        return (hAsync(Host, { key: 'c7e6a14875ee17d49fe5e42459b81fb561802ebc', class: {
                 disabled: this.disabled,
                 error: !!this.error,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, hAsync("div", { key: 'd32acfbde1e7d4a4b388b8d7ea5bfd8b8d0207e0', class: "slider" }, hAsync("div", { key: 'dc7ec76891a22c313c079f333b9f90d8f8e6c3a6', class: "track" }, hAsync("div", { key: '29abcd581432484795ca44b099437bde798f5941', class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, hAsync("div", { key: 'bed770beec56a4798df1c0b8546fd78ef6c1f749', class: "slider" }, hAsync("div", { key: 'b2337e7802806933356cc7930bcb5a0e025796b8', class: "track" }, hAsync("div", { key: 'd5d40d3e44d50112733e5c9137b807e3a25dcafa', class: "thumb", style: {
                 left: `calc(${valueInPercentage} * 100% - 8px)`,
-            } }), hAsync("div", { key: 'fa077ac5d24ea90356688992b5cd75d898cbda05', class: "ticks" }, this.marker
+            } }), hAsync("div", { key: '041f4368d4b80929a03abfbe617d8f5bb15957d0', class: "ticks" }, this.marker
             ? this.marker.map((markerValue) => {
                 if (markerValue > this.max || markerValue < this.min) {
                     return;
@@ -23165,20 +23174,23 @@ class Slider {
                         '--tick-value': `${left}`,
                     } }));
             })
-            : null)), hAsync("input", Object.assign({ key: '5f5885ebad1e149e23424ccd353070dcf0c138f6', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
+            : null)), hAsync("input", Object.assign({ key: 'ef61a64f69ebc8816778dfd95dee2402b0ed9144', id: "slider", type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), style: {
                 '--value': `${valueInPercentage}`,
                 '--trace-reference': `${traceReferenceInPercentage}`,
                 '--trace-start': `${traceStart}`,
                 '--trace-end': `${traceEnd}`,
             }, class: {
                 trace: this.trace && traceReferenceInPercentage !== valueInPercentage,
+                'hide-trace-reference': this.trace &&
+                    (this.traceReference <= this.min ||
+                        this.traceReference >= this.max),
             }, onFocus: () => {
                 this.showTooltip = true;
             }, onBlur: () => {
                 this.showTooltip = false;
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), hAsync("ix-tooltip", { key: 'd8251a14514f40c06ae43c2c245cbac584051865', class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max }, this.a11yAttributes)), hAsync("ix-tooltip", { key: '4dfe584376f3df426be2e049703adfb4c2bf39ab', class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true }, this.rangeInput)), hAsync("div", { key: 'a8917d620aa49c5f114f2b38c9caf3d373372ba2', class: "label" }, hAsync("div", { key: '59c1c607f4ef3c330a75910015869df5b27e831c', class: "label-start" }, hAsync("slot", { key: 'cb7414d304ca1f46b92bbfbd6681f027796ff65b', name: "label-start" })), hAsync("div", { key: '40953ef4339938b9f8d36690a7a1ce7054db02fb', class: "label-end" }, hAsync("slot", { key: '2b4a62eba114d8abc4603c82804860240453ece3', name: "label-end" }))), this.error ? (hAsync("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
+            }, animationFrame: true }, this.rangeInput)), hAsync("div", { key: '9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72', class: "label" }, hAsync("div", { key: '22ed6e4412f84449c68109dd5619054a65d8790f', class: "label-start" }, hAsync("slot", { key: '676a5d1b03b6a398bda253f01396c06ccb7cdb04', name: "label-start" })), hAsync("div", { key: '7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c', class: "label-end" }, hAsync("slot", { key: '1a4b99aebbe60d9db5e4ed5c26907aecf2a38568', name: "label-end" }))), this.error ? (hAsync("ix-typography", { class: 'label-error', color: "alarm" }, this.error)) : null));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -23384,7 +23396,7 @@ class TabItem {
         };
     }
     render() {
-        return (hAsync(Host, { key: '926d3579090f1be086eb75bdbc42865af3c51836', class: this.tabItemClasses({
+        return (hAsync(Host, { key: 'd066fe09ebb7ac33ef162eafed96189de7215022', class: this.tabItemClasses({
                 selected: this.selected,
                 disabled: this.disabled,
                 small: this.small,
@@ -23399,12 +23411,12 @@ class TabItem {
                 if (clientEvent.defaultPrevented) {
                     event.stopPropagation();
                 }
-            } }, hAsync("div", { key: 'fedfa30ba5108be5a8b0c0078a9512acab21f067', class: {
+            } }, hAsync("div", { key: '944c3beb003abae7f64ed18c3d77fa8d3a576be3', class: {
                 circle: this.rounded,
                 text: !this.rounded,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, hAsync("slot", { key: 'e1ff1b021041a04689c8ae1b1b54894f51fda854' })), hAsync("div", { key: '8cd112dcb4dcd0513603bf4623a58bb9740d6b32', class: {
+            } }, hAsync("slot", { key: 'ff6b883c8b1ec2e53fe9faa705bbcdb0345ef27b' })), hAsync("div", { key: '292419b01ae7e18db509ad09a83ffa5bbc6480a5', class: {
                 counter: true,
                 selected: this.selected,
                 hidden: !(this.rounded && this.counter !== undefined),
@@ -23476,12 +23488,8 @@ class Tabs {
         this.currentScrollAmount = 0;
         this.scrollAmount = 100;
         this.scrollActionAmount = 0;
-    }
-    get arrowLeftElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-left]');
-    }
-    get arrowRightElement() {
-        return this.hostElement.shadowRoot.querySelector('[data-arrow-right]');
+        this.showArrowPrevious = false;
+        this.showArrowNext = false;
     }
     onWindowResize() {
         this.totalItems = 0;
@@ -23498,13 +23506,24 @@ class Tabs {
         return this.getTabs()[tabIndex];
     }
     getTabsWrapper() {
-        return this.hostElement.shadowRoot.querySelector('.items-content');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.items-content');
+    }
+    initResizeObserver() {
+        const parentElement = this.hostElement.parentElement;
+        if (!parentElement)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.renderArrows();
+        });
+        this.resizeObserver.observe(parentElement);
     }
     showArrows() {
         try {
             const tabWrapper = this.getTabsWrapper();
-            return (tabWrapper.scrollWidth >
-                Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+            return (tabWrapper &&
+                tabWrapper.scrollWidth >
+                    Math.ceil(tabWrapper.getBoundingClientRect().width) &&
                 this.layout === 'auto');
         }
         catch (error) {
@@ -23513,7 +23532,7 @@ class Tabs {
     }
     showPreviousArrow() {
         try {
-            return this.showArrows() && this.scrollActionAmount < 0;
+            return this.showArrows() === true && this.scrollActionAmount < 0;
         }
         catch (error) {
             return false;
@@ -23522,8 +23541,11 @@ class Tabs {
     showNextArrow() {
         try {
             const tabWrapper = this.getTabsWrapper();
+            if (!tabWrapper) {
+                return false;
+            }
             const tabWrapperRect = tabWrapper.getBoundingClientRect();
-            return (this.showArrows() &&
+            return (this.showArrows() === true &&
                 this.scrollActionAmount >
                     (tabWrapper.scrollWidth - tabWrapperRect.width) * -1);
         }
@@ -23531,39 +23553,47 @@ class Tabs {
             return false;
         }
     }
-    getArrowStyle(condition) {
-        return {
-            opacity: condition ? '1' : '0',
-            zIndex: condition ? '1' : '-1',
-        };
-    }
     move(amount, click = false) {
-        const tabWrapper = this.getTabsWrapper();
-        const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
-        amount = this.currentScrollAmount + amount;
-        amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+        const tabsWrapper = this.getTabsWrapper();
+        if (!tabsWrapper) {
+            return;
+        }
+        const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;
+        const maxScrollWidth = -this.currentScrollAmount +
+            tabsWrapperVisibleWidth -
+            tabsWrapper.scrollWidth;
+        amount = amount < maxScrollWidth ? maxScrollWidth : amount;
+        amount += this.currentScrollAmount;
+        amount = Math.min(amount, 0);
         const styles = [
             `transform: translateX(${amount}px);`,
             click ? 'transition: all ease-in-out 400ms;' : '',
         ].join('');
-        tabWrapper.setAttribute('style', styles);
+        tabsWrapper.setAttribute('style', styles);
         if (click)
             this.currentScrollAmount = this.scrollActionAmount = amount;
         else
             this.scrollActionAmount = amount;
     }
-    moveTabToView(tabIndex) {
+    onSelectedChange(newValue) {
+        var _a;
         if (!this.showArrows())
             return;
-        const tab = this.getTab(tabIndex).getBoundingClientRect();
-        const amount = tab.x * -1;
-        this.move(amount, true);
+        const tabRect = this.getTab(newValue).getBoundingClientRect();
+        const wrapperWidth = (_a = this.getTabsWrapper()) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const arrowWidth = 32;
+        if (tabRect.left < arrowWidth) {
+            this.move(-tabRect.left + arrowWidth, true);
+        }
+        else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {
+            this.move(wrapperWidth - tabRect.right - arrowWidth, true);
+        }
     }
     setSelected(index) {
         this.selected = index;
     }
     clickTab(index) {
-        if (this.dragStop()) {
+        if (!this.clickAction.isClick || this.dragStop()) {
             return;
         }
         const { defaultPrevented } = this.selectedChange.emit(index);
@@ -23571,7 +23601,6 @@ class Tabs {
             return;
         }
         this.setSelected(index);
-        this.moveTabToView(index);
     }
     dragStart(element, event) {
         if (!this.showArrows())
@@ -23585,18 +23614,22 @@ class Tabs {
         const tabPositionX = parseFloat(window.getComputedStyle(element).left);
         const mousedownPositionX = event.clientX;
         const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
-        window.addEventListener('mouseup', () => {
+        const windowClick = () => {
             window.removeEventListener('mousemove', move, false);
+            window.removeEventListener('click', windowClick, false);
             this.dragStop();
-        });
+        };
+        window.addEventListener('click', windowClick);
         window.addEventListener('mousemove', move, false);
     }
     dragMove(event, tabX, mousedownX) {
         this.move(event.clientX + tabX - mousedownX);
     }
     dragStop() {
-        clearTimeout(this.clickAction.timeout);
-        this.clickAction.timeout = null;
+        if (this.clickAction.timeout) {
+            clearTimeout(this.clickAction.timeout);
+            this.clickAction.timeout = null;
+        }
         if (this.clickAction.isClick)
             return false;
         this.currentScrollAmount = this.scrollActionAmount;
@@ -23614,6 +23647,7 @@ class Tabs {
             element.setAttribute('selected', index === this.selected ? 'true' : 'false');
             element.setAttribute('placement', this.placement);
         });
+        this.initResizeObserver();
     }
     componentDidRender() {
         const tabs = this.getTabs();
@@ -23623,11 +23657,12 @@ class Tabs {
         });
     }
     componentWillRender() {
+        this.renderArrows();
+    }
+    renderArrows() {
         requestAnimationFrameNoNgZone(() => {
-            const showNextArrow = this.showNextArrow();
-            const previousArrow = this.showPreviousArrow();
-            Object.assign(this.arrowLeftElement.style, this.getArrowStyle(previousArrow));
-            Object.assign(this.arrowRightElement.style, this.getArrowStyle(showNextArrow));
+            this.showArrowNext = this.showNextArrow();
+            this.showArrowPrevious = this.showPreviousArrow();
         });
     }
     componentDidLoad() {
@@ -23636,6 +23671,10 @@ class Tabs {
             element.addEventListener('mousedown', (event) => this.dragStart(element, event));
         });
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     onTabClick(event) {
         if (event.defaultPrevented) {
             return;
@@ -23649,15 +23688,18 @@ class Tabs {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'a851dd22c0036611316b4c86dee7683c2cf13367' }, hAsync("div", { key: '3cdc8ce203a7fdcb431bc8514e97e1dc99ccf42f', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, hAsync("ix-icon", { key: 'a9a56482c144ccdfdbcb037ef4a1f3ba87907f59', name: 'chevron-left-small' })), hAsync("div", { key: 'c94814d93009f941f491ee27aab2d1f0a58641ef', class: {
+        return (hAsync(Host, { key: '014b3afcc4165f3c3aa0800ea6f12c15d138b48b' }, this.showArrowPrevious && (hAsync("div", { key: '6c98e2c2957c96970d42d5abdf959f325e1c05b8', class: "arrow", onClick: () => this.move(this.scrollAmount, true) }, hAsync("ix-icon", { key: '55f46b38e62a863415fa5d51da48a1be19303b78', name: 'chevron-left-small' }))), hAsync("div", { key: 'c0528e9e703746cc1acc63c1b68c4d9ee3a01a04', class: {
                 'tab-items': true,
                 'overflow-shadow': true,
-                'shadow-left': this.showPreviousArrow(),
-                'shadow-right': this.showNextArrow(),
-                'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
-            } }, hAsync("div", { key: 'e3b6d3d72736895e294b284e57ded8d225376405', class: "items-content" }, hAsync("slot", { key: '66fad8fbd1c2c599e3614377d0ef917b11653a2c' }))), hAsync("div", { key: '27512bc8fb342ac6247dd69261bdbdab2a8d42dc', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, hAsync("ix-icon", { key: '99ab01071111e8fca336712967e7e2c0a8643450', name: 'chevron-right-small' }))));
+                'shadow-left': this.showArrowPrevious,
+                'shadow-right': this.showArrowNext,
+                'shadow-both': this.showArrowNext && this.showArrowPrevious,
+            } }, hAsync("div", { key: 'bb6174f8e9a9543ee928a70de23500edbedaeb04', class: "items-content" }, hAsync("slot", { key: 'ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9' }))), this.showArrowNext && (hAsync("div", { key: '743123a5b14ed6a473c21b742f54cbf4ae4405da', class: "arrow right", onClick: () => this.move(-this.scrollAmount, true) }, hAsync("ix-icon", { key: 'd67ab90bf1b620791ca9e84f7ace8b7a04a7a772', name: 'chevron-right-small' })))));
     }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "selected": ["onSelectedChange"]
+    }; }
     static get style() { return IxTabsStyle0; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -23671,7 +23713,9 @@ class Tabs {
             "totalItems": [32],
             "currentScrollAmount": [32],
             "scrollAmount": [32],
-            "scrollActionAmount": [32]
+            "scrollActionAmount": [32],
+            "showArrowPrevious": [32],
+            "showArrowNext": [32]
         },
         "$listeners$": [[9, "resize", "onWindowResize"], [0, "tabClick", "onTabClick"]],
         "$lazyBundleId$": "-",
@@ -24340,7 +24384,7 @@ class Tooltip {
         }
     }
     async computeTooltipPosition(target) {
-        const computeResponse = await computePosition(target, this.hostElement, {
+        return computePosition(target, this.hostElement, {
             strategy: 'fixed',
             placement: this.placement,
             middleware: [
@@ -24355,7 +24399,6 @@ class Tooltip {
                 }),
             ],
         });
-        return computeResponse;
     }
     applyTooltipArrowPosition(computeResponse) {
         const arrowPosition = this.computeArrowPosition(computeResponse);
@@ -24366,6 +24409,7 @@ class Tooltip {
             return;
         }
         return new Promise((resolve) => {
+            this.destroyAutoUpdate();
             this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
                 setTimeout(async () => {
                     const computeResponse = await this.computeTooltipPosition(target);
@@ -24486,9 +24530,9 @@ class Tooltip {
         this.visible = false;
     }
     render() {
-        return (hAsync(Host, { key: '990726c5c0bfdbdb0d5d1678ec54b5902d41d1cd', class: {
+        return (hAsync(Host, { key: '5d57bd50e4b54e59eef7e0ec463cf9cadba6ddc4', class: {
                 visible: this.visible,
-            }, role: "tooltip" }, hAsync("div", { key: 'ecab668bf3f4010329c611b3d44a8103080d185e', class: 'tooltip-title' }, hAsync("slot", { key: '016c833df9a38916cbd805756c48098d491f5846', name: "title-icon" }), hAsync("ix-typography", { key: 'fe0a3fe4e2c9735207e22befc6006700859df2fc', variant: "default-title" }, this.titleContent, hAsync("slot", { key: '6fcb3c9a2534922477aeb8b833f4e806d4010b84', name: "title-content" }))), hAsync("div", { key: 'fcc689886a4d9651b0f7f23fb71e7d738558fde7', class: 'tooltip-content' }, hAsync("slot", { key: '610c6bc179044892c550fbfa71313a1d27ee917a' })), hAsync("div", { key: 'faf7c2a5d6b6347bd5c4ce9de377680c1ad4f06c', class: "arrow" })));
+            }, role: "tooltip" }, hAsync("div", { key: '004a422b325b2c26639e479f3bc6a832277c38db', class: 'tooltip-title' }, hAsync("slot", { key: 'dfb6ebe4022d3835b11d7237438358e8dd27191d', name: "title-icon" }), hAsync("ix-typography", { key: 'e4230c3e9c28f53d217e8653fd972749af995dde', variant: "default-title" }, this.titleContent, hAsync("slot", { key: 'bfd75a3ae808f03a552271a9f10c896de28072e2', name: "title-content" }))), hAsync("div", { key: 'b8c20ae1bb16343dca997ecb2ef744d8b18b6ede', class: 'tooltip-content' }, hAsync("slot", { key: 'cb15413ddd0b35a6ceb5dd95beebc855131fb998' })), hAsync("div", { key: '91e9df64725d3ce40f280640374f0e95f89cf67b', class: "arrow" })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return IxTooltipStyle0; }