@scania/tegel 1.24.0-value-prop.beta.6 → 1.25.0-beta.0

package/dist/collection/components/tooltip-beta/tooltip-beta.js

@@ -0,0 +1,319 @@
+import { h, Host } from "@stencil/core";
+export class TdsTooltipBeta {
+    constructor() {
+        this.debounce = (func, delay) => (...args) => {
+            let debounceTimer;
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => func.apply(this, args), delay);
+        };
+        this.showTooltip = this.debounce(() => {
+            this.isVisible = true;
+            this.updateTooltipPosition();
+        }, 100);
+        this.hideTooltip = this.debounce(() => {
+            this.isVisible = false;
+        }, 100);
+        this.toggleTooltip = () => {
+            this.isVisible = !this.isVisible;
+            this.updateTooltipPosition();
+        };
+        this.setTooltipRef = (element) => {
+            this.tooltipEl = element;
+        };
+        this.text = '';
+        this.selector = undefined;
+        this.referenceEl = undefined;
+        this.defaultShow = false;
+        this.mouseOverTooltip = false;
+        this.trigger = 'hover';
+        this.show = null;
+        this.placement = 'bottom';
+        this.offsetSkidding = 0;
+        this.offsetDistance = 8;
+        this.isVisible = this.defaultShow;
+    }
+    componentDidLoad() {
+        if (!this.referenceEl && this.selector) {
+            this.referenceEl = document.querySelector(this.selector);
+        }
+        if (this.referenceEl) {
+            this.bindEvents();
+        }
+    }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver(() => this.updateTooltipPosition());
+        if (this.referenceEl) {
+            this.resizeObserver.observe(this.referenceEl);
+        }
+        window.addEventListener('resize', this.updateTooltipPosition);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        window.removeEventListener('resize', this.updateTooltipPosition);
+    }
+    bindEvents() {
+        var _a, _b;
+        if (this.trigger === 'hover') {
+            this.referenceEl.addEventListener('mouseenter', this.showTooltip);
+            this.referenceEl.addEventListener('mouseleave', this.hideTooltip);
+            if (this.mouseOverTooltip) {
+                (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.showTooltip);
+                (_b = this.tooltipEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.hideTooltip);
+            }
+        }
+        else if (this.trigger === 'click') {
+            this.referenceEl.addEventListener('click', this.toggleTooltip);
+        }
+    }
+    updateTooltipPosition() {
+        if (!this.tooltipEl || !this.referenceEl)
+            return;
+        requestAnimationFrame(() => {
+            const rect = this.referenceEl.getBoundingClientRect();
+            const { height, width, bottom } = rect;
+            let { top, left } = rect;
+            switch (this.placement) {
+                case 'top':
+                    top -= this.tooltipEl.offsetHeight + this.offsetDistance;
+                    left += width / 2 - this.tooltipEl.offsetWidth / 2;
+                    break;
+                case 'bottom':
+                    top += height + this.offsetDistance;
+                    left += width / 2 - this.tooltipEl.offsetWidth / 2;
+                    break;
+                case 'left':
+                    top += height / 2 - this.tooltipEl.offsetHeight / 2;
+                    left -= this.tooltipEl.offsetWidth + this.offsetDistance;
+                    break;
+                case 'right':
+                    top += height / 2 - this.tooltipEl.offsetHeight / 2;
+                    left += width + this.offsetDistance;
+                    break;
+                // Handle more complex placements like 'top-start', 'bottom-end', etc.
+                default:
+                    top = bottom + this.offsetDistance;
+                    left = left + width / 2 - this.tooltipEl.offsetWidth / 2;
+                    break;
+            }
+            // Additional offsets
+            left += this.offsetSkidding;
+            this.tooltipEl.style.top = `${top}px`;
+            this.tooltipEl.style.left = `${left}px`;
+        });
+    }
+    render() {
+        return (h(Host, { key: 'ccab2630363c007e8d4719d22ab140e80547251b' }, h("div", { key: '3c64224e0620e60f42089205e3ca8d0766df90cc', class: {
+                'tds-tooltip': true,
+                'tds-tooltip-show': this.isVisible,
+            }, ref: this.setTooltipRef }, this.text, h("slot", { key: '4674e18dbf5bfe563ca3c01757280ccd660c5049' }))));
+    }
+    static get is() { return "tds-tooltip-beta"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tooltip-beta.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tooltip-beta.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "selector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selector",
+                "reflect": false
+            },
+            "referenceEl": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement | null",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "defaultShow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "default-show",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mouseOverTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mouse-over-tooltip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'hover'"
+            },
+            "show": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../types/Tooltip",
+                            "id": "src/types/Tooltip.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "offsetSkidding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "offset-skidding",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "offsetDistance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "offset-distance",
+                "reflect": false,
+                "defaultValue": "8"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/types/Tooltip.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/axeHelpers.js

