@scania/tegel 1.38.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -1,31 +1,28 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+var index = require('./index-Cpz8G-hs.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
+        /** Unique Radio Button identifier. */
+        this.radioId = generateUniqueId.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.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,10 +31,10 @@ const TdsRadioButton = class {
         }
     }
     render() {
-        return (index.h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, index.h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', 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 }), index.h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, index.h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
+        return (index.h("div", { key: '48a31826daeef320097430deec2f57188ad3cd80', class: "tds-radio-button" }, index.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 }), index.h("label", { key: 'b2dbeea2ca194adea717086ba0d69d023860324d', htmlFor: this.radioId }, index.h("slot", { key: '422fab6ae9d579cf46d4110a61782a501dfb6a2a', name: "label" }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsRadioButton.style = TdsRadioButtonStyle0;
+TdsRadioButton.style = radioButtonCss;
 
 exports.tds_radio_button = TdsRadioButton;

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

@@ -1,13 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const inheritAriaAttributes = require('./inheritAriaAttributes-dedbbc57.js');
-require('./inheritAttributes-ff9ad737.js');
+var index = require('./index-Cpz8G-hs.js');
+var inheritAriaAttributes = require('./inheritAriaAttributes-D_xFGssc.js');
+require('./inheritAttributes-CGw91JfB.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 = class {
     constructor(hostRef) {
@@ -24,10 +21,10 @@ const TdsSideMenuCloseButton = class {
         const sideMenuEl = this.host.closest('tds-side-menu');
         const sideMenuId = sideMenuEl ? sideMenuEl.id : '';
         const buttonProps = Object.assign(Object.assign(Object.assign({ 'aria-label': 'Close' }, (sideMenuId && { 'aria-controls': sideMenuId })), inheritAriaAttributes.inheritAriaAttributes(this.host)), { 'onClick': TdsSideMenuCloseButton.handleClick });
-        return (index.h(index.Host, { key: 'b0e953d2148179c2a4fd1ed352b9024f6939c77c' }, index.h("button", Object.assign({ key: 'cd5f48b31d9eb62f4327a2918351920d961c446f' }, buttonProps), index.h("tds-icon", { key: 'f007bf92a2ba7186006aa4dd5126820108badecf', name: "cross", size: "20px", svgTitle: "Cross" }))));
+        return (index.h(index.Host, { key: 'de98375064e94f8bfc19a60db7464c6b1c20a46f' }, index.h("button", Object.assign({ key: '4b9284c8b220d5b9fb0d1e3b346a5dfc209e59e2' }, buttonProps), index.h("tds-icon", { key: '78a639c37f7a307f42ce68ec239b28c6da8a3221', name: "cross", size: "20px", svgTitle: "Cross" }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuCloseButton.style = TdsSideMenuCloseButtonStyle0;
+TdsSideMenuCloseButton.style = sideMenuCloseButtonCss;
 
 exports.tds_side_menu_close_button = TdsSideMenuCloseButton;

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

@@ -1,17 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsCollapse = index.createEvent(this, "tdsCollapse", 3);
         this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
+        this.collapsed = false;
         this.handleClick = () => {
             /** Emit a public event that the user can prevent. */
             const tdsCollapseEvent = this.tdsCollapse.emit({
@@ -26,7 +24,6 @@ const TdsSideMenuCollapseButton = class {
                 });
             }
         };
-        this.collapsed = false;
     }
     collapseSideMenuEventHandler(event) {
         this.collapsed = event.detail.collapsed;
@@ -36,17 +33,15 @@ const TdsSideMenuCollapseButton = class {
         this.collapsed = this.sideMenuEl.collapsed;
     }
     render() {
-        return (index.h(index.Host, { key: 'fecd00dc0ef2ce899b82ce304034b5b6f75704ed', role: "button", tabindex: "0", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
-                this.handleClick();
-            } }, index.h("div", { key: '6d7ae7bd95d8c4c37895d06ce8d4eaebe08e91dd', class: {
+        return (index.h(index.Host, { key: 'e8b3276624a214cfa8d8c8a7bbb6757d1a6fe1c3' }, index.h("div", { key: '1c17452256ad8ca0f901178bdf2120076508ee84', class: {
                 'wrapper': true,
                 'state-collapsed': this.collapsed,
-            } }, index.h("tds-side-menu-item", { key: '2cc8087248c6f9eee7943039092c5a45f9c2376d', class: {
-                button: true,
-            } }, index.h("a", { key: 'e2510c1f475b5f6ff3d1de367360fc2e34e0c0c0' }, index.h("svg", { key: '7ea54a6bcfb144cab3045fb34316eac400c59e43', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: '3db930370416d9906ccdf821e6d43d0e6633534a', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), !this.collapsed && index.h("slot", { key: '7fba28f202ca8089ffce93c051c8d6afc23afef7' }))))));
+            } }, index.h("tds-side-menu-item", { key: '064ec6d7ea6ed2b13223cba39268f484146fee0a', class: { button: true } }, index.h("button", { key: 'd391bfe9a1e31e85f168b7261b92941b3e64693e', type: "button", "aria-expanded": !this.collapsed ? 'true' : 'false', onClick: () => {
+                this.handleClick();
+            } }, index.h("svg", { key: '23a6362a7d6ab754d08ac439314fc94e37ec3a88', class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.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 && index.h("slot", { key: 'a1a2408ee34830a190408c808935e33eed8bce5b' }))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuCollapseButton.style = TdsSideMenuCollapseButtonStyle0;
+TdsSideMenuCollapseButton.style = sideMenuCollapseButtonCss;
 
 exports.tds_side_menu_collapse_button = TdsSideMenuCollapseButton;

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

@@ -1,15 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Cpz8G-hs.js');
 
-const index = require('./index-ca8040ad.js');
-
-const sideMenuDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:48px;width:100%}:host .component{height:100%;width:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-header-nav-item-dropdown-opened-background);color:var(--tds-header-nav-item-dropdown-opened-color);border:none}:host .component ::slotted(a:hover),:host .component ::slotted(button:hover){background-color:var(--tds-header-nav-item-dropdown-opened-background-hover);cursor:pointer}:host .component ::slotted(a:active),:host .component ::slotted(button:active){background-color:var(--tds-header-nav-item-dropdown-opened-background-active) !important;cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .component.component-selected ::slotted(a),:host .component.component-selected ::slotted(button){box-shadow:inset 4px 0 0 var(--tds-nav-item-border-color-active);background-color:var(--tds-header-nav-item-dropdown-opened-background-selected)}:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button){padding: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 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 TdsSideMenuDropdownListItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** If the item should appear selected. */
         this.selected = false;
         this.dropdownHasIcon = false;
         this.dropdownHasUser = false;
@@ -39,16 +37,16 @@ const TdsSideMenuDropdownListItem = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7aedc4c01840378247f5b6f06f55f8763cd6533d', role: "listitem" }, index.h("div", { key: '60dd4aa980084396fb930f28a95d811fb394375a', class: {
+        return (index.h(index.Host, { key: '7d711b603579ec67a9f0312071519e31f4a15709', role: "listitem" }, index.h("div", { key: 'db890287036e3e85f10f7c76454e8ca91ada6f7c', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-dropdown-has-icon': this.dropdownHasIcon,
                 'component-dropdown-has-user': this.dropdownHasUser,
                 'component-collapsed': this.collapsed,
-            } }, index.h("slot", { key: '75a256ed4d6674cb5d3bd7bc29026ea1e13b6489' }))));
+            } }, index.h("slot", { key: '944534e13549524e2e40fd8ad8e0b1d61e1bdbcf' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuDropdownListItem.style = TdsSideMenuDropdownListItemStyle0;
+TdsSideMenuDropdownListItem.style = sideMenuDropdownListItemCss;
 
 exports.tds_side_menu_dropdown_list_item = TdsSideMenuDropdownListItem;

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

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.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 = class {
     constructor(hostRef) {
@@ -21,12 +18,12 @@ const TdsSideMenuDropdownList = class {
         this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
     }
     render() {
-        return (index.h(index.Host, { key: '3b6baf50c44b45c9b31d90512fcf06e0f7bfec25', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, index.h("div", { key: '56e8ee677d733e9a0198856cb97a270fab78d69a', class: {
+        return (index.h(index.Host, { key: '38e9f561720b3a68528ae69878138ea8e9085e3c', role: "list", "aria-expanded": !this.collapsed ? 'true' : 'false' }, index.h("div", { key: '9f2e5ea13fe7f4483ae07d5a58208b27a64bbd1b', class: {
                 'state-collapsed': this.collapsed,
-            } }, index.h("slot", { key: 'f9fe71e7c9b14c9791d51b758b495c56fa95f8e6' }))));
+            } }, index.h("slot", { key: '10543e9547fc64683e4f96e0ecb72ff82e3ed3ad' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuDropdownList.style = TdsSideMenuDropdownListStyle0;
+TdsSideMenuDropdownList.style = sideMenuDropdownListCss;
 
 exports.tds_side_menu_dropdown_list = TdsSideMenuDropdownList;

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

@@ -1,20 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** 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) {
@@ -60,16 +58,16 @@ const TdsSideMenuDropdown = class {
         this.open = this.defaultOpen;
     }
     render() {
-        return (index.h(index.Host, { key: '78a5c58e58b38e84cae96a9afd8166bfe3125a02' }, index.h("div", { key: '70e8e68e6db938cb2177169ca1836e84eb48cce6', class: {
+        return (index.h(index.Host, { key: '2c3887fe8ec9334f7f3b3f46b3bce64712957ae3' }, index.h("div", { key: 'bedb9fc6f22d0c608b77c2d0d2fe7c8c17eadd59', class: {
                 'wrapper': true,
                 'state-open': this.getIsOpenState(),
                 'state-collapsed': this.collapsed,
-            } }, index.h("tds-side-menu-item", { key: '5834d5e804ad422937f2971637b3a70fb1fb676e', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+            } }, index.h("tds-side-menu-item", { key: '83cb1486e99c0f699b02be91bf53df1249076902', class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
                 this.open = !this.open;
-            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, index.h("button", { key: 'd454e6148a12c0bd1864b6c148f169ac342e9da2' }, index.h("slot", { key: '8a2579b751421d9df8e3dd5a84b04a5f844d383c', name: "icon" }), !this.collapsed && (index.h(index.Fragment, { key: 'f3419cc2993191186dccc9a208ff8150bf592eeb' }, this.buttonLabel, index.h("slot", { key: 'ff616384d76d6f3df82ac6abb12d65e4f6a5906d', name: "label" }), index.h("tds-icon", { key: 'a4acd9c0de3f437766673c57b4d73ac13cc8917b', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), index.h("div", { key: 'db1ec059f4f1910d1fef432baff29810883ec2ef', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (index.h("h3", { key: 'a9f35f976da7ceaf38eb1c1641b43617e4e583c6', class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { key: 'ef8b02b77b93b54f0a9aa4c5fb367356c12e9b82', name: "label" }))), index.h("slot", { key: '15c7c9e5a6a0615f478c5f93de8753211d17b3c3' })))));
+            }, "aria-expanded": this.getIsOpenState() ? 'true' : 'false' }, index.h("button", { key: 'e21c03415c48022813b3289f8dd80f21486414f0' }, index.h("slot", { key: '4462d95bf8e7945741cb54d9f363b8d9cac158e0', name: "icon" }), !this.collapsed && (index.h(index.Fragment, { key: '1a65252df105ef6ad9bca35f873fe19e71289b80' }, this.buttonLabel, index.h("slot", { key: 'e35a184bae5c65fde366ed287062becbc6633cac', name: "label" }), index.h("tds-icon", { key: '7a4328715c67aaf91a3675574f5aadca9ce8ae3d', class: "dropdown-icon", name: "chevron_down", size: "16px", svgTitle: "Chevron Down" }))))), index.h("div", { key: '1e4e674c5e9b8901b5306bee36bf121aa37112e3', class: "menu", tabindex: this.collapsed ? '0' : null }, this.collapsed && (index.h("h3", { key: '54a5f5f89d595aeae6ac6e41ac553e96466fe4a1', class: "heading-collapsed" }, this.buttonLabel, index.h("slot", { key: '20477b6be2c477c48412d0f4bc34f1181bcb00d3', name: "label" }))), index.h("slot", { key: '9740e5c9cb493e52c104223ec62b47bffc8adc5d' })))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuDropdown.style = TdsSideMenuDropdownStyle0;
+TdsSideMenuDropdown.style = sideMenuDropdownCss;
 
 exports.tds_side_menu_dropdown = TdsSideMenuDropdown;

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

@@ -1,17 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-Cpz8G-hs.js');
+var dfs = require('./dfs-Clg9RCmq.js');
 
-const index = require('./index-ca8040ad.js');
-const dfs = require('./dfs-84f7f63e.js');
-
-const sideMenuItemCss = ":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap: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-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}: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 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-focus-outline-color);box-shadow:inset 0 0 0 3px var(--tds-white);outline-offset:-2px;z-index:1}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button),:host .component:hover ::slotted(tds-side-menu-user){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a)::before,:host .component:hover ::slotted(button)::before,:host .component:hover ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-hover-indicator)}:host .component:hover ::slotted(a:focus-visible),:host .component:hover ::slotted(button:focus-visible),:host .component:hover ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-hover);position:relative}:host .component:hover ::slotted(a:focus-visible)::before,:host .component:hover ::slotted(button:focus-visible)::before,:host .component:hover ::slotted(tds-side-menu-user: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:active ::slotted(a),:host .component:active ::slotted(button),:host .component:active ::slotted(tds-side-menu-user){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a)::before,:host .component:active ::slotted(button)::before,:host .component:active ::slotted(tds-side-menu-user)::before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--tds-side-menu-item-pressed-indicator)}:host .component:active ::slotted(a:focus-visible),:host .component:active ::slotted(button:focus-visible),:host .component:active ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidemenu-item-state-active);position:relative}:host .component:active ::slotted(a:focus-visible)::before,:host .component:active ::slotted(button:focus-visible)::before,:host .component:active ::slotted(tds-side-menu-user: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-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){background-color:var(--tds-sidebar-item-state-selected);position:relative}: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)}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible),:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user:focus-visible){background-color:var(--tds-sidebar-item-state-selected);position:relative}:host .component-selected:not(:host .component-active) ::slotted(a:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(button:focus-visible)::before,:host .component-selected:not(:host .component-active) ::slotted(tds-side-menu-user: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)}@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 TdsSideMenuItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** If the item should appear selected. */
         this.selected = false;
+        /** If the item should appear active. Can be used when the item is
+         * triggering a dropdown, and the dropdown is open, for example. */
         this.active = false;
         this.collapsed = false;
         this.hasUserComponent = false;
@@ -75,16 +75,16 @@ const TdsSideMenuItem = class {
         this.updateHasUserComponent();
     }
     render() {
-        return (index.h(index.Host, { key: '714394a875c4fc72f95f9a4a1d1fd928b6e4cb01' }, index.h("div", { key: 'b9686737469cbdae97f940c4e20364f45ae4e568', class: {
+        return (index.h(index.Host, { key: '94dc12f57a0eedb5ab1528394352c4a7fcea55ff' }, index.h("div", { key: '3336a6d1af3c573fdbbbf590fae2be3381c89163', class: {
                 'component': true,
                 'component-selected': this.selected,
                 'component-active': this.active,
                 'component-collapsed': this.collapsed,
                 'component-has-user': this.hasUserComponent,
-            } }, index.h("slot", { key: 'cde3ca8b26d12e652d11ef11c9ac1dc6852f5860' }))));
+            } }, index.h("slot", { key: '5c92976a5aa367142e2af23fdacb6d67c3d2b36c' }))));
     }
     get host() { return index.getElement(this); }
 };
-TdsSideMenuItem.style = TdsSideMenuItemStyle0;
+TdsSideMenuItem.style = sideMenuItemCss;
 
 exports.tds_side_menu_item = TdsSideMenuItem;

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

@@ -1,20 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3ead27185a3cba465ce4789a58d9f5081a3ba476' }, index.h("div", { key: '5da2afb06899169815745785b3c9dc766a7b51bd' })));
+        return (index.h(index.Host, { key: '15e4b102af83962079d9bc9104c3e4d243cea947' }, index.h("div", { key: '52ed88b0ccf8ae02c3d83849f610475b0ad55065' })));
     }
 };
-TdsSideMenuOverlay.style = TdsSideMenuOverlayStyle0;
+TdsSideMenuOverlay.style = sideMenuOverlayCss;
 
 exports.tds_side_menu_overlay = TdsSideMenuOverlay;

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

@@ -1,38 +1,30 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const sideMenuUserImageCss = ":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";
-const TdsSideMenuUserImageStyle0 = sideMenuUserImageCss;
 
 const TdsSideMenuUserImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.src = undefined;
-        this.alt = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'f673e69a1f9064b9b70def6942bb357b0fbbef1a' }, index.h("slot", { key: 'd2b6b1b29dd8ab033e229aac63aa864a2d866be6' }), this.src && index.h("img", { key: 'f72afa71088d565a19d43dec0646f657eba9c5c3', src: this.src, alt: this.alt })));
+        return (index.h(index.Host, { key: '62b6a38f0705b052cb4d5b9379bc77662f66c505' }, index.h("slot", { key: '99aeba48272e512ce419a934cb4147052a5e0190' }), this.src && index.h("img", { key: '352e0a3f93558b298835afbfe72193cdbebcffa4', src: this.src, alt: this.alt })));
     }
 };
-TdsSideMenuUserImage.style = TdsSideMenuUserImageStyle0;
+TdsSideMenuUserImage.style = sideMenuUserImageCss;
 
 const sideMenuUserLabelCss = ":host{display:block;font:var(--tds-headline-07);letter-spacing:var(--tds-headline-07-ls);color:var(--tds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--tds-grey-500)}";
-const TdsSideMenuUserLabelStyle0 = sideMenuUserLabelCss;
 
 const TdsSideMenuUserLabel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.heading = undefined;
-        this.subheading = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'fcd180821724e5e7ad1d8574a3adaf428f124b47' }, this.heading, this.subheading && index.h("div", { key: 'f1d86f3f1f200de394e771ea71839e5e9a94ba10', class: "subheading" }, this.subheading)));
+        return (index.h(index.Host, { key: '5b045eb527ee378f50f6a1bec3a383b9c0f352ef' }, this.heading, this.subheading && index.h("div", { key: '3e106d0bdbe62438e8d2edbf73f43324cb78ffdd', class: "subheading" }, this.subheading)));
     }
 };
-TdsSideMenuUserLabel.style = TdsSideMenuUserLabelStyle0;
+TdsSideMenuUserLabel.style = sideMenuUserLabelCss;
 
 exports.tds_side_menu_user_image = TdsSideMenuUserImage;
 exports.tds_side_menu_user_label = TdsSideMenuUserLabel;

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

@@ -1,24 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.js');
 
 const sideMenuUserCss = ":host{display:flex;align-items:center;gap:16px;height:68px}";
-const TdsSideMenuUserStyle0 = sideMenuUserCss;
 
 const TdsSideMenuUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.heading = undefined;
-        this.subheading = undefined;
-        this.imgSrc = undefined;
-        this.imgAlt = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '768662a142cf0f40f24566fedff52e1e25df8bee' }, index.h("tds-side-menu-user-image", { key: 'fb02fcf45d21aa198bcba356f0502a3aa8cf3d0b', src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: '658ba6d53ded1f760c2ec2327de765374ba5b6b9', name: "image" })), index.h("tds-side-menu-user-label", { key: '1ab756a2538fd7bdde5a1714e25dc0d0fae9f7ea', heading: this.heading, subheading: this.subheading })));
+        return (index.h(index.Host, { key: 'fe3a852379cfa0e6822cac54e84937b5c8365115' }, index.h("tds-side-menu-user-image", { key: 'd5c702b1f3dcc8d2d46d411c72e13becaab1062d', src: this.imgSrc, alt: this.imgAlt }, index.h("slot", { key: '4ded196cd1d6ab0e13488787bbb1d4aa5feb3ebd', name: "image" })), index.h("tds-side-menu-user-label", { key: 'efee803dbe911144f11660ff1529a2de8c3cca62', heading: this.heading, subheading: this.subheading })));
     }
 };
-TdsSideMenuUser.style = TdsSideMenuUserStyle0;
+TdsSideMenuUser.style = sideMenuUserCss;
 
 exports.tds_side_menu_user = TdsSideMenuUser;

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

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-Cpz8G-hs.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 = class {
@@ -14,6 +11,19 @@ const TdsSideMenu = class {
         this.tdsCollapse = index.createEvent(this, "tdsCollapse", 7);
         this.internalTdsCollapse = index.createEvent(this, "internalTdsCollapse", 6);
         this.internalTdsSideMenuPropChange = index.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) {
@@ -24,13 +34,6 @@ const TdsSideMenu = class {
                 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) {
@@ -159,6 +162,6 @@ const TdsSideMenu = class {
         "open": ["onOpenChange"]
     }; }
 };
-TdsSideMenu.style = TdsSideMenuStyle0;
+TdsSideMenu.style = sideMenuCss;
 
 exports.tds_side_menu = TdsSideMenu;