@scania/tegel 0.0.4 → 0.0.6

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

@@ -0,0 +1,58 @@
+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 };
+
+//# sourceMappingURL=sdds-header-launcher-grid.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-header-launcher-grid.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8KAA8K;;MCW/L,kBAAkB;;;;;;EAK7B,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAE3B,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,CAAC,EAAE;MACtE,MAAM,CAAC,GAAG,EAAE,CAAC;MACb,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,MAAM;;IACJ,MAAM,cAAc,GAAG;MACrB,OAAO,EAAE,2BAA2B;MACpC,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IACF,QACE,EAAC,IAAI,QACH,2BAAS,cAAc,GACrB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.scss?tag=sdds-header-launcher-grid","./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.tsx"],"sourcesContent":[".sdds-header-launcher-grid {\n  box-sizing: border-box;\n  padding: 12px;\n  margin: 0;\n  list-style: none;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 4px;\n  border-radius: none;\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-grid',\n  styleUrl: 'header-launcher-grid.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGrid {\n  @Element() host: HTMLElement;\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const listRoot = this.host;\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {\n      const e = el;\n      return isHeadingElement(e);\n    });\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  render() {\n    const listAttributes = {\n      'class': 'sdds-header-launcher-grid',\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n    return (\n      <Host>\n        <div {...listAttributes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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,41 @@
+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 };
+
+//# sourceMappingURL=sdds-header-launcher-list-item.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-header-launcher-list-item.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,yFAAyF;;MCO9G,sBAAsB;;;;;;EACjC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,sCAAgC,IAAI,EAAC,IAAI,IACvC,eAAa,CACkB,CAC5B,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.scss?tag=sdds-header-launcher-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-item',\n  styleUrl: 'header-launcher-list-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherListItem {\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list-item type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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,36 @@
+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 };
+
+//# sourceMappingURL=sdds-header-launcher-list-title.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-header-launcher-list-title.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,iWAAiW;;MCOvX,uBAAuB;EALpC;;;IAQU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IACjE,eAAa,CACV,CACA,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.scss?tag=sdds-header-launcher-list-title","./src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.tsx"],"sourcesContent":[".sdds-header-launcher-list-title {\n  all: unset;\n  box-sizing: border-box;\n  font: var(--sdds-detail-06);\n  letter-spacing: var(--sdds-detail-06-ls);\n  color: var(--sdds-header-app-launcher-category-title-color);\n  text-transform: uppercase;\n  height: 48px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n  margin: 0;\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-title',\n  styleUrl: 'header-launcher-list-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherListTitle {\n  @Element() host: HTMLElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-list-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

@@ -0,0 +1 @@
+{"file":"sdds-header-launcher-list.js","mappings":";;;MAMa,kBAAkB;EAJ/B;;;IAKE,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAWpC;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,iCAA2B,IAAI,EAAC,IAAI,IAClC,eAAa,CACa,CACvB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list/header-launcher-list.tsx"],"sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list',\n  shadow: false,\n})\nexport class HeaderLauncherList {\n  uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,110 @@
+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(--sdds-header-height);position:relative}:host .wrapper .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-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}";
+
+const HeaderLauncher = /*@__PURE__*/ proxyCustomElement(class 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() === '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))))));
+  }
+  get host() { return this; }
+  static get style() { return headerLauncherCss; }
+}, [1, "sdds-header-launcher", {
+    "open": [32],
+    "buttonEl": [32],
+    "hasListTypeMenu": [32]
+  }, [[8, "click", "onAnyClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-launcher", "sdds-core-header-item", "sdds-header-item", "sdds-header-launcher-button", "sdds-icon", "sdds-popover-canvas"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-launcher":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderLauncher);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "sdds-header-launcher-button":
+      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 SddsHeaderLauncher = HeaderLauncher;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderLauncher, defineCustomElement };
+
+//# sourceMappingURL=sdds-header-launcher.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-header-launcher.js","mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,6uBAA6uB;;MCQ1vB,cAAc;;;;;IASjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;gBANlB,KAAK;;2BAIH,KAAK;;EAOhC,UAAU,CAAC,KAAiB;;IAE1B,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;GACF;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,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,CAC3E,CAAC;IAEF,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;GACF;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACxB;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;QACT,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB,EACD,KAAK,EAAE,CAAC,EAAuC;QAC7C,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB,GACF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,IAAI;QACvB,sBAAsB,EAAE,IAAI,CAAC,eAAe;OAC7C,IAED,mDAAiC,gBAAgB,EAAgC,EAEhF,IAAI,CAAC,QAAQ,KACZ,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;QACT;UACE,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACP,kBAAkB,EAAE,EAAE;WACvB;SACF;OACF,IAED,eAAa,CACO,CACvB,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher/header-launcher.scss?tag=sdds-header-launcher&encapsulation=shadow","./src/components/header/webcomponent/header-launcher/header-launcher.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n@import '../../../../global/_variables.scss';\n\n:host {\n  .wrapper {\n    height: var(--sdds-header-height);\n    position: relative;\n\n    .menu {\n      /** Should control only height, position, and overflow here. \n        Width and appearance are set inside nested components */\n      flex-direction: column;\n\n      @include sdds-scrollbar;\n\n      overflow-y: auto;\n      max-height: calc(100vh - var(--sdds-header-height));\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n      border-radius: 0;\n\n      @media all and (max-width: $media-fullwidth) {\n        width: 100vw;\n      }\n    }\n\n    &.state-list-type-menu {\n      .menu {\n        height: calc(100vh - var(--sdds-header-height));\n      }\n    }\n\n    &.state-open {\n      .button {\n        position: relative;\n        z-index: z(tooltip) + 1;\n      }\n    }\n  }\n}\n","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"],"version":3}

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

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

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

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--sdds-header-nav-item-color);font-weight:normal;font-family:var(--sdds-font-family-headline);letter-spacing:normal;position:relative}:host .component ::after{content:\" \";display:block;height:100%;width:24px;position:absolute;top:0;right:0;background:linear-gradient(to right, transparent, var(--sdds-header-background))}:host slot{min-width:inherit;display:block;align-items:center;white-space:nowrap;text-overflow:fade;padding:0 24px}";
+
+const HeaderTitle = /*@__PURE__*/ proxyCustomElement(class 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, "sdds-header-title"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderTitle);
+      }
+      break;
+  } });
+}
+
+const SddsHeaderTitle = HeaderTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderTitle, defineCustomElement };
+
+//# sourceMappingURL=sdds-header-title.js.map

