@scania/tegel 1.38.0 → 1.40.0-table-pagination-rowsperpage-reset-bug-beta.0

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

@@ -101,26 +101,26 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
+        return (h(Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', 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: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
+            }, part: "row" }, h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "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: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
+            } }, h("label", { key: 'c878be3429a3145b62b242f2e3d9c90ec0a74257', class: "tds-table__expand-control-container" }, h("input", { key: '6b99ef165e359012f83f7e298d9f83319493fc52', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'ec9e1aefc553362c0c3e15cb99118a9c2dfffd04', class: "tds-expendable-row-icon" }, h("svg", { key: '84b3270e5f1bfc7671adcea34d862fe0485f40a8', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'fc04209a4a2d35c19c7c74875c0ab302077abbf2', "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: '0c16341da217fbe920241a97b179335cb61e2364' })), h("tr", { key: 'a83ca5c30ec4945dfee096a408db4d1d240d3643', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
+            }, part: "expand-row" }, h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,16 @@ export class TdsTableFooter {
         this.lastCorrectValue = undefined;
         this.tableId = '';
         this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
+        this.rowsPerPageValue = 10;
+    }
+    handleRowsPerPageValuesChange(newValues) {
+        if (newValues && newValues.length > 0) {
+            const [firstValue] = newValues;
+            this.rowsPerPageValue = firstValue;
+        }
+        else {
+            this.rowsPerPageValue = 10;
+        }
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -84,6 +93,10 @@ export class TdsTableFooter {
         relevantTableProps.forEach((tablePropName) => {
             this[tablePropName] = this.tableEl[tablePropName];
         });
+        if (this.rowsPerPageValues && this.rowsPerPageValues.length > 0) {
+            const [firstValue] = this.rowsPerPageValues;
+            this.rowsPerPageValue = firstValue;
+        }
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
         const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
@@ -127,12 +140,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (h(Host, { key: '2c46b5c5014166113f685788af020bcba1b2869f', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', 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: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', 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: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: '66dea3a67c4c724eee59b7886485c29eaeb1c995', class: "tds-table__footer-row" }, h("td", { key: 'b8fbaeb53719f062ddcd87960a039f99dd315111', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '796c83eefdf5a4fb2b6bc387d922754bdd80612f', class: "tds-table__pagination" }, h("div", { key: '6b05406d46d8747e58ee6983d327875aef331b8d', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'daba514a486f6fb784aecd298a00640cd2cb7c2c', class: "rows-per-page" }, h("p", { key: '5cfd2155ae41419c5146e11b3babf08a15c3a817' }, "Rows per page"), h("tds-dropdown", { key: 'a2539bf691b65e4814f50451dcfb6fd410f1d54d', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '2c658adfcf0cfcb153ac2d6d120e74ac9582cece', class: "tds-table__page-selector" }, h("input", { key: '3c2409d3968ecd59f1e798de6c11d6529f062fd7', 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: '604237229c5b80a5804cd0788f6bf6743056ae76', class: "tds-table__footer-text" }, "of ", h("span", { key: 'd3e2c9268983ee9f5f938204a327e0b4830ea67d' }, this.pages), " pages"), h("button", { key: '2ab558f2dba5fecbea05951d093ca77228dfcbc3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '2c1b81648966a02eb80355a7f5938e77cea202db', name: "skip_backwards", size: "20px" })), h("button", { key: '0760561d3cb59835da69b0b30fb9a7701b5bca34', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '87dd5c3ef9cf67bf704fb23ee64a4c34a5488beb', name: "chevron_left", size: "20px" })), h("button", { key: '2167b1d9e645cfab30a5584474dbb1c48ca612bb', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '7adf9f40a448b5ef1db7d31ef5518b556e790f61', name: "chevron_right", size: "20px" })), h("button", { key: 'c7dc62e498e8f1efdd6543f33fb1e42217e5544c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '272d0496e3da2b45f1ff658094d68237d7af4504', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -285,6 +298,12 @@ export class TdsTableFooter {
             }];
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "rowsPerPageValues",
+                "methodName": "handleRowsPerPageValuesChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "internalTdsTablePropChange",

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

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
+        return (h(Host, { key: '6c1cc431846a627cab836e62a551f9f5d6558a9d', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
+            } }, h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -113,7 +113,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', class: {
+        return (h(Host, { key: 'f128527938679fe448019802ea76cda1a57d75be', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

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

@@ -63,7 +63,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
+        return (h(Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

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

@@ -68,10 +68,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
+        return (h(Host, { key: 'e7ce21fcad3bfbc9f93088f777855baa9c6e3869', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7310ec2851d440ba6529eb2d48bb20bcb508429f', class: "tds-table__upper-bar-flex" }, h("div", { key: '5b901252d433968edb04de20a25ea9c09bb39b4b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '661f8de9fe38cd72b098251b027c7e6f554033e5', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '8d00d01e2ac92c75f95dc6ae89e7b8769cde6dc1', name: "start" })), h("div", { key: 'fd28cb512ed5ad997cdb1f0b1dff8f7489f95db5', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'fb2649d623a21eeb1a8c3ed5c512d02d7bbb2efc', class: "tds-table__searchbar" }, h("input", { key: '9cd1284bec12081a2e99996eb6bd160ac926b751', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '015060f9c59d06c430fabb0acabb8b476a477616', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '5f990c7f452a46bb0471dd658f24afd848d029e9', name: "search", size: "20px" })))), h("slot", { key: 'a91b2aee680ef316d2fdd46d46bfe9ec3eb3e314', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
+        return (h(Host, { key: '6e0c3e477f033d6d0038d61d55f87d818abcef6e', "aria-selected": this.selected }, h("div", { key: '06f1e0abdbb9bcce20807d67784a0c82754e4d8a', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'bef9798df6d9e27873ac28b481f1b61342dde861' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -162,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '8c8c4916fe50279d530f99d21fef8f4ceb89fe55', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '5850bbcf52dfadf7a08dbe420916d98ed6d14b41', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '9506486a1d6a2415bc8213cf1c0ab8c7789ad82c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'e721ba34d2d703bd0ee2fe833e7859f282b6b332', name: "chevron_left", size: "20px" })), h("slot", { key: 'ee2558c4a7d35d8d6355df59b735344151742884', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6ac20fbd52634a08bd6ef369a45fe0ebb7de9d5d', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '20a1096cec8ef7e121200f469761fac9a2a5086d', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css

@@ -11,7 +11,7 @@
   /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
   font: var(--tds-headline-07) !important;
   letter-spacing: var(--tds-headline-07-ls) !important;
-  color: var(--tds-navigation-tabs-tab-color);
+  color: var(--tds-inline-tabs-tab-color);
   text-decoration: none;
   display: block;
   position: relative;
@@ -20,19 +20,20 @@
   background-color: transparent;
   border: 0;
   width: 100%;
-  padding: 20px 4px;
+  padding: 20px 0;
 }
 :host ::slotted(*:focus-visible)::before {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 3px;
   bottom: 3px;
+  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
 }
 :host .inline-tab-item:not(.selected)::after {
   width: 0%;
@@ -40,7 +41,6 @@
 }
 :host .inline-tab-item {
   position: relative;
-  margin-right: 32px;
 }
 :host .inline-tab-item:hover {
   cursor: pointer;
@@ -71,19 +71,18 @@
   width: 100%;
   background-color: var(--tds-inline-tabs-tab-indicator-background-active);
 }
-:host .disabled::after {
-  content: none;
-}
 :host .disabled ::slotted(*) {
   color: var(--tds-inline-tabs-tab-color-disabled);
 }
+:host .disabled::after {
+  content: none;
+}
 :host .disabled ::slotted(*:hover) {
-  color: var(--tds-inline-tabs-tab-color-disabled);
   cursor: not-allowed;
+  color: var(--tds-inline-tabs-tab-color-disabled);
 }
 :host .disabled ::slotted(*:focus-visible) {
   outline: none;
-  box-shadow: none;
 }
 
 :host(.last) {

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
+        return (h(Host, { key: '2c62341f68893d4792956a5c0db9753fe567a6aa', "aria-selected": this.selected }, h("div", { key: '1502366122d56bae42b8b1cc9c9a3937b58ec32f', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
+            } }, h("slot", { key: 'f2b45d7f0dd38cae953f61e933189eef8d7a9452' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -65,13 +65,20 @@
 :host .scroll-left-button:active {
   background-color: var(--tds-folder-tabs-scroll-btn-background-active);
 }
-:host .scroll-right-button:focus,
-:host .scroll-left-button:focus {
+:host .scroll-right-button:focus-visible::before,
+:host .scroll-left-button:focus-visible::before {
+  content: "";
+  position: absolute;
+  inset: 3px;
   outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
   z-index: 1;
 }
+:host .scroll-right-button:focus-visible,
+:host .scroll-left-button:focus-visible {
+  outline: 0;
+}
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {
   fill: var(--tds-folder-tabs-scroll-btn-color);

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'f33abd9071c85c0651a3ab93e3996ec44717e325', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8a5233b2a941a3a1e72dc45f93015b5e606663a8', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '9b97d342cfe66209063b504b49480d587cd626d5', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a447ce946eb5bc02a2527f210322aa76ca5ad5b8', name: "chevron_left", size: "20px" })), h("slot", { key: '1df34e68bbea35ef76de48e7b8fe96b3a8655792', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7c753dd66c173265c32a7b49197df12fbecc78d1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f76934b67470db5ff6ddb6fbae86f87fd3d0bdee', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f2a8051863cfa93f8b2a5c562fc5ebefcc36b195', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a93d1cb8ddc5486bbb15449c328a25f6e8e2b4cd', name: "chevron_left", size: "20px" })), h("slot", { key: 'e5b096420d72d12c861730fd9829baeba7cce625', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'f154a7b6553fe77e3f09da314403db5326df8e21', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6832c693ab8a446a629788894f792f571c09cbe3', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -62,7 +62,7 @@
   background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
-:host .navigation-tab-item:focus-visible::after {
+:host .navigation-tab-item:hover:focus-within::after {
   bottom: 3px;
 }
 :host .selected ::slotted(*) {

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
+        return (h(Host, { key: 'fe07e37cb49b89fcd4f84e09f0d281c058e2ef0f' }, h("div", { key: '243d283d090cae8d00cfafa15a95f099d9c7d2e8', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9824df7626af1bedbc17f98c0cfe305b9546f235' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2849a2da7c6ef133d173756778400baa2a51d58d', name: "chevron_left", size: "20px" })), h("slot", { key: '64081b7518abde00c8f1d80ff414849bccd1cb0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '916ba6b9107982f8b8763920bdf4e2bd99127943', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tag/tag.js

@@ -15,7 +15,7 @@ export class TdsTag {
             [`${this.size.toLowerCase()}`]: true,
             [`${this.variant.toLowerCase()}`]: true,
         });
-        return (h(Host, { key: '4c7a4553eff385357169275ea607a9a0bcf1a729', class: getTagClasses() }, h("div", { key: 'f1a2c24dcbeef887a3086782573d506b7f31c395', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: 'e6e8eb20448f6ebb19c9ee8d6123134c0622feca', name: "prefix" }), h("span", { key: '74cead2674da0305a7366a38fe60a542218867ed' }, this.text))));
+        return (h(Host, { key: 'ce69caedf87367e14db73628ff7948fca1580073', class: getTagClasses() }, h("div", { key: 'fbdddb159c5e590cca490df2ff2bf53602fc3265', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '77e44bf68f83708da2bdf7dcf50878d43638df97', name: "prefix" }), h("span", { key: '27aa436683c94063a3a041c6679d622e5f621d92' }, this.text))));
     }
     static get is() { return "tds-tag"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAriaInvalid } from "../../utils/getAriaInvalid";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -27,6 +28,8 @@ export class TdsTextField {
         this.maxLength = undefined;
         this.autofocus = false;
         this.tdsAriaLabel = undefined;
+        this.required = false;
+        this.autocomplete = 'off';
         this.focusInput = false;
     }
     handleChange(event) {
@@ -71,7 +74,7 @@ export class TdsTextField {
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'b9fa2b03ce2a0b196dc6083614420d6f83675e3d', class: {
+        return (h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -89,12 +92,12 @@ export class TdsTextField {
                 '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: '7110b867aba9a9ba62b796f67caeccf22a4a8060', class: "text-field-label-outside" }, h("label", { key: '6b0b6c7d17bb236f1203dfaf793ba0a3bc2d8efb', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '5603d3e78b290a78d7c482a0dac7e1f0efb9af7f', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9accb59dffa061d7947d4392310cb1717a395363', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '69af0c24b21e3edda262749538cc9775c501e115', 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: '739e089cdb9798dc108b68c4858c90bf75e18958', name: "prefix" }))), h("div", { key: 'e4229be4e4bf421319184e798b98afcbaa361413', class: "text-field-input-container" }, h("input", { key: 'f462b4c0d49e4e070090f6a14df52af66b87648d', ref: (inputEl) => {
+            } }, h("slot", { key: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -109,13 +112,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'ac16cff7856d65503fa30f7eb23d2936377e72d4', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: 'b70453ec36ca62f584b26b0e6dc4b3f0cde2ff54', class: {
+            }, "aria-invalid": getAriaInvalid(this.host, this.state), "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}`, required: this.required, autocomplete: this.autocomplete }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '19a93786e8647aa1d2e5b9a9b80c71c250330d8d', 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: '7e50b20d90a68f9af583b8f2ade5c742e2d52351', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '72e2cf4f2872d247ac6f28e935e8185aafef6dec', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: '171bdde8535c6bbd08eec60d87d9aa5bae1f98bd', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '05e7e8898ee3fcf81fb011aa2141092e8b749e37', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '0c16d399b376d9aebed2aabf759cb7319c5745cf', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '280eed9185c8cffa29e3cf62425f1f1f377f3abc', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ddf07e469173a574a848cd2ff816bcc535940340', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: 'b5b06dba13fb8911828153341b631facfc016c88', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: 'a4c41817f19b32e575423d5bbe19c28a38031e6e', class: {
+            } }, h("slot", { key: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '9934f078456a0af683b0d1f8a997c5484e58868c', class: {
                 'text-field-textcounter-divider': true,
                 'text-field-textcounter-disabled': this.disabled,
             } }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
@@ -138,8 +141,8 @@ export class TdsTextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'text' | 'password' | 'number'",
-                    "resolved": "\"number\" | \"password\" | \"text\"",
+                    "original": "'text' | 'password' | 'number' | 'email' | 'tel'",
+                    "resolved": "\"email\" | \"number\" | \"password\" | \"tel\" | \"text\"",
                     "references": {}
                 },
                 "required": false,
@@ -470,6 +473,42 @@ export class TdsTextField {
                 },
                 "attribute": "tds-aria-label",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the text field required"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the text field's autocomplete attribute"
+                },
+                "attribute": "autocomplete",
+                "reflect": false,
+                "defaultValue": "'off'"
             }
         };
     }

package/dist/collection/components/textarea/textarea.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getAriaInvalid } from "../../utils/getAriaInvalid";
 export class TdsTextarea {
     constructor() {
         this.uuid = generateUniqueId();
@@ -60,7 +61,7 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '873fc5866c777549e56d115e7bce64a62fdd5c0c', class: {
+        return (h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -70,7 +71,7 @@ export class TdsTextarea {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '09f5df4efb39b7e3eb71d8567adc5cffd374ad66', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '57bd6d6e2e7a1919d668625a675e4a20421af965', class: "textarea-wrapper" }, h("textarea", { key: '69955de378170f86c7a942d5f8101aa2ff9440f4', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: '674206c9897b2e6f8ed4742e4bf4b9db5740a302', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '808b87787dbdb3386bdf528051eb7ab991259e30', class: "textarea-wrapper" }, h("textarea", { key: 'bb9871a2b0f4d88ac150fb8b550c2d5001b9cc2d', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && 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) {
@@ -80,7 +81,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '0fded8e72f3f6d8e6f53cb57df94f480df17ce53', class: "textarea-resizer-icon" }, h("svg", { key: '6b41ae06bbedfa5ba88991bc6856f80ca8a4b6f8', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c4f731e7483bade2d0dbd545302afc278039a122', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '94bc8eed69418751ad240087201827a0ef0185b4', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '231983d3994030724a06358f37dd0e53f91d78d4', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '9e7f16d10939227a5c8c87f00ddd653a58c094ad', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '67222f0c93979caf49881c591cd99eb4c97ebdc1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: 'cbde13084b090f7eea4bd80da47373ec941e1981', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '5895277b2e07f4c8f2990f624eb0797dffd0b1f0', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '97afedbb5aaf02461a38f39643298b6c2650c52f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid(this.host, this.state), "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'f9fc9c3136ec57b6f0becd8602c6353f0c8848dd', class: "textarea-resizer-icon" }, h("svg", { key: '8b7f6fe75e111c7d4de27a1a6d30c430cd136753', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f5857808dfc21333fc8d95c38c0a8e69823a6229', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: 'df897e9b418dc4b7a2fefc152f0f850278695211', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'd350ce47947ccd11fea39f06b5ae6e7cdba84ca9', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '327fd5153c188dcc171d6cbed2727716148157b1', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '5625f2580ce1724b5462e00c8024fb7b9c3f3107', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '2873a82b45675d1e09a07de357386b0ea83ed054', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '0a54c37e440f4740e373943bfd48001e8f8f39e6', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '53f25f455440e8383bd1dabba20cce266fe78074', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -503,4 +504,5 @@ export class TdsTextarea {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/toast/toast.css

@@ -13,25 +13,25 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-toast-icon-color-info);
+  border-left: 4px solid var(--tds-toast-color-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-toast-icon-color-info);
+  color: var(--tds-toast-color-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-toast-icon-color-success);
+  border-left: 4px solid var(--tds-toast-color-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-toast-icon-color-success);
+  color: var(--tds-toast-color-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-toast-icon-color-error);
+  border-left: 4px solid var(--tds-toast-color-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-toast-icon-color-error);
+  color: var(--tds-toast-color-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-toast-icon-color-warning);
+  border-left: 4px solid var(--tds-toast-color-warning);
 }
 :host .wrapper.warning tds-icon {
   color: var(--tds-toast-icon-color-warning);

package/dist/collection/components/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'b630cb558fea6c5b2d90f2ad1872429d86bc14c0', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '7ef66776e9ad60108fee1ba8b080b606c19d2543', class: `
+            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '1010ab1efbad6a3e2315c8abbff7701e6398a21b', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '292683b02d6db016d9ad39253ef0734dce245be7', class: `content` }, h("div", { key: 'c24661c9e1967e79bf0077389cf2dc03ec23ba62', class: "header-subheader" }, this.header && h("div", { key: 'f5e47f479a30fc2c5d37573e2d3b154f8a0400ab', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '141519b5effd90e894f206a16e94a824ebd77339', name: "header" }), this.subheader && h("div", { key: 'a41dd5610b6c2cead6a544f9ab0d8bdef8f5fff8', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '057233bcb1fd6c4abe7fbc1b396bc0649218fffa', name: "subheader" })), usesActionsSlot && (h("div", { key: '96a117a124c595fc46cf053d708e46c2ef47de5e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'f2e390259a9fee09e54558a47e8dfdd604e5ef57', name: "actions" })))), this.closable && (h("button", { key: '878dec1fdc115fa5886577034d94ecf503e5b293', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '207073210d39ceb50fe39ccd4101f7aeaa5cf8fc', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }