@siemens/ix 1.6.2 → 2.0.0-beta.0

package/dist/collection/components/link-button/link-button.css

@@ -0,0 +1,440 @@
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  transition: 150ms;
+  padding: 0 0.5rem;
+  min-width: 5rem;
+  gap: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.btn .glyph {
+  margin-right: 0.25rem;
+  font-weight: 400;
+}
+.btn:focus-visible, .btn.focus {
+  box-shadow: none;
+}
+
+.btn-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-primary, .btn-primary.focus, .btn-primary:focus-visible {
+  background-color: var(--theme-btn-primary--background);
+  color: var(--theme-btn-primary--color);
+  --ix-button-color: var(--theme-btn-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-primary--border-color);
+  border-style: solid;
+}
+.btn-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-primary.selected {
+  background-color: var(--theme-btn-primary--background--selected);
+}
+.btn-primary.hover, .btn-primary:hover {
+  border-color: var(--theme-btn-primary--border-color--hover) !important;
+  background-color: var(--theme-btn-primary--background--hover) !important;
+  color: var(--theme-btn-primary--color--hover) !important;
+}
+.btn-primary.selected.hover, .btn-primary.selected:hover {
+  background-color: var(--theme-btn-primary--background--selected-hover);
+  color: var(--theme-btn-primary--color--selected-hover);
+}
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+  border-color: var(--theme-btn-primary--border-color--active) !important;
+  background-color: var(--theme-btn-primary--background--active) !important;
+  color: var(--theme-btn-primary--color--active) !important;
+}
+.btn-primary.selected:not(:disabled):not(.disabled):active, .btn-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-primary--background--selected-active);
+  color: var(--theme-btn-primary--color--selected-active);
+}
+.btn-primary.disabled, .btn-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-primary--border-color--disabled);
+  background-color: var(--theme-btn-primary--background--disabled);
+  color: var(--theme-btn-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-primary--color--disabled);
+}
+
+.btn-outline-primary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-primary, .btn-outline-primary.focus, .btn-outline-primary:focus-visible {
+  background-color: var(--theme-btn-outline-primary--background);
+  color: var(--theme-btn-outline-primary--color);
+  --ix-button-color: var(--theme-btn-outline-primary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-primary--border-color);
+  border-style: solid;
+}
+.btn-outline-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-primary.selected {
+  background-color: var(--theme-btn-outline-primary--background--selected);
+}
+.btn-outline-primary.hover, .btn-outline-primary:hover {
+  border-color: var(--theme-btn-outline-primary--border-color--hover) !important;
+  background-color: var(--theme-btn-outline-primary--background--hover) !important;
+  color: var(--theme-btn-outline-primary--color--hover) !important;
+}
+.btn-outline-primary.selected.hover, .btn-outline-primary.selected:hover {
+  background-color: var(--theme-btn-outline-primary--background--selected-hover);
+  color: var(--theme-btn-outline-primary--color--selected-hover);
+}
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-primary--border-color--active) !important;
+  background-color: var(--theme-btn-outline-primary--background--active) !important;
+  color: var(--theme-btn-outline-primary--color--active) !important;
+}
+.btn-outline-primary.selected:not(:disabled):not(.disabled):active, .btn-outline-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-outline-primary--background--selected-active);
+  color: var(--theme-btn-outline-primary--color--selected-active);
+}
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-primary--border-color--disabled);
+  background-color: var(--theme-btn-outline-primary--background--disabled);
+  color: var(--theme-btn-outline-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-primary--color--disabled);
+}
+
+.btn-invisible-primary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-primary, .btn-invisible-primary.focus, .btn-invisible-primary:focus-visible {
+  background-color: var(--theme-btn-invisible-primary--background);
+  color: var(--theme-btn-invisible-primary--color);
+  --ix-button-color: var(--theme-btn-invisible-primary--color);
+  border-color: transparent;
+}
+.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-primary.selected {
+  background-color: var(--theme-btn-invisible-primary--background--selected);
+}
+.btn-invisible-primary.hover, .btn-invisible-primary:hover {
+  background-color: var(--theme-btn-invisible-primary--background--hover) !important;
+  color: var(--theme-btn-invisible-primary--color--hover) !important;
+}
+.btn-invisible-primary.selected.hover, .btn-invisible-primary.selected:hover {
+  background-color: var(--theme-btn-invisible-primary--background--selected-hover);
+  color: var(--theme-btn-invisible-primary--color--selected-hover);
+}
+.btn-invisible-primary:not(:disabled):not(.disabled):active, .btn-invisible-primary:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-primary--background--active) !important;
+  color: var(--theme-btn-invisible-primary--color--active) !important;
+}
+.btn-invisible-primary.selected:not(:disabled):not(.disabled):active, .btn-invisible-primary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-primary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-primary--background--selected-active);
+  color: var(--theme-btn-invisible-primary--color--selected-active);
+}
+.btn-invisible-primary.disabled, .btn-invisible-primary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-primary--background--disabled);
+  color: var(--theme-btn-invisible-primary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-primary--color--disabled);
+}
+
+.btn-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-secondary, .btn-secondary.focus, .btn-secondary:focus-visible {
+  background-color: var(--theme-btn-secondary--background);
+  color: var(--theme-btn-secondary--color);
+  --ix-button-color: var(--theme-btn-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-secondary--border-color);
+  border-style: solid;
+}
+.btn-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-secondary.selected {
+  background-color: var(--theme-btn-secondary--background--selected);
+}
+.btn-secondary.hover, .btn-secondary:hover {
+  border-color: var(--theme-btn-secondary--border-color--hover) !important;
+  background-color: var(--theme-btn-secondary--background--hover) !important;
+  color: var(--theme-btn-secondary--color--hover) !important;
+}
+.btn-secondary.selected.hover, .btn-secondary.selected:hover {
+  background-color: var(--theme-btn-secondary--background--selected-hover);
+  color: var(--theme-btn-secondary--color--selected-hover);
+}
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-secondary--border-color--active) !important;
+  background-color: var(--theme-btn-secondary--background--active) !important;
+  color: var(--theme-btn-secondary--color--active) !important;
+}
+.btn-secondary.selected:not(:disabled):not(.disabled):active, .btn-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-secondary--background--selected-active);
+  color: var(--theme-btn-secondary--color--selected-active);
+}
+.btn-secondary.disabled, .btn-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-secondary--border-color--disabled);
+  background-color: var(--theme-btn-secondary--background--disabled);
+  color: var(--theme-btn-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-secondary--color--disabled);
+}
+
+.btn-outline-secondary {
+  border-radius: var(--theme-btn--border-radius);
+}
+.btn-outline-secondary, .btn-outline-secondary.focus, .btn-outline-secondary:focus-visible {
+  background-color: var(--theme-btn-outline-secondary--background);
+  color: var(--theme-btn-outline-secondary--color);
+  --ix-button-color: var(--theme-btn-outline-secondary--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-secondary--border-color);
+  border-style: solid;
+}
+.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-outline-secondary.selected {
+  background-color: var(--theme-btn-outline-secondary--background--selected);
+}
+.btn-outline-secondary.hover, .btn-outline-secondary:hover {
+  border-color: var(--theme-btn-outline-secondary--border-color--hover) !important;
+  background-color: var(--theme-btn-outline-secondary--background--hover) !important;
+  color: var(--theme-btn-outline-secondary--color--hover) !important;
+}
+.btn-outline-secondary.selected.hover, .btn-outline-secondary.selected:hover {
+  background-color: var(--theme-btn-outline-secondary--background--selected-hover);
+  color: var(--theme-btn-outline-secondary--color--selected-hover);
+}
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle {
+  border-color: var(--theme-btn-outline-secondary--border-color--active) !important;
+  background-color: var(--theme-btn-outline-secondary--background--active) !important;
+  color: var(--theme-btn-outline-secondary--color--active) !important;
+}
+.btn-outline-secondary.selected:not(:disabled):not(.disabled):active, .btn-outline-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-outline-secondary--background--selected-active);
+  color: var(--theme-btn-outline-secondary--color--selected-active);
+}
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  border-color: var(--theme-btn-outline-secondary--border-color--disabled);
+  background-color: var(--theme-btn-outline-secondary--background--disabled);
+  color: var(--theme-btn-outline-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-secondary--color--disabled);
+}
+
+.btn-invisible-secondary {
+  border-radius: var(--theme-btn--border-radius);
+  --bs-btn-border-width: 0px;
+  --bs-btn-active-border-color: none;
+}
+.btn-invisible-secondary, .btn-invisible-secondary.focus, .btn-invisible-secondary:focus-visible {
+  background-color: var(--theme-btn-invisible-secondary--background);
+  color: var(--theme-btn-invisible-secondary--color);
+  --ix-button-color: var(--theme-btn-invisible-secondary--color);
+  border-color: transparent;
+}
+.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+.btn-invisible-secondary.selected {
+  background-color: var(--theme-btn-invisible-secondary--background--selected);
+}
+.btn-invisible-secondary.hover, .btn-invisible-secondary:hover {
+  background-color: var(--theme-btn-invisible-secondary--background--hover) !important;
+  color: var(--theme-btn-invisible-secondary--color--hover) !important;
+}
+.btn-invisible-secondary.selected.hover, .btn-invisible-secondary.selected:hover {
+  background-color: var(--theme-btn-invisible-secondary--background--selected-hover);
+  color: var(--theme-btn-invisible-secondary--color--selected-hover);
+}
+.btn-invisible-secondary:not(:disabled):not(.disabled):active, .btn-invisible-secondary:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-secondary--background--active) !important;
+  color: var(--theme-btn-invisible-secondary--color--active) !important;
+}
+.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active, .btn-invisible-secondary.selected:not(:disabled):not(.disabled).active, .show > .btn-invisible-secondary.selected.dropdown-toggle {
+  background-color: var(--theme-btn-invisible-secondary--background--selected-active);
+  color: var(--theme-btn-invisible-secondary--color--selected-active);
+}
+.btn-invisible-secondary.disabled, .btn-invisible-secondary:disabled {
+  pointer-events: none;
+  cursor: initial;
+  background-color: var(--theme-btn-invisible-secondary--background--disabled);
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-secondary--color--disabled);
+}
+
+.btn-oval,
+.btn-icon {
+  min-width: 2rem;
+  width: 2rem;
+}
+.btn-oval .glyph,
+.btn-icon .glyph {
+  margin-right: 0;
+}
+
+.btn-oval {
+  border-radius: 6.25rem;
+  width: 2rem;
+}
+
+.btn-icon-xs,
+.btn-icon-12 {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+
+.btn-icon-s,
+.btn-icon-16 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+
+.btn-icon-32 {
+  height: 2rem;
+  width: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+/*
+ * 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 {
+  display: inline-flex;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  min-width: 2rem;
+}
+:host .link-button {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  padding: 0 0.25rem 0 0;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  color: var(--theme-color-primary);
+  cursor: pointer;
+  text-decoration: none;
+}
+:host .link-button .link {
+  display: block;
+  position: relative;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+:host .link-button:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .link-button:not(.disabled):not(:disabled):hover {
+  color: var(--theme-color-dynamic--hover);
+}
+:host .link-button:not(.disabled):not(:disabled):hover .link {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+:host .link-button:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .link-button:not(.disabled):not(:disabled):active {
+  color: var(--theme-color-dynamic--active);
+}
+:host .link-button:not(.disabled):not(:disabled):active .link {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+:host .link-button.disabled {
+  cursor: default;
+  color: var(--theme-color-weak-text);
+}
+:host .link-button a {
+  all: unset;
+}
+:host :focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+}

package/dist/collection/components/link-button/link-button.js

@@ -0,0 +1,98 @@
+/*
+ * 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';
+/**
+ * @since 2.0.0
+ */
+export class LinkButton {
+  constructor() {
+    this.disabled = false;
+    this.url = undefined;
+    this.target = '_self';
+  }
+  render() {
+    return (h(Host, null, h("a", { title: this.url, tabindex: "0", class: {
+        'link-button': true,
+        disabled: this.disabled,
+      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: "chevron-right-small", size: "16" }), h("div", { class: {
+        link: true,
+        disabled: this.disabled,
+      } }, h("slot", null)))));
+  }
+  static get is() { return "ix-link-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["link-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["link-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable the link button"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Url for the link button"
+        },
+        "attribute": "url",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies where to open the link\n\nhttps://www.w3schools.com/html/html_links.asp"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=link-button.js.map

package/dist/collection/components/link-button/link-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-button.js","sourceRoot":"","sources":["../../../src/components/link-button/link-button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;UACL,aAAa,EAAE,IAAI;UACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM;QAEnB,eAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW;QACrE,WACE,KAAK,EAAE;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;WACxB;UAED,eAAa,CACT,CACJ,CACC,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/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon class=\"icon\" name=\"chevron-right-small\" size=\"16\"></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/map-navigation/map-navigation.css

@@ -34,12 +34,25 @@
  * 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 {
   display: flex;
   position: relative;
   width: 100%;
   height: 100%;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
 :host .map-nav {
   display: flex;
   margin-left: 3.25rem;
@@ -112,7 +125,7 @@
   overflow: hidden;
   padding: 0 1rem;
 }
-:host .map-nav-header-content:empty {
+:host .map-nav-header-content.empty {
   height: 0;
 }
 :host .map-nav-title {
@@ -134,4 +147,7 @@
   height: 100%;
   overflow: hidden;
   z-index: calc(var(--theme-z-index-sticky) - 1);
+}
+:host ::slotted(ix-menu) {
+  position: absolute;
 }

package/dist/collection/components/map-navigation/map-navigation.js

@@ -14,6 +14,7 @@ export class MapNavigation {
     this.navigationTitle = undefined;
     this.hideContextMenu = true;
     this.isSidebarOpen = true;
+    this.hasContentHeader = false;
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
@@ -22,20 +23,19 @@ export class MapNavigation {
     return this.hostElement.querySelector('ix-menu-overlay');
   }
   get mapNavMenu() {
-    return this.hostElement.querySelector('.map-nav-menu');
+    return this.hostElement.shadowRoot.querySelector('.map-nav-menu');
   }
   get sidebar() {
-    return this.hostElement.querySelector('.map-nav-sidebar');
+    return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');
   }
   get overlay() {
-    return this.hostElement.querySelector('#overlay');
+    return this.hostElement.shadowRoot.querySelector('#overlay');
   }
   componentDidRender() {
     this.appendMenu();
     this.closeOverlay();
   }
   appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
     this.menu.addEventListener('mapExpandChange', (event) => {
       const state = !event.detail;
       this.toggleSidebar(state);
@@ -140,11 +140,21 @@ export class MapNavigation {
       },
     });
   }
+  checkHasContentHeader(e) {
+    const nodes = e.currentTarget.assignedNodes({
+      flatten: true,
+    });
+    this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
+  }
   render() {
-    return (h(Host, null, h("div", { id: "menu-placeholder" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "Secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: "map-nav-header-content bg-2" }, h("slot", { name: "content-header" })), h("main", null, h("slot", null), h("slot", { name: "overlay" }))))));
+    return (h(Host, null, h("slot", { name: "menu" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { slot: "logo", name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: {
+        'map-nav-header-content': true,
+        'bg-2': true,
+        empty: !this.hasContentHeader,
+      } }, h("slot", { name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", null, h("slot", null), h("slot", { name: "overlay" }))))));
   }
   static get is() { return "ix-map-navigation"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["map-navigation.scss"]
@@ -213,7 +223,8 @@ export class MapNavigation {
   }
   static get states() {
     return {
-      "isSidebarOpen": {}
+      "isSidebarOpen": {},
+      "hasContentHeader": {}
     };
   }
   static get events() {