@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

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

@@ -11,6 +11,23 @@ const relevantTableProps = [
  */
 export class TdsTableHeaderCell {
     constructor() {
+        /** Enables sorting on that column */
+        this.sortable = false;
+        /** Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". */
+        this.textAlign = 'left';
+        /** Disables internal padding. Useful when passing other components to cell. */
+        this.disablePadding = false;
+        /** Aria label for the sort button, providing an accessible description */
+        this.tdsAriaLabelSortButton = '';
+        this.textAlignState = 'left';
+        this.sortedByMyKey = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.multiselect = false;
+        this.enableToolbarDesign = false;
+        this.tableId = '';
+        this.expandableRows = false;
         this.sortButtonClick = () => {
             if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
                 this.sortingDirection = 'asc';
@@ -41,26 +58,9 @@ export class TdsTableHeaderCell {
         this.onHeadCellHover = (key) => {
             this.internalTdsHover.emit({
                 tableId: this.tableId,
-                key,
+                key: key !== null && key !== void 0 ? key : '',
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = 'left';
-        this.sortingDirection = undefined;
-        this.sortedByMyKey = false;
-        this.verticalDividers = false;
-        this.compactDesign = false;
-        this.noMinWidth = false;
-        this.multiselect = false;
-        this.enableToolbarDesign = false;
-        this.tableId = '';
-        this.expandableRows = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -118,7 +118,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: '4df64a3d4a0ef86b377db355cfc149daf9b246b5', class: {
+        return (h(Host, { key: '5607f55acda25cb351a509f65f499fce013b1a97', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -129,7 +129,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
+            } }, h("th", { key: 'bd60c7fa0e964e949394954e92ca8619e51273af', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -159,8 +159,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "The value of column key, usually comes from JSON, needed for sorting"
                 },
-                "attribute": "cell-key",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-key"
             },
             "cellValue": {
                 "type": "string",
@@ -176,8 +178,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Text that displays in column cell"
                 },
-                "attribute": "cell-value",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-value"
             },
             "customWidth": {
                 "type": "string",
@@ -193,8 +197,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "In case noMinWidth is set, the user has to specify the width value for each column."
                 },
-                "attribute": "custom-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-width"
             },
             "sortable": {
                 "type": "boolean",
@@ -210,8 +216,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Enables sorting on that column"
                 },
-                "attribute": "sortable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortable",
                 "defaultValue": "false"
             },
             "textAlign": {
@@ -224,7 +232,8 @@ export class TdsTableHeaderCell {
                         "TextAlign": {
                             "location": "import",
                             "path": "../table/table",
-                            "id": "src/components/table/table/table.tsx::TextAlign"
+                            "id": "src/components/table/table/table.tsx::TextAlign",
+                            "referenceLocation": "TextAlign"
                         }
                     }
                 },
@@ -234,8 +243,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Setting for text align, default is \"left\". Other accepted values are \"left\", \"start\", \"right\" or \"end\"."
                 },
-                "attribute": "text-align",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "text-align",
                 "defaultValue": "'left'"
             },
             "disablePadding": {
@@ -252,8 +263,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Disables internal padding. Useful when passing other components to cell."
                 },
-                "attribute": "disable-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disable-padding",
                 "defaultValue": "false"
             },
             "tdsAriaLabelSortButton": {
@@ -270,9 +283,49 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Aria label for the sort button, providing an accessible description"
                 },
-                "attribute": "tds-aria-label-sort-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "tds-aria-label-sort-button",
                 "defaultValue": "''"
+            },
+            "colSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span"
+            },
+            "rowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-span"
             }
         };
     }

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableHeaderInputWrapper {
     constructor() {
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -63,7 +64,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '76de40e0a578e0592d9c85d278d65187d84d7573', class: {
+        return (h(Host, { key: '4528be1b81397ac403bb7ba6cd274f26e1a6aff3', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -97,8 +98,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": "Controls if the search icon is shown"
                 },
-                "attribute": "show-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-icon",
                 "defaultValue": "true"
             },
             "compactDesign": {
@@ -115,8 +118,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             }
         };

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

@@ -11,8 +11,11 @@ const relevantTableProps = [
  */
 export class TdsTableToolbar {
     constructor() {
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -70,10 +73,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '37a65522a8efe0d073906a1c0ad59bc0574faa0c', class: {
+        return (h(Host, { key: 'be05d6c6aea404550a6717e89d10b8927e135ff1', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'f4116716bd302f31f5c5a1c6344cbd263f20aadb', class: "tds-table__upper-bar-flex" }, h("div", { key: '7c1088b56cd537ba8d6734bfdd8a87604c0038c3', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'aab5ff50d91410486069f9a734fd74606674819b', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '2e7f6fdbe8865712cba24e3b4a6e5833dd684ef0', name: "start" })), h("div", { key: '1d78a673fc3d4af7955cfb9ee00ff4d2265b73e9', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '6fcef1537fb441d8e835d6d6978a2ca8ae107eef', class: "tds-table__searchbar" }, h("input", { key: 'd74bd73c0b0a969d69ea6d5ac142215466ab3add', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '6b97b5d9b0ff3bb5b17f228d9786a64b1ea1ebe4', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '268d432c7c1ed126e2b0186e72ffd4fa53f33d3a', name: "search", size: "20px" })))), h("slot", { key: 'ef138ddefb88afc9967230c39600538a9d112dbb', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7a352d94ee0b3d66cb5aff378bbaa50ab7cf7570', class: "tds-table__upper-bar-flex" }, h("div", { key: '0d5e20bcf75ee696d3fb6b9aabbe81e4d06caca3', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '4fbd20e21eed929f095ed9ccc7b0976745a44d5c', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '1f27b7ee7619d5fa0f3d7955d8389fd0a6ad240e', name: "start" })), h("div", { key: 'e1834ffef99023a09055afceabb3881b8dc9282e', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'b19d36b835ae78223f7aff455b7b737c9bd7e8b1', class: "tds-table__searchbar" }, h("input", { key: '0dc7030b377d68a4f38af12938a775f56a66f916', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '78ba2ad22e558359f43e6a3962df1cd62f5df087', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'ccb72495379cf0bfed59263efc3c36bc9d004b55', name: "search", size: "20px" })))), h("slot", { key: 'baefd115b4f5b42a203698afdc9ce7b6d3a28d89', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -103,8 +106,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Adds title to the Table"
                 },
-                "attribute": "table-title",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "table-title",
                 "defaultValue": "''"
             },
             "filter": {
@@ -121,8 +126,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Enables preview of searchbar"
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "filter",
                 "defaultValue": "false"
             },
             "tdsSearchAriaLabel": {
@@ -139,8 +146,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Aria label for the search input, providing an accessible description"
                 },
-                "attribute": "tds-search-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-search-aria-label",
                 "defaultValue": "''"
             }
         };

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

@@ -4,9 +4,9 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsFolderTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
-        this.tabWidth = undefined;
     }
     /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
     async setTabWidth(width) {
@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '4a695d366a2e8e8e5b11b76f4be517c348e55c5b', "aria-selected": this.selected }, h("div", { key: 'b5dc85bc80aede911238d245d41b06ba82143c47', class: {
+        return (h(Host, { key: '3a6f843e08803fe8f005c0741449cc9f4a6df938', "aria-selected": this.selected }, h("div", { key: '5feeee7938110401632ccae56c7c9dda5fefdafd', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'a3c58caf8081862b9b89052f30e7100493ea0985' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '5b3947a9e16cde774eddcb896849f965e16042c8' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -68,8 +68,10 @@ export class TdsFolderTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

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

@@ -4,11 +4,22 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsFolderTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = null;
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.buttonWidth = 0;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -23,7 +34,7 @@ export class TdsFolderTabs {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -31,15 +42,15 @@ export class TdsFolderTabs {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -51,7 +62,7 @@ export class TdsFolderTabs {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -59,23 +70,15 @@ export class TdsFolderTabs {
                 }
             });
         };
-        this.modeVariant = null;
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.buttonWidth = 0;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
-        if (tabIndex < 0 || tabIndex >= this.children.length) {
+        if (tabIndex < 0 || tabIndex >= this.tabElements.length) {
             throw new Error('Tab index out of bounds');
         }
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -91,12 +94,12 @@ export class TdsFolderTabs {
     }
     handleSelectedIndexUpdate() {
         const tabs = Array.from(this.host.children);
-        this.children = tabs.map((tabElement) => {
+        this.tabElements = tabs.map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
         if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -117,27 +120,27 @@ export class TdsFolderTabs {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.tabElements[0].classList.add('first');
+        this.tabElements[this.tabElements.length - 1].classList.add('last');
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -173,9 +176,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '093e2804b56cb6c336744551ad4d27d962a34d02', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'eaaa9db902ead14bd581416c661b7c105263e335', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '41717283c59a48b103f09d57f98eeeb0e59b9b90', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '110565630876d0562c0da97c17fb3f0322aebdf3', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '50a7f0455048807c8642ecb66de0d01b7a27ce58', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '411a393ac446ae8224ec8c407b5e1b0adda87098', name: "chevron_left", size: "20px" })), h("slot", { key: 'a534cd27f044a0ac8a03ffb28e20f04cb8eba7a6', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6284e9746b9dfdc2010ff65b201e39db0e51feda', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '6a2e53089c50e1aa03a87af001a685ff9ba059dc', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '3dae6d2ec51d16943dde21c1177cd9e4258c6e7d', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '80f25b8b7b3b684e2ce99772864f5953e7984d41', name: "chevron_left", size: "20px" })), h("slot", { key: '2725126f14468a685eed1ad75401e5490312d696', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bebfa92afee71e4403c11d4d82653b264c7c3506', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '81ac9deabdbe4ed4127c2504fb9cbe0ba3b114b9', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -205,8 +208,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "defaultSelectedIndex": {
@@ -223,8 +228,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -241,8 +248,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "attribute": "selected-index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected-index"
             },
             "tdsScrollLeftAriaLabel": {
                 "type": "string",
@@ -258,8 +267,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "attribute": "tds-scroll-left-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-left-aria-label",
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -276,8 +287,10 @@ export class TdsFolderTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "attribute": "tds-scroll-right-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-right-aria-label",
                 "defaultValue": "'Scroll right'"
             }
         };

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

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsInlineTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -30,11 +31,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: '9e15778f89e70701ea058a8aa8377b18bc693d2b', "aria-selected": this.selected }, h("div", { key: '963dfa3c27aa7395919ac976851d173f4bc483fe', class: {
+        return (h(Host, { key: '7d62fa3a70a8834c4eb623a7cca8922a230ec171', "aria-selected": this.selected }, h("div", { key: 'b911f1ca34a763f5a80dc5a9ea2b24e3c905dc13', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'dcadb0ee891fa9a3a7ad94a2af33d82a674d2ecf' }))));
+            } }, h("slot", { key: '6048d4febed88ec7630bedd7e5215339a716047b' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -64,8 +65,10 @@ export class TdsInlineTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

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

@@ -1,5 +1,6 @@
 :host {
   box-sizing: border-box;
+  --padding-left: 0;
   display: flex;
   background-color: var(--tds-inline-tabs-background);
   position: relative;
@@ -24,6 +25,7 @@
   overflow-x: scroll;
   scrollbar-width: none;
   gap: 16px;
+  padding-left: var(--padding-left);
 }
 :host .wrapper::-webkit-scrollbar {
   display: none;
@@ -33,7 +35,7 @@
   z-index: 1;
 }
 :host .scroll-left-button {
-  left: 0;
+  left: calc(0px - var(--padding-left));
   z-index: 1;
 }
 :host .scroll-right-button,