@scania/tegel 0.0.8 → 0.0.9

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/table-body-cell.js

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const tableBodyCellCss = ":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) *{box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-data-table-body-cell-background-hover)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";
+const tableBodyCellCss = ":host(.tds-table__body-cell){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.tds-table__body-cell) *{box-sizing:border-box}:host(.tds-table__body-cell--no-padding){padding:0}:host(.tds-table__body-cell--hover){background-color:var(--tds-table-body-cell-background-hover)}:host(.tds-table__compact){padding:var(--tds-spacing-element-8) var(--tds-spacing-element-16)}:host(.tds-table--divider){border-right:1px solid var(--tds-table-divider)}:host(.tds-table--divider:last-of-type){border-right:none}:host(.tds-table--no-min-width){min-width:unset}";
 
 const relevantTableProps = [
   'verticalDividers',
   'compactDesign',
   'noMinWidth',
 ];
-const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell extends HTMLElement {
+const TdsTableBodyCell = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyCell extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -23,7 +23,7 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell exten
     this.whiteBackground = false;
     this.tableId = '';
   }
-  internalSddsPropChangeListener(event) {
+  internalTdsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -35,15 +35,15 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell exten
       });
     }
   }
-  // Listen to headKey from data-table-header-element
-  internalSddsHoverListener(event) {
+  // Listen to headKey from table-header-element
+  internalTdsHoverListener(event) {
     const { tableId, key } = event.detail;
     if (tableId === this.tableId) {
       this.activeSorting = this.cellKey === key;
     }
   }
-  // Listen to internalSddsTextAlign from data-table-header-element
-  internalSddsTextAlignListener(event) {
+  // Listen to internalTdsTextAlign from table-header-element
+  internalTdsTextAlignListener(event) {
     const [receivedID, receivedKey, receivedTextAlign] = event.detail;
     if (this.tableId === receivedID) {
       if (this.cellKey === receivedKey) {
@@ -52,7 +52,7 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell exten
     }
   }
   connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
+    this.tableEl = this.host.closest('tds-table');
     this.tableId = this.tableEl.tableId;
   }
   componentWillLoad() {
@@ -62,17 +62,17 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell exten
   }
   render() {
     return (h(Host, { class: {
-        'sdds-table__body-cell': true,
-        'sdds-table__body-cell--hover': this.activeSorting,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--no-min-width': this.noMinWidth,
-        'sdds-table__body-cell--no-padding': this.disablePadding,
+        'tds-table__body-cell': true,
+        'tds-table__body-cell--hover': this.activeSorting,
+        'tds-table__compact': this.compactDesign,
+        'tds-table--divider': this.verticalDividers,
+        'tds-table--no-min-width': this.noMinWidth,
+        'tds-table__body-cell--no-padding': this.disablePadding,
       }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
   }
   get host() { return this; }
   static get style() { return tableBodyCellCss; }
-}, [1, "sdds-body-cell", {
+}, [1, "tds-body-cell", {
     "cellValue": [520, "cell-value"],
     "cellKey": [520, "cell-key"],
     "disablePadding": [516, "disable-padding"],
@@ -83,19 +83,19 @@ const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class TableBodyCell exten
     "noMinWidth": [32],
     "whiteBackground": [32],
     "tableId": [32]
-  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsHover", "internalSddsHoverListener"], [16, "internalSddsTextAlign", "internalSddsTextAlignListener"]]]);
+  }, [[16, "internalTdsPropChange", "internalTdsPropChangeListener"], [16, "internalTdsHover", "internalTdsHoverListener"], [16, "internalTdsTextAlign", "internalTdsTextAlignListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-body-cell"];
+  const components = ["tds-body-cell"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-body-cell":
+    case "tds-body-cell":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableBodyCell);
+        customElements.define(tagName, TdsTableBodyCell);
       }
       break;
   } });
 }
 
-export { TableBodyCell as T, defineCustomElement as d };
+export { TdsTableBodyCell as T, defineCustomElement as d };

package/dist/components/table-body-row.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './sdds-checkbox2.js';
+import { d as defineCustomElement$1 } from './checkbox.js';
 
-const tableBodyRowCss = ":host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-data-table-body-row-background-hover)}:host(.sdds-table__row--selected){background-color:var(--sdds-data-table-body-row-background-active)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-data-table-body-row-background-active-hover)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}";
+const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-active)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-active-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}";
 
 const relevantTableProps = [
   'enableMultiselect',
@@ -9,13 +9,13 @@ const relevantTableProps = [
   'compactDesign',
   'modeVariant',
 ];
-const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class TableBodyRow extends HTMLElement {
+const TdsTableBodyRow = /*@__PURE__*/ proxyCustomElement(class TdsTableBodyRow extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.internalSddsRowChange = createEvent(this, "internalSddsRowChange", 6);
-    this.internalSddsPagination = createEvent(this, "internalSddsPagination", 6);
+    this.internalTdsRowChange = createEvent(this, "internalTdsRowChange", 6);
+    this.internalTdsPagination = createEvent(this, "internalTdsPagination", 6);
     this.enableMultiselect = false;
     this.bodyCheckBoxStatus = false;
     this.mainCheckBoxStatus = false;
@@ -29,26 +29,26 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class TableBodyRow extends
     const row = this.host;
     this.bodyCheckBoxStatus = event.currentTarget.checked;
     if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
+      row.classList.add('tds-table__row--selected');
     }
     else {
-      row.classList.remove('sdds-table__row--selected');
+      row.classList.remove('tds-table__row--selected');
     }
-    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
+    this.internalTdsRowChange.emit(this.bodyCheckBoxStatus);
   }
   bodyCheckBoxStatusUpdater(status) {
     this.mainCheckBoxStatus = status;
     this.bodyCheckBoxStatus = this.mainCheckBoxStatus;
     const row = this.host;
     if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
+      row.classList.add('tds-table__row--selected');
     }
     else {
-      row.classList.remove('sdds-table__row--selected');
+      row.classList.remove('tds-table__row--selected');
     }
-    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);
+    this.internalTdsRowChange.emit(this.bodyCheckBoxStatus);
   }
