@scania/tegel 1.40.0-stencil-core-4.38.1-beta.0 → 1.40.0-ts-strict-mode-beta.0

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

@@ -14,31 +14,6 @@ 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) {
@@ -69,7 +44,7 @@ export class TdsDropdown {
         };
         this.getSelectedChildrenLabels = () => {
             var _a;
-            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => element.textContent.trim());
+            return (_a = this.getSelectedChildren()) === null || _a === void 0 ? void 0 : _a.map((element) => { var _a; return (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(); });
         };
         this.getValue = () => {
             const labels = this.getSelectedChildrenLabels();
@@ -100,6 +75,7 @@ export class TdsDropdown {
             return this.openDirection;
         };
         this.handleToggleOpen = () => {
+            var _a;
             if (!this.disabled) {
                 this.open = !this.open;
                 if (this.open) {
@@ -107,7 +83,7 @@ export class TdsDropdown {
                         this.focusInputElement();
                     }
                     else {
-                        const button = this.host.shadowRoot.querySelector('button');
+                        const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
                         if (button) {
                             button.focus();
                         }
@@ -135,7 +111,8 @@ export class TdsDropdown {
             }
             else {
                 this.filterResult = children.filter((element) => {
-                    if (!this.normalizeString(element.textContent)
+                    var _a;
+                    if (!this.normalizeString((_a = element === null || element === void 0 ? void 0 : element.textContent) !== null && _a !== void 0 ? _a : '')
                         .toLowerCase()
                         .includes(this.normalizeString(query).toLowerCase())) {
                         element.setAttribute('hidden', '');
@@ -182,6 +159,31 @@ 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 = [];
+        this.filterQuery = '';
     }
     handleValueChange(newValue) {
         // Normalize to array
@@ -299,10 +301,13 @@ export class TdsDropdown {
             normalizedValue = [convertToString(value)];
         }
         this.updateDropdownStateFromUser(normalizedValue);
-        return this.getSelectedChildren().map((element) => ({
-            value: element.value,
-            label: element.textContent.trim(),
-        }));
+        return this.getSelectedChildren().map((element) => {
+            var _a;
+            return ({
+                value: element.value,
+                label: (_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim(),
+            });
+        });
     }
     async reset() {
         this.updateDropdownStateFromUser([]);
@@ -313,13 +318,14 @@ export class TdsDropdown {
     }
     /** Method that forces focus on the input element. */
     async focusElement() {
+        var _a;
         if (this.filter) {
             // For filter mode, focus the input element
             this.focusInputElement();
         }
         else {
             // For non-filter mode, focus the button element
-            const button = this.host.shadowRoot.querySelector('button');
+            const button = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
             if (button) {
                 button.focus();
             }
@@ -367,7 +373,7 @@ export class TdsDropdown {
         }
     }
     async onKeyDown(event) {
-        var _a;
+        var _a, _b;
         // Get the active element
         const { activeElement } = document;
         if (!activeElement) {
@@ -380,8 +386,11 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? children.findIndex((element) => element === activeElement.nextElementSibling)
                 : 0;
-            const elementIndex = findNextFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            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
@@ -389,8 +398,11 @@ export class TdsDropdown {
             const startingIndex = activeElement.nextElementSibling
                 ? this.getChildren().findIndex((element) => element === activeElement.previousElementSibling)
                 : 0;
-            const elementIndex = findPreviousFocusableElement(children, startingIndex);
-            children[elementIndex].focus();
+            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;
@@ -399,7 +411,7 @@ export class TdsDropdown {
                 (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                const button = this.host.shadowRoot.querySelector('button');
+                const button = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button');
                 button === null || button === void 0 ? void 0 : button.focus();
             }
         }
@@ -485,9 +497,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: '8145c7b222a850157de5f328974f5c70b126b9e4', class: {
+        return (h(Host, { key: '20b2b8e16e86f66e735870c142caae96094e8a67', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'af3ad647c3c5bbb86f12033821020a4ed484d9e1', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '099777e28368c78c9eb05945328899334c674865', class: {
+            } }, this.label && this.labelPosition === 'outside' && (h("div", { key: '151a7528da2411eb549ba55b00234609524d21ef', id: labelId, class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'b74809f85659d8b59fda7e26cc6ce7d25c1683c9', class: {
                 'dropdown-select': true,
                 [this.size]: true,
                 'disabled': this.disabled,
@@ -531,22 +543,23 @@ 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: 'f5427c41c1abe1c84164a030e69800fd48911c73', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
-                this.dropdownList = 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: '47278e9797420ea5f5c9c5ea4ef327386b087b53', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                if (element)
+                    this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
-                'label-outside': this.label && this.labelPosition === 'outside',
+                'label-outside': !!(this.label && this.labelPosition === 'outside'),
                 'open': this.open,
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, 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: {
+            } }, h("slot", { key: 'b50453420be7803742bde1a3bc5ac3274bf61478', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '979d8b7224f9d845a3aa6364f913fdf22bf5ddf9', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a471701f913ef80a5d7d0875e270c32ebaf236c8', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'bab7ba6449cb7cd62a149340f6de1fe13cfd49de', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: '294692745fec61636576c1f8256050abf1f57913', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -576,10 +589,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Name for the Dropdowns input element."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
+                "attribute": "name",
+                "reflect": false
             },
             "disabled": {
                 "type": "boolean",
@@ -595,10 +606,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in a disabled state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "disabled",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "helper": {
@@ -615,10 +624,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Helper text for the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "helper"
+                "attribute": "helper",
+                "reflect": false
             },
             "label": {
                 "type": "string",
@@ -634,10 +641,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text for the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label"
+                "attribute": "label",
+                "reflect": false
             },
             "labelPosition": {
                 "type": "string",
@@ -653,17 +658,15 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Label text position"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label-position"
+                "attribute": "label-position",
+                "reflect": false
             },
             "modeVariant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary'",
-                    "resolved": "\"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | null",
+                    "resolved": "\"primary\" | \"secondary\" | null",
                     "references": {}
                 },
                 "required": false,
@@ -672,10 +675,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Mode variant of the component, based on current mode."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode-variant",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "openDirection": {
@@ -692,10 +693,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The direction the Dropdown should open, auto if not specified."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "open-direction",
+                "reflect": false,
                 "defaultValue": "'auto'"
             },
             "placeholder": {
@@ -712,10 +711,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Placeholder text for the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder"
+                "attribute": "placeholder",
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -731,10 +728,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "The size of the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "'lg'"
             },
             "animation": {
@@ -751,10 +746,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "animation",
+                "reflect": false,
                 "defaultValue": "'slide'"
             },
             "error": {
@@ -771,10 +764,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Sets the Dropdown in an error state"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "error",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "multiselect": {
@@ -791,10 +782,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables multiselect in the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "multiselect",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "filter": {
@@ -811,10 +800,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Enables filtration in the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "filter",
+                "reflect": false,
                 "defaultValue": "false"
             },
             "normalizeText": {
@@ -831,10 +818,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Normalizes input text for fuzzier search"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "normalize-text",
+                "reflect": false,
                 "defaultValue": "true"
             },
             "noResultText": {
@@ -842,7 +827,7 @@ export class TdsDropdown {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -851,10 +836,8 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "no-result-text",
+                "reflect": false,
                 "defaultValue": "'No result'"
             },
             "defaultValue": {
@@ -871,17 +854,15 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Default value selected in the Dropdown."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "default-value"
+                "attribute": "default-value",
+                "reflect": false
             },
             "value": {
                 "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | number | (string | number)[]",
-                    "resolved": "(string | number)[] | number | string",
+                    "original": "string | number | (string | number)[] | null",
+                    "resolved": "(string | number)[] | null | number | string",
                     "references": {}
                 },
                 "required": false,
@@ -890,10 +871,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "value",
+                "reflect": false,
                 "defaultValue": "null"
             },
             "tdsAriaLabel": {
@@ -910,10 +889,8 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Defines aria-label attribute for input"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-aria-label"
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }
@@ -940,8 +917,8 @@ export class TdsDropdown {
                     "text": "Change event for the Dropdown."
                 },
                 "complexType": {
-                    "original": "{\n    name: string;\n    value: string;\n  }",
-                    "resolved": "{ name: string; value: string; }",
+                    "original": "{\n    name: string;\n    value: string | null;\n  }",
+                    "resolved": "{ name: string; value: string | null; }",
                     "references": {}
                 }
             }, {
@@ -1010,14 +987,14 @@ export class TdsDropdown {
         return {
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string; }[]>",
+                    "signature": "(value: string | number | string[] | number[], label?: string) => Promise<{ value: string | number; label: string | undefined; }[]>",
                     "parameters": [{
                             "name": "value",
                             "type": "string | number | string[] | number[]",
                             "docs": ""
                         }, {
                             "name": "label",
-                            "type": "string",
+                            "type": "string | undefined",
                             "docs": ""
                         }],
                     "references": {
@@ -1030,7 +1007,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string; }[]>"
+                    "return": "Promise<{ value: string | number; label: string | undefined; }[]>"
                 },
                 "docs": {
                     "text": "Method for setting the selected value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",

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

@@ -27,9 +27,6 @@
 :host button.footer-top-title-button ::slotted(*) {
   margin: 0;
 }
-:host button.footer-top-title-button.expanded {
-  border-bottom: none;
-}
 :host button.footer-top-title-button.expanded tds-icon {
   transform: rotateZ(180deg);
 }
@@ -53,7 +50,7 @@
   padding: 0;
   margin: 0;
   display: flex;
-  gap: 8px;
+  gap: 12px;
 }
 :host [role=list].start, :host [role=list].end {
   gap: 24px;

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

@@ -6,22 +6,25 @@ 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;
     }
     connectedCallback() {
+        var _a, _b;
         this.updateIsMobile();
-        this.topPartGroup = this.host.parentElement.slot === 'top';
+        this.topPartGroup = ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
         if (!this.topPartGroup) {
-            this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
+            this.slotPosition = ((_b = this.host.parentElement) === null || _b === void 0 ? void 0 : _b.slot) === 'end' ? 'end' : 'start';
         }
         if (!this.tdsListAriaLabel) {
             console.warn('Tegel Footer Group component: missing tdsListAriaLabel prop');
@@ -39,12 +42,12 @@ export class TdsFooterGroup {
     }
     render() {
         const hasTitleSlot = hasSlot('title', this.host);
-        return (h(Host, { key: 'ae7d97292dba7bf2054e1833e436dbabec499ed7', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: 'e94d8a8f5cdab4eaa1ec72d9d8da2cf3634ddb86', class: this.isMobile ? 'mobile-view' : '' }, this.topPartGroup &&
+        return (h(Host, { key: '03334686d168738c5f4c8e24af3683e667fab531', "aria-expanded": this.open ? 'true' : 'false' }, h("div", { key: '106158a95e6c699615280250d60d629bed56d442', 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: 'ab7829753c2e2e80b877470e92f1947d24aefe38', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'e402e251eff4b82e2cfffdb7edc9db3e1c537325', 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: 'ee127c2b7951a4e5f4f541b10de603db4554c0d0', "aria-label": this.tdsListAriaLabel }, h("div", { key: 'f513ab58811b6f2f7ae9c9ed4986367c9169e030', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'd00e9acc84542e2694b6a9aa4b481a2263f79e4b' }))))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: 'bc584cbb0542907628ebf05c316f53372bfde08a' }))))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }
@@ -74,10 +77,8 @@ export class TdsFooterGroup {
                     "tags": [],
                     "text": "Title text for the link group, only valid on top part of Footer."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "title-text"
+                "attribute": "title-text",
+                "reflect": false
             },
             "tdsListAriaLabel": {
                 "type": "string",
@@ -93,10 +94,8 @@ 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."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tds-list-aria-label"
+                "attribute": "tds-list-aria-label",
+                "reflect": false
             }
         };
     }

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

@@ -41,10 +41,10 @@
     padding: 19px 40px;
     font-weight: normal;
   }
-  :host([role=listitem]) div.top-part-child ::slotted(a:hover),
-  :host([role=listitem]) div.top-part-child ::slotted(button:hover) {
+  :host([role=listitem]) div.top-part-child ::slotted(a:active),
+  :host([role=listitem]) div.top-part-child ::slotted(button:active) {
     text-decoration: underline;
-    background-color: var(--tds-footer-top-links-background-hover);
+    background-color: var(--tds-footer-top-links-background-active);
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {

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

@@ -7,10 +7,14 @@ export class TdsFooterItem {
         this.parentIsTopPart = false;
     }
     connectedCallback() {
-        this.parentIsTopPart = this.host.closest('tds-footer-group').parentElement.slot === 'top';
+        var _a;
+        const closestGroup = this.host.closest('tds-footer-group');
+        if (closestGroup) {
+            this.parentIsTopPart = ((_a = closestGroup.parentElement) === null || _a === void 0 ? void 0 : _a.slot) === 'top';
+        }
     }
     render() {
-        return (h(Host, { key: 'cc3e94cd085ad62a1933a948014d06da55ffeb35', role: "listitem" }, h("div", { key: '602c0f0ede8f40bfc06e3899adb0afa7941602e3', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '2770b612c929deb25895455114d2a6e3a45957a4' }))));
+        return (h(Host, { key: 'fe1aff1acd336f2d1b66b87a9666c1ea4e3f0016', role: "listitem" }, h("div", { key: 'c180f66951842e69f6b51e83151f5962ff410794', class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", { key: '160d1d6054ed399f8597bcdf98524a65f77c6310' }))));
     }
     static get is() { return "tds-footer-item"; }
     static get encapsulation() { return "shadow"; }