@scania/tegel 0.0.8 → 0.0.9

package/dist/components/tds-icon.js

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

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

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

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

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const inlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-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(--tds-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(--tds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--tds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+
+const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab 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 <tds-inline-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 inlineTabCss; }
+}, [1, "tds-inline-tab", {
+    "disabled": [4],
+    "selected": [32],
+    "setSelected": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-inline-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-inline-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsInlineTab$1);
+      }
+      break;
+  } });
+}
+
+const TdsInlineTab = TdsInlineTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsInlineTab, defineCustomElement };

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

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

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

@@ -0,0 +1,181 @@
+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(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-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(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-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(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
+
+const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsChange = createEvent(this, "tdsChange", 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 tdsChangeEvent = this.tdsChange.emit({
+            selectedTabIndex: this.children.indexOf(item),
+          });
+          if (!tdsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.tdsChange.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.tdsChange.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.tdsChange.emit({
+        selectedTabIndex: this.selectedIndex,
+      });
+    }
+    else {
+      this.children[this.selectedIndex].setSelected(true);
+      this.tdsChange.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 ? `tds-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("tds-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("tds-icon", { name: "chevron_right", size: "20px" })))));
+  }
+  get host() { return this; }
+  static get style() { return inlineTabsCss; }
+}, [1, "tds-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 = ["tds-inline-tabs", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-inline-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsInlineTabs$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsInlineTabs = TdsInlineTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsInlineTabs, defineCustomElement };

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

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

package/dist/components/tds-link.js

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

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

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

package/dist/components/tds-message.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const messageCss = ":host .message-wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--tds-information)}:host .message-wrapper.information tds-icon{color:var(--tds-information)}:host .message-wrapper.success{border-left:4px solid var(--tds-positive)}:host .message-wrapper.success tds-icon{color:var(--tds-positive)}:host .message-wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .message-wrapper.error tds-icon{color:var(--tds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--tds-warning)}:host .message-wrapper.warning tds-icon{color:var(--tds-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(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .message-wrapper.message-minimal tds-icon{padding-right:8px}:host tds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";
+
+const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage 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 ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-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 messageCss; }
+}, [1, "tds-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 = ["tds-message", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsMessage$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsMessage = TdsMessage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsMessage, defineCustomElement };

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

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

package/dist/components/tds-modal.js

@@ -0,0 +1,125 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const modalCss = ":root,.tds-mode-light{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-white);--tds-modal-text:var(--tds-grey-958);--tds-modal-icon:var(--tds-black);--tds-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\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-mode-dark{--tds-modal-backdrop:rgba(0 0 0 / 40%);--tds-modal-background:var(--tds-grey-900);--tds-modal-text:var(--tds-grey-50);--tds-modal-icon:var(--tds-white);--tds-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\");--tds-modal-scrollbar:var(--tds-grey-300);--tds-modal-scrollbar-track:var(--tds-grey-300);--tds-modal-scrollbar-thumb:var(--tds-grey-500)}.tds-modal{box-sizing:border-box;background-color:var(--tds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.tds-modal *{box-sizing:border-box}.tds-modal::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-track{background-color:var(--tds-grey-300);border-radius:0 1em 1em 0}.tds-modal::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500);border-radius:0 1em 1em 0}.tds-modal__actions-sticky{overflow:hidden}.tds-modal__actions-sticky .tds-modal-body{font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.tds-modal__actions-sticky .tds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--tds-modal-background);padding:var(--tds-spacing-element-16);display:flex;gap:16px}.tds-modal__actions-static .tds-modal-actions{background-color:var(--tds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.tds-modal-xs{width:100%}.tds-modal-sm{width:100%}.tds-modal-md{width:100%}.tds-modal-lg{width:100%}}@media (min-width: 672px){.tds-modal-xs{width:75%}.tds-modal-sm{width:62.5%}.tds-modal-md{width:75%}.tds-modal-lg{width:100%}}@media (min-width: 1056px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:43.75%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1312px){.tds-modal-xs{width:31.25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:62.5%}.tds-modal-lg{width:75%}}@media (min-width: 1584px){.tds-modal-xs{width:25%}.tds-modal-sm{width:37.5%}.tds-modal-md{width:50%}.tds-modal-lg{width:75%}}@media (max-width: 320px){.tds-modal-md,.tds-modal-lg,.tds-modal-sm{height:100%}.tds-modal-md slot[name=tds-modal-actions]::slotted(*),.tds-modal-lg slot[name=tds-modal-actions]::slotted(*),.tds-modal-sm slot[name=tds-modal-actions]::slotted(*){display:flex}}.tds-modal-header{display:flex;padding-bottom:var(--tds-spacing-element-8);position:sticky;top:0;background-color:var(--tds-modal-background);z-index:1}.tds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--tds-modal-background)}.tds-modal-headline{color:var(--tds-modal-text);font:var(--tds-headline-05);letter-spacing:var(--tds-headline-05-ls);margin:0;flex:1;color:var(--tds-modal-text)}.tds-modal-body{color:var(--tds-modal-text);font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.tds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--tds-grey-300)}.tds-modal-body::-webkit-scrollbar-track{background-color:var(--tds-grey-300)}.tds-modal-body::-webkit-scrollbar-thumb{background-color:var(--tds-grey-500)}@media (min-width: 1056px){.tds-modal-body{padding-right:64px}}.tds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}.tds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.tds-modal-backdrop{padding:0}}.tds-modal-backdrop.show{display:flex}.tds-modal-backdrop.hide{display:none}button.tds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.tds-modal-close{display:inline-block;height:auto;color:var(--tds-modal-icon);cursor:pointer}.tds-modal-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media (min-width: 320px){.tds-modal-close{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-16)}}@media (min-width: 1056px){.tds-modal-close-btn{margin-left:var(--tds-spacing-element-48)}}.tds-modal-close-btn svg{fill:var(--tds-modal-icon)}.tds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--tds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .tds-modal-close{border:none;background-color:transparent}:host .tds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";
+
+const TdsModal$1 = /*@__PURE__*/ proxyCustomElement(class TdsModal extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsClose = createEvent(this, "tdsClose", 7);
+    /** Emits a close event and then close the Modal if it is not prevented. */
+    this.handleClose = (event) => {
+      const closeEvent = this.tdsClose.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.setDismissButtons();
+    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] === 'tds-modal-close' ||
+      (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
+      this.handleClose(event);
+    }
+  }
+  /** Adds an event listener to the dismiss buttons that closes the Modal. */
+  setDismissButtons() {
+    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: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal ${this.actions ? `tds-modal__actions-${this.actions}` : ''} ${this.size ? `tds-modal-${this.size}` : ''} ` }, h("div", { class: "tds-modal-header" }, h("slot", { name: "tds-modal-headline" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "tds-modal-body" }, h("slot", { name: "tds-modal-body" })), h("div", { class: "tds-modal-actions" }, h("slot", { name: "tds-modal-actions" })))));
+  }
+  get host() { return this; }
+  static get style() { return modalCss; }
+}, [1, "tds-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 = ["tds-modal", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-modal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsModal$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsModal = TdsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsModal, defineCustomElement };

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

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

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

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const navigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-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(--tds-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(--tds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--tds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+
+const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab 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 <tds-navigation-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 navigationTabCss; }
+}, [1, "tds-navigation-tab", {
+    "disabled": [4],
+    "selected": [32],
+    "setSelected": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-navigation-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-navigation-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsNavigationTab$1);
+      }
+      break;
+  } });
+}
+
+const TdsNavigationTab = TdsNavigationTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsNavigationTab, defineCustomElement };

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

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