@scania/tegel 0.0.5 → 0.0.7

package/dist/components/sdds-header-brand-symbol.js

@@ -0,0 +1,51 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$3 } from './core-header-item.js';
+import { d as defineCustomElement$2 } from './header-item.js';
+
+const headerBrandSymbolCss = ":host sdds-header-item{display:none}:host sdds-header-item a{background-image:var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 521px){:host sdds-header-item{display:block}}";
+
+const HeaderBrandSymbol = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  get host() { return this; }
+  static get style() { return headerBrandSymbolCss; }
+}, [1, "sdds-header-brand-symbol", {
+    "linkHref": [1, "link-href"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-brand-symbol", "sdds-core-header-item", "sdds-header-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-brand-symbol":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderBrandSymbol);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsHeaderBrandSymbol = HeaderBrandSymbol;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderBrandSymbol, defineCustomElement };

package/dist/components/sdds-header-cell.js

@@ -14,9 +14,9 @@ const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.sddsSortChange = createEvent(this, "sddsSortChange", 7);
-    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 7);
-    this.internalSddsHover = createEvent(this, "internalSddsHover", 7);
+    this.sddsSortChange = createEvent(this, "sddsSortChange", 6);
+    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 6);
+    this.internalSddsHover = createEvent(this, "internalSddsHover", 6);
     this.sortButtonClick = (key) => {
       // Toggling direction of sorting as we only use one button for sorting
       if (this.sortingDirection !== 'asc') {
@@ -164,5 +164,3 @@ const SddsHeaderCell = TableHeaderCell;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsHeaderCell, defineCustomElement };
-
-//# sourceMappingURL=sdds-header-cell.js.map

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

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

package/dist/components/sdds-header-dropdown-list-item.js

@@ -0,0 +1,6 @@
+import { H as HeaderDropdownListItem, d as defineCustomElement$1 } from './header-dropdown-list-item.js';
+
+const SddsHeaderDropdownListItem = HeaderDropdownListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderDropdownListItem, defineCustomElement };

package/dist/components/sdds-header-dropdown-list-user.d.ts

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

package/dist/components/sdds-header-dropdown-list-user.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerDropdownListUserCss = ":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)}";
+
+const HeaderDropdownListLgUser = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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" }))))));
+  }
+  get host() { return this; }
+  static get style() { return headerDropdownListUserCss; }
+}, [1, "sdds-header-dropdown-list-user", {
+    "imgUrl": [1, "img-url"],
+    "imgAlt": [1, "img-alt"],
+    "heading": [1],
+    "subheading": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-dropdown-list-user"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-dropdown-list-user":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderDropdownListLgUser);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderDropdownListUser = HeaderDropdownListLgUser;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderDropdownListUser, defineCustomElement };

package/dist/components/sdds-header-dropdown-list.d.ts

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

package/dist/components/sdds-header-dropdown-list.js

@@ -0,0 +1,6 @@
+import { H as HeaderDropdownList, d as defineCustomElement$1 } from './header-dropdown-list.js';
+
+const SddsHeaderDropdownList = HeaderDropdownList;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderDropdownList, defineCustomElement };

package/dist/components/sdds-header-dropdown.d.ts

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

package/dist/components/sdds-header-dropdown.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './core-header-item.js';
+import { d as defineCustomElement$4 } from './header-item.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './popover-canvas.js';
+
+const headerDropdownCss = ":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}";
+
+const HeaderDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))))));
+  }
+  get host() { return this; }
+  static get style() { return headerDropdownCss; }
+}, [1, "sdds-header-dropdown", {
+    "buttonLabel": [1, "button-label"],
+    "noDropdownIcon": [4, "no-dropdown-icon"],
+    "selected": [4],
+    "open": [32],
+    "buttonEl": [32]
+  }, [[4, "click", "onAnyClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-dropdown", "sdds-core-header-item", "sdds-header-item", "sdds-icon", "sdds-popover-canvas"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderDropdown);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-popover-canvas":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsHeaderDropdown = HeaderDropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderDropdown, defineCustomElement };

package/dist/components/sdds-header-hamburger.d.ts

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

package/dist/components/sdds-header-hamburger.js

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

package/dist/components/sdds-header-item.d.ts

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

package/dist/components/sdds-header-item.js

@@ -0,0 +1,6 @@
+import { H as HeaderItem, d as defineCustomElement$1 } from './header-item.js';
+
+const SddsHeaderItem = HeaderItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderItem, defineCustomElement };

package/dist/components/sdds-header-launcher-button.d.ts

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

package/dist/components/sdds-header-launcher-button.js

@@ -0,0 +1,6 @@
+import { H as HeaderLauncherButton, d as defineCustomElement$1 } from './header-launcher-button.js';
+
+const SddsHeaderLauncherButton = HeaderLauncherButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherButton, defineCustomElement };

package/dist/components/sdds-header-launcher-grid-item.d.ts

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

package/dist/components/sdds-header-launcher-grid-item.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);background-color:var(--sdds-header-app-launcher-menu-bg);color:var(--sdds-grey-800);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--sdds-grey-100);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}";
+
+const HeaderLauncherGridItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("slot", null)));
+  }
+  static get style() { return headerLauncherGridItemCss; }
+}, [1, "sdds-header-launcher-grid-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-grid-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-grid-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherGridItem);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderLauncherGridItem = HeaderLauncherGridItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherGridItem, defineCustomElement };

package/dist/components/sdds-header-launcher-grid-title.d.ts

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

package/dist/components/sdds-header-launcher-grid-title.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerLauncherGridTitleCss = ".sdds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-04);letter-spacing:var(--sdds-detail-04-ls);color:var(--sdds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color);margin:0}";
+
+const HeaderLauncherGridTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-grid-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+  static get style() { return headerLauncherGridTitleCss; }
+}, [4, "sdds-header-launcher-grid-title"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-grid-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-grid-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherGridTitle);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderLauncherGridTitle = HeaderLauncherGridTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherGridTitle, defineCustomElement };

package/dist/components/sdds-header-launcher-grid.d.ts

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

package/dist/components/sdds-header-launcher-grid.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getPreviousNestedChildOfSiblingsMatching, a as isHeadingElement } from './utils.js';
+
+const headerLauncherGridCss = ".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}";
+
+const HeaderLauncherGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const listRoot = this.host;
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
+      const e = el;
+      return isHeadingElement(e);
+    });
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  render() {
+    var _a;
+    const listAttributes = {
+      'class': 'sdds-header-launcher-grid',
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return headerLauncherGridCss; }
+}, [4, "sdds-header-launcher-grid", {
+    "headingElement": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherGrid);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderLauncherGrid = HeaderLauncherGrid;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherGrid, defineCustomElement };

package/dist/components/sdds-header-launcher-list-item.d.ts

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

package/dist/components/sdds-header-launcher-list-item.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './header-dropdown-list-item.js';
+
+const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}";
+
+const HeaderLauncherListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("sdds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+  }
+  static get style() { return headerLauncherListItemCss; }
+}, [1, "sdds-header-launcher-list-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-list-item", "sdds-header-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherListItem);
+      }
+      break;
+    case "sdds-header-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsHeaderLauncherListItem = HeaderLauncherListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherListItem, defineCustomElement };

package/dist/components/sdds-header-launcher-list-title.d.ts

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

package/dist/components/sdds-header-launcher-list-title.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerLauncherListTitleCss = ".sdds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-06);letter-spacing:var(--sdds-detail-06-ls);color:var(--sdds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color);margin:0}";
+
+const HeaderLauncherListTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-list-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return headerLauncherListTitleCss; }
+}, [4, "sdds-header-launcher-list-title"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher-list-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher-list-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncherListTitle);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderLauncherListTitle = HeaderLauncherListTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncherListTitle, defineCustomElement };