@scania/tegel 0.0.9 → 0.0.10

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

@@ -5,50 +5,6 @@ import { d as defineCustomElement$2 } from './table-body-row.js';
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{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}";
 
-const jsonData = [
-  {
-    truck: 'L-series',
-    driver: 'Sonya Bruce',
-    country: 'Brazil',
-    mileage: 123987,
-  },
-  {
-    truck: 'P-series',
-    driver: 'Guerra Bowman',
-    country: 'Sweden',
-    mileage: 2000852,
-  },
-  {
-    truck: 'G-series',
-    driver: 'Ferrell Wallace',
-    country: 'Germany',
-    mileage: 564,
-  },
-  {
-    truck: 'R-series',
-    driver: 'Cox Burris',
-    country: 'Spain',
-    mileage: 1789357,
-  },
-  {
-    truck: 'S-series',
-    driver: 'Montgomery Cervantes',
-    country: 'Croatia',
-    mileage: 65,
-  },
-  {
-    truck: 'L-series',
-    driver: 'Sheryl Nielsen',
-    country: 'Greece',
-    mileage: 365784,
-  },
-  {
-    truck: 'G-series',
-    driver: 'Benton Gomez',
-    country: 'France',
-    mileage: 80957,
-  },
-];
 const relevantTableProps = [
   'enableMultiselect',
   'enableExpandableRows',
@@ -88,8 +44,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
       this.selectedDataExporter();
     };
     this.bodyData = undefined;
-    this.enableDummyData = false;
-    this.jsonData = JSON.stringify(jsonData);
+    this.noResultMessage = undefined;
     this.rowsPerPage = 1;
     this.enableMultiselect = false;
     this.enablePaginationTableBody = false;
@@ -216,6 +171,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
           item.classList.remove('tds-table__row--hidden');
         });
       }
+      this.showNoResultsMessage = false;
       this.disableAllSorting = false;
       this.internalTdsSortingChange.emit([this.tableId, this.disableAllSorting]);
     }
@@ -234,10 +190,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
     relevantTableProps.forEach((tablePropName) => {
       this[tablePropName] = this.tableEl[tablePropName];
     });
-    if (this.enableDummyData) {
-      this.bodyData = this.jsonData;
-    }
-    else if (this.bodyData) {
+    if (this.bodyData) {
       this.arrayDataWatcher(this.bodyData);
     }
   }
