@scania/tegel 0.0.1-beta.9 → 0.0.31

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js

@@ -0,0 +1,72 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeTab from './inline-tab/readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: { 'Inline Tabs': readme, 'Inline Tab': readmeTab },
+    backgrounds: { default: 'white' },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    autoHeight: {
+      name: 'Same height',
+      description: 'Make all tab panels as tall as the tallest tab panel',
+      control: {
+        type: 'boolean',
+      },
+    },
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    backgrounds: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    autoHeight: false,
+    modeVariant: 'Inherit from parent',
+  },
+};
+// eslint-disable-next-line arrow-body-style
+const Template = ({ autoHeight = false, modeVariant }) => {
+  return formatHtmlPreview(`
+    <sdds-inline-tabs ${autoHeight ? 'auto-height' : ''}  ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+    <sdds-inline-tab label="Tab with tall content">
+      <div data-name="Tab with tall content">
+        Tab panel 1
+        <div style="width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);"></div>
+      </div>
+        </sdds-inline-tab>
+      <sdds-inline-tab label="Default tab" default>
+        Tab panel 2
+      </sdds-inline-tab>
+      <sdds-inline-tab label="Disabled tab" disabled>
+        Tab panel 3
+      </sdds-inline-tab>
+    </sdds-inline-tabs>
+`);
+};
+export const InlineTabs = Template.bind({});
+InlineTabs.args = {};
+//# sourceMappingURL=inline-tabs.stories.js.map

package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-default/inline-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE;IACzD,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;IACjC,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,UAAU,EAAE;MACV,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,WAAW,EAAE;MACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;EACD,IAAI,EAAE;IACJ,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AACF,4CAA4C;AAC5C,MAAM,QAAQ,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;EACvD,OAAO,iBAAiB,CAAC;wBAErB,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAC/B,KAAK,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;;;;;;;;;;;;;CAcjG,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeTab from './inline-tab/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: { 'Inline Tabs': readme, 'Inline Tab': readmeTab },\n    backgrounds: { default: 'white' },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    autoHeight: {\n      name: 'Same height',\n      description: 'Make all tab panels as tall as the tallest tab panel',\n      control: {\n        type: 'boolean',\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    backgrounds: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  args: {\n    autoHeight: false,\n    modeVariant: 'Inherit from parent',\n  },\n};\n// eslint-disable-next-line arrow-body-style\nconst Template = ({ autoHeight = false, modeVariant }) => {\n  return formatHtmlPreview(`\n    <sdds-inline-tabs ${\n      autoHeight ? 'auto-height' : ''\n    }  ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}>\n    <sdds-inline-tab label=\"Tab with tall content\">\n      <div data-name=\"Tab with tall content\">\n        Tab panel 1\n        <div style=\"width:200px; height:200px; background: linear-gradient(125deg,rgba(255, 0, 0, 1) 0%,rgba(255, 255, 0, 1) 33%,rgba(0, 192, 255, 1) 66%,rgba(192, 0, 255, 1) 100%);\"></div>\n      </div>\n        </sdds-inline-tab>\n      <sdds-inline-tab label=\"Default tab\" default>\n        Tab panel 2\n      </sdds-inline-tab>\n      <sdds-inline-tab label=\"Disabled tab\" disabled>\n        Tab panel 3\n      </sdds-inline-tab>\n    </sdds-inline-tabs>\n`);\n};\n\nexport const InlineTabs = Template.bind({});\nInlineTabs.args = {};\n"]}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css

@@ -0,0 +1,141 @@
+.sdds-inline-tabs-fullbleed {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  /* tab */
+  /* tab states */
+}
+.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);
+}

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

