@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

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

@@ -139,7 +139,7 @@ export class MenuCategory {
         }
     }
     render() {
-        return (h(Host, { key: 'e62e654ac84f229e1f669a732c051d96848c730d', class: {
+        return (h(Host, { key: '1c9a80de76eb1a08932e4065a5247312c175c44a', class: {
                 expanded: this.showItems,
             }, onPointerEnter: () => {
                 this.enterLeaveDebounce.onEnter();
@@ -148,14 +148,14 @@ export class MenuCategory {
                     return;
                 }
                 this.enterLeaveDebounce.onLeave();
-            } }, h("ix-menu-item", { key: 'f64066062bdd83ee3c49228d04877fbe78eb15ce', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '89f722bf950f5428e5b090e14a1ea68be2a27536', class: "category" }, h("div", { key: 'd72fc532b76d2807a3fad5a54e5243dc712383b6', class: "category-text" }, this.label), h("ix-icon", { key: '080cfeb2201ce391ca621fdb1b1bc3b5bfbbe6bb', name: 'chevron-down-small', class: {
+            } }, h("ix-menu-item", { key: '4916e3fb2ef1c00ccf6a90366fb8e5ca1c7e4025', class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClick(e), onFocus: () => this.onPointerEnter(), isCategory: true }, h("div", { key: '1a27c0a36105ac449880ea3925e07d55d7a01f83', class: "category" }, h("div", { key: '7aec0b9d401d6167451907cb44a5b643ef07ac4b', class: "category-text" }, this.label), h("ix-icon", { key: '7e638930a4c9219cd7c86a9492ae5c0d336393c3', name: 'chevron-down-small', class: {
                 'category-chevron': true,
                 'category-chevron--open': this.showItems,
-            } }))), h("div", { key: '5f59b31543e5f71fb188a1b6e952e732ef1c3db4', ref: (ref) => (this.menuItemsContainer = ref), class: {
+            } }))), h("div", { key: '609ce8e3554a871899c5c6c2cd2fad40224b59a8', 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: '9d7cdb7ce906a6d2cbeeac5e3d71dc0c49cf1327', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+            } }, this.showItems ? h("slot", null) : null), h("ix-dropdown", { key: '1299830caade30d34fcfa03522546fe1a4b54296', closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
                 this.showDropdown = dropdownShown;
             }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
                 mainAxis: 3,
@@ -164,8 +164,11 @@ export class MenuCategory {
                     if (e.target.tagName === 'IX-MENU-ITEM') {
                         this.showDropdown = false;
                     }
+                    else {
+                        e.preventDefault();
+                    }
                 }
-            } }, h("ix-dropdown-item", { key: 'f8d2ec34a4602f977802808e23c3ebc811d2d0ce', class: 'category-dropdown-header' }, h("ix-typography", { key: '1f6fea32ef8b6786cdd35285e44e9715c7622ad9', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: 'f868a430532498205b95c76addc1c3ef2f5ff239' }), h("slot", { key: 'ba6dd154693ae5040fdadf4c92d4d10e5dc79d2b' }))));
+            } }, h("ix-dropdown-item", { key: '0a2f3039f44c9b545d29aef0ed3600188edbbaf2', class: 'category-dropdown-header' }, h("ix-typography", { key: '841736401537eb57c8446a9e86282d4f5eda900d', variant: "default-title-single", color: "std" }, this.label)), h("ix-divider", { key: '5bb1e9beec4f9fca106ccf24266bf16216dba34b' }), h("slot", { key: '8b0c28b1f92c96f93187373e2bef4bfe88156bfe' }))));
     }
     static get is() { return "ix-menu-category"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"menu-category.js","sourceRoot":"","sources":["../../../src/components/menu-category/menu-category.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 */\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications: number;\n\n  /** @internal */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Event({ bubbles: true, cancelable: true })\n  closeOtherCategories: EventEmitter;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer: MutationObserver;\n  private menuItemsContainer: HTMLDivElement;\n  private ixMenu: HTMLIxMenuElement;\n\n  private enterLeaveDebounce = createEnterLeaveDebounce(\n    () => {\n      this.onPointerEnter();\n    },\n    () => {\n      this.onPointerLeave();\n    }\n  );\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onPointerEnter() {\n    if (this.ixMenu.expand) {\n      return;\n    }\n    this.closeOtherCategories.emit();\n    this.showDropdown = true;\n  }\n\n  @Listen('closeOtherCategories', { target: 'window' })\n  private onPointerLeave() {\n    this.showDropdown = false;\n  }\n\n  private onCategoryClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n  }\n\n  private onNestedItemsChanged() {\n    this.nestedItems = this.getNestedItems();\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentWillLoad() {\n    const closestMenu = closestIxMenu(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.menuExpand = this.ixMenu.expand;\n    this.showItems = this.isCategoryItemListVisible();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n        if (!menuExpand) {\n          this.clearMenuItemStyles();\n        }\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  clearMenuItemStyles() {\n    this.menuItemsContainer.style.removeProperty('max-height');\n    this.menuItemsContainer.style.removeProperty('opacity');\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n        onPointerEnter={() => {\n          this.enterLeaveDebounce.onEnter();\n        }}\n        onPointerLeave={(event: PointerEvent) => {\n          if (event.pointerType === 'touch') {\n            return;\n          }\n          this.enterLeaveDebounce.onLeave();\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClick(e)}\n          onFocus={() => this.onPointerEnter()}\n          isCategory\n        >\n          <div class=\"category\">\n            <div class=\"category-text\">{this.label}</div>\n            <ix-icon\n              name={'chevron-down-small'}\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n            'menu-items--collapsed': !this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography variant=\"default-title-single\" color=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-category.js","sourceRoot":"","sources":["../../../src/components/menu-category/menu-category.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 */\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { createEnterLeaveDebounce } from './enter-leave';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-menu-category',\n  styleUrl: 'menu-category.scss',\n  shadow: true,\n})\nexport class MenuCategory {\n  @Element() hostElement: HTMLIxMenuCategoryElement;\n\n  /**\n   * Display name of the category\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of the category\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on the category\n   */\n  @Prop() notifications: number;\n\n  /** @internal */\n  // eslint-disable-next-line @stencil-community/decorators-style\n  @Event({ bubbles: true, cancelable: true })\n  closeOtherCategories: EventEmitter;\n\n  @State() menuExpand = false;\n  @State() showItems = false;\n  @State() showDropdown = false;\n  @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n  private observer: MutationObserver;\n  private menuItemsContainer: HTMLDivElement;\n  private ixMenu: HTMLIxMenuElement;\n\n  private enterLeaveDebounce = createEnterLeaveDebounce(\n    () => {\n      this.onPointerEnter();\n    },\n    () => {\n      this.onPointerLeave();\n    }\n  );\n\n  private isNestedItemActive() {\n    return this.getNestedItems().some((item) => item.active);\n  }\n\n  private getNestedItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(':scope ix-menu-item')\n    ) as HTMLIxMenuItemElement[];\n  }\n\n  private getNestedItemsHeight() {\n    const items = this.getNestedItems();\n\n    return items.length * DefaultIxMenuItemHeight;\n  }\n\n  private onExpandCategory(showItems: boolean) {\n    if (showItems) {\n      this.animateFadeIn();\n    } else {\n      this.animateFadeOut();\n    }\n  }\n\n  private animateFadeOut() {\n    const slotHideThresholdMs = 25;\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [1, 0],\n      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n      complete: () => {\n        setTimeout(() => {\n          this.showItems = false;\n          this.showDropdown = false;\n        }, DefaultAnimationTimeout + slotHideThresholdMs);\n      },\n    });\n  }\n\n  private animateFadeIn() {\n    anime({\n      targets: this.menuItemsContainer,\n      duration: DefaultAnimationTimeout,\n      easing: 'easeInSine',\n      opacity: [0, 1],\n      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n      begin: () => {\n        this.showItems = true;\n        this.showDropdown = false;\n      },\n    });\n  }\n\n  private onPointerEnter() {\n    if (this.ixMenu.expand) {\n      return;\n    }\n    this.closeOtherCategories.emit();\n    this.showDropdown = true;\n  }\n\n  @Listen('closeOtherCategories', { target: 'window' })\n  private onPointerLeave() {\n    this.showDropdown = false;\n  }\n\n  private onCategoryClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n  }\n\n  private onNestedItemsChanged() {\n    this.nestedItems = this.getNestedItems();\n  }\n\n  private isCategoryItemListVisible() {\n    return this.menuExpand && (this.showItems || this.isNestedItemActive());\n  }\n\n  componentWillLoad() {\n    const closestMenu = closestIxMenu(this.hostElement);\n    if (!closestMenu) {\n      throw Error('ix-menu-category can only be used as a child of ix-menu');\n    }\n    this.ixMenu = closestMenu;\n\n    this.menuExpand = this.ixMenu.expand;\n    this.showItems = this.isCategoryItemListVisible();\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n    this.observer.observe(this.hostElement, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => {\n      this.onNestedItemsChanged();\n    });\n\n    this.ixMenu.addEventListener(\n      'expandChange',\n      ({ detail: menuExpand }: CustomEvent<boolean>) => {\n        this.menuExpand = menuExpand;\n        if (!menuExpand) {\n          this.clearMenuItemStyles();\n        }\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\n  }\n\n  clearMenuItemStyles() {\n    this.menuItemsContainer.style.removeProperty('max-height');\n    this.menuItemsContainer.style.removeProperty('opacity');\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.showItems,\n        }}\n        onPointerEnter={() => {\n          this.enterLeaveDebounce.onEnter();\n        }}\n        onPointerLeave={(event: PointerEvent) => {\n          if (event.pointerType === 'touch') {\n            return;\n          }\n          this.enterLeaveDebounce.onLeave();\n        }}\n      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClick(e)}\n          onFocus={() => this.onPointerEnter()}\n          isCategory\n        >\n          <div class=\"category\">\n            <div class=\"category-text\">{this.label}</div>\n            <ix-icon\n              name={'chevron-down-small'}\n              class={{\n                'category-chevron': true,\n                'category-chevron--open': this.showItems,\n              }}\n            ></ix-icon>\n          </div>\n        </ix-menu-item>\n        <div\n          ref={(ref) => (this.menuItemsContainer = ref!)}\n          class={{\n            'menu-items': true,\n            'menu-items--expanded': this.showItems,\n            'menu-items--collapsed': !this.showItems,\n          }}\n        >\n          {this.showItems ? <slot></slot> : null}\n        </div>\n        <ix-dropdown\n          closeBehavior={'both'}\n          show={this.showDropdown}\n          onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n            this.showDropdown = dropdownShown;\n          }}\n          class={'category-dropdown'}\n          anchor={this.hostElement}\n          placement=\"right-start\"\n          offset={{\n            mainAxis: 3,\n          }}\n          onClick={(e) => {\n            if (e.target instanceof HTMLElement) {\n              if (e.target.tagName === 'IX-MENU-ITEM') {\n                this.showDropdown = false;\n              } else {\n                e.preventDefault();\n              }\n            }\n          }}\n        >\n          <ix-dropdown-item class={'category-dropdown-header'}>\n            <ix-typography variant=\"default-title-single\" color=\"std\">\n              {this.label}\n            </ix-typography>\n          </ix-dropdown-item>\n          <ix-divider></ix-divider>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -68,9 +68,6 @@
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: -1px;
 }
-:host .tab:not(:last-child) {
-  margin-bottom: 0.5rem;
-}
 :host .notification {
   display: inline-flex;
   position: absolute;

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

@@ -89,15 +89,15 @@ export class MenuItem {
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: '777964dc37701b147cba8070470a0dba049ccc9b', class: {
+        return (h(Host, Object.assign({ key: '747ed4837d59ca4a8c0afd678fae6e2b79fc70f9', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '20f94fbcf3babdadc83c4c2b4a267c6d74266541', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: 'a168fd4927264ce970c52098a6a4a1263db48f6d', class: "tab-text text-default" }, this.label, " ", h("slot", { key: '36a52eb3d0cd6f96c5c3a6f36bffa1593c78fb1c' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: '882287eba4dcdde8a36f4951716e7db5985bbb73', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { key: '2cb056d1b5d45ea266e3315d6bfeb87b9eddb718', class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: 'daf7c4bc26e1ea027ed208092b39df712716e0a9', class: "tab-text text-default" }, this.label, " ", h("slot", { key: '6cb41c9af3cdda340ad202f8bdcdf643c4883dd9' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
-            !this.menuExpanded && (h("ix-tooltip", { for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+            !this.menuExpanded && (h("ix-tooltip", { key: '6867e8b37d599f0f2aea88a5a8098f01d74f9357', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }
     static get is() { return "ix-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.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  Element,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Label of the menu item. Will also be used as tooltip text\n   *\n   * @since 2.2.0\n   */\n  @Prop() label: string;\n\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   *\n   * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop({ mutable: true }) tabIcon: string;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   */\n  @Prop({ mutable: true }) icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  /** @internal */\n  @Prop() isCategory: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() tooltip: string;\n  @State() menuExpanded: boolean;\n\n  private buttonRef = makeRef<HTMLButtonElement>();\n  private isHostedInsideCategory = false;\n  private menuExpandedDisposer: Disposable;\n\n  private observer: MutationObserver = createMutationObserver(() => {\n    this.tooltip = this.label ?? this.hostElement.innerText;\n  });\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n\n    this.onIconChange();\n    this.onTabIconChange();\n\n    this.menuExpanded = menuController.nativeElement.expand;\n    this.menuExpandedDisposer = menuController.expandChange.on(\n      (expand) => (this.menuExpanded = expand)\n    );\n  }\n\n  componentWillRender() {\n    readTask(() => {\n      this.tooltip = this.label ?? this.hostElement.innerText;\n    });\n  }\n\n  connectedCallback() {\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.menuExpandedDisposer) {\n      this.menuExpandedDisposer.dispose();\n    }\n  }\n\n  @Watch('icon')\n  onIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.icon = 'document';\n    }\n  }\n\n  @Watch('tabIcon')\n  onTabIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.tabIcon = 'document';\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n          'tab-nested': this.isHostedInsideCategory,\n        }}\n        {...extendedAttributes}\n      >\n        <button\n          class=\"tab\"\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n          ref={this.buttonRef}\n        >\n          {(this.icon || this.tabIcon) && (\n            <ix-icon\n              class={'tab-icon'}\n              name={this.icon ?? this.tabIcon}\n            ></ix-icon>\n          )}\n          {this.notifications ? (\n            <div class=\"notification\">\n              <div class=\"pill\">{this.notifications}</div>\n            </div>\n          ) : null}\n          <span class=\"tab-text text-default\">\n            {this.label} <slot></slot>\n          </span>\n        </button>\n        {!this.isCategory &&\n          !this.isHostedInsideCategory &&\n          !this.menuExpanded && (\n            <ix-tooltip\n              for={this.buttonRef.waitForCurrent()}\n              placement={'right'}\n              showDelay={1000}\n            >\n              {this.tooltip}\n            </ix-tooltip>\n          )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.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  Element,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Label of the menu item. Will also be used as tooltip text\n   *\n   * @since 2.2.0\n   */\n  @Prop() label: string;\n\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   *\n   * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop({ mutable: true }) tabIcon: string;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   */\n  @Prop({ mutable: true }) icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  /** @internal */\n  @Prop() isCategory: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() tooltip: string;\n  @State() menuExpanded: boolean;\n\n  private buttonRef = makeRef<HTMLButtonElement>();\n  private isHostedInsideCategory = false;\n  private menuExpandedDisposer: Disposable;\n\n  private observer: MutationObserver = createMutationObserver(() => {\n    this.tooltip = this.label ?? this.hostElement.innerText;\n  });\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n\n    this.onIconChange();\n    this.onTabIconChange();\n\n    this.menuExpanded = menuController.nativeElement.expand;\n    this.menuExpandedDisposer = menuController.expandChange.on(\n      (expand) => (this.menuExpanded = expand)\n    );\n  }\n\n  componentWillRender() {\n    readTask(() => {\n      this.tooltip = this.label ?? this.hostElement.innerText;\n    });\n  }\n\n  connectedCallback() {\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.menuExpandedDisposer) {\n      this.menuExpandedDisposer.dispose();\n    }\n  }\n\n  @Watch('icon')\n  onIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.icon = 'document';\n    }\n  }\n\n  @Watch('tabIcon')\n  onTabIconChange() {\n    if (\n      !this.isHostedInsideCategory &&\n      !this.hostElement.icon &&\n      !this.hostElement.tabIcon\n    ) {\n      this.tabIcon = 'document';\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n          'tab-nested': this.isHostedInsideCategory,\n        }}\n        {...extendedAttributes}\n      >\n        <button\n          class=\"tab\"\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n          ref={this.buttonRef}\n        >\n          {(this.icon || this.tabIcon) && (\n            <ix-icon\n              class={'tab-icon'}\n              name={this.icon ?? this.tabIcon}\n            ></ix-icon>\n          )}\n          {this.notifications ? (\n            <div class=\"notification\">\n              <div class=\"pill\">{this.notifications}</div>\n            </div>\n          ) : null}\n          <span class=\"tab-text text-default\">\n            {this.label} <slot></slot>\n          </span>\n        </button>\n        {!this.isCategory &&\n          !this.isHostedInsideCategory &&\n          !this.menuExpanded && (\n            <ix-tooltip\n              for={this.buttonRef.waitForCurrent()}\n              placement={'right'}\n              showDelay={1000}\n            >\n              {this.tooltip}\n            </ix-tooltip>\n          )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -215,6 +215,12 @@ a {
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -26,7 +26,7 @@ export class MenuSettings {
         forceUpdate(this.el);
     }
     render() {
-        return h(MenuTabs, { key: '6ea4bb42c9f8da5416ba88e72ce537fed3c7949a', context: this });
+        return h(MenuTabs, { key: 'f2d6521b17f591cbdd009b220d85ccf1daa2f09c', context: this });
     }
     static get is() { return "ix-menu-settings"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class MenuSettingsItem {
         });
     }
     render() {
-        return (h(Host, { key: 'ece4d8e415ca694383a7a2e3bd55733e43521143' }, h("slot", { key: '3da9723abce35580aa1d6382ff936887a538fe9e' })));
+        return (h(Host, { key: '95940cf98b7f75afe704575f7379d9debf6f0666' }, h("slot", { key: 'd65510239d1f1d0d4dcfc88288fbad819a5ca942' })));
     }
     static get is() { return "ix-menu-settings-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,6 +57,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -42,7 +42,7 @@ export class MessageBar {
         this.closedChange.emit();
     }
     render() {
-        return (h(Host, { key: '1e6b060fd39fb008c5ce8e56553b7ee235d5db2d' }, h("div", { key: 'a0f00d550a6c2e2f61918bbccd2c342100e73dcd', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '5bbfa1b8fcd0025b4d2fa0b488c604458fc4e131', color: this.color, name: this.icon }), h("div", { key: '78e83b8a02ea46b6b3ba65690d5939f00a63ca78', class: "message-content" }, h("slot", { key: 'b5813c317b7ea1b0c0e6919488016a43140dd68f' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (h(Host, { key: '89f424843ed559d787f88edd431f1321086cbbb2' }, h("div", { key: '3f450ca115c040e749a0926d896dc2bb7ad3648d', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, h("ix-icon", { key: '73dcaa37d965d84b754cb14e58c3442665fcca07', color: this.color, name: this.icon }), h("div", { key: 'b5d5178e53c550320803ffa2ac4da925db284fc7', class: "message-content" }, h("slot", { key: 'e9d97812edc2c45d0c16f57d29352f5357312720' })), this.dismissible ? (h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

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

@@ -137,17 +137,17 @@ export class Modal {
         this.ariaAttributes = a11yHostAttributes(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '567694260986bea7c1ba8b63f00f5035b03b8961', class: {
+        return (h(Host, { key: 'e7e27615541ea127c4d9608a71f447f169cde5d3', class: {
                 visible: this.modalVisible,
                 'no-backdrop': this.backdrop === false,
                 'align-center': this.centered,
-            } }, h("div", { key: '8a6149cbd64c7007e0492df375242d6fc8e54f0b', class: "dialog-backdrop" }, h("dialog", { key: '4ef88c174fc5066d2075929aa770fe17f68a5bec', "aria-modal": a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+            } }, h("div", { key: '3a4e1950295bec70cfdf1a332a9e9e4ab3186472', class: "dialog-backdrop" }, h("dialog", { key: '4455ba17c66dc4d03a792a9aeea11d1380c31674', "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(), onClick: (event) => this.onModalClick(event), onCancel: (e) => {
                 e.preventDefault();
                 this.dismissModal();
-            } }, h("slot", { key: '08d753b7ec1679b13fa4052a302d873efbdf381c' })))));
+            } }, h("slot", { key: '383eae1fa01e4159ca2d512f477532f51c56664a' })))));
     }
     static get is() { return "ix-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -172,7 +172,7 @@ export class Modal {
                     "references": {
                         "IxModalSize": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/modal/modal.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/modal/modal.tsx",
                             "id": "src/components/modal/modal.tsx::IxModalSize"
                         }
                     }

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

@@ -40,6 +40,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalContent {
     render() {
-        return (h(Host, { key: 'ae7d626442e1d32189d5811a76b9921e893a2708' }, h("slot", { key: '09c33581a65e4db3f54ee84f625bf5c601b0178c' })));
+        return (h(Host, { key: '709b6b9fda6d3560e4a8b2703f8c72f271490a4c' }, h("slot", { key: '900625af9e6dbb6b0254fb13fc6acc8cb4e98fc4' })));
     }
     static get is() { return "ix-modal-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,6 +42,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ModalFooter {
     render() {
-        return (h(Host, { key: '10d32ee56938d12d5300cc8bccb401a4492ddb85' }, h("slot", { key: '63b0a1b1611bfd377192b6f49e22fc22861f809b' })));
+        return (h(Host, { key: 'ad33c54a40036e5e1905a816957ffdb212bc4587' }, h("slot", { key: 'ad7f526274c316b791b422c7eab0a5efa9a44852' })));
     }
     static get is() { return "ix-modal-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,6 +40,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

@@ -39,7 +39,7 @@ export class ModalHeader {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: '330fd598a3b07d2f41c9f683923101f77d214fe5' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: 'a07ec792401066c71a1f4d50aa318a38c3fbe0ee', variant: 'default-title' }, h("slot", { key: '9c1ba3358ad6efb9971ed896764441c1a3fc4a89' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (h(Host, { key: 'e0edc0b5eca59209ecbe32b5777383244e6e1153' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: '4981a025990dfc2776afed400aba5cf9114bc44d', variant: 'default-title' }, h("slot", { key: 'd9915d27dbccf15f71b97b6c7e34e294c07e31e7' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : 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: 'f6d440918bef7125ac06449ab6d0cd4088f5fefb' }, h("ix-spinner", { key: '3efc2e66c193f2af94f4f5d6dc3e91daa2049008', variant: "primary" }), h("span", { key: '4d81c46bedae034801a35637ca78bd8f2b618124', class: 'loading-text' }, h("slot", { key: '90bf6e1aeac791f70c203fb6bf32dcb7cb313719' }))));
+        return (h(Host, { key: '8e3c29a9c15b121a2da0acebdf1a00dbe0d18c52' }, h("ix-spinner", { key: 'bc602e7bc4b0264b19be3823e78cc63c7adc39fa', variant: "primary" }), h("span", { key: '69d563df6c6a05ece5723c8c94d24d546831aca4', class: 'loading-text' }, h("slot", { key: 'b369c9d0c257a9c0c11584c72f0696eb969bd13d' }))));
     }
     static get is() { return "ix-modal-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -359,6 +359,12 @@ input:read-only, input.readonly {
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -427,6 +433,12 @@ input:read-only, input.readonly {
   display: none;
 }
 
+@-moz-document url-prefix() {
+  * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 /* width */
 ::-webkit-scrollbar {
   width: 0.5rem;
@@ -1089,6 +1101,12 @@ input:read-only, input.readonly {
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -1126,6 +1144,8 @@ input:read-only, input.readonly {
   width: 4.125rem;
   text-align: center;
   margin: 0 0.5rem;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
 }
 :host .page-buttons {
   white-space: nowrap;

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

@@ -124,10 +124,10 @@ export class Pagination {
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: 'dfb53c78222c3c907d955c9548da14d68b0e94f8' }, h("ix-icon-button", { key: '80935e6cfdff052b4a9280fd0edeed6a2c27e007', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'bac7c247befd2262c9c01c95d2feba78dc4dfa12', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), h("ix-icon-button", { key: 'd6d17f40ee390398252466da12abecef4952b7ce', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { 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" })))) : ('')));

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

@@ -61,6 +61,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;
@@ -152,6 +158,9 @@
   transform: rotate(180deg);
   flex-direction: row-reverse;
 }
+:host .left-right-pane .title .rotate ix-icon {
+  transform: rotate(90deg);
+}
 :host .left-right-pane .title-finished {
   padding: 0 !important;
   margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);

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

@@ -403,7 +403,7 @@ export class Pane {
         }
     }
     render() {
-        return (h(Host, { key: '64708a95cd9ab661211a6ea1ed696eafe2904627', class: {
+        return (h(Host, { key: '10c2543fa3814a44f4a696b768070da6a0b2ce83', class: {
                 'inline-color': !this.floating,
                 'mobile-overlay': this.expanded && this.isMobile,
                 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,
@@ -428,28 +428,28 @@ export class Pane {
                 'box-shadow': this.floating,
                 'aria-expanded': this.expanded,
                 'not-visible': this.hideOnCollapse && !this.expanded,
-            } }, h("aside", { key: '6985605b745db5acedace6039bf709c586474d3a', class: {
+            } }, h("aside", { key: '4bea08d18307f21ca3d71874117152c10acd9ce9', 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: '6c4fe6cf539de045dc22abb27693fdc94dc25fbf', id: "title-div", class: {
+            } }, h("div", { key: 'b86bd206f53643fb15f411528dd9e41e1d060ef8', 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: 'e9e308ae81e48e90e2636f050112c757b58bc16d', class: "title-icon", size: "24", icon: this.expanded
+            } }, h("ix-icon-button", { key: '4f58db9432c7685521d7a60257fff08118bc3c76', class: "title-icon", size: "24", icon: this.expanded
                 ? this.isMobile || this.hideOnCollapse
                     ? 'close'
                     : this.expandIcon
                 : this.minimizeIcon, ghost: true, onClick: () => {
                 this.expanded = !this.expanded;
-            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: '7c4c9a086e6e9c1434ded33ac11b6ed9033c4def', class: {
+            }, "aria-controls": this.composition + 'ToggleButton' }), h("span", { key: 'bd88452cdede62871391416c736ff80ae29f14a0', class: {
                 'title-text': true,
                 rotate: !this.expanded && !this.isMobile && this.isLeftRightPane,
-            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: 'fb0aea90f3af3e436712dcd540247925b8ad96b0', class: "title-text-overflow" }, h("ix-typography", { key: 'f1c18efa4e71b8387d83c357cf88f9ab89aea10a', format: "h4" }, this.heading)))), h("div", { key: 'dec09cef0a083a2ac6b3cefc2bf1f771e1351b3b', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '367170c015420dd84e75cad3f4cfa31fcad58d57' })))));
+            } }, this.icon ? (h("ix-icon", { size: "24", name: this.icon })) : null, h("div", { key: '6e49c2b280c258209dd43aa03658ab4bbcb9b883', class: "title-text-overflow" }, h("ix-typography", { key: '65fa43f3fec84b63d24d14b38434eea186aa0910', format: "h4" }, this.heading)))), h("div", { key: '11a5da6825a09b85f4957854179264c43ccd8a6f', class: "side-pane-content", hidden: !this.showContent }, h("slot", { key: '3c986fb71f77e5481ffd6449445b4247429ff07e' })))));
     }
     static get is() { return "ix-pane"; }
     static get encapsulation() { return "shadow"; }
@@ -581,7 +581,7 @@ export class Pane {
                     "references": {
                         "Composition": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::Composition"
                         }
                     }
@@ -684,7 +684,7 @@ export class Pane {
                     "references": {
                         "ExpandedChangedEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::ExpandedChangedEvent"
                         }
                     }
@@ -705,7 +705,7 @@ export class Pane {
                     "references": {
                         "VariantChangedEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::VariantChangedEvent"
                         }
                     }
@@ -726,7 +726,7 @@ export class Pane {
                     "references": {
                         "BorderlessChangedEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::BorderlessChangedEvent"
                         }
                     }
@@ -750,7 +750,7 @@ export class Pane {
                     "references": {
                         "HideOnCollapseChangedEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::HideOnCollapseChangedEvent"
                         }
                     }
@@ -774,7 +774,7 @@ export class Pane {
                     "references": {
                         "SlotChangedEvent": {
                             "location": "local",
-                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/pane/pane.tsx",
+                            "path": "/home/runner/work/ix/ix/packages/core/src/components/pane/pane.tsx",
                             "id": "src/components/pane/pane.tsx::SlotChangedEvent"
                         }
                     }

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

@@ -60,6 +60,12 @@
 :host ::-webkit-scrollbar-button {
   display: none;
 }
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
 :host ::-webkit-scrollbar {
   width: 0.5rem;
   height: 0.5rem;

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

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