@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,156 @@
+: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);
+}

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

@@ -0,0 +1,312 @@
+import { Host, h } from '@stencil/core';
+function generateKeyFromName(name) {
+  return name
+    .replace(/\s/g, '-')
+    .replace(/[^a-z0-9-]/gi, '')
+    .toLowerCase();
+}
+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 = 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)))));
+  }
+  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": "null"
+      }
+    };
+  }
+  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

@@ -0,0 +1,71 @@
+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 = {};

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);
+}