@scania/tegel 0.0.5 → 0.0.7

package/dist/components/sdds-navigation-tab.js

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sddsNavigationTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:\" \";position:absolute;bottom:-26px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
+
+const SddsNavigationTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
+  }
+  static get style() { return sddsNavigationTabCss; }
+}, [1, "sdds-navigation-tab", {
+    "disabled": [4],
+    "selected": [32],
+    "setSelected": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-navigation-tab"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-navigation-tab":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsNavigationTab$1);
+      }
+      break;
+  } });
+}
+
+const SddsNavigationTab = SddsNavigationTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsNavigationTab, defineCustomElement };

package/dist/components/sdds-navigation-tabs.js

@@ -13,95 +13,91 @@ const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     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;
@@ -127,21 +123,27 @@ const NavigationTabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       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 this; }
-  static get watchers() { return {
-    "selectedTab": ["handleSelectedTabChange"]
-  }; }
   static get style() { return navigationTabsCss; }
 }, [1, "sdds-navigation-tabs", {
     "modeVariant": [1, "mode-variant"],
+    "defaultSelectedIndex": [2, "default-selected-index"],
+    "selectedIndex": [514, "selected-index"],
     "showLeftScroll": [32],
     "showRightScroll": [32],
-    "selectedTab": [32],
     "selectTab": [64]
   }]);
 function defineCustomElement$1() {
@@ -167,5 +169,3 @@ const SddsNavigationTabs = NavigationTabs;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsNavigationTabs, defineCustomElement };
-
-//# sourceMappingURL=sdds-navigation-tabs.js.map

package/dist/components/sdds-popover-canvas.js

@@ -1,139 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.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}";
-
-const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.isShown = false;
-          }
-          else {
-            this.isShown = true;
-          }
-        });
-      }
-    };
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = null;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
-  }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "show": ["onShowChange"],
-    "referenceEl": ["onReferenceElChange"]
-  }; }
-  static get style() { return popoverCanvasCss; }
-}, [1, "sdds-popover-canvas", {
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "modifiers": [16],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32],
-    "isShown": [32]
-  }, [[8, "click", "onAnyClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-popover-canvas"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-popover-canvas":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PopoverCanvas);
-      }
-      break;
-  } });
-}
+import { P as PopoverCanvas, d as defineCustomElement$1 } from './popover-canvas.js';
 
 const SddsPopoverCanvas = PopoverCanvas;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsPopoverCanvas, defineCustomElement };
-
-//# sourceMappingURL=sdds-popover-canvas.js.map

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

@@ -107,5 +107,3 @@ const SddsPopoverMenu = PopoverMenu;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsPopoverMenu, defineCustomElement };
-
-//# sourceMappingURL=sdds-popover-menu.js.map

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

@@ -6,7 +6,13 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    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();
@@ -17,14 +23,9 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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 this; }
   static get style() { return radioButtonComponentCss; }
@@ -54,5 +55,3 @@ const SddsRadioButton = RadioButton;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsRadioButton, defineCustomElement };
-
-//# sourceMappingURL=sdds-radio-button.js.map

package/dist/components/sdds-side-menu-close-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuCloseButton extends Components.SddsSideMenuCloseButton, HTMLElement {}
+export const SddsSideMenuCloseButton: {
+  prototype: SddsSideMenuCloseButton;
+  new (): SddsSideMenuCloseButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  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 this; }
+  static get style() { return sideMenuCloseButtonCss; }
+}, [1, "sdds-side-menu-close-button"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-close-button", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-close-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCloseButton);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCloseButton = SideMenuCloseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCloseButton, defineCustomElement };

package/dist/components/sdds-side-menu-collapse-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuCollapseButton extends Components.SddsSideMenuCollapseButton, HTMLElement {}
+export const SddsSideMenuCollapseButton: {
+  prototype: SddsSideMenuCollapseButton;
+  new (): SddsSideMenuCollapseButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './side-menu-item.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return sideMenuCollapseButtonCss; }
+}, [1, "sdds-side-menu-collapse-button", {
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-collapse-button", "sdds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-collapse-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCollapseButton);
+      }
+      break;
+    case "sdds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCollapseButton = SideMenuCollapseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCollapseButton, defineCustomElement };

package/dist/components/sdds-side-menu-dropdown-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuDropdownListItem extends Components.SddsSideMenuDropdownListItem, HTMLElement {}
+export const SddsSideMenuDropdownListItem: {
+  prototype: SddsSideMenuDropdownListItem;
+  new (): SddsSideMenuDropdownListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return sideMenuDropdownListItemCss; }
+}, [1, "sdds-side-menu-dropdown-list-item", {
+    "selected": [4],
+    "dropdownHasIcon": [32],
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandeler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuDropdownListItem);
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuDropdownListItem = SideMenuDropdownListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuDropdownListItem, defineCustomElement };

package/dist/components/sdds-side-menu-dropdown-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuDropdownList extends Components.SddsSideMenuDropdownList, HTMLElement {}
+export const SddsSideMenuDropdownList: {
+  prototype: SddsSideMenuDropdownList;
+  new (): SddsSideMenuDropdownList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;