@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,299 @@
+/*
+ * 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 { h, Host } from "@stencil/core";
+import { createMutationObserver } from "../utils/mutation-observer";
+import { makeRef } from "../utils/make-ref";
+import { menuController } from "../utils/menu-service/menu-service";
+import { iconDocument } from "@siemens/ix-icons/icons";
+/**
+ * @slot menu-item-label Custom label
+ */
+export class MenuItem {
+    constructor() {
+        /**
+         * Move the Tab to a top position.
+         */
+        this.home = false;
+        /**
+         * Caution: this is no longer working. Please use slot="bottom" instead.
+         *
+         * Place tab on bottom
+         */
+        this.bottom = false;
+        /**
+         * State to display active
+         */
+        this.active = false;
+        /**
+         * Disable tab and remove event handlers
+         */
+        this.disabled = false;
+        /** @internal */
+        this.isCategory = false;
+        this.menuExpanded = false;
+        this.buttonRef = makeRef();
+        this.isHostedInsideCategory = false;
+        this.observer = createMutationObserver(() => {
+            this.setTooltip();
+        });
+    }
+    componentWillLoad() {
+        var _a;
+        this.isHostedInsideCategory =
+            !!this.hostElement.closest('ix-menu-category');
+        this.onIconChange();
+        this.menuExpanded = ((_a = menuController.nativeElement) === null || _a === void 0 ? void 0 : _a.expand) || false;
+        this.menuExpandedDisposer = menuController.expandChange.on((expand) => (this.menuExpanded = expand));
+    }
+    componentWillRender() {
+        this.setTooltip();
+    }
+    setTooltip() {
+        var _a, _b;
+        this.tooltip = (_b = (_a = this.label) !== null && _a !== void 0 ? _a : this.hostElement.textContent) !== null && _b !== void 0 ? _b : undefined;
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.menuExpandedDisposer) {
+            this.menuExpandedDisposer.dispose();
+        }
+    }
+    onIconChange() {
+        if (!this.isHostedInsideCategory && !this.hostElement.icon) {
+            this.icon = iconDocument;
+        }
+    }
+    render() {
+        let extendedAttributes = {};
+        if (this.home) {
+            extendedAttributes = {
+                slot: 'home',
+            };
+        }
+        if (this.bottom) {
+            extendedAttributes = {
+                slot: 'bottom',
+            };
+        }
+        return (h(Host, Object.assign({ key: '338303e3fa74e42da6937c88c76aa8ae967c28cd', class: {
+                disabled: this.disabled,
+                'home-tab': this.home,
+                'bottom-tab': this.bottom,
+                active: this.active,
+                'tab-nested': this.isHostedInsideCategory,
+            } }, extendedAttributes), h("button", { key: 'c171aa4703864f4a8eab96e85c959292669d5e9a', class: "tab", tabIndex: this.disabled ? -1 : 0, ref: this.buttonRef }, this.icon && h("ix-icon", { key: 'd09d3827395b46f368d26b9a81d9da764fdaf5cb', class: 'tab-icon', name: this.icon }), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: 'f9d95782c3e509252c03dcc771001ffeb9fac768', class: "tab-text text-default" }, this.label, h("slot", { key: '57546e469c63601edce1d37ba552bae4b6969179' }))), !this.isCategory &&
+            !this.isHostedInsideCategory &&
+            !this.menuExpanded && (h("ix-tooltip", { key: 'c4a895fca8ba28f9a6f78596c9a32b66ca67f4bc', for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
+    }
+    static get is() { return "ix-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.2.0"
+                        }],
+                    "text": "Label of the menu item. Will also be used as tooltip text"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "home": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Move the Tab to a top position."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "home",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bottom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Caution: this is no longer working. Please use slot=\"bottom\" instead.\n\nPlace tab on bottom"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bottom",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "link",
+                            "text": "https://ix.siemens.io/docs/icon-library/icons"
+                        }],
+                    "text": "Name of the icon you want to display. Icon names can be resolved from the documentation"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "notifications": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show notification count on tab"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "notifications",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State to display active"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable tab and remove event handlers"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isCategory": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "is-category",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltip": {},
+            "menuExpanded": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "onIconChange"
+            }];
+    }
+}
+//# sourceMappingURL=menu-item.js.map

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

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

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

