@scania/tegel 1.15.0-table-issue-beta.0 → 1.16.0-tdsheaderitems-beta.0

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 
-const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{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--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:scroll;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
+const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{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--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
 const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
 
 const relevantTableProps = [
@@ -20,6 +20,7 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
         this.colSpan = null;
         this.rowId = generateUniqueId();
         this.expanded = undefined;
+        this.overflow = 'auto';
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -46,12 +47,12 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
             this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
         }
     }
-    /** method to expand table row */
+    /** Method to expand table row */
     async expand() {
         this.isExpanded = true;
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
     }
-    /** method to collapse table row */
+    /** Method to collapse table row */
     async collapse() {
         this.isExpanded = false;
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
@@ -86,18 +87,20 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: 'cd23997b2d0b659691199b0f6a7be6aa51689ee4', class: {
+        return (h(Host, { key: '46a17e89125c4647a7a3db2c04cb8dff90dcc06a', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'a3fec49a0b97a35f61db7c31dfc023ba3acebd86', class: {
+            } }, h("tr", { key: '656a636f2444586e1c78fb5c5de45c623a47e2b5', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: 'd995074fc578640544f59df3426762ff6595dd0b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '0f905bda5651a8c9dc30094dbc402e5e618e4030', class: "tds-table__expand-control-container" }, h("input", { key: '9b316a0e3a44cfa21851a1ac2ec0980d53d3aa54', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '022d891384b907d3ebce4b2138fef4f5c6f7d44f', class: "tds-expendable-row-icon" }, h("svg", { key: 'fb7ccb4d599e72a9d7a56808f59226779ffe611b', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1e2c766463813a4b1edc32093abbbf501b99974b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '7f0e3d93df3da8eeff969daa9aba8eecaa1e6e23' })), h("tr", { key: '89766434b64dd9bf0aecf805fdd494aab68f8af9', class: {
+            }, part: "row" }, h("td", { key: '65cb018b213aca84d520a737761e528a6244da8b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'c029a732fe57be3189cfe51c456cb8cdd90739c2', class: "tds-table__expand-control-container" }, h("input", { key: '8bfe49a5a02b5467cd38563244910ea7544c7c5d', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '31b764bf3293b551fc036a4d2a17db4d2c379ab6', class: "tds-expendable-row-icon" }, h("svg", { key: 'e35527f2c66ead3523736ea2dbaf0ce2fcfd3c69', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '00c9f5bca5b04898e0f17ab567e0826d39fe71c4', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '983217a323605c06a600a8db70174fd7464c826c' })), h("tr", { key: '5a2f7db44631b3d912ea93bc97b490d996803d4f', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'f0c746d12fae92eae3e6bf9651c826fb3aacbefe', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: '0a9e454379a7a6a72b3d6ea33a66a4aaaac09e8f', name: "expand-row" })))));
+            }, part: "expand-row" }, h("td", { key: '38ee3a00705e910161f43894990f987596f3f139', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("div", { key: '5fccf84bd2f7454afc3bb036210294e55f80f781', style: {
+                overflow: this.overflow,
+            } }, h("slot", { key: '01a7f9edf532244bd4f7205b339ffcafb93ceb20', name: "expand-row" }))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -108,6 +111,7 @@ const TdsTableBodyRowExpandable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTa
         "colSpan": [2, "col-span"],
         "rowId": [513, "row-id"],
         "expanded": [516],
+        "overflow": [513],
         "isExpanded": [32],
         "tableId": [32],
         "columnsNumber": [32],

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

@@ -1,9 +1,13 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.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 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}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
 const TdsTableBodyStyle0 = tableBodyCss;
 
-const relevantTableProps = ['multiselect', 'expandableRows'];
+const relevantTableProps = [
+    'multiselect',
+    'expandableRows',
+    'zebraMode',
+];
 const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody extends H {
     constructor() {
         super();
@@ -20,6 +24,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
+        this.zebraMode = 'none';
         this.tableId = '';
     }
     internalTdsPropChangeListener(event) {
@@ -48,10 +53,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         });
     }
     componentWillRender() {
-        const headerElement = this.host.parentElement.querySelector('tds-table-header');
-        const headerColumnsNo = headerElement
-            ? this.host.parentElement.querySelector('tds-table-header').children.length
-            : 0;
+        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
         // multiselect and expended features requires one extra column for controls...
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
@@ -61,7 +63,12 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         }
     }
     render() {
-        return (h(Host, { key: '5f7031a5167cd4bf867bb7813cf9fabb8c9405b9', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: 'ccc4113754dec3e5b5da2447867de906d009dd93' })));
+        return (h(Host, { key: '0e5ac81e32535901ac4940316a474472368cca86', "data-selected-rows": this.multiselectArrayJSON, class: {
+                'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
+                'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
+                'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
+                'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
+            } }, h("slot", { key: 'c43f3047fc836b0d7f147e00680befd56b25721c' })));
     }
     get host() { return this; }
     static get style() { return TdsTableBodyStyle0; }
@@ -73,6 +80,7 @@ const TdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableBody exten
         "multiselectArrayJSON": [32],
         "mainCheckboxStatus": [32],
         "columnsNumber": [32],
+        "zebraMode": [32],
         "tableId": [32]
     }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"], [16, "internalTdsRowChange", "bodyCheckboxListener"]]]);
 function defineCustomElement$1() {

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

@@ -1,7 +1,10 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
+import { d as defineCustomElement$5 } from './p-e4d7c655.js';
+import { d as defineCustomElement$4 } from './p-e7eab204.js';
+import { d as defineCustomElement$3 } from './p-1c256b8d.js';
 import { d as defineCustomElement$2 } from './p-3e74be57.js';
 
-const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 16px}:host .tds-table__footer-cell .tds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-left:16px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:20px;width:20px;fill:var(--tds-table-color)}:host(.tds-table--compact){height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:24px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
+const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 16px}:host .tds-table__footer-cell .tds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:16px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:8px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:54px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-left:16px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:20px;width:20px;fill:var(--tds-table-color)}:host(.tds-table--compact){height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:32px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:24px}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
 const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
@@ -17,17 +20,28 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         this.__registerHost();
         this.__attachShadow();
         this.tdsPagination = createEvent(this, "tdsPagination", 7);
+        this.emitTdsPagination = () => {
+            if (this.rowsperpage) {
+                this.tdsPagination.emit({
+                    tableId: this.tableId,
+                    paginationValue: Number(this.paginationValue),
+                    rowsPerPage: this.rowsPerPageValue,
+                });
+            }
+            else {
+                this.tdsPagination.emit({
+                    tableId: this.tableId,
+                    paginationValue: Number(this.paginationValue),
+                });
+            }
+        };
         this.previousPage = () => {
             /** 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--;
             }
-            /* Emits pagination event. */
-            this.tdsPagination.emit({
-                tableId: this.tableId,
-                paginationValue: Number(this.paginationValue),
-            });
+            this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
         this.nextPage = () => {
@@ -36,14 +50,23 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
             if (this.paginationValue <= this.pages) {
                 this.paginationValue++;
             }
-            this.tdsPagination.emit({
-                tableId: this.tableId,
-                paginationValue: Number(this.paginationValue),
-            });
+            this.emitTdsPagination();
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.lastPage = () => {
+            this.paginationValue = this.pages;
+            this.emitTdsPagination();
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.firstPage = () => {
+            this.paginationValue = 1;
+            this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
         this.pagination = false;
         this.paginationValue = 1;
+        this.rowsperpage = true;
+        this.rowsPerPageValues = [10, 25, 50];
         this.pages = null;
         this.cols = null;
         this.columnsNumber = 0;
@@ -51,6 +74,7 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         this.lastCorrectValue = undefined;
         this.tableId = '';
         this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -96,12 +120,13 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         else {
             this.paginationValue = insertedValue;
         }
-        this.tdsPagination.emit({
-            tableId: this.tableId,
-            paginationValue: Number(this.paginationValue),
-        });
+        this.emitTdsPagination();
         this.storeLastCorrectValue(this.paginationValue);
     }
+    rowsPerPageChange(event) {
+        this.rowsPerPageValue = parseInt(event.detail.value);
+        this.emitTdsPagination();
+    }
     getStyles() {
         const styles = {};
         if (this.horizontalScrollWidth) {
@@ -110,35 +135,56 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         return styles;
     }
     render() {
-        return (h(Host, { key: '0d611bd3d31ce4dd1a7238784aa6aa6ab29d2abd', class: {
+        var _a;
+        return (h(Host, { key: 'a47ca76a46aae73aca5ce929c70c2e76f8c2c853', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'cb4fc7ffecfa791f08a3da4a167459ccfb32e782', class: "tds-table__footer-row" }, h("td", { key: 'bf7388bc8aa26313cadba5333dc587d431a29867', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'ace766078c85f047034ac614712dc58b6dc7b540', class: "tds-table__pagination" }, h("div", { key: '0ef2c3c300bab7595773b65aa40da1399af4b7b8', class: "tds-table__row-selector" }), h("div", { key: '3fe2283dcbfd64fb54bd8faa9bd269dac22e81d8', class: "tds-table__page-selector" }, h("input", { key: '84295a91900f676742795c975f1706d4fbe196f6', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '88c7d7d7cfe66f2431b44c9ed38ebee5771f54b7', class: "tds-table__footer-text" }, "of ", h("span", { key: '42cf669a05c6e0e86a56aa568f2623c562bf83f6' }, this.pages), " pages"), h("button", { key: '3f022e45c6ca31ce542854c5e659349ab54b372a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '253b1cb33d4038ce03ff8fdb0bad30ba46ab0c13', name: "chevron_left", size: "20px" })), h("button", { key: 'ad21b63c30fc638372c89bb366be77df419bf532', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '58a640745984554b8c7cba3ce07130063299223e', name: "chevron_right", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: '725d46b781fd8abe9748a1aabeff92ca419a4189', class: "tds-table__footer-row" }, h("td", { key: 'dce6cb9b634da75b37cd6181d12fbfdfa1eba34c', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '045cf654031b791addb51eb1c9a7b951cb5aec5c', class: "tds-table__pagination" }, h("div", { key: 'e321a6407dc41bb0d5ea8ff272a3ad5a73cc7bf9', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'c126a905a62dbbfad2b1f9b4e90e24ea0a5d1f7d', class: "rows-per-page" }, h("p", { key: '68da58804bf6bf222179368ff99b83aaa2e891b4' }, "Rows per page"), h("tds-dropdown", { key: '4db380d47b1944a45c31b083a69d4662c0951fa4', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            return (h("tds-dropdown-option", { value: `${value}` }, value));
+        }))))), h("div", { key: '81951e2a1405f7d8d9fb9d5602ded2652fa3574e', class: "tds-table__page-selector" }, h("input", { key: 'f9a0b0e94c31df6c7f6b78c8334f172b412fde64', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '9f03ddfb2efed8f29d932e4272f37cb7fea99366', class: "tds-table__footer-text" }, "of ", h("span", { key: '0e925460d959f6e00f83011d13e5ef2d7ed3cbb6' }, this.pages), " pages"), h("button", { key: '50da78d78b7ef971056e33ba0d0a1bac78149319', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'd69ea67ed2ff1dff364c9d3805b3cb29fd953050', name: "skip_backwards", size: "20px" })), h("button", { key: 'c3aeea0024fc6a72aea633d59c10db7729f76022', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '0df46c69a9682fb2a4ec4c75b15adc50b7d436da', name: "chevron_left", size: "20px" })), h("button", { key: '5bd78c3e14dc55421763ac78e19daac64c184e34', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'c0739697329a13021dd9cdb771b69491264962a5', name: "chevron_right", size: "20px" })), h("button", { key: 'b1317db56a99632abf132f619bc59c773e631e04', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '3d6b0997ae36fd372aeb2099a304f02282766f7e', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return this; }
     static get style() { return TdsTableFooterStyle0; }
 }, [1, "tds-table-footer", {
         "pagination": [516],
         "paginationValue": [1538, "pagination-value"],
+        "rowsperpage": [516],
+        "rowsPerPageValues": [16],
         "pages": [514],
         "cols": [2],
         "columnsNumber": [32],
         "compactDesign": [32],
         "lastCorrectValue": [32],
         "tableId": [32],
-        "horizontalScrollWidth": [32]
+        "horizontalScrollWidth": [32],
+        "rowsPerPageValue": [32]
     }, [[16, "internalTdsTablePropChange", "internalTdsPropChangeListener"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-table-footer", "tds-icon"];
+    const components = ["tds-table-footer", "tds-checkbox", "tds-dropdown", "tds-dropdown-option", "tds-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-table-footer":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTableFooter$1);
             }
             break;
+        case "tds-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "tds-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "tds-dropdown-option":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "tds-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/tds-table-header-input-wrapper.js

@@ -71,7 +71,7 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
         }
     }
     render() {
-        return (h(Host, { key: '43243a6c8e1a0ef0f18d9f1f1d4cd4cba6bc15b4', class: {
+        return (h(Host, { key: '733f9d487fd530eea4b597368c5ecdc46fd8dedd', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

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

@@ -88,11 +88,11 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         });
     }
     render() {
-        return (h(Host, { key: '5f212887d3d35e32240e9745d62685b7024100e1', class: {
+        return (h(Host, { key: '08dd2d38a8df4e8715c780dde55d81d52a26b26f', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '1a40af0dddfb627c39ae5df47aedc80eb1006f04' }, this.multiselect && (h("th", { key: '17d16e6bf8964b30e0ce93a76c436112ac0a6540', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '98f282baf5a0b4a929ad04c850319e04955090a0', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d8115deb1403df121309d32a166ccc6eac685d5', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7cc0e1c0d3d7ec9f4bef917a5b8346cca8bc58ae', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f7aa3bd3acdd69f1f2a20d3525ad5901f0ac239' }))));
+            } }, h("tr", { key: '5d5d3f8fa7293ce9e8b09fdb241225ce16e4b0d5' }, this.multiselect && (h("th", { key: '7b3034bd06348bc8df55a90fe13991f4910715a2', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '0cae18f657cb4121c8ed21437ff55cefa308a5ff', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '423b6ff577d3b65e7eb4f6e8a5f3f914d810904a', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '74eb896f4b1de85cf9b561b9aa10e6d9e309031c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a9b444c190c08a4eb53fa634281e2ff591046c5a' }))));
     }
     get host() { return this; }
     static get style() { return TdsTableHeaderStyle0; }

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

@@ -69,10 +69,10 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         return styles;
     }
     render() {
-        return (h(Host, { key: '7f94e84dc631768fb7fba68846408c049959eee7', class: {
+        return (h(Host, { key: 'c3488722c0a27313efa13acafeab81ca23c6c765', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: 'ecbf925fcd58dd77de40fd4b15c0a57c07b8a1c0', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd2f230c4944590897ac220fc2c35cd72008b8f4c', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'd75faf41e03bd19b1e268e85c884298c75d74450', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '7b098f02923e9580e1c8852dfcca11d4c21c75bd', class: "tds-table__searchbar" }, h("input", { key: 'c9d76e665ef26e197a7dad1e9ac83a0095ad66e9', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '1af8c1344e160cd494eeafc43c4f2422f7119d83', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '9c85fc3e817afcf7b548f2f851f3ce0970f82c00', name: "search", size: "20px" })))), h("slot", { key: 'ff6e2d21cc06fa5981e7814040d6d79581f8d974', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: '688e2903c9b447cb0770a8ee15dc8d1c4d3608d3', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'a9c57a3b3cdbc61d7176163310cd8acda8ed58a2', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'ae28004762b94923faa433a9f13245ab8595493b', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0d85e682ee8a733fc61df0855ed1a56bd7356069', class: "tds-table__searchbar" }, h("input", { key: '50b9c945f34cb13d440ed448f8be58ea2900f9f7', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'eff520922329f0379f22cb31171b81887c6bbdf7', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '09c7d084aed40ec2a3a25dc1ca86d978b8ef39ec', name: "search", size: "20px" })))), h("slot", { key: '1b7dc61ec5ec9d5ac7e5ea116cedfd6a773d5628', name: "end" })))));
     }
     get host() { return this; }
     static get style() { return TdsTableToolbarStyle0; }

package/dist/components/tds-table.js

@@ -17,6 +17,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         this.expandableRows = false;
         this.responsive = false;
         this.modeVariant = null;
+        this.zebraMode = 'none';
         this.horizontalScrollWidth = null;
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
@@ -73,6 +74,9 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
     noMinWidthChanged(newValue) {
         this.emitInternalTdsPropChange('noMinWidth', newValue);
     }
+    zebraModeChanged(newValue) {
+        this.emitInternalTdsPropChange('zebraMode', newValue);
+    }
     modeVariantChanged(newValue) {
         this.emitInternalTdsPropChange('modeVariant', newValue);
     }
@@ -88,11 +92,11 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         }
     }
     render() {
-        return (h(Host, { key: '580c1c90c9f4556b16037c3200ae739a891bea88', class: {
+        return (h(Host, { key: '4d156fac32972a0493c44dc235134370f503c43c', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: 'f2e9d248c5e93e6d83cfcd74408f99ed54c1ae95', style: this.getStyles(), class: {
+            } }, h("table", { key: 'da2663a9406f0f5a68ba789fd9ae16e474f28b6e', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -103,7 +107,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '74edfe5bc755d4a7880b1368452f2906ebc5346a' }))));
+            } }, h("slot", { key: '1fc2d3dc9a43c87adea2ad500f573838c23bd2ca' }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -112,6 +116,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         "compactDesign": ["compactDesignChanged"],
         "verticalDividers": ["verticalDividersChanged"],
         "noMinWidth": ["noMinWidthChanged"],
+        "zebraMode": ["zebraModeChanged"],
         "modeVariant": ["modeVariantChanged"],
         "horizontalScrollWidth": ["widthChanged"]
     }; }
@@ -124,6 +129,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         "expandableRows": [516, "expandable-rows"],
         "responsive": [516],
         "modeVariant": [513, "mode-variant"],
+        "zebraMode": [513, "zebra-mode"],
         "horizontalScrollWidth": [1, "horizontal-scroll-width"],
         "tableId": [1, "table-id"],
         "enableHorizontalScrollToolbarDesign": [32],
@@ -135,6 +141,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
         "compactDesign": ["compactDesignChanged"],
         "verticalDividers": ["verticalDividersChanged"],
         "noMinWidth": ["noMinWidthChanged"],
+        "zebraMode": ["zebraModeChanged"],
         "modeVariant": ["modeVariantChanged"],
         "horizontalScrollWidth": ["widthChanged"]
     }]);

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

@@ -55,7 +55,7 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '1b4348574e1a9e7e315c61a2d555b487b619f22e', class: {
+        return (h("div", { key: 'd75b1ef11a730f7133c176776d6ff2f7713c302e', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -69,12 +69,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7f604df386ece3c8c01e5b60e75ef80de4500e81', class: "text-field-label-outside" }, h("div", { key: 'c13f468f76d9484c016a8218d9cc73b18724458f' }, this.label))), h("div", { key: '992c9076d7b1f9c6bec1847851bcfd989b6b0497', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'dfb616b9083ce42d90c180b5217e2e60ee3784af', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: 'd1058c58a68782725d425d22ee3982605e375d4b', class: "text-field-label-outside" }, h("div", { key: 'c15fb3eb6f0345e2c58efd21711113c9f17a6223' }, this.label))), h("div", { key: '8795ee1b898c4b9b503588e31f4dac1354154a5c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9b78e21a8aa003b976110467d28cc0cdd7e8da96', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '98ed143615ad68a3cd51aca034999bfc279fce6b', name: "prefix" }))), h("div", { key: '8079b57a7e047255ed45f3f1ba9e28655a16ebed', class: "text-field-input-container" }, h("input", { key: '11782cd5c55f092a02ec741ecd9b20f2b8bfae91', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: 'e393a751374617fba0eb3153027ccc7c687546ae', name: "prefix" }))), h("div", { key: '5acc43f4064dee1294d9590f2978e6d2a68642a0', class: "text-field-input-container" }, h("input", { key: '12c6abdf65142b09efe6bd293c21f447307606f8', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -87,13 +87,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f72126827829ec26bafee0b5d0eb29a9b96e8628', class: "text-field-label-inside" }, this.label))), h("div", { key: 'c21c6a8cd0d5c8a4814efa1a8f93a5e99b3e092e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '9029f584ea0ef6cc081985a087692e066394a01b', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '4f4b7888d0b25431b9716ae9082188945ee1b36f', class: "text-field-label-inside" }, this.label))), h("div", { key: '797624248b2d5a5d2ea20687f1952c9b4d8945d5', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '8a629c0927d391aea80a4b6d6ef4040772e9ded0', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'f50d3a85bfd324529516a2b8180129e194202465', name: "suffix" }))), h("span", { key: '6f7f160b3a1b425a7ace18b748b64e50cfd8389f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '82b1d06cfb8a3b08543a77c839ccfcba2e9fae13', name: "edit_inactive", size: "20px" })), h("span", { key: '0c9c2ab0b8f620db172050e1db1dd4324b3ab094', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '84c9baa2bce9159f5ea084ed35051a878cfac1f9', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '888d0185686e5ba16bf7b4a064ea1926e17d5c96', class: "text-field-helper-error-state" }, h("tds-icon", { key: '752d5c6c9dee5a7eff5abae9d60e2eb353ee2e60', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'ead6aba2e4f11010dc4d6c17977abaac0b242e76', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '27e1880b203314c781260116b99fd1474a6a8041', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: '2de42ce855242335dc1a25248e09527534be0152', name: "suffix" }))), h("span", { key: '422c8b07010a7dd59d8653c65f76ab79dbf4284b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '254a6cf7c6fcde19447e0275d6984f16d1bf4385', name: "edit_inactive", size: "20px" })), h("span", { key: '8625d2334c62556ac6484ee81ac05a5caef87e33', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '82bc517d9d3be59c5861687334465b41d768ff63', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '25366fcd3b55885a5433b36560be8e6849c15875', class: "text-field-helper-error-state" }, h("tds-icon", { key: '8cdbc0ae8ec4efd992cecbb1588ba96c0600783e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '232f3e4f400c49f8c065190d9353202b94419ef1', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '9ccc2d350603c6ad5ed6c49e84e00f8adcc2cd91', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     get host() { return this; }
     static get style() { return TdsTextFieldStyle0; }

package/dist/components/tds-textarea.js

@@ -49,7 +49,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
     }
     render() {
         var _a;
-        return (h("div", { key: 'f110536792da6122221dc6941b6da71900ea2111', class: `
+        return (h("div", { key: 'fc3599b1d61b75327840068968001f2df6ec6b05', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -59,7 +59,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { key: '67784499bde176257853f1f4c7a8757ce98b07ee', class: 'textarea-label' }, this.label), h("div", { key: '7ad9c6b9c897995a98af2b9e9babefc3e2ae8831', class: "textarea-wrapper" }, h("textarea", { key: '94d944bb5e9722d89f7b0c98d18199c52f81b458', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { key: '5ac3d5ef752a55f241865fe51bdb7aa96416731b', class: 'textarea-label' }, this.label), h("div", { key: '310c4a2a51391c366e17eca98ee22903d1620b16', class: "textarea-wrapper" }, h("textarea", { key: '4b83ff31486dea966a4a4a9df35d83043ad1a616', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -67,7 +67,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '719da60a6975556fa37b2104d435bf99fb99efa5', class: "textarea-resizer-icon" }, h("svg", { key: '6b6969d6e49824fb8791343ac62bd1a9f5c4e0fa', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1e4d31007fef3c520cfa32686cf9b888919b314a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '144143c8af4351e0d2370ebeb0c50a0124ab8f9b', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'e2c0ab89e72258d46bc6479b663f4d62466fa8b0', name: "edit_inactive" })), h("span", { key: 'c07af4893c1fd32de8988c1ef6ef3b77c4a63768', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'dd8ae6cbd2cdde4a08392c6905faae07bd7d58e7', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: 'c282dcee39da4e70d207e41221c557852a06fb43', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '7f05bc68e67825742fe9c8c49853a39fabf1199e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '32dd0095c4500558fbe9c9d46ba6db3eb67d9034', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '7718db97412e86796819e23584037833d762d6ce', class: "textarea-resizer-icon" }, h("svg", { key: '2b59b518d8bb6a61f6cbbbfb9bd2ec67938e91b6', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99c42c62b8e6a17c6acf6824d6e08ae88a3ed2bf', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '5c4a4cad4aa805df35ce264c34f9cdde678b1804', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'c5fe3371e08431c38a3979c226f64b79c35fed23', name: "edit_inactive" })), h("span", { key: 'e4261be8ce8cf8fc9cba5f25e6d4c52de4503f67', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'a58d64d87a5f971f3e51356a839beea73dfff4b4', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '39dfd4c2c356817e5f3b39af7f4e90334de79ac0', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8df0493b694ddce5cd3669f00527329df2c29e06', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8604248491d68a2b70531c028661573de48deb27', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get style() { return TdsTextareaStyle0; }
 }, [2, "tds-textarea", {

package/dist/components/tds-toast.js

@@ -62,12 +62,12 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends H {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'f0ddc729628a45f868868f2b265f31d7df9a0411', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: 'ee07540896c1aae0d8025b16e6b7794f1c5d8f4a', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '73e3f624e617544d84ec2c7306ace9fb990070b9', class: `
+            } }, h("div", { key: '20a502c69ea5923dbd53fb8749c0c03a4aa4977b', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'bbeab9085851de6cc3d870421d8ea18c7e15471a', name: this.getIconName(), size: "20px" }), h("div", { key: '45b568761c09added6f0c3815d518fb541ba077a', class: `content` }, h("div", { key: '65aaac22e0b6439b3975e465493bc59e01ac7131', class: "header-subheader" }, this.header && h("div", { key: 'cd856ec5c2c118c52d942010f40cd90499f735b7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '96157619f2e4fc59cd197bffb948cd4844d997b1', name: "header" }), this.subheader && h("div", { key: '3ba6782ba25b311d1c57b76791c0055db3f92ec2', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e820491ceaa28771acd2b7661c5ddf7d9574a492', name: "subheader" })), usesActionsSlot && (h("div", { key: '72b25af2d7efbbb54b4f349c038c7efb684086f6', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '8c534d3b51d9f8c30148c0f601613d3395b8930e', name: "actions" })))), this.closable && (h("button", { key: 'a81bc7b2836bbec456260e80a1eb6e9d345ccdcf', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '7988501b679a147d62f6879db443bbfc64211871', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '4167e597b4603cdb7d522a8b86dcc9c5c382ecaa', name: this.getIconName(), size: "20px" }), h("div", { key: '31921a5a61b34711669cbc93583291581e95c86f', class: `content` }, h("div", { key: '6d45456ec0c53cba6714af755a6fc2fa4db4405a', class: "header-subheader" }, this.header && h("div", { key: '3ac77ce9dfea028f0207214d99221ea5de0025cd', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c746b1e1bd696fa8ed85e39bea4b6df0404a1a14', name: "header" }), this.subheader && h("div", { key: '3f6496b6942d9a6ff9a425cd60e396d813f4da1b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8c3c3a8f926dbc077c63a562cd54afba693d6ea6', name: "subheader" })), usesActionsSlot && (h("div", { key: 'dc5e027546c10825168bf0907280479f29688c3d', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'e7593549992a4842a7f6c35ab93c06b902ad469b', name: "actions" })))), this.closable && (h("button", { key: '7b3d02c1b27263f550445a18a3f94a5064375a78', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '69dffbd7b7e6be0dabd264683ea1bbf7c9413fae', name: "cross", size: "20px" }))))));
     }
     get host() { return this; }
     static get style() { return TdsToastStyle0; }

package/dist/components/tds-toggle.js

@@ -33,7 +33,7 @@ const TdsToggle$1 = /*@__PURE__*/ proxyCustomElement(class TdsToggle extends H {
         };
     }
     render() {
-        return (h("div", { key: '125bc9f156074abd27fcf74c67f2af2e26998741', class: "tds-toggle" }, this.headline && (h("div", { key: 'a72a46de4f01ebb31961f3c348329aed34b71294', class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: '3ca94acbcd90d291e1b77ad8680ccd058b242023', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: '77cccf34c1737b5a55f6903f20a68bd7f109b2ed', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: 'ad408d7719105369ca6e1b7465564c1126785f18', name: "label" }))));
+        return (h("div", { key: 'a740337f48412e83ddb8518fd88b7bfa9fb56930', class: "tds-toggle" }, this.headline && (h("div", { key: 'f768b325a07cbadb06bdf8a7ae3e41586b9e5d1b', class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { key: 'e10313611123f0f6ab5f0477ff533218289096e4', "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { key: '5a46a186950ce374c963da377d41b64431c249af', class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { key: '103d423193d379770333a78844e733c05402b010', name: "label" }))));
     }
     get host() { return this; }
     static get style() { return TdsToggleStyle0; }

package/dist/components/tds-tooltip.js

@@ -55,7 +55,7 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: '93961300d93daf9eb0fa1f15e59c6bdfbea5f77b' }, h("tds-popover-core", Object.assign({ key: '1d2c6b17012d5040632df84b221eac247e890696' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '6ddab8bdc240b9b286226593656bbc5ab89f375d' }, h("tds-popover-core", Object.assign({ key: '82235fdf92c5d1fb7a63b2a756a59c8516e1e8c2' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -64,7 +64,7 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: 'd5a4357f2875a0f5f9b958b26adb8cc6f794e900' }))));
+            } }), this.text, h("slot", { key: '579448ad9309452a0be5aedb906da8059f56b122' }))));
     }
     get host() { return this; }
     static get style() { return TdsTooltipStyle0; }

package/dist/esm/index-51d04e39.js

@@ -100,14 +100,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './tds-datetime.entry.js').then(processMod, consoleError);
-                case 'tds-dropdown':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './tds-dropdown.entry.js').then(processMod, consoleError);
-                case 'tds-dropdown-option':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './tds-dropdown-option.entry.js').then(processMod, consoleError);
                 case 'tds-folder-tab':
                     return import(
                       /* webpackMode: "lazy" */
@@ -332,6 +324,10 @@ var 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" */