@scania/tegel 0.0.5 → 0.0.7

package/dist/esm/sdds-navigation-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";
 
@@ -10,95 +10,91 @@ const NavigationTabs = class {
     this.componentWidth = 0; // visible width of this component
     this.buttonsWidth = 0; // total width of all nav items combined
     this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+    this.addResizeObserver = () => {
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          const componentWidth = entry.contentRect.width;
+          let buttonsWidth = 0;
+          const navButtons = Array.from(this.host.children);
+          navButtons.forEach((navButton) => {
+            const style = window.getComputedStyle(navButton);
+            buttonsWidth +=
+              navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+            navButton.classList.add('sdds-navigation-tabs-tab');
+          });
+          this.componentWidth = componentWidth;
+          this.buttonsWidth = buttonsWidth;
+          this.scrollWidth = buttonsWidth - componentWidth;
+          if (this.buttonsWidth > this.componentWidth) {
+            this.evaluateScrollButtons();
+          }
+          else {
+            this.showLeftScroll = false;
+            this.showRightScroll = false;
+          }
+        });
+      });
+      resizeObserver.observe(this.navWrapperElement);
+    };
+    this.addEventListenerToTabs = () => {
+      this.children = Array.from(this.host.children);
+      this.children = this.children.map((item, index) => {
+        item.addEventListener('click', () => {
+          const sddsChangeEvent = this.sddsChange.emit({
+            selectedTabIndex: this.children.indexOf(item)
+          });
+          if (!sddsChangeEvent.defaultPrevented) {
+            if (!item.disabled) {
+              this.children.forEach((element) => element.setSelected(false));
+              item.setSelected(true);
+              this.selectedIndex = index;
+              this.sddsChange.emit({
+                selectedTabIndex: this.selectedIndex,
+              });
+            }
+          }
+        });
+        return item;
+      });
+    };
+    this.componentDidLoad = () => {
+      if (this.selectedIndex === undefined) {
+        this.addEventListenerToTabs();
+        this.children[this.defaultSelectedIndex].setSelected(true);
+        this.selectedIndex = this.defaultSelectedIndex;
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+      else {
+        this.children[this.selectedIndex].setSelected(true);
+        this.sddsChange.emit({
+          selectedTabIndex: this.selectedIndex,
+        });
+      }
+    };
     this.modeVariant = 'primary';
+    this.defaultSelectedIndex = 0;
+    this.selectedIndex = undefined;
     this.showLeftScroll = false;
     this.showRightScroll = false;
-    this.selectedTab = undefined;
   }
-  /** Selects a tab based on tabindex, will not select a disabled tab. */
+  /** Sets the passed tabindex as the selected tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
-      this.children.forEach((element) => element.removeAttribute('selected'));
+      this.children.forEach((element) => element.setSelected(false));
       this.children = this.children.map((element, index) => {
         if (index === tabIndex) {
-          element.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: element.innerText,
-            tabIndex: index,
-          };
+          element.setSelected(true);
+          this.selectedIndex = tabIndex;
         }
         return element;
       });
     }
     return {
-      selectedTab: this.selectedTab.tab,
-      selectedTabIndex: this.selectedTab.tabIndex,
+      selectedTabIndex: this.selectedIndex,
     };
   }
-  handleSelectedTabChange() {
-    this.host.setAttribute('selected-tab', this.selectedTab.tab);
-    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);
-    this.sddsChange.emit({
-      selectedTab: this.selectedTab,
-    });
-  }
-  connectedCallback() {
-    this.children = Array.from(this.host.children);
-    this.children = this.children.map((item, index) => {
-      item.addEventListener('click', () => {
-        if (!item.disabled) {
-          this.children.forEach((element) => element.removeAttribute('selected'));
-          item.setAttribute('selected', '');
-          this.selectedTab = {
-            tab: item.innerText,
-            tabIndex: index,
-          };
-        }
-      });
-      if (index === 0) {
-        item.classList.add('first');
-      }
-      if (index === this.children.length - 1) {
-        item.classList.add('last');
-      }
-      if (item.selected) {
-        this.selectedTab = {
-          tab: item.innerText,
-          tabIndex: index,
-        };
-      }
-      return item;
-    });
-    this.children = Array.from(this.host.children);
-    this.children[0].classList.add('first');
-    this.children[this.children.length - 1].classList.add('last');
-  }
-  componentDidLoad() {
-    const resizeObserver = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        const componentWidth = entry.contentRect.width;
-        let buttonsWidth = 0;
-        const navButtons = Array.from(this.host.children);
-        navButtons.forEach((navButton) => {
-          const style = window.getComputedStyle(navButton);
-          buttonsWidth +=
-            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-          navButton.classList.add('sdds-navigation-tabs-tab');
-        });
-        this.componentWidth = componentWidth;
-        this.buttonsWidth = buttonsWidth;
-        this.scrollWidth = buttonsWidth - componentWidth;
-        if (this.buttonsWidth > this.componentWidth) {
-          this.evaluateScrollButtons();
-        }
-        else {
-          this.showLeftScroll = false;
-          this.showRightScroll = false;
-        }
-      });
-    });
-    resizeObserver.observe(this.navWrapperElement);
-  }
   scrollRight() {
     const scroll = this.navWrapperElement.scrollLeft;
     this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
@@ -124,18 +120,21 @@ const NavigationTabs = class {
       this.showLeftScroll = true;
     }
   }
+  connectedCallback() {
+    this.children = Array.from(this.host.children);
+    this.children[0].classList.add('first');
+    this.children[this.children.length - 1].classList.add('last');
+  }
+  componentDidRender() {
+    this.addResizeObserver();
+  }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { role: "list", class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
       } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
   }
   get host() { return getElement(this); }
-  static get watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"]
-  }; }
 };
 NavigationTabs.style = navigationTabsCss;
 
 export { NavigationTabs as sdds_navigation_tabs };
-
-//# sourceMappingURL=sdds-navigation-tabs.entry.js.map

package/dist/esm/sdds-popover-canvas.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
 import { c as createPopper } from './popper-f860750c.js';
 
 const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";
@@ -105,5 +105,3 @@ const PopoverCanvas = class {
 PopoverCanvas.style = popoverCanvasCss;
 
 export { PopoverCanvas as sdds_popover_canvas };
-
-//# sourceMappingURL=sdds-popover-canvas.entry.js.map

package/dist/esm/sdds-popover-menu.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
 import { c as createPopper } from './popper-f860750c.js';
 
 const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";
@@ -79,5 +79,3 @@ const PopoverMenu = class {
 PopoverMenu.style = popoverMenuCss;
 
 export { PopoverMenu as sdds_popover_menu };
-
-//# sourceMappingURL=sdds-popover-menu.entry.js.map

package/dist/esm/sdds-radio-button.entry.js

@@ -1,11 +1,17 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdfb114c.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-2d8c4bc9.js';
 
 const radioButtonComponentCss = ".sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
 
 const RadioButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.sddsChange = createEvent(this, "sddsChange", 7);
+    this.sddsChange = createEvent(this, "sddsChange", 6);
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
     this.name = undefined;
     this.value = undefined;
     this.radioId = crypto.randomUUID();
@@ -16,19 +22,12 @@ const RadioButton = class {
   render() {
     return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
       // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy} 
+      // aria-labelledby={this.ariaLabelledBy}
       // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => {
-        this.sddsChange.emit({
-          radioId: this.radioId,
-          value: this.value,
-        });
-      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
+      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
   get host() { return getElement(this); }
 };
 RadioButton.style = radioButtonComponentCss;
 
 export { RadioButton as sdds_radio_button };
-
-//# sourceMappingURL=sdds-radio-button.entry.js.map

package/dist/esm/sdds-side-menu-close-button.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { i as inheritAriaAttributes } from './utils-a3c1c64a.js';
+
+const sideMenuCloseButtonCss = ":host{opacity:0;transition:opacity 0.15s ease}:host button{height:64px;width:100%;text-align:left;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color);display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color)}";
+
+const SideMenuCloseButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
+  }
+  get host() { return getElement(this); }
+};
+SideMenuCloseButton.style = sideMenuCloseButtonCss;
+
+export { SideMenuCloseButton as sdds_side_menu_close_button };

package/dist/esm/sdds-side-menu-collapse-button.entry.js

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+
+const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--sdds-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(--sdds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
+
+const SideMenuCollapseButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0" }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("sdds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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" })), "Collapse")))));
+  }
+  get host() { return getElement(this); }
+};
+SideMenuCollapseButton.style = sideMenuCollapseButtonCss;
+
+export { SideMenuCollapseButton as sdds_side_menu_collapse_button };

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

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.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(--sdds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-header-nav-item-dropdown-opened-background);color:var(--sdds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--sdds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--sdds-nav-item-border-color-active);padding-left:20px;background-color:var(--sdds-nav-item-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 SideMenuDropdownListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selected = false;
+    this.dropdownHasIcon = false;
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  componentDidLoad() {
+    var _a;
+    const dropdownEl = this.host.closest('sdds-side-menu-dropdown');
+    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="button-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()) === 'sdds-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); }
+};
+SideMenuDropdownListItem.style = sideMenuDropdownListItemCss;
+
+export { SideMenuDropdownListItem as sdds_side_menu_dropdown_list_item };

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

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+
+const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--sdds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}";
+
+const SideMenuDropdownList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "list" }, h("div", { class: {
+        'state-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+SideMenuDropdownList.style = sideMenuDropdownListCss;
+
+export { SideMenuDropdownList as sdds_side_menu_dropdown_list };

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

@@ -0,0 +1,64 @@
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-2d8c4bc9.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(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-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(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+
+const SideMenuDropdown = 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('sdds-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("sdds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+        this.open = !this.open;
+      } }, h("button", null, h("slot", { name: "button-icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "button-label" }), h("sdds-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: "button-label" }))), h("slot", null)))));
+  }
+  get host() { return getElement(this); }
+};
+SideMenuDropdown.style = sideMenuDropdownCss;
+
+export { SideMenuDropdown as sdds_side_menu_dropdown };

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

@@ -0,0 +1,69 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { d as dfs } from './utils-a3c1c64a.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(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-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 SddsSideMenuItem = 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);
+      }
+    }
+  }
+  /**
+   * 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() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => {
+        element.classList.add('__sdds-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__sdds-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 = this.host.closest('sdds-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);
+  }
+  collapsedSideMenuEventHandeler(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); }
+};
+SddsSideMenuItem.style = sideMenuItemCss;
+
+export { SddsSideMenuItem as sdds_side_menu_item };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+
+const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
+
+const SideMenuOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("div", null)));
+  }
+};
+SideMenuOverlay.style = sideMenuOverlayCss;
+
+export { SideMenuOverlay as sdds_side_menu_overlay };

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

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+
+const SideMenuUserImage = 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 })));
+  }
+};
+SideMenuUserImage.style = sideMenuUserImageCss;
+
+const sideMenuUserLabelCss = ":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";
+
+const SideMenuUserLabel = 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)));
+  }
+};
+SideMenuUserLabel.style = sideMenuUserLabelCss;
+
+export { SideMenuUserImage as sdds_side_menu_user_image, SideMenuUserLabel as sdds_side_menu_user_label };

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

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";
+
+const SideMenuUser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.imgSrc = undefined;
+    this.imgAlt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("sdds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("sdds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+  }
+};
+SideMenuUser.style = sideMenuUserCss;
+
+export { SideMenuUser as sdds_side_menu_user };