@siemens/ix 0.0.0-pr-2155-20250924075220 → 0.0.0-pr-2166-20251001083917

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

@@ -153,7 +153,7 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: '49275009853fd8a9c9231e41b206e3f2d1b0d6a9', class: {
+        return (h(Host, { key: '4f372fe034a70522511d1bc8d1d76e3184876132', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -162,14 +162,14 @@ export class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: '9288752f9cd67d83434da74c8f4fe65e57f21b8a', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: 'e45b143ed2316a69bcc06a8b7ee4b32895a25f67', class: "category" }, h("div", { key: '34ab800b45131b0b7324921baa6883bc8f2f1bf2', class: "category-text" }, this.label), h("ix-icon", { key: '54450dce975a283573a4a25aaff84cc43e3cfeee', name: iconChevronDownSmall, class: {
+            } }, h("ix-menu-item", { key: '315cb321cfaa7670b546edbd33907727c2add1df', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), tooltipText: this.tooltipText, isCategory: true }, h("div", { key: '897f1604fd0819774b8533f0cc786716a12cf8b6', class: "category" }, h("div", { key: '4a39ac0e300b06530ee0bf1d1bb31c4ba6e37cec', class: "category-text" }, this.label), h("ix-icon", { key: '24fe5aa4a3256acf7666cdc06ed1b53eabe61ca5', name: iconChevronDownSmall, class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '71a3deccbecc34fe27423c0d8c5fe12648244a3e', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: 'aa7d5988b6a22fabaef5cf4d74e740e96d2e390a', ref: (ref) => (this.menuItemsContainer = ref), class: {
                 'menu-items': true,
                 'menu-items--expanded': this.showItems,
                 'menu-items--collapsed': !this.showItems,
-            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'c9ba4105259aea83ecd4a125a084a555299c83de', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: 'db4b7115dbf5967b1de97c0b1c6e9392ceac6256', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -182,7 +182,7 @@ export class MenuCategory {
                         e.preventDefault();
                     }
                 }
-            } }, h("ix-dropdown-item", { key: '1e5e1b3659d6359c7c613bf15e7f9993f716cfab', class: 'category-dropdown-header' }, h("ix-typography", { key: 'ffd1265ecaa6a5edb29536088440d5654de2fd2f', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '61d8dc31511e8ddf63233bd4bda467374fbe44ef' }), h("slot", { key: 'c509e35530dc05faa847c9dbae7a16de0f84d415' }))));
+            } }, h("ix-dropdown-item", { key: '5dc987ad55ea5b36ab2021bd1484716b13349d89', class: 'category-dropdown-header' }, h("ix-typography", { key: '97c5fc80da4c914acebf89b161b3df3b1da77a60', format: "label", bold: true, textColor: "std" }, this.label)), h("ix-divider", { key: '366e9b4d84d9bfce5aed8912de25ceb4383fb68e' }), h("slot", { key: '2c51fafa9faeb14428df5419bdcbe32c570ee404' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }

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: '247ccf76115c4f9a3504ae8625cd064da17cb5f4', class: 'tab-icon', name: this.icon }),
+            this.icon && h("ix-icon", { key: '7450154ddbe822f7c017f81be83d48c31ca830ea', class: 'tab-icon', name: this.icon }),
             this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null,
-            h("span", { key: 'c98c04295888f8be7e0016cce7d749c19d641d32', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: 'ce04723016a4187e57f1dd31e4cb43cbea1cde93' })),
+            h("span", { key: '53c5e2a2ff8111e4360edf2b44acd1a305a8ca17', id: this.internalItemId, class: "tab-text text-default" }, this.label, h("slot", { key: '82b8b69c7519342d617f9bda5367b5c826e9f098' })),
         ];
