@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.9

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

@@ -1,159 +0,0 @@
-:host {
-  outline: 0 !important;
-  box-sizing: border-box;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-.sdds-inline-tabs {
-  overflow: hidden;
-  outline: 0;
-}
-.sdds-inline-tabs-header {
-  position: relative;
-}
-.sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-bg);
-  padding: 24px 24px 48px;
-}
-.sdds-inline-tabs-wrapper {
-  display: flex;
-  overflow-x: scroll;
-  scrollbar-width: none;
-}
-.sdds-inline-tabs-wrapper::-webkit-scrollbar {
-  display: none;
-}
-.sdds-inline-tabs--forward, .sdds-inline-tabs--back {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  top: 0;
-  background-color: var(--sdds-inlline-tabs-scroll-btn-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-inline-tabs--forward__show, .sdds-inline-tabs--back__show {
-  opacity: 1;
-  pointer-events: all;
-}
-.sdds-inline-tabs--forward:hover, .sdds-inline-tabs--back:hover {
-  background-color: var(--sdds-inline-tabs-scroll-btn-hover-bg);
-}
-.sdds-inline-tabs--forward:active, .sdds-inline-tabs--back:active {
-  background-color: var(--sdds-inline-tabs-scroll-btn-active-bg);
-}
-.sdds-inline-tabs--forward:focus, .sdds-inline-tabs--back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-.sdds-inline-tabs--back {
-  left: 0;
-}
-.sdds-inline-tabs--forward {
-  right: 0;
-}
-.sdds-inline-tabs--tab {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  cursor: pointer;
-  border: 0;
-  color: var(--sdds-inline-tabs-tab-color);
-  background-color: var(--sdds-inline-tabs-tab-bg);
-  padding: 16px;
-  min-width: 142px;
-  text-decoration: none;
-  display: block;
-  position: relative;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
-  white-space: nowrap;
-  flex-shrink: 0;
-  text-align: left;
-  outline: none;
-}
-.sdds-inline-tabs--tab > * {
-  opacity: 0.6;
-}
-.sdds-inline-tabs--tab:not(:last-child) {
-  border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);
-}
-.sdds-inline-tabs--tab::after {
-  content: " ";
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  margin-left: auto;
-  width: 0;
-  margin-right: auto;
-  height: 2px;
-  background-color: var(--sdds-inline-tabs-tab-indicator-bg);
-  transition: width 0.15s ease-in-out;
-}
-.sdds-inline-tabs--tab:hover {
-  background-color: var(--sdds-inline-tabs-tab-hover-bg);
-  color: var(--sdds-inline-tabs-tab-hover-color);
-  text-decoration: none;
-}
-.sdds-inline-tabs--tab:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-.sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-  color: var(--sdds-inline-tabs-tab-active-color);
-  cursor: initial;
-  border-right: 1px solid transparent !important;
-}
-.sdds-inline-tabs--tab__active > * {
-  opacity: 1;
-}
-.sdds-inline-tabs--tab__active:hover {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-}
-.sdds-inline-tabs--tab__active::after {
-  width: calc(100% + 2px);
-  left: -1px;
-  background-color: var(--sdds-inline-tabs-tab-active-indicator-bg);
-}
-.sdds-inline-tabs--tab__active::before {
-  content: " ";
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-  width: 1px;
-  top: 0;
-  bottom: 0;
-  left: -1px;
-  display: block;
-  position: absolute;
-}
-.sdds-inline-tabs--tab__active:first-child:focus::before {
-  left: 0;
-}
-.sdds-inline-tabs--tab:disabled, .sdds-inline-tabs--tab__disabled {
-  cursor: initial;
-  color: var(--sdds-inline-tabs-tab-color);
-  pointer-events: none;
-}
-.sdds-inline-tabs--tab:disabled > *, .sdds-inline-tabs--tab__disabled > * {
-  opacity: 0.16;
-}
-
-.sdds-inline-tabs-primary .sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-bg);
-}
-.sdds-inline-tabs-primary .sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-bg);
-}
-
-.sdds-inline-tabs-secondary .sdds-inline-tabs--tab__active {
-  background-color: var(--sdds-inline-tabs-tab-active-ongrey-bg);
-}
-.sdds-inline-tabs-secondary .sdds-inline-tabs-main {
-  background-color: var(--sdds-inline-tabs-main-ongrey-bg);
-}

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

@@ -1,302 +0,0 @@
-import { Host, h } from '@stencil/core';
-export class InlineTabs {
-  constructor() {
-    this.startingTab = null; // name of the tab to show by default (infered from either "default-tab"-prop (on component) or "default"-prop (on a slotted child)
-    this.navWrapperElement = null; // reference to container with nav buttons
-    this.tabWrapperElement = null; // reference to container with slotted children
-    this.componentWidth = 0; // visible width of this component
-    this.buttonsWidth = 0; // total width of all nav items combined
-    this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-    this.useAutoHeight = false; // set height for slotted children or not
-    this.defaultTab = '';
-    this.autoHeight = false;
-    this.modeVariant = 'primary';
-    this.tabs = [];
-    this.buttonWidth = 0;
-    this.tabHeight = 0;
-    this.showLeftScroll = false;
-    this.showRightScroll = false;
-  }
-  /** used for switching to a tab programmatically */
-  async showTab(key) {
-    this.switchToTab(key);
-  }
-  _generateKeyFromName(name) {
-    return name
-      .replace(/\s/g, '-')
-      .replace(/[^a-z0-9-]/gi, '')
-      .toLowerCase();
-  }
-  componentWillLoad() {
-    this._initComponent();
-  }
-  _initComponent(createInitialState = true) {
-    this.tabs = [];
-    if (this.autoHeight) {
-      this.useAutoHeight = true;
-    }
-    Array.from(this.host.children).map((item, index) => {
-      const name = item.dataset.name ? item.dataset.name : item.getAttribute('name') || `Tab ${index + 1}`;
-      let key = item.dataset.tabKey ? item.dataset.tabKey : item.getAttribute('tab-key');
-      if (!key) {
-        key = this._generateKeyFromName(name);
-      }
-      if ((item.getAttribute('data-default') ? item.getAttribute('data-default') : item.getAttribute('default')) !== null) {
-        this.startingTab = key;
-      }
-      let disabled = false;
-      if ((item.getAttribute('aria-disabled') ? item.getAttribute('aria-disabled') : item.getAttribute('disabled')) !== null) {
-        disabled = true;
-      }
-      this.tabs.push({
-        name,
-        key,
-        element: item,
-        disabled,
-        visible: true,
-        initialDisplay: window.getComputedStyle(item).display,
-      });
-    });
-    createInitialState && this._setInitialState();
-    this.tabs = Array.from(this.tabs);
-  }
-  _calculateButtonWidth() {
-    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');
-    let best = 0;
-    Array.from(navButtons).forEach((navButton) => {
-      const oldStyle = navButton.style.width;
-      navButton.style.width = '';
-      const width = navButton.clientWidth;
-      navButton.style.width = oldStyle;
-      if (navButton.clientWidth > best) {
-        best = width;
-      }
-    });
-    this.buttonWidth = best;
-  }
-  _calculateTabHeight() {
-    let best = 0;
-    this.tabs.forEach(tab => {
-      const oldStyle = tab.element.style.display;
-      tab.element.style.display = '';
-      const height = tab.element.clientHeight;
-      tab.element.style.display = oldStyle;
-      if (height > best) {
-        best = height;
-      }
-    });
-    this.tabHeight = best;
-  }
-  componentDidRender() {
-    this._calculateTabHeight();
-    this._calculateButtonWidth();
-  }
-  componentDidLoad() {
-    const mutationObserver = new MutationObserver(( /* mutations, observer */) => {
-      const visibleTab = this.tabs.find(tab => tab.visible);
-      this._initComponent(false);
-      this._calculateTabHeight();
-      this._calculateButtonWidth();
-      visibleTab && this.switchToTab(visibleTab.key);
-    });
-    const resizeObserver = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');
-        Array.from(navButtons).forEach((navButton) => {
-          buttonsWidth += navButton.clientWidth;
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this._evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-        this._calculateTabHeight();
-      }
-    });
-    mutationObserver.observe(this.host, {
-      childList: true,
-      attributes: true,
-    });
-    resizeObserver.observe(this.navWrapperElement);
-    this._calculateButtonWidth();
-    this._calculateTabHeight();
-  }
-  _setInitialState() {
-    if (this.defaultTab) {
-      this.startingTab = this.defaultTab;
-    }
-    this.tabs.map((tab, index) => {
-      if (this.startingTab) {
-        if (tab.key != this.startingTab) {
-          this._hideTab(tab);
-        }
-      }
-      else {
-        if (index > 0) {
-          this._hideTab(tab);
-        }
-      }
-    });
-  }
-  _showTab(tab) {
-    tab.element.style.display = '';
-    tab.visible = true;
-  }
-  _hideTab(tab) {
-    tab.element.style.display = 'none';
-    tab.visible = false;
-  }
-  switchToTab(key) {
-    this.tabs.map(tab => {
-      if (tab.key == key) {
-        this._showTab(tab);
-      }
-      else {
-        this._hideTab(tab);
-      }
-    });
-    this.tabs = Array.from(this.tabs);
-  }
-  _scrollRight() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _scrollLeft() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;
-    this._evaluateScrollButtons();
-  }
-  _evaluateScrollButtons() {
-    const scroll = this.navWrapperElement.scrollLeft;
-    if (scroll >= this.scrollWidth) {
-      this.showRightScroll = false;
-    }
-    else {
-      this.showRightScroll = true;
-    }
-    if (scroll <= 0) {
-      this.showLeftScroll = false;
-    }
-    else {
-      this.showLeftScroll = true;
-    }
-  }
-  render() {
-    const heightStyle = {};
-    if (this.useAutoHeight) {
-      heightStyle['height'] = `${this.tabHeight}px`;
-    }
-    return (h(Host, null, h("div", { class: `sdds-inline-tabs sdds-inline-tabs sdds-inline-tabs-${this.modeVariant}` }, 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' : ''}`, 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", fill: "#0D0F13" }))), h("button", { class: `sdds-inline-tabs--back ${this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''}`, 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", fill: "#0D0F13" }))))), h("div", { ref: el => (this.tabWrapperElement = el), class: "sdds-inline-tabs-main", style: heightStyle }, h("slot", null)))));
-  }
-  static get is() { return "sdds-inline-tabs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["inline-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["inline-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "defaultTab": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children."
-        },
-        "attribute": "default-tab",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "autoHeight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "different height settings. right now only supports \"auto\", otherwise ignored"
-        },
-        "attribute": "auto-height",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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": "'primary'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "buttonWidth": {},
-      "tabHeight": {},
-      "showLeftScroll": {},
-      "showRightScroll": {}
-    };
-  }
-  static get methods() {
-    return {
-      "showTab": {
-        "complexType": {
-          "signature": "(key: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "used for switching to a tab programmatically",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,65 +0,0 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: readme,
-    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: ['Primary', 'Secondary'],
-    },
-    backgrounds: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    autoHeight: false,
-    modeVariant: 'Primary'
-  },
-};
-// eslint-disable-next-line arrow-body-style
-const Template = ({ autoHeight = false, modeVariant }) => {
-  return formatHtmlPreview(`
-    <sdds-inline-tabs ${autoHeight ? 'auto-height' : ''}  mode-variant="${modeVariant.toLowerCase()}">
-      <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>
-      <div data-name="Default tab" data-default="true">
-        Tab panel 2
-      </div>
-      <div data-name="Disabled tab" aria-disabled="true">
-        Tab panel 3
-      </div>
-    </sdds-inline-tabs>
-`);
-};
-export const InlineTabs = Template.bind({});
-InlineTabs.args = {};

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

@@ -1,172 +0,0 @@
-.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-bg);
-  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 {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-inline-tabs-fullbleed--forward__show {
-  opacity: 1;
-  pointer-events: all;
-}
-.sdds-inline-tabs-fullbleed--forward:hover {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-hover-bg);
-}
-.sdds-inline-tabs-fullbleed--forward:active {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-active-bg);
-}
-.sdds-inline-tabs-fullbleed--forward:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-.sdds-inline-tabs-fullbleed--back {
-  cursor: pointer;
-  width: 48px;
-  height: 100%;
-  border: 0;
-  position: absolute;
-  left: 0;
-  top: 0;
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-bg);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  pointer-events: none;
-}
-.sdds-inline-tabs-fullbleed--back__show {
-  opacity: 1;
-  pointer-events: all;
-}
-.sdds-inline-tabs-fullbleed--back:hover {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-hover-bg);
-}
-.sdds-inline-tabs-fullbleed--back:active {
-  background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-active-bg);
-}
-.sdds-inline-tabs-fullbleed--back:focus {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-.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: rgba(0, 21, 51, 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-hover-indicator-bg);
-  transition: width 0.15s ease-in-out;
-  z-index: 10;
-}
-::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-hover-color);
-}
-::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-focus-color);
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after {
-  width: 0;
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active) {
-  color: var(--sdds-inline-tabs-fullbleed-tab-active-color);
-}
-::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after {
-  width: 100%;
-  background-color: var(--sdds-inline-tabs-fullbleed-tab-active-indicator-bg);
-}
-::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-active-color);
-  pointer-events: none;
-  opacity: 0.16;
-}
-
-.sdds-inline-tabs-fullbleed-primary {
-  background-color: var(--sdds-white);
-}
-.sdds-inline-tabs-fullbleed-primary .sdds-inline-tabs-fullbleed--forward {
-  background-color: var(--sdds-white);
-}
-.sdds-inline-tabs-fullbleed-primary .sdds-inline-tabs-fullbleed--back {
-  background-color: var(--sdds-white);
-}
-
-.sdds-inline-tabs-fullbleed-secondary {
-  background-color: var(--sdds-grey-50);
-}
-.sdds-inline-tabs-fullbleed-secondary .sdds-inline-tabs-fullbleed--forward {
-  background-color: var(--sdds-grey-50);
-}
-.sdds-inline-tabs-fullbleed-secondary .sdds-inline-tabs-fullbleed--back {
-  background-color: var(--sdds-grey-50);
-}