@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/components/sdds-modal.js

@@ -1,66 +1,74 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
 
-const modalCss = ":root,html{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-bg:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}:root .sdds-theme-light,html .sdds-theme-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-bg:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}:root .sdds-theme-dark,html .sdds-theme-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-bg:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-white);--sdds-modal-icon:var(--sdds-white);--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-bg);z-index:4;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:40px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:0;left:0;right:0;background-color:var(--sdds-modal-bg);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-bg);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-bg);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-bg)}.sdds-modal-headline{font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1}.sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;margin:0 -16px 0 0;overflow-y:visible;}.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{left:0;top:0;position:fixed;height:100%;width:100%;z-index:40000;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}.sdds-modal-btn{display:inline-block;width:16px;height:auto;background-image: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='%23171719'/%3E%3C/svg%3E%0A\");background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:40000;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-btn{border:none;background-color:transparent;}:host(.show){display:flex}:host(.hide){display:none}";
+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.prevent = false;
-    this.size = 'md';
-    this.actions = 'static';
-    this.open = false;
-  }
-  /** Shows the modal  */
-  async openModal() {
-    this.open = true;
-  }
-  setDissmissButtons() {
-    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
-    nodes.forEach((el) => {
-      el.addEventListener('click', () => {
-        this.open = false;
-      });
-    });
-  }
-  handleClick(e) {
-    const targetList = e.composedPath();
-    const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-btn' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
-      this.open = false;
-    }
-  }
-  componentDidRender() {
-    this.setDissmissButtons();
-  }
-  render() {
-    return (h(Host, { onClick: (event) => {
-        this.handleClick(event);
-      }, class: `sdds-modal-backdrop ${this.open ? '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-btn" })), 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 el() { return this; }
-  static get style() { return modalCss; }
-}, [1, "sdds-modal", {
-    "prevent": [4],
-    "size": [1],
-    "actions": [1],
-    "open": [4],
-    "openModal": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-modal"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Modal);
-      }
-      break;
-  } });
+const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.open = false;
+  }
+  /** Shows the modal  */
+  async openModal() {
+    this.open = true;
+  }
+  setDissmissButtons() {
+    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
+    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {
+      el.addEventListener('click', () => {
+        this.open = false;
+      });
+    });
+  }
+  handleClick(e) {
+    const targetList = e.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.open = false;
+    }
+  }
+  componentDidRender() {
+    this.setDissmissButtons();
+  }
+  render() {
+    return (h(Host, { onClick: (event) => {
+        this.handleClick(event);
+      }, class: `sdds-modal-backdrop ${this.open ? '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", ref: (el) => {
+        this.closeButtonEl = el;
+      } }, 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 el() { return this; }
+  static get style() { return modalCss; }
+}, [1, "sdds-modal", {
+    "prevent": [4],
+    "size": [1],
+    "actions": [1],
+    "open": [4],
+    "openModal": [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.js

@@ -1,110 +1,114 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const navigationTabsCss = ".sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-bg);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-bg);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-bg);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-hover-bg);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-active-bg)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-bg);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-hover-bg)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-active-bg)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:rgba(0, 21, 51, 0.6);padding:26px 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}::slotted(.sdds-navigation-tabs-tab)::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-hover-indicator-bg);transition:width 0.15s ease-in-out;z-index:10}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-hover-color)}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-focus-color)}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-active-color)}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;--sdds-navigation-tabs-tab-active-indicator-bg:var(--sdds-blue-400);background-color:var(--sdds-navigation-tabs-tab-active-indicator-bg)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-active-color);opacity:0.16;pointer-events:none}";
+const navigationTabsCss = ".sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 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}::slotted(.sdds-navigation-tabs-tab)::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}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}";
 
-const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.buttonWidth = 0; // current calculated width of the largest nav button
-    this.tabs = [];
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  componentDidRender() {
-    this._calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-navigation-tabs-tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this._evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      }
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this._calculateButtonWidth();
-  }
-  _calculateButtonWidth() {
-    let best = 0;
-    const navButtons = Array.from(this.host.children);
-    navButtons.forEach((navButton) => {
-      const style = window.getComputedStyle(navButton);
-      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-      if (width > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  _scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "sdds-navigation-tabs" }, h("div", { class: "sdds-navigation-tabs-wrapper", ref: (el) => (this.navWrapperElement = el) }, h("slot", null)), h("div", { class: "sdds-navigation-tabs-navigation" }, h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this._scrollRight() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this._scrollLeft() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
-  }
-  get host() { return this; }
-  static get style() { return navigationTabsCss; }
-}, [1, "sdds-navigation-tabs", {
-    "tabs": [32],
-    "showLeftScroll": [32],
-    "showRightScroll": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tabs"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, NavigationTabs);
-      }
-      break;
-  } });
+const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.componentWidth = 0; // visible width of this component
+    this.buttonsWidth = 0; // total width of all nav items combined
+    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+    this.buttonWidth = 0; // current calculated width of the largest nav button
+    this.tabs = [];
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+    this.modeVariant = null;
+  }
+  componentDidRender() {
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = Array.from(this.host.children);
+        navButtons.forEach((navButton) => {
+          const style = window.getComputedStyle(navButton);
+          buttonsWidth +=
+            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+          navButton.classList.add('sdds-navigation-tabs-tab');
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+      });
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+  }
+  calculateButtonWidth() {
+    let best = 0;
+    const navButtons = Array.from(this.host.children);
+    navButtons.forEach((navButton) => {
+      const style = window.getComputedStyle(navButton);
+      const width = navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+      if (width > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
+    this.evaluateScrollButtons();
+  }
+  evaluateScrollButtons() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    if (scroll >= this.scrollWidth) {
+      this.showRightScroll = false;
+    }
+    else {
+      this.showRightScroll = true;
+    }
+    if (scroll <= 0) {
+      this.showLeftScroll = false;
+    }
+    else {
+      this.showLeftScroll = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "sdds-navigation-tabs" }, h("div", { class: "sdds-navigation-tabs-wrapper", ref: (el) => {
+        this.navWrapperElement = el;
+      } }, h("slot", null)), h("div", { class: "sdds-navigation-tabs-navigation" }, h("button", { class: `sdds-navigation-tabs-forward ${this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z", fill: "#0D0F13" }))), h("button", { class: `sdds-navigation-tabs-back ${this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z", fill: "#0D0F13" })))))));
+  }
+  get host() { return this; }
+  static get style() { return navigationTabsCss; }
+}, [1, "sdds-navigation-tabs", {
+    "modeVariant": [1, "mode-variant"],
+    "tabs": [32],
+    "showLeftScroll": [32],
+    "showRightScroll": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-navigation-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-navigation-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, NavigationTabs);
+      }
+      break;
+  } });
 }
 
 const SddsNavigationTabs = NavigationTabs;

package/dist/components/sdds-popover-canvas.js

@@ -1,94 +1,105 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createPopper } from './popper.js';
 
-const popoverCanvasCss = ":host{box-sizing:border-box;min-width:160px;min-height:160px;background-color:var(--sdds-popover-bg-default);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:20000;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";
+const popoverCanvasCss = ":host{box-sizing:border-box;min-width:160px;min-height:160px;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){opacity:1;display:block}";
 
-const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selector = '';
-    this.show = false;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.target = undefined;
-  }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    this.target = document.querySelector(this.selector);
-    const _this = this;
-    createPopper(this.target, this.popoverCanvasElement, {
-      placement: _this.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            console.log('popover fn', state);
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showCanvas = () => {
-      this.show = true;
-    };
-    const hideCanvas = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', event => {
-      event.stopPropagation();
-      if (this.show) {
-        hideCanvas();
-      }
-      else {
-        showCanvas();
-      }
-    });
-    this.popoverCanvasElement.addEventListener('mousemove', event => {
-      event.stopPropagation();
-    });
-    this.popoverCanvasElement.addEventListener('mousedown', event => {
-      event.stopPropagation();
-    });
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
-  }
-  get popoverCanvasElement() { return this; }
-  static get style() { return popoverCanvasCss; }
-}, [1, "sdds-popover-canvas", {
-    "selector": [1],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "target": [32]
-  }, [[9, "mousedown", "handleOutsideClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-popover-canvas"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-popover-canvas":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PopoverCanvas);
-      }
-      break;
-  } });
+const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showCanvas = () => {
+      this.show = true;
+    };
+    const hideCanvas = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideCanvas();
+      }
+      else {
+        showCanvas();
+      }
+    });
+    this.popoverCanvasElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverCanvasElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+  }
+  get popoverCanvasElement() { return this; }
+  static get style() { return popoverCanvasCss; }
+}, [1, "sdds-popover-canvas", {
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "placement": [1],
+    "offsetSkidding": [2, "offset-skidding"],
+    "offsetDistance": [2, "offset-distance"],
+    "renderedShowValue": [32],
+    "popperInstance": [32],
+    "target": [32]
+  }, [[9, "mousedown", "handleOutsideClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-popover-canvas"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-popover-canvas":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PopoverCanvas);
+      }
+      break;
+  } });
 }
 
 const SddsPopoverCanvas = PopoverCanvas;