@siemens/ix 1.6.3 → 2.0.0-beta.1

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

@@ -0,0 +1,124 @@
+/*
+ * 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.
+ */
+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');
+});
+test('should collapse by click', async ({ mount, page }) => {
+  await mount(`
+  <ix-basic-navigation>
+    <ix-menu>
+      <ix-menu-category label="Category label">
+        <ix-menu-item>Test</ix-menu-item>
+        <ix-menu-item>Test 2</ix-menu-item>
+      </ix-menu-category>
+    </ix-menu>
+  </ix-basic-navigation>
+  `);
+  const categoryItem = page.locator('ix-menu-category');
+  const app = page.locator('ix-basic-navigation');
+  const expandMenuButton = page.locator('ix-menu').locator('.burger-menu');
+  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));
+  await expect(item).toHaveClass(/active/);
+  await item.click();
+  await expandMenuButton.click();
+  await expect(categoryItem.locator('.menu-items')).toHaveClass(/menu-items--expanded/);
+  await categoryItem.locator('.category-parent').click();
+  await expect(categoryItem.locator('.menu-items')).not.toHaveClass(/menu-items--expanded/);
+});
+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');
+  await menuCategory.click();
+  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+  const dropdown = menuCategory.locator('ix-dropdown');
+  await expect(dropdown).not.toBeVisible();
+});
+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');
+  await expect(dropdown).toBeVisible();
+  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.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-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');
+  await menuCategory.click();
+  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items menu-items--expanded');
+  await menuButton.click();
+  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');
+});
+//# sourceMappingURL=menu-category.ct.js.map

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

@@ -0,0 +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-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

@@ -38,15 +38,18 @@
   position: relative;
   display: block;
   cursor: pointer;
-  height: 3rem;
-  min-height: 3rem;
-  max-height: 3rem;
+  height: var(--ix-menu-item-height, 3rem);
+  min-height: var(--ix-menu-item-height, 3rem);
+  max-height: var(--ix-menu-item-height, 3rem);
 }
 :host .tab {
+  all: unset;
+  box-sizing: border-box;
   display: flex;
   position: relative;
   align-items: center;
-  height: 3rem;
+  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;
@@ -101,6 +102,7 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  width: 100%;
 }
 
 :host(.active) .tab,
@@ -111,7 +113,7 @@
 :host(.selected) .tab::before {
   content: "";
   background-color: var(--theme-nav-item-primary--border-color--selected);
-  height: 3rem;
+  height: var(--ix-menu-item-height, 3rem);
   width: 0.25rem;
   left: 0;
   position: absolute;
@@ -126,18 +128,13 @@
   pointer-events: none;
   cursor: default;
 }
-:host(.disabled) .tab > .glyph {
+:host(.disabled) .tab > .tab-icon {
   color: var(--theme-color-weak-text);
 }
 :host(.disabled) .tab-text {
   color: var(--theme-color-weak-text);
 }
 
-:host(.home-tab),
-:host([slot=home]) {
-  margin-bottom: 1.5rem;
-}
-
 :host(.bottom-tab),
 :host([slot=bottom]) {
   min-height: 2.25rem;
@@ -169,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;
 }

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

@@ -8,16 +8,25 @@
  */
 import { h, Host } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
+/**
+ * @slot menu-item-label Custom label
+ */
 export class MenuItem {
   constructor() {
+    this.isHostedInsideCategory = false;
     this.home = false;
     this.bottom = false;
     this.tabIcon = 'document';
+    this.icon = undefined;
     this.notifications = undefined;
     this.active = undefined;
     this.disabled = undefined;
     this.title = undefined;
   }
+  componentWillLoad() {
+    this.isHostedInsideCategory =
+      !!this.hostElement.closest('ix-menu-category');
+  }
   componentWillRender() {
     this.title = this.hostElement.innerText;
   }
@@ -37,12 +46,25 @@ export class MenuItem {
     }
   }
   render() {
-    return (h(Host, { class: {
+    var _a;
+    let extendedAttributes = {};
+    if (this.home) {
+      extendedAttributes = {
+        slot: 'home',
+      };
+    }
+    if (this.bottom) {
+      extendedAttributes = {
+        slot: 'bottom',
+      };
+    }
+    return (h(Host, Object.assign({ class: {
         disabled: this.disabled,
         'home-tab': this.home,
         'bottom-tab': this.bottom,
         active: this.active,
-      } }, h("li", { class: "tab", title: this.title }, h("ix-icon", { name: this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
+        'tab-nested': this.isHostedInsideCategory,
+      } }, extendedAttributes), h("button", { class: "tab", title: this.title, tabIndex: this.disabled ? -1 : 0, role: "listitem" }, h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon }), h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null), h("span", { class: "tab-text text-default" }, h("slot", null)))));
   }
   static get is() { return "ix-menu-item"; }
   static get encapsulation() { return "shadow"; }
@@ -87,10 +109,7 @@ export class MenuItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0. Replaced by slot based implementation"
-            }],
+          "tags": [],
           "text": "Caution: this is no longer working. Please use slot=\"bottom\" instead.\n\nPlace tab on bottom"
         },
         "attribute": "bottom",
