@scania/tegel 0.0.8 → 0.0.9

package/dist/components/tds-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(--tds-white)}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:background 0.2s ease-in-out, color 0.2s ease-in-out}@media screen and (min-width: 992px){:host tds-header-item{display:none}:host([persistent]) tds-header-item{display:block}}";
+
+const TdsHeaderHamburger$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderHamburger extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("tds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("tds-icon", { class: "icon", name: "burger", size: "20px" })))));
+  }
+  get host() { return this; }
+  static get style() { return headerHamburgerCss; }
+}, [1, "tds-header-hamburger"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-hamburger", "tds-core-header-item", "tds-header-item", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-hamburger":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderHamburger$1);
+      }
+      break;
+    case "tds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsHeaderHamburger = TdsHeaderHamburger$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderHamburger, defineCustomElement };

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

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

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

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

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

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

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

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

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

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

package/dist/components/tds-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(--tds-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(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);background-color:var(--tds-header-app-launcher-menu-bg);color:var(--tds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--tds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+
+const TdsHeaderLauncherGridItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGridItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("slot", null)));
+  }
+  static get style() { return headerLauncherGridItemCss; }
+}, [1, "tds-header-launcher-grid-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher-grid-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher-grid-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncherGridItem$1);
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncherGridItem = TdsHeaderLauncherGridItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncherGridItem, defineCustomElement };

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

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

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

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerLauncherGridTitleCss = ".tds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--tds-detail-04);letter-spacing:var(--tds-detail-04-ls);color:var(--tds-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(--tds-nav-dropdown-item-border-color);margin:0}";
+
+const TdsHeaderLauncherGridTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGridTitle extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-${this.uuid}` }, h("slot", null))));
+  }
+  static get style() { return headerLauncherGridTitleCss; }
+}, [4, "tds-header-launcher-grid-title"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher-grid-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher-grid-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncherGridTitle$1);
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncherGridTitle = TdsHeaderLauncherGridTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncherGridTitle, defineCustomElement };

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

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

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

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getPreviousNestedChildOfSiblingsMatching, h as isHeadingElement } from './utils.js';
+
+const headerLauncherGridCss = ".tds-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 TdsHeaderLauncherGrid$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherGrid 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': 'tds-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, "tds-header-launcher-grid", {
+    "headingElement": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncherGrid$1);
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncherGrid = TdsHeaderLauncherGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncherGrid, defineCustomElement };

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

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

package/dist/components/tds-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(--tds-nav-dropdown-item-border-color)}";
+
+const TdsHeaderLauncherListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherListItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+  }
+  static get style() { return headerLauncherListItemCss; }
+}, [1, "tds-header-launcher-list-item"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher-list-item", "tds-header-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncherListItem$1);
+      }
+      break;
+    case "tds-header-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncherListItem = TdsHeaderLauncherListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncherListItem, defineCustomElement };

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

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

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

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

package/dist/components/tds-header-launcher-list.d.ts

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

package/dist/components/tds-header-launcher-list.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './header-dropdown-list.js';
+
+const TdsHeaderLauncherList$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherList extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("tds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+  }
+}, [4, "tds-header-launcher-list"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher-list", "tds-header-dropdown-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncherList$1);
+      }
+      break;
+    case "tds-header-dropdown-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncherList = TdsHeaderLauncherList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncherList, defineCustomElement };

package/dist/components/tds-header-launcher.d.ts

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

package/dist/components/tds-header-launcher.js

@@ -0,0 +1,108 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$6 } from './core-header-item.js';
+import { d as defineCustomElement$5 } from './header-item.js';
+import { d as defineCustomElement$4 } from './header-launcher-button.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './popover-canvas.js';
+
+const headerLauncherCss = ":host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-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(--tds-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(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:801}";
+
+const TdsHeaderLauncher$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncher extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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() === 'tds-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("tds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${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 headerLauncherCss; }
+}, [1, "tds-header-launcher", {
+    "open": [32],
+    "buttonEl": [32],
+    "hasListTypeMenu": [32]
+  }, [[8, "click", "onAnyClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-launcher", "tds-core-header-item", "tds-header-item", "tds-header-launcher-button", "tds-icon", "tds-popover-canvas"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-launcher":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderLauncher$1);
+      }
+      break;
+    case "tds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "tds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "tds-header-launcher-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "tds-popover-canvas":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsHeaderLauncher = TdsHeaderLauncher$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderLauncher, defineCustomElement };

package/dist/components/tds-header-title.d.ts

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

package/dist/components/tds-header-title.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host slot{display:block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
+
+const TdsHeaderTitle$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeaderTitle extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+  }
+  static get style() { return headerTitleCss; }
+}, [1, "tds-header-title"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeaderTitle$1);
+      }
+      break;
+  } });
+}
+
+const TdsHeaderTitle = TdsHeaderTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeaderTitle, defineCustomElement };

package/dist/components/tds-header.d.ts

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

package/dist/components/tds-header.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { u as updateListChildrenRoles, i as inheritAriaAttributes } from './utils.js';
+
+const headerCss = "html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
+
+const TdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class TdsHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    const callback = (mutationsList) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          updateListChildrenRoles(mutation.target);
+        }
+      });
+    };
+    this.observer = new MutationObserver(callback);
+  }
+  componentDidLoad() {
+    const hostElement = this.host;
+    const navElement = hostElement.querySelector('.tds-header-component-list');
+    this.observer.observe(navElement, {
+      childList: true,
+      subtree: false,
+    });
+    updateListChildrenRoles(navElement);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
+  }
+  get host() { return this; }
+  static get style() { return headerCss; }
+}, [4, "tds-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsHeader$1);
+      }
+      break;
+  } });
+}
+
+const TdsHeader = TdsHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsHeader, defineCustomElement };

package/dist/components/tds-icon.d.ts

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