@scania/tegel 1.8.0-ng-form-beta.1 → 1.8.0-ng-form-beta.2

package/dist/collection/components/banner/banner.css

@@ -1,35 +1,3 @@
-:root,
-.tds-mode-light {
-  --tds-link: var(--tds-blue-500);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-grey-900);
-  --tds-link-disabled: var(--tds-grey-400);
-}
-:root tds-toast,
-.tds-mode-light tds-toast {
-  --tds-link: var(--tds-blue-300);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-blue-100);
-  --tds-link-disabled: var(--tds-grey-800);
-}
-
-.tds-mode-dark {
-  --tds-link: var(--tds-blue-300);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-blue-100);
-  --tds-link-disabled: var(--tds-grey-800);
-}
-.tds-mode-dark tds-toast {
-  --tds-link: var(--tds-blue-500);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-grey-900);
-  --tds-link-disabled: var(--tds-grey-400);
-}
-
 :host(.hide) {
   display: none;
   visibility: hidden;

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/modal/modal.css

@@ -1,26 +1,3 @@
-:root,
-.tds-mode-light {
-  --tds-modal-backdrop: rgba(0 0 0 / 40%);
-  --tds-modal-background: var(--tds-white);
-  --tds-modal-text: var(--tds-grey-958);
-  --tds-modal-icon: var(--tds-black);
-  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
-  --tds-modal-scrollbar: var(--tds-grey-300);
-  --tds-modal-scrollbar-track: var(--tds-grey-300);
-  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
-}
-
-.tds-mode-dark {
-  --tds-modal-backdrop: rgba(0 0 0 / 40%);
-  --tds-modal-background: var(--tds-grey-900);
-  --tds-modal-text: var(--tds-grey-50);
-  --tds-modal-icon: var(--tds-white);
-  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
-  --tds-modal-scrollbar: var(--tds-grey-300);
-  --tds-modal-scrollbar-track: var(--tds-grey-300);
-  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
-}
-
 /* MIXINS */
 /* MODAL STYLING */
 .tds-modal {

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/radio-button/radio-button.css

@@ -1,27 +1,3 @@
-:root,
-.tds-mode-light {
-  --tds-radio-button-color: var(--tds-grey-958);
-  --tds-radio-button-interaction-01: var(--tds-blue-800);
-  --tds-radio-button-interaction-02: var(--tds-white);
-  --tds-radio-button-background-hover: var(--tds-blue-800);
-  --tds-radio-button-background-focus: var(--tds-blue-800);
-  --tds-radio-button-disabled: var(--tds-grey-600);
-  --tds-radio-button-border-color-disabled-after: var(--tds-grey-500);
-  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
-  --tds-radio-button-color-disabled-before: var(--tds-grey-700);
-}
-
-.tds-mode-dark {
-  --tds-radio-button-color: var(--tds-white);
-  --tds-radio-button-interaction-01: var(--tds-white);
-  --tds-radio-button-interaction-02: var(--tds-grey-958);
-  --tds-radio-button-background-hover: var(--tds-white);
-  --tds-radio-button-background-focus: var(--tds-white);
-  --tds-radio-button-disabled: var(--tds-grey-600);
-  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
-  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
-}
-
 .tds-radio-button {
   box-sizing: border-box;
   display: flex;

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/collection/components/tooltip/tooltip.css

@@ -1,14 +1,3 @@
-:root,
-.tds-mode-light {
-  --tds-tooltip-background: var(--tds-grey-800);
-  --tds-tooltip-color: var(--tds-white);
-}
-
-.tds-mode-dark {
-  --tds-tooltip-background: var(--tds-grey-200);
-  --tds-tooltip-color: var(--tds-grey-958);
-}
-
 .tds-tooltip {
   box-sizing: border-box;
   font: var(--tds-detail-05);

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-banner.js

@@ -3,7 +3,7 @@ import { g as generateUniqueId } from './generateUniqueId.js';
 import { h as hasSlot } from './hasSlot.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:root tds-toast,.tds-mode-light tds-toast{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark tds-toast{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+const bannerCss = ":host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 const TdsBannerStyle0 = bannerCss;
 
 const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTMLElement {

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 = [