@scania/tegel 1.49.2-warning-beta.0 → 1.50.0-develop-beta.1

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -91,7 +91,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '35542ea54d2ba455982e2470190711f75f88a999' }, h("div", { key: '4236d5281cf4675586a7d8b16e80141b9689dad3', class: `dropdown-option
+        return (h(Host, { key: 'f2c0929d4a6d9e7df2259b80175ddde7bad15946' }, h("div", { key: '433562a99e20ec9b21cf1b07819c52e516081723', class: `dropdown-option
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -141,7 +141,7 @@ export class TdsDropdownOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             },
             "disabled": {
@@ -160,7 +160,7 @@ export class TdsDropdownOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -180,7 +180,7 @@ export class TdsDropdownOption {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             }
         };

package/dist/collection/components/dropdown/dropdown.js

@@ -56,46 +56,7 @@ export class TdsDropdown {
         this.selectedOptions = [];
         this.filterQuery = '';
         this.hasFocus = false;
-        this.pendingInvalidValues = new Set();
         this.uuid = generateUniqueId();
-        this.handleArrowDown = (activeElement) => {
-            const children = this.getChildren();
-            /** Get the index of the current focus index, if there is no
-            nextElementSibling return the index for the first child in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? children.findIndex((element) => element === activeElement.nextElementSibling)
-                : 0;
-            if (children.length > 0) {
-                const elementIndex = findNextFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
-        };
-        this.handleArrowUp = (activeElement) => {
-            const children = this.getChildren();
-            /** Get the index of the current focus index, if there is no
-            previousElementSibling return the index for the first last in our Dropdown.  */
-            const startingIndex = activeElement.nextElementSibling
-                ? children.findIndex((element) => element === activeElement.previousElementSibling)
-                : 0;
-            if (children.length > 0) {
-                const elementIndex = findPreviousFocusableElement(children, startingIndex);
-                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
-                target === null || target === void 0 ? void 0 : target.focus();
-            }
-        };
-        this.handleEscape = () => {
-            var _a, _b;
-            this.open = false;
-            /** Return focus to input/button when Escape key is used */
-            if (this.filter) {
-                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
-                button === null || button === void 0 ? void 0 : button.focus();
-            }
-        };
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
                 /** Convert the internal default value to an array if it's not already */
@@ -105,7 +66,13 @@ export class TdsDropdown {
                 this.updateDropdownStateInternal(defaultValues);
             }
         };
-        this.getChildren = () => Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
+        this.getChildren = () => {
+            const tdsDropdownOptions = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
+            if (tdsDropdownOptions.length === 0) {
+                console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
+            }
+            return tdsDropdownOptions;
+        };
         this.getSelectedChildren = () => {
             if (this.selectedOptions.length === 0)
                 return [];
@@ -213,51 +180,48 @@ export class TdsDropdown {
                 }).length;
             }
         };
-        this.focusInput = (value) => {
-            if (this.inputElement) {
-                this.inputElement.value = value;
-                this.inputElement.focus();
-            }
-        };
         this.handleFilterReset = () => {
             if (this.multiselect) {
-                this.handleMultiselectFilterReset();
+                /** Multiselect + filter: two-step clear */
+                if (this.filterQuery.length > 0) {
+                    const clearedValue = this.filterQuery;
+                    this.filterQuery = '';
+                    this.resetFilterVisibility();
+                    if (this.inputElement) {
+                        this.inputElement.value = this.getValue();
+                        this.inputElement.focus();
+                    }
+                    this.tdsClear.emit({ clearedValue });
+                }
+                else if (this.selectedOptions.length > 0) {
+                    const clearedValue = this.selectedOptions.join(',');
+                    this.updateDropdownStateFromUser([]);
+                    if (this.inputElement) {
+                        this.inputElement.value = '';
+                        this.inputElement.focus();
+                    }
+                    this.tdsClear.emit({ clearedValue });
+                }
             }
             else {
-                this.handleSingleFilterReset();
-            }
-        };
-        /** Multiselect + filter: two-step clear */
-        this.handleMultiselectFilterReset = () => {
-            if (this.filterQuery.length > 0) {
-                const clearedValue = this.filterQuery;
-                this.filterQuery = '';
-                this.resetFilterVisibility();
-                this.focusInput(this.getValue());
-                this.tdsClear.emit({ clearedValue });
-            }
-            else if (this.selectedOptions.length > 0) {
-                const clearedValue = this.selectedOptions.join(',');
-                this.updateDropdownStateFromUser([]);
-                this.focusInput('');
-                this.tdsClear.emit({ clearedValue });
-            }
-        };
-        /** Single select + filter: clear everything immediately */
-        this.handleSingleFilterReset = () => {
-            const clearedParts = [];
-            if (this.filterQuery.length > 0) {
-                clearedParts.push(this.filterQuery);
-                this.filterQuery = '';
-                this.resetFilterVisibility();
-            }
-            if (this.selectedOptions.length > 0) {
-                clearedParts.push(this.selectedOptions.join(','));
-                this.updateDropdownStateFromUser([]);
-            }
-            this.focusInput('');
-            if (clearedParts.length > 0) {
-                this.tdsClear.emit({ clearedValue: clearedParts.join(',') });
+                /** Single select + filter: clear everything immediately */
+                const clearedParts = [];
+                if (this.filterQuery.length > 0) {
+                    clearedParts.push(this.filterQuery);
+                    this.filterQuery = '';
+                    this.resetFilterVisibility();
+                }
+                if (this.selectedOptions.length > 0) {
+                    clearedParts.push(this.selectedOptions.join(','));
+                    this.updateDropdownStateFromUser([]);
+                }
+                if (this.inputElement) {
+                    this.inputElement.value = '';
+                    this.inputElement.focus();
+                }
+                if (clearedParts.length > 0) {
+                    this.tdsClear.emit({ clearedValue: clearedParts.join(',') });
+                }
             }
         };
         this.resetFilterVisibility = () => {
@@ -322,7 +286,7 @@ export class TdsDropdown {
         const normalizedValue = this.normalizeValue(newValue);
         /** Only update if actually changed */
         if (hasValueChanged(normalizedValue, this.selectedOptions)) {
-            this.updateDropdownStateInternal(normalizedValue);
+            this.updateDropdownStateFromUser(normalizedValue);
         }
     }
     normalizeValue(value) {
@@ -353,8 +317,8 @@ export class TdsDropdown {
         this.updateDropdownState(values, true);
     }
     updateDropdownState(values, emitChange = true) {
-        /** Validate the values - only filter out invalid values for user-triggered changes */
-        const validValues = this.validateValues(values, emitChange);
+        /** Validate the values first */
+        const validValues = this.validateValues(values);
         /** Update internal state */
         this.selectedOptions = [...validValues];
         /** Update the value prop */
@@ -371,17 +335,19 @@ export class TdsDropdown {
         /** Update value attribute */
         this.setValueAttribute();
     }
-    validateValues(values, strict = false) {
+    validateValues(values) {
+        /** Make sure we have children before validation */
         const children = this.getChildren();
         if (!children || children.length === 0) {
+            console.warn('No dropdown options found');
             return values; /** Return original values if no children yet */
         }
         return values.filter((val) => {
             const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
-            if (!isValid && strict) {
-                console.warn(`TDS DROPDOWN: Option with value "${val}" does not exist`);
+            if (!isValid) {
+                console.warn(`Option with value "${val}" does not exist`);
             }
-            return isValid || !strict;
+            return isValid;
         });
     }
     updateOptionElements() {
@@ -507,22 +473,47 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
+        var _a, _b;
+        /** Get the active element */
         const { activeElement } = document;
         if (!activeElement) {
             return;
         }
-        switch (event.key) {
-            case 'ArrowDown':
-                this.handleArrowDown(activeElement);
-                break;
-            case 'ArrowUp':
-                this.handleArrowUp(activeElement);
-                break;
-            case 'Escape':
-                this.handleEscape();
-                break;
-            default:
-                break;
+        const children = this.getChildren();
+        if (event.key === 'ArrowDown') {
+            /** Get the index of the current focus index, if there is no
+            nextElementSibling return the index for the first child in our Dropdown.  */
+            const startingIndex = activeElement.nextElementSibling
+                ? children.findIndex((element) => element === activeElement.nextElementSibling)
+                : 0;
+            if (children.length > 0) {
+                const elementIndex = findNextFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[0];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
+        }
+        else if (event.key === 'ArrowUp') {
+            /** Get the index of the current focus index, if there is no
+            previousElementSibling return the index for the first last in our Dropdown.  */
+            const startingIndex = activeElement.nextElementSibling
+                ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
+                : 0;
+            if (children.length > 0) {
+                const elementIndex = findPreviousFocusableElement(children, startingIndex);
+                const target = typeof elementIndex === 'number' ? children[elementIndex] : children[children.length - 1];
+                target === null || target === void 0 ? void 0 : target.focus();
+            }
+        }
+        else if (event.key === 'Escape') {
+            this.open = false;
+            /** Return focus to input/button when Escape key is used */
+            if (this.filter) {
+                (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
+                button === null || button === void 0 ? void 0 : button.focus();
+            }
         }
     }
     /** If the Dropdown gets closed,
@@ -563,45 +554,7 @@ export class TdsDropdown {
     }
     /** Method to handle slot changes */
     handleSlotChange() {
-        /**
-         * Warn for values that were pending from a previous slot change
-         * and are still invalid now that new options have arrived.
-         */
-        this.warnAndClearPending();
-        if (this.selectedOptions.length > 0) {
-            this.updateDropdownStateInternal([...this.selectedOptions]);
-        }
-        else if (this.internalDefaultValue) {
-            this.setDefaultOption();
-        }
-        /** Track currently unmatched values as pending for the next slot change */
-        this.updatePendingInvalidValues();
-    }
-    /** Warn for pending values that are still not matched, then clear pending */
-    warnAndClearPending() {
-        const children = this.getChildren();
-        if (!children || children.length === 0 || this.pendingInvalidValues.size === 0)
-            return;
-        this.pendingInvalidValues.forEach((val) => {
-            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
-            if (!isValid) {
-                console.warn(`TDS DROPDOWN: Option with value "${val}" does not exist`);
-            }
-        });
-        this.pendingInvalidValues.clear();
-    }
-    /** Track unmatched selected values as pending for deferred warning */
-    updatePendingInvalidValues() {
-        const children = this.getChildren();
-        if (!children || children.length === 0)
-            return;
-        this.pendingInvalidValues.clear();
-        this.selectedOptions.forEach((val) => {
-            const isValid = children.some((element) => convertToString(element.value) === convertToString(val));
-            if (!isValid) {
-                this.pendingInvalidValues.add(val);
-            }
-        });
+        this.setDefaultOption();
     }
     /** Method to check if we should normalize text */
     normalizeString(text) {
@@ -679,9 +632,9 @@ export class TdsDropdown {
         else if (showPlaceholderButton) {
             buttonText = (_d = this.placeholder) !== null && _d !== void 0 ? _d : '';
         }
-        return (h(Host, { key: '073d4f0a7acb9b84439b680cbca9b356d4beca95', class: {
+        return (h(Host, { key: 'b9cf35a8a59a4394231a6a1eaf28d10eb406d9dd', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'e7d4fa740f7014364a04091040bc180db11a6870', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c883d46846f9d3fadcc9a4c696219be2cc5e8715', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd0a437dd9964f99a6fc584e19db6cb202a52db6d', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '1f2bc5ba3a4f88d0562920514582dbbca392f0f2', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -740,7 +693,7 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.multiselect && this.selectedOptions.length > 0),
-            }, name: "cross", size: "16px" }), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" })))), h("div", { key: '0f7ec974d9abf1b6ed86a48a48300f13528b4a5f', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+            }, name: "cross", size: "16px" }), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" })))), h("div", { key: '33b396b80b0bd9df1e2ad49ce76a6d206b8494c1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 if (element)
                     this.dropdownList = element;
             }, class: {
@@ -752,11 +705,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '8302724c0882c344b69629016840330c2a737f19', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '631f158f0188166a1abd844671d344f1ab998771', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '666803745ddfec9071bb67fc07fceae25ec7727f', id: helperId, class: {
+            } }, h("slot", { key: '34c20eb4db47adc67acbfa82fb9cdc4d00570dff', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '20accfd7501265ef8bb4472984950af150967292', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '184197b19327dc1f41cf4deff322516c8a8e2016', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'a120a822d279caa9a4c9371de8777e77625b7486', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'd981559018ad6f969a2292e1520db0fa1fe66623', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -788,7 +741,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "disabled": {
@@ -807,7 +760,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
@@ -827,7 +780,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "helper"
             },
             "label": {
@@ -846,7 +799,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "labelPosition": {
@@ -865,7 +818,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label-position"
             },
             "modeVariant": {
@@ -884,7 +837,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             },
@@ -904,7 +857,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "open-direction",
                 "defaultValue": "'auto'"
             },
@@ -924,7 +877,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "placeholder"
             },
             "size": {
@@ -943,7 +896,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'lg'"
             },
@@ -963,7 +916,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "animation",
                 "defaultValue": "'slide'"
             },
@@ -983,7 +936,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "error",
                 "defaultValue": "false"
             },
@@ -1003,7 +956,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "multiselect",
                 "defaultValue": "false"
             },
@@ -1023,7 +976,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "filter",
                 "defaultValue": "false"
             },
@@ -1043,7 +996,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "normalize-text",
                 "defaultValue": "true"
             },
@@ -1063,7 +1016,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "no-result-text",
                 "defaultValue": "'No result'"
             },
@@ -1083,7 +1036,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "default-value"
             },
             "value": {
@@ -1122,7 +1075,7 @@ export class TdsDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             }
         };

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

@@ -42,12 +42,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: '7901705ee2dc040052e2f99813f8b0e8faf37530', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'ca98dcf8fbdf2556a9fd61b233a9a84bc3f6f9cc', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: '2605313d24ee6eb94a1cfa84854827fd1292d379', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '5bf77ad82b1ed690e17fb9b4ab5b3110224b1392', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
             (this.isMobile ? (h("button", { onClick: () => {
                     this.open = !this.open;
-                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: 'dfa738d7e93518c7aa29e322b575a4c418010e6a', "aria-label": this.tdsListAriaLabel }, h("div", { key: '6a3a9bfa388a342609187ca5437ea1e572a0b62f', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+                }, class: `footer-top-title-button ${this.open ? 'expanded' : 'closed'}` }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText, h("tds-icon", { name: "chevron_down", size: "20px", "aria-hidden": "true" }))) : (h("div", { class: "footer-top-title" }, hasTitleSlot ? h("slot", { name: "title" }) : this.titleText))), h("nav", { key: '9191647967d238ce7d67bd1a6437ab282be60e7a', "aria-label": this.tdsListAriaLabel }, h("div", { key: '105c4960663852dc4a6e637e4b10fde5936d616e', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '3dbf13f27f3bd37ba5fc589045b329ee034a37d3' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '00546ee8a4e85a33e6f7696f50a59a3ecd53d80e' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -79,7 +79,7 @@ export class TdsFooterGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "title-text"
             },
             "tdsListAriaLabel": {
@@ -98,7 +98,7 @@ export class TdsFooterGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-list-aria-label"
             }
         };

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

@@ -17,9 +17,9 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: '48864143f8e7c122b60c5f95ac087f81da23cbd6', class: {
+        return (h(Host, { key: '45c3eab02748591e5751d4c23d6dcc9ca7541aca', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'aa7efca2b32ea0bd81719eff1730e7ab0a5b69c9' }, usesTopSlot && h("slot", { key: '662e7f205b7ee9bf5202441f45835da44da01ffe', name: "top" }), h("div", { key: '42ba2e344380a87d4dbf3dc90b214a99d10b9dfe', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'b6b62659aa80fe86f7240b4e2a7187f81a0ae3d7', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '5f10f1f47de58d4ce142d720e2ab924c9935afcd', name: "start" }), usesEndSlot && h("slot", { key: '88165d1b0925e31e302eaec0e2fcd795c5e4ece1', name: "end" }))), h("div", { key: '99e987a96dbb762725b78b647164627f4abe7790', class: "footer-main-bottom" }, h("small", { key: 'f24bfbe5b9733c1effc45608ed6fc4c10d3c9631', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '2947b9f5c59eb5315d1787a3e13203a0359ec8af', class: "brand" }, h("p", { key: '83aa6191d31573002c275d0042f5871449ce4fe5' }, "Scania")))))));
+            } }, h("footer", { key: 'a5c338868f8201014d0f1eaecf4db3b5552c6a8d' }, usesTopSlot && h("slot", { key: '07257d9529a6af504715b69d33741052614a1737', name: "top" }), h("div", { key: 'a1f11fbceefb0442cd61858f0ca8ed5a7c0aeb81', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'dd8bff6c7f4171a7c9d46d7f5dabcf2a31697dc7', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '39f28defd591fbb6863d86225fca3cff09ec94cb', name: "start" }), usesEndSlot && h("slot", { key: '344bd6c80538d46a22b5d10f09e5cf4633019ef9', name: "end" }))), h("div", { key: '8896f0f1c3031b98b1d1b1d2cedd2cb35e003dff', class: "footer-main-bottom" }, h("small", { key: '972571431d7ebeb07eaab043d970528c352df32d', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '5b93f4ab6f07dd3bdb4cd05429b729426e11c103', class: "brand" }, h("p", { key: '9537baabeba256b7774af6f3e135ecdc127a8993' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,7 @@ export class TdsFooter {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "mode-variant",
                 "defaultValue": "null"
             }

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

@@ -48,13 +48,13 @@ export class TdsHeaderDropdown {
         }
     }
     render() {
-        return (h(Host, { key: '81c477e45d3f6a4614c3928797f900fb9b64ffcc' }, h("div", { key: '2b4a3509254a827fa6d300793b699e57ac36cd9a', class: {
+        return (h(Host, { key: '1176c57c972add57be5c2529dfb6cb83d3bed22b' }, h("div", { key: '6ad3f10940083968fff1a4b9b01f66b1165329ba', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '4847e06a7b5fdf61642234f7179b01103e34fb38', class: "button", active: this.open, selected: this.selected }, h("button", { key: '8cc7fed2a05c68f0026ef7d4c17400d85d6a40af', ref: (el) => {
+            } }, h("tds-header-item", { key: '5c8024b943d585a85fc6a1c2f42f9e574729d79e', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'ed48b89c6eb04cf7f2685e2f69f7eea37822e8f9', 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: '8254bfb1f48d193bc0c58363df96fad41b61aad6', name: "icon" }), this.label, h("slot", { key: '5722ecd4748ad029b5b803bb4ff731cca119fc7b', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'c0c9c51b4705226891b21383ce27c0680113af7c', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '52e127dbe4eef7082e62f3421d338fa0b44ab919', 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: '3a79e52d868cd2a12ee5a6c46c574b596e5c257f', name: "icon" }), this.label, h("slot", { key: '6490c20d77794e6bda911a28eb01bba6539a6946', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: '4ccd9df2499f81a3790fd207686c9d763950ca18', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Dropdown icon" })))), this.buttonEl && (h("tds-popover-canvas", { key: '67a72bb46b5d87424dcd883e770a5f0a06d09edd', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
@@ -93,7 +93,7 @@ export class TdsHeaderDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "noDropdownIcon": {
@@ -112,7 +112,7 @@ export class TdsHeaderDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "no-dropdown-icon",
                 "defaultValue": "false"
             },
@@ -132,7 +132,7 @@ export class TdsHeaderDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "selected",
                 "defaultValue": "false"
             },
@@ -152,7 +152,7 @@ export class TdsHeaderDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "tds-aria-label"
             }
         };