@@ -252,7 +205,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
     }
   }
   render() {
-    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("tds-table-body-row", null, Object.keys(row).map((cellData) => (h("tds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), this.showNoResultsMessage && (h("tr", null, h("td", { class: "tds-table__info-message", colSpan: this.columnsNumber }, "Unfortunately, no data matches your search term \uD83D\uDE15"))), h("slot", null)));
+    return (h(Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (h("tds-table-body-row", null, Object.keys(row).map((cellData) => (h("tds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), h("tr", { hidden: !this.showNoResultsMessage }, h("td", { class: "tds-table__info-message", colSpan: this.columnsNumber }, h("slot", { name: "no-result" }), this.noResultMessage)), h("slot", null)));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -261,8 +214,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
   static get style() { return tableBodyCss; }
 }, [4, "tds-table-body", {
     "bodyData": [1032, "body-data"],
-    "enableDummyData": [4, "enable-dummy-data"],
-    "jsonData": [32],
+    "noResultMessage": [1, "no-result-message"],
     "rowsPerPage": [32],
     "enableMultiselect": [32],
     "enablePaginationTableBody": [32],

package/dist/components/tds-table-footer.js

@@ -15,66 +15,69 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
     this.tdsPageChange = createEvent(this, "tdsPageChange", 7);
     this.previousPage = () => {
       /* Emits pagination event. */
-      const pageChangeEvent = this.tdsPageChange.emit({
+      this.tdsPageChange.emit({
         tableId: this.tableId,
         paginationValue: Number(this.inputElement.value) - 1,
       });
       /** If pages and greater or equal to 2, decrease pagination value.
        * This is to not get under 1 in pagination value.  */
-      if (this.paginationValue >= 2) {
-        this.paginationValue--;
+      if (this.defaultPage >= 2) {
+        this.defaultPage--;
       }
       /* If the change event is not prevented -> do pagination. */
-      if (!pageChangeEvent.defaultPrevented) {
+      if (!this.pages) {
         /* Decrease the pagination until the first page. */
         this.runPagination();
       }
     };
     this.nextPage = () => {
-      /* Emits pagination event. */
-      const pageChangeEvent = this.tdsPageChange.emit({
+      var _a;
+      this.tdsPageChange.emit({
         tableId: this.tableId,
         paginationValue: Number(this.inputElement.value) + 1,
       });
       /** If pages and greater or equal to the amount of pages, increase pagination value.
        * This is to not get above the amount of pages in pagination value.  */
-      if (this.paginationValue <= this.numberOfPages) {
-        this.paginationValue++;
+      if (this.defaultPage <= ((_a = this.pages) !== null && _a !== void 0 ? _a : this.numberOfPages)) {
+        this.defaultPage++;
       }
       /* If the change event is not prevented -> do pagination. */
-      if (!pageChangeEvent.defaultPrevented) {
+      if (!this.pages) {
         /* Increase the pagination until the last page. */
         this.runPagination();
       }
     };
     this.runPagination = () => {
-      // grab all rows in body
-      const dataRowsPagination = this.host.parentNode
-        .querySelector('tds-table-body')
-        .querySelectorAll('.tds-table__row');
-      dataRowsPagination.forEach((item, i) => {
-        // for making logic easier 1st result, 2nd result...
-        const index = i + 1;
-        if (this.tempPaginationDisable) {
-          this.paginationValue = 1;
-        }
-        else {
-          const lastResult = this.rowsPerPage * this.paginationValue;
-          const firstResult = lastResult - this.rowsPerPage;
-          if (index > firstResult && index <= lastResult) {
-            item.classList.remove('tds-table__row--hidden');
+      /** Check the rows per page is used - if so, we need to do all the pagination. */
+      if (this.rowsPerPage) {
+        // grab all rows in body
+        const dataRowsPagination = this.host.parentNode
+          .querySelector('tds-table-body')
+          .querySelectorAll('.tds-table__row');
+        dataRowsPagination.forEach((item, i) => {
+          // for making logic easier 1st result, 2nd result...
+          const index = i + 1;
+          if (this.tempPaginationDisable) {
+            this.defaultPage = 1;
           }
           else {
-            item.classList.add('tds-table__row--hidden');
+            const lastResult = this.rowsPerPage * this.defaultPage;
+            const firstResult = lastResult - this.rowsPerPage;
+            if (index > firstResult && index <= lastResult) {
+              item.classList.remove('tds-table__row--hidden');
+            }
+            else {
+              item.classList.add('tds-table__row--hidden');
+            }
           }
-        }
-      });
+        });
+      }
     };
     this.pagination = false;
-    this.rowsPerPage = 5;
-    this.paginationValue = 1;
-    this.maxPages = undefined;
-    this.clientSetColumnsNumber = null;
+    this.defaultPage = 1;
+    this.pages = null;
+    this.rowsPerPage = undefined;
+    this.cols = null;
     this.columnsNumber = 0;
     this.numberOfPages = 0;
     this.tempPaginationDisable = false;
@@ -101,11 +104,15 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
     relevantTableProps.forEach((tablePropName) => {
       this[tablePropName] = this.tableEl[tablePropName];
     });
-    const numberOfRows = this.host.parentElement.querySelector('tds-table-body').childElementCount;
+    if (this.rowsPerPage) {
+      /* Number of children which are <tds-table-body-row> */
+      const numberOfRows = Array.from(this.host.parentElement.querySelector('tds-table-body').children).filter((element) => element.tagName === 'TDS-TABLE-BODY-ROW').length;
+      this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
+    }
+    /** Get the number of columns. */
     const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
-    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
-    if (this.clientSetColumnsNumber !== null) {
-      this.columnsNumber = this.clientSetColumnsNumber;
+    if (this.cols) {
+      this.columnsNumber = this.cols;
     }
     else {
       this.columnsNumber = numberOfColumns;
@@ -115,10 +122,10 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
     const insertedValue = event.target.value;
     if (insertedValue > this.numberOfPages || insertedValue < 1) {
       event.target.classList.add('tds-table__page-selector-input--shake');
-      this.paginationValue = event.target.max;
+      this.defaultPage = event.target.max;
     }
     else {
-      this.paginationValue = event.target.value;
+      this.defaultPage = event.target.value;
     }
     const paginationEvent = this.tdsPageChange.emit({
       tableId: this.tableId,
@@ -134,17 +141,18 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
     }
   }
   render() {
-    var _a;
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: (_a = this.maxPages) !== null && _a !== void 0 ? _a : this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "tds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
+    var _a, _b, _c;
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { class: "tds-table__footer-row" }, h("td", { class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { class: "tds-table__pagination" }, h("div", { class: "tds-table__row-selector" }), h("div", { class: "tds-table__page-selector" }, h("input", { ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: (_a = this.pages) !== null && _a !== void 0 ? _a : this.numberOfPages, value: this.defaultPage, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), h("p", { class: "tds-table__footer-text" }, "of", ' ', h("span", null, this.tempPaginationDisable ? 1 : (_b = this.pages) !== null && _b !== void 0 ? _b : this.numberOfPages), ' ', "pages"), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.defaultPage <= 1 || this.tempPaginationDisable, onClick: () => this.previousPage() }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("button", { type: "button", class: "tds-table__footer-btn", disabled: this.defaultPage >= ((_c = this.pages) !== null && _c !== void 0 ? _c : this.numberOfPages) ||
+        this.tempPaginationDisable, onClick: () => this.nextPage() }, h("tds-icon", { name: "chevron_right", size: "20px" })))))))));
   }
   get host() { return this; }
   static get style() { return tableFooterCss; }
 }, [1, "tds-table-footer", {
     "pagination": [516],
+    "defaultPage": [514, "default-page"],
+    "pages": [514],
     "rowsPerPage": [514, "rows-per-page"],
-    "paginationValue": [514, "pagination-value"],
-    "maxPages": [514, "max-pages"],
-    "clientSetColumnsNumber": [2, "client-set-columns-number"],
+    "cols": [2],
     "columnsNumber": [32],
     "numberOfPages": [32],
     "tempPaginationDisable": [32],

package/dist/components/tds-table-toolbar.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
 
-const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar{display:flex;align-self:center;gap:8px}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.tds-table--compact){height:56px}";
+const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::slotted(*){display:flex;align-self:center;gap:8px}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.tds-table--compact){height:56px}";
 
 const relevantTableProps = [
   'compactDesign',
@@ -64,7 +65,7 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
     }
   }
   render() {
-    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z", fill: "currentColor" }))))), h("slot", { name: "tds-table__actionbar" })))));
+    return (h(Host, { class: this.compactDesign ? 'tds-table--compact' : '' }, h("div", { class: "tds-table__upper-bar-flex" }, h("caption", { class: "tds-table__title" }, this.tableTitle), h("div", { class: "tds-table__actionbar" }, this.enableFiltering && (h("div", { class: "tds-table__searchbar" }, h("input", { class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.searchFunction(event) }), h("span", { class: "tds-table__searchbar-icon" }, h("tds-icon", { name: "search", size: "20px" })))), h("slot", { name: "end" })))));
   }
   get host() { return this; }
   static get style() { return tableToolbarCss; }
@@ -81,13 +82,18 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["tds-table-toolbar"];
+  const components = ["tds-table-toolbar", "tds-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "tds-table-toolbar":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TdsTableToolbar$1);
       }
       break;
+    case "tds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/tds-table.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
 
 const tableCss = ":host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}";
 
@@ -15,7 +16,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends HTMLE
     this.enableExpandableRows = false;
     this.enableResponsive = false;
     this.modeVariant = null;
-    this.tableId = crypto.randomUUID();
+    this.tableId = generateUniqueId();
   }
   emitInternalTdsPropChange(changedValueName, changedValue) {
     this.internalTdsTablePropChange.emit({

package/dist/components/tds-text-field.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h as hasSlot } from './utils.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{opacity:1;color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-lg.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{opacity:1;color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-md.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{opacity:1;color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-sm.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:18px;color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{pointer-events:none}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{padding-right:54px;background-color:transparent}.form-text-field-success.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.sc-tds-text-field .text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
@@ -49,6 +50,8 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
   }
   render() {
     var _a;
+    const usesPrefixSlot = hasSlot('prefix', this.host);
+    const usesSuffixSlot = hasSlot('suffix', this.host);
     return (h("div", { class: `
         ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
@@ -64,7 +67,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         ${this.size === 'md' ? 'form-text-field-md' : ''}
         ${this.size === 'sm' ? 'form-text-field-sm' : ''}
         ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -72,8 +75,9 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
   }
+  get host() { return this; }
   static get style() { return textFieldCss; }
 }, [6, "tds-text-field", {
     "type": [513],

package/dist/components/tds-toast.js

@@ -1,7 +1,8 @@
 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 toastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .toast-wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .toast-wrapper.information{border-left:4px solid var(--tds-information)}:host .toast-wrapper.information tds-icon{color:var(--tds-information)}:host .toast-wrapper.success{border-left:4px solid var(--tds-positive)}:host .toast-wrapper.success tds-icon{color:var(--tds-positive)}:host .toast-wrapper.error{border-left:4px solid var(--tds-negative)}:host .toast-wrapper.error tds-icon{color:var(--tds-negative)}:host .toast-wrapper.warning{border-left:4px solid var(--tds-warning)}:host .toast-wrapper.warning tds-icon{color:var(--tds-warning)}:host .toast-wrapper button.toast-close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .toast-wrapper button.toast-close:hover{cursor:pointer}:host .toast-wrapper button.toast-close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .toast-wrapper button.toast-close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .toast-content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .toast-content .toast-header{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-toast-headline-color)}:host .toast-content .toast-header.no-subheader{margin-bottom:4px}:host .toast-content .toast-header.only-header{margin-bottom:0}:host .toast-content .toast-subheader slot::slotted(*){margin-top:4px;color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-bottom:16px;max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .toast-content .toast-subheader.no-link slot::slotted(*){padding-bottom:0}:host slot[name=toast-link]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";
+const toastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:700}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 0;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){margin-top:4px;color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);max-width:252px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom.subheader{margin-top:16px}:host .content .toast-bottom.no-subheader{margin-top:4px}:host slot[name=bottom]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";
 
 const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLElement {
   constructor() {
@@ -39,46 +40,30 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
         this.hidden = false;
       }
     };
-    this.getHeaderClasses = () => {
-      if (!this.hasSubheader && !this.hasLink) {
-        return 'only-header';
-      }
-      if (!this.hasSubheader) {
-        return 'no-subheader';
-      }
-      return '';
-    };
-    this.toastId = crypto.randomUUID();
+    this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
     this.type = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
   }
   /** Hides the Toast. */
   async hideToast() {
-    this.handleClose();
+    this.hidden = true;
   }
   /** Shows the Toast. */
   async showToast() {
-    this.handleShow();
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+    this.hidden = false;
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
-            toast-wrapper
-            ${this.type}
-            ` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
-              ${this.getHeaderClasses()}
-              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+            wrapper
+            ${this.type}` }, h("tds-icon", { name: this.getIconName(), 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" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
-      }, class: `toast-close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+      }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
   get host() { return this; }
   static get style() { return toastCss; }
@@ -87,10 +72,8 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends HTMLE
     "header": [1],
     "subheader": [1],
     "type": [1],
-    "hidden": [4],
+    "hidden": [516],
     "toastRole": [1, "toast-role"],
-    "hasSubheader": [32],
-    "hasLink": [32],
     "hideToast": [64],
     "showToast": [64]
   }]);

package/dist/components/tds-toggle.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { g as generateUniqueId } from './utils.js';
 
 const toggleCss = ".tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:\"\";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus{outline:none}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus::before{background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}";
 
@@ -20,7 +21,7 @@ const TdsToggle$1 = /*@__PURE__*/ proxyCustomElement(class TdsToggle extends HTM
     this.name = undefined;
     this.headline = undefined;
     this.disabled = false;
-    this.toggleId = crypto.randomUUID();
+    this.toggleId = generateUniqueId();
   }
   /** Toggles the Toggle. */
   async toggle() {

package/dist/components/tds-tooltip.js

@@ -19,6 +19,11 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     this.popperInstance = undefined;
     this.target = undefined;
   }
+  /** Method to update the Tooltip. Will reevaluate the Tooltips position. */
+  async updateTooltip() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  }
   componentDidLoad() {
     var _a;
     this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
@@ -90,7 +95,6 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     var _a;
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
-  /* Slot on line 118 is added to support adding HTML elements to component */
   render() {
     return (h("span", { ref: (el) => {
         this.tooltip = el;
@@ -105,7 +109,8 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     "show": [1028],
     "placement": [1],
     "popperInstance": [32],
-    "target": [32]
+    "target": [32],
+    "updateTooltip": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/utils.js

@@ -500,16 +500,35 @@ function isFocusable(element) {
   return false;
 }
 /**
- * Disables click on a element by adding an event listener
- * and then preventing default and stopping propogation.
- * @param {Element} element The element where the click should be
- * disabled.
- * */
-const disableClickOnElement = (element) => {
-  element.addEventListener('click', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  });
-};
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}
 
-export { appendChildElement as a, appendHiddenInput as b, findPreviousFocusableItem as c, disableClickOnElement as d, dfs as e, findNextFocusableItem as f, getPreviousNestedChildOfSiblingsMatching as g, isHeadingElement as h, inheritAriaAttributes as i, isFocusable as j, updateListChildrenRoles as u };
+export { appendChildElement as a, appendHiddenInput as b, findPreviousFocusableItem as c, dfs as d, getPreviousNestedChildOfSiblingsMatching as e, findNextFocusableItem as f, generateUniqueId as g, hasSlot as h, inheritAriaAttributes as i, isHeadingElement as j, isFocusable as k, updateListChildrenRoles as u };

package/dist/esm/index-23ee700b.js

@@ -2144,18 +2144,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './tds-datetime.entry.js').then(processMod, consoleError);
-        case 'tds-dropdown-filter':
+        case 'tds-dropdown':
           return import(
             /* webpackMode: "lazy" */
-            './tds-dropdown-filter.entry.js').then(processMod, consoleError);
-        case 'tds-dropdown-option-v2':
+            './tds-dropdown.entry.js').then(processMod, consoleError);
+        case 'tds-dropdown-option':
           return import(
             /* webpackMode: "lazy" */
-            './tds-dropdown-option-v2.entry.js').then(processMod, consoleError);
-        case 'tds-dropdown-v2':
-          return import(
-            /* webpackMode: "lazy" */
-            './tds-dropdown-v2.entry.js').then(processMod, consoleError);
+            './tds-dropdown-option.entry.js').then(processMod, consoleError);
         case 'tds-folder-tab':
           return import(
             /* webpackMode: "lazy" */
@@ -2368,10 +2364,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './tds-divider.entry.js').then(processMod, consoleError);
-        case 'tds-dropdown_2':
-          return import(
-            /* webpackMode: "lazy" */
-            './tds-dropdown_2.entry.js').then(processMod, consoleError);
         case 'tds-header-dropdown-list':
           return import(
             /* webpackMode: "lazy" */
@@ -2396,14 +2388,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './tds-side-menu-item.entry.js').then(processMod, consoleError);
-        case 'tds-core-header-item_2':
-          return import(
-            /* webpackMode: "lazy" */
-            './tds-core-header-item_2.entry.js').then(processMod, consoleError);
         case 'tds-checkbox':
           return import(
             /* webpackMode: "lazy" */
             './tds-checkbox.entry.js').then(processMod, consoleError);
+        case 'tds-core-header-item_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './tds-core-header-item_2.entry.js').then(processMod, consoleError);
         case 'tds-icon':
           return import(
             /* webpackMode: "lazy" */