package/dist/components/sdds-header-title.js.map

@@ -0,0 +1 @@
+{"file":"sdds-header-title.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0fAA0f;;MCOpgB,WAAW;;;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-title/header-title.scss?tag=sdds-header-title&encapsulation=shadow","./src/components/header/webcomponent/header-title/header-title.tsx"],"sourcesContent":["@import '../../../../mixins/flex-center';\n\n:host {\n  display: block;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  color: var(--sdds-header-nav-item-color);\n  font-weight: normal;\n  font-family: var(--sdds-font-family-headline);\n  letter-spacing: normal;\n  position: relative;\n\n  .component {\n    // FIXME this doesnt work\n    ::after {\n      content: ' ';\n      display: block;\n      height: 100%;\n      width: 24px;\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: linear-gradient(to right, transparent, var(--sdds-header-background));\n    }\n  }\n\n  slot {\n    min-width: inherit;\n    display: block;\n    align-items: center;\n    white-space: nowrap;\n    text-overflow: fade;\n    padding: 0 24px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-title',\n  styleUrl: 'header-title.scss',\n  shadow: true,\n})\nexport class HeaderTitle {\n  render() {\n    return (\n      <Host>\n        <div class=\"component\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

package/dist/components/sdds-header.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { u as updateListChildrenRoles, i as inheritAriaAttributes } from './utils.js';
+
+const headerComponentCss = "sdds-header{display:block;height:var(--sdds-header-height);background-color:var(--sdds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--sdds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .sdds-header-component-list{height:var(--sdds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav sdds-header-dropdown,nav sdds-header-item{display:none}nav .sdds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--sdds-header-height);border-right:1px solid var(--sdds-header--basic-element-border)}@media screen and (min-width: 992px){nav sdds-header-dropdown,nav sdds-header-item{display:block}}nav sdds-header-item:nth-child(3),nav sdds-header-dropdown:nth-child(3){border-left:1px solid var(--sdds-header--basic-element-border)}";
+
+const SddsHeader$1 = /*@__PURE__*/ proxyCustomElement(class 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('.sdds-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: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
+  }
+  get host() { return this; }
+  static get style() { return headerComponentCss; }
+}, [4, "sdds-header"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsHeader$1);
+      }
+      break;
+  } });
+}
+
+const SddsHeader = SddsHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeader, defineCustomElement };
+
+//# sourceMappingURL=sdds-header.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-header.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,00BAA00B;;MCQx1BA,YAAU;EAKrB;;;IACE,MAAM,QAAQ,GAAqB,CAAC,aAAa;MAC/C,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;QAC7B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SAC1C;OACF,CAAC,CAAC;KACJ,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;GAChD;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9B,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE;MAChC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,uBAAuB,CAAC,UAAU,CAAC,CAAC;GACrC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;GAC5B;EAED,MAAM;IACJ,MAAM,aAAa,qBACd,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,YAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,2BAAS,aAAa,GACpB,UAAI,KAAK,EAAC,4BAA4B,IACpC,eAAa,EACb,UAAI,KAAK,EAAC,2BAA2B,GAAM,EAC3C,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsHeader"],"sources":["./src/components/header/webcomponent/header-component.scss?tag=sdds-header","./src/components/header/webcomponent/header-component.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/flex-center';\n@import '../../../mixins/scrollbar';\n@import '../../../mixins/z-index';\n\nsdds-header {\n  display: block;\n  height: var(--sdds-header-height);\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  z-index: z(header);\n}\n\nnav {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  display: block;\n\n  .sdds-header-component-list {\n    height: var(--sdds-header-height);\n    all: unset;\n    display: flex;\n    justify-content: start;\n    align-items: center;\n  }\n\n  sdds-header-dropdown,\n  sdds-header-item {\n    display: none;\n  }\n\n  .sdds-header-middle-spacer {\n    all: unset;\n    display: block;\n    flex-grow: 1;\n    height: var(--sdds-header-height);\n    border-right: 1px solid var(--sdds-header--basic-element-border);\n  }\n\n  @media screen and (min-width: $grid-lg) {\n    sdds-header-dropdown,\n    sdds-header-item {\n      display: block;\n    }\n  }\n\n  sdds-header-item:nth-child(3),\n  sdds-header-dropdown:nth-child(3) {\n    /* Adds a left border to the button after the title, if any */\n    border-left: 1px solid var(--sdds-header--basic-element-border);\n  }\n}\n","import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tab.js

