@siemens/ix 0.0.0-pr-2238-20251103105018 → 0.0.0-pr-2297-20251204163058

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

@@ -110,11 +110,11 @@ export class MenuItem {
             tabIndex: this.disabled ? -1 : 0,
         };
         const menuContent = [
-            this.icon && h("ix-icon", { key: '010ccc4efd7284bfc7654ab6f9b29783129f17ff', class: 'tab-icon', name: this.icon }),
+            this.icon && h("ix-icon", { key: 'cf444eeb0b3478721a77ee1dc52436689e4c0102', class: 'tab-icon', name: this.icon }),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: '247db957f1317fe528db4a863736cc7bf974fbcc', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'dbe0bcf50882232b686e322af346ea8edb0007bf' })),
+            h("span", { key: '93ac9e24f2c8634f9bfcef42c8a167d219ff764e', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'c98d81e6a16ff3304c1c2c489a71cc892fc6e287' })),
         ];
-        return (h(Host, Object.assign({ key: '1877e4728bfea90d5084715ce7d30d59c027cb60', class: {
+        return (h(Host, Object.assign({ key: '2bed98070395e9df578f968f317a16f214bf5627', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
@@ -125,7 +125,7 @@ export class MenuItem {
                     e.preventDefault();
                     e.stopPropagation();
                 }
-            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: 'c19646a81a5a2fed7b89eb95caf661125da9f7be', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
+            } }), menuContent)) : (h("button", Object.assign({}, commonAttributes, { ref: this.buttonRef }), menuContent)), h("ix-tooltip", { key: '691d40c1d8df8ab9111165be8320190a5c893de0', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000, interactive: false, "aria-hidden": a11yBoolean(this.ariaHiddenTooltip), "aria-labelledby": this.internalItemId }, this.tooltip)));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-settings/menu-settings.js

@@ -8,7 +8,7 @@
  */
 import { forceUpdate, h, } from "@stencil/core";
 import { MenuTabs } from "../utils/menu-tabs/menu-tabs-fc";
-import { initialize, setTab, } from "../utils/menu-tabs/menu-tabs-utils";
+import { initialize, syncTabDisplay, } from "../utils/menu-tabs/menu-tabs-utils";
 export class MenuSettings {
     constructor() {
         /**
@@ -18,8 +18,10 @@ export class MenuSettings {
         /** @internal */
         this.show = false;
     }
-    updateTab(label) {
-        setTab(this, label);
+    updateTab(newLabel, oldLabel) {
+        if (newLabel !== oldLabel) {
+            syncTabDisplay(this, newLabel);
+        }
     }
     componentWillLoad() {
         initialize(this);
@@ -28,7 +30,7 @@ export class MenuSettings {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: 'a59dd5a81b91ff4ae7f516cb192700bffaee3f84', context: this });
+        return h(MenuTabs, { key: 'bff35655d1e57ea807a1d8a6bd0879f8804e3ef4', context: this });
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu-settings/menu-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,MAAM,GACP,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;IALzB;QAcE;;WAEG;QACK,UAAK,GAAG,UAAU,CAAC;QAE3B,gBAAgB;QACR,SAAI,GAAG,KAAK,CAAC;KA+BtB;IAfC,SAAS,CAAC,KAAa;QACrB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACtB,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * Popover closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"]}
+{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAEL,UAAU,EACV,cAAc,GACf,MAAM,oCAAoC,CAAC;AAO5C,MAAM,OAAO,YAAY;IALzB;QAcE;;WAEG;QACK,UAAK,GAAG,UAAU,CAAC;QAE3B,gBAAgB;QACR,SAAI,GAAG,KAAK,CAAC;KAiCtB;IAjBC,SAAS,CAAC,QAAgB,EAAE,QAAgB;QAC1C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC;IAED,gBAAgB;QACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACvB,CAAC;IAED,MAAM;QACJ,OAAO,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,GAAI,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  syncTabDisplay,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /** @internal */\n  @Prop() show = false;\n\n  /**\n   * Active tab changed\n   * @since 3.0.0\n   */\n  @Event() tabChange!: EventEmitter<string>;\n\n  /**\n   * Popover closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(newLabel: string, oldLabel: string) {\n    if (newLabel !== oldLabel) {\n      syncTabDisplay(this, newLabel);\n    }\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\n  }\n}\n"]}

package/dist/collection/components/menu-settings-item/menu-settings-item.js

@@ -16,7 +16,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: 'd71ea99d2f7194c876c18e702b0a1d20d84f7a35' }, h("slot", { key: '4906a29d17beb90749df4981daca1ae37c8b8c9b' })));
+        return (h(Host, { key: '69dac244a2c3b427237e8dceec64fad9c16600e9' }, h("slot", { key: 'ccfc87d1f061f0d4195f943dec3782b655626aae' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/message-bar/message-bar.js

@@ -42,7 +42,7 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: '5731cfe741529527f943834f721d426108cd5ded' }, h("div", { key: 'b9b6293938b30cad8afe65bd021d095f73a7153b', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '207487fae744ef55d405931a7546761259391fd0', color: this.color, name: this.icon }), h("div", { key: '9b610a5141af0164fbc34b82c4296d2353494b60', class: "message-content" }, h("slot", { key: '5ebf82ba3aaff680db743060a6b3785d3a20f953' })), !this.persistent && (h("ix-icon-button", { key: '7049b2d51ca9efb6c67fc376a0c9ba6369d30784', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '538fcc08ad07fe808f424e067a361f4a56f4c0ec' }, h("div", { key: '4a75052efe1b22c247dcfcd298aabbd1098ff7b6', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: 'd348829692e38a1023e044834aefa45516b4d916', color: this.color, name: this.icon }), h("div", { key: '0ac0a509efe1dd246f7732660e4cf16416c8655d', class: "message-content" }, h("slot", { key: '6143bfa9cf39d32d149c2893b7712358337833c9' })), !this.persistent && (h("ix-icon-button", { key: 'b118c91956af0fd00d02cfefdb7da36d46f2d360', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }

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

@@ -161,17 +161,17 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'c3f543b51f3434893a1c924ccaf7a7d877977e89', class: {
+        return (h(Host, { key: '0170729f63356223c39bcd6b0bb7124b2036f2c4', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, h("div", { key: '71dbff3ad3302924535ad5262185f9ffe7efd540', class: "dialog-backdrop" }, h("dialog", { key: 'a266f8cc91840e2923ae18284eb244f132f38bb2', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '436b9f2efce7279defa936c9ee79fa44d090e388', class: "dialog-backdrop" }, h("dialog", { key: 'e3bc4891433993a5dcbe186011fd91d70277ca3d', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
                 modal: true,
                 [`modal-size-${this.size}`]: true,
             }, onClose: () => this.dismissModal(), onMouseDown: (event) => this.onMouseDown(event), onMouseUp: (event) => this.onMouseUp(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: 'd71f435060761f058ce2ceb47c94d2a9d5bc9678' })))));
+            } }, h("slot", { key: '5a3e86b9c04f8e1564be6026b0352940978f0666' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalContent {
     render() {
-        return (h(Host, { key: '3f9198f84a9686d2aaf532f85af567aa2b6c821c' }, h("slot", { key: 'a0fc648541f56d4a7142bb91e55dfc7757b21746' })));
+        return (h(Host, { key: 'b45bdd4b47ca580de9e3419c9c081f8e30b1da09' }, h("slot", { key: 'ad2d19f3f3053ea927d6d45ff54bcfff1e74345d' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class ModalFooter {
     render() {
-        return (h(Host, { key: '26999141bb2fc468074ec5d05a43feaf6cbb4e78' }, h("slot", { key: '48c1f1b8d51af57f6bef965d582f2ff898140b9c' })));
+        return (h(Host, { key: '11eb649edd163b25fdeb4b533bf513a861c1d7ec' }, h("slot", { key: '9a2cb92b8df8220ed2307d98ec7a1ce6a6d9196b' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: '0ebfd37e83735c49aa640de880af719c278bf8dc' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'b8ccaf5afb50229756ad024f8932aca9e106bf35', class: "modal-title" }, h("ix-typography", { key: 'edf640b077acc1feb0ce7e3d661ba84fbffde3f0', format: "h5" }, h("slot", { key: '10da72cd839364e2fe81049de9d411a4cbea6e72' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
+        return (h(Host, { key: '7dd6b1964ed537b20a90f9007afb767414fad240' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '4c6d8c7716ba99eed36e7b9c741dce4ebb0bb092', class: "modal-title" }, h("ix-typography", { key: '1db5a1e1cd434c67578a8c276b497284e5447f8d', format: "h5" }, h("slot", { key: '920833a9e7d2c8e15dc4bff1b18c6daa8a9ee4b5' }))), !this.hideClose ? (h("ix-icon-button", { class: "modal-close", onClick: (event) => this.onCloseClick(event), variant: "tertiary", icon: iconClose, iconColor: "color-soft-text", "aria-label": this.ariaLabelCloseIconButton })) : null));
     }
     static get is() { return "ix-modal-header"; }
     static get encapsulation() { return "shadow"; }

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: 'e6a5ed6cf016a30bd76692c5dcc96924cdfebc6d' }, h("ix-spinner", { key: '0979352c75c22f1a97fbad587b2f6648c5fbd867', variant: "primary" }), h("span", { key: '9cc99953a981540e8e2dc9806fd7e481199e1b54', class: 'loading-text' }, h("slot", { key: '89cc3a8cd66fcff80b72fe2d8ed80cb272cf3201' }))));
+        return (h(Host, { key: '404214a461e55c9ee78aad8dc277dab5be8a9b42' }, h("ix-spinner", { key: '96278c04d8c7798b411f6807e5c7a1ea26b03d45', variant: "primary" }), h("span", { key: 'cad3eec78defa832ffc679f86941ffc301bc5b5c', class: 'loading-text' }, h("slot", { key: '96cf92b74f62260ee97b7bdae73557a2ee5517ec' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js

@@ -56,6 +56,13 @@ export class Pagination {
          * i18n label for 'Items'
          */
         this.i18nItems = 'Items';
+        /**
+         * ARIA label for the page selection input
+         * Will be set as aria-label on the nested HTML input element
+         *
+         * @since 4.1.0
+         */
+        this.ariaLabelPageSelection = 'Page selection input';
     }
     selectPage(index) {
         const oldIndex = this.selectedPage;
@@ -145,17 +152,32 @@ export class Pagination {
         }
         return h("span", { class: "page-buttons" }, pageButtons);
     }
+    handlePageInput(inputValue) {
+        const value = Number.parseInt(inputValue, 10);
+        if (!Number.isNaN(value)) {
+            const clampedValue = Math.max(1, Math.min(value, this.count));
+            this.selectPage(clampedValue - 1);
+        }
+    }
     render() {
-        return (h(Host, { key: '40b3ace6995e3344df7ea8fe9a4b076603136395' }, h("ix-icon-button", { key: '22efb16a1553b9f935fa3af8fa5790f0bf5e9214', 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", { class: "ix-form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (event) => {
-                const eventTarget = event.target;
-                if (eventTarget) {
-                    const index = Number.parseInt(eventTarget.value);
-                    this.selectPage(index - 1);
+        return (h(Host, { key: 'e9b053fdf801e514af1abef2e163a903f7d5f976' }, h("ix-icon-button", { key: 'a880a444f946f7d228a746b8d45d7328bdc26295', 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) => {
+                if (['e', 'E', '+', '-', '.'].includes(event.key))
+                    event.preventDefault();
+                if (event.key === 'Enter') {
+                    const inputElement = event.target;
+                    this.handlePageInput(inputElement.value);
+                    inputElement.blur();
                 }
-            } }), 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: '23dfbc2e249990b489229c7adda1a423408a5167', 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: '21fa9891cb8ce7605c0727cc84d5223164be4c61', class: "item-count" }, h("ix-typography", { key: '1ff68ae57bb5aa4e513eb1c3e24b7a46043a3cd0', format: "body" }, this.i18nItems), h("ix-select", { key: 'bb1ac2d152988e0fcf7083781e93dbaa3e6c1703', hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            }, 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: 'dd75eb48382320194812f9eb4c644b7d37f0c84a', 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: '018574c07720618970be857f7536fdf9b71e1542', class: "item-count" }, h("ix-typography", { key: '343a05e008f258ab9a56045cac1a8785c9855169', format: "body" }, this.i18nItems), h("ix-select", { key: '2d8a5efe84ea53ea85b9f4c75f1c84800c858846', 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);
-            } }, h("ix-select-item", { key: '5fb9c14e5b30116ad1fb05478637a1f65ca9a9fc', label: "10", value: "10" }), h("ix-select-item", { key: '8cbea9c38bedf9382530315274f93702e3f6be2a', label: "15", value: "15" }), h("ix-select-item", { key: '7095c60775ea46a7312b8f2a5fd14ee084cadeeb', label: "20", value: "20" }), h("ix-select-item", { key: 'a4716aa6a22414e705d91665cabda72646823a9e', label: "40", value: "40" }), h("ix-select-item", { key: 'd9077eabd7ca25171699a41425358b20063c4399', label: "100", value: "100" }))))));
+            } }, h("ix-select-item", { key: '9106274e93a00e5cb62f7cd19082f43e2920076b', label: "10", value: "10" }), h("ix-select-item", { key: '452779779ea63e45d408d60b5faed2d30ea6bcc9', label: "15", value: "15" }), h("ix-select-item", { key: '0658cd6473b508ec6c01c83d99bce4bfa8a54940', label: "20", value: "20" }), h("ix-select-item", { key: '316b1e9a882ae3a516f8a3ff3997ab0fe95c20de', label: "40", value: "40" }), h("ix-select-item", { key: 'a5dbea62134178911100a1fb369d258b0ee74b8d', label: "100", value: "100" }))))));
     }
     static get is() { return "ix-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -374,6 +396,29 @@ export class Pagination {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "ariaLabelPageSelection": {
+                "type": "string",
+                "attribute": "aria-label-page-selection",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "4.1.0"
+                        }],
+                    "text": "ARIA label for the page selection input\nWill be set as aria-label on the nested HTML input element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'Page selection input'"
             }
         };
     }

