@scania/tegel 1.41.0 → 1.42.0-sass-migration-beta.0

package/dist/esm/tds-inline-tabs.entry.js

@@ -29,7 +29,8 @@ const TdsInlineTabs = class {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -99,16 +100,22 @@ const TdsInlineTabs = class {
         this.children[this.selectedIndex].setSelected(true);
     }
     scrollRight() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -172,9 +179,9 @@ const TdsInlineTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'f33abd9071c85c0651a3ab93e3996ec44717e325', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '8a5233b2a941a3a1e72dc45f93015b5e606663a8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '0983f0230e29f70eb94c0c964a0ee21e2b0eb3ee', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'caad52caccbc0e284330e6ee76d98b5dd289f257', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f2a8051863cfa93f8b2a5c562fc5ebefcc36b195', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a93d1cb8ddc5486bbb15449c328a25f6e8e2b4cd', name: "chevron_left", size: "20px" })), h("slot", { key: 'e5b096420d72d12c861730fd9829baeba7cce625', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'f154a7b6553fe77e3f09da314403db5326df8e21', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '6832c693ab8a446a629788894f792f571c09cbe3', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'f8b74dc2751a33696f02b407fbb7fa87df9c5929', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2f0e128a9e9195f972fa991266fd0aa14264125d', name: "chevron_left", size: "20px" })), h("slot", { key: 'dc120e26f2558ce75bdb57b56031ebd320805a53', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '590495e6463a4c6d0118b9a32acb23f361a23071', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '5d0470213d023c65d911acced266d962f3b7e109', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/tds-message.entry.js

@@ -39,11 +39,11 @@ const TdsMessage = class {
     render() {
         const headerId = this.header ? `tds-message-header-${generateUniqueId()}` : undefined;
         const contentId = !this.minimal ? `tds-message-content-${generateUniqueId()}` : undefined;
-        return (h(Host, { key: 'ac71829f0647270d499469049a833c282abca25d', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'ae95905137e70a95e6013e643e43baec0c10792b', class: {
+        return (h(Host, { key: '01749666a846692acb3a6ad248a26799056c85bb', role: this.tdsAlertDialog, "aria-describedby": contentId, "aria-label": this.getAriaLabel(), class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'b1c54dcb5e116236a21f199563a25ebe4a043f38', class: {
                 wrapper: true,
                 [this.variant]: true,
                 minimal: this.minimal,
-            } }, !this.noIcon && (h("tds-icon", { key: 'ea830e6051ef9e0f751a1e8d5e24fbd17ad6ec58', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'c71e70d57147d9ac050e7a223ed097e58cb6a49e', class: `content` }, this.header && (h("div", { key: '1acded0a8f8522792f41a4331a2009a42cbf4894', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '0aed7c6daf7892e6ac1d5b3f8715e7c9032b11a3', class: "extended-message", id: contentId }, h("slot", { key: '75898f0a957581dc2720667c3eaae6e17201d81c' })))))));
+            } }, !this.noIcon && (h("tds-icon", { key: 'af587ad39d63aa39d357868e3cce36bc39a7abec', "aria-hidden": "true", "aria-label": `${this.variant}`, svgTitle: `${this.variant}`, name: this.getIconName(), size: "20px" })), h("div", { key: 'ebeefca2d55f3f4fce02574e18553617d52cbe5a', class: `content` }, this.header && (h("div", { key: 'b9db92aab10d95235846bec90c8cb0760da29285', class: "header", id: headerId }, this.header)), !this.minimal && (h("div", { key: '4c2693fe0498607f687ca3adba0afb1ef27e91e5', class: "extended-message", id: contentId }, h("slot", { key: 'ace8c564c874fff787c7e844ba5f3deafb76cbf6' })))))));
     }
 };
 TdsMessage.style = TdsMessageStyle0;

package/dist/esm/tds-modal.entry.js

@@ -132,7 +132,7 @@ const TdsModal = class {
     }
     returnFocusOnClose() {
         var _a;
-        let referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+        const referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
         if (!referenceElement) {
             return; // no element to return focus to
         }
@@ -150,6 +150,7 @@ const TdsModal = class {
         }
     }
     getFocusableElements() {
+        var _a, _b;
         const focusableSelectors = [
             'a[href]',
             'button:not([disabled])',
@@ -158,7 +159,7 @@ const TdsModal = class {
             'select:not([disabled])',
             '[tabindex]:not([tabindex="-1"])',
         ].join(',');
-        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
         const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
         /** Focusable elements */
         return [...focusableInShadowRoot, ...focusableInSlots];
@@ -207,10 +208,10 @@ const TdsModal = class {
         const usesActionsSlot = hasSlot('actions', this.host);
         const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
         const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '4a220f8d1156cd7ef30ba0f77e33f6b368a71c5d', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: 'ea3b7f2718b71010bbcbaf52ebaab68f9ef82b56', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '2129611789e7d9c1e32731f59100f75ff4e58800', class: "tds-modal-backdrop" }), h("div", { key: 'cce280887ce68ab5471cd939847c8f23703e6a11', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '2629204523dff0d2afefab238514db74b9d1a93b', id: headerId, class: "header" }, this.header && h("div", { key: '040ddd22c7b782d77e07cc1ff4cd1fdf0d508cbe', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '7b15247fea7c3ab2986e453b98e7a7f9ccff943f', name: "header" }), this.closable && (h("button", { key: '67e09f9f95ad58e02c1f9adb9883af4a1c16f837', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '52694db7eb7dc40ca2ea8aeb3e13611f899177a8', name: "cross", size: "20px" })))), h("div", { key: 'b7fedc44fae5a964399f6b63fad96acaba9263a1', id: bodyId, class: "body" }, h("slot", { key: 'd60cbee2a55a487f738aa9a741d8b1e0cb74484e', name: "body" })), usesActionsSlot && h("slot", { key: 'c969e1f820a4f4ecfab84fe3349eee0233710f05', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'bbcd30e1d4a0b2f7c42c715b2106d3e51105db2d', class: "tds-modal-backdrop" }), h("div", { key: 'b6f6115e1e021a9dd9e0d5a687dd69d00f6f9d7b', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '860339a0f603eb019b91ba44a7745b6b5039923b', id: headerId, class: "header" }, this.header && h("div", { key: '74ba6be10757cd78f6b9d7201c75cc02a43690a7', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '37f895c645cf402b23d923fd84e8ec3669dfd2b5', name: "header" }), this.closable && (h("button", { key: '36c78defa9593a1c81cc8e4cef5a45361476d7ca', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: 'dd7d537d589b80e9f6604a085a5ee25d3e9cbd4d', name: "cross", size: "20px" })))), h("div", { key: '1f0f95296f973405119fbd22dd30405944e224de', id: bodyId, class: "body" }, h("slot", { key: '8326ceb74bd9148b0d21b18984f7d0584e8c8976', name: "body" })), usesActionsSlot && h("slot", { key: '7aad6700fe09dc183f721cda2a2e83acbe9afa60', name: "actions" }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -29,7 +29,8 @@ const TdsNavigationTabs = class {
                     this.updateScrollButtons();
                 });
             });
-            resizeObserver.observe(this.navWrapperElement);
+            if (this.navWrapperElement)
+                resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
             this.children = Array.from(this.host.children);
@@ -97,16 +98,22 @@ const TdsNavigationTabs = class {
         this.children[this.selectedIndex].setSelected(true);
     }
     scrollRight() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     scrollLeft() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;
         this.evaluateScrollButtons();
     }
     evaluateScrollButtons() {
+        if (!this.navWrapperElement)
+            return;
         const scroll = this.navWrapperElement.scrollLeft;
         this.showRightScroll = scroll <= this.scrollWidth;
         this.showLeftScroll = scroll > 0;
@@ -172,15 +179,15 @@ const TdsNavigationTabs = class {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'cdf0eff9acca827e372a58f5721ff9279b0360f4', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'a8fafbc680fbdb0450db591e7f3ffda864946684', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '3e4eb6108e33a2adb56334746c7ba9d264c493fe', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'adbc2c78468d0edb2a3cdca6f5218dfb7eead4cf', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '402e0ca33fa71dced98cf8d86e26e3dba312fa7d', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '682437d69fbcfece6fbb7fb5add8f02b0f9e42ea', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2849a2da7c6ef133d173756778400baa2a51d58d', name: "chevron_left", size: "20px" })), h("slot", { key: '64081b7518abde00c8f1d80ff414849bccd1cb0b', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '916ba6b9107982f8b8763920bdf4e2bd99127943', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f1635b2bea58e6a19942fc2477db1eee441585c8', name: "chevron_left", size: "20px" })), h("slot", { key: '7bf40f08d61ee18cf3db5e8862a4e748efef3108', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '74be9b7aa445732e570dddac73df434ce3815a44', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '26f84d67bc4b1eb04668464a74b655db1953d999', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '953912a65fa7e4f67633c8ea0e30e8883f5af641', name: "chevron_right", size: "20px" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -7,7 +7,7 @@ const TdsPopoverCanvasStyle0 = popoverCanvasCss;
 const TdsPopoverCanvas = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = [];
+        this.inheritedAttributes = {};
         this.selector = undefined;
         this.referenceEl = undefined;
         this.defaultShow = false;
@@ -31,14 +31,14 @@ const TdsPopoverCanvas = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '8f22b74f8df985de4505b1472cf47b621d5c515e', class: {
+        return (h(Host, { key: 'a4203920290fc5778952324bd349b136a2c3dce8', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", Object.assign({ key: 'a7d3fed2b26cd2dc532e9e78413828d52b28b21e', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
+            } }, h("tds-popover-core", Object.assign({ key: 'cab065d1bfbd9a952e7662541de050a9a67c90bb', role: this.tdsAlertDialog }, this.inheritedAttributes, { class: {
                 'tds-popover-canvas': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, modifiers: this.modifiers, trigger: 'click', ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: '3c1fde8225ca64b259798f763b8d2264346c246e' }, h("slot", { key: 'e133b76f8088a4b572c8bb69792bc3fa6d652da9' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }), h("div", { key: 'cc05cad76faaf82ec2f50c748b93092667aff374' }, h("slot", { key: '36ebe3e4eb4c9f11d885b0a609422f8cc57a5f7d' })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1940,6 +1940,7 @@ const TdsPopoverCore = class {
         }
     }
     initialize({ referenceEl, trigger, }) {
+        var _a, _b, _c, _d, _e, _f;
         this.cleanUp();
         if (typeof referenceEl !== 'undefined') {
             this.target = referenceEl;
@@ -1966,9 +1967,9 @@ const TdsPopoverCore = class {
             console.error(`Could not initialize: reference element not found.`);
         }
         if (trigger === 'click' && this.show === null) {
-            this.target.addEventListener('click', this.onClickTarget);
+            (_a = this.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.onClickTarget);
             // Also handle keyboard activation via Enter and Space
-            this.target.addEventListener('keydown', (e) => {
+            (_b = this.target) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                     e.preventDefault();
                     this.openedByKeyboard = true;
@@ -1978,11 +1979,11 @@ const TdsPopoverCore = class {
         }
         if (trigger === 'hover' || trigger === 'hover-popover') {
             // For tabbing over element
-            this.target.addEventListener('focusin', this.handleShow);
-            this.target.addEventListener('focusout', this.handleHide);
+            (_c = this.target) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', this.handleShow);
+            (_d = this.target) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', this.handleHide);
             // For hovering over element with selector
-            this.target.addEventListener('mouseenter', this.handleShow);
-            this.target.addEventListener('mouseleave', this.handleHide);
+            (_e = this.target) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseenter', this.handleShow);
+            (_f = this.target) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseleave', this.handleHide);
             // For hovering over Popover itself
             if (trigger === 'hover-popover') {
                 this.host.addEventListener('mouseenter', this.handleShow);
@@ -2024,10 +2025,11 @@ const TdsPopoverCore = class {
         }
     }
     componentDidRender() {
+        var _a;
         if (this.isShown && !this.renderedShowValue && !this.disableLogic) {
             // Here we update the popper position since its position is wrong
             // before it is rendered.
-            this.popperInstance.update();
+            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
         }
         this.renderedShowValue = this.isShown;
     }
@@ -2043,7 +2045,7 @@ const TdsPopoverCore = class {
             'tds-animation-exit-fade': !this.isShown && this.animation === 'fade',
         };
         const classList = generateClassList(classes);
-        return (h(Host, { key: '5c557610103827aedbabbd37a79730580d15ca2d', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '487a937b3c9d87b91425f6bd9eb88bc3fa85d7df' })));
+        return (h(Host, { key: '60b658912943cddce1f2614e82f0c7c5ad69ae8b', role: this.host.getAttribute('role'), class: classList, id: `tds-popover-core-${this.uuid}` }, h("slot", { key: '0c4afc0d1a7877645239ccc17a28d50b0eb338e5' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -7,7 +7,7 @@ const TdsPopoverMenuStyle0 = popoverMenuCss;
 const TdsPopoverMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.inheritedAttributes = [];
+        this.inheritedAttributes = {};
         this.selector = undefined;
         this.referenceEl = undefined;
         this.show = null;
@@ -30,15 +30,15 @@ const TdsPopoverMenu = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ad39066c2a2f7d4e4696143095fa8a0032d7c148', class: {
+        return (h(Host, { key: 'cc1c55cdc6112cca33087fd541b2bb60489d1368', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-            } }, h("tds-popover-core", { key: 'f261b18f6e1e26df1baf39628911cb885277b431', class: {
+            } }, h("tds-popover-core", { key: 'fb4da1823553dddf0e1a45a5626dfac3589ade1a', class: {
                 'tds-popover-menu': true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
                 'fluid-width': this.fluidWidth,
             }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance, ref: (el) => {
                 this.childRef = el;
-            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
+            }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: '5b0a938b6e36afee22effcc2e19bae366fc7ef67', role: "menu" }, h("slot", { key: 'bf2631a96e721287936797c9865ea56d134cfabc' })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -30,7 +30,10 @@ const TdsRadioButton = class {
         }
     }
     render() {
-        return (h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '6bc9711fae2e1ea4b8bc18cd441a364eb0bc4d9c', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "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(), tabIndex: this.tdsTabIndex }), h("label", { key: 'b2dbeea2ca194adea717086ba0d69d023860324d', htmlFor: this.radioId }, h("slot", { key: '422fab6ae9d579cf46d4110a61782a501dfb6a2a', name: "label" }))));
+        return (h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, h("input", { key: '591550d8bf69ddc6f51f81c012b92f61d850ba6e', ref: (inputEl) => {
+                if (inputEl)
+                    this.inputElement = inputEl;
+            }, "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "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(), tabIndex: this.tdsTabIndex }), h("label", { key: '203bfad85ba5a8387fdfcb8d65fbeb0d8a0dd9ad', htmlFor: this.radioId }, h("slot", { key: 'a2b470cab8cfcab9c9120ac17af63c1261f2b926', name: "label" }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -28,16 +28,17 @@ const TdsSideMenuCollapseButton = class {
         this.collapsed = event.detail.collapsed;
     }
     connectedCallback() {
+        var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = this.sideMenuEl.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: 'e8b3276624a214cfa8d8c8a7bbb6757d1a6fe1c3' }, h("div", { key: '1c17452256ad8ca0f901178bdf2120076508ee84', class: {
+        return (h(Host, { key: '551e4feada40e0877a83f9f117d12f064e7134f7' }, h("div", { key: '2ed47deec275d0f61525f1b441f2d6cca94e9961', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '064ec6d7ea6ed2b13223cba39268f484146fee0a', class: { button: true } }, h("button", { key: 'd391bfe9a1e31e85f168b7261b92941b3e64693e', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+            } }, h("tds-side-menu-item", { key: 'b3bb7346da645c12940a5465c4dc18c148fd1c85', class: { button: true } }, h("button", { key: 'b659aa47f9096384b90852495643b46e76a9bcb8', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
                 this.handleClick();
-            } }, h("svg", { key: '23a6362a7d6ab754d08ac439314fc94e37ec3a88', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '17a188de96b29b501b76294d8dac4f852edc22a3', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'a1a2408ee34830a190408c808935e33eed8bce5b' }))))));
+            } }, h("svg", { key: 'c4e533d201f1fca3c833efbbfad632e825d1c7e2', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '7317991b2bcfb52f9ab3695f80993fbc1e95093c', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && h("slot", { key: 'c347df9c72a4f83de4b9d2ae84a4c659867209d5' }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -17,16 +17,20 @@ const TdsSideMenuDropdownListItem = class {
     connectedCallback() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         const dropdownEl = this.host.closest('tds-side-menu-dropdown');
-        const hasUserMenu = dropdownEl === null || dropdownEl === void 0 ? void 0 : dropdownEl.querySelector('tds-side-menu-user');
-        const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="icon"]');
-        const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
-        const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
-        const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'tds-side-menu-user-image';
+        let hasUserMenu = null;
+        let dropdownBtnIconSlotEl = null;
+        if (dropdownEl) {
+            hasUserMenu = dropdownEl.querySelector('tds-side-menu-user');
+            dropdownBtnIconSlotEl = (_a = dropdownEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="icon"]');
+        }
+        const btnIconSlottedEls = dropdownBtnIconSlotEl === null || dropdownBtnIconSlotEl === void 0 ? void 0 : dropdownBtnIconSlotEl.assignedElements();
+        const hasBtnIcon = btnIconSlottedEls ? (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0 : false;
+        const btnIconIsUserImage = ((_b = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _b === void 0 ? void 0 : _b.tagName.toLowerCase()) === 'tds-side-menu-user-image';
         if (hasBtnIcon && !btnIconIsUserImage) {
             this.dropdownHasIcon = true;
         }
@@ -35,13 +39,13 @@ const TdsSideMenuDropdownListItem = class {
         }
     }
     render() {
-        return (h(Host, { key: '7d711b603579ec67a9f0312071519e31f4a15709', role: "listitem" }, h("div", { key: 'db890287036e3e85f10f7c76454e8ca91ada6f7c', class: {
+        return (h(Host, { key: 'c47d9154b70987212a197a4e1cee3e031c3a5934', role: "listitem" }, h("div", { key: 'd35ce4e0371380a76e59ee983ce32c33a3aa8167', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
+            } }, h("slot", { key: '915f92493f1a085f66501d0fbe361818e7dbc63f' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -14,12 +14,12 @@ const TdsSideMenuDropdownList = class {
     connectedCallback() {
         var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     render() {
-        return (h(Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
+        return (h(Host, { key: 'decb6d57d600ca24140d9cc4d47bdf44f3c34fe4', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '4b41cce5b765b236fba4f965c32652f9594c9c51', class: {
                 'state-collapsed': this.collapsed,
-            } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
+            } }, h("slot", { key: 'c399388267e8ba6885af0cc0bd8a69bf39c52b7b' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -51,18 +51,19 @@ const TdsSideMenuDropdown = class {
         return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
     }
     connectedCallback() {
+        var _a;
         this.sideMenuEl = this.host.closest('tds-side-menu');
-        this.collapsed = this.sideMenuEl.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
         this.open = this.defaultOpen;
     }
     render() {
-        return (h(Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
+        return (h(Host, { key: 'aeebdc5563c944b02881d11b12387dbc85c82344' }, h("div", { key: '2c6c44cb14b10c0859d0215928bfc5e69be7b8b4', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, h("tds-side-menu-item", { key: 'ef2ee724b9d9db5e3cce2596abd27a8170e2181e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (h(Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, h("button", { key: 'f1bf8718d877ea78d339c7501cb20432eb64e0aa' }, h("slot", { key: 'dd3cff6f183511fbbf7dba4b31cfb3805bd74f81', name: "icon" }), !this.collapsed && (h(Fragment, { key: '27efe259a8726195e2dfb355ef03e4a88ee72082' }, this.buttonLabel, h("slot", { key: 'd8e952a51054b8f7d143acf1ebfe8326d32a332e', name: "label" }), h("tds-icon", { key: '7edd1d7a66814451a056b578fa8c7e068dabcdd8', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), h("div", { key: '5fb9c3e88e1aefeb38c2f46a18dfc221772b689c', class: "menu", tabindex: this.collapsed ? '0' : undefined }, this.collapsed && (h("h3", { key: '56397951c8c3486719f291a0e283703397ae243d', class: "heading-collapsed" }, this.buttonLabel, h("slot", { key: '7fc3a35c7506345dc72a64989acf98e1483c126f', name: "label" }))), h("slot", { key: '4e95b1c1fa64906d937788e0c27c64c4e06b7b73' })))));
     }
     get host() { return getElement(this); }
 };

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

@@ -13,7 +13,10 @@ const TdsSideMenuItem = class {
         this.hasUserComponent = false;
     }
     findSlottedAndExecute(searchPredicate, callback) {
-        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        var _a;
+        const assignedElements = (_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true });
+        if (!(assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length))
+            return;
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
@@ -54,16 +57,19 @@ const TdsSideMenuItem = class {
         // 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.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+        this.collapsed = !!((_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed);
     }
     componentDidLoad() {
-        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        var _a, _b;
+        this.slotEl = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot')) !== null && _b !== void 0 ? _b : null;
         this.updateSlottedElements();
         this.updateHasUserComponent();
-        this.slotEl.addEventListener('slotchange', () => {
-            this.updateSlottedElements();
-            this.updateHasUserComponent();
-        });
+        if (this.slotEl) {
+            this.slotEl.addEventListener('slotchange', () => {
+                this.updateSlottedElements();
+                this.updateHasUserComponent();
+            });
+        }
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -71,13 +77,13 @@ const TdsSideMenuItem = class {
         this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', class: {
+        return (h(Host, { key: 'ff51604316231f08db7135c89336aa40a34ca780' }, h("div", { key: '7ba6d6ad1646cdcca89ba014eb20115ead57a9cc', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
+            } }, h("slot", { key: '43b400894c86a51cc1dbe910f8eecab31fad4c45' }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -40,7 +40,8 @@ const TdsSideMenu = class {
         this.initialCollapsedState = this.collapsed;
     }
     componentDidLoad() {
-        const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+        var _a;
+        const upperSlot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
         const upperSlotElements = upperSlot.assignedElements();
         const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
         if (!hasUpperSlotElements) {
@@ -84,7 +85,7 @@ const TdsSideMenu = class {
         }
     }
     getFocusableElements() {
-        var _a;
+        var _a, _b, _c;
         const focusableSelectors = [
             'a[href]',
             'button:not([disabled])',
@@ -93,11 +94,13 @@ const TdsSideMenu = class {
             'select:not([disabled])',
             '[tabindex]:not([tabindex="-1"])',
         ].join(',');
-        const focusableInShadowRoot = Array.from(this.host.shadowRoot.querySelectorAll(focusableSelectors));
+        const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
         const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
-        const closeBtn = (_a = this.host
-            .querySelector('[slot="close-button"]')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('button');
-        let focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
+        const slottedBtn = this.host.querySelector('[slot="close-button"]');
+        let closeBtn;
+        if (slottedBtn)
+            closeBtn = (_c = slottedBtn.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button');
+        const focusableElements = [...focusableInShadowRoot, ...focusableInSlots];
         if (closeBtn)
             focusableElements.push(closeBtn);
         /** Focusable elements */
@@ -138,16 +141,16 @@ const TdsSideMenu = class {
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (h(Host, { key: '62d159fdff0e4dd3d2a93e0c5542b8e672e3f287', class: {
+        return (h(Host, { key: '9e5d7f1ba74c0d6cbc0718e3ee484e158dd285c4', class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '17134ffc1c3ca6658f4ff87c203ca3b6ba991b83', class: {
+            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '2232f6fdde0d7bf4b6225b3007feeb5b86699dda', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, h("slot", { key: '8ed1f309c2188e6de12b874198c36a4698d7a69f', name: "overlay" }), h("aside", { key: '45702b7ff79693b31565550fc1985bfd64e45f92', class: `menu` }, h("div", { key: 'e799983a07a07ad0f4cac8e962e1748d08107b6b', role: "navigation" }, h("slot", { key: '4550b56dae039b94005dd58c8c5cb9818c3ab48a', name: "close-button" }), h("div", { key: 'ad2457482eb6dc9b08428f36078d53143f7b5168', class: "tds-side-menu-wrapper" }, h("ul", { key: '541323ca57ed67565c848a984bd3ac210ce6f135', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: '6248720390640a1166e1158caa0f50164fe1dfad' }, h("slot", { key: 'b3d24d582d4781fef041a2c099681fd538d01910' }))), h("ul", { key: '0a5f76474b4b3851d790ab8f698dbea9fd0fda05', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '576cf3e91cac7c1a21e6b35105475f1f443c2f45' }, h("slot", { key: '71f9c2d1c061401ef26daf68c7801b5665a25d03', name: "end" })))), h("slot", { key: '41805c2bb7c66f74f47edd2393a9a3452132c769', name: "sticky-end" }))))));
+            } }, h("slot", { key: '26fc446848ef685421cb9fed4b9c633d76104c1c', name: "overlay" }), h("aside", { key: 'd91e1e9d72b8adfa9cd4fb432145cc3ca80574bf', class: `menu` }, h("div", { key: '2b7c94d205caec161cf6cf0442f917828fe3d665', role: "navigation" }, h("slot", { key: 'c7e11cd09171a49363a765fac87da5333247943d', name: "close-button" }), h("div", { key: 'd7273516d1b4104c0736ec547cf47aba5f094d99', class: "tds-side-menu-wrapper" }, h("ul", { key: '46cb7afded919e25b9419cfffb85cbfd06c99b6f', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: 'b337af4217469b83d70faf380c3f36d6689c071d' }, h("slot", { key: 'f5fb8d9a9be3d1e121c9ccad7086a56993d739b6' }))), h("ul", { key: '159157ffa0881b8731c3b62644007dcefd72670f', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '3e9fbf4ba3823ee12c9d5b9bfbc4c6b45a7599de' }, h("slot", { key: '385756d7a9f855921cfa835e26ab02bc7cc01833', name: "end" })))), h("slot", { key: '53c64695d4e490bf180fe8e1dd52ab6b5e0f0447', name: "sticky-end" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {