@siemens/ix 5.0.0 → 5.1.1

package/dist/collection/components/modal-loading/modal-loading.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalLoading {
     render() {
-        return (h(Host, { key: 'dac65dc36124b038728e843240d126432d85e987' }, h("ix-spinner", { key: '639371732304b733f79cf8498e46442ff6a442df', variant: "primary" }), h("span", { key: 'a9bf046b8c00552a4135cc5046789027abd1803e', class: 'loading-text' }, h("slot", { key: '362185ef3806ddb57c90f6fdf776cb3563baf903' }))));
+        return (h(Host, { key: 'dc1f6ceb8a80533b033c8a942ad226a827797f5e' }, h("ix-spinner", { key: 'cba70b4acd7faac7076ccab3505ba3bf77b43294', variant: "primary" }), h("span", { key: '7e391743781992496039e4d71e2344c79bc134df', class: 'loading-text' }, h("slot", { key: '5c08f0076249ca3d16b80e2d107cf2fb975e7e5b' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.css

@@ -387,7 +387,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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;
@@ -498,7 +498,7 @@ input.ix-form-control:read-only, input.ix-form-control.readonly {
   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/pagination/pagination.js

@@ -199,7 +199,7 @@ export class Pagination {
         }
     }
     render() {
-        return (h(Host, { key: '8ee910b6e83aa8ea187f6ae5fb488fec20610976' }, h("ix-icon-button", { key: 'c2d3870465e0882cfb6b6920060fedbadaf4bda6', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
+        return (h(Host, { key: 'f1a9fa92967db3108ec88ea95ebd27baeb11a801' }, h("ix-icon-button", { key: '6cd70b1d8cf6e8a65056ef4af191d31152bce887', disabled: !this.count || this.selectedPage === 0, variant: "subtle-tertiary", icon: iconChevronLeftSmall, onClick: () => this.decrease(), "aria-label": this.ariaLabelChevronLeftIconButton }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { format: "body" }, this.i18nPage), h("input", { "aria-label": this.ariaLabelPageSelection, class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
                 const inputElement = event.target;
                 this.handlePageInput(inputElement.value);
             }, onKeyDown: (event) => {
@@ -213,7 +213,7 @@ export class Pagination {
             }, onBlur: (e) => {
                 const inputElement = e.target;
                 inputElement.value = (this.selectedPage + 1).toString();
-            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: '9f129654625aabdf2d325559938ffdc2ddb866bb', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (h("span", { key: '470c8a4fddb59f8af7d7faa7bcb663a7505898c6', class: "item-count" }, h("ix-typography", { key: '08e9e48a77c86cc5edde0df9dbbe34ab3ed86f91', format: "body" }, this.i18nItems), h("ix-select", { key: '3a770912a515cc0739ab54007c8fb46f2b8a9aff', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { format: "body" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: '85cefcfb2c0e1bdfcff3bb442bab8a7de5f61ecc', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && !this.hideItemCount && (h("span", { key: '4bb3f7a6c527a2c9ad29a2d9cffa3cff15c1df0e', class: "item-count" }, h("ix-typography", { key: '8df743fae7237037043cdbae1295a23c797e3a8e', format: "body" }, this.i18nItems), h("ix-select", { key: 'd4b5d9def930824bb7630849e9c7f61beb6e6924', 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);
             } }, this.itemCountOptions.map((option) => (h("ix-select-item", { label: `${option}`, value: `${option}` }))))))));

package/dist/collection/components/pane/pane.css

@@ -215,6 +215,10 @@
   height: 100%;
   width: 100%;
 }
+:host .side-pane-content.no-padding {
+  padding-inline: 0;
+  padding-block-end: 0;
+}
 :host .slot-header {
   max-height: 2rem;
   max-width: unset;

package/dist/collection/components/pane/pane.js

@@ -13,9 +13,12 @@ import Animation from "../utils/animation";
 import { applicationLayoutService } from "../utils/application-layout";
 import { matchBreakpoint } from "../utils/breakpoints";
 import { addDisposableEventListener, } from "../utils/disposable-event-listener";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+import { addFocusTrap } from "../utils/focus/focus-trap";
 import { a11yBoolean } from "../utils/a11y";
 /**
  * @slot header - Additional slot for the header content
+ * @slot default - Pane body content.
  */
 export class Pane {
     hostElement;
@@ -41,6 +44,13 @@ export class Pane {
      * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.
      */
     borderless = false;
+    /**
+     * Remove the padding of the content area.
+     * If set to `true` the left, right and bottom padding of the content area is removed.
+     *
+     * @since 5.1.0
+     */
+    noPadding = false;
     /**
      * State of the pane
      */
@@ -109,6 +119,9 @@ export class Pane {
     mutationObserver;
     resizeObserver;
     disposableWindowClick;
+    disposableKeydown;
+    focusTrap;
+    focusReturnElement;
     get currentSlot() {
         return this.hostElement.getAttribute('slot');
     }
@@ -125,18 +138,44 @@ export class Pane {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
         this.disposableWindowClick?.();
+        this.disposableKeydown?.();
+        this.focusTrap?.destroy();
     }
-    onExpandedChange() {
+    async onExpandedChange() {
         if (!this.closeOnClickOutside || !this.expanded) {
             this.disposableWindowClick?.();
+        }
+        else {
+            this.disposableWindowClick = addDisposableEventListener(window, 'click', (event) => {
+                const path = event.composedPath?.() || [];
+                if (!path.includes(this.hostElement)) {
+                    this.dispatchExpandedChangedEvent();
+                }
+            });
+        }
+        this.registerEscapeListener();
+        if (!this.floating) {
             return;
         }
-        this.disposableWindowClick = addDisposableEventListener(window, 'click', (event) => {
-            const path = event.composedPath?.() || [];
-            if (!path.includes(this.hostElement)) {
-                this.dispatchExpandedChangedEvent();
-            }
-        });
+        if (this.expanded) {
+            const activeElement = document.activeElement;
+            this.focusReturnElement =
+                activeElement instanceof HTMLElement ? activeElement : undefined;
+            this.focusTrap = await addFocusTrap(this.hostElement, {
+                trapFocusInShadowDom: 'both',
+            });
+        }
+        else {
+            this.focusTrap?.destroy();
+            this.focusTrap = undefined;
+            requestAnimationFrameNoNgZone(() => {
+                const elementToFocus = this.focusReturnElement;
+                this.focusReturnElement = undefined;
+                if (elementToFocus && typeof elementToFocus.focus === 'function') {
+                    elementToFocus.focus();
+                }
+            });
+        }
     }
     componentWillLoad() {
         this.onExpandedChange();
@@ -287,10 +326,7 @@ export class Pane {
                 }
             },
             complete: () => {
-                if (this.expanded) {
-                    this.showContent = true;
-                }
-                this.animations.delete(key);
+                this.onAnimationComplete(key);
             },
         });
         this.animations.set(key, animation);
@@ -314,14 +350,22 @@ export class Pane {
                 }
             },
             onComplete: () => {
-                if (this.expanded) {
-                    this.showContent = true;
-                }
-                this.animations.delete(key);
+                this.onAnimationComplete(key);
             },
         });
         this.animations.set(key, animation);
     }
+    onAnimationComplete(key) {
+        if (this.expanded) {
+            this.showContent = true;
+            if (this.floating) {
+                requestAnimationFrameNoNgZone(() => {
+                    this.focusFirstSlottedElement();
+                });
+            }
+        }
+        this.animations.delete(key);
+    }
     removePadding() {
         animate(this.hostElement.shadowRoot.querySelector('#title-div'), {
             duration: 0,
@@ -391,6 +435,11 @@ export class Pane {
             slot: this.currentSlot ?? '',
             variant: value,
         });
+        if (value !== 'floating') {
+            this.focusTrap?.destroy();
+            this.focusTrap = undefined;
+        }
+        this.registerEscapeListener();
     }
     onBorderlessChange(value) {
         this.borderlessChanged.emit({
@@ -398,6 +447,30 @@ export class Pane {
             borderless: value,
         });
     }
+    focusFirstSlottedElement() {
+        const autofocusEl = this.hostElement.querySelector('[autofocus]');
+        if (autofocusEl) {
+            autofocusEl.focus();
+            return;
+        }
+        const closeBtn = this.hostElement.shadowRoot?.querySelector('.title-icon');
+        if (closeBtn) {
+            closeBtn.focus();
+        }
+    }
+    registerEscapeListener() {
+        this.disposableKeydown?.();
+        this.disposableKeydown = undefined;
+        if (!this.floating || !this.expanded) {
+            return;
+        }
+        this.disposableKeydown = addDisposableEventListener(this.hostElement, 'keydown', (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            this.dispatchExpandedChangedEvent();
+        });
+    }
     dispatchExpandedChangedEvent() {
         const newExpandedValue = !this.expanded;
         const event = this.expandedChanged.emit({
@@ -501,7 +574,7 @@ export class Pane {
         else {
             paneButtonAriaLabel = 'Expand pane';
         }
-        return (h(Host, { key: '7cbc0656b5c4c2ec4057733c7eb652004ebdc383', class: {
+        return (h(Host, { key: 'e543d6f177c9b347c72abb1d821ea08fa642b031', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -525,28 +598,31 @@ export class Pane {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '7c1ea7ef3cf622297ea4363908baf81a9db99dda', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '44156892e41a24920288669e3c096cea0eb0e244', id: `pane-${this.composition}`, class: {
                 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,
                 'left-right-pane': this.isLeftRightPane && !this.isMobile,
                 'mobile-pane': this.isMobile,
                 expanded: this.expanded,
-            } }, h("div", { key: 'f6292f3f589efc59514c6998a2ccb7cce694e40e', id: "title-div", class: {
+            } }, h("div", { key: '18c22984a1970f326e33467a0a3fd2e2f8fc7e15', id: "title-div", class: {
                 title: !this.isMobile && !this.hideOnCollapse && !this.showContent,
                 'title-finished': !this.isMobile && !this.hideOnCollapse && this.showContent,
                 'title-expanded': !this.isMobile && !this.hideOnCollapse && this.expanded,
                 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,
                 'title-mobile': this.isMobile,
                 'header-gap': !this.isMobile && !this.hideOnCollapse,
-            } }, h("ix-icon-button", { key: '8b1a984c693aae6838e0c502fa8002ca64d9ca45', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '9b92a577dd81c283415dd194448804a9f128fdc0', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? iconClose
                     : this.expandIcon
                 : this.minimizeIcon, iconColor: this.expanded && (this.isMobile || this.hideOnCollapse)
                 ? 'color-soft-text'
-                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), h("div", { key: '794a1436c031004c6353bbaa0a6c232ac26fe173', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": paneButtonAriaLabel }), h("div", { key: 'fb67a0886d65c841bd22a5fa5cfd2a47bf376ff8', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (h("ix-icon", { key: 'ec37b0262e2c6b9111753e91388b82db166f7e4c', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '525da27f90b187e64800360a2e49ee3547ea23d6', class: "title-text-overflow" }, h("ix-typography", { key: 'b11a3a538ffb8db6be4dee5f64d18f9d9e0b78a3', format: "h4" }, this.heading)), this.expanded && (h("div", { key: 'eee6ca859602eb76be791238ca93eda110a61fd9', class: "slot-header" }, h("slot", { key: 'c494d88c9d5c58a2d69a6c95e520e1864a80a275', name: "header" }))))), h("div", { key: '0ce9b176670c9493b900ef86e2d6f1ff0719910b', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '34491085f2d7ccacba88b177c7db695062e42b29' })))));
+            } }, this.icon && (h("ix-icon", { key: 'c9f7393d0f7b0712892355baa70fdc000708a352', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '268953ae5e48eff0ad3b9e7425798380ab6cad04', class: "title-text-overflow" }, h("ix-typography", { key: 'fcebf6929e62dd90bd040631041d9bb92150f238', format: "h4" }, this.heading)), this.expanded && (h("div", { key: 'db4bc449c3d174136cc4415c7fc15f82a8f33421', class: "slot-header" }, h("slot", { key: 'cbbdd70092367dd800b946b6d864cbfc5e9b5ac6', name: "header" }))))), h("div", { key: '61388536eb66883d710fe1adf662f3a7d1dd2abf', class: {
+                'side-pane-content': true,
+                'no-padding': this.noPadding,
+            }, hidden: !this.showContent }, h("slot", { key: '1b1435619e3a22b84908eb2789ab3de0484264f9' })))));
     }
     static get is() { return "ix-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -661,6 +737,29 @@ export class Pane {
                 "attribute": "borderless",
                 "defaultValue": "false"
             },
+            "noPadding": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Remove the padding of the content area.\nIf set to `true` the left, right and bottom padding of the content area is removed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-padding",
+                "defaultValue": "false"
+            },
             "expanded": {
                 "type": "boolean",
                 "mutable": true,

package/dist/collection/components/pane-layout/pane-layout.js

@@ -9,6 +9,14 @@
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { applicationLayoutService } from "../utils/application-layout";
 import { matchBreakpoint } from "../utils/breakpoints";
+/**
+ * @slot left - Pane displayed to the left of the content.
+ * @slot top - Pane displayed above the content.
+ * @slot content - Main layout content.
+ * @slot default - Additional main layout content.
+ * @slot bottom - Pane displayed below the content.
+ * @slot right - Pane displayed to the right of the content.
+ */
 export class Panes {
     hostElement;
     /**
@@ -237,7 +245,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: 'c21202ca403d967e76477ce169c3c66f568b0fe2' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: '59257c3e7c7b3b309f151706e51a1730c36ebec0' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/collection/components/pill/pill.js

@@ -10,6 +10,9 @@ import { h, Host, Mixin } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 import { DefaultMixins } from "../utils/internal/component";
 import { makeRef } from "../utils/make-ref";
+/**
+ * @slot default - Pill label.
+ */
 export class Pill extends Mixin(...DefaultMixins) {
     constructor() {
         super();
@@ -88,13 +91,13 @@ export class Pill extends Mixin(...DefaultMixins) {
             hostRole = 'group';
         }
         const iconIsDecorative = !this.ariaLabelIcon?.trim();
-        return (h(Host, { key: '7b8f2661c2d2cd4f9d4e71631cfed268167adb5b', style: this.variant === 'custom'
+        return (h(Host, { key: '827e58b1bdd980292651befee4ad756cbea0699f', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            }, role: hostRole }, h("div", { key: '319eb41667d05e12400f933aa71387476b2e1892', ref: this.containerElementRef, style: { ...customStyle }, class: {
+            }, role: hostRole }, h("div", { key: 'f50b1d1f5a36ae985e55c66d97723640dcbd667f', ref: this.containerElementRef, style: { ...customStyle }, class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -109,9 +112,9 @@ export class Pill extends Mixin(...DefaultMixins) {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '34124123e8411fd9eb1ae957dd6b7d70c115c041', class: {
+            } }, this.icon && (h("ix-icon", { key: '8f24375cb42813b0a651997a672fda5c9c16b8d3', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '6b9b25474bfc28109676a60a15d7f13601c5946e', class: "slot-container" }, h("slot", { key: '0d05a9372c9d11ed5cb5f28b618ef3c0b91d31c4', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })), h("span", { key: '356a8805398e1978e5c7bfe61e3c383d0f4af640', class: "slot-container" }, h("slot", { key: 'ac249a29b4cbf9cba9d0fef7b2c5a8992d4f9c3d', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,161 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { NestedOverlayStack, pathIncludesTrigger as findTriggerInPath, } from "../utils/nested-overlay";
+class PopoverController {
+    stack = new NestedOverlayStack({
+        blocksOutsideDismiss: (popover) => !popover.closeOnClickOutside,
+    }, (popover) => this.dismiss(popover));
+    /** LIFO order of popovers opened through {@link presentAndWait}. */
+    presentationOrder = [];
+    isWindowListenerActive = false;
+    connected(popover) {
+        if (!this.isWindowListenerActive) {
+            this.addOverlayListeners();
+        }
+        this.stack.connect(popover);
+    }
+    disconnected(popover) {
+        this.removeFromPresentationOrder(popover.getId());
+        this.stack.disconnect(popover);
+    }
+    removeFromNestedPopoverIds(id) {
+        this.stack.removeFromHierarchy(id);
+    }
+    /** Keeps stack parent→child links aligned with host {@link PopoverInterface.getNestedPopoverIds}. */
+    syncNestedPopoverIds(popover) {
+        this.stack.setChildIds(popover.getId(), popover.getNestedPopoverIds());
+    }
+    present(popover) {
+        void this.presentAndWait(popover);
+    }
+    async presentAndWait(popover) {
+        if (!popover.isPresent() && popover.willPresent?.()) {
+            this.dismissOthers(popover.getId());
+            this.syncNestedPopoverIds(popover);
+            await popover.present();
+            this.recordPresented(popover.getId());
+        }
+    }
+    dismissChildren(uid) {
+        this.dismissChildrenWithFocus(uid);
+    }
+    dismiss(popover, closeFocus = 'restore-trigger') {
+        const isPresent = popover.isPresent();
+        const willDismiss = popover.willDismiss?.() ?? true;
+        if (!isPresent || !willDismiss) {
+            return;
+        }
+        this.dismissChildrenWithFocus(popover.getId(), closeFocus);
+        popover.dismiss(closeFocus);
+        this.stack.deleteChildIdsEntry(popover.getId());
+        this.removeFromPresentationOrder(popover.getId());
+    }
+    dismissChildrenWithFocus(uid, closeFocus = 'restore-trigger') {
+        for (const childId of this.stack.getChildIds(uid)) {
+            const child = this.stack.get(childId);
+            if (child) {
+                this.dismiss(child, closeFocus);
+            }
+        }
+    }
+    dismissAll(ignoreCloseOnClickOutside = false) {
+        this.stack.dismissAll(ignoreCloseOnClickOutside
+            ? { ignorePolicyForIds: this.stack.keys() }
+            : undefined);
+    }
+    dismissTopmost() {
+        const topmost = this.getTopmostForEscape();
+        if (topmost) {
+            this.dismiss(topmost);
+        }
+    }
+    dismissOthers(uid) {
+        this.stack.dismissOthers(uid);
+    }
+    pathIncludesTrigger(eventTargets) {
+        return findTriggerInPath(eventTargets, 'data-ix-popover-trigger');
+    }
+    recordPresented(id) {
+        this.removeFromPresentationOrder(id);
+        this.presentationOrder.push(id);
+    }
+    removeFromPresentationOrder(id) {
+        const index = this.presentationOrder.indexOf(id);
+        if (index > -1) {
+            this.presentationOrder.splice(index, 1);
+        }
+    }
+    /** Whether this host is the active (topmost) popover for keyboard focus. */
+    isTopmostPresentedHost(host) {
+        return this.getTopmostForEscape()?.hostElement === host;
+    }
+    getTopmostForEscape() {
+        for (let index = this.presentationOrder.length - 1; index >= 0; index--) {
+            const popover = this.stack.get(this.presentationOrder[index]);
+            if (popover?.isPresent()) {
+                return popover;
+            }
+        }
+        let fallback;
+        this.stack.forEach((popover) => {
+            if (popover.isPresent()) {
+                fallback = popover;
+            }
+        });
+        return fallback;
+    }
+    getPopoverDialog(host) {
+        return host.shadowRoot?.querySelector('dialog') ?? null;
+    }
+    pathIncludesPopover(eventTargets) {
+        for (const eventTarget of eventTargets) {
+            if (!(eventTarget instanceof HTMLElement)) {
+                continue;
+            }
+            if (eventTarget.tagName === 'IX-POPOVER') {
+                return true;
+            }
+            for (const popover of this.stack.values()) {
+                if (eventTarget === popover.hostElement) {
+                    return true;
+                }
+                const panel = this.getPopoverDialog(popover.hostElement);
+                if (panel && eventTarget === panel) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    dismissAllFromOutsideClick() {
+        this.stack.forEach((instance) => {
+            if (!instance.closeOnClickOutside || !instance.isPresent()) {
+                return;
+            }
+            this.dismiss(instance, 'release');
+        });
+    }
+    addOverlayListeners() {
+        this.isWindowListenerActive = true;
+        window.addEventListener('click', (event) => {
+            const hasTrigger = this.pathIncludesTrigger(event.composedPath());
+            const hasPopover = this.pathIncludesPopover(event.composedPath());
+            if (!hasTrigger && !hasPopover) {
+                this.dismissAllFromOutsideClick();
+            }
+        });
+        window.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.dismissTopmost();
+            }
+        });
+    }
+}
+export { PopoverController };
+export const popoverController = new PopoverController();

package/dist/collection/components/popover/popover.css

@@ -0,0 +1,75 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  --theme-popover--background: var(--theme-color-2);
+  --theme-popover--border-color: transparent;
+  --theme-popover--color: var(--theme-color-std-text);
+  --theme-popover--elevation-filter: drop-shadow(0 0 2px var(--theme-color-shadow-2))
+    drop-shadow(0 4px 8px var(--theme-color-shadow-3))
+    drop-shadow(0 12px 18px var(--theme-color-shadow-3));
+  --theme-popover-close--color: var(--theme-color-soft-text);
+  --theme-popover-close-btn--background: transparent;
+  --theme-popover-close-btn--background--active: var(--theme-color-ghost--active);
+  --theme-popover-close-btn--background--hover: var(--theme-color-ghost--hover);
+}
+:host dialog.dialog {
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  overflow: visible;
+  position: fixed;
+  inset: unset;
+  width: 25rem;
+  min-width: 15rem;
+  max-width: 37.5rem;
+  max-height: calc(100vh - 2rem);
+}
+:host .popover-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  max-height: calc(100vh - 2rem);
+  background: var(--theme-popover--background);
+  color: var(--theme-popover--color);
+  border: 1px solid var(--theme-popover--border-color);
+  box-shadow: var(--theme-shadow-4);
+  border-radius: var(--theme-default-border-radius);
+  overflow: visible;
+}
+:host .popover-body {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+}
+:host .popover-container:has(.spike) {
+  box-shadow: none;
+  filter: var(--theme-popover--elevation-filter);
+}
+:host .spike,
+:host .spike::before {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: inherit;
+}
+:host .spike {
+  visibility: hidden;
+  z-index: 0;
+  pointer-events: none;
+}
+:host .spike::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+  background-color: var(--theme-popover--background);
+}