@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/radio-button/radio-button.css

@@ -1,40 +1,40 @@
 :root,
-.sdds-mode-light {
-  --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);
+.tds-mode-light {
+  --tds-radio-button-color: var(--tds-grey-958);
+  --tds-radio-button-interaction-01: var(--tds-blue-800);
+  --tds-radio-button-interaction-02: var(--tds-white);
+  --tds-radio-button-background-hover: var(--tds-blue-800);
+  --tds-radio-button-background-focus: var(--tds-blue-800);
+  --tds-radio-button-disabled: var(--tds-grey-600);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-before: var(--tds-grey-700);
 }
 
-.sdds-mode-dark {
-  --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);
+.tds-mode-dark {
+  --tds-radio-button-color: var(--tds-white);
+  --tds-radio-button-interaction-01: var(--tds-white);
+  --tds-radio-button-interaction-02: var(--tds-grey-958);
+  --tds-radio-button-background-hover: var(--tds-white);
+  --tds-radio-button-background-focus: var(--tds-white);
+  --tds-radio-button-disabled: var(--tds-grey-600);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
 }
 
-.sdds-radio-button {
+.tds-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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-radio-button-color);
 }
-.sdds-radio-button * {
+.tds-radio-button * {
   box-sizing: border-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio] {
+.tds-radio-button .tds-form-input[type=radio] {
   appearance: none;
   outline: none;
   margin: 0;
@@ -47,69 +47,69 @@
   flex-shrink: 0;
   align-self: flex-start;
 }
-.sdds-radio-button .sdds-form-input[type=radio] + label {
-  padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);
+.tds-radio-button .tds-form-input[type=radio] + label {
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
   cursor: pointer;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::before, .sdds-radio-button .sdds-form-input[type=radio]::after {
+.tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
   content: "";
   position: absolute;
   border-radius: 50%;
   box-sizing: border-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::before {
+.tds-radio-button .tds-form-input[type=radio]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
 }
-.sdds-radio-button .sdds-form-input[type=radio]::after {
-  border: 1px solid var(--sdds-radio-button-interaction-01);
-  background-color: var(--sdds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]::after {
+  border: 1px solid var(--tds-radio-button-interaction-01);
+  background-color: var(--tds-radio-button-interaction-02);
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:hover::before {
-  background-color: var(--sdds-radio-button-background-hover);
+.tds-radio-button .tds-form-input[type=radio]:hover::before {
+  background-color: var(--tds-radio-button-background-hover);
   opacity: 0.12;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:focus::before {
-  background-color: var(--sdds-radio-button-background-focus);
+.tds-radio-button .tds-form-input[type=radio]:focus::before {
+  background-color: var(--tds-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 .sdds-form-input[type=radio]:disabled, .sdds-radio-button .sdds-form-input[type=radio].disabled {
+.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
   cursor: not-allowed;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled::after, .sdds-radio-button .sdds-form-input[type=radio].disabled::after {
-  border-color: var(--sdds-radio-button-border-color-disabled-after);
-  background-color: var(--sdds-radio-button-interaction-02);
+.tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
+  border-color: var(--tds-radio-button-border-color-disabled-after);
+  background-color: var(--tds-radio-button-interaction-02);
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled + label, .sdds-radio-button .sdds-form-input[type=radio].disabled + label {
-  color: var(--sdds-radio-button-disabled);
+.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
+  color: var(--tds-radio-button-disabled);
   cursor: not-allowed;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio].disabled:hover::before {
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
   display: none;
   opacity: 1;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked::after {
-  border: 4px solid var(--sdds-radio-button-interaction-01);
+.tds-radio-button .tds-form-input[type=radio]:checked::after {
+  border: 4px solid var(--tds-radio-button-interaction-01);
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled:hover::before, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::before {
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
   display: block;
   width: 16px;
   height: 16px;
   left: 4px;
   top: 4px;
-  border: 1px solid var(--sdds-radio-button-color-disabled-before);
+  border: 1px solid var(--tds-radio-button-color-disabled-before);
   box-sizing: content-box;
 }
-.sdds-radio-button .sdds-form-input[type=radio]:checked:disabled::after, .sdds-radio-button .sdds-form-input[type=radio]:checked.disabled::after {
-  border: 4px solid var(--sdds-radio-button-interaction-02);
-  background-color: var(--sdds-radio-button-color-disabled-after);
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
+  border: 4px solid var(--tds-radio-button-interaction-02);
+  background-color: var(--tds-radio-button-color-disabled-after);
   left: 5px;
   top: 5px;
 }

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

@@ -1,8 +1,8 @@
 import { h } from '@stencil/core';
-export class RadioButton {
+export class TdsRadioButton {
   constructor() {
     this.handleChange = () => {
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         radioId: this.radioId,
         value: this.value,
       });
@@ -15,13 +15,9 @@ export class RadioButton {
     this.disabled = false;
   }
   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-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+    return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
-  static get is() { return "sdds-radio-button"; }
+  static get is() { return "tds-radio-button"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -145,14 +141,14 @@ export class RadioButton {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique Radio Button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+          "text": "Sends unique Radio Button identifier and status when it is checked.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
           "original": "{\n    radioId: string;\n    value: string;\n  }",

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css

@@ -0,0 +1,26 @@
+: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(--tds-sidebar-side-menu-background-cover);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host button:hover {
+  cursor: pointer;
+  background-color: var(--tds-sidebar-item-state-hover);
+}
+:host button:focus-visible {
+  cursor: pointer;
+  border: 1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../utils/utils';
+export class TdsSideMenuCloseButton {
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("tds-icon", { name: "cross", size: "20px" }))));
+  }
+  static get is() { return "tds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.css

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  position: sticky;
+  bottom: 0;
+  display: none;
+  height: 68px;
+  border-top: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .icon {
+  transform: rotateZ(90deg);
+  transition: all 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+}
+:host .state-collapsed .icon {
+  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
+  color: var(--tds-sidebar-side-menu-single-item-color);
+  margin-left: 0;
+  position: absolute;
+  left: 50%;
+}
+
+@media (min-width: 992px) {
+  :host {
+    display: block;
+  }
+}

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

@@ -0,0 +1,110 @@
+import { h, Host } from '@stencil/core';
+export class TdsSideMenuCollapseButton {
+  constructor() {
+    this.handleClick = () => {
+      /** Emit a public event that the user can prevent. */
+      const tdsCollapseEvent = this.tdsCollapse.emit({
+        collapsed: !this.collapsed,
+      });
+      /** If the public event was not prevented. */
+      if (!tdsCollapseEvent.defaultPrevented) {
+        /** Emit internal event that is listened to by other side-menu components */
+        this.collapsed = !this.collapsed;
+        this.internalTdsCollapse.emit({
+          collapsed: this.collapsed,
+        });
+      }
+    };
+    this.collapsed = false;
+  }
+  collapseSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0", onClick: () => {
+        this.handleClick();
+      } }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("tds-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" })), h("slot", null))))));
+  }
+  static get is() { return "tds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsCollapse",
+        "name": "tdsCollapse",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event that is broadcast when the collapse button is clicked.\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }, {
+        "method": "internalTdsCollapse",
+        "name": "internalTdsCollapse",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Event that is broadcast when the internal collapse state changes. Contains the future of the collapse state."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CollapseEvent",
+          "resolved": "{ collapsed: boolean; }",
+          "references": {
+            "CollapseEvent": {
+              "location": "import",
+              "path": "../side-menu"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsSideMenuPropChange",
+        "method": "collapseSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css

@@ -0,0 +1,42 @@
+: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-grey-958);
+}
+: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;
+}

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

@@ -0,0 +1,165 @@
+import { Fragment, h, Host } from '@stencil/core';
+export class TdsSideMenuDropdown {
+  constructor() {
+    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.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: "button-icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "button-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: "button-label" }))), h("slot", null)))));
+  }
+  static get is() { return "tds-side-menu-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "defaultOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown should be open from the start."
+        },
+        "attribute": "default-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "hoverState": {},
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsSideMenuPropChange",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerenter",
+        "method": "onEventPointerEnter",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusin",
+        "method": "onEventFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerleave",
+        "method": "onEventPointerLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusout",
+        "method": "onEventBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.css

@@ -0,0 +1,14 @@
+: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);
+}

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

@@ -0,0 +1,44 @@
+import { Host, h } from '@stencil/core';
+export class TdsSideMenuDropdownList {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('tds-side-menu');
+  }
+  render() {
+    return (h(Host, { role: "list" }, h("div", { class: {
+        'state-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "tds-side-menu-dropdown-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "internalTdsSideMenuPropChange",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}