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

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"; }
 }

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

@@ -163,7 +163,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -187,7 +187,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -211,7 +211,7 @@ export class TdsSideMenu {
                     "references": {
                         "InternalTdsSideMenuPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
                         }
                     }

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,6 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
+import { getPrefixedTagNames } from "../../utils/tagName";
 export class TdsSlider {
     constructor() {
         this.wrapperElement = null;
@@ -291,24 +292,25 @@ export class TdsSlider {
         this.updateTrack();
     }
     render() {
-        return (h("div", { key: '943840a77d7cb7f6c394bc2fcd25b36e9a6b5369', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h("div", { key: 'd676666417f2124dd55ca83f8d8823b47dca5275', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: '9f009acc794cfdf37f7a459ae00defc447949436', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: 'e23f338ee45c0416c02568be5ef538708c71a3c2', class: {
+            } }, h("input", { key: '1cb6a822d82f5bfd0234dbc20cf46ee178ef4f3f', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '25ee1da1072d4081404310fefcf6156ac1545bb6', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: '959ee49ec8483ead245abff393c2e89c5c20ee06', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'c1844b647050d9873d0abc95c3a43dc2f2090020', class: "tds-slider__input-values" }, h("div", { key: 'c725f1db4ef669ed6033f9e5b105f6401245263e', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '9b1f41eed1e3df5574d9454e42875e6365d4d200', class: "tds-slider__controls" }, h("div", { key: '0518f6daaead7ac4b4ed4ca177cb592ce3331260', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: 'e82506df9a4dd9073e485da2e4457c26188c4a17', name: "minus", size: "16px" })))), h("div", { key: '212769a9fca717328cfc7e7159bc01f65d5313a2', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '8158e5b300c4085146900ed5b56ef5748852e137', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '57f7c51c9f538fba5083ffdd7b805212a7726ed4', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '8e25f27e20a07410fbf7ac70600e14663fe4cf0a', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '9f613d2362d32772238e4f9cf4cc21333fa610bb', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'ebbcd4682a5563b5781b0aeeeeac2e56f6a79fbd', class: "tds-slider__input-values" }, h("div", { key: '3b0b92b1408f79864825be16dc851b12183bb799', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6d36e25c24c5fe18200f65703a018b92726b3dee', class: "tds-slider__controls" }, h("div", { key: 'fb4de7652d093df433e2be7cc06a7b9a9421ed58', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h(prefixedTagNames.tdsIcon, { key: '6a0f6fd30de791dfe2bcab654a9368707cc5ff4c', name: "minus", size: "16px" })))), h("div", { key: '0a49a454753cae2f4e49bc5cdfe4094201e0f41b', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'c920f993c2bf263ecaea5fa6b3904a34e8b94fe8', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'ed326517f7c3338c88d3314c5848960de2882447', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '5170894e75bd459c9dc5e6010a8312b611c664e8', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'cb48279c9b6b7f91754a0d0504d38977e80d6454', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '55e94d65579e662b3b92a43418524f348ef4c69c', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'e4d05479a9067ee506578b522c56719c006036fc', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'a8129aaa54e8a03f254e8858e98427fa3f99f452', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '6487f63ad6f2ff00cbdd4e1c10bc9d4ec4550137', class: "tds-slider__value" }, this.value, h("svg", { key: '5c89ff40a9ccab1e48d1867a69835206313bf4c1', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd661c16c25e293a54fd6f98989655252e06a5d31', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '977ed57e0a9d115152dd08bdd656c5d6c858d633', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '1d478384f0b6c31d4a2766a3a627cdd4574cd79e', class: "tds-slider__value" }, this.value, h("svg", { key: '343f422c8042eacbb37737913dcfd4e065a03679', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5057f976f09b5f176f2c1489e6ab94aed8dc0472', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '8ed0d33b1b5be47b9e231d88bf2ea9fa8d7a9199', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '026b89aea3e01f0d6621d95260db43ba96834181', class: "tds-slider__input-values" }, h("div", { key: '9c58cc92d072760adbef4fa1c49c2766f48a4a3b', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '7a35238569b9ded1481ea48a868a985426ec4cef', class: "tds-slider__input-field-wrapper" }, h("input", { key: '51ba5b59604cfff6aa6a8bad6c59f3f706a8f3e4', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '4d10cc417985b3ae3739120b508e781e79a315d0', class: "tds-slider__controls" }, h("div", { key: '9a422c72b65fc9888fd472c36a20df99bb4b50f4', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '808969d21cb085de199f1d8af307aa9a412c2b4d', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '17cdc0c35da1c5355edcacec51a84146ba052350', class: "tds-slider__input-values" }, h("div", { key: 'af0f7c10aa16cc44789c827f7eee086fa4abfc70', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '6879810e310ab9f036cd37cd907f704470334cb8', class: "tds-slider__input-field-wrapper" }, h("input", { key: '4ea73453907e378ec31fa2c99517d7ba16af5d5a', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '9afa97d14e9e9b44c0f412462b302d160051161d', class: "tds-slider__controls" }, h("div", { key: 'efd5e7f9b2f3287e5294bebc51739c6b07876ec7', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h(prefixedTagNames.tdsIcon, { key: '5d0fd79876dab01667cf73dcd816a9198e33bd85', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -667,6 +669,7 @@ export class TdsSlider {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/collection/components/stepper/step/step.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const propToStateMap = {
     orientation: 'orientation',
     labelPosition: 'labelPosition',
@@ -19,7 +20,7 @@ export class TdsStep {
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
-        this.stepperEl = this.el.closest('tds-stepper');
+        this.stepperEl = this.host.closest('tds-stepper');
         this.orientation = this.stepperEl.orientation;
         this.labelPosition = this.stepperEl.labelPosition;
         this.size = this.stepperEl.size;
@@ -39,7 +40,8 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '6c7a2673bbe13e518f2052cac2b8bcc948c7c5ea' }, h("div", { key: '7df6c87c7743fcd539abcbde7c2396ba8d7fa4d6', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'b2902e638345c79401405b9c16dd6f4d196c8bac', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'b35127501be3ab9cc6f3bf0b9f54709f0d98ec36', class: `label ${this.size} ${this.state}` }, h("slot", { key: '43499d45d42401e384b8c9f20885873d23351110', name: "label" }))))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '52a70297ba2b6f186916f597e2e6f355fea93d50' }, h("div", { key: 'e6abd1a5dc488b03a16451e162ea9b6911e36875', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: 'e98b565719a767a03386f9e351be40c3843ae7f2', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h(prefixedTagNames.tdsIcon, { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'eb6814fb3f3b932de0ea2adaa02e8d350db105b0', class: `label ${this.size} ${this.state}` }, h("slot", { key: '8e3c42eaa55d71e278f73ac7c920510fc182f00b', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +102,7 @@ export class TdsStep {
             "labelPosition": {}
         };
     }
-    static get elementRef() { return "el"; }
+    static get elementRef() { return "host"; }
     static get listeners() {
         return [{
                 "name": "internalTdsPropsChange",

package/dist/collection/components/stepper/stepper.js

@@ -173,7 +173,7 @@ export class TdsStepper {
                     "references": {
                         "InternalTdsStepperPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
                             "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
                         }
                     }

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

@@ -305,7 +305,7 @@ export class TdsTable {
                     "references": {
                         "InternalTdsTablePropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
+                            "path": "/Users/rhyme/projects/scania/tegel/packages/core/src/components/table/table/table.tsx",
                             "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
                         }
                     }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableBodyInputWrapper {
     constructor() {
@@ -63,11 +64,12 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: 'c40a17a264d914934ea4f0e5c4a27b58f06d8055', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '05e41154f07408493f682755fcfce90b16540f05', 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: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+            } }, this.renderSlot ? h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (h(prefixedTagNames.tdsIcon, { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
     }
     static get is() { return "tds-table-body-input-wrapper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-body-row/table-body-row.js

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
 const relevantTableProps = [
     'multiselect',
     'verticalDividers',
@@ -48,12 +49,13 @@ export class TdsTableBodyRow {
         });
     }
     render() {
-        return (h(Host, { key: '2b99a5336354cb5e7e2e7ef9c81bac76a55c6895', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '0ac4875938275167c52bdb1a66fc54158c61a76d', class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, this.multiselect && (h("td", { key: '049e91ea474a539b6fbe344db4aed9de42297f3d', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2af9307e3143db71cae028c1cc2116382b20f4c9', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '2eff0d398eb53934ca0b152d25422a5febbbffbb' })));
+            } }, this.multiselect && (h("td", { key: 'c7207da4609b85ae7d2af89df17a06021ed4d5dc', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h(prefixedTagNames.tdsCheckbox, { key: '46d7c610a47b1318d0d30d689bcdcfde5761727c', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '06e607ab15a8f5610f67be5afd2a46ed0f96c4b4' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }