@siemens/ix 5.0.0 → 5.1.0

package/dist/esm/ix-pill_4.entry.js

@@ -1,14 +1,14 @@
-import { M as Mixin, r as registerInstance, g as getElement, h, H as Host, c as createEvent, d as readTask } from './index-Ca5WUunf.js';
-import { a as a11yBoolean } from './a11y-B5k8YVR0.js';
-import { D as DefaultMixins, h as hasKeyboardMode } from './component-Chfbghog.js';
+import { M as Mixin, r as registerInstance, g as getElement, h, H as Host, c as createEvent, d as readTask } from './index-EBgS4zhE.js';
+import { a as a11yBoolean } from './a11y-C21npbUc.js';
+import { D as DefaultMixins, h as hasKeyboardMode } from './component-DqJSHc3A.js';
 import { m as makeRef } from './make-ref-Djkc69iv.js';
-import { y as iconClose, e as iconMoreMenu } from './index-Cl7fhG1I.js';
+import { y as iconClose, e as iconMoreMenu } from './index-DgUGsIlh.js';
 import { C as ComponentIdMixin } from './id.mixin-CUbYLenp.js';
-import { B as BaseTabMixin } from './tab.mixin-2hU1i4Yk.js';
-import { q as queryElements } from './focus-utilities-DnaItyVQ.js';
-import { I as InheritAriaAttributesMixin } from './inherit-aria-attributes.mixin-CBuZQFB-.js';
+import { B as BaseTabMixin } from './tab.mixin-BjAM99yM.js';
+import { q as queryElements } from './focus-utilities-6ZxKp7Jn.js';
+import { I as InheritAriaAttributesMixin } from './inherit-aria-attributes.mixin-nCmPujqf.js';
 import { r as requestAnimationFrameNoNgZone } from './requestAnimationFrame-BEuV0Xpe.js';
-import './shadow-dom-BIe8Nw9M.js';
+import './shadow-dom-BClJdFQP.js';
 
 const pillCss = () => `:host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;max-width:100%;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;vertical-align:top;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline{padding-left:calc(0.5rem - 0.0625rem)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning-text)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 0.0625rem)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 0.0625rem)}.container:not(.outline){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive,.container:not(.outline):not(.closable){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-primary-outline--background);border:solid 0.0625rem var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:0.0625rem;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);background-color:var(--theme-chip-outline--background);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline{background-color:var(--theme-pill-outline--background)}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}`;
 
@@ -91,13 +91,13 @@ const Pill = class extends Mixin(...DefaultMixins) {
             hostRole = 'group';
         }
         const iconIsDecorative = !this.ariaLabelIcon?.trim();
