@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,15 @@
+import { demoFormat } from './utils';
+describe('format', () => {
+  it('returns empty string for no names defined', () => {
+    expect(demoFormat(undefined, undefined, undefined)).toEqual('');
+  });
+  it('formats just first names', () => {
+    expect(demoFormat('Joseph', undefined, undefined)).toEqual('Joseph');
+  });
+  it('formats first and last names', () => {
+    expect(demoFormat('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
+  });
+  it('formats first, middle and last names', () => {
+    expect(demoFormat('Joseph', 'Quincy', 'Publique')).toEqual('Joseph Quincy Publique');
+  });
+});

package/dist/components/checkbox.js

@@ -0,0 +1,74 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
+
+const checkboxCss = ".tds-checkbox.sc-tds-checkbox{box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.tds-checkbox.sc-tds-checkbox *.sc-tds-checkbox{box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-checkbox-color);padding-left:var(--tds-spacing-element-4);padding-top:var(--tds-spacing-element-4);padding-bottom:var(--tds-spacing-element-4);cursor:pointer;display:flex;align-items:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox::after{border:1px solid var(--tds-checkbox-interaction-01);background-color:var(--tds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:focus::before{background-color:var(--tds-checkbox-background-focus);opacity:var(--tds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox{cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox::after{border-color:var(--tds-checkbox-border-color-disabled-after)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled+label.sc-tds-checkbox,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox+label.sc-tds-checkbox{color:var(--tds-grey-600);cursor:not-allowed}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].disabled.sc-tds-checkbox:hover::before{display:none}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked::after{background-image:var(--tds-checkbox-background-img);background-color:var(--tds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:hover::before{background-color:var(--tds-checkbox-background-hover);opacity:var(--tds-checkbox-background-opacity-hover)}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled:hover::before,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked:disabled::after,.tds-checkbox.sc-tds-checkbox input[type=checkbox].sc-tds-checkbox:checked.disabled::after{background-image:var(--tds-checkbox-background-img-disabled);background-color:var(--tds-checkbox-interaction-02);color:var(--tds-checkbox-color-disabled-after)}";
+
+const TdsCheckbox = /*@__PURE__*/ proxyCustomElement(class TdsCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.tdsChange = createEvent(this, "tdsChange", 6);
+    this.tdsFocus = createEvent(this, "tdsFocus", 6);
+    this.tdsBlur = createEvent(this, "tdsBlur", 6);
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.tdsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = generateUniqueId();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the component */
+  handleFocus(event) {
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as blur when clicking outside the component */
+  handleBlur(event) {
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "tds-checkbox" }, h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        this.handleChange();
+      } }), h("label", { htmlFor: this.checkboxId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return checkboxCss; }
+}, [6, "tds-checkbox", {
+    "name": [1],
+    "checkboxId": [1, "checkbox-id"],
+    "disabled": [4],
+    "required": [4],
+    "checked": [516],
+    "value": [1],
+    "toggleCheckbox": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-checkbox"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsCheckbox);
+      }
+      break;
+  } });
+}
+
+export { TdsCheckbox as T, defineCustomElement as d };

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const coreHeaderItemCss = ":host{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--sdds-header-height);height:var(--sdds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
+const coreHeaderItemCss = ":host{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-header-nav-item-color)}:host .item{all:unset;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:var(--tds-header-height);height:var(--tds-header-height);margin:0}:host .item *{box-sizing:border-box}:host slot{white-space:nowrap}:host ::slotted(svg){font-size:20px}";
 
-const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem extends HTMLElement {
+const TdsCoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsCoreHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -12,19 +12,19 @@ const CoreHeaderItem = /*@__PURE__*/ proxyCustomElement(class CoreHeaderItem ext
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));
   }
   static get style() { return coreHeaderItemCss; }
-}, [1, "sdds-core-header-item"]);
+}, [1, "tds-core-header-item"]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-core-header-item"];
+  const components = ["tds-core-header-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, CoreHeaderItem);
+        customElements.define(tagName, TdsCoreHeaderItem);
       }
       break;
   } });
 }
 
-export { CoreHeaderItem as C, defineCustomElement as d };
+export { TdsCoreHeaderItem as T, defineCustomElement as d };