@@ -1,24 +1,28 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const inlineTabCss = ":host{display:block}";
+const sddsInlineTabCss = ":host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:20px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .inline-tab-item{position:relative;margin-right:32px}:host .inline-tab-item:hover{cursor:pointer}:host .inline-tab-item:hover::after{width:100%}:host .inline-tab-item::after{content:\" \";position:absolute;bottom:-20px;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-inline-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
 
-const InlineTabsChild = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const SddsInlineTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.label = undefined;
     this.disabled = false;
-    this.default = false;
+    this.selected = false;
+  }
+  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */
+  async setSelected(selected) {
+    this.selected = selected;
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
   }
-  static get style() { return inlineTabCss; }
+  static get style() { return sddsInlineTabCss; }
 }, [1, "sdds-inline-tab", {
-    "label": [1],
     "disabled": [4],
-    "default": [4]
+    "selected": [32],
+    "setSelected": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -28,13 +32,13 @@ function defineCustomElement$1() {
   components.forEach(tagName => { switch (tagName) {
     case "sdds-inline-tab":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, InlineTabsChild);
+        customElements.define(tagName, SddsInlineTab$1);
       }
       break;
   } });
 }
 
-const SddsInlineTab = InlineTabsChild;
+const SddsInlineTab = SddsInlineTab$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsInlineTab, defineCustomElement };

package/dist/components/sdds-inline-tab.js.map

@@ -1 +1 @@
-{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sBAAsB;;MCO9B,eAAe;;;;;;oBAGE,KAAK;mBAEN,KAAK;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'inline-tab.scss',\n  shadow: true,\n})\nexport class InlineTabsChild {\n  @Prop() label: string;\n\n  @Prop() disabled: boolean = false;\n\n  @Prop() default: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,ozCAAozC;;MCOh0CA,eAAa;;;;;oBAEI,KAAK;oBAEJ,KAAK;;;EAIlC,MAAM,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WACE,KAAK,EAAE,oBAAoB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;aACvD,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEpC,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsInlineTab"],"sources":["./src/components/tabs/inline-tabs/inline-tab/sdds-inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tab/sdds-inline-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  z-index: z(tab);\n  display: block;\n\n  ::slotted(*) {\n    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    width: 100%;\n    margin: 20px 4px;\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .inline-tab-item {\n    position: relative;\n    margin-right: 32px;\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n  }\n\n  .inline-tab-item::after {\n    content: ' ';\n    position: absolute;\n    bottom: -20px;\n    right: 0;\n    left: 0;\n    margin-left: auto;\n    width: 0%;\n    margin-right: auto;\n    height: 2px;\n    background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n    transition: width 0.15s ease-in-out 0s;\n    z-index: 1;\n  }\n\n  .selected {\n    ::slotted(*) {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n    }\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n    }\n  }\n\n  .disabled {\n    color: var(--sdds-inline-tabs-tab-color-disabled);\n    pointer-events: none;\n\n    ::slotted(*) {\n      opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop, Method, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'sdds-inline-tab.scss',\n  shadow: true,\n})\nexport class SddsInlineTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`inline-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}