@scania/tegel 1.3.3 → 1.4.0

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

@@ -1,42 +1,42 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.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) {
-    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) {
+        registerInstance(this, hostRef);
+        this.selected = false;
+        this.dropdownHasIcon = false;
+        this.collapsed = false;
     }
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-dropdown-has-icon': this.dropdownHasIcon,
-        'component-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return 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 (h(Host, { role: "listitem" }, h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-dropdown-has-icon': this.dropdownHasIcon,
+                'component-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuDropdownListItem.style = sideMenuDropdownListItemCss;
 

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

@@ -1,26 +1,26 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.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) {
-    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 (h(Host, { role: "list" }, h("div", { class: {
-        'state-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        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 (h(Host, { role: "list" }, h("div", { class: {
+                'state-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuDropdownList.style = sideMenuDropdownListCss;
 

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

@@ -1,63 +1,63 @@
-import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-6e6ff771.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) {
-    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 (h(Host, null, h("div", { class: {
-        'wrapper': true,
-        'state-open': this.getIsOpenState(),
-        'state-collapsed': this.collapsed,
-      } }, h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
-        this.open = !this.open;
-      } }, h("button", null, h("slot", { name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", null)))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        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 (h(Host, null, h("div", { class: {
+                'wrapper': true,
+                'state-open': this.getIsOpenState(),
+                'state-collapsed': this.collapsed,
+            } }, h("tds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+                this.open = !this.open;
+            } }, h("button", null, h("slot", { name: "icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "label" }), h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "label" }))), h("slot", null)))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuDropdown.style = sideMenuDropdownCss;
 

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

@@ -1,68 +1,68 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { d as dfs } from './dfs-3f5bd9e8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { d as dfs } from './dfs-1e574d5f.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) {
-    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(firstSlottedElement, searchPredicate);
-      if (foundElement) {
-        mutationCallback(foundElement);
-      }
+    constructor(hostRef) {
+        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(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 (h(Host, null, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-        'component-active': this.active,
-        'component-collapsed': this.collapsed,
-      } }, h("slot", null))));
-  }
-  get host() { return 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 (h(Host, null, h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+                'component-active': this.active,
+                'component-collapsed': this.collapsed,
+            } }, h("slot", null))));
+    }
+    get host() { return getElement(this); }
 };
 TdsSideMenuItem.style = sideMenuItemCss;
 

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.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) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("div", null)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, null, h("div", null)));
+    }
 };
 TdsSideMenuOverlay.style = sideMenuOverlayCss;
 

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

@@ -1,30 +1,30 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 
 const TdsSideMenuUserImage = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.src = undefined;
-    this.alt = undefined;
-  }
-  render() {
-    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.src = undefined;
+        this.alt = undefined;
+    }
+    render() {
+        return (h(Host, null, h("slot", null), this.src && 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) {
-    registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+    }
 };
 TdsSideMenuUserLabel.style = sideMenuUserLabelCss;
 

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

@@ -1,18 +1,18 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.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) {
-    registerInstance(this, hostRef);
-    this.heading = undefined;
-    this.subheading = undefined;
-    this.imgSrc = undefined;
-    this.imgAlt = undefined;
-  }
-  render() {
-    return (h(Host, null, h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+        this.imgSrc = undefined;
+        this.imgAlt = undefined;
+    }
+    render() {
+        return (h(Host, null, h("tds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("tds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+    }
 };
 TdsSideMenuUser.style = sideMenuUserCss;
 

package/dist/esm/tds-side-menu.entry.js

@@ -1,69 +1,77 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7dc8c41f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6e6ff771.js';
 
 const sideMenuCss = ":host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}}@media (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}aside .tds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
 
-const GRID_LG_BREAKPOINT = '992px';
+const GRID_LG_BREAKPOINT = 992;
 const TdsSideMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.tdsCollapse = createEvent(this, "tdsCollapse", 7);
-    this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
-    this.internalTdsSideMenuPropChange = createEvent(this, "internalTdsSideMenuPropChange", 6);
-    this.handleMatchesLgBreakpointChange = (e) => {
-      const isBelowLg = !e.matches;
-      if (isBelowLg) {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tdsCollapse = createEvent(this, "tdsCollapse", 7);
+        this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
+        this.internalTdsSideMenuPropChange = createEvent(this, "internalTdsSideMenuPropChange", 6);
+        this.handleMatchesLgBreakpointChange = (e) => {
+            const isBelowLg = !e.matches;
+            if (isBelowLg) {
+                this.collapsed = false;
+            }
+            else {
+                this.collapsed = this.initialCollapsedState;
+            }
+        };
+        this.open = false;
+        this.persistent = false;
         this.collapsed = false;
-      }
-    };
-    this.open = false;
-    this.persistent = false;
-    this.collapsed = false;
-    this.isUpperSlotEmpty = false;
-    this.isCollapsed = false;
-  }
-  connectedCallback() {
-    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
-    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
-    this.isCollapsed = this.collapsed;
-  }
-  componentDidLoad() {
-    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
-    const upperSlotElements = upperSlot.assignedElements();
-    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
-    if (!hasUpperSlotElements) {
-      this.isUpperSlotEmpty = true;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        this.initialCollapsedState = false;
     }
-  }
-  disconnectedCallback() {
-    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
-  }
-  onCollapsedChange(newVal) {
-    /** Emits the internal collapse event when the prop has changed. */
-    this.internalTdsSideMenuPropChange.emit({
-      changed: ['collapsed'],
-      collapsed: newVal,
-    });
-    this.isCollapsed = newVal;
-  }
-  collapsedSideMenuEventHandler(event) {
-    this.collapsed = event.detail.collapsed;
-  }
-  render() {
-    return (h(Host, { role: "navigation", class: {
-        'menu-opened': this.open,
-        'menu-persistent': this.persistent,
-        'menu-collapsed': this.collapsed,
-      } }, h("div", { class: {
-        'wrapper': true,
-        'state-upper-slot-empty': this.isUpperSlotEmpty,
-        'state-open': this.open,
-        'state-closed': !this.open,
-      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "collapsed": ["onCollapsedChange"]
-  }; }
+    connectedCallback() {
+        this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
+        this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+        this.isCollapsed = this.collapsed;
+        this.initialCollapsedState = this.collapsed;
+    }
+    componentDidLoad() {
+        const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+        const upperSlotElements = upperSlot.assignedElements();
+        const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+        if (!hasUpperSlotElements) {
+            this.isUpperSlotEmpty = true;
+        }
+        if (window.innerWidth < GRID_LG_BREAKPOINT) {
+            this.collapsed = false;
+        }
+    }
+    disconnectedCallback() {
+        this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+    }
+    onCollapsedChange(newVal) {
+        /** Emits the internal collapse event when the prop has changed. */
+        this.internalTdsSideMenuPropChange.emit({
+            changed: ['collapsed'],
+            collapsed: newVal,
+        });
+        this.isCollapsed = newVal;
+    }
+    collapsedSideMenuEventHandler(event) {
+        this.collapsed = event.detail.collapsed;
+    }
+    render() {
+        return (h(Host, { role: "navigation", class: {
+                'menu-opened': this.open,
+                'menu-persistent': this.persistent,
+                'menu-collapsed': this.collapsed,
+            } }, h("div", { class: {
+                'wrapper': true,
+                'state-upper-slot-empty': this.isUpperSlotEmpty,
+                'state-open': this.open,
+                'state-closed': !this.open,
+            } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "tds-side-menu-wrapper" }, h("ul", { class: `tds-side-menu-list tds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `tds-side-menu-list tds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "collapsed": ["onCollapsedChange"]
+    }; }
 };
 TdsSideMenu.style = sideMenuCss;