@scania/tegel 0.0.52 → 0.0.61

package/dist/collection/components/{tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js → header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.js}

@@ -1,28 +1,30 @@
-import { Host, h } from '@stencil/core';
-export class SddsNavigationTabsButton {
+import { h, Host } from '@stencil/core';
+export class HeaderDropdownListItem {
   constructor() {
-    this.disabled = false;
     this.selected = false;
+    this.type = 'md';
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
   }
-  static get is() { return "sdds-navigation-tabs-button"; }
+  static get is() { return "sdds-header-dropdown-list-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["sdds-navigation-tabs-button.scss"]
+      "$": ["header-dropdown-list-item.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["sdds-navigation-tabs-button.css"]
+      "$": ["header-dropdown-list-item.css"]
     };
   }
   static get properties() {
     return {
-      "disabled": {
+      "selected": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -34,31 +36,32 @@ export class SddsNavigationTabsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables the tab."
+          "text": "If the link should appear selected."
         },
-        "attribute": "disabled",
+        "attribute": "selected",
         "reflect": false,
         "defaultValue": "false"
       },
-      "selected": {
-        "type": "boolean",
+      "type": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\"",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Marks the tab as the selected one."
+          "text": "The type of the list."
         },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'md'"
       }
     };
   }
+  static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-navigation-tabs-button.js.map
+//# sourceMappingURL=header-dropdown-list-item.js.map

package/dist/collection/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown-list-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,sBAAsB;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;UACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;SACpC;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-item',\n  styleUrl: 'header-dropdown-list-item.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListItem {\n  @Element() host: HTMLElement;\n\n  /** If the link should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** The type of the list. */\n  @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.css

@@ -0,0 +1,32 @@
+:host {
+  background-color: var(--sdds-header-avatar-item-background);
+  display: flex;
+  height: 84px;
+}
+:host .user-box {
+  gap: 16px;
+  width: 100%;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+}
+:host img,
+:host slot[name=image]::slotted(*) {
+  width: 34px;
+  border-radius: 100%;
+}
+:host .user-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .user-content .header {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+}
+:host .user-content .subheader {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-header-avatar-item-color);
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.js

@@ -0,0 +1,98 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdownListLgUser {
+  constructor() {
+    this.imgUrl = undefined;
+    this.imgAlt = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "image" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.heading, h("slot", { name: "heading" })), h("div", { class: "subheader" }, this.subheading, h("slot", { name: "subheading" }))))));
+  }
+  static get is() { return "sdds-header-dropdown-list-user"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown-list-user.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown-list-user.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "imgUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image URL."
+        },
+        "attribute": "img-url",
+        "reflect": false
+      },
+      "imgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Image alt text."
+        },
+        "attribute": "img-alt",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading, usually the users first name and last name."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheading."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-dropdown-list-user.js.map

package/dist/collection/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown-list-user.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,wBAAwB;;;;;;;EAenC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WAAK,KAAK,EAAC,UAAU;QAClB,IAAI,CAAC,MAAM,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI;QAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ;QAC1B,WAAK,KAAK,EAAC,cAAc;UACvB,WAAK,KAAK,EAAC,QAAQ;YAChB,IAAI,CAAC,OAAO;YACb,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;UACN,WAAK,KAAK,EAAC,WAAW;YACnB,IAAI,CAAC,UAAU;YAChB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-user',\n  styleUrl: 'header-dropdown-list-user.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListLgUser {\n  /** Image URL. */\n  @Prop() imgUrl: string;\n\n  /** Image alt text. */\n  @Prop() imgAlt: string;\n\n  /** Heading, usually the users first name and last name. */\n  @Prop() heading: string;\n\n  /** Subheading. */\n  @Prop() subheading: string;\n\n  @Element() host: HTMLElement;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div class=\"user-box\">\n          {this.imgUrl && <img src={this.imgUrl} alt={this.imgAlt} />}\n          <slot name=\"image\"></slot>\n          <div class=\"user-content\">\n            <div class=\"header\">\n              {this.heading}\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"subheader\">\n              {this.subheading}\n              <slot name=\"subheading\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-hamburger/header-hamburger.css

@@ -0,0 +1,25 @@
+/*
+  Contains spacing variables for the layout
+*/
+:host {
+  color: var(--sdds-white);
+}
+:host sdds-header-item {
+  display: block;
+}
+:host .icon {
+  position: relative;
+  margin-left: -6px;
+  left: 3px;
+  transition: all 0.2s ease-in-out;
+}
+
+@media screen and (min-width: 992px) {
+  :host sdds-header-item {
+    display: none;
+  }
+
+  :host([persistent]) sdds-header-item {
+    display: block;
+  }
+}

package/dist/collection/components/header/webcomponent/header-hamburger/header-hamburger.js

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderHamburger {
+  render() {
+    const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("sdds-icon", { class: "icon", name: "burger", size: "20px" })))));
+  }
+  static get is() { return "sdds-header-hamburger"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-hamburger.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-hamburger.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-hamburger.js.map

package/dist/collection/components/header/webcomponent/header-hamburger/header-hamburger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-hamburger.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-hamburger/header-hamburger.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,eAAe;EAG1B,MAAM;IACJ,MAAM,oBAAoB,qBACrB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH;QACE,8BAAY,oBAAoB;UAC9B,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAa,CACvD,CACQ,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-hamburger',\n  styleUrl: 'header-hamburger.scss',\n  shadow: true,\n})\nexport class HeaderHamburger {\n  @Element() host: HTMLElement;\n\n  render() {\n    const inheritedButtonProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <sdds-header-item>\n          <button {...inheritedButtonProps}>\n            <sdds-icon class=\"icon\" name=\"burger\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-item/header-item.css

@@ -0,0 +1,41 @@
+:host ::slotted(button),
+:host ::slotted(a) {
+  all: unset;
+  box-sizing: border-box;
+  background-color: var(--sdds-header-background);
+  border-right: 1px solid var(--sdds-header--basic-element-border);
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:host ::slotted(button) *,
+:host ::slotted(a) * {
+  box-sizing: border-box;
+}
+:host ::slotted(button:hover),
+:host ::slotted(a:hover) {
+  background-color: var(--sdds-header--basic-element-background-hover);
+}
+:host ::slotted(button:focus-visible),
+:host ::slotted(a:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .component-active ::slotted(button),
+:host .component-active ::slotted(a) {
+  background-color: var(--sdds-header--basic-element-background-open);
+  color: var(--sdds-header-nav-item-dropdown-opened-color);
+  border-color: var(--sdds-header--basic-element-border-open);
+}
+:host .component-selected:not(.component-active) ::slotted(button),
+:host .component-selected:not(.component-active) ::slotted(a) {
+  background-color: var(--sdds-header--basic-element-background-selected);
+  padding-top: 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 4px;
+  border-bottom-color: var(--sdds-nav-item-border-color-active);
+}

package/dist/collection/components/header/webcomponent/header-item/header-item.js

@@ -0,0 +1,96 @@
+import { h, Host } from '@stencil/core';
+import { dfs } from '../../../../utils/utils';
+export class HeaderItem {
+  constructor() {
+    this.active = false;
+    this.selected = 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-header-item-icon');
+      this.updateSlotted(isIconOrSvg, addIconClass);
+      const isImage = (element) => element.tagName.toLowerCase() === 'img';
+      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');
+      this.updateSlotted(isImage, addImageClass);
+    }
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  render() {
+    return (h(Host, null, h("sdds-core-header-item", { class: {
+        'component-active': this.active,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-item.js.map

package/dist/collection/components/header/webcomponent/header-item/header-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-item/header-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,UAAU;;kBAKK,KAAK;oBAGH,KAAK;;EAIjC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;EACH,CAAC;EAED;;KAEG;EACH,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,EAAE,CAC9B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;MACnF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;MAE9C,MAAM,OAAO,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MACrE,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACrF,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC5C;EACH,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;EACzE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,6BACE,KAAK,EAAE;UACL,kBAAkB,EAAE,IAAI,CAAC,MAAM;UAC/B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;SACpC;QAED,eAAa,CACS,CACnB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-item',\n  styleUrl: 'header-item.scss',\n  shadow: true,\n})\nexport class HeaderItem {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  /** If the button should appear selected. */\n  @Prop() selected: boolean = false;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');\n      this.updateSlotted(isIconOrSvg, addIconClass);\n\n      const isImage = (element) => element.tagName.toLowerCase() === 'img';\n      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');\n      this.updateSlotted(isImage, addImageClass);\n    }\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  render() {\n    return (\n      <Host>\n        <sdds-core-header-item\n          class={{\n            'component-active': this.active,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </sdds-core-header-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher/header-launcher.css

@@ -0,0 +1,38 @@
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host .wrapper {
+  height: var(--sdds-header-height);
+  position: relative;
+}
+:host .wrapper .menu {
+  /** Should control only height, position, and overflow here. 
+    Width and appearance are set inside nested components */
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--sdds-header-height));
+  box-shadow: var(--sdds-nav-dropdown-menu-box);
+  background-color: var(--sdds-header-app-launcher-menu-background);
+  border-radius: 0;
+}
+:host .wrapper .menu::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+:host .wrapper .menu::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+:host .wrapper .menu ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@media all and (max-width: 384px) {
+  :host .wrapper .menu {
+    width: 100vw;
+  }
+}
+:host .wrapper.state-list-type-menu .menu {
+  height: calc(100vh - var(--sdds-header-height));
+}
+:host .wrapper.state-open .button {
+  position: relative;
+  z-index: 801;
+}

package/dist/collection/components/header/webcomponent/header-launcher/header-launcher.js

@@ -0,0 +1,78 @@
+import { Host, h } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderLauncher {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+    this.open = false;
+    this.buttonEl = undefined;
+    this.hasListTypeMenu = false;
+  }
+  onAnyClick(event) {
+    // 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.open = false;
+    }
+  }
+  componentDidLoad() {
+    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])');
+    const slottedElements = slotElement.assignedElements();
+    const hasListTypeMenu = slottedElements.some((element) => element.tagName.toLowerCase() === 'sdds-header-launcher-list');
+    if (hasListTypeMenu) {
+      this.hasListTypeMenu = true;
+    }
+  }
+  toggleLauncher() {
+    this.open = !this.open;
+  }
+  render() {
+    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
+    const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
+        this.toggleLauncher();
+      }, 'ref': (el) => {
+        this.buttonEl = el;
+      } });
+    return (h(Host, null, h("div", { class: {
+        'wrapper': true,
+        'state-open': this.open,
+        'state-list-type-menu': this.hasListTypeMenu,
+      } }, h("sdds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: [],
+          },
+        },
+      ] }, h("slot", null))))));
+  }
+  static get is() { return "sdds-header-launcher"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher.css"]
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "buttonEl": {},
+      "hasListTypeMenu": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onAnyClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=header-launcher.js.map

package/dist/collection/components/header/webcomponent/header-launcher/header-launcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher/header-launcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAO5E,MAAM,OAAO,cAAc;;IASjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;gBANlB,KAAK;;2BAIH,KAAK;;EAOhC,UAAU,CAAC,KAAiB;IAC1B,oGAAoG;IACpG,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IAC9F,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC;IACvD,MAAM,eAAe,GAAG,eAAe,CAAC,IAAI,CAC1C,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,CAC3E,CAAC;IAEF,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;EACH,CAAC;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC;IAEhG,MAAM,gBAAgB,mCACjB,IAAI,CAAC,cAAc,KACtB,eAAe,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAC/B,eAAe,EAAE,YAAY,IAAI,CAAC,IAAI,EAAE,EACxC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,SAAS,EAAE,GAAG,EAAE;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;MACxB,CAAC,EACD,KAAK,EAAE,CAAC,EAAuC,EAAE,EAAE;QACjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;MACrB,CAAC,GACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,YAAY,EAAE,IAAI,CAAC,IAAI;UACvB,sBAAsB,EAAE,IAAI,CAAC,eAAe;SAC7C;QAED,mDAAiC,gBAAgB,EAAgC;QAEhF,IAAI,CAAC,QAAQ,IAAI,CAChB,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;YACT;cACE,IAAI,EAAE,MAAM;cACZ,OAAO,EAAE;gBACP,kBAAkB,EAAE,EAAE;eACvB;aACF;WACF;UAED,eAAa,CACO,CACvB,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Listen, State } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher',\n  styleUrl: 'header-launcher.scss',\n  shadow: true,\n})\nexport class HeaderLauncher {\n  @Element() host: HTMLElement;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLSddsHeaderLauncherButtonElement;\n\n  @State() hasListTypeMenu = false;\n\n  private uuid: string = crypto.randomUUID();\n\n  private ariaAttributes: Attributes;\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  componentDidLoad() {\n    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const slottedElements = slotElement.assignedElements();\n    const hasListTypeMenu = slottedElements.some(\n      (element) => element.tagName.toLowerCase() === 'sdds-header-launcher-list',\n    );\n\n    if (hasListTypeMenu) {\n      this.hasListTypeMenu = true;\n    }\n  }\n\n  toggleLauncher() {\n    this.open = !this.open;\n  }\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host, ['role']) };\n\n    const buttonAttributes = {\n      ...this.ariaAttributes,\n      'aria-expanded': `${this.open}`,\n      'aria-controls': `launcher-${this.uuid}`,\n      'class': 'button',\n      'active': this.open,\n      'onClick': () => {\n        this.toggleLauncher();\n      },\n      'ref': (el: HTMLSddsHeaderLauncherButtonElement) => {\n        this.buttonEl = el;\n      },\n    };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.open,\n            'state-list-type-menu': this.hasListTypeMenu,\n          }}\n        >\n          <sdds-header-launcher-button {...buttonAttributes}></sdds-header-launcher-button>\n\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-launcher-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-button/header-launcher-button.css

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+:host sdds-header-item {
+  display: block;
+}
+:host .icon {
+  position: relative;
+  margin-left: -6px;
+  left: 3px;
+  transition: all 0.2s ease-in-out;
+}

package/dist/collection/components/header/webcomponent/header-launcher-button/header-launcher-button.js

@@ -0,0 +1,48 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderLauncherButton {
+  constructor() {
+    this.active = false;
+  }
+  render() {
+    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
+    const buttonProps = Object.assign({}, this.ariaAttributes);
+    return (h(Host, null, h("sdds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+  }
+  static get is() { return "sdds-header-launcher-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-launcher-button.js.map

package/dist/collection/components/header/webcomponent/header-launcher-button/header-launcher-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-button.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAO5E,MAAM,OAAO,oBAAoB;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnC,8BAAY,WAAW;UACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-button',\n  styleUrl: 'header-launcher-button.scss',\n  shadow: true,\n})\nexport class HeaderLauncherButton {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active = false;\n\n  private ariaAttributes: Attributes;\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n    const buttonProps = {\n      ...this.ariaAttributes,\n    };\n\n    return (\n      <Host>\n        <sdds-header-item active={this.active}>\n          <button {...buttonProps}>\n            <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-launcher-grid/header-launcher-grid.css

@@ -0,0 +1,11 @@
+.sdds-header-launcher-grid {
+  box-sizing: border-box;
+  padding: 12px;
+  margin: 0;
+  list-style: none;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 4px;
+  border-radius: none;
+}