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

package/dist/collection/components/message/message.css

@@ -7,26 +7,26 @@
 :host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .wrapper.information tds-icon {
+:host .wrapper.information .icon {
   color: var(--tds-information);
 }
 :host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .wrapper.success tds-icon {
+:host .wrapper.success .icon {
   color: var(--tds-positive);
 }
 :host .wrapper.error {
   background-color: var(--tds-message-type-error-background);
   border-left: 4px solid var(--tds-negative);
 }
-:host .wrapper.error tds-icon {
+:host .wrapper.error .icon {
   color: var(--tds-negative);
 }
 :host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .wrapper.warning tds-icon {
+:host .wrapper.warning .icon {
   color: var(--tds-warning);
 }
 :host .wrapper.minimal {
@@ -43,7 +43,7 @@
 :host .wrapper.minimal.error .header {
   color: var(--tds-negative);
 }
-:host tds-icon {
+:host .icon {
   padding-right: 16px;
 }
 :host .content {

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: '8658fa43c508ef6b60fd3f6a6cbcdaf892f769ed' }, h("div", { key: 'd38d9f83f5d179bd899badd00f1f504988da8deb', 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: 'a4b4bd55fe53acd7549284d4bb805569d61ccd5a', class: "icon", name: this.getIconName(), size: "20px" })), h("div", { key: 'e9e24d412635b3e2d43da64d9dfcdc8d837698de', class: `content` }, this.header && h("div", { key: 'b939d197c8d6dfacf092006b4820b9d29b83ae9b', class: "header" }, this.header), !this.minimal && (h("div", { key: '9bf431350378dfd70cfa22f120ab3ccee7bfcc48', class: "extended-message" }, h("slot", { key: '4533896d9fc5916dca6a8dcadda502dbbda60ce1' })))))));
     }
     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
@@ -112,7 +113,8 @@ export class TdsModal {
     render() {
         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" }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: 'd8d4663bf34447a7c437a2548eb5cb7b54966904', class: `${this.isShown ? 'show' : 'hide'}`, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '22deee723aad6d1c6911ac1a4d9fdfb3c49ee9d7', class: "tds-modal-backdrop" }), h("div", { key: 'a02ddd0a4c7cc15e3a88ee4afeb9fa11e05a0920', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: 'e5025289a4bc71e088dbae5addfac7283afe4cd4', class: "header" }, this.header && h("div", { key: '0b8036a08d88e61e7a25d718184e78f1662fc71b', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: 'e560702407b26f9e87699ad2c88f7767925d95b0', name: "header" }), this.closable && (h("button", { key: 'e6ab572230e9cf42aee383082b2471999e59fa84', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h(prefixedTagNames.tdsIcon, { key: 'e7d152b8e78c76eb89bcbd37a951bacdcd1a189d', name: "cross", size: "20px" })))), h("div", { key: '4f60b951463c91015d753e3baaec55a0d2f61557', class: "body" }, h("slot", { key: '13fadc6021577e560a8302679ba05c66609992ff', name: "body" })), usesActionsSlot && h("slot", { key: '71d510b8442111c272610d8b6334e7a11e548ebe', 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: '4dfa496e7ce0d92c2575832b8289440fddc1e57a' }, h(prefixedTagNames.tdsPopoverCore, Object.assign({ key: '588b26ceae93946774d39e3aa7382f40b82052fa' }, 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: 'c8fa624a0f6b65f77ea8ddf8f576ade6899b1f7c' }, h("slot", { key: '0c91f6654cb2a3e51ffd8f5f66c46fc673313b00' })))));
     }
     static get is() { return "tds-popover-canvas"; }
     static get encapsulation() { return "scoped"; }

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

@@ -159,7 +159,7 @@ export class TdsPopoverCore {
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (h(Host, { key: '7829c25ef7722b84b829c59135df59cafd745338', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '0cf6fceefad0557bce25ac728d36ff177794ef96' })));
+        return (h(Host, { key: 'b0731931ab490f2003c8c29e1cf6c61163c614d9', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '3e0c276eb679436168b488eead06f30b5ec8225d' })));
     }
     static get is() { return "tds-popover-core"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css

@@ -22,10 +22,10 @@
   pointer-events: none;
   color: var(--tds-popover-menu-divider-disabled-color);
 }
-:host .wrapper.disabled ::slotted(tds-icon) {
+:host .wrapper.disabled ::slotted(.tds-icon__icon) {
   color: var(--tds-popover-menu-divider-disabled-icon-color);
 }
-:host ::slotted(*:not(tds-icon)) {
+:host ::slotted(*:not(.tds-icon__icon)) {
   all: unset;
   width: 100%;
   display: inline-flex;

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

@@ -4,10 +4,10 @@ export class TdsPopoverMenuItem {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'efdc72f869be19ff2d96dbb2e88610d69011a6ee', role: "listitem" }, h("div", { key: '9313583023cc2cf6d21454e979f37de83030476a', class: {
+        return (h(Host, { key: '394e2fd1ee96323b2db9398a2e48c1a2cfdd6611', role: "listitem" }, h("div", { key: '452da1f9627c7c5db647fa91072ef735cd0a06d3', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: 'a12d405a1bc0f1e5ddc75d52c25a8ca0b53d6427' }))));
+            } }, h("slot", { key: '7a3d7a8415116fc625363c6378caf66a9ff026c1' }))));
     }
     static get is() { return "tds-popover-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,7 +3,7 @@
   overflow: hidden;
   width: 160px;
   background-color: var(--tds-popover-menu-background);
-  padding: 16px 6px;
+  padding: 6px 0 !important;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   z-index: 900;
@@ -15,10 +15,6 @@
   width: unset;
 }
 
-tds-popover-core {
-  padding: 6px 0 !important;
-}
-
 ::slotted(tds-divider) {
   display: block;
   padding: 6px !important;

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: 'e5f323655f7cbd3a11dd14d9f078d419ff97d3e1' }, h(prefixedTagNames.tdsPopoverCore, { key: 'aa67f812691dcc09f2da0a78a4e6d4b01310f19d', 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: 'd6e85e1d7c17afc4688cd78b6847dcebc72e7241', role: "list" }, h("slot", { key: '34d0991b86c98ea2b33da2f3f5883933aef4921c' })))));
     }
     static get is() { return "tds-popover-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/radio-button/radio-button.js

@@ -19,7 +19,7 @@ export class TdsRadioButton {
         this.disabled = false;
     }
     render() {
-        return (h("div", { key: 'b6c39a5831fdebb5dc6dad6ddf819544a9ae2844', class: "tds-radio-button" }, h("input", { key: 'bf4455eb7169141c79ff24bff8259572864daf27', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: '3fd2d122f6fe481bcebfda7f0bc90aa4530f1e82', htmlFor: this.radioId }, h("slot", { key: 'cb45cf63c06a52dac0704757462a2528464f6e23', name: "label" }))));
+        return (h("div", { key: '9981b311527401585e8d856efd31d400ef4f04ff', class: "tds-radio-button" }, h("input", { key: '42376124bb5c5111034cf33328312417696c1f4f', class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { key: 'dcae7b92564cdc7ffea21bc6962a58c47f4fa7e1', htmlFor: this.radioId }, h("slot", { key: 'a1d77af8e076cac6d1959dbc393f11b6d4362756', name: "label" }))));
     }
     static get is() { return "tds-radio-button"; }
     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 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" }))));
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '7486dc122a3662d92d55c8195f406eb744c4d1ff' }, h("button", Object.assign({ key: 'cb982f67321cd23e4483bf4f42096cf5c5e6f032' }, buttonProps), h(prefixedTagNames.tdsIcon, { key: '18441a77bfab2dc8886f25a393cc2a862351cc30', 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,6 @@
 import { h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot <default>  - <b>Unnamed slot.</b> For the text label of the button.
  * */
@@ -24,18 +26,19 @@ export class TdsSideMenuCollapseButton {
         this.collapsed = event.detail.collapsed;
     }
     connectedCallback() {
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         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: '1047ada52c0e2a2a5572c1c57a61c42e7d5a047f', role: "button", tabindex: "0", onClick: () => {
                 this.handleClick();
-            } }, h("div", { key: '813da1c78798289b4eed8342b6c00a837ae04b24', class: {
+            } }, h("div", { key: 'f3dc464aa050e5b764109d26ee1125290bff5fbb', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '44321406d890c741fff0ad1df9576588a6658ea5', class: {
+            } }, h(prefixedTagNames.tdsSideMenuItem, { key: '558708845ccf578ba3df7a39e0c3ae0838699cad', 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: '87b0fe1659908e89e1fb918fb1c65c9b1f879898' }, h("svg", { key: '1aec6d540f3e18cbd001e310623dded8f75d6ca3', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'f829cdd43f848fe3ee44d8c926f483219c3b8260', "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: '076c082597d1f0fbc8aaf251ef30f61687c043e1' }))))));
     }
     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,6 @@
 import { Fragment, h, Host } from "@stencil/core";
+import { getPrefixedTagNames } from "../../../utils/tagName";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot icon - Used for injecting the icon that compliments the dropdown title
  * @slot label - Used for injecting the text, aka dropdown title
@@ -45,18 +47,19 @@ export class TdsSideMenuDropdown {
         return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
     }
     connectedCallback() {
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = this.sideMenuEl.collapsed;
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '1bad48953f08e903e9179dae839c93b249f93266' }, h("div", { key: '7e8020738796fb8c449f76a3d1aef801151e4e63', class: {
+        const prefixedTagNames = getPrefixedTagNames(this.host);
+        return (h(Host, { key: '1827847b06f291279e4a87ed69fa894900dea6d8' }, h("div", { key: 'ce4001ca5f54358b124a6e799d4b8575e8585e9d', 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: '647d047735e07ce10ff1b29a769d7bbf4ee552e3', 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: '315f640f09e65851e148f378ba3b38d70b0ff732' }, h("slot", { key: '5929de731189625ebe18ee80a5883c795bc9ee77', name: "icon" }), !this.collapsed && (h(Fragment, { key: 'a1ed66961510c1b36f1c158327c46e9bd834f5cb' }, this.buttonLabel, h("slot", { key: 'f772910c872e31659b651c05a972b8225517b94a', name: "label" }), h(prefixedTagNames.tdsIcon, { key: 'a9d5576a057243415b4d1f527e742a7e2812b50b', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { key: '109d2a4f7cec66a68e937a1922c4a5a8ddb16505', class: "menu" }, this.collapsed && (h("h3", { key: '08e7f464e230a6d8e0caa3088749d679be1343f9', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '8f0c0377d46f965bab22c44dd69d0090d2e2ca4a', name: "label" }))), h("slot", { key: '0e83ab1aa8c07f19a25e24c1c6be0c2fcb639c15' })))));
     }
     static get is() { return "tds-side-menu-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot <default>  - <b>Unnamed slot.</b> For injection of <code>tds-side-menu-dropdown-list-item</code> subcomponents.
  * */
@@ -11,13 +12,13 @@ export class TdsSideMenuDropdownList {
     }
     connectedCallback() {
         var _a;
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (h(Host, { key: '87a06385e330eb2d65def2676ff78a09ad87d029', role: "list" }, h("div", { key: '284f409bfc8b24cea7047dd631a8895591f18a5c', class: {
+        return (h(Host, { key: '6b8f6c8119ebc648207b04e31c4e4741ef01c0b5', role: "list" }, h("div", { key: '14b3b0bccbcfbca94112c8b28c455f7969257cad', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: 'fdd823c6bb4fedfe12586edb58805d5588fa07e7' }))));
+            } }, h("slot", { key: '987f9c7e4b31aefca9686821bec1257427812a21' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button></code> or <code>&lt;a></code> element.
  * */
@@ -13,27 +14,27 @@ export class TdsSideMenuDropdownListItem {
     }
     connectedCallback() {
         var _a;
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     componentDidLoad() {
         var _a;
-        const dropdownEl = this.host.closest('tds-side-menu-dropdown');
+        const dropdownEl = findClosestComponent(this.host, 'tdsSideMenuDropdown');
         const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
         const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
         const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
-        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+        const btnIconIsUserImage = (_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase().endsWith('tds-side-menu-user-image');
         if (hasBtnIcon && !btnIconIsUserImage) {
             this.dropdownHasIcon = true;
         }
     }
     render() {
-        return (h(Host, { key: 'bd99626dab1cff34e10b5da4bc8f9ff22663e31e', role: "listitem" }, h("div", { key: '4a736b170841b2c195b86c18758d3e4a9e93193e', class: {
+        return (h(Host, { key: 'c47e1fad9e2a430ad64402a8e48af6a7b24a330d', role: "listitem" }, h("div", { key: '8647c8716ecbb51c642a257727ec8c48c4a9bd60', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'e6d3f6d36ebd7d73f03d8eed18a86332ff90cd5b' }))));
+            } }, h("slot", { key: '8d2c7082086a0854b4990559106f0ef136a40f60' }))));
     }
     static get is() { return "tds-side-menu-dropdown-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -21,7 +21,7 @@
   color: var(--tds-sidebar-side-menu-single-item-color);
   cursor: pointer;
 }
-:host .component tds-icon {
+:host .component .tds-icon__icon {
   color: red !important;
 }
 :host .component ::slotted(a:focus-visible),

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import dfs from "../../../utils/dfs";
+import { findClosestComponent } from "../../../utils/findClosestComponent";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
  * */
@@ -24,7 +25,8 @@ export class TdsSideMenuItem {
      */
     updateSlottedElements() {
         if (this.slotEl) {
-            const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+            const isIconOrSvg = (element) => element.tagName.toLowerCase().endsWith('tds-icon') ||
+                element.tagName.toLowerCase() === 'svg';
             const addIconClass = (element) => {
                 element.classList.add('__tds-side-menu-item-icon');
                 if (this.collapsed) {
@@ -41,7 +43,7 @@ export class TdsSideMenuItem {
         var _a;
         // closest() will return null if side-menu-item is inside a shadowRoot that
         // does not contain a side-menu. This is the case for the side-menu-dropdown.
-        this.sideMenuEl = this.host.closest('tds-side-menu');
+        this.sideMenuEl = findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     componentDidLoad() {
@@ -54,12 +56,12 @@ export class TdsSideMenuItem {
         this.updateSlottedElements();
     }
     render() {
-        return (h(Host, { key: '13d5211709dbda15ce0e398dab7e2677e15d074c' }, h("div", { key: '99cd16c7817451dfbc3e30c59fcb95ebf84c72af', class: {
+        return (h(Host, { key: '386c370ad3c9509d3d357b1a100fc48d3f9179c1' }, h("div", { key: '3136d3cd56eb58b6227cb64334ab67dc824698a7', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '564c191d1bf54f63fa75c32309cd32392a22dc3a' }))));
+            } }, h("slot", { key: 'c1e0434015361d4fc1f68ba5c33ac35c5741966b' }))));
     }
     static get is() { return "tds-side-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TdsSideMenuOverlay {
     render() {
-        return (h(Host, { key: 'a22924316d030baaa80d15676d514eefe150b9df' }, h("div", { key: 'ad453aaa2fcaf52c94f2e7990c6d52f9db7fb55a' })));
+        return (h(Host, { key: '4e5ee559f2210af73350725bb713c3c5a2ec62e7' }, h("div", { key: '7b8494f203996e8fbd9cdb0cb8659cc939d974b8' })));
     }
     static get is() { return "tds-side-menu-overlay"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,6 @@
   gap: 12px;
   height: 68px;
 }
-:host tds-side-menu-user-image {
+:host .user-image {
   margin-left: -4px;
 }

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: '9f694ba496db9859eb827f0dc2f382e4434ee61c' }, h(prefixedTagNames.tdsSideMenuUserImage, { key: '851205e352f9fce6aff545a277298b3aca048315', class: "user-image", src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '2dfef908a3ec8f8c6054f8427604f1827b55cd49', name: "image" })), h(prefixedTagNames.tdsSideMenuUserLabel, { key: 'be7e31d4e8afe764dbdd7a87b00117c49f463690', 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-user-image/side-menu-user-image.js

@@ -12,7 +12,7 @@ export class TdsSideMenuUserImage {
         this.alt = undefined;
     }
     render() {
-        return (h(Host, { key: 'cd4bcc9ba4ce93b20e39ab0782136518a99899a3' }, h("slot", { key: '09bf0b847a54c03474e9d5dcaad8d0a5a347dbfc' }), this.src && h("img", { key: '8d74e3733d69ac50f4fe07557b91aec07aa74605', src: this.src, alt: this.alt })));
+        return (h(Host, { key: 'b3106a36d68732fb20b70d691da5f4b903568b18' }, h("slot", { key: 'a685eed98b4dd1c5a7fd26e5255bb1b91fba2427' }), this.src && h("img", { key: '0e671356961fa6cb1613f7695b575ce40086e064', src: this.src, alt: this.alt })));
     }
     static get is() { return "tds-side-menu-user-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ export class TdsSideMenuUserLabel {
         this.subheading = undefined;
     }
     render() {
-        return (h(Host, { key: '5b26493d17e356fa885a7b615ed4bda03e751eb6' }, this.heading, this.subheading && h("div", { key: '2dc511289427ef2ea490fec0308119c42956113c', class: "subheading" }, this.subheading)));
+        return (h(Host, { key: '8dc22599239ca34fc6d1b63d1409aaf7921c0056' }, this.heading, this.subheading && h("div", { key: '0f408be52713a85c63f9d527cbcc8d6c6c15077f', class: "subheading" }, this.subheading)));
     }
     static get is() { return "tds-side-menu-user-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slider/slider.css

@@ -1,11 +1,11 @@
-tds-slider {
+.tds-slider__slider {
   box-sizing: border-box;
   width: 100%;
 }
-tds-slider * {
+.tds-slider__slider * {
   box-sizing: border-box;
 }
-tds-slider input[type=range].tds-slider-native-element {
+.tds-slider__slider input[type=range].tds-slider-native-element {
   display: none;
 }
 
@@ -266,12 +266,12 @@ tds-slider input[type=range].tds-slider-native-element {
 .tds-slider .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
+.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus .tds-icon__icon, .tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus .tds-icon__icon {
   color: var(--tds-slider-controls-color);
 }
 .tds-slider.disabled .tds-slider__controls .tds-slider__control {
   cursor: default;
 }
-.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon {
+.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus .tds-icon__icon, .tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus .tds-icon__icon {
   color: var(--tds-slider-disabled);
 }

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

@@ -1,5 +1,6 @@
-import { h } from "@stencil/core";
+import { h, Host, } 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(Host, { key: 'f59be8845e333caa7c0af833373649a391563b09', class: "tds-slider__slider" }, h("div", { key: '4d7d3ecec1ce3bd44ed141c5022bda6625b8a660', 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: 'a8a54f6b4230cc4f8ef148279725c452df2ef4b6', 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: 'c0e0208c6caa21a535a4cbb750fed41cb14ef030', 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: '606706a15d33ae88a85853b0d5b11bbd51a06f3f', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '5ce2a53b1cbcbdce6cb02241023a4eba154fb289', class: "tds-slider__input-values" }, h("div", { key: '6db157a82e13fb891795e53f06a6a58992280084', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '548f48afde212ebf1122759ddcfebedc4658f1ac', class: "tds-slider__controls" }, h("div", { key: '9a7fb2027e0d59ba880b8eececbc92b657a12450', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h(prefixedTagNames.tdsIcon, { key: 'd0599b4d7ff1e0346a5b8382c8a76f164dc5a0c2', name: "minus", size: "16px" })))), h("div", { key: 'fbfe482a64615d87faa69e506b1299dc04307532', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'b4dcdf3c127630416df0140af968530cd3ee350d', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '89bcb0d85cfc5a10fe7f556443472655a9e71ffa', 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: 'c2587f4cd87a37facb581541a8eb5a1fbdae57bf', 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: '0a52a7ede85117e2173cfc2d216d90cbbe70d160', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: 'e4d05479a9067ee506578b522c56719c006036fc', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '45501ff0945089133881250aa76ef0d56fd9c7ca', 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: 'e1811ea68007f25f29c03445629367b3caff26fe', class: "tds-slider__value" }, this.value, h("svg", { key: 'a5a7bb1d10ecfc6db49a81be22193a995d9baef0', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f91bceaf2cbb9349e1a6d84346e4e5380cf6092d', 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: '83db8611dce8cf7320cb90a321b11a76ad96b6c7', 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: 'e9de8343593a63432acd32eff6c2321380c8d5c7', class: "tds-slider__input-values" }, h("div", { key: 'fb2b211bb8074af560d63e571423f869dc4c1fbd', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '3b57ca9930a560835d3b770043ae0b28bd160956', class: "tds-slider__input-field-wrapper" }, h("input", { key: '363feca5141de60ea1d8c04c4b18e8297c7fe22c', 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: 'c815745f6a926c6ebc495bd6b0c29f9230076239', class: "tds-slider__controls" }, h("div", { key: 'd10edf5b472e2bbe6016a9a23885e5f6167da5fd', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h(prefixedTagNames.tdsIcon, { key: '7b629d35bf387ca0932f68f537809587963add2d', 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.css

@@ -21,7 +21,7 @@
   height: 30px;
   min-width: 30px;
 }
-:host [role=listitem].lg .content-container tds-icon {
+:host [role=listitem].lg .content-container .tds-icon__icon {
   vertical-align: bottom;
 }
 :host [role=listitem].lg .content-container .index-container {