package/dist/components/divider.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const dividerCss = ".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--tds-divider-background);width:100%;height:1px}.divider.vertical{background-color:var(--tds-divider-background);height:100%;width:1px}";
+
+const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.orientation = 'horizontal';
+  }
+  render() {
+    return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
+  }
+  static get style() { return dividerCss; }
+}, [1, "tds-divider", {
+    "orientation": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Divider);
+      }
+      break;
+  } });
+}
+
+export { Divider as D, defineCustomElement as d };

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

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--sdds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-nav-dropdown-item-background);color:var(--sdds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--sdds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--sdds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--sdds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--sdds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--sdds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--sdds-header-app-launcher-item-color)}";
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--tds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 
-const HeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class HeaderDropdownListItem extends HTMLElement {
+const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -18,7 +18,7 @@ const HeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class HeaderDrop
   }
   get host() { return this; }
   static get style() { return headerDropdownListItemCss; }
-}, [1, "sdds-header-dropdown-list-item", {
+}, [1, "tds-header-dropdown-list-item", {
     "selected": [4],
     "type": [513]
   }]);
@@ -26,14 +26,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-header-dropdown-list-item"];
+  const components = ["tds-header-dropdown-list-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-header-dropdown-list-item":
+    case "tds-header-dropdown-list-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, HeaderDropdownListItem);
+        customElements.define(tagName, TdsHeaderDropdownListItem);
       }
       break;
   } });
 }
 
-export { HeaderDropdownListItem as H, defineCustomElement as d };
+export { TdsHeaderDropdownListItem as T, defineCustomElement as d };

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

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getPreviousNestedChildOfSiblingsMatching, h as isHeadingElement } from './utils.js';
+import { e as getPreviousNestedChildOfSiblingsMatching, j as isHeadingElement } from './utils.js';
 
-const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--sdds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
 
-const HeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class HeaderDropdownList extends HTMLElement {
+const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownList extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -23,7 +23,7 @@ const HeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class HeaderDropdown
       }
     }
     let listRoot = this.host;
-    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {
+    if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
       listRoot = this.host.parentElement;
     }
     const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
@@ -78,7 +78,7 @@ const HeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class HeaderDropdown
   }
   get host() { return this; }
   static get style() { return headerDropdownListCss; }
-}, [1, "sdds-header-dropdown-list", {
+}, [1, "tds-header-dropdown-list", {
     "type": [513],
     "headingElement": [32]
   }]);
@@ -86,14 +86,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-header-dropdown-list"];
+  const components = ["tds-header-dropdown-list"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-header-dropdown-list":
+    case "tds-header-dropdown-list":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, HeaderDropdownList);
+        customElements.define(tagName, TdsHeaderDropdownList);
       }
       break;
   } });
 }
 
-export { HeaderDropdownList as H, defineCustomElement as d };
+export { TdsHeaderDropdownList as T, defineCustomElement as d };

package/dist/components/header-item.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as dfs } from './utils.js';
+import { d as dfs } from './utils.js';
 import { d as defineCustomElement$1 } from './core-header-item.js';
 
-const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--sdds-header-background);border-right:1px solid var(--sdds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--sdds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--sdds-header--basic-element-background-open);color:var(--sdds-header-nav-item-dropdown-opened-color);border-color:var(--sdds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--sdds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--sdds-nav-item-border-color-active)}";
+const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 
-const HeaderItem = /*@__PURE__*/ proxyCustomElement(class HeaderItem extends HTMLElement {
+const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -27,11 +27,11 @@ const HeaderItem = /*@__PURE__*/ proxyCustomElement(class HeaderItem extends HTM
    */
   updateSlottedElements() {
     if (this.slotEl) {
-      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
-      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+      const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
       this.updateSlotted(isIconOrSvg, addIconClass);
       const isImage = (element) => element.tagName.toLowerCase() === 'img';
-      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');
+      const addImageClass = (element) => element.classList.add('__tds-header-item-image');
       this.updateSlotted(isImage, addImageClass);
     }
   }
@@ -41,14 +41,14 @@ const HeaderItem = /*@__PURE__*/ proxyCustomElement(class HeaderItem extends HTM
     this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
   }
   render() {
-    return (h(Host, null, h("sdds-core-header-item", { class: {
+    return (h(Host, null, h("tds-core-header-item", { class: {
         'component-active': this.active,
         'component-selected': this.selected,
       } }, h("slot", null))));
   }
   get host() { return this; }
   static get style() { return headerItemCss; }
-}, [1, "sdds-header-item", {
+}, [1, "tds-header-item", {
     "active": [4],
     "selected": [4]
   }]);
@@ -56,14 +56,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-header-item", "sdds-core-header-item"];
+  const components = ["tds-header-item", "tds-core-header-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-header-item":
+    case "tds-header-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, HeaderItem);
+        customElements.define(tagName, TdsHeaderItem);
       }
       break;
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -71,4 +71,4 @@ function defineCustomElement() {
   } });
 }
 
-export { HeaderItem as H, defineCustomElement as d };
+export { TdsHeaderItem as T, defineCustomElement as d };

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

@@ -4,9 +4,9 @@ import { d as defineCustomElement$3 } from './core-header-item.js';
 import { d as defineCustomElement$2 } from './header-item.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const headerLauncherButtonCss = ":host{display:block}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
+const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 
-const HeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class HeaderLauncherButton extends HTMLElement {
+const TdsHeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherButton extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -16,35 +16,35 @@ const HeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class HeaderLaunch
   render() {
     this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
     const buttonProps = Object.assign({}, this.ariaAttributes);
-    return (h(Host, null, h("sdds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+    return (h(Host, null, h("tds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("tds-icon", { class: "icon", name: "bento", size: "20px" })))));
   }
   get host() { return this; }
   static get style() { return headerLauncherButtonCss; }
-}, [1, "sdds-header-launcher-button", {
+}, [1, "tds-header-launcher-button", {
     "active": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-header-launcher-button", "sdds-core-header-item", "sdds-header-item", "sdds-icon"];
+  const components = ["tds-header-launcher-button", "tds-core-header-item", "tds-header-item", "tds-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-header-launcher-button":
+    case "tds-header-launcher-button":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, HeaderLauncherButton);
+        customElements.define(tagName, TdsHeaderLauncherButton);
       }
       break;
-    case "sdds-core-header-item":
+    case "tds-core-header-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "sdds-header-item":
+    case "tds-header-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
       break;
-    case "sdds-icon":
+    case "tds-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -52,4 +52,4 @@ function defineCustomElement() {
   } });
 }
 
-export { HeaderLauncherButton as H, defineCustomElement as d };
+export { TdsHeaderLauncherButton as T, defineCustomElement as d };

package/dist/components/icon.js

@@ -15,7 +15,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
       }
     });
-    this.name = 'arrow_diagonal';
+    this.name = 'truck';
     this.size = '16px';
     this.icons_object = iconsCollection;
     this.arrayOfIcons = [];
@@ -36,7 +36,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     return h(Host, null, this.setIcons());
   }
   static get style() { return iconCss; }
-}, [1, "sdds-icon", {
+}, [1, "tds-icon", {
     "name": [513],
     "size": [513],
     "icons_object": [32],
@@ -46,9 +46,9 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-icon"];
+  const components = ["tds-icon"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-icon":
+    case "tds-icon":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Icon);
       }

package/dist/components/popover-canvas.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as createPopper } from './popper.js';
 
-const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";
+const popoverCanvasCss = ":host{box-sizing:border-box;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.tds-popover-canvas-show){display:block}";
 
-const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class PopoverCanvas extends HTMLElement {
+const TdsPopoverCanvas = /*@__PURE__*/ proxyCustomElement(class TdsPopoverCanvas extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -91,7 +91,7 @@ const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class PopoverCanvas exten
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -99,7 +99,7 @@ const PopoverCanvas = /*@__PURE__*/ proxyCustomElement(class PopoverCanvas exten
     "referenceEl": ["onReferenceElChange"]
   }; }
   static get style() { return popoverCanvasCss; }
-}, [1, "sdds-popover-canvas", {
+}, [1, "tds-popover-canvas", {
     "selector": [1],
     "referenceEl": [16],
     "show": [4],
@@ -116,14 +116,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-popover-canvas"];
+  const components = ["tds-popover-canvas"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-popover-canvas":
+    case "tds-popover-canvas":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, PopoverCanvas);
+        customElements.define(tagName, TdsPopoverCanvas);
       }
       break;
   } });
 }
 
