@scania/tegel 0.0.9 → 0.0.11

package/dist/collection/components/table/table-header/table-header.js

@@ -6,6 +6,9 @@ const relevantTableProps = [
   'compactDesign',
   'noMinWidth',
 ];
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header cells.
+ */
 export class TdsTableHeaderRow {
   constructor() {
     this.enableMultiselect = false;

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -54,6 +54,7 @@
   /* not to shrink on lot of text */
   flex: 0 0 16px;
   height: 16px;
+  width: 16px;
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;

package/dist/collection/components/table/table-toolbar/table-toolbar.css

@@ -24,7 +24,8 @@
   padding-top: var(--tds-spacing-element-16);
   text-align: left;
 }
-:host .tds-table__actionbar {
+:host .tds-table__actionbar,
+:host slot[name=end]::slotted(*) {
   display: flex;
   align-self: center;
   gap: 8px;

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -4,6 +4,9 @@ const relevantTableProps = [
   'noMinWidth',
   'verticalDividers',
 ];
+/**
+ * @slot end  - Slot for the end (right side) of the Table Toolbar.
+ */
 export class TdsTableToolbar {
   constructor() {
     this.tableTitle = '';
@@ -56,7 +59,7 @@ export class TdsTableToolbar {
     }
   }
   render() {
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z", fill: "currentColor" }))))), h("slot", { name: "tds-table__actionbar" })))));
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
   }
   static get is() { return "tds-table-toolbar"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.filtering.spec.js

@@ -7,12 +7,6 @@ import dummyData from './table-body/dummy-data.json';
 import { TdsTableHeaderCell } from './table-header-cell/table-header-cell';
 import { TdsTableToolbar } from './table-toolbar/table-toolbar';
 const columnKeys = Object.keys(dummyData[0]);
-const crypto = require('crypto');
-Object.defineProperty(globalThis, 'crypto', {
-  value: {
-    randomUUID: () => crypto.randomBytes(10),
-  },
-});
 describe('tds-table filtering', () => {
   it('should render cells from enable-dummy-data prop', async () => {
     const mismatchingCellSpy = jest.fn();

package/dist/collection/components/table/table.spec.js

@@ -7,12 +7,6 @@ import dummyData from './table-body/dummy-data.json';
 import { TdsTableHeaderCell } from './table-header-cell/table-header-cell';
 const columnKeys = Object.keys(dummyData[0]);
 const bodyData = JSON.stringify(dummyData);
-const crypto = require('crypto');
-Object.defineProperty(globalThis, 'crypto', {
-  value: {
-    randomUUID: () => crypto.randomBytes(10),
-  },
-});
 describe('tds-table', () => {
   it('should render cells from enable-dummy-data prop', async () => {
     const page = await newSpecPage({

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -30,27 +30,26 @@
   border-top: 2px solid var(--tds-folder-tab-background);
   color: var(--tds-folder-tab-item-color);
 }
-:host div:not(.selected):hover {
+:host div:not(.selected):hover:not(.disabled) {
   background-color: var(--tds-folder-tab-background-hover);
   cursor: pointer;
 }
-:host div:not(.selected):hover ::slotted(*) {
+:host div:not(.selected):hover:not(.disabled) ::slotted(*) {
   border-top-color: var(--tds-folder-tab-background-hover);
   color: var(--tds-folder-tab-color);
 }
-:host ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
-}
-:host .disabled {
-  pointer-events: none;
-}
-:host .disabled ::slotted(*) {
+:host div:not(.selected).disabled ::slotted(*) {
   color: var(--tds-folder-tab-item-color-disabled);
 }
-:host .disabled:focus-visible {
+:host div:not(.selected).disabled ::slotted(*:focus-visible) {
   outline: none;
 }
+:host div:not(.selected).disabled ::slotted(*:hover) {
+  cursor: not-allowed;
+}
+:host div:not(.selected).disabled ::slotted(*::after) {
+  content: none;
+}
 :host .selected {
   background-color: var(--tds-folder-tab-background-selected);
   border-top: 2px solid var(--tds-folder-tab-border-selected);

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsFolderTab {
   constructor() {
     this.disabled = false;
@@ -15,8 +18,7 @@ export class TdsFolderTab {
   }
   render() {
     return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}
-                `, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
+                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
   }
   static get is() { return "tds-folder-tab"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsFolderTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
@@ -34,11 +37,11 @@ export class TdsFolderTabs {
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

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

@@ -0,0 +1,105 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './folder-tab/readme.md';
+import { ComponentsFolder } from '../../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/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(`
+    <tds-folder-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-folder-tab>
+        <button>First tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Second tab is much longer</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Third tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab disabled>
+        <button>Fourth tab</button>
+      </tds-folder-tab>
+    </tds-folder-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
+    </div>
+    
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-folder-tabs');
+  
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
+`);
+export const FolderTabs = Template.bind({});

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

@@ -25,6 +25,10 @@
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
+:host .inline-tab-item:not(.selected)::after {
+  width: 0%;
+  transition: width 0.15s ease-in-out 0s;
+}
 :host .inline-tab-item {
   position: relative;
   margin-right: 32px;
@@ -46,7 +50,6 @@
   margin-right: auto;
   height: 2px;
   background-color: var(--tds-inline-tabs-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out 0s;
   z-index: 1;
 }
 :host .selected ::slotted(*) {
@@ -58,11 +61,19 @@
 }
 :host .disabled {
   color: var(--tds-inline-tabs-tab-color-disabled);
-  pointer-events: none;
 }
 :host .disabled ::slotted(*) {
   opacity: var(--tds-inline-tabs-tab-color-opacity-disabled);
 }
+:host .disabled::after {
+  content: none;
+}
+:host .disabled ::slotted(*:hover) {
+  cursor: not-allowed;
+}
+:host .disabled ::slotted(*:focus-visible) {
+  outline: none;
+}
 
 :host(.first) {
   margin-left: 32px;

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsInlineTab {
   constructor() {
     this.disabled = false;

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsInlineTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
@@ -33,11 +36,11 @@ export class TdsInlineTabs {
     this.addEventListenerToTabs = () => {
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

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

@@ -0,0 +1,99 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeTab from './inline-tab/readme.md';
+import { ComponentsFolder } from '../../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Tabs`,
+  parameters: {
+    notes: {
+      'Inline tabs': readme,
+      'Inline tab': readmeTab,
+    },
+    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' },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
+  },
+};
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+  <tds-inline-tabs
+    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-inline-tab>
+        <button>First tab</button>
+      </tds-inline-tab>
+      <tds-inline-tab>
+        <button>Second tab is much longer</button>
+      </tds-inline-tab>
+      <tds-inline-tab>
+        <button>Third tab</button>
+      </tds-inline-tab>
+      <tds-inline-tab disabled>
+        <button>Fourth tab</button>
+      </tds-inline-tab>
+   </tds-inline-tabs>
+
+   <!-- Demo container. -->
+   <div class="demo-container">
+     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+   </div>
+
+   <!-- Script tag with eventlistener for demo purposes. -->
+   <script>
+   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+   tabs = document.querySelector('tds-inline-tabs');
+   
+   tabs.addEventListener('tdsChange', (event) => {
+     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+     console.log(event)
+    })
+   </script>
+`);
+export const InlineTabs = Template.bind({});

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

@@ -25,6 +25,10 @@
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
+:host .navigation-tab-item:not(.selected)::after {
+  width: 0%;
+  transition: width 0.15s ease-in-out 0s;
+}
 :host .navigation-tab-item {
   position: relative;
   margin-right: 32px;
@@ -46,7 +50,6 @@
   margin-right: auto;
   height: 2px;
   background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out 0s;
   z-index: 1;
 }
 :host .selected ::slotted(*) {
@@ -58,11 +61,19 @@
 }
 :host .disabled {
   color: var(--tds-navigation-tabs-tab-color-disabled);
-  pointer-events: none;
 }
 :host .disabled ::slotted(*) {
   opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
 }
+:host .disabled::after {
+  content: none;
+}
+:host .disabled ::slotted(*:hover) {
+  cursor: not-allowed;
+}
+:host .disabled ::slotted(*:focus-visible) {
+  outline: none;
+}
 
 :host(.first) {
   margin-left: 32px;

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab link or button.
+ */
 export class TdsNavigationTab {
   constructor() {
     this.disabled = false;

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

@@ -1,4 +1,7 @@
 import { Host, h, } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
+ */
 export class TdsNavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
@@ -35,11 +38,11 @@ export class TdsNavigationTabs {
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

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

@@ -0,0 +1,101 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeTab from './navigation-tab/readme.md';
+import { ComponentsFolder } from '../../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Tabs`,
+  parameters: {
+    notes: {
+      'Navigation Tabs': readme,
+      'Navigation Tab': readmeTab,
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&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' },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
+  },
+};
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-navigation-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-navigation-tab>
+        <a href="#">First tab</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <a href="#">Second tab is much longer</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <a href="#">Third tab</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab disabled>
+        <a href="javascript:void(0)">Fourth tab</a>
+      </tds-navigation-tab>
+    </tds-navigation-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tabindex: <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('tds-navigation-tabs');
+    
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
+    `);
+export const NavigationTabs = Template.bind({});

package/dist/collection/components/text-field/text-field.js

@@ -1,4 +1,9 @@
 import { h } from '@stencil/core';
+import { hasSlot } from '../../utils/utils';
+/**
+ * @slot prefix - Slot for the prefix in the Text Field
+ * @slot suffix - Slot for the suffix in the Text Field
+ */
 export class TdsTextField {
   constructor() {
     this.type = 'text';
@@ -39,6 +44,8 @@ export class TdsTextField {
   }
   render() {
     var _a;
+    const usesPrefixSlot = hasSlot('prefix', this.host);
+    const usesSuffixSlot = hasSlot('suffix', this.host);
     return (h("div", { class: `
         ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
@@ -54,7 +61,7 @@ export class TdsTextField {
         ${this.size === 'md' ? 'form-text-field-md' : ''}
         ${this.size === 'sm' ? 'form-text-field-sm' : ''}
         ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -62,7 +69,7 @@ export class TdsTextField {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
   }
   static get is() { return "tds-text-field"; }
   static get encapsulation() { return "scoped"; }
@@ -428,4 +435,5 @@ export class TdsTextField {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }