@scania/tegel 1.14.0 → 1.15.0-table-issue-beta.0

package/dist/collection/components/card/card.css

@@ -90,4 +90,28 @@ button:focus-visible {
 }
 button:active {
   box-shadow: var(--tds-card-box-pressed);
+}
+
+.below-header-stretch,
+.above-header-stretch {
+  display: flex;
+  flex-direction: column;
+}
+.below-header-stretch .stretch,
+.above-header-stretch .stretch {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+}
+.below-header-stretch .card-body,
+.above-header-stretch .card-body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.below-header-stretch .card-body slot[name=body]::slotted(*),
+.above-header-stretch .card-body slot[name=body]::slotted(*) {
+  max-width: unset;
+  flex-grow: 1;
 }

package/dist/collection/components/card/card.js

@@ -26,7 +26,7 @@ export class TdsCard {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -36,14 +36,15 @@ export class TdsCard {
         this.bodyImgAlt = undefined;
         this.bodyDivider = false;
         this.clickable = false;
+        this.stretch = false;
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '485eb954899e2f559dfa9c231d275c1cecd7791f', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        return (h(Host, { key: 'd777b6ef9815b43c55749ff8a03ef5d8cb21cf74', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
+            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +200,24 @@ export class TdsCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "stretch",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "cardId": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/side-menu/side-menu.js

@@ -163,7 +163,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -187,7 +187,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -211,7 +211,7 @@ export class TdsSideMenu {
                     "references": {
                         "InternalTdsSideMenuPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
                         }
                     }

package/dist/collection/components/stepper/stepper.js

@@ -173,7 +173,7 @@ export class TdsStepper {
                     "references": {
                         "InternalTdsStepperPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
+                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/stepper/stepper.tsx",
                             "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
                         }
                     }

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

@@ -48,6 +48,13 @@ export class TdsTable {
         });
         return selectedRowsData;
     }
+    getStyles() {
+        const styles = {};
+        if (this.horizontalScrollWidth) {
+            styles.width = `${this.horizontalScrollWidth}px`;
+        }
+        return styles;
+    }
     multiselectChanged(newValue) {
         this.emitInternalTdsPropChange('multiselect', newValue);
     }
@@ -78,11 +85,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: 'da929268a984ca0e81843132b2fafd6c79bec3b3', class: {
+        return (h(Host, { key: '580c1c90c9f4556b16037c3200ae739a891bea88', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: '2ba662d97bc834a7a0d6d71338fc7c322bc15741', style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {}, class: {
+            } }, h("table", { key: 'f2e9d248c5e93e6d83cfcd74408f99ed54c1ae95', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -93,7 +100,7 @@ export class TdsTable {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: 'c95e71aeaac2f4378d440bb23ff890c9c4a76fdf' }))));
+            } }, h("slot", { key: '74edfe5bc755d4a7880b1368452f2906ebc5346a' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -298,7 +305,7 @@ export class TdsTable {
                     "references": {
                         "InternalTdsTablePropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
+                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/table/table/table.tsx",
                             "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
                         }
                     }

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

@@ -45,7 +45,10 @@ export class TdsTableBody {
         });
     }
     componentWillRender() {
-        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
+        const headerElement = this.host.parentElement.querySelector('tds-table-header');
+        const headerColumnsNo = headerElement
+            ? this.host.parentElement.querySelector('tds-table-header').children.length
+            : 0;
         // multiselect and expended features requires one extra column for controls...
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
@@ -55,7 +58,7 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '891bbd417703b240531383d54d5644cf39462573', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: '409bc90e7c6d49588a7ec1796cfbad734c333c40' })));
+        return (h(Host, { key: '5f7031a5167cd4bf867bb7813cf9fabb8c9405b9', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: 'ccc4113754dec3e5b5da2447867de906d009dd93' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

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

@@ -93,11 +93,18 @@ export class TdsTableFooter {
         });
         this.storeLastCorrectValue(this.paginationValue);
     }
+    getStyles() {
+        const styles = {};
+        if (this.horizontalScrollWidth) {
+            styles.width = `${this.horizontalScrollWidth}px`;
+        }
+        return styles;
+    }
     render() {
-        return (h(Host, { key: 'fe6221e5dd2ec57e63afefc5e45c0b3f5ad85d8f', class: {
+        return (h(Host, { key: '0d611bd3d31ce4dd1a7238784aa6aa6ab29d2abd', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("tr", { key: '6f6bfca5e7719084b2c4564b86806f6eb7867601', class: "tds-table__footer-row" }, h("td", { key: '2c4389dfa2c028798246a5c4d8b9bdcc05a780f2', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '0831e596963e20222feee940fb7d7d489f832b5e', class: "tds-table__pagination" }, h("div", { key: '1129e67d9b69b06a1fadde589f9ad37a1bd9fcca', class: "tds-table__row-selector" }), h("div", { key: '81e685df813d615027470d4c84c468bb2c5fccca', class: "tds-table__page-selector" }, h("input", { key: '4b116837ae02fcbf6b51b940587ae6159d40f5cb', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '927af4715b33f50679aef3ec5eccc5fd4044add7', class: "tds-table__footer-text" }, "of ", h("span", { key: '2d89421fbbbb0828623465f39edc506b9bfa82da' }, this.pages), " pages"), h("button", { key: '37916d812b7b4510b088b382f48b2d9f04d212b2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'd89ac980f4c48fe6c14610f27ccc05e43994631e', name: "chevron_left", size: "20px" })), h("button", { key: '246b17fc6ff26e3830d5a359a4a5de844bc93a1b', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '6fa3441ed75b484974e50ee41ea1444bea7c30e2', name: "chevron_right", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: 'cb4fc7ffecfa791f08a3da4a167459ccfb32e782', class: "tds-table__footer-row" }, h("td", { key: 'bf7388bc8aa26313cadba5333dc587d431a29867', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'ace766078c85f047034ac614712dc58b6dc7b540', class: "tds-table__pagination" }, h("div", { key: '0ef2c3c300bab7595773b65aa40da1399af4b7b8', class: "tds-table__row-selector" }), h("div", { key: '3fe2283dcbfd64fb54bd8faa9bd269dac22e81d8', class: "tds-table__page-selector" }, h("input", { key: '84295a91900f676742795c975f1706d4fbe196f6', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '88c7d7d7cfe66f2431b44c9ed38ebee5771f54b7', class: "tds-table__footer-text" }, "of ", h("span", { key: '42cf669a05c6e0e86a56aa568f2623c562bf83f6' }, this.pages), " pages"), h("button", { key: '3f022e45c6ca31ce542854c5e659349ab54b372a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '253b1cb33d4038ce03ff8fdb0bad30ba46ab0c13', name: "chevron_left", size: "20px" })), h("button", { key: 'ad21b63c30fc638372c89bb366be77df419bf532', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '58a640745984554b8c7cba3ce07130063299223e', name: "chevron_right", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,11 +55,18 @@ export class TdsTableToolbar {
             tdsTableSearchBar.classList.remove('tds-table__searchbar--active');
         }
     }
+    getStyles() {
+        const styles = {};
+        if (this.horizontalScrollWidth) {
+            styles.width = `${this.horizontalScrollWidth}px`;
+        }
+        return styles;
+    }
     render() {
-        return (h(Host, { key: '9c864dc219ed17a50a4d84881c676e05b3e0ef92', class: {
+        return (h(Host, { key: '7f94e84dc631768fb7fba68846408c049959eee7', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("div", { key: '035b5a5396344e3d682fb5370a4e1c0484045579', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'f1f5ba362eda8a0ae25fb63c89a25fe3606365c9', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'b94a83cf81e1aaa06d1b29a4e9207c99bccbbbbc', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '358798e484d1892acb6a4e7e3b30702002ba860d', class: "tds-table__searchbar" }, h("input", { key: 'f062bf19e13e312ee9089324bdfc6d4e2e9a1db4', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '9e874b39910b2d32b0a3193b14e01ed5f681b928', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '38d5a1b800d849b66a0c35d01d496fc4708f53c2', name: "search", size: "20px" })))), h("slot", { key: 'f362385a5719c51dbce2b213774b6397ede8714b', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: 'ecbf925fcd58dd77de40fd4b15c0a57c07b8a1c0', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd2f230c4944590897ac220fc2c35cd72008b8f4c', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'd75faf41e03bd19b1e268e85c884298c75d74450', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '7b098f02923e9580e1c8852dfcca11d4c21c75bd', class: "tds-table__searchbar" }, h("input", { key: 'c9d76e665ef26e197a7dad1e9ac83a0095ad66e9', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '1af8c1344e160cd494eeafc43c4f2422f7119d83', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '9c85fc3e817afcf7b548f2f851f3ce0970f82c00', name: "search", size: "20px" })))), h("slot", { key: 'ff6e2d21cc06fa5981e7814040d6d79581f8d974', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,10 +81,6 @@
   outline: none;
 }
 
-:host(.first) {
-  margin-left: 32px;
-}
-
 :host(.last) {
   margin-right: 32px;
 }

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

@@ -24,6 +24,7 @@
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
+  gap: 16px;
 }
 :host .wrapper::-webkit-scrollbar {
   display: none;

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

@@ -60,6 +60,7 @@ export class TdsInlineTabs {
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.leftPadding = 32;
         this.showLeftScroll = false;
         this.showRightScroll = false;
     }
@@ -139,12 +140,18 @@ export class TdsInlineTabs {
             this.showRightScroll = false;
         }
     }
+    applyCustomLeftPadding() {
+        if (this.navWrapperElement) {
+            this.navWrapperElement.style.paddingLeft = `${this.leftPadding}px`;
+        }
+    }
     handleSlotChange() {
         this.initializeTabs();
         this.addEventListenerToTabs();
         this.initializeSelectedTab();
         this.updateScrollButtons();
         this.addResizeObserver();
+        this.applyCustomLeftPadding(); // Apply custom left padding to the wrapper
     }
     connectedCallback() {
         this.initializeTabs();
@@ -160,9 +167,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'fdf1cc28637a8bd207c84aba91f60d145acd10c9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '068e21bac127323f56d858abf59c1f905a4ee315', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '20c44d2457fe1115cf322182f0a69e84b9a65107', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '3d4aa2b1ed18f1f8f481eda3d21473d8bfbc195e', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '646917420741478a9492cec16c066833d3e3266e', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '939eb79ed238163057dcc8316f6efdec89262ff8', name: "chevron_left", size: "20px" })), h("slot", { key: 'f3306035cce33e3efb3e89ab4650c3781703f9e5', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6b2023939d94eb9f9822e25fd4facce715fdf227', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0b2626c78903ce14239891aa667a61ed913097ac', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'af53b300c3420a52fd2cad793ca9acb333e71478', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd21f7a30e597d429eccedcaa8569e7dc7170c145', name: "chevron_left", size: "20px" })), h("slot", { key: '39e1b21aa75fa86850827f87f5793292d01a97c7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '8848014869eb92505d97f15cc3f8f2234dadc9c5', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '130a7c2c926b312491f735dac63b67e91a632058', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -230,6 +237,24 @@ export class TdsInlineTabs {
                 },
                 "attribute": "selected-index",
                 "reflect": true
+            },
+            "leftPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom left padding value for the wrapper element."
+                },
+                "attribute": "left-padding",
+                "reflect": true,
+                "defaultValue": "32"
             }
         };
     }

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

@@ -80,10 +80,6 @@
   outline: none;
 }
 
-:host(.first) {
-  margin-left: 32px;
-}
-
 :host(.last) {
   margin-right: 32px;
 }

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

@@ -24,6 +24,7 @@
   width: 100%;
   overflow-x: scroll;
   scrollbar-width: none;
+  gap: 16px;
 }
 :host .wrapper::-webkit-scrollbar {
   display: none;

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

@@ -60,6 +60,7 @@ export class TdsNavigationTabs {
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.leftPadding = 32;
         this.showLeftScroll = false;
         this.showRightScroll = false;
     }
@@ -112,8 +113,10 @@ export class TdsNavigationTabs {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        if (this.children.length > 0) {
+            this.children[0].classList.add('first');
+            this.children[this.children.length - 1].classList.add('last');
+        }
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
@@ -137,12 +140,18 @@ export class TdsNavigationTabs {
             this.showRightScroll = false;
         }
     }
+    applyCustomLeftPadding() {
+        if (this.navWrapperElement) {
+            this.navWrapperElement.style.paddingLeft = `${this.leftPadding}px`;
+        }
+    }
     handleSlotChange() {
         this.initializeTabs();
         this.addEventListenerToTabs();
         this.initializeSelectedTab();
         this.updateScrollButtons();
         this.addResizeObserver();
+        this.applyCustomLeftPadding(); // Apply custom left padding to the wrapper
     }
     connectedCallback() {
         this.initializeTabs();
@@ -158,9 +167,9 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'eaf7fd47f5f4132d7920d5deafb659828cab01e9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '1fe0e2f45e6cf32175a3ef6c556aa63ba3b46b97', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'fbb3223e9c88c43d51773210c5599cc644fc8df5', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'dbcd27f8adba0b6ef38071346bf38eba6dcaedd1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'fa71abb901a1c6ab70dde90d759d9aa537a72ec2', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '0aff4668869fa761e03e8c81ed054561787beb49', name: "chevron_left", size: "20px" })), h("slot", { key: '169f8b9eb18a33fb4fc739863eaf4a730e066c83', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '9c9757d3c818191ce5aec5bbd64699c04dfc07db', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'e38ac8674d9e3e4aeaa67bd888cd411002353634', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'afdac4d596a8b9ea1de0fc483eda96d487ad17ed', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '1ff5064f5bd2b5ba26e0e28b7d3beeae892a2a67', name: "chevron_left", size: "20px" })), h("slot", { key: 'bfcf00b43116a1c03507a5d93bd0bafc2a987eb7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'af4361d7dc949762577e3d74162bfa768f6dfa89', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '7ffa8829a1b2ae8f408aa1bab6770f27726fb1c1', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -228,6 +237,24 @@ export class TdsNavigationTabs {
                 },
                 "attribute": "selected-index",
                 "reflect": true
+            },
+            "leftPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom left padding value for the wrapper element."
+                },
+                "attribute": "left-padding",
+                "reflect": true,
+                "defaultValue": "32"
             }
         };
     }

package/dist/components/tds-card.js

@@ -3,7 +3,7 @@ import { g as generateUniqueId } from './p-11648030.js';
 import { h as hasSlot } from './p-ae110fc2.js';
 import { d as defineCustomElement$2 } from './p-e46088d9.js';
 
-const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}";
+const cardCss = ".card{box-sizing:border-box;box-shadow:var(--tds-card-box);background-color:var(--tds-card-background);display:block;border-radius:4px;overflow:hidden}.card *{box-sizing:border-box}.card.clickable:hover{box-shadow:var(--tds-card-box-hover);cursor:pointer}.card .card-header{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-header slot[name=thumbnail]::slotted(*){width:36px;height:36px;border-radius:100%;margin-right:16px}.card .card-header .card-top-header{padding-left:16px;display:flex;flex-direction:column}.card .card-header .card-top-header.no-header-img{padding-left:0}.card .card-header.below{padding-top:16px}.card .header-subheader{display:flex;flex-direction:column;gap:4px}.card .header-subheader .header,.card .header-subheader slot[name=header]{color:var(--tds-card-headline)}.card .header-subheader .subheader,.card .header-subheader slot[name=subheader]{color:var(--tds-card-sub-headline)}.card .card-body-img{width:100%}.card .tds-divider{margin:16px 16px 0;background-color:var(--tds-card-divider);height:1px}.card .card-body{display:block;word-wrap:break-word}.card slot[name=body]::slotted(*){font:var(--tds-detail-03) !important;letter-spacing:var(--tds-detail-03-ls) !important;color:var(--tds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px;max-width:336px}.card slot[name=actions]::slotted(*){display:flex;padding:16px;color:var(--tds-card-icon-color)}button{width:100%;border:none;text-align:left;padding:0}button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--tds-card-box-pressed)}.below-header-stretch,.above-header-stretch{display:flex;flex-direction:column}.below-header-stretch .stretch,.above-header-stretch .stretch{display:flex;flex-direction:column;flex-grow:1;width:100%}.below-header-stretch .card-body,.above-header-stretch .card-body{display:flex;flex-direction:column;flex-grow:1}.below-header-stretch .card-body slot[name=body]::slotted(*),.above-header-stretch .card-body slot[name=body]::slotted(*){max-width:unset;flex-grow:1}";
 const TdsCardStyle0 = cardCss;
 
 const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
@@ -27,7 +27,7 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -37,14 +37,15 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
         this.bodyImgAlt = undefined;
         this.bodyDivider = false;
         this.clickable = false;
+        this.stretch = false;
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '485eb954899e2f559dfa9c231d275c1cecd7791f', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        return (h(Host, { key: 'd777b6ef9815b43c55749ff8a03ef5d8cb21cf74', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
+            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent()))));
     }
     get host() { return this; }
     static get style() { return TdsCardStyle0; }
@@ -57,6 +58,7 @@ const TdsCard$1 = /*@__PURE__*/ proxyCustomElement(class TdsCard extends H {
         "bodyImgAlt": [1, "body-img-alt"],
         "bodyDivider": [4, "body-divider"],
         "clickable": [4],
+        "stretch": [4],
         "cardId": [1, "card-id"]
     }]);
 function defineCustomElement$1() {

package/dist/components/tds-inline-tab.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:20px;bottom:20px;outline:2px solid var(--tds-blue-400)}: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}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled)}: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}:host(.last){margin-right:32px}";
+const inlineTabCss = ":host{box-sizing:border-box;display:block;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:20px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:20px;bottom:20px;outline:2px solid var(--tds-blue-400)}: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}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-inline-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-inline-tabs-tab-color-disabled)}: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(.last){margin-right:32px}";
 const TdsInlineTabStyle0 = inlineTabCss;
 
 const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab extends H {

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { d as defineCustomElement$2 } from './p-3e74be57.js';
 
-const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
+const inlineTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
 const TdsInlineTabsStyle0 = inlineTabsCss;
 
 const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends H {
@@ -66,6 +66,7 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
         this.selectedIndex = undefined;
+        this.leftPadding = 32;
         this.showLeftScroll = false;
         this.showRightScroll = false;
     }
@@ -145,12 +146,18 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
             this.showRightScroll = false;
         }
     }
