@scania/tegel 0.0.51 → 0.0.61

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js

@@ -1,114 +1,105 @@
-import { formatHtmlPreview } from '../../../utils/utils';
-import readme from './readme.md';
-import readmeLink from './folder-tabs-link/readme.md';
-import readmeButton from './folder-tabs-button/readme.md';
-export default {
-  title: 'Components/Tabs',
-  parameters: {
-    notes: {
-      'Folder tabs': readme,
-      'Folder tabs button': readmeButton,
-      'Folder tabs link': readmeLink,
-    },
-    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: {
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
-      },
-    },
-    tabType: {
-      name: 'Tab type',
-      description: 'Type of child element, button/link.',
-      control: {
-        type: 'radio',
-      },
-      options: ['Button', 'Link'],
-    },
-    backgrounds: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    modeVariant: 'Inherit from parent',
-    tabType: 'Button',
-  },
-};
-const Template = ({ modeVariant, tabType }) => formatHtmlPreview(`
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './folder-tab/readme.md';
+export default {
+  title: 'Components/Tabs',
+  parameters: {
+    notes: {
+      'Folder tabs': readme,
+      'Folder tabs item': readmeItem,
+    },
+    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: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variation adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    defaultSelectedIndex: {
+      name: 'Default selected index',
+      description: 'Sets the default selected tab, if this is used the tab changes will be done automatically.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    selectedIndex: {
+      name: 'Selected index',
+      description: 'Sets the selected tab, if this is used the tab changes has to be handled by the user.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      if: { arg: 'defaultSelectedIndex', eq: 'None' },
+    },
+    backgrounds: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
+  },
+};
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
     <sdds-folder-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      ${tabType === 'Link'
-  ? `
-      <sdds-folder-tabs-link href="#">
-        <div slot="label">First tab</div>
-      </sdds-folder-tabs-link>
-      <sdds-folder-tabs-link href="#">
-        <div slot="label">Second tab is much longer</div>
-      </sdds-folder-tabs-link>
-      <sdds-folder-tabs-link selected href="#">
-        <div slot="label">Third tab</div>
-      </sdds-folder-tabs-link>
-      <sdds-folder-tabs-link disabled href="#">
-        <div slot="label">Fourth tab</div>
-      </sdds-folder-tabs-link>
-      `
-  : ''}
-      ${tabType === 'Button'
-  ? `
-      <sdds-folder-tabs-button>
-        <div slot="label">First tab</div>
-      </sdds-folder-tabs-button>
-      <sdds-folder-tabs-button>
-      <div slot="label">Second tab is much longer</div>
-      </sdds-folder-tabs-button>
-      <sdds-folder-tabs-button selected>
-        <div slot="label">Third tab</div>
-      </sdds-folder-tabs-button>
-      <sdds-folder-tabs-button disabled>
-        <div slot="label">Fourth tab</div>
-      </sdds-folder-tabs-button>
-      `
-  : ''}
+      <sdds-folder-tab>
+        <button>First tab</button>
+      </sdds-folder-tab>
+      <sdds-folder-tab>
+        <button>Second tab is much longer</button>
+      </sdds-folder-tab>
+      <sdds-folder-tab>
+        <button>Third tab</button>
+      </sdds-folder-tab>
+      <sdds-folder-tab disabled>
+        <button>Fourth tab</button>
+      </sdds-folder-tab>
     </sdds-folder-tabs>
 
     <!-- Demo container. -->
     <div class="demo-container">
-      <h4 class="sdds-headline-04">Selected tab: <span class="selectedTab"></span></h4>
-      <h4 class="sdds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+      <h4 class="sdds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
     </div>
-
+    
     <!-- Script tag with eventlistener for demo purposes. -->
     <script>
-    selectedTab = document.getElementsByClassName('selectedTab')[0]
     selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
     tabs = document.querySelector('sdds-folder-tabs');
   
     tabs.addEventListener('sddsChange', (event) => {
-      selectedTab.innerHTML = event.detail.selectedTab
       selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
     })
     </script>
-`);
-export const FolderTabs = Template.bind({});
-//# sourceMappingURL=folder-tabs.stories.js.map
+`);
+export const FolderTabs = Template.bind({});
+//# sourceMappingURL=folder-tabs.stories.js.map

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"folder-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/folder-tabs/folder-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,YAAY,MAAM,gCAAgC,CAAC;AAE1D,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE;MACL,aAAa,EAAE,MAAM;MACrB,oBAAoB,EAAE,YAAY;MAClC,kBAAkB,EAAE,UAAU;KAC/B;IACD,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,4GAA4G;MAC9G,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,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC;KAC5B;IACD,WAAW,EAAE;MACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,QAAQ;GAClB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CAAC;;QAEZ,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;QAE1F,OAAO,KAAK,MAAM;EAChB,CAAC,CAAC;;;;;;;;;;;;;OAaL;EACG,CAAC,CAAC,EACN;QAEE,OAAO,KAAK,QAAQ;EAClB,CAAC,CAAC;;;;;;;;;;;;;OAaL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;CAoBL,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeLink from './folder-tabs-link/readme.md';\nimport readmeButton from './folder-tabs-button/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Folder tabs': readme,\n      'Folder tabs button': readmeButton,\n      'Folder tabs link': readmeLink,\n    },\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    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variation adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    tabType: {\n      name: 'Tab type',\n      description: 'Type of child element, button/link.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Link'],\n    },\n    backgrounds: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tabType: 'Button',\n  },\n};\n\nconst Template = ({ modeVariant, tabType }) =>\n  formatHtmlPreview(`\n    <sdds-folder-tabs\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}>\n      ${\n        tabType === 'Link'\n          ? `\n      <sdds-folder-tabs-link href=\"#\">\n        <div slot=\"label\">First tab</div>\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link href=\"#\">\n        <div slot=\"label\">Second tab is much longer</div>\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link selected href=\"#\">\n        <div slot=\"label\">Third tab</div>\n      </sdds-folder-tabs-link>\n      <sdds-folder-tabs-link disabled href=\"#\">\n        <div slot=\"label\">Fourth tab</div>\n      </sdds-folder-tabs-link>\n      `\n          : ''\n      }\n      ${\n        tabType === 'Button'\n          ? `\n      <sdds-folder-tabs-button>\n        <div slot=\"label\">First tab</div>\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button>\n      <div slot=\"label\">Second tab is much longer</div>\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button selected>\n        <div slot=\"label\">Third tab</div>\n      </sdds-folder-tabs-button>\n      <sdds-folder-tabs-button disabled>\n        <div slot=\"label\">Fourth tab</div>\n      </sdds-folder-tabs-button>\n      `\n          : ''\n      }\n    </sdds-folder-tabs>\n\n    <!-- Demo container. -->\n    <div class=\"demo-container\">\n      <h4 class=\"sdds-headline-04\">Selected tab: <span class=\"selectedTab\"></span></h4>\n      <h4 class=\"sdds-headline-04\">Selected tabindex: <span class=\"selectedTabIndex\"></span></h4>\n    </div>\n\n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n    selectedTab = document.getElementsByClassName('selectedTab')[0]\n    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]\n    tabs = document.querySelector('sdds-folder-tabs');\n  \n    tabs.addEventListener('sddsChange', (event) => {\n      selectedTab.innerHTML = event.detail.selectedTab\n      selectedTabIndex.innerHTML = event.detail.selectedTabIndex\n    })\n    </script>\n`);\n\nexport const FolderTabs = Template.bind({});\n"]}
+{"version":3,"file":"folder-tabs.stories.js","sourceRoot":"","sources":["../../../../src/components/tabs/folder-tabs/folder-tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAEhD,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,UAAU,EAAE;IACV,KAAK,EAAE;MACL,aAAa,EAAE,MAAM;MACrB,kBAAkB,EAAE,UAAU;KAC/B;IACD,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,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,4GAA4G;MAC9G,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,oBAAoB,EAAE;MACpB,IAAI,EAAE,wBAAwB;MAC9B,WAAW,EACT,4FAA4F;MAC9F,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;OAC/B;KACF;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,WAAW,EACT,uFAAuF;MACzF,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;MAC7B,EAAE,EAAE,EAAE,GAAG,EAAE,sBAAsB,EAAE,EAAE,EAAE,MAAM,EAAE;KAChD;IACD,WAAW,EAAE;MACX,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,oBAAoB,EAAE,MAAM;IAC5B,aAAa,EAAE,MAAM;GACtB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,oBAAoB,EAAE,EAAE,EAAE,CACxE,iBAAiB,CAAC;;QAEZ,oBAAoB,KAAK,MAAM,CAAC,CAAC,CAAC,2BAA2B,oBAAoB,GAAG,CAAC,CAAC,CAAC,EAAE;QACzF,aAAa,IAAI,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE;QACpF,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BjG,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './folder-tab/readme.md';\n\nexport default {\n  title: 'Components/Tabs',\n  parameters: {\n    notes: {\n      'Folder tabs': readme,\n      'Folder tabs item': readmeItem,\n    },\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    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variation adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    defaultSelectedIndex: {\n      name: 'Default selected index',\n      description:\n        'Sets the default selected tab, if this is used the tab changes will be done automatically.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 0, 1, 2, 3],\n      table: {\n        defaultValue: { summary: '0' },\n      },\n    },\n    selectedIndex: {\n      name: 'Selected index',\n      description:\n        'Sets the selected tab, if this is used the tab changes has to be handled by the user.',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 0, 1, 2, 3],\n      if: { arg: 'defaultSelectedIndex', eq: 'None' },\n    },\n    backgrounds: {\n      table: {\n        disable: true,\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    defaultSelectedIndex: 'None',\n    selectedIndex: 'None',\n  },\n};\n\nconst Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) =>\n  formatHtmlPreview(`\n    <sdds-folder-tabs\n      ${defaultSelectedIndex !== 'None' ? `default-selected-index=\"${defaultSelectedIndex}\"` : ''}\n      ${selectedIndex && selectedIndex !== 'None' ? `selected-index=\"${selectedIndex}\"` : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}>\n      <sdds-folder-tab>\n        <button>First tab</button>\n      </sdds-folder-tab>\n      <sdds-folder-tab>\n        <button>Second tab is much longer</button>\n      </sdds-folder-tab>\n      <sdds-folder-tab>\n        <button>Third tab</button>\n      </sdds-folder-tab>\n      <sdds-folder-tab disabled>\n        <button>Fourth tab</button>\n      </sdds-folder-tab>\n    </sdds-folder-tabs>\n\n    <!-- Demo container. -->\n    <div class=\"demo-container\">\n      <h4 class=\"sdds-headline-04\">Selected tab index: <span class=\"selectedTabIndex\"></span></h4>\n    </div>\n    \n    <!-- Script tag with eventlistener for demo purposes. -->\n    <script>\n    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]\n    tabs = document.querySelector('sdds-folder-tabs');\n  \n    tabs.addEventListener('sddsChange', (event) => {\n      selectedTabIndex.innerHTML = event.detail.selectedTabIndex\n      console.log(event)\n    })\n    </script>\n`);\n\nexport const FolderTabs = Template.bind({});\n"]}

package/dist/collection/components/tabs/inline-tabs/{inline-tabs-button/sdds-inline-tabs-button.css → inline-tab/sdds-inline-tab.css}

@@ -1,19 +1,16 @@
 :host {
   box-sizing: border-box;
-  display: block;
-  position: relative;
   z-index: 200;
+  display: block;
 }
 :host * {
   box-sizing: border-box;
 }
-:host button {
+:host ::slotted(*) {
   all: unset;
   font: var(--sdds-headline-07);
   letter-spacing: var(--sdds-headline-07-ls);
   color: var(--sdds-navigation-tabs-tab-color);
-  padding: 8px 4px;
-  margin-right: 32px;
   text-decoration: none;
   display: block;
   position: relative;
@@ -21,24 +18,27 @@
   white-space: nowrap;
   background-color: transparent;
   border: 0;
+  width: 100%;
+  margin: 20px 4px;
 }
-:host button .label {
-  margin: 12px 0;
+:host ::slotted(*:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
 }
-:host button:hover {
+:host .inline-tab-item {
+  position: relative;
+  margin-right: 32px;
+}
+:host .inline-tab-item:hover {
   cursor: pointer;
 }
-:host button:hover::after {
+:host .inline-tab-item:hover::after {
   width: 100%;
 }
-:host button:focus-visible .label {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host button::after {
+:host .inline-tab-item::after {
   content: " ";
   position: absolute;
-  bottom: 0;
+  bottom: -20px;
   right: 0;
   left: 0;
   margin-left: auto;
@@ -49,18 +49,18 @@
   transition: width 0.15s ease-in-out 0s;
   z-index: 1;
 }
-:host button.selected {
+:host .selected ::slotted(*) {
   color: var(--sdds-inline-tabs-tab-color-selected);
 }
-:host button.selected::after {
+:host .selected::after {
   width: 100%;
   background-color: var(--sdds-inline-tabs-tab-indicator-background-active);
 }
-:host button.disabled {
+:host .disabled {
   color: var(--sdds-inline-tabs-tab-color-disabled);
   pointer-events: none;
 }
-:host button.disabled .label {
+:host .disabled ::slotted(*) {
   opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);
 }
 

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

@@ -0,0 +1,81 @@
+import { Host, h } from '@stencil/core';
+export class SddsInlineTab {
+  constructor() {
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-inline-tab"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-inline-tab.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-inline-tab.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the tab."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setSelected": {
+        "complexType": {
+          "signature": "(selected: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": [{
+              "name": "internal",
+              "text": "Method to set the tab as selected. Used by the <sdds-folder-tabs>"
+            }]
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=sdds-inline-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-inline-tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/inline-tabs/inline-tab/sdds-inline-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,aAAa;;oBAEI,KAAK;oBAEJ,KAAK;;EAElC,kFAAkF;EAElF,KAAK,CAAC,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WACE,KAAK,EAAE,oBAAoB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;aACvD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;QAEpC,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'sdds-inline-tab.scss',\n  shadow: true,\n})\nexport class SddsInlineTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`inline-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}