@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/cjs/sdds-inline-tabs.cjs.entry.js

@@ -2,210 +2,220 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1c79686.js');
+const index = require('./index-b98965c7.js');
 
-const inlineTabsCss = ":host{outline:0 !important;box-sizing:border-box}:host *{box-sizing:border-box}.sdds-inline-tabs{overflow:hidden;outline:0}.sdds-inline-tabs-header{position:relative}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-bg);padding:24px 24px 48px}.sdds-inline-tabs-wrapper{display:flex;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs--forward,.sdds-inline-tabs--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;top:0;background-color:var(--sdds-inlline-tabs-scroll-btn-bg);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs--forward__show,.sdds-inline-tabs--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs--forward:hover,.sdds-inline-tabs--back:hover{background-color:var(--sdds-inline-tabs-scroll-btn-hover-bg)}.sdds-inline-tabs--forward:active,.sdds-inline-tabs--back:active{background-color:var(--sdds-inline-tabs-scroll-btn-active-bg)}.sdds-inline-tabs--forward:focus,.sdds-inline-tabs--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--back{left:0}.sdds-inline-tabs--forward{right:0}.sdds-inline-tabs--tab{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;border:0;color:var(--sdds-inline-tabs-tab-color);background-color:var(--sdds-inline-tabs-tab-bg);padding:16px;min-width:142px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out;white-space:nowrap;flex-shrink:0;text-align:left;outline:none}.sdds-inline-tabs--tab>*{opacity:0.6}.sdds-inline-tabs--tab:not(:last-child){border-right:1px solid var(--sdds-inline-tabs-tab-border-color)}.sdds-inline-tabs--tab::after{content:\" \";position:absolute;top:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-bg);transition:width 0.15s ease-in-out}.sdds-inline-tabs--tab:hover{background-color:var(--sdds-inline-tabs-tab-hover-bg);color:var(--sdds-inline-tabs-tab-hover-color);text-decoration:none}.sdds-inline-tabs--tab:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-active-bg);color:var(--sdds-inline-tabs-tab-active-color);cursor:initial;border-right:1px solid transparent !important}.sdds-inline-tabs--tab__active>*{opacity:1}.sdds-inline-tabs--tab__active:hover{background-color:var(--sdds-inline-tabs-tab-active-bg)}.sdds-inline-tabs--tab__active::after{width:calc(100% + 2px);left:-1px;background-color:var(--sdds-inline-tabs-tab-active-indicator-bg)}.sdds-inline-tabs--tab__active::before{content:\" \";background-color:var(--sdds-inline-tabs-tab-active-bg);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}.sdds-inline-tabs--tab__active:first-child:focus::before{left:0}.sdds-inline-tabs--tab:disabled,.sdds-inline-tabs--tab__disabled{cursor:initial;color:var(--sdds-inline-tabs-tab-color);pointer-events:none}.sdds-inline-tabs--tab:disabled>*,.sdds-inline-tabs--tab__disabled>*{opacity:0.16}.sdds-inline-tabs-primary .sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-active-bg)}.sdds-inline-tabs-primary .sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-bg)}.sdds-inline-tabs-secondary .sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-active-ongrey-bg)}.sdds-inline-tabs-secondary .sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-ongrey-bg)}";
+const inlineTabsCss = ":host{outline:0 !important;box-sizing:border-box}:host *{box-sizing:border-box}.sdds-inline-tabs{overflow:hidden;outline:0}.sdds-inline-tabs-header{position:relative}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background);padding:24px 24px 48px}.sdds-inline-tabs-wrapper{display:flex;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs--forward,.sdds-inline-tabs--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;top:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs--forward__show,.sdds-inline-tabs--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs--forward:hover,.sdds-inline-tabs--back:hover{background-color:var(--sdds-inline-tabs-scroll-btn-background-hover)}.sdds-inline-tabs--forward:active,.sdds-inline-tabs--back:active{background-color:var(--sdds-inline-tabs-scroll-btn-background-active)}.sdds-inline-tabs--forward:focus,.sdds-inline-tabs--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--forward svg,.sdds-inline-tabs--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs--back{left:0}.sdds-inline-tabs--forward{right:0}.sdds-inline-tabs--tab{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;border:0;color:var(--sdds-inline-tabs-tab-color);background-color:var(--sdds-inline-tabs-tab-background);padding:16px;min-width:142px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out;white-space:nowrap;flex-shrink:0;text-align:left;outline:none}.sdds-inline-tabs--tab>*{opacity:0.6}.sdds-inline-tabs--tab:not(:last-child){border-right:1px solid var(--sdds-inline-tabs-tab-border-color)}.sdds-inline-tabs--tab::after{content:\" \";position:absolute;top:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background);transition:width 0.15s ease-in-out}.sdds-inline-tabs--tab:hover{background-color:var(--sdds-inline-tabs-tab-background-hover);color:var(--sdds-inline-tabs-tab-color-hover);text-decoration:none}.sdds-inline-tabs--tab:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active);color:var(--sdds-inline-tabs-tab-color-active);cursor:initial;border-right:1px solid transparent !important}.sdds-inline-tabs--tab__active>*{opacity:1}.sdds-inline-tabs--tab__active:hover{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs--tab__active::after{width:calc(100% + 2px);left:-1px;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}.sdds-inline-tabs--tab__active::before{content:\" \";background-color:var(--sdds-inline-tabs-tab-background-active);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}.sdds-inline-tabs--tab__active:first-child:focus::before{left:0}.sdds-inline-tabs--tab:disabled,.sdds-inline-tabs--tab__disabled{cursor:initial;color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}.sdds-inline-tabs--tab:disabled>*,.sdds-inline-tabs--tab__disabled>*{opacity:0.16}.sdds-inline-tabs--tab__active{background-color:var(--sdds-inline-tabs-tab-background-active)}.sdds-inline-tabs-main{background-color:var(--sdds-inline-tabs-main-background)}";
 
-const InlineTabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.tabWrapperElement = null; // reference to container with slotted children
-    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.useAutoHeight = false; // set height for slotted children or not
-    this.defaultTab = '';
-    this.autoHeight = false;
-    this.modeVariant = 'primary';
-    this.tabs = [];
-    this.buttonWidth = 0;
-    this.tabHeight = 0;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  /** used for switching to a tab programmatically */
-  async showTab(key) {
-    this.switchToTab(key);
-  }
-  _generateKeyFromName(name) {
-    return name
-      .replace(/\s/g, '-')
-      .replace(/[^a-z0-9-]/gi, '')
-      .toLowerCase();
-  }
-  componentWillLoad() {
-    this._initComponent();
-  }
-  _initComponent(createInitialState = true) {
-    this.tabs = [];
-    if (this.autoHeight) {
-      this.useAutoHeight = true;
-    }
-    Array.from(this.host.children).map((item, index) => {
-      const name = item.dataset.name ? item.dataset.name : item.getAttribute('name') || `Tab ${index + 1}`;
-      let key = item.dataset.tabKey ? item.dataset.tabKey : item.getAttribute('tab-key');
-      if (!key) {
-        key = this._generateKeyFromName(name);
-      }
-      if ((item.getAttribute('data-default') ? item.getAttribute('data-default') : item.getAttribute('default')) !== null) {
-        this.startingTab = key;
-      }
-      let disabled = false;
-      if ((item.getAttribute('aria-disabled') ? item.getAttribute('aria-disabled') : item.getAttribute('disabled')) !== null) {
-        disabled = true;
-      }
-      this.tabs.push({
-        name,
-        key,
-        element: item,
-        disabled,
-        visible: true,
-        initialDisplay: window.getComputedStyle(item).display,
-      });
-    });
-    createInitialState && this._setInitialState();
-    this.tabs = Array.from(this.tabs);
-  }
-  _calculateButtonWidth() {
-    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
-    let best = 0;
-    Array.from(navButtons).forEach((navButton) => {
-      const oldStyle = navButton.style.width;
-      navButton.style.width = '';
-      const width = navButton.clientWidth;
-      navButton.style.width = oldStyle;
-      if (navButton.clientWidth > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  _calculateTabHeight() {
-    let best = 0;
-    this.tabs.forEach(tab => {
-      const oldStyle = tab.element.style.display;
-      tab.element.style.display = '';
-      const height = tab.element.clientHeight;
-      tab.element.style.display = oldStyle;
-      if (height > best) {
-        best = height;
-      }
-    });
-    this.tabHeight = best;
-  }
-  componentDidRender() {
-    this._calculateTabHeight();
-    this._calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
-      const visibleTab = this.tabs.find(tab => tab.visible);
-      this._initComponent(false);
-      this._calculateTabHeight();
-      this._calculateButtonWidth();
-      visibleTab && this.switchToTab(visibleTab.key);
-    });
-    const resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
-        Array.from(navButtons).forEach((navButton) => {
-          buttonsWidth += navButton.clientWidth;
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this._evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-        this._calculateTabHeight();
-      }
-    });
-    mutationObserver.observe(this.host, {
-      childList: true,
-      attributes: true,
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this._calculateButtonWidth();
-    this._calculateTabHeight();
-  }
-  _setInitialState() {
-    if (this.defaultTab) {
-      this.startingTab = this.defaultTab;
-    }
-    this.tabs.map((tab, index) => {
-      if (this.startingTab) {
-        if (tab.key != this.startingTab) {
-          this._hideTab(tab);
-        }
-      }
-      else {
-        if (index > 0) {
-          this._hideTab(tab);
-        }
-      }
-    });
-  }
-  _showTab(tab) {
-    tab.element.style.display = '';
-    tab.visible = true;
-  }
-  _hideTab(tab) {
-    tab.element.style.display = 'none';
-    tab.visible = false;
-  }
-  switchToTab(key) {
-    this.tabs.map(tab => {
-      if (tab.key == key) {
-        this._showTab(tab);
-      }
-      else {
-        this._hideTab(tab);
-      }
-    });
-    this.tabs = Array.from(this.tabs);
-  }
-  _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() {
-    const heightStyle = {};
-    if (this.useAutoHeight) {
-      heightStyle['height'] = `${this.tabHeight}px`;
-    }
-    return (index.h(index.Host, null, index.h("div", { class: `sdds-inline-tabs sdds-inline-tabs sdds-inline-tabs-${this.modeVariant}` }, index.h("nav", { class: "sdds-inline-tabs-header" }, index.h("div", { ref: el => (this.navWrapperElement = el), class: "sdds-inline-tabs-wrapper" }, this.tabs.map(tab => (index.h("button", { style: { width: `${this.buttonWidth}px` }, disabled: tab.disabled, class: `sdds-inline-tabs--tab ${tab.visible ? 'sdds-inline-tabs--tab__active' : ''}`, onClick: () => this.switchToTab(tab.key) }, index.h("span", null, tab.name))))), index.h("div", { class: "sdds-inline-tabs-header-navigation" }, index.h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, onClick: () => this._scrollRight() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))), index.h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, onClick: () => this._scrollLeft() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))))), index.h("div", { ref: el => (this.tabWrapperElement = el), class: "sdds-inline-tabs-main", style: heightStyle }, index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
-};
+function generateKeyFromName(name) {
+  return name
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9-]/gi, '')
+    .toLowerCase();
+}
+const InlineTabs = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
+    this.navWrapperElement = null; // reference to container with nav buttons
+    this.tabWrapperElement = null; // reference to container with slotted children
+    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.useAutoHeight = false; // set height for slotted children or not
+    this.defaultTab = '';
+    this.autoHeight = false;
+    this.modeVariant = null;
+    this.tabs = [];
+    this.buttonWidth = 0;
+    this.tabHeight = 0;
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+  }
+  /** used for switching to a tab programmatically */
+  async showTab(key) {
+    this.switchToTab(key);
+  }
+  componentWillLoad() {
+    this.initComponent();
+  }
+  initComponent(createInitialState = true) {
+    if (this.autoHeight) {
+      this.useAutoHeight = true;
+    }
+    this.tabs = Array.from(this.host.children).map((item, index) => {
+      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;
+      const key = generateKeyFromName(name);
+      if (item.default) {
+        this.startingTab = key;
+      }
+      let disabled = false;
+      if (item.disabled) {
+        disabled = true;
+      }
+      return {
+        name,
+        key,
+        element: item,
+        disabled,
+        visible: true,
+        initialDisplay: window.getComputedStyle(item).display,
+      };
+    });
+    if (createInitialState) {
+      this.setInitialState();
+    }
+    this.tabs = Array.from(this.tabs);
+  }
+  calculateButtonWidth() {
+    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
+    let best = 0;
+    Array.from(navButtons).forEach((navButton) => {
+      const oldStyle = navButton.style.width;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = '';
+      const width = navButton.clientWidth;
+      // eslint-disable-next-line no-param-reassign
+      navButton.style.width = oldStyle;
+      if (navButton.clientWidth > best) {
+        best = width;
+      }
+    });
+    this.buttonWidth = best;
+  }
+  calculateTabHeight() {
+    let best = 0;
+    this.tabs.forEach((_, tabIndex) => {
+      const tab = this.tabs[tabIndex];
+      // TODO: add comment on what this does
+      const oldStyle = tab.element.style.display;
+      tab.element.style.display = '';
+      const height = tab.element.clientHeight;
+      tab.element.style.display = oldStyle;
+      if (height > best) {
+        best = height;
+      }
+    });
+    this.tabHeight = best;
+  }
+  componentDidRender() {
+    this.calculateTabHeight();
+    this.calculateButtonWidth();
+  }
+  componentDidLoad() {
+    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
+      const visibleTab = this.tabs.find((tab) => tab.visible);
+      this.initComponent(false);
+      this.calculateTabHeight();
+      this.calculateButtonWidth();
+      if (visibleTab) {
+        this.switchToTab(visibleTab.key);
+      }
+    });
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
+        Array.from(navButtons).forEach((navButton) => {
+          buttonsWidth += navButton.clientWidth;
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+        this.calculateTabHeight();
+      });
+    });
+    mutationObserver.observe(this.host, {
+      childList: true,
+      attributes: true,
+    });
+    resizeObserver.observe(this.navWrapperElement);
+    this.calculateButtonWidth();
+    this.calculateTabHeight();
+  }
+  setInitialState() {
+    if (this.defaultTab) {
+      this.startingTab = this.defaultTab;
+    }
+    this.tabs.forEach((tab, index) => {
+      if (this.startingTab) {
+        if (tab.key !== this.startingTab) {
+          this.hideTab(index);
+        }
+      }
+      else {
+        if (index > 0) {
+          this.hideTab(index);
+        }
+      }
+    });
+  }
+  unhideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = '';
+    tab.visible = true;
+  }
+  hideTab(tabIndex) {
+    const tab = this.tabs[tabIndex];
+    tab.element.style.display = 'none';
+    tab.visible = false;
+  }
+  switchToTab(key) {
+    this.tabs.forEach((tab, index) => {
+      if (tab.key === key) {
+        this.unhideTab(index);
+      }
+      else {
+        this.hideTab(index);
+      }
+    });
+    this.tabs = Array.from(this.tabs);
+  }
+  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() {
+    const style = {};
+    if (this.useAutoHeight) {
+      style.height = `${this.tabHeight}px`;
+    }
+    return (index.h(index.Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { class: `sdds-inline-tabs sdds-inline-tabs` }, index.h("nav", { class: "sdds-inline-tabs-header" }, index.h("div", { ref: (el) => {
+        this.navWrapperElement = el;
+      }, class: "sdds-inline-tabs-wrapper" }, this.tabs.map((tab) => (index.h("button", { style: { width: `${this.buttonWidth}px` }, disabled: tab.disabled, class: `sdds-inline-tabs--tab ${tab.visible ? 'sdds-inline-tabs--tab__active' : ''}`, onClick: () => this.switchToTab(tab.key) }, index.h("span", null, tab.name))))), index.h("div", { class: "sdds-inline-tabs-header-navigation" }, index.h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))), index.h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }))))), index.h("div", { ref: (el) => {
+        this.tabWrapperElement = el;
+      }, class: "sdds-inline-tabs-main", style: style }, index.h("slot", null)))));
+  }
+  get host() { return index.getElement(this); }
+};
 InlineTabs.style = inlineTabsCss;
 
 exports.sdds_inline_tabs = InlineTabs;

package/dist/cjs/sdds-link.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.js');
+
+const sddsLinkCss = "a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";
+
+const SddsLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.href = undefined;
+    this.target = '_self';
+    this.disabled = false;
+    this.underline = true;
+    this.rel = 'noopener';
+  }
+  render() {
+    return (index.h("a", { class: `
+        ${this.disabled ? 'disabled' : ''}
+        ${this.underline ? '' : 'no-underline'}
+        
+        `, href: this.href, target: this.target, rel: this.rel }, index.h("slot", null)));
+  }
+};
+SddsLink.style = sddsLinkCss;
+
+exports.sdds_link = SddsLink;

package/dist/cjs/sdds-message.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b98965c7.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, null, index.h("div", { class: `
+        message-wrapper ${this.type}
+        ${this.minimal ? 'message-minimal' : ''}
+        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && index.h("sdds-icon", { name: this.getIconName(), size: "20px" }), index.h("div", { class: `message-content` }, this.header && index.h("div", { class: "message-header" }, this.header), !this.minimal && (index.h("div", { class: "message-extended-message" }, index.h("slot", null)))))));
+  }
+};
+SddsMessage.style = sddsMessageCss;
+
+exports.sdds_message = SddsMessage;