-        return (h(Host, { key: '7b8f2661c2d2cd4f9d4e71631cfed268167adb5b', style: this.variant === 'custom'
+        return (h(Host, { key: '67338905de82719c9a01fe022487ed706b35d8e6', 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: '673b20609f91ffd09d80564d6aa709fe4d9303ad', ref: this.containerElementRef, style: { ...customStyle }, class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -112,9 +112,9 @@ const Pill = class 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: '76b1e2d1b248f13f68417f91c72130f40f4e2755', 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: '215af7f202cfd01c6f2f5dc43fbc9b2a6d296ed2', class: "slot-container" }, h("slot", { key: '0e2082d82c6c6be68a7107692c6162080178f601', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
 };
 Pill.style = pillCss();
@@ -211,7 +211,7 @@ const TabItem = class extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabM
         else {
             variant = 'normal';
         }
-        return (h(Host, { key: '38ee3ed8b3819d38144608d31446ba60f32658b3', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
+        return (h(Host, { key: 'cbb2004638023c1beeb4af192ba6219380c8f0e6', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
                 selected: this.selected,
                 disabled: this.disabled,
                 'small-tab': this.small,
@@ -231,17 +231,17 @@ const TabItem = class extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabM
                         nativeEvent: event,
                     });
                 }
-            } }, variant === 'rounded' && (h("div", { key: 'd5273f2315118f712fc4c25d3d286dca1166fb73', class: {
+            } }, variant === 'rounded' && (h("div", { key: '1f98b9019ba76864d03c491435a60e913f566584', class: {
                 circle: true,
-            } }, this.icon && h("ix-icon", { key: '52cfcee729debba7d264af7ff4d4ea030575925e', name: this.icon, size: "24" }), h("slot", { key: 'b5e14c4b4cb69b1bbb4caa5c15c4355db8caf510' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: '827b6cd5390799f361f726a455d94c58f9a542c1', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '9be6aeb959a037a951cd7b108eb3d217e1504dc1', class: {
+            } }, this.icon && h("ix-icon", { key: '6849def7bdb3dba05f4a1b84f9067777bede78c5', name: this.icon, size: "24" }), h("slot", { key: '41b3464f6fc45ad5b853223c5a8819a00dcca841' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: 'b9af7159f9306c2b841066a726008afdee58e472', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '87d1993bfa9bf76dff49f15b9a1e5e4f7dfe9a56', class: {
                 text: !!this.label,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.label, h("slot", { key: '62f22936b12a97234c2ec3d5210e7d3f2435fa11' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '023ac330510e532464624dd78ea8bf3fd06922f0', class: {
+            } }, this.label, h("slot", { key: '328e393a77d1c24b487ef874e07bf7772cc24820' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '2758fc1447296c9c2cc04ce92905e5ba4fca9a1b', class: {
                 counter: true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '98ce5d4ee78b06cd252ab0550b3be543d17df4d7', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: 'c00ea1fc9869cbd4d503b1060b8161812e69c1df', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
+            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '6a749ea40148e1d5ca319b7cfa52176e1303d1bd', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: '35fdcd1095f49cb083e10ce3aeb33e54458968d9', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 this.tabClose.emit({
@@ -320,7 +320,7 @@ const TabSet = class {
         });
     }
     render() {
-        return (h(Host, { key: '139dd7a9fbd2a12a67de5db64d0731a86ba1c355', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: '8feff5e84cf1f1576df78077a022d2832a51b602' })));
+        return (h(Host, { key: '90be74d89acb43edb6eec575f07a3877ec90ac45', onTabChange: () => this.checkPanelsVisibility() }, h("slot", { key: '047c26c15f8b43312a25a35dddadd364a5b9f839' })));
     }
 };
 TabSet.style = tabSetCss();
@@ -560,19 +560,19 @@ const Tabs = class extends Mixin(...DefaultMixins, InheritAriaAttributesMixin) {
         }
     }
     render() {
-        return (h(Host, { key: '693c87dc0f9b96e5a18ddb2d84ddc71c94ef29b0', onTabClick: (event) => this.onTabClick(event), class: {
+        return (h(Host, { key: '2e8b5f9f4d3658bd219e6ca5d5a829d16f0c1977', onTabClick: (event) => this.onTabClick(event), class: {
                 small: this.small,
-            } }, h("div", { key: 'b76d32b5429e62d1d11808901e828c3630685f83', ref: this.tabsContainerRef, class: {
+            } }, h("div", { key: '8e45e2d46485c6e3147b2237f6109d63cd02758c', ref: this.tabsContainerRef, class: {
                 'tabs-container': true,
                 top: this.placement === 'top',
                 bottom: this.placement === 'bottom',
-            } }, h("div", { key: 'cf4ab3c93c03ca431b2b46a24bf767f723691f44', class: {
+            } }, h("div", { key: '69b6177b0c8c7c20d039a434866f93135e168155', class: {
                 'overflow-shadow-container': true,
                 'overflow-shadow': this.isTabsOverflow,
-            } }, h("div", { key: '9d185cf8802e1b24f14b591ac99087f9a4acdec9', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
+            } }, h("div", { key: '97d6ccbe5e623cbedf6be21de05005599b9a2bcd', role: "tablist", ...this.inheritAriaAttributes, ref: this.tabsRef, class: {
                 tabs: true,
                 'tabs-stretched': this.layout === 'stretched',
-            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '8a697543efbf5c125296d5619e820ea2d1fe26b8' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: '7403b1b2d55cecc918a4ab32a7e5b680a12226bd', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
+            }, tabIndex: this.isTabsOverflow ? 0 : -1, onKeyDown: (event) => this.onTabsNavigate(event) }, h("slot", { key: '2ceb8d8dc886c9784e244172750192297f077360' }))), this.isTabsOverflow && this.layout !== 'stretched' && (h("ix-dropdown-button", { key: 'a7041a35c2dcac4f86eefbfbae5ac36ba9c45436', ariaLabel: this.ariaLabelMoreTabs, icon: iconMoreMenu, class: {
                 'tabs-context-menu': true,
             }, variant: "subtle-tertiary" }, this.overflowMenuItems.map((item) => (h("ix-dropdown-item", { key: item.tabKey, checked: item.tabKey === this.activeTabKey, icon: item.icon, label: item.label, disabled: item.disabled, onClick: () => (this.activeTabKey = item.tabKey) }))))))));
     }

package/dist/esm/ix-popover-content.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+import { b as TRAP_FOCUS_INCLUDE_ATTRIBUTE } from './focus-trap-IK9ialav.js';
+import './make-ref-Djkc69iv.js';
+import './focus-utilities-6ZxKp7Jn.js';
+
+const popoverContentCss = () => `:host{display:block;position:relative;overflow:auto;padding:0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.no-padding){padding:0}`;
+
+const PopoverContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Remove default inner padding.
+     *
+     * @since 5.1.0
+     */
+    noPadding = false;
+    render() {
+        return (h(Host, { key: '2dc14073545f57f65c6901dc69d7f721df98f3b1', class: { 'no-padding': this.noPadding }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("slot", { key: 'aa44ae3c40f423be58fc5cb1d0f1b535175d8c7f' })));
+    }
+};
+PopoverContent.style = popoverContentCss();
+
+export { PopoverContent as ix_popover_content };

package/dist/esm/ix-popover-footer.entry.js

@@ -0,0 +1,24 @@
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+import { b as TRAP_FOCUS_INCLUDE_ATTRIBUTE } from './focus-trap-IK9ialav.js';
+import './make-ref-Djkc69iv.js';
+import './focus-utilities-6ZxKp7Jn.js';
+
+const popoverFooterCss = () => `:host{display:flex;padding:0.75rem;justify-content:space-between;align-items:center;gap:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .footer-start,:host .footer-end{display:flex;gap:0.5rem}:host(.alignment-vertical) .footer-end{flex-direction:column;width:100%}:host(.alignment-vertical) .footer-end ::slotted(*){width:100%}`;
+
+const PopoverFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Button layout direction
+     *
+     * @since 5.1.0
+     */
+    alignment = 'horizontal';
+    render() {
+        return (h(Host, { key: '7bab2eff391dce0ec212153f377ae18cc17df0d7', class: { [`alignment-${this.alignment}`]: true }, [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, h("div", { key: '238db3b5532bf4bf6cbe07018a204e1bf4a85a07', class: "footer-start" }, h("slot", { key: '8bdafda85a6c0a4e8f0e5e0bc7f3d9e61fed5b99', name: "start" })), h("div", { key: '42f53fb182fe5a0b91df29cef856c94e87756e2a', class: "footer-end" }, h("slot", { key: 'bb4dab35e016c975e7d29c1dbbff53222d801228' }))));
+    }
+};
+PopoverFooter.style = popoverFooterCss();
+
+export { PopoverFooter as ix_popover_footer };

package/dist/esm/ix-popover-header.entry.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-EBgS4zhE.js';
+import { y as iconClose } from './index-DgUGsIlh.js';
+import { a as a11yBoolean } from './a11y-C21npbUc.js';
+import { b as TRAP_FOCUS_INCLUDE_ATTRIBUTE } from './focus-trap-IK9ialav.js';
+import { c as closestPassShadow } from './shadow-dom-BClJdFQP.js';
+import './make-ref-Djkc69iv.js';
+import './focus-utilities-6ZxKp7Jn.js';
+
+const popoverHeaderCss = () => `:host{display:flex;padding:0.75rem;align-items:center;gap:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .popover-title{flex-grow:1}:host .additional-items{display:flex;align-items:center;gap:0.25rem}:host .popover-close{align-self:flex-start;border-radius:var(--theme-small-border-radius);--ix-icon-button-color:var(--theme-popover-close--color);--theme-btn-tertiary--color:var(--theme-popover-close--color);--theme-btn-tertiary--color--hover:var(--theme-popover-close--color);--theme-btn-tertiary--color--active:var(--theme-popover-close--color);--theme-btn-tertiary--background:var(     --theme-popover-close-btn--background   );--theme-btn-tertiary--background--hover:var(     --theme-popover-close-btn--background--hover   );--theme-btn-tertiary--background--active:var(     --theme-popover-close-btn--background--active   );--theme-btn-tertiary--border-color:transparent;--theme-btn-tertiary--border-color--hover:transparent;--theme-btn-tertiary--border-color--active:transparent}`;
+
+const PopoverHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeClick = createEvent(this, "closeClick", 7);
+    }
+    get hostElement() { return getElement(this); }
+    /**
+     * Icon name displayed before the title.
+     * The icon is decorative; provide context in the default slot heading.
+     *
+     * @since 5.1.0
+     */
+    icon;
+    /**
+     * Icon color
+     *
+     * @since 5.1.0
+     */
+    iconColor;
+    /**
+     * Hide the close (X) button
+     *
+     * @since 5.1.0
+     */
+    hideClose = false;
+    /**
+     * ARIA label for the close icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     *
+     * @since 5.1.0
+     */
+    ariaLabelCloseIconButton = 'Close';
+    /**
+     * Fires when close button is clicked.
+     * Cancel to prevent closing.
+     *
+     * @since 5.1.0
+     */
+    closeClick;
+    parentPopover;
+    componentDidLoad() {
+        this.parentPopover = closestPassShadow(this.hostElement, 'ix-popover');
+    }
+    onCloseClick(event) {
+        const ce = this.closeClick.emit(event);
+        if (ce.defaultPrevented || event.defaultPrevented) {
+            return;
+        }
+        this.parentPopover?.hidePopover();
+    }
+    render() {
+        return (h(Host, { key: 'd75ad6fc30a8b3df9d1588fc18be610f19946a15', [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: true }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "24", "aria-hidden": a11yBoolean(true) })) : null, h("div", { key: 'c5db5b3c4d9537f1b5ec2d53eda5d94aba0984d5', class: "popover-title" }, h("ix-typography", { key: '0c87f6cb01be5089a35f0eeb30e6aa7743865eef', format: "h5" }, h("slot", { key: 'd5bcd06f9dd501f7f52861d0ed2c6dd967bd8196' }))), h("div", { key: 'fa7365f8ddce2cd12f92165160fb780426a994ce', class: "additional-items" }, h("slot", { key: 'b093c196c32eff075d65a5a9e570292174a1f943', name: "additional-items" })), this.hideClose ? null : (h("ix-icon-button", { class: "popover-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, "aria-label": this.ariaLabelCloseIconButton }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+PopoverHeader.style = popoverHeaderCss();
+
+export { PopoverHeader as ix_popover_header };

package/dist/esm/ix-popover-image.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-EBgS4zhE.js';
+
+const popoverImageCss = () => `:host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host img{display:block;width:100%;-o-object-fit:cover;object-fit:cover}`;
+
+const PopoverImage = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Image source URL
+     *
+     * @since 5.1.0
+     */
+    image;
+    /**
+     * Alt text for the image.
+     * Use an empty string for decorative images; provide descriptive text for content images.
+     *
+     * @since 5.1.0
+     */
+    imageAlt = '';
+    render() {
+        if (!this.image) {
+            return null;
+        }
+        return (h(Host, null, h("img", { src: this.image, alt: this.imageAlt })));
+    }
+};
+PopoverImage.style = popoverImageCss();
+
+export { PopoverImage as ix_popover_image };