@scania/tegel 1.3.3 → 1.5.0

package/dist/cjs/tds-side-menu-collapse-button.cjs.entry.js

@@ -2,49 +2,49 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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 TdsSideMenuCollapseButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tdsCollapse = index.createEvent(this, "tdsCollapse", 3);
-    this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
-    this.handleClick = () => {
-      /** Emit a public event that the user can prevent. */
-      const tdsCollapseEvent = this.tdsCollapse.emit({
-        collapsed: !this.collapsed,
-      });
-      /** If the public event was not prevented. */
-      if (!tdsCollapseEvent.defaultPrevented) {
-        /** Emit internal event that is listened to by other side-menu components */
-        this.collapsed = !this.collapsed;
-        this.internalTdsCollapse.emit({
-          collapsed: this.collapsed,
-        });
-      }
-    };
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = this.sideMenuEl.collapsed;
-  }
-  render() {
-    return (index.h(index.Host, { role: "button", tabindex: "0", onClick: () => {
-        this.handleClick();
-      } }, index.h("div", { class: {
-        'wrapper': true,
-        'state-collapsed': this.collapsed,
-      } }, index.h("tds-side-menu-item", { class: {
-        button: true,
-      } }, index.h("a", null, index.h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "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 && index.h("slot", null))))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tdsCollapse = index.createEvent(this, "tdsCollapse", 3);
+        this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
+        this.handleClick = () => {
+            /** Emit a public event that the user can prevent. */
+            const tdsCollapseEvent = this.tdsCollapse.emit({
+                collapsed: !this.collapsed,
+            });
+            /** If the public event was not prevented. */
+            if (!tdsCollapseEvent.defaultPrevented) {
+                /** Emit internal event that is listened to by other side-menu components */
+                this.collapsed = !this.collapsed;
+                this.internalTdsCollapse.emit({
+                    collapsed: this.collapsed,
+                });
+            }
+        };
+        this.collapsed = false;
+    }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = this.sideMenuEl.collapsed;
+    }
+    render() {
+        return (index.h(index.Host, { role: "button", tabindex: "0", onClick: () => {
+                this.handleClick();
+            } }, index.h("div", { class: {
+                'wrapper': true,
+                'state-collapsed': this.collapsed,
+            } }, index.h("tds-side-menu-item", { class: {
+                button: true,
+            } }, index.h("a", null, index.h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "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 && index.h("slot", null))))));
+    }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuCollapseButton.style = sideMenuCollapseButtonCss;
 

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

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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 TdsSideMenuDropdownListItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.selected = false;
-    this.dropdownHasIcon = false;
-    this.collapsed = false;
-  }
-  collapseSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    var _a;
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    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 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';
-    if (hasBtnIcon && !btnIconIsUserImage) {
-      this.dropdownHasIcon = true;
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selected = false;
+        this.dropdownHasIcon = false;
+        this.collapsed = false;
     }
-  }
-  render() {
-    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-dropdown-has-icon': this.dropdownHasIcon,
-        'component-collapsed': this.collapsed,
-      } }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
+    collapseSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        var _a;
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        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 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';
+        if (hasBtnIcon && !btnIconIsUserImage) {
+            this.dropdownHasIcon = true;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-dropdown-has-icon': this.dropdownHasIcon,
+                'component-collapsed': this.collapsed,
+            } }, index.h("slot", null))));
+    }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuDropdownListItem.style = sideMenuDropdownListItemCss;
 

package/dist/cjs/tds-side-menu-dropdown-list.cjs.entry.js

@@ -2,29 +2,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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 TdsSideMenuDropdownList = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  connectedCallback() {
-    var _a;
-    this.sideMenuEl = this.host.closest('tds-side-menu');
-    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
-  }
-  render() {
-    return (index.h(index.Host, { role: "list" }, index.h("div", { class: {
-        'state-collapsed': this.collapsed,
-      } }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.collapsed = false;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    connectedCallback() {
+        var _a;
+        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+    }
+    render() {
+        return (index.h(index.Host, { role: "list" }, index.h("div", { class: {
+                'state-collapsed': this.collapsed,
+            } }, index.h("slot", null))));
+    }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuDropdownList.style = sideMenuDropdownListCss;
 

package/dist/cjs/tds-side-menu-dropdown.cjs.entry.js

@@ -2,66 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.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:68px;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 TdsSideMenuDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.defaultOpen = false;
-    this.buttonLabel = undefined;
-    this.selected = false;
-    this.open = false;
-    this.hoverState = undefined;
-    this.collapsed = false;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  onEventPointerEnter() {
-    this.setHoverStateOpen();
-  }
-  onEventFocus() {
-    this.setHoverStateOpen();
-  }
-  onEventPointerLeave() {
-    this.setHoverStateClosed();
-  }
-  onEventBlur() {
-    this.setHoverStateClosed();
-  }
-  setHoverStateOpen() {
-    this.hoverState = { isHovered: true, updatedAt: Date.now() };
-  }
-  setHoverStateClosed() {
-    const leftAt = Date.now();
-    const toleranceInMilliseconds = 150;
-    setTimeout(() => {
-      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
-        this.hoverState = { isHovered: false, updatedAt: Date.now() };
-      }
-    }, toleranceInMilliseconds);
-  }
-  getIsOpenState() {
-    var _a;
-    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.collapsed = this.sideMenuEl.collapsed;
-    this.open = this.defaultOpen;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: {
-        'wrapper': true,
-        'state-open': this.getIsOpenState(),
-        'state-collapsed': this.collapsed,
-      } }, index.h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
-        this.open = !this.open;
-      } }, index.h("button", null, index.h("slot", { name: "icon" }), !this.collapsed && (index.h(index.Fragment, null, this.buttonLabel, index.h("slot", { name: "label" }), index.h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), index.h("div", { class: "menu" }, this.collapsed && (index.h("h3", { class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { name: "label" }))), index.h("slot", null)))));
-  }
-  get host() { return index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.defaultOpen = false;
+        this.buttonLabel = undefined;
+        this.selected = false;
+        this.open = false;
+        this.hoverState = undefined;
+        this.collapsed = false;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    onEventPointerEnter() {
+        this.setHoverStateOpen();
+    }
+    onEventFocus() {
+        this.setHoverStateOpen();
+    }
+    onEventPointerLeave() {
+        this.setHoverStateClosed();
+    }
+    onEventBlur() {
+        this.setHoverStateClosed();
+    }
+    setHoverStateOpen() {
+        this.hoverState = { isHovered: true, updatedAt: Date.now() };
+    }
+    setHoverStateClosed() {
+        const leftAt = Date.now();
+        const toleranceInMilliseconds = 150;
+        setTimeout(() => {
+            if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
+                this.hoverState = { isHovered: false, updatedAt: Date.now() };
+            }
+        }, toleranceInMilliseconds);
+    }
+    getIsOpenState() {
+        var _a;
+        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.collapsed = this.sideMenuEl.collapsed;
+        this.open = this.defaultOpen;
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", { class: {
+                'wrapper': true,
+                'state-open': this.getIsOpenState(),
+                'state-collapsed': this.collapsed,
+            } }, index.h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+                this.open = !this.open;
+            } }, index.h("button", null, index.h("slot", { name: "icon" }), !this.collapsed && (index.h(index.Fragment, null, this.buttonLabel, index.h("slot", { name: "label" }), index.h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), index.h("div", { class: "menu" }, this.collapsed && (index.h("h3", { class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { name: "label" }))), index.h("slot", null)))));
+    }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuDropdown.style = sideMenuDropdownCss;
 

package/dist/cjs/tds-side-menu-item.cjs.entry.js

@@ -2,71 +2,71 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
-const dfs = require('./dfs-babd18a6.js');
+const index = require('./index-ae4fbf97.js');
+const dfs = require('./dfs-84f7f63e.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{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 TdsSideMenuItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    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.dfs(firstSlottedElement, searchPredicate);
-      if (foundElement) {
-        mutationCallback(foundElement);
-      }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.selected = false;
+        this.active = false;
+        this.collapsed = false;
     }
-  }
-  /**
-   * 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() === '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');
+    updateSlotted(searchPredicate, mutationCallback) {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const firstSlottedElement = assignedElements[0];
+        if (firstSlottedElement) {
+            const foundElement = dfs.dfs(firstSlottedElement, searchPredicate);
+            if (foundElement) {
+                mutationCallback(foundElement);
+            }
         }
-        else {
-          element.classList.remove('__tds-side-menu-item-icon-collapsed');
+    }
+    /**
+     * 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() === '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);
         }
-      };
-      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 = this.host.closest('tds-side-menu');
-    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 (index.h(index.Host, null, index.h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-active': this.active,
-        'component-collapsed': this.collapsed,
-      } }, index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
+    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 = this.host.closest('tds-side-menu');
+        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 (index.h(index.Host, null, index.h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-active': this.active,
+                'component-collapsed': this.collapsed,
+            } }, index.h("slot", null))));
+    }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuItem.style = sideMenuItemCss;
 

package/dist/cjs/tds-side-menu-overlay.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.js');
 
 const sideMenuOverlayCss = ":host{position:fixed;width:100%;height:100%;background-color:black}div{position:fixed;width:100%;height:100%;pointer-events:none}";
 
 const TdsSideMenuOverlay = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("div", null)));
+    }
 };
 TdsSideMenuOverlay.style = sideMenuOverlayCss;
 

package/dist/cjs/tds-side-menu-user-image_2.cjs.entry.js

@@ -2,33 +2,33 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.js');
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 
 const TdsSideMenuUserImage = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.src = undefined;
-    this.alt = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null), this.src && index.h("img", { src: this.src, alt: this.alt })));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.src = undefined;
+        this.alt = undefined;
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("slot", null), this.src && index.h("img", { src: this.src, alt: this.alt })));
+    }
 };
 TdsSideMenuUserImage.style = sideMenuUserImageCss;
 
 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 TdsSideMenuUserLabel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, this.heading, this.subheading && index.h("div", { class: "subheading" }, this.subheading)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (index.h(index.Host, null, this.heading, this.subheading && index.h("div", { class: "subheading" }, this.subheading)));
+    }
 };
 TdsSideMenuUserLabel.style = sideMenuUserLabelCss;
 

package/dist/cjs/tds-side-menu-user.cjs.entry.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-705dca7c.js');
+const index = require('./index-ae4fbf97.js');
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
 
 const TdsSideMenuUser = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-    this.imgSrc = undefined;
-    this.imgAlt = undefined;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { name: "image" })), index.h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+        this.imgSrc = undefined;
+        this.imgAlt = undefined;
+    }
+    render() {
+        return (index.h(index.Host, null, index.h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { name: "image" })), index.h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+    }
 };
 TdsSideMenuUser.style = sideMenuUserCss;