+    applyCustomLeftPadding() {
+        if (this.navWrapperElement) {
+            this.navWrapperElement.style.paddingLeft = `${this.leftPadding}px`;
+        }
+    }
     handleSlotChange() {
         this.initializeTabs();
         this.addEventListenerToTabs();
         this.initializeSelectedTab();
         this.updateScrollButtons();
         this.addResizeObserver();
+        this.applyCustomLeftPadding(); // Apply custom left padding to the wrapper
     }
     connectedCallback() {
         this.initializeTabs();
@@ -166,9 +173,9 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'fdf1cc28637a8bd207c84aba91f60d145acd10c9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '068e21bac127323f56d858abf59c1f905a4ee315', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '20c44d2457fe1115cf322182f0a69e84b9a65107', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '3d4aa2b1ed18f1f8f481eda3d21473d8bfbc195e', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '646917420741478a9492cec16c066833d3e3266e', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '939eb79ed238163057dcc8316f6efdec89262ff8', name: "chevron_left", size: "20px" })), h("slot", { key: 'f3306035cce33e3efb3e89ab4650c3781703f9e5', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6b2023939d94eb9f9822e25fd4facce715fdf227', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0b2626c78903ce14239891aa667a61ed913097ac', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'af53b300c3420a52fd2cad793ca9acb333e71478', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd21f7a30e597d429eccedcaa8569e7dc7170c145', name: "chevron_left", size: "20px" })), h("slot", { key: '39e1b21aa75fa86850827f87f5793292d01a97c7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '8848014869eb92505d97f15cc3f8f2234dadc9c5', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '130a7c2c926b312491f735dac63b67e91a632058', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -179,6 +186,7 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],
         "selectedIndex": [514, "selected-index"],
+        "leftPadding": [514, "left-padding"],
         "showLeftScroll": [32],
         "showRightScroll": [32],
         "selectTab": [64],

package/dist/components/tds-navigation-tab.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color) !important;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:26px;bottom:26px;outline:2px solid var(--tds-blue-400)}: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}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}: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}:host(.last){margin-right:32px}";
+const navigationTabCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-navigation-tabs-tab-color) !important;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;padding:26px 4px}:host ::slotted(*:focus-visible)::before{content:\"\";position:absolute;left:0;right:0;top:26px;bottom:26px;outline:2px solid var(--tds-blue-400)}: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}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--tds-navigation-tabs-tab-indicator-background-hover);z-index:1}:host .selected ::slotted(*){color:var(--tds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--tds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--tds-navigation-tabs-tab-color-disabled)}: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(.last){margin-right:32px}";
 const TdsNavigationTabStyle0 = navigationTabCss;
 
 const TdsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTab extends H {