@scania/tegel 1.32.0 → 1.32.2-multibrand-beta.0

package/dist/collection/components/toast/toast.css

@@ -13,28 +13,28 @@
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-information);
+  border-left: 4px solid var(--tds-toast-icon-color-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-information);
+  color: var(--tds-toast-icon-color-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-positive);
+  border-left: 4px solid var(--tds-toast-icon-color-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-positive);
+  color: var(--tds-toast-icon-color-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-negative);
+  border-left: 4px solid var(--tds-toast-icon-color-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-negative);
+  color: var(--tds-toast-icon-color-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-warning);
+  border-left: 4px solid var(--tds-toast-icon-color-warning);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--tds-warning);
+  color: var(--tds-toast-icon-color-warning);
 }
 :host .wrapper button.close {
   height: 20px;
@@ -51,7 +51,8 @@
 }
 :host .wrapper button.close:focus {
   outline: 2px solid var(--tds-blue-400);
-  outline-offset: -2px;
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
 }
 :host .wrapper button.close tds-icon {
   color: var(--tds-toast-dissmiss-color);
@@ -94,9 +95,6 @@
 :host .content .toast-bottom {
   padding-top: 12px;
 }
-:host slot[name=actions]::slotted(*) {
-  color: var(--tds-toast-link-color);
-}
 :host .tds-mode-variant-primary {
   --tds-toast-background: var(--tds-toast-background-primary);
 }

package/dist/collection/components/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
+            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.css

@@ -1,14 +1,31 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+:host {
+  --toggle-switch: var(--color-brand-neutral-white);
+  --toggle-text: var(--color-foreground-text-strong);
+  --toggle-disabled: var(--color-foreground-icon-disabled);
+  --toggle-background-on: var(--color-system-success-default);
+  --toggle-background-off: var(--color-foreground-icon-subtle);
+  --toggle-border-focus: var(--color-foreground-border-accent-focus);
+}
+
 .tds-toggle .disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .tds-toggle .toggle-headline {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-toggle-headline);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--toggle-text);
   margin-bottom: 12px;
 }
 .tds-toggle .toggle-headline.disabled {
-  color: var(--tds-toggle-headline-disabled);
+  user-select: none;
+  color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox] {
   appearance: initial;
@@ -32,47 +49,55 @@
   width: 44px;
   height: 24px;
   border-radius: 16px;
-  background-color: var(--tds-toggle-off-slider);
+  background-color: var(--toggle-background-off);
   left: 0;
+  border: 1px solid transparent;
 }
 .tds-toggle input[type=checkbox]::after {
   width: 16px;
   height: 16px;
-  background-color: var(--tds-toggle-switch);
+  background-color: var(--toggle-switch);
   border-radius: 50%;
   left: 4px;
   top: 4px;
 }
-.tds-toggle input[type=checkbox]:focus, .tds-toggle input[type=checkbox]:hover {
+.tds-toggle input[type=checkbox]:focus {
   outline: none;
+  outline: 2px solid var(--tds-toggle-border-outline);
+  border-radius: 16px;
+  outline-offset: 0;
+}
+.tds-toggle input[type=checkbox]:focus::before {
+  background-color: var(--toggle-disabled);
+  border: 4px solid var(--toggle-border-focus);
 }
-.tds-toggle input[type=checkbox]:focus::before, .tds-toggle input[type=checkbox]:hover::before {
-  background-color: var(--tds-toggle-off-slider-focus);
+.tds-toggle input[type=checkbox]:hover::before {
+  background-color: var(--tds-toggle-off-slider-hover);
   border: 1px solid var(--tds-toggle-off-border-focus);
 }
 .tds-toggle input[type=checkbox]:checked::before {
-  background-color: var(--tds-toggle-on-slider);
-  border: 1px solid var(--tds-toggle-on-border-focus);
+  background-color: var(--toggle-background-on);
+}
+.tds-toggle input[type=checkbox]:checked:focus::before, .tds-toggle input[type=checkbox]:checked:hover::before {
+  border: 4px solid var(--toggle-border-focus);
 }
 .tds-toggle input[type=checkbox]:checked::after {
   left: 24px;
 }
 .tds-toggle input[type=checkbox]:disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .tds-toggle input[type=checkbox]:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::before {
-  background-color: var(--tds-toggle-on-slider-disabled);
-  border: 1px solid var(--tds-toggle-on-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle input[type=checkbox].sm {
   width: 28px;
@@ -87,27 +112,32 @@
   height: 8px;
 }
 .tds-toggle input[type=checkbox].sm:checked::before {
-  background-color: var(--tds-toggle-on-slider);
+  background-color: var(--toggle-background-on);
 }
 .tds-toggle input[type=checkbox].sm:checked::after {
   left: 16px;
 }
 .tds-toggle input[type=checkbox].sm:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox].sm:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle label {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  cursor: pointer;
+  user-select: none;
   display: inline-block;
   vertical-align: middle;
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
-  color: var(--tds-toggle-label-color);
+  color: var(--toggle-text);
   padding-left: 8px;
-  cursor: pointer;
 }
 .tds-toggle label.disabled {
-  color: var(--tds-toggle-label-color-disabled);
+  pointer-events: none;
+  color: var(--toggle-disabled);
 }

package/dist/collection/components/toggle/toggle.js

@@ -29,6 +29,12 @@ export class TdsToggle {
             checked: this.checked,
         };
     }
+    /** Method to programmatically focus the toggle element */
+    async focusElement() {
+        if (this.inputElement) {
+            this.inputElement.focus();
+        }
+    }
     componentWillLoad() {
         this.labelSlot = this.host.querySelector("[slot='label']");
     }
@@ -38,10 +44,10 @@ export class TdsToggle {
         }
     }
     render() {
-        return (h("div", { key: '01d3faf866451cf2e09694d614b1cca9defa1f69', class: "tds-toggle" }, this.headline && (h("div", { key: '2809bf2c3653c20ca6b93280b3391255b2285d8c', class: {
+        return (h("div", { key: '8d59dfac94fd97b568857af3f2c9b6976c692e6c', class: "tds-toggle" }, this.headline && (h("div", { key: 'af9b3285dffdb27cd1e23bd009ac39fb1c1e5373', class: {
                 'toggle-headline': true,
                 'disabled': this.disabled,
-            } }, this.headline)), h("input", { key: '52ab62b4d4c506ca74533ffafc68247accae612b', "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '73f43d7134ff9a9ecded6b8b153b1590014e2a80', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: 'efe7c2a3f76f9990a00b1156d66b78c0e26e6411', name: "label" })))));
+            } }, this.headline)), h("input", { key: 'f01b0cd051dd5aaed33ef2eb6ca4fd352d60ea14', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), this.labelSlot && (h("label", { key: '239363d16e713e28d2309f5db8874a6db20ffede', class: { disabled: this.disabled }, htmlFor: this.toggleId }, h("slot", { key: '6e34820e46f8b9197ad46c1e88a16b7b64821378', name: "label" })))));
     }
     static get is() { return "tds-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -236,6 +242,23 @@ export class TdsToggle {
                     "text": "Toggles the Toggle.",
                     "tags": []
                 }
+            },
+            "focusElement": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to programmatically focus the toggle element",
+                    "tags": []
+                }
             }
         };
     }

package/dist/collection/components/tooltip/tooltip.js

@@ -58,7 +58,7 @@ export class TdsTooltip {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '69ced518e10ea5d65da8266257d7f7bba5db3f63', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '9511b6fb5dcd5a270de5b6f9b50b40271b4f5030' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -71,7 +71,7 @@ export class TdsTooltip {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '8fb6467b2d1fa2ce6a70a171966ff245f8205b55' }))));
     }
     static get is() { return "tds-tooltip"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/accessibility.js

@@ -0,0 +1,30 @@
+/**
+ * Processes HTML content to make it more accessible for screen readers by:
+ * 1. Removing HTML tags while preserving their text content
+ * 2. Converting HTML entities to their text equivalents
+ * 3. Normalizing whitespace
+ *
+ * @param htmlContent - The HTML content to be processed for screen readers
+ * @returns Clean, readable text suitable for screen readers
+ *
+ * @example
+ * // Input: "<p>Hello <b>World</b> &amp; Universe!</p>"
+ * // Output: "Hello World and Universe!"
+ */
+export const processHtmlForScreenReader = (htmlContent) => {
+    if (!htmlContent)
+        return '';
+    return (htmlContent
+        // Remove HTML tags
+        .replace(/<[^>]*>/g, ' ')
+        // Replace common HTML entities with their text equivalents
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&amp;/g, 'and')
+        .replace(/&lt;/g, 'less than')
+        .replace(/&gt;/g, 'greater than')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        // Normalize whitespace
+        .replace(/\s+/g, ' ')
+        .trim());
+};

package/dist/collection/utils/axeHelpers.js

@@ -1,3 +1,12 @@
 import AxeBuilder from "@axe-core/playwright";
-const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region', 'color-contrast'];
-export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).analyze();
+const disabledRules = ['page-has-heading-one', 'landmark-one-main', 'region'];
+const rules = [
+    'best-practice',
+    'wcag2a',
+    'wcag2aa',
+    // 'wcag2aaa', // includes color-contrast-enhanced rule
+    'wcag21a',
+    'wcag21aa',
+    'wcag22aa',
+];
+export const tegelAnalyze = async (page) => new AxeBuilder({ page }).disableRules(disabledRules).withTags(rules).analyze();

package/dist/components/{p-6732b15a.js → p-49f09bc8.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { d as dfs } from './p-52bf0fdf.js';
 
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--tds-sidebar-side-menu-background-cover);font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color);cursor:pointer}:host .component tds-icon{color:red !important}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){background-color:var(--tds-sidebar-item-state-hover)}:host .component:active ::slotted(a),:host .component:active ::slotted(button){background-color:var(--tds-sidemenu-item-state-active)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center;position:relative}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--tds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
+const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:10px;padding:0 22px;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 ::slotted(tds-side-menu-user),:host .component-has-user ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:16px;padding:0 22px 0 16px;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);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px}: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),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user){position:relative;background-color:var(--tds-sidebar-item-state-selected)}:host .component-selected:not(:host .component-active) ::slotted(a)::before,:host .component-selected:not(:host .component-active) ::slotted(button)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";
 const TdsSideMenuItemStyle0 = sideMenuItemCss;
 
 const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem extends H {
@@ -12,14 +12,15 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
         this.selected = false;
         this.active = false;
         this.collapsed = false;
+        this.hasUserComponent = false;
     }
-    updateSlotted(searchPredicate, mutationCallback) {
+    findSlottedAndExecute(searchPredicate, callback) {
         const assignedElements = this.slotEl.assignedElements({ flatten: true });
         const firstSlottedElement = assignedElements[0];
         if (firstSlottedElement) {
             const foundElement = dfs(firstSlottedElement, searchPredicate);
             if (foundElement) {
-                mutationCallback(foundElement);
+                callback(foundElement);
             }
         }
     }
@@ -38,7 +39,16 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
                     element.classList.remove('__tds-side-menu-item-icon-collapsed');
                 }
             };
-            this.updateSlotted(isIconOrSvg, addIconClass);
+            this.findSlottedAndExecute(isIconOrSvg, addIconClass);
+        }
+    }
+    updateHasUserComponent() {
+        if (this.slotEl) {
+            const isUserComponent = (element) => element.tagName.toLowerCase() === 'tds-side-menu-user';
+            this.hasUserComponent = false;
+            this.findSlottedAndExecute(isUserComponent, () => {
+                this.hasUserComponent = true;
+            });
         }
     }
     connectedCallback() {
@@ -51,26 +61,33 @@ const TdsSideMenuItem = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuItem e
     componentDidLoad() {
         this.slotEl = this.host.shadowRoot.querySelector('slot');
         this.updateSlottedElements();
-        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+        this.updateHasUserComponent();
+        this.slotEl.addEventListener('slotchange', () => {
+            this.updateSlottedElements();
+            this.updateHasUserComponent();
+        });
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
         this.updateSlottedElements();
+        this.updateHasUserComponent();
     }
     render() {
-        return (h(Host, { key: 'fac92e8ccc60dac3d6929d30283729f8055c1633' }, h("div", { key: '0cdecbaab4f888daa53c796919644e17732c43ea', class: {
+        return (h(Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
-            } }, h("slot", { key: 'a5ac7145049bac0fb11d9a5ac1d4cbfa764f3bcc' }))));
+                'component-has-user': this.hasUserComponent,
+            } }, h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
     }
     get host() { return this; }
     static get style() { return TdsSideMenuItemStyle0; }
 }, [1, "tds-side-menu-item", {
         "selected": [4],
         "active": [4],
-        "collapsed": [32]
+        "collapsed": [32],
+        "hasUserComponent": [32]
     }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-69109003.js → p-4e5876a2.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAttributes } from './p-3fe9cbbf.js';
-import { d as defineCustomElement$1 } from './p-96e83134.js';
+import { d as defineCustomElement$1 } from './p-61836275.js';
 
 const tooltipCss = ".sc-tds-tooltip-h{position:absolute}.tds-tooltip.sc-tds-tooltip{box-sizing:border-box;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-tooltip-color);background-color:var(--tds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;white-space:normal;max-width:192px;z-index:900;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.tds-tooltip.sc-tds-tooltip *.sc-tds-tooltip{box-sizing:border-box}.tds-tooltip.tds-tooltip-top-left.sc-tds-tooltip{border-radius:0 4px 4px}.tds-tooltip.tds-tooltip-top-right.sc-tds-tooltip{border-radius:4px 0 4px 4px}.tds-tooltip.tds-tooltip-bottom-right.sc-tds-tooltip{border-radius:4px 4px 0}.tds-tooltip.tds-tooltip-bottom-left.sc-tds-tooltip{border-radius:4px 4px 4px 0}.tds-tooltip-show.sc-tds-tooltip{opacity:1;visibility:visible}";
 const TdsTooltipStyle0 = tooltipCss;
@@ -62,7 +62,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e7229ee89dea45931af9d12f04b2f31a9c0f7be2', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: 'e4b263f4414f6ce9d2e557fc5431040d718aff3c' }, this.inheritedAttributes, { class: {
+        return (h(Host, { key: '69ced518e10ea5d65da8266257d7f7bba5db3f63', role: "tooltip", "aria-describedby": this.tdsAriaDescribedby, "aria-label": this.text }, h("tds-popover-core", Object.assign({ key: '9511b6fb5dcd5a270de5b6f9b50b40271b4f5030' }, this.inheritedAttributes, { class: {
                 'tds-tooltip': true,
                 [`tds-tooltip-${this.border}`]: true,
                 [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
@@ -75,7 +75,7 @@ const TdsTooltip = /*@__PURE__*/ proxyCustomElement(class TdsTooltip extends H {
             // @ts-ignore
             onInternalTdsClose: () => {
                 this.show = false;
-            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '41797812218d42837bb56b393a5e20c612cc51ad' }))));
+            }, defaultShow: this.defaultShow }), this.text, h("slot", { key: '8fb6467b2d1fa2ce6a70a171966ff245f8205b55' }))));
     }
     get host() { return this; }
     static get style() { return TdsTooltipStyle0; }

package/dist/components/{p-516d8085.js → p-58fd585c.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
 import { i as inheritAttributes } from './p-3fe9cbbf.js';
-import { d as defineCustomElement$1 } from './p-96e83134.js';
+import { d as defineCustomElement$1 } from './p-61836275.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}";
 const TdsPopoverCanvasStyle0 = popoverCanvasCss;