-export { PopoverCanvas as P, defineCustomElement as d };
+export { TdsPopoverCanvas as T, defineCustomElement as d };

package/dist/components/popper.js

@@ -449,7 +449,6 @@ function effect$1(_ref2) {
   }
 
   if (!contains(state.elements.popper, arrowElement)) {
-
     return;
   }
 
@@ -591,7 +590,6 @@ function computeStyles(_ref5) {
       adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
       _options$roundOffsets = options.roundOffsets,
       roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-
   var commonStyles = {
     placement: getBasePlacement(state.placement),
     variation: getVariation(state.placement),
@@ -1659,8 +1657,7 @@ function popperGenerator(generatorOptions) {
 
         state.orderedModifiers = orderedModifiers.filter(function (m) {
           return m.enabled;
-        }); // Validate the provided modifiers so that the consumer will get warned
-
+        });
         runModifierEffects();
         return instance.update();
       },
@@ -1680,7 +1677,6 @@ function popperGenerator(generatorOptions) {
         // anymore
 
         if (!areValidElements(reference, popper)) {
-
           return;
         } // Store the reference and popper rects to be read by modifiers
 
@@ -1705,7 +1701,6 @@ function popperGenerator(generatorOptions) {
         });
 
         for (var index = 0; index < state.orderedModifiers.length; index++) {
-
           if (state.reset === true) {
             state.reset = false;
             index = -1;
@@ -1743,7 +1738,6 @@ function popperGenerator(generatorOptions) {
     };
 
     if (!areValidElements(reference, popper)) {
-
       return instance;
     }
 
@@ -1758,11 +1752,11 @@ function popperGenerator(generatorOptions) {
     // one.
 
     function runModifierEffects() {
-      state.orderedModifiers.forEach(function (_ref3) {
-        var name = _ref3.name,
-            _ref3$options = _ref3.options,
-            options = _ref3$options === void 0 ? {} : _ref3$options,
-            effect = _ref3.effect;
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
 
         if (typeof effect === 'function') {
           var cleanupFn = effect({

package/dist/components/side-menu-item.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { e as dfs } from './utils.js';
+import { d as dfs } from './utils.js';
 
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component sdds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--sdds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--sdds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 
-const SddsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class SddsSideMenuItem extends HTMLElement {
+const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -27,14 +27,14 @@ const SddsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class SddsSideMenuItem
    */
   updateSlottedElements() {
     if (this.slotEl) {
-      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
+      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
       const addIconClass = (element) => {
-        element.classList.add('__sdds-side-menu-item-icon');
+        element.classList.add('__tds-side-menu-item-icon');
         if (this.collapsed) {
-          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+          element.classList.add('__tds-side-menu-item-icon-collapsed');
         }
         else {
-          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
+          element.classList.remove('__tds-side-menu-item-icon-collapsed');
         }
       };
       this.updateSlotted(isIconOrSvg, addIconClass);
@@ -43,7 +43,7 @@ const SddsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class SddsSideMenuItem
   connectedCallback() {
     // closest() will return null if side-menu-item is inside a shadowRoot that
     // does not contain a side-menu. This is the case for the side-menu-dropdown.
-    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.sideMenuEl = this.host.closest('tds-side-menu');
   }
   componentDidLoad() {
     this.slotEl = this.host.shadowRoot.querySelector('slot');
@@ -64,23 +64,23 @@ const SddsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class SddsSideMenuItem
   }
   get host() { return this; }
   static get style() { return sideMenuItemCss; }
-}, [1, "sdds-side-menu-item", {
+}, [1, "tds-side-menu-item", {
     "selected": [4],
     "active": [4],
     "collapsed": [32]
-  }, [[16, "internalSddsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
+  }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-side-menu-item"];
+  const components = ["tds-side-menu-item"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-side-menu-item":
+    case "tds-side-menu-item":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsSideMenuItem);
+        customElements.define(tagName, TdsSideMenuItem);
       }
       break;
   } });
 }
 
-export { SddsSideMenuItem as S, defineCustomElement as d };
+export { TdsSideMenuItem as T, defineCustomElement as d };