@scania/tegel 0.0.31 → 0.0.33

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

@@ -0,0 +1 @@
+{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sBAAsB;;MCO9B,eAAe;;;;;;oBAGE,KAAK;mBAEN,KAAK;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'inline-tab.scss',\n  shadow: true,\n})\nexport class InlineTabsChild {\n  @Prop() label: string;\n\n  @Prop() disabled: boolean = false;\n\n  @Prop() default: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

@@ -0,0 +1 @@
+{"file":"sdds-inline-tabs-fullbleed.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n  @include sdds-box-sizing;\n\n  display: flex;\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &-centered {\n    justify-content: center;\n  }\n\n  /* tab */\n  ::slotted(&--tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-fullbleed-tab-color);\n    opacity: 0.6;\n    padding: 16px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    text-align: left;\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-fullbleed-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n  \n  ::slotted(&--tab__active) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&--tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&--tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&--tab:hover) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&--tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n    opacity:1;\n    \n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&--tab__active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&--tab__disabled) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n    pointer-events: none;\n    opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n  }\n}\n\n.sdds-inline-tabs-fullbleed {\n  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n  .sdds-inline-tabs-fullbleed--forward {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n\n  .sdds-inline-tabs-fullbleed--back {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  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\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  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\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,248 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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)}";
+
+function generateKeyFromName(name) {
+  return name
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9-]/gi, '')
+    .toLowerCase();
+}
+const InlineTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: `sdds-inline-tabs sdds-inline-tabs` }, h("nav", { class: "sdds-inline-tabs-header" }, h("div", { ref: (el) => {
+        this.navWrapperElement = el;
+      }, class: "sdds-inline-tabs-wrapper" }, this.tabs.map((tab) => (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) }, h("span", null, tab.name))))), h("div", { class: "sdds-inline-tabs-header-navigation" }, h("button", { class: `sdds-inline-tabs--forward ${this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z" }))), h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z" }))))), h("div", { ref: (el) => {
+        this.tabWrapperElement = el;
+      }, class: "sdds-inline-tabs-main", style: style }, h("slot", null)))));
+  }
+  get host() { return this; }
+  static get style() { return inlineTabsCss; }
+}, [1, "sdds-inline-tabs", {
+    "defaultTab": [1, "default-tab"],
+    "autoHeight": [4, "auto-height"],
+    "modeVariant": [1, "mode-variant"],
+    "tabs": [32],
+    "buttonWidth": [32],
+    "tabHeight": [32],
+    "showLeftScroll": [32],
+    "showRightScroll": [32],
+    "showTab": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-inline-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-inline-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InlineTabs);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SddsInlineTabs = InlineTabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsInlineTabs, defineCustomElement };
+
+//# sourceMappingURL=sdds-inline-tabs.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-inline-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n:host {\n  outline: 0 !important;\n  @include sdds-box-sizing;\n}\n\n.sdds-inline-tabs {\n  overflow: hidden;\n  outline: 0;\n\n  &-header {\n    position: relative;\n  }\n\n  &-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n    padding: 24px 24px 48px;\n  }\n\n  &-wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &--back {\n    left: 0;\n  }\n\n  &--forward {\n    right: 0;\n  }\n\n  &--tab {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    border: 0;\n    color: var(--sdds-inline-tabs-tab-color);\n    background-color: var(--sdds-inline-tabs-tab-background);\n    padding: 16px;\n    min-width: 142px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n    white-space: nowrap;\n    flex-shrink: 0;\n    text-align: left;\n    outline: none;\n\n    & > * {\n      opacity: 0.6;\n    }\n\n    &:not(:last-child) {\n      border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      top: 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);\n      transition: width 0.15s ease-in-out;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-tab-background-hover);\n      color: var(--sdds-inline-tabs-tab-color-hover);\n      text-decoration: none;\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &__active {\n      background-color: var(--sdds-inline-tabs-tab-background-active);\n      color: var(--sdds-inline-tabs-tab-color-active);\n      cursor: initial;\n      border-right: 1px solid transparent !important;\n\n      & > * {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n      }\n\n      &::after {\n        width: calc(100% + 2px);\n        left: -1px;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n\n      &::before {\n        content: ' ';\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n        width: 1px;\n        top: 0;\n        bottom: 0;\n        left: -1px;\n        display: block;\n        position: absolute;\n      }\n\n      &:first-child {\n        &:focus {\n          &::before {\n            left: 0;\n          }\n        }\n      }\n    }\n\n    &:disabled,\n    &__disabled {\n      cursor: initial;\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      & > * {\n        opacity: 0.16;\n      }\n    }\n  }\n}\n\n  .sdds-inline-tabs--tab__active {\n    background-color: var(--sdds-inline-tabs-tab-background-active);\n  }\n\n  .sdds-inline-tabs-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n  }\n","import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n  return name\n    .replace(/\\s/g, '-')\n    .replace(/[^a-z0-9-]/gi, '')\n    .toLowerCase();\n}\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n  @Prop() defaultTab: string = '';\n\n  /** different height settings. right now only supports \"auto\", otherwise ignored */\n  @Prop() autoHeight: boolean = false;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** array with metadata for slotted children */\n  @State() tabs: Array<any> = [];\n\n  /** current calculated width of each nav button (calculated from the largest one) */\n  @State() buttonWidth: number = 0;\n\n  /** current calculated tab height (calculated from the one with the most height) */\n  @State() tabHeight: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  /** used for switching to a tab programmatically */\n  @Method()\n  async showTab(key: string) {\n    this.switchToTab(key);\n  }\n\n  startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  tabWrapperElement: HTMLElement = null; // reference to container with slotted children\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  useAutoHeight: boolean = false; // set height for slotted children or not\n\n  componentWillLoad() {\n    this.initComponent();\n  }\n\n  initComponent(createInitialState = true) {\n    if (this.autoHeight) {\n      this.useAutoHeight = true;\n    }\n\n    this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n      const key = generateKeyFromName(name);\n      if (item.default) {\n        this.startingTab = key;\n      }\n      let disabled = false;\n      if (item.disabled) {\n        disabled = true;\n      }\n      return {\n        name,\n        key,\n        element: item,\n        disabled,\n        visible: true,\n        initialDisplay: window.getComputedStyle(item).display,\n      };\n    });\n\n    if (createInitialState) {\n      this.setInitialState();\n    }\n    this.tabs = Array.from(this.tabs);\n  }\n\n  calculateButtonWidth() {\n    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n    let best = 0;\n    Array.from(navButtons).forEach((navButton: HTMLElement) => {\n      const oldStyle = navButton.style.width;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = '';\n      const width = navButton.clientWidth;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = oldStyle;\n\n      if (navButton.clientWidth > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  calculateTabHeight() {\n    let best = 0;\n    this.tabs.forEach((_, tabIndex) => {\n      const tab = this.tabs[tabIndex];\n      // TODO: add comment on what this does\n      const oldStyle = tab.element.style.display;\n      tab.element.style.display = '';\n      const height = tab.element.clientHeight;\n      tab.element.style.display = oldStyle;\n\n      if (height > best) {\n        best = height;\n      }\n    });\n\n    this.tabHeight = best;\n  }\n\n  componentDidRender() {\n    this.calculateTabHeight();\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n      const visibleTab = this.tabs.find((tab) => tab.visible);\n      this.initComponent(false);\n      this.calculateTabHeight();\n      this.calculateButtonWidth();\n      if (visibleTab) {\n        this.switchToTab(visibleTab.key);\n      }\n    });\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n        Array.from(navButtons).forEach((navButton: HTMLElement) => {\n          buttonsWidth += navButton.clientWidth;\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n\n        this.calculateTabHeight();\n      });\n    });\n\n    mutationObserver.observe(this.host, {\n      childList: true,\n      attributes: true,\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n    this.calculateTabHeight();\n  }\n\n  setInitialState() {\n    if (this.defaultTab) {\n      this.startingTab = this.defaultTab;\n    }\n\n    this.tabs.forEach((tab, index) => {\n      if (this.startingTab) {\n        if (tab.key !== this.startingTab) {\n          this.hideTab(index);\n        }\n      } else {\n        if (index > 0) {\n          this.hideTab(index);\n        }\n      }\n    });\n  }\n\n  unhideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = '';\n    tab.visible = true;\n  }\n\n  hideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = 'none';\n    tab.visible = false;\n  }\n\n  switchToTab(key: string) {\n    this.tabs.forEach((tab, index) => {\n      if (tab.key === key) {\n        this.unhideTab(index);\n      } else {\n        this.hideTab(index);\n      }\n    });\n\n    this.tabs = Array.from(this.tabs);\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.useAutoHeight) {\n      style.height = `${this.tabHeight}px`;\n    }\n\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n          <nav class=\"sdds-inline-tabs-header\">\n            <div\n              ref={(el) => {\n                this.navWrapperElement = el as HTMLDivElement;\n              }}\n              class=\"sdds-inline-tabs-wrapper\"\n            >\n              {this.tabs.map((tab) => (\n                <button\n                  style={{ width: `${this.buttonWidth}px` }}\n                  disabled={tab.disabled}\n                  class={`sdds-inline-tabs--tab ${\n                    tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n                  }`}\n                  onClick={() => this.switchToTab(tab.key)}\n                >\n                  <span>{tab.name}</span>\n                </button>\n              ))}\n            </div>\n            <div class=\"sdds-inline-tabs-header-navigation\">\n              <button\n                class={`sdds-inline-tabs--forward ${\n                  this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showRightScroll}\n                onClick={() => this.scrollRight()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    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\"\n                  />\n                </svg>\n              </button>\n              <button\n                class={`sdds-inline-tabs--back ${\n                  this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showLeftScroll}\n                onClick={() => this.scrollLeft()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    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\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </nav>\n          <div\n            ref={(el) => {\n              this.tabWrapperElement = el as HTMLElement;\n            }}\n            class=\"sdds-inline-tabs-main\"\n            style={style}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/sdds-link.js

@@ -0,0 +1,8 @@
+import { S as SddsLink$1, d as defineCustomElement$1 } from './sdds-link2.js';
+
+const SddsLink = SddsLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsLink, defineCustomElement };
+
+//# sourceMappingURL=sdds-link.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-link.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-link2.js

@@ -0,0 +1,47 @@
+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 = /*@__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() {
+  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);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SddsLink as S, defineCustomElement as d };
+
+//# sourceMappingURL=sdds-link2.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;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":[],"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}

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

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