@scania/tegel 1.14.1 → 1.15.0-component-versioning-beta.0

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = [
     'compactDesign',
     'horizontalScrollWidth',
@@ -101,10 +102,11 @@ export class TdsTableFooter {
         return styles;
     }
     render() {
-        return (h(Host, { key: '0d611bd3d31ce4dd1a7238784aa6aa6ab29d2abd', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '2b1679b41dc9820424351c33e85591f36818d1e1', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'cb4fc7ffecfa791f08a3da4a167459ccfb32e782', class: "tds-table__footer-row" }, h("td", { key: 'bf7388bc8aa26313cadba5333dc587d431a29867', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'ace766078c85f047034ac614712dc58b6dc7b540', class: "tds-table__pagination" }, h("div", { key: '0ef2c3c300bab7595773b65aa40da1399af4b7b8', class: "tds-table__row-selector" }), h("div", { key: '3fe2283dcbfd64fb54bd8faa9bd269dac22e81d8', class: "tds-table__page-selector" }, h("input", { key: '84295a91900f676742795c975f1706d4fbe196f6', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '88c7d7d7cfe66f2431b44c9ed38ebee5771f54b7', class: "tds-table__footer-text" }, "of ", h("span", { key: '42cf669a05c6e0e86a56aa568f2623c562bf83f6' }, this.pages), " pages"), h("button", { key: '3f022e45c6ca31ce542854c5e659349ab54b372a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '253b1cb33d4038ce03ff8fdb0bad30ba46ab0c13', name: "chevron_left", size: "20px" })), h("button", { key: 'ad21b63c30fc638372c89bb366be77df419bf532', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '58a640745984554b8c7cba3ce07130063299223e', name: "chevron_right", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: '153812eec84fce53dc6dc8ac7ca0ef80dfd76213', class: "tds-table__footer-row" }, h("td", { key: '8393249d6dc9f5758e7b4fa83d7cfcbde59dbc77', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'cbd30e634548f1019ccd1bc15512a6b65ff13034', class: "tds-table__pagination" }, h("div", { key: '1c4a05e5ee585ca96b632082cdc34b7d5e520447', class: "tds-table__row-selector" }), h("div", { key: 'aaa98355f48907c761157c79d6676a357b431e98', class: "tds-table__page-selector" }, h("input", { key: '8bea9cd1dd079ec4062a0fc1a72b57d5aafbdf69', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '75c510c649be650ad2c52d894eee1f99ceed9d96', class: "tds-table__footer-text" }, "of ", h("span", { key: 'cbdf2851142771260e5f2ded77fac0313e326e69' }, this.pages), " pages"), h("button", { key: 'e881d7d94881aef373551e37b9371a9f6b4d5332', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h(prefixedTagNames.tdsIcon, { key: 'efb8d1f38cb9cea4fccc9b9df0649837d44dfa46', name: "chevron_left", size: "20px" })), h("button", { key: '6017258d6ec87aea2e34739c17d63d1e0762c2d6', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h(prefixedTagNames.tdsIcon, { key: 'c020cb98076c8c5e26cb9d4a78f0600272e4ebf5', name: "chevron_right", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = [
     'multiselect',
     'expandableRows',
@@ -82,11 +83,12 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '5f212887d3d35e32240e9745d62685b7024100e1', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'c6b52b1d3a4758d2f633b63276491d54378997d0', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '1a40af0dddfb627c39ae5df47aedc80eb1006f04' }, this.multiselect && (h("th", { key: '17d16e6bf8964b30e0ce93a76c436112ac0a6540', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '98f282baf5a0b4a929ad04c850319e04955090a0', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d8115deb1403df121309d32a166ccc6eac685d5', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7cc0e1c0d3d7ec9f4bef917a5b8346cca8bc58ae', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f7aa3bd3acdd69f1f2a20d3525ad5901f0ac239' }))));
+            } }, h("tr", { key: '4f9c9077abe94dd132d70c3b1917b5ee321bb86c' }, this.multiselect && (h("th", { key: '93fe6f0b820002e877368a406a1f27993f8c76d9', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '0ee069d210c5bf362585034db083d675e20790d9', class: "tds-form-label tds-form-label--table" }, h(prefixedTagNames.tdsCheckbox, { key: '8a1db3dd87cf767823c4a20a9d7c4fd25e9c595c', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '2a141bca63ff69c3572f18e83ba67c375b11b988', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'b5cfad23823fbddf0136ea696ec5870f114075f6' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = [
     'multiselect',
     'expandableRows',
@@ -29,9 +30,9 @@ export class TdsTableHeaderCell {
                 key: this.cellKey,
             });
         };
-        this.headerCellContent = () => {
+        this.headerCellContent = (prefixedTagNames) => {
             if (this.sortable) {
-                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState } }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h("tds-icon", { class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h("tds-icon", { class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
+                return (h("button", { class: "tds-table__header-button", onClick: () => this.sortButtonClick(), style: { justifyContent: this.textAlignState } }, h("span", { class: "tds-table__header-button-text" }, this.cellValue, h("slot", null)), this.sortingDirection === undefined && (h(prefixedTagNames.tdsIcon, { class: "tds-table__header-button-icon", name: "sorting", size: "16px" })), this.sortingDirection && ['asc', 'desc'].includes(this.sortingDirection) && (h(prefixedTagNames.tdsIcon, { class: `tds-table__header-button-icon ${this.sortingDirection === 'asc' ? 'tds-table__header-button-icon--rotate' : ''}`, name: "arrow_down", size: "16px" }))));
             }
             return (h("p", { class: {
                     'tds-table__header-text': true,
@@ -105,7 +106,8 @@ export class TdsTableHeaderCell {
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (h(Host, { key: '6a051465b3a5af5460f7c5ac112798b521f9b4a8', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '0dc5485f665fc02b21ed16b04e130b49037fa491', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -116,7 +118,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
+            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent(prefixedTagNames)));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableHeaderInputWrapper {
     constructor() {
@@ -63,11 +64,12 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '43243a6c8e1a0ef0f18d9f1f1d4cd4cba6bc15b4', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '379cdc2f1c18f2a15919e9d2b431f192f2e719d5', 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));
     }
     static get is() { return "tds-table-header-input-wrapper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
@@ -63,10 +64,11 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '7f94e84dc631768fb7fba68846408c049959eee7', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '017e5a33806f969620e47af13c1abd4d5cc73c1e', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: 'ecbf925fcd58dd77de40fd4b15c0a57c07b8a1c0', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd2f230c4944590897ac220fc2c35cd72008b8f4c', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'd75faf41e03bd19b1e268e85c884298c75d74450', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '7b098f02923e9580e1c8852dfcca11d4c21c75bd', class: "tds-table__searchbar" }, h("input", { key: 'c9d76e665ef26e197a7dad1e9ac83a0095ad66e9', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '1af8c1344e160cd494eeafc43c4f2422f7119d83', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '9c85fc3e817afcf7b548f2f851f3ce0970f82c00', name: "search", size: "20px" })))), h("slot", { key: 'ff6e2d21cc06fa5981e7814040d6d79581f8d974', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: '8a2e0b3ff1cb452706d4a01818f6159749dbb89a', class: "tds-table__upper-bar-flex" }, h("caption", { key: '91dcfc3b3e1a6f88a816c8aaadd6160bd9ad9474', class: "tds-table__title" }, this.tableTitle), h("div", { key: '62b725ed18e7406d2635c62ae057abb6cf214cba', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0dc45e13a7185194002e25a9116b6535307d6412', class: "tds-table__searchbar" }, h("input", { key: '6f147fde17c9c01c58ed2178c084a5be48c84186', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'd2b540ca62e3b4c3a917b2283510760be12e0b2a', class: "tds-table__searchbar-icon" }, h(prefixedTagNames.tdsIcon, { key: '39b663fbe530f36568e282768ed7b5630722fb01', name: "search", size: "20px" })))), h("slot", { key: '19474502d0d73d1c3a7b899a8a21cc269bd8efe8', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
@@ -160,9 +161,10 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '748bacbb3d58d37735385a8c926dacb637d8eff1', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '4c4f764a6a8c8a095bd1d030ef85a34014d8d284', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '7f81db3a95250825f2ad5b6b614af7eddfe33b66', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'be070eb5e8484fc397426bb8e0c3f35ed4a1e851', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: 'ca859bdc9b9d10a7bcfaae194bbee508f308c1a2', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '70aaa7044418b79234b9f3bd7eef2c1e0bf96e61', name: "chevron_left", size: "20px" })), h("slot", { key: 'ca1990c7333322885aa37b164cc7d74708b22116', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '6321d42b6a42a9bf63ae844b94541f56806195fd', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: '40a0e7a3297bdf6d4abbe5fc62114020fdb7aee3', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '6d3862bddb1407519259a5eab162ab0ddf95e76c', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h(prefixedTagNames.tdsIcon, { key: 'e36ee18f2896ad27889619a284c8e39ea0397148', name: "chevron_left", size: "20px" })), h("slot", { key: '1b62b7716c519f9eb9c2b2a8eab327a25d621a7e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ac50c266270eab2bc53172f2e000a0d93ca4aa2d', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h(prefixedTagNames.tdsIcon, { key: 'c62208f8e55c6d4662872a9b676e9993c61ec03d', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
@@ -167,9 +168,10 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '20c44d2457fe1115cf322182f0a69e84b9a65107', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '3d4aa2b1ed18f1f8f481eda3d21473d8bfbc195e', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'bc607732f1152e69199b3fca66efc4ebfd9683f7', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'ac41e6a7b6495c4ae9516a7e76e36f26be0b13d5', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'af53b300c3420a52fd2cad793ca9acb333e71478', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd21f7a30e597d429eccedcaa8569e7dc7170c145', name: "chevron_left", size: "20px" })), h("slot", { key: '39e1b21aa75fa86850827f87f5793292d01a97c7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '8848014869eb92505d97f15cc3f8f2234dadc9c5', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '130a7c2c926b312491f735dac63b67e91a632058', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '02979087fbd289a8959e63c3960aa34e431505bc', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h(prefixedTagNames.tdsIcon, { key: 'e60e28cd233f054cde23c03b21a98185f18c82c1', name: "chevron_left", size: "20px" })), h("slot", { key: '82a24bd27e62b3dc58457a0a4ed9ee8fa1c2a6f7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'bea28e92a4cbe56d35106b399b8bc7734dc04290', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h(prefixedTagNames.tdsIcon, { key: '55317e5de61ad0ab7713852dc067e6f254d57988', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
@@ -167,9 +168,10 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'fbb3223e9c88c43d51773210c5599cc644fc8df5', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'dbcd27f8adba0b6ef38071346bf38eba6dcaedd1', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'fc517a4647224414ac6b1643b7ff3cb94810e69c', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '4a26e80281ecc5a791a8c5eee623fdc8a1630f68', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'afdac4d596a8b9ea1de0fc483eda96d487ad17ed', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '1ff5064f5bd2b5ba26e0e28b7d3beeae892a2a67', name: "chevron_left", size: "20px" })), h("slot", { key: 'bfcf00b43116a1c03507a5d93bd0bafc2a987eb7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'af4361d7dc949762577e3d74162bfa768f6dfa89', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '7ffa8829a1b2ae8f408aa1bab6770f27726fb1c1', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '6b60e0b9635abf48ca821f8e157b2dff42f8ea24', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h(prefixedTagNames.tdsIcon, { key: 'eccc37fc81804e909bec8a77279fee3eb156aaa2', name: "chevron_left", size: "20px" })), h("slot", { key: 'f48ae4ce1f825415a5c70d86a73caad8411b9bec', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'd0fca82d30d9e354edd26147be75f03fbabdedc0', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h(prefixedTagNames.tdsIcon, { key: 'bc9270c86e3bfbdfb9168f12865d294f2e7fba3a', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot prefix - Slot for the prefix in the component.
  * @slot suffix - Slot for the suffix in the component. Suffix is hidden when the input is in readonly state.
@@ -46,9 +47,10 @@ export class TdsTextField {
     }
     render() {
         var _a;
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesPrefixSlot = hasSlot('prefix', this.host);
         const usesSuffixSlot = hasSlot('suffix', this.host);
-        return (h("div", { key: '1b4348574e1a9e7e315c61a2d555b487b619f22e', class: {
+        return (h("div", { key: '9709711a5feb7c8c3e26997f0ad91753295bc89a', class: {
                 'form-text-field-nomin': this.noMinWidth,
                 'form-text-field': !this.focusInput || this.disabled,
                 'text-field-focus': this.focusInput && !this.disabled,
@@ -62,12 +64,12 @@ export class TdsTextField {
                 'form-text-field-sm': this.size === 'sm',
                 'form-text-field-error': this.state === 'error',
                 'form-text-field-success': this.state === 'success',
-            } }, this.labelPosition === 'outside' && (h("div", { key: '7f604df386ece3c8c01e5b60e75ef80de4500e81', class: "text-field-label-outside" }, h("div", { key: 'c13f468f76d9484c016a8218d9cc73b18724458f' }, this.label))), h("div", { key: '992c9076d7b1f9c6bec1847851bcfd989b6b0497', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'dfb616b9083ce42d90c180b5217e2e60ee3784af', class: {
+            } }, this.labelPosition === 'outside' && (h("div", { key: '8d1d75050b1c40a5b5e4fe0180805890d5958402', class: "text-field-label-outside" }, h("div", { key: '35160ceab326f5e86d0a98cc3ae6ee5c7e711a00' }, this.label))), h("div", { key: 'ab0021d9ce5b829c3613ab89c70abe8e7b270682', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: '56be7515ef267d299b478c822dd3a986909c75b9', class: {
                 'text-field-slot-wrap-prefix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
-            } }, h("slot", { key: '98ed143615ad68a3cd51aca034999bfc279fce6b', name: "prefix" }))), h("div", { key: '8079b57a7e047255ed45f3f1ba9e28655a16ebed', class: "text-field-input-container" }, h("input", { key: '11782cd5c55f092a02ec741ecd9b20f2b8bfae91', ref: (inputEl) => (this.textInput = inputEl), class: {
+            } }, h("slot", { key: '812acfb75ff513c35e2a48ccfb3dcf671d636ead', name: "prefix" }))), h("div", { key: '28b17720edb473137f0de48ef5561975fbabedc7', class: "text-field-input-container" }, h("input", { key: '4d047fcef2d46e91e40d29a35f46edcb42ffd1eb', ref: (inputEl) => (this.textInput = inputEl), class: {
                 'text-field-input': true,
                 'text-field-input-sm': this.size === 'sm',
                 'text-field-input-md': this.size === 'md',
@@ -80,13 +82,13 @@ export class TdsTextField {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'f72126827829ec26bafee0b5d0eb29a9b96e8628', class: "text-field-label-inside" }, this.label))), h("div", { key: 'c21c6a8cd0d5c8a4814efa1a8f93a5e99b3e092e', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '9029f584ea0ef6cc081985a087692e066394a01b', class: {
+            } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: '6865add321d3975917ac7881c96d8dff6f2b603a', class: "text-field-label-inside" }, this.label))), h("div", { key: 'e559d4a3038b1ea26aed03d97a8e9cbbf52c9f99', class: "text-field-bar" }), usesSuffixSlot && (h("div", { key: '455610e90198eb2f5030ae81f1d695d092388a8b', class: {
                 'text-field-slot-wrap-suffix': true,
                 'text-field-error': this.state === 'error',
                 'text-field-success': this.state === 'success',
                 'text-field-default': this.state === 'default',
                 'tds-u-display-none': this.readOnly,
-            } }, h("slot", { key: 'f50d3a85bfd324529516a2b8180129e194202465', name: "suffix" }))), h("span", { key: '6f7f160b3a1b425a7ace18b748b64e50cfd8389f', class: "text-field-icon__readonly" }, h("tds-icon", { key: '82b1d06cfb8a3b08543a77c839ccfcba2e9fae13', name: "edit_inactive", size: "20px" })), h("span", { key: '0c9c2ab0b8f620db172050e1db1dd4324b3ab094', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '84c9baa2bce9159f5ea084ed35051a878cfac1f9', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: '888d0185686e5ba16bf7b4a064ea1926e17d5c96', class: "text-field-helper-error-state" }, h("tds-icon", { key: '752d5c6c9dee5a7eff5abae9d60e2eb353ee2e60', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: 'ead6aba2e4f11010dc4d6c17977abaac0b242e76', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '27e1880b203314c781260116b99fd1474a6a8041', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
+            } }, h("slot", { key: '66f0d0b9bd70aab9f4ec1265523e464075925e29', name: "suffix" }))), h("span", { key: '050f98dc78cac90bcd02252d6c3fdbcfc18f41b6', class: "text-field-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '6c975efb06829a46398ca2a2f05efd666410ebba', name: "edit_inactive", size: "20px" })), h("span", { key: 'b69ded042d9633d6d87527c1b5feba0d680f0299', class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { key: '1dba1e27b3435eddcc27f1fecd7d260d8ba0f04f', class: "text-field-helper" }, this.state === 'error' && (h("div", { key: 'a5a2fa8f25edb7ed3626f6857446c56baed0f2d7', class: "text-field-helper-error-state" }, h(prefixedTagNames.tdsIcon, { key: '9eed79df72810969d0d88394437b60a8ee8be71d', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { key: '0353ce2aa058c39479389517029e7fd4a6de04e7', class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '18f9e96da7b473dbbb0043beeeca1fa7bcf667de', class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
     }
     static get is() { return "tds-text-field"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { getPrefixedTagNames } from "../../utils/tagName";
 export class TdsTextarea {
     constructor() {
         this.label = '';
@@ -38,7 +39,8 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: 'f110536792da6122221dc6941b6da71900ea2111', class: `
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h("div", { key: '9840c9e02270672985277c10a85dedc9e3e404d2', class: `
         textarea-container
         ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
         ${this.focusInput ? 'textarea-focus' : ''}
@@ -48,7 +50,7 @@ export class TdsTextarea {
         ${this.value ? 'textarea-data' : ''}
         ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
         ${this.noMinWidth ? 'no-min-width' : ''}
-        ` }, this.labelPosition !== 'no-label' && h("span", { key: '67784499bde176257853f1f4c7a8757ce98b07ee', class: 'textarea-label' }, this.label), h("div", { key: '7ad9c6b9c897995a98af2b9e9babefc3e2ae8831', class: "textarea-wrapper" }, h("textarea", { key: '94d944bb5e9722d89f7b0c98d18199c52f81b458', class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
+        ` }, this.labelPosition !== 'no-label' && h("span", { key: 'b57721fd5d28ad58616ab4eafd58f639e693c884', class: 'textarea-label' }, this.label), h("div", { key: 'b8437213f9371ffbc287845f860a0c50fcb62daa', class: "textarea-wrapper" }, h("textarea", { key: '3edf4ab92c935510bbd04c395e7e2e5a0518f0bc', 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);
                 }
@@ -56,7 +58,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '719da60a6975556fa37b2104d435bf99fb99efa5', class: "textarea-resizer-icon" }, h("svg", { key: '6b6969d6e49824fb8791343ac62bd1a9f5c4e0fa', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1e4d31007fef3c520cfa32686cf9b888919b314a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { key: '144143c8af4351e0d2370ebeb0c50a0124ab8f9b', class: "textarea-icon__readonly" }, h("tds-icon", { key: 'e2c0ab89e72258d46bc6479b663f4d62466fa8b0', name: "edit_inactive" })), h("span", { key: 'c07af4893c1fd32de8988c1ef6ef3b77c4a63768', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'dd8ae6cbd2cdde4a08392c6905faae07bd7d58e7', class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { key: 'c282dcee39da4e70d207e41221c557852a06fb43', name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { key: '7f05bc68e67825742fe9c8c49853a39fabf1199e', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '32dd0095c4500558fbe9c9d46ba6db3eb67d9034', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { key: '6925c727f844de3efa787389dc488452f05de107', class: "textarea-resizer-icon" }, h("svg", { key: 'd8e9b2c949243b9d88f072492a2da56f34b7ee7d', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2821c5af0b5f0678d1e301703069f2acf0c2d83e', "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: '3358037162afca7d4351de3b4790076802c2135d', class: "textarea-icon__readonly" }, h(prefixedTagNames.tdsIcon, { key: '52ea3ac12dfbc02e29e13f1483a014655ec44f9f', name: "edit_inactive" })), h("span", { key: '759328f7b4a40a769229ee25c28c1dfe85162e27', class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { key: 'c45a121e2c3510c94d69c712a6fb2afb2c6427b9', class: 'textarea-helper' }, this.state === 'error' && (h(prefixedTagNames.tdsIcon, { key: 'e056a500dde09d407a3edb53e9a2628eeed23249', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '4bcd5edd214ffb2aa022193d6093fa7e6631be59', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '28795db6231ee330eaffeb879756423ffd49b367', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -423,4 +425,5 @@ export class TdsTextarea {
                 }
             }];
     }
+    static get elementRef() { return "host"; }
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot header - Slot for the Toast header.
  * @slot subheader - Slot for the Toast subheader.
@@ -55,15 +56,16 @@ export class TdsToast {
         this.hidden = false;
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'f0ddc729628a45f868868f2b265f31d7df9a0411', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '9c4ed33784151bd2ff0719cf229d8c4563be245c', toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '73e3f624e617544d84ec2c7306ace9fb990070b9', class: `
+            } }, h("div", { key: 'b0338778796674cc19ef3c0873a61c1255b0a76b', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: 'bbeab9085851de6cc3d870421d8ea18c7e15471a', name: this.getIconName(), size: "20px" }), h("div", { key: '45b568761c09added6f0c3815d518fb541ba077a', class: `content` }, h("div", { key: '65aaac22e0b6439b3975e465493bc59e01ac7131', class: "header-subheader" }, this.header && h("div", { key: 'cd856ec5c2c118c52d942010f40cd90499f735b7', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '96157619f2e4fc59cd197bffb948cd4844d997b1', name: "header" }), this.subheader && h("div", { key: '3ba6782ba25b311d1c57b76791c0055db3f92ec2', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'e820491ceaa28771acd2b7661c5ddf7d9574a492', name: "subheader" })), usesActionsSlot && (h("div", { key: '72b25af2d7efbbb54b4f349c038c7efb684086f6', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: '8c534d3b51d9f8c30148c0f601613d3395b8930e', name: "actions" })))), this.closable && (h("button", { key: 'a81bc7b2836bbec456260e80a1eb6e9d345ccdcf', onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '7988501b679a147d62f6879db443bbfc64211871', name: "cross", size: "20px" }))))));
+            ${this.variant}` }, h(prefixedTagNames.tdsIcon, { key: 'a07575723bba27caf6d38f1f6a1620cca698287a', name: this.getIconName(), size: "20px" }), h("div", { key: 'bffbd9afd81b4ef129e2b7e902eb38bdc23b6668', class: `content` }, h("div", { key: '8537a6b634c3d864d0e78b7816eb61f577855d74', class: "header-subheader" }, this.header && h("div", { key: 'ec629a586101403b8c598491b189617547b2c9b4', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'b1f2edad8674a25cfde8295955f6c2c192e70813', name: "header" }), this.subheader && h("div", { key: 'e884bd8aa6ffdfe5c2bd72e139f661dd7fb85ccc', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'c866f0a4dc4197fcec92e921f774d0c0858e69ea', name: "subheader" })), usesActionsSlot && (h("div", { key: '9c3105649defb45a571e18d5233bc6826e635754', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'd2ca9276229fb8ccf252f0fd8fc2faa45b350ac0', name: "actions" })))), this.closable && (h("button", { key: '7670a6fc75adfe4875e82abad04cc19a708cdcba', onClick: this.handleClose, class: "close" }, h(prefixedTagNames.tdsIcon, { key: 'a30deec263d631c6188033fbb10cfa0707fe4ecc', name: "cross", size: "20px" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import inheritAttributes from "../../utils/inheritAttributes";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
  */
@@ -51,7 +52,8 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: '93961300d93daf9eb0fa1f15e59c6bdfbea5f77b' }, h("tds-popover-core", Object.assign({ key: '1d2c6b17012d5040632df84b221eac247e890696' }, this.inheritedAttributes, { class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1b316c3ecf119863127ca9f6ec369c6beb29b60e' }, h(prefixedTagNames.tdsPopoverCore, Object.assign({ key: '7c1b59991aa1e23b1deadd044a7aa16ea853c69c' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -60,7 +62,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: 'd5a4357f2875a0f5f9b958b26adb8cc6f794e900' }))));
+            } }), this.text, h("slot", { key: '8c585483121574a449eae789dc81f6fe77602905' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/tagName.js

@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-relative-packages
+import { TAG_NAMES } from "../../../../src/utils/tagNames";
+// Utils to handle tag names for 'tds-' prefixed components
+export const getTagName = (el) => {
+    if (!el || !(el instanceof HTMLElement)) {
+        console.error('Invalid element provided:', el);
+        return ''; // Return a default or throw an error
+    }
+    return el.tagName.toLowerCase();
+};
+export const paramCaseToCamelCase = (str) => str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
+export const getTagNameWithoutPrefix = (host) => {
+    const tagName = getTagName(host);
+    const maxLength = 100; // Maximum length of the input string
+    // Ensure the regex correctly captures the tag name after the prefix
+    const match = /^((?:[a-z0-9]+-){0,maxLength})([a-z0-9-]+)$/.exec(tagName.slice(0, maxLength)) || [];
+    const [, , tagNameWithoutPrefix = ''] = match;
+    return tagNameWithoutPrefix;
+};
+class PrefixedTagNamesCache extends Map {
+}
+const PREFIXED_TAG_NAMES_CACHE = new PrefixedTagNamesCache();
+export const getPrefixedTagNames = (host) => {
+    const tagName = getTagName(host);
+    // Generate a unique cache key based on the tag name
+    const cacheKey = tagName;
+    // Check if the cache needs to be updated
+    if (!PREFIXED_TAG_NAMES_CACHE.has(cacheKey)) {
+        const prefixedTagNames = TAG_NAMES.reduce((result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: tag })), {});
+        PREFIXED_TAG_NAMES_CACHE.set(cacheKey, prefixedTagNames);
+    }
+    return PREFIXED_TAG_NAMES_CACHE.get(cacheKey) || {};
+};

package/dist/components/p-a74b6809.js

@@ -0,0 +1,117 @@
+const TAG_NAMES = [
+    'tds-accordion',
+    'tds-badge',
+    'tds-block',
+    'tds-breadcrumbs',
+    'tds-button',
+    'tds-banner',
+    'tds-card',
+    'tds-checkbox',
+    'tds-chip',
+    'tds-datetime',
+    'tds-divider',
+    'tds-dropdown',
+    'tds-footer',
+    'tds-header',
+    'tds-icon',
+    'tds-link',
+    'tds-message',
+    'tds-modal',
+    'tds-popover-canvas',
+    'tds-popover-core',
+    'tds-popover-menu',
+    'tds-radio-button',
+    'tds-side-menu',
+    'tds-slider',
+    'tds-spinner',
+    'tds-stepper',
+    'tds-text-field',
+    'tds-textarea',
+    'tds-toast',
+    'tds-toggle',
+    'tds-tooltip',
+    'tds-accordion-item',
+    'tds-breadcrumb',
+    'tds-dropdown-option',
+    'tds-footer-group',
+    'tds-footer-item',
+    'tds-core-header-item',
+    'tds-header-dropdown',
+    'tds-header-brand-symbol',
+    'tds-header-dropdown-list',
+    'tds-header-dropdown-list-item',
+    'tds-header-hamburger',
+    'tds-header-dropdown-list-user',
+    'tds-header-item',
+    'tds-header-launcher',
+    'tds-header-launcher-button',
+    'tds-header-launcher-grid',
+    'tds-header-launcher-grid-item',
+    'tds-header-launcher-grid-title',
+    'tds-header-launcher-list',
+    'tds-header-launcher-list-item',
+    'tds-header-launcher-list-title',
+    'tds-header-title',
+    'tds-popover-menu-item',
+    'tds-side-menu-dropdown',
+    'tds-side-menu-collapse-button',
+    'tds-side-menu-close-button',
+    'tds-side-menu-dropdown-list',
+    'tds-side-menu-item',
+    'tds-side-menu-dropdown-list-item',
+    'tds-side-menu-overlay',
+    'tds-side-menu-user',
+    'tds-side-menu-user-image',
+    'tds-side-menu-user-label',
+    'tds-step',
+    'tds-table',
+    'tds-table-body',
+    'tds-body-cell',
+    'tds-table-body-input-wrapper',
+    'tds-table-body-row',
+    'tds-table-body-row-expandable',
+    'tds-table-footer',
+    'tds-table-header',
+    'tds-header-cell',
+    'tds-table-header-input-wrapper',
+    'tds-table-toolbar',
+    'tds-folder-tabs',
+    'tds-inline-tabs',
+    'tds-navigation-tabs',
+    'tds-date-picker',
+    'tds-date-range-picker',
+    'tds-folder-tab',
+    'tds-inline-tab',
+    'tds-navigation-tab',
+    'date-picker-day',
+    'date-picker-month',
+    'date-picker-year',
+    'date-range-picker-day',
+];
+
+// eslint-disable-next-line import/no-relative-packages
+// Utils to handle tag names for 'tds-' prefixed components
+const getTagName = (el) => {
+    if (!el || !(el instanceof HTMLElement)) {
+        console.error('Invalid element provided:', el);
+        return ''; // Return a default or throw an error
+    }
+    return el.tagName.toLowerCase();
+};
+const paramCaseToCamelCase = (str) => str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
+class PrefixedTagNamesCache extends Map {
+}
+const PREFIXED_TAG_NAMES_CACHE = new PrefixedTagNamesCache();
+const getPrefixedTagNames = (host) => {
+    const tagName = getTagName(host);
+    // Generate a unique cache key based on the tag name
+    const cacheKey = tagName;
+    // Check if the cache needs to be updated
+    if (!PREFIXED_TAG_NAMES_CACHE.has(cacheKey)) {
+        const prefixedTagNames = TAG_NAMES.reduce((result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: tag })), {});
+        PREFIXED_TAG_NAMES_CACHE.set(cacheKey, prefixedTagNames);
+    }
+    return PREFIXED_TAG_NAMES_CACHE.get(cacheKey) || {};
+};
+
+export { getPrefixedTagNames as g };

package/dist/components/tds-accordion-item.js

@@ -1,5 +1,5 @@
 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-a74b6809.js';
 
 const accordionItemCss = ".tds-accordion-item{box-sizing:border-box;list-style:none;color:var(--tds-accordion-color);position:relative;border-top:1px solid var(--tds-accordion-border)}.tds-accordion-item *{box-sizing:border-box}.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{all:unset}.tds-accordion-item .tds-accordion-header-icon-start,.tds-accordion-item .tds-accordion-header-icon-end,.tds-accordion-item button.tds-accordion-header-icon-start,.tds-accordion-item button.tds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);padding:var(--tds-spacing-element-16);background-color:var(--tds-accordion-background)}.tds-accordion-item .tds-accordion-header-icon-start *,.tds-accordion-item .tds-accordion-header-icon-end *,.tds-accordion-item button.tds-accordion-header-icon-start *,.tds-accordion-item button.tds-accordion-header-icon-end *{box-sizing:border-box}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--tds-accordion-icon-color)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-start .tds-accordion-icon>tds-icon,.tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon>tds-icon{display:block}.tds-accordion-item .tds-accordion-title{flex-grow:2}.tds-accordion-item .tds-accordion-panel{cursor:default;padding:var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);display:none;font:var(--tds-detail-03);letter-spacing:var(--tds-detail-03-ls)}.tds-accordion-item .tds-accordion-panel p{margin:0;padding:0}.tds-accordion-item .tds-accordion-panel--padding-reset{padding-right:var(--tds-spacing-element-16)}.tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon{margin:0 0 0 var(--tds-spacing-element-32)}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-title{order:1}.tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon{order:0;margin:0 var(--tds-spacing-element-16) 0 0}.tds-accordion-item.disabled,.tds-accordion-item.disabled .tds-accordion-header-icon-end,.tds-accordion-item.disabled .tds-accordion-header-icon-start,.tds-accordion-item.disabled .tds-accordion-panel{color:var(--tds-accordion-color-disabled);cursor:not-allowed}.tds-accordion-item.disabled .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,.tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon{color:var(--tds-accordion-color-disabled)}.tds-accordion-item.disabled:hover,.tds-accordion-item.disabled:hover *,.tds-accordion-item.disabled:focus,.tds-accordion-item.disabled:focus *,.tds-accordion-item.disabled:active,.tds-accordion-item.disabled:active *,.tds-accordion-item.disabled.active,.tds-accordion-item.disabled.active *{cursor:not-allowed}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end{background-color:var(--tds-accordion-bg);outline:none;pointer-events:none}.tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,.tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after{border-color:transparent}.tds-accordion-item.expanded .tds-accordion-panel{display:block;padding-bottom:31px}.tds-accordion-item.expanded .tds-accordion-icon{transform:rotate(180deg)}.tds-accordion-item.expanded .tds-accordion-header-icon-end .tds-accordion-icon{margin-right:0;margin-left:var(--tds-spacing-element-32)}.tds-accordion-item.expanded .tds-accordion-header-icon-start .tds-accordion-icon{margin-left:0;margin-right:var(--tds-spacing-element-16)}.tds-accordion-item:focus{border-top:1px solid var(--tds-accordion-border-focus)}.tds-accordion-item[disabled=true]:focus{border-color:var(--tds-accordion-border)}:host(:focus) .tds-accordion-item{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-focus);outline:none}:host(:hover) .tds-accordion-header-icon-start,:host(:hover) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-hover)}:host(:active) .tds-accordion-header-icon-start,:host(:active) .tds-accordion-header-icon-end{background-color:var(--tds-accordion-background-active);outline:none}";
 const TdsAccordionItemStyle0 = accordionItemCss;
@@ -27,13 +27,15 @@ const TdsAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsAccordionIt
         }
     }
     render() {
-        return (h(Host, { key: '628336db584f9488762b6073af5fc05b18a064bd' }, h("div", { key: '15807da09f006149732d53a7f9aab2f86be788cd', class: `tds-accordion-item
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '28a9b6813c1cd7ce9df1528cefe381efe4a817e5' }, h("div", { key: 'b4f8d10531ec73f8090da847febc291638938eba', class: `tds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { key: 'f2f5941332be588effc795862d4136077b51122e', type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: '3cfa2d6066875270211f75879effd48b88932ce8', class: "tds-accordion-title" }, this.header, h("slot", { key: '3c5cb389c8df24b1cb0cd20bfcb3c0b1154d3e38', name: "header" })), h("div", { key: 'a6a8189fc018d2629989165b3bb49ab111318628', class: "tds-accordion-icon" }, h("tds-icon", { key: 'a7cf540846b381a4925a754ea7b915c7df5d1208', name: "chevron_down", size: "16px" }))), h("div", { key: 'd3eb2219f67e69c54f55428950b976ba282845dc', class: `tds-accordion-panel
+        ` }, h("button", { key: 'b1b7db7fc8522f1092c6fff48e2a78bca6868bcf', type: "button", "aria-expanded": this.expanded, class: `tds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { key: 'cef4676f3219664ead89806ad0450fd9593e7b43', class: "tds-accordion-title" }, this.header, h("slot", { key: '4ab9fef8b30367f2f205b30d972217a9e62b4e78', name: "header" })), h("div", { key: 'c9a988d0c37316139332611f6c695bfd946c3a2d', class: "tds-accordion-icon" }, h(prefixedTagNames.tdsIcon, { key: 'ff1b6046a611269cf8883eea74aa5cbfa89b1f47', name: "chevron_down", size: "16px" }))), h("div", { key: '851378e8581ca06d6d0ad285a00bc68bcf006afb', class: `tds-accordion-panel
             ${this.paddingReset ? 'tds-accordion-panel--padding-reset ' : ''}
-            ` }, h("slot", { key: '21625afeae6b8342aaa7d56c05ed965c29cc709d' })))));
+            ` }, h("slot", { key: '4925780d0f3f521d9e49546ff7bb4ed387b6d2f7' })))));
     }
+    get host() { return this; }
     static get style() { return TdsAccordionItemStyle0; }
 }, [1, "tds-accordion-item", {
         "header": [1],
@@ -47,18 +49,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-accordion-item", "tds-icon"];
+    const components = ["tds-accordion-item"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-accordion-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsAccordionItem$1);
             }
             break;
-        case "tds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 defineCustomElement$1();