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

package/dist/collection/components/card/card.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot header - Slot for the Card header.
  * @slot subheader - Slot for the Card subheader.
@@ -22,11 +23,11 @@ export class TdsCard {
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
             return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
         };
-        this.getCardContent = () => {
+        this.getCardContent = (prefixedTagNames) => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h(prefixedTagNames.tdsDivider, null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -36,14 +37,16 @@ export class TdsCard {
         this.bodyImgAlt = undefined;
         this.bodyDivider = false;
         this.clickable = false;
+        this.stretch = false;
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '485eb954899e2f559dfa9c231d275c1cecd7791f', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'e80744e65ac066b5c6a13f79cdaf9ed645f8a8fb', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
                 if (this.clickable) {
                     this.handleClick();
                 }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
+            } }, this.getCardContent(prefixedTagNames))) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent(prefixedTagNames)))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -199,6 +202,24 @@ export class TdsCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "stretch",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "cardId": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/datetime/datetime.js

@@ -1,4 +1,5 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../utils/tagName";
 export class TdsDatetime {
     constructor() {
         this.getDefaultValue = () => {
@@ -73,6 +74,7 @@ export class TdsDatetime {
         this.tdsBlur.emit(e);
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         let className = ' tds-datetime-input';
         if (this.size === 'md') {
             className += `${className}-md`;
@@ -80,7 +82,7 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: 'bbf891d5e12a402775f253dc7010aa57ac0aa3b2', class: `
+        return (h("div", { key: 'ff9559a2dcde10aa0ab9f7b246bc9a211ae14336', class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -90,7 +92,7 @@ export class TdsDatetime {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '5d82dd3550ec13ee724f27ed351c825a68fef879', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '6c33d37db85b9d2456bf798b5ebc3511278ed20c', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '8180010cb4c1a486ca0ad38cf5e071dc2c3cdf8e', class: "tds-datetime-input-container" }, h("input", { key: '57ebc684980064f0e80c2098f6b4ecce43c51043', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '201c1a161d7a432c25fe950f1b0ab89b39661007', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '5d1d5507b58eefedbd4bb547749850649d73279b', size: "20px", name: "calendar" })), h("div", { key: '627fcb60cefc9652cd30234f300e77c5abd36934', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e44e6fc4e7eaf8979ecfcc69d57c36fd00bde8b6', size: "20px", name: "clock" }))), h("div", { key: 'c167492c99eb44ab832b70d9a814455c54a5135b', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '67a91d166c2ef9653518add8f16d2d850dd1b4cf', class: "tds-datetime-helper" }, h("div", { key: '1dc9e8119c99d15a0f72cdf8320982e2edbe34d7', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'fec21bee110bd7a4e83bf44b23961713d5d63511', name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '5f4eb55e9130b1225c5bee79dee4e001c687ccb9', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '1421e6bd3e6fb90a15fd91accafa87c4ab7c3d35', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: 'a4043f0231f57f17c8d32ca57c34c74e9589cd81', class: "tds-datetime-input-container" }, h("input", { key: '4dea136537509b8f860665c1f25cfceedafba168', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '0de5760735617eee28368f4e6dc15d2cfd664172', class: "datetime-icon icon-datetime-local" }, h(prefixedTagNames.tdsIcon, { key: 'f0904a047029c721c744fb3d7a98adcb78be1dd5', size: "20px", name: "calendar" })), h("div", { key: '94f559661570e3de4495cbe029b50e96f5ad650a', class: "datetime-icon icon-time" }, h(prefixedTagNames.tdsIcon, { key: '37847e302e89774a85e0349a8ab401d6ba92d305', size: "20px", name: "clock" }))), h("div", { key: 'c7f0964c0131b312334089d541f3ce1d82ebbf6a', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '670fb70fe2720a204881ea82892fab68d64e1f82', class: "tds-datetime-helper" }, h("div", { key: 'de655e36ffb7f5a7d97a75e1d4325041a2d179cd', class: "tds-helper" }, this.state === 'error' && (h(prefixedTagNames.tdsIcon, { key: '45fc7fd21f32a9cf56d703822b4dbe6afe1c0f2f', name: "error", size: "16px" })), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -465,6 +467,7 @@ export class TdsDatetime {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
                 "name": "focus",

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -1,4 +1,5 @@
 import { Host, h, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
@@ -62,7 +63,8 @@ export class TdsDropdownOption {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '0c0253f02e12d0eb7924969b2d347ab2005d0772', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'ad79763807bb52a3e242989f676a03e85804fc62', class: `dropdown-option 
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '7718cac4b266a8a6e093badf7d6ddb3a3e74fa21', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c28693ad8721d53cd9da2147058354ccebc8aa07', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -70,13 +72,13 @@ export class TdsDropdownOption {
                 if (event.key === 'Escape') {
                     this.parentElement.close();
                 }
-            } }, h("tds-checkbox", { onTdsChange: (event) => {
+            } }, h(prefixedTagNames.tdsCheckbox, { onTdsChange: (event) => {
                 this.handleMultiselect(event);
             }, disabled: this.disabled, checked: this.selected, class: {
                 [this.size]: true,
             } }, h("div", { slot: "label" }, h("slot", null))))) : (h("button", { onClick: () => {
                 this.handleSingleSelect();
-            }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && h("tds-icon", { name: "tick", size: "16px" })))))));
+            }, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), disabled: this.disabled, class: this.size }, h("div", { class: "single-select" }, h("slot", null), this.selected && (h(prefixedTagNames.tdsIcon, { name: "tick", size: "16px" }))))))));
     }
     static get is() { return "tds-dropdown-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import findNextFocusableElement from "../../utils/findNextFocusableElement";
 import findPreviousFocusableElement from "../../utils/findPreviousFocusableElement";
 import appendHiddenInput from "../../utils/appendHiddenInput";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
  */
@@ -341,8 +342,9 @@ export class TdsDropdown {
     }
     render() {
         var _a, _b, _c, _d;
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '62778591bba0279591717580456056657bb96e44', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd511a016571d4aa5b1b6db2e183356612c354a0b', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e9a1f512fc81191d66918f967bc90cff26f13080', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '4c1cf54198f6f00501c337e858ea391272a551e2', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'aa66572284cfbeb78b2b26edf17aad3ecc9a3c43', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '114d2d6580dee9739620212079d6e516dacca31e', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -365,11 +367,11 @@ export class TdsDropdown {
                     this.open = false;
                 }
             }
-        })), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
+        })), h(prefixedTagNames.tdsIcon, { tabIndex: 0, role: "button", "aria-label": "Clear filter", svgTitle: "Clear filter", onClick: this.handleFilterReset, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleFilterReset();
                 }
-            }, class: `clear-icon ${this.open && this.inputElement.value !== '' ? '' : 'hide'}`, name: "cross", size: "16px" }), h("tds-icon", { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
+            }, class: `clear-icon ${this.open && this.inputElement.value !== '' ? '' : 'hide'}`, name: "cross", size: "16px" }), h(prefixedTagNames.tdsIcon, { tabIndex: 0, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
@@ -385,11 +387,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '33d624c7a3669842e5f3c10fff22182185a81eb6', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h(prefixedTagNames.tdsIcon, { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '7087e043f7f55ed270cf75405a04ed930c0117de', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'f65db159240901a2df850c299d926fe2b21d48df', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'a1f2a9b42feea0ca9a332c4ec765b2053a186637', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '173ddb47f30e6901198a58221c274ddf4502cf15', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'f68ef6f14584bca3c932655be7e63451aac3863e', name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'b9ca939c2e58a69f66011f812023b03315c5e631', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'd0f2de1b2a6f5a37224ba77a47e746b7892291b6', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '86aad799a3ba5950d8df21a3e485f645fd039ffd', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && (h(prefixedTagNames.tdsIcon, { key: '9b51e3ffc96dbd1c39f8b8358df8808a447167e3', name: "error", size: "16px" })), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For footer items.
  */
@@ -19,11 +20,12 @@ export class TdsFooterGroup {
         }
     }
     render() {
-        return (h(Host, { key: 'b704a9cdc581f94a4680793bccc4da44496fe328' }, this.titleText && this.topPartGroup && (h("div", { key: '630d91ff93d0eeb6c0bc603d9255059bad3b8d33', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { key: '2a424b0f61fb06b14ae9bb9a611b5264e0854111', onClick: () => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'e11ef7d9a8aec368d66af7b0cabe26dc902c85a7' }, this.titleText && this.topPartGroup && (h("div", { key: '3e2501b462125c822ae2c88ff730a55c0aad8260', class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { key: '52daf369f035175fc48ee9199b0f1e7036e7c463', onClick: () => {
                 this.open = !this.open;
-            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { key: 'ea2d3d26b0c70d6346b71d98753a6e13bf074351', name: "chevron_down", size: "20px" }))), h("div", { key: '400c3cf5f39e59fa60f26cba45df02ad8b5da063', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h(prefixedTagNames.tdsIcon, { key: '3eb5fa8014c2715c55da365a58956580d1ae0409', name: "chevron_down", size: "20px" }))), h("div", { key: 'fed9169cb09fc437108cdebfaeeccec8574c6040', role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
             ${this.topPartGroup ? 'top-part-child' : ''}
-            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '38241a0f3b5a343f5074b113168ba97465f7c209' }))));
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", { key: '30f371244d9019e299e3e1cc0ae515d1e36a5b9b' }))));
     }
     static get is() { return "tds-footer-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js

@@ -1,10 +1,12 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link.
  */
 export class TdsHeaderBrandSymbol {
     render() {
-        return (h(Host, { key: '9b3b472651a6d410b143316851ca701eab5a82c3' }, h("tds-header-item", { key: '843bc3ce81ae39261a7eb4429ed4d9d76f051cfb' }, h("slot", { key: 'd3a939ac410d229c78532c133e54b868507f7aff' }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '6f237ddae88d1a8c47da6517e69c8a46bde26b2b' }, h(prefixedTagNames.tdsHeaderItem, { key: '9e2eedf7f479dbff34d1e43008d1b3a524431567' }, h("slot", { key: '7d3349600bac83de2347ca11d10434826e24f213' }))));
     }
     static get is() { return "tds-header-brand-symbol"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import generateUniqueId from "../../../utils/generateUniqueId";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.
@@ -31,13 +32,14 @@ export class TdsHeaderDropdown {
         this.open = !this.open;
     }
     render() {
-        return (h(Host, { key: '73a8e824b891f66806fad583470460a30af641de' }, h("div", { key: '81e78a9f21b152ae4698ec6f693ead79eb40f936', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '7e2cd60291832d0b78a7bb314f28c7bca0741ff5' }, h("div", { key: '5c7aa66e35135d792e7e17983913057bacae0a81', class: {
                 'state-open': this.open,
-            } }, h("tds-header-item", { key: 'aab78709417d1fd623c9a9969246434d78bcc055', class: "button", active: this.open, selected: this.selected }, h("button", { key: 'dff4234a39520177ba3cc058511144431facb944', ref: (el) => {
+            } }, h(prefixedTagNames.tdsHeaderItem, { key: '074a2bcc6b24729de6725022b249c7a77e3d2e3f', class: "button", active: this.open, selected: this.selected }, h("button", { key: '60b484244a06d6fff7df7fbfec57276acfc0deae', ref: (el) => {
                 this.buttonEl = el;
             }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
                 this.toggleDropdown();
-            } }, h("slot", { key: 'ec32e95833f0bc4a93a18c0058c7bea979cde638', name: "icon" }), this.label, h("slot", { key: 'ab077d925ecbc941446bb9f1f6755dccae26e0ae', name: "label" }), !this.noDropdownIcon && (h("tds-icon", { key: 'eb45d913a11433c12e5add804c88fd7c33e343ea', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { key: 'bc15799eeb488984d58abe21cfc27ba695a395a0', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h("slot", { key: 'b2a7281717686f186aeb9ccba55854362e4fad65', name: "icon" }), this.label, h("slot", { key: '6f9684dc01fe44c3a0e88f98ab276c6cc610b8cf', name: "label" }), !this.noDropdownIcon && (h(prefixedTagNames.tdsIcon, { key: 'e8a4ae7c78551f0578dbc0f97866d06a3efcce1e', class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h(prefixedTagNames.tdsPopoverCanvas, { key: '4cc743cd081481ed5558a2bfbc92048d25563e94', id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

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

@@ -1,9 +1,11 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 export class TdsHeaderHamburger {
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-        return (h(Host, { key: 'fa81c06234538414f64c983239c34b7a32184d35' }, h("tds-header-item", { key: '5c1168413c62c9f51df5d15bc4b1c12f971cf2f8' }, h("button", Object.assign({ key: 'e2225a6e50590b6b25d282737e2198cbd6bf1458' }, inheritedButtonProps), h("tds-icon", { key: '5659662f934a61c57b981a24e27cc4e25247cbf7', class: "icon", name: "burger", size: "20px" })))));
+        return (h(Host, { key: 'b44b763cd492848f49ffb03f20a84479bbf4dc6f' }, h(prefixedTagNames.tdsHeaderItem, { key: '2e545cec7a232a21184f01f0b6b03e411131f0c4' }, h("button", Object.assign({ key: '650633e93ff94d94a79662b13217cea3aaa8ea22' }, inheritedButtonProps), h(prefixedTagNames.tdsIcon, { key: '25ddaf1f48ae43f45040059fafd465de64a71a1f', class: "icon", name: "burger", size: "20px" })))));
     }
     static get is() { return "tds-header-hamburger"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import dfs from "../../../utils/dfs";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
  */
@@ -37,10 +38,11 @@ export class TdsHeaderItem {
         this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
     }
     render() {
-        return (h(Host, { key: 'd5f256a30d131817e23f428b87a3604e2a299ad6' }, h("tds-core-header-item", { key: 'd2dc6486839af96bbd10938bf9e03ff50123da4f', class: {
-                'component-active': this.active,
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '53e959002a5dd092b8a21b1746f2677b9e8f1bf6' }, h(prefixedTagNames.tdsCoreHeaderItem, { key: '32993eb9fd4c7ccfa0dc0a9af898ebd082e39ecd', class: {
+                'component-active and-other': this.active,
                 'component-selected': this.selected,
-            } }, h("slot", { key: 'a89a44221fe947e4075e6889ed3e3cf8478f6e96' }))));
+            } }, h("slot", { key: '3bbed91129ca0fe39e5edd287407b44d35e1f6d9' }))));
     }
     static get is() { return "tds-header-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import generateUniqueId from "../../../utils/generateUniqueId";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
  */
@@ -26,17 +27,18 @@ export class TdsHeaderLauncher {
         this.open = !this.open;
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
         const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
                 this.toggleLauncher();
             }, 'ref': (el) => {
                 this.buttonEl = el;
             } });
-        return (h(Host, { key: '28c3cec9d319219a00783f0743fc7e035b9b63f5' }, h("div", { key: 'a4372783a69578e1965bb14b2b3ad12e2752c472', class: {
+        return (h(Host, { key: '676852dc130a6ac9500239445c8eefc244aba92d' }, h("div", { key: '320336c1b9f9d4e152b4d0977caffaa0a212ec90', class: {
                 'wrapper': true,
                 'state-open': this.open,
                 'state-list-type-menu': this.hasListTypeMenu,
-            } }, h("tds-header-launcher-button", Object.assign({ key: 'cad014a13dcd193c0b829033d600c07a342a78cc' }, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { key: '64c9c7e77f6e6825bd0ace40543e10c1444cb290', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+            } }, h(prefixedTagNames.tdsHeaderLauncherButton, Object.assign({ key: 'e342ef3f5bc23a694186c1c729cef676dc8c7f1e' }, buttonAttributes)), this.buttonEl && (h(prefixedTagNames.tdsPopoverCanvas, { key: '3c49f19fcca97529596140f707625b3192ec7758', id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
                 {
                     name: 'flip',
                     options: {

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -1,13 +1,15 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 export class TdsHeaderLauncherButton {
     constructor() {
         this.active = false;
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
         const buttonProps = Object.assign({}, this.ariaAttributes);
-        return (h(Host, { key: 'ee714e05a3585542850f433cd81ed25d95a14070' }, h("tds-header-item", { key: '0a7c7b20fa872c1ccd4e0760b9f68743ec6c761f', active: this.active }, h("button", Object.assign({ key: '1b0c93c04e5206dc47fe3df3a158e16ed624f8e1' }, buttonProps), h("tds-icon", { key: '11a961f7e11d741108a450ef1a2fa1b22f5520a8', class: "icon", name: "bento", size: "20px" })))));
+        return (h(Host, { key: '7b3cdd607d43179c06df73f9c1e93cc8a3d34110' }, h(prefixedTagNames.tdsHeaderItem, { key: '34947ba38eb0a041e98ad33ee3d9f3eb23d09d80', active: this.active }, h("button", Object.assign({ key: 'a54b553fc4da95d6655a1a508c61e9effb87e804' }, buttonProps), h(prefixedTagNames.tdsIcon, { key: 'bcbb1a11a47b1d278b46456fdc08e79aff248de6', class: "icon", name: "bento", size: "20px" })))));
     }
     static get is() { return "tds-header-launcher-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-list/header-launcher-list.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import generateUniqueId from "../../../utils/generateUniqueId";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For list items.
  */
@@ -8,7 +9,9 @@ export class TdsHeaderLauncherList {
         this.uuid = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: '3e4fe30a4ec6234898314d838831ffccdaf37ccf' }, h("tds-header-dropdown-list", { key: '0a3926403b5800b45433edd035f700a6778bbc2b', size: "lg" }, h("slot", { key: 'bcbe4495b9f136b07a5c3c1e7062ec116707a5e4' }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '181fea64b9b0c467cc3f87284a35bcd4f3744bfe' }, h(prefixedTagNames.tdsHeaderDropdownList, { key: 'fa756f0269c590d9d56741a4e5c79f0f2e276144', size: "lg" }, h("slot", { key: 'c7e198458ec21f602d432485d84e72af3b16e26b' }))));
     }
     static get is() { return "tds-header-launcher-list"; }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.js

@@ -1,10 +1,12 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
  */
 export class TdsHeaderLauncherListItem {
     render() {
-        return (h(Host, { key: '1b2afd6810710416ac4362d00af34f2ec889ea1f' }, h("tds-header-dropdown-list-item", { key: '860b07b16c713c8a74e7443c452263e054c6aebd', size: "lg" }, h("slot", { key: '521f412cd86ae413537bca6821f9c95bce075f63' }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'dc91e95bff5fc5a24a7888e8ea1c09d9f6ddd381' }, h(prefixedTagNames.tdsHeaderDropdownListItem, { key: '25c61bb9c8600a30fad53b1265f8b3608aaa510c', size: "lg" }, h("slot", { key: '02c4962deca0829a70e9a6d8dbd9a26d4a721933' }))));
     }
     static get is() { return "tds-header-launcher-list-item"; }
     static get encapsulation() { return "shadow"; }
@@ -18,4 +20,5 @@ export class TdsHeaderLauncherListItem {
             "$": ["header-launcher-list-item.css"]
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/message/message.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
  */
@@ -25,10 +26,11 @@ export class TdsMessage {
         this.minimal = false;
     }
     render() {
-        return (h(Host, { key: 'b270c0935bf7eb09d16df32854c5a9411a78fba9' }, h("div", { key: '668d8a6a940ce0f972c2398d063640b38e307219', class: `
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '388273d2a33152931a10fa1a26b2de908392aff6' }, h("div", { key: '65f066f605a1cc7efe87ead5375b8f556476deef', class: `
         wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { key: 'bfa6b4c85c649cd3cff00eb121ba9df08b02d65f', name: this.getIconName(), size: "20px" }), h("div", { key: '4239603ea7d58ed79ea6bb4cf212d4405204b2a6', class: `content` }, this.header && h("div", { key: '5c8ad00a65d6310a86a353580e98e45b056c9a96', class: "header" }, this.header), !this.minimal && (h("div", { key: 'd0087a45aa622374dfcc1b6d791a82b0c14b64cf', class: "extended-message" }, h("slot", { key: '8fdfd7079bc6473ea8d8eff72874827f3f9bcae1' })))))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && (h(prefixedTagNames.tdsIcon, { key: '291a17b2822d1d2ac9e6781d5097038ca29ef7d2', name: this.getIconName(), size: "20px" })), h("div", { key: '215381c9cfce537513900866d4f770218bf31662', class: `content` }, this.header && h("div", { key: 'c11eb4ca87b49fb7ddf98f6b5d0f8f1d56429b9d', class: "header" }, this.header), !this.minimal && (h("div", { key: '27e69500df32197323fc1e05bebb819be2f882e4', class: "extended-message" }, h("slot", { key: 'd50e21441cf16f1457072a933e8459c16170f3aa' })))))));
     }
     static get is() { return "tds-message"; }
     static get encapsulation() { return "shadow"; }
@@ -135,4 +137,5 @@ export class TdsMessage {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }

package/dist/collection/components/modal/modal.js

@@ -1,5 +1,6 @@
 import { h, Host, } from "@stencil/core";
 import hasSlot from "../../utils/hasSlot";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot header - Slot for header text
  * @slot body - Slot for main content of modal
@@ -110,9 +111,10 @@ export class TdsModal {
         });
     }
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'c39328a5796996173d2a484b7b509d03524cb2d6', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'f270ed2ab8f671418d5196cda7d4085d6fa69d02', class: "tds-modal-backdrop" }), h("div", { key: '8d4670500365548f786a3c6200f9395998198ac0', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '27a05c42f14827b74b560e1f0b23286c851ff676', class: "header" }, this.header && h("div", { key: 'dadbb997eec4b06e6a64a7cdc800603653053862', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '07beeba1aea6030fd1c9f2c0aac132828e28a481', name: "header" }), this.closable && (h("button", { key: 'e2c25399c520409e8d98345d715a9ea9a4ddfb14', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'd74d288daea98783e8f4649e0320ce1f9e3b68d0', name: "cross", size: "20px" })))), h("div", { key: '594f17d9eba2cb2ec6ffc7382669caba1f5f525a', class: "body" }, h("slot", { key: 'dcdaede2986c40a927a74608bed7145696871962', name: "body" })), usesActionsSlot && h("slot", { key: 'e0403d1f1201833742925ae8cbb599c2d9ba7b94', name: "actions" }))));
+        return (h(Host, { key: 'c132c58c8fad8644529d3da69c24b0ab2adf9df1', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '7f68b5d68ec5fd68236df07fee40ec54ef5e3728', class: "tds-modal-backdrop" }), h("div", { key: '6a6b336f9e3f79953605351b124f672e42d88147', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '826344b73843c905780a54c60e12c083c910dd5c', class: "header" }, this.header && h("div", { key: '5e9deedca44877bd6d0440996e73b683cda520eb', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '3c0dd4c3fdd4975dcaa43144e93ec9b5c044656c', name: "header" }), this.closable && (h("button", { key: '90861404b8b329b34827138bf4221ebe29737e82', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h(prefixedTagNames.tdsIcon, { key: '563e956985492fc9f5c16b374f60c979bf746c62', name: "cross", size: "20px" })))), h("div", { key: 'aeb5db11812c6e1f6723ed12c1d3c8ea8efbe33e', class: "body" }, h("slot", { key: '7214799883b11d5b4b2f45ebafd6cd6b69b9f896', name: "body" })), usesActionsSlot && h("slot", { key: '0e93478772268d86115d4f6f0bfa6c62b52040f7', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import inheritAttributes from "../../utils/inheritAttributes";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
  */
@@ -25,12 +26,13 @@ export class TdsPopoverCanvas {
     }
     render() {
         var _a;
-        return (h(Host, { key: '6585164269ddef7083e5aed2bcfa4ea5ab7d32ba' }, h("tds-popover-core", Object.assign({ key: '9470ac2faa94611ece2c9394717a7bb9d63eb5b1' }, this.inheritedAttributes, { class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '20f9ec1ff4aa412411f04c1448ab218846b3daff' }, h(prefixedTagNames.tdsPopoverCore, Object.assign({ key: 'c40d4551a718074f8c1508ac37c92e757c550c06' }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            } }), h("div", { key: '330a63a0ef5c9f057d877dae9977b8bc25987771' }, h("slot", { key: '38787385e51260e4a140f83d5eb22f03deb6e30e' })))));
+            } }), h("div", { key: '64101f87fa1f0d22962ddcc1337dafedd3dbd454' }, h("slot", { key: '4c0a7a20eece3cb14465d599821ff0467672476d' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import inheritAttributes from "../../utils/inheritAttributes";
+import { getPrefixedTagNames } from "../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
  */
@@ -25,13 +26,14 @@ export class TdsPopoverMenu {
     }
     render() {
         var _a;
-        return (h(Host, { key: '36c12148ce4507dd4b157fff5be30760d2374bdd' }, h("tds-popover-core", { key: '92d5abfd7e7213dcb22c92fa401a21dfeef76edd', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '175101f0b9f5df56fa56a2a15d43468d5065129a' }, h(prefixedTagNames.tdsPopoverCore, { key: '91613f80d57750fe7f1a5957e5b3c359708f85b2', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            } }, h("div", { key: '6b3a893d1d0a9c32a3846c7216a4fdac92a4222c', role: "list" }, h("slot", { key: 'cae075f5e187b5f59638f6f2a9ff8c38e716bcbb' })))));
+            } }, h("div", { key: 'a5ee1d312e2608e134924e584f0c7b81a79b7401', role: "list" }, h("slot", { key: '27ca85a642e2ca45a36522d1917ba01042c5f347' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -1,9 +1,11 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 export class TdsSideMenuCloseButton {
     render() {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
         const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
-        return (h(Host, { key: '1dff25b895f341657373ab020116e5c4c0f7af67' }, h("button", Object.assign({ key: 'e2c3af974cfc7f9c9e0ec5b64c199fcda0408279' }, buttonProps), h("tds-icon", { key: 'aa56689766fe0c49e8d8d591c9f741a24dd85cc8', name: "cross", size: "20px" }))));
+        return (h(Host, { key: 'b8d9efa8e96a192966ead2a13898665f82b3fc2d' }, h("button", Object.assign({ key: '39f2161c9d6330bb9d0ca2245b2e6b63622fd9a6' }, buttonProps), h(prefixedTagNames.tdsIcon, { key: 'a3e98760aef2bf5bced8a96cae2e01067ab5a61c', name: "cross", size: "20px" }))));
     }
     static get is() { return "tds-side-menu-close-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default>  - <b>Unnamed slot.</b> For the text label of the button.
  * */
@@ -28,14 +29,15 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (h(Host, { key: '15266cdc6a39373563c89553817e1a6777f01f1c', role: "button", tabindex: "0", onClick: () => {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '716bdffd158c839bca8c35073866d5c8983277c1', role: "button", tabindex: "0", onClick: () => {
                 this.handleClick();
-            } }, h("div", { key: '813da1c78798289b4eed8342b6c00a837ae04b24', class: {
+            } }, h("div", { key: 'e8d943133fdbc74d31e8e2f824ae7b2a47426f9d', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '44321406d890c741fff0ad1df9576588a6658ea5', class: {
+            } }, h(prefixedTagNames.tdsSideMenuItem, { key: '13be747559758d11dba4a5a8be20762385155b86', class: {
                 button: true,
-            } }, h("a", { key: '7e214b15daa5dac9df931a5d15f6ed80a52b5f7d' }, h("svg", { key: '61928c3ba4c6e2357a426f0c0ca1a0de86365b6a', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5cbbfe5239506f994a0b17f11cae1ded3c1f643e', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'b63370f60320b46557e7d40cfad048e29c60109f' }))))));
+            } }, h("a", { key: '2660af6cc804011bcbd9838b00949001002170c4' }, h("svg", { key: '10bfa3c93ab0ca8f0dc7fc5a84198bf37dc4f968', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5f77a44d3c22512f93d8c1bbcca0f650594c8be7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: '0bb583b4f58f7933a55d515636b524ceb2ccb891' }))))));
     }
     static get is() { return "tds-side-menu-collapse-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -1,4 +1,5 @@
 import { Fragment, h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot icon - Used for injecting the icon that compliments the dropdown title
  * @slot label - Used for injecting the text, aka dropdown title
@@ -50,13 +51,14 @@ export class TdsSideMenuDropdown {
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '1bad48953f08e903e9179dae839c93b249f93266' }, h("div", { key: '7e8020738796fb8c449f76a3d1aef801151e4e63', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'd61a2cd774e95646ec3f0c00a13404907cedecf1' }, h("div", { key: 'ab794f2a74f5d43d4f80ff84ac6a89abd4d8751d', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: 'e4420aba88077e36b1cc7cd10958459d79a463f4', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h(prefixedTagNames.tdsSideMenuItem, { key: 'e6b558615f822a452d63f174e1c83c80e4c07558', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, h("button", { key: '483ac0b103bf54f63c67cf2d78ed9e82703ba331' }, h("slot", { key: 'ec027d3c88569c79d0dde6c51f8dc1056dee6284', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f71caa474565871d170653153c8daa7ddead5f17' }, this.buttonLabel, h("slot", { key: '487db682801ce910cd65dc6d3ef481bff888574e', name: "label" }), h("tds-icon", { key: 'dc75ac7be7eedf85fec97cd3fdbbf786cebe8907', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: 'e321069727d205d0623cd72fb922c3101f9d2e08', class: "menu" }, this.collapsed && (h("h3", { key: '7d5a73c051a700f0568d63ae62ce2737cdb57dd8', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '9c831576869cac930e8fe9edcbfc86dfede01a47', name: "label" }))), h("slot", { key: '7db68bb3f46cdc24fa44c375f0d6bec82c317be4' })))));
+            } }, h("button", { key: 'b9c9f561847d6b48ce83807fadc07192a42b11e3' }, h("slot", { key: 'e0ecb003ae2d04f0c7f01b357ab831ac2eb68d03', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'f9fc33e944f4b56f86c7495084d32091d61fafa5' }, this.buttonLabel, h("slot", { key: 'c5494b6dd481897c452c8e45e21f35d0260f8703', name: "label" }), h(prefixedTagNames.tdsIcon, { key: '1a11f0ed9d78d15d4e68667ed79353af6a6255c9', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: '75ef7b1e15e926813dabd29cb6f68b17774bbf4d', class: "menu" }, this.collapsed && (h("h3", { key: '89a41eed8483f37deb9391293584e93959d03532', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '1c0cbdd49a1226ee5311a733ab24064ee3032604', name: "label" }))), h("slot", { key: '5850c21ffe901c0e8ed848d21106ff63653dce0a' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-user/side-menu-user.js

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 /**
  * @slot <default> - <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
  * */
@@ -10,7 +11,8 @@ export class TdsSideMenuUser {
         this.imgAlt = undefined;
     }
     render() {
-        return (h(Host, { key: '061364f66ad366cbfb421fa0609020564bd36e83' }, h("tds-side-menu-user-image", { key: '01ae0ecb3a011a6a8f50566dc5b683fb56f8d387', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '5265cabfa2a7533f7e6c8a9a47b1691f8991d3f0', name: "image" })), h("tds-side-menu-user-label", { key: '525ac1f1593b048c266733e24d5dd3f5632ce197', heading: this.heading, subheading: this.subheading })));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '378797df81d1a0cdec4a7ad12813dcd2d57a8017' }, h(prefixedTagNames.tdsSideMenuUserImage, { key: 'faa47521346c55bfa10d27c2aabd9a9224ec1f88', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '0863342a90fb83e8afc04d763181532c65f86060', name: "image" })), h(prefixedTagNames.tdsSideMenuUserLabel, { key: '7f5782f7a00fa2741d24f4d371da8f48e76b8267', heading: this.heading, subheading: this.subheading })));
     }
     static get is() { return "tds-side-menu-user"; }
     static get encapsulation() { return "shadow"; }
@@ -96,4 +98,5 @@ export class TdsSideMenuUser {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }