@scania/tegel 0.0.4 → 0.0.6

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

@@ -0,0 +1,31 @@
+:host {
+  height: var(--sdds-header-height);
+  position: relative;
+}
+:host .menu {
+  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-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+:host .menu::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+:host .menu::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+:host .menu ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .button {
+  position: relative;
+  z-index: 801;
+}

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

@@ -0,0 +1,123 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdown {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+    this.buttonLabel = undefined;
+    this.noDropdownIcon = false;
+    this.selected = false;
+    this.open = false;
+    this.buttonEl = undefined;
+  }
+  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;
+    }
+  }
+  toggleDropdown() {
+    this.open = !this.open;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'state-open': this.open,
+      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+        this.buttonEl = el;
+      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
+        this.toggleDropdown();
+      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${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-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "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
+      },
+      "noDropdownIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown icon (downwards chevron) should be hidden."
+        },
+        "attribute": "no-dropdown-icon",
+        "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 that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "buttonEl": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onAnyClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=header-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,cAAc;;IAiBjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;;0BATT,KAAK;oBAGX,KAAK;gBAER,KAAK;;;EAO9B,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,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;QAED,wBAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACzE,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;cACV,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACrB,CAAC,mBACc,GAAG,IAAI,CAAC,IAAI,EAAE,mBACd,YAAY,IAAI,CAAC,IAAI,EAAE,kBACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAClD,OAAO,EAAE,GAAG,EAAE;cACZ,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;YAED,YAAM,IAAI,EAAC,aAAa,GAAQ;YAC/B,IAAI,CAAC,WAAW;YACjB,YAAM,IAAI,EAAC,cAAc,GAAQ;YAChC,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ;QAClB,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, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown',\n  styleUrl: 'header-dropdown.scss',\n  shadow: true,\n})\nexport class HeaderDropdown {\n  @Element() host: HTMLElement;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the dropdown icon (downwards chevron) should be hidden. */\n  @Prop() noDropdownIcon: boolean = false;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLButtonElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  @Listen('click', { target: 'document' })\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  toggleDropdown() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'state-open': this.open,\n          }}\n        >\n          <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n            <button\n              ref={(el) => {\n                this.buttonEl = el;\n              }}\n              aria-expanded={`${this.open}`}\n              aria-controls={`launcher-${this.uuid}`}\n              aria-current={this.selected ? 'location' : 'false'}\n              onClick={() => {\n                this.toggleDropdown();\n              }}\n            >\n              <slot name=\"button-icon\"></slot>\n              {this.buttonLabel}\n              <slot name=\"button-label\"></slot>\n              {!this.noDropdownIcon && (\n                <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              )}\n            </button>\n          </sdds-header-item>\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-dropdown-${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-dropdown-list/header-dropdown-list.css

@@ -0,0 +1,19 @@
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  display: block;
+  width: 190px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+}
+@media all and (max-width: 384px) {
+  :host {
+    width: 100vw;
+  }
+}
+
+:host([type=lg]) {
+  width: 320px;
+}

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

@@ -0,0 +1,114 @@
+import { Host, h } from '@stencil/core';
+import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement, } from '../../../../utils/utils';
+export class HeaderDropdownList {
+  constructor() {
+    // A Map to store the slots and their associated slotchange listeners.
+    this.slotListeners = new Map();
+    this.type = 'md';
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const { children } = this.host;
+    // Set the type prop for each child, if they have such a property
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if ('type' in child) {
+        child.type = this.type;
+      }
+    }
+    let listRoot = this.host;
+    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {
+      listRoot = this.host.parentElement;
+    }
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  componentDidLoad() {
+    this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+      // Add the slotchange event listener.
+      const onSlotChange = (e) => {
+        this.processAssignedElements(e.target);
+      };
+      slot.addEventListener('slotchange', onSlotChange);
+      onSlotChange({ target: slot });
+      // Store the slot and its listener in the Map.
+      this.slotListeners.set(slot, onSlotChange);
+    });
+  }
+  processAssignedElements(slot) {
+    const nodes = slot.assignedElements();
+    nodes.forEach((node) => {
+      // Add a listitem role to the assigned element if needed.
+      if (node.tagName.toLowerCase() !== 'li' &&
+        node.tagName.toLowerCase() !== 'slot' &&
+        node.getAttribute('role') !== 'listitem') {
+        node.setAttribute('role', 'listitem');
+      }
+      // If the assigned element is a slot, process its assigned elements recursively.
+      if (node.tagName.toLowerCase() === 'slot') {
+        this.processAssignedElements(node);
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.slotListeners.forEach((listener, slot) => {
+      // Remove the slotchange event listener and delete the entry from the Map.
+      slot.removeEventListener('slotchange', listener);
+      this.slotListeners.delete(slot);
+    });
+  }
+  render() {
+    var _a;
+    const attributes = {
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, Object.assign({}, attributes), h("slot", null)));
+  }
+  static get is() { return "sdds-header-dropdown-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lg' | 'md'",
+          "resolved": "\"lg\" | \"md\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'md'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "headingElement": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-dropdown-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown-list.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-dropdown-list',\n  styleUrl: 'header-dropdown-list.scss',\n  shadow: true,\n})\nexport class HeaderDropdownList {\n  @Element() host: HTMLElement;\n\n  // A Map to store the slots and their associated slotchange listeners.\n  private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n  @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const { children } = this.host;\n\n    // Set the type prop for each child, if they have such a property\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i] as any;\n\n      if ('type' in child) {\n        child.type = this.type;\n      }\n    }\n\n    let listRoot = this.host;\n    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n      listRoot = this.host.parentElement;\n    }\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  componentDidLoad() {\n    this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n      // Add the slotchange event listener.\n      const onSlotChange: EventListener = (e: Event) => {\n        this.processAssignedElements(e.target as HTMLSlotElement);\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      onSlotChange({ target: slot } as unknown as Event);\n\n      // Store the slot and its listener in the Map.\n      this.slotListeners.set(slot, onSlotChange);\n    });\n  }\n\n  processAssignedElements(slot: HTMLSlotElement): void {\n    const nodes: Element[] = slot.assignedElements();\n    nodes.forEach((node: Element) => {\n      // Add a listitem role to the assigned element if needed.\n      if (\n        node.tagName.toLowerCase() !== 'li' &&\n        node.tagName.toLowerCase() !== 'slot' &&\n        node.getAttribute('role') !== 'listitem'\n      ) {\n        node.setAttribute('role', 'listitem');\n      }\n\n      // If the assigned element is a slot, process its assigned elements recursively.\n      if (node.tagName.toLowerCase() === 'slot') {\n        this.processAssignedElements(node as HTMLSlotElement);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n      // Remove the slotchange event listener and delete the entry from the Map.\n      slot.removeEventListener('slotchange', listener);\n      this.slotListeners.delete(slot);\n    });\n  }\n\n  render() {\n    const attributes = {\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n\n    return (\n      <Host {...attributes}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  height: var(--sdds-header-list-item-md-height);
+  width: 100%;
+}
+:host .component {
+  height: 100%;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border: none;
+  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);
+}
+:host .component ::slotted(a: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-selected {
+  background-color: var(--sdds-nav-item-background-selected);
+  padding-right: 4px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: var(--sdds-nav-item-border-color-active);
+}
+:host .component-selected ::slotted(a),
+:host .component-selected ::slotted(button) {
+  background-color: var(--sdds-nav-item-background-selected);
+}
+
+:host(:not(:last-child)) {
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+}
+
+:host([type=lg]) {
+  height: var(--sdds-header-height);
+}
+:host([type=lg]) ::slotted(a),
+:host([type=lg]) ::slotted(button) {
+  padding: 0 16px;
+  color: var(--sdds-header-app-launcher-item-color);
+}

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

@@ -0,0 +1,67 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdownListItem {
+  constructor() {
+    this.selected = false;
+    this.type = 'md';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-dropdown-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown-list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the link should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the list."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'md'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# 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"]}