@siemens/ix 5.0.0 → 5.1.0

package/dist/collection/components/dropdown/dropdown-controller.js

@@ -6,136 +6,74 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import { pathIncludesTrigger as findTriggerInPath, getParentId, NestedOverlayStack, } from "../utils/nested-overlay";
 export function hasDropdownItemWrapperImplemented(item) {
     return (item !== null &&
         item.getDropdownItemElement !== undefined &&
         typeof item.getDropdownItemElement === 'function');
 }
 class DropdownController {
-    dropdowns = new Map();
-    submenuIds = {};
+    stack = new NestedOverlayStack({
+        blocksOutsideDismiss: (dropdown) => dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false,
+    }, (dropdown) => this.dismiss(dropdown));
     isWindowListenerActive = false;
     connected(dropdown) {
         if (!this.isWindowListenerActive) {
             this.addOverlayListeners();
         }
-        this.dropdowns.set(dropdown.getId(), dropdown);
+        this.stack.connect(dropdown);
         if (dropdown.discoverAllSubmenus) {
             this.discoverSubmenus();
         }
     }
     disconnected(dropdown) {
-        const id = dropdown.getId();
-        this.removeFromSubmenuIds(id);
-        this.dropdowns.delete(id);
+        this.stack.disconnect(dropdown);
     }
     removeFromSubmenuIds(id) {
-        this.dropdowns.forEach((dropdown) => {
-            const submenuIds = this.submenuIds[dropdown.getId()];
-            if (submenuIds) {
-                const index = submenuIds.indexOf(id);
-                if (index > -1) {
-                    submenuIds.splice(index, 1);
-                }
-            }
-        });
-        delete this.submenuIds[id];
+        this.stack.removeFromHierarchy(id);
     }
     getDropdownById(id) {
-        return this.dropdowns.get(id);
+        return this.stack.get(id);
     }
     discoverSubmenus() {
-        this.dropdowns.forEach((dropdown) => {
+        this.stack.forEach((dropdown) => {
             dropdown.discoverSubmenu();
         });
     }
     present(dropdown) {
         if (!dropdown.isPresent() && dropdown.willPresent?.()) {
-            this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
+            this.stack.setChildIds(dropdown.getId(), dropdown.getAssignedSubmenuIds());
             dropdown.present();
         }
     }
     dismissChildren(uid) {
-        const childIds = this.submenuIds[uid] || [];
-        for (const id of childIds) {
-            const dropdown = this.dropdowns.get(id);
-            if (dropdown) {
-                this.dismiss(dropdown);
-            }
-        }
+        this.stack.dismissChildren(uid);
     }
     dismiss(dropdown) {
         if (dropdown.isPresent() && dropdown.willDismiss?.()) {
-            this.dismissChildren(dropdown.getId());
+            this.stack.dismissChildren(dropdown.getId());
             dropdown.dismiss();
-            delete this.submenuIds[dropdown.getId()];
+            this.stack.deleteChildIdsEntry(dropdown.getId());
         }
     }
     dismissAll(ignoreBehaviorForIds = [], ignoreRelatedDropdowns = false) {
-        this.dropdowns.forEach((dropdown) => {
-            const preventClosing = dropdown.closeBehavior === 'inside' || dropdown.closeBehavior === false;
-            const shouldIgnore = ignoreBehaviorForIds.includes(dropdown.getId());
-            const path = this.buildComposedPath(dropdown.getId(), new Set());
-            if (ignoreBehaviorForIds.length > 0 && ignoreRelatedDropdowns) {
-                let skipRelatedDropdown = false;
-                ignoreBehaviorForIds.forEach((id) => {
-                    if (path.has(id)) {
-                        skipRelatedDropdown = true;
-                        return;
-                    }
-                });
-                if (!skipRelatedDropdown) {
-                    return;
-                }
-            }
-            if (!shouldIgnore && preventClosing) {
-                return;
-            }
-            this.dismiss(dropdown);
+        this.stack.dismissAll({
+            ignorePolicyForIds: ignoreBehaviorForIds,
+            ignoreRelatedInHierarchy: ignoreRelatedDropdowns,
         });
     }
     dismissOthers(uid) {
-        let path = this.buildComposedPath(uid, new Set());
-        path.add(uid);
-        this.dropdowns.forEach((dropdown) => {
-            if (dropdown.closeBehavior !== 'inside' &&
-                dropdown.closeBehavior !== false &&
-                !path.has(dropdown.getId())) {
-                this.dismiss(dropdown);
-            }
-        });
+        this.stack.dismissOthers(uid);
     }
     pathIncludesTrigger(eventTargets) {
-        for (let eventTarget of eventTargets) {
-            if (eventTarget instanceof HTMLElement) {
-                if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {
-                    return eventTarget;
-                }
-            }
-        }
-        return;
+        return findTriggerInPath(eventTargets, 'data-ix-dropdown-trigger');
     }
     getParentDropdownId(dropdownId) {
-        for (const ruleKey of Object.keys(this.submenuIds)) {
-            if (this.submenuIds[ruleKey].includes(dropdownId)) {
-                return ruleKey;
-            }
-        }
+        return getParentId(dropdownId, this.stack.getChildIdsByParent());
     }
     pathIncludesDropdown(eventTargets) {
         return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
     }
-    buildComposedPath(id, path) {
-        if (this.submenuIds[id]) {
-            path.add(id);
-        }
-        for (const ruleKey of Object.keys(this.submenuIds)) {
-            if (this.submenuIds[ruleKey].includes(id)) {
-                this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));
-            }
-        }
-        return path;
-    }
     addOverlayListeners() {
         this.isWindowListenerActive = true;
         window.addEventListener('click', (event) => {
@@ -147,7 +85,7 @@ class DropdownController {
         });
         window.addEventListener('keydown', (event) => {
             if (event.key === 'Escape') {
-                this.dismissAll([...this.dropdowns.keys()]);
+                this.dismissAll(this.stack.keys());
             }
         });
     }

package/dist/collection/components/dropdown/dropdown.js

@@ -678,7 +678,7 @@ export class Dropdown extends Mixin(...DefaultMixins) {
         else if (this.hostRole) {
             ariaAttributes['role'] = this.hostRole;
         }
-        return (h(Host, { key: 'e822f0f658533d267365bb69eed0223ecf9dc4eb', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
+        return (h(Host, { key: '9b0e9901b2f083f8bff9396e0e407f093425a927', ...ariaAttributes, "aria-modal": "true", "data-ix-dropdown": this.dropdownElementId, "data-ix-focus-trap": true, class: {
                 'dropdown-menu': true,
                 show: this.show,
                 // overflow handling not needed when using top-layer
@@ -1209,7 +1209,7 @@ export class Dropdown extends Mixin(...DefaultMixins) {
                 "mutable": false,
                 "complexType": {
                     "original": "FocusTrapOptions",
-                    "resolved": "undefined | { targetElement?: HTMLElement | MakeRef<any> | undefined; trapFocusInShadowDom?: boolean | undefined; excludeElements?: boolean | undefined; }",
+                    "resolved": "undefined | ({ targetElement?: HTMLElement | MakeRef<any> | undefined; trapFocusInShadowDom?: boolean | \"both\" | undefined; excludeElements?: boolean | undefined; listenOnDocument?: boolean | undefined; shouldDeferTabTrap?: ((trapHost: HTMLElement) => boolean) | undefined; })",
                     "references": {
                         "FocusTrapOptions": {
                             "location": "import",

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -8,7 +8,7 @@
  */
 import { iconChevronDownSmall, iconChevronUpSmall, } from "@siemens/ix-icons/icons";
 import { h, Host, Mixin, } from "@stencil/core";
-import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
+import { a11yBoolean, a11yHostAttributes, forceTabIndex, } from "../utils/a11y";
 import { makeRef } from "../utils/make-ref";
 import { DefaultMixins } from "../utils/internal/component";
 import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
@@ -151,16 +151,16 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
             this.hostContext?.datePicker ||
             this.hostContext?.splitButton ||
             this.hostContext?.tabs;
-        return (h(Host, { key: '59d07afdec3de70b4ff4b3c7b63fc1a8cdc6a1c1', class: {
+        return (h(Host, { key: '66fd74e40043daa08bb5a8c06e41bb64a11c8341', class: {
                 disabled: this.disabled,
                 'host-context-breadcrumb': !!this.hostContext?.breadcrumb,
                 'host-context-date-picker': !!this.hostContext?.datePicker,
                 'host-context-tabs': !!this.hostContext?.tabs,
-            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '092c941db7574a1ada117b855dfb62934d2e6a3e', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => (ref.tabIndex = -1), ariaLabelButton: this.ariaLabelDropdownButton ??
+            }, ref: this.dropdownAnchor, tabIndex: this.disabled ? -1 : 0, ...ariaAttributes }, h("div", { key: '06ba01710bbf5ce23e3eed2a28b9d32d5c0f4d55', class: "dropdown-button" }, this.label || this.label === null ? (h("ix-button", { ...commonProperties, class: 'internal-button', alignment: "start", ref: (ref) => forceTabIndex(ref, -1), ariaLabelButton: this.ariaLabelDropdownButton ??
                 (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("slot", { name: "button-label" }), !hideChevron && (h("ix-icon", { "aria-hidden": "true", name: this.dropdownShow
                 ? iconChevronUpSmall
-                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => (ref.tabIndex = -1), "aria-label": this.ariaLabelDropdownButton ??
-                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: '2d1d3f151c4aea4bc2bac6708c9554cacb3993bd', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
+                : iconChevronDownSmall, size: "24" }))))) : (h("div", null, h("ix-icon-button", { ...commonProperties, icon: this.icon, ref: (ref) => forceTabIndex(ref, -1), "aria-label": this.ariaLabelDropdownButton ??
+                (this.dropdownShow ? 'Close dropdown' : 'Open dropdown') }), !hideChevron && this.getTriangle()))), h("ix-dropdown", { key: '14ade5a93e488c58f66e6b48d0073fd6c3dc1914', role: "menu", ref: this.dropdownRef, id: `dropdown-button-menu-${this.dropdownButtonId}`, "aria-labelledby": `dropdown-button-${this.dropdownButtonId}`, trigger: this.dropdownAnchor.waitForCurrent(), placement: this.placement, closeBehavior: this.closeBehavior, enableTopLayer: this.enableTopLayer, disableFocusTrap: true, focusCheckedItem: this.focusCheckedItem, onShowChanged: (event) => this.onDropdownShowChanged(event), onScroll: (event) => {
                 // Need to dispatch the event again to handle infinite scroll of ix-date-picker,
                 // as the scroll event does not bubble beyond the shadow root
                 const scrollEvent = new CustomEvent('scroll', {
@@ -169,7 +169,7 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                     detail: event.detail,
                 });
                 this.hostElement.dispatchEvent(scrollEvent);
-            } }, h("slot", { key: 'dc1d3c88cde3ec8d126d967c9248aa9046fd0bf7' }))));
+            } }, h("slot", { key: '2dc84d3ac4f9e004011acef979e5d4671170884c' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -13,7 +13,7 @@ export class DropdownHeader {
      */
     label;
     render() {
-        return (h(Host, { key: 'a37577958aebbbdec0ccbc7b445813311eb8e615' }, h("ix-typography", { key: '2c564a3e854b143cac4299f6886f95fda961de3e', class: 'category-text', format: 'h5' }, this.label)));
+        return (h(Host, { key: '44755533997a737c2767b5cf5b849ec5c18c0efa' }, h("ix-typography", { key: 'f94459f4fc66fc47d7fa22c88477d5041b7c6fb7', class: 'category-text', format: 'h5' }, this.label)));
     }
     static get is() { return "ix-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -86,7 +86,7 @@ export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, Focu
                 'aria-expanded': 'false',
             };
         }
-        return (h(Host, { key: '7eab5813bffdb69a55c339ef91acfaff1d075683', id: id, role: this.itemRole, "aria-disabled": a11yBoolean(this.disabled), "aria-label": this.hostElement.ariaLabel ?? this.ariaLabelButton, class: {
+        return (h(Host, { key: 'c3d7d2a14964fa2a609d5e028cdb14b802b02ada', id: id, role: this.itemRole, "aria-disabled": a11yBoolean(this.disabled), "aria-label": this.hostElement.ariaLabel ?? this.ariaLabelButton, class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
@@ -101,11 +101,11 @@ export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, Focu
                 if (!this.disabled && (event.key === 'Enter' || event.key === ' ')) {
                     this.emitItemClick();
                 }
-            }, ...submenuAriaAttributes }, h("div", { key: 'd3027e3165c38811222d4a82afae6a8f4a85ee29', class: {
+            }, ...submenuAriaAttributes }, h("div", { key: '016ddf6f6b319b4d9e02541c95f02d76088cdbb6', class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
                 disabled: this.disabled,
-            } }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'bc618870c35cf9f4c8da8dbf8e6148c9cdd6ec22', class: "dropdown-item-text" }, this.label, h("slot", { key: '6c65471535c990245af19722ed847cd6b534d419' })), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
+            } }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { "aria-hidden": "true", class: "checkmark", name: iconSingleCheck, size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon, "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '81ae34e7f76381ba84af73893c9882cedd958149', class: "dropdown-item-text" }, this.label, h("slot", { key: '9482ebc515d9de96a48bd747ab3293f1c1640a11' })), this.isSubMenu ? (h("ix-icon", { name: iconChevronRightSmall, class: 'submenu-icon' })) : null)));
     }
     static get is() { return "ix-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class DropdownQuickActions {
     render() {
-        return (h(Host, { key: '74f8179be360cbd202653b2c2ffb90995585af2c' }, h("slot", { key: '6488ba330c7de30385c8c8aff4812e6e5a083727' })));
+        return (h(Host, { key: '85a2acb610b6529f3c65b1eadc369aa39b41d9fa' }, h("slot", { key: '329e45898b1c5791e94c08bbc4c5cc8176b9e71b' })));
     }
     static get is() { return "ix-dropdown-quick-actions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty-state/empty-state.js

@@ -39,7 +39,7 @@ export class EmptyState {
      */
     actionClick;
     render() {
-        return (h(Host, { key: 'adf16abae74345137572b185cece21d3b46704c0', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: '912facbaa62920252a02b25a75e652b09f4e6223', class: "emptyState__icon" }, h("ix-icon", { key: 'e2610288bbaecd22e3629c426d7dc0c368595d60', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '8e766926c0f195cb57c9cbb6f7973423f34772c1', class: "emptyState__content" }, h("div", { key: 'f5e38b8caa78599a0a0773ea37f70e7d63f2e6ac', class: "content__label" }, h("ix-typography", { key: '810f3e2416728b490f086e666622ce592ae88c0f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: '65c9de4afdcb05be4d09c197c56ee68c24c7008f', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: '64849673d5740eb98919e8b3a24e2b056b76c1ca', class: "content__action" }, h("ix-button", { key: '5ac0d4acfbad3b29c81c42f21b153ebe13902486', onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '788853c0170edd6124ee95f6f37023c3de53f7b4', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { key: 'fa915d69e9ff30ad13f5edbb70136d16ea0766f4', class: "emptyState__icon" }, h("ix-icon", { key: 'f9b951b527e138dc58c4bf1b2abd46e3ebf570fa', name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text", "aria-label": this.ariaLabelEmptyStateIcon }))), h("div", { key: '4d531a294a9bcd8281c37ac497a576ab86e6192c', class: "emptyState__content" }, h("div", { key: '1cc40c9096599b31580cea0edf449a146c8ff768', class: "content__label" }, h("ix-typography", { key: 'd708fc4fb0306b5ec54efb44f003c4792e4eb75f', format: this.layout === 'large' ? 'h3' : 'body' }, this.header), this.subHeader && (h("div", { key: 'a08cf6802626709bba74186fd0e5f0056da20981', class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { key: 'ff17b01d8fffe6ba98d5a5a0a91985972b8368e8', class: "content__action" }, h("ix-button", { key: 'c78f1ddb54915618c6e2783e025dd608e6c2152a', onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get is() { return "ix-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list/event-list.js

@@ -129,11 +129,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: 'f602ce959b9c53486cff76b5b255b4d6cb375d42', class: {
+        return (h(Host, { key: 'a8161bcd519a0ea5d700db37a1d265d9bf742080', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("div", { key: 'c629a73a1bbf45841613d21cc2f532e24a610622', role: "list" }, h("slot", { key: 'b5c88152a26d6f1c576e0e47106abdaf739e1f53' }))));
+            } }, h("div", { key: '121bef25c280fea75efaf170b49c0752f00b9123', role: "list" }, h("slot", { key: 'bfb322b874b47d0beb33813d0b352d08b59e9437' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list-item/event-list-item.js

@@ -47,17 +47,17 @@ export class EventListItem {
         let color = this.itemColor?.startsWith('--theme')
             ? `var(${this.itemColor})`
             : `var(--theme-${this.itemColor})`;
-        return (h(Host, { key: 'e89ec7112eae8f95be0f4b6c8bebe08849c7eeee', class: {
+        return (h(Host, { key: '62246c6ecf60106320d54a3cc214b359cd654dc3', class: {
                 disabled: this.disabled,
                 [`event-list-item-${this.variant}`]: true,
-            } }, h("div", { key: 'b13673e69dd5af2704188bace4730f22ffdbf365', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
+            } }, h("div", { key: '7c0055e2e67b53d02d5b9cc5b6e769aea1913841', role: "listitem", "aria-disabled": a11yBoolean(this.disabled), class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: 'c8d2a9d3ab952ae71d3d6332053351e2767c1684', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: 'b05eb8e2f3b0009c8d3d58a3c27bc0f5b447ef26', class: `indicator ${!this.itemColor ? 'indicator-empty' : ''}`, style: {
                 'background-color': this.itemColor ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '8907cb8546dd65841019a429f902a8f52001da1d', class: "event-list-item-container" }, h("div", { key: 'ab647037d3f2f42f9b2617911b4a57914bf54061', class: "event-content" }, h("slot", { key: '1f02bd2896c932efe66d79219ee9b62e170081b8' })), this.chevron && (h("ix-icon", { key: 'd70b40c9fd33e2adaa6f4069d54f57ff1a8db500', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
+            } }), h("div", { key: 'e64d403714e4627338cc68eda2adacedc8960c2b', class: "event-list-item-container" }, h("div", { key: 'fca0440ca4783be7c45ac7b9f52574241e7eca49', class: "event-content" }, h("slot", { key: '1bcdd9678b8e47904f06474a8b507c3eb24c98c8' })), this.chevron && (h("ix-icon", { key: '8e71379a54c18b1e491e899da196387a5ab2a208', name: iconChevronRight, size: "16", class: "chevron-icon", "aria-hidden": "true" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expanding-search/expanding-search.js

@@ -93,21 +93,21 @@ export class ExpandingSearch {
         this.valueChange.emit(this.value);
     }
     render() {
-        return (h(Host, { key: '5e12783359b85b420e571e3ed4ad32bd1af9a568', class: {
+        return (h(Host, { key: 'f954d610f8eee9f8864262567d501f7f53596b14', class: {
                 expanded: this.expanded,
                 'right-position': this.expanded,
                 fullWidth: this.fullWidth,
-            } }, h("ix-icon-button", { key: '1ede2abeb4ecb328196930ae921f7627a5981536', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
+            } }, h("ix-icon-button", { key: '760a79a6faced78eb06603357b83e460991926fa', size: this.expanded ? '16' : '24', icon: this.icon ?? iconSearch, variant: this.expanded ? 'tertiary' : this.variant, "data-testid": "button", onClick: () => this.expandInput(), tabindex: this.expanded ? -1 : 0, color: this.hasFocus ? 'input-search-icon--color--focus' : undefined, class: {
                 'btn-search': true,
                 'btn-search--expanded': this.expanded,
             }, "aria-label": this.ariaLabelSearchIconButton ??
-                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '8ca9b3b24c7cbf12f236680626c7d7a3c21121a1', class: {
+                (this.expanded ? 'Close search' : 'Open search') }), h("div", { key: '2f29b9e24e4875fa907226a97fe2c20aedbf5b73', class: {
                 expanded: this.expanded,
                 fullWidth: this.fullWidth,
                 collapsed: !this.expanded,
                 'disable-pointer': !this.expanded,
                 'input-container': true,
-            }, "data-testid": "input-wrapper" }, h("input", { key: 'eb0f9a2e596c1f045a865becd0dce3ac478ecd06', class: {
+            }, "data-testid": "input-wrapper" }, h("input", { key: 'ff934d36786c9f6be7b235773309c32ba6ed1842', class: {
                 'ix-form-control': true,
                 input: this.expanded,
                 'disable-pointer': !this.expanded,

package/dist/collection/components/field-label/field-label.js

@@ -134,10 +134,10 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: 'ad08b7a792dd213a1aca7987b8ab1257a4440c2e', onClick: () => this.focusOnClick(), class: {
+        return (h(Host, { key: 'ae3bda5074f387a20d9d464a7237584bf9cd185f', onClick: () => this.focusOnClick(), class: {
                 'text-overflow-wrap': this.textOverflow === 'wrap',
                 'text-overflow-no-wrap': this.textOverflow === 'no-wrap',
-            } }, h("label", { key: 'e26ab143b023ec5ab6e06391ee3fedd51bf71270', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: 'd3b6dba658be6505526efb3041b96799808531e5', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '4afe1e2663314280cec3de64436ebf94e9921524' }), this.required && h("span", { key: '28e1138de051afea91cf40226d5c3d315e331f8b' }, "*")))));
+            } }, h("label", { key: '1813ab2ed336d585667522a9e01f30891da1c794', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: '0af94d2c01fbaf5450af1d7a5beeb591401dd4f3', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '4eff5cfac2491d6a716b8def24671422c5796a15' }), this.required && h("span", { key: 'd466918f68a18d7474b607827649baf67caf0a01' }, "*")))));
     }
     static get is() { return "ix-field-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/field-wrapper/field-wrapper.js

@@ -155,9 +155,9 @@ export class FieldWrapper extends Mixin(...DefaultMixins, ComponentIdMixin) {
                 'aria-live': 'polite',
             };
         }
-        return (h(Host, { key: 'a4f662cd63da96de568d5e07e0f6a45c94bcd584', ...additionalAriaAttributes }, this.label && (h("div", { key: '1346c736edc70179f2059775f374291769a421f7', class: "field-top" }, h("ix-field-label", { key: '618c08136bad64dad9db510093823d733515a73a', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), h("div", { key: '2828a6fb240b15aea2cc70bf7ddef77db0075fcb', class: {
+        return (h(Host, { key: '25255aed5f9b7fb77fdeb61473bf2b75a262ffba', ...additionalAriaAttributes }, this.label && (h("div", { key: 'bb885771ecfcf509a62bbe6f7ba1a7d518f17c78', class: "field-top" }, h("ix-field-label", { key: '916a96ca521dd4e9dd7f55e9f3bd19cc947ba123', required: this.required, controlRef: this.controlRef, isInvalid: this.isInvalid, ariaHidden: true }, this.label))), h("div", { key: 'ce2d746aea87f49611ef413f49fbb52c59ab468a', class: {
                 'slot-wrapper': true,
-            }, ref: this.slotRef }, h("slot", { key: 'd778378932be23d0a791b3669960fa649a4ec5c1' })), h("div", { key: 'ed43976cd734aa9875e2c93e91d2eefd26335c37', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, { key: '16431fc816256f1725b79724cd8f6074859238a8', ...textOptions }), h("div", { key: 'add4cb3093d060e453ceedf72a77cdbe7d7384fa', class: "bottom-right" }, h("slot", { key: 'db90b01c037ea3821cfa651e2e1b37c2d5be5056', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: '5e26bbe7f3a8915b7066701158a5db6eb83466f6', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, { key: '8ba126d47085141f329a2c691c44bfb5a61f099a', ...textOptions })))));
+            }, ref: this.slotRef }, h("slot", { key: '2bb54f35cc1ff930918dc211e2018875ce105d7b' })), h("div", { key: 'c427f40269dd19c40c413d0794cbf0096a7f8cd1', class: 'field-bottom' }, !this.showTextAsTooltip && h(HelperText, { key: '76100d6cd0e6c22eeca8de06b7aa7ae59ab9ea33', ...textOptions }), h("div", { key: 'b9d5688b85687792c491d8cecd9411dbb5bddb0e', class: "bottom-right" }, h("slot", { key: '95102f11d6b5c82d67be1c7c104eadf56bcb8112', name: "bottom-right" }))), this.showTextAsTooltip === true && hasAnyText(textOptions) && (h("ix-tooltip", { key: 'c484b0edcd735b2d9155819ad9eb8d98c45e2633', for: this.slotRef.waitForCurrent(), showDelay: 500, placement: "bottom" }, h(HelperText, { key: '7d0ea7c1cd80af012492984d7ad2b5399ee50c4d', ...textOptions })))));
     }
     static get is() { return "ix-field-wrapper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/filter-chip/filter-chip.css

@@ -112,6 +112,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.5rem;
+  min-width: 0;
 }
 :host .slot-container :host-context(.disabled) {
   background-color: var(--theme-color-ghost);
@@ -133,7 +134,8 @@
   cursor: default;
 }
 
-:host(.readonly) {
+:host(.readonly),
+:host(.hide-close-button) {
   padding-right: 0.5rem;
 }
 

package/dist/collection/components/filter-chip/filter-chip.js

@@ -18,6 +18,12 @@ export class FilterChip {
      * If true the filter chip will be in readonly mode
      */
     readonly = false;
+    /**
+     * If true the close button will not be rendered.
+     * Primarily used for overflow chip.
+     *
+     */
+    hideCloseButton = false;
     /**
      * ARIA label for the close icon button
      * Will be set as aria-label on the nested HTML button element
@@ -33,7 +39,11 @@ export class FilterChip {
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: '9841430ba413f80306e58e57a00171a5c25dcb30', class: { disabled: this.disabled, readonly: this.readonly }, title: this.hostElement.textContent }, h("div", { key: '35110f7c7d5e10b2f0369b0662b7c09f476f2808', class: "slot-container" }, h("slot", { key: '6ab57ea45ff84f87f4cc569c455fb896336c8392' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
+        return (h(Host, { key: '886715c810d5084905082b8eba5d0e62dabe8b32', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                'hide-close-button': this.hideCloseButton,
+            }, title: this.hostElement.textContent }, h("div", { key: '531598188ad4a407b9b8c153dcfa9fd7260218c9', class: "slot-container" }, h("slot", { key: '530355ee81b106b9182a62fc8e3432420c0a6fd1' })), !this.disabled && !this.readonly && !this.hideCloseButton ? (h("ix-icon-button", { variant: "tertiary", oval: true, icon: iconCloseSmall, size: "16", disabled: this.disabled, onClick: (event) => {
                 this.onCloseClick(event);
             }, onKeyDown: (event) => {
                 switch (event.key) {
@@ -103,6 +113,26 @@ export class FilterChip {
                 "attribute": "readonly",
                 "defaultValue": "false"
             },
+            "hideCloseButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true the close button will not be rendered.\nPrimarily used for overflow chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-close-button",
+                "defaultValue": "false"
+            },
             "ariaLabelCloseIconButton": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/flip-tile/flip-tile.js

@@ -129,7 +129,7 @@ export class FlipTile {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (h(Host, { key: '8f44b0e813e8718e598a5bbf86e5243cae9d9d84', class: {
+        return (h(Host, { key: '98de348c3952a6ae9cf13fb4fe1dc515ad6b0504', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -138,10 +138,10 @@ export class FlipTile {
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, h("div", { key: '7b5f1426b1a127c5b6ca9905275b18cc3837851b', class: "flip-tile-container" }, h("div", { key: '00a07a72271616f23203df889aba1f0111cdf9fa', class: "flip-tile-header" }, h("div", { key: 'b868adc9e3dc6fa793184c3833b651022a25857e', class: "header-slot-container text-l-title" }, h("slot", { key: '0fa28f51cb1748ee2913ed1cf331e5bbd3b5cf7d', name: "header" })), h("ix-icon-button", { key: '14a236c0fa509ea4d0964506b8eaef8228217ae1', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '5c583cac2e7f99fb047fd367dfc462fcef292bdc', class: "content-container" }, h("slot", { key: '936e1e1cd58d95c492a827c0277ceed18994820d' })), h("div", { key: 'e5c42a2f7e499a83cbdbedf75283d7d4eea7e14b', class: {
+            } }, h("div", { key: '7ae391851db6469b7821137851ac0c49056779bf', class: "flip-tile-container" }, h("div", { key: '573dd82522af32eb4775a7f4d0cdec162f03d14b', class: "flip-tile-header" }, h("div", { key: 'd5cc22f464ec436bdfb52861d05035759f91c37c', class: "header-slot-container text-l-title" }, h("slot", { key: '54037b21d669285e02b5a7b0d2e112fb6bf84f3e', name: "header" })), h("ix-icon-button", { key: '9360ba83ed398c0409b04a5e9777d6d83f2f0655', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '4a2b1fcb2849622f91b4d29132c62160975be619', class: "content-container" }, h("slot", { key: 'c239f64f477e7fe17e1f9747031185b073481697' })), h("div", { key: '6ef464693fc873180707a93d886f34710624e32f', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, h("slot", { key: '0ad67ace7ff3883a84208142112ceb5a98a5686c', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, h("slot", { key: '501d0bf61543a291236d9e7983f541aeb980a8ae', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
     }
     static get is() { return "ix-flip-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/flip-tile-content/flip-tile-content.js

@@ -15,7 +15,7 @@ export class FlipTileContent {
      */
     contentVisible = false;
     render() {
-        return h(Host, { key: 'd1b72dd5673729ccf22fba396a0f9b903098ba82' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: 'c080d25f839e6f4af482ff701ce74df53ac66b7a' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group-context-menu.js

@@ -37,7 +37,7 @@ export class GroupContextMenu {
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '3440dd5a4f2bab1b2c3448f5fcec00770892ab01' }, h("ix-icon-button", { key: 'ba6c8170bed28cb7060dc70fa457dfa41ec19e6c', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '217eae86a7748599fa9a5cab3e76fa27710e6c66', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: '989f86b83f27514bcb555c8d022b092a1a632505' }, h("ix-icon-button", { key: '55876dc92e513d29676529ea431d3ae9768e72fc', class: { hide: !this.showContextMenu }, size: "24", variant: "subtle-tertiary", icon: iconContextMenu }), h("slot", { key: '57613b3108ad01c134ae929fe00f432ffd2c8324', onSlotchange: () => this.onSlotChange() })));
     }
     static get is() { return "ix-group-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/group/group.js

@@ -160,26 +160,26 @@ export class Group {
         }
     }
     render() {
-        return (h(Host, { key: '27d311321d22d9017cb1b5ef1c8111ab6c64287a' }, h("div", { key: '12af89da94df847b308aeab2ae17b08706b30186', class: {
+        return (h(Host, { key: 'd065bb1d37279005a3502e5261d0c6b0592ea47a' }, h("div", { key: '7d149368be2f9d72f9384f5969f269540161444d', class: {
                 'group-header': true,
                 expand: this.expanded,
                 selected: this.selected,
-            }, tabindex: "0" }, h("div", { key: 'c591e59143d43a8fae481c7453eaf41340bf57bf', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '84d39c3f502d4a41e1d84f373d5da964bd5986d3', class: {
+            }, tabindex: "0" }, h("div", { key: 'eaaf6a687c9553f7985e63e5459b4823f9920262', class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { key: '67b5527fcef1355812d942ee302809597307f476', class: {
                 'group-header-selection-indicator': true,
                 'group-header-selection-indicator-item-selected': this.itemSelected,
-            } }), h("div", { key: '5f297db1492b8b30a00c59658b9a920a2c353500', class: "btn-expand-header" }, h("ix-icon", { key: '51b5c4f48401a22057af6b4ae3e1c461a51e8374', "data-testid": "expand-collapsed-icon", class: {
+            } }), h("div", { key: '04531e1e6079ca2cd9b9e061af7b7cff39e56ad5', class: "btn-expand-header" }, h("ix-icon", { key: '8e269b8a32af709f46dadc5bf7819f5339702eae', "data-testid": "expand-collapsed-icon", class: {
                 hidden: !this.showExpandCollapsedIcon,
-            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'ba9fbc5a70927476e1ead817e64862fac6c97767', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: 'f760a427586603d9a186d35b0d42abb4b1ab460a', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: 'b63443b4daf82bbd185f11965eb9ff4b54932f2b' }, h("slot", { key: '196393e4ae905b26075f4dd99008f71e69f5cdc5', name: "dropdown" })))), h("div", { key: 'd7114d36a07d2fe1dd9f71b0502e3cddb9eef8dc', class: {
+            }, name: this.expanded ? iconChevronUpSmall : iconChevronDownSmall, onClick: (event) => this.onExpandClick(event) })), h("div", { key: 'e40416a2c68b331eed7686259749ad0387a01bc9', class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { key: '2c04121cdafcb93459ccc11016ed1c4182662a6d', name: "header" }))), this.hasDropdown && (h("ix-group-context-menu", { key: '7e27de8765e03aa98e70f1b30c44473a95258a0e' }, h("slot", { key: '472f20892591d436232c1db7e396b74b68742027', name: "dropdown" })))), h("div", { key: 'c64f18662e441d11be9ac49dde219359dd65f6c0', class: {
                 'group-content': true,
-            } }, h("div", { key: 'f3ab7295ac0b6e7abf49f76f6b77cd35a234b8cd', style: {
+            } }, h("div", { key: '07da1f3ed9334a4b89833b2d9b284b967d3d8c4d', style: {
                 display: this.expanded ? 'contents' : 'none',
-            } }, h("slot", { key: '765ca882c56cb4153e97bc84c41c7a23fae1f02a', onSlotchange: () => {
+            } }, h("slot", { key: '3c8291ab052f4a89122de4e8ca35671c814636d1', onSlotchange: () => {
                 const slot = this.hostElement.shadowRoot?.querySelector('slot:not([name])');
                 this.showExpandCollapsedIcon = hasSlottedElements(slot);
-            } }), h("ix-group-item", { key: '066f81aefb6cc93a2289640c5b7b076be7752e47', class: {
+            } }), h("ix-group-item", { key: 'a1ffdc4437fc26db17b9eae31b522422967cb2c1', class: {
                 footer: true,
                 'footer-visible': this.footerVisible,
-            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '4cd4ad5915dc00a1a723e83d515777343d2033bc', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
+            }, groupFooter: true, suppressSelection: true }, h("slot", { key: '25713f3beb605c9021d4b9a2ac51c3f02bec96db', name: "footer", onSlotchange: () => this.onSlotChange() }))))));
     }
     static get is() { return "ix-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/helper-text/helper-text.js

@@ -67,7 +67,7 @@ export class HelperText {
         this.validationResults = checkFieldClasses(forElement);
     }
     render() {
-        return (h(Host, { key: 'e86aee742388bd82aab6cbf8e9847cc720636a4b' }, h(HelperTextUtil, { key: '310510c551f0595d975a0b4690a26a4d4ee53fff', helperText: this.helperText,
+        return (h(Host, { key: 'a38073cf4f6da8c8e91927cc14e194243c9f8acf' }, h(HelperTextUtil, { key: 'aad82c0c2704ac0b491c3f53e0faa52033706318', helperText: this.helperText,
             invalidText: this.invalidText,
             validText: this.validText,
             infoText: this.infoText,

package/dist/collection/components/icon-button/icon-button.css

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;

package/dist/collection/components/icon-button/icon-button.js

@@ -102,10 +102,10 @@ export class IconButton extends Mixin(...DefaultMixins, InheritAriaAttributesMix
                 ? this.hostElement.tabIndex
                 : undefined,
         };
-        return (h(Host, { key: 'b1ad69ccd94cf290a88db0d5f9da8c5992bba336', class: {
+        return (h(Host, { key: '2e94f45af8e808b3e503ad20704bc3953b923316', class: {
                 ...this.getIconSizeClass(),
                 disabled: this.disabled || this.loading,
-            }, tabIndex: this.disabled ? -1 : 0 }, h(BaseIconButton, { key: '928bd44422d72964601e7311a4faa257df34e91b', ...baseButtonProps })));
+            }, tabIndex: this.disabled ? -1 : 0 }, h(BaseIconButton, { key: 'c1a1a4e8bf780bc8bfb33c039bebda99b15cacfb', ...baseButtonProps })));
     }
     static get is() { return "ix-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon-toggle-button/icon-toggle-button.css

@@ -155,7 +155,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;
@@ -266,7 +266,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  padding: 0 0.5rem;
+  padding: var(--ix-button-padding, 0 0.5rem);
 }
 :host ix-spinner {
   margin-right: 0.25rem;