@scania/tegel 1.40.0 → 1.41.0-angular-patch-types-beta.0

package/dist/components/tds-navigation-tabs.js

@@ -1,15 +1,28 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const navigationTabsCss = ":host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:\" \";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);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;gap:16px}: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::before,:host .scroll-left-button:focus::before{content:\"\";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}";
-const TdsNavigationTabsStyle0 = navigationTabsCss;
 
 const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigationTabs extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsChange = createEvent(this, "tdsChange", 7);
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
@@ -63,14 +76,6 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
@@ -189,8 +194,8 @@ const TdsNavigationTabs$1 = /*@__PURE__*/ proxyCustomElement(class TdsNavigation
     static get watchers() { return {
         "selectedIndex": ["handleSelectedIndexUpdate"]
     }; }
-    static get style() { return TdsNavigationTabsStyle0; }
-}, [1, "tds-navigation-tabs", {
+    static get style() { return navigationTabsCss; }
+}, [257, "tds-navigation-tabs", {
         "modeVariant": [1, "mode-variant"],
         "defaultSelectedIndex": [2, "default-selected-index"],
         "selectedIndex": [514, "selected-index"],

package/dist/components/tds-popover-canvas.js

@@ -1,4 +1,4 @@
-import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-63552d0e.js';
+import { T as TdsPopoverCanvas$1, d as defineCustomElement$1 } from './p-B569z5eW.js';
 
 const TdsPopoverCanvas = TdsPopoverCanvas$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-3308d5fa.js';
+import { T as TdsPopoverCore$1, d as defineCustomElement$1 } from './p-X1sPx4t5.js';
 
 const TdsPopoverCore = TdsPopoverCore$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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;transition:background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy)}:host .wrapper:hover{cursor:pointer;background-color:var(--tds-popover-menu-background-hover)}:host .wrapper.disabled{cursor:not-allowed;color:var(--tds-popover-menu-divider-disabled-color)}:host .wrapper.disabled:hover{background-color:inherit}:host .wrapper.disabled ::slotted(tds-icon){color:var(--tds-popover-menu-divider-disabled-icon-color)}:host .wrapper.disabled ::slotted(*){pointer-events:none}: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;
 
 const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenuItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** Disables the Popover Menu Item */
         this.disabled = false;
     }
     render() {
@@ -16,8 +18,8 @@ const TdsPopoverMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMe
                 disabled: this.disabled,
             } }, h("slot", { key: 'ddacc7938ca455a8151b2e46449414146073b045' }))));
     }
-    static get style() { return TdsPopoverMenuItemStyle0; }
-}, [1, "tds-popover-menu-item", {
+    static get style() { return popoverMenuItemCss; }
+}, [257, "tds-popover-menu-item", {
         "disabled": [4]
     }]);
 function defineCustomElement$1() {

package/dist/components/tds-popover-menu.js

@@ -1,26 +1,35 @@
-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$2 } from './p-3308d5fa.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { i as inheritAttributes } from './p-CF8bH08v.js';
+import { d as defineCustomElement$2 } from './p-X1sPx4t5.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}";
-const TdsPopoverMenuStyle0 = popoverMenuCss;
 
 const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
-        this.inheritedAttributes = [];
-        this.selector = undefined;
-        this.referenceEl = undefined;
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Controls whether the Popover is shown or not. If this is set hiding and showing
+         * will be decided by this prop and will need to be controlled from the outside. This
+         * also means that clicking outside of the popover won't close it. Takes precedence over `defaultShow` prop.
+         */
         this.show = null;
+        /** Decides if the component should be visible from the start. */
         this.defaultShow = false;
+        /** Decides the placement of the Popover Menu */
         this.placement = 'auto';
+        /** Whether the popover should animate when being opened/closed or not */
         this.animation = 'none';
+        /** Sets the offset skidding */
         this.offsetSkidding = 0;
+        /** Sets the offset distance */
         this.offsetDistance = 8;
+        /** If true this unsets the width (160px) of the Popover Menu */
         this.fluidWidth = false;
+        /** Mode variant of the component, based on current mode. */
         this.modeVariant = null;
-        this.childRef = undefined;
+        this.inheritedAttributes = [];
     }
     /** Property for closing popover programmatically */
     async close() {
@@ -43,8 +52,8 @@ const TdsPopoverMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsPopoverMenu e
             }, defaultShow: this.defaultShow, animation: this.animation }, h("div", { key: 'f1549f6d338ed8e9a511577a85735b834a89df27', role: "menu" }, h("slot", { key: 'def698636f21c11133ad0289b21b76db0f208116' })))));
     }
     get host() { return this; }