@@ -0,0 +1,3 @@
+import AxeBuilder from "@axe-core/playwright";
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();

package/dist/collection/utils/convertToString.js

@@ -0,0 +1,14 @@
+/**
+ * Converts a value (string or number) to string
+ * @param value - The value to convert
+ * @returns The string representation of the value, or empty string if null/undefined
+ */
+export const convertToString = (value) => {
+    if (value === null || value === undefined)
+        return '';
+    return value.toString();
+};
+// Optional: If we need array conversion often
+export const convertArrayToStrings = (values) => {
+    return values.map((value) => convertToString(value));
+};

package/dist/components/{p-0c3cab16.js → p-0e6efec9.js}

@@ -58,12 +58,12 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
         this.updateSlottedElements();
     }
     render() {
-        return (h(Host, { key: '13d5211709dbda15ce0e398dab7e2677e15d074c' }, h("div", { key: '99cd16c7817451dfbc3e30c59fcb95ebf84c72af', class: {
+        return (h(Host, { key: '47e9325f6606cb06ce21676b12b9123bb5147501' }, h("div", { key: 'b0309c6d2242d862a3c91fe0f8e94af73af915d5', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '564c191d1bf54f63fa75c32309cd32392a22dc3a' }))));
+            } }, h("slot", { key: 'f96fa0078d9d2da5f76edb05d91cb5eb19dd01fb' }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuItemStyle0; }

package/dist/components/{p-09d36119.js → p-265c3467.js}

@@ -12,7 +12,7 @@ const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '5b26493d17e356fa885a7b615ed4bda03e751eb6' }, this.heading, this.subheading && h("div", { key: '2dc511289427ef2ea490fec0308119c42956113c', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '7bac8221992109403d3f0506b7f0125a0b77b6d4' }, this.heading, this.subheading && h("div", { key: 'b9137e36496fb7fc10da067ea61596da2a38fa9d', class: "subheading" }, this.subheading)));
     }
     static get style() { return TdsSideMenuUserLabelStyle0; }
 }, [1, "tds-side-menu-user-label", {

package/dist/components/{p-aea7fa6b.js → p-29d19dc8.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAttributes } from './p-3fe9cbbf.js';
-import { d as defineCustomElement$1 } from './p-5e1a9abc.js';
+import { d as defineCustomElement$1 } from './p-4764a1d5.js';
 
 const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:900}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
 const TdsPopoverCanvasStyle0 = popoverCanvasCss;
@@ -31,12 +31,12 @@ const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas
     }
     render() {
         var _a;
-        return (h(Host, { key: '13a6fe4800b9efc612ec21d20da5b2c2c9cdc2ce' }, h("tds-popover-core", Object.assign({ key: 'e3912733d09d6b7e5aa8bc2f5f6e87d828a2b07b' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '68de2e7161c5060c98b1c0c78050f41a716228ee' }, h("tds-popover-core", Object.assign({ key: 'f50ae36ac2b76445d78cbe4750820d3c684e862a' }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '69bfa1b736a60777b578de6a0d4c4959c0a21781' }, h("slot", { key: '01776b37392ff7f23d35ff10fa647214d6567d1d' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '1dac1d925ab9673219449d3885cd7430a3e3f188' }, h("slot", { key: '9c5d3c152b63e0afd8c30e4960edbd2aa3418fd2' })))));
     }
     get host() { return this; }
     static get style() { return TdsPopoverCanvasStyle0; }

package/dist/components/{p-4030e9bc.js → p-2a43e410.js}

@@ -1,6 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-d921fe75.js';
-import { d as defineCustomElement$1 } from './p-e323cd2a.js';
+import { a as convertToString } from './p-b1d21573.js';
+import { d as defineCustomElement$2 } from './p-c65351ab.js';
+import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
 
 const dropdownOptionCss = ":host{box-sizing:border-box;display:block;background-color:var(--tds-dropdown-option-background)}:host *{box-sizing:border-box}:host .dropdown-option{color:var(--tds-dropdown-option-color);border-bottom:1px solid var(--tds-dropdown-option-border);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);overflow-wrap:anywhere;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania)}:host .dropdown-option.selected{background-color:var(--tds-dropdown-option-background-selected)}:host .dropdown-option.disabled{color:var(--tds-dropdown-option-color-disabled)}:host .dropdown-option button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .dropdown-option button{all:unset;width:100%}:host .dropdown-option button.lg{padding:19px 0 20px}:host .dropdown-option button.md{padding:15px 0 16px}:host .dropdown-option button.sm{padding:11px 0 12px}:host .dropdown-option button.xs{padding:7px 0 8px}:host .dropdown-option button .single-select{display:flex;align-items:center;justify-content:space-between;padding:0 16px}:host .dropdown-option .multiselect{width:100%;height:100%}:host .dropdown-option .multiselect tds-checkbox{display:flex;height:100%;width:100%}:host .dropdown-option .multiselect tds-checkbox.lg{padding:15px 16px 16px}:host .dropdown-option .multiselect tds-checkbox.md{padding:11px 16px 12px}:host .dropdown-option .multiselect tds-checkbox.sm{padding:7px 16px 8px}:host .dropdown-option .multiselect tds-checkbox.xs{padding:7px 16px 8px}:host .dropdown-option:hover{background-color:var(--tds-dropdown-option-background-hover);cursor:pointer}:host .dropdown-option:hover.disabled{background-color:var(--tds-dropdown-option-background);cursor:not-allowed}:host([hidden]){display:none}";
 const TdsDropdownOptionStyle0 = dropdownOptionCss;
@@ -13,22 +14,32 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.tdsSelect = createEvent(this, "tdsSelect", 6);
         this.tdsFocus = createEvent(this, "tdsFocus", 6);
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
+        this.parentElement = null;
+        // @ts-ignore
+        // eslint-disable-next-line no-unused-vars,
+        this.label = '';
         this.componentWillRender = () => {
+            var _a, _b, _c;
+            if (!this.host.parentElement) {
+                return;
+            }
             this.parentElement =
-                this.host.parentElement.tagName === 'TDS-DROPDOWN'
+                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
                     ? this.host.parentElement
                     : this.host.getRootNode().host;
-            this.multiselect = this.parentElement.multiselect;
-            this.size = this.parentElement.size;
-            this.label = this.host.textContent.trim();
+            if (this.parentElement) {
+                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
+                this.size = this.parentElement.size || 'lg';
+            }
+            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
         this.handleSingleSelect = () => {
             if (!this.disabled) {
                 this.selected = true;
-                this.parentElement.appendValue(this.value);
+                this.parentElement.appendValue(this.internalValue);
                 this.parentElement.close();
                 this.tdsSelect.emit({
-                    value: this.value,
+                    value: this.internalValue,
                     selected: this.selected,
                 });
             }
@@ -36,18 +47,18 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.handleMultiselect = (event) => {
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.value);
+                    this.parentElement.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.value);
+                    this.parentElement.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
@@ -61,17 +72,24 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
             this.tdsBlur.emit(event);
         };
         this.value = undefined;
+        this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
-        this.multiselect = undefined;
+        this.multiselect = false;
         this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
         this.selected = selected;
     }
+    valueWatcher(newValue) {
+        this.internalValue = convertToString(newValue);
+    }
+    componentWillLoad() {
+        this.internalValue = convertToString(this.value);
+    }
     render() {
-        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
+        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -89,14 +107,20 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }
+    static get watchers() { return {
+        "value": ["valueWatcher"]
+    }; }
     static get style() { return TdsDropdownOptionStyle0; }
 }, [17, "tds-dropdown-option", {
-        "value": [1],
+        "value": [8],
         "disabled": [4],
+        "internalValue": [32],
         "selected": [32],
         "multiselect": [32],
         "size": [32],
         "setSelected": [64]
+    }, undefined, {
+        "value": ["valueWatcher"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-fcec766c.js → p-34737ed9.js}

@@ -75,7 +75,7 @@ const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDr
             'role': 'list',
             'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
         };
-        return (h(Host, Object.assign({ key: '2ebed45f0b4d3b872378a1246180fc34f8ea46de' }, attributes), h("slot", { key: '5b72e5cab5c21fdaa55ca8641c729393ade09f75' })));
+        return (h(Host, Object.assign({ key: 'ed227a94a244fcb78cef53b5f0253e5df9a41c31' }, attributes), h("slot", { key: '39e541672f4ab52a308a9cb5856c9d2535afbfea' })));
     }
     get host() { return this; }
     static get style() { return TdsHeaderDropdownListStyle0; }

