@scania/tegel 0.0.71-beta → 1.0.0

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

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 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;position:relative}: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 };

package/dist/components/side-menu-user-image.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 
-const SideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class SideMenuUserImage extends HTMLElement {
+const TdsSideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserImage extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -14,7 +14,7 @@ const SideMenuUserImage = /*@__PURE__*/ proxyCustomElement(class SideMenuUserIma
     return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
   }
   static get style() { return sideMenuUserImageCss; }
-}, [1, "sdds-side-menu-user-image", {
+}, [1, "tds-side-menu-user-image", {
     "src": [1],
     "alt": [1]
   }]);
@@ -22,14 +22,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-side-menu-user-image"];
+  const components = ["tds-side-menu-user-image"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-side-menu-user-image":
+    case "tds-side-menu-user-image":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, SideMenuUserImage);
+        customElements.define(tagName, TdsSideMenuUserImage);
       }
       break;
   } });
 }
 
-export { SideMenuUserImage as S, defineCustomElement as d };
+export { TdsSideMenuUserImage as T, defineCustomElement as d };

package/dist/components/side-menu-user-label.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sideMenuUserLabelCss = ":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";
+const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
 
-const SideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class SideMenuUserLabel extends HTMLElement {
+const TdsSideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUserLabel extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -14,7 +14,7 @@ const SideMenuUserLabel = /*@__PURE__*/ proxyCustomElement(class SideMenuUserLab
     return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
   }
   static get style() { return sideMenuUserLabelCss; }
-}, [1, "sdds-side-menu-user-label", {
+}, [1, "tds-side-menu-user-label", {
     "heading": [1],
     "subheading": [1]
   }]);
@@ -22,14 +22,14 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-side-menu-user-label"];
+  const components = ["tds-side-menu-user-label"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-side-menu-user-label":
+    case "tds-side-menu-user-label":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, SideMenuUserLabel);
+        customElements.define(tagName, TdsSideMenuUserLabel);
       }
       break;
   } });
 }
 
-export { SideMenuUserLabel as S, defineCustomElement as d };
+export { TdsSideMenuUserLabel as T, defineCustomElement as d };

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

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

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

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:focus,.tds-accordion-item.disabled:focus *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:focus{border-top:1px solid var(--tds-accordion-border-focus)}.tds-accordion-item[disabled=true]:focus{border-color:var(--tds-accordion-border)}:host(:focus) .tds-accordion-item{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}";
+
+const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsToggle = createEvent(this, "tdsToggle", 7);
+    this.header = '';
+    this.expandIconPosition = 'end';
+    this.disabled = false;
+    this.expanded = false;
+    this.paddingReset = false;
+  }
+  /** Method for toggling the expanded state of the Accordion Item. */
+  async toggleAccordionItem() {
+    // This is negated in order to emit the value the Accordion Item will have after it has expanded/redacted.
+    const event = this.tdsToggle.emit({
+      expanded: !this.expanded,
+    });
+    if (!event.defaultPrevented) {
+      this.expanded = !this.expanded;
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `tds-accordion-item
+        ${this.disabled ? 'disabled' : ''}
+        ${this.expanded ? 'expanded' : ''}
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "tds-accordion-title" }, this.header, h("slot", { name: "header" })), h("div", { class: "tds-accordion-icon" }, h("tds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `tds-accordion-panel
+            ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
+            ` }, h("slot", null)))));
+  }
+  static get style() { return accordionItemCss; }
+}, [1, "tds-accordion-item", {
+    "header": [1],
+    "expandIconPosition": [1, "expand-icon-position"],
+    "disabled": [4],
+    "expanded": [4],
+    "paddingReset": [4, "padding-reset"],
+    "toggleAccordionItem": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-accordion-item", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsAccordionItem$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsAccordionItem = TdsAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsAccordionItem, defineCustomElement };

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

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

package/dist/components/tds-accordion.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const accordionCss = ":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .tds-accordion-header-icon-start,:host .tds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start::after,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end::after{border-color:var(--tds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .tds-accordion-header-icon-start,:host(:focus) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .tds-accordion-header-icon-start::after,:host(:focus) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .tds-accordion-header-icon-start,:host(:active) .disabled .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .tds-accordion-header-icon-start::after,:host(:active) .disabled .tds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--tds-accordion-border)}";
+
+const TdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordion extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+  }
+  render() {
+    return (h(Host, { class: `tds-accordion ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  static get style() { return accordionCss; }
+}, [1, "tds-accordion", {
+    "modeVariant": [1, "mode-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsAccordion$1);
+      }
+      break;
+  } });
+}
+
+const TdsAccordion = TdsAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsAccordion, defineCustomElement };

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

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

package/dist/components/tds-badge.js

@@ -0,0 +1,68 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const badgeCss = ":host{--tds-badge-background-color:var(--tds-negative);--tds-badge-color-text:var(--tds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.tds-badge{display:block;border-radius:12px;background-color:var(--tds-badge-background-color);text-align:center}.tds-badge.tds-badge-sm{height:8px;width:8px;line-height:8px}.tds-badge.tds-badge-lg{height:20px;line-height:20px;width:20px}.tds-badge.tds-badge-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.tds-badge.tds-badge-hidden{display:none}.tds-badge-text{font-family:var(--tds-font-family-semi-condensed-bold);font-size:12px;color:var(--tds-badge-color-text);font-weight:bold}";
+
+const TdsBadge$1 = /*@__PURE__*/ proxyCustomElement(class TdsBadge extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.value = '';
+    this.hidden = false;
+    this.size = 'lg';
+    this.shape = '';
+    this.text = '';
+  }
+  watchProps() {
+    this.checkProps();
+  }
+  componentWillLoad() {
+    this.checkProps();
+  }
+  checkProps() {
+    const valueAsNumber = parseInt(this.value);
+    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
+      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+      this.size = 'lg';
+      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+    }
+    else {
+      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+      if (this.value !== '' && this.size !== 'sm') {
+        console.warn('The provided value is either empty or string, please provide value as number.');
+      }
+    }
+  }
+  render() {
+    return (h("host", { class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { class: "tds-badge-text" }, this.text)));
+  }
+  static get watchers() { return {
+    "value": ["watchProps"],
+    "size": ["watchProps"]
+  }; }
+  static get style() { return badgeCss; }
+}, [1, "tds-badge", {
+    "value": [1],
+    "hidden": [516],
+    "size": [1],
+    "shape": [32],
+    "text": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsBadge$1);
+      }
+      break;
+  } });
+}
+
+const TdsBadge = TdsBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsBadge, defineCustomElement };

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

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

package/dist/components/tds-banner.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId, h as hasSlot } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const bannerCss = ":root,.tds-mode-light{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:root tds-toast,.tds-mode-light tds-toast{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark{--tds-link:var(--tds-blue-300);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-blue-100);--tds-link-disabled:var(--tds-grey-800)}.tds-mode-dark tds-toast{--tds-link:var(--tds-blue-500);--tds-link-hover:var(--tds-blue-400);--tds-link-focus:var(--tds-blue-400);--tds-link-visited:var(--tds-grey-900);--tds-link-disabled:var(--tds-grey-400)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--tds-banner-background-error)}:host(.information){background-color:var(--tds-banner-background-info)}:host{display:flex;background-color:var(--tds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--tds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--tds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--tds-banner-prefix-info-color)}:host .content{color:var(--tds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .content.no-icon{padding-left:16px}:host .header-subheader{display:flex;flex-direction:column;gap:4px}:host .header,:host slot[name=header]{font:var(--tds-headline-06);letter-spacing:var(--tds-headline-06-ls)}:host .subheader,:host slot[name=subheader]{display:block;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host slot[name=actions]::slotted(*){display:block;width:fit-content;margin-top:16px}:host .banner-close{color:var(--tds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--tds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus-visible{outline:none}:host .banner-close button:focus-visible tds-icon{outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
+
+const TdsBanner$1 = /*@__PURE__*/ proxyCustomElement(class TdsBanner extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tdsClose = createEvent(this, "tdsClose", 7);
+    this.tdsShow = createEvent(this, "tdsShow", 7);
+    this.handleClose = () => {
+      const tdsCloseEvent = this.tdsClose.emit({
+        bannerId: this.bannerId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = true;
+      }
+    };
+    this.handleShow = () => {
+      const tdsCloseEvent = this.tdsShow.emit({
+        bannerId: this.bannerId,
+      });
+      if (!tdsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
+    this.icon = undefined;
+    this.header = undefined;
+    this.subheader = undefined;
+    this.variant = 'default';
+    this.bannerId = generateUniqueId();
+    this.hidden = false;
+  }
+  /** Hides the Banner. */
+  async hideBanner() {
+    this.hidden = true;
+  }
+  /** Shows the Banner */
+  async showBanner() {
+    this.hidden = false;
+  }
+  connectedCallback() {
+    if (this.variant === 'error') {
+      this.icon = 'error';
+    }
+    else if (this.variant === 'information') {
+      this.icon = 'info';
+    }
+  }
+  render() {
+    const usesHeaderSlot = hasSlot('subheader', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesActionsSlot = hasSlot('actions', this.host);
+    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.variant}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { class: "content" }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && h("slot", { name: "actions" })), h("div", { class: `banner-close` }, h("button", { onClick: () => {
+        this.handleClose();
+      } }, h("tds-icon", { name: "cross", size: "20px" })))));
+  }
+  get host() { return this; }
+  static get style() { return bannerCss; }
+}, [1, "tds-banner", {
+    "icon": [1],
+    "header": [1],
+    "subheader": [1],
+    "variant": [1],
+    "bannerId": [1, "banner-id"],
+    "hidden": [516],
+    "hideBanner": [64],
+    "showBanner": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-banner", "tds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsBanner$1);
+      }
+      break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const TdsBanner = TdsBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsBanner, defineCustomElement };

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

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

package/dist/components/tds-block.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const blockCss = ".tds-block{box-sizing:border-box;color:var(--tds-block-color);border-radius:4px;padding:16px;font:var(--tds-body-01);letter-spacing:var(--tds-body-01-ls);background-color:var(--tds-block-background)}.tds-block *{box-sizing:border-box}.tds-mode-variant-primary{--tds-block-background:var(--tds-block-background-primary);--tds-block-background-nested:var(--tds-block-background-nested-primary)}.tds-mode-variant-secondary{--tds-block-background:var(--tds-block-background-secondary);--tds-block-background-nested:var(--tds-block-background-nested-secondary)}";
+
+const TdsBlock$1 = /*@__PURE__*/ proxyCustomElement(class TdsBlock extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+  }
+  connectedCallback() {
+    this.children = Array.from(this.host.children).filter((item) => item.tagName === 'TDS-BLOCK');
+    this.children.forEach((item) => {
+      if (!this.modeVariant) {
+        item.setAttribute('mode-variant', 'secondary');
+      }
+      else {
+        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');
+      }
+    });
+  }
+  render() {
+    return (h("div", { class: `tds-block ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return blockCss; }
+}, [1, "tds-block", {
+    "modeVariant": [1, "mode-variant"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["tds-block"];
+  components.forEach(tagName => { switch (tagName) {
+    case "tds-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TdsBlock$1);
+      }
+      break;
+  } });
+}
+
+const TdsBlock = TdsBlock$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { TdsBlock, defineCustomElement };

package/dist/components/tds-body-cell.d.ts

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