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

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableHeaderInputWrapper {
     constructor() {
@@ -22,7 +24,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     connectedCallback() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             this.tableId = tableEl.getAttribute('table-id');
         }
@@ -31,7 +33,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     componentWillLoad() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             relevantTableProps.forEach((tablePropName) => {
                 this[tablePropName] = tableEl[tablePropName];
@@ -63,11 +65,12 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     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));
     }
     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,6 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
@@ -32,7 +34,7 @@ export class TdsTableToolbar {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -63,10 +65,11 @@ export 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" })))));
     }
     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: '3164044436f7029d85c4eed0ff7e0cc2b4e35752', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '59beaa0776ff83a30e84b69c5715a2f0d62ec6d9', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'c7822f3f9e24ee66c3782ed7ea054bf4a8819099', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'bbfa39dbe601afde0fdb21f8af42ad2ad7dbae59', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '0bd461d469592983e08043c23e295c21df04c80f', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'd21448eea9cab4d73087fec72d29270b52bf0999', name: "chevron_left", size: "20px" })), h("slot", { key: 'efe348a98b964486a73d1aac235ce894277c6249', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'ea819f59668994e328410941b5b7455620ecb321', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c52241bb7c77eabbdb8de5a19bb4400c32aa2062', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '48308ab796caa64d4c4190fb89d75adb1fbb5a50', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h(prefixedTagNames.tdsIcon, { key: '14d8d684712438a6306535e3cf489ca707d9217a', name: "chevron_left", size: "20px" })), h("slot", { key: '0bc3aa19870d8fb12859256804fcb614b01f32bc', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '25a41c57abd7fb999b1f5983a212c3cec0fb4e0e', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h(prefixedTagNames.tdsIcon, { key: '4eb9c940876ae98ff15db4790e1e1274a96210df', 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: '71f42e22f75a1fe4ca4f906b2151ed1a4c324e51', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '33e457be72862e642f2a867243f6325f94d210e8', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'd84f86419af02d8d561077d932936f797fbfb31b', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '604702fca926fbe3dafe9fec6e9d2fc62c3d8a41', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '786a1655c5efe5f2a079c62cb89300a99149c3fb', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'df2f3798cb6cb4ea446932cdf8ce84ac068c57ff', name: "chevron_left", size: "20px" })), h("slot", { key: 'b5e14ca573a2ac7a4e20defd05b412a941e72f0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'da0b823e674c5eacd325f69e98e14f4def9c477f', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '2bdd7110bb4b22c4dfabc1a5ef2acf9e7592b9b9', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'a235a8a7277de2e9d1c6db6b395674b00e3bf278', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h(prefixedTagNames.tdsIcon, { key: 'b1252b30f2a18611c897c2f031babec979949fe1', name: "chevron_left", size: "20px" })), h("slot", { key: 'e7123725b3d0633ffe0d2e7adf54e5e32a5468f2', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b3f17859e2612fdf8372e3ca41cf626ee9602d4a', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h(prefixedTagNames.tdsIcon, { key: '89c0cafa8d776336d3f79515eeda89155a1cb06c', 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: 'fa440271f692e4893d4374ccd081308b5b4623e5', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '434fba65da78ac84c018252c52440d20984ab7b3', class: "wrapper", ref: (el) => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '3fc213fbbd4aca3a8cf174c54bbd3bc5592081d8', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '2ea4a81415f97413972248073d3662b8570556d8', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '29d8d76a06c82f06b1c2aa15a3d023d238b05f10', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '1936dee5d3476a0d2c46b4d64a7a26848320c9d7', name: "chevron_left", size: "20px" })), h("slot", { key: '9e4cffce9188a7d517636e4b32ef8574a8bea78a', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '3af05aee3183425bdcd5c2f5f65f0c8920ba8622', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '075726ba4074a4e9452248115968d3b21104e929', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '755cb2e82df972679f60bd970a8c109b598102c3', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h(prefixedTagNames.tdsIcon, { key: '464442e41ffb43d78fb43addea3f889021399f42', name: "chevron_left", size: "20px" })), h("slot", { key: 'b9f6b22e2b3aee60c722f164b0604e06b27eff63', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'a8ba2569f8c6fa3368a32567cde0203489ac393d', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h(prefixedTagNames.tdsIcon, { key: 'afd428866b64952394eec13bd378da3ed5424a3f', 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.css

@@ -349,8 +349,8 @@
   margin: 0 0 0 14px;
   color: var(--tds-text-field-ps-color);
 }
-.text-field-slot-wrap-prefix::slotted(:not(tds-icon)),
-.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
+.text-field-slot-wrap-prefix::slotted(:not(.tds-icon__icon)),
+.text-field-slot-wrap-suffix::slotted(:not(.tds-icon__icon)) {
   margin: 0 0 0 2px;
 }
 .text-field-slot-wrap-prefix.text-field-error,
@@ -361,6 +361,6 @@
 .text-field-slot-wrap-suffix {
   margin: 0 14px 0 0;
 }
-.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
+.text-field-slot-wrap-suffix::slotted(:not(.tds-icon__icon)) {
   margin: 0 2px 0 0;
 }

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.
@@ -48,7 +49,8 @@ export class TdsTextField {
         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,
@@ -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: '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',
@@ -80,13 +82,13 @@ export class TdsTextField {
                 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))))));
     }
     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: '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' : ''}