-    static get style() { return TdsPopoverMenuStyle0; }
-}, [6, "tds-popover-menu", {
+    static get style() { return popoverMenuCss; }
+}, [262, "tds-popover-menu", {
         "selector": [1],
         "referenceEl": [16],
         "show": [4],

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

@@ -1,28 +1,29 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
-import { g as generateUniqueId } from './p-11648030.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { g as generateUniqueId } from './p-Cn4f8w1e.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:22px;height:22px;left:1px;top:1px}.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)}.tds-radio-button.sc-tds-radio-button .tds-form-input[type=radio].sc-tds-radio-button:focus-visible::before{background-color:var(--tds-radio-button-background-focus);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:focus-visible::after{outline:1px solid var(--tds-radio-button-interaction-outline)}.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)}}";
-const TdsRadioButtonStyle0 = radioButtonCss;
 
 const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.tdsChange = createEvent(this, "tdsChange", 6);
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId();
+        /** Decides if the Radio Button is checked or not. */
+        this.checked = false;
+        /** Decides if the Radio Button is required or not. */
+        this.required = false;
+        /** Decides if the Radio Button is disabled or not. */
+        this.disabled = false;
         this.handleChange = () => {
             this.tdsChange.emit({
                 radioId: this.radioId,
                 value: this.value,
             });
         };
-        this.name = undefined;
-        this.value = undefined;
-        this.radioId = generateUniqueId();
-        this.checked = false;
-        this.required = false;
-        this.disabled = false;
-        this.tdsAriaLabel = undefined;
-        this.tdsTabIndex = undefined;
     }
     /** Method to programmatically focus the radio button element */
     async focusElement() {
@@ -34,8 +35,8 @@ const TdsRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsRadioButton e
         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" }))));
     }
     get host() { return this; }
-    static get style() { return TdsRadioButtonStyle0; }
-}, [6, "tds-radio-button", {
+    static get style() { return radioButtonCss; }
+}, [262, "tds-radio-button", {
         "name": [1],
         "value": [1],
         "radioId": [1, "radio-id"],

package/dist/components/tds-side-menu-close-button.js

@@ -1,14 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { i as inheritAriaAttributes } from './p-0bd4c19c.js';
-import { d as defineCustomElement$2 } from './p-f7d94947.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { i as inheritAriaAttributes } from './p-Q3W78DlP.js';
+import { d as defineCustomElement$2 } from './p-CPDv0bBc.js';
 
 const sideMenuCloseButtonCss = ":host button{height:64px;width:100%;text-align:left;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);display:flex;align-items:center;border-bottom:1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--tds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}";
-const TdsSideMenuCloseButtonStyle0 = sideMenuCloseButtonCss;
 
 const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCloseButton extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     static handleClick() {
@@ -25,8 +26,8 @@ const TdsSideMenuCloseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideM
         return (h(Host, { key: 'de98375064e94f8bfc19a60db7464c6b1c20a46f' }, h("button", Object.assign({ key: '4b9284c8b220d5b9fb0d1e3b346a5dfc209e59e2' }, buttonProps), h("tds-icon", { key: '78a639c37f7a307f42ce68ec239b28c6da8a3221', name: "cross", size: "20px", svgTitle: "Cross" }))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuCloseButtonStyle0; }
-}, [1, "tds-side-menu-close-button"]);
+    static get style() { return sideMenuCloseButtonCss; }
+}, [257, "tds-side-menu-close-button"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tds-side-menu-collapse-button.js

@@ -1,16 +1,18 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$2 } from './p-1dafdc8c.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { d as defineCustomElement$2 } from './p-BxmFjTxG.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;
 
 const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuCollapseButton extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsCollapse = createEvent(this, "tdsCollapse", 3);
         this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
+        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -25,7 +27,6 @@ const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSi
                 });
             }
         };
-        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -43,8 +44,8 @@ const TdsSideMenuCollapseButton$1 = /*@__PURE__*/ proxyCustomElement(class TdsSi
             } }, 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' }))))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuCollapseButtonStyle0; }
-}, [1, "tds-side-menu-collapse-button", {
+    static get style() { return sideMenuCollapseButtonCss; }
+}, [257, "tds-side-menu-collapse-button", {
         "collapsed": [32]
     }, [[16, "internalTdsSideMenuPropChange", "collapseSideMenuEventHandler"]]]);
 function defineCustomElement$1() {

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

@@ -1,13 +1,15 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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-sidebar-item-state-hover);cursor:pointer;position:relative}:host .component ::slotted(a:hover)::before,:host .component ::slotted(button:hover)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-hover-indicator)}:host .component ::slotted(a:hover:focus-visible),:host .component ::slotted(button:hover:focus-visible){background-color:var(--tds-sidebar-item-state-hover);cursor:pointer;position:relative}:host .component ::slotted(a:hover:focus-visible)::before,:host .component ::slotted(button:hover:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-hover-indicator)}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-sidemenu-item-state-active) !important;cursor:pointer;position:relative}:host .component ::slotted(a:active)::before,:host .component ::slotted(button:active)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component ::slotted(a:active:focus-visible),:host .component ::slotted(button:active:focus-visible){background-color:var(--tds-sidemenu-item-state-active) !important;cursor:pointer;position:relative}:host .component ::slotted(a:active:focus-visible)::before,:host .component ::slotted(button:active:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){background-color:var(--tds-header-nav-item-dropdown-opened-background-selected);position:relative}:host .component.component-selected ::slotted(a)::before,:host .component.component-selected ::slotted(button)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}:host .component.component-selected ::slotted(a:focus-visible),:host .component.component-selected ::slotted(button:focus-visible){background-color:var(--tds-header-nav-item-dropdown-opened-background-selected);position:relative}:host .component.component-selected ::slotted(a:focus-visible)::before,:host .component.component-selected ::slotted(button:focus-visible)::before{content:\"\";position:absolute;top:3px;left:3px;width:4px;height:calc(100% - 6px);background-color:var(--tds-sidebar-side-menu-single-subitem-selected-border-color)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding:16px 48px 16px 58px}:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-user:not(.component-collapsed) ::slotted(button){padding:16px 48px 16px 64px}";
-const TdsSideMenuDropdownListItemStyle0 = sideMenuDropdownListItemCss;
 
 const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownListItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -46,8 +48,8 @@ const TdsSideMenuDropdownListItem$1 = /*@__PURE__*/ proxyCustomElement(class Tds
             } }, h("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuDropdownListItemStyle0; }
-}, [1, "tds-side-menu-dropdown-list-item", {
+    static get style() { return sideMenuDropdownListItemCss; }
+}, [257, "tds-side-menu-dropdown-list-item", {
         "selected": [4],
         "dropdownHasIcon": [32],
         "dropdownHasUser": [32],

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

@@ -1,12 +1,13 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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;
 
 const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdownList extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.collapsed = false;
     }
@@ -24,8 +25,8 @@ const TdsSideMenuDropdownList$1 = /*@__PURE__*/ proxyCustomElement(class TdsSide
             } }, h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuDropdownListStyle0; }
-}, [1, "tds-side-menu-dropdown-list", {
+    static get style() { return sideMenuDropdownListCss; }
+}, [257, "tds-side-menu-dropdown-list", {
         "collapsed": [32]
     }, [[16, "internalTdsSideMenuPropChange", "collapsedSideMenuEventHandler"]]]);
 function defineCustomElement$1() {

package/dist/components/tds-side-menu-dropdown.js

@@ -1,20 +1,22 @@
-import { p as proxyCustomElement, H, h, F as Fragment, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-f7d94947.js';
-import { d as defineCustomElement$2 } from './p-1dafdc8c.js';
+import { p as proxyCustomElement, H, h, F as Fragment, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-CPDv0bBc.js';
+import { d as defineCustomElement$2 } from './p-BxmFjTxG.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;
 
 const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuDropdown extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
+        /** If the dropdown should be open from the start. */
         this.defaultOpen = false;
-        this.buttonLabel = undefined;
+        /** If the button that opens the dropdown should appear selected. */
         this.selected = false;
+        /** Toggle open state programmatically */
         this.open = false;
-        this.hoverState = undefined;
         this.collapsed = false;
     }
     collapsedSideMenuEventHandler(event) {
@@ -69,8 +71,8 @@ const TdsSideMenuDropdown$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu
             }, "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' })))));
     }
     get host() { return this; }
-    static get style() { return TdsSideMenuDropdownStyle0; }
-}, [1, "tds-side-menu-dropdown", {
+    static get style() { return sideMenuDropdownCss; }
+}, [257, "tds-side-menu-dropdown", {
         "defaultOpen": [4, "default-open"],
         "buttonLabel": [1, "button-label"],
         "selected": [4],

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-1dafdc8c.js';
+import { T as TdsSideMenuItem$1, d as defineCustomElement$1 } from './p-BxmFjTxG.js';
 
 const TdsSideMenuItem = TdsSideMenuItem$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,19 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.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;
 
 const TdsSideMenuOverlay$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuOverlay extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
     }
     render() {
         return (h(Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
-    static get style() { return TdsSideMenuOverlayStyle0; }
-}, [1, "tds-side-menu-overlay"]);
+    static get style() { return sideMenuOverlayCss; }
+}, [257, "tds-side-menu-overlay"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/tds-side-menu-user-image.js

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuUserImage$1, d as defineCustomElement$1 } from './p-bff614d5.js';
+import { T as TdsSideMenuUserImage$1, d as defineCustomElement$1 } from './p-DuxH3vDC.js';
 
 const TdsSideMenuUserImage = TdsSideMenuUserImage$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { T as TdsSideMenuUserLabel$1, d as defineCustomElement$1 } from './p-3f2187a4.js';
+import { T as TdsSideMenuUserLabel$1, d as defineCustomElement$1 } from './p-CMsPXG7a.js';
 
 const TdsSideMenuUserLabel = TdsSideMenuUserLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-side-menu-user.js

@@ -1,25 +1,22 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-28ef5186.js';
-import { d as defineCustomElement$3 } from './p-bff614d5.js';
-import { d as defineCustomElement$2 } from './p-3f2187a4.js';
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$3 } from './p-DuxH3vDC.js';
+import { d as defineCustomElement$2 } from './p-CMsPXG7a.js';
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:16px;height:68px}";
-const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenuUser extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
-        this.heading = undefined;
-        this.subheading = undefined;
-        this.imgSrc = undefined;
-        this.imgAlt = undefined;
     }
     render() {
         return (h(Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
-    static get style() { return TdsSideMenuUserStyle0; }
-}, [1, "tds-side-menu-user", {
+    static get style() { return sideMenuUserCss; }
+}, [257, "tds-side-menu-user", {
         "heading": [1],
         "subheading": [1],
         "imgSrc": [1, "img-src"],

package/dist/components/tds-side-menu.js

@@ -1,17 +1,31 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.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: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)}}aside [role=navigation]{height:100%;display:flex;flex-direction:column}aside li{list-style:none;padding:0;margin:0}";
-const TdsSideMenuStyle0 = sideMenuCss;
 
 const GRID_LG_BREAKPOINT = 992;
 const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.tdsCollapse = createEvent(this, "tdsCollapse", 7);
         this.internalTdsCollapse = createEvent(this, "internalTdsCollapse", 6);
         this.internalTdsSideMenuPropChange = createEvent(this, "internalTdsSideMenuPropChange", 6);
+        /** Applicable only for mobile. If the Side Menu is open or not. */
+        this.open = false;
+        /** Applicable only for desktop. If the Side Menu should always be shown. */
+        this.persistent = false;
+        /** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
+         * NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
+        this.collapsed = false;
+        this.isUpperSlotEmpty = false;
+        this.isCollapsed = false;
+        /* To preserved initial state of collapsed prop as it is changed in runtime */
+        this.initialCollapsedState = false;
+        /** @internal Tracks the currently focused element index for keyboard navigation */
+        this.activeElementIndex = 0;
         this.handleMatchesLgBreakpointChange = (e) => {
             const isBelowLg = !e.matches;
             if (isBelowLg) {
@@ -22,13 +36,6 @@ const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends
                 this.open = false;
             }
         };
-        this.open = false;
-        this.persistent = false;
-        this.collapsed = false;
-        this.isUpperSlotEmpty = false;
-        this.isCollapsed = false;
-        this.initialCollapsedState = false;
-        this.activeElementIndex = 0;
     }
     handleKeyDown(event) {
         if (event.key === 'Escape' && this.open) {
@@ -156,8 +163,8 @@ const TdsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class TdsSideMenu extends
         "collapsed": ["onCollapsedChange"],
         "open": ["onOpenChange"]
     }; }
-    static get style() { return TdsSideMenuStyle0; }
-}, [1, "tds-side-menu", {
+    static get style() { return sideMenuCss; }
+}, [257, "tds-side-menu", {
         "open": [1028],
         "persistent": [4],
         "collapsed": [1028],