@scania/tegel 0.0.51 → 0.0.52

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

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

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

@@ -1 +1 @@
-{"file":"sdds-inline-tabs-link.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,6xCAA6xC;;MCO9yCA,oBAAkB;;;;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsInlineTabsLink"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.scss?tag=sdds-inline-tabs-link&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n  position: relative;\n  z-index: z(tab);\n\n  a {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 8px 4px;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    \n    .label {\n      margin: 12px 0;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0%;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out 0s;\n      z-index: 1;\n    }\n\n    &.selected {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n\n      .label {\n        opacity: var(--sdds-inline-tab-color-opacity-selected);\n      }\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-inline-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n      }\n    }\n  }\n}\n\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-link',\n  styleUrl: 'sdds-inline-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-inline-tabs-link.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,yxCAAyxC;;MCO1yCA,oBAAkB;;;;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsInlineTabsLink"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.scss?tag=sdds-inline-tabs-link&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n  position: relative;\n  z-index: z(tab);\n\n  a {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-tab-color);\n    padding: 8px 4px;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    \n    .label {\n      margin: 12px 0;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0%;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out 0s;\n      z-index: 1;\n    }\n\n    &.selected {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n\n      .label {\n        opacity: var(--sdds-inline-tab-color-opacity-selected);\n      }\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-inline-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n      }\n    }\n  }\n}\n\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-link',\n  styleUrl: 'sdds-inline-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,208 +3,208 @@ 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 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.modeVariant = 'primary';
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-    this.selectedTab = undefined;
-    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.removeAttribute('selected'));
-      this.children = this.children.map((element, index) => {
-        if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
-        }
-        return element;
-      });
-    }
-    return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
-    };
-  }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-  }
-  componentWillRender() {
-    if (!this.selectedTab) {
-      this.children = Array.from(this.host.children);
-      this.children = this.children.map((item, index) => {
-        if (item.selected) {
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-        return item;
-      });
-    }
-  }
-  componentDidRender() {
-    if (this.buttonsWidth > this.componentWidth) {
-      this.evaluateScrollButtons();
-    }
-    else {
-      this.showLeftScroll = false;
-      this.showRightScroll = false;
-    }
-    this.addResizeObserver();
-  }
-  scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + 95;
-    this.evaluateScrollButtons();
-  }
-  scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - 10;
-    this.evaluateScrollButtons();
-  }
-  evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", 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 watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"]
-  }; }
-  static get style() { return inlineTabsCss; }
-}, [1, "sdds-inline-tabs", {
-    "modeVariant": [1, "mode-variant"],
-    "showLeftScroll": [32],
-    "showRightScroll": [32],
-    "selectedTab": [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 InlineTabsFullbleed = /*@__PURE__*/ proxyCustomElement(class 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.modeVariant = 'primary';
+    this.showLeftScroll = false;
+    this.showRightScroll = false;
+    this.selectedTab = undefined;
+    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.removeAttribute('selected'));
+      this.children = this.children.map((element, index) => {
+        if (index === tabIndex) {
+          element.setAttribute('selected', '');
+          this.selectedTab = {
+            tab: element.innerText,
+            tabIndex: index,
+          };
+        }
+        return element;
+      });
+    }
+    return {
+      selectedTab: this.selectedTab.tab,
+      selectedTabIndex: this.selectedTab.tabIndex,
+    };
+  }
+  handleSelectedTabChange() {
+    this.host.setAttribute('selected-tab', this.selectedTab.tab);
+    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
+    this.sddsChange.emit({
+      selectedTab: this.selectedTab,
+    });
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children = this.children.map((item, index) => {
+      item.addEventListener('click', () => {
+        if (!item.disabled) {
+          this.children.forEach((element) => element.removeAttribute('selected'));
+          item.setAttribute('selected', '');
+          this.selectedTab = {
+            tab: item.innerText,
+            tabIndex: index,
+          };
+        }
+      });
+      if (item.selected) {
+        this.selectedTab = {
+          tab: item.innerText,
+          tabIndex: index,
+        };
+      }
+      return item;
+    });
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
+  }
+  componentDidLoad() {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const componentWidth = entry.contentRect.width;
+        let buttonsWidth = 0;
+        const navButtons = Array.from(this.host.children);
+        navButtons.forEach((navButton) => {
+          const style = window.getComputedStyle(navButton);
+          buttonsWidth +=
+            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');
+        });
+        this.componentWidth = componentWidth;
+        this.buttonsWidth = buttonsWidth;
+        this.scrollWidth = buttonsWidth - componentWidth;
+        if (this.buttonsWidth > this.componentWidth) {
+          this.evaluateScrollButtons();
+        }
+        else {
+          this.showLeftScroll = false;
+          this.showRightScroll = false;
+        }
+      });
+    });
+    resizeObserver.observe(this.navWrapperElement);
+  }
+  componentWillRender() {
+    if (!this.selectedTab) {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        if (item.selected) {
+          this.selectedTab = {
+            tab: item.innerText,
+            tabIndex: index,
+          };
+        }
+        return item;
+      });
+    }
+  }
+  componentDidRender() {
+    if (this.buttonsWidth > this.componentWidth) {
+      this.evaluateScrollButtons();
+    }
+    else {
+      this.showLeftScroll = false;
+      this.showRightScroll = false;
+    }
+    this.addResizeObserver();
+  }
+  scrollRight() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll + 95;
+    this.evaluateScrollButtons();
+  }
+  scrollLeft() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    this.navWrapperElement.scrollLeft = scroll - 10;
+    this.evaluateScrollButtons();
+  }
+  evaluateScrollButtons() {
+    const scroll = this.navWrapperElement.scrollLeft;
+    if (scroll >= this.scrollWidth) {
+      this.showRightScroll = false;
+    }
+    else {
+      this.showRightScroll = true;
+    }
+    if (scroll <= 0) {
+      this.showLeftScroll = false;
+    }
+    else {
+      this.showLeftScroll = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", 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 watchers() { return {
+    "selectedTab": ["handleSelectedTabChange"]
+  }; }
+  static get style() { return inlineTabsCss; }
+}, [1, "sdds-inline-tabs", {
+    "modeVariant": [1, "mode-variant"],
+    "showLeftScroll": [32],
+    "showRightScroll": [32],
+    "selectedTab": [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;

package/dist/components/sdds-link.js

@@ -1,4 +1,45 @@
-import { S as SddsLink$1, d as defineCustomElement$1 } from './sdds-link2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.href = undefined;
+    this.target = '_self';
+    this.disabled = false;
+    this.underline = true;
+    this.rel = 'noopener';
+  }
+  render() {
+    return (h("a", { class: `
+        ${this.disabled ? 'disabled' : ''}
+        ${this.underline ? '' : 'no-underline'}
+        
+        `, href: this.href, target: this.target, rel: this.rel }, h("slot", null)));
+  }
+  static get style() { return sddsLinkCss; }
+}, [4, "sdds-link", {
+    "href": [1],
+    "target": [1],
+    "disabled": [4],
+    "underline": [4],
+    "rel": [1]
+  }]);
+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;

package/dist/components/sdds-link.js.map

@@ -1 +1 @@
-{"file":"sdds-link.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"sdds-link.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpBA,UAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsLink"],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}