@@ -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: '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);
                 }
@@ -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: '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))));
     }
     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.css

@@ -15,25 +15,25 @@
 :host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .wrapper.information tds-icon {
+:host .wrapper.information .icon {
   color: var(--tds-information);
 }
 :host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .wrapper.success tds-icon {
+:host .wrapper.success .icon {
   color: var(--tds-positive);
 }
 :host .wrapper.error {
   border-left: 4px solid var(--tds-negative);
 }
-:host .wrapper.error tds-icon {
+:host .wrapper.error .icon {
   color: var(--tds-negative);
 }
 :host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .wrapper.warning tds-icon {
+:host .wrapper.warning .icon {
   color: var(--tds-warning);
 }
 :host .wrapper button.close {
@@ -53,11 +53,11 @@
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host .wrapper button.close tds-icon {
+:host .wrapper button.close .icon {
   color: var(--tds-toast-dissmiss-color);
   padding: 0;
 }
-:host tds-icon {
+:host .icon {
   padding: 14px 0 0 12px;
 }
 :host .content {

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.
@@ -58,12 +59,14 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '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" }))))));
     }
     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: '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,
@@ -60,7 +62,7 @@ export class TdsTooltip {
                 this.show = true;
             }, onInternalTdsClose: () => {
                 this.show = false;
-            } }), this.text, h("slot", { key: '579448ad9309452a0be5aedb906da8059f56b122' }))));
+            } }), this.text, h("slot", { key: '12f1e8a295ddc16111dc9e01353ffb431da50e59' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/findClosestComponent.js

@@ -0,0 +1,9 @@
+import { getPrefixedTagNames } from "./tagName";
+/**
+ * Checks if the given host element is within a specific component based on the component's tag name.
+ *
+ * @param {HTMLElement} host - The element to check.
+ * @param {keyof PrefixedTagNames} component - The tag name of the component to check against.
+ * @returns {HTMLElement | null} The closest ancestor element that matches the component's tag name, or null if not found.
+ */
+export const findClosestComponent = (host, component) => host.closest(getPrefixedTagNames(host)[component]);

package/dist/collection/utils/getDirectChildHTMLElementOfKind.js

@@ -0,0 +1,6 @@
+import { getPrefixedTagNames, paramCaseToCamelCase, getTagName } from "./tagName";
+export const getDirectChildHTMLElementOfKind = (element, tagName) => {
+    const children = Array.from(element.children);
+    const prefixedElementTagName = getPrefixedTagNames(element)[paramCaseToCamelCase(tagName)];
+    return Array.from(children).filter((el) => getTagName(el) === prefixedElementTagName);
+};

package/dist/collection/utils/tagName.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line import/no-relative-packages
+import { TAG_NAMES } from "./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 [, tagNameWithoutPrefix = ''] = /^(?:[a-z-]+-)?(tds-[a-z-]+)$/.exec(tagName) || [];
+    return (tagNameWithoutPrefix || tagName); // return tagName as fallback for default tags
+};
+class PrefixedTagNamesCache extends Map {
+}
+const PREFIXED_TAG_NAMES_CACHE = new PrefixedTagNamesCache();
+export const getPrefixedTagNames = (host) => {
+    const [, prefix = ''] = /^([a-z-]+)-tds-[a-z-]+$/.exec(getTagName(host)) || [];
+    if (!PREFIXED_TAG_NAMES_CACHE.has(prefix)) {
+        const tagNames = TAG_NAMES.reduce(prefix
+            ? (result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: `${prefix}-${tag}` }))
+            : (result, tag) => (Object.assign(Object.assign({}, result), { [paramCaseToCamelCase(tag)]: tag })), {});
+        PREFIXED_TAG_NAMES_CACHE.set(prefix, tagNames);
+    }
+    return PREFIXED_TAG_NAMES_CACHE.get(prefix);
+};

package/dist/collection/utils/tagNames.js

@@ -0,0 +1,91 @@
+export 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',
+];
+export const INTERNAL_TAG_NAMES = [];

package/dist/components/p-875e2e9c.js

@@ -0,0 +1,12 @@
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
+
+/**
+ * Checks if the given host element is within a specific component based on the component's tag name.
+ *
+ * @param {HTMLElement} host - The element to check.
+ * @param {keyof PrefixedTagNames} component - The tag name of the component to check against.
+ * @returns {HTMLElement | null} The closest ancestor element that matches the component's tag name, or null if not found.
+ */
+const findClosestComponent = (host, component) => host.closest(getPrefixedTagNames(host)[component]);
+
+export { findClosestComponent as f };

package/dist/components/{p-0676aa23.js → p-93414e58.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
-import { d as defineCustomElement$1 } from './p-30de8ac4.js';
+import { g as getPrefixedTagNames } from './p-b33f8162.js';
 
 const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 const TdsHeaderItemStyle0 = headerItemCss;
@@ -28,7 +28,8 @@ const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem exten
      */
     updateSlottedElements() {
         if (this.slotEl) {
-            const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+            const isIconOrSvg = (element) => element.tagName.toLowerCase().endsWith('tds-icon') ||
+                element.tagName.toLowerCase() === 'svg';
             const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
             this.updateSlotted(isIconOrSvg, addIconClass);
             const isImage = (element) => element.tagName.toLowerCase() === 'img';
@@ -42,10 +43,11 @@ const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem exten
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
     }
     render() {
-        return (h(Host, { key: 'd5f256a30d131817e23f428b87a3604e2a299ad6' }, h("tds-core-header-item", { key: 'd2dc6486839af96bbd10938bf9e03ff50123da4f', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'd1c94674e28c6a6cf9a9af92db727502b1651925', class: "tds-header__item" }, h(prefixedTagNames.tdsCoreHeaderItem, { key: '9a87862220bc119fc9317dca058695bd51c3d454', class: {
                 'component-active': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'a89a44221fe947e4075e6889ed3e3cf8478f6e96' }))));
+            } }, h("slot", { key: '56fc833b48a34bb114676824139ecac3d0402a43' }))));
     }
     get host() { return this; }
     static get style() { return TdsHeaderItemStyle0; }
@@ -57,18 +59,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["tds-header-item", "tds-core-header-item"];
+    const components = ["tds-header-item"];
     components.forEach(tagName => { switch (tagName) {
         case "tds-header-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, TdsHeaderItem);
             }
             break;
-        case "tds-core-header-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
     } });
 }
 defineCustomElement();