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

package/dist/cjs/tds-side-menu-dropdown.cjs.entry.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const tagName = require('./tagName-3399a06c.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
 
 const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:69px;position:absolute;left:var(--side-menu-width);box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-sidebar-side-menu-subnav-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
 const TdsSideMenuDropdownStyle0 = sideMenuDropdownCss;
@@ -49,18 +51,19 @@ const TdsSideMenuDropdown = class {
         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.findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = this.sideMenuEl.collapsed;
         this.open = this.defaultOpen;
     }
     render() {
-        return (index.h(index.Host, { key: '1bad48953f08e903e9179dae839c93b249f93266' }, index.h("div", { key: '7e8020738796fb8c449f76a3d1aef801151e4e63', class: {
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: '1827847b06f291279e4a87ed69fa894900dea6d8' }, index.h("div", { key: 'ce4001ca5f54358b124a6e799d4b8575e8585e9d', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, index.h("tds-side-menu-item", { key: 'e4420aba88077e36b1cc7cd10958459d79a463f4', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, index.h(prefixedTagNames.tdsSideMenuItem, { key: '647d047735e07ce10ff1b29a769d7bbf4ee552e3', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, index.h("button", { key: '483ac0b103bf54f63c67cf2d78ed9e82703ba331' }, index.h("slot", { key: 'ec027d3c88569c79d0dde6c51f8dc1056dee6284', name: "icon" }), !this.collapsed && (index.h(index.Fragment, { key: 'f71caa474565871d170653153c8daa7ddead5f17' }, this.buttonLabel, index.h("slot", { key: '487db682801ce910cd65dc6d3ef481bff888574e', name: "label" }), index.h("tds-icon", { key: 'dc75ac7be7eedf85fec97cd3fdbbf786cebe8907', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), index.h("div", { key: 'e321069727d205d0623cd72fb922c3101f9d2e08', class: "menu" }, this.collapsed && (index.h("h3", { key: '7d5a73c051a700f0568d63ae62ce2737cdb57dd8', class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { key: '9c831576869cac930e8fe9edcbfc86dfede01a47', name: "label" }))), index.h("slot", { key: '7db68bb3f46cdc24fa44c375f0d6bec82c317be4' })))));
+            } }, index.h("button", { key: '315f640f09e65851e148f378ba3b38d70b0ff732' }, index.h("slot", { key: '5929de731189625ebe18ee80a5883c795bc9ee77', name: "icon" }), !this.collapsed && (index.h(index.Fragment, { key: 'a1ed66961510c1b36f1c158327c46e9bd834f5cb' }, this.buttonLabel, index.h("slot", { key: 'f772910c872e31659b651c05a972b8225517b94a', name: "label" }), index.h(prefixedTagNames.tdsIcon, { key: 'a9d5576a057243415b4d1f527e742a7e2812b50b', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), index.h("div", { key: '109d2a4f7cec66a68e937a1922c4a5a8ddb16505', class: "menu" }, this.collapsed && (index.h("h3", { key: '08e7f464e230a6d8e0caa3088749d679be1343f9', class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { key: '8f0c0377d46f965bab22c44dd69d0090d2e2ca4a', name: "label" }))), index.h("slot", { key: '0e83ab1aa8c07f19a25e24c1c6be0c2fcb639c15' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-side-menu-item.cjs.entry.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
 const dfs = require('./dfs-84f7f63e.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
+require('./tagName-3399a06c.js');
 
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component .tds-icon__icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = class {
@@ -30,7 +32,8 @@ const TdsSideMenuItem = class {
      */
     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) {
@@ -47,7 +50,7 @@ const TdsSideMenuItem = class {
         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.findClosestComponent(this.host, 'tdsSideMenu');
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     componentDidLoad() {
@@ -60,12 +63,12 @@ const TdsSideMenuItem = class {
         this.updateSlottedElements();
     }
     render() {
-        return (index.h(index.Host, { key: '13d5211709dbda15ce0e398dab7e2677e15d074c' }, index.h("div", { key: '99cd16c7817451dfbc3e30c59fcb95ebf84c72af', class: {
+        return (index.h(index.Host, { key: '386c370ad3c9509d3d357b1a100fc48d3f9179c1' }, index.h("div", { key: '3136d3cd56eb58b6227cb64334ab67dc824698a7', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, index.h("slot", { key: '564c191d1bf54f63fa75c32309cd32392a22dc3a' }))));
+            } }, index.h("slot", { key: 'c1e0434015361d4fc1f68ba5c33ac35c5741966b' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-side-menu-overlay.cjs.entry.js

@@ -12,7 +12,7 @@ const TdsSideMenuOverlay = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a22924316d030baaa80d15676d514eefe150b9df' }, index.h("div", { key: 'ad453aaa2fcaf52c94f2e7990c6d52f9db7fb55a' })));
+        return (index.h(index.Host, { key: '4e5ee559f2210af73350725bb713c3c5a2ec62e7' }, index.h("div", { key: '7b8494f203996e8fbd9cdb0cb8659cc939d974b8' })));
     }
 };
 TdsSideMenuOverlay.style = TdsSideMenuOverlayStyle0;

package/dist/cjs/tds-side-menu-user-image.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
+
+const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
+const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
+
+const TdsSideMenuUserImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.src = undefined;
+        this.alt = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b3106a36d68732fb20b70d691da5f4b903568b18' }, index.h("slot", { key: 'a685eed98b4dd1c5a7fd26e5255bb1b91fba2427' }), this.src && index.h("img", { key: '0e671356961fa6cb1613f7695b575ce40086e064', src: this.src, alt: this.alt })));
+    }
+};
+TdsSideMenuUserImage.style = TdsSideMenuUserImageStyle0;
+
+exports.tds_side_menu_user_image = TdsSideMenuUserImage;

package/dist/cjs/tds-side-menu-user-label.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ca8040ad.js');
+
+const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
+const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
+
+const TdsSideMenuUserLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = undefined;
+        this.subheading = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: '8dc22599239ca34fc6d1b63d1409aaf7921c0056' }, this.heading, this.subheading && index.h("div", { key: '0f408be52713a85c63f9d527cbcc8d6c6c15077f', class: "subheading" }, this.subheading)));
+    }
+};
+TdsSideMenuUserLabel.style = TdsSideMenuUserLabelStyle0;
+
+exports.tds_side_menu_user_label = TdsSideMenuUserLabel;

package/dist/cjs/tds-side-menu-user.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const tagName = require('./tagName-3399a06c.js');
 
-const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host .user-image{margin-left:-4px}";
 const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser = class {
@@ -16,8 +17,10 @@ const TdsSideMenuUser = class {
         this.imgAlt = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '061364f66ad366cbfb421fa0609020564bd36e83' }, index.h("tds-side-menu-user-image", { key: '01ae0ecb3a011a6a8f50566dc5b683fb56f8d387', src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: '5265cabfa2a7533f7e6c8a9a47b1691f8991d3f0', name: "image" })), index.h("tds-side-menu-user-label", { key: '525ac1f1593b048c266733e24d5dd3f5632ce197', heading: this.heading, subheading: this.subheading })));
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: '9f694ba496db9859eb827f0dc2f382e4434ee61c' }, index.h(prefixedTagNames.tdsSideMenuUserImage, { key: '851205e352f9fce6aff545a277298b3aca048315', class: "user-image", src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: '2dfef908a3ec8f8c6054f8427604f1827b55cd49', name: "image" })), index.h(prefixedTagNames.tdsSideMenuUserLabel, { key: 'be7e31d4e8afe764dbdd7a87b00117c49f463690', heading: this.heading, subheading: this.subheading })));
     }
+    get host() { return index.getElement(this); }
 };
 TdsSideMenuUser.style = TdsSideMenuUserStyle0;
 

package/dist/cjs/tds-slider.cjs.entry.js

@@ -4,8 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+const tagName = require('./tagName-3399a06c.js');
 
-const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.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{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{color:var(--tds-slider-disabled)}";
+const sliderCss = ".tds-slider__slider{box-sizing:border-box;width:100%}.tds-slider__slider *{box-sizing:border-box}.tds-slider__slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.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__icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus .tds-icon__icon{color:var(--tds-slider-disabled)}";
 const TdsSliderStyle0 = sliderCss;
 
 const TdsSlider = class {
@@ -300,25 +301,27 @@ const TdsSlider = class {
         this.updateTrack();
     }
     render() {
-        return (index.h("div", { key: '943840a77d7cb7f6c394bc2fcd25b36e9a6b5369', class: {
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: 'f59be8845e333caa7c0af833373649a391563b09', class: "tds-slider__slider" }, index.h("div", { key: '4d7d3ecec1ce3bd44ed141c5022bda6625b8a660', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, index.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 }), index.h("div", { key: 'e23f338ee45c0416c02568be5ef538708c71a3c2', class: {
+            } }, index.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 }), index.h("div", { key: 'c0e0208c6caa21a535a4cbb750fed41cb14ef030', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, index.h("label", { key: '959ee49ec8483ead245abff393c2e89c5c20ee06', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { key: 'c1844b647050d9873d0abc95c3a43dc2f2090020', class: "tds-slider__input-values" }, index.h("div", { key: 'c725f1db4ef669ed6033f9e5b105f6401245263e', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: '9b1f41eed1e3df5574d9454e42875e6365d4d200', class: "tds-slider__controls" }, index.h("div", { key: '0518f6daaead7ac4b4ed4ca177cb592ce3331260', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, index.h("tds-icon", { key: 'e82506df9a4dd9073e485da2e4457c26188c4a17', name: "minus", size: "16px" })))), index.h("div", { key: '212769a9fca717328cfc7e7159bc01f65d5313a2', class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { key: '8158e5b300c4085146900ed5b56ef5748852e137', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '57f7c51c9f538fba5083ffdd7b805212a7726ed4', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: '8e25f27e20a07410fbf7ac70600e14663fe4cf0a', class: "tds-slider__track", ref: (el) => {
+            } }, index.h("label", { key: '606706a15d33ae88a85853b0d5b11bbd51a06f3f', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { key: '5ce2a53b1cbcbdce6cb02241023a4eba154fb289', class: "tds-slider__input-values" }, index.h("div", { key: '6db157a82e13fb891795e53f06a6a58992280084', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: '548f48afde212ebf1122759ddcfebedc4658f1ac', class: "tds-slider__controls" }, index.h("div", { key: '9a7fb2027e0d59ba880b8eececbc92b657a12450', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, index.h(prefixedTagNames.tdsIcon, { key: 'd0599b4d7ff1e0346a5b8382c8a76f164dc5a0c2', name: "minus", size: "16px" })))), index.h("div", { key: 'fbfe482a64615d87faa69e506b1299dc04307532', class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { key: 'b4dcdf3c127630416df0140af968530cd3ee350d', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '89bcb0d85cfc5a10fe7f556443472655a9e71ffa', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: 'c2587f4cd87a37facb581541a8eb5a1fbdae57bf', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { key: 'cb48279c9b6b7f91754a0d0504d38977e80d6454', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { key: '0a52a7ede85117e2173cfc2d216d90cbbe70d160', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), index.h("div", { key: 'e4d05479a9067ee506578b522c56719c006036fc', class: "tds-slider__thumb", ref: (el) => {
+            } }), index.h("div", { key: '45501ff0945089133881250aa76ef0d56fd9c7ca', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (index.h("div", { key: '6487f63ad6f2ff00cbdd4e1c10bc9d4ec4550137', class: "tds-slider__value" }, this.value, index.h("svg", { key: '5c89ff40a9ccab1e48d1867a69835206313bf4c1', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { key: '977ed57e0a9d115152dd08bdd656c5d6c858d633', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (index.h("div", { key: 'e1811ea68007f25f29c03445629367b3caff26fe', class: "tds-slider__value" }, this.value, index.h("svg", { key: 'a5a7bb1d10ecfc6db49a81be22193a995d9baef0', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { key: '83db8611dce8cf7320cb90a321b11a76ad96b6c7', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (index.h("div", { key: '026b89aea3e01f0d6621d95260db43ba96834181', class: "tds-slider__input-values" }, index.h("div", { key: '9c58cc92d072760adbef4fa1c49c2766f48a4a3b', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: '7a35238569b9ded1481ea48a868a985426ec4cef', class: "tds-slider__input-field-wrapper" }, index.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 && (index.h("div", { key: '4d10cc417985b3ae3739120b508e781e79a315d0', class: "tds-slider__controls" }, index.h("div", { key: '9a422c72b65fc9888fd472c36a20df99bb4b50f4', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, index.h("tds-icon", { key: '808969d21cb085de199f1d8af307aa9a412c2b4d', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (index.h("div", { key: 'e9de8343593a63432acd32eff6c2321380c8d5c7', class: "tds-slider__input-values" }, index.h("div", { key: 'fb2b211bb8074af560d63e571423f869dc4c1fbd', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: '3b57ca9930a560835d3b770043ae0b28bd160956', class: "tds-slider__input-field-wrapper" }, index.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 && (index.h("div", { key: 'c815745f6a926c6ebc495bd6b0c29f9230076239', class: "tds-slider__controls" }, index.h("div", { key: 'd10edf5b472e2bbe6016a9a23885e5f6167da5fd', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, index.h(prefixedTagNames.tdsIcon, { key: '7b629d35bf387ca0932f68f537809587963add2d', name: "plus", size: "16px" }))))))));
     }
+    get host() { return index.getElement(this); }
     static get watchers() { return {
         "value": ["handleValueUpdate"]
     }; }

package/dist/cjs/tds-step.cjs.entry.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const tagName = require('./tagName-3399a06c.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
 
-const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container tds-icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
+const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{height:30px;min-width:30px}:host [role=listitem].lg .content-container .tds-icon__icon{vertical-align:bottom}:host [role=listitem].lg .content-container .index-container{vertical-align:sub}:host [role=listitem].lg.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem].sm .index-container{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline}:host [role=listitem].sm .content-container{height:24px;min-width:24px}:host [role=listitem].sm .tds-step-icon{vertical-align:-webkit-baseline-middle;vertical-align:-moz-middle-with-baseline;margin-top:-2px}:host [role=listitem].sm.vertical::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-negative);color:var(--tds-negative)}:host [role=listitem] .content-container.success{background-color:var(--tds-positive);border-color:var(--tds-positive);color:var(--tds-white)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
 const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
@@ -25,7 +27,7 @@ const TdsStep = class {
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
-        this.stepperEl = this.el.closest('tds-stepper');
+        this.stepperEl = findClosestComponent.findClosestComponent(this.host, 'tdsStepper');
         this.orientation = this.stepperEl.orientation;
         this.labelPosition = this.stepperEl.labelPosition;
         this.size = this.stepperEl.size;
@@ -45,9 +47,10 @@ const TdsStep = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '6c7a2673bbe13e518f2052cac2b8bcc948c7c5ea' }, index.h("div", { key: '7df6c87c7743fcd539abcbde7c2396ba8d7fa4d6', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: 'b2902e638345c79401405b9c16dd6f4d196c8bac', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: 'b35127501be3ab9cc6f3bf0b9f54709f0d98ec36', class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '43499d45d42401e384b8c9f20885873d23351110', name: "label" }))))));
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: '29992ccdc6089419be59ca3004a260d001ce09bc' }, index.h("div", { key: '8b357d9c3e503d706b8417afa3cf98bf0afaa2db', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: 'a75819750c696683abb1c4ed88256ee65ea2ee4e', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h(prefixedTagNames.tdsIcon, { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: 'ae0b4e9fb600402086c0c3840b14cad4743c10c5', class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '529bba8ee45dd888f31550d95bbf1a836d0fab43', name: "label" }))))));
     }
-    get el() { return index.getElement(this); }
+    get host() { return index.getElement(this); }
 };
 TdsStep.style = TdsStepStyle0;
 

package/dist/cjs/tds-table-body-input-wrapper.cjs.entry.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const tagName = require('./tagName-3399a06c.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
 
-const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
+const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) .edit-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) .edit-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
 const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
@@ -31,7 +33,7 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     connectedCallback() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             this.tableId = tableEl.getAttribute('table-id');
         }
@@ -40,7 +42,7 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     componentWillLoad() {
-        const tableEl = this.host.closest('tds-table');
+        const tableEl = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
         if (tableEl) {
             relevantTableProps.forEach((tablePropName) => {
                 this[tablePropName] = tableEl[tablePropName];
@@ -72,11 +74,12 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'c40a17a264d914934ea4f0e5c4a27b58f06d8055', class: {
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: '20eb879a6a7699ae79768bd7e99cc5e2c23465a0', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
-            } }, this.renderSlot ? index.h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (index.h("tds-icon", { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
+            } }, this.renderSlot ? index.h("slot", { onSlotchange: () => this.handleSlotChange() }) : null, this.showIcon ? (index.h(prefixedTagNames.tdsIcon, { class: "edit-icon", slot: "icon", size: "16px", name: "edit" })) : null));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
+require('./tagName-3399a06c.js');
 
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
 const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
@@ -78,7 +80,7 @@ const TdsTableBodyRowExpandable = class {
         if (this.expanded !== undefined) {
             this.isExpanded = this.expanded;
         }
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -91,7 +93,7 @@ const TdsTableBodyRowExpandable = class {
             this.columnsNumber = this.colSpan;
         }
         else {
-            this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
+            this.columnsNumber = this.tableEl.querySelector('.tds-table__header').childElementCount + 1;
         }
     }
     sendValue() {
@@ -103,26 +105,27 @@ const TdsTableBodyRowExpandable = class {
         this.sendValue();
     }
     render() {
-        return (index.h(index.Host, { key: '802679e89bc19447faa87010bd47d17447c08aca', class: {
+        return (index.h(index.Host, { key: 'e275194131e3b901f08e84674b705b5bd4b73dab', class: {
                 'tds-table__row': true,
+                'tds-table__row-expandable': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, index.h("tr", { key: '1c089710478c5effb5f6eb727e22879a80e9003d', class: {
+            } }, index.h("tr", { key: '8a488cfb99978c2066d51d0d7eeec350aaf59401', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, index.h("td", { key: '6f2b7ad6cffef0c33b9cc177e423eb3edbb5b806', class: {
+            }, part: "row" }, index.h("td", { key: '38e261d4dd352b63fda51e5deab4b43e248b0d42', class: {
                 'tds-table__cell-expand': true,
-            } }, index.h("label", { key: 'bfe1cc4c8bb91c3e50b1cc3abb823ce22a8c8cad', class: "tds-table__expand-control-container" }, index.h("input", { key: '65be9c515bccfa2bd42dfdfa869b764ca863d009', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), index.h("span", { key: 'fbf0df316c42061b1800c2db37a26ba6114a2037', class: "tds-expendable-row-icon" }, index.h("svg", { key: '26057fa763a2debe0ef180c4e7d7e96fdd4a08a7', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '4d66ac5c686c5c0c9ba3a02dff9d7a89f5f15e1a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), index.h("slot", { key: 'b6b611bc514d9e3e74b7c275c407da8d7b1a5ef4' })), index.h("tr", { key: '8cb106ff4e548936195a6ffbb18739a07cd17ad1', class: {
+            } }, index.h("label", { key: 'e4082d9ce72f3f6468fde0dcba42e7e7dad89694', class: "tds-table__expand-control-container" }, index.h("input", { key: '14caacf5fce60d40c88a9867ccc6aa65ab64ba7d', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), index.h("span", { key: 'a726e3de3ec5f2d1c428b6b212344f8f9bdf75f4', class: "tds-expendable-row-icon" }, index.h("svg", { key: '8f7bb2b5c774f56af390f0c698ee4b1d856ba91d', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '9591cbc63658dff5264e8a71a192f3a2f9433353', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), index.h("slot", { key: '835d2581036aa51becf36911bc5f777722cd7e4d' })), index.h("tr", { key: 'd2f07ef2ab2eed65c9fff301bcc371b9000fb6f1', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, index.h("td", { key: '248e880b6793a6a36eb738646a07d82d91e15e8b', class: {
+            }, part: "expand-row" }, index.h("td", { key: 'b98c7704015cc08c0561b591ea0a9c59e5d10d43', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, index.h("div", { key: '7489853de5d7a2cbe0168f7e873f7bb0be01a215', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, index.h("div", { key: 'dd5e53a20718e92dda6ff93d6a715054289bab51', style: {
                 overflow: this.overflow,
-            } }, index.h("slot", { key: '3f4d7715c224969fb2d798432019c3e45685731f', name: "expand-row" }))))));
+            } }, index.h("slot", { key: '7e919ed8681143d6bdf13afe6b94d6a8e23be046', name: "expand-row" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-table-body-row.cjs.entry.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const tagName = require('./tagName-3399a06c.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
 
 const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
 const TdsTableBodyRowStyle0 = tableBodyRowCss;
@@ -64,7 +66,7 @@ const TdsTableBodyRow = class {
         }
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -73,13 +75,14 @@ const TdsTableBodyRow = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '47571b7325bea2c32791792aee4813ce4364e8eb', tabindex: this.clickable ? '0' : null, class: {
+        const prefixedTagNames = tagName.getPrefixedTagNames(this.host);
+        return (index.h(index.Host, { key: 'cfd1becf3ee22ac65136c27fdaca6f959223ef3e', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (index.h("td", { key: 'ad8bb61ead16afe42e6100dc4fe842c058556a20', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '37844a08f73175f234168a016a9527d01ad2209e', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: 'e7beb86f278f2476f23c365197addd4f22ce2a69' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e) }, this.multiselect && (index.h("td", { key: 'c2ccf6b1f7a66f1bd4c52cce338a1def6266213b', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h(prefixedTagNames.tdsCheckbox, { key: '119932b4933f138bc2e70b11ade59a93ff27e576', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '94e8b65e4a5cd1bc64db114c0de0ea914846fa44' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-table-body.cjs.entry.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ca8040ad.js');
+const findClosestComponent = require('./findClosestComponent-64302a79.js');
+const getDirectChildHTMLElementOfKind = require('./getDirectChildHTMLElementOfKind-6e210da2.js');
+require('./tagName-3399a06c.js');
 
-const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
+const tableBodyCss = ":host,.tds-table__body{box-sizing:border-box;display:table-row-group}:host *,.tds-table__body *{box-sizing:border-box}:host .tds-table__info-message,.tds-table__body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}.tds-table__body.tds-table--zebra-mode-rows-odd .tds-table__row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-rows-odd .tds-table__row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}.tds-table__body.tds-table--zebra-mode-rows-even .tds-table__row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-rows-even .tds-table__row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}.tds-table__body.tds-table--zebra-mode-columns-even .tds-table__row:hover .tds-table__body-cell,.tds-table__body.tds-table--zebra-mode-columns-odd .tds-table__row:hover .tds-table__body-cell{background-color:transparent}";
 const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
@@ -47,7 +50,7 @@ const TdsTableBody = class {
         this.bodyCheckBoxClicked();
     }
     connectedCallback() {
-        this.tableEl = this.host.closest('tds-table');
+        this.tableEl = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
         this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
@@ -56,8 +59,10 @@ const TdsTableBody = class {
         });
     }
     componentWillRender() {
-        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
-        // multiselect and expended features requires one extra column for controls...
+        const table = findClosestComponent.findClosestComponent(this.host, 'tdsTable');
+        const tableHeader = getDirectChildHTMLElementOfKind.getDirectChildHTMLElementOfKind(table, 'tds-table-header')[0];
+        const headerColumnsNo = tableHeader.children.length;
+        // Adjust column count for controls
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
         }
@@ -66,12 +71,13 @@ const TdsTableBody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0e5ac81e32535901ac4940316a474472368cca86', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (index.h(index.Host, { key: 'd449c07d33d9bee1367b30575ac0235ca4c23c48', "data-selected-rows": this.multiselectArrayJSON, class: {
+                'tds-table__body': true,
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, index.h("slot", { key: 'c43f3047fc836b0d7f147e00680befd56b25721c' })));
+            } }, index.h("slot", { key: '8eb5de644e4aa6d05fdaad9c0cab9baa7c0ad3e0' })));
     }
     get host() { return index.getElement(this); }
 };