@scania/tegel 1.5.0 → 1.6.0

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const folderTabCss = ":host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host ::slotted(*:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host div:not(.selected){background-color:var(--tds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--tds-folder-tab-divider-color);border-top:2px solid var(--tds-folder-tab-background);color:var(--tds-folder-tab-item-color)}:host div:not(.selected):hover:not(.disabled){background-color:var(--tds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover:not(.disabled) ::slotted(*){border-top-color:var(--tds-folder-tab-background-hover);color:var(--tds-folder-tab-color)}:host div:not(.selected).disabled ::slotted(*){color:var(--tds-folder-tab-item-color-disabled)}: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)}:host .selected::after{content:\" \";background-color:var(--tds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--tds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}";
+const TdsFolderTabStyle0 = folderTabCss;
 
 const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab extends HTMLElement {
     constructor() {
@@ -20,10 +21,10 @@ const TdsFolderTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTab exten
         this.selected = selected;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
+        return (h(Host, { key: '032b4d95a93760db31444194d7b21a0b9b581009', role: "listitem" }, h("div", { key: '2c7b72725e53390bce85ba156adb3ba05fe5e406', class: `${this.disabled ? 'disabled' : ''}
+                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '372ea4281495f89a49099001f6c15e9ecb9caa34' }))));
     }
-    static get style() { return folderTabCss; }
+    static get style() { return TdsFolderTabStyle0; }
 }, [1, "tds-folder-tab", {
         "disabled": [4],
         "selected": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.js';
 
 const folderTabsCss = ":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-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 TdsFolderTabsStyle0 = folderTabsCss;
 
 const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs extends HTMLElement {
     constructor() {
@@ -158,15 +159,15 @@ const TdsFolderTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsFolderTabs ext
         this.addResizeObserver();
     }
     render() {
-        return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'eb1635179f54af77e7438282c76e3eaa11d53bd8', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '615a36341f659d538ee48742cb565357d4bc4f89', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'e2c7ac86a3fd268d9f81c9429df110e01007297a', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'c3f4cfdadfdc0e727405741a0255573bfac48e77', name: "chevron_left", size: "20px" })), h("slot", { key: 'c8a92e5d6ceabf50f4a8275282c4f49b8b21e232' }), h("button", { key: 'af855609041ab58deb465d35e2f03fe5c49e68ed', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'd212ddb172369557a9cb06cf26533c4eba8e7108', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return folderTabsCss; }
+    static get style() { return TdsFolderTabsStyle0; }
 }, [1, "tds-folder-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],

package/dist/components/tds-footer-group.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './icon.js';
 
 const footerGroupCss = ":host{display:block}:host .footer-top-title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);opacity:var(--tds-footer-top-title-opacity);color:var(--tds-footer-top-links);padding-bottom:8px}:host button.footer-top-title-button{display:none;border:none;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--tds-footer-top-divider)}:host button.footer-top-title-button.expanded{border-bottom:none}:host button.footer-top-title-button.expanded tds-icon{transform:rotateZ(180deg)}:host button.footer-top-title-button:hover{cursor:pointer}:host button.footer-top-title-button:active{background-color:var(--tds-footer-top-button-active)}:host button.footer-top-title-button:focus-visible{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host button.footer-top-title-button tds-icon{transition:transform 0.2s ease-in-out}:host [role=list]{list-style:none;padding:0;margin:0;display:flex;gap:8px}:host [role=list].start,:host [role=list].end{gap:24px}:host [role=list].top-part-child{flex-direction:column}@media all and (max-width: 992px){:host [role=list].start:not(.top-part-child){flex-direction:column}:host [role=list].start:not(.top-part-child).start,:host [role=list].start:not(.top-part-child).end{gap:8px}:host [role=list].top-part-child.closed{display:none}:host [role=list].top-part-child{gap:0}:host .footer-top-title{display:none}:host button.footer-top-title-button{display:flex;align-items:center}}";
+const TdsFooterGroupStyle0 = footerGroupCss;
 
 const TdsFooterGroup$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterGroup extends HTMLElement {
     constructor() {
@@ -23,14 +24,14 @@ const TdsFooterGroup$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterGroup e
         }
     }
     render() {
-        return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        return (h(Host, { key: 'a59951e61ce6b70ee19a5f807eb54482c0a43245' }, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
                 this.open = !this.open;
-            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { key: 'd9d098c9ec27205e58d16a871e17c9647d92dd4c', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'dc4f4984872471034c397bd13c535fbc423fdf6d' }))));
     }
     get host() { return this; }
-    static get style() { return footerGroupCss; }
+    static get style() { return TdsFooterGroupStyle0; }
 }, [1, "tds-footer-group", {
         "titleText": [1, "title-text"],
         "open": [32]

package/dist/components/tds-footer-item.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const footerItemCss = "[role=listitem] ::slotted(a),[role=listitem] ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-main-links);opacity:var(--tds-footer-main-links-opacity);text-decoration:none}[role=listitem] ::slotted(a:focus-visible),[role=listitem] ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}[role=listitem] ::slotted(a:hover),[role=listitem] ::slotted(button:hover){text-decoration:underline}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-footer-top-links)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child{border-bottom:1px solid var(--tds-footer-top-divider)}[role=listitem].top-part-child ::slotted(a),[role=listitem].top-part-child ::slotted(button){display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child ::slotted(a:hover),[role=listitem].top-part-child ::slotted(button:hover){text-decoration:underline;background-color:var(--tds-footer-top-links-background-hover)}[role=listitem].top-part-child ::slotted(a:focus-visible),[role=listitem].top-part-child ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}}";
+const TdsFooterItemStyle0 = footerItemCss;
 
 const TdsFooterItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterItem extends HTMLElement {
     constructor() {
@@ -13,10 +14,10 @@ const TdsFooterItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooterItem ext
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+        return (h("div", { key: '5e5e0fab636900a4a5abc91fef8d9423d7995b37', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '435a9db05aee42f8e92879b5bdca2a615e683d1b' })));
     }
     get host() { return this; }
-    static get style() { return footerItemCss; }
+    static get style() { return TdsFooterItemStyle0; }
 }, [1, "tds-footer-item"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-footer.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { h as hasSlot } from './hasSlot.js';
 
 const footerCss = ":host{display:block}:host slot[name=top]::slotted(*){box-sizing:border-box;background-color:var(--tds-footer-top-background);padding:40px;display:grid;grid-template-columns:repeat(4, 1fr);row-gap:40px;width:100%}:host .footer-main{background-color:var(--tds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--tds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--tds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host slot[name=top]::slotted(*){display:block;width:100%;padding:0}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host slot[name=end]::slotted(*){flex-direction:row;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
+const TdsFooterStyle0 = footerCss;
 
 const TdsFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooter extends HTMLElement {
     constructor() {
@@ -16,10 +17,10 @@ const TdsFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsFooter extends HTM
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, usesTopSlot && h("slot", { name: "top" }), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { class: "brand" }, h("p", null, "Scania")))))));
+        return (h(Host, { key: '0f916c49a2a4c3904ebcf5bad2593c5a4928880a', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '44e23c34001ff656ea572ca69a536adfc1b620f7' }, usesTopSlot && h("slot", { name: "top" }), h("div", { key: 'f20390b2f8dae54532e29e39c58b27ef6fe5cb6a', class: "footer-main" }, h("div", { key: '5fbbaabdc8e023447ba8eb35e7cfadf2c959e5b0', class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), h("div", { key: '6276e651cc7cdc3fd9cb48b4c868b89c67c1ad4e', class: "footer-main-bottom" }, h("small", { key: '0bcac7160e866a43faca21ee3389e07042231d0b', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'bff874e1ff2898071a5ff31b1ca861848836ddfd', class: "brand" }, h("p", { key: '0dcec703e1207bef407fe909db64d6f1df7d5dd2' }, "Scania")))))));
     }
     get host() { return this; }
-    static get style() { return footerCss; }
+    static get style() { return TdsFooterStyle0; }
 }, [1, "tds-footer", {
         "modeVariant": [1, "mode-variant"]
     }]);

package/dist/components/tds-header-brand-symbol.js

@@ -3,6 +3,7 @@ import { d as defineCustomElement$3 } from './core-header-item.js';
 import { d as defineCustomElement$2 } from './header-item.js';
 
 const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg), var(--tds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}";
+const TdsHeaderBrandSymbolStyle0 = headerBrandSymbolCss;
 
 const TdsHeaderBrandSymbol$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderBrandSymbol extends HTMLElement {
     constructor() {
@@ -11,10 +12,10 @@ const TdsHeaderBrandSymbol$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderB
         this.__attachShadow();
     }
     render() {
-        return (h(Host, null, h("tds-header-item", null, h("slot", null))));
+        return (h(Host, { key: '327b11c15448a5092c4dd698b53cdfca2063097b' }, h("tds-header-item", { key: 'c3709372cb856c73209cc87d1cb552fa87c17fc0' }, h("slot", { key: '25571704bd91411b649eceb5716fe22278193fc0' }))));
     }
     get host() { return this; }
-    static get style() { return headerBrandSymbolCss; }
+    static get style() { return TdsHeaderBrandSymbolStyle0; }
 }, [1, "tds-header-brand-symbol"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-cell.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const tableHeaderCellCss = ":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:0 16px;margin:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--right-align) .tds-table__header-button{text-align:right;justify-content:end;flex-direction:row-reverse}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
+const TdsHeaderCellStyle0 = tableHeaderCellCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -118,7 +119,7 @@ const TdsTableHeaderCell = /*@__PURE__*/ proxyCustomElement(class TdsTableHeader
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (h(Host, { class: {
+        return (h(Host, { key: 'd09c42078df2774f9bae1e9e2906abdf9e52f5ac', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -134,7 +135,7 @@ const TdsTableHeaderCell = /*@__PURE__*/ proxyCustomElement(class TdsTableHeader
             onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
     }
     get host() { return this; }
-    static get style() { return tableHeaderCellCss; }
+    static get style() { return TdsHeaderCellStyle0; }
 }, [1, "tds-header-cell", {
         "cellKey": [513, "cell-key"],
         "cellValue": [513, "cell-value"],

package/dist/components/tds-header-dropdown-list-user.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const headerDropdownListUserCss = ":host{background-color:var(--tds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host img,:host slot[name=thumbnail]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .user-content .subheader{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-avatar-item-color)}";
+const TdsHeaderDropdownListUserStyle0 = headerDropdownListUserCss;
 
 const TdsHeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListLgUser extends HTMLElement {
     constructor() {
@@ -13,10 +14,10 @@ const TdsHeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class TdsHe
         this.subheader = undefined;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "thumbanil" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.header, h("slot", { name: "header" })), h("div", { class: "subheader" }, this.subheader, h("slot", { name: "subheader" }))))));
+        return (h(Host, { key: '68abd3a9a18eb07df40f2f6b2b36059ab20a4108', role: "listitem" }, h("div", { key: '4c0547202b1bd79abf176b23367b09d25d88d575', class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '37c0fd2aeaf2249a4209c96ca84dd2e5a78dfc5e', name: "thumbanil" }), h("div", { key: 'feb5534d000c66c69d6a589428c7ea875932c974', class: "user-content" }, h("div", { key: 'fe6c84e6b39f3b5da49700dca2a84190e2edfcff', class: "header" }, this.header, h("slot", { key: 'cbab5a0251b8181b0ad9012d5d310da2d730a37f', name: "header" })), h("div", { key: '0992f9330ec9000a04033fba561b04fb7d4f01db', class: "subheader" }, this.subheader, h("slot", { key: 'f884e86e6e77ee67430b3c6e7696ba48a0b0fa13', name: "subheader" }))))));
     }
     get host() { return this; }
-    static get style() { return headerDropdownListUserCss; }
+    static get style() { return TdsHeaderDropdownListUserStyle0; }
 }, [1, "tds-header-dropdown-list-user", {
         "imgUrl": [1, "img-url"],
         "imgAlt": [1, "img-alt"],

package/dist/components/tds-header-dropdown.js

@@ -7,6 +7,7 @@ import { d as defineCustomElement$3 } from './popover-canvas.js';
 import { d as defineCustomElement$2 } from './popover-core.js';
 
 const headerDropdownCss = ":host{height:var(--tds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotatetds-z-index(180deg)}:host .state-open .button{position:relative;z-index:901}";
+const TdsHeaderDropdownStyle0 = headerDropdownCss;
 
 const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdown extends HTMLElement {
     constructor() {
@@ -31,13 +32,13 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
         this.open = !this.open;
     }
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: 'cabebe721a79127441bddd0aa8ad1d9ff2ac9453' }, h("div", { key: 'f97c7f95f5c9a6382c3d3d48854b3cc9b2f51a8c', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+            } }, h("tds-header-item", { key: '070b482e30884f2cf096472966d19232e97def8b', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'c29ad0c7309b3680b909cd911ad947bd0d60cd3c', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { name: "icon" }), this.label, h("slot", { name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: 'a955b0d40c1c3619e158b727ae70e266fe93a69c', name: "icon" }), this.label, h("slot", { key: '27195b2da32bbdf9f970c3b69355e3cc7efda11d', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -47,7 +48,7 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
             ] }, h("slot", null))))));
     }
     get host() { return this; }
-    static get style() { return headerDropdownCss; }
+    static get style() { return TdsHeaderDropdownStyle0; }
 }, [1, "tds-header-dropdown", {
         "label": [1],
         "noDropdownIcon": [4, "no-dropdown-icon"],

package/dist/components/tds-header-hamburger.js

@@ -5,6 +5,7 @@ import { d as defineCustomElement$3 } from './header-item.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const headerHamburgerCss = ":host{color:var(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
+const TdsHeaderHamburgerStyle0 = headerHamburgerCss;
 
 const TdsHeaderHamburger$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderHamburger extends HTMLElement {
     constructor() {
@@ -14,10 +15,10 @@ const TdsHeaderHamburger$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderHam
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, null, h("tds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("tds-icon", { class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: '6a4450ddfc7c76a76440a4416ee3b33615ded3a4' }, h("tds-header-item", { key: '3d24dbfb10bd9fae5ed81e9d47ce21234e15dee9' }, h("button", Object.assign({ key: '3187d9baa8f21e35221b3f26f802cd5e20f7f898' }, inheritedButtonProps), h("tds-icon", { key: '6cdd0ccb1c0142500709e81ef3474109c38a6ca4', class: "icon", name: "burger", size: "20px" })))));
     }
     get host() { return this; }
-    static get style() { return headerHamburgerCss; }
+    static get style() { return TdsHeaderHamburgerStyle0; }
 }, [1, "tds-header-hamburger"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-launcher-grid-item.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);background-color:var(--tds-header-app-launcher-menu-bg);color:var(--tds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--tds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const TdsHeaderLauncherGridItemStyle0 = headerLauncherGridItemCss;
 
 const TdsHeaderLauncherGridItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGridItem extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const TdsHeaderLauncherGridItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHe
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("slot", null)));
+        return (h(Host, { key: 'b94d764c336075984849b35aa22cd8a270c61e77', role: "listitem" }, h("slot", { key: '14bbf3162f5fc95b4bd78281aca311a1ec05c99e' })));
     }
-    static get style() { return headerLauncherGridItemCss; }
+    static get style() { return TdsHeaderLauncherGridItemStyle0; }
 }, [1, "tds-header-launcher-grid-item"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-launcher-grid-title.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { g as generateUniqueId } from './generateUniqueId.js';
 
 const headerLauncherGridTitleCss = ".tds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--tds-detail-04);letter-spacing:var(--tds-detail-04-ls);color:var(--tds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
+const TdsHeaderLauncherGridTitleStyle0 = headerLauncherGridTitleCss;
 
 const TdsHeaderLauncherGridTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGridTitle extends HTMLElement {
     constructor() {
@@ -10,9 +11,9 @@ const TdsHeaderLauncherGridTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsH
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", null))));
+        return (h(Host, { key: 'dd82b8c7e9e9f512f8d6bb4ae457b2090881a8cd' }, h("h3", { key: 'e5e91128de40042c6815bf660ed585084080e162', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '1b33d0e496bd9128eb15dc3807432284f768c52c' }))));
     }
-    static get style() { return headerLauncherGridTitleCss; }
+    static get style() { return TdsHeaderLauncherGridTitleStyle0; }
 }, [4, "tds-header-launcher-grid-title"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-launcher-grid.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './getPreviousNestedChildOfSiblingsMatching.js';
 
 const headerLauncherGridCss = ".tds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
+const TdsHeaderLauncherGridStyle0 = headerLauncherGridCss;
 
 const TdsHeaderLauncherGrid$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGrid extends HTMLElement {
     constructor() {
@@ -29,10 +30,10 @@ const TdsHeaderLauncherGrid$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+        return (h(Host, { key: 'f61e4a271a143bcdbfe0c56ae8d687c00e7e23dc' }, h("div", Object.assign({ key: '4403ceb73e4410ed6d5f33cfd91bcdbe6cace263' }, listAttributes), h("slot", { key: 'f43fea428cadb07fbdcc5247cdcc4bf2f3b0652c' }))));
     }
     get host() { return this; }
-    static get style() { return headerLauncherGridCss; }
+    static get style() { return TdsHeaderLauncherGridStyle0; }
 }, [4, "tds-header-launcher-grid", {
         "headingElement": [32]
     }]);

package/dist/components/tds-header-launcher-list-item.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './header-dropdown-list-item.js';
 
 const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}";
+const TdsHeaderLauncherListItemStyle0 = headerLauncherListItemCss;
 
 const TdsHeaderLauncherListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherListItem extends HTMLElement {
     constructor() {
@@ -10,9 +11,9 @@ const TdsHeaderLauncherListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHe
         this.__attachShadow();
     }
     render() {
-        return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
+        return (h(Host, { key: 'c1e87c33679155835692bd68076c761af07378a1' }, h("tds-header-dropdown-list-item", { key: '9ec4c6296501d090f2f4e9c53620f3b9251e67cf', size: "lg" }, h("slot", { key: '4d70e13bc28548be60791d813dcb6aae2f17aec4' }))));
     }
-    static get style() { return headerLauncherListItemCss; }
+    static get style() { return TdsHeaderLauncherListItemStyle0; }
 }, [1, "tds-header-launcher-list-item"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-launcher-list-title.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { g as generateUniqueId } from './generateUniqueId.js';
 
 const headerLauncherListTitleCss = ".tds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--tds-detail-06);letter-spacing:var(--tds-detail-06-ls);color:var(--tds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
+const TdsHeaderLauncherListTitleStyle0 = headerLauncherListTitleCss;
 
 const TdsHeaderLauncherListTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherListTitle extends HTMLElement {
     constructor() {
@@ -10,10 +11,10 @@ const TdsHeaderLauncherListTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsH
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
+        return (h(Host, { key: 'ab394e57d5459b16a53d79d05cb95d47dbc8d8f5' }, h("h3", { key: '61cb8ec5ea1de7f79a1ad29ba69b52668f89a91d', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'cdeab2d430e98b1e9314b06ff78478b43d6ed47b' }))));
     }
     get host() { return this; }
-    static get style() { return headerLauncherListTitleCss; }
+    static get style() { return TdsHeaderLauncherListTitleStyle0; }
 }, [4, "tds-header-launcher-list-title"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header-launcher-list.js

@@ -9,7 +9,7 @@ const TdsHeaderLauncherList$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
+        return (h(Host, { key: 'b1ad90db7f35af9825ef618c2c0d4af25df7cc2f' }, h("tds-header-dropdown-list", { key: '2f806e88239f3c48ba85e29296b1ae9a53ce8ad3', size: "lg" }, h("slot", { key: 'd354701c662c7b4b275080ebcca60c98d896f9e3' }))));
     }
 }, [4, "tds-header-launcher-list"]);
 function defineCustomElement$1() {

package/dist/components/tds-header-launcher.js

@@ -9,6 +9,7 @@ import { d as defineCustomElement$3 } from './popover-canvas.js';
 import { d as defineCustomElement$2 } from './popover-core.js';
 
 const headerLauncherCss = ":host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .wrapper .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .wrapper .menu ::-webkit-scrollbar-button{height:0;width:0}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
+const TdsHeaderLauncherStyle0 = headerLauncherCss;
 
 const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncher extends HTMLElement {
     constructor() {
@@ -45,11 +46,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { key: '3429e2f83f0eb01bd6e655b6fe1d8a77784b4f34' }, h("div", { key: '6c8522b99c3f7de3fd3f665366362c1035b9d9a2', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: '926507bc5d95971a1172de1a1cefd89d47959546' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -59,7 +60,7 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
             ] }, h("slot", null))))));
     }
     get host() { return this; }
-    static get style() { return headerLauncherCss; }
+    static get style() { return TdsHeaderLauncherStyle0; }
 }, [1, "tds-header-launcher", {
         "open": [32],
         "buttonEl": [32],

package/dist/components/tds-header-title.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host slot{display:block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
+const TdsHeaderTitleStyle0 = headerTitleCss;
 
 const TdsHeaderTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderTitle extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const TdsHeaderTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderTitle e
         this.__attachShadow();
     }
     render() {
-        return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+        return (h(Host, { key: '1e80d3121b01c500dfe3c80e42cec5081be68f2f' }, h("div", { key: '8031d8502c74ab524390966ede2ccb329e69cff1', class: "component" }, h("slot", { key: 'cf385f204cb34f11b6f21adc1e9c721d4d61cb44' }))));
     }
-    static get style() { return headerTitleCss; }
+    static get style() { return TdsHeaderTitleStyle0; }
 }, [1, "tds-header-title"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/tds-header.js

@@ -17,6 +17,7 @@ const updateListChildrenRoles = (targetNode) => {
 };
 
 const headerCss = "html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
+const TdsHeaderStyle0 = headerCss;
 
 const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends HTMLElement {
     constructor() {
@@ -45,10 +46,10 @@ const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends HTM
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
+        return (h(Host, { key: '8b4ced851110fc80769c0f37a98ee535f0bd31aa' }, h("slot", { key: '0fe95789efe24c95ff6a6b19924a33f8e280592b', name: "hamburger" }), h("slot", { key: 'c1cf6ddd168f52d19e11042fd43de832866826da', name: "title" }), h("nav", Object.assign({ key: 'fbb164db5b72ed35ca0c4a15646a3d37d6d5d54a' }, navAttributes), h("ul", { key: 'bb4d59b4754288095953725eb73adf22de7c776b', class: "tds-header-component-list" }, h("slot", { key: 'dd43bbc568e5df6071688e58b8c8a5e7eef760c1' }), h("li", { key: '5322eb3701496c7bcc94728b8828f1b24c6605eb', class: "tds-header-middle-spacer" }), h("slot", { key: '5d1dda51df772dcaa8485fff152764aced3255bb', name: "end" })))));
     }
     get host() { return this; }
-    static get style() { return headerCss; }
+    static get style() { return TdsHeaderStyle0; }
 }, [4, "tds-header"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 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 TdsInlineTabStyle0 = inlineTabCss;
 
 const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab extends HTMLElement {
     constructor() {
@@ -15,10 +16,10 @@ const TdsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTab exten
         this.selected = selected;
     }
     render() {
-        return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+        return (h(Host, { key: '5f6c3c68e4355801030c8bf2a9eb7650028db392', role: "listitem" }, h("div", { key: '913d4e8af5aa0b4810bc510bd6521ec98d555d60', class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'ec29b967f9386151b89a9ae6e390b3ab024b8471' }))));
     }
-    static get style() { return inlineTabCss; }
+    static get style() { return TdsInlineTabStyle0; }
 }, [1, "tds-inline-tab", {
         "disabled": [4],
         "selected": [32],

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

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$2 } from './icon.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 TdsInlineTabsStyle0 = inlineTabsCss;
 
 const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs extends HTMLElement {
     constructor() {
@@ -142,15 +143,15 @@ const TdsInlineTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsInlineTabs ext
         this.addResizeObserver();
     }
     render() {
-        return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '12630d0f26631025fd23e38793b0d026861efdaa', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'c939b7c4bb970a176ec63ef5b4517f18b7350565', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '20c61621bb4a87ffa9519d9a00de932fab0b4cd3', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'bb09ec84777bb7bd5c6cdb2d9778985038279b99', name: "chevron_left", size: "20px" })), h("slot", { key: '45791ec46399283291ded90b2f6377d5900ee22c' }), h("button", { key: '46d3798aaddd5fdf0329e1dfe541c56f3c31bed1', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6dc940030163933123048108295e316fd004b928', name: "chevron_right", size: "20px" })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return inlineTabsCss; }
+    static get style() { return TdsInlineTabsStyle0; }
 }, [1, "tds-inline-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],

package/dist/components/tds-link.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const linkCss = ":host{display:inline}:host ::slotted(*){all:unset;cursor:pointer;outline:none;color:var(--tds-link);text-decoration:underline}:host ::slotted(*:focus-visible){color:var(--tds-link-focus);text-decoration:none;outline:2px solid var(--tds-link-focus);outline-offset:-2px}:host ::slotted(*:active){color:var(--tds-link);text-decoration:underline;text-decoration-color:var(--tds-link)}:host ::slotted(*:hover){color:var(--tds-link-hover);text-decoration:underline;text-decoration-color:var(--tds-link-hover)}:host ::slotted(*:visited){color:var(--tds-link-visited);text-decoration-color:var(--tds-link-visited)}.disabled ::slotted(*){color:var(--tds-link-disabled);text-decoration-color:var(--tds-link-disabled);pointer-events:none}.no-underline ::slotted(*){text-decoration:none}.no-underline:hover ::slotted(*){text-decoration:none}";
+const TdsLinkStyle0 = linkCss;
 
 const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends HTMLElement {
     constructor() {
@@ -14,13 +15,13 @@ const TdsLink$1 = /*@__PURE__*/ proxyCustomElement(class TdsLink extends HTMLEle
         this.host.children[0].classList.add('tds-link-component');
     }
     render() {
-        return (h("span", { class: `        
+        return (h("span", { key: 'd2c5ae52f9f44ccebd4a43d1d251ce60646a6998', class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
-          ` }, h("slot", null)));
+          ` }, h("slot", { key: 'b0eeaaa6ad2fb70ae7f613883dc0f43d9ebe662a' })));
     }
     get host() { return this; }
-    static get style() { return linkCss; }
+    static get style() { return TdsLinkStyle0; }
 }, [1, "tds-link", {
         "disabled": [4],
         "underline": [4]

package/dist/components/tds-message.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './icon.js';
 
 const messageCss = ":host .wrapper{display:flex;padding:16px;background-color:var(--tds-message-background);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{background-color:var(--tds-message-type-error-background);border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper.minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .wrapper.minimal .header{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .wrapper.minimal.error .header{color:var(--tds-negative)}:host tds-icon{padding-right:16px}:host .content{display:flex;flex-direction:column;gap:4px;color:var(--tds-message-color);padding:2px 0}:host .content .header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host .content .extended-message{color:var(--tds-message-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .tds-mode-variant-primary{--tds-message-background:var(--tds-message-background-primary)}:host .tds-mode-variant-secondary{--tds-message-background:var(--tds-message-background-secondary)}";
+const TdsMessageStyle0 = messageCss;
 
 const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends HTMLElement {
     constructor() {
@@ -29,12 +30,12 @@ const TdsMessage$1 = /*@__PURE__*/ proxyCustomElement(class TdsMessage extends H
         this.minimal = false;
     }
     render() {
-        return (h(Host, null, h("div", { class: `
+        return (h(Host, { key: '190cc07b4486efe36e0baccfafbf5819a80a741c' }, h("div", { key: '5d60a6cfd10e9329a1270afef97a4267a86cc08f', class: `
         wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { key: '9dda54ccabbacecbee9f3268d6657696efbea827', class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
     }
-    static get style() { return messageCss; }
+    static get style() { return TdsMessageStyle0; }
 }, [1, "tds-message", {
         "header": [1],
         "modeVariant": [1, "mode-variant"],