@scania/tegel 1.39.0 → 1.40.0-stencil-core-4.38.1-beta.0

package/dist/cjs/tds-table-footer.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}: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 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);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:var(--tds-spacing-element-16)}: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:var(--tds-spacing-element-8)}: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:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}: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:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);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:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}: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 = [
     'compactDesign',
@@ -18,6 +15,25 @@ const TdsTableFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsPagination = index.createEvent(this, "tdsPagination", 7);
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -61,18 +77,6 @@ const TdsTableFooter = class {
             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;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -137,15 +141,15 @@ const TdsTableFooter = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (index.h(index.Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, index.h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, index.h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, index.h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, index.h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), index.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) => {
+            }, style: this.getStyles() }, index.h("tr", { key: '02d6c97e498e44ad70c86fd08cc665a8b89e2a07', class: "tds-table__footer-row" }, index.h("td", { key: 'e9d64ea0f3be240867d886973a40c557fe9899da', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: '4a8f3f921a4e103a1a14e368a4702cd8f6ceb18b', class: "tds-table__pagination" }, index.h("div", { key: 'c536fb9916071677bf20f033ebb184d469aa0774', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '5a935d6c92a574e1ea0a081e955916526ec9da45', class: "rows-per-page" }, index.h("p", { key: 'ae9f908bc6803a814236a56e5801857a1989df54' }, "Rows per page"), index.h("tds-dropdown", { key: '1bcac2201accc7d613250c8f38b77ddc04bfb463', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (index.h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), index.h("div", { key: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, index.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 }), index.h("p", { key: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", index.h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), index.h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), index.h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), index.h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), index.h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+        }))))), index.h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, index.h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', 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 }), index.h("p", { key: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", index.h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), index.h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), index.h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), index.h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), index.h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableFooter.style = TdsTableFooterStyle0;
+TdsTableFooter.style = tableFooterCss;
 
 exports.tds_table_footer = TdsTableFooter;

package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableHeaderInputWrapper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -72,7 +70,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
+        return (index.h(index.Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -80,6 +78,6 @@ const TdsTableHeaderInputWrapper = class {
     }
     get host() { return index.getElement(this); }
 };
-TdsTableHeaderInputWrapper.style = TdsTableHeaderInputWrapperStyle0;
+TdsTableHeaderInputWrapper.style = tableHeaderInputWrapperCss;
 
 exports.tds_table_header_input_wrapper = TdsTableHeaderInputWrapper;

package/dist/cjs/tds-table-header.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const tableHeaderCss = ":host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .tds-table__header-cell--checkbox{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);display:table-cell;text-align:left;color:var(--tds-table-color);background-color:var(--tds-table-header-background);border-bottom:1px solid var(--tds-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input{display:none}:host .tds-table__expand-control-container .tds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__expand-control-container .tds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(tds-header-cell:hover){background-color:var(--tds-table-header-background-hover)}:host(.tds-table--compact) .tds-table__header-cell--checkbox{height:32px}:host(.tds-table--compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__header-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox{border-top-left-radius:0}";
-const TdsTableHeaderStyle0 = tableHeaderCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -18,9 +15,11 @@ const TdsTableHeaderRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsSelectAll = index.createEvent(this, "tdsSelectAll", 6);
+        /** @deprecated Deprecated, use selected instead. */
         this.allSelected = false;
-        this.selected = undefined;
+        /** Prop for controlling the enabled/disabled state of the "All selected"-checkbox. */
         this.disabled = false;
+        /** Prop for controlling the indeterminate state of the "All selected"-checkbox. */
         this.indeterminate = false;
         this.multiselect = false;
         this.expandableRows = false;
@@ -89,14 +88,14 @@ const TdsTableHeaderRow = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
+        return (index.h(index.Host, { key: '6c1cc431846a627cab836e62a551f9f5d6558a9d', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, index.h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (index.h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
+            } }, index.h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (index.h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, index.h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (index.h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), index.h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableHeaderRow.style = TdsTableHeaderStyle0;
+TdsTableHeaderRow.style = tableHeaderCss;
 
 exports.tds_table_header = TdsTableHeaderRow;

package/dist/cjs/tds-table-toolbar.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__actionbar-left{display:flex}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left;margin-right:var(--tds-spacing-element-8)}:host .tds-table__actionbar,:host slot[name=end]::slotted(*),:host slot[name=start]::slotted(*){display:flex;align-self:center}:host .tds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .tds-table__searchbar::after{content:\"\";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--tds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .tds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .tds-table__searchbar:focus-within,:host .tds-table__searchbar.tds-table__searchbar--active{width:208px;background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:focus-within:hover,:host .tds-table__searchbar.tds-table__searchbar--active:hover{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar .tds-table__searchbar-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .tds-table__searchbar .tds-table__searchbar-input :focus{background-color:var(--tds-table-toolbar-searchbar-background)}:host .tds-table__searchbar:hover{background-color:var(--tds-table-toolbar-searchbar-background-hover)}:host .tds-table__searchbar .tds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.toolbar__horizontal-scroll){position:absolute;top:var(--tds-spacing-element-16)}:host(.tds-table--compact){height:56px}";
-const TdsTableToolbarStyle0 = tableToolbarCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -17,8 +14,11 @@ const TdsTableToolbar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsFilter = index.createEvent(this, "tdsFilter", 7);
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -74,13 +74,13 @@ const TdsTableToolbar = class {
         return styles;
     }
     render() {
-        return (index.h(index.Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
+        return (index.h(index.Host, { key: 'e7ce21fcad3bfbc9f93088f777855baa9c6e3869', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, index.h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, index.h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (index.h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), index.h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), index.h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (index.h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, index.h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), index.h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, index.h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), index.h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, index.h("div", { key: '7310ec2851d440ba6529eb2d48bb20bcb508429f', class: "tds-table__upper-bar-flex" }, index.h("div", { key: '5b901252d433968edb04de20a25ea9c09bb39b4b', class: "tds-table__actionbar-left" }, this.tableTitle && (index.h("caption", { key: '661f8de9fe38cd72b098251b027c7e6f554033e5', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), index.h("slot", { key: '8d00d01e2ac92c75f95dc6ae89e7b8769cde6dc1', name: "start" })), index.h("div", { key: 'fd28cb512ed5ad997cdb1f0b1dff8f7489f95db5', class: "tds-table__actionbar" }, this.filter && (index.h("div", { key: 'fb2649d623a21eeb1a8c3ed5c512d02d7bbb2efc', class: "tds-table__searchbar" }, index.h("input", { key: '9cd1284bec12081a2e99996eb6bd160ac926b751', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), index.h("span", { key: '015060f9c59d06c430fabb0acabb8b476a477616', class: "tds-table__searchbar-icon" }, index.h("tds-icon", { key: '5f990c7f452a46bb0471dd658f24afd848d029e9', name: "search", size: "20px" })))), index.h("slot", { key: 'a91b2aee680ef316d2fdd46d46bfe9ec3eb3e314', name: "end" })))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableToolbar.style = TdsTableToolbarStyle0;
+TdsTableToolbar.style = tableToolbarCss;
 
 exports.tds_table_toolbar = TdsTableToolbar;

package/dist/cjs/tds-table.cjs.entry.js

@@ -1,26 +1,40 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+var index = require('./index-Cpz8G-hs.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
 const tableCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host,.tds-table{border-collapse:collapse;display:table;box-sizing:border-box}:host *,.tds-table *{box-sizing:border-box}:host(.tds-table--responsive),.tds-table--responsive{width:100%}.tds-table--horizontal-scroll{display:block;overflow-x:scroll;white-space:nowrap}.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar{height:var(--tds-scrollbar-height)}.tds-table--horizontal-scroll::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}.tds-table--horizontal-scroll::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}.tds-table--horizontal-scroll::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){.tds-table--horizontal-scroll{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}.tds-table--horizontal-scroll-toolbar{margin-top:64px}.tds-table--horizontal-scroll-toolbar-compact{margin-top:56px}.tds-table--horizontal-scroll-footer{margin-bottom:49px}.tds-table--horizontal-scroll-footer-compact{margin-bottom:33px}";
-const TdsTableStyle0 = tableCss;
 
 const TdsTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.internalTdsTablePropChange = index.createEvent(this, "internalTdsTablePropChange", 6);
+        /** Enables style with vertical dividers between columns */
         this.verticalDividers = false;
+        /** Enables style where Table toolbar, rows and footer are less high */
         this.compactDesign = false;
-        this.noMinWidth = undefined;
+        // TODO: Due to unknown reason, one of this items has to be left as is.
+        //  If all are false, it seems like emitting is not properly done and it affects other events in Table.
+        //  Try setting it and observe text-align set on header cell
+        /** Enables multiselect feature of Table */
         this.multiselect = false;
+        /** Enables extended row feature of Table */
         this.expandableRows = false;
+        /** Enables Table to take 100% available width with equal spacing of columns */
         this.responsive = false;
+        /** Variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Enables zebra stripe mode on the table rows or columns. */
         this.zebraMode = 'none';
+        /** Width of the table, used as the constraint for horizontal scrolling.
+         * **NOTE**: this will disable usage of the responsive flag
+         * */
         this.horizontalScrollWidth = null;
+        /** ID used for internal Table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
+         * as the default ID is random and will be different every time.
+         */
         this.tableId = generateUniqueId.generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
         this.enableHorizontalScrollFooterDesign = false;
@@ -123,6 +137,6 @@ const TdsTable = class {
         "horizontalScrollWidth": ["widthChanged"]
     }; }
 };
-TdsTable.style = TdsTableStyle0;
+TdsTable.style = tableCss;
 
 exports.tds_table = TdsTable;

package/dist/cjs/tds-tag.cjs.entry.js

@@ -1,18 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const hasSlot = require('./hasSlot-1c90e9ba.js');
+var index = require('./index-Cpz8G-hs.js');
+var hasSlot = require('./hasSlot-D-DVNhGg.js');
 
 const tagCss = ".sc-tds-tag-h{box-sizing:border-box;display:inline-flex;align-items:center;border-radius:4px;background-color:var(--tds-tag-neutral-background);color:var(--tds-tag-neutral-color);gap:4px}.sc-tds-tag-h *.sc-tds-tag{box-sizing:border-box}.lg.sc-tds-tag-h{padding:4px}.sm.sc-tds-tag-h{border-radius:2px;padding:2px 4px;font:var(--tds-detail-05)}.success.sc-tds-tag-h{background-color:var(--tds-tag-success-background);color:var(--tds-tag-success-color)}.warning.sc-tds-tag-h{background-color:var(--tds-tag-warning-background);color:var(--tds-tag-warning-color)}.new.sc-tds-tag-h{background-color:var(--tds-tag-new-background);color:var(--tds-tag-new-color)}.neutral.sc-tds-tag-h{background-color:var(--tds-tag-neutral-background);color:var(--tds-tag-neutral-color)}.information.sc-tds-tag-h{background-color:var(--tds-tag-information-background);color:var(--tds-tag-information-color)}.error.sc-tds-tag-h{background-color:var(--tds-tag-error-background);color:var(--tds-tag-error-color)}.tds-tag__content.sc-tds-tag{display:flex;align-items:center;gap:inherit}";
-const TdsTagStyle0 = tagCss;
 
 const TdsTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.text = undefined;
+        /** Sets the size of the tag */
         this.size = 'lg';
+        /** Sets the variant mode of the tag */
         this.variant = 'Neutral';
     }
     render() {
@@ -21,10 +19,10 @@ const TdsTag = class {
             [`${this.size.toLowerCase()}`]: true,
             [`${this.variant.toLowerCase()}`]: true,
         });
-        return (index.h(index.Host, { key: '4c7a4553eff385357169275ea607a9a0bcf1a729', class: getTagClasses() }, index.h("div", { key: 'f1a2c24dcbeef887a3086782573d506b7f31c395', class: "tds-tag__content" }, hasPrefixSlot && index.h("slot", { key: 'e6e8eb20448f6ebb19c9ee8d6123134c0622feca', name: "prefix" }), index.h("span", { key: '74cead2674da0305a7366a38fe60a542218867ed' }, this.text))));
+        return (index.h(index.Host, { key: 'ce69caedf87367e14db73628ff7948fca1580073', class: getTagClasses() }, index.h("div", { key: 'fbdddb159c5e590cca490df2ff2bf53602fc3265', class: "tds-tag__content" }, hasPrefixSlot && index.h("slot", { key: '77e44bf68f83708da2bdf7dcf50878d43638df97', name: "prefix" }), index.h("span", { key: '27aa436683c94063a3a041c6679d622e5f621d92' }, this.text))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTag.style = TdsTagStyle0;
+TdsTag.style = tagCss;
 
 exports.tds_tag = TdsTag;

package/dist/cjs/tds-text-field.cjs.entry.js

@@ -1,14 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const hasSlot = require('./hasSlot-1c90e9ba.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
-const getAriaInvalid = require('./getAriaInvalid-66a2eade.js');
+var index = require('./index-Cpz8G-hs.js');
+var hasSlot = require('./hasSlot-D-DVNhGg.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
+var getAriaInvalid = require('./getAriaInvalid-Bdg4qUb_.js');
 
 const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
-const TdsTextFieldStyle0 = textFieldCss;
 
 const TdsTextField = class {
     constructor(hostRef) {
@@ -18,25 +15,39 @@ const TdsTextField = class {
         this.tdsFocus = index.createEvent(this, "tdsFocus", 6);
         this.tdsBlur = index.createEvent(this, "tdsBlur", 6);
         this.uuid = generateUniqueId.generateUniqueId();
+        /** Which input type, text, password or similar */
         this.type = 'text';
+        /** Position of the label for the Text Field. */
         this.labelPosition = 'no-label';
+        /** Label text */
         this.label = '';
-        this.min = undefined;
-        this.max = undefined;
-        this.helper = undefined;
+        /** Placeholder text */
         this.placeholder = '';
+        /** Value of the input text */
         this.value = '';
+        /** Set input in disabled state */
         this.disabled = false;
+        /** Set input in readonly state */
         this.readOnly = false;
+        /** Hides the read-only icon in the Text Field. Requires Read Only to be enabled. */
         this.hideReadOnlyIcon = false;
+        /** Size of the input */
         this.size = 'lg';
+        /** Mode variant of the Text Field */
         this.modeVariant = null;
+        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
+        /** Name property */
         this.name = '';
+        /** Error state of input */
         this.state = 'default';
-        this.maxLength = undefined;
+        /** Autofocus for input */
         this.autofocus = false;
-        this.tdsAriaLabel = undefined;
+        /** Makes the text field required */
+        this.required = false;
+        /** Value to be used for the text field's autocomplete attribute */
+        this.autocomplete = 'off';
+        /** Listen to the focus state of the input */
         this.focusInput = false;
     }
     handleChange(event) {
@@ -81,7 +92,7 @@ const TdsTextField = class {
         var _a;
         const usesPrefixSlot = hasSlot.hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot.hasSlot('suffix', this.host);
-        return (index.h("div", { key: '323df30951c2ee070b043228f78c3045b33e2fc9', class: {
+        return (index.h("div", { key: '3a072497874b410339fc3368f49b9048fdcc6641', class: {
                 'form-text-field': true,
                 'form-text-field-nomin': this.noMinWidth,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -99,12 +110,12 @@ const TdsTextField = class {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (index.h("div", { key: 'fe9768bbf8999dc49f90e096bfd138710a91e7bb', class: "text-field-label-outside" }, index.h("label", { key: '91d39c768b49e7867a87f7fc78b50ec4034c4560', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: 'abb84b67da94a281e986891a00a8bd348ad3b131', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (index.h("div", { key: '4661114d6fe3e809ee7c0254686c9feb55fce6ad', class: {
+            } }, this.labelPosition === 'outside' && (index.h("div", { key: '190b617811d0993b85b3df6951a41678bc51879e', class: "text-field-label-outside" }, index.h("label", { key: '6e5099cc43259b790d83d3f127e85463e58c9ac2', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), index.h("div", { key: 'd5064e04015238d38a70b09c9eba4cbbb1da19cb', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (index.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',
-            } }, index.h("slot", { key: '40aac31a850fb3ad1d703834b578c73a35c9f255', name: "prefix" }))), index.h("div", { key: '1c85331cb4dd7a03527c3730996f07a5d25293d7', class: "text-field-input-container" }, index.h("input", { key: '498c3ae25cc2508c28dd2e5f8483c35adb9f8bb9', ref: (inputEl) => {
+            } }, index.h("slot", { key: 'f397647f1458b1d132080cb15b92be60e2942459', name: "prefix" }))), index.h("div", { key: '33674576cce732cc66e7ca830669b7535aea7f00', class: "text-field-input-container" }, index.h("input", { key: 'a27eca3e8862b099475fd46c2182f86d7d110533', ref: (inputEl) => {
                 this.textInput = inputEl;
             }, class: {
                 'text-field-input': true,
@@ -119,19 +130,19 @@ const TdsTextField = class {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, "aria-invalid": getAriaInvalid.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}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (index.h("label", { key: '41a2f20f416c65fb2d7d9992286f4bc9c9dcc52c', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (index.h("div", { key: '2b7b63efd24c1398d2d40a3d5a48d3003931cff8', class: {
+            }, "aria-invalid": getAriaInvalid.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' && (index.h("label", { key: '7671a287273c976a1ad73032020838d6c4cedab0', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (index.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,
-            } }, index.h("slot", { key: 'b594b47a2ee6bfb393b44c8b704232881e53c119', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '5a9d4e1492b908a397881a42f9c0229d32e2a457', class: "text-field-icon__readonly" }, index.h("tds-tooltip", { key: '02bb93263fc40d5d6aeb2dda3ad5ac49f2e2ccf6', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: 'e926eb2de3946822875badbcc7e325e9981b8271', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), index.h("div", { key: 'ac28d59eb12ef9efe38cd940daf1299b06dd4446', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (index.h("div", { key: 'd1b09c6f543f0e985476b798ee642c6a11cb7485', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (index.h("div", { key: '160ca65e021a3f313b828dbcf82b158036d748ad', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: '34bb9eaa6c267d882fc28a9b80fd331523bd981b', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (index.h("span", { key: '6b1ad7dbce2e2fe37e116c1d8f0b11f2dfe00260', class: {
+            } }, index.h("slot", { key: 'dd76e5bb941bc791caa395206be040319e00a708', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (index.h("span", { key: '2ba57774f40412b9a337ef7bf47ce65bcf44a704', class: "text-field-icon__readonly" }, index.h("tds-tooltip", { key: 'bfb0f704470e77f9ce6e11fe3d01af3dd8569015', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '28ded9080cb2abfe6a06b284af3807584f4dda02', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), index.h("div", { key: '636205c9e69b3a2602ea0b8817a585e5cd4e16b2', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (index.h("div", { key: '4ece49df31864f53d0fadc3709cd06d34da6830a', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (index.h("div", { key: 'ba1e7f916ebbfa6775b46febed47e4bf55af9fd3', class: "text-field-helper-error-state" }, !this.readOnly && index.h("tds-icon", { key: '45eb885352b32dd3483a1c01f4dbaa49fcfda8ba', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (index.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)))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTextField.style = TdsTextFieldStyle0;
+TdsTextField.style = textFieldCss;
 
 exports.tds_text_field = TdsTextField;

package/dist/cjs/tds-textarea.cjs.entry.js

@@ -1,13 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
-const getAriaInvalid = require('./getAriaInvalid-66a2eade.js');
+var index = require('./index-Cpz8G-hs.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
+var getAriaInvalid = require('./getAriaInvalid-Bdg4qUb_.js');
 
 const textareaCss = ".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea:read-only{background-color:var(--tds-textarea-read-only-background)}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder);transition:color 200ms ease}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-input.sc-tds-textarea:hover::placeholder{color:var(--tds-textarea-placeholder-hover)}.textarea-input.sc-tds-textarea:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0;border-bottom:1px solid transparent}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}";
-const TdsTextareaStyle0 = textareaCss;
 
 const TdsTextarea = class {
     constructor(hostRef) {
@@ -17,24 +14,30 @@ const TdsTextarea = class {
         this.tdsInput = index.createEvent(this, "tdsInput", 6);
         this.tdsFocus = index.createEvent(this, "tdsFocus", 6);
         this.uuid = generateUniqueId.generateUniqueId();
+        /** Label text */
         this.label = '';
+        /** Name attribute */
         this.name = '';
-        this.helper = undefined;
-        this.cols = undefined;
-        this.rows = undefined;
+        /** Position of the label for the Textarea. */
         this.labelPosition = 'no-label';
+        /** Placeholder text */
         this.placeholder = '';
+        /** Value of the input text */
         this.value = '';
+        /** Set input in disabled state */
         this.disabled = false;
+        /** Set input in readonly state */
         this.readOnly = false;
+        /** Hide the readonly icon */
         this.hideReadOnlyIcon = false;
+        /** Error state of input */
         this.state = 'default';
-        this.maxLength = undefined;
+        /** Mode variant of the Textarea */
         this.modeVariant = null;
+        /** Control of autofocus */
         this.autofocus = false;
+        /** Unset minimum width of 208px. */
         this.noMinWidth = false;
-        this.tdsAriaLabel = undefined;
-        this.focusInput = undefined;
     }
     handleChange(event) {
         this.tdsChange.emit(event);
@@ -74,7 +77,7 @@ const TdsTextarea = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '68eb00fd2e149732b8d47b72e8b60b2a30dd4d76', class: {
+        return (index.h("div", { key: '0e1e8c392e63be0a7e1724f3351e4859eb6501a7', class: {
                 'textarea-container': true,
                 'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
@@ -84,7 +87,7 @@ const TdsTextarea = class {
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (index.h("label", { key: '883255abac1da6cec05779b200d5347b6fa740dc', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), index.h("div", { key: 'c0eacdcf4b575d14ebd5905785dade6a3f151f0e', class: "textarea-wrapper" }, index.h("textarea", { key: '940ea2fc206cd567bd2f181e71236cce216ec669', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (index.h("label", { key: '674206c9897b2e6f8ed4742e4bf4b9db5740a302', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), index.h("div", { key: '808b87787dbdb3386bdf528051eb7ab991259e30', class: "textarea-wrapper" }, index.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) {
@@ -94,10 +97,10 @@ const TdsTextarea = class {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid.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}` }), index.h("span", { key: 'b821544e95ac75383e05d5fd54b605306f5c6790', class: "textarea-resizer-icon" }, index.h("svg", { key: '11d6fa83c05cc2511b391bab21d229d057516571', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '95e8fd6c73070e318d0c5c589fa326ef3480e282', "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 && (index.h("span", { key: '8628c6ab7310a8dcf7bb2e9f95660a93dc4da3b4', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: '50f5e91b88f8e5e97ec656bed783949464ef8723', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '3c86f76ddfe425385c9c9b93b0ed3a1e0baf2b20', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), index.h("span", { key: '42d22b4fd71e5db663d775e930ae6cc7323a89ec', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (index.h("tds-icon", { key: '088af2b39b4864f48e751d4b44c6d069ebf8ccd6', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (index.h("div", { key: 'f425416cfdaed26d6b7b7c619babe478bf63593b', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { key: '4d68979b2b8a5601f3b62612f09eb5223cc0490b', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": getAriaInvalid.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}` }), index.h("span", { key: 'f9fc9c3136ec57b6f0becd8602c6353f0c8848dd', class: "textarea-resizer-icon" }, index.h("svg", { key: '8b7f6fe75e111c7d4de27a1a6d30c430cd136753', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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 && (index.h("span", { key: 'df897e9b418dc4b7a2fefc152f0f850278695211', class: "textarea-icon__readonly" }, index.h("tds-tooltip", { key: 'd350ce47947ccd11fea39f06b5ae6e7cdba84ca9', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), index.h("tds-icon", { key: '327fd5153c188dcc171d6cbed2727716148157b1', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), index.h("span", { key: '5625f2580ce1724b5462e00c8024fb7b9c3f3107', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (index.h("tds-icon", { key: '2873a82b45675d1e09a07de357386b0ea83ed054', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (index.h("div", { key: '0a54c37e440f4740e373943bfd48001e8f8f39e6', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, index.h("span", { key: '53f25f455440e8383bd1dabba20cce266fe78074', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTextarea.style = TdsTextareaStyle0;
+TdsTextarea.style = textareaCss;
 
 exports.tds_textarea = TdsTextarea;