@@ -0,0 +1,129 @@
+import { Host, h } from '@stencil/core';
+export class InlineTabsFullbleed {
+  constructor() {
+    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" })))))));
+  }
+  static get is() { return "sdds-inline-tabs-fullbleed"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["inline-tabs-fullbleed.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["inline-tabs-fullbleed.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {},
+      "showLeftScroll": {},
+      "showRightScroll": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=inline-tabs-fullbleed.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inline-tabs-fullbleed.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js

@@ -0,0 +1,47 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ modeVariant }) => formatHtmlPreview(`
+  <sdds-inline-tabs-fullbleed id="inline-tabs-fullbleed-example" ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <a href="#">Tab name</a>
+      <a href="#" class="sdds-inline-tabs-fullbleed--tab__active">Active tab</a>
+      <a href="#">Tab name</a>
+      <a href="#">Tab name</a>
+      <a href="#" class="sdds-inline-tabs-fullbleed--tab__disabled" aria-disabled="true" tabindex="-1">Disabled tab</a>
+    </sdds-inline-tabs-fullbleed>
+`);
+export const InlineTabsFullbleed = Template.bind({});
+InlineTabsFullbleed.args = {};
+//# sourceMappingURL=inline-tabs-fullbleed.stories.js.map

package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-tabs-fullbleed.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;GACnC;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CACnC,iBAAiB,CAAC;mEAC+C,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAA,CAAC,CAAC,EAAE;;;;;;;CAO3J,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACrD,mBAAmB,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A32834&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n  },\n};\n\nconst Template = ({ modeVariant }) =>\n  formatHtmlPreview(`\n  <sdds-inline-tabs-fullbleed id=\"inline-tabs-fullbleed-example\" ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"`: ''}>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__active\">Active tab</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\">Tab name</a>\n      <a href=\"#\" class=\"sdds-inline-tabs-fullbleed--tab__disabled\" aria-disabled=\"true\" tabindex=\"-1\">Disabled tab</a>\n    </sdds-inline-tabs-fullbleed>\n`);\n\nexport const InlineTabsFullbleed = Template.bind({});\nInlineTabsFullbleed.args = {};\n"]}

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css

@@ -0,0 +1,157 @@
+.sdds-navigation-tabs {
+  box-sizing: border-box;
+  background-color: var(--sdds-navigation-tabs-background);
+  position: relative;
+  display: flex;
+  /* tab */
+  /* tab states */
+}
+.sdds-navigation-tabs * {
+  box-sizing: border-box;
+}
+.sdds-navigation-tabs::after {
+  content: " ";
+  display: block;
+  border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);
+  opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+.sdds-navigation-tabs-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.sdds-navigation-tabs-wrapper::-webkit-scrollbar {
+  display: none;
+}
+.sdds-navigation-tabs-forward {
+  cursor: pointer;
+  width: 48px;
+  height: 100%;
+  border: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+}
+.sdds-navigation-tabs-forward__show {
+  opacity: 1;
+  pointer-events: all;
+}
+.sdds-navigation-tabs-forward:hover {
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
+  text-decoration: none;
+}
+.sdds-navigation-tabs-forward:active {
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
+}
+.sdds-navigation-tabs-forward:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+.sdds-navigation-tabs-back {
+  cursor: pointer;
+  width: 48px;
+  height: 100%;
+  border: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  pointer-events: none;
+}
+.sdds-navigation-tabs-back__show {
+  opacity: 1;
+  pointer-events: all;
+}
+.sdds-navigation-tabs-back:hover {
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);
+}
+.sdds-navigation-tabs-back:active {
+  background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);
+}
+.sdds-navigation-tabs-back:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+::slotted(.sdds-navigation-tabs-tab) {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-navigation-tabs-tab-color);
+  opacity: 0.6;
+  padding: 26px 0;
+  margin-right: 32px;
+  text-decoration: none;
+  display: block;
+  position: relative;
+  transition: color 0.15s ease-in-out;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+::slotted(.sdds-navigation-tabs-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-navigation-tabs-tab-indicator-background-hover);
+  transition: width 0.15s ease-in-out;
+  z-index: 1;
+}
+::slotted(.sdds-navigation-tabs-tab:first-child) {
+  margin-left: 32px;
+}
+::slotted(.sdds-navigation-tabs-tab:last-child) {
+  margin-right: 32px;
+}
+::slotted(.sdds-navigation-tabs-tab:hover) {
+  color: var(--sdds-navigation-tabs-tab-color-hover);
+  opacity: 1;
+}
+::slotted(.sdds-navigation-tabs-tab:hover)::after {
+  width: 100%;
+}
+::slotted(.sdds-navigation-tabs-tab:focus) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+  color: var(--sdds-navigation-tabs-tab-color-focus);
+  opacity: 1;
+}
+::slotted(.sdds-navigation-tabs-tab:focus)::after {
+  width: 0;
+}
+::slotted(.sdds-navigation-tabs-tab-active) {
+  color: var(--sdds-navigation-tabs-tab-color-active);
+  opacity: 1;
+}
+::slotted(.sdds-navigation-tabs-tab-active)::after {
+  width: 100%;
+  background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);
+}
+::slotted(.sdds-navigation-tabs-tab-active:focus)::after {
+  width: 100%;
+}
+::slotted(.sdds-navigation-tabs-tab-disabled) {
+  color: var(--sdds-navigation-tabs-tab-color-disabled);
+  opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);
+  pointer-events: none;
+}