@scania/tegel 0.0.51 → 0.0.52

package/dist/components/sdds-message.js

@@ -3,62 +3,62 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const sddsMessageCss = ":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";
 
-const SddsMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.getIconName = () => {
-      switch (this.type) {
-        case 'information':
-          return 'info';
-        case 'error':
-          return 'error';
-        case 'warning':
-          return 'warning';
-        case 'success':
-          return 'tick';
-        default:
-          return 'info';
-      }
-    };
-    this.header = undefined;
-    this.modeVariant = null;
-    this.type = 'information';
-    this.noIcon = false;
-    this.minimal = false;
-  }
-  render() {
+const SddsMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
     return (h(Host, null, h("div", { class: `
         message-wrapper ${this.type}
         ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
-  }
-  static get style() { return sddsMessageCss; }
-}, [1, "sdds-message", {
-    "header": [1],
-    "modeVariant": [1, "mode-variant"],
-    "type": [1],
-    "noIcon": [4, "no-icon"],
-    "minimal": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-message", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsMessage$1);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("sdds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+  }
+  static get style() { return sddsMessageCss; }
+}, [1, "sdds-message", {
+    "header": [1],
+    "modeVariant": [1, "mode-variant"],
+    "type": [1],
+    "noIcon": [4, "no-icon"],
+    "minimal": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-message", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsMessage$1);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const SddsMessage = SddsMessage$1;

package/dist/components/sdds-modal.js

@@ -3,121 +3,121 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const modalCss = ":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal *{box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
 
-const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsClose = createEvent(this, "sddsClose", 7);
-    /** Emits a close event and then close the modal if it is not prevented. */
-    this.handleClose = (event) => {
-      const closeEvent = this.sddsClose.emit(event);
-      if (!closeEvent.defaultPrevented) {
-        this.isShown = false;
-      }
-    };
-    this.handleShow = () => {
-      this.isShown = true;
-    };
-    /** Adds an event listener to the reference element that shows/closes the modal. */
-    this.initializeReferenceElement = (referenceEl) => {
-      if (referenceEl) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.handleClose(event);
-          }
-          else {
-            this.handleShow();
-          }
-        });
-      }
-    };
-    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
-    this.setShowButton = () => {
-      var _a;
-      if (this.selector || this.referenceEl) {
-        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-        if (referenceEl) {
-          this.initializeReferenceElement(referenceEl);
-        }
-      }
-    };
-    this.prevent = false;
-    this.size = 'md';
-    this.actions = 'static';
-    this.selector = undefined;
-    this.referenceEl = undefined;
-    this.show = undefined;
-    this.isShown = false;
-  }
-  /** Shows the modal.  */
-  async showModal() {
-    this.handleShow();
-  }
-  /** Closes the modal. */
-  async closeModal() {
-    this.handleClose();
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-    this.setDissmissButtons();
-    this.setShowButton();
-  }
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
-  handleOverlayClick(event) {
-    const targetList = event.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-close' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
-      this.handleClose(event);
-    }
-  }
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons() {
-    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
-      dismissButton.addEventListener('click', (event) => {
-        this.handleClose(event);
-      });
-    });
-  }
-  render() {
-    return (h(Host, { onClick: (event) => {
-        this.handleOverlayClick(event);
-      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
-  }
-  get host() { return this; }
-  static get style() { return modalCss; }
-}, [1, "sdds-modal", {
-    "prevent": [4],
-    "size": [1],
-    "actions": [1],
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "isShown": [32],
-    "showModal": [64],
-    "closeModal": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-modal", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Modal);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sddsClose = createEvent(this, "sddsClose", 7);
+    /** Emits a close event and then close the modal if it is not prevented. */
+    this.handleClose = (event) => {
+      const closeEvent = this.sddsClose.emit(event);
+      if (!closeEvent.defaultPrevented) {
+        this.isShown = false;
+      }
+    };
+    this.handleShow = () => {
+      this.isShown = true;
+    };
+    /** Adds an event listener to the reference element that shows/closes the modal. */
+    this.initializeReferenceElement = (referenceEl) => {
+      if (referenceEl) {
+        referenceEl.addEventListener('click', (event) => {
+          event.stopPropagation();
+          if (this.isShown) {
+            this.handleClose(event);
+          }
+          else {
+            this.handleShow();
+          }
+        });
+      }
+    };
+    /** Check if there is a referenceElement or selector and adds event listener to them if so. */
+    this.setShowButton = () => {
+      var _a;
+      if (this.selector || this.referenceEl) {
+        const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        if (referenceEl) {
+          this.initializeReferenceElement(referenceEl);
+        }
+      }
+    };
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.selector = undefined;
+    this.referenceEl = undefined;
+    this.show = undefined;
+    this.isShown = false;
+  }
+  /** Shows the modal.  */
+  async showModal() {
+    this.handleShow();
+  }
+  /** Closes the modal. */
+  async closeModal() {
+    this.handleClose();
+  }
+  connectedCallback() {
+    if (this.show !== null) {
+      this.isShown = this.show;
+    }
+    this.setDissmissButtons();
+    this.setShowButton();
+  }
+  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  handleOverlayClick(event) {
+    const targetList = event.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.handleClose(event);
+    }
+  }
+  /** Adds an event listener to the dismiss buttons that closes the modal. */
+  setDissmissButtons() {
+    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
+      dismissButton.addEventListener('click', (event) => {
+        this.handleClose(event);
+      });
+    });
+  }
+  render() {
+    return (h(Host, { onClick: (event) => {
+        this.handleOverlayClick(event);
+      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+  }
+  get host() { return this; }
+  static get style() { return modalCss; }
+}, [1, "sdds-modal", {
+    "prevent": [4],
+    "size": [1],
+    "actions": [1],
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "isShown": [32],
+    "showModal": [64],
+    "closeModal": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-modal", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Modal);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
 
 const SddsModal = Modal;

package/dist/components/sdds-navigation-tabs-button.js

@@ -2,35 +2,35 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sddsNavigationTabsButtonCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host button{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host button.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host button .label{padding:8px 4px}:host button:focus-visible{outline:none}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host button:hover::after{width:100%}:host button.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host button::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
-const SddsNavigationTabsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
+const SddsNavigationTabsButton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+    this.selected = false;
+  }
+  render() {
     return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsNavigationTabsButtonCss; }
-}, [1, "sdds-navigation-tabs-button", {
-    "disabled": [4],
-    "selected": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsButton$1);
-      }
-      break;
-  } });
+         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+  }
+  static get style() { return sddsNavigationTabsButtonCss; }
+}, [1, "sdds-navigation-tabs-button", {
+    "disabled": [4],
+    "selected": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-navigation-tabs-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-navigation-tabs-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsNavigationTabsButton$1);
+      }
+      break;
+  } });
 }
 
 const SddsNavigationTabsButton = SddsNavigationTabsButton$1;

package/dist/components/sdds-navigation-tabs-link.js

@@ -2,43 +2,43 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sddsNavigationTabsLinkCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host a.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host a .label{padding:8px 4px}:host a:focus-visible{outline:none}:host a:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host a:hover::after{width:100%}:host a.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host a::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
-const SddsNavigationTabsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
+const SddsNavigationTabsLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+    this.selected = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+  }
+  render() {
     return (h(Host, { role: "listitem" }, h("a", { class: `
         ${this.selected ? 'selected' : ''}
         ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-  static get style() { return sddsNavigationTabsLinkCss; }
-}, [1, "sdds-navigation-tabs-link", {
-    "disabled": [4],
-    "selected": [4],
-    "href": [1],
-    "target": [1],
-    "rel": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTabsLink$1);
-      }
-      break;
-  } });
+        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+  }
+  static get style() { return sddsNavigationTabsLinkCss; }
+}, [1, "sdds-navigation-tabs-link", {
+    "disabled": [4],
+    "selected": [4],
+    "href": [1],
+    "target": [1],
+    "rel": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-navigation-tabs-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-navigation-tabs-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsNavigationTabsLink$1);
+      }
+      break;
+  } });
 }
 
 const SddsNavigationTabsLink = SddsNavigationTabsLink$1;