@scania/tegel 1.8.0 → 1.8.1

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

@@ -8,29 +8,41 @@ import appendHiddenInput from "../../utils/appendHiddenInput";
 export class TdsDropdown {
     constructor() {
         this.setDefaultOption = () => {
-            Array.from(this.host.children)
-                .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
-                .forEach((element) => {
-                if (this.multiselect) {
-                    this.defaultValue.split(',').forEach((value) => {
-                        if (value === element.value) {
-                            element.setSelected(true);
-                            this.value = this.value ? [...this.value, element.value] : [element.value];
-                        }
-                    });
-                }
-                else {
-                    if (this.defaultValue === element.value) {
-                        element.setSelected(true);
-                        this.value = [element.value];
+            // Ensure this.host.children is not empty
+            if (this.host.children.length === 0) {
+                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
+                return;
+            }
+            if (this.defaultValue) {
+                const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
+                let matched = false;
+                children.forEach((element) => {
+                    if (this.multiselect) {
+                        this.defaultValue.split(',').forEach((value) => {
+                            if (value === element.value) {
+                                element.setSelected(true);
+                                this.value = this.value ? [...this.value, element.value] : [element.value];
+                                matched = true;
+                            }
+                        });
                     }
                     else {
-                        element.setSelected(false);
+                        if (this.defaultValue === element.value) {
+                            element.setSelected(true);
+                            this.value = [element.value];
+                            matched = true;
+                        }
+                        else {
+                            element.setSelected(false);
+                        }
                     }
+                    this.setValueAttribute();
+                    return element;
+                });
+                if (!matched) {
+                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
                 }
-                this.setValueAttribute();
-                return element;
-            });
+            }
         };
         /* Returns a list of all children that are tds-dropdown-option elements */
         this.getChildren = () => {
@@ -300,9 +312,11 @@ export class TdsDropdown {
         }
     }
     componentWillLoad() {
-        if (this.defaultValue) {
-            this.setDefaultOption();
-        }
+        this.setDefaultOption();
+    }
+    /** Method to handle slot changes */
+    handleSlotChange() {
+        this.setDefaultOption();
     }
     /** Method to check if we should normalize text */
     normalizeString(text) {
@@ -335,7 +349,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '062a04c9b529a7e30ca863ba53f757f288f4da10', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8f5b894804a3be375ba5091b7da004937dbcfe31', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '451edf7c5eaa096500d8d989bd9cddc60a5fd5d8', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c7e3d77ba79b6e135aa960bc8e56c2d41ae3ec2e', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -378,11 +392,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'a507589572614ae3ac4c99fb777394b0bc03729c', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'cd63a354addfbcbfb2bb355b1e053b93dd9d3864', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'b184e4c940125d51c9531bceadc8544cbd579c1c' }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '9a4feeed475bde225d19e01f17e4eadc292c6f41', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,6 +8,12 @@ import generateUniqueId from "../../../utils/generateUniqueId";
 export class TdsHeaderDropdown {
     constructor() {
         this.uuid = generateUniqueId();
+        this.handleSlottedItemClick = (event) => {
+            const eventSource = event.target.tagName.toLowerCase();
+            if (['a', 'button'].includes(eventSource)) {
+                this.open = false;
+            }
+        };
         this.label = undefined;
         this.noDropdownIcon = false;
         this.selected = false;
@@ -25,20 +31,20 @@ export class TdsHeaderDropdown {
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: 'cabebe721a79127441bddd0aa8ad1d9ff2ac9453' }, h("div", { key: 'f97c7f95f5c9a6382c3d3d48854b3cc9b2f51a8c', class: {
+        return (h(Host, { key: 'd72add7a12c105e83c0300dc4c6727775dfe10e5' }, h("div", { key: 'b323560bd8b13b6643eafca2ad9deb9bea53689e', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '070b482e30884f2cf096472966d19232e97def8b', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'c29ad0c7309b3680b909cd911ad947bd0d60cd3c', ref: (el) => {
+            } }, h("tds-header-item", { key: '48af537f7b05f31fcbcb0c0aae311d2ccd69819d', class: "button", active: this.open, selected: this.selected }, h("button", { key: '324b1965706b0a3413c9e8ddcc37345c387519cc', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: 'a955b0d40c1c3619e158b727ae70e266fe93a69c', name: "icon" }), this.label, h("slot", { key: '27195b2da32bbdf9f970c3b69355e3cc7efda11d', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: '56a3064075c135677f59e58c4be831c66230a7c2', name: "icon" }), this.label, h("slot", { key: '729e1901342405daf3655dac940310e64e6683f0', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
                         fallbackPlacements: [],
                     },
                 },
-            ] }, this.open ? h("slot", null) : null)))));
+            ] }, this.open ? (h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e) }, h("slot", null))) : null)))));
     }
     static get is() { return "tds-header-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,12 +19,8 @@ export class TdsHeaderLauncher {
         }
     }
     componentDidLoad() {
-        const slotElement = this.host.shadowRoot.querySelector('slot:not([name])');
-        const slottedElements = slotElement.assignedElements();
-        const hasListTypeMenu = slottedElements.some((element) => element.tagName.toLowerCase() === 'tds-header-launcher-list');
-        if (hasListTypeMenu) {
-            this.hasListTypeMenu = true;
-        }
+        const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
+        this.hasListTypeMenu = hasListTypeMenu;
     }
     toggleLauncher() {
         this.open = !this.open;
@@ -36,11 +32,11 @@ export class TdsHeaderLauncher {
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '3429e2f83f0eb01bd6e655b6fe1d8a77784b4f34' }, h("div", { key: '6c8522b99c3f7de3fd3f665366362c1035b9d9a2', class: {
+        return (h(Host, { key: '337abddb77f5d7b2ce7c1a8bcfe2dd5e60cc934c' }, h("div", { key: '3652f71bd52be2fcbae7bfde3dab0b0c1c0c5d56', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '926507bc5d95971a1172de1a1cefd89d47959546' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: 'ffae6f54b57dcc0c44fae751f9da1025512b8f4b' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/collection/components/popover-core/popover-core.js

@@ -1,7 +1,9 @@
 import { Host, h, } from "@stencil/core";
 import { createPopper } from "@popperjs/core";
+import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsPopoverCore {
     constructor() {
+        this.uuid = generateUniqueId();
         this.setIsShown = function setIsShown(isShown) {
             if (typeof isShown === 'function') {
                 this.isShown = isShown(this.isShown);
@@ -10,10 +12,10 @@ export class TdsPopoverCore {
                 this.isShown = isShown;
             }
             if (this.isShown) {
-                this.tdsShow.emit();
+                this.internalTdsShow.emit();
             }
             else {
-                this.tdsClose.emit();
+                this.internalTdsClose.emit();
             }
         }.bind(this);
         this.onClickTarget = function onClickTarget(event) {
@@ -51,6 +53,14 @@ export class TdsPopoverCore {
             }
         }
     }
+    onTdsShow(event) {
+        if (this.show === null) {
+            const target = event.target;
+            if (target.id !== `tds-popover-core-${this.uuid}`) {
+                this.setIsShown(false);
+            }
+        }
+    }
     /* To enable initial loading of a component if user controls show prop*/
     componentWillLoad() {
         this.setIsShown(this.show);
@@ -145,7 +155,7 @@ export class TdsPopoverCore {
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (h(Host, { key: '37933e24ca1b3ef534043364efe070074b934588', style: hostStyle }, h("slot", { key: 'fe4498e8b3cc2e3bd12f1080edea75b1d502e832' })));
+        return (h(Host, { key: '0d42974eadfea68c642b5d4a6e1206f2d41d79ea', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '7f44ef8ccc3b4e8028cc1c612fb9102bfa84ff39' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }
@@ -336,9 +346,9 @@ export class TdsPopoverCore {
     }
     static get events() {
         return [{
-                "method": "tdsShow",
+                "method": "internalTdsShow",
                 "name": "internalTdsShow",
-                "bubbles": false,
+                "bubbles": true,
                 "cancelable": false,
                 "composed": false,
                 "docs": {
@@ -354,7 +364,7 @@ export class TdsPopoverCore {
                     "references": {}
                 }
             }, {
-                "method": "tdsClose",
+                "method": "internalTdsClose",
                 "name": "internalTdsClose",
                 "bubbles": false,
                 "cancelable": false,
@@ -393,6 +403,12 @@ export class TdsPopoverCore {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "internalTdsShow",
+                "method": "onTdsShow",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/table/table-body-cell/table-body-cell.css

@@ -15,10 +15,6 @@
   box-sizing: border-box;
 }
 
-:host(.tds-table__body-cell--no-padding) {
-  padding: 0;
-}
-
 :host(.tds-table__body-cell--hover) {
   background-color: var(--tds-table-body-cell-background-hover);
 }

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -69,14 +69,25 @@ export class TdsTableBodyCell {
         }
     }
     render() {
-        return (h(Host, { key: '76284c19457074e04686323e0ae010a0a0511066', class: {
+        let paddingStyle = 'var(--tds-spacing-element-16)'; // Default padding
+        if (this.disablePadding) {
+            paddingStyle = '0';
+        }
+        else if (this.compactDesign) {
+            paddingStyle = 'var(--tds-spacing-element-8) var(--tds-spacing-element-16)';
+        }
+        const dynamicStyles = {
+            textAlign: this.textAlignState,
+            // Conditionally set padding style
+            padding: paddingStyle,
+        };
+        return (h(Host, { key: '56fe770734dd720139eb614489283e2ec81cc596', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-                'tds-table__body-cell--no-padding': this.disablePadding,
-            }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '41cfdbf142362f1dd298ed9f4c622775d543b64b' })));
+            }, style: dynamicStyles }, this.cellValue, h("slot", { key: '490a5caabb4a2ae94769875edb0743b474716e42' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -19,7 +19,7 @@
   box-sizing: border-box;
 }
 :host(.tds-table__header-cell) .tds-table__header-text {
-  padding: 0 16px;
+  padding: 8px 16px;
   margin: 0;
 }
 

package/dist/components/popover-core.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './generateUniqueId.js';
 
 var top = 'top';
 var bottom = 'bottom';
@@ -1795,8 +1796,9 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
     constructor() {
         super();
         this.__registerHost();
-        this.tdsShow = createEvent(this, "internalTdsShow", 0);
-        this.tdsClose = createEvent(this, "internalTdsClose", 0);
+        this.internalTdsShow = createEvent(this, "internalTdsShow", 4);
+        this.internalTdsClose = createEvent(this, "internalTdsClose", 0);
+        this.uuid = generateUniqueId();
         this.setIsShown = function setIsShown(isShown) {
             if (typeof isShown === 'function') {
                 this.isShown = isShown(this.isShown);
@@ -1805,10 +1807,10 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
                 this.isShown = isShown;
             }
             if (this.isShown) {
-                this.tdsShow.emit();
+                this.internalTdsShow.emit();
             }
             else {
-                this.tdsClose.emit();
+                this.internalTdsClose.emit();
             }
         }.bind(this);
         this.onClickTarget = function onClickTarget(event) {
@@ -1846,6 +1848,14 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
             }
         }
     }
+    onTdsShow(event) {
+        if (this.show === null) {
+            const target = event.target;
+            if (target.id !== `tds-popover-core-${this.uuid}`) {
+                this.setIsShown(false);
+            }
+        }
+    }
     /* To enable initial loading of a component if user controls show prop*/
     componentWillLoad() {
         this.setIsShown(this.show);
@@ -1940,7 +1950,7 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (h(Host, { key: '37933e24ca1b3ef534043364efe070074b934588', style: hostStyle }, h("slot", { key: 'fe4498e8b3cc2e3bd12f1080edea75b1d502e832' })));
+        return (h(Host, { key: '0d42974eadfea68c642b5d4a6e1206f2d41d79ea', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '7f44ef8ccc3b4e8028cc1c612fb9102bfa84ff39' })));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -1962,7 +1972,7 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
         "popperInstance": [32],
         "target": [32],
         "isShown": [32]
-    }, [[8, "click", "onAnyClick"]], {
+    }, [[8, "click", "onAnyClick"], [8, "internalTdsShow", "onTdsShow"]], {
         "show": ["onShowChange"],
         "referenceEl": ["onReferenceElChanged"],
         "trigger": ["onTriggerChanged"]

package/dist/components/tds-body-cell.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--no-padding){padding:0}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
+const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
 const TdsBodyCellStyle0 = tableBodyCellCss;
 
 const relevantTableProps = [
@@ -73,14 +73,25 @@ const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell
         }
     }
     render() {
-        return (h(Host, { key: '76284c19457074e04686323e0ae010a0a0511066', class: {
+        let paddingStyle = 'var(--tds-spacing-element-16)'; // Default padding
+        if (this.disablePadding) {
+            paddingStyle = '0';
+        }
+        else if (this.compactDesign) {
+            paddingStyle = 'var(--tds-spacing-element-8) var(--tds-spacing-element-16)';
+        }
+        const dynamicStyles = {
+            textAlign: this.textAlignState,
+            // Conditionally set padding style
+            padding: paddingStyle,
+        };
+        return (h(Host, { key: '56fe770734dd720139eb614489283e2ec81cc596', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-                'tds-table__body-cell--no-padding': this.disablePadding,
-            }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", { key: '41cfdbf142362f1dd298ed9f4c622775d543b64b' })));
+            }, style: dynamicStyles }, this.cellValue, h("slot", { key: '490a5caabb4a2ae94769875edb0743b474716e42' })));
     }
     get host() { return this; }
     static get style() { return TdsBodyCellStyle0; }

package/dist/components/tds-dropdown.js

@@ -72,29 +72,41 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.setDefaultOption = () => {
-            Array.from(this.host.children)
-                .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
-                .forEach((element) => {
-                if (this.multiselect) {
-                    this.defaultValue.split(',').forEach((value) => {
-                        if (value === element.value) {
-                            element.setSelected(true);
-                            this.value = this.value ? [...this.value, element.value] : [element.value];
-                        }
-                    });
-                }
-                else {
-                    if (this.defaultValue === element.value) {
-                        element.setSelected(true);
-                        this.value = [element.value];
+            // Ensure this.host.children is not empty
+            if (this.host.children.length === 0) {
+                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
+                return;
+            }
+            if (this.defaultValue) {
+                const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
+                let matched = false;
+                children.forEach((element) => {
+                    if (this.multiselect) {
+                        this.defaultValue.split(',').forEach((value) => {
+                            if (value === element.value) {
+                                element.setSelected(true);
+                                this.value = this.value ? [...this.value, element.value] : [element.value];
+                                matched = true;
+                            }
+                        });
                     }
                     else {
-                        element.setSelected(false);
+                        if (this.defaultValue === element.value) {
+                            element.setSelected(true);
+                            this.value = [element.value];
+                            matched = true;
+                        }
+                        else {
+                            element.setSelected(false);
+                        }
                     }
+                    this.setValueAttribute();
+                    return element;
+                });
+                if (!matched) {
+                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
                 }
-                this.setValueAttribute();
-                return element;
-            });
+            }
         };
         /* Returns a list of all children that are tds-dropdown-option elements */
         this.getChildren = () => {
@@ -364,9 +376,11 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
         }
     }
     componentWillLoad() {
-        if (this.defaultValue) {
-            this.setDefaultOption();
-        }
+        this.setDefaultOption();
+    }
+    /** Method to handle slot changes */
+    handleSlotChange() {
+        this.setDefaultOption();
     }
     /** Method to check if we should normalize text */
     normalizeString(text) {
@@ -399,7 +413,7 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '062a04c9b529a7e30ca863ba53f757f288f4da10', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '8f5b894804a3be375ba5091b7da004937dbcfe31', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '451edf7c5eaa096500d8d989bd9cddc60a5fd5d8', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'c7e3d77ba79b6e135aa960bc8e56c2d41ae3ec2e', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -442,11 +456,11 @@ const TdsDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'a507589572614ae3ac4c99fb777394b0bc03729c', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.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: 'cd63a354addfbcbfb2bb355b1e053b93dd9d3864', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'b184e4c940125d51c9531bceadc8544cbd579c1c' }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '9a4feeed475bde225d19e01f17e4eadc292c6f41', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/tds-header-cell.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const tableHeaderCellCss = ":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:0 16px;margin:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
+const tableHeaderCellCss = ":host(.tds-table__header-cell){box-sizing:border-box;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.tds-table__header-cell) *{box-sizing:border-box}:host(.tds-table__header-cell) .tds-table__header-text{padding:8px 16px;margin:0}:host(.tds-table__header-cell--sortable) .tds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus{outline:2px solid var(--tds-table-header-btn-focus);outline-offset:-2px}:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);text-align:left;color:var(--tds-table-header-btn-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon{flex:0 0 16px;height:16px;width:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--tds-table-color)}:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button{background-color:var(--tds-table-header-btn-background)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover{background-color:var(--tds-table-header-btn-background-hover)}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon{opacity:1}:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.tds-table--compact){height:33px}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}:host(.tds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.tds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.tds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.tds-table--toolbar-available){border-radius:0}:host(.tds-table--extra-column.tds-table--toolbar-available){border-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
 const TdsHeaderCellStyle0 = tableHeaderCellCss;
 
 const relevantTableProps = [

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

@@ -15,6 +15,12 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
         this.__registerHost();
         this.__attachShadow();
         this.uuid = generateUniqueId();
+        this.handleSlottedItemClick = (event) => {
+            const eventSource = event.target.tagName.toLowerCase();
+            if (['a', 'button'].includes(eventSource)) {
+                this.open = false;
+            }
+        };
         this.label = undefined;
         this.noDropdownIcon = false;
         this.selected = false;
@@ -32,20 +38,20 @@ const TdsHeaderDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDrop
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: 'cabebe721a79127441bddd0aa8ad1d9ff2ac9453' }, h("div", { key: 'f97c7f95f5c9a6382c3d3d48854b3cc9b2f51a8c', class: {
+        return (h(Host, { key: 'd72add7a12c105e83c0300dc4c6727775dfe10e5' }, h("div", { key: 'b323560bd8b13b6643eafca2ad9deb9bea53689e', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: '070b482e30884f2cf096472966d19232e97def8b', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'c29ad0c7309b3680b909cd911ad947bd0d60cd3c', ref: (el) => {
+            } }, h("tds-header-item", { key: '48af537f7b05f31fcbcb0c0aae311d2ccd69819d', class: "button", active: this.open, selected: this.selected }, h("button", { key: '324b1965706b0a3413c9e8ddcc37345c387519cc', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: 'a955b0d40c1c3619e158b727ae70e266fe93a69c', name: "icon" }), this.label, h("slot", { key: '27195b2da32bbdf9f970c3b69355e3cc7efda11d', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: '56a3064075c135677f59e58c4be831c66230a7c2', name: "icon" }), this.label, h("slot", { key: '729e1901342405daf3655dac940310e64e6683f0', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {
                         fallbackPlacements: [],
                     },
                 },
-            ] }, this.open ? h("slot", null) : null)))));
+            ] }, this.open ? (h("span", { onClick: (e) => this.handleSlottedItemClick(e), onKeyDown: (e) => e.key === 'Enter' && this.handleSlottedItemClick(e) }, h("slot", null))) : null)))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderDropdownStyle0; }

package/dist/components/tds-header-launcher.js

@@ -29,12 +29,8 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
         }
     }
     componentDidLoad() {
-        const slotElement = this.host.shadowRoot.querySelector('slot:not([name])');
-        const slottedElements = slotElement.assignedElements();
-        const hasListTypeMenu = slottedElements.some((element) => element.tagName.toLowerCase() === 'tds-header-launcher-list');
-        if (hasListTypeMenu) {
-            this.hasListTypeMenu = true;
-        }
+        const hasListTypeMenu = !!this.host.querySelector('tds-header-launcher-list');
+        this.hasListTypeMenu = hasListTypeMenu;
     }
     toggleLauncher() {
         this.open = !this.open;
@@ -46,11 +42,11 @@ const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLaun
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '3429e2f83f0eb01bd6e655b6fe1d8a77784b4f34' }, h("div", { key: '6c8522b99c3f7de3fd3f665366362c1035b9d9a2', class: {
+        return (h(Host, { key: '337abddb77f5d7b2ce7c1a8bcfe2dd5e60cc934c' }, h("div", { key: '3652f71bd52be2fcbae7bfde3dab0b0c1c0c5d56', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: '926507bc5d95971a1172de1a1cefd89d47959546' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("tds-header-launcher-button", Object.assign({ key: 'ffae6f54b57dcc0c44fae751f9da1025512b8f4b' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {