@scania/tegel 1.12.1 → 1.13.0-table-beta.1

package/dist/cjs/tds-navigation-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);opacity:var(--tds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
 const TdsNavigationTabsStyle0 = navigationTabsCss;
@@ -15,6 +15,7 @@ const TdsNavigationTabs = class {
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
         this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
                 entries.forEach((entry) => {
@@ -25,26 +26,19 @@ const TdsNavigationTabs = class {
                         const style = window.getComputedStyle(navButton);
                         buttonsWidth +=
                             navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-                        navButton.classList.add('tds-navigation-tabs-tab');
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
                     this.scrollWidth = buttonsWidth - componentWidth;
-                    if (this.buttonsWidth > this.componentWidth) {
-                        this.evaluateScrollButtons();
-                    }
-                    else {
-                        this.showLeftScroll = false;
-                        this.showRightScroll = false;
-                    }
+                    this.updateScrollButtons();
                 });
             });
             resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
-            this.children = this.children.map((item, index) => {
-                item.addEventListener('click', () => {
+            this.children.map((item, index) => {
+                const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
                             selectedTabIndex: this.children.indexOf(item),
@@ -55,25 +49,20 @@ const TdsNavigationTabs = class {
                             this.selectedIndex = index;
                         }
                     }
-                });
+                };
+                item.addEventListener('click', clickHandler);
+                this.clickHandlers.set(item, clickHandler); // Store the handler in WeakMap
                 return item;
             });
         };
-        this.componentDidLoad = () => {
-            if (this.selectedIndex === undefined) {
-                this.addEventListenerToTabs();
-                this.children[this.defaultSelectedIndex].setSelected(true);
-                this.selectedIndex = this.defaultSelectedIndex;
-                this.tdsChange.emit({
-                    selectedTabIndex: this.selectedIndex,
-                });
-            }
-            else {
-                this.children[this.selectedIndex].setSelected(true);
-                this.tdsChange.emit({
-                    selectedTabIndex: this.selectedIndex,
-                });
-            }
+        this.removeEventListenerFromTabs = () => {
+            this.children.forEach((item) => {
+                const clickHandler = this.clickHandlers.get(item);
+                if (clickHandler) {
+                    item.removeEventListener('click', clickHandler);
+                    this.clickHandlers.delete(item);
+                }
+            });
         };
         this.modeVariant = 'primary';
         this.defaultSelectedIndex = 0;
@@ -97,6 +86,10 @@ const TdsNavigationTabs = class {
             selectedTabIndex: this.selectedIndex,
         };
     }
+    /** Reinitializes the component. */
+    async reinitialize() {
+        this.handleSlotChange();
+    }
     handleSelectedIndexUpdate() {
         this.children = Array.from(this.host.children).map((tabElement) => {
             tabElement.setSelected(false);
@@ -116,31 +109,65 @@ const TdsNavigationTabs = class {
     }
     evaluateScrollButtons() {
         const scroll = this.navWrapperElement.scrollLeft;
-        if (scroll >= this.scrollWidth) {
-            this.showRightScroll = false;
+        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showLeftScroll = scroll > 0;
+    }
+    initializeTabs() {
+        this.children = Array.from(this.host.children);
+        // remove first and last class from other tabs in case of initialization
+        this.children.forEach((child) => {
+            child.classList.remove('last');
+            child.classList.remove('first');
+        });
+        this.children[0].classList.add('first');
+        this.children[this.children.length - 1].classList.add('last');
+    }
+    initializeSelectedTab() {
+        if (this.selectedIndex === undefined) {
+            this.addEventListenerToTabs();
+            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.showRightScroll = true;
+            this.children[this.selectedIndex].setSelected(true);
         }
-        if (scroll <= 0) {
-            this.showLeftScroll = false;
+        this.tdsChange.emit({
+            selectedTabIndex: this.selectedIndex,
+        });
+    }
+    updateScrollButtons() {
+        if (this.buttonsWidth > this.componentWidth) {
+            this.evaluateScrollButtons();
         }
         else {
-            this.showLeftScroll = true;
+            this.showLeftScroll = false;
+            this.showRightScroll = false;
         }
     }
+    handleSlotChange() {
+        this.initializeTabs();
+        this.addEventListenerToTabs();
+        this.initializeSelectedTab();
+        this.updateScrollButtons();
+        this.addResizeObserver();
+    }
     connectedCallback() {
-        this.children = Array.from(this.host.children);
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.initializeTabs();
+    }
+    componentDidLoad() {
+        this.initializeSelectedTab();
     }
     componentDidRender() {
+        this.updateScrollButtons();
         this.addResizeObserver();
     }
+    disconnectedCallback() {
+        this.removeEventListenerFromTabs();
+    }
     render() {
-        return (index.h(index.Host, { key: '86a8c02e34256be7677e0dffe354a2d96f28dee9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '4f2ac824013bc4a946de48df262dedf25c0fb861', class: "wrapper", ref: (el) => {
+        return (index.h(index.Host, { key: 'eaf7fd47f5f4132d7920d5deafb659828cab01e9', role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: '1fe0e2f45e6cf32175a3ef6c556aa63ba3b46b97', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, index.h("button", { key: 'ab9bcd36a950c8155e1d52400c80a355d6a35692', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("tds-icon", { key: '1720b09524520516fa4364fcd51ac8d9821544f0', name: "chevron_left", size: "20px" })), index.h("slot", { key: '97a4d6d8593f550366aa665dddcb64c5c4118fa2' }), index.h("button", { key: 'd94a7b0f8c5b0d612105bfb9b834431bced085ad', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("tds-icon", { key: '9d9e229f0983ea16814264df1fa30ff19a3e4aed', name: "chevron_right", size: "20px" })))));
+            } }, index.h("button", { key: 'fa71abb901a1c6ab70dde90d759d9aa537a72ec2', class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("tds-icon", { key: '0aff4668869fa761e03e8c81ed054561787beb49', name: "chevron_left", size: "20px" })), index.h("slot", { key: '169f8b9eb18a33fb4fc739863eaf4a730e066c83', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: '9c9757d3c818191ce5aec5bbd64699c04dfc07db', class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("tds-icon", { key: 'e38ac8674d9e3e4aeaa67bd888cd411002353634', name: "chevron_right", size: "20px" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/tds-popover-canvas.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAttributes = require('./inheritAttributes-ff9ad737.js');
 
 const popoverCanvasCss = ".tds-popover-canvas.sc-tds-popover-canvas{box-sizing:border-box;display:inline-block;color:var(--tds-popover-canvas-color);background-color:var(--tds-popover-canvas-background);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}.tds-popover-canvas.sc-tds-popover-canvas *.sc-tds-popover-canvas{box-sizing:border-box}";
@@ -25,10 +25,10 @@ const TdsPopoverCanvas = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '63f2e88645eb5c7332d1e8fa212a18027c0d326b' }, index.h("tds-popover-core", Object.assign({ key: 'ad3db7560cff1f067d677d3b84452646416ddb04' }, this.inheritedAttributes, { class: {
+        return (index.h(index.Host, { key: '5153aa04024220ad4288ed437138b93d74f80a6a' }, index.h("tds-popover-core", Object.assign({ key: '235ec48c061014a672e94b747f27027447bdf12e' }, 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' }), index.h("div", { key: '7adfc7fce2c4e0315a09659286f2eaed429c796d' }, index.h("slot", { key: '9d311008103a8d7f556b63505db92a005ded27c7' })))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click' }), index.h("div", { key: 'e9f2e8770c67fec0702cfbb4f251a40d11068c20' }, index.h("slot", { key: '317abb807c6450672dd33a28f4b9e1b7ded381a6' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-popover-core.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
 var top = 'top';
@@ -1953,7 +1953,7 @@ const TdsPopoverCore = class {
         if (this.autoHide) {
             hostStyle = { display: this.isShown ? 'block' : 'none' };
         }
-        return (index.h(index.Host, { key: 'fee8ab763642a3468d071bc9468104c1f3f86ade', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, index.h("slot", { key: '7a1ead67a1bb6428ac4c5d11cd474c0a75a43988' })));
+        return (index.h(index.Host, { key: 'd6d0d9c0d7268b3cf65f839f6908e881898cb303', style: hostStyle, id: `tds-popover-core-${this.uuid}` }, index.h("slot", { key: '8e61239ce95b4c2d4743c72659314a953601c3be' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const popoverMenuItemCss = ":host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}:host .wrapper{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-popover-menu-color);position:relative;width:100%;display:flex;align-items:center}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{pointer-events:none;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host ::slotted(*:not(tds-icon)){all:unset;width:100%;display:inline-flex;display:flex;align-items:center;gap:10px;padding:10px 16px}:host ::slotted(*:focus-visible)::before{z-index:-1;content:\"\";display:block;position:absolute;width:calc(100% - 4px);height:100%;top:0;left:2px;outline:1px solid var(--tds-blue-400);outline-offset:1px}";
 const TdsPopoverMenuItemStyle0 = popoverMenuItemCss;
@@ -13,10 +13,10 @@ const TdsPopoverMenuItem = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'd528e4a383a508af8a89abd7c1ccc9c555be0985', role: "listitem" }, index.h("div", { key: 'eca4a85e3abb8ae49d449d943b27ba018e83f017', class: {
+        return (index.h(index.Host, { key: 'efdc72f869be19ff2d96dbb2e88610d69011a6ee', role: "listitem" }, index.h("div", { key: '9313583023cc2cf6d21454e979f37de83030476a', class: {
                 wrapper: true,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: 'c385fb8c56598539ada96593d9c357da62cd910d' }))));
+            } }, index.h("slot", { key: 'a12d405a1bc0f1e5ddc75d52c25a8ca0b53d6427' }))));
     }
 };
 TdsPopoverMenuItem.style = TdsPopoverMenuItemStyle0;

package/dist/cjs/tds-popover-menu.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAttributes = require('./inheritAttributes-ff9ad737.js');
 
 const popoverMenuCss = ".tds-popover-menu.sc-tds-popover-menu{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--tds-popover-menu-background);padding:16px 6px;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}.tds-popover-menu.sc-tds-popover-menu *.sc-tds-popover-menu{box-sizing:border-box}.tds-popover-menu.fluid-width.sc-tds-popover-menu{width:unset}tds-popover-core.sc-tds-popover-menu{padding:6px 0 !important}.sc-tds-popover-menu-s>tds-divider{display:block;padding:6px !important}";
@@ -25,11 +25,11 @@ const TdsPopoverMenu = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'd438073ea0cb960456d1455a7a4ce89557f451c5' }, index.h("tds-popover-core", { key: 'd7db34fc034e588d1dc9cc982e13ff48d558fbf4', class: {
+        return (index.h(index.Host, { key: '47943a2179fab944d4cc73f169aec2dc8f2a8c53' }, index.h("tds-popover-core", { key: 'a85fd5e4088454a894bc0ad61be796f07352189f', 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 }, index.h("div", { key: '5ef9521e94dbae3644a7830a0a2d83e0eaeb5960', role: "list" }, index.h("slot", { key: 'c5ec814cfb2f50a44c676d2a638d45b31c290983' })))));
+            }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, index.h("div", { key: 'bd29b75fded2138f37aa48f2c4cb4008817c6fe5', role: "list" }, index.h("slot", { key: '807d404d14fcac1236995a53df36840170643208' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-radio-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
 
 const radioButtonCss = ".tds-radio-button.sc-tds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-radio-button-color)}.tds-radio-button.sc-tds-radio-button *.sc-tds-radio-button{box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;flex-shrink:0;align-self:flex-start}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button+label.sc-tds-radio-button{padding:var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);cursor:pointer}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::before{width:24px;height:24px;left:0;top:0}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button::after{border:1px solid var(--tds-radio-button-interaction-01);background-color:var(--tds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:hover::before{background-color:var(--tds-radio-button-background-hover);opacity:0.12}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus::before{background-color:var(--tds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button{cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button::after{border-color:var(--tds-radio-button-border-color-disabled-after);background-color:var(--tds-radio-button-interaction-02)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled+label.sc-tds-radio-button,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button+label.sc-tds-radio-button{color:var(--tds-radio-button-disabled);cursor:not-allowed}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].disabled.sc-tds-radio-button:hover::before{display:none;opacity:1}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked::after{border:4px solid var(--tds-radio-button-interaction-01)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled:hover::before,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--tds-radio-button-color-disabled-before);box-sizing:content-box}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked:disabled::after,.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:checked.disabled::after{border:4px solid var(--tds-radio-button-interaction-02);background-color:var(--tds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
@@ -26,7 +26,7 @@ const TdsRadioButton = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("div", { key: '9aafb24fd863181b35e79bc9cb9c7f96bb50b40d', class: "tds-radio-button" }, index.h("input", { key: '751443f3801eae8f7e89ee0202ef1e5104c49562', 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() }), index.h("label", { key: 'cb94b936fdf721c7519a2a49c5ef438ca99d9d82', htmlFor: this.radioId }, index.h("slot", { key: '503df03f3b26a378bd7754966853b1b7035580b0', name: "label" }))));
+        return (index.h("div", { key: 'b6c39a5831fdebb5dc6dad6ddf819544a9ae2844', class: "tds-radio-button" }, index.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() }), index.h("label", { key: '3fd2d122f6fe481bcebfda7f0bc90aa4530f1e82', htmlFor: this.radioId }, index.h("slot", { key: 'cb45cf63c06a52dac0704757462a2528464f6e23', name: "label" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-side-menu-close-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
 require('./inheritAttributes-ff9ad737.js');
 
@@ -15,7 +15,7 @@ const TdsSideMenuCloseButton = class {
     }
     render() {
         const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes.inheritAriaAttributes(this.host));
-        return (index.h(index.Host, { key: 'a5c4bb10acbe09c8ca847103e09cdd19fb426999' }, index.h("button", Object.assign({ key: '83943caf6d7d40bb5eb705dcb6e94bfe0c306b80' }, buttonProps), index.h("tds-icon", { key: 'dcdba96d79ed39d0c5fbbbbf3bfb6ecdd728513e', name: "cross", size: "20px" }))));
+        return (index.h(index.Host, { key: '1dff25b895f341657373ab020116e5c4c0f7af67' }, index.h("button", Object.assign({ key: 'e2c3af974cfc7f9c9e0ec5b64c199fcda0408279' }, buttonProps), index.h("tds-icon", { key: 'aa56689766fe0c49e8d8d591c9f741a24dd85cc8', name: "cross", size: "20px" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/tds-side-menu-collapse-button.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--tds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
 const TdsSideMenuCollapseButtonStyle0 = sideMenuCollapseButtonCss;
@@ -36,14 +36,14 @@ const TdsSideMenuCollapseButton = class {
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (index.h(index.Host, { key: '5cf005dbf45135c58dc574040f62943fc3abceb8', role: "button", tabindex: "0", onClick: () => {
+        return (index.h(index.Host, { key: '15266cdc6a39373563c89553817e1a6777f01f1c', role: "button", tabindex: "0", onClick: () => {
                 this.handleClick();
-            } }, index.h("div", { key: 'd3f7b522efd651bca48f721c457cf769722e46f7', class: {
+            } }, index.h("div", { key: '813da1c78798289b4eed8342b6c00a837ae04b24', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, index.h("tds-side-menu-item", { key: '9a9a6fbc8bb1aa8808946a3fe3f996dd35136c27', class: {
+            } }, index.h("tds-side-menu-item", { key: '44321406d890c741fff0ad1df9576588a6658ea5', class: {
                 button: true,
-            } }, index.h("a", { key: '69a96aa2fe967529c777c76b5797d10a1619e548' }, index.h("svg", { key: 'd9995a06672520c8a7bd12e16f912f08702f71d5', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: 'e22a269e31311ce33acfcd7baa6a226ac8b64cf2', "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 && index.h("slot", { key: '8e3efba1392c7c34f5ff3058901889c350d0219c' }))))));
+            } }, index.h("a", { key: '7e214b15daa5dac9df931a5d15f6ed80a52b5f7d' }, index.h("svg", { key: '61928c3ba4c6e2357a426f0c0ca1a0de86365b6a', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.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 && index.h("slot", { key: 'b63370f60320b46557e7d40cfad048e29c60109f' }))))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){border-left:4px solid var(--tds-nav-item-border-color-active);padding-left:20px;background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding-left:56px}";
 const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;
@@ -34,12 +34,12 @@ const TdsSideMenuDropdownListItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f237f24cf38dcabe62f8e4b8bf391a28ac43ca82', role: "listitem" }, index.h("div", { key: '30c152c55d6d4d8174f536e5933d395b67c1c139', class: {
+        return (index.h(index.Host, { key: 'bd99626dab1cff34e10b5da4bc8f9ff22663e31e', role: "listitem" }, index.h("div", { key: '4a736b170841b2c195b86c18758d3e4a9e93193e', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-collapsed': this.collapsed,
-            } }, index.h("slot", { key: '39c61ca1bf9dc9054e175d788c6c4ce5eb823ef3' }))));
+            } }, index.h("slot", { key: 'e6d3f6d36ebd7d73f03d8eed18a86332ff90cd5b' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuDropdownListCss = ":host{display:block;width:190px}:host [role=list]{padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--tds-header-app-launcher-menu-bg)}:host .state-collapsed ::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}";
 const TdsSideMenuDropdownListStyle0 = sideMenuDropdownListCss;
@@ -21,9 +21,9 @@ const TdsSideMenuDropdownList = class {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (index.h(index.Host, { key: '80e91baddfa7619b8b02ecbc5ed72fb332043b6a', role: "list" }, index.h("div", { key: '8a0cefc7095d41e551ef4f8d7297893165d2f3df', class: {
+        return (index.h(index.Host, { key: '87a06385e330eb2d65def2676ff78a09ad87d029', role: "list" }, index.h("div", { key: '284f409bfc8b24cea7047dd631a8895591f18a5c', class: {
                 'state-collapsed': this.collapsed,
-            } }, index.h("slot", { key: '70c5737090b70ac0342cad352d8b109c68571897' }))));
+            } }, index.h("slot", { key: 'fdd823c6bb4fedfe12586edb58805d5588fa07e7' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.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;
@@ -54,13 +54,13 @@ const TdsSideMenuDropdown = class {
         this.open = this.defaultOpen;
     }
     render() {
-        return (index.h(index.Host, { key: 'b6d99ba749b0f3f11183f9c7f62565ca341da964' }, index.h("div", { key: 'e00f31b6379d8b01b0d23a60193ce1ebe88a19da', class: {
+        return (index.h(index.Host, { key: '1bad48953f08e903e9179dae839c93b249f93266' }, index.h("div", { key: '7e8020738796fb8c449f76a3d1aef801151e4e63', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, index.h("tds-side-menu-item", { key: 'e7eabcbbaa65cf1f631108bfafc4a380f617c27b', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, index.h("tds-side-menu-item", { key: 'e4420aba88077e36b1cc7cd10958459d79a463f4', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            } }, index.h("button", { key: '6beaed485451b9d447d7757b16356bc07b717640' }, index.h("slot", { key: '18852e8123e8b060cb7d7438e977f3465b73606b', name: "icon" }), !this.collapsed && (index.h(index.Fragment, { key: '1182a36da0e5aa8e874a6614480c03c9d01182fd' }, this.buttonLabel, index.h("slot", { key: '4b6583fe86ef6679536ca385d02ad176b0b0064f', name: "label" }), index.h("tds-icon", { key: 'c0f5f6790a03beb0e6baa44fd382b844392bcadb', class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), index.h("div", { key: '0428e8146c8047bf84551a95414a7c7c375d5ae2', class: "menu" }, this.collapsed && (index.h("h3", { key: 'aae792c3e56f496ba75f241e21da62f8fa9331e3', class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { key: '965812787e7cecfe03bd42c3c21d59cf826e366c', name: "label" }))), index.h("slot", { key: '3769792ac76dda53db236abef3e51d80879cb921' })))));
+            } }, 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' })))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 const dfs = require('./dfs-84f7f63e.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}}";
@@ -60,12 +60,12 @@ const TdsSideMenuItem = class {
         this.updateSlottedElements();
     }
     render() {
-        return (index.h(index.Host, { key: 'f6d3cc999d431fb73ac49c7e51fa63ea56bf1130' }, index.h("div", { key: '7b0d9eb30d571bf2ec2c9dca91d5d0481b1306b5', class: {
+        return (index.h(index.Host, { key: '13d5211709dbda15ce0e398dab7e2677e15d074c' }, index.h("div", { key: '99cd16c7817451dfbc3e30c59fcb95ebf84c72af', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, index.h("slot", { key: '74815b1ae22bb4d6981a2441e0048ee2e9bacf2d' }))));
+            } }, index.h("slot", { key: '564c191d1bf54f63fa75c32309cd32392a22dc3a' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuOverlayCss = ":host{position:fixed;width:100%;height:100%;background-color:black}div{position:fixed;width:100%;height:100%;pointer-events:none}";
 const TdsSideMenuOverlayStyle0 = sideMenuOverlayCss;
@@ -12,7 +12,7 @@ const TdsSideMenuOverlay = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a958f8d8c7b37fb863118fe6d00dc4b3a37e3327' }, index.h("div", { key: 'f5fdca88eb3de5799dd9384a6c37d8e499bcfc0f' })));
+        return (index.h(index.Host, { key: 'a22924316d030baaa80d15676d514eefe150b9df' }, index.h("div", { key: 'ad453aaa2fcaf52c94f2e7990c6d52f9db7fb55a' })));
     }
 };
 TdsSideMenuOverlay.style = TdsSideMenuOverlayStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
 const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
@@ -14,7 +14,7 @@ const TdsSideMenuUserImage = class {
         this.alt = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f52d600d147e4422c99883473c5453018135edc5' }, index.h("slot", { key: '1ecdae7d2a9d8a42a93c9b4e77ebf885c2308925' }), this.src && index.h("img", { key: 'c2efe65b3cb9102db3019d15ed54a8cbaecef877', src: this.src, alt: this.alt })));
+        return (index.h(index.Host, { key: 'cd4bcc9ba4ce93b20e39ab0782136518a99899a3' }, index.h("slot", { key: '09bf0b847a54c03474e9d5dcaad8d0a5a347dbfc' }), this.src && index.h("img", { key: '8d74e3733d69ac50f4fe07557b91aec07aa74605', src: this.src, alt: this.alt })));
     }
 };
 TdsSideMenuUserImage.style = TdsSideMenuUserImageStyle0;
@@ -29,7 +29,7 @@ const TdsSideMenuUserLabel = class {
         this.subheading = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '361c1868777c78a539e7c36a0acb9963f57fde3c' }, this.heading, this.subheading && index.h("div", { key: 'a1e15c671dcd77841051c52c3e17ef66bbf7730f', class: "subheading" }, this.subheading)));
+        return (index.h(index.Host, { key: '5b26493d17e356fa885a7b615ed4bda03e751eb6' }, this.heading, this.subheading && index.h("div", { key: '2dc511289427ef2ea490fec0308119c42956113c', class: "subheading" }, this.subheading)));
     }
 };
 TdsSideMenuUserLabel.style = TdsSideMenuUserLabelStyle0;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host tds-side-menu-user-image{margin-left:-4px}";
 const TdsSideMenuUserStyle0 = sideMenuUserCss;
@@ -16,7 +16,7 @@ const TdsSideMenuUser = class {
         this.imgAlt = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'bd8d68d6b5d9ca264469f5f3cc89617b832639d5' }, index.h("tds-side-menu-user-image", { key: '403447607a0705653619f81d56f9851c5a6f2627', src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: 'af3203b77ecf7e07d1300d22d2a9f4e8ea75e502', name: "image" })), index.h("tds-side-menu-user-label", { key: '17d6de5a03674a0aed065808d889d115a1d4c639', heading: this.heading, subheading: this.subheading })));
+        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 })));
     }
 };
 TdsSideMenuUser.style = TdsSideMenuUserStyle0;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e35387f4.js');
+const index = require('./index-ca8040ad.js');
 
-const sideMenuCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}}@media (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px;box-sizing:border-box}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:transparent}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}";
+const sideMenuCss = ":host{--tds-scrollbar-width-standard:thin;--tds-scrollbar-width:10px;--tds-scrollbar-height:10px;--tds-scrollbar-thumb-border-width:3px;--tds-scrollbar-thumb-border-hover-width:2px}body{scrollbar-width:thin}:host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%;z-index:500}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .tds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(tds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(tds-side-menu-close-button){opacity:1}:host .state-upper-slot-empty .tds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .tds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}@media (max-width: 992px){:host(.menu-opened){pointer-events:auto;z-index:500}}@media (min-width: 992px){:host(.menu-persistent){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host(.menu-persistent) .wrapper slot[name=overlay]::slotted(tds-side-menu-overlay){display:none}:host(.menu-persistent) .wrapper slot[name=close-button]::slotted(tds-side-menu-close-button){display:none}:host(.menu-persistent) .menu{width:272px}:host(.menu-persistent) .state-closed{display:block}:host(.menu-persistent):host(.menu-collapsed){width:69px;box-sizing:border-box}:host(.menu-persistent):host(.menu-collapsed) .menu{width:68px}:host(.menu-persistent) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .tds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--tds-sidebar-side-menu-background-cover);overflow-y:auto}aside .tds-side-menu-wrapper:hover::-webkit-scrollbar-thumb{border:var(--tds-scrollbar-thumb-border-hover-width) solid transparent;background:var(--tds-scrollbar-hover-thumb-color);background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar{width:var(--tds-scrollbar-width)}aside .tds-side-menu-wrapper::-webkit-scrollbar-track{background:var(--tds-scrollbar-track-color)}aside .tds-side-menu-wrapper::-webkit-scrollbar-thumb{border-radius:40px;background:var(--tds-scrollbar-thumb-color);border:var(--tds-scrollbar-thumb-border-width) solid transparent;background-clip:padding-box}aside .tds-side-menu-wrapper::-webkit-scrollbar-button{height:0;width:0}@supports not selector(::-webkit-scrollbar){aside .tds-side-menu-wrapper{scrollbar-color:var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);scrollbar-width:var(--tds-scrollbar-width-standard)}}";
 const TdsSideMenuStyle0 = sideMenuCss;
 
 const GRID_LG_BREAKPOINT = 992;