@siemens/ix 5.0.0 → 5.1.0

package/dist/cjs/ix-application-header.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$2 = require('./index-Dw-NwUuT.js');
-var a11y = require('./a11y-C_6YiIMa.js');
+var index = require('./index-DnclGKUw.js');
+var index$2 = require('./index-CwJ-mkQd.js');
+var a11y = require('./a11y-_XjpTo2w.js');
 var index$1 = require('./index-SVeYVn-h.js');
 var context = require('./context-DqdXbKw_.js');
 var breakpoints = require('./breakpoints-C5ZrUCbZ.js');
-var menuService = require('./menu-service-D_QsHUgR.js');
-var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var menuService = require('./menu-service-DBg-0e5W.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
 var service = require('./service-CRjXhKel.js');
 require('./modal-_AhJoT78.js');
 require('./typed-event-Bw4IfJC0.js');
@@ -231,31 +231,31 @@ const ApplicationHeader = class {
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (index.h(index.Host, { key: '8fed428b8e6079dff2a3c69ad5a97e7b1da48a7d', class: {
+        return (index.h(index.Host, { key: '65415a8abe50d9b368d9c71001a0968cf2264fb8', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header", role: "banner" }, index.h("div", { key: 'c9931f63a7ce2f8c06180fef6cd76564f5e84bc3', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: 'e4e7f62ff603a160a74009edbe46d85da8b8df24', class: {
+            }, slot: "application-header", role: "banner" }, index.h("div", { key: '79849e061e06d01eba6f4d802f48d226480857b2', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: 'b5c6140d263e7ff6ffe3937a4341bcd2b9935104', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, index.h("img", { key: 'a7b010a88ea8b93fbea38641f35e75214046b6a4', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: '3e43c1b426241634fbcec29977cd5ba2c5c1cd22', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: 'f4eac3d8a42b9a23b5e5cff11a7f161d9e70f862', onClick: () => this.showAppSwitch(), icon: index$2.iconApps, variant: "subtle-tertiary", class: {
+            } }, index.h("img", { key: '00fb44e36f25856a0e2ad2c333d2a5a5014415d3', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: '2d123f6cfbc21a61680328b3a81638ba49413c8f', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: '5b887225419c66e36ef5dfd369647d41c4f3ca41', onClick: () => this.showAppSwitch(), icon: index$2.iconApps, variant: "subtle-tertiary", class: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (index.h("div", { key: '0175e0f1262be29c5d5f65e183f9b0a9e21725e8', class: "logo" }, index.h("img", { key: '9e129c84639dafc6cec3c793b5f48e4fb7b620b7', src: this.companyLogo, alt: this.companyLogoAlt }))), index.h("div", { key: 'b37ed29a5e8e377792398fb3ef0c3f125b119466', class: {
+            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (index.h("div", { key: '8c2dc3e31111a04c5e7aecabd11b458dc1c6b199', class: "logo" }, index.h("img", { key: '0594b3e00eb190ac2beef24df3c6987668c1fd69', src: this.companyLogo, alt: this.companyLogoAlt }))), index.h("div", { key: 'b51ceb91b1079d363999026e560874b0c2a1e390', class: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, index.h("slot", { key: '1e7a3194f242698d72387b48d62ecb36bee69fb4', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), index.h("div", { key: '3a1ae9c9d1a16cb9cc9e51769111bcd99aefcbfd', class: "name" }, index.h("ix-typography", { key: '97b6a6ff93405c7a58fed3e2d394b5036195b436', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (index.h("ix-typography", { key: '2107bc8e68ac9eca564a17751f1cd81bbb7a1ad7', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), index.h("div", { key: 'f05c6406ac65df92028fe176d90d31009417208f', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (index.h("div", { key: '6d8b477d4cb2fc869dd77feef82547ad7fca1d23', class: "secondary" }, index.h("slot", { key: '73f83d5dfbe63846383b6dacccbf9c22df63e035', name: "secondary" }))), index.h("div", { key: '8fa09abb2a3e3082c753735b1b3766299edf62f0', class: "content" }, this.breakpoint !== 'sm' && index.h("slot", { key: '4283447039f8f2bc64aa6b6ede2d5cbed6b15dee' }), index.h("ix-icon-button", { key: 'cf681acd5e2135ce899ee755346218157e69f27e', class: {
+            } }, index.h("slot", { key: '2659560a89277665227c8169cd1f40493ca50957', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), index.h("div", { key: '80f65852355d615792c0a923d174095aac094fea', class: "name" }, index.h("ix-typography", { key: 'ab984e7163d972ada42958f53a0ce58e9236cf34', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (index.h("ix-typography", { key: '9cd307c5ec49d7988084918d2f7e741669e501c9', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), index.h("div", { key: '9336ed1416b6e532a92d266809296f8509f35490', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (index.h("div", { key: 'daad8a4304d6276f4b4ac9c5e00ec939f3121a8c', class: "secondary" }, index.h("slot", { key: '2c6948ba05eb8fad24ef6a7fdddef62edd7b6f3b', name: "secondary" }))), index.h("div", { key: '49d1396f97cb218001107b8b189a66f9b6e1cc4a', class: "content" }, this.breakpoint !== 'sm' && index.h("slot", { key: 'a261e8552476f9d8b90101a4e471575a1787b076' }), index.h("ix-icon-button", { key: '0cd13b5d1bcc3d9aeb2a16465529833595af57d6', class: {
                 'context-menu': true,
                 'context-menu-visible': this.hasOverflowContextMenu,
-            }, "data-context-menu": true, "data-testid": "show-more", icon: index$2.iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu) }), index.h("ix-dropdown", { key: 'a0acad2315685ae3adb6b76e889976ff841c2590', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, index.h("div", { key: '1c028bdf68db43d9001dba949852c25281938e48', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (index.h("div", { key: '7366d4bfa3d68280fa24fbeeed4ba21be1b598cc', class: {
+            }, "data-context-menu": true, "data-testid": "show-more", icon: index$2.iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu) }), index.h("ix-dropdown", { key: '2340aec42fc9d4a23d3fc257dabd24b44789c60f', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, index.h("div", { key: 'ba14593b7d8365c205f61792a71f1f83190a3683', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (index.h("div", { key: '612c535b854e7254ebcad06edf9f41ad745babcb', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, index.h("slot", { key: '19dfaf11bac37b1130122cfd7289b51112c7796d', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: '70fc852947963fc76d28ff07737d95ecc2751474', class: {
+            } }, index.h("slot", { key: '6a8c8df87ce24ca24cee6738e16cae3150370573', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: 'ffb74288c8b2f71941c9f9c4d710c4fe44c9996a', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, index.h("slot", { key: '607ce94ee9c05f07281b921ef9da3c3417b8c99b', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: '223851bee394e67075ad931e54980b0c2691c98e', class: {
+            } }, index.h("slot", { key: '4d7d25254108d0297137f624a4ed248a4b8e8a7f', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: '188ccce5cc9eddf0bdadc92716a98f82491c3fcf', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, index.h("slot", { key: '88e925666de5a68e6fca694cc0682954de30cd79', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: '2806aac9e05a0d3b7fa423db8d19048950a936c5', name: "ix-application-header-avatar" })))));
+            } }, index.h("slot", { key: 'f5c7c0c2efec69700a7f44c90a89f56aec34ac85', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: '002c29f2656a44471f7990d50354bf2767ca2021', name: "ix-application-header-avatar" })))));
     }
     static get watchers() { return {
         "applicationLayoutContext": [{

package/dist/cjs/ix-application-switch-modal.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 var modal = require('./modal-_AhJoT78.js');
 require('./typed-event-Bw4IfJC0.js');
 
-const applicationSwitchModalCss = () => `:host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}`;
+const applicationSwitchModalCss = () => `:host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.4375rem;padding-inline-end:0.9375rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}`;
 
 function ApplicationItem(props) {
     function isExternal(target) {
@@ -28,7 +28,7 @@ function ApplicationItem(props) {
         }, onClick: () => {
             modal.dismissModal(props.host);
             window.open(props.url, props.target);
-        } }, index.h("div", null, index.h("img", { class: "AppIcon", src: props.iconSrc })), index.h("div", { class: "AppName" }, index.h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (index.h("ix-icon", { size: "12", name: index$1.iconOpenExternal, color: "color-soft-text" }))), index.h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
+        } }, index.h("img", { class: "AppIcon", src: props.iconSrc, alt: "" }), index.h("div", { class: "AppName" }, index.h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && (index.h("ix-icon", { size: "12", name: index$1.iconOpenExternal, color: "color-soft-text" }))), index.h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description))));
 }
 const ApplicationSwitchModal = class {
     constructor(hostRef) {
@@ -43,7 +43,7 @@ const ApplicationSwitchModal = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '16262d6c110470be996a5db506a9a610c51ef0d6' }, index.h("ix-modal-header", { key: '5386a2b3ce91ad901f270ccb25c3b32c28de5cc0', icon: index$1.iconApps }, this.config?.i18nAppSwitch || 'Switch to application'), index.h("ix-modal-content", { key: '65666bad6b09fd3af20b9266d7f30b232da01a31', class: "content" }, index.h("div", { key: '1622ad7361a15518bdf367e13a6d20159495d15e', class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && (index.h("div", { key: '778d2f8110c1f79b1a65a1765c393c922de4a1bb', class: "loading" }, index.h("ix-spinner", { key: 'c80583bc15238aac1ec59ddd0cf6638217667fa5', size: "medium", variant: "primary" }), index.h("span", { key: 'ac4257820259ae71b62e9703e730e7367c463bcf' }, this.config?.i18nLoadingApps ||
+        return (index.h(index.Host, { key: 'd5f90b59051a81a5c9157cf76f181d0dbf3db288' }, index.h("ix-modal-header", { key: 'a56ca3229b08765f10b792b0aaa850e15ab6a233', icon: index$1.iconApps }, this.config?.i18nAppSwitch || 'Switch to application'), index.h("ix-modal-content", { key: '4ed63c67ea9a17355d010cd74eb80f9e3d15d26a', class: "content" }, index.h("div", { key: '1a9cadf4e12af46758b21d3074a97b10e9a00e6c', class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && (index.h("div", { key: 'c0dbbd963ecc7afa860b2dc18cd93c8f93ce228a', class: "loading" }, index.h("ix-spinner", { key: '9da41df87f43a42f2c62019ba48f2eda65c25205', size: "medium", variant: "primary" }), index.h("span", { key: '1865e305014310653486c4115dca075f8ffc4a92' }, this.config?.i18nLoadingApps ||
             'Loading available applications...'))), this.config?.apps.map((appEntry) => (index.h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === this.config?.currentAppId })))))));
     }
 };

package/dist/cjs/ix-application.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
+var index = require('./index-DnclGKUw.js');
 var context = require('./context-DqdXbKw_.js');
 var service = require('./service-CRjXhKel.js');
-var menuService = require('./menu-service-D_QsHUgR.js');
-var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var menuService = require('./menu-service-DBg-0e5W.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
 var themeSwitcher = require('./theme-switcher-sbkXOvhB.js');
 require('./typed-event-Bw4IfJC0.js');
 require('./breakpoints-C5ZrUCbZ.js');
@@ -30,9 +30,14 @@ const Application = class {
      * Change the responsive layout of the menu structure
      */
     forceBreakpoint;
+    onForceBreakpointChange(forceBreakpoint) {
+        this.setBreakpoints(this.breakpoints);
+        this.forceLayoutChange(forceBreakpoint);
+    }
     forceLayoutChange(newMode) {
         if (!newMode) {
             service.applicationLayoutService.enableBreakpointDetection();
+            service.applicationLayoutService.debouncedOnResize();
             return;
         }
         service.applicationLayoutService.disableBreakpointDetection();
@@ -43,7 +48,7 @@ const Application = class {
      */
     breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
-        service.applicationLayoutService.setBreakpoints(breakpoints);
+        this.setBreakpoints(breakpoints);
     }
     /**
      * Define application switch configuration
@@ -65,20 +70,27 @@ const Application = class {
         }
         this.menu?.toggleMenu(false);
     }
+    setBreakpoints(breakpoints) {
+        if (this.forceBreakpoint) {
+            service.applicationLayoutService.setBreakpoints([this.forceBreakpoint]);
+        }
+        else {
+            service.applicationLayoutService.setBreakpoints(breakpoints);
+        }
+    }
     componentWillLoad() {
-        service.applicationLayoutService.setBreakpoints(this.breakpoints);
+        this.setBreakpoints(this.breakpoints);
         this.contextProvider = context.useContextProvider(this.hostElement, context.ApplicationLayoutContext, {
             hideHeader: false,
             sidebar: this.applicationSidebarSlotted,
             appSwitchConfig: this.appSwitchConfig,
         });
         this.modeDisposable = service.applicationLayoutService.onChange.on((mode) => {
-            this.breakpoint = mode;
+            this.breakpoint = this.forceBreakpoint || mode;
         });
-        this.breakpoint = service.applicationLayoutService.breakpoint;
-        if (this.forceBreakpoint) {
-            this.forceLayoutChange(this.forceBreakpoint);
-        }
+        this.breakpoint =
+            this.forceBreakpoint || service.applicationLayoutService.breakpoint;
+        this.forceLayoutChange(this.forceBreakpoint);
     }
     disconnectedCallback() {
         this.modeDisposable?.dispose();
@@ -107,14 +119,17 @@ const Application = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '9621e446a9532a740dcdef516a51d326c59587a7', "data-role": "", class: {
+        return (index.h(index.Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, index.h("slot", { key: '0061a139b7fa722e97da65fbcaf2853bdd185466', name: "application-header" }), index.h("div", { key: 'b2da184f99ab27ce576be02221497bb24462bb69', class: "application" }, index.h("slot", { key: '8e5895c10cb495320f251c9c44949700629be9ee', name: "menu" }), index.h("aside", { key: '60a6cd879294682b56061f4b0fd9bb2342fce229', class: {
+            } }, index.h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), index.h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, index.h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), index.h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, index.h("slot", { key: '19416cec696ff2b7ae2818ebe375b98892df3116', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("div", { key: 'd6bd6479222c1b19c6e45f68e6993c534ce5afd2', class: "content-area" }, index.h("main", { key: 'ac7117c1a192eadf913e8ab474019dcdd5c81025', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: 'bac13c155b023321b111f3ea89603840c6b73fe0' })), index.h("footer", { key: '5acded667f8360c952516a0a55ca5b0936834add', class: "footer" }, index.h("slot", { key: '34be70c1aa056e735aa52c17d4a8c469a68611ed', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, index.h("slot", { key: 'f335892f90b7d9f9020bbeb5b9a732404bfcde00', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("div", { key: '93333ea8c99802b366971d1c9717418262fc649d', class: "content-area" }, index.h("main", { key: '79fe70895b7725377b679b98c04784f6fd7ff789', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '22d8f248280108d31903f67e7678804cf78dc658' })), index.h("footer", { key: '9e541aa388f2aaf44d8f41987ded1bcd863a22f6', class: "footer" }, index.h("slot", { key: '9b87eb43ced974fca634e1f4c1282669be3135b4', name: "bottom" }))))));
     }
     static get watchers() { return {
+        "forceBreakpoint": [{
+                "onForceBreakpointChange": 0
+            }],
         "breakpoints": [{
                 "onBreakpointsChange": 0
             }],

package/dist/cjs/ix-avatar_2.cjs.entry.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var baseButton = require('./base-button-C-1izOSS.js');
-var a11y = require('./a11y-C_6YiIMa.js');
+var index = require('./index-DnclGKUw.js');
+var baseButton = require('./base-button-BP6iIMR7.js');
+var a11y = require('./a11y-_XjpTo2w.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
-var shadowDom = require('./shadow-dom-BG8VqeIu.js');
-var focusProxy = require('./focus-proxy-BCuVbpDb.js');
-var component = require('./component-CYtonfpw.js');
+var shadowDom = require('./shadow-dom-BL5F7RFW.js');
+var focusProxy = require('./focus-proxy-CjxFZupW.js');
+var component = require('./component-DgA9FH-W.js');
 var id_mixin = require('./id.mixin-DINDQztK.js');
 var ariaActivedescendant_mixin = require('./aria-activedescendant.mixin-_lb0Xz2S.js');
-require('./focus-utilities-yx7wWjEO.js');
+require('./focus-utilities-5SZMxJg4.js');
 
-const avatarCss = () => `:host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) button:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .avatar{transform:scale(0.8)}:host(.avatar-button) .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host(.avatar-button) .proxy-list li{height:2px;width:2px;pointer-events:all}`;
+const avatarCss = () => `:host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--ix-button-padding, 0 0.5rem)}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) button:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .avatar{transform:scale(0.8)}:host(.avatar-button) .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host(.avatar-button) .proxy-list li{height:2px;width:2px;pointer-events:all}`;
 
 function DefaultAvatar(props) {
     const { initials } = props;
@@ -190,7 +190,7 @@ const MenuAvatarItem = class {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (index.h("ix-dropdown-item", { key: 'f96a631b215cb1d42035b4d5ffb7ce7fbea2b34a', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (index.h("ix-dropdown-item", { key: '437aead7832603097e4f814abef0108dcb0ad386', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
 };
 MenuAvatarItem.style = menuAvatarItemCss();

package/dist/cjs/ix-blind.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
+var index = require('./index-DnclGKUw.js');
 var anime_esm = require('./anime.esm-AXTM6yn_.js');
-var a11y = require('./a11y-C_6YiIMa.js');
-var index$1 = require('./index-Dw-NwUuT.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var index$1 = require('./index-CwJ-mkQd.js');
 var animation = require('./animation-hxDbANsw.js');
 
-const blindCss = () => `:host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline){border-color:var(--theme-color-soft-bdr)}`;
+const blindCss = () => `:host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm) .header-actions{--ix-icon-button-color:var(--theme-color-alarm--contrast)}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical) .header-actions{--ix-icon-button-color:var(--theme-color-critical--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info) .header-actions{--ix-icon-button-color:var(--theme-color-info--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral) .header-actions{--ix-icon-button-color:var(--theme-color-neutral--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-filled) .header-actions{--ix-icon-button-color:var(--theme-color-primary)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success) .header-actions{--ix-icon-button-color:var(--theme-color-success--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning) .header-actions{--ix-icon-button-color:var(--theme-color-warning--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary) .header-actions{--ix-icon-button-color:var(--theme-color-primary--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline) .header-actions{--ix-icon-button-color:var(--theme-color-primary)}:host(.blind-outline){border-color:var(--theme-color-soft-bdr)}`;
 
 let sequentialInstanceId = 0;
 const Blind = class {
@@ -84,17 +84,17 @@ const Blind = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '08686a07866cce941b0d3fee3c59acda57fd9697', class: {
+        return (index.h(index.Host, { key: '013b57ee3c249c67c3ec35bc94924b08a0828723', class: {
                 [`blind-${this.variant}`]: true,
-            } }, index.h("div", { key: '37c3d29dfa4113fa51971c8487158c30dcac0cf6', class: 'blind-header-wrapper' }, index.h("button", { key: '1a725a4d9991ef417fdcd06d83565a994d20bc10', class: {
+            } }, index.h("div", { key: 'a03bf76f5ff8628de0958f3f12ae69bfadf68010', class: 'blind-header-wrapper' }, index.h("button", { key: '48e9d20e1bce06e2b305b856e3c7ec52d882c197', class: {
                 'blind-header': true,
                 [`blind-${this.variant}`]: true,
                 closed: this.collapsed,
-            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11y.a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, index.h("slot", { key: 'acae9cd5182dcfb6003a18713709ef5c5f5ba5c9', name: "custom-header" })), index.h("div", { key: 'c183148b712d24ce5416f704496af3982c5f063c', class: 'blind-header-content' }, index.h("ix-icon", { key: '679080e49ed99d10528d6b44f483349794880e9f', class: "collapse-icon", name: index$1.iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
+            }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11y.a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, index.h("slot", { key: '127096b27d461351848650ce43de9016585f8ba2', name: "custom-header" })), index.h("div", { key: '30976417c051c06aebd99af776d06d8d12289e3a', class: 'blind-header-content' }, index.h("ix-icon", { key: '4ad41bafea4f5c85625897dd5ac53e8199c0c824', class: "collapse-icon", name: index$1.iconChevronDownSmall, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), index.h("div", { key: '790921a5077d08519a86e53da114615c62ab3520', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (index.h(index.Fragment, null, this.icon && (index.h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
+                : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), index.h("div", { key: '5aaa92535b30579eecaf2d5af312fe03b7acd6bd', class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (index.h(index.Fragment, null, this.icon && (index.h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === 'filled' || this.variant === 'outline'
                 ? 'color-std-text'
-                : `color-${this.variant}--contrast` })), index.h("div", { class: 'blind-header-title-row' }, index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.label, format: "label-lg", bold: true }, index.h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.sublabel }, index.h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), index.h("div", { class: "header-actions" }, index.h("slot", { name: "header-actions" })))) : null))), index.h("section", { key: 'e009be22aca2af68a71115cd828695ab6f16d230', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, index.h("div", { key: '482ac28924b2edd0b5b6a751a07434764fcb64f8', class: {
+                : `color-${this.variant}--contrast` })), index.h("div", { class: 'blind-header-title-row' }, index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.label, format: "label-lg", bold: true }, index.h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && (index.h("div", { class: "blind-header-title-col" }, index.h("ix-typography", { title: this.sublabel }, index.h("div", { class: "blind-header-title-sublabel" }, this.sublabel))))), index.h("div", { class: "header-actions" }, index.h("slot", { name: "header-actions" })))) : null))), index.h("section", { key: '10d8459ac5f41b8a09848e3182f68d641d369541', id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, index.h("div", { key: 'f39a05f57e022918dd7cbce8454f9f0aa60d2a79', class: {
                 'blind-content': true,
                 hide: this.collapsed,
             } }, !this.collapsed ? index.h("slot", null) : null))));