@scania/tegel 1.18.0-1.18.0-tdsheaderitembeta.2 → 1.18.0-beta.2

package/dist/components/tds-popover-menu-item.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 
-const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{pointer-events:none;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
+const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{pointer-events:none;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled ::slotted(.tds-icon__icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host ::slotted(*:not(.tds-icon__icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
 const TdsPopoverMenuItemStyle0 = popoverMenuItemCss;
 
 const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenuItem extends H {
@@ -11,10 +11,10 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'efdc72f869be19ff2d96dbb2e88610d69011a6ee', role: "listitem" }, h("div", { key: '9313583023cc2cf6d21454e979f37de83030476a', class: {
+        return (h(Host, { key: '394e2fd1ee96323b2db9398a2e48c1a2cfdd6611', role: "listitem" }, h("div", { key: '452da1f9627c7c5db647fa91072ef735cd0a06d3', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'a12d405a1bc0f1e5ddc75d52c25a8ca0b53d6427' }))));
+            } }, h("slot", { key: '7a3d7a8415116fc625363c6378caf66a9ff026c1' }))));
     }
     static get style() { return TdsPopoverMenuItemStyle0; }
 }, [1, "tds-popover-menu-item", {

package/dist/components/tds-popover-menu.js

@@ -1,8 +1,8 @@
 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$2 } from './p-dc461e7b.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
 
-const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;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-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
+const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:6px 0 !important;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-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
 const TdsPopoverMenuStyle0 = popoverMenuCss;
 
 const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends H {
@@ -29,13 +29,14 @@ const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu e
     }
     render() {
         var _a;
-        return (h(Host, { key: '36c12148ce4507dd4b157fff5be30760d2374bdd' }, h("tds-popover-core", { key: '92d5abfd7e7213dcb22c92fa401a21dfeef76edd', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'e5f323655f7cbd3a11dd14d9f078d419ff97d3e1' }, h(prefixedTagNames.tdsPopoverCore, { key: 'aa67f812691dcc09f2da0a78a4e6d4b01310f19d', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            } }, h("div", { key: '6b3a893d1d0a9c32a3846c7216a4fdac92a4222c', role: "list" }, h("slot", { key: 'cae075f5e187b5f59638f6f2a9ff8c38e716bcbb' })))));
+            } }, h("div", { key: 'd6e85e1d7c17afc4688cd78b6847dcebc72e7241', role: "list" }, h("slot", { key: '34d0991b86c98ea2b33da2f3f5883933aef4921c' })))));
     }
     get host() { return this; }
     static get style() { return TdsPopoverMenuStyle0; }
@@ -54,18 +55,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-popover-menu", "tds-popover-core"];
+    const components = ["tds-popover-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-popover-menu":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsPopoverMenu$1);
             }
             break;
-        case "tds-popover-core":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-radio-button.js

@@ -23,7 +23,7 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'b6c39a5831fdebb5dc6dad6ddf819544a9ae2844', class: "tds-radio-button" }, h("input", { key: 'bf4455eb7169141c79ff24bff8259572864daf27', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: '3fd2d122f6fe481bcebfda7f0bc90aa4530f1e82', htmlFor: this.radioId }, h("slot", { key: 'cb45cf63c06a52dac0704757462a2528464f6e23', name: "label" }))));
+        return (h("div", { key: '9981b311527401585e8d856efd31d400ef4f04ff', class: "tds-radio-button" }, h("input", { key: '42376124bb5c5111034cf33328312417696c1f4f', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: 'dcae7b92564cdc7ffea21bc6962a58c47f4fa7e1', htmlFor: this.radioId }, h("slot", { key: 'a1d77af8e076cac6d1959dbc393f11b6d4362756', name: "label" }))));
     }
     get host() { return this; }
     static get style() { return TdsRadioButtonStyle0; }

package/dist/components/tds-side-menu-close-button.js

@@ -1,6 +1,6 @@
 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$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
 
 const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
 const TdsSideMenuCloseButtonStyle0 = sideMenuCloseButtonCss;
@@ -13,7 +13,8 @@ const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideM
     }
     render() {
         const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '1dff25b895f341657373ab020116e5c4c0f7af67' }, h("button", Object.assign({ key: 'e2c3af974cfc7f9c9e0ec5b64c199fcda0408279' }, buttonProps), h("tds-icon", { key: 'aa56689766fe0c49e8d8d591c9f741a24dd85cc8', name: "cross", size: "20px" }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '7486dc122a3662d92d55c8195f406eb744c4d1ff' }, h("button", Object.assign({ key: 'cb982f67321cd23e4483bf4f42096cf5c5e6f032' }, buttonProps), h(prefixedTagNames.tdsIcon, { key: '18441a77bfab2dc8886f25a393cc2a862351cc30', name: "cross", size: "20px" }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuCloseButtonStyle0; }
@@ -22,18 +23,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-side-menu-close-button", "tds-icon"];
+    const components = ["tds-side-menu-close-button"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-side-menu-close-button":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsSideMenuCloseButton$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-side-menu-collapse-button.js

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-0c3cab16.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
 const TdsSideMenuCollapseButtonStyle0 = sideMenuCollapseButtonCss;
@@ -31,18 +32,19 @@ const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSi
         this.collapsed = event.detail.collapsed;
     }
     connectedCallback() {
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { key: '15266cdc6a39373563c89553817e1a6777f01f1c', role: "button", tabindex: "0", onClick: () => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1047ada52c0e2a2a5572c1c57a61c42e7d5a047f', role: "button", tabindex: "0", onClick: () => {
                 this.handleClick();
-            } }, h("div", { key: '813da1c78798289b4eed8342b6c00a837ae04b24', class: {
+            } }, h("div", { key: 'f3dc464aa050e5b764109d26ee1125290bff5fbb', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '44321406d890c741fff0ad1df9576588a6658ea5', class: {
+            } }, h(prefixedTagNames.tdsSideMenuItem, { key: '558708845ccf578ba3df7a39e0c3ae0838699cad', class: {
                 button: true,
-            } }, h("a", { key: '7e214b15daa5dac9df931a5d15f6ed80a52b5f7d' }, h("svg", { key: '61928c3ba4c6e2357a426f0c0ca1a0de86365b6a', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5cbbfe5239506f994a0b17f11cae1ded3c1f643e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'b63370f60320b46557e7d40cfad048e29c60109f' }))))));
+            } }, h("a", { key: '87b0fe1659908e89e1fb918fb1c65c9b1f879898' }, h("svg", { key: '1aec6d540f3e18cbd001e310623dded8f75d6ca3', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'f829cdd43f848fe3ee44d8c926f483219c3b8260', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '076c082597d1f0fbc8aaf251ef30f61687c043e1' }))))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuCollapseButtonStyle0; }
@@ -53,18 +55,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-side-menu-collapse-button", "tds-side-menu-item"];
+    const components = ["tds-side-menu-collapse-button"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-side-menu-collapse-button":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsSideMenuCollapseButton$1);
             }
             break;
-        case "tds-side-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-side-menu-dropdown-list-item.js

@@ -1,4 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
 
 const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--tds-nav-item-border-color-active);padding-left:20px;background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
 const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;
@@ -17,27 +18,27 @@ const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class Tds
     }
     connectedCallback() {
         var _a;
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     componentDidLoad() {
         var _a;
-        const dropdownEl = this.host.closest('tds-side-menu-dropdown');
+        const dropdownEl = findClosestComponent(this.host, 'tdsSideMenuDropdown');
         const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
         const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
         const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
-        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+        const btnIconIsUserImage = (_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase().endsWith('tds-side-menu-user-image');
         if (hasBtnIcon && !btnIconIsUserImage) {
             this.dropdownHasIcon = true;
         }
     }
     render() {
-        return (h(Host, { key: 'bd99626dab1cff34e10b5da4bc8f9ff22663e31e', role: "listitem" }, h("div", { key: '4a736b170841b2c195b86c18758d3e4a9e93193e', class: {
+        return (h(Host, { key: 'c47e1fad9e2a430ad64402a8e48af6a7b24a330d', role: "listitem" }, h("div", { key: '8647c8716ecbb51c642a257727ec8c48c4a9bd60', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'e6d3f6d36ebd7d73f03d8eed18a86332ff90cd5b' }))));
+            } }, h("slot", { key: '8d2c7082086a0854b4990559106f0ef136a40f60' }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuDropdownListItemStyle0; }

package/dist/components/tds-side-menu-dropdown-list.js

@@ -1,4 +1,5 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
 
 const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}";
 const TdsSideMenuDropdownListStyle0 = sideMenuDropdownListCss;
@@ -15,13 +16,13 @@ const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSide
     }
     connectedCallback() {
         var _a;
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: '87a06385e330eb2d65def2676ff78a09ad87d029', role: "list" }, h("div", { key: '284f409bfc8b24cea7047dd631a8895591f18a5c', class: {
+        return (h(Host, { key: '6b8f6c8119ebc648207b04e31c4e4741ef01c0b5', role: "list" }, h("div", { key: '14b3b0bccbcfbca94112c8b28c455f7969257cad', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'fdd823c6bb4fedfe12586edb58805d5588fa07e7' }))));
+            } }, h("slot", { key: '987f9c7e4b31aefca9686821bec1257427812a21' }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuDropdownListStyle0; }

package/dist/components/tds-side-menu-dropdown.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-3e74be57.js';
-import { d as defineCustomElement$2 } from './p-0c3cab16.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
 
 const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;
@@ -49,18 +49,19 @@ const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu
         return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
     }
     connectedCallback() {
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = this.sideMenuEl.collapsed;
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '1bad48953f08e903e9179dae839c93b249f93266' }, h("div", { key: '7e8020738796fb8c449f76a3d1aef801151e4e63', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1827847b06f291279e4a87ed69fa894900dea6d8' }, h("div", { key: 'ce4001ca5f54358b124a6e799d4b8575e8585e9d', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: 'e4420aba88077e36b1cc7cd10958459d79a463f4', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h(prefixedTagNames.tdsSideMenuItem, { key: '647d047735e07ce10ff1b29a769d7bbf4ee552e3', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, h("button", { key: '483ac0b103bf54f63c67cf2d78ed9e82703ba331' }, h("slot", { key: 'ec027d3c88569c79d0dde6c51f8dc1056dee6284', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f71caa474565871d170653153c8daa7ddead5f17' }, this.buttonLabel, h("slot", { key: '487db682801ce910cd65dc6d3ef481bff888574e', name: "label" }), h("tds-icon", { key: 'dc75ac7be7eedf85fec97cd3fdbbf786cebe8907', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: 'e321069727d205d0623cd72fb922c3101f9d2e08', class: "menu" }, this.collapsed && (h("h3", { key: '7d5a73c051a700f0568d63ae62ce2737cdb57dd8', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '9c831576869cac930e8fe9edcbfc86dfede01a47', name: "label" }))), h("slot", { key: '7db68bb3f46cdc24fa44c375f0d6bec82c317be4' })))));
+            } }, h("button", { key: '315f640f09e65851e148f378ba3b38d70b0ff732' }, h("slot", { key: '5929de731189625ebe18ee80a5883c795bc9ee77', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'a1ed66961510c1b36f1c158327c46e9bd834f5cb' }, this.buttonLabel, h("slot", { key: 'f772910c872e31659b651c05a972b8225517b94a', name: "label" }), h(prefixedTagNames.tdsIcon, { key: 'a9d5576a057243415b4d1f527e742a7e2812b50b', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: '109d2a4f7cec66a68e937a1922c4a5a8ddb16505', class: "menu" }, this.collapsed && (h("h3", { key: '08e7f464e230a6d8e0caa3088749d679be1343f9', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '8f0c0377d46f965bab22c44dd69d0090d2e2ca4a', name: "label" }))), h("slot", { key: '0e83ab1aa8c07f19a25e24c1c6be0c2fcb639c15' })))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuDropdownStyle0; }
@@ -76,23 +77,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-side-menu-dropdown", "tds-icon", "tds-side-menu-item"];
+    const components = ["tds-side-menu-dropdown"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-side-menu-dropdown":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsSideMenuDropdown$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "tds-side-menu-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-side-menu-item.js

@@ -1,4 +1,93 @@
-import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-0c3cab16.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { d as dfs } from './p-52bf0fdf.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
+
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component .tds-icon__icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const TdsSideMenuItemStyle0 = sideMenuItemCss;
+
+const TdsSideMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selected = false;
+        this.active = false;
+        this.collapsed = false;
+    }
+    updateSlotted(searchPredicate, mutationCallback) {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const firstSlottedElement = assignedElements[0];
+        if (firstSlottedElement) {
+            const foundElement = dfs(firstSlottedElement, searchPredicate);
+            if (foundElement) {
+                mutationCallback(foundElement);
+            }
+        }
+    }
+    /**
+     * This function is needed because we can't use CSS selectors to style something in the light dom
+     */
+    updateSlottedElements() {
+        if (this.slotEl) {
+            const isIconOrSvg = (element) => element.tagName.toLowerCase().endsWith('tds-icon') ||
+                element.tagName.toLowerCase() === 'svg';
+            const addIconClass = (element) => {
+                element.classList.add('__tds-side-menu-item-icon');
+                if (this.collapsed) {
+                    element.classList.add('__tds-side-menu-item-icon-collapsed');
+                }
+                else {
+                    element.classList.remove('__tds-side-menu-item-icon-collapsed');
+                }
+            };
+            this.updateSlotted(isIconOrSvg, addIconClass);
+        }
+    }
+    connectedCallback() {
+        var _a;
+        // closest() will return null if side-menu-item is inside a shadowRoot that
+        // does not contain a side-menu. This is the case for the side-menu-dropdown.
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
+        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+    }
+    componentDidLoad() {
+        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        this.updateSlottedElements();
+        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+    }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+        this.updateSlottedElements();
+    }
+    render() {
+        return (h(Host, { key: '386c370ad3c9509d3d357b1a100fc48d3f9179c1' }, h("div", { key: '3136d3cd56eb58b6227cb64334ab67dc824698a7', class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-active': this.active,
+                'component-collapsed': this.collapsed,
+            } }, h("slot", { key: 'c1e0434015361d4fc1f68ba5c33ac35c5741966b' }))));
+    }
+    get host() { return this; }
+    static get style() { return TdsSideMenuItemStyle0; }
+}, [1, "tds-side-menu-item", {
+        "selected": [4],
+        "active": [4],
+        "collapsed": [32]
+    }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuItem$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const TdsSideMenuItem = TdsSideMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-side-menu-overlay.js

@@ -10,7 +10,7 @@ const TdsSideMenuOverlay$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuO
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'a22924316d030baaa80d15676d514eefe150b9df' }, h("div", { key: 'ad453aaa2fcaf52c94f2e7990c6d52f9db7fb55a' })));
+        return (h(Host, { key: '4e5ee559f2210af73350725bb713c3c5a2ec62e7' }, h("div", { key: '7b8494f203996e8fbd9cdb0cb8659cc939d974b8' })));
     }
     static get style() { return TdsSideMenuOverlayStyle0; }
 }, [1, "tds-side-menu-overlay"]);

package/dist/components/tds-side-menu-user-image.js

@@ -1,4 +1,38 @@
-import { T as TdsSideMenuUserImage$1, d as defineCustomElement$1 } from './p-dddaa520.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
+
+const TdsSideMenuUserImage$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserImage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.src = undefined;
+        this.alt = undefined;
+    }
+    render() {
+        return (h(Host, { key: 'b3106a36d68732fb20b70d691da5f4b903568b18' }, h("slot", { key: 'a685eed98b4dd1c5a7fd26e5255bb1b91fba2427' }), this.src && h("img", { key: '0e671356961fa6cb1613f7695b575ce40086e064', src: this.src, alt: this.alt })));
+    }
+    static get style() { return TdsSideMenuUserImageStyle0; }
+}, [1, "tds-side-menu-user-image", {
+        "src": [1],
+        "alt": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-user-image"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-user-image":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuUserImage$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const TdsSideMenuUserImage = TdsSideMenuUserImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-side-menu-user-label.js

@@ -1,4 +1,38 @@
-import { T as TdsSideMenuUserLabel$1, d as defineCustomElement$1 } from './p-09d36119.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+
+const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
+const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
+
+const TdsSideMenuUserLabel$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserLabel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (h(Host, { key: '8dc22599239ca34fc6d1b63d1409aaf7921c0056' }, this.heading, this.subheading && h("div", { key: '0f408be52713a85c63f9d527cbcc8d6c6c15077f', class: "subheading" }, this.subheading)));
+    }
+    static get style() { return TdsSideMenuUserLabelStyle0; }
+}, [1, "tds-side-menu-user-label", {
+        "heading": [1],
+        "subheading": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-side-menu-user-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-side-menu-user-label":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsSideMenuUserLabel$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const TdsSideMenuUserLabel = TdsSideMenuUserLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-side-menu-user.js

@@ -1,8 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-dddaa520.js';
-import { d as defineCustomElement$2 } from './p-09d36119.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
 
-const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host .user-image{margin-left:-4px}";
 const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser extends H {
@@ -16,8 +15,10 @@ const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser
         this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, { key: '061364f66ad366cbfb421fa0609020564bd36e83' }, h("tds-side-menu-user-image", { key: '01ae0ecb3a011a6a8f50566dc5b683fb56f8d387', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '5265cabfa2a7533f7e6c8a9a47b1691f8991d3f0', name: "image" })), h("tds-side-menu-user-label", { key: '525ac1f1593b048c266733e24d5dd3f5632ce197', heading: this.heading, subheading: this.subheading })));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '9f694ba496db9859eb827f0dc2f382e4434ee61c' }, h(prefixedTagNames.tdsSideMenuUserImage, { key: '851205e352f9fce6aff545a277298b3aca048315', class: "user-image", src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '2dfef908a3ec8f8c6054f8427604f1827b55cd49', name: "image" })), h(prefixedTagNames.tdsSideMenuUserLabel, { key: 'be7e31d4e8afe764dbdd7a87b00117c49f463690', heading: this.heading, subheading: this.subheading })));
     }
+    get host() { return this; }
     static get style() { return TdsSideMenuUserStyle0; }
 }, [1, "tds-side-menu-user", {
         "heading": [1],
@@ -29,23 +30,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-side-menu-user", "tds-side-menu-user-image", "tds-side-menu-user-label"];
+    const components = ["tds-side-menu-user"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-side-menu-user":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsSideMenuUser$1);
             }
             break;
-        case "tds-side-menu-user-image":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "tds-side-menu-user-label":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();