package/dist/components/{p-dddaa520.js → p-3e93886d.js}

@@ -12,7 +12,7 @@ const TdsSideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuU
         this.alt = undefined;
     }
     render() {
-        return (h(Host, { key: 'cd4bcc9ba4ce93b20e39ab0782136518a99899a3' }, h("slot", { key: '09bf0b847a54c03474e9d5dcaad8d0a5a347dbfc' }), this.src && h("img", { key: '8d74e3733d69ac50f4fe07557b91aec07aa74605', src: this.src, alt: this.alt })));
+        return (h(Host, { key: 'ea8f9c51aefab60fd2c32cee1be0344ec3fc6751' }, h("slot", { key: 'ae8fb3c065544aeb6c4737789e1dfefd5eb3a947' }), this.src && h("img", { key: '7b0b888ccaef7e1f40e82eb46c3bc09b78c92d0f', src: this.src, alt: this.alt })));
     }
     static get style() { return TdsSideMenuUserImageStyle0; }
 }, [1, "tds-side-menu-user-image", {

package/dist/components/{p-5e1a9abc.js → p-4764a1d5.js}

@@ -2001,7 +2001,7 @@ const TdsPopoverCore = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCore ext
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: '8893e2cca1fedd09a8dfff8ceeb12b47cbf07e09', class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '7e075900d43b4f6d3009ef37f11059fd646e708e' })));
+        return (h(Host, { key: '75bd399d3dc2904ef4e1f92eea7caca40d7de09c', class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '67f6f36ec1ff26e413f797160dd493cd5703f73a' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/{p-8a2d7b2f.js → p-4c1e3344.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
-import { d as defineCustomElement$3 } from './p-30de8ac4.js';
-import { d as defineCustomElement$2 } from './p-0676aa23.js';
-import { d as defineCustomElement$1 } from './p-e323cd2a.js';
+import { d as defineCustomElement$3 } from './p-e49a0ceb.js';
+import { d as defineCustomElement$2 } from './p-d61bd22e.js';
+import { d as defineCustomElement$1 } from './p-a2b7bdef.js';
 
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 const TdsHeaderLauncherButtonStyle0 = headerLauncherButtonCss;
@@ -17,7 +17,7 @@ const TdsHeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class TdsHeader
     render() {
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: 'ee714e05a3585542850f433cd81ed25d95a14070' }, h("tds-header-item", { key: '0a7c7b20fa872c1ccd4e0760b9f68743ec6c761f', active: this.active }, h("button", Object.assign({ key: '1b0c93c04e5206dc47fe3df3a158e16ed624f8e1' }, buttonProps), h("tds-icon", { key: '11a961f7e11d741108a450ef1a2fa1b22f5520a8', class: "icon", name: "bento", size: "20px" })))));
+        return (h(Host, { key: '335cfea4d8b36b95639985dc4a67f6ccc891d122' }, h("tds-header-item", { key: '0b497a3b369d43dd3c43f4471e9e9d825f2b5bd1', active: this.active }, h("button", Object.assign({ key: '84aaba13ed00d3515f98d81b419ab2898bca4910' }, buttonProps), h("tds-icon", { key: 'f65b047f5c36222b20c73ffd2340eebca0f47d33', class: "icon", name: "bento", size: "20px" })))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderLauncherButtonStyle0; }

package/dist/components/{p-cfb1b588.js → p-8c849aa2.js}

@@ -12,10 +12,10 @@ const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHead
         this.size = 'md';
     }
     render() {
-        return (h(Host, { key: 'e884013f09151c5ba323ac69c34c88e8aba9d132' }, h("div", { key: 'e4babaebaac5f661b2ef365a120e9953d6535c73', class: {
+        return (h(Host, { key: 'ca37bc294a28794d8bcd7aea18464665b5e8edad' }, h("div", { key: '640cee1fd256dbbc046f8564808ea45ed838d2c5', class: {
                 'component': true,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'b58b6c84093c4edd303ee3ed202703f316cfcaa2' }))));
+            } }, h("slot", { key: 'e5cf6d2af513224921c836206f16d6c44879369c' }))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderDropdownListItemStyle0; }

package/dist/components/{p-e323cd2a.js → p-a2b7bdef.js}

@@ -36,7 +36,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends H {
         this.arrayOfIcons = [...this.arrayOfIcons];
     }
     render() {
-        return h(Host, { key: '905914904d2afac05280f9daf9834b89aa3ec14f' }, this.setIcons());
+        return h(Host, { key: '7501bac4e182e5b44030b140b4c2c68e0fd2522b' }, this.setIcons());
     }
     static get style() { return TdsIconStyle0; }
 }, [1, "tds-icon", {