@siemens/ix 0.0.0-pr-2166-20251001134702 → 0.0.0-pr-2212-20251017115125

package/hydrate/index.js

@@ -3622,12 +3622,12 @@ class ApplicationLayoutService {
             const match = matchBreakpoint(breakpoint);
             matchBreakpoints.push([breakpoint, match]);
         });
-        if (matchBreakpoints.every(([, match]) => match === false)) {
+        if (matchBreakpoints.every(([_, match]) => match === false)) {
             let breakPointIndex = 0;
             if (!__classPrivateFieldGet$2(this, _ApplicationLayoutService_supportedBreakpoints, "f").includes('lg')) {
                 breakPointIndex = matchBreakpoints.length - 1;
             }
-            const [breakpoint] = matchBreakpoints[breakPointIndex];
+            const [breakpoint, _] = matchBreakpoints[breakPointIndex];
             requestAnimationFrame(() => __classPrivateFieldGet$2(this, _ApplicationLayoutService_breakpointChangeListener, "f").emit(breakpoint));
             __classPrivateFieldSet$2(this, _ApplicationLayoutService_breakpoint, breakpoint, "f");
             return;
@@ -3802,53 +3802,46 @@ class ThemeSwitcher {
     isThemeClass(className) {
         return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
     }
-    setTheme(themeName, systemAppearance = false, 
-    /**
-     * @deprecated In v4 setTheme will always target the document.
-     * TODO: IX-3024
-     */
-    target = document.body) {
+    setTheme(themeName, systemAppearance = false) {
         if (this.isThemeClass(themeName)) {
-            this.replaceBodyThemeClass(themeName);
+            this.replaceThemeClass(themeName);
         }
         else {
-            target.setAttribute(dataIxTheme, themeName);
+            document.documentElement.setAttribute(dataIxTheme, themeName);
         }
         if (systemAppearance) {
             const currentSystemAppearance = getCurrentSystemAppearance();
             this.setVariant(currentSystemAppearance);
         }
     }
-    replaceBodyThemeClass(themeName) {
+    replaceThemeClass(themeName) {
         const oldThemes = [];
-        Array.from(document.body.classList)
+        Array.from(document.documentElement.classList)
             .filter((className) => className && this.isThemeClass(className))
             .forEach((className) => {
             oldThemes.push(className);
         });
-        document.body.classList.remove(...oldThemes);
-        document.body.classList.add(themeName);
+        document.documentElement.classList.remove(...oldThemes);
+        document.documentElement.classList.add(themeName);
     }
     toggleMode() {
-        const elements = [document.body, document.documentElement];
-        const elementWithSchema = elements.find((el) => this.getDataColorSchema(el));
-        if (elementWithSchema) {
-            const currentSchema = this.getDataColorSchema(elementWithSchema);
-            elementWithSchema.setAttribute(dataIxColorSchema, currentSchema === 'dark' ? 'light' : 'dark');
+        if (document.documentElement.hasAttribute(dataIxColorSchema)) {
+            const currentSchema = this.getDataColorSchema(document.documentElement);
+            document.documentElement.setAttribute(dataIxColorSchema, currentSchema === 'dark' ? 'light' : 'dark');
             return;
         }
         const oldThemes = [];
-        Array.from(document.body.classList)
+        Array.from(document.documentElement.classList)
             .filter((className) => className && this.isThemeClass(className))
             .forEach((className) => {
             oldThemes.push(className);
         });
         if (oldThemes.length === 0) {
-            document.body.classList.add(this.getOppositeMode(this.defaultTheme));
+            document.documentElement.classList.add(this.getOppositeMode(this.defaultTheme));
             return;
         }
         oldThemes.forEach((themeName) => {
-            document.body.classList.replace(themeName, this.getOppositeMode(themeName));
+            document.documentElement.classList.replace(themeName, this.getOppositeMode(themeName));
         });
     }
     getDataColorSchema(target) {
@@ -3856,26 +3849,23 @@ class ThemeSwitcher {
     }
     getCurrentTheme() {
         var _a;
-        return ((_a = Array.from(document.body.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${document.body.getAttribute(dataIxTheme) ||
-            document.documentElement.getAttribute(dataIxTheme) ||
-            'classic'}-${document.body.getAttribute(dataIxColorSchema) ||
-            document.documentElement.getAttribute(dataIxColorSchema) ||
+        return ((_a = Array.from(document.documentElement.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${document.documentElement.getAttribute(dataIxTheme) || 'classic'}-${document.documentElement.getAttribute(dataIxColorSchema) ||
             getCurrentSystemAppearance()}`);
     }
-    setVariant(variant = getCurrentSystemAppearance(), target = document.body) {
-        if (this.getDataColorSchema(target)) {
-            target.setAttribute(dataIxColorSchema, variant);
+    setVariant(variant = getCurrentSystemAppearance()) {
+        if (this.getDataColorSchema(document.documentElement)) {
+            document.documentElement.setAttribute(dataIxColorSchema, variant);
             return;
         }
         const currentTheme = this.getCurrentTheme();
-        document.body.classList.remove(currentTheme);
+        document.documentElement.classList.remove(currentTheme);
         if (currentTheme.endsWith(this.suffixDark)) {
-            document.body.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
+            document.documentElement.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
         }
         if (currentTheme.endsWith(this.suffixLight)) {
-            document.body.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
+            document.documentElement.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
         }
-        target.setAttribute(dataIxColorSchema, variant);
+        document.documentElement.setAttribute(dataIxColorSchema, variant);
     }
     getOppositeMode(themeName) {
         if (themeName.endsWith(this.suffixDark)) {
@@ -3934,10 +3924,8 @@ class ThemeSwitcher {
             this.handleClassMutations(classMutations);
             this.handleDataMutations(dataMutations);
         };
-        this.mutationObserverDocumentElement = new MutationObserver(handleMutations);
-        this.mutationObserverDocumentElement.observe(document.documentElement, mutationObserverConfig);
-        this.mutationObserverBody = new MutationObserver(handleMutations);
-        this.mutationObserverBody.observe(document.body, mutationObserverConfig);
+        this.mutationObserver = new MutationObserver(handleMutations);
+        this.mutationObserver.observe(document.documentElement, mutationObserverConfig);
     }
     constructor() {
         this.prefixTheme = 'theme-';
@@ -8867,7 +8855,7 @@ class Breadcrumb {
         /**
          * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
-        this.subtle = false;
+        this.ghost = true;
         /**
          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
          * with conditionally hidden previous items
@@ -8904,8 +8892,8 @@ class Breadcrumb {
         const updatedItems = this.getItems();
         updatedItems.forEach((bc, index) => {
             const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
-            bc.subtle = this.subtle;
-            bc.hideChevron = updatedItems.length - 1 === index && !shouldShowDropdown;
+            bc.ghost = this.ghost;
+            bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
             bc.isDropdownTrigger = shouldShowDropdown;
             if (shouldShowDropdown) {
                 this.nextButtonRef(bc);
@@ -8913,7 +8901,7 @@ class Breadcrumb {
             if (updatedItems.length < this.visibleItemCount) {
                 return;
             }
-            bc.invisible = index < updatedItems.length - this.visibleItemCount;
+            bc.visible = index >= updatedItems.length - this.visibleItemCount;
         });
         this.items = updatedItems;
     }
@@ -8923,7 +8911,7 @@ class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (hAsync(Host, { key: '12f8783a3a970031434ab062dba6ced47c167570' }, hAsync("ix-dropdown", { key: 'c3d871fa0f8cdc9cb49f5449de13f599452ba323', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (hAsync(Host, { key: 'cd3fb633db6e273763b650dee6cf699190f9c66c' }, hAsync("ix-dropdown", { key: '4bb90841a1e65c3c43a5897cd3b7baffa304df6e', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef.waitForCurrent()
                 : undefined, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -8936,7 +8924,7 @@ class Breadcrumb {
             return (hAsync("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (hAsync("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, hAsync("nav", { key: '076d1d44094bbd01bce51daf92bc8ad28f93f224', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, hAsync("ol", { key: 'edd1719a74b337e52d6f2e30d7ea7040ef2c1640' }, hAsync("slot", { key: '8ec35c7e353630c9d9ba4839c6d33b7e68a25e74' }))), hAsync("ix-dropdown", { key: '8750f9d8b51762d5a2fc4303e4c34f048383f8fd', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (hAsync("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (hAsync("ix-breadcrumb-item", { id: this.previousButtonId, ref: this.previousButtonRef, label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, hAsync("nav", { key: '153d49ef29065bcc78cb3b06a1bcc6341b028cca', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, hAsync("ol", { key: '1d7dcd947a111b74dcee6779968b52f63e36c984' }, hAsync("slot", { key: 'c9d8ac0c01834d40d2ca1d3acfbb323d04954669' }))), hAsync("ix-dropdown", { key: 'ba8cb0f0ffd45556b76be3e65d45c742ab2312ed', trigger: this.nextButtonRef.waitForCurrent() }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (hAsync("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,
@@ -8954,7 +8942,7 @@ class Breadcrumb {
         "$members$": {
             "visibleItemCount": [2, "visible-item-count"],
             "nextItems": [16, "next-items"],
-            "subtle": [4],
+            "ghost": [4],
             "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
             "items": [32],
             "isPreviousDropdownExpanded": [32]
@@ -8978,11 +8966,11 @@ class BreadcrumbItem {
          */
         this.target = '_self';
         /**@internal */
-        this.subtle = false;
+        this.ghost = true;
         /**@internal */
-        this.invisible = false;
+        this.visible = true;
         /**@internal */
-        this.hideChevron = false;
+        this.showChevron = true;
         /** @internal */
         this.isDropdownTrigger = false;
     }
@@ -9006,7 +8994,7 @@ class BreadcrumbItem {
     }
     render() {
         const props = {
-            variant: this.subtle ? 'subtle-primary' : 'tertiary',
+            variant: this.ghost ? 'tertiary' : 'subtle-primary',
             iconOnly: false,
             iconOval: false,
             disabled: false,
@@ -9024,12 +9012,12 @@ class BreadcrumbItem {
             target: this.target,
             rel: this.rel,
         };
-        if (this.invisible) {
+        if (!this.visible) {
             return hAsync(Host, { class: 'invisible' });
         }
         return (hAsync(Host, { class: {
-                'hide-chevron': this.hideChevron,
-            }, onClick: () => this.itemClick.emit(this.label) }, hAsync("li", null, hAsync(BaseButton, Object.assign({}, props, { afterContent: hAsync(Fragment, null, !this.hideChevron && (hAsync("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' }))) }), this.label, hAsync("slot", null)))));
+                'hide-chevron': !this.showChevron,
+            }, onClick: () => this.itemClick.emit(this.label) }, hAsync("li", null, hAsync(BaseButton, Object.assign({}, props, { afterContent: hAsync(Fragment, null, this.showChevron ? (hAsync("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, hAsync("slot", null)))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return breadcrumbItemCss; }
@@ -9043,9 +9031,9 @@ class BreadcrumbItem {
             "href": [1],
             "target": [1],
             "rel": [1],
-            "subtle": [4],
-            "invisible": [4],
-            "hideChevron": [4, "hide-chevron"],
+            "ghost": [4],
+            "visible": [4],
+            "showChevron": [4, "show-chevron"],
             "isDropdownTrigger": [4, "is-dropdown-trigger"],
             "a11y": [32]
         },
@@ -9647,10 +9635,16 @@ class CategoryFilter {
          */
         this.hideIcon = false;
         /**
-         * If set to true, prevents that a single category can be set more than once.
-         * An already set category will not appear in the category dropdown if set to true.
+         * If set to true, allows that a single category can be set more than once.
+         * An already set category will not appear in the category dropdown if set to false.
+         *
+         * Defaults to true
+         */
+        this.repeatCategories = true;
+        /**
+         * @internal For debugging purposes only!
          */
-        this.uniqueCategories = false;
+        this.tmpDisableScrollIntoView = true;
         /**
          * i18n
          */
@@ -9910,7 +9904,7 @@ class CategoryFilter {
         this.emitFilterEvent();
     }
     filterMultiples(value) {
-        if (!this.uniqueCategories) {
+        if (this.repeatCategories) {
             return true;
         }
         const isCategoryAlreadySet = this.filterTokens.find((token) => token.id === value);
@@ -10056,7 +10050,9 @@ class CategoryFilter {
     componentDidRender() {
         var _a, _b;
         if (this.isScrollStateDirty) {
-            (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+            if (!this.tmpDisableScrollIntoView) {
+                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+            }
             this.isScrollStateDirty = false;
         }
     }
@@ -10098,19 +10094,19 @@ class CategoryFilter {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: 'c067de370164a717112829f8be82ac8d786d7622' }, hAsync("form", { key: '2cd185f59a209029a1184790488eb472a8456cbb', ref: (el) => (this.formElement = el) }, hAsync("div", { key: '5d0eed2dacde6318ebe516becdc41b785908c864', "read-only": this.readonly, class: {
+        return (hAsync(Host, { key: 'b69168fccbcac0b261a929d4a44f6f693001714c' }, hAsync("form", { key: '3bad02565919f5e48674a5228ba0d7635b44a9d1', ref: (el) => (this.formElement = el) }, hAsync("div", { key: '732c413af7883a335c369bb4e2e02763d70f97d1', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, hAsync("ix-icon", { key: 'ec27370c08d6882c85f29dafb7c9cbf2655cbacf', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), hAsync("div", { key: '277a47c6cc91d6b631c01ae4b3f8f21cca29943e', class: "token-container" }, hAsync("div", { key: 'c086102952499cbd43ae910d745be5ef0aa44e40', class: "list-unstyled" }, this.filterTokens.map((value, index) => (hAsync("span", { key: value.toString(), class: {
+            } }, hAsync("ix-icon", { key: '67181824a8f1632c95fb686e0f6bc68c66fee398', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), hAsync("div", { key: '57d870d48eac869af8ae3a138e0ed10b7b781fcb', class: "token-container" }, hAsync("div", { key: '6fca67b428e8e9b5cef5e9e9980c220b1517c331', class: "list-unstyled" }, this.filterTokens.map((value, index) => (hAsync("span", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, hAsync("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (hAsync("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), hAsync("input", Object.assign({ key: '7f2bdc80da327d2c40f7031259618131a391bd7c', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), hAsync("input", Object.assign({ key: '2796b54f0a20bbd63ac98e1fadc087caf1a55d27', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (hAsync("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
@@ -10134,7 +10130,8 @@ class CategoryFilter {
             "icon": [1],
             "hideIcon": [4, "hide-icon"],
             "staticOperator": [1, "static-operator"],
-            "uniqueCategories": [4, "unique-categories"],
+            "repeatCategories": [4, "repeat-categories"],
+            "tmpDisableScrollIntoView": [4, "tmp-disable-scroll-into-view"],
             "labelCategories": [1, "label-categories"],
             "i18nPlainText": [1, "i18n-plain-text"],
             "ariaLabelResetButton": [1, "aria-label-reset-button"],
@@ -10537,7 +10534,7 @@ __decorate$d([
     })
 ], CheckboxGroup.prototype, "onClassFieldUpdate", null);
 
-const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:pointer}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
+const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:pointer}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning-text)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
 
 class Chip {
     constructor(hostRef) {
@@ -10548,10 +10545,10 @@ class Chip {
          */
         this.variant = 'primary';
         /**
-         * Determines if the chip is interactive. If true no user input (e.g. mouse states, keyboard navigation)
+         * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)
          * will be possible and also the close button will not be present.
          */
-        this.inactive = false;
+        this.active = true;
         /**
          * Show close icon
          */
@@ -10592,6 +10589,7 @@ class Chip {
         return (hAsync("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text));
     }
     render() {
+        const isInactive = this.active === false;
         let customStyle = {};
         if (this.variant === 'custom') {
             customStyle = {
@@ -10599,16 +10597,16 @@ class Chip {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (hAsync(Host, { key: 'a9d49af6fa315e993d7e6968037eec933ac7beb4', tabIndex: "-1", class: {
-                inactive: this.inactive,
+        return (hAsync(Host, { key: '615e9cde354e947cfedf93f5d7049a55acd742f9', tabIndex: "-1", class: {
+                inactive: isInactive,
             }, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.chipColor,
                 }
-                : {} }, hAsync("div", { key: '68e9b1b7cdcd51c0ea62d1e907749d6019346411', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+                : {} }, hAsync("div", { key: '64c04ae766296f7913ea662db14b5ec3e3828193', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
-                inactive: this.inactive,
+                inactive: isInactive,
                 alarm: this.variant === 'alarm',
                 critical: this.variant === 'critical',
                 info: this.variant === 'info',
@@ -10620,11 +10618,11 @@ class Chip {
                 closable: this.closable,
                 icon: !!this.icon,
                 centerContent: this.centerContent,
-            } }, hAsync("div", { key: '6880ba6bb16fb14ce2e3fb6e3575539a5c1c182a', class: "content-wrapper" }, this.icon && (hAsync("ix-icon", { key: '85ede4a45b6705d95e0d3d2ff602a75bce77c4fa', class: {
+            } }, hAsync("div", { key: 'b56a1240130fb26f2d31a946e1d1b3199e851836', class: "content-wrapper" }, this.icon && (hAsync("ix-icon", { key: '546438997d8e9727f9d410c9c3a7be16a0f9c858', class: {
                 'with-icon': true,
             }, name: this.icon, size: '24', style: this.variant === 'custom'
                 ? { color: this.outline ? this.background : this.chipColor }
-                : undefined })), hAsync("span", { key: '3b7bd50643a4f5b3ba25c612eb29cbd8218d0aa2', class: "slot-container" }, hAsync("slot", { key: '0d282990c3bbc56eb96dd9373ff66b61fac0b1f9' }))), this.inactive === false && this.closable && this.getCloseButton()), this.getTooltip()));
+                : undefined })), hAsync("span", { key: '0b7f723b1a687a0377f6b1d128d167c24c0ee43a', class: "slot-container" }, hAsync("slot", { key: '11dd6b1a9c781500c96d37563279f0359276c26d' }))), isInactive === false && this.closable ? this.getCloseButton() : null), this.getTooltip()));
     }
     get hostElement() { return getElement(this); }
     static get style() { return chipCss; }
@@ -10633,7 +10631,7 @@ class Chip {
         "$tagName$": "ix-chip",
         "$members$": {
             "variant": [513],
-            "inactive": [4],
+            "active": [4],
             "closable": [4],
             "icon": [1],
             "background": [1],
@@ -18718,9 +18716,9 @@ class DateDropdown {
          */
         this.format = 'yyyy/LL/dd';
         /**
-         * If true disables date range selection (from/to).
+         * If true a range of dates can be selected.
          */
-        this.singleSelection = false;
+        this.range = true;
         /**
          * Picker date. If the picker is in range mode this property is the start date.
          * If set to `null` no default start date will be pre-selected.
@@ -18765,11 +18763,11 @@ class DateDropdown {
          */
         this.showWeekNumbers = false;
         /**
-         * Controls whether custom date range selection is disabled in the component.
-         * When set to 'false', the user can select a custom date range using the date picker.
-         * When set to 'true', only predefined time date ranges are available for selection.
+         * Controls whether the user is allowed to pick custom date ranges in the component.
+         * When set to 'true', the user can select a custom date range using the date picker.
+         * When set to 'false', only predefined time date ranges are available for selection.
          */
-        this.customRangeDisabled = false;
+        this.customRangeAllowed = true;
         /**
          * An array of predefined date range options for the date picker.
          * Each option is an object with a label describing the range and a function
@@ -18843,7 +18841,7 @@ class DateDropdown {
     initialize() {
         const isCustomRange = this.dateRangeId === 'custom' ||
             (!this.dateRangeId && !!this.from && !!this.to);
-        if (isCustomRange && !this.customRangeDisabled) {
+        if (isCustomRange && this.customRangeAllowed) {
             this.selectedDateRangeId = 'custom';
             this.updateCurrentDate();
             return;
@@ -18913,21 +18911,21 @@ class DateDropdown {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: 'b0c80bf0c01f34eccf3ffd03cab8cb4598122b8e' }, hAsync("ix-button", { key: '19fc20d03477850083cc6274ea8b4269fb827365', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), hAsync("ix-dropdown", { key: '8b0260dd47fd1e6267b539ef0f12a544f3817c93', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        return (hAsync(Host, { key: 'b977b971c393e2decb1ee6b5d9a0f289b97a9d49' }, hAsync("ix-button", { key: 'bb9b321daff499f439d555a5bdaca1beac6d945c', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled, ariaLabel: this.ariaLabelDropdownButton }, this.getButtonLabel()), hAsync("ix-dropdown", { key: 'a9b816ca1356acaf7de353b30bfd0b248adddb67', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched &&
                     this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, hAsync("ix-layout-grid", { key: '827aa5f75b7351f7194800e5d08e99be05550674', noMargin: true }, hAsync("ix-row", { key: '31a94fc990f9f4a30f3259e1148e897d512b3408' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (hAsync("ix-col", { key: '4c6222ffde5a8f8644f7e4030f5942e148014e2f', class: {
+            } }, hAsync("ix-layout-grid", { key: '506cb9851836d4afd5cd3389392134711dbf6d06', noMargin: true }, hAsync("ix-row", { key: '3535f191761b9eba9acce33a00cfb0e57fb8dfcf' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (hAsync("ix-col", { key: '18aa27777967221e10c5e64463b2f06d00f5cb86', class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (hAsync("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), hAsync("div", { key: '7c6e52ce4e81ba257925eaf9dae155d1fff0bcf1', hidden: this.customRangeDisabled }, hAsync("ix-dropdown-item", { key: '6be7c3b1b827a75c51f82edd8971b3cc53f8167c', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), hAsync("ix-col", { key: 'a8119f9199cb8e4e162688bfdcf4f91242fbd5b7', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (hAsync(Fragment, { key: 'bd24f234a02cc55ed73df93ca6d6791d11d9ad77' }, hAsync("ix-date-picker", { key: '0aaf7e9c3ee79d9d232eed14fb840e246caddd20', embedded: true, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (hAsync("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), hAsync("div", { key: '99819aa2022de83a79f9a405e875dd0749ce7e8c', hidden: !this.customRangeAllowed }, hAsync("ix-dropdown-item", { key: 'd60f7d8ada6b1a8835289b39f70c4a2082c3bddc', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), hAsync("ix-col", { key: 'b20fd6accb39f3f91450c9474b726ec5cd80a7e7', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (hAsync(Fragment, { key: '69fe830b8d426b735274ada9e2d600dd0b402f42' }, hAsync("ix-date-picker", { key: 'bcfd9bcfa0517dfd8947ce39668bfd2a9e732708', standaloneAppearance: false, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, singleSelection: this.singleSelection, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), hAsync("div", { key: 'f2bd49f4ca5012eb32fc4e859bb6e9da2cd25f3d', class: "pull-right" }, hAsync("ix-button", { key: '18cb506d16700b59884660c4d8afb63c6e66400b', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), hAsync("div", { key: '08f452db2c829fbb0e6e25e0c3ea38bb0c4a5361', class: "pull-right" }, hAsync("ix-button", { key: '33b0f283488347219afb840cfcdf92e308da58de', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
@@ -18948,7 +18946,7 @@ class DateDropdown {
         "$members$": {
             "disabled": [4],
             "format": [1],
-            "singleSelection": [4, "single-selection"],
+            "range": [4],
             "from": [1],
             "to": [1],
             "minDate": [1, "min-date"],
@@ -18958,7 +18956,7 @@ class DateDropdown {
             "loading": [4],
             "showWeekNumbers": [4, "show-week-numbers"],
             "ariaLabelDropdownButton": [1, "aria-label-dropdown-button"],
-            "customRangeDisabled": [4, "custom-range-disabled"],
+            "customRangeAllowed": [4, "custom-range-allowed"],
             "dateRangeOptions": [16, "date-range-options"],
             "locale": [1],
             "weekStartIndex": [2, "week-start-index"],
@@ -19641,15 +19639,15 @@ class DateInput {
         const invalidText = this.isInputInvalid
             ? this.i18nErrorDateUnparsable
             : this.invalidText;
-        return (hAsync(Host, { key: '00644497cf3410dff8025cd84e012617d88c4bad', class: {
+        return (hAsync(Host, { key: '5c7284b0afd8b3ee906370beb4b7e872a849f5cb', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '73aa5675f617a35479465eacc2959391f57e78e9', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), hAsync("ix-dropdown", { key: '6b219ac0027370f8c140feb9c438750259f93ef8', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, hAsync("ix-field-wrapper", { key: '5e8c3a6dd37625cb818438fd8e0c7bef6daa46a1', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), hAsync("ix-dropdown", { key: '5bffd40d906d1e1e929b4a6041ff2cec6f857d34', "data-testid": "date-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, hAsync("ix-date-picker", { key: '17919c46d19510dbf091683c3d5de81f0bbbb591', ref: this.datepickerRef, format: this.format, locale: this.locale, singleSelection: true, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
+            } }, hAsync("ix-date-picker", { key: '56b7f9d28a733952ee5ea0e1555f88295f10f50e', ref: this.datepickerRef, format: this.format, locale: this.locale, range: false, from: (_a = this.from) !== null && _a !== void 0 ? _a : '', minDate: this.minDate, maxDate: this.maxDate, onDateChange: (event) => {
                 const { from } = event.detail;
                 this.onInput(from);
-            }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, embedded: true }))));
+            }, showWeekNumbers: this.showWeekNumbers, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, standaloneAppearance: false }))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -19811,9 +19809,9 @@ class DatePicker {
          */
         this.format = 'yyyy/LL/dd';
         /**
-         * If true disables date range selection (from/to).
+         * If true a date-range can be selected (from/to).
          */
-        this.singleSelection = false;
+        this.range = true;
         /**
          * Corner style
          */
@@ -19844,7 +19842,7 @@ class DatePicker {
          */
         this.showWeekNumbers = false;
         /** @internal */
-        this.embedded = false;
+        this.standaloneAppearance = true;
         /** @internal */
         this.today = DateTime.now().toISO();
         this.selectedYear = 0;
@@ -19900,7 +19898,7 @@ class DatePicker {
         const _to = ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.isValid)
             ? (_d = this.currToDate) === null || _d === void 0 ? void 0 : _d.toFormat(this.format)
             : undefined;
-        if (!this.singleSelection) {
+        if (this.range) {
             return {
                 from: _from,
                 to: _to,
@@ -20150,7 +20148,7 @@ class DatePicker {
             return;
         }
         const date = DateTime.fromJSDate(new Date(this.selectedYear, this.selectedMonth, selectedDay));
-        if (this.singleSelection || this.currFromDate === undefined) {
+        if (!this.range || this.currFromDate === undefined) {
             this.currFromDate = date;
             this.onDateChange();
             return;
@@ -20176,7 +20174,7 @@ class DatePicker {
     onDateChange() {
         this.getCurrentDate().then((date) => {
             this.dateChange.emit(date);
-            if (!this.singleSelection) {
+            if (this.range) {
                 this.dateRangeChange.emit(date);
             }
         });
@@ -20189,12 +20187,12 @@ class DatePicker {
             'calendar-item': true,
             'empty-day': day === undefined,
             today: todayObj.hasSame(selectedDayObj, 'day'),
-            selected: !!(((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
-                ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day'))),
-            range: !!(this.currFromDate &&
+            selected: ((_a = this.currFromDate) === null || _a === void 0 ? void 0 : _a.hasSame(selectedDayObj, 'day')) ||
+                ((_b = this.currToDate) === null || _b === void 0 ? void 0 : _b.hasSame(selectedDayObj, 'day')),
+            range: this.currFromDate &&
                 selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&
                 this.currToDate !== undefined &&
-                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day'))),
+                selectedDayObj.startOf('day') < ((_c = this.currToDate) === null || _c === void 0 ? void 0 : _c.startOf('day')),
             disabled: !this.isWithinMinMaxDate(selectedDayObj),
         };
     }
@@ -20261,7 +20259,7 @@ class DatePicker {
         return rows;
     }
     render() {
-        return (hAsync(Host, { key: 'd727f1c1934317b469131c5166c8577a2f1f59c9' }, hAsync("ix-date-time-card", { key: '7cd812f351930d12fd4a8ca1862414b25559844a', corners: this.corners, embedded: this.embedded }, hAsync("div", { key: '40a266a3cc994f81fa272a7fbe77825d55577a12', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: '9700361e0dc914242fbe5fed38eae0e4d4f428eb', onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), hAsync("div", { key: '731ae8fda3b949093f68cd8eb70467f083e75a2f', class: "selector" }, hAsync("ix-button", { key: '7c4f782cdbcfbf7ab621256acd21f1aec818bf11', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: '31802a1b2cafdf865c74ab6a1ed6131fba9cd801', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '5587ea0df4d233aceb16bb0597613924dffeae22', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: 'ce87c3e8db04f3832c4f7a6bfdaa9313d7b588b5', class: "wrapper" }, hAsync("div", { key: '35b2e7d378e53692c6f59e01653456ecf512d524', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: '77028f922e3f68711ebef26d16fa2fb1b163c6a7', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
+        return (hAsync(Host, { key: '3b20ed51203020978076dedd30ac649d16d7fd80' }, hAsync("ix-date-time-card", { key: 'a005b3d5e293d1985d0130b343e260f0c5eb9451', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, hAsync("div", { key: '93646df15f3c696b994a5bf70d69c37514aaebd4', class: "header", slot: "header" }, hAsync("ix-icon-button", { key: 'f523e9357c8584bd244138964b2a04364d4937c2', onClick: () => this.changeToAdjacentMonth(-1), icon: iconChevronLeftSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelPreviousMonthButton }), hAsync("div", { key: '038c847b675c52204e25af48175b260ae1fb0ae2', class: "selector" }, hAsync("ix-button", { key: 'e6c55b9c49452e03c9c5810d4e6a8a6363dfbc24', variant: "tertiary", ref: this.dropdownButtonRef, "data-testid": "year-month-button" }, hAsync("span", { key: 'a1a1a13112a61835a766ecbc64088d8b6f4bf4b2', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), hAsync("ix-dropdown", { key: '6b769eb21fb7effecc71f169e43155ae2b71055e', "data-testid": "year-month-dropdown", class: "dropdown", trigger: this.dropdownButtonRef.waitForCurrent(), ignoreRelatedSubmenu: true, placement: "bottom-start" }, hAsync("div", { key: '40403e97d28c97fd1da57968051e7ee4381ce307', class: "wrapper" }, hAsync("div", { key: '930ab7db24ffe11d38fd01c01599d8b8b4c9bb66', "data-testid": "year-container", class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: this.yearContainerRef }, this.renderYears()), hAsync("div", { key: '4204d51c76c8420673966c9f98270dafdf78aebd', class: "overflow", "data-testid": "month-container" }, this.monthNames.map((month, index) => (hAsync("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef(ref);
                 }
@@ -20275,10 +20273,10 @@ class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: 'b99ec1b3e4945ee45ed04c863464b1dbc294a278', onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), hAsync("div", { key: 'c2b7f963615d5c5f14d4e6bf17ccf1cbc35c43e0', class: {
+            }, name: iconSingleCheck, size: "16" }), hAsync("div", null, hAsync("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), hAsync("ix-icon-button", { key: '2a36d2b492c6f3761d6538945ebdc627bc082efc', onClick: () => this.changeToAdjacentMonth(1), icon: iconChevronRightSmall, variant: "tertiary", class: "arrows", "aria-label": this.ariaLabelNextMonthButton })), hAsync("div", { key: '09fee287b15f21b7f615f52d1bbfd3baea3d2356', class: {
                 grid: true,
                 'grid--show-week-numbers': this.showWeekNumbers,
-            } }, this.showWeekNumbers && hAsync("div", { key: '20b70eccd88974f3ce79be65136d130a77ebf62c', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
+            } }, this.showWeekNumbers && hAsync("div", { key: 'b07745571edb138152eba523bea081ce49c3637e', class: "calendar-item week-day" }), this.dayNames.map((name) => (hAsync("div", { key: name, class: "calendar-item week-day" }, hAsync("div", { class: "overflow" }, name.slice(0, 3))))), this.calendar.map((week) => {
             return (hAsync(Fragment, null, this.showWeekNumbers && (hAsync("div", { class: "calendar-item week-number" }, week.weekNumber)), week.dayNumbers.map((day) => {
                 return day ? (hAsync("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: (e) => {
                         const target = e.currentTarget;
@@ -20290,10 +20288,10 @@ class DatePicker {
                         }
                     }, tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur(), "aria-label": `${this.selectedMonth}: ${day}` }, day)) : (hAsync("div", null));
             })));
-        })), hAsync("div", { key: 'e23666d293faa6b8b47cb274c31e29a6c91b3ba9', class: {
+        })), hAsync("div", { key: '5dc8efc666c7568ec2a3f59d5fa862e6a128c9e9', class: {
                 button: true,
-                hidden: this.singleSelection || this.embedded,
-            } }, hAsync("ix-button", { key: '7b3acc93968e06769d451c06f3b63544af09d3ee', onClick: () => this.onDone() }, this.i18nDone)))));
+                hidden: !this.range || !this.standaloneAppearance,
+            } }, hAsync("ix-button", { key: 'e42f6039dc5e3fb17dc105208c6028953281feff', onClick: () => this.onDone() }, this.i18nDone)))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20307,7 +20305,7 @@ class DatePicker {
         "$tagName$": "ix-date-picker",
         "$members$": {
             "format": [1],
-            "singleSelection": [4, "single-selection"],
+            "range": [4],
             "corners": [1],
             "from": [1],
             "to": [1],
@@ -20319,7 +20317,7 @@ class DatePicker {
             "weekStartIndex": [2, "week-start-index"],
             "locale": [1],
             "showWeekNumbers": [4, "show-week-numbers"],
-            "embedded": [4],
+            "standaloneAppearance": [4, "standalone-appearance"],
             "today": [1],
             "currFromDate": [32],
             "currToDate": [32],
@@ -20361,15 +20359,20 @@ class DateTimeCard {
          * Display footer
          */
         this.hasFooter = false;
+        /**
+         * set styles
+         */
+        this.individual = true;
         /**
          * Set corners style
          */
         this.corners = 'rounded';
     }
     cardClasses() {
+        var _a;
         return {
             card: true,
-            standaloneAppearance: this.embedded === false,
+            standaloneAppearance: (_a = this.standaloneAppearance) !== null && _a !== void 0 ? _a : this.individual,
             rounded: this.corners === 'rounded',
             left: this.corners === 'left',
             right: this.corners === 'right',
@@ -20377,20 +20380,21 @@ class DateTimeCard {
         };
     }
     render() {
-        return (hAsync(Host, { key: '0429648eb4c31bde407975b519809a5a6fd8043a' }, hAsync("div", { key: '21434d00d886949b32554468fdca445b2b5cf76f', class: this.cardClasses() }, !this.hideHeader && (hAsync("div", { key: '7ef2b75a31b0e75646010e7f02a8dc338117d627', class: "header-container" }, hAsync("div", { key: 'bb3e80cbc6b1c9b5c9171638726074122cd91908', class: "header" }, hAsync("slot", { key: '6ae65febb1ee7862df7dcc781fa68286bd0b7d5e', name: "header" })), hAsync("div", { key: 'd4d63d904222fbc638a04ee16e11ceea03f03e0e', class: "separator" }))), hAsync("div", { key: '0f299d9c0743f2b9e0c9f7a0e2504e51471d4475', class: {
+        return (hAsync(Host, { key: '1917611940e9015bd69c54a4d727490e32c6296a' }, hAsync("div", { key: 'd962cf1ab891fb257bdef627c19bf5265ac7ad06', class: this.cardClasses() }, !this.hideHeader && (hAsync("div", { key: '97ede2ac6f96e0802cd47deaa2ac19a6ffbb5d9c', class: "header-container" }, hAsync("div", { key: '14dc85b4c1141543db4069245981712e4ddc6632', class: "header" }, hAsync("slot", { key: '2f1656c886787682ed7b6c6cc340476664f61cee', name: "header" })), hAsync("div", { key: '6e5931822bd606f3c5851528ba2a61dde147eabc', class: "separator" }))), hAsync("div", { key: '1c90b793333c65471f03a8201206968b7f9e754c', class: {
                 content: true,
                 'content--time-picker': this.timePickerAppearance,
-            } }, hAsync("slot", { key: '6c955414005a3d9e004f1f69ded181f60f59dee5' })), this.hasFooter && (hAsync("div", { key: '09348617c1986599e342b209518727bd65976078', class: "footer-container" }, hAsync("div", { key: 'c3b84578c1acf0f8c9f01dcf8b9ec30364408a89', class: "separator" }), hAsync("div", { key: '2cd97f773f26fb1e48fa4f5bf459c3531379b22b', class: "footer" }, hAsync("slot", { key: 'f079e60d93d18c34030ff23f0d8f2043b9a2d85e', name: "footer" })))))));
+            } }, hAsync("slot", { key: '9048c1df91da871f53bc050a83c50ccdc94cbaf4' })), this.hasFooter && (hAsync("div", { key: 'e3dcb1d1dc3aaaef5e7fca2456dd8fa84d0d5b05', class: "footer-container" }, hAsync("div", { key: '6f1433df5e0a8fcc4ecc5b49312e84ace6c25a2c', class: "separator" }), hAsync("div", { key: 'fa7fd4952aeb197504dd660857846c7d50146ebe', class: "footer" }, hAsync("slot", { key: '0493e93bf1fc30281bfe9e1e0fdc051d68edba61', name: "footer" })))))));
     }
     static get style() { return dateTimeCardCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "ix-date-time-card",
         "$members$": {
-            "embedded": [4],
+            "standaloneAppearance": [4, "standalone-appearance"],
             "timePickerAppearance": [4, "time-picker-appearance"],
             "hideHeader": [4, "hide-header"],
             "hasFooter": [4, "has-footer"],
+            "individual": [4],
             "corners": [1]
         },
         "$listeners$": undefined,
@@ -20408,9 +20412,27 @@ class DatetimePicker {
         this.dateChange = createEvent(this, "dateChange", 7);
         this.dateSelect = createEvent(this, "dateSelect", 7);
         /**
-         * If true disables date range selection (from/to).
+         * If true a date-range can be selected (from/to).
+         */
+        this.range = true;
+        /**
+         * Show hour input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
          */
-        this.singleSelection = false;
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showSeconds = true;
         /**
          * Date format string.
          * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
@@ -20471,14 +20493,17 @@ class DatetimePicker {
         this.timeChange.emit(time);
     }
     render() {
-        return (hAsync(Host, { key: '91fb1dbd40b48c37c207de3f173e19ed72f3b6c3' }, hAsync("ix-layout-grid", { key: '0a9fc8ae63d59ba14185a12d3eb126351f4f67c4', class: "no-padding" }, hAsync("ix-row", { key: '31e56d9e8a7ca4a6afd5754f0caf28eb494d68cd' }, hAsync("ix-col", { key: '1df4729e7703d4f48d19233774a8fead11b74553' }, hAsync("ix-date-picker", { key: '80923eee970fc1c163a94986c109e13f09d3a606', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), hAsync("ix-col", { key: 'd081455e2f00a9917e11902a70cb882a84e23615' }, hAsync("ix-time-picker", { key: '4602c3ca1b899ec283aa9469ce5fcdf4ba4a70fc', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }), hAsync("div", { key: '1329ef1e1af1b22de5f4754ee02452a4d1aabb6b', class: "btn-select-date-container" }, hAsync("ix-button", { key: '01efc3c5d4f72bd74a670a267a28e864c3e643fe', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+        return (hAsync(Host, { key: '92375c17933eb17041b078bbf8622552ded46226' }, hAsync("ix-layout-grid", { key: '012e77c15f250b7290926ef0cc9ea65ddfdc556f', class: "no-padding" }, hAsync("ix-row", { key: 'f495ce2c17a5ae0614be00b56a8be1214848e1cb' }, hAsync("ix-col", { key: 'd2863b9d3b90ed0e5d301ae595aec677f01a835f' }, hAsync("ix-date-picker", { key: '6586694bc13fc752d2fb29f2728ceb37ca31c336', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), hAsync("ix-col", { key: 'e8ea30ea905b964be809634e21f17a57d664c62d' }, hAsync("ix-time-picker", { key: '106449dfab4cc641f179aea35068f36e95f50140', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds }), hAsync("div", { key: 'f4c41e1e9e9513a6a37b7f0111d64ef9e6be1adf', class: "btn-select-date-container" }, hAsync("ix-button", { key: '9fc8c6549c17e40a062e8e8a387e564822de4842', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
     }
     static get style() { return datetimePickerCss; }
     static get cmpMeta() { return {
         "$flags$": 265,
         "$tagName$": "ix-datetime-picker",
         "$members$": {
-            "singleSelection": [4, "single-selection"],
+            "range": [4],
+            "showHour": [4, "show-hour"],
+            "showMinutes": [4, "show-minutes"],
+            "showSeconds": [4, "show-seconds"],
             "minDate": [1, "min-date"],
             "maxDate": [1, "max-date"],
             "dateFormat": [1, "date-format"],
@@ -20539,7 +20564,6 @@ class Drawer {
         /**
          * Fired in case of an outside click during drawer showed state
          */
-        // eslint-disable-next-line @stencil-community/ban-default-true
         this.closeOnClickOutside = true;
         /**
          * Render the drawer with maximum height
@@ -20650,7 +20674,7 @@ class Drawer {
         this.toggleDrawer(this.show);
     }
     render() {
-        return (hAsync(Host, { key: '16521422bdb7a66912901a8d1d156772c31c588a', class: {
+        return (hAsync(Host, { key: '7be961a99e8e7ada4525260428b8cb05e9699813', class: {
                 'drawer-container': true,
                 'display-none': true,
             }, style: {
@@ -20658,15 +20682,15 @@ class Drawer {
                 'max-width': `${this.maxWidth}rem`,
                 height: this.fullHeight ? '100%' : 'auto',
                 overflow: 'hidden',
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, hAsync("div", { key: '8f1c103f6bb03c362a492031e2ad92bcf25d89cc', style: {
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, hAsync("div", { key: '5c2b3998afbfb0d0f01b2a2634c6e6d28077af27', style: {
                 width: this.width === 'auto'
                     ? 'auto'
                     : `${this.getConstrainedWidth(this.width)}rem`,
-            } }, hAsync("div", { key: '7ff4e51b1f93fb7f686db4915ee838f32f61ae86', class: "header" }, hAsync("div", { key: '7c748e9f1e9c2b5468fd524844dfc761069572f2', class: "header-content" }, hAsync("slot", { key: 'ea0ef18347626104852b149f3944165932f9d661', name: "header" })), hAsync("ix-icon-button", { key: 'a446d3e8cb7648d320cd4ea31899d2b289afbabe', class: "close-button", style: {
+            } }, hAsync("div", { key: 'b82cde6e8125ea023a8d553434ec399f681038a9', class: "header" }, hAsync("div", { key: '5aa258a2f3cdcb742993993ea0ed9bca152c2db3', class: "header-content" }, hAsync("slot", { key: 'ef89dbef6fbc0cad872effee17836f82be5dc219', name: "header" })), hAsync("ix-icon-button", { key: '461b4ece5fb4933b84174f51ee25d7de19de3843', class: "close-button", style: {
                 display: this.showContent ? 'block' : 'none',
-            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), hAsync("div", { key: '87f799aa707aceefa145a0b547761f587593d8e2', class: "content", style: {
+            }, icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.onCloseClicked(), "data-testid": "close-button", "aria-label": this.ariaLabelCloseButton })), hAsync("div", { key: 'f1d1735e2ae9d8ee33771bd3d11459bb3ac84d65', class: "content", style: {
                 display: this.showContent ? 'block' : 'none',
-            } }, hAsync("slot", { key: 'aea1e984256bb60bcb6c6a6721988b86decdfca0' })))));
+            } }, hAsync("slot", { key: 'c1506217b6b73a685df75906356c3c1f29470d46' })))));
     }
     static get watchers() { return {
         "show": ["onShowChanged"]
@@ -23237,9 +23261,9 @@ class EventList {
          */
         this.compact = false;
         /**
-         * Animate state change transitions. Defaults to 'false'.
+         * Animate state change transitions. Defaults to 'true'.
          */
-        this.animated = false;
+        this.animated = true;
         /**
          * Display a chevron icon in list items. Defaults to 'false'
          */
@@ -23340,11 +23364,11 @@ class EventList {
         });
     }
     render() {
-        return (hAsync(Host, { key: '700b662ebfba2754f0c4c0d3bf09e95c5277760d', class: {
+        return (hAsync(Host, { key: '754948a81d85157177bfff7afeee4f4851540c4d', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, hAsync("div", { key: 'ebfed96ff53b21d49c9b9464978c79faa22210e0', role: "list" }, hAsync("slot", { key: '4df468a4c4cc9643dae0b13f7b88df3402e3beaf' }))));
+            } }, hAsync("div", { key: '27c68dcf3eeddc91e31bd1bb3abd3f933aa3cbdf', role: "list" }, hAsync("slot", { key: '828bb7c4b9b39cfb6aff66f0cbe35b0705ae6419' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -23644,7 +23668,7 @@ class FieldWrapper {
     }; }
 }
 
-const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
+const filterChipCss = ":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";
 
 class FilterChip {
     constructor(hostRef) {
@@ -23986,22 +24010,22 @@ class FormFieldLabel {
     }; }
 }
 
-const groupCss = ":host{display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover,:host .group-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected,:host .group-header:not(.disabled):not(:disabled).hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{height:calc(4rem - 2px);min-height:calc(4rem - 2px);border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-selection-indicator{width:calc(0.25rem - 1px)}:host .group-header:not(.disabled):not(:disabled):focus-visible .group-header-content{padding:calc(0.5rem - 1px) calc(0.5rem - 1px) calc(0.5rem - 1px) 0}:host .group-header:not(.disabled):not(:disabled):focus-visible .btn-expand-header{margin-top:calc(0.5rem - 1px);margin-bottom:calc(0.5rem - 1px)}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{display:flex;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{min-width:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-subheader{height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
+const groupCss = ":host{display:flex;flex-direction:column;position:relative;width:19.75rem;min-width:12rem;border-color:var(--theme-group-item--border-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover,:host .group-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected,:host .group-header:not(.disabled):not(:disabled).hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{display:flex;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{min-width:0;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-header-content .group-subheader{height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";
 
 class Group {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selectGroup = createEvent(this, "selectGroup", 7);
         this.selectItem = createEvent(this, "selectItem", 7);
-        this.expandedChanged = createEvent(this, "expandedChanged", 7);
+        this.collapsedChanged = createEvent(this, "collapsedChanged", 7);
         /**
          * Prevent header from being selectable
          */
         this.suppressHeaderSelection = false;
         /**
-         * Whether the group is expanded or collapsed. Defaults to false.
+         * Whether the group is collapsed or expanded. Defaults to true.
          */
-        this.expanded = false;
+        this.collapsed = true;
         /**
          * Whether the group is selected.
          */
@@ -24033,12 +24057,12 @@ class Group {
         return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.group-content');
     }
     onExpandClick(event) {
-        const oldExpanded = this.expanded;
-        this.expanded = !this.expanded;
-        const { defaultPrevented } = this.expandedChanged.emit(this.expanded);
+        const oldCollapsed = this.collapsed;
+        this.collapsed = !this.collapsed;
+        const { defaultPrevented } = this.collapsedChanged.emit(this.collapsed);
         event.stopPropagation();
         if (defaultPrevented) {
-            this.expanded = oldExpanded;
+            this.collapsed = oldCollapsed;
         }
     }
     onHeaderClick(event) {
@@ -24119,27 +24143,27 @@ class Group {
         }
     }
     render() {
-        return (hAsync(Host, { key: '3f0490f98871cd258f1a7735587c5c994787b5f3' }, hAsync("div", { key: '85a820e8677768ac5952862d6860bf67ddddd06b', class: {
+        return (hAsync(Host, { key: '58701d250c8e595737fa95f9981e788298e26c2a' }, hAsync("div", { key: '0f754f0be1fe8278e882447cd95f84384b82c467', class: {
                 'group-header': true,
-                expand: this.expanded,
+                expand: !this.collapsed,
                 selected: this.selected,
-            }, tabindex: "0" }, hAsync("div", { key: 'eb02896f695cf74d19a0c17e732886ba2791cae8', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: '6c361a6e2bb2b9e9614f726c72d943bb540c6e6f', class: {
+            }, tabindex: "0" }, hAsync("div", { key: 'b15eddf0aa21c1f392c49974624c4d66f7ca441f', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, hAsync("div", { key: '5987826be949fabd86fe4ab2d5da9f6ee92becde', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), hAsync("div", { key: '957fddd2512cb0004889bb8627dca06a24172678', class: "btn-expand-header" }, hAsync("ix-icon", { key: '5e6d9f54bd16530b6ee35be0ae2429075574f7af', "data-testid": "expand-collapsed-icon", class: {
+            } }), hAsync("div", { key: 'fb364b83a2dff3fcacbd661e6093ce8b975e3930', class: "btn-expand-header" }, hAsync("ix-icon", { key: 'd308f69c7d8e12d34d3442ce9a318a91b67c2033', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), hAsync("div", { key: '7afbcddcae71944c3d89f4671c52faec405072da', 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: '434daedde0c193250cc55ecef24a648427d93521', name: "header" }))), this.hasDropdown && (hAsync("ix-group-context-menu", { key: '4c3e93b8fe830a7d3e40c9560b5821a44e82a076' }, hAsync("slot", { key: '509f13fadad10aa375da8d823692c869031e51c5', name: "dropdown" })))), hAsync("div", { key: '1fbc03459ee2ce55b44f2393898ced6fd8d767ca', class: {
+            }, name: this.collapsed ? iconChevronDownSmall : iconChevronUpSmall, onClick: (event) => this.onExpandClick(event) })), hAsync("div", { key: 'c5bad9a9cb3d025b5ea2bf1b85f471687959c69b', 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: '2b7b1d241e9a33609d5b28653aaeeb4a51bb64af', name: "header" }))), this.hasDropdown && (hAsync("ix-group-context-menu", { key: 'eb3c896e413299db1b9ce93173b9d926d938e3e1' }, hAsync("slot", { key: '35670588a1f87409787c75fc32d34bfa9355d160', name: "dropdown" })))), hAsync("div", { key: '11254313bc4e541b69f38071c027cdfd0ef735f5', class: {
                 'group-content': true,
-            } }, hAsync("div", { key: 'e5c7ab27d286eb9a3e56d906cff40009fcd9c317', style: {
-                display: this.expanded ? 'contents' : 'none',
-            } }, hAsync("slot", { key: '270b3877b50ad67ad95ef1bf6ac28aa7a6bfc1ae', onSlotchange: () => {
+            } }, hAsync("div", { key: '0c24d4903f217ded9c6330b349de13abc77b464b', style: {
+                display: this.collapsed ? 'none' : 'contents',
+            } }, hAsync("slot", { key: '45e1064fa54bb32ad27ac9f502cb4ec9a38963bf', 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: '1a44451e3855c4e7fa22d1aefa4df34692dc3453', class: {
+            } }), hAsync("ix-group-item", { key: '81b3018f3cbafbcaf8c7ec0bad46b538944423b0', suppressSelection: true, focusable: false, class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, hAsync("slot", { key: '221292d8be0d15548275e6a24e4f3fcbccd3d2dc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            } }, hAsync("slot", { key: 'e39c3a323325c7b6b1a2bc02c3c3fa47ad421a5d', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -24153,7 +24177,7 @@ class Group {
             "suppressHeaderSelection": [4, "suppress-header-selection"],
             "header": [1],
             "subHeader": [1, "sub-header"],
-            "expanded": [1540],
+            "collapsed": [1540],
             "selected": [1540],
             "index": [1538],
             "expandOnHeaderClick": [4, "expand-on-header-click"],
@@ -24165,7 +24189,7 @@ class Group {
         },
         "$listeners$": [[0, "selectedChanged", "onItemClicked"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["expanded", "expanded"], ["selected", "selected"], ["index", "index"]]
+        "$attrsToReflect$": [["collapsed", "collapsed"], ["selected", "selected"], ["index", "index"]]
     }; }
 }
 
@@ -24217,7 +24241,7 @@ class GroupContextMenu {
     }; }
 }
 
-const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button,:host>.group-footer{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,:host>.group-footer:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host>button:disabled,:host>.group-footer:disabled{cursor:default;pointer-events:none}:host .group-footer{cursor:default;border:none}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:not(.suppress-mouse-states):hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(:not(.suppress-mouse-states).selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:not(.suppress-mouse-states):active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(:not(.suppress-mouse-states).selected:active):not(.suppress-mouse-states){background-color:var(--theme-color-ghost--selected-active)}:host([disabled]){pointer-events:none;color:var(--theme-color-weak-text)}";
+const groupItemCss = ":host{display:flex;min-height:2.25rem;height:2.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host>button{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{border:1px solid var(--theme-color-focus-bdr)}:host ix-icon{margin-right:0.25rem;margin-top:-0.125rem}:host .group-entry-selection-indicator{position:absolute;left:-1px;height:calc(100% + 2px);width:0.25rem}:host .group-entry-text{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .group-entry-text-secondary{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text)}:host .group-entry-text-secondary,:host .group-entry-text-secondary span{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.selected){border-top-width:0.062rem !important;background-color:var(--theme-color-ghost--selected)}:host(.selected) .group-entry-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host(:hover){background-color:var(--theme-color-ghost--selected-hover);border-color:var(--theme-group-item--border-color--hover)}:host(.selected:hover){background-color:var(--theme-color-ghost--selected-hover)}:host(:active){background-color:var(--theme-color-ghost--selected-active);border-color:var(--theme-group-item--border-color--active)}:host(.selected:active){background-color:var(--theme-color-ghost--selected-active)}";
 
 class GroupItem {
     constructor(hostRef) {
@@ -24227,36 +24251,23 @@ class GroupItem {
          * Supress the selection of the group
          */
         this.suppressSelection = false;
-        /**
-         * @internal
-         * Item represents the footer of the group
-         */
-        this.groupFooter = false;
         /**
          * Show selected state
          */
         this.selected = false;
         /**
-         * Disable the group item.
          * The elements tabindex attribute will get set accordingly.
-         *
-         * If false tabindex will be 0, -1 otherwise.
+         * If true tabindex will be 0, -1 otherwise.
          */
-        this.disabled = false;
+        this.focusable = true;
     }
     clickListen() {
-        if (this.suppressSelection || this.disabled) {
-            return;
-        }
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        if (this.groupFooter) {
-            return (hAsync(Host, { class: "suppress-mouse-states" }, hAsync("div", { class: "group-footer" }, hAsync("slot", null))));
-        }
-        return (hAsync(Host, { class: {
+        return (hAsync(Host, { key: '149648f824aeee11a3877fec7dba0b45ccef6ba1', class: {
                 selected: this.selected && !this.suppressSelection,
-            } }, hAsync("button", { tabindex: this.disabled ? -1 : 0, disabled: this.disabled }, hAsync("div", { class: "group-entry-selection-indicator" }), this.icon ? (hAsync("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon })) : 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", null))));
+            } }, hAsync("button", { key: 'e367df0d5ea0af27e88a572f96b0ce151b5f02db', tabindex: this.focusable ? 0 : -1 }, hAsync("div", { key: '589e2774a57f474ed9b77639b262f9d0fa607473', class: "group-entry-selection-indicator" }), this.icon ? (hAsync("ix-icon", { size: "16", name: this.icon, "aria-label": this.ariaLabelIcon })) : 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: '9cebb9c4a0383c77e935f6c5937c86445f4c28ec' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return groupItemCss; }
@@ -24269,9 +24280,8 @@ class GroupItem {
             "text": [1],
             "secondaryText": [1, "secondary-text"],
             "suppressSelection": [4, "suppress-selection"],
-            "groupFooter": [4, "group-footer"],
             "selected": [4],
-            "disabled": [4],
+            "focusable": [4],
             "index": [2]
         },
         "$listeners$": [[1, "click", "clickListen"]],
@@ -24325,7 +24335,7 @@ class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (hAsync(Host, { key: 'fc7c96b79fcbff2f9bcf9b45345f16dba5a404c6' }, hAsync(HelperText$1, Object.assign({ key: '9e6d2c5fa00aa658c5fa9ae1393537b6255e42f4', helperText: this.helperText,
+        return (hAsync(Host, { key: '9fa836439e6423067e2da4328bfaeefbe898109a' }, hAsync(HelperText$1, Object.assign({ key: '86d6666e919b9c80fd85e40a7b27dbbdeebd4a2c', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,
@@ -24436,7 +24446,7 @@ class IconButton {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (hAsync(Host, { key: 'bdb302ce6ef1803d43285e1effc3ce70ff9284c8', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '14073614fda1a07d4292094b91092871f05619d3' }, baseButtonProps))));
+        return (hAsync(Host, { key: 'f14e9fcbcef5261063165d6a3e9a852a50f52685', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '457e6e503a1ef75babc9894f8e44e6b672000d5c' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return iconButtonCss; }
@@ -24530,7 +24540,7 @@ class IconToggleButton {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (hAsync(Host, { key: 'cdab0dbaf3a790f3d83fff58d73588504d7ba956', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '6cfe4d3b14eba61a9b80ffcdcd9664a1f815f70f' }, baseButtonProps))));
+        return (hAsync(Host, { key: '6c7f9e4e25875e5a688b4f211d596b458b819584', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, hAsync(BaseIconButton, Object.assign({ key: '6813db68fff977b64748f962cde7836e72d06cb9' }, baseButtonProps))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return iconToggleButtonCss; }
@@ -24688,22 +24698,22 @@ class Input {
     render() {
         var _a;
         const inputAria = getAriaAttributesForInput(this);
-        return (hAsync(Host, { key: '05bb684da7ab25f4cea5429ec2c166a9c7a9cc21', class: {
+        return (hAsync(Host, { key: 'f1a0a8e252682aab237e572ad8079cf496d0b519', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: 'a2cd4a57590b5848de9738a0fbdff0c1c1947abc', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: 'e9369f9d649068b7708fabf29b9c2e25954591a6', class: "input-wrapper" }, hAsync(SlotStart, { key: '4294b9e2329a9e0b9964630d76f64788f127e280', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '750c6a574acb4dac21f7a6143b34ae1482de7d74', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, hAsync("ix-field-wrapper", { key: 'a6bd8f0e90398dfb1288ceb585c9852fc4056552', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: '30e5e1debfa21d1d6a9db780a1fa807e88e5fd62', class: "input-wrapper" }, hAsync(SlotStart, { key: '04338b8d4de55cb1cacfaeb381c39796ed542b27', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '3fe643f62d02522dad0bd63876bbf9873f77881b', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria }), hAsync(SlotEnd, { key: 'ebd005ac85dc9109895d3cd7dcd147a08ee0fc02', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("ix-icon-button", { key: '848ffad3e32ac4696bcfdf4af8642c2ab1844692', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria }), hAsync(SlotEnd, { key: '7b3f09276058e7c9081c5a5c406ccb6f31556593', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("ix-icon-button", { key: '7a71d559e3f77db760039853e8e40144899a6d5b', color: "color-weak-text", class: {
                 'password-eye': true,
-                'eye-hidden': this.type !== 'password',
+                'eye-hidden': this.type !== 'password' || this.disabled,
             }, variant: "tertiary", icon: this.inputType === 'password' ? iconEye : iconEyeCancelled, onClick: () => {
                 if (this.inputType === 'password') {
                     this.inputType = 'text';
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '97d96db1a0b189a74814f46a3409879927065118', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
+            } }))), !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '000514dd6f61b34ffb769b06e201e0f2fbb01a9d', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -24755,6 +24765,145 @@ __decorate$9([
     HookValidationLifecycle()
 ], Input.prototype, "updateClassMappings", null);
 
+const inputGroupCss = ":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";
+
+/**
+ * @deprecated Will be removed with 4.0.0
+ * Use the 'ix-input' component instead
+ */
+class InputGroup {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.inputPaddingLeft = 0;
+        this.inputPaddingRight = 0;
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    componentWillLoad() {
+        var _a;
+        const { valid } = this.inputElement.validity;
+        this.inputElement.addEventListener('valid', () => {
+            this.onValidInput();
+        });
+        this.inputElement.addEventListener('invalid', () => {
+            this.onInvalidInput();
+        });
+        this.inputElement.addEventListener('input', () => {
+            this.startSlotChanged();
+        });
+        (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+            this.startSlotChanged();
+        });
+        valid ? this.onValidInput() : this.onInvalidInput();
+        this.observer = new MutationObserver(() => {
+            this.slotChanged();
+            this.startSlotChanged();
+            this.endSlotChanged();
+        });
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+    }
+    componentDidRender() {
+        this.prepareInputElement();
+    }
+    onValidInput() {
+        this.startSlotChanged();
+    }
+    onInvalidInput() {
+        this.startSlotChanged();
+    }
+    prepareInputElement() {
+        if (this.inputElement) {
+            this.inputElement.style.width = '100%';
+            if (this.inputPaddingRight !== 0) {
+                this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+            }
+            else {
+                this.inputElement.style.paddingRight = '0.5rem';
+            }
+            if (this.inputPaddingLeft !== 0) {
+                this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+            }
+            else {
+                this.inputElement.style.paddingLeft = '0.5rem';
+            }
+        }
+        else {
+            console.warn('You used the ix-input-group without an input tag, e.g. <input class="ix-form-control" />');
+        }
+    }
+    slotChanged() {
+        var _a;
+        this.disabled = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.disabled;
+    }
+    startSlotChanged() {
+        setTimeout(() => {
+            var _a, _b;
+            const startPadding = this.getChildrenWidth(this.startSlotRef);
+            if (startPadding !== 0) {
+                this.inputPaddingLeft = 11 + startPadding;
+            }
+            else {
+                this.inputPaddingLeft = 0;
+            }
+            if (!this.inputElement) {
+                return;
+            }
+            const isInputInvalid = !this.inputElement.validity.valid ||
+                this.inputElement.classList.contains('is-invalid');
+            const formWasValidated = ((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+                ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false;
+            if (formWasValidated && isInputInvalid) {
+                const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;
+                this.inputElement.style.backgroundPosition = `left ${left}px center`;
+                this.inputPaddingLeft += 26;
+            }
+        });
+    }
+    endSlotChanged() {
+        setTimeout(() => {
+            this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);
+        });
+    }
+    getChildrenWidth(slotElement) {
+        if (!slotElement) {
+            return 0;
+        }
+        const endElements = getSlottedElements(slotElement);
+        if (endElements.length === 0) {
+            return 0;
+        }
+        let width = 0;
+        endElements.forEach((element) => {
+            width += element.getBoundingClientRect().width;
+        });
+        return width;
+    }
+    render() {
+        return (hAsync(Host, { key: 'c957f5176fca638b1e84fb3aaec66feed288821f', class: { disabled: this.disabled } }, hAsync("div", { key: '4b77f75f4b402840fd94a4fa990a86f135a183b2', class: "group group-start" }, hAsync("slot", { key: '6fc6246c36799a567bc391aa20d0c9a944983e27', ref: (el) => (this.startSlotRef = el), name: "input-start" })), hAsync("slot", { key: 'd136710b684b584526c1a5685af1b6b45e4e4721' }), hAsync("div", { key: 'eafb23b6987f92876d9b4e1ea020ecd12d4a52f7', class: "group group-end" }, hAsync("slot", { key: '220f0582c0bd75488de9eefed451757502297c53', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get style() { return inputGroupCss; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ix-input-group",
+        "$members$": {
+            "disabled": [32],
+            "inputPaddingLeft": [32],
+            "inputPaddingRight": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-card{width:100%;height:100%}";
 
 class IxActionCard {
@@ -24782,7 +24931,7 @@ class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (hAsync(Host, { key: 'ca6b8aae0738de58d218fd717b5fcad4623da17f' }, hAsync("ix-card", { key: '204399e6657bb73adc099cfbc465811eef078368', selected: this.selected, variant: this.variant, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, hAsync("ix-card-content", { key: 'e095c58c71c365375847b5e2e727f97f9c740d9d' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: '1edfffeb1a7cfc2fad2b05662053e3656c799656' }, this.heading ? (hAsync("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, hAsync("slot", { key: 'fa60f410309ada86a94281a85fcf1c3a1ac71b14' }))))));
+        return (hAsync(Host, { key: '167db61afb0880052edd6e28ec9e907dbe98a186' }, hAsync("ix-card", { key: 'e8014c544dbadee66135b8def9b868488a07773b', selected: this.selected, variant: this.variant, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, hAsync("ix-card-content", { key: 'bcb177b0fbe2a709d3ab9d8479077eb64ef2496a' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, hAsync("div", { key: '65aa3882ad626df59598626bf7a67e1431fcf6e4' }, this.heading ? (hAsync("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (hAsync("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, hAsync("slot", { key: '9ffacb3ea7d9642a2adbad41d9e6fc36a8e5118b' }))))));
     }
     static get style() { return actionCardCss; }
     static get cmpMeta() { return {
@@ -24837,7 +24986,7 @@ class IxTypography {
                 color: IxTypography.getTextColor(this.textColor),
             };
         }
-        return (hAsync(Host, { key: 'b7101038f3a7531f9a8dd1f8c9afa54a0cee2a20', class: typographyClass, style: style }, hAsync("slot", { key: 'b5e7225513752e19b427f61708ad334731f78da6' })));
+        return (hAsync(Host, { key: '423b6513833bef97a6ca053311ac4173861ebb83', class: typographyClass, style: style }, hAsync("slot", { key: 'f28c3f4a36fb4abd962cd9c00915ea930872e71c' })));
     }
     static get style() { return typographyCss; }
     static get cmpMeta() { return {
@@ -24869,7 +25018,7 @@ class KeyValue {
         this.labelPosition = 'top';
     }
     render() {
-        return (hAsync(Host, { key: '155c2d3b28dd1db32cd237391178bf4eaaf5b4d8', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (hAsync("ix-icon", { key: '7f97cef73864eb0b735bf344f9005489c6eb033a', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), hAsync("div", { key: 'f99112aa2d56720c6825d4ca19e730fa2a5ff99f', class: "keyValue__content" }, hAsync("div", { key: 'd7b6a9dd97cc1c06b8a36a246a8d74f01de7e91f', class: "content__label" }, this.label), hAsync("div", { key: '1f272a5d6c67993f7825d0258d4405891e864d50', class: {
+        return (hAsync(Host, { key: '313aba27b9a98274d46da2091d3c255b5b6021a9', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (hAsync("ix-icon", { key: 'a60ed526a2d725c3c40ffaeb1f97f70c655f1402', name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon })), hAsync("div", { key: '3b156278c7a40eec4ac1fda6b284b6f9da5edc7b', class: "keyValue__content" }, hAsync("div", { key: '9ca6cbc3a9a85804a750f10936a582ee09500381', class: "content__label" }, this.label), hAsync("div", { key: '808806083e40420bd0461a38393e17b2cad307f0', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (hAsync("slot", { name: "custom-value" }))))));
@@ -24902,7 +25051,7 @@ class KeyValueList {
         this.striped = false;
     }
     render() {
-        return (hAsync(Host, { key: 'fbbf0d85579098c0051103a6d783313cdf76cdec', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, hAsync("slot", { key: 'ea59720cc2cb8150ff1d1f6083a0623276c1e2f1' })));
+        return (hAsync(Host, { key: '65f4f193bd4c3b76ee0ffbae7791ff080b1a028f', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, hAsync("slot", { key: '966e32b4ce52d499e500fbcbed1a9c43cac1b3e5' })));
     }
     static get style() { return keyValueListCss; }
     static get cmpMeta() { return {
@@ -24949,13 +25098,13 @@ class Kpi {
         return tooltip;
     }
     render() {
-        return (hAsync(Host, { key: 'c92079fec06e7de58750cf213462277436bfc16c', title: this.getTooltipText(), tabindex: "1", class: {
+        return (hAsync(Host, { key: 'f606b08119be0b32663efe2f51749fe88cb25608', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, hAsync("div", { key: '19b03ae1e57f933d5a56d59765a3c86bebfc572d', class: {
+            } }, hAsync("div", { key: '2b7f2b65007d825f76b2380b25a81afe697fdcbf', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, hAsync("span", { key: '57ffff6b93d07c51e702f69e0665abe6794d9fe8', class: "kpi-label" }, this.getStateIcon(), hAsync("span", { key: '2ddcf14874f47d3fb7446618b5635f3e0441dd52', class: "kpi-label-text" }, this.label)), hAsync("span", { key: '58c8ed8685d39049736c17efd4cf8a9f853de9ce', class: "kpi-value-container" }, hAsync("span", { key: 'f3bce025fee07f36d4a8edae7b4d460c4da8d69b', class: "kpi-value" }, this.value), this.unit ? hAsync("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, hAsync("span", { key: '6241807a1c2497e3ed4ad6f498cd5c64c5b84185', class: "kpi-label" }, this.getStateIcon(), hAsync("span", { key: 'fcd050a162b9c3ac9a80abf54c3fe9000d9d2a8d', class: "kpi-label-text" }, this.label)), hAsync("span", { key: 'e0b0f5ce921c7579dc6f947c8129f1eec8377cc5', class: "kpi-value-container" }, hAsync("span", { key: '449f3de71bb4ee0b6a058f0fe8205aa06654dbc1', class: "kpi-value" }, this.value), this.unit ? hAsync("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get style() { return kpiCss; }
     static get cmpMeta() { return {
@@ -25052,7 +25201,7 @@ class LayoutForm {
         });
     }
     render() {
-        return (hAsync(Host, { key: '75ef49e33c43dea4b070df9529402dfa5843b202' }, hAsync("div", { key: '2a2916b18cd39cd9edd2ae4381544f9d45637401', class: "container" }, hAsync("slot", { key: '0a955e698e61273942795538527a865be6fd6e71' }))));
+        return (hAsync(Host, { key: 'f29e16a0be5c5d3751bbe6cffc35a8b33bd69075' }, hAsync("div", { key: '2eeb15c4fe4d5b09cce40faef29502367eb576a5', class: "container" }, hAsync("slot", { key: 'b13b8c6a610d0d9fff987d48f6bc1810af1b7390' }))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -25090,12 +25239,12 @@ class LayoutGrid {
         this.columns = 12;
     }
     render() {
-        return (hAsync(Host, { key: 'c54fe6b0890e4fa4d85c540149401c61f1cb1520', class: {
+        return (hAsync(Host, { key: '2772dd5c20d1b6e5da3fee9bbb1453ee6183755a', class: {
                 'no-margin': this.noMargin,
             }, style: {
                 '--ix-layout-grid-columns': `${this.columns}`,
                 '--ix-layout-grid-gutter': `${this.gap}px`,
-            } }, hAsync("slot", { key: 'd556c7af6538057033dfdaffb8de409749c17639' })));
+            } }, hAsync("slot", { key: '0d3f8dad0571cf5b43762bf60657fbbf4f1a96b6' })));
     }
     static get style() { return layoutGridCss; }
     static get cmpMeta() { return {
@@ -25129,13 +25278,13 @@ class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (hAsync(Host, { key: '02d318962866d9b26c47c0229ba2a6c87851c56e' }, hAsync("a", { key: 'cabe9f6ced43a4ec4efdfb386d60fe4779c3cd1b', title: this.url, tabindex: "0", class: {
+        return (hAsync(Host, { key: '7f1fbbb36784bd6a5792da9ea48cc6e9c6aa5332' }, hAsync("a", { key: 'ffd97898fd1e720f6431e0f2405b3c23d765e0c6', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, hAsync("ix-icon", { key: 'af54ed0919ac9891729f789f4027021af6aa440f', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), hAsync("div", { key: '31a4c7de092658ddf5eb2b18f081f1fcc18eec85', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, hAsync("ix-icon", { key: '9980af21cb250d099f2ba0ddd543d4934a6d0eb6', class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), hAsync("div", { key: '347fdc85236282e3b93b8215de0269dd4993a2f2', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, hAsync("slot", { key: '50126a934c69cc5e5c7da46f55177431d6cc29ff' })))));
+            } }, hAsync("slot", { key: '79348eda083a81187f79e3a1c043982ae93c97a9' })))));
     }
     static get style() { return linkButtonCss; }
     static get cmpMeta() { return {
@@ -25162,7 +25311,6 @@ class MapNavigation {
         /**
          * Hide the sidebar context menu button when set to true
          */
-        // eslint-disable-next-line @stencil-community/ban-default-true
         this.hideContextMenu = true;
         this.isSidebarOpen = true;
         this.hasContentHeader = false;
@@ -25299,11 +25447,11 @@ class MapNavigation {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (hAsync(Host, { key: 'ee355f2c6943155181eb42c9340afbbfb23c5256' }, hAsync("slot", { key: '0e634f2140aa3b139b883519285c29f107cc55d2', name: "menu" }), hAsync("div", { key: 'c282e8ce53748ec98a0e78c1e2c9c74566485f6a', class: "map-nav" }, hAsync("div", { key: '2714ae8cff89e4336988e6aeb43f5e9743c16cda', class: "map-nav-sidebar" }, hAsync("div", { key: '5f0052944113e935a166eecc5490106166ccde5a', class: "map-nav-header" }, hAsync("ix-application-header", { key: '41eb644bd30d2f6431fea2871ef4c1200d673f12', name: this.applicationName, class: "map-nav-header-brand" }, hAsync("slot", { key: '6019099822cf9547258db6509af5dbabf771c80c', slot: "logo", name: "logo" }))), hAsync("div", { key: 'a41cf1fd5570cd449840ec29c51b9a214a7fc1ee', class: "map-nav-sidebar-content" }, hAsync("div", { key: '8d31a6f87137144dce9f038c6af57935ad0b361d', class: "map-nav-sidebar-static-content" }, hAsync("div", { key: 'f08e9ece40573dcc2c7e2ffd3d7960f7cafda9ce', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (hAsync("ix-icon-button", { icon: iconContextMenu, size: "24", variant: "subtle-primary", onClick: () => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), hAsync("div", { key: '0a44ecc9fc7d2eaf47a0ab030c29937ef984ec91', class: "map-nav-sidebar-user-content" }, hAsync("slot", { key: '8520ed8e55ffcd3dfd6f091b686d60844de812d1', name: "sidebar-content" })))), hAsync("div", { key: 'de99d37f59d097a73cbe51560582304410551cbb', class: "content" }, hAsync("div", { key: '87874873f41bf080f62b06fa649eef0f73905da2', class: {
+        return (hAsync(Host, { key: '5e7b81e33095916809c72c77c58a0e9561e3eadc' }, hAsync("slot", { key: '6355eae609a9b40444e3af3f6ff344c657941eeb', name: "menu" }), hAsync("div", { key: '3b22b95b4816ed75f6eb186378be9dd025b9a8b0', class: "map-nav" }, hAsync("div", { key: 'dfe48e307748f1ec3115284f58a2f7e6eba704a9', class: "map-nav-sidebar" }, hAsync("div", { key: '330712680eaf25821f7f9819d2b07d1fee4f9077', class: "map-nav-header" }, hAsync("ix-application-header", { key: 'ac1b29fd7c20ef689b4ce2b41f1188444d492ecb', name: this.applicationName, class: "map-nav-header-brand" }, hAsync("slot", { key: 'a01977d24404f8db7e750e8cd61af5461183bf09', slot: "logo", name: "logo" }))), hAsync("div", { key: '409bf4a73f9c24cf7267380ce0bec7e91c51564e', class: "map-nav-sidebar-content" }, hAsync("div", { key: '26b2020c1f215665c7b40c2f81baf4d42620a482', class: "map-nav-sidebar-static-content" }, hAsync("div", { key: '265a149ce8f4f2502e45149a88159766556c37d3', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (hAsync("ix-icon-button", { icon: iconContextMenu, size: "24", variant: "subtle-primary", onClick: (_) => this.contextMenuClick.emit(), "aria-label": this.ariaLabelContextIconButton }))), hAsync("div", { key: '2824fecae7636c4a68ab90dc06b0274afc031602', class: "map-nav-sidebar-user-content" }, hAsync("slot", { key: '1ef670f8310c5c3804c5eac3dc4d601898bf244d', name: "sidebar-content" })))), hAsync("div", { key: 'a383691fe6515768ef643ea8c69012d30c3b9d9b', class: "content" }, hAsync("div", { key: '9c2dee41f6fd805e31c0f555347a24f3e9f393b2', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, hAsync("slot", { key: '43dae1efd68fe7838af56d068897d46306517dce', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), hAsync("main", { key: '9abeda56b56db433715cd500730f0594d9a39ad3' }, hAsync("slot", { key: 'f084c2e9cf4b23220bae1d5fdb078905922bc491' }), hAsync("slot", { key: '797eff659abf7cadd47d9cdc9d73e451fe7add56', name: "overlay" }))))));
+            } }, hAsync("slot", { key: 'f7136c106397b3e0df52c4b3a14b5dfddf73f793', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), hAsync("main", { key: 'ca7e27826c15a419d9803cf99d67587f26a1d6a0' }, hAsync("slot", { key: '7083d7482930fc674efe735972268b4eb14dd7d8' }), hAsync("slot", { key: 'a94b1a95f2941fec540bd63c97b23b261688c0ba', name: "overlay" }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return mapNavigationCss; }
@@ -25363,14 +25511,14 @@ class MapNavigationOverlay {
     }
     render() {
         var _a, _b, _c;
-        return (hAsync(Host, { key: '20be4d9ca5276f987e368ae76e0e384d6de8d518' }, hAsync("div", { key: '92c142906a8bc62a66122e9bb7edb77580177d9f', class: "overlay-header" }, hAsync("div", { key: '9d114426224b86e403269b67581e69ce6d42b806', class: {
+        return (hAsync(Host, { key: 'c7a50abb3513fe85c2b49cacb0ad9db139eeff61' }, hAsync("div", { key: '877867feede603c1eb0977ceebe8c1efa8c223c4', class: "overlay-header" }, hAsync("div", { key: 'c85cd0ce6dc09266d331e7100235fe6469598d5a', class: {
                 'color-indicator': true,
                 'display-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), hAsync("div", { key: 'd2ec51d25d995c1ffa97d95ebf2fb1b1c0bfdb43', class: "overlay-header-content" }, hAsync("ix-icon", { key: 'f3a60357a1c4faf8cf56748ebb42c9f6d8d143bc', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), hAsync("span", { key: '17cac790ed7f83c03d62676288ec2c48b5a892e9', class: "overlay-header-title", title: this.name }, this.name)), hAsync("ix-icon-button", { key: '220c6324fe86b2039a14f29a72f3de32bcde06bb', class: "overlay-close", variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), hAsync("slot", { key: '8e6ebd5c85b618bda20ecaeaf5d5501082673a12' })));
+            } }), hAsync("div", { key: '7b8a70dc3272d2c7a5a522accbafe58f330f1f30', class: "overlay-header-content" }, hAsync("ix-icon", { key: '4ec9d2689d01d79468bbeb1e395873264f8e14e0', size: "32", name: this.icon, "aria-label": this.ariaLabelIcon }), hAsync("span", { key: 'f0db6769dc5b3172f1196f1fbf8fe4b6210514d4', class: "overlay-header-title", title: this.name }, this.name)), hAsync("ix-icon-button", { key: '9c75f3ae0f263c2002c6e7e46e46b8379e7d63d1', class: "overlay-close", variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", size: "24", onClick: () => this.closeOverlay(), "aria-label": this.ariaLabelCloseIconButton })), hAsync("slot", { key: 'd5c0fd5b40a7e33462e0f5aa2e1e491176583ae3' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return mapNavigationOverlayCss; }
@@ -25429,6 +25577,10 @@ class Menu {
          * Show toggle between light and dark variant. Only if the provided theme have implemented both!
          */
         this.enableToggleTheme = false;
+        /**
+         * Is settings tab is visible
+         */
+        this.enableSettings = true;
         /** @internal */
         this.enableMapExpand = false;
         /**
@@ -25838,44 +25990,44 @@ class Menu {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: 'df5d448d54816e68d11ac8b0c89fdcfcc3eb0f5f', class: {
+        return (hAsync(Host, { key: '21781b7d2198837eb8b1007971832254941dcd9e', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, hAsync("nav", { key: '77a960b00a2e5c2c984653a83e57da1a092f5c39', class: {
+            }, slot: "menu" }, hAsync("nav", { key: 'dda9ce6ad8d552a6df80db4b5ebdf6e64893ae92', class: {
                 menu: true,
                 expanded: this.expand,
-            } }, hAsync("div", { key: 'dcc507883dc51c8b13fa2dc1835b73479da1d46f', class: "menu-buttons" }, this.breakpoint !== 'sm' && (hAsync("ix-menu-expand-icon", { key: '9563ef5a20623bef8f4b58109fb76430efda864e', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
-            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (hAsync("ix-icon-button", { key: '9753f46ffac62bf013c53b2b63e4038a1bc66f9a', onClick: () => {
+            } }, hAsync("div", { key: '45c1b1b1ad2b00f0f8bedf8b67c4fb4500f7c353', class: "menu-buttons" }, this.breakpoint !== 'sm' && (hAsync("ix-menu-expand-icon", { key: '6ba74e1b05b816f83efeee4cc2bba9eceec4c737', breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu(), "data-testid": "expand-collapse-menu" })), this.breakpoint === 'sm' &&
+            ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && (hAsync("ix-icon-button", { key: '50d7e7c7561e2825940db7a886763f8e18b49012', onClick: () => {
                 this.showAppSwitch();
-            }, icon: iconApps, variant: "subtle-tertiary" }))), hAsync("div", { key: '149ea3070a963a59f9639727e33baf654b34b29b', id: "menu-tabs", style: {
+            }, icon: iconApps, variant: "subtle-tertiary" }))), hAsync("div", { key: 'b28a77f0dc6f49dc8392e5c86620dc86280195de', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, hAsync("div", { key: '22af0ea5a512ff6f7f8654d706545d86603e32d5', class: "tabs-shadow-container" }, hAsync("div", { key: '9e2623f578770768243c005a9dbeb4ed939696d9', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, hAsync("div", { key: '8efbc8954f8f22e6cf291fcbb62cf6c84388f493', class: "tabs-shadow-container" }, hAsync("div", { key: '42b2efd2c44adaf6af2afffdad66ec36bcb7b869', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), hAsync("div", { key: '1dcb982811b70d44b41cbf28305f479cf4291296', class: {
+            } }), hAsync("div", { key: '1122c046c5e8dbdccbfb81c5a393d472aa1e8e17', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, hAsync("div", { key: '58a320db01e6003ebdfc7071afb06933500b8311', class: "menu-avatar" }, hAsync("slot", { key: 'e4d1b4d1d1d950503e94a22b9c0a3786b78ee618', name: "ix-menu-avatar" })), hAsync("slot", { key: '1f6deafef14122d3edade907774176ce7543e3c3', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (hAsync("slot", null)) : null), hAsync("div", { key: '437ddcbd787dac4de4663e9adcc704f5205b9ea2', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, hAsync("div", { key: '031a6f8e3754561a97af8425f59a6f5dc9b9a88b', class: "menu-avatar" }, hAsync("slot", { key: 'd41e50f41b3f01b00e3dc44a8a42d849efe5726a', name: "ix-menu-avatar" })), hAsync("slot", { key: '0509060cc3a069972c7625d17cb59f4357585c36', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (hAsync("slot", null)) : null), hAsync("div", { key: '09b2730f12d8d8f8ea86a679e635df19f631c61c', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), hAsync("div", { key: '02d515815929fac815a88b6ced7d130c49a62565', class: "bottom-tab-divider" }), this.settings ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), hAsync("div", { key: '7da7d49f4e88f714ec35e717106953311dc817be', class: "bottom-tab-divider" }), this.settings ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, hAsync("div", { key: '4e2780ab0b9775d005fa1a45b932443f80d078ad', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: '9870393f9cdceb14aba51b3b533e867a2a3356d7', name: "bottom" })), hAsync("div", { key: '8ade061e4a43e78f76aacfcc908a39b1064676ce', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: iconCogwheel, onClick: async () => this.toggleSettings(!this.showSettings), label: this.i18nSettings })) : null, this.enableToggleTheme ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: iconLightDark, label: this.i18nToggleTheme })) : null, hAsync("div", { key: 'a380c205550f416b7b9673cb911775f5bf1d4ce2', onClick: (e) => this.onMenuItemsClick(e) }, hAsync("slot", { key: 'f8d0aa6edd3321fe5544f4a2d0d5e091ab253c62', name: "bottom" })), hAsync("div", { key: '89f030f3b42dadf3f684ca742a40d071301b4a6c', id: "popover-area" }), this.enableMapExpand || ((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.sidebar) ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}`, label: this.getCollapseText() })) : null, this.about ? (hAsync("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), hAsync("div", { key: '12d3aab3ecfe3b0371ef6dc59540550d719bc036', class: {
+            }, icon: iconInfo, onClick: async () => this.toggleAbout(!this.showAbout), label: this.i18nLegal })) : null), hAsync("div", { key: '124c0cf340b5325e53ec1e5b27eb71c1293d1517', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, hAsync("div", { key: 'e762e0182ebd71dbb4112ef4af489f179dc2b6de', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: '3f2fc5f4853d14fc4fceecfce36d6b18ac0c2aac', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
+            } }, hAsync("div", { key: 'e2114d44fcd9591e8468d3f07e30eb1d9e7bafba', class: 'menu-overlay-container' }, this.showSettings ? hAsync("slot", { name: "ix-menu-settings" }) : null), hAsync("div", { key: '8b076aa64d4d6216d7cd1c75989def2bac7eeaa8', class: 'menu-overlay-container' }, this.showAbout ? hAsync("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -25889,6 +26041,7 @@ class Menu {
             "showSettings": [1028, "show-settings"],
             "showAbout": [1028, "show-about"],
             "enableToggleTheme": [4, "enable-toggle-theme"],
+            "enableSettings": [4, "enable-settings"],
             "enableMapExpand": [4, "enable-map-expand"],
             "applicationName": [1, "application-name"],
             "applicationDescription": [1, "application-description"],
@@ -26096,7 +26249,7 @@ class MenuAboutItem {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'e38ae328fe99752b11b3ad3d7e4b8e550bb6297a' }, hAsync("slot", { key: '3878bda15892fcfe137f685743599df2d049b9e8' })));
+        return (hAsync(Host, { key: 'd7fbd6d3eb9261ae581a3fc6aa0d4547835856b0' }, hAsync("slot", { key: '7032262b6fd0d7e86f5d290596e3dce0880b10b4' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]
@@ -26137,16 +26290,16 @@ class MenuAboutNews {
         this.expanded = false;
     }
     render() {
-        return (hAsync(Host, { key: '6f2eec672b3e8702c1d8f627d6205952fe3bf6b9', class: {
+        return (hAsync(Host, { key: '95f151ad250c647ad5f14bd4f88d78e46e514ac1', class: {
                 expanded: this.expanded,
                 show: !this.show,
-            } }, hAsync("div", { key: 'e21d67de0af189e3a972e2bbdd92cb8397ef9474', class: "banner-container" }, hAsync("ix-icon", { key: 'd5fc587e1d461d2e10b59f18b5445b5d0b5903de', color: "color-inv-contrast-text", name: iconShout, size: "32" }), hAsync("svg", { key: '15f4391c50619871d7486c14254cf98a2c3b761e', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, hAsync("polygon", { key: 'd9039e1fc57bcc388cef43a73d143ee3fb56e49c', points: "0 0 48 0 48 56 24 48 0 56" }))), hAsync("div", { key: '193dd70d01f33252f16a445885d51c2ddc31ff3b', class: "cui-popover-news-header" }, hAsync("ix-typography", { key: '7e3a817ac6f5acad1f247ef2245f2ed6e355e7b1', format: "label", bold: true }, this.label)), hAsync("ix-icon-button", { key: 'f1efe1cf1d70513f0e6ea74ee9da9e446a7f3df0', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+            } }, hAsync("div", { key: '368eaeb12a404db78aef6bcd787253e00c0497c1', class: "banner-container" }, hAsync("ix-icon", { key: '900e83916b49ed9193a7c86bd58a41e7afacf030', color: "color-inv-contrast-text", name: iconShout, size: "32" }), hAsync("svg", { key: '9b02bee68663b22c69e77294c34613145a6acae1', viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, hAsync("polygon", { key: '7ca8ba247adefcee66e3b6fb90766e1dac1c24e9', points: "0 0 48 0 48 56 24 48 0 56" }))), hAsync("div", { key: 'e51f022a72cbb89f12ae48230e454c420e739d6b', class: "cui-popover-news-header" }, hAsync("ix-typography", { key: '7342ce0e0fd3a3468d001f7d4a7f9fb1ded8e4d5', format: "label", bold: true }, this.label)), hAsync("ix-icon-button", { key: '78fc5325efc91de0dee537fb08fcef24cf4f2892', size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
                 this.show = false;
                 this.closePopover.emit();
-            } }), hAsync("div", { key: 'c99b7f3e62a9f901859e7bc8bf96dc8c3eb64f7b', class: "slot-container" }, hAsync("slot", { key: 'bcdae55901e855ef9f60440bfef352720532c1c4' })), this.aboutItemLabel ? (hAsync("div", { class: "cui-popover-news-footer" }, hAsync("ix-button", { variant: "primary", onClick: (e) => {
+            } }), hAsync("div", { key: 'a4d2e24f6145159bc37443f0698c44d010cfae9f', class: "slot-container" }, hAsync("slot", { key: '3910790a589f986676f96351bc1dee070d9e1c70' })), this.aboutItemLabel ? (hAsync("div", { class: "cui-popover-news-footer" }, hAsync("ix-button", { variant: "primary", onClick: (e) => {
                 this.show = false;
                 this.showMore.emit(e);
-            } }, this.i18nShowMore))) : null, hAsync("div", { key: 'b0dc0fa5d4eb5cd1469e037ab322c0eda0794ed5', id: "arrow" })));
+            } }, this.i18nShowMore))) : null, hAsync("div", { key: '57c21fae6edd0514ff8691488e6dc5144d771d3f', id: "arrow" })));
     }
     static get style() { return menuAboutNewsCss; }
     static get cmpMeta() { return {
@@ -26179,7 +26332,7 @@ class MenuAvatar {
         /**
          *  Control the visibility of the logout button
          */
-        this.hideLogoutButton = false;
+        this.showLogoutButton = true;
         /**
          * Control the visibility of the dropdown menu
          */
@@ -26195,11 +26348,11 @@ class MenuAvatar {
         this.showContextMenu = elements.length !== 0;
     }
     render() {
-        return (hAsync(Host, { key: 'fddc6780cf6971c418d8f4130919454442d0e85f', slot: "ix-menu-avatar" }, hAsync("button", { key: '485f3d780b964d7d763918c85e40ea6e799aa76c', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, hAsync("ix-avatar", { key: '8a76b568896130da5b2b041eb95b8c8e1aab72b0', image: this.image, initials: this.initials }), hAsync("div", { key: '15bc4999c8f6f04be7b43747c5b787c873780d13', class: "avatar-name" }, hAsync("span", { key: '70a70e6d7e2b26c5a4a0d3e8d01a118a5b849e15', class: "text-default-single", title: this.top }, this.top), hAsync("span", { key: '4281b01cdf8aa1bdc2a62268a880a09ffb87a5ff', class: "text-default-single", title: this.bottom }, this.bottom))), hAsync("ix-dropdown", { key: '5d5846ce26aabbd1cbbe39f659c90baaacfbbc5f', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && this.hideLogoutButton, offset: {
+        return (hAsync(Host, { key: '7f79c4e8976609b457553718b3c7a6585343ef41', slot: "ix-menu-avatar" }, hAsync("button", { key: 'f7a1f54e92e994fde630950d14c2ab6d2f76cfca', class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, hAsync("ix-avatar", { key: '4edcdbcb5888333209f3bac6ac83809199a1388b', image: this.image, initials: this.initials }), hAsync("div", { key: 'eb7445ac9e9b4b8805b16ddf658cecc8a92ce13b', class: "avatar-name" }, hAsync("span", { key: '5f45a9b27bab73604706cf12936e6dddb6c58ae8', class: "text-default-single", title: this.top }, this.top), hAsync("span", { key: '8244b2107e08794f2d0e69e254b67a21dc65b8a9', class: "text-default-single", title: this.bottom }, this.bottom))), hAsync("ix-dropdown", { key: '2ca742defd798ae705094d56a915d14a42002006', trigger: this.hostElement, placement: 'right-start', hidden: !this.showContextMenu && !this.showLogoutButton, offset: {
                 mainAxis: 16,
-            } }, hAsync("slot", { key: '64ca8a084a7d787efa1b167cb5c08c22a39c28e7', onSlotchange: () => this.onSlotChange() }), !this.hideLogoutButton && (hAsync("ix-menu-avatar-item", { key: 'eaace538a0668becf30368fa733c778a8590c940', label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
+            } }, hAsync("slot", { key: '05ee10031be21932e39653c9fb7a900ebb088f8f', onSlotchange: () => this.onSlotChange() }), this.showLogoutButton ? (hAsync("ix-menu-avatar-item", { label: this.i18nLogout, icon: iconLogOut, onClick: (e) => {
                 this.logoutClick.emit(e);
-            } })))));
+            } })) : null)));
     }
     get hostElement() { return getElement(this); }
     static get style() { return menuAvatarCss; }
@@ -26212,7 +26365,7 @@ class MenuAvatar {
             "image": [1],
             "initials": [1],
             "i18nLogout": [1, "i18n-logout"],
-            "hideLogoutButton": [4, "hide-logout-button"],
+            "showLogoutButton": [4, "show-logout-button"],
             "showContextMenu": [32]
         },
         "$listeners$": undefined,
@@ -26234,7 +26387,7 @@ class MenuAvatarItem {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (hAsync("ix-dropdown-item", { key: '0851cb95fed3e8ba0a3c5714072e387b1b30cce7', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (hAsync("ix-dropdown-item", { key: '97bff4f37686e2e6613c8283595d918eac13a161', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return getElement(this); }
     static get style() { return menuAvatarItemCss; }
@@ -26427,7 +26580,7 @@ class MenuCategory {
         }
     }
     render() {
-        return (hAsync(Host, { key: '4f372fe034a70522511d1bc8d1d76e3184876132', class: {
+        return (hAsync(Host, { key: '49275009853fd8a9c9231e41b206e3f2d1b0d6a9', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -26436,14 +26589,14 @@ class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, hAsync("ix-menu-item", { key: '315cb321cfaa7670b546edbd33907727c2add1df', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, hAsync("div", { key: '897f1604fd0819774b8533f0cc786716a12cf8b6', class: "category" }, hAsync("div", { key: '4a39ac0e300b06530ee0bf1d1bb31c4ba6e37cec', class: "category-text" }, this.label), hAsync("ix-icon", { key: '24fe5aa4a3256acf7666cdc06ed1b53eabe61ca5', name: iconChevronDownSmall, class: {
+            } }, hAsync("ix-menu-item", { key: '9288752f9cd67d83434da74c8f4fe65e57f21b8a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, hAsync("div", { key: 'e45b143ed2316a69bcc06a8b7ee4b32895a25f67', class: "category" }, hAsync("div", { key: '34ab800b45131b0b7324921baa6883bc8f2f1bf2', class: "category-text" }, this.label), hAsync("ix-icon", { key: '54450dce975a283573a4a25aaff84cc43e3cfeee', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), hAsync("div", { key: 'aa7d5988b6a22fabaef5cf4d74e740e96d2e390a', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), hAsync("div", { key: '71a3deccbecc34fe27423c0d8c5fe12648244a3e', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? hAsync("slot", null) : null), hAsync("ix-dropdown", { key: 'db4b7115dbf5967b1de97c0b1c6e9392ceac6256', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? hAsync("slot", null) : null), hAsync("ix-dropdown", { key: 'c9ba4105259aea83ecd4a125a084a555299c83de', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -26456,7 +26609,7 @@ class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, hAsync("ix-dropdown-item", { key: '5dc987ad55ea5b36ab2021bd1484716b13349d89', class: 'category-dropdown-header' }, hAsync("ix-typography", { key: '97c5fc80da4c914acebf89b161b3df3b1da77a60', format: "label", bold: true, textColor: "std" }, this.label)), hAsync("ix-divider", { key: '366e9b4d84d9bfce5aed8912de25ceb4383fb68e' }), hAsync("slot", { key: '2c51fafa9faeb14428df5419bdcbe32c570ee404' }))));
+            } }, hAsync("ix-dropdown-item", { key: '1e5e1b3659d6359c7c613bf15e7f9993f716cfab', class: 'category-dropdown-header' }, hAsync("ix-typography", { key: 'ffd1265ecaa6a5edb29536088440d5654de2fd2f', format: "label", bold: true, textColor: "std" }, this.label)), hAsync("ix-divider", { key: '61d8dc31511e8ddf63233bd4bda467374fbe44ef' }), hAsync("slot", { key: 'c509e35530dc05faa847c9dbae7a16de0f84d415' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return menuCategoryCss; }
@@ -26513,7 +26666,7 @@ class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (hAsync(Host, { key: '457b12c1f7a01523ebd9fbc4ace5204687770021', class: {
+        return (hAsync(Host, { key: 'ef8794f40bf74a03af8b8ddeab15da2bfd40096f', class: {
                 expanded: this.expanded,
             }, type: "button", "aria-label": this.ixAriaLabel, "aria-pressed": a11yBoolean(this.expanded) }, this.getMenuIcon()));
     }
@@ -26633,11 +26786,11 @@ class MenuItem {
             tabIndex: this.disabled ? -1 : 0,
         };
         const menuContent = [
-            this.icon && hAsync("ix-icon", { key: '7450154ddbe822f7c017f81be83d48c31ca830ea', class: 'tab-icon', name: this.icon }),
+            this.icon && hAsync("ix-icon", { key: '247ccf76115c4f9a3504ae8625cd064da17cb5f4', class: 'tab-icon', name: this.icon }),
             this.notifications ? (hAsync("div", { class: "notification" }, hAsync("div", { class: "pill" }, this.notifications))) : null,
-            hAsync("span", { key: '53c5e2a2ff8111e4360edf2b44acd1a305a8ca17', id: this.internalItemId, class: "tab-text text-default" }, this.label, hAsync("slot", { key: '82b8b69c7519342d617f9bda5367b5c826e9f098' })),
+            hAsync("span", { key: 'c98c04295888f8be7e0016cce7d749c19d641d32', id: this.internalItemId, class: "tab-text text-default" }, this.label, hAsync("slot", { key: 'ce04723016a4187e57f1dd31e4cb43cbea1cde93' })),
         ];
-        return (hAsync(Host, Object.assign({ key: 'b80a8dbcb7cb5a6dbffe6747352e565cf9abb1bf', class: {
+        return (hAsync(Host, Object.assign({ key: '4f5490aa3304bdaa57dfbe5f2f9e292f78571ef7', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -26648,7 +26801,7 @@ class MenuItem {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (hAsync("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), hAsync("ix-tooltip", { key: 'f95a923b5c8d36f15adf85a4805405595be31f55', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (hAsync("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), hAsync("ix-tooltip", { key: '9eb280ed1e0b95127eae4db991470111f1af550a', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -26696,7 +26849,7 @@ class MenuSettingsItem {
         });
     }
     render() {
-        return (hAsync(Host, { key: 'df456ff8730db1834cc56549d596857a948d2dcc' }, hAsync("slot", { key: 'a7683e6f94c5a6bbe0e178f0ae2e21e4f20c4070' })));
+        return (hAsync(Host, { key: '70dbe5bb6bb618cf897ea60bae0febecde3021d1' }, hAsync("slot", { key: 'ec2608b87f8123513ce9b052c6035ec04a41aef8' })));
     }
     static get watchers() { return {
         "label": ["watchLabel"]
@@ -26723,12 +26876,13 @@ class MessageBar {
         this.closeAnimationCompleted = createEvent(this, "closeAnimationCompleted", 7);
         /**
          * Specifies the type of the alert.
+         * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.
          */
         this.type = 'info';
         /**
-         * If true, close button is disabled and alert cannot be dismissed by the user
+         * If true, close button is enabled and alert can be dismissed by the user
          */
-        this.persistent = false;
+        this.dismissible = true;
     }
     componentWillRender() {
         const config = MessageBar.messageTypeConfigs[this.type];
@@ -26752,11 +26906,11 @@ class MessageBar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '1fb3f27a04daabab638277ba762e85a81256132e' }, hAsync("div", { key: 'a559e8bc15be1a2853aaff1f0fd222302f927dde', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, hAsync("ix-icon", { key: '698e1ebfb05b76c3ab71124037d8364e48cf364f', color: this.color, name: this.icon }), hAsync("div", { key: '005b7ca81b0da36c97c926b53e1abfdac1a89a0c', class: "message-content" }, hAsync("slot", { key: '6f11597b34396b8498349bc01e747b0fe628264c' })), !this.persistent && (hAsync("ix-icon-button", { key: '439049ca5fee49dc0b624cbc81c7d96a3408893a', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (hAsync(Host, { key: '6891d4beda70c732fe7dabcccbda52364f64421b' }, hAsync("div", { key: 'eb114c2e6af4fdd9acda5ccd69a2a2d662f84fa2', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, hAsync("ix-icon", { key: '19a67a4072f5f101374f8fb715521b60cddef90b', color: this.color, name: this.icon }), hAsync("div", { key: '616ae9cfd0f341f9eb555e0d6c6e1b79247833c1', class: "message-content" }, hAsync("slot", { key: 'a9f942a0f9d9439cdf3bcbab58c43afe3c92821d' })), this.dismissible ? (hAsync("ix-icon-button", { icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }
-            }, "data-testid": "close-btn" })))));
+            }, "data-testid": "close-btn" })) : (''))));
     }
     static get style() { return messageBarCss; }
     static get cmpMeta() { return {
@@ -26764,7 +26918,7 @@ class MessageBar {
         "$tagName$": "ix-message-bar",
         "$members$": {
             "type": [1],
-            "persistent": [4],
+            "dismissible": [4],
             "icon": [32],
             "color": [32]
         },
@@ -26775,9 +26929,11 @@ class MessageBar {
 }
 MessageBar.duration = 300;
 MessageBar.messageTypeConfigs = {
+    //TODO(IX-3400): Replace icon colors with proper CSS variables when available
     alarm: { icon: iconError, color: 'color-alarm' },
+    danger: { icon: iconError, color: 'color-alarm' },
     critical: { icon: iconWarningRhomb, color: 'color-critical' },
-    warning: { icon: iconWarning, color: 'color-warning' },
+    warning: { icon: iconWarning, color: 'color-warning-text' },
     success: { icon: iconSuccess, color: 'color-success' },
     info: { icon: iconInfo, color: 'color-info' },
     neutral: { icon: iconNotification, color: 'color-neutral' },
@@ -26813,7 +26969,7 @@ function waitForElement(selector, doc, timeout = 3000) {
     });
 }
 
-const modalCss = "::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";
+const modalCss = "::backdrop{background:var(--theme-color-lightbox, rgba(0, 0, 0, 0.5490196078))}:focus-visible{outline:none !important}:host{display:none}:host dialog{--ix-dialog-padding:1rem;margin:0;padding:var(--ix-dialog-padding);padding-top:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-top));padding-bottom:calc(var(--ix-dialog-padding) + var(--ix-safe-area-inset-bottom));left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:fixed;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{border-radius:0;left:0 !important;top:0 !important;transform:none !important;box-shadow:none;--ix-dialog-full-screen-height:calc(\n    var(--ix-safe-area-inset-top) + var(--ix-safe-area-inset-bottom)\n  );width:calc(100% - var(--ix-dialog-padding) * 2);min-width:calc(100% - var(--ix-dialog-padding) * 2);max-width:calc(100% - var(--ix-dialog-padding) * 2);min-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height));max-height:calc(100% - var(--ix-dialog-padding) * 2 - var(--ix-dialog-full-screen-height))}:host dialog.modal-size-full-screen::backdrop{background:var(--theme-modal--background)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:3rem}";
 
 var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -26837,13 +26993,13 @@ class Modal {
          */
         this.size = '360';
         /**
-         * Should the modal animation be disabled
+         * Should the modal be animated
          */
-        this.disableAnimation = false;
+        this.animation = true;
         /**
-         * Hide the backdrop behind the modal dialog
+         * Show a backdrop behind the modal dialog
          */
-        this.hideBackdrop = false;
+        this.backdrop = true;
         /**
          * Dismiss modal on backdrop click
          */
@@ -26853,9 +27009,9 @@ class Modal {
          */
         this.centered = false;
         /**
-         * If set to true the modal cannot be closed by pressing the Escape key
+         * If set to true the modal can be closed by pressing the Escape key
          */
-        this.disableEscapeClose = false;
+        this.closeOnEscape = true;
         this.modalVisible = false;
     }
     onKey(e) {
@@ -26867,7 +27023,7 @@ class Modal {
         return this.hostElement.shadowRoot.querySelector('dialog');
     }
     slideInModal() {
-        const duration = this.disableAnimation ? 0 : Animation.mediumTime;
+        const duration = this.animation ? Animation.mediumTime : 0;
         const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];
         animate(this.dialog, {
             duration,
@@ -26878,7 +27034,7 @@ class Modal {
         });
     }
     slideOutModal(completeCallback) {
-        const duration = this.disableAnimation ? 0 : Animation.mediumTime;
+        const duration = this.animation ? Animation.mediumTime : 0;
         const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];
         animate(this.dialog, {
             duration,
@@ -26967,17 +27123,17 @@ class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (hAsync(Host, { key: '4506ba59786ba8ff12d09a2746ef6861247731e2', class: {
+        return (hAsync(Host, { key: 'a564177392104f0864b5d3420cc16c902a932b02', class: {
                 visible: this.modalVisible,
-                'no-backdrop': this.hideBackdrop,
+                'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, hAsync("div", { key: 'f205f5c38f52b057e7adb6664e70a5c36854a486', class: "dialog-backdrop" }, hAsync("dialog", { key: '87d22e5945e4e07e03c735032942d48922b9e621', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, hAsync("div", { key: '5d06f39b564cfca3e1b956cd2343fc29d8daf8ad', class: "dialog-backdrop" }, hAsync("dialog", { key: '5c47755164df8b5f6767e8dad6b5fbfbcfee03b7', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, hAsync("slot", { key: 'e2e2945cb9f5111dacf0a889a06fd74a1dd97e9a' })))));
+            } }, hAsync("slot", { key: 'e2cd48ec148b91a57a467dfb903e1308e104a5ad' })))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return modalCss; }
@@ -26986,12 +27142,12 @@ class Modal {
         "$tagName$": "ix-modal",
         "$members$": {
             "size": [1],
-            "disableAnimation": [4, "disable-animation"],
-            "hideBackdrop": [4, "hide-backdrop"],
+            "animation": [4],
+            "backdrop": [4],
             "closeOnBackdropClick": [4, "close-on-backdrop-click"],
             "beforeDismiss": [16, "before-dismiss"],
             "centered": [4],
-            "disableEscapeClose": [4, "disable-escape-close"],
+            "closeOnEscape": [4, "close-on-escape"],
             "modalVisible": [32],
             "showModal": [64],
             "dismissModal": [64],
@@ -27003,7 +27159,7 @@ class Modal {
     }; }
 }
 __decorate$8([
-    OnListener('keydown', (self) => self.disableEscapeClose)
+    OnListener('keydown', (self) => !self.closeOnEscape)
 ], Modal.prototype, "onKey", null);
 
 const modalContentCss = ":host{display:block;position:relative;overflow:auto;padding:0 0.5rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
@@ -27013,7 +27169,7 @@ class ModalContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'ad65a8e851473037c8f1cfe43195c59e128c3523' }, hAsync("slot", { key: 'edc352a2acac0a07a090db591cde4d6655f07c72' })));
+        return (hAsync(Host, { key: 'd7bef3767ae242cfdd5a3367c9c2abb1f2c0d4d6' }, hAsync("slot", { key: 'e2b8abbf51791d879a28bc322578e571d5714e8a' })));
     }
     static get style() { return modalContentCss; }
     static get cmpMeta() { return {
@@ -27033,7 +27189,7 @@ class ModalFooter {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '4b20e10da90fed23f7496eccc6b42e131be0b362' }, hAsync("slot", { key: '7e6c8edcb1d0c7457ba86b7ee8b9bcecbfaa64f3' })));
+        return (hAsync(Host, { key: 'e3164f3ff8999aca095a833b495e5194841f0039' }, hAsync("slot", { key: 'c3765f1f908b7375a6c9f5cf08e7a370a0d750b7' })));
     }
     static get style() { return modalFooterCss; }
     static get cmpMeta() { return {
@@ -27079,7 +27235,7 @@ class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (hAsync(Host, { key: '48c6bb4895a373f75c72f4a2277c6320a958e50c' }, this.icon ? (hAsync("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: 'b3f10e2fbae37c99d35cc9307858ae59cdc84f60', class: "modal-title" }, hAsync("ix-typography", { key: 'd8949040e5aeef0d06bfa199164c99e9cecf34a8', format: "h5" }, hAsync("slot", { key: 'b09380800d077a862a7c177731ab54848c971934' }))), !this.hideClose ? (hAsync("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (hAsync(Host, { key: 'ec19146ced5b95a1b9723ece2aee4fbf6f3a666c' }, this.icon ? (hAsync("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("div", { key: '46bac93f4005f43362c02a1852aa3e76e324358f', class: "modal-title" }, hAsync("ix-typography", { key: 'f201f3adcff612e81e34e60d3ed9470aac2f77e7', format: "h5" }, hAsync("slot", { key: '17302db5dbc882983abb1cbb1a46f4c2b9fce9ea' }))), !this.hideClose ? (hAsync("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -27112,7 +27268,7 @@ class ModalLoading {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '3b29d3ee63910614f836c0d67039c7fe8c979766' }, hAsync("ix-spinner", { key: 'efe7302d8f9c34e2efeda5f2213ba46969ad7a3f', variant: "primary" }), hAsync("span", { key: '882e0acb894c8c902bc1d76a4447e87c432fa550', class: 'loading-text' }, hAsync("slot", { key: 'f78b2c4aeeb4e4898e78beedd4ee0bb9ac7d4d36' }))));
+        return (hAsync(Host, { key: '6689de127dae752b929ac792e91a9ba2c4bc6691' }, hAsync("ix-spinner", { key: 'fd210b76ae2210b57f1418be5d589eac139ca1a4', variant: "primary" }), hAsync("span", { key: '3d1078bd723bfb37172630f8fd55b34cd2b77c4e', class: 'loading-text' }, hAsync("slot", { key: '21de9ad0be01c0da9b7c8ca0bfbca99f5f5731f4' }))));
     }
     static get style() { return modalLoadingCss; }
     static get cmpMeta() { return {
@@ -27245,19 +27401,19 @@ class NumberInput {
     }
     render() {
         const showStepperButtons = this.showStepperButtons && (this.disabled || this.readonly) === false;
-        return (hAsync(Host, { key: '8504c7c73fc9b962d3d1bb53f80515876579a799', class: {
+        return (hAsync(Host, { key: 'f4469bdb3c05aa990e20a17467d67243056c2767', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '5f833ae1f6e134b0056cceda27cce2491bfa5a04', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: '18d4fdfcb87f46340fd7f0c08587c8353122275f', class: {
+            } }, hAsync("ix-field-wrapper", { key: 'b5172d5a04ff81b06484cd42bbafa95c4df918eb', id: this.numberInputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: '40c286987ba4b67a3dde2f034db1d0c22d5a9cfe', class: {
                 'input-wrapper': true,
                 'show-stepper-buttons': !!this.showStepperButtons,
-            } }, hAsync(SlotStart, { key: '702b6335f92a587932de72d085487e21932897f9', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '385e81700361f81a6ee4f4999a673acc452decf9', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => {
+            } }, hAsync(SlotStart, { key: '75e15f42a93ebc862ac718c35092be8175e97ca6', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), hAsync(InputElement, { key: '552e8d9e1b0ee6f2359398b51d2d3690deb8f41d', id: this.numberInputId, readonly: this.readonly, disabled: this.disabled, step: this.step, min: this.min, max: this.max, pattern: this.pattern, type: 'number', isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(Number(value)), updateFormInternalValue: (value) => this.updateFormInternalValue(Number(value)), onBlur: () => {
                 onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            } }), hAsync(SlotEnd, { key: '346796a1af3fde17d66cc573457d63f3193f6420', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("div", { key: 'd4369359ea685b7ef974b3ff941652a496874207', class: {
+            } }), hAsync(SlotEnd, { key: '0a66c00a4c0c89543ceac9e67f3d20270811b606', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, hAsync("div", { key: '7b7f430745f590159d4a358e48fe8c1b425ceb7c', class: {
                 'number-stepper-container': true,
                 'container-hidden': !showStepperButtons,
-            } }, hAsync("ix-icon-button", { key: '0e9729ec618851639232d0d50822a89dfe899e06', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => {
+            } }, hAsync("ix-icon-button", { key: '3d01783a59bf18983785052b697fefac4519d0c4', variant: "subtle-tertiary", icon: iconMinus, size: "16", class: "number-stepper-button step-minus", "aria-label": "decrement number", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }
@@ -27265,7 +27421,7 @@ class NumberInput {
                 checkInternalValidity(this, this.inputRef.current);
                 this.updateFormInternalValue(Number(this.inputRef.current.value));
                 this.valueChange.emit(this.value);
-            } }), hAsync("ix-icon-button", { key: '9799ab98f29a44549fcf233ea0b0ca3189704c76', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => {
+            } }), hAsync("ix-icon-button", { key: 'f4082f7d6c9f03369a3cd5d1259756bc9c61f831', variant: "subtle-tertiary", icon: iconPlus, size: "16", class: "number-stepper-button step-plus", "aria-label": "increment number", onClick: () => {
                 if (!this.inputRef.current) {
                     return;
                 }
@@ -27349,9 +27505,9 @@ class Pagination {
          */
         this.itemCount = 15;
         /**
-         * Hide item count in advanced mode
+         * Show item count in advanced mode
          */
-        this.hideItemCount = false;
+        this.showItemCount = true;
         /**
          * Total number of pages
          */
@@ -27462,16 +27618,16 @@ class Pagination {
         return hAsync("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (hAsync(Host, { key: '5c1ce4b10a43956964e2382e2434784617990be7' }, hAsync("ix-icon-button", { key: 'c7433ed086de60128ba3608efce102f1adb09dc1', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { format: "body" }, this.i18nPage), hAsync("input", { class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+        return (hAsync(Host, { key: 'd8569f37bf15b09f97b84eaca4620f7fff2c4176' }, hAsync("ix-icon-button", { key: '774b6598068ca9226f53fa6212a63e6c0fb10c84', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (hAsync("div", { class: "advanced-pagination" }, hAsync("ix-typography", { format: "body" }, this.i18nPage), hAsync("input", { class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
                 const eventTarget = event.target;
                 if (eventTarget) {
                     const index = Number.parseInt(eventTarget.value);
                     this.selectPage(index - 1);
                 }
-            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: 'afe01f3d6c827f7b12f0d2e29d5a7d42bcea8658', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (hAsync("span", { key: '92ddf5d2fc223e4997819d90abe63dedcc48d47e', class: "item-count" }, hAsync("ix-typography", { key: 'cd66c9539673238192a6c54cd1d5f1ca8b8cc7c0', format: "body" }, this.i18nItems), hAsync("ix-select", { key: '6735cfec67c60535ea17df734ad2e1e9748272f1', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), hAsync("span", { class: "total-count" }, hAsync("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (hAsync("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), hAsync("ix-icon-button", { key: '172d43a656479505535f3f07d651c3a55db6f66d', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && this.showItemCount ? (hAsync("span", { class: "item-count" }, hAsync("ix-typography", { format: "body" }, 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", { key: '618713c24de8a69b7f2e8c424f13bedd9fc8bd5a', label: "10", value: "10" }), hAsync("ix-select-item", { key: '01b222e680485f49dd460c6f10bc9107b0b23286', label: "15", value: "15" }), hAsync("ix-select-item", { key: '49ff338017f595c57d23c8c5fab5470c33b96a30', label: "20", value: "20" }), hAsync("ix-select-item", { key: '0aeda9a1dc0577f30ea31934cf5e6ae4fc9f7842', label: "40", value: "40" }), hAsync("ix-select-item", { key: 'db9ab9fd5f54aa538f7ee6ba617a4d27a9203326', label: "100", value: "100" }))))));
+            } }, 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" })))) : ('')));
     }
     get hostElement() { return getElement(this); }
     static get style() { return paginationCss; }
@@ -27481,7 +27637,7 @@ class Pagination {
         "$members$": {
             "advanced": [4],
             "itemCount": [2, "item-count"],
-            "hideItemCount": [4, "hide-item-count"],
+            "showItemCount": [4, "show-item-count"],
             "count": [2],
             "selectedPage": [1026, "selected-page"],
             "i18nPage": [1, "i18n-page"],
@@ -28321,7 +28477,7 @@ class Panes {
     }; }
 }
 
-const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline{background-color:var(--theme-pill-outline--background)}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning-text)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline{background-color:var(--theme-pill-outline--background)}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
 
 class Pill {
     constructor(hostRef) {
@@ -28599,13 +28755,13 @@ class PushCard {
          */
         this.variant = 'outline';
         /**
-         * Expand the card
+         * Collapse the card
          */
-        this.expanded = false;
+        this.collapse = true;
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '2efb8c3e1cef2982fd541551b99a2ca3d725f88f', class: `card-${this.variant}` }, hAsync("ix-card", { key: 'c6da08a4a3fc532a2daad8c6e32dafd4b7c5c910', variant: this.variant }, hAsync("ix-card-content", { key: 'b643cd9cbbbd9eefa4d109716305df17fcd166bd' }, hAsync("ix-card-title", { key: '00bcf0cacec61bf55097c10a137ef6f91277af63' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("ix-typography", { key: '4eedace9e148590b19b8cb694b472d4043cbfbdf', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), hAsync("slot", { key: '1393feecddcb4a5794290b1f571e58c7ee4cc2c1', name: "title-action" })), hAsync("ix-typography", { key: 'fcee8f842f8f00be0174bb44d78f297b5b8e6f8b', format: "h4" }, this.heading), hAsync("ix-typography", { key: 'f0018324a94d5c9c3026afe39979260b6bb94c2a' }, this.subheading)), hAsync("ix-card-accordion", { key: 'da2ef25cdeeb0d6c931a4d6cca91beb36a05f081', collapse: !this.expanded, variant: this.variant }, hAsync("slot", { key: '5ef36bf26050df5b5a57c6725adc133367c266b5' })))));
+        return (hAsync(Host, { key: '6bbf00437c1ca66db153373bde27219f8e97a214', class: `card-${this.variant}` }, hAsync("ix-card", { key: 'd50854bbf3275c836c8007dcf718fe1d92696123', variant: this.variant }, hAsync("ix-card-content", { key: 'bef19c7cf43df532a478222958e0b4d860be1e30' }, hAsync("ix-card-title", { key: '123f9405b787ed426ffcc386ac3b28757bab3fcd' }, this.icon ? (hAsync("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, hAsync("ix-typography", { key: '3b792a4d47d354388e04e2f2692cfe670f086bae', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), hAsync("slot", { key: '99309088649ceed43b54101f59a69a57c6c7597d', name: "title-action" })), hAsync("ix-typography", { key: 'aded73b945315c1c572cb59251205a8d9b3c7f38', format: "h4" }, this.heading), hAsync("ix-typography", { key: '589fb71f937b9db408ed611721b36e1ab7c0969b' }, this.subheading)), hAsync("ix-card-accordion", { key: '1fd8fa45f096ba73c23d903d2f809f2fea0cb1d0', collapse: this.collapse, variant: this.variant }, hAsync("slot", { key: '5ef36bf26050df5b5a57c6725adc133367c266b5' })))));
     }
     static get style() { return pushCardCss; }
     static get cmpMeta() { return {
@@ -28618,7 +28774,7 @@ class PushCard {
             "heading": [1],
             "subheading": [1],
             "variant": [1],
-            "expanded": [4]
+            "collapse": [4]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -29386,9 +29542,6 @@ class Select {
     filterItemsWithTypeahead() {
         var _a, _b;
         this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : '';
-        if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
-            return;
-        }
         if (this.inputFilterText) {
             this.items.forEach((item) => {
                 var _a;
@@ -29494,9 +29647,9 @@ class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (hAsync(Host, { key: '1c1bae051e818c5f0a3e7b0adf5dce894b4f1472', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (hAsync(Host, { key: 'c0099c77970de85593440ff14921f884c7837e39', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, hAsync("ix-field-wrapper", { key: '27c51b8e5dd61af5aac9655f471edc4863a4fbbc', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: 'f0891864810bb64a547c5326c7877667a88ae600', class: {
+            } }, hAsync("ix-field-wrapper", { key: '243ba88d3902a5e0dbd24d093d1a7ad26dba715a', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, hAsync("div", { key: '663134035c1950d87214106f8768ddd18a6e0b7d', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -29504,13 +29657,13 @@ class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, hAsync("div", { key: 'eca70f6c3126f12124be629ca59bdf215e6def46', class: "input-container" }, hAsync("div", { key: '425508f2b4819dd8e2e9a5e5f7e7ad0bd852a765', class: "chips" }, this.isMultipleMode
+            } }, hAsync("div", { key: 'a88f41411a227fef16c86692c8b89e392e909130', class: "input-container" }, hAsync("div", { key: '115652ec0955d9968f57d016ad64f9d42a40b00c', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (hAsync("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', hAsync("div", { key: '5e9d476e5a2a4b7373259e685f7bab9c5d6dd7cb', class: "trigger" }, hAsync("input", { key: '21ab1750a2b26566f5f1bbd114d9f770e312ce11', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', hAsync("div", { key: '3427065a8dc112e5ea11bcd6b823a0f97b400216', class: "trigger" }, hAsync("input", { key: '6d83e566afc5749fd0fcd980bf81093b9e5d5656', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -29529,7 +29682,7 @@ class Select {
                 : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), hAsync("ix-dropdown", { key: '23ddaa8ce9b6ea56641ff3f41cc6047f0ab29958', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            }, "aria-label": this.ariaLabelChevronDownIconButton }))))))), hAsync("ix-dropdown", { key: '1fc475094870358ca9746b7a0a17ba90c525fc19', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'display-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
@@ -29545,12 +29698,12 @@ class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, hAsync("div", { key: '6eba3fb42dba6edddc2ac168e35c9a9be1bfb3de', class: {
+            } }, hAsync("div", { key: 'f31dea7cf6bf07744eb0570304fcf9783c8478cb', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: '78020eedc35b75f855724f4a3cdca7c623f0a426', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), hAsync("slot", { key: '7f8335b29e10f93c4a1fb85329d196439b16b5e8', onSlotchange: () => {
                 this.updateSelection();
-            } }), hAsync("div", { key: '584567e1130a12ac16239250bf0729526a4eced3', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
+            } }), hAsync("div", { key: '8166cdc348b9952f3a89f525855a9ee0ea07c41d', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (hAsync("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -29952,7 +30105,7 @@ __decorate$4([
     OnListener('pointerup', (self) => self.showTooltip)
 ], Slider.prototype, "onPointerUp", null);
 
-const spinnerCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.xx-small{width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.xx-small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.xx-small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.x-small{width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.x-small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.x-small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.small{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.medium{width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.medium::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.medium:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.large{width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.large::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.large:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}";
+const spinnerCss = ":host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.xx-small{width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.xx-small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.xx-small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-component-3)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.x-small{width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.x-small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.x-small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-component-3)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.small{width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.small::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.small:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-component-3)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.medium{width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.medium::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.medium:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-component-3)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}:host{display:block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.large{width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}.large::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}.large:not(.hide-track)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-component-3)}.primary::after{border-color:var(--theme-color-dynamic)}.primary::before{border-color:var(--theme-color-ghost--hover)}";
 
 class Spinner {
     constructor(hostRef) {
@@ -30557,10 +30710,10 @@ class Textarea {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: '0243db663d5aa1996b185f17c5789f73a6072313', class: {
+        return (hAsync(Host, { key: '2bd17a0b362db1a3b47a40a335e9dad0aacf60b2', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: 'f25e360a6ee81234e3243b26838afe4f7f28adbf', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: '961d912a60613b6a501d14709f4d909355f85f80', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), hAsync("div", { key: '95d7060b1c5f37b82c6d4eb2b9a3476e1040c649', class: "input-wrapper" }, hAsync(TextareaElement, { key: '50708cb56263368ebe853f539f95f5de8890dd83', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, hAsync("ix-field-wrapper", { key: '63f6f38a83f3ac585be94fcbae2f0a1f07a3594a', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.textAreaRef }, !!this.maxLength && this.maxLength > 0 && (hAsync("ix-typography", { key: 'edec746b0b0f15b01a42f827d8ed77d5b2ff3fbb', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, ((_a = this.value) !== null && _a !== void 0 ? _a : '').length, "/", this.maxLength)), hAsync("div", { key: 'bd53188011be0df0567500f6f4f85757210a5df3', class: "input-wrapper" }, hAsync(TextareaElement, { key: '2b38f2d805863b6f85630f2192a6c1dcd5238e5a', minLength: this.minLength, maxLength: this.maxLength, textareaCols: this.textareaCols, textareaRows: this.textareaRows, textareaHeight: this.textareaHeight, textareaWidth: this.textareaWidth, resizeBehavior: this.resizeBehavior, readonly: this.readonly, disabled: this.disabled, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, textAreaRef: this.textAreaRef, valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 onInputBlur(this, this.textAreaRef.current);
                 this.touched = true;
             } })))));
@@ -30763,6 +30916,12 @@ class TimeInput {
          */
         // eslint-disable-next-line @stencil-community/decorators-style
         this.i18nMillisecondColumnHeader = 'ms';
+        /**
+         * Hides the header of the picker.
+         *
+         * @since 4.0.0
+         */
+        this.hideHeader = false;
         this.show = false;
         this.time = null;
         this.isInputInvalid = false;
@@ -30922,12 +31081,12 @@ class TimeInput {
         const invalidText = this.isInputInvalid
             ? this.i18nErrorTimeUnparsable
             : this.invalidText;
-        return (hAsync(Host, { key: 'df1002b7dce68acc6c43563361ea7c4700d087c4', class: {
+        return (hAsync(Host, { key: '0001640191c8b6d5eae25490ea8d7759e1ce8466', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, hAsync("ix-field-wrapper", { key: '94b11ef3990a47c542ea90efcdd63c1b49c6363a', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), hAsync("ix-dropdown", { key: '43fbbdd8415f8b8c0ff88b12de9b6b3ca4abef40', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            } }, hAsync("ix-field-wrapper", { key: '37c77257a9bb1b3d59de20534d21a22dfd0c94d3', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), hAsync("ix-dropdown", { key: '07f92d4dff124abdd559c9d3b5bb4c6411f844db', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, hAsync("ix-time-picker", { key: '3d788ada1bb29a18cdb34842745b4e34bb8a1a23', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            } }, hAsync("ix-time-picker", { key: '319619865e7f73b4896863289dc2a00b612ac8b2', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, standaloneAppearance: false, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 this.show = false;
             } }))));
@@ -30968,6 +31127,7 @@ class TimeInput {
             "i18nMinuteColumnHeader": [1, "i18n-minute-column-header"],
             "i18nSecondColumnHeader": [1, "i18n-second-column-header"],
             "i18nMillisecondColumnHeader": [1, "i18n-millisecond-column-header"],
+            "hideHeader": [4, "hide-header"],
             "show": [32],
             "time": [32],
             "isInputInvalid": [32],
@@ -31050,13 +31210,31 @@ class TimePicker {
          */
         this.corners = 'rounded';
         /**
-         * Embedded style (for use in other components)
+         * Controls the visual presentation and styling of the component when it is displayed as a standalone element
          */
-        this.embedded = false;
+        this.standaloneAppearance = true;
         /**
          * @internal Temporary prop needed until datetime-picker is reworked for new design
          */
         this.dateTimePickerAppearance = false;
+        /**
+         * Show hour input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         *
+         * @deprecated This is now determined by the format that is used. Will be removed in 4.0.0
+         */
+        this.showSeconds = true;
         /**
          * Hides the header of the picker.
          *
@@ -31092,10 +31270,22 @@ class TimePicker {
          * Format has to match the `format` property.
          */
         this.time = DateTime.now().toFormat(this.format);
+        /**
+         * Text of time select button
+         *
+         * @deprecated Use `i18nConfirmTime` instead. Will be removed in 4.0.0.
+         */
+        this.textSelectTime = CONFIRM_BUTTON_DEFAULT;
         /**
          * Text of the time confirm button
          */
         this.i18nConfirmTime = CONFIRM_BUTTON_DEFAULT;
+        /**
+         * Text for top label
+         *
+         * @deprecated Use `i18nHeader` instead. Will be removed in 4.0.0.
+         */
+        this.textTime = HEADER_DEFAULT;
         /**
          * Text for top header
          */
@@ -31484,21 +31674,21 @@ class TimePicker {
             {
                 unit: 'hour',
                 header: this.i18nHourColumnHeader,
-                hidden: !LUXON_FORMAT_PATTERNS.hours.test(this.format),
+                hidden: !LUXON_FORMAT_PATTERNS.hours.test(this.format) || !this.showHour,
                 numberArray: hourNumbers,
                 focusedValue: this.getInitialFocusedValueForUnit('hour', hourNumbers),
             },
             {
                 unit: 'minute',
                 header: this.i18nMinuteColumnHeader,
-                hidden: !LUXON_FORMAT_PATTERNS.minutes.test(this.format),
+                hidden: !LUXON_FORMAT_PATTERNS.minutes.test(this.format) || !this.showMinutes,
                 numberArray: minuteNumbers,
                 focusedValue: this.getInitialFocusedValueForUnit('minute', minuteNumbers),
             },
             {
                 unit: 'second',
                 header: this.i18nSecondColumnHeader,
-                hidden: !LUXON_FORMAT_PATTERNS.seconds.test(this.format),
+                hidden: !LUXON_FORMAT_PATTERNS.seconds.test(this.format) || !this.showSeconds,
                 numberArray: secondNumbers,
                 focusedValue: this.getInitialFocusedValueForUnit('second', secondNumbers),
             },
@@ -31590,23 +31780,41 @@ class TimePicker {
         }
         return '-1';
     }
+    getConfirmButtonText() {
+        if (this.i18nConfirmTime !== CONFIRM_BUTTON_DEFAULT) {
+            return this.i18nConfirmTime;
+        }
+        if (this.textSelectTime !== CONFIRM_BUTTON_DEFAULT) {
+            return this.textSelectTime;
+        }
+        return this.i18nConfirmTime;
+    }
+    getHeaderText() {
+        if (this.i18nHeader !== HEADER_DEFAULT) {
+            return this.i18nHeader;
+        }
+        if (this.textTime != HEADER_DEFAULT) {
+            return this.textTime;
+        }
+        return this.i18nHeader;
+    }
     render() {
-        return (hAsync(Host, { key: '0a4fe655aa8e807d31434db48f2a101c83338b0f' }, hAsync("ix-date-time-card", { key: 'd05cdf747364f2d3df0507916fa42556d65d298b', embedded: this.embedded, timePickerAppearance: true, corners: this.corners, hasFooter: true, hideHeader: this.hideHeader }, hAsync("div", { key: '7623cab488f05a0c3c1ed070fcc4997092835acf', class: "header", slot: "header" }, hAsync("ix-typography", { key: '4dc463ed985440fec19e66790b033baf7eb207bb', format: "h5" }, this.i18nHeader)), hAsync("div", { key: 'cb82802aea1fa6041e4a0f0db0fd44308b3f1c73', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => (hAsync("div", { class: "flex" }, hAsync("div", { class: { columns: true, hidden: descriptor.hidden } }, hAsync("div", { class: "column-header", title: descriptor.header }, descriptor.header), hAsync("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => (hAsync("button", { "data-element-container-id": `${descriptor.unit}-${number}`, class: {
+        return (hAsync(Host, { key: 'deaf89167092b74d0b144e44c7e8cf65e99bdc48' }, hAsync("ix-date-time-card", { key: '1c4aca1d13138955fd6a5b632338521e3b05d3cd', standaloneAppearance: this.standaloneAppearance, timePickerAppearance: true, corners: this.corners, hasFooter: true, hideHeader: this.hideHeader }, hAsync("div", { key: '4d4a4029e1b500eb945bfad7e7a803ec4b05cd61', class: "header", slot: "header" }, hAsync("ix-typography", { key: '0519cca29f05a3671349c0deb23d97b289bba435', format: "h5" }, this.getHeaderText())), hAsync("div", { key: '09c8c237d92acd7be30b58a1eac69e2c5154f7f4', class: "clock" }, this.timePickerDescriptors.map((descriptor, index) => (hAsync("div", { class: "flex" }, hAsync("div", { class: { columns: true, hidden: descriptor.hidden } }, hAsync("div", { class: "column-header", title: descriptor.header }, descriptor.header), hAsync("div", { "data-element-list-id": descriptor.unit, class: "element-list", tabIndex: -1 }, descriptor.numberArray.map((number) => (hAsync("button", { "data-element-container-id": `${descriptor.unit}-${number}`, class: {
                 selected: this.isSelected(descriptor.unit, number),
                 'element-container': true,
             }, onClick: () => this.select(descriptor.unit, number), onFocus: () => this.onUnitCellFocus(descriptor.unit, number), onBlur: () => this.onUnitCellBlur(descriptor.unit), tabindex: this.getElementContainerTabIndex(number, descriptor.unit), role: "button", "aria-label": `${descriptor.header}: ${number}` }, this.formatUnitValue(descriptor.unit, number)))), hAsync("div", { class: "element-list-padding" }))), index !== this.timePickerDescriptors.length - 1 && (hAsync("div", { class: {
                 'column-seperator': true,
                 hidden: descriptor.hidden,
-            } }, this.getColumnSeparator(index))))))), hAsync("div", { key: '817e28cf4a4e88dbee15c8e20fdcbddc1268bc48', class: {
+            } }, this.getColumnSeparator(index))))))), hAsync("div", { key: '6e1560d71b59d8cbf32f9b201c3db2cea62bab38', class: {
                 footer: true,
                 'footer--compact': this.timePickerDescriptors.length <= 2,
-            }, slot: "footer" }, this.timeRef && (hAsync("div", { key: '2062827896db2963c960b91c6bbcdab5de36d25c', class: {
+            }, slot: "footer" }, this.timeRef && (hAsync("div", { key: '9f54da10f63c7cc75a09a22300c5714721c4ae59', class: {
                 'time-ref-buttons': true,
                 'time-ref-buttons--datetime-picker-appearance': this.dateTimePickerAppearance,
-            } }, hAsync("button", { key: 'edc9447a666a695895e7b2bce7b1379e393d9a71', "data-am-pm-id": "AM", class: { selected: this.timeRef === 'AM' }, onClick: () => this.changeTimeReference('AM') }, "AM"), hAsync("button", { key: 'd3a60111682401a9215c3e697676d14146b98f51', "data-am-pm-id": "PM", class: { selected: this.timeRef === 'PM' }, onClick: () => this.changeTimeReference('PM') }, "PM"))), !this.dateTimePickerAppearance && (hAsync("ix-button", { key: 'f9fd7bfc87de6da830fee31db4d766f116fae4f7', class: "confirm-button", onClick: () => {
+            } }, hAsync("button", { key: '8081ccea518718dac3ed324511626d964c57c9a4', "data-am-pm-id": "AM", class: { selected: this.timeRef === 'AM' }, onClick: () => this.changeTimeReference('AM') }, "AM"), hAsync("button", { key: '9b41178ad92d5f7aa549163f64eb2e16c81149be', "data-am-pm-id": "PM", class: { selected: this.timeRef === 'PM' }, onClick: () => this.changeTimeReference('PM') }, "PM"))), !this.dateTimePickerAppearance && (hAsync("ix-button", { key: '5cd17cb2c0271daee317155a5246299856550719', class: "confirm-button", onClick: () => {
                 var _a;
                 this.timeSelect.emit((_a = this._time) === null || _a === void 0 ? void 0 : _a.toFormat(this.format));
-            } }, this.i18nConfirmTime))))));
+            } }, this.getConfirmButtonText()))))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -31625,15 +31833,21 @@ class TimePicker {
         "$members$": {
             "format": [1],
             "corners": [1],
-            "embedded": [4],
+            "standaloneAppearance": [4, "standalone-appearance"],
             "dateTimePickerAppearance": [4, "date-time-picker-appearance"],
+            "showHour": [4, "show-hour"],
+            "showMinutes": [4, "show-minutes"],
+            "showSeconds": [4, "show-seconds"],
             "hideHeader": [4, "hide-header"],
             "hourInterval": [1026, "hour-interval"],
             "minuteInterval": [1026, "minute-interval"],
             "secondInterval": [1026, "second-interval"],
             "millisecondInterval": [1026, "millisecond-interval"],
             "time": [1],
+            "timeReference": [1, "time-reference"],
+            "textSelectTime": [1, "text-select-time"],
             "i18nConfirmTime": [1, "i18n-confirm-time"],
+            "textTime": [1, "text-time"],
             "i18nHeader": [1, "i18n-header"],
             "i18nHourColumnHeader": [1, "i18n-column-header"],
             "i18nMinuteColumnHeader": [1, "i18n-minute-column-header"],
@@ -31674,7 +31888,7 @@ class Toast {
         /**
          * Autoclose behavior
          */
-        this.preventAutoClose = false;
+        this.autoClose = true;
         this.progress = 0;
         this.touched = false;
         this.paused = false;
@@ -31691,7 +31905,8 @@ class Toast {
             case 'success':
                 return (hAsync("ix-icon", { "data-testid": "toast-icon", name: iconSuccess, size: "24", color: "color-success" }));
             case 'warning':
-                return (hAsync("ix-icon", { "data-testid": "toast-icon", name: iconWarning, size: "24", color: "color-warning" }));
+                //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+                return (hAsync("ix-icon", { "data-testid": "toast-icon", name: iconWarning, size: "24", color: "color-warning-text" }));
             default:
                 return '';
         }
@@ -31730,17 +31945,17 @@ class Toast {
             animationPlayState: this.touched || this.paused ? 'paused' : 'running',
         };
         progressBarClass.push('toast-progress-bar--animated');
-        return (hAsync(Host, { key: '5bb9319d0d791f26c3f8582a8f2b30949227495e', class: "animate__animated animate__fadeIn" }, hAsync("div", { key: '53a17895512a0b40739e3b979f2d5fe47244ebec', class: "toast-body", onPointerLeave: () => {
+        return (hAsync(Host, { key: '4be41b7d6326a30e985506471f5ef6a9fcfc4cf7', class: "animate__animated animate__fadeIn" }, hAsync("div", { key: '02ae41f684be0f0c1b304c6565c22ec4cd9ee9d4', class: "toast-body", onPointerLeave: () => {
                 this.touched = false;
             }, onPointerEnter: () => {
                 this.touched = true;
-            } }, this.type || this.icon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: 'de5b26d9ce94d528e96d3881b3be81b83d8fb0b6', class: "toast-content" }, this.toastTitle ? (hAsync("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, hAsync("div", { key: 'dd1956ba5d44ac65fe9fa1e2adf63285f137b3aa', class: "toast-message" }, hAsync("slot", { key: '93e93ac00e332ab0200a0637b5de5c7603136725' })), hAsync("div", { key: '3f84a2fb8198d937ddc15a79de7657851bcba9f5', class: "toast-action" }, hAsync("slot", { key: '425ec2b59bef236f3513c462968151f747f4dcd1', name: "action" }))), hAsync("div", { key: 'f0eafe9dcabb9391b27eb06b3309adff1167ee78', class: "toast-close" }, hAsync("ix-icon-button", { key: '128cc7e124db71701fa43c17f7fc5f404772c0be', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), !this.preventAutoClose && (hAsync("div", { key: 'b00ce915bd06952be5cef1575e6a06751e716d18', class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
+            } }, this.type || this.icon ? (hAsync("div", { class: "toast-icon" }, this.getIcon())) : null, hAsync("div", { key: 'e9b2d338091b227f41b4470803b305394f3b2228', class: "toast-content" }, this.toastTitle ? (hAsync("ix-typography", { class: "toast-title", format: "h5" }, this.toastTitle)) : null, hAsync("div", { key: '527acd28a634e03f57eb6d92b3f67c40e0d2346a', class: "toast-message" }, hAsync("slot", { key: '1574e31e91cb4f84af715e37da9adf396846951f' })), hAsync("div", { key: '147f2e4f356cc028307cc504601bc0591e2cbd99', class: "toast-action" }, hAsync("slot", { key: '3dfeccf1e8eb06fda37cef838a67abee67268190', name: "action" }))), hAsync("div", { key: '036f9123375077554e7250dd8aaea513685571c8', class: "toast-close" }, hAsync("ix-icon-button", { key: 'f2ef551fa606e0d03a9cb1f02d074bbe75d1e158', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => this.closeToast.emit(), "aria-label": this.ariaLabelCloseIconButton }))), this.autoClose ? (hAsync("div", { class: progressBarClass.join(' '), style: progressBarStyle, onAnimationEnd: () => {
                 this.close();
             }, onTransitionEnd: () => {
                 if (this.progress === 0) {
                     this.close();
                 }
-            } }))));
+            } })) : null));
     }
     get hostElement() { return getElement(this); }
     static get style() { return toastCss; }
@@ -31751,7 +31966,7 @@ class Toast {
             "type": [1],
             "toastTitle": [1, "toast-title"],
             "autoCloseDelay": [2, "auto-close-delay"],
-            "preventAutoClose": [4, "prevent-auto-close"],
+            "autoClose": [4, "auto-close"],
             "icon": [1],
             "iconColor": [1, "icon-color"],
             "ariaLabelCloseIconButton": [1, "aria-label-close-icon-button"],
@@ -31818,7 +32033,7 @@ class ToastContainer {
      * @param config
      */
     async showToast(config) {
-        var _a, _b;
+        var _a, _b, _c;
         const toast = document.createElement('ix-toast');
         const onClose = new TypedEvent();
         function removeToast(result) {
@@ -31827,8 +32042,8 @@ class ToastContainer {
         }
         toast.toastTitle = config.title;
         toast.type = (_a = config.type) !== null && _a !== void 0 ? _a : 'info';
-        toast.preventAutoClose = config.autoClose === false;
-        toast.autoCloseDelay = (_b = config.autoCloseDelay) !== null && _b !== void 0 ? _b : 5000;
+        toast.autoClose = (_b = config.autoClose) !== null && _b !== void 0 ? _b : true;
+        toast.autoCloseDelay = (_c = config.autoCloseDelay) !== null && _c !== void 0 ? _c : 5000;
         toast.icon = config.icon;
         toast.iconColor = config.iconColor;
         toast.addEventListener('closeToast', (event) => {
@@ -31865,10 +32080,10 @@ class ToastContainer {
         };
     }
     render() {
-        return (hAsync(Host, { key: '59d981cb28cd1f209b91b90be1b655d172b4656a', class: {
+        return (hAsync(Host, { key: '11f53d028ee14f4884f1a69b157298d53da4939c', class: {
                 'toast-container--bottom-right': this.position === 'bottom-right',
                 'toast-container--top-right': this.position === 'top-right',
-            } }, hAsync("slot", { key: 'f3480f79aa05f8a48b66c7d708d83f0e543f048d' })));
+            } }, hAsync("slot", { key: 'be298b17f3b67ed5d6e2589b4bb041b6d7b90dbd' })));
     }
     static get watchers() { return {
         "position": ["onPositionChange"]
@@ -31889,7 +32104,7 @@ class ToastContainer {
     }; }
 }
 
-const toggleCss = ":host{display:inline-flex;flex-direction:row;position:relative;min-height:1.5rem;max-height:calc(100% - 0.5rem);margin-block-start:0.25rem;margin-block-end:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;max-height:100%}:host .label{word-break:break-word;display:block;white-space:normal;overflow:hidden;margin-block-start:0.125rem;margin-inline-start:0.5rem;min-height:1rem;margin-left:0.625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}";
+const toggleCss = ":host{display:inline-flex;flex-direction:row;position:relative;min-height:1.5rem;max-height:calc(100% - 0.5rem);margin-block-start:0.25rem;margin-block-end:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;max-height:100%}:host .label{word-break:break-word;display:block;white-space:normal;overflow:hidden;margin-block-start:0.125rem;margin-inline-start:0.5rem;min-height:1rem;margin-left:0.625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%;border:1px solid var(--theme-switch-thumb-off--border-color)}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover);border:1px solid var(--theme-switch-thumb-off--border-color--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active);border:1px solid var(--theme-switch-thumb-off--border-color--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked>.slider:before{border:1px solid var(--theme-switch-thumb-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover);border:1px solid var(--theme-switch-thumb-on--border-color--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active);border:1px solid var(--theme-switch-thumb-on--border-color--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-valid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--valid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--valid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--valid--active\n  );--theme-switch-thumb-off--border-color:var(\n    --theme-switch-thumb-off--border-color--valid\n  );--theme-switch-thumb-off--border-color--hover:var(\n    --theme-switch-thumb-off--border-color--valid--hover\n  );--theme-switch-thumb-off--border-color--active:var(\n    --theme-switch-thumb-off--border-color--valid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--valid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--valid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--valid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--valid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--valid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--valid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--valid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--valid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--valid--active\n  );--theme-switch-thumb-on--border-color:var(\n    --theme-switch-thumb-on--border-color--valid\n  );--theme-switch-thumb-on--border-color--hover:var(\n    --theme-switch-thumb-on--border-color--valid--hover\n  );--theme-switch-thumb-on--border-color--active:var(\n    --theme-switch-thumb-on--border-color--valid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--valid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--valid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--valid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--valid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--valid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--valid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--valid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--valid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--valid--active\n  );--theme-switch-thumb-mixed--border-color:var(\n    --theme-switch-thumb-mixed--border-color--valid\n  );--theme-switch-thumb-mixed--border-color--hover:var(\n    --theme-switch-thumb-mixed--border-color--valid--hover\n  );--theme-switch-thumb-mixed--border-color--active:var(\n    --theme-switch-thumb-mixed--border-color--valid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--valid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--valid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--valid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--valid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--valid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--valid--active\n  )}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--border-color:var(\n    --theme-switch-thumb-off--border-color--info\n  );--theme-switch-thumb-off--border-color--hover:var(\n    --theme-switch-thumb-off--border-color--info--hover\n  );--theme-switch-thumb-off--border-color--active:var(\n    --theme-switch-thumb-off--border-color--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--border-color:var(\n    --theme-switch-thumb-on--border-color--info\n  );--theme-switch-thumb-on--border-color--hover:var(\n    --theme-switch-thumb-on--border-color--info--hover\n  );--theme-switch-thumb-on--border-color--active:var(\n    --theme-switch-thumb-on--border-color--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--border-color:var(\n    --theme-switch-thumb-mixed--border-color--info\n  );--theme-switch-thumb-mixed--border-color--hover:var(\n    --theme-switch-thumb-mixed--border-color--info--hover\n  );--theme-switch-thumb-mixed--border-color--active:var(\n    --theme-switch-thumb-mixed--border-color--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--border-color:var(\n    --theme-switch-thumb-off--border-color--warning\n  );--theme-switch-thumb-off--border-color--hover:var(\n    --theme-switch-thumb-off--border-color--warning--hover\n  );--theme-switch-thumb-off--border-color--active:var(\n    --theme-switch-thumb-off--border-color--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--border-color:var(\n    --theme-switch-thumb-on--border-color--warning\n  );--theme-switch-thumb-on--border-color--hover:var(\n    --theme-switch-thumb-on--border-color--warning--hover\n  );--theme-switch-thumb-on--border-color--active:var(\n    --theme-switch-thumb-on--border-color--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--border-color:var(\n    --theme-switch-thumb-mixed--border-color--warning\n  );--theme-switch-thumb-mixed--border-color--hover:var(\n    --theme-switch-thumb-mixed--border-color--warning--hover\n  );--theme-switch-thumb-mixed--border-color--active:var(\n    --theme-switch-thumb-mixed--border-color--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--border-color:var(\n    --theme-switch-thumb-off--border-color--invalid\n  );--theme-switch-thumb-off--border-color--hover:var(\n    --theme-switch-thumb-off--border-color--invalid--hover\n  );--theme-switch-thumb-off--border-color--active:var(\n    --theme-switch-thumb-off--border-color--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--border-color:var(\n    --theme-switch-thumb-on--border-color--invalid\n  );--theme-switch-thumb-on--border-color--hover:var(\n    --theme-switch-thumb-on--border-color--invalid--hover\n  );--theme-switch-thumb-on--border-color--active:var(\n    --theme-switch-thumb-on--border-color--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--border-color:var(\n    --theme-switch-thumb-mixed--border-color--invalid\n  );--theme-switch-thumb-mixed--border-color--hover:var(\n    --theme-switch-thumb-mixed--border-color--invalid--hover\n  );--theme-switch-thumb-mixed--border-color--active:var(\n    --theme-switch-thumb-mixed--border-color--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--border-color:var(\n    --theme-switch-thumb-off--border-color--invalid\n  );--theme-switch-thumb-off--border-color--hover:var(\n    --theme-switch-thumb-off--border-color--invalid--hover\n  );--theme-switch-thumb-off--border-color--active:var(\n    --theme-switch-thumb-off--border-color--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--border-color:var(\n    --theme-switch-thumb-on--border-color--invalid\n  );--theme-switch-thumb-on--border-color--hover:var(\n    --theme-switch-thumb-on--border-color--invalid--hover\n  );--theme-switch-thumb-on--border-color--active:var(\n    --theme-switch-thumb-on--border-color--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--border-color:var(\n    --theme-switch-thumb-mixed--border-color--invalid\n  );--theme-switch-thumb-mixed--border-color--hover:var(\n    --theme-switch-thumb-mixed--border-color--invalid--hover\n  );--theme-switch-thumb-mixed--border-color--active:var(\n    --theme-switch-thumb-mixed--border-color--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}";
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -32019,13 +32234,13 @@ class Toggle {
         if (this.indeterminate) {
             toggleText = this.textIndeterminate;
         }
-        return (hAsync(Host, { key: '1492cb1b8d8e539d4ad9512855419f007ea09468', class: {
+        return (hAsync(Host, { key: '959c6b0e5f6c2ea7f2ce6cf79ba2280b3c8b65dd', class: {
                 disabled: this.disabled,
-            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: 'b16edd8b06b3c3810d0316cb8af35b03cabc02d2', class: "wrapper" }, hAsync("button", { key: '72ff2656eabb4fbe75d66ec0e85d155ea6e20aa1', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
+            }, onBlur: () => this.ixBlur.emit(), onFocus: () => (this.touched = true) }, hAsync("label", { key: 'dc419b9a0a469ef8369b6c8cbc204a75367a7274', class: "wrapper" }, hAsync("button", { key: '3773fdea993e02d7aa7ee106aa08e1eee0768f65', role: "switch", "aria-checked": a11yBoolean(this.checked), class: {
                 switch: true,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, hAsync("div", { key: 'bcfecea2bb8ed21cc3fbf261b3b5b4da0f75421b', class: "slider" })), hAsync("input", { key: '99d29a95e7947e1caf9517626ceb5fe1f85fdecb', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (hAsync("ix-typography", { key: 'd78d235bb63df9ee029af25320d1ec0e55c24cc8', class: "label" }, toggleText)))));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, hAsync("div", { key: '5c74f7c65e49e3c0cb55206ecc5fc4e045b8bd0c', class: "slider" })), hAsync("input", { key: '46e28932ab63dfa9af6bfa497b5db38e2d66e416', type: "checkbox", disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, tabindex: 0, "aria-hidden": a11yBoolean(true), "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), !this.hideText && (hAsync("ix-typography", { key: '103c3c8dca7b36db893c108ce8c11acf014b57ee', class: "label" }, toggleText)))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return getElement(this); }
@@ -32442,7 +32657,7 @@ class Tooltip {
         (_d = this.disposeDomChangeListener) === null || _d === void 0 ? void 0 : _d.call(this);
     }
     render() {
-        return (hAsync(Host, { key: '973dc518da9479fcdca036a6389e8c1e2e80c6f8', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: 'dc27e2fda62a1c3adb8a3a5a71f177e415a5239a', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: 'f4076677cc47924b34f5262d2839848731bfba88', class: "tooltip-container" }, hAsync("div", { key: '4cc232bda11b610f776b6c348e5646a4fd957e7c', class: "content-wrapper" }, hAsync("div", { key: '671455a19b08ea26dd67941cea59f4b459a28848', class: 'tooltip-title' }, hAsync("slot", { key: '1003cfccae171355e821c5ea45b5ceea01df32c3', name: "title-icon" }), hAsync("ix-typography", { key: '9d4a8900a8a0daf391400fce74bafe1b1d6584d8', format: "h5" }, this.titleContent, hAsync("slot", { key: 'bd4b0eadfcc97278907ca65d53313622271f6677', name: "title-content" }))), hAsync("slot", { key: '206884608efdd15c38af57b59ce7ca39199867f6' }), hAsync("div", { key: '3aa740ce90a598480f4fc8c742c907a20f1cac12', class: "arrow" }))))));
+        return (hAsync(Host, { key: '259eb829430ac738cf85ebbdb5fc21ed112468d8', role: "tooltip", class: { visible: this.visible } }, hAsync("dialog", { key: 'cf3d57f55b780b98bfcf637aff5dc7b35c829f0d', ref: this.dialogRef, id: 'tooltip-' + this.instance, class: "dialog", popover: "manual", inert: !this.visible }, hAsync("div", { key: '1520c20ab3eb9f7e58134b3e9f722f4176e48318', class: "tooltip-container" }, hAsync("div", { key: '82500b59751ffeced15965f8955519fac1405b6c', class: "content-wrapper" }, hAsync("div", { key: 'b7dab9108c3e145f8dd70fb5eff1323a2384a9d1', class: 'tooltip-title' }, hAsync("slot", { key: 'a327597fd2b7790d4a15031e5038ac560b744fac', name: "title-icon" }), hAsync("ix-typography", { key: '68550d2f60baf4b4887fc3916d52aa34c0686d47', format: "h5" }, this.titleContent, hAsync("slot", { key: '808955669e8ef204c2a00a18c1a22a47e6b75529', name: "title-content" }))), hAsync("slot", { key: '8872e40443a635579dfabb070e16abd1b510cd96' }), hAsync("div", { key: '1c0f216282b430d911259808f2520cacd74bac87', class: "arrow" }))))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return tooltipCss; }
@@ -33077,7 +33292,7 @@ class Tree {
         this.nodeClicked.emit(id);
     }
     render() {
-        return (hAsync(Host, { key: '63a16d50216cead2a3cd575e10eba99e986bba94', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: 'de9e3217ff22b93db88f5b17f72d62869443cff0' })));
+        return (hAsync(Host, { key: 'ed47b138fb50d9b9803d52b40526922aa9e406ad', onClick: (event) => this.onTreeItemClick(event) }, hAsync("slot", { key: '8b8f8a37f440ae2658764b8da65a2cb8d1db7afb' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -33116,17 +33331,17 @@ class TreeItem {
     }
     render() {
         var _a, _b;
-        return (hAsync(Host, { key: '207140a58c23473bc6545cfee11e3f1ed1f1e9a0', class: {
+        return (hAsync(Host, { key: '05f896e21e252fab0d3f39b4d52885342522d0f9', class: {
                 selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
-            } }, hAsync("div", { key: '0e0c0dff66b4f683a87edd378ee105fe36ef9c38', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
+            } }, hAsync("div", { key: 'e716c8ee13d77bedf01cb603d8a65798a5cc647d', class: "icon-toggle-container" }, this.hasChildren ? (hAsync("ix-icon", { name: iconChevronRightSmall, size: "24", class: {
                 ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
             }, color: "color-std-text", onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle.emit();
-            }, "aria-label": this.ariaLabelChevronIcon })) : null), hAsync("div", { key: '2d3bf649a70cd6f8cae585c09cc0cd0d90600502', class: "tree-node-container", onClick: () => {
+            }, "aria-label": this.ariaLabelChevronIcon })) : null), hAsync("div", { key: '433f67a985cea3d1ea88f85e51355977197ae2fd', class: "tree-node-container", onClick: () => {
                 this.itemClick.emit();
-            } }, hAsync("div", { key: '27405ea05eb88b7a038d467ddabbf07026490a44', class: "tree-node-text" }, this.text), hAsync("slot", { key: '3c73467430f00bcf20bf07aeb1f67283d978ab80' }))));
+            } }, hAsync("div", { key: 'abd3864dc9a2425da258b1844617d37b5f38b831', class: "tree-node-text" }, this.text), hAsync("slot", { key: '16aa907095f9b1e28d825ca4cc6daacd04ca9bec' }))));
     }
     static get style() { return treeItemCss; }
     static get cmpMeta() { return {
@@ -33324,7 +33539,7 @@ class Upload {
     render() {
         const disabled = this.disabled || this.state === UploadFileState.LOADING;
         const _a = this.a11y, { 'aria-label': ariaLabel = 'Upload files' } = _a, a11y = __rest(_a, ['aria-label']);
-        return (hAsync(Host, Object.assign({ key: '1451f609553f5b88ea956830d7d5ad03cb5a3bde' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: 'a705d2fe51f3551a5030a7b3825b1a94eb5e7011', class: {
+        return (hAsync(Host, Object.assign({ key: 'bf422891997d473a0d74b5654da1fc26df37b442' }, a11y, { "aria-disabled": disabled }), hAsync("div", { key: 'b37683a6d5e926dd4404374d58e9926f78bf41ec', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -33334,9 +33549,9 @@ class Upload {
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: '57db9ccc37f9e21ae8cbe6e6bc120ed8ea6c4d9b' }, hAsync("input", { key: '2d692e13fceb32b08e710824e32915dc098e5050', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), hAsync("div", { key: '042a23a8c008f2e851afebf1e7c6ed8d0135c954' }, hAsync("input", { key: '8f0b147483d1a87481f854fc17e1bb05cb646ee3', "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: '6e083f1d642d1f31a6c83af36515b6fa61681525', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
+            }, accept: this.accept, disabled: disabled }), hAsync("ix-button", { key: 'c6aa9a9ae0cb9c9fdc577c318e78d9f1fef4744c', variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled: disabled }, this.i18nUploadFile)))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return uploadCss; }
@@ -33364,6 +33579,174 @@ class Upload {
     }; }
 }
 
+const validationTooltipCss = ".text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:inline-block;position:relative;width:100%;z-index:var(--theme-z-index-tooltip)}:host .validation-tooltip{background-color:var(--theme-tooltip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tooltip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}";
+
+/**
+ * @slot tooltip-message - Custom tooltip message with html support
+ *
+ * @deprecated Will be removed with 4.0.0
+ */
+class ValidationTooltip {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Placement of the tooltip
+         */
+        this.placement = 'top';
+        /**
+         * Suppress the automatic placement of the dropdown.
+         */
+        this.suppressAutomaticPlacement = false;
+        this.isInputValid = true;
+        this.onSubmitBind = this.onSubmit.bind(this);
+        this.onInputFocusBind = this.onInputFocus.bind(this);
+    }
+    get arrow() {
+        return this.hostElement.shadowRoot.querySelector('#arrow');
+    }
+    get inputElement() {
+        return this.hostElement.querySelector('input');
+    }
+    get formElement() {
+        var _a;
+        return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.form;
+    }
+    get tooltipElement() {
+        return this.hostElement.shadowRoot.querySelector('.validation-tooltip');
+    }
+    destroyAutoUpdate() {
+        if (this.tooltipElement) {
+            this.tooltipElement.style.display = 'none';
+        }
+        if (this.autoUpdateCleanup) {
+            this.autoUpdateCleanup();
+        }
+    }
+    applyTooltipPosition() {
+        this.tooltipElement.style.display = 'block';
+        let positionConfig = {
+            strategy: 'fixed',
+            middleware: [
+                inline(),
+                shift(),
+                offset({
+                    mainAxis: 8,
+                }),
+            ],
+        };
+        if (!positionConfig.middleware) {
+            positionConfig.middleware = [];
+        }
+        if (!this.suppressAutomaticPlacement) {
+            positionConfig.middleware.push(flip({ fallbackStrategy: 'initialPlacement' }));
+        }
+        positionConfig.placement = this.placement;
+        this.autoUpdateCleanup = autoUpdate(this.inputElement, this.tooltipElement, async () => {
+            positionConfig.middleware = [
+                ...positionConfig.middleware,
+                arrow({
+                    element: this.arrow,
+                }),
+            ];
+            const computeResponse = await computePosition(this.inputElement, this.tooltipElement, positionConfig);
+            if (computeResponse.middlewareData.arrow) {
+                const { x, y } = computeResponse.middlewareData.arrow;
+                this.arrowPosition = {
+                    x,
+                    y,
+                };
+                Object.assign(this.arrow.style, {
+                    left: x != null ? `${x}px` : '',
+                    top: y != null ? `${y}px` : '',
+                });
+            }
+            this.tooltipPosition = {
+                x: computeResponse.x,
+                y: computeResponse.y,
+            };
+        }, {
+            ancestorResize: true,
+            ancestorScroll: true,
+            elementResize: true,
+        });
+    }
+    componentDidLoad() {
+        if (!this.inputElement) {
+            throw Error('Validation tooltip is only working with an direct input child.');
+        }
+        if (!this.formElement) {
+            throw Error('Validation tooltip is only working with an form element.');
+        }
+        this.formElement.addEventListener('submit', this.onSubmitBind);
+        this.inputElement.addEventListener('focus', this.onInputFocusBind);
+        this.observer = new MutationObserver(() => {
+            if (this.inputElement.classList.contains('is-invalid')) {
+                this.isInputValid = false;
+                this.validationChanged();
+            }
+        });
+        this.observer.observe(this.inputElement, {
+            childList: false,
+            subtree: false,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    onInputFocus() {
+        this.isInputValid = true;
+    }
+    onSubmit() {
+        if (this.formElement.classList.contains('needs-validation')) {
+            this.isInputValid = this.inputElement.validity.valid;
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.destroyAutoUpdate();
+        (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('submit', this.onSubmitBind);
+        (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('focus', this.onInputFocusBind);
+    }
+    validationChanged() {
+        if (!this.isInputValid) {
+            this.applyTooltipPosition();
+        }
+        else {
+            this.destroyAutoUpdate();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (hAsync(Host, { key: '4fb1bd884352a044ab9d4ea2eb70d2d80b331ebf' }, hAsync("slot", { key: '67df32333b98236630a4caf63776ea634129d1ae' }), hAsync("div", { key: '19cd5c7800c381a86b7135fb4538f3cad08abe46', role: "tooltip", style: {
+                display: 'none',
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                transform: `translate(${Math.round((_b = (_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0)}px,${Math.round((_d = (_c = this.tooltipPosition) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0)}px)`,
+            }, class: "validation-tooltip text-default" }, this.message, hAsync("slot", { key: 'f1ff77002cc733ef058755cc117747f1ba00a3ea', name: "tooltip-message" }), hAsync("div", { key: '5bcb70ba97cad112c1c5945d32cd52fa37784bb6', id: "arrow" }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "isInputValid": ["validationChanged"]
+    }; }
+    static get style() { return validationTooltipCss; }
+    static get cmpMeta() { return {
+        "$flags$": 265,
+        "$tagName$": "ix-validation-tooltip",
+        "$members$": {
+            "message": [1],
+            "placement": [1],
+            "suppressAutomaticPlacement": [4, "suppress-automatic-placement"],
+            "isInputValid": [32],
+            "tooltipPosition": [32],
+            "arrowPosition": [32]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const workflowStepCss = ":host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";
 
 class WorkflowStep {
@@ -33422,7 +33805,8 @@ class WorkflowStep {
                 break;
             case 'warning':
                 this.iconName = iconWarning;
-                this.iconColor = 'color-warning';
+                //TODO(IX-3400): Replace icon colors with proper CSS variables when available
+                this.iconColor = 'color-warning-text';
                 break;
             case 'error':
                 this.iconName = iconError;
@@ -33468,18 +33852,18 @@ class WorkflowStep {
     }
     render() {
         const icons = !this.customIconSlot ? (hAsync(Fragment, null, hAsync("ix-icon", { color: "color-1", name: this.status === 'warning' ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), hAsync("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() }))) : null;
-        return (hAsync(Host, { key: '5ca415dbf8980f334bcf59a76f781bb44bb3544e', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: '741e55477d0f93fe76320d58507ea35c577710f7', tabIndex: 0, class: {
+        return (hAsync(Host, { key: '488384edaa48299378abedcdff04034687550886', class: { 'host-vertical': this.vertical }, onClick: () => this.onStepClick() }, hAsync("div", { key: '2127d37a5062e645d50cc1b731c555b580ab2b16', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, hAsync("div", { key: '28cbecf59891231d2fa4316fa8c77c33229a9cc4', class: "wrapper" }, hAsync("div", { key: '60195eab00ad1e4be102347d850d41db89c901d9', class: {
+            } }, hAsync("div", { key: '26445756e35b3b15ab1d3a98a004f70300fe48e5', class: "wrapper" }, hAsync("div", { key: 'd1eaee49190a99111893a6c48f15b86c27fc2a7b', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), hAsync("div", { key: '9178761bb03e982655cd3e110c22a2aac800fd9c', class: "iconWrapper" }, icons, hAsync("slot", { key: '87288c358eeae6647e403d391708682221bc0ba1', name: "custom-icon" }))), hAsync("div", { key: '4cca9daa0e142fe68eeecc4fa814666275855969', class: "text" }, hAsync("slot", { key: '52f7a9c4abddd6676314765ceade4d546e7a3668' })))));
+            } }), hAsync("div", { key: '89857433644f037867ff1de38c359617ae2ea0f6', class: "iconWrapper" }, icons, hAsync("slot", { key: 'de995c4b059a3959574dbc9362e771e8fe0739a7', name: "custom-icon" }))), hAsync("div", { key: '73a9e22a56933af2b3ee054aeab92ff7a8b5165a', class: "text" }, hAsync("slot", { key: 'b5123599dbc97cea396640ea56910b24c701c319' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -33584,7 +33968,7 @@ class WorkflowSteps {
         this.updateSteps();
     }
     render() {
-        return (hAsync(Host, { key: '4b1deac309ae7e20f8666445a1f0b159d109ffdd' }, hAsync("div", { key: '09a2fabd46706d641330d20987e6da7b53a4031d', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: '265c86ef75c802e96f6364b95bd1d0621d4fd334' }))));
+        return (hAsync(Host, { key: '58f2b6c6dadb7f4bcef41463aeb7d0e7c7b78903' }, hAsync("div", { key: '186972fd1f22f0a99af92bda5643c5156097122c', class: { steps: true, vertical: this.vertical } }, hAsync("slot", { key: '3d5efbb4c9ff065c8838a08c9ca5c9e4ce0daefb' }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return workflowStepsCss; }
@@ -33656,6 +34040,7 @@ registerComponents([
   IconButton,
   IconToggleButton,
   Input,
+  InputGroup,
   IxActionCard,
   IxTypography,
   KeyValue,
@@ -33712,6 +34097,7 @@ registerComponents([
   Tree,
   TreeItem,
   Upload,
+  ValidationTooltip,
   WorkflowStep,
   WorkflowSteps,
 ]);