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

package/dist/esm/tds-footer.entry.js

@@ -1,26 +1,26 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { h as hasSlot } from './hasSlot-d52114d0.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { h as hasSlot } from './hasSlot-DDX6uFcm.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],:host slot[name=end]{display:flex}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host slot[name=end]{margin-left:auto}: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-local), 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 slot[name=end]{margin-left:unset}: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 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],:host slot[name=end]{display:flex}:host slot[name=start]::slotted(*),:host slot[name=end]::slotted(*){display:flex;column-gap:24px}:host slot[name=end]{margin-left:auto}: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-local), 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 slot[name=end]{margin-left:unset}: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 TdsFooter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
+        this.copyrightText = `Copyright © ${new Date().getFullYear()} Scania`;
     }
     render() {
         const usesTopSlot = hasSlot('top', this.host);
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: 'cc332e8bb49a94ee80c1cbd73552abb0ce4681df', class: {
+        return (h(Host, { key: 'ce224ca7ee246c1d54435c27ef0c7d855f360725', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: '3bd37308da24350daae97ecac9d5cade3d8b6e24' }, usesTopSlot && h("slot", { key: '17bb2a9db6b27aad3405102fa2a2c1c380a5043f', name: "top" }), h("div", { key: '78bd64db7bac22157a18ebb8792075e6e435d3ba', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '25112b84db722b6f4c1674957506f645f70f1fce', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '4cd0f265f684cf7773e6d799f66e87930d223447', name: "start" }), usesEndSlot && h("slot", { key: '172f7326be9a216271e4815c121777c9d929b532', name: "end" }))), h("div", { key: '441c18a7502f94f8c804e0b9bd594f96c8a1b22a', class: "footer-main-bottom" }, h("small", { key: 'cb62fd7f2e38da47f0adb104d44ff6e83e03ce4b', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ba85b724529e318a7120c15dfbb885831a41b4f8', class: "brand" }, h("p", { key: '5e4ee4c61f4fbdb8371b92e544c29e600b77ffe9' }, "Scania")))))));
+            } }, h("footer", { key: '666810f7bc99938b7b72dab2c00795126e88c445' }, usesTopSlot && h("slot", { key: '68d02b7441d8bfa17ec57c1ad313278cd0aa5718', name: "top" }), h("div", { key: '2f158dfd72b6890edc9e443c2bc6d6bb3b550065', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '9c4f84e651fda177edfcc7ba10d1607c4e1a7474', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'a4e8820b818092c511884ccf3f30113d1b48a01f', name: "start" }), usesEndSlot && h("slot", { key: 'dd3981c085fdca380ad0a047884bab93cda813a6', name: "end" }))), h("div", { key: '12d7eaac68e142c4e7a9ecb8badbbd058381f7f9', class: "footer-main-bottom" }, h("small", { key: 'e708f6d879dcda639e355a4dfe3eec04b86d5dd2', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'd368706b9a68ce2c19e1bc590c46cb800cabaaa9', class: "brand" }, h("p", { key: 'cfdae8ab29c950588dfd3cdb80e174793709e801' }, "Scania")))))));
     }
     get host() { return getElement(this); }
 };
-TdsFooter.style = TdsFooterStyle0;
+TdsFooter.style = footerCss();
 
 export { TdsFooter as tds_footer };

