@siemens/ix 2.0.0-beta.0 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"menu-about.js","sourceRoot":"","sources":["../../../src/components/menu-about/menu-about.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  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          show: this.show,\n        }}\n        slot=\"ix-menu-about\"\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) =>\n              this.close.emit({\n                name: 'ix-menu-about',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs\n          selected={this.getSelectedTabIndex(this.activeTabLabel)}\n          class=\"about-tabs\"\n        >\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-about.js","sourceRoot":"","sources":["../../../src/components/menu-about/menu-about.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  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about',\n  styleUrl: 'menu-about.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * Active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'About & legal information';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuAboutElement;\n\n  /**\n   * About and Legal closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  @State() labels: string[] = [];\n\n  get aboutItems(): HTMLIxMenuAboutItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.aboutItems.forEach((i) => {\n      i.style.display = 'none';\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.aboutItems.length) {\n      this.setTab(this.activeTabLabel || this.aboutItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  componentWillRender() {\n    this.updateLabels();\n  }\n\n  private updateLabels() {\n    this.labels = this.aboutItems.map((i) => i.label);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    // Wait a DOM render cycle to get changed labels\n    setTimeout(() => this.setTab(value));\n  }\n\n  private getSelectedTabIndex(label: string) {\n    const selectedItem = this.aboutItems.find((item) => item.label === label);\n    return this.aboutItems.indexOf(selectedItem);\n  }\n\n  private getTabItems() {\n    return this.aboutItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"ix-menu-about\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"about-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon={'close'}\n            onClick={(e) =>\n              this.close.emit({\n                name: 'ix-menu-about',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs selected={this.getSelectedTabIndex(this.activeTabLabel)}>\n          {this.getTabItems()}\n        </ix-tabs>\n        <div class=\"about-items\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu-about-news/menu-about-news.css

@@ -34,7 +34,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   --margin: 0.5rem;
   display: block;
   position: fixed;
@@ -55,6 +67,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .banner-container {
   position: absolute;
   top: 0.0625rem;

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -20,7 +20,7 @@ export class MenuAboutNews {
     return (h(Host, { class: {
         expanded: this.expanded,
         show: !this.show,
-      } }, h("div", { class: "banner-container" }, h("ix-icon", { color: "color-inv-contrast-text", name: "shout", size: "32" }), h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { class: "cui-popover-news-header" }, h("ix-typography", { variant: "default-title-single" }, this.label)), h("ix-icon-button", { size: "24", icon: "close-small", ghost: true, onClick: () => {
+      } }, h("div", { class: "banner-container" }, h("ix-icon", { color: "color-inv-contrast-text", name: 'shout', size: "32" }), h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { class: "cui-popover-news-header" }, h("ix-typography", { variant: "default-title-single" }, this.label)), h("ix-icon-button", { size: "24", icon: 'close-small', ghost: true, onClick: () => {
         this.show = false;
         this.closePopover.emit();
       } }), h("slot", null), this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (e) => {

package/dist/collection/components/menu-about-news/menu-about-news.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-about-news.js","sourceRoot":"","sources":["../../../src/components/menu-about-news/menu-about-news.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,aAAa;;gBAIuB,KAAK;;wBAU7B,WAAW;;wBAUX,CAAC;oBAeL,KAAK;;EAExB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB;MAED,WAAK,KAAK,EAAC,kBAAkB;QAC3B,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA;QACX,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;UACzD,eAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF;MAEN,WAAK,KAAK,EAAC,yBAAyB;QAClC,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,KAAK,CACG,CACZ;MAEN,sBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,aAAa,EAClB,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC,GACe;MAClB,eAAa;MACZ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,yBAAyB;QAClC,iBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UACxB,CAAC,IAEA,IAAI,CAAC,YAAY,CACR,CACR,CACP,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,EAAE,EAAC,OAAO,GAAO,CACjB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name=\"shout\"\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography variant=\"default-title-single\">\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon=\"close-small\"\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-about-news.js","sourceRoot":"","sources":["../../../src/components/menu-about-news/menu-about-news.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,aAAa;;gBAIuB,KAAK;;wBAU7B,WAAW;;wBAUX,CAAC;oBAeL,KAAK;;EAExB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB;MAED,WAAK,KAAK,EAAC,kBAAkB;QAC3B,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA;QACX,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B;UACzD,eAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF;MAEN,WAAK,KAAK,EAAC,yBAAyB;QAClC,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,KAAK,CACG,CACZ;MAEN,sBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,aAAa,EACnB,KAAK,QACL,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;UAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC3B,CAAC,GACe;MAClB,eAAa;MACZ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,WAAK,KAAK,EAAC,yBAAyB;QAClC,iBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UACxB,CAAC,IAEA,IAAI,CAAC,YAAY,CACR,CACR,CACP,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,EAAE,EAAC,OAAO,GAAO,CACjB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name={'shout'}\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography variant=\"default-title-single\">\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon={'close-small'}\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,19 +42,60 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
   position: relative;
+  margin-bottom: 0.5rem;
+  margin-right: 0.75rem;
 }
 :host *,
 :host *::after,
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .avatar {
+  all: unset;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   height: 2.5rem;
+  width: 100%;
   max-height: 2.5rem;
   padding-left: 0.25rem;
   margin-left: 0.41rem;
@@ -102,14 +143,17 @@
 :host .avatar:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .avatar:not(.disabled):not(:disabled):hover {
+:host .avatar:not(.disabled):not(:disabled):hover, :host .avatar:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-avatar-btn--background--hover);
   color: var(--theme-avatar-btn--color--hover);
 }
 :host .avatar:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .avatar:not(.disabled):not(:disabled):active {
+:host .avatar:not(.disabled):not(:disabled):active, :host .avatar:not(.disabled):not(:disabled).active {
   background-color: var(--theme-avatar-btn--background--active);
   color: var(--theme-avatar-btn--color--active);
+}
+:host .avatar:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
 }

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

@@ -17,9 +17,9 @@ export class MenuAvatar {
     this.i18nLogout = 'Logout';
   }
   render() {
-    return (h(Host, { slot: "ix-menu-avatar" }, h("li", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId }, h("ix-avatar", { image: this.image, initials: this.initials }), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.hostElement, placement: 'right-start', offset: {
-        mainAxis: 6,
-      } }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
+    return (h(Host, { slot: "ix-menu-avatar" }, h("button", { class: "nav-item top-item avatar no-hover", title: this.top, id: this.avatarElementId, tabIndex: 0 }, h("ix-avatar", { image: this.image, initials: this.initials }), h("div", { class: "avatar-name" }, h("span", { class: "text-default-single", title: this.top }, this.top), h("span", { class: "text-default-single", title: this.bottom }, this.bottom))), h("ix-dropdown", { trigger: this.hostElement, placement: 'right-start', offset: {
+        mainAxis: 16,
+      } }, h("slot", null), h("ix-menu-avatar-item", { label: this.i18nLogout, icon: 'log-out', onClick: (e) => {
         this.logoutClick.emit(e);
       } }))));
   }

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

@@ -1 +1 @@
-{"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,UACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe;QAExB,iBAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc;QAEnE,WAAK,KAAK,EAAC,aAAa;UACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ;UACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACH;MACL,mBACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;UACN,QAAQ,EAAE,CAAC;SACZ;QAED,eAAa;QACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UAC3B,CAAC,GACoB,CACX,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <li\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </li>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 6,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon=\"log-out\"\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-avatar.js","sourceRoot":"","sources":["../../../src/components/menu-avatar/menu-avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,UAAU;;IAqCb,oBAAe,GAAG,mBAAmB,CAAC;;;;;sBAPzB,QAAQ;;EAS7B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB;MACzB,cACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,EAAE,EAAE,IAAI,CAAC,eAAe,EACxB,QAAQ,EAAE,CAAC;QAEX,iBAAW,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAc;QAEnE,WAAK,KAAK,EAAC,aAAa;UACtB,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAC9C,IAAI,CAAC,GAAG,CACJ;UACP,YAAM,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACjD,IAAI,CAAC,MAAM,CACP,CACH,CACC;MACT,mBACE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE;UACN,QAAQ,EAAE,EAAE;SACb;QAED,eAAa;QACb,2BACE,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;UAC3B,CAAC,GACoB,CACX,CACT,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout = 'Logout';\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot></slot>\n          <ix-menu-avatar-item\n            label={this.i18nLogout}\n            icon={'log-out'}\n            onClick={(e) => {\n              this.logoutClick.emit(e);\n            }}\n          ></ix-menu-avatar-item>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,11 +14,46 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-:host {
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host { /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: block;
 }
 :host *,
 :host *::after,
 :host *::before {
   box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
 }

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

@@ -14,7 +14,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
   flex-direction: column;
   position: relative;
@@ -24,6 +36,30 @@
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .category {
   display: flex;
   position: relative;
@@ -43,6 +79,7 @@
   overflow: hidden;
   max-height: 0px;
   transition: var(--theme-default-time) max-height ease-in-out;
+  padding: 0.25rem 0 0.25rem 1.625rem;
 }
 :host .menu-items--expanded {
   max-height: 999999999px;
@@ -60,4 +97,8 @@
 
 :host(.expanded) {
   background-color: var(--theme-color-ghost--active);
+}
+
+:host ::slotted(a[href]) {
+  text-decoration: none !important;
 }

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

@@ -8,8 +8,8 @@
  */
 import { h, Host } from '@stencil/core';
 import anime from 'animejs';
+import { closestIxMenu } from '../utils/application-layout/context';
 import { createMutationObserver } from '../utils/mutation-observer';
-import { menuContext } from '../utils/screen/context';
 const DefaultIxMenuItemHeight = 40;
 const DefaultAnimationTimeout = 150;
 /**
@@ -29,7 +29,7 @@ export class MenuCategory {
     return this.getNestedItems().some((item) => item.active);
   }
   getNestedItems() {
-    return Array.from(this.hostElement.querySelectorAll(':scope > ix-menu-item'));
+    return Array.from(this.hostElement.querySelectorAll(':scope ix-menu-item'));
   }
   getNestedItemsHeight() {
     const items = this.getNestedItems();
@@ -87,7 +87,7 @@ export class MenuCategory {
     return this.menuExpand && (this.showItems || this.isNestedItemActive());
   }
   componentDidLoad() {
-    const closestMenu = menuContext(this.hostElement);
+    const closestMenu = closestIxMenu(this.hostElement);
     if (!closestMenu) {
       throw Error('ix-menu-category can only be used as a child of ix-menu');
     }
@@ -114,7 +114,7 @@ export class MenuCategory {
   render() {
     return (h(Host, { class: {
         expanded: this.showItems,
-      } }, h("ix-menu-item", { class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { class: "category" }, this.label, h("ix-icon", { name: "chevron-down-small", class: {
+      } }, h("ix-menu-item", { class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, h("div", { class: "category" }, this.label, h("ix-icon", { name: 'chevron-down-small', class: {
         'category-chevron': true,
         'category-chevron--open': this.showItems,
       } }))), h("div", { ref: (ref) => (this.menuItemsContainer = ref), class: {

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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { menuContext } from '../utils/screen/context';\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  @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 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 onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\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  componentDidLoad() {\n    const closestMenu = menuContext(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.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\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\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      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\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          }}\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\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  @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 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 onCategoryClicked(e?: MouseEvent) {\n    if (this.ixMenu.expand) {\n      e?.stopPropagation();\n      this.onExpandCategory(!this.showItems);\n      return;\n    }\n\n    this.showDropdown = !this.showDropdown;\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  componentDidLoad() {\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.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\n        this.showItems = this.isCategoryItemListVisible();\n      }\n    );\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      >\n        <ix-menu-item\n          class={'category-parent'}\n          active={this.isNestedItemActive()}\n          notifications={this.notifications}\n          icon={this.icon}\n          onClick={(e) => this.onCategoryClicked(e)}\n        >\n          <div class=\"category\">\n            {this.label}\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          }}\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"]}

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

@@ -10,12 +10,14 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test';
 test('renders', async ({ mount, page }) => {
   await mount(`
+    <ix-application>
       <ix-menu>
         <ix-menu-category label="Category label">
           <ix-menu-item>Test</ix-menu-item>
           <ix-menu-item>Test</ix-menu-item>
         </ix-menu-category>
       </ix-menu>
+    </ix-application>
     `);
   const element = page.locator('ix-menu-category');
   await expect(element).toHaveClass('hydrated');
@@ -32,9 +34,9 @@ test('should collapse by click', async ({ mount, page }) => {
   </ix-basic-navigation>
   `);
   const categoryItem = page.locator('ix-menu-category');
-  const menu = page.locator('ix-menu');
+  const app = page.locator('ix-basic-navigation');
   const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');
-  await menu.evaluate((menu) => (menu.supportedModes = ['medium']));
+  await app.evaluate((menu) => (menu.breakpoints = ['md']));
   await categoryItem.click();
   const item = page.locator('ix-menu-item').getByText('Test 2');
   await item.evaluate((item) => (item.active = true));
@@ -47,14 +49,19 @@ test('should collapse by click', async ({ mount, page }) => {
 });
 test('should expand items', async ({ mount, page }) => {
   await mount(`
+  <ix-basic-navigation>
     <ix-menu>
       <ix-menu-category label="Category label">
         <ix-menu-item>Test Item 1</ix-menu-item>
         <ix-menu-item>Test Item 2</ix-menu-item>
       </ix-menu-category>
     </ix-menu>
+  </ix-basic-navigation>
   `);
   const menu = page.locator('ix-menu');
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate((menu) => (menu.breakpoints = ['md']));
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
   const menuCategory = page.locator('ix-menu-category');
@@ -65,14 +72,19 @@ test('should expand items', async ({ mount, page }) => {
 });
 test('should show items as dropdown', async ({ mount, page }) => {
   await mount(`
+  <ix-basic-navigation>
     <ix-menu>
       <ix-menu-category label="Category label">
         <ix-menu-item>Test Item 1</ix-menu-item>
         <ix-menu-item>Test Item 2</ix-menu-item>
       </ix-menu-category>
     </ix-menu>
+  </ix-basic-navigation>
   `);
   await page.waitForSelector('ix-menu');
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate((menu) => (menu.breakpoints = ['md']));
   const menuCategory = page.locator('ix-menu-category');
   await menuCategory.click();
   const dropdown = menuCategory.locator('ix-dropdown');
@@ -80,22 +92,27 @@ test('should show items as dropdown', async ({ mount, page }) => {
   await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');
   const dropdownHeader = dropdown.locator('ix-dropdown-item');
   await expect(dropdownHeader).toHaveText('Category label');
-  const itemOne = page.getByRole('listitem', { name: 'Test Item 1' });
-  const itemTwo = page.getByRole('listitem', { name: 'Test Item 2' });
+  const itemOne = page.locator('ix-menu-item').nth(0);
+  const itemTwo = page.locator('ix-menu-item').nth(1);
   await expect(itemOne).toBeVisible();
   await expect(itemTwo).toBeVisible();
 });
 test('should collapse category after collapse menu', async ({ mount, page, }) => {
   await mount(`
-    <ix-menu>
-      <ix-menu-category label="Category label">
-        <ix-menu-item>Test Item 1</ix-menu-item>
-        <ix-menu-item>Test Item 2</ix-menu-item>
-      </ix-menu-category>
-    </ix-menu>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
   `);
   await page.waitForSelector('ix-menu');
   const menu = page.locator('ix-menu');
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate((menu) => (menu.breakpoints = ['md']));
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
   const menuCategory = page.locator('ix-menu-category');

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

@@ -1 +1 @@
-{"version":3,"file":"menu-category.ct.js","sourceRoot":"","sources":["../../../../src/components/menu-category/test/menu-category.ct.ts"],"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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    `);\n  const element = page.locator('ix-menu-category');\n  await expect(element).toHaveClass('hydrated');\n});\n\ntest('should collapse by click', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test</ix-menu-item>\n        <ix-menu-item>Test 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n  const categoryItem = page.locator('ix-menu-category');\n  const menu = page.locator('ix-menu');\n  const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');\n\n  await menu.evaluate(\n    (menu: HTMLIxMenuElement) => (menu.supportedModes = ['medium'])\n  );\n\n  await categoryItem.click();\n\n  const item = page.locator('ix-menu-item').getByText('Test 2');\n  await item.evaluate((item: HTMLIxMenuItemElement) => (item.active = true));\n  await expect(item).toHaveClass(/active/);\n\n  await item.click();\n  await expandMenuButton.click();\n\n  await expect(categoryItem.locator('.menu-items')).toHaveClass(\n    /menu-items--expanded/\n  );\n\n  await categoryItem.locator('.category-parent').click();\n\n  await expect(categoryItem.locator('.menu-items')).not.toHaveClass(\n    /menu-items--expanded/\n  );\n});\n\ntest('should expand items', async ({ mount, page }) => {\n  await mount(`\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  `);\n\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--expanded'\n  );\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).not.toBeVisible();\n});\n\ntest('should show items as dropdown', async ({ mount, page }) => {\n  await mount(`\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  `);\n\n  await page.waitForSelector('ix-menu');\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');\n\n  const dropdownHeader = dropdown.locator('ix-dropdown-item');\n  await expect(dropdownHeader).toHaveText('Category label');\n\n  const itemOne = page.getByRole('listitem', { name: 'Test Item 1' });\n  const itemTwo = page.getByRole('listitem', { name: 'Test Item 2' });\n\n  await expect(itemOne).toBeVisible();\n  await expect(itemTwo).toBeVisible();\n});\n\ntest('should collapse category after collapse menu', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  `);\n\n  await page.waitForSelector('ix-menu');\n  const menu = page.locator('ix-menu');\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--expanded'\n  );\n\n  await menuButton.click();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');\n});\n"]}
+{"version":3,"file":"menu-category.ct.js","sourceRoot":"","sources":["../../../../src/components/menu-category/test/menu-category.ct.ts"],"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 { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test</ix-menu-item>\n          <ix-menu-item>Test</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-application>\n    `);\n  const element = page.locator('ix-menu-category');\n  await expect(element).toHaveClass('hydrated');\n});\n\ntest('should collapse by click', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test</ix-menu-item>\n        <ix-menu-item>Test 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n  const categoryItem = page.locator('ix-menu-category');\n  const app = page.locator('ix-basic-navigation');\n  const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');\n\n  await app.evaluate(\n    (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n  );\n\n  await categoryItem.click();\n\n  const item = page.locator('ix-menu-item').getByText('Test 2');\n  await item.evaluate((item: HTMLIxMenuItemElement) => (item.active = true));\n  await expect(item).toHaveClass(/active/);\n\n  await item.click();\n  await expandMenuButton.click();\n\n  await expect(categoryItem.locator('.menu-items')).toHaveClass(\n    /menu-items--expanded/\n  );\n\n  await categoryItem.locator('.category-parent').click();\n\n  await expect(categoryItem.locator('.menu-items')).not.toHaveClass(\n    /menu-items--expanded/\n  );\n});\n\ntest('should expand items', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n\n  const menu = page.locator('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--expanded'\n  );\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).not.toBeVisible();\n});\n\ntest('should show items as dropdown', async ({ mount, page }) => {\n  await mount(`\n  <ix-basic-navigation>\n    <ix-menu>\n      <ix-menu-category label=\"Category label\">\n        <ix-menu-item>Test Item 1</ix-menu-item>\n        <ix-menu-item>Test Item 2</ix-menu-item>\n      </ix-menu-category>\n    </ix-menu>\n  </ix-basic-navigation>\n  `);\n\n  await page.waitForSelector('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  const dropdown = menuCategory.locator('ix-dropdown');\n  await expect(dropdown).toBeVisible();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');\n\n  const dropdownHeader = dropdown.locator('ix-dropdown-item');\n  await expect(dropdownHeader).toHaveText('Category label');\n\n  const itemOne = page.locator('ix-menu-item').nth(0);\n  const itemTwo = page.locator('ix-menu-item').nth(1);\n\n  await expect(itemOne).toBeVisible();\n  await expect(itemTwo).toBeVisible();\n});\n\ntest('should collapse category after collapse menu', async ({\n  mount,\n  page,\n}) => {\n  await mount(`\n    <ix-basic-navigation>\n      <ix-menu>\n        <ix-menu-category label=\"Category label\">\n          <ix-menu-item>Test Item 1</ix-menu-item>\n          <ix-menu-item>Test Item 2</ix-menu-item>\n        </ix-menu-category>\n      </ix-menu>\n    </ix-basic-navigation>\n  `);\n\n  await page.waitForSelector('ix-menu');\n  const menu = page.locator('ix-menu');\n  await page\n    .locator('ix-basic-navigation')\n    .evaluate(\n      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])\n    );\n\n  const menuButton = menu.locator('ix-burger-menu');\n  await menuButton.click();\n\n  const menuCategory = page.locator('ix-menu-category');\n  await menuCategory.click();\n\n  await expect(menuCategory.locator('.menu-items')).toHaveClass(\n    'menu-items menu-items--expanded'\n  );\n\n  await menuButton.click();\n  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');\n});\n"]}

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

@@ -43,10 +43,13 @@
   max-height: var(--ix-menu-item-height, 3rem);
 }
 :host .tab {
+  all: unset;
+  box-sizing: border-box;
   display: flex;
   position: relative;
   align-items: center;
   height: var(--ix-menu-item-height, 3rem);
+  width: 100%;
   z-index: 500;
   padding-left: 0.875rem;
 }
@@ -56,15 +59,13 @@
 :host .tab:not(.disabled):not(:disabled).active, :host .tab:not(.disabled):not(:disabled):active {
   background-color: var(--theme-ghost--background--active);
 }
-:host i.glyph {
+:host .tab-icon {
   color: var(--theme-nav-item-primary-icon--color);
   position: relative;
 }
 :host .tab:focus-visible {
-  outline: none;
-}
-:host:focus-visible {
-  outline: none;
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: -1px;
 }
 :host .tab:not(:last-child) {
   margin-bottom: 0.5rem;
@@ -127,7 +128,7 @@
   pointer-events: none;
   cursor: default;
 }
-:host(.disabled) .tab > .glyph {
+:host(.disabled) .tab > .tab-icon {
   color: var(--theme-color-weak-text);
 }
 :host(.disabled) .tab-text {
@@ -165,4 +166,8 @@
 :host(.active[slot=bottom]) .tab,
 :host(.selected[slot=bottom]) .tab {
   background-color: var(--theme-nav-item-secondary--background--selected);
+}
+
+:host(.tab-nested) .tab::before {
+  display: none;
 }