@@ -108,13 +127,33 @@ export class MenuItem {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use `icon` property. Will be removed in 3.0.0"
+            }],
           "text": "Icon name from @siemens/ix-icons"
         },
         "attribute": "tab-icon",
         "reflect": false,
         "defaultValue": "'document'"
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon name from @siemens/ix-icons"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
       "notifications": {
         "type": "number",
         "mutable": false,

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":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAOpE,MAAM,OAAO,QAAQ;;gBAIJ,KAAK;kBASH,KAAK;mBAKJ,UAAU;;;;;;EAuB5B,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;MAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB;MAED,UAAI,KAAK,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;QAC/B,eAAS,IAAI,EAAE,IAAI,CAAC,OAAO,GAAY;QACvC,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC7C,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,YAAM,KAAK,EAAC,uBAAuB;UACjC,eAAa,CACR,CACJ,CACA,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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\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   * @deprecated Will be removed in 2.0.0. Replaced by slot based implementation\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() tabIcon = 'document';\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  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\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\n  render() {\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        }}\n      >\n        <li class=\"tab\" title={this.title}>\n          <ix-icon name={this.tabIcon}></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/components/menu-item/menu-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;GAEG;AAMH,MAAM,OAAO,QAAQ;;IA6CX,2BAAsB,GAAG,KAAK,CAAC;gBAzCxB,KAAK;kBAOH,KAAK;mBAOJ,UAAU;;;;;;;EA6B5B,iBAAiB;IACf,IAAI,CAAC,sBAAsB;MACzB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;EACnD,CAAC;EAED,mBAAmB;IACjB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,GAAG,EAAE;MAC1C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;MACf,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;EACH,CAAC;EAED,MAAM;;IACJ,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,kBAAkB,GAAG;QACnB,IAAI,EAAE,MAAM;OACb,CAAC;KACH;IAED,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,kBAAkB,GAAG;QACnB,IAAI,EAAE,QAAQ;OACf,CAAC;KACH;IACD,OAAO,CACL,EAAC,IAAI,kBACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,UAAU,EAAE,IAAI,CAAC,IAAI;QACrB,YAAY,EAAE,IAAI,CAAC,MAAM;QACzB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,YAAY,EAAE,IAAI,CAAC,sBAAsB;OAC1C,IACG,kBAAkB;MAEtB,cACE,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,IAAI,EAAC,UAAU;QAEf,eACE,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,OAAO,GACtB;QACX,WAAK,KAAK,EAAC,cAAc,IACtB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,CAAO,CAC7C,CAAC,CAAC,CAAC,IAAI,CACJ;QACN,YAAM,KAAK,EAAC,uBAAuB;UACjC,eAAa,CACR,CACA,CACJ,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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\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   * 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   * Icon name from @siemens/ix-icons\n   *\n   * @deprecated Use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Icon name from @siemens/ix-icons\n   */\n  @Prop() 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  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n  private isHostedInsideCategory = false;\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n  }\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\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\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          title={this.title}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n        >\n          <ix-icon\n            class={'tab-icon'}\n            name={this.icon ?? this.tabIcon}\n          ></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -178,7 +178,27 @@ a {
   color: var(--theme-color-primary);
 }
 
+/*
+ * 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.
+ */
+/*
+ * 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;
   background-color: var(--theme-nav-overlay--background);
   padding: 0.75rem 1rem 1rem 2rem;
@@ -187,6 +207,35 @@ a {
   width: 100%;
   height: 100%;
 }
+: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 .settings-header {
   display: flex;
   justify-content: space-between;
@@ -197,7 +246,10 @@ a {
 }
 :host .settings-header h2 {
   color: var(--theme-nav-overlay-header--color);
-  margin-bottom: 0;
+  margin-bottom: 1rem;
+}
+:host ix-tabs {
+  margin-bottom: 1.5rem;
 }
 :host .settings-tabs {
   margin-bottom: 1.5rem;

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

@@ -44,14 +44,15 @@ export class MenuAbout {
     });
   }
   render() {
-    return (h(Host, { class: {
-        animate__animated: true,
-        animate__fadeInLeft: this.show,
-        animate__fadeOutLeft: !this.show,
-      } }, h("div", { class: "settings-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), h("ix-tabs", null, this.getTabItems()), h("slot", null)));
+    return (h(Host, { slot: "ix-menu-settings", class: {
+        show: this.show,
+      } }, h("div", { class: "settings-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit({
+        name: 'ix-menu-settings',
+        nativeEvent: e,
+      }) })), h("ix-tabs", null, this.getTabItems()), h("slot", null)));
   }
   static get is() { return "ix-menu-settings"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["menu-settings.scss"]
@@ -131,8 +132,8 @@ export class MenuAbout {
           "text": "Popover closed"
         },
         "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
+          "original": "{\n    nativeEvent: MouseEvent;\n    name: string;\n  }",
+          "resolved": "{ nativeEvent: MouseEvent; name: string; }",
           "references": {
             "MouseEvent": {
               "location": "global"

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

@@ -1 +1 @@
-{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;iBASJ,UAAU;gBAKX,KAAK;;EASpB,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;EACvE,CAAC;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/B,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAEzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KACjE;EACH,CAAC;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EACvB,CAAC;EAGD,mBAAmB,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACrB,CAAC;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;MAC1C,OAAO,CACL,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,CACf,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,mBAAmB,EAAE,IAAI,CAAC,IAAI;QAC9B,oBAAoB,EAAE,CAAC,IAAI,CAAC,IAAI;OACjC;MAED,WAAK,KAAK,EAAC,iBAAiB;QAC1B,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM;QACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAClB,CACd;MACN,mBAAU,IAAI,CAAC,WAAW,EAAE,CAAW;MACvC,eAAa,CACR,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  scoped: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<MouseEvent>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.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          animate__animated: true,\n          animate__fadeInLeft: this.show,\n          animate__fadeOutLeft: !this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon=\"close\"\n            onClick={(e) => this.close.emit(e)}\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-settings.js","sourceRoot":"","sources":["../../../src/components/menu-settings/menu-settings.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,WAAW,EACX,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAOvB,MAAM,OAAO,SAAS;;;iBASJ,UAAU;gBAKX,KAAK;;EAYpB,IAAI,aAAa;IACf,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;EACvE,CAAC;EAEO,MAAM,CAAC,KAAa;IAC1B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/B,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAEzB,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,EAAE;QACnC,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;OAC3B;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;MAC7B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KACjE;EACH,CAAC;EAED,gBAAgB;IACd,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;EACvB,CAAC;EAGD,mBAAmB,CAAC,KAAa;IAC/B,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACrB,CAAC;EAEO,WAAW;IACjB,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;MAC1C,OAAO,CACL,mBACE,KAAK,EAAE;UACL,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc;SACtC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAEhC,KAAK,CACM,CACf,CAAC;IACJ,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,kBAAkB,EACvB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;OAChB;MAED,WAAK,KAAK,EAAC,iBAAiB;QAC1B,UAAI,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAM;QACrC,sBACE,KAAK,QACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;YACd,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,CAAC;WACf,CAAC,GAEY,CACd;MACN,mBAAU,IAAI,CAAC,WAAW,EAAE,CAAW;MACvC,eAAa,CACR,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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.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-settings\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"settings-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-settings',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -9,5 +9,4 @@
 
 :host {
   display: block;
-
 }

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

@@ -15,7 +15,7 @@ export class MenuSettingsItem {
     return (h(Host, null, h("slot", null)));
   }
   static get is() { return "ix-menu-settings-item"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["menu-settings-item.css"]

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

@@ -1 +1 @@
-{"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  scoped: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-settings-item.js","sourceRoot":"","sources":["../../../src/components/menu-settings-item/menu-settings-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings-item',\n  styleUrl: 'menu-settings-item.css',\n  shadow: true,\n})\nexport class MenuSettingsItem {\n  /**\n   * Label\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -34,11 +34,49 @@
  * 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 */
+}
 :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 .message-container {
   display: flex;
   flex-direction: row;