@siemens/ix 5.0.0 → 5.1.1

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -246,9 +246,9 @@ export class DatetimePicker {
     }
     render() {
         const { minTime, maxTime } = this.getEffectiveTimeConstraints();
-        return (h(Host, { key: '4a7b3d01b9001bd34b6c8cf357d5de34f7b326c7' }, h("ix-date-time-card", { key: 'c54fffa1efadf7fedf270a5d29a241cb244ae35b', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '3d5496ac783718cec38643defe04ea9cf296714a', class: "no-padding" }, h("ix-row", { key: '61b4864d048b3c0e79218d892a2810a7673f4c75', class: "row-separator" }, h("ix-col", { key: '92844a4c2caa6837c50e29207495a5f51c236056', class: "col-separator" }, h("ix-date-picker", { key: '88611176a321e3cd369e2b4b6e4c594806c299ec', 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, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'acc965fc6992fb5afd79e9174cbc1ed30f09fb22' }, h("ix-time-picker", { key: '042cd14c98a3f7ea2c330ef55889f4cfc6c7017c', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
-            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'f625f88c84a0d294fe94836b11e46f17018c4228', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: 'b4f1d140c91a3f2a46724fc9a5fcb601c263f8af', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
+        return (h(Host, { key: '0eb6ec0e18a9794f023b8dd6dee89640b9a0a948' }, h("ix-date-time-card", { key: 'e45f91528b04c803324da4af217ebf7eda31dba0', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '4cade86af3e6a77563e528d92d52c1d86079d0f9', class: "no-padding" }, h("ix-row", { key: '657adbd57b8334398f171b5aebf6e63cbc03b2af', class: "row-separator" }, h("ix-col", { key: '02d019f2a71c6c1c8cfa716a486acd7ed844c622', class: "col-separator" }, h("ix-date-picker", { key: 'efb6483f6528cec9660913bca6b51d907c59dd3f', 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, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'e0884bbeabca263427ed98d26febb94b9d90cf91' }, h("ix-time-picker", { key: '9b9088f1ed6568028ab41a7f9732e537a1438359', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'ad8dacb09da1525749481373191078dc1b85ba60', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '1124f92c6f59f14c74385f587f665537bd6cb9e2', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Divider {
     render() {
-        return h(Host, { key: '2353ffd7afdc669190af6a4ee6f405c38ac117de' });
+        return h(Host, { key: 'eb2dfcf5c516b8b1469282e06edf116e63c7d66a' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,6 +19,9 @@ import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 import { dropdownController, hasDropdownItemWrapperImplemented, } from "./dropdown-controller";
 import { configureKeyboardInteraction } from "./dropdown-focus";
 let sequenceId = 0;
+/**
+ * @slot default - Dropdown items.
+ */
 export class Dropdown extends Mixin(...DefaultMixins) {
     constructor() {
         super();
@@ -678,7 +681,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: '316324b74a3654414f8ae385cec8a0fb7b5d2906', ...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 +1212,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,12 +8,16 @@
  */
 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";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { closestPassShadow } from "../utils/shadow-dom";
+/**
+ * @slot button-label - Custom content displayed next to the button label.
+ * @slot default - Dropdown items.
+ */
 export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
         super();
@@ -151,16 +155,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: 'e25fa295fcfc662bcbd510ef9fa831d505901eb1', 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: '72aa176d5558297cbfd2bebd09a8f9826860e4e9', 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: 'bbb10a374801f0800f5386700957646072d01fb3', 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 +173,7 @@ export class DropdownButton extends Mixin(...DefaultMixins, ComponentIdMixin, Ar
                     detail: event.detail,
                 });
                 this.hostElement.dispatchEvent(scrollEvent);
-            } }, h("slot", { key: 'dc1d3c88cde3ec8d126d967c9248aa9046fd0bf7' }))));
+            } }, h("slot", { key: 'a41e74d2a2db2b1255485923390d4fbf14504504' }))));
     }
     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

@@ -13,6 +13,9 @@ import { IX_FOCUS_VISIBLE } from "../utils/focus/focus-utilities";
 import { DefaultMixins } from "../utils/internal/component";
 import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { FocusVisibleMixin } from "../utils/internal/mixins/focus-visible.mixin";
+/**
+ * @slot default - Dropdown item content.
+ */
 export class DropdownItem extends Mixin(...DefaultMixins, ComponentIdMixin, FocusVisibleMixin) {
     constructor() {
         super();
@@ -86,7 +89,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: 'e4f4f504f7b7516fb07ad1ce36b7240717ad636a', 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 +104,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: '37d1e888552d1df2bc11f5770ed6139017c9ec7c', 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: '506fac0929e4ddf30ae8691d0213d8404a94ee8b', class: "dropdown-item-text" }, this.label, h("slot", { key: '38bafe3f689f41609c79bca2f39a47a2064338af' })), 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

@@ -7,9 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Quick action items.
+ */
 export class DropdownQuickActions {
     render() {
-        return (h(Host, { key: '74f8179be360cbd202653b2c2ffb90995585af2c' }, h("slot", { key: '6488ba330c7de30385c8c8aff4812e6e5a083727' })));
+        return (h(Host, { key: 'ef50b956354184faad378cf100ec726ee8d13601' }, h("slot", { key: 'cbec7dfddb53099be04c258c1f2cd68394f3e8b7' })));
     }
     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

@@ -10,6 +10,9 @@ import { h, Host } from "@stencil/core";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { convertToRemString } from "../utils/rwd.util";
 import { animate } from "animejs";
+/**
+ * @slot default - Event list items.
+ */
 export class EventList {
     mutationObserver = createMutationObserver(this.onMutation.bind(this));
     static fadeOutDuration = 50;
@@ -129,11 +132,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: 'f602ce959b9c53486cff76b5b255b4d6cb375d42', class: {
+        return (h(Host, { key: '658281cbf0ee3fad909a2385437d1911c3c6f75f', 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: '01328d11ed8a045241f4382d1ce3ec1a162190f2', role: "list" }, h("slot", { key: '8d7a0a467ca57d359cbd05b0f5f3f4f5e11a4e79' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,6 +9,9 @@
 import { iconChevronRight } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
+/**
+ * @slot default - Event list item content.
+ */
 export class EventListItem {
     /**
      * Variant of the event list item
@@ -47,17 +50,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: 'de697815028a7bb6199cba49916a2454536785ee', 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: '30b7be1c6c9823fb6def0ca88f2ec9debe578b34', 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: 'c6991076039f3fb8fb0656a63131fa63ea5bb7c5', 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: '2d7489f2c00d4f43b96b42bd2cd194faf82c9657', class: "event-list-item-container" }, h("div", { key: '3a818bd2553d0bf5c1e0245d440edb232c592944', class: "event-content" }, h("slot", { key: '7eb036f7acb004910d54457ff6ed2f56708448cc' })), this.chevron && (h("ix-icon", { key: 'af6703cbc3fab72ad5158cf72beab6a4d5c0c6d1', 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

@@ -11,6 +11,9 @@ import { a11yHostAttributes } from "../utils/a11y";
 import { createClassMutationObserver, isIxInputFieldComponent, } from "../utils/input";
 import { makeRef } from "../utils/make-ref";
 import { closestPassShadow } from "../utils/shadow-dom";
+/**
+ * @slot default - Field label content.
+ */
 export class FormFieldLabel {
     hostElement;
     /**
@@ -134,10 +137,10 @@ export class FormFieldLabel {
         }
     }
     render() {
-        return (h(Host, { key: 'ad08b7a792dd213a1aca7987b8ab1257a4440c2e', onClick: () => this.focusOnClick(), class: {
+        return (h(Host, { key: '0fdcf56a50a448dd0d58e70d4389105d79ace1d3', 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: '985b6494c3ecc3cbe3071a352dd375a785366ea7', htmlFor: this.htmlFor, ...this.a11yAttributes, ref: this.labelRef }, h("ix-typography", { key: '1fae47aef80983c02272b73b5d2de4969aa87daf', textColor: this.isInvalid ? 'alarm' : 'soft', format: "label" }, h("slot", { key: '706a5c9687ac5fea48d9efda67b660ed78b999df' }), this.required && h("span", { key: 'fa1da16ab40a270019534c26b17e8771f478eb4e' }, "*")))));
     }
     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

@@ -8,6 +8,9 @@
  */
 import { iconCloseSmall } from "@siemens/ix-icons/icons";
 import { h, Host, } from "@stencil/core";
+/**
+ * @slot default - Filter chip label.
+ */
 export class FilterChip {
     hostElement;
     /**
@@ -18,6 +21,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 +42,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: '7b1d7b5eaa69878f972a32ae012dd3e9a96c4dca', class: {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                'hide-close-button': this.hideCloseButton,
+            }, title: this.hostElement.textContent }, h("div", { key: 'c678ad613f23f633a38d002f8d9aa74e67473384', class: "slot-container" }, h("slot", { key: '4a91b222a51991df3baaaa328b7e991ad80732ae' })), !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 +116,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

@@ -12,6 +12,11 @@ import { animate } from "animejs";
 import Animation from "../utils/animation";
 import { createMutationObserver } from "../utils/mutation-observer";
 import { hasSlottedElements } from "../utils/shadow-dom";
+/**
+ * @slot header - Content displayed in the tile header.
+ * @slot default - Flip tile pages.
+ * @slot footer - Content displayed in the tile footer.
+ */
 export class FlipTile {
     hostElement;
     /**
@@ -129,7 +134,7 @@ export class FlipTile {
         }, 2 * Animation.defaultTime);
     }
     render() {
-        return (h(Host, { key: '8f44b0e813e8718e598a5bbf86e5243cae9d9d84', class: {
+        return (h(Host, { key: '99644a121b896cbe3db0f9bcf87a2f1292dce9c8', class: {
                 [`flip-tile-variant-${this.variant}`]: true,
             }, style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
@@ -138,10 +143,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: 'e5b18eb890b7b07fe65ebe7d7bcee732cb3ca438', class: "flip-tile-container" }, h("div", { key: 'a53fbd9be6391f546c60e55305f46206c2955013', class: "flip-tile-header" }, h("div", { key: '30b5aa980a15c0f11a143bf6c4acafb9f4bc22b5', class: "header-slot-container text-l-title" }, h("slot", { key: '3262a92c1c681c2c2565f4d508b1c91a6440f0ac', name: "header" })), h("ix-icon-button", { key: '3b2840daaef5df2d8ba5c1aae57d9746fec04711', icon: iconEye, variant: "tertiary", onClick: () => this.toggleIndex(), "aria-label": this.ariaLabelEyeIconButton })), h("div", { key: '2776781bbf7f81ec3eec13458784224015104375', class: "content-container" }, h("slot", { key: 'd094b595d41f6b95b8c823d27b1bf711f366a5d7' })), h("div", { key: '2b3b4d2f3a95e42489210091e97a8455624cedf1', class: {
                 footer: true,
                 'show-footer': this.hasFooterSlot,
-            } }, h("slot", { key: '0ad67ace7ff3883a84208142112ceb5a98a5686c', name: "footer", onSlotchange: (event) => this.handleFooterSlotChange(event) })))));
+            } }, h("slot", { key: '45f0d2cca37604489c565e0144fa648f157e5bb4', 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

@@ -7,6 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @slot default - Flip tile body content.
+ */
 export class FlipTileContent {
     /**
      * Controls the visibility of the content
@@ -15,7 +18,7 @@ export class FlipTileContent {
      */
     contentVisible = false;
     render() {
-        return h(Host, { key: 'd1b72dd5673729ccf22fba396a0f9b903098ba82' }, this.contentVisible ? h("slot", null) : null);
+        return h(Host, { key: '2db68ac6c4947fe4f53b7764f0dcc3b6e990f668' }, this.contentVisible ? h("slot", null) : null);
     }
     static get is() { return "ix-flip-tile-content"; }
     static get encapsulation() { return "shadow"; }