@scania/tegel 1.23.0 → 1.24.0-dropdown-numer-beta.0

package/dist/cjs/tds-dropdown_2.cjs.entry.js

@@ -73,15 +73,15 @@ const TdsDropdown = class {
         this.tdsBlur = index.createEvent(this, "tdsBlur", 6);
         this.tdsInput = index.createEvent(this, "tdsInput", 6);
         this.setDefaultOption = () => {
-            if (this.defaultValue) {
+            if (this.internalDefaultValue) {
                 const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
                 if (children.length === 0) {
                     console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
                     return;
                 }
                 const defaultValues = this.multiselect
-                    ? new Set(this.defaultValue.split(','))
-                    : [this.defaultValue];
+                    ? new Set(this.internalDefaultValue.split(','))
+                    : [this.internalDefaultValue];
                 const childrenMap = new Map(children.map((element) => [element.value, element]));
                 const matchedValues = Array.from(defaultValues).filter((value) => {
                     const element = childrenMap.get(value);
@@ -96,7 +96,7 @@ const TdsDropdown = class {
                     this.setValueAttribute();
                 }
                 else {
-                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
+                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.internalDefaultValue}"`);
                 }
             }
         };
@@ -215,6 +215,12 @@ const TdsDropdown = class {
                 value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
             });
         };
+        this.resetInput = () => {
+            const inputEl = this.host.querySelector('input');
+            if (inputEl) {
+                this.reset();
+            }
+        };
         this.name = undefined;
         this.disabled = false;
         this.helper = undefined;
@@ -235,6 +241,7 @@ const TdsDropdown = class {
         this.value = undefined;
         this.filterResult = undefined;
         this.filterFocus = undefined;
+        this.internalDefaultValue = undefined;
     }
     /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
     async reset() {
@@ -384,7 +391,16 @@ const TdsDropdown = class {
             }
         }
     }
+    handleDefaultValueChange(newValue) {
+        if (newValue !== undefined && newValue !== null) {
+            this.internalDefaultValue = newValue.toString();
+            this.setDefaultOption();
+        }
+    }
     componentWillLoad() {
+        if (this.defaultValue !== undefined && this.defaultValue !== null) {
+            this.internalDefaultValue = this.defaultValue.toString();
+        }
         this.setDefaultOption();
     }
     /** Method to handle slot changes */
@@ -419,10 +435,22 @@ const TdsDropdown = class {
             });
         });
     }
