npm - @scania/tegel - Versions diffs - 1.18.0-1.18.0-tdsheaderitembeta.2 → 1.18.0-beta.2 - Mend

@scania/tegel 1.18.0-1.18.0-tdsheaderitembeta.2 → 1.18.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (510) hide show

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

@@ -1,7 +1,8 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+import { f as findClosestComponent } from './p-875e2e9c.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 tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) .search-icon{display:inline-block}:host(.focused-input-wrapper) .search-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}.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'];
@@ -30,7 +31,7 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
         }
     }
     connectedCallback() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             this.tableId = tableEl.getAttribute('table-id');
         }
@@ -39,7 +40,7 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
         }
     }
     componentWillLoad() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             relevantTableProps.forEach((tablePropName) => {
                 this[tablePropName] = tableEl[tablePropName];
@@ -71,11 +72,12 @@ const TdsTableHeaderInputWrapper$1 = /*@__PURE__*/ proxyCustomElement(class TdsT
         }
     }
     render() {
-        return (h(Host, { key: '733f9d487fd530eea4b597368c5ecdc46fd8dedd', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'f46f163de241ce331dca3089eb15528e9e7d6baf', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h("tds-icon", { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
+            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h(prefixedTagNames.tdsIcon, { class: "search-icon", slot: "icon", size: "16px", name: "search" })) : null));
     }
     get host() { return this; }
     static get style() { return TdsTableHeaderInputWrapperStyle0; }
@@ -90,18 +92,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-table-header-input-wrapper", "tds-icon"];
+    const components = ["tds-table-header-input-wrapper"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-table-header-input-wrapper":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTableHeaderInputWrapper$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

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

@@ -1,5 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-e4d7c655.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
+import { g as getDirectChildHTMLElementOfKind } from './p-d18575db.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;
@@ -54,11 +56,11 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
     }
     bodyExpandClicked() {
         const numberOfExtendRowsActive = this.host.parentElement
-            .querySelector('tds-table-body')
+            .querySelector('.tds-table__body')
             .getElementsByClassName('tds-table__row-extend--active').length;
         const numberOfExtendRows = this.host.parentElement
-            .querySelector('tds-table-body')
-            .getElementsByTagName('tds-table-body-row-expendable').length;
+            .querySelector('.tds-table__body')
+            .getElementsByClassName('.tds-table__row-expandable').length;
         if (numberOfExtendRows === numberOfExtendRowsActive) {
             this.mainExpendSelected = true;
         }
@@ -67,7 +69,7 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -76,8 +78,9 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         });
     }
     componentWillRender() {
+        const tdsTableElement = findClosestComponent(this.host, 'tdsTable');
         this.enableToolbarDesign =
-            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+            getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-toolbar').length >= 1;
     }
     async handleCheckboxChange(event) {
         this.allSelected = event.detail.checked;
@@ -88,11 +91,13 @@ const TdsTableHeaderRow = /*@__PURE__*/ proxyCustomElement(class TdsTableHeaderR
         });
     }
     render() {
-        return (h(Host, { key: '08dd2d38a8df4e8715c780dde55d81d52a26b26f', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '986af13197816825c30a3b299cc2f7d1679db040', class: {
+                'tds-table__header': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '5d5d3f8fa7293ce9e8b09fdb241225ce16e4b0d5' }, this.multiselect && (h("th", { key: '7b3034bd06348bc8df55a90fe13991f4910715a2', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '0cae18f657cb4121c8ed21437ff55cefa308a5ff', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '423b6ff577d3b65e7eb4f6e8a5f3f914d810904a', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '74eb896f4b1de85cf9b561b9aa10e6d9e309031c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a9b444c190c08a4eb53fa634281e2ff591046c5a' }))));
+            } }, h("tr", { key: 'd6c4d067f46bb8ec9163c2376f8a69ea62672fa5' }, this.multiselect && (h("th", { key: '783cc35039a6b41d9dce45a3a55620aed9a3453b', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '4a9db9d553a30ae7928b2048386fb5847f49eb76', class: "tds-form-label tds-form-label--table" }, h(prefixedTagNames.tdsCheckbox, { key: '404ae6e1aaab093519956f6b48c7f7fee716577c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '3b317b08db740ead4af6f4dcdd095cbaac85060c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'bac9254f26d399eb273e00ccee193d4e3ddd673d' }))));
     }
     get host() { return this; }
     static get style() { return TdsTableHeaderStyle0; }
@@ -116,18 +121,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-table-header", "tds-checkbox"];
+    const components = ["tds-table-header"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-table-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTableHeaderRow);
             }
             break;
-        case "tds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

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

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
 const tableToolbarCss = ":host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--tds-table-toolbar-background);color:var(--tds-table-color);padding:0 var(--tds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .tds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .tds-table__title{font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding-top:var(--tds-spacing-element-16);text-align:left}:host .tds-table__actionbar,:host slot[name=end]::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;
@@ -38,7 +39,7 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -69,10 +70,11 @@ const TdsTableToolbar$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableToolbar
         return styles;
     }
     render() {
-        return (h(Host, { key: 'c3488722c0a27313efa13acafeab81ca23c6c765', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'dd9f4aa5fe5fc7d2601800f1458ed867e36cc87c', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: '688e2903c9b447cb0770a8ee15dc8d1c4d3608d3', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'a9c57a3b3cdbc61d7176163310cd8acda8ed58a2', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'ae28004762b94923faa433a9f13245ab8595493b', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0d85e682ee8a733fc61df0855ed1a56bd7356069', class: "tds-table__searchbar" }, h("input", { key: '50b9c945f34cb13d440ed448f8be58ea2900f9f7', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'eff520922329f0379f22cb31171b81887c6bbdf7', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '09c7d084aed40ec2a3a25dc1ca86d978b8ef39ec', name: "search", size: "20px" })))), h("slot", { key: '1b7dc61ec5ec9d5ac7e5ea116cedfd6a773d5628', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: '58a85d8024c69d67b0295a5e79bbac90cf86d39d', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd7420a5f0fa606a3ef441a61a0fd10618fbe1fa5', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'afe576548c355196dff3b2e2355453d33d5f5b4a', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0ccc225cf7c0c1e2ef03c19595f7714c6daca195', class: "tds-table__searchbar" }, h("input", { key: '723a44980b18901bee2408a5f4af80e8e8b11773', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '11888fa68284d352979cdb3fe9868db5d0e5e129', class: "tds-table__searchbar-icon" }, h(prefixedTagNames.tdsIcon, { key: '30df3849b8a69eee6a42c1ce689aad6334f6b9e5', name: "search", size: "20px" })))), h("slot", { key: '11f4ae49fcfca3241fabfbbc5532090d358e0dbe', name: "end" })))));
     }
     get host() { return this; }
     static get style() { return TdsTableToolbarStyle0; }
@@ -90,18 +92,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-table-toolbar", "tds-icon"];
+    const components = ["tds-table-toolbar"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-table-toolbar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTableToolbar$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-table.js CHANGED Viewed

@@ -1,5 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
+import { f as findClosestComponent } from './p-875e2e9c.js';
+import { g as getDirectChildHTMLElementOfKind } from './p-d18575db.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;
@@ -33,11 +35,11 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
     /** Returns all selected rows data. */
     async getSelectedRows() {
         let selectedRowsData = [];
-        const tableBody = this.host.querySelector('tds-table-body');
-        const selectedRows = Array.from(tableBody.querySelectorAll('tds-table-body-row')).filter((element) => element.selected);
+        const tableBody = this.host.querySelector('.tds-table__body');
+        const selectedRows = Array.from(tableBody.querySelectorAll('.tds-table__row')).filter((element) => element.selected);
         selectedRows.forEach((row) => {
             let selectedRow = [];
-            const rowCells = Array.from(row.getElementsByTagName('tds-body-cell'));
+            const rowCells = Array.from(row.querySelectorAll('.tds-table__body-cell'));
             rowCells.forEach((cell) => {
                 var _a;
                 const cellObject = {
@@ -83,20 +85,21 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
     widthChanged(newValue) {
         this.emitInternalTdsPropChange('horizontalScrollWidth', newValue);
     }
-    componentWillRender() {
+    componentDidRender() {
         if (this.horizontalScrollWidth) {
+            const tdsTableElement = findClosestComponent(this.host, 'tdsTable');
             this.enableHorizontalScrollToolbarDesign =
-                this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+                getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-toolbar').length >= 1;
             this.enableHorizontalScrollFooterDesign =
-                this.host.closest('tds-table').getElementsByTagName('tds-table-footer').length >= 1;
+                getDirectChildHTMLElementOfKind(tdsTableElement, 'tds-table-footer').length >= 1;
         }
     }
     render() {
-        return (h(Host, { key: '4d156fac32972a0493c44dc235134370f503c43c', class: {
+        return (h(Host, { key: '55301935993e5fc7a526a7132df15cbcd0107206', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: 'da2663a9406f0f5a68ba789fd9ae16e474f28b6e', style: this.getStyles(), class: {
+            } }, h("table", { key: '970da50a6e4990808c846975dafc79de1263c8e6', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -107,7 +110,7 @@ const TdsTable$1 = /*@__PURE__*/ proxyCustomElement(class TdsTable extends H {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '1fc2d3dc9a43c87adea2ad500f573838c23bd2ca' }))));
+            } }, h("slot", { key: 'df9ef8fd03af6a5e43b6b2681b3c8de4d6711853' }))));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
 import { h as hasSlot } from './p-ae110fc2.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.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-color)}.text-field-input-lg.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-lg.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-md.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-md.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-sm.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-sm.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-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-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{pointer-events:none}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{padding-right:54px;background-color:transparent}.form-text-field-success.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.sc-tds-text-field .text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
+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-color)}.text-field-input-lg.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-lg.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-md.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-md.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-color)}.text-field-input-sm.sc-tds-text-field:focus::placeholder{color:var(--tds-text-field-placeholder-focus-color)}.text-field-input-sm.sc-tds-text-field:disabled{cursor:not-allowed;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-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-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder-focus-color)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-bar.sc-tds-text-field{position:absolute;width:100%}.text-field-bar.sc-tds-text-field::before,.text-field-bar.sc-tds-text-field::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--tds-text-field-bar);transition:0.35s ease all}.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-md.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:46px}.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-sm.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{top:40px}.text-field-bar.sc-tds-text-field::before{left:50%}.text-field-bar.sc-tds-text-field::after{right:50%}.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.text-field-focus.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{width:50%}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly-label.sc-tds-text-field{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--tds-text-field-icon-read-only-label-background)}.form-text-field-readonly.sc-tds-text-field{pointer-events:none}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{padding-right:54px;background-color:transparent}.form-text-field-success.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::before,.form-text-field-error.sc-tds-text-field .text-field-bar.sc-tds-text-field::after{background:var(--tds-text-field-bar-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.sc-tds-text-field .text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(.tds-icon__icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(.tds-icon__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__icon){margin:0 2px 0 0}";
 const TdsTextFieldStyle0 = textFieldCss;
 const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
@@ -55,7 +55,8 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
         var _a;
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: 'd75b1ef11a730f7133c176776d6ff2f7713c302e', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h("div", { key: '141d82f3bb565871290b22bdc81ccb0f3f8528d7', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -69,12 +70,12 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: 'd1058c58a68782725d425d22ee3982605e375d4b', class: "text-field-label-outside" }, h("div", { key: 'c15fb3eb6f0345e2c58efd21711113c9f17a6223' }, this.label))), h("div", { key: '8795ee1b898c4b9b503588e31f4dac1354154a5c', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '9b78e21a8aa003b976110467d28cc0cdd7e8da96', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '5f6c4b8c31070f0210726cbbda797e22e7a4c9cf', class: "text-field-label-outside" }, h("div", { key: '99035b37282d1a0f515da68c10d61d3c7fb9d7f8' }, this.label))), h("div", { key: '138afcb4a1b2707708f8cb083dced516528864c7', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '7344d1255dcd617f9f1ddfdcfff41e71b9d44755', 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: 'e393a751374617fba0eb3153027ccc7c687546ae', name: "prefix" }))), h("div", { key: '5acc43f4064dee1294d9590f2978e6d2a68642a0', class: "text-field-input-container" }, h("input", { key: '12c6abdf65142b09efe6bd293c21f447307606f8', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: 'da339e8ce954c7a52e1cde1db5ef8e79d3902bf4', name: "prefix" }))), h("div", { key: 'dd4c572362c58f12dc1396b0acfa91046c54f053', class: "text-field-input-container" }, h("input", { key: 'adde4aa5834b186ffd3bfdc2440f6d89984eab04', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -87,13 +88,13 @@ const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField exten
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '4f4b7888d0b25431b9716ae9082188945ee1b36f', class: "text-field-label-inside" }, this.label))), h("div", { key: '797624248b2d5a5d2ea20687f1952c9b4d8945d5', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '8a629c0927d391aea80a4b6d6ef4040772e9ded0', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '8b8369cee1bead3625d0f37f658ec78e5407c309', class: "text-field-label-inside" }, this.label))), h("div", { key: '850146994b5754989ad096ee2d0273b502d0ddb0', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: 'abd6dcd89dd3309b73b08fc98fd37cc8063e1536', 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: '2de42ce855242335dc1a25248e09527534be0152', name: "suffix" }))), h("span", { key: '422c8b07010a7dd59d8653c65f76ab79dbf4284b', class: "text-field-icon__readonly" }, h("tds-icon", { key: '254a6cf7c6fcde19447e0275d6984f16d1bf4385', name: "edit_inactive", size: "20px" })), h("span", { key: '8625d2334c62556ac6484ee81ac05a5caef87e33', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '82bc517d9d3be59c5861687334465b41d768ff63', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '25366fcd3b55885a5433b36560be8e6849c15875', class: "text-field-helper-error-state" }, h("tds-icon", { key: '8cdbc0ae8ec4efd992cecbb1588ba96c0600783e', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '232f3e4f400c49f8c065190d9353202b94419ef1', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '9ccc2d350603c6ad5ed6c49e84e00f8adcc2cd91', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: '6bf52e828841de68d56efff61fc77a07fc62e6db', name: "suffix" }))), h("span", { key: 'e52238e33e18d03246e08da731e1a0dccd3b0cf0', class: "text-field-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '996e37c7cc519c155026de8277d2fe6c08948858', name: "edit_inactive", size: "20px" })), h("span", { key: '878e26ab9bc489be9d5c4c6d5479a9f5053d8459', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: 'f928b76bd6b4ed5b937c8a5cc051f49d00be510e', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '1f57aaa3b835d028e6930b74572b57ce79d0eaf3', class: "text-field-helper-error-state" }, h(prefixedTagNames.tdsIcon, { key: '67db0b2ca1e4f304405def4a203341ce4fd24312', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '39737284a2008115169022d3469f25f95085d01e', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '6da4eb1f9477f9b3fea086ca70671e1a03b11a4c', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     get host() { return this; }
     static get style() { return TdsTextFieldStyle0; }
@@ -121,18 +122,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-text-field", "tds-icon"];
+    const components = ["tds-text-field"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-text-field":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTextField$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-textarea.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.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-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{content:\"\";height:2px;width:0;position:absolute;background:var(--tds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{left:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after{right:50%}.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::after,.textarea-container.sc-tds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-tds-textarea::before{top:calc(100% - 2px)}.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::placeholder{opacity:1;color:var(--tds-textarea-placeholder)}.textarea-input.sc-tds-textarea:focus::placeholder{color:var(--tds-textarea-placeholder-focus-color)}.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:disabled~.textfield-label-inside.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.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-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.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-focus-color)}.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-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before,.textarea-container.textarea-focus.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::after{width:50%}.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-wrapper.sc-tds-textarea::after,.textarea-error.sc-tds-textarea .textarea-wrapper.sc-tds-textarea::before{background:var(--tds-textarea-bar-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.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-icon__readonly.sc-tds-textarea:hover~.textarea-icon__readonly-label.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textfield-input.sc-tds-textarea{padding-right:54px;background-color:transparent}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}";
 const TdsTextareaStyle0 = textareaCss;
@@ -49,7 +49,8 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
     }
     render() {
         var _a;
-        return (h("div", { key: 'fc3599b1d61b75327840068968001f2df6ec6b05', class: `
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h("div", { key: '2ffbc3fe9c91d2be0e8a01ca835a92271b1bc0ac', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -59,7 +60,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { key: '5ac3d5ef752a55f241865fe51bdb7aa96416731b', class: 'textarea-label' }, this.label), h("div", { key: '310c4a2a51391c366e17eca98ee22903d1620b16', class: "textarea-wrapper" }, h("textarea", { key: '4b83ff31486dea966a4a4a9df35d83043ad1a616', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { key: '4900080ba517f1a38ef38d542988f385b38533ed', class: 'textarea-label' }, this.label), h("div", { key: 'f148888e98418ff355cb64dcce03aed344d98cbc', class: "textarea-wrapper" }, h("textarea", { key: 'ed14dd41f9ee8384ca824b1c0de33b76ab3b3153', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
                     this.handleFocus(event);
                 }
@@ -67,8 +68,9 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '7718db97412e86796819e23584037833d762d6ce', class: "textarea-resizer-icon" }, h("svg", { key: '2b59b518d8bb6a61f6cbbbfb9bd2ec67938e91b6', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99c42c62b8e6a17c6acf6824d6e08ae88a3ed2bf', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '5c4a4cad4aa805df35ce264c34f9cdde678b1804', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'c5fe3371e08431c38a3979c226f64b79c35fed23', name: "edit_inactive" })), h("span", { key: 'e4261be8ce8cf8fc9cba5f25e6d4c52de4503f67', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'a58d64d87a5f971f3e51356a839beea73dfff4b4', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: '39dfd4c2c356817e5f3b39af7f4e90334de79ac0', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '8df0493b694ddce5cd3669f00527329df2c29e06', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8604248491d68a2b70531c028661573de48deb27', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: 'bb848734a2517199be59296307c408eddfa9ddff', class: "textarea-resizer-icon" }, h("svg", { key: 'e78b4be10f32ab013d5dfe974841372e9f493426', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bad8f7bafc618fcb2bcc8c9d08b7023b52bb367d', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: 'dd180dcf4529be58a6db11a4cf8f7d68df7a8cfa', class: "textarea-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '5b8111eeb2788ae26843eae41e97c95c83111724', name: "edit_inactive" })), h("span", { key: '81bedd221938ffc0e116bed90613d8805a24fc02', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'e9cbeee4ee01ea188a900122cb305a3da2ebda5a', class: 'textarea-helper' }, this.state === 'error' && h(prefixedTagNames.tdsIcon, { key: '0bf1f5d24a654c9153d68d8b3d81953a0b6c4e6a', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '6f226fcab1a9ec86c75a4979e780e0c655457632', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '21161e36801d902822b5e8a8e58f342b4b69aae9', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
+    get host() { return this; }
     static get style() { return TdsTextareaStyle0; }
 }, [2, "tds-textarea", {
         "label": [1],
@@ -92,18 +94,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-textarea", "tds-icon"];
+    const components = ["tds-textarea"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-textarea":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTextarea$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-toast.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { g as generateUniqueId } from './p-11648030.js';
 import { h as hasSlot } from './p-ae110fc2.js';
-import { d as defineCustomElement$2 } from './p-3e74be57.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
-const toastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information tds-icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success tds-icon{color:var(--tds-positive)}:host .wrapper.error{border-left:4px solid var(--tds-negative)}:host .wrapper.error tds-icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning tds-icon{color:var(--tds-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 22px;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .wrapper button.close tds-icon{color:var(--tds-toast-dissmiss-color);padding:0}:host tds-icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1;max-width:250px;word-break:break-word}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{margin-top:12px}:host slot[name=actions]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";
+const toastCss = ":host(.hide){display:none;visibility:hidden}:host{z-index:800}:host .wrapper{display:flex;width:348px;background-color:var(--tds-toast-background-color);border-radius:4px}:host .wrapper.information{border-left:4px solid var(--tds-information)}:host .wrapper.information .icon{color:var(--tds-information)}:host .wrapper.success{border-left:4px solid var(--tds-positive)}:host .wrapper.success .icon{color:var(--tds-positive)}:host .wrapper.error{border-left:4px solid var(--tds-negative)}:host .wrapper.error .icon{color:var(--tds-negative)}:host .wrapper.warning{border-left:4px solid var(--tds-warning)}:host .wrapper.warning .icon{color:var(--tds-warning)}:host .wrapper button.close{height:20px;width:20px;display:flex;align-items:center;justify-content:center;margin:14px 14px 0 22px;border:none;background:transparent}:host .wrapper button.close:hover{cursor:pointer}:host .wrapper button.close:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .wrapper button.close .icon{color:var(--tds-toast-dissmiss-color);padding:0}:host .icon{padding:14px 0 0 12px}:host .content{padding:16px 0 16px 10px;display:flex;flex-direction:column;flex:1;max-width:250px;word-break:break-word}:host .content .header-subheader{display:flex;flex-direction:column;gap:4px}:host .content .header,:host .content slot[name=header]::slotted(*){font:var(--tds-headline-07) !important;letter-spacing:var(--tds-headline-07-ls) !important;color:var(--tds-toast-headline-color)}:host .content .subheader,:host .content slot[name=subheader]::slotted(*){color:var(--tds-toast-subheadline-color);font:var(--tds-detail-02) !important;letter-spacing:var(--tds-detail-02-ls) !important}:host .content .subheader.no-link slot::slotted(*),:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*){padding-bottom:0}:host .content .toast-bottom{margin-top:12px}:host slot[name=actions]::slotted(*){color:var(--tds-toast-link-color)}:host .tds-mode-variant-primary{--tds-toast-background:var(--tds-toast-background-primary)}:host .tds-mode-variant-secondary{--tds-toast-background:var(--tds-toast-background-secondary)}";
 const TdsToastStyle0 = toastCss;
 const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends H {
@@ -62,12 +62,14 @@ const TdsToast$1 = /*@__PURE__*/ proxyCustomElement(class TdsToast extends H {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'ee07540896c1aae0d8025b16e6b7794f1c5d8f4a', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
-                hide: this.hidden,
-                show: !this.hidden,
-            } }, h("div", { key: '20a502c69ea5923dbd53fb8749c0c03a4aa4977b', class: `
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '78c74c1686e4d0820eb3f56a4a745bd5e3821790', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+                'tds-toast__toast': true,
+                'hide': this.hidden,
+                'show': !this.hidden,
+            } }, h("div", { key: '89e5f717d0ffae890c36fb7232b5050ee58c88ae', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '4167e597b4603cdb7d522a8b86dcc9c5c382ecaa', name: this.getIconName(), size: "20px" }), h("div", { key: '31921a5a61b34711669cbc93583291581e95c86f', class: `content` }, h("div", { key: '6d45456ec0c53cba6714af755a6fc2fa4db4405a', class: "header-subheader" }, this.header && h("div", { key: '3ac77ce9dfea028f0207214d99221ea5de0025cd', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'c746b1e1bd696fa8ed85e39bea4b6df0404a1a14', name: "header" }), this.subheader && h("div", { key: '3f6496b6942d9a6ff9a425cd60e396d813f4da1b', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8c3c3a8f926dbc077c63a562cd54afba693d6ea6', name: "subheader" })), usesActionsSlot && (h("div", { key: 'dc5e027546c10825168bf0907280479f29688c3d', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'e7593549992a4842a7f6c35ab93c06b902ad469b', name: "actions" })))), this.closable && (h("button", { key: '7b3d02c1b27263f550445a18a3f94a5064375a78', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '69dffbd7b7e6be0dabd264683ea1bbf7c9413fae', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h(prefixedTagNames.tdsIcon, { key: '9c9d0f82620dd1e1809b6be4fc2ac147f9c297ee', class: "icon", name: this.getIconName(), size: "20px" }), h("div", { key: '91e8e4718f63002f1419c7ca59f75170afd4fea0', class: `content` }, h("div", { key: '05fa1bd015f1c57945496b5676f908e8d8e4369d', class: "header-subheader" }, this.header && h("div", { key: '6e6322e0ebd6a3d692f7031955c0ce86ef15bd8b', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '1b376221cffd4c488c21375385ebe13926b48929', name: "header" }), this.subheader && h("div", { key: '16800c1b193cec322e1688fb14ce2669256566a0', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '754e558a74d3fd49e67d1aa111d98bf07fa81498', name: "subheader" })), usesActionsSlot && (h("div", { key: '6301ef7f0bcf1545b1f4da47151207e1ae43cfe5', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '726406d9c50002b53f62f5f909dd88d3b663b42d', name: "actions" })))), this.closable && (h("button", { key: '8f109e5e2e6bbc2c928b4530e9a7ce1e930601e2', onClick: this.handleClose, class: "close" }, h(prefixedTagNames.tdsIcon, { key: '0996e5753dddca460089809d76030ee8d5c0ce83', class: "icon", name: "cross", size: "20px" }))))));
     }
     get host() { return this; }
     static get style() { return TdsToastStyle0; }
@@ -86,18 +88,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-toast", "tds-icon"];
+    const components = ["tds-toast"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-toast":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsToast$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/tds-tooltip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAttributes } from './p-3fe9cbbf.js';
-import { d as defineCustomElement$2 } from './p-dc461e7b.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
 const tooltipCss = ".tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
 const TdsTooltipStyle0 = tooltipCss;
@@ -55,7 +55,8 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: '6ddab8bdc240b9b286226593656bbc5ab89f375d' }, h("tds-popover-core", Object.assign({ key: '82235fdf92c5d1fb7a63b2a756a59c8516e1e8c2' }, this.inheritedAttributes, { class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'a0c6888bc1971fa8eee816c1b3ff6a34990a1434' }, h(prefixedTagNames.tdsPopoverCore, Object.assign({ key: 'b588d5c2b43c823530212f718b82db59cdd4b0ad' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -64,7 +65,7 @@ const TdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: '579448ad9309452a0be5aedb906da8059f56b122' }))));
+            } }), this.text, h("slot", { key: '12f1e8a295ddc16111dc9e01353ffb431da50e59' }))));
     }
     get host() { return this; }
     static get style() { return TdsTooltipStyle0; }
@@ -83,18 +84,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-tooltip", "tds-popover-core"];
+    const components = ["tds-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-tooltip":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsTooltip$1);
             }
             break;
-        case "tds-popover-core":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();