@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -14,6 +14,32 @@ function hasValueChanged(newValue, currentValue) {
  */
 export class TdsDropdown {
     constructor() {
+        /** Sets the Dropdown in a disabled state */
+        this.disabled = false;
+        /** Mode variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** The direction the Dropdown should open, auto if not specified. */
+        this.openDirection = 'auto';
+        /** The size of the Dropdown. */
+        this.size = 'lg';
+        this.animation = 'slide';
+        /** Sets the Dropdown in an error state */
+        this.error = false;
+        /** Enables multiselect in the Dropdown. */
+        this.multiselect = false;
+        /** Enables filtration in the Dropdown. */
+        this.filter = false;
+        /** Normalizes input text for fuzzier search */
+        this.normalizeText = true;
+        /** Text that is displayed if filter is used and there are no options that matches the search.
+         * Setting it to an empty string disables message from showing up. */
+        this.noResultText = 'No result';
+        /** Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number. */
+        this.value = null;
+        this.open = false;
+        this.selectedOptions = [];
+        this.filterQuery = '';
+        this.hasFocus = false;
         this.setDefaultOption = () => {
             if (this.internalDefaultValue) {
                 // Convert the internal default value to an array if it's not already
@@ -96,6 +122,7 @@ export class TdsDropdown {
         this.handleFilter = (event) => {
             this.tdsInput.emit(event);
             const query = event.target.value.toLowerCase();
+            this.filterQuery = query;
             /* Check if the query is empty, and if so, show all options */
             const children = this.getChildren();
             if (query === '') {
@@ -121,26 +148,33 @@ export class TdsDropdown {
             }
         };
         this.handleFilterReset = () => {
-            this.reset();
+            // only reset selected values when filterquery is blank
+            if (!this.filterQuery.length) {
+                this.reset();
+            }
             this.inputElement.value = '';
             this.handleFilter({ target: { value: '' } });
             this.inputElement.focus();
             // Add this line to ensure internal value is cleared
             this.internalValue = '';
         };
-        this.handleFocus = (event) => {
+        this.handleFocus = () => {
             this.open = true;
             this.filterFocus = true;
-            if (this.multiselect && this.inputElement) {
+            if (this.inputElement) {
                 this.inputElement.value = '';
             }
-            this.tdsFocus.emit(event);
+            // Focus event is now handled by focusin listener
             if (this.filter) {
                 this.handleFilter({ target: { value: '' } });
             }
         };
-        this.handleBlur = (event) => {
-            this.tdsBlur.emit(event);
+        this.handleBlur = () => {
+            // Handle internal state changes when component loses focus
+            this.filterFocus = false;
+            if (this.inputElement) {
+                this.inputElement.value = this.getValue();
+            }
         };
         this.resetInput = () => {
             const inputEl = this.host.querySelector('input');
@@ -148,30 +182,6 @@ export class TdsDropdown {
                 this.reset();
             }
         };
-        this.name = undefined;
-        this.disabled = false;
-        this.helper = undefined;
-        this.label = undefined;
-        this.labelPosition = undefined;
-        this.modeVariant = null;
-        this.openDirection = 'auto';
-        this.placeholder = undefined;
-        this.size = 'lg';
-        this.animation = 'slide';
-        this.error = false;
-        this.multiselect = false;
-        this.filter = false;
-        this.normalizeText = true;
-        this.noResultText = 'No result';
-        this.defaultValue = undefined;
-        this.value = null;
-        this.tdsAriaLabel = undefined;
-        this.open = false;
-        this.internalValue = undefined;
-        this.filterResult = undefined;
-        this.filterFocus = undefined;
-        this.internalDefaultValue = undefined;
-        this.selectedOptions = [];
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -315,7 +325,7 @@ export class TdsDropdown {
             }
         }
         // Always trigger the focus event to open the dropdown
-        this.handleFocus({});
+        this.handleFocus();
     }
     /** Method for closing the Dropdown. */
     async close() {
@@ -337,6 +347,25 @@ export class TdsDropdown {
             }
         }
     }
+    onFocusIn(event) {
+        // Check if the focus is within this dropdown component
+        if (this.host.contains(event.target)) {
+            if (!this.hasFocus) {
+                this.hasFocus = true;
+                this.tdsFocus.emit(event);
+            }
+        }
+    }
+    onFocusOut(event) {
+        // Only emit blur if focus is actually leaving the entire dropdown component
+        const relatedTarget = event.relatedTarget;
+        // If relatedTarget is null (focus going to body/window) or outside the component, emit blur
+        if (this.hasFocus && (!relatedTarget || !this.host.contains(relatedTarget))) {
+            this.hasFocus = false;
+            this.handleBlur();
+            this.tdsBlur.emit(event);
+        }
+    }
     async onKeyDown(event) {
         var _a;
         // Get the active element
@@ -456,9 +485,9 @@ export class TdsDropdown {
         // Generate unique IDs for associating labels and helpers with the input/button
         const labelId = this.label ? `dropdown-label-${this.name || generateUniqueId()}` : undefined;
         const helperId = this.helper ? `dropdown-helper-${this.name || generateUniqueId()}` : undefined;
-        return (h(Host, { key: '69cdc96b6983b9556b4a9133ef8a0d2fa1e9e18e', class: {
+        return (h(Host, { key: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '1cc3f825bc81ca34af7bbe845bd900531f724172', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '213f3149de4b9bc4c147ab658d6d5199d3360181', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -475,13 +504,7 @@ export class TdsDropdown {
             // eslint-disable-next-line no-return-assign
             ref: (inputEl) => (this.inputElement = inputEl), class: {
                 placeholder: this.labelPosition === 'inside',
-            }, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? '' : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
-                this.filterFocus = false;
-                if (this.multiselect) {
-                    this.inputElement.value = this.getValue();
-                }
-                this.handleBlur(event);
-            }, onFocus: (event) => this.handleFocus(event), onKeyDown: (event) => {
+            }, type: "text", placeholder: this.filterFocus ? '' : this.placeholder, value: this.multiselect && this.filterFocus ? this.filterQuery : this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onFocus: () => this.handleFocus(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -508,7 +531,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), 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: 'af7815b0cb8b36e37278965094d5198a9ff5aba9', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), 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: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -519,11 +542,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: '736b82b5f716fa818c17ae161341bc6b131d9cf2', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'f1c1471cbec4a6dd8830a8540f54e142c559d539', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'aa138a349c073158785ae1177c0879604f6b8d90', id: helperId, class: {
+            } }, h("slot", { key: '2e83898eec11f669c3477d5600dce1178b5c4f36', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '0ff59cf47dbe302998ce72758b182e7565ddd210', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '3a60427fe8ca05d6bf4ba42f95bd0bc753f04ebd', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: '936a8bd7db8a0ed994d6827c26bbb6732420fea4', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -553,8 +576,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Name for the Dropdowns input element."
                 },
-                "attribute": "name",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
             },
             "disabled": {
                 "type": "boolean",
@@ -570,8 +595,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in a disabled state"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "helper": {
@@ -588,8 +615,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Helper text for the Dropdown."
                 },
-                "attribute": "helper",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper"
             },
             "label": {
                 "type": "string",
@@ -605,8 +634,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text for the Dropdown."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "labelPosition": {
                 "type": "string",
@@ -622,8 +653,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text position"
                 },
-                "attribute": "label-position",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-position"
             },
             "modeVariant": {
                 "type": "string",
@@ -639,8 +672,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "openDirection": {
@@ -657,8 +692,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The direction the Dropdown should open, auto if not specified."
                 },
-                "attribute": "open-direction",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open-direction",
                 "defaultValue": "'auto'"
             },
             "placeholder": {
@@ -675,8 +712,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Placeholder text for the Dropdown."
                 },
-                "attribute": "placeholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
             },
             "size": {
                 "type": "string",
@@ -692,8 +731,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The size of the Dropdown."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "animation": {
@@ -710,8 +751,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animation",
                 "defaultValue": "'slide'"
             },
             "error": {
@@ -728,8 +771,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in an error state"
                 },
-                "attribute": "error",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "error",
                 "defaultValue": "false"
             },
             "multiselect": {
@@ -746,8 +791,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables multiselect in the Dropdown."
                 },
-                "attribute": "multiselect",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "multiselect",
                 "defaultValue": "false"
             },
             "filter": {
@@ -764,8 +811,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables filtration in the Dropdown."
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "filter",
                 "defaultValue": "false"
             },
             "normalizeText": {
@@ -782,8 +831,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Normalizes input text for fuzzier search"
                 },
-                "attribute": "normalize-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "normalize-text",
                 "defaultValue": "true"
             },
             "noResultText": {
@@ -800,8 +851,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Text that is displayed if filter is used and there are no options that matches the search.\nSetting it to an empty string disables message from showing up."
                 },
-                "attribute": "no-result-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-result-text",
                 "defaultValue": "'No result'"
             },
             "defaultValue": {
@@ -818,8 +871,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Default value selected in the Dropdown."
                 },
-                "attribute": "default-value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
             },
             "value": {
                 "type": "any",
@@ -835,8 +890,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number."
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "null"
             },
             "tdsAriaLabel": {
@@ -853,8 +910,10 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Defines aria-label attribute for input"
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }
@@ -865,7 +924,8 @@ export class TdsDropdown {
             "filterResult": {},
             "filterFocus": {},
             "internalDefaultValue": {},
-            "selectedOptions": {}
+            "selectedOptions": {},
+            "filterQuery": {}
         };
     }
     static get events() {
@@ -1112,6 +1172,18 @@ export class TdsDropdown {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "focusin",
+                "method": "onFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "onKeyDown",

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

@@ -6,15 +6,13 @@ import hasSlot from "../../../utils/hasSlot";
  */
 export class TdsFooterGroup {
     constructor() {
+        /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */
+        this.open = false;
         /** If the group is placed in the main part of the Footer,
          * it can have either start or end as a slot position otherwise undefined. */
         this.slotPosition = null;
         /** Indicates if a group is part of the top part of the Footer. */
         this.topPartGroup = false;
-        this.titleText = undefined;
-        this.tdsListAriaLabel = undefined;
-        this.open = false;
-        this.isMobile = undefined;
     }
     updateIsMobile() {
         this.isMobile = window.innerWidth <= 992;
@@ -41,12 +39,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: 'ee2e585154e56bba76c1e30aff640bda58dd401e', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'd29f4a28742993315e7514516fa057def61f0cf6', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: 'ae7d97292dba7bf2054e1833e436dbabec499ed7', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'e94d8a8f5cdab4eaa1ec72d9d8da2cf3634ddb86', 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: 'e6e37cfa8d99c76b551c95140cca24829fd74244', "aria-label": this.tdsListAriaLabel }, h("div", { key: '680ada977f2d1b82e9dda9250e4423cc4040c7c4', 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: 'ab7829753c2e2e80b877470e92f1947d24aefe38', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'e402e251eff4b82e2cfffdb7edc9db3e1c537325', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '6748ed2033c34e3f34a11a391713413ad28fc7dc' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'd00e9acc84542e2694b6a9aa4b481a2263f79e4b' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -76,8 +74,10 @@ export class TdsFooterGroup {
                     "tags": [],
                     "text": "Title text for the link group, only valid on top part of Footer."
                 },
-                "attribute": "title-text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title-text"
             },
             "tdsListAriaLabel": {
                 "type": "string",
@@ -93,8 +93,10 @@ export class TdsFooterGroup {
                     "tags": [],
                     "text": "Value to be used for the aria-label attribute for the nav element wrapping the list. Should be unique for accessibility."
                 },
-                "attribute": "tds-list-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-list-aria-label"
             }
         };
     }

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

@@ -10,7 +10,7 @@ export class TdsFooterItem {
         this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
     }
     render() {
-        return (h(Host, { key: '845de26cafaefdf0e5ceabe57ba7bbce51eed038', role: "listitem" }, h("div", { key: 'de201fb4965740a2c0bebbea790651487e082637', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: 'eca7ee20a2a4b1e9e9947e6566046c9031198569' }))));
+        return (h(Host, { key: 'cc3e94cd085ad62a1933a948014d06da55ffeb35', role: "listitem" }, h("div", { key: '602c0f0ede8f40bfc06e3899adb0afa7941602e3', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '2770b612c929deb25895455114d2a6e3a45957a4' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,17 +8,18 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsFooter {
     constructor() {
-        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: 'f9a9a196e8f9b49545edbe7e37ef5c7e6108d032', class: {
+        return (h(Host, { key: 'e3dee2f5ac2caebf6a9585b81cdbdda442562c2b', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
-            } }, h("footer", { key: 'b594e0548fb46ef6b5f829296eb616748b647440' }, usesTopSlot && h("slot", { key: '6127b1d29152c1023820d5220c7453cce76b9e5d', name: "top" }), h("div", { key: 'b0f918488b8cf27f19d8410ab5d05e39478dffd5', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '63aae985dab88e5f31f4bd271d89dd5cf66e521c', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '91c21420d33cb9dd1190324a73b095fdcc655174', name: "start" }), usesEndSlot && h("slot", { key: '672e6d1b2be9bf0d4223662e58d2f92d1e914fb2', name: "end" }))), h("div", { key: '28dd4db6c1ea0de52dfe3c0f0ea19541afdeecc6', class: "footer-main-bottom" }, h("small", { key: '0e760565515a6a57bf7948647bc0c526f70386f8', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: 'ef7647abe740819c88ed202412beb2b7cc0d18fb', class: "brand" }, h("p", { key: 'ab9bf46b2fca845a5d6c365fe3fd9f0b456ba819' }, "Scania")))))));
+            } }, h("footer", { key: 'a243b3b440fa8cffc51bea0def2c0bd07288cf96' }, usesTopSlot && h("slot", { key: 'db60db3d12a0c34fdb9db66be986d541633e1d9b', name: "top" }), h("div", { key: '1d2881f8acc0789f8769604d72ebdef99961e380', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: 'c8a1cb2639700b51b39355163b0e8b26d1f82855', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'e343837536cc838b2382d946b8703821e627e6d1', name: "start" }), usesEndSlot && h("slot", { key: 'a181a6656e88f36b8d724d8ccdab33804bf51f0d', name: "end" }))), h("div", { key: '64178cb80d7e0b38d2d5f8a625c222772fd64741', class: "footer-main-bottom" }, h("small", { key: 'c9b3c7337d031cf4a18d5fad56938d490a0dac1e', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '926e8672dd9d00ae5d0c951d506dc506ea698ed2', class: "brand" }, h("p", { key: '4e110423f7b958b3d427d88016ab18d02c6c8edf' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -48,8 +49,10 @@ export class TdsFooter {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             }
         };

package/dist/collection/components/header/core-header-item/core-header-item.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class TdsCoreHeaderItem {
     render() {
-        return (h(Host, { key: '61b64a52364893a5b67de5797ae49b3c238086ac' }, h("div", { key: '29a46213b10ea291137b2fa7e2f28594177da0fb', class: "item" }, h("slot", { key: 'a844cb74962112475d6da8d1598f0fa7e1fa0b64' }))));
+        return (h(Host, { key: 'cdc1e1712659f82b9bbefd67977de93963dbc68e' }, h("div", { key: '1c39a69aa967c64941be3507d7e88f92cea58623', class: "item" }, h("slot", { key: '62576106bdb13d983e5a415421522bbcddd348bf' }))));
     }
     static get is() { return "tds-core-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class TdsHeaderBrandSymbol {
         if (!aTag.hasAttribute('aria-label')) {
             console.warn('Tegel Header Brand Symbol component: missing aria-label attribute for <a> tag inside slot');
         }
-        return (h(Host, { key: 'c7b01660c7757298ff64d90b19df0cc45ebb62fc' }, h("tds-header-item", { key: '2e5f25c5b22a4779146ad6b8c76a8ac625d616dc' }, h("slot", { key: '110c74312136176f396af1010731a886d2d986aa' }))));
+        return (h(Host, { key: 'b3f7cf4d264f2046844814a80f7b9b6a920b1a1e' }, h("tds-header-item", { key: '0be33ffe57b94442fac4f1e686f87fb1e2f1911d' }, h("slot", { key: '3f7f636bc5f7c1b2ee009c774337d0b41c45e477' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,4 +56,9 @@ body {
 :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;
 }