@scania/tegel 0.0.8 → 0.0.10

package/dist/components/sdds-icon.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsIcon extends Components.SddsIcon, HTMLElement {}
-export const SddsIcon: {
-  prototype: SddsIcon;
-  new (): SddsIcon;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-icon.js

@@ -1,6 +0,0 @@
-import { I as Icon, d as defineCustomElement$1 } from './icon.js';
-
-const SddsIcon = Icon;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsIcon, defineCustomElement };

package/dist/components/sdds-inline-tab.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsInlineTab extends Components.SddsInlineTab, HTMLElement {}
-export const SddsInlineTab: {
-  prototype: SddsInlineTab;
-  new (): SddsInlineTab;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-inline-tab.js

@@ -1,44 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const sddsInlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:20px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:-20px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-
-const SddsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class SddsInlineTab extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
-  async setSelected(selected) {
-    this.selected = selected;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
-  }
-  static get style() { return sddsInlineTabCss; }
-}, [1, "sdds-inline-tab", {
-    "disabled": [4],
-    "selected": [32],
-    "setSelected": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsInlineTab$1);
-      }
-      break;
-  } });
-}
-
-const SddsInlineTab = SddsInlineTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsInlineTab, defineCustomElement };

package/dist/components/sdds-inline-tabs.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsInlineTabs extends Components.SddsInlineTabs, HTMLElement {}
-export const SddsInlineTabs: {
-  prototype: SddsInlineTabs;
-  new (): SddsInlineTabs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-inline-tabs.js

@@ -1,181 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './icon.js';
-
-const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";
-
-const InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class InlineTabsFullbleed extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsChange = createEvent(this, "sddsChange", 7);
-    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.addResizeObserver = () => {
-      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);
-          });
-          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.addEventListenerToTabs = () => {
-      this.children = this.children.map((item, index) => {
-        item.addEventListener('click', () => {
-          const sddsChangeEvent = this.sddsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!sddsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
-              this.children.forEach((element) => element.setSelected(false));
-              item.setSelected(true);
-              this.selectedIndex = index;
-              this.sddsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-              });
-            }
-          }
-        });
-        return item;
-      });
-    };
-    this.modeVariant = 'primary';
-    this.defaultSelectedIndex = 0;
-    this.selectedIndex = undefined;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-    this.buttonWidth = 0;
-  }
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
-  async selectTab(tabIndex) {
-    if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.setSelected(false));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setSelected(true);
-          this.selectedIndex = tabIndex;
-          this.sddsChange.emit({
-            selectedTabIndex: this.selectedIndex,
-          });
-        }
-        return element;
-      });
-    }
-    return {
-      selectedTabIndex: this.selectedIndex,
-    };
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
-    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;
-    }
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    if (this.selectedIndex === undefined) {
-      this.addEventListenerToTabs();
-      this.children[this.defaultSelectedIndex].setSelected(true);
-      this.selectedIndex = this.defaultSelectedIndex;
-      this.sddsChange.emit({
-        selectedTabIndex: this.selectedIndex,
-      });
-    }
-    else {
-      this.children[this.selectedIndex].setSelected(true);
-      this.sddsChange.emit({
-        selectedTabIndex: this.selectedIndex,
-      });
-    }
-  }
-  componentDidRender() {
-    if (this.buttonsWidth > this.componentWidth) {
-      this.evaluateScrollButtons();
-    }
-    else {
-      this.showLeftScroll = false;
-      this.showRightScroll = false;
-    }
-    this.addResizeObserver();
-  }
-  render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
-        this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
-  }
-  get host() { return this; }
-  static get style() { return inlineTabsCss; }
-}, [1, "sdds-inline-tabs", {
-    "modeVariant": [1, "mode-variant"],
-    "defaultSelectedIndex": [2, "default-selected-index"],
-    "selectedIndex": [514, "selected-index"],
-    "showLeftScroll": [32],
-    "showRightScroll": [32],
-    "buttonWidth": [32],
-    "selectTab": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-inline-tabs", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-inline-tabs":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, InlineTabsFullbleed);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const SddsInlineTabs = InlineTabsFullbleed;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsInlineTabs, defineCustomElement };

package/dist/components/sdds-link.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsLink extends Components.SddsLink, HTMLElement {}
-export const SddsLink: {
-  prototype: SddsLink;
-  new (): SddsLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-link.js

@@ -1,44 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const sddsLinkCss = ".sdds-link-component{all:unset;cursor:pointer;outline:none;color:var(--sdds-link);text-decoration:underline}.sdds-link-component.active,.sdds-link-component:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}.sdds-link-component:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}.sdds-link-component:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}.sdds-link-component:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}.disabled .sdds-link-component{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}.no-underline .sdds-link-component{text-decoration:none}.no-underline:hover .sdds-link-component{text-decoration:none}";
-
-const SddsLink$1 = /*@__PURE__*/ proxyCustomElement(class SddsLink extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.disabled = false;
-    this.underline = true;
-  }
-  connectedCallback() {
-    this.host.children[0].classList.add('sdds-link-component');
-  }
-  render() {
-    return (h("div", { class: `
-          ${this.disabled ? 'disabled' : ''}
-          ${!this.underline ? 'no-underline' : ''}
-          ` }, h("slot", null)));
-  }
-  get host() { return this; }
-  static get style() { return sddsLinkCss; }
-}, [4, "sdds-link", {
-    "disabled": [4],
-    "underline": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-link"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsLink$1);
-      }
-      break;
-  } });
-}
-
-const SddsLink = SddsLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsLink, defineCustomElement };

package/dist/components/sdds-message.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsMessage extends Components.SddsMessage, HTMLElement {}
-export const SddsMessage: {
-  prototype: SddsMessage;
-  new (): SddsMessage;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-message.js

@@ -1,67 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-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 SddsMessage 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;
-  } });
-}
-
-const SddsMessage = SddsMessage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsMessage, defineCustomElement };

package/dist/components/sdds-modal.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsModal extends Components.SddsModal, HTMLElement {}
-export const SddsModal: {
-  prototype: SddsModal;
-  new (): SddsModal;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-modal.js

@@ -1,125 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-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 Modal 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) => {
-          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;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsModal, defineCustomElement };

package/dist/components/sdds-navigation-tab.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsNavigationTab extends Components.SddsNavigationTab, HTMLElement {}
-export const SddsNavigationTab: {
-  prototype: SddsNavigationTab;
-  new (): SddsNavigationTab;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/sdds-navigation-tab.js

@@ -1,44 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const sddsNavigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;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 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-
-const SddsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class SddsNavigationTab extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabled = false;
-    this.selected = false;
-  }
-  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
-  async setSelected(selected) {
-    this.selected = selected;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
-  }
-  static get style() { return sddsNavigationTabCss; }
-}, [1, "sdds-navigation-tab", {
-    "disabled": [4],
-    "selected": [32],
-    "setSelected": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-navigation-tab"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-navigation-tab":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsNavigationTab$1);
-      }
-      break;
-  } });
-}
-
-const SddsNavigationTab = SddsNavigationTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsNavigationTab, defineCustomElement };

package/dist/components/sdds-navigation-tabs.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SddsNavigationTabs extends Components.SddsNavigationTabs, HTMLElement {}
-export const SddsNavigationTabs: {
-  prototype: SddsNavigationTabs;
-  new (): SddsNavigationTabs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;