-        return (h(Host, Object.assign({ key: '4f5490aa3304bdaa57dfbe5f2f9e292f78571ef7', class: {
+        return (h(Host, Object.assign({ key: 'b80a8dbcb7cb5a6dbffe6747352e565cf9abb1bf', 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: '9eb280ed1e0b95127eae4db991470111f1af550a', 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: 'f95a923b5c8d36f15adf85a4805405595be31f55', 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-item/menu-settings-item.js

@@ -16,7 +16,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: '70dbe5bb6bb618cf897ea60bae0febecde3021d1' }, h("slot", { key: 'ec2608b87f8123513ce9b052c6035ec04a41aef8' })));
+        return (h(Host, { key: 'df456ff8730db1834cc56549d596857a948d2dcc' }, h("slot", { key: 'a7683e6f94c5a6bbe0e178f0ae2e21e4f20c4070' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,13 +13,12 @@ export class MessageBar {
     constructor() {
         /**
          * Specifies the type of the alert.
-         * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.
          */
         this.type = 'info';
         /**
-         * If true, close button is enabled and alert can be dismissed by the user
+         * If true, close button is disabled and alert cannot be dismissed by the user
          */
-        this.dismissible = true;
+        this.persistent = false;
     }
     componentWillRender() {
         const config = MessageBar.messageTypeConfigs[this.type];
@@ -43,11 +42,11 @@ export class MessageBar {
         }
     }
     render() {
-        return (h(Host, { key: 'fde829252806d3543773140d7b60ce2f019684d6' }, h("div", { key: '7a6357cf5df4bd1dab484d547963a2fb6a350be0', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '59c63a7788560b63c0466bc846c93e4ceb95062f', color: this.color, name: this.icon }), h("div", { key: 'c957a317c504b36868ae79562bbeb2aa4915180c', class: "message-content" }, h("slot", { key: '17cfacb77d90b69f48e11ddae0b7183949bd66d2' })), this.dismissible ? (h("ix-icon-button", { icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
+        return (h(Host, { key: '1fb3f27a04daabab638277ba762e85a81256132e' }, h("div", { key: 'a559e8bc15be1a2853aaff1f0fd222302f927dde', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '698e1ebfb05b76c3ab71124037d8364e48cf364f', color: this.color, name: this.icon }), h("div", { key: '005b7ca81b0da36c97c926b53e1abfdac1a89a0c', class: "message-content" }, h("slot", { key: '6f11597b34396b8498349bc01e747b0fe628264c' })), !this.persistent && (h("ix-icon-button", { key: '439049ca5fee49dc0b624cbc81c7d96a3408893a', icon: iconClose, iconColor: "color-soft-text", size: "24", variant: "tertiary", onClick: () => {
                 if (this.divElement) {
                     this.closeAlert(this.divElement);
                 }
-            }, "data-testid": "close-btn" })) : (''))));
+            }, "data-testid": "close-btn" })))));
     }
     static get is() { return "ix-message-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -68,17 +67,14 @@ export class MessageBar {
                 "attribute": "type",
                 "mutable": false,
                 "complexType": {
-                    "original": "| 'alarm'\n    | 'danger'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary'",
-                    "resolved": "\"alarm\" | \"critical\" | \"danger\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "original": "| 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary'",
+                    "resolved": "\"alarm\" | \"critical\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Type `danger` will be removed in 4.0. Use `alarm` instead."
-                        }],
+                    "tags": [],
                     "text": "Specifies the type of the alert."
                 },
                 "getter": false,
@@ -86,9 +82,9 @@ export class MessageBar {
                 "reflect": false,
                 "defaultValue": "'info'"
             },
-            "dismissible": {
+            "persistent": {
                 "type": "boolean",
-                "attribute": "dismissible",
+                "attribute": "persistent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -99,12 +95,12 @@ export class MessageBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, close button is enabled and alert can be dismissed by the user"
+                    "text": "If true, close button is disabled and alert cannot be dismissed by the user"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             }
         };
     }
@@ -151,7 +147,6 @@ export class MessageBar {
 MessageBar.duration = 300;
 MessageBar.messageTypeConfigs = {
     alarm: { icon: iconError, color: 'color-alarm' },
-    danger: { icon: iconError, color: 'color-alarm' },
     critical: { icon: iconWarningRhomb, color: 'color-critical' },
     warning: { icon: iconWarning, color: 'color-warning' },
     success: { icon: iconSuccess, color: 'color-success' },

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

@@ -1 +1 @@
-{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/components/message-bar/message-bar.tsx"],"names":[],"mappings":"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","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\nimport {\n  iconClose,\n  iconError,\n  iconInfo,\n  iconNotification,\n  iconSuccess,\n  iconWarning,\n  iconWarningRhomb,\n} from '@siemens/ix-icons/icons';\n\ninterface MessageTypeConfig {\n  icon?: string;\n  color: NotificationColor;\n}\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   * @deprecated Type `danger` will be removed in 4.0. Use `alarm` instead.\n   */\n  @Prop() type:\n    | 'alarm'\n    | 'danger'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange!: EventEmitter;\n\n  /**\n   * An event emitted when the close animation is completed\n   */\n  @Event() closeAnimationCompleted!: EventEmitter;\n\n  @State() icon?: string;\n  @State() color?: NotificationColor;\n\n  private static readonly duration = 300;\n  private static readonly messageTypeConfigs: Record<\n    string,\n    MessageTypeConfig\n  > = {\n    alarm: { icon: iconError, color: 'color-alarm' },\n    danger: { icon: iconError, color: 'color-alarm' },\n    critical: { icon: iconWarningRhomb, color: 'color-critical' },\n    warning: { icon: iconWarning, color: 'color-warning' },\n    success: { icon: iconSuccess, color: 'color-success' },\n    info: { icon: iconInfo, color: 'color-info' },\n    neutral: { icon: iconNotification, color: 'color-neutral' },\n    primary: { icon: iconNotification, color: 'color-primary' },\n  };\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    const config = MessageBar.messageTypeConfigs[this.type];\n    if (config) {\n      this.icon = config.icon;\n      this.color = config.color;\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    const { defaultPrevented } = this.closedChange.emit();\n\n    if (!defaultPrevented) {\n      animate(el, {\n        duration: MessageBar.duration,\n        opacity: [1, 0],\n        easing: 'easeOutSine',\n        onComplete: () => {\n          el.classList.add('message-bar-hidden');\n          this.closeAnimationCompleted.emit();\n        },\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon={iconClose}\n              iconColor=\"color-soft-text\"\n              size=\"24\"\n              variant=\"tertiary\"\n              onClick={() => {\n                if (this.divElement) {\n                  this.closeAlert(this.divElement);\n                }\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"message-bar.js","sourceRoot":"","sources":["../../../src/components/message-bar/message-bar.tsx"],"names":[],"mappings":"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","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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\nimport {\n  iconClose,\n  iconError,\n  iconInfo,\n  iconNotification,\n  iconSuccess,\n  iconWarning,\n  iconWarningRhomb,\n} from '@siemens/ix-icons/icons';\n\ninterface MessageTypeConfig {\n  icon?: string;\n  color: NotificationColor;\n}\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type:\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'success'\n    | 'info'\n    | 'neutral'\n    | 'primary' = 'info';\n\n  /**\n   * If true, close button is disabled and alert cannot be dismissed by the user\n   */\n  @Prop() persistent = false;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange!: EventEmitter;\n\n  /**\n   * An event emitted when the close animation is completed\n   */\n  @Event() closeAnimationCompleted!: EventEmitter;\n\n  @State() icon?: string;\n  @State() color?: NotificationColor;\n\n  private static readonly duration = 300;\n  private static readonly messageTypeConfigs: Record<\n    string,\n    MessageTypeConfig\n  > = {\n    alarm: { icon: iconError, color: 'color-alarm' },\n    critical: { icon: iconWarningRhomb, color: 'color-critical' },\n    warning: { icon: iconWarning, color: 'color-warning' },\n    success: { icon: iconSuccess, color: 'color-success' },\n    info: { icon: iconInfo, color: 'color-info' },\n    neutral: { icon: iconNotification, color: 'color-neutral' },\n    primary: { icon: iconNotification, color: 'color-primary' },\n  };\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    const config = MessageBar.messageTypeConfigs[this.type];\n    if (config) {\n      this.icon = config.icon;\n      this.color = config.color;\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    const { defaultPrevented } = this.closedChange.emit();\n\n    if (!defaultPrevented) {\n      animate(el, {\n        duration: MessageBar.duration,\n        opacity: [1, 0],\n        easing: 'easeOutSine',\n        onComplete: () => {\n          el.classList.add('message-bar-hidden');\n          this.closeAnimationCompleted.emit();\n        },\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {!this.persistent && (\n            <ix-icon-button\n              icon={iconClose}\n              iconColor=\"color-soft-text\"\n              size=\"24\"\n              variant=\"tertiary\"\n              onClick={() => {\n                if (this.divElement) {\n                  this.closeAlert(this.divElement);\n                }\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -31,13 +31,13 @@ export class Modal {
          */
         this.size = '360';
         /**
-         * Should the modal be animated
+         * Should the modal animation be disabled
          */
-        this.animation = true;
+        this.disableAnimation = false;
         /**
-         * Show a backdrop behind the modal dialog
+         * Hide the backdrop behind the modal dialog
          */
-        this.backdrop = true;
+        this.hideBackdrop = false;
         /**
          * Dismiss modal on backdrop click
          */
@@ -47,9 +47,9 @@ export class Modal {
          */
         this.centered = false;
         /**
-         * If set to true the modal can be closed by pressing the Escape key
+         * If set to true the modal cannot be closed by pressing the Escape key
          */
-        this.closeOnEscape = true;
+        this.disableEscapeClose = false;
         this.modalVisible = false;
     }
     onKey(e) {
@@ -61,7 +61,7 @@ export class Modal {
         return this.hostElement.shadowRoot.querySelector('dialog');
     }
     slideInModal() {
-        const duration = this.animation ? Animation.mediumTime : 0;
+        const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];
         animate(this.dialog, {
             duration,
@@ -72,7 +72,7 @@ export class Modal {
         });
     }
     slideOutModal(completeCallback) {
-        const duration = this.animation ? Animation.mediumTime : 0;
+        const duration = this.disableAnimation ? 0 : Animation.mediumTime;
         const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];
         animate(this.dialog, {
             duration,
@@ -161,17 +161,17 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: 'a564177392104f0864b5d3420cc16c902a932b02', class: {
+        return (h(Host, { key: '4506ba59786ba8ff12d09a2746ef6861247731e2', class: {
                 visible: this.modalVisible,
-                'no-backdrop': this.backdrop === false,
+                'no-backdrop': this.hideBackdrop,
                 'align-center': this.centered,
-            } }, h("div", { key: '5d06f39b564cfca3e1b956cd2343fc29d8daf8ad', class: "dialog-backdrop" }, h("dialog", { key: '5c47755164df8b5f6767e8dad6b5fbfbcfee03b7', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: 'f205f5c38f52b057e7adb6664e70a5c36854a486', class: "dialog-backdrop" }, h("dialog", { key: '87d22e5945e4e07e03c735032942d48922b9e621', "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: 'e2cd48ec148b91a57a467dfb903e1308e104a5ad' })))));
+            } }, h("slot", { key: 'e2e2945cb9f5111dacf0a889a06fd74a1dd97e9a' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -213,9 +213,9 @@ export class Modal {
                 "reflect": false,
                 "defaultValue": "'360'"
             },
-            "animation": {
+            "disableAnimation": {
                 "type": "boolean",
-                "attribute": "animation",
+                "attribute": "disable-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -226,16 +226,16 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Should the modal be animated"
+                    "text": "Should the modal animation be disabled"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
-            "backdrop": {
+            "hideBackdrop": {
                 "type": "boolean",
-                "attribute": "backdrop",
+                "attribute": "hide-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -246,12 +246,12 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show a backdrop behind the modal dialog"
+                    "text": "Hide the backdrop behind the modal dialog"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "closeOnBackdropClick": {
                 "type": "boolean",
@@ -278,8 +278,8 @@ export class Modal {
                 "attribute": "before-dismiss",
                 "mutable": false,
                 "complexType": {
-                    "original": "(reason?: any) => boolean | Promise<boolean>",
-                    "resolved": "((reason?: any) => boolean | Promise<boolean>) | undefined",
+                    "original": "(reason?: unknown) => boolean | Promise<boolean>",
+                    "resolved": "((reason?: unknown) => boolean | Promise<boolean>) | undefined",
                     "references": {
                         "Promise": {
                             "location": "global",
@@ -316,9 +316,9 @@ export class Modal {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "closeOnEscape": {
+            "disableEscapeClose": {
                 "type": "boolean",
-                "attribute": "close-on-escape",
+                "attribute": "disable-escape-close",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -329,12 +329,12 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set to true the modal can be closed by pressing the Escape key"
+                    "text": "If set to true the modal cannot be closed by pressing the Escape key"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             }
         };
     }
@@ -401,7 +401,7 @@ export class Modal {
             },
             "dismissModal": {
                 "complexType": {
-                    "signature": "<T = any>(reason?: T) => Promise<void>",
+                    "signature": "<T = unknown>(reason?: T) => Promise<void>",
                     "parameters": [{
                             "name": "reason",
                             "type": "T | undefined",
@@ -426,7 +426,7 @@ export class Modal {
             },
             "closeModal": {
                 "complexType": {
-                    "signature": "<T = any>(reason: T) => Promise<void>",
+                    "signature": "<T = unknown>(reason: T) => Promise<void>",
                     "parameters": [{
                             "name": "reason",
                             "type": "T",
@@ -454,6 +454,6 @@ export class Modal {
     static get elementRef() { return "hostElement"; }
 }
 __decorate([
-    OnListener('keydown', (self) => !self.closeOnEscape)
+    OnListener('keydown', (self) => self.disableEscapeClose)
 ], Modal.prototype, "onKey", null);
 //# sourceMappingURL=modal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\nimport { IxModalSize } from './modal.types';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n  private isMouseDownInsideDialog = false;\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss?: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * If set to true the modal can be closed by pressing the Escape key\n   */\n  @Prop() closeOnEscape = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose!: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss!: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => !self.closeOnEscape)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n    const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];\n\n    animate(this.dialog!, {\n      duration,\n      opacity: [0, 1],\n      translateY,\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n    const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];\n\n    animate(this.dialog!, {\n      duration,\n      opacity: [1, 0],\n      translateY,\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onMouseDown(event: MouseEvent) {\n    this.isMouseDownInsideDialog = this.isPointInsideDialog(\n      event.clientX,\n      event.clientY\n    );\n  }\n\n  private onMouseUp(event: MouseEvent) {\n    const isMouseUpInsideDialog = this.isPointInsideDialog(\n      event.clientX,\n      event.clientY\n    );\n\n    if (\n      this.closeOnBackdropClick &&\n      !this.isMouseDownInsideDialog &&\n      !isMouseUpInsideDialog\n    ) {\n      this.dismissModal();\n    }\n  }\n\n  private isPointInsideDialog(x: number, y: number): boolean {\n    const rect = this.dialog!.getBoundingClientRect();\n    return (\n      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom\n    );\n  }\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onMouseDown={(event) => this.onMouseDown(event)}\n            onMouseUp={(event) => this.onMouseUp(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\nimport { IxModalSize } from './modal.types';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n  private isMouseDownInsideDialog = false;\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal animation be disabled\n   */\n  @Prop() disableAnimation = false;\n\n  /**\n   * Hide the backdrop behind the modal dialog\n   */\n  @Prop() hideBackdrop = false;\n\n  /**\n   * Dismiss modal on backdrop click\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss?: (reason?: unknown) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * If set to true the modal cannot be closed by pressing the Escape key\n   */\n  @Prop() disableEscapeClose = false;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose!: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss!: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => self.disableEscapeClose)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot!.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.disableAnimation ? 0 : Animation.mediumTime;\n    const translateY = this.centered ? ['-90%', '-50%'] : [0, 40];\n\n    animate(this.dialog!, {\n      duration,\n      opacity: [0, 1],\n      translateY,\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.disableAnimation ? 0 : Animation.mediumTime;\n    const translateY = this.centered ? ['-50%', '-90%'] : [40, 0];\n\n    animate(this.dialog!, {\n      duration,\n      opacity: [1, 0],\n      translateY,\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onMouseDown(event: MouseEvent) {\n    this.isMouseDownInsideDialog = this.isPointInsideDialog(\n      event.clientX,\n      event.clientY\n    );\n  }\n\n  private onMouseUp(event: MouseEvent) {\n    const isMouseUpInsideDialog = this.isPointInsideDialog(\n      event.clientX,\n      event.clientY\n    );\n\n    if (\n      this.closeOnBackdropClick &&\n      !this.isMouseDownInsideDialog &&\n      !isMouseUpInsideDialog\n    ) {\n      this.dismissModal();\n    }\n  }\n\n  private isPointInsideDialog(x: number, y: number): boolean {\n    const rect = this.dialog!.getBoundingClientRect();\n    return (\n      x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom\n    );\n  }\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = unknown>(reason?: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = unknown>(reason: T) {\n    if (!this.modalVisible) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog!.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.hideBackdrop,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onMouseDown={(event) => this.onMouseDown(event)}\n            onMouseUp={(event) => this.onMouseUp(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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: 'd7bef3767ae242cfdd5a3367c9c2abb1f2c0d4d6' }, h("slot", { key: 'e2b8abbf51791d879a28bc322578e571d5714e8a' })));
+        return (h(Host, { key: 'ad65a8e851473037c8f1cfe43195c59e128c3523' }, h("slot", { key: 'edc352a2acac0a07a090db591cde4d6655f07c72' })));
     }
     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: 'e3164f3ff8999aca095a833b495e5194841f0039' }, h("slot", { key: 'c3765f1f908b7375a6c9f5cf08e7a370a0d750b7' })));
+        return (h(Host, { key: '4b20e10da90fed23f7496eccc6b42e131be0b362' }, h("slot", { key: '7e6c8edcb1d0c7457ba86b7ee8b9bcecbfaa64f3' })));
     }
     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: 'ec19146ced5b95a1b9723ece2aee4fbf6f3a666c' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: '46bac93f4005f43362c02a1852aa3e76e324358f', class: "modal-title" }, h("ix-typography", { key: 'f201f3adcff612e81e34e60d3ed9470aac2f77e7', format: "h5" }, h("slot", { key: '17302db5dbc882983abb1cbb1a46f4c2b9fce9ea' }))), !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: '48c6bb4895a373f75c72f4a2277c6320a958e50c' }, this.icon ? (h("ix-icon", { name: this.icon, color: this.iconColor, size: "32", "aria-label": this.ariaLabelIcon })) : null, h("div", { key: 'b3f10e2fbae37c99d35cc9307858ae59cdc84f60', class: "modal-title" }, h("ix-typography", { key: 'd8949040e5aeef0d06bfa199164c99e9cecf34a8', format: "h5" }, h("slot", { key: 'b09380800d077a862a7c177731ab54848c971934' }))), !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: '6689de127dae752b929ac792e91a9ba2c4bc6691' }, h("ix-spinner", { key: 'fd210b76ae2210b57f1418be5d589eac139ca1a4', variant: "primary" }), h("span", { key: '3d1078bd723bfb37172630f8fd55b34cd2b77c4e', class: 'loading-text' }, h("slot", { key: '21de9ad0be01c0da9b7c8ca0bfbca99f5f5731f4' }))));
+        return (h(Host, { key: '3b29d3ee63910614f836c0d67039c7fe8c979766' }, h("ix-spinner", { key: 'efe7302d8f9c34e2efeda5f2213ba46969ad7a3f', variant: "primary" }), h("span", { key: '882e0acb894c8c902bc1d76a4447e87c432fa550', class: 'loading-text' }, h("slot", { key: 'f78b2c4aeeb4e4898e78beedd4ee0bb9ac7d4d36' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,9 +33,9 @@ export class Pagination {
          */
         this.itemCount = 15;
         /**
-         * Show item count in advanced mode
+         * Hide item count in advanced mode
          */
-        this.showItemCount = true;
+        this.hideItemCount = false;
         /**
          * Total number of pages
          */
@@ -45,16 +45,15 @@ export class Pagination {
          */
         this.selectedPage = 0;
         /**
-         * i18n
+         * i18n label for 'Page'
          */
         this.i18nPage = 'Page';
         /**
-         * i18n
+         * i18n label for 'of'
          */
         this.i18nOf = 'of';
         /**
-        /**
-         * i18n
+         * i18n label for 'Items'
          */
         this.i18nItems = 'Items';
     }
@@ -147,16 +146,16 @@ export class Pagination {
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '354899290f0e2e6656ab844fda9446ecf6c9f989' }, h("ix-icon-button", { key: '47bf55e45d0f89de9d31ebc83703793e7fb48203', 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) => {
+        return (h(Host, { key: '5c1ce4b10a43956964e2382e2434784617990be7' }, h("ix-icon-button", { key: 'c7433ed086de60128ba3608efce102f1adb09dc1', 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);
                 }
-            } }), 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: 'f119ba598c7ce46c597d37ba21b07c5039a601b2', disabled: !this.count || this.selectedPage === this.count - 1, variant: "subtle-tertiary", icon: iconChevronRightSmall, onClick: () => this.increase(), "aria-label": this.ariaLabelChevronRightIconButton }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { format: "body" }, this.i18nItems), h("ix-select", { 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: 'afe01f3d6c827f7b12f0d2e29d5a7d42bcea8658', 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: '92ddf5d2fc223e4997819d90abe63dedcc48d47e', class: "item-count" }, h("ix-typography", { key: 'cd66c9539673238192a6c54cd1d5f1ca8b8cc7c0', format: "body" }, this.i18nItems), h("ix-select", { key: '6735cfec67c60535ea17df734ad2e1e9748272f1', 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", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));
+            } }, h("ix-select-item", { key: '618713c24de8a69b7f2e8c424f13bedd9fc8bd5a', label: "10", value: "10" }), h("ix-select-item", { key: '01b222e680485f49dd460c6f10bc9107b0b23286', label: "15", value: "15" }), h("ix-select-item", { key: '49ff338017f595c57d23c8c5fab5470c33b96a30', label: "20", value: "20" }), h("ix-select-item", { key: '0aeda9a1dc0577f30ea31934cf5e6ae4fc9f7842', label: "40", value: "40" }), h("ix-select-item", { key: 'db9ab9fd5f54aa538f7ee6ba617a4d27a9203326', label: "100", value: "100" }))))));
     }
     static get is() { return "ix-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -212,9 +211,9 @@ export class Pagination {
                 "reflect": false,
                 "defaultValue": "15"
             },
-            "showItemCount": {
+            "hideItemCount": {
                 "type": "boolean",
-                "attribute": "show-item-count",
+                "attribute": "hide-item-count",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -225,12 +224,12 @@ export class Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show item count in advanced mode"
+                    "text": "Hide item count in advanced mode"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "count": {
                 "type": "number",
@@ -274,7 +273,7 @@ export class Pagination {
             },
             "i18nPage": {
                 "type": "string",
-                "attribute": "i-1-8n-page",
+                "attribute": "i18n-page",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -285,7 +284,7 @@ export class Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "i18n"
+                    "text": "i18n label for 'Page'"
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +293,7 @@ export class Pagination {
             },
             "i18nOf": {
                 "type": "string",
-                "attribute": "i-1-8n-of",
+                "attribute": "i18n-of",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,7 +304,7 @@ export class Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "i18n"
+                    "text": "i18n label for 'of'"
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +313,7 @@ export class Pagination {
             },
             "i18nItems": {
                 "type": "string",
-                "attribute": "i-1-8n-items",
+                "attribute": "i18n-items",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -325,7 +324,7 @@ export class Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "/**\n  i18n"
+                    "text": "i18n label for 'Items'"
                 },
                 "getter": false,
                 "setter": false,