package/dist/collection/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'subtle-tertiary',\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced = false;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Hide item count in advanced mode\n   */\n  @Prop() hideItemCount = false;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number = 0;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n label for 'Page'\n   */\n  @Prop({ attribute: 'i18n-page' }) i18nPage = 'Page';\n\n  /**\n   * i18n label for 'of'\n   */\n  @Prop({ attribute: 'i18n-of' }) i18nOf = 'of';\n\n  /**\n   * i18n label for 'Items'\n   */\n  @Prop({ attribute: 'i18n-items' }) i18nItems = 'Items';\n\n  /**\n   * ARIA label for the chevron left icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronLeftIconButton?: string;\n\n  /**\n   * ARIA label for the chevron right icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronRightIconButton?: string;\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected!: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged!: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    const oldIndex = this.selectedPage;\n\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === 0}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronLeftSmall}\n          onClick={() => this.decrease()}\n          aria-label={this.ariaLabelChevronLeftIconButton}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const eventTarget = event.target as HTMLInputElement;\n                if (eventTarget) {\n                  const index = Number.parseInt(eventTarget.value);\n                  this.selectPage(index - 1);\n                }\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography format=\"body\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === this.count - 1}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronRightSmall}\n          onClick={() => this.increase()}\n          aria-label={this.ariaLabelChevronRightIconButton}\n        ></ix-icon-button>\n\n        {this.advanced && !this.hideItemCount && (\n          <span class=\"item-count\">\n            <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'subtle-tertiary',\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced = false;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Hide item count in advanced mode\n   */\n  @Prop() hideItemCount = false;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number = 0;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n label for 'Page'\n   */\n  @Prop({ attribute: 'i18n-page' }) i18nPage = 'Page';\n\n  /**\n   * i18n label for 'of'\n   */\n  @Prop({ attribute: 'i18n-of' }) i18nOf = 'of';\n\n  /**\n   * i18n label for 'Items'\n   */\n  @Prop({ attribute: 'i18n-items' }) i18nItems = 'Items';\n\n  /**\n   * ARIA label for the chevron left icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronLeftIconButton?: string;\n\n  /**\n   * ARIA label for the chevron right icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelChevronRightIconButton?: string;\n\n  /**\n   * ARIA label for the page selection input\n   * Will be set as aria-label on the nested HTML input element\n   *\n   * @since 4.1.0\n   */\n  @Prop() ariaLabelPageSelection = 'Page selection input';\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected!: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged!: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    const oldIndex = this.selectedPage;\n\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  private handlePageInput(inputValue: string) {\n    const value = Number.parseInt(inputValue, 10);\n    if (!Number.isNaN(value)) {\n      const clampedValue = Math.max(1, Math.min(value, this.count));\n      this.selectPage(clampedValue - 1);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === 0}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronLeftSmall}\n          onClick={() => this.decrease()}\n          aria-label={this.ariaLabelChevronLeftIconButton}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n            <input\n              aria-label={this.ariaLabelPageSelection}\n              class=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const inputElement = event.target as HTMLInputElement;\n                this.handlePageInput(inputElement.value);\n              }}\n              onKeyDown={(event: KeyboardEvent) => {\n                if (['e', 'E', '+', '-', '.'].includes(event.key))\n                  event.preventDefault();\n                if (event.key === 'Enter') {\n                  const inputElement = event.target as HTMLInputElement;\n                  this.handlePageInput(inputElement.value);\n                  inputElement.blur();\n                }\n              }}\n              onBlur={(e: Event) => {\n                const inputElement = e.target as HTMLInputElement;\n                inputElement.value = (this.selectedPage + 1).toString();\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography format=\"body\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === this.count - 1}\n          variant=\"subtle-tertiary\"\n          icon={iconChevronRightSmall}\n          onClick={() => this.increase()}\n          aria-label={this.ariaLabelChevronRightIconButton}\n        ></ix-icon-button>\n\n        {this.advanced && !this.hideItemCount && (\n          <span class=\"item-count\">\n            <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -455,7 +455,7 @@ export class Pane {
     }
     render() {
         const rotate = !this.expanded && !this.isMobile && this.isLeftRightPane;
-        return (h(Host, { key: 'dd8c6d4cd68bbc2dce4938a97a0499316acda9f3', class: {
+        return (h(Host, { key: 'd4dcd94494a7a1a20cb9ce1613f60b07708a1a6a', class: {
                 'floating-pane': this.floating,
                 'inline-pane': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
@@ -479,28 +479,28 @@ export class Pane {
                     !this.expanded &&
                     !this.floating,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '9c1e0a51dd112be47cd6ac72a56da3c8f8c7402e', id: `pane-${this.composition}`, class: {
+            }, "aria-expanded": a11yBoolean(this.expanded) }, h("aside", { key: '16c38b4a2706ee2cc82975e7cc8f48434997d668', 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: 'e6c9183e30405b36ef67d76d812288573e75112b', id: "title-div", class: {
+            } }, h("div", { key: 'e4f68f0ab4d1c720bd2bbd2c8a3362e8c1166216', 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: 'b1b5b89d42572b9499866c3a59a22a4dfac97707', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '3d6a8b606b790e4a0401de198dd7f96536cff5a9', 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": this.ariaLabelCollapseCloseButton }), h("div", { key: 'e908c4100d070c35be2c1f16e1c7b5e2f7bbfa42', class: {
+                : undefined, variant: "subtle-tertiary", onClick: () => this.dispatchExpandedChangedEvent(), "aria-controls": `pane-${this.composition}`, "aria-label": this.ariaLabelCollapseCloseButton }), h("div", { key: 'e7410bc38e5c387ac6b92d7805cd4b82a4e5517e', class: {
                 'title-text': true,
                 rotate: rotate,
-            } }, this.icon && (h("ix-icon", { key: 'c38702ea2028987bdd185bde0e846f6e77e02cce', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: '59c00c7861e7cc4606fa7ace7bda410a66a9a13d', class: "title-text-overflow" }, h("ix-typography", { key: '5008f70a17ef9a8792cedb12bea3517775e87b99', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '2810168de3fc7383d0fa4b0a3d8b1ee3d99f2d80', class: "slot-header" }, h("slot", { key: '64e6644c2ee29a40d4b6343a03d00140518fb9d3', name: "header" }))))), h("div", { key: '9ee1b00114877447c0457a3a77d92c5176c25195', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '439ee1eb5b4f7506d758577bd56d6f506f786c32' })))));
+            } }, this.icon && (h("ix-icon", { key: '0429aadaabf1c6ff85d2858530d134884dde885a', class: "pane-icon", size: "24", name: this.icon, "aria-label": this.ariaLabelIcon })), h("div", { key: 'a1f91e5bfc947a90423df8706bc97c13c5fe8f5b', class: "title-text-overflow" }, h("ix-typography", { key: 'c7e45df0f33e0ca37fe1ca02ed552c7602e241f4', format: "h4" }, this.heading)), this.expanded && (h("div", { key: '1780fd1205121d168c240ef7f2990318f42cef52', class: "slot-header" }, h("slot", { key: 'ff9c90ed6e1c9fd23850168a0cb6457aeb27663f', name: "header" }))))), h("div", { key: '67ce0be6d20ecbaf426f6d11acf9bdfab14d9945', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: 'd5ee452fe64264f93ba57300a099abbaa89cfbd5' })))));
     }
     static get is() { return "ix-pane"; }
     static get encapsulation() { return "shadow"; }

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