@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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 { regressionTest } from "../../../tests/utils/test/index";
+regressionTest('renders', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-item>Foo bar</ix-menu-item>
+        <ix-menu-item>Hello World</ix-menu-item>
+      </ix-menu>
+    </ix-application>
+    `);
+    const menuItem1 = page.locator('ix-menu-item').nth(0);
+    const menuItem2 = page.locator('ix-menu-item').nth(1);
+    await expect(menuItem1).toHaveClass('hydrated');
+    await expect(menuItem2).toHaveClass('hydrated');
+    await expect(menuItem1.locator('.tab-text').locator('slot')).toBeAttached();
+});
+regressionTest('show tooltip', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-item>Foo bar</ix-menu-item>
+        <ix-menu-item>Hello World</ix-menu-item>
+      </ix-menu>
+    </ix-application>
+    `);
+    const menuItem1 = page.locator('ix-menu-item').nth(0);
+    const menuItem2 = page.locator('ix-menu-item').nth(1);
+    await expect(menuItem1).toHaveClass('hydrated');
+    await expect(menuItem2).toHaveClass('hydrated');
+    await menuItem1.hover();
+    // Default tooltip delay is 1000ms waiting another 500 ms
+    await page.waitForTimeout(1500);
+    await expect(menuItem1.locator('ix-tooltip')).toHaveClass(/visible/);
+    await expect(menuItem1.locator('ix-tooltip')).toHaveText('Foo bar');
+});
+regressionTest('update item text', async ({ mount, page }) => {
+    await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-item>Foo bar</ix-menu-item>
+        <ix-menu-item>Hello World</ix-menu-item>
+      </ix-menu>
+    </ix-application>
+    `);
+    const menuItem1 = page.locator('ix-menu-item').nth(0);
+    const menuItem2 = page.locator('ix-menu-item').nth(1);
+    await expect(menuItem1).toHaveClass('hydrated');
+    await expect(menuItem2).toHaveClass('hydrated');
+    await expect(menuItem1.locator('.tab-text').locator('slot')).toBeAttached();
+    await expect(menuItem1.locator('ix-tooltip')).toHaveText('Foo bar');
+    await menuItem1.evaluate((item) => (item.innerText = 'Test123'));
+    await menuItem1.hover();
+    // Default tooltip delay is 1000ms waiting another 500 ms
+    await page.waitForTimeout(1500);
+    await expect(menuItem1.locator('ix-tooltip')).toHaveClass(/visible/);
+    await expect(menuItem1.locator('ix-tooltip')).toHaveText('Test123');
+});
+//# sourceMappingURL=menu-item.ct.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item.ct.js","sourceRoot":"","sources":["../../../../src/components/menu-item/test/menu-item.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 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 { expect } from '@playwright/test';\nimport { regressionTest } from '@utils/test';\n\nregressionTest('renders', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-item>Foo bar</ix-menu-item>\n        <ix-menu-item>Hello World</ix-menu-item>\n      </ix-menu>\n    </ix-application>\n    `);\n  const menuItem1 = page.locator('ix-menu-item').nth(0);\n  const menuItem2 = page.locator('ix-menu-item').nth(1);\n  await expect(menuItem1).toHaveClass('hydrated');\n  await expect(menuItem2).toHaveClass('hydrated');\n\n  await expect(menuItem1.locator('.tab-text').locator('slot')).toBeAttached();\n});\n\nregressionTest('show tooltip', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-item>Foo bar</ix-menu-item>\n        <ix-menu-item>Hello World</ix-menu-item>\n      </ix-menu>\n    </ix-application>\n    `);\n  const menuItem1 = page.locator('ix-menu-item').nth(0);\n  const menuItem2 = page.locator('ix-menu-item').nth(1);\n  await expect(menuItem1).toHaveClass('hydrated');\n  await expect(menuItem2).toHaveClass('hydrated');\n\n  await menuItem1.hover();\n  // Default tooltip delay is 1000ms waiting another 500 ms\n  await page.waitForTimeout(1500);\n\n  await expect(menuItem1.locator('ix-tooltip')).toHaveClass(/visible/);\n  await expect(menuItem1.locator('ix-tooltip')).toHaveText('Foo bar');\n});\n\nregressionTest('update item text', async ({ mount, page }) => {\n  await mount(`\n    <ix-application>\n      <ix-menu>\n        <ix-menu-item>Foo bar</ix-menu-item>\n        <ix-menu-item>Hello World</ix-menu-item>\n      </ix-menu>\n    </ix-application>\n    `);\n  const menuItem1 = page.locator('ix-menu-item').nth(0);\n  const menuItem2 = page.locator('ix-menu-item').nth(1);\n  await expect(menuItem1).toHaveClass('hydrated');\n  await expect(menuItem2).toHaveClass('hydrated');\n\n  await expect(menuItem1.locator('.tab-text').locator('slot')).toBeAttached();\n  await expect(menuItem1.locator('ix-tooltip')).toHaveText('Foo bar');\n\n  await menuItem1.evaluate(\n    (item: HTMLIxMenuItemElement) => (item.innerText = 'Test123')\n  );\n\n  await menuItem1.hover();\n  // Default tooltip delay is 1000ms waiting another 500 ms\n  await page.waitForTimeout(1500);\n\n  await expect(menuItem1.locator('ix-tooltip')).toHaveClass(/visible/);\n  await expect(menuItem1.locator('ix-tooltip')).toHaveText('Test123');\n});\n"]}

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

@@ -0,0 +1,262 @@
+/*
+ * 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: 2024 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * SPDX-FileCopyrightText: 2024 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: 2024 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.
+ */
+.text-xs {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: var(--theme-color-std-text);
+}
+
+.text-s {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-h2 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+}
+
+.text-xl {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.091em;
+  color: var(--theme-color-std-text);
+}
+
+a {
+  color: var(--theme-color-primary);
+}
+
+/*
+ * SPDX-FileCopyrightText: 2024 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: 2024 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;
+  flex-grow: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+@-moz-document url-prefix() {
+  :host * {
+    scrollbar-color: var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);
+    scrollbar-width: thin;
+  }
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+: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;
+  flex-direction: row;
+  align-items: center;
+  height: 2rem;
+  margin-bottom: 0.5rem;
+}
+:host .settings-header h2 {
+  color: var(--theme-nav-overlay-header--color);
+  margin-bottom: 1rem;
+}
+:host ix-tabs {
+  margin-bottom: 1.5rem;
+}
+:host .settings-tabs {
+  margin-bottom: 1.5rem;
+}