package/dist/esm/tds-header-brand-symbol.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const headerBrandSymbolCss = ":host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);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 headerBrandSymbolCss = () => `:host tds-header-item{display:none}:host tds-header-item ::slotted(*){background-image:var(--tds-background-image-scania-symbol-svg-local), var(--tds-background-image-scania-symbol-svg);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 992px){:host tds-header-item{display:block}}`;
 
 const TdsHeaderBrandSymbol = class {
     constructor(hostRef) {
@@ -12,10 +11,10 @@ const TdsHeaderBrandSymbol = class {
         if (!(aTag === null || aTag === void 0 ? void 0 : aTag.hasAttribute('aria-label'))) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (h(Host, { key: '2692fca9f014e54adafca2cca8e089456d943240' }, h("tds-header-item", { key: '0e31d7f161e6fd60ce217aacc169040628b3748e' }, h("slot", { key: '7bcfa8a38d0725b5127dc6e13dee2d371749c49f' }))));
+        return (h(Host, { key: '259c57ce20798a4f75b4c9a2b8cc191140fdb5f7' }, h("tds-header-item", { key: '60478bb16304348e09ed6bc8364476ef320a1889' }, h("slot", { key: '46143b6985f2b5b4e4f3f1430c7025df22d852dd' }))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderBrandSymbol.style = TdsHeaderBrandSymbolStyle0;
+TdsHeaderBrandSymbol.style = headerBrandSymbolCss();
 
 export { TdsHeaderBrandSymbol as tds_header_brand_symbol };

package/dist/esm/tds-header-cell.entry.js

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-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:8px 16px;margin:0}:host(.tds-table__header-cell) .tds-table__header-text-no-padding{padding: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;color: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--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--no-padding){height: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 tableHeaderCellCss = () => `:host{display:contents}:host(.tds-table__header-cell) th{box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);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) th *{box-sizing:border-box}:host(.tds-table__header-cell) th .tds-table__header-text{padding:8px 16px;margin:0}:host(.tds-table__header-cell) th .tds-table__header-text-no-padding{padding:0}:host(.tds-table__header-cell) th:hover{background-color:var(--tds-table-header-background-hover)}:host(.tds-table__header-cell--sortable) th .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) th .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) th .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) th .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;color:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) th .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact) th{height:33px}:host(.tds-table--divider) th{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type) th{border-right:none}:host(.tds-table--no-min-width) th{min-width:unset}:host(.tds-table--no-padding) th{height:unset}:host(.tds-table__header-cell:first-of-type) th{border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type) th{border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type) th{border-top-left-radius:0}:host(.tds-table--toolbar-available) th{border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available) th{border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) th{border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) th{border-top-right-radius:0}`;
 
 const relevantTableProps = [
     'multiselect',
@@ -17,6 +16,23 @@ const TdsTableHeaderCell = class {
         this.internalSortButtonClicked = createEvent(this, "internalSortButtonClicked", 6);
         this.internalTdsTextAlign = createEvent(this, "internalTdsTextAlign", 6);
         this.internalTdsHover = createEvent(this, "internalTdsHover", 6);
+        /** Enables sorting on that column */
+        this.sortable = false;
+        /** Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". */
+        this.textAlign = 'left';
+        /** Disables internal padding. Useful when passing other components to cell. */
+        this.disablePadding = false;
+        /** Aria label for the sort button, providing an accessible description */
+        this.tdsAriaLabelSortButton = '';
+        this.textAlignState = 'left';
+        this.sortedByMyKey = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.multiselect = false;
+        this.enableToolbarDesign = false;
+        this.tableId = '';
+        this.expandableRows = false;
         this.sortButtonClick = () => {
             if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
                 this.sortingDirection = 'asc';
@@ -47,26 +63,9 @@ const TdsTableHeaderCell = class {
         this.onHeadCellHover = (key) => {
             this.internalTdsHover.emit({
                 tableId: this.tableId,
-                key,
+                key: key !== null && key !== void 0 ? key : '',
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = 'left';
-        this.sortingDirection = undefined;
-        this.sortedByMyKey = false;
-        this.verticalDividers = false;
-        this.compactDesign = false;
-        this.noMinWidth = false;
-        this.multiselect = false;
-        this.enableToolbarDesign = false;
-        this.tableId = '';
-        this.expandableRows = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -124,7 +123,7 @@ const TdsTableHeaderCell = class {
         return 'none';
     }
     render() {
-        return (h(Host, { key: '4df64a3d4a0ef86b377db355cfc149daf9b246b5', class: {
+        return (h(Host, { key: '5607f55acda25cb351a509f65f499fce013b1a97', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -135,10 +134,10 @@ const TdsTableHeaderCell = class {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
+            } }, h("th", { key: 'bd60c7fa0e964e949394954e92ca8619e51273af', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
     }
     get host() { return getElement(this); }
 };
-TdsTableHeaderCell.style = TdsHeaderCellStyle0;
+TdsTableHeaderCell.style = tableHeaderCellCss();
 
 export { TdsTableHeaderCell as tds_header_cell };

package/dist/esm/tds-header-dropdown-list-item.entry.js

@@ -1,22 +1,23 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host .component-selected:focus-within{border-left:none}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
-const TdsHeaderDropdownListItemStyle0 = headerDropdownListItemCss;
+const headerDropdownListItemCss = () => `:host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host .component-selected:focus-within{border-left:none}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}`;
 
 const TdsHeaderDropdownListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the link should appear selected. */
         this.selected = false;
+        /** The size of the component. */
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'f44417356b72d471bc6b9da6f05a92ee847492fd' }, h("div", { key: '4b3d24be55310e85146c89ac249bc6d100be4c6c', class: {
+        return (h(Host, { key: 'ad5209e62e16a30499c70bcb8969ee926652a65f' }, h("div", { key: 'a4460c58216595e6d9c3b02fb0bf87953f4734c5', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: '2a37b399064d6f5ca3cc15417f48d60380d6b6dc' }))));
+            } }, h("slot", { key: 'b5619891a111e7a79ec334e6fe213f5dc13dc8c3' }))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownListItem.style = TdsHeaderDropdownListItemStyle0;
+TdsHeaderDropdownListItem.style = headerDropdownListItemCss();
 
 export { TdsHeaderDropdownListItem as tds_header_dropdown_list_item };

package/dist/esm/tds-header-dropdown-list-user.entry.js

@@ -1,21 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
 
-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 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 TdsHeaderDropdownListLgUser = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.imgUrl = undefined;
-        this.imgAlt = undefined;
-        this.header = undefined;
-        this.subheader = undefined;
     }
     render() {
-        return (h(Host, { key: 'bdfa5d85ce7d9d75006496af94329a1721628b4f', role: "listitem" }, h("div", { key: '0f757d820aa3e96a1e98f7ae395660ba17e82576', class: "user-box" }, this.imgUrl && h("img", { key: 'c03f2089edefa01b766635e43d81f5b22a58f70d', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: 'c5eff329fa6100258a2c7d237ec076a139f2b00b', name: "thumbanil" }), h("div", { key: '0c097b9c1488f007ee8cd3e3490f9a3e85fac8f3', class: "user-content" }, h("div", { key: '3f1caac67dcd08d0bf5187ffe49c59ab3873822f', class: "header" }, this.header, h("slot", { key: '59fbd4a5b4d85e15de10b55376b6c54f4b3800c7', name: "header" })), h("div", { key: '82716ea4715e64e3c9d3ad3144b7af2821be5e8b', class: "subheader" }, this.subheader, h("slot", { key: '0574e77cf1d4a1651710811a0216bab7c24a11ed', name: "subheader" }))))));
+        return (h(Host, { key: '42d205c092f49240aa78c5004e72bd75a67b92fd', role: "listitem" }, h("div", { key: '42e263bc0ea144a99b8538539d9a205815dca701', class: "user-box" }, this.imgUrl && h("img", { key: 'f63bf88e6b25e9da9d85bdafe51c2587adc083ba', src: this.imgUrl, alt: this.imgAlt }), h("slot", { key: '5e6d8ecc4b0cf51bfa03496cfa585481285fa352', name: "thumbanil" }), h("div", { key: '19ea50db7c19d8720f3cc81672791ecae2cc2aee', class: "user-content" }, h("div", { key: 'df48cd3cd8bfeb5f5a93b0a5ddb6c0a68dee13b2', class: "header" }, this.header, h("slot", { key: '4b6e614f11e0ae204f6f9bbaa5299da4b2fb1230', name: "header" })), h("div", { key: 'eaaf9c29945f0f613776c41b1f0f8dc4fe24b00f', class: "subheader" }, this.subheader, h("slot", { key: 'c158d7a7523ee4b9027cdffbdb752a09d687bb98', name: "subheader" }))))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownListLgUser.style = TdsHeaderDropdownListUserStyle0;
+TdsHeaderDropdownListLgUser.style = headerDropdownListUserCss();
 
 export { TdsHeaderDropdownListLgUser as tds_header_dropdown_list_user };

package/dist/esm/tds-header-dropdown-list.entry.js

@@ -1,17 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-8efea284.js';
-import './dfs-1e574d5f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-BQco7VNg.js';
+import './dfs-CLF3diNe.js';
 
-const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
-const TdsHeaderDropdownListStyle0 = headerDropdownListCss;
+const headerDropdownListCss = () => `:host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}`;
 
 const TdsHeaderDropdownList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         // A Map to store the slots and their associated slotchange listeners.
         this.slotListeners = new Map();
+        /** The size of the component. */
         this.size = 'md';
-        this.headingElement = undefined;
     }
     componentWillLoad() {
         var _a, _b;
@@ -76,10 +75,10 @@ const TdsHeaderDropdownList = class {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: '190c5b3ef5273bb4ddb4bfe7d41aa21051eced80' }, attributes), h("slot", { key: 'cb7346a42c64bfe414b1814acab5923583f543b4' })));
+        return (h(Host, Object.assign({ key: '53d5216a736e4c3d50d54f78c8b6532092c94dff' }, attributes), h("slot", { key: 'a3a4b97fe7bbe64a5afadd1cef78c9cc70ad0f55' })));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdownList.style = TdsHeaderDropdownListStyle0;
+TdsHeaderDropdownList.style = headerDropdownListCss();
 
 export { TdsHeaderDropdownList as tds_header_dropdown_list };

package/dist/esm/tds-header-dropdown.entry.js

@@ -1,12 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
-const headerDropdownCss = ":host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}:host .state-open tds-header-item button:hover,:host .state-open tds-header-item a:hover{background-color:var(--tds-nav-item-background-hover);box-shadow:none}";
-const TdsHeaderDropdownStyle0 = headerDropdownCss;
+const headerDropdownCss = () => `:host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}:host .state-open .dropdown-icon{transform:rotate(180deg)}:host .state-open .button{position:relative;z-index:901}:host .state-open tds-header-item button:hover,:host .state-open tds-header-item a:hover{background-color:var(--tds-nav-item-background-hover);box-shadow:none}`;
 
 const TdsHeaderDropdown = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the dropdown icon (downwards chevron) should be hidden. */
+        this.noDropdownIcon = false;
+        /** If the button that opens the dropdown should appear selected. */
+        this.selected = false;
+        this.open = false;
         this.uuid = generateUniqueId();
         this.handleSlottedItemClick = (event) => {
             const eventSource = event.target.tagName.toLowerCase();
@@ -14,12 +18,6 @@ const TdsHeaderDropdown = class {
                 this.open = false;
             }
         };
-        this.label = undefined;
-        this.noDropdownIcon = false;
-        this.selected = false;
-        this.tdsAriaLabel = undefined;
-        this.open = false;
-        this.buttonEl = undefined;
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -49,13 +47,13 @@ const TdsHeaderDropdown = class {
         }
     }
     render() {
-        return (h(Host, { key: '5ea7f4d3d53fd8d4148bcf1bc0f7444a6b7469f8' }, h("div", { key: 'e972495e46f96576fb28bba38f9bca68fd6d901e', class: {
+        return (h(Host, { key: '8ee8ab6cb72cce6aaaf6e360e6e8ba13435cd163' }, h("div", { key: '6d1ab649962e2636451fb14d77a52f6046729402', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: 'f45bd2e8c6f2b1258e415cc111691dd282cdb3f9', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'f1bce15e1258647503e4a24f6cf7d7f5eb641cdd', ref: (el) => {
+            } }, h("tds-header-item", { key: '8e8172a694d3469b6dd6fbac685ab7d78ae36794', class: "button", active: this.open, selected: this.selected }, h("button", { key: '53d7fe83d252f206cccbbb6676d0ee1fe3a796b1', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: '2b392ba923ee98e3c2bd5c86ae8cbb3eb78bf182', name: "icon" }), this.label, h("slot", { key: '0fc721ebf454e77770b7aeca79296f5a65d6031e', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'd8fa1bda5368e8694f429f5724d06fb5de010a50', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '894eb3d523ddb8f8a9b6e0dc248730bb13173c88', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            }, "aria-label": this.tdsAriaLabel }, h("slot", { key: 'd01b607d64f798b69d0ad9b6776ab7e7b9e9b7aa', name: "icon" }), this.label, h("slot", { key: '353fd19c103f91d7ec328bb99626c65670e58a6e', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'd0d8dd4d6edb1ef403b0f4489158160a62128b05', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '9e38d42b342b9499f6cde00ad3e1649e7f63b1b3', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -66,6 +64,6 @@ const TdsHeaderDropdown = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderDropdown.style = TdsHeaderDropdownStyle0;
+TdsHeaderDropdown.style = headerDropdownCss();
 
 export { TdsHeaderDropdown as tds_header_dropdown };

package/dist/esm/tds-header-hamburger.entry.js

@@ -1,21 +1,19 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.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 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 TdsHeaderHamburger = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.tdsAriaLabel = undefined;
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'e5d7142a6d589d1b936ae4dc8376be0e03190271' }, h("tds-header-item", { key: '0945e350bb89ba977327c92917af457003c48fb9' }, h("button", Object.assign({ key: 'ade6457641c2e789dc631dad8df7491c5da53a93' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'b900d3c953cff83c99be40b3785a650aa984ee6a', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'fe2a26ffc234bc56fecdac71f7a25c71a723b4da' }, h("tds-header-item", { key: '3b031d8b4ea422fcba2ad615a0ad0d985bc21825' }, h("button", Object.assign({ key: '047269f67b9b756ea64e2669d043043ac89192c9' }, inheritedButtonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '68fb5a7d1b94ddc0a6a4132ce40c1ba031f87e74', class: "icon", name: "burger", size: "20px" })))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderHamburger.style = TdsHeaderHamburgerStyle0;
+TdsHeaderHamburger.style = headerHamburgerCss();
 
 export { TdsHeaderHamburger as tds_header_hamburger };

package/dist/esm/tds-header-launcher-button.entry.js

@@ -1,23 +1,23 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.js';
 
-const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
-const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;
+const headerLauncherButtonCss = () => `:host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}`;
 
 const TdsHeaderLauncherButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /** If the button should appear active. Can be used when the button is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
-        this.tdsAriaLabel = undefined;
     }
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: '72018ce054eb1c8c0d743887693ae0eb5a5fceae' }, h("tds-header-item", { key: '575f5f39bc75aaae01e3d62149228c63d389cbca', active: this.active }, h("button", Object.assign({ key: '9c0d368a1f63260950e93f72c022b4d030f20587' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: 'e8ee6fc3fcf23cebc14fb084517abaf68c71a495', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
+        return (h(Host, { key: 'b5202e76ff89f0fc53915a5bf9567228354b0950' }, h("tds-header-item", { key: 'ef65e43a519a4d8912ac232aa948e77e9df6b7d7', active: this.active }, h("button", Object.assign({ key: '0d10e4a1b8bf57ad3c84d409b0af75db4841ac54' }, buttonProps, { "aria-label": this.tdsAriaLabel }), h("tds-icon", { key: '777a641a976cdd367e095b119591db5fb7913b86', class: "icon", name: "bento", size: "20px", "svg-title": this.tdsAriaLabel })))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherButton.style = TdsHeaderLauncherButtonStyle0;
+TdsHeaderLauncherButton.style = headerLauncherButtonCss();
 
 export { TdsHeaderLauncherButton as tds_header_launcher_button };

package/dist/esm/tds-header-launcher-grid-item.entry.js

@@ -1,16 +1,15 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-9xxNGlso.js';
 
-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-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}";
-const TdsHeaderLauncherGridItemStyle0 = headerLauncherGridItemCss;
+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-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}`;
 
 const TdsHeaderLauncherGridItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1506d0cda6ddcdd025ea7febf24e34c8e0d5b479', role: "listitem" }, h("slot", { key: 'f6ae96ad0c953297fddf43cfcee6d688a93846f5' })));
+        return (h(Host, { key: 'cd5e9cdae7533611bc6982c4939fc885d73a3075', role: "listitem" }, h("slot", { key: '147c30066e884b65839212aa747f1818425b3fae' })));
     }
 };
-TdsHeaderLauncherGridItem.style = TdsHeaderLauncherGridItemStyle0;
+TdsHeaderLauncherGridItem.style = headerLauncherGridItemCss();
 
 export { TdsHeaderLauncherGridItem as tds_header_launcher_grid_item };

package/dist/esm/tds-header-launcher-grid-title.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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 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 TdsHeaderLauncherGridTitle = class {
     constructor(hostRef) {
@@ -10,9 +9,9 @@ const TdsHeaderLauncherGridTitle = class {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '25db2b1431472f1883bce6605c060e48129dacc5' }, h("h3", { key: '0caaece113240546638d8d0366bcecba6f945986', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '16962f436f38d529357dbaade615badd87862323' }))));
+        return (h(Host, { key: '8bcbe93ef2338d3d38f5153897395f8e03454827' }, h("h3", { key: '5f621197309b0e0e82bae4e141b5465a06d6cced', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", { key: '87f9febb3b6e6929a7fd8d3f53299b5c4f855f5a' }))));
     }
 };
-TdsHeaderLauncherGridTitle.style = TdsHeaderLauncherGridTitleStyle0;
+TdsHeaderLauncherGridTitle.style = headerLauncherGridTitleCss();
 
 export { TdsHeaderLauncherGridTitle as tds_header_launcher_grid_title };

package/dist/esm/tds-header-launcher-grid.entry.js

@@ -1,14 +1,12 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-8efea284.js';
-import './dfs-1e574d5f.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-BQco7VNg.js';
+import './dfs-CLF3diNe.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 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 TdsHeaderLauncherGrid = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.headingElement = undefined;
     }
     componentWillLoad() {
         const listRoot = this.host;
@@ -30,10 +28,10 @@ const TdsHeaderLauncherGrid = class {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, { key: 'a3c700222b0cfba847962708fcab2e8876b459f6' }, h("div", Object.assign({ key: '6e4b346fd7bb132a60386a5711381d7936df05a4' }, listAttributes), h("slot", { key: 'c24b1b6e7eecccea3032c2b491ce3cf83a6f821b' }))));
+        return (h(Host, { key: 'af47d49260513c962001e45d8aacf108e40f073c' }, h("div", Object.assign({ key: '8679b9f047e09dea015797c1806a96289218245a' }, listAttributes), h("slot", { key: '697321e6e50e81f680cc8d3e2afa6833bffe6530' }))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherGrid.style = TdsHeaderLauncherGridStyle0;
+TdsHeaderLauncherGrid.style = headerLauncherGridCss();
 
 export { TdsHeaderLauncherGrid as tds_header_launcher_grid };

package/dist/esm/tds-header-launcher-list-item.entry.js

@@ -1,16 +1,15 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
+import { r as registerInstance, h, H as Host } from './index-9xxNGlso.js';
 
-const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}";
-const TdsHeaderLauncherListItemStyle0 = headerLauncherListItemCss;
+const headerLauncherListItemCss = () => `:host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}`;
 
 const TdsHeaderLauncherListItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'bcc63c58186216485acf6e6e0f896158e92cd29e' }, h("tds-header-dropdown-list-item", { key: 'e4b963bf20b97aa19f8f6dbd4d4a6face04220db', size: "lg" }, h("slot", { key: '03445a4fe12c6f5a283b6d2635d657bbfd103263' }))));
+        return (h(Host, { key: '26e0abc8a58c0172ce418740674c9c2549023c2b' }, h("tds-header-dropdown-list-item", { key: '879647cff5e9c60551fb45a4a84397e94ded716c', size: "lg" }, h("slot", { key: '4c3c2e8b7091e3922a5d283f8c2b86963bf183aa' }))));
     }
 };
-TdsHeaderLauncherListItem.style = TdsHeaderLauncherListItemStyle0;
+TdsHeaderLauncherListItem.style = headerLauncherListItemCss();
 
 export { TdsHeaderLauncherListItem as tds_header_launcher_list_item };

package/dist/esm/tds-header-launcher-list-title.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.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 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 TdsHeaderLauncherListTitle = class {
     constructor(hostRef) {
@@ -10,10 +9,10 @@ const TdsHeaderLauncherListTitle = class {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '323d920d37834907f77c0d00aca6172caa90b6d8' }, h("h3", { key: '49c919cceae79d9d1c0157a603e181d56dd15205', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: 'a1aa000de6a642dd68e2212a0e16728d5bb55a1f' }))));
+        return (h(Host, { key: '1db41bbb932fc09f6370b89ce40c6f6b296d69fd' }, h("h3", { key: 'b5175995d25a9031323d4694224fbeb30969ffec', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", { key: '672a7c395f3d7e8e6eb51b05b088af825394f421' }))));
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncherListTitle.style = TdsHeaderLauncherListTitleStyle0;
+TdsHeaderLauncherListTitle.style = headerLauncherListTitleCss();
 
 export { TdsHeaderLauncherListTitle as tds_header_launcher_list_title };

package/dist/esm/tds-header-launcher-list.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { r as registerInstance, h, H as Host } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
 
 const TdsHeaderLauncherList = class {
     constructor(hostRef) {
@@ -7,7 +7,7 @@ const TdsHeaderLauncherList = class {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'ceedbada9d5a96ecdb5306b0e55f939ba69c78d8' }, h("tds-header-dropdown-list", { key: 'a1ffa08021a4ac0d3aad0401330b6d82ad4e20f9', size: "lg" }, h("slot", { key: 'e0808a6e71a6bb26e8b56005c9552fde5af9296b' }))));
+        return (h(Host, { key: '00ca1cea2fa5a3239e7f24de93e0890fbb1eab07' }, h("tds-header-dropdown-list", { key: '614f2eacdad946baa6fb16ef8f545993022e0cec', size: "lg" }, h("slot", { key: 'c99913a72f4e8a7d8be6e41aca9769d9236d49d5' }))));
     }
 };
 

package/dist/esm/tds-header-launcher.entry.js

@@ -1,19 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-51d04e39.js';
-import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
-import './inheritAttributes-d21e267b.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-9xxNGlso.js';
+import { g as generateUniqueId } from './generateUniqueId-Cn4f8w1e.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-DyLhgCIg.js';
+import './inheritAttributes-CF8bH08v.js';
 
-const headerLauncherCss = ":host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@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 headerLauncherCss = () => `:host,:root{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}: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:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar{width:var(--tds-scrollbar-width)}:host .wrapper .menu::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}:host .wrapper .menu::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}:host .wrapper .menu::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){:host .wrapper .menu{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}@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 TdsHeaderLauncher = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.uuid = generateUniqueId();
         this.open = false;
-        this.buttonEl = undefined;
         this.hasListTypeMenu = false;
-        this.tdsAriaLabel = undefined;
+        this.uuid = generateUniqueId();
     }
     onAnyClick(event) {
         // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
@@ -55,11 +52,11 @@ const TdsHeaderLauncher = class {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '18e438bd8281ca3d6ca2b410c5b0ed60caf554aa' }, h("div", { key: '6033d6a10546a8b79b0bcab3f59ef14138263e9f', class: {
+        return (h(Host, { key: '088d5c4213d9b95b275821f1395361f317cd5ccb' }, h("div", { key: 'b8895540f29ca8eb9e3e9aec78d7fa5f8acc4494', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'de44af111fdbabc37a8330194f40465ab3301089' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'a39f8dbb2e6cf648bc16e896f01df6c308472fc3', 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: '5f4598b7079c9a31167287f32e1a411e76e20afb' }, buttonAttributes, { "tds-aria-label": this.tdsAriaLabel })), this.buttonEl && (h("tds-popover-canvas", { key: 'acce35a0208653a1a53a75076e8f3a7dbf19b73c', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -70,6 +67,6 @@ const TdsHeaderLauncher = class {
     }
     get host() { return getElement(this); }
 };
-TdsHeaderLauncher.style = TdsHeaderLauncherStyle0;
+TdsHeaderLauncher.style = headerLauncherCss();
 
 export { TdsHeaderLauncher as tds_header_launcher };