@@ -238,7 +238,7 @@ export class Panes {
         return pane ? pane.floating : false;
     }
     render() {
-        return (h(Host, { key: '03ea4309957e61df58b3d8bc01bad3f4a069e825' }, !this.isMobile ? (this.layout == 'full-vertical' ? (h("div", { class: "side-panes-wrapper" }, h("div", { class: {
+        return (h(Host, { key: 'f5825e5fd84ca1f96e9eb6d19c528107167b4e16' }, !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

@@ -57,13 +57,13 @@ export class Pill {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '2a7697576ed5ec91672c45f54dd4c5ffeb3c0763', style: this.variant === 'custom'
+        return (h(Host, { key: 'aa669a2d03f9fc237cc40003d5a28718a403b764', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.pillColor,
                 }
                 : {}, class: {
                 'align-left': this.alignLeft,
-            } }, h("div", { key: 'ee9bc939ac718fe45d6d3a1d3974f98f3dac3881', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '0e15da18791505629957df85918d7752cfa62662', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -78,9 +78,9 @@ export class Pill {
                 closable: false,
                 icon: !!this.icon,
                 'with-gap': !this.iconOnly,
-            } }, this.icon && (h("ix-icon", { key: '34a581e8e9994088b52deda084131c595485a522', class: {
+            } }, this.icon && (h("ix-icon", { key: '49abe1808017f85a25fb2d8abd24db421f43f762', class: {
                 'with-icon': true,
-            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: 'abd12c31ed933190c5cd40b131cfab9e9318350d', class: "slot-container" }, h("slot", { key: 'ace912aa428b071a562286bb692ac82b98d57201', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+            }, name: this.icon, size: '16', "aria-label": this.ariaLabelIcon })), h("span", { key: '582ec1baae99962550035f613a8f74d9d8d9f56e', class: "slot-container" }, h("slot", { key: '46c0481383cfbc55dcb60981cb10dd2b460930eb', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
     }
     static get is() { return "ix-pill"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -87,17 +87,17 @@ export class ProgressIndicator {
     render() {
         const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
         const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
-        return (h(Host, { key: 'b9df8144037a0e126848e2425192dd8d8b752518', class: {
+        return (h(Host, { key: '55cecc574b40c14bd8a4ba7a4d1f0e1d8d73f07b', class: {
                 linear: this.type === 'linear',
                 circular: this.type === 'circular',
-            }, tabIndex: -1 }, h("div", { key: '15b088ae86016b1563aa34c2f1b31e0a0ae54cb2', class: {
+            }, tabIndex: -1 }, h("div", { key: '3db1f913e4c4793106d7865b52ef4dcb07889188', class: {
                 'progress-indicator': true,
                 [this.size]: true,
                 [this.status]: true,
                 ['text-center']: this.textAlignment === 'center',
                 ['text-left']: this.textAlignment === 'left',
                 ['text-right']: this.textAlignment === 'right',
-            } }, this.label && (h("ix-typography", { key: '98235751d98341318807c30826d220de3e089e5b', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'da8947864a85cbbecd4b72fbfc1c1e88e4d536b7', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+            } }, this.label && (h("ix-typography", { key: 'd8cd960dcfee8bfc20102d2b071661a186dcc854', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: 'd149e99776e95f8051cc02e70d16d3c5103d98ba', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue, status: this.status }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { status: this.status, alignment: this.textAlignment, value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
     }
     static get is() { return "ix-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/push-card/push-card.js

@@ -20,7 +20,7 @@ export class PushCard {
     }
     render() {
         var _a;
-        return (h(Host, { key: '25cc0c4fea44a0a035e59a617c81c5c4ba46f7bf', class: `card-${this.variant}` }, h("ix-card", { key: '3414251824d2f252985c29be1ae7f67235608147', variant: this.variant }, h("ix-card-content", { key: 'cecdda5d8a8d6818c6ffe4aed7a47e0dffe12bd0' }, h("ix-card-title", { key: '6e7b0859b6bf0704fe43845c2e2b456eda578aa7' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '60df1048ad8d94f9f741fba881e0276e5c864899', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: '503f04b96a2d1a93cb60ef47f256236249eb0473', name: "title-action" })), h("ix-typography", { key: 'e1ccccb5a67b270e93b1aae952ad6fdf27a19658', format: "h4" }, this.heading), h("ix-typography", { key: 'cd147ac7c5bb418926b62634b06e897a454d987b' }, this.subheading)), h("ix-card-accordion", { key: 'ac1045a3cc07cd515de917e7afe096d6ebf3b312', collapse: !this.expanded, variant: this.variant }, h("slot", { key: '6cfd442f9174fae7e66d750f519445b9fcbeb079' })))));
+        return (h(Host, { key: 'ce5e4eb49ffe548ae912dfb9df2ff02e570aef15', class: `card-${this.variant}` }, h("ix-card", { key: '09ee07b5244171d3cd2a2eaf99180a71364326e6', variant: this.variant }, h("ix-card-content", { key: '4ca37f7946dfaf600c21fa516a6a79c95c3369f3' }, h("ix-card-title", { key: '14508386f9ad32b641b7404b8d1845f8f215a12f' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("ix-typography", { key: '004e0f78e304e16b085cba401d4fe6067c579819', format: "display-xxl" }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'b5207aabd014e0e180eb1248795bccc23c09b850', name: "title-action" })), h("ix-typography", { key: 'e39c0d3762869afd918cf9f8bb75bcbad35798d2', format: "h4" }, this.heading), h("ix-typography", { key: '52c82e776f50a1e848cb163cf974402fc58a5011' }, this.subheading)), h("ix-card-accordion", { key: '28ba4043b6494617eb0a4ea03eca56c198e10766', collapse: !this.expanded, variant: this.variant }, h("slot", { key: 'f2be8b7cd43af05c3af1be4a5642871e3413d6f8' })))));
     }
     static get is() { return "ix-push-card"; }
     static get encapsulation() { return "shadow"; }