+    componentDidRender() {
+        const form = this.host.closest('form');
+        if (form) {
+            form.addEventListener('reset', this.resetInput);
+        }
+    }
+    disconnectedCallback() {
+        const form = this.host.closest('form');
+        if (form) {
+            form.removeEventListener('reset', this.resetInput);
+        }
+    }
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (index.h(index.Host, { key: '1c4995be9b1e47e254ec9976b334c4d74a44263b', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: 'ad423934dedc56ff39d06bf7746e47d011bed002', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '99c87c0add1152f47533bf6ef5e6794cffdbb18c', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (index.h("div", { class: {
+        return (index.h(index.Host, { key: '59198c21800c375dde1f2429ec9ab83caea26a15', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (index.h("div", { key: '51ec664e6d72a7dfaaaf4c3420d0ec726d9c165a', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: 'cfb1b64bc1ec3c09edc7a4157be01159a56a737a', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (index.h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -472,7 +500,7 @@ const TdsDropdown = class {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: 'dd850ac34b473f9cac51ad5bdc8417d994b7946a', ref: (element) => (this.dropdownList = element), class: {
+                    ` }, this.label)), index.h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), index.h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), index.h("div", { key: 'a585073f41bf1cbf6855050fd45506892ac84e7a', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -481,11 +509,12 @@ const TdsDropdown = class {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, index.h("slot", { key: '790885487da46ec88e05ad98272cbd43eb6fc7ac', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { key: '7d9c9f695c5dc2c734fa51a746c6c1c3547d5dec', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { key: 'b044b0d4dd3e39000fa0262a838aa860451e5986', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && index.h("tds-icon", { key: '506204fd3f113c6a903b616372660902295d0886', name: "error", size: "16px" }), this.helper))));
+            } }, index.h("slot", { key: '7047e1daff3ac9a7b5d85bd94885ac108eae2b68', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (index.h("div", { key: 'c21388cbde54350252c0e6edcb6c16808cfc7a55', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (index.h("div", { key: '2ddf6a329c52025a50a0e6519af68b6f67c8d08b', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && index.h("tds-icon", { key: '3527c56932fab328ee1d06d403e7931e19fe8b8a', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenState"]
+        "open": ["handleOpenState"],
+        "defaultValue": ["handleDefaultValueChange"]
     }; }
 };
 TdsDropdown.style = TdsDropdownStyle0;
@@ -511,10 +540,10 @@ const TdsDropdownOption = class {
         this.handleSingleSelect = () => {
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.value);
+                this.parentElement.appendValue(this.internalValue);
                 this.parentElement.close();
                 this.tdsSelect.emit({
-                    value: this.value,
+                    value: this.internalValue,
                     selected: this.selected,
                 });
             }
@@ -522,18 +551,18 @@ const TdsDropdownOption = class {
         this.handleMultiselect = (event) => {
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.value);
+                    this.parentElement.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.value);
+                    this.parentElement.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
@@ -547,6 +576,7 @@ const TdsDropdownOption = class {
             this.tdsBlur.emit(event);
         };
         this.value = undefined;
+        this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
         this.multiselect = undefined;
@@ -556,8 +586,15 @@ const TdsDropdownOption = class {
     async setSelected(selected) {
         this.selected = selected;
     }
+    valueWatcher(newValue) {
+        this.internalValue = String(newValue);
+    }
+    componentWillLoad() {
+        // Initialize the internal value
+        this.internalValue = String(this.value);
+    }
     render() {
-        return (index.h(index.Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, index.h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
+        return (index.h(index.Host, { key: '0c7e35e61a103af25df0a54d4dfd4b6811760de4', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, index.h("div", { key: 'd256dd44efcfba4d13526d3b9f9fc74177e77e75', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -575,6 +612,9 @@ const TdsDropdownOption = class {
     }
     static get delegatesFocus() { return true; }
     get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["valueWatcher"]
+    }; }
 };
 TdsDropdownOption.style = TdsDropdownOptionStyle0;
 

package/dist/cjs/tds-folder-tab.cjs.entry.js

@@ -23,8 +23,10 @@ const TdsFolderTab = class {
         this.selected = selected;
     }
     render() {
-        return (index.h(index.Host, { key: '37ae53ec0d9c0bc3674365d14d61c6b1fbafe168', role: "listitem" }, index.h("div", { key: 'a977243b499569668ef7428829644f3f2ca23033', class: `${this.disabled ? 'disabled' : ''}
-                  ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, index.h("slot", { key: '1e8b9cc10f032a64ffef70bb061f57ddc8a4a1a5' }))));
+        return (index.h(index.Host, { key: '3ebe8719ec0bae1d4de2f698b032d9914f01fc65', role: "listitem" }, index.h("div", { key: '26e4df6a7c2c3ec3cc9b391004b0ecc2e08886ce', class: {
+                selected: this.selected,
+                disabled: this.disabled,
+            }, style: { width: `${this.tabWidth}px` } }, index.h("slot", { key: '78549272532f6fa272660fde77c61464dbede36c' }))));
     }
 };
 TdsFolderTab.style = TdsFolderTabStyle0;

package/dist/cjs/tds-folder-tabs.cjs.entry.js

@@ -167,9 +167,9 @@ const TdsFolderTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (index.h(index.Host, { key: '3164044436f7029d85c4eed0ff7e0cc2b4e35752', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '59beaa0776ff83a30e84b69c5715a2f0d62ec6d9', class: "wrapper", ref: (el) => {
+        return (index.h(index.Host, { key: 'ab95c2616920aa0feb451cdc8e05697bfedb12b6', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '5330ac0094013711f2d85befe37e7f02de22d8c9', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, index.h("button", { key: '0bd461d469592983e08043c23e295c21df04c80f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: 'd21448eea9cab4d73087fec72d29270b52bf0999', name: "chevron_left", size: "20px" })), index.h("slot", { key: 'efe348a98b964486a73d1aac235ce894277c6249', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: 'ea819f59668994e328410941b5b7455620ecb321', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: 'c52241bb7c77eabbdb8de5a19bb4400c32aa2062', name: "chevron_right", size: "20px" })))));
+            } }, index.h("button", { key: 'cf1d97ff6db378f1a9d2306dce45ccc24ff00718', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: 'df3cd8050d37eeb32e957ec22796c551476f003b', name: "chevron_left", size: "20px" })), index.h("slot", { key: '695ba9188c06a56785b1362e7554cf0bdfa0c635', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: 'c64fa2e8788ef3ae78dd1c32b6755625abd4a115', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: '3d7f40dcc022b37d1d5419ff4b111bf085011698', name: "chevron_right", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-footer-group.cjs.entry.js

@@ -25,11 +25,11 @@ const TdsFooterGroup = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b704a9cdc581f94a4680793bccc4da44496fe328' }, this.titleText && this.topPartGroup && (index.h("div", { key: '630d91ff93d0eeb6c0bc603d9255059bad3b8d33', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (index.h("button", { key: '2a424b0f61fb06b14ae9bb9a611b5264e0854111', onClick: () => {
+        return (index.h(index.Host, { key: 'ae2797031aeb5ca057aa00b43d927dff915a5f12' }, this.titleText && this.topPartGroup && (index.h("div", { key: '9ea90a96330835356332d48efdb0e4d8dd7ea645', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (index.h("button", { key: '91b8365113700710108d6207f32968354c660014', onClick: () => {
                 this.open = !this.open;
-            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, index.h("tds-icon", { key: 'ea2d3d26b0c70d6346b71d98753a6e13bf074351', name: "chevron_down", size: "20px" }))), index.h("div", { key: '400c3cf5f39e59fa60f26cba45df02ad8b5da063', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, index.h("tds-icon", { key: '4faa5b64abb3c37659efeaf8a4e9a610ccbce607', name: "chevron_down", size: "20px" }))), index.h("div", { key: 'b3e3bda445b7b9c244072c2d188a6fe0fcb2e7e0', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: '38241a0f3b5a343f5074b113168ba97465f7c209' }))));
+            ${this.open ? 'expanded' : 'closed'}` }, index.h("slot", { key: '99197656b6b371c43da12f1dcf39ef0a0b41fae9' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-footer-item.cjs.entry.js

@@ -16,7 +16,7 @@ const TdsFooterItem = class {
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (index.h("div", { key: '3ec8ab3daa658a8b54735c0b58b6a704da0206b3', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, index.h("slot", { key: '990ef329bcac600c632e0b7e8eda843e0284c62e' })));
+        return (index.h("div", { key: 'a25461642c0ec629b7c9201a62c0e5c1373e0f68', role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, index.h("slot", { key: '19341c71e073cf8b06a24bef448d2b74486a65b7' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -19,7 +19,9 @@ const TdsFooter = class {
         const usesStartSlot = hasSlot.hasSlot('start', this.host);
         const usesEndSlot = hasSlot.hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot.hasSlot('copyright', this.host);
-        return (index.h(index.Host, { key: '454d913eea834fa60400c9714370d14425bc24b6', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("footer", { key: '77ee89f78b3df1658a6c9e1f5b73273b447aca6d' }, usesTopSlot && index.h("slot", { key: '6a3c601f7fcd034d659848c3a568460489f874ca', name: "top" }), index.h("div", { key: '245560e49f1aa3ac1c0d9234f2b53c6c8be12a32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (index.h("div", { key: '2b3220a69f400b8b609fb423f4136b9fb3d1bf96', class: "footer-main-top" }, usesStartSlot && index.h("slot", { key: '952412fc57aef7abe5a195ac173a14a48a626c95', name: "start" }), usesEndSlot && index.h("slot", { key: 'a8b8f6d9c625b7da0ecee95e05a1cda4492b964a', name: "end" }))), index.h("div", { key: 'ca1e76bd613fa3662a5822882fc4ddc0e030c606', class: "footer-main-bottom" }, index.h("small", { key: '5c5c3803d71c51b8793993240f00912b89377985', class: "copyright" }, usesCopyrightSlot ? index.h("slot", { name: "copyright" }) : this.copyrightText), index.h("div", { key: '2ebada35ffde37a7824b100fe34dd947c525741e', class: "brand" }, index.h("p", { key: 'e6233b2ce0d5f36a54f9069a9feec687388bc795' }, "Scania")))))));
+        return (index.h(index.Host, { key: '9da56bcf06badf33f3096c4cf980e775090d70d4', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
+            } }, index.h("footer", { key: '0bcb1d24d91f26eb8f44fb0faff172c3e140aeff' }, usesTopSlot && index.h("slot", { key: '4ab849118b1e4822aab9b2779b38569b413595e5', name: "top" }), index.h("div", { key: 'f84c3c4ac78776da6f127675b24c467dcd7eedca', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (index.h("div", { key: 'a12d5aa87d7b731b16b40d42e78005a7dbd92c07', class: "footer-main-top" }, usesStartSlot && index.h("slot", { key: '590a118da2562908606173cc562fbf4c1deae6d3', name: "start" }), usesEndSlot && index.h("slot", { key: 'bd5a1d47df4a4d3089efa7658c62c1c2aed22550', name: "end" }))), index.h("div", { key: '67254f6335af0686cf12461fe6baf9e4cac20c73', class: "footer-main-bottom" }, index.h("small", { key: '99735b151f41ed0a376b98d4b6401b7098a1712c', class: "copyright" }, usesCopyrightSlot ? index.h("slot", { name: "copyright" }) : this.copyrightText), index.h("div", { key: '59774a132d0af546b2e19ae801fa850ae41bdeeb', class: "brand" }, index.h("p", { key: '304b381e47c96c93cae26abcf0042c6a0128c7e0' }, "Scania")))))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const TdsHeaderBrandSymbol = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9b3b472651a6d410b143316851ca701eab5a82c3' }, index.h("tds-header-item", { key: '843bc3ce81ae39261a7eb4429ed4d9d76f051cfb' }, index.h("slot", { key: 'd3a939ac410d229c78532c133e54b868507f7aff' }))));
+        return (index.h(index.Host, { key: '65232b3c21bfec646f7d3e3cf308135f74674034' }, index.h("tds-header-item", { key: '83517481088ba021f329834aa2d0f987f3edd9f0' }, index.h("slot", { key: 'e2bc371fd7f310347b8da5a0bc30a6dfd3dee979' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -115,7 +115,7 @@ const TdsTableHeaderCell = class {
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'c40924cf774a94e3f78d114eb91632fe57388ba2', class: {
+        return (index.h(index.Host, { key: '967a02c87d37c0eb75219c84c09edbb34b0257df', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

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

@@ -14,10 +14,10 @@ const TdsHeaderDropdownListItem = class {
         this.size = 'md';
     }
     render() {
-        return (index.h(index.Host, { key: 'e884013f09151c5ba323ac69c34c88e8aba9d132' }, index.h("div", { key: 'e4babaebaac5f661b2ef365a120e9953d6535c73', class: {
+        return (index.h(index.Host, { key: 'e907df68566401506c20283daeeeabf1ebcaa7c8' }, index.h("div", { key: '5a784414662a0da44aeada1496801146606852df', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, index.h("slot", { key: 'b58b6c84093c4edd303ee3ed202703f316cfcaa2' }))));
+            } }, index.h("slot", { key: 'a1027ad30124faea7cadbf48c07d3e5e021426f2' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -16,7 +16,7 @@ const TdsHeaderDropdownListLgUser = class {
         this.subheader = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '120d76ed5000698ced662db148b40a5d888a8d2a', role: "listitem" }, index.h("div", { key: '3ab963ed3d6dedcd2fab62ddc187f7f2da81221d', class: "user-box" }, this.imgUrl && index.h("img", { key: 'f542a2fbd18541ff12c05be84299193ce4d7459a', src: this.imgUrl, alt: this.imgAlt }), index.h("slot", { key: '9aa0949e9f73ba26013aaff907d52ced275f20ce', name: "thumbanil" }), index.h("div", { key: '4e95bb13416d0a677c8423e67fd30acec004639c', class: "user-content" }, index.h("div", { key: '6164f3b2be4844cb0f754d265ec99b225a61bce3', class: "header" }, this.header, index.h("slot", { key: '15842a87e2a0d3d8fb52fa96f11a93f74e3fd263', name: "header" })), index.h("div", { key: '9b236eaf9ccc12b808dfca4a929b1cfc8d7d2490', class: "subheader" }, this.subheader, index.h("slot", { key: '8fcb8f4117901a6a5ee53fbe22c307039c598787', name: "subheader" }))))));
+        return (index.h(index.Host, { key: 'e74d36a9ed0b7ff850d18dad25d2bce4c6f7b097', role: "listitem" }, index.h("div", { key: 'a4f433ea9996e1fa49951f3d2ba60692456dbeaf', class: "user-box" }, this.imgUrl && index.h("img", { key: 'c250a2f6742e1d6c9a161a3e792e1e34aae84cdf', src: this.imgUrl, alt: this.imgAlt }), index.h("slot", { key: '7a3f1f737e6e50288e71401e9a47d066ba19ac42', name: "thumbanil" }), index.h("div", { key: '2607865f76fd34a9dd3fee48175be7fabb4c8259', class: "user-content" }, index.h("div", { key: '46faeb8b688ad3b3f5e33739ad43e74ee2e4fccb', class: "header" }, this.header, index.h("slot", { key: 'f918d94a6194823ebf80f8661074dfc36928be8e', name: "header" })), index.h("div", { key: '730bc350f801c2cbedc69ff9f4862c8e3dd345db', class: "subheader" }, this.subheader, index.h("slot", { key: '47d6f4dd6ccd2ad95db1fbc54d32d543c245207a', name: "subheader" }))))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -78,7 +78,7 @@ const TdsHeaderDropdownList = class {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (index.h(index.Host, Object.assign({ key: '2ebed45f0b4d3b872378a1246180fc34f8ea46de' }, attributes), index.h("slot", { key: '5b72e5cab5c21fdaa55ca8641c729393ade09f75' })));
+        return (index.h(index.Host, Object.assign({ key: 'a5dd28fda0bbec3b9fdfa94b2170723ea93e646b' }, attributes), index.h("slot", { key: '8e196622a25da4f35e3dbcef8abf385d5723353c' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -35,13 +35,13 @@ const TdsHeaderDropdown = class {
         this.open = !this.open;
     }
     render() {
-        return (index.h(index.Host, { key: '73a8e824b891f66806fad583470460a30af641de' }, index.h("div", { key: '81e78a9f21b152ae4698ec6f693ead79eb40f936', class: {
+        return (index.h(index.Host, { key: '89f12a6c9dbb08a6bb27f4612ca1321cc6059a63' }, index.h("div", { key: 'c86f11728b2b40a23819df0d55755dfdd91151d8', class: {
                 'state-open': this.open,
-            } }, index.h("tds-header-item", { key: 'aab78709417d1fd623c9a9969246434d78bcc055', class: "button", active: this.open, selected: this.selected }, index.h("button", { key: 'dff4234a39520177ba3cc058511144431facb944', ref: (el) => {
+            } }, index.h("tds-header-item", { key: '0b7960b5fcf15cd31ee9fc4ffa37b71ff2960af2', class: "button", active: this.open, selected: this.selected }, index.h("button", { key: '9f61342bf885a20e45cc09f1cc24edcded3e7da0', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, index.h("slot", { key: 'ec32e95833f0bc4a93a18c0058c7bea979cde638', name: "icon" }), this.label, index.h("slot", { key: 'ab077d925ecbc941446bb9f1f6755dccae26e0ae', name: "label" }), !this.noDropdownIcon && (index.h("tds-icon", { key: 'eb45d913a11433c12e5add804c88fd7c33e343ea', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (index.h("tds-popover-canvas", { key: 'bc15799eeb488984d58abe21cfc27ba695a395a0', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, index.h("slot", { key: '73f8db2b7b9f25ecb0db8b7e32cf79f9c5d02a75', name: "icon" }), this.label, index.h("slot", { key: 'b0fe411427b9f8de6399884c97a47eba35151767', name: "label" }), !this.noDropdownIcon && (index.h("tds-icon", { key: '78668f259697b89d644884f13b43989f568f7944', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (index.h("tds-popover-canvas", { key: '760c6b51cf39d9127fdd3e1a221bcaa8c86a88c1', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

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

@@ -15,7 +15,7 @@ const TdsHeaderHamburger = class {
     }
     render() {
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes.inheritAriaAttributes(this.host));
-        return (index.h(index.Host, { key: 'fa81c06234538414f64c983239c34b7a32184d35' }, index.h("tds-header-item", { key: '5c1168413c62c9f51df5d15bc4b1c12f971cf2f8' }, index.h("button", Object.assign({ key: 'e2225a6e50590b6b25d282737e2198cbd6bf1458' }, inheritedButtonProps), index.h("tds-icon", { key: '5659662f934a61c57b981a24e27cc4e25247cbf7', class: "icon", name: "burger", size: "20px" })))));
+        return (index.h(index.Host, { key: '6191cfe000043e80f9ebedac4629bca461632cc4' }, index.h("tds-header-item", { key: '98b5916b738638b1b5642279774f03c751619bad' }, index.h("button", Object.assign({ key: '31799cf2bf6db5bf649da5231b4633a7f0610f11' }, inheritedButtonProps), index.h("tds-icon", { key: '940d8eb99780a8ce2238de030c4d07673d50d72d', class: "icon", name: "burger", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -17,7 +17,7 @@ const TdsHeaderLauncherButton = class {
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes.inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (index.h(index.Host, { key: 'ee714e05a3585542850f433cd81ed25d95a14070' }, index.h("tds-header-item", { key: '0a7c7b20fa872c1ccd4e0760b9f68743ec6c761f', active: this.active }, index.h("button", Object.assign({ key: '1b0c93c04e5206dc47fe3df3a158e16ed624f8e1' }, buttonProps), index.h("tds-icon", { key: '11a961f7e11d741108a450ef1a2fa1b22f5520a8', class: "icon", name: "bento", size: "20px" })))));
+        return (index.h(index.Host, { key: 'ffe903179bae0b20240541dabc867ad291a88890' }, index.h("tds-header-item", { key: '4104afafab4e15d15e452e7d5b35bfa8b6911e4b', active: this.active }, index.h("button", Object.assign({ key: '1285f504631cb4606456beda892946bcd5da12c0' }, buttonProps), index.h("tds-icon", { key: '973233afc8d4e19df3cdcae48b770f8c5f46c7c7', class: "icon", name: "bento", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const TdsHeaderLauncherGridItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd5c9c41d3438735fd770c227e2d426e149ac5bcf', role: "listitem" }, index.h("slot", { key: 'eff84122e0c7f46b53982fdc53852938f73387bd' })));
+        return (index.h(index.Host, { key: '5b9d61104af5ce387a7ffa5b39bbc385620d02f6', role: "listitem" }, index.h("slot", { key: '68e8c3751bfb61f1652f8b510c45049b60a3b3f2' })));
     }
 };
 TdsHeaderLauncherGridItem.style = TdsHeaderLauncherGridItemStyle0;

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

@@ -14,7 +14,7 @@ const TdsHeaderLauncherGridTitle = class {
         this.uuid = generateUniqueId.generateUniqueId();
     }
     render() {
-        return (index.h(index.Host, { key: '7c58a138aeb6e49fa3de68cf39de273eb37db6b5' }, index.h("h3", { key: '1d775b23a798f3433f985357932c114e943bd698', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, index.h("slot", { key: 'e9599ac31c5e637b578c406ee1f4299f40878009' }))));
+        return (index.h(index.Host, { key: '70ea20ff6df9026852d8ea50c0f76a70dbf96fff' }, index.h("h3", { key: '599beadad433618045130ee083e61e80d5800b61', class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, index.h("slot", { key: '73d100ddab185e319f7e8b507febfb90a410c484' }))));
     }
 };
 TdsHeaderLauncherGridTitle.style = TdsHeaderLauncherGridTitleStyle0;

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

@@ -34,7 +34,7 @@ const TdsHeaderLauncherGrid = class {
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (index.h(index.Host, { key: '8a88bd51ef2e16f9c1ce67bbd7d178692a223c22' }, index.h("div", Object.assign({ key: '8e5025c3d1563d5765a3cfce1e3d4f50bdf5caf4' }, listAttributes), index.h("slot", { key: '0b4bc10cd7aa8fa1d6c0a15ea9a9997f74ad32c3' }))));
+        return (index.h(index.Host, { key: 'c6ee49809cfcd050d2a8b967106b20fca0940e1f' }, index.h("div", Object.assign({ key: 'b060c70d9fcf924d877aa7b2104ddbdc47d2bffd' }, listAttributes), index.h("slot", { key: 'f301f2468cafb5c8b6b32e5a1f2e72c4bcd6819a' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -12,7 +12,7 @@ const TdsHeaderLauncherListItem = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '1b2afd6810710416ac4362d00af34f2ec889ea1f' }, index.h("tds-header-dropdown-list-item", { key: '860b07b16c713c8a74e7443c452263e054c6aebd', size: "lg" }, index.h("slot", { key: '521f412cd86ae413537bca6821f9c95bce075f63' }))));
+        return (index.h(index.Host, { key: '46f2d3592290fb3528d1bccb2904c9585ab62a4f' }, index.h("tds-header-dropdown-list-item", { key: 'd389ef9185dd262878ea094f0edc2ba80ee183b2', size: "lg" }, index.h("slot", { key: '2873d1508622b9024ae7412fff6177240d030542' }))));
     }
 };
 TdsHeaderLauncherListItem.style = TdsHeaderLauncherListItemStyle0;

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

@@ -14,7 +14,7 @@ const TdsHeaderLauncherListTitle = class {
         this.uuid = generateUniqueId.generateUniqueId();
     }
     render() {
-        return (index.h(index.Host, { key: '84abee543dcf0f2f6db9e66b32cd89ddb3fb756a' }, index.h("h3", { key: 'd2eb2ab7b39ac0a0d250ebf63ef22b309c10c9a6', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, index.h("slot", { key: 'edb11a0e6742372432b8f02763d6cf233bdca0cd' }))));
+        return (index.h(index.Host, { key: '7ba9591978c9b22534e292be99efbf0550592002' }, index.h("h3", { key: 'c6a5f810b184f33b4edd46187df922374225ddc7', class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, index.h("slot", { key: '5dcbfaa6969dccc3ed6139ea454aa13ed0ee7bb9' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -11,7 +11,7 @@ const TdsHeaderLauncherList = class {
         this.uuid = generateUniqueId.generateUniqueId();
     }
     render() {
-        return (index.h(index.Host, { key: '3e4fe30a4ec6234898314d838831ffccdaf37ccf' }, index.h("tds-header-dropdown-list", { key: '0a3926403b5800b45433edd035f700a6778bbc2b', size: "lg" }, index.h("slot", { key: 'bcbe4495b9f136b07a5c3c1e7062ec116707a5e4' }))));
+        return (index.h(index.Host, { key: '44396666def3f2125e84399fd9e25a86be8d1a38' }, index.h("tds-header-dropdown-list", { key: '8125971f3675f433b8a3609bad6c4e976a54b460', size: "lg" }, index.h("slot", { key: 'b49bf69a76e80ba0f385c5cde8afe35b262504ce' }))));
     }
 };
 

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

@@ -39,11 +39,11 @@ const TdsHeaderLauncher = class {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (index.h(index.Host, { key: '28c3cec9d319219a00783f0743fc7e035b9b63f5' }, index.h("div", { key: 'a4372783a69578e1965bb14b2b3ad12e2752c472', class: {
+        return (index.h(index.Host, { key: 'e2c04c0ad3bee9593f5dfecce611dbdc48101536' }, index.h("div", { key: 'd98aaa650fa399398ab72c235132ff1800ea327b', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, index.h("tds-header-launcher-button", Object.assign({ key: 'cad014a13dcd193c0b829033d600c07a342a78cc' }, buttonAttributes)), this.buttonEl && (index.h("tds-popover-canvas", { key: '64c9c7e77f6e6825bd0ace40543e10c1444cb290', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, index.h("tds-header-launcher-button", Object.assign({ key: '8c6dfc7fa7a30eedfec3ed1bcefe558ff3265ff3' }, buttonAttributes)), this.buttonEl && (index.h("tds-popover-canvas", { key: 'f719c2f513b3d08f80d648d828c5820097699b55', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/cjs/tds-header-title.cjs.entry.js

@@ -12,7 +12,7 @@ const TdsHeaderTitle = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("h4", { key: 'd0bfee02a1d63152fa37d725a5ebcac55289abb0' }, index.h("slot", { key: '84559dcb52093997b8b0791257448e0a0c6aa019' })));
+        return (index.h("h4", { key: 'ce9aab1a4fb4f60c82db060659eb3e04dd6f2b23' }, index.h("slot", { key: 'a8447afb8b64eb483dc61192c99430ee35120097' })));
     }
 };
 TdsHeaderTitle.style = TdsHeaderTitleStyle0;

package/dist/cjs/tds-header.cjs.entry.js

@@ -50,7 +50,7 @@ const TdsHeader = class {
     }
     render() {
         const navAttributes = Object.assign({}, inheritAriaAttributes.inheritAriaAttributes(this.host));
-        return (index.h(index.Host, { key: '7f42725db4686769f46fb327bc7baeb3b83f2d15' }, index.h("slot", { key: '26b4ab152030e56733efdb29c5ef11e3e8df1bdb', name: "hamburger" }), index.h("slot", { key: '7783ecdec32b28baab698ea379e7497a66da6a11', name: "title" }), index.h("nav", Object.assign({ key: '66a2d848b6ceed22d57080641652392dc2357405' }, navAttributes), index.h("ul", { key: '5b47c9a9e2210ca4c944ef6323bd5378437d8237', class: "tds-header-component-list" }, index.h("slot", { key: '14aaafb9b73a5f7d7fd48d0e0cfe4f4907183f27' }), index.h("li", { key: 'd3e6db876946d322dc14ef22ada0c92414941d2f', class: "tds-header-middle-spacer" }), index.h("slot", { key: '833f75ce887181221118a0dfe32ca96cf149a3ff', name: "end" })))));
+        return (index.h(index.Host, { key: 'ed12abc8d3dcdcebfd0412f2b8eb119be096a9fa' }, index.h("slot", { key: 'cf4ced838e0aadeb003c8b96dae259247ff019d3', name: "hamburger" }), index.h("slot", { key: '7e35310b6f2a16c2381fa093209f219745bb6778', name: "title" }), index.h("nav", Object.assign({ key: 'd26aac5e2d3d90b4a98c4cb4a99db445406466aa' }, navAttributes), index.h("ul", { key: 'cf54ce03395d7fc064ea440dd09e5cfe752bec49', class: "tds-header-component-list" }, index.h("slot", { key: '8f28f8c89e08d50fb18f69753da1ee3f9ca544e2' }), index.h("li", { key: '13750b5b85b748bcb4aa0aa38cbc9c2d0c87acda', class: "tds-header-middle-spacer" }), index.h("slot", { key: 'baf34c93494a48c1bb85bc98bcb8af9f0d803238', name: "end" })))));
     }
     get host() { return index.getElement(this); }
 };