-  internalSddsPropChangeListener(event) {
+  internalTdsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -65,14 +65,14 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class TableBodyRow extends
       this.bodyCheckBoxStatusUpdater(event.detail[1]);
     }
   }
-  internalSddsCheckboxChangeListener(event) {
+  internalTdsCheckboxChangeListener(event) {
     const [receivedID, receivedBodyCheckboxStatus] = event.detail;
     if (this.tableId === receivedID) {
       this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
     }
   }
   connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
+    this.tableEl = this.host.closest('tds-table');
     this.tableId = this.tableEl.tableId;
   }
   componentWillLoad() {
@@ -81,20 +81,20 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class TableBodyRow extends
     });
   }
   componentDidLoad() {
-    this.internalSddsPagination.emit(this.tableId);
+    this.internalTdsPagination.emit(this.tableId);
   }
   render() {
     return (h(Host, { class: {
-        'sdds-table__row': true,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-mode-variant-primary': this.modeVariant === 'primary',
-        'sdds-mode-variant-secondary': this.modeVariant === 'secondary',
-      } }, this.enableMultiselect && (h("td", { class: "sdds-table__body-cell sdds-table__body-cell--checkbox sdds-form-label sdds-form-label--data-table" }, h("sdds-checkbox", { onSddsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
+        'tds-table__row': true,
+        'tds-table__compact': this.compactDesign,
+        'tds-table--divider': this.verticalDividers,
+        'tds-mode-variant-primary': this.modeVariant === 'primary',
+        'tds-mode-variant-secondary': this.modeVariant === 'secondary',
+      } }, this.enableMultiselect && (h("td", { class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { onTdsChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))), h("slot", null)));
   }
   get host() { return this; }
   static get style() { return tableBodyRowCss; }
-}, [1, "sdds-table-body-row", {
+}, [1, "tds-table-body-row", {
     "enableMultiselect": [32],
     "bodyCheckBoxStatus": [32],
     "mainCheckBoxStatus": [32],
@@ -103,19 +103,19 @@ const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class TableBodyRow extends
     "noMinWidth": [32],
     "modeVariant": [32],
     "tableId": [32]
-  }, [[16, "internalSddsTablePropChange", "internalSddsPropChangeListener"], [16, "internalSddsMainCheckboxSelect", "headCheckboxListener"], [16, "internalSddsCheckboxChange", "internalSddsCheckboxChangeListener"]]]);
+  }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsMainCheckboxSelect", "headCheckboxListener"], [16, "internalTdsCheckboxChange", "internalTdsCheckboxChangeListener"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["sdds-table-body-row", "sdds-checkbox"];
+  const components = ["tds-table-body-row", "tds-checkbox"];
   components.forEach(tagName => { switch (tagName) {
-    case "sdds-table-body-row":
+    case "tds-table-body-row":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableBodyRow);
+        customElements.define(tagName, TdsTableBodyRow);
       }
       break;
-    case "sdds-checkbox":
+    case "tds-checkbox":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
@@ -123,4 +123,4 @@ function defineCustomElement() {
   } });
 }
 
-export { TableBodyRow as T, defineCustomElement as d };
+export { TdsTableBodyRow 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: "accordion-item-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
+      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": [4],
+    "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;