@siemens/ix 4.4.0 → 5.0.0

package/dist/cjs/ix-action-card.cjs.entry.js

@@ -1,30 +1,50 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var a11y = require('./a11y-DldCLr8D.js');
+var index = require('./index-BKQkUbyE.js');
+var a11y = require('./a11y-C_6YiIMa.js');
 
 const actionCardCss = () => `:host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}: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 ix-card{width:100%;height:100%}`;
 
 const IxActionCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Card variant
-         */
-        this.variant = 'outline';
-        /**
-         * Card icon
-         */
-        this.icon = undefined;
-        /**
-         * Card selection
-         */
-        this.selected = false;
-        /**
-         * If true, disables hover and active styles and changes cursor to default
-         */
-        this.passive = false;
     }
+    /**
+     * Card variant
+     */
+    variant = 'outline';
+    /**
+     * Card icon
+     */
+    icon = undefined;
+    /**
+     * ARIA label for the icon
+     *
+     * @since 3.2.0
+     */
+    ariaLabelIcon;
+    /**
+     * Card heading
+     */
+    heading;
+    /**
+     * Card subheading
+     */
+    subheading;
+    /**
+     * Card selection
+     */
+    selected = false;
+    /**
+     * ARIA label for the card
+     *
+     * @since 3.2.0
+     */
+    ariaLabelCard;
+    /**
+     * If true, disables hover and active styles and changes cursor to default
+     */
+    passive = false;
     getSubheadingTextColor() {
         return this.variant === 'outline' || this.variant === 'filled'
             ? 'soft'
@@ -34,7 +54,7 @@ const IxActionCard = class {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (index.h(index.Host, { key: '600ad1913e671fb47ec9da8f66e984bbde498fae' }, index.h("ix-card", { key: '1a8168a17a643908126f841e9cdd6d0055a62399', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, index.h("ix-card-content", { key: 'c138b94b131af478fee65244f32b91cdf78b31df' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || a11y.getFallbackLabelFromIconName(this.icon) })) : null, index.h("div", { key: 'eb0252c628c75709fddae387a3b4a7abbf7c3df0' }, this.heading ? (index.h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11y.a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (index.h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, index.h("slot", { key: 'f47fd515fc5b8f22344dc83b808e527116238618' }))))));
+        return (index.h(index.Host, { key: '3c4975b39af044bc6af37f6420fa95c772904906' }, index.h("ix-card", { key: 'aab19e577dd323f564c4fb00e1a0a6dd893a5744', selected: this.selected, variant: this.variant, passive: this.passive, class: 'pointer', "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? 'group' : undefined }, index.h("ix-card-content", { key: 'fa5beccb483bd702884770b50e7105a6b57167a1' }, this.icon ? (index.h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || a11y.getFallbackLabelFromIconName(this.icon) })) : null, index.h("div", { key: 'd694d8b0a424c7971c2fa2e860045cf25b20ae3d' }, this.heading ? (index.h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11y.a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (index.h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, index.h("slot", { key: 'edf7f011821f3fe44120583025255ecdb9441f4f' }))))));
     }
 };
 IxActionCard.style = actionCardCss();

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

@@ -1,17 +1,16 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var index$2 = require('./index-DIYO-Liy.js');
-var a11y = require('./a11y-DldCLr8D.js');
-var index$1 = require('./index-BxmN3RtX.js');
-var service = require('./service-DuiJmf7R.js');
-var context = require('./context-CmNuiaNz.js');
+var index = require('./index-BKQkUbyE.js');
+var index$2 = require('./index-Dw-NwUuT.js');
+var a11y = require('./a11y-C_6YiIMa.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-CW0vT80Q.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-require('./animation-D5wGQwTg.js');
-require('./modal-BPMUkqrW.js');
-require('./typed-event-DxWATHPL.js');
+var menuService = require('./menu-service-D_QsHUgR.js');
+var shadowDom = require('./shadow-dom-BG8VqeIu.js');
+var service = require('./service-CRjXhKel.js');
+require('./modal-_AhJoT78.js');
+require('./typed-event-Bw4IfJC0.js');
 
 const applicationHeaderCss = () => `:host{display:flex;flex-wrap:nowrap;align-items:end;justify-content:space-between;position:relative;width:100%;min-height:3rem;padding-top:var(--ix-safe-area-inset-top, 0rem);padding-right:calc(0.625rem + var(--ix-safe-area-inset-right, 0rem));padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .left-side,:host .right-side{display:flex;flex-direction:row;flex-wrap:nowrap;position:relative;align-items:center;min-width:0;min-height:3rem;height:100%}:host .left-side{flex:0 1 auto}:host .left-side .app-icon{display:block;position:relative;width:2rem;min-width:2rem;max-width:2rem;height:2rem;min-height:2rem;max-height:2rem}:host .left-side .app-icon.app-icon-outline{outline:1px solid var(--theme-app-header-app-icon--outline-color);border-radius:0.125rem}:host .left-side .app-icon img{position:relative;display:block;width:100%;height:100%;border-radius:0.125rem}:host .left-side .app-switch{margin:0 0.625rem}:host .left-side .app-switch.without-app-icon{margin-left:0px}:host .left-side .name{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;margin-left:0.75rem;margin-right:0.75rem;color:var(--theme-app-header--color);min-width:0;gap:0.75rem;overflow:hidden}:host .left-side .application-name,:host .left-side .application-name-suffix{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap}:host .left-side .application-name{flex:0 1 auto;min-width:0;flex-shrink:0;max-width:100%}:host .left-side .application-name-suffix{flex:1 1 auto;margin-top:0.4rem;min-width:0;flex-shrink:1;color:var(--theme-app-header-name-suffix--color)}:host .left-side .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-right:1rem;margin-left:1rem;min-width:-moz-fit-content;min-width:fit-content}:host .left-side .logo.hide-logo{display:none}:host .right-side{flex:1 1 auto;overflow:hidden;justify-content:space-between}:host .right-side .content,:host .right-side .secondary{display:flex;position:relative;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;height:100%}:host .right-side .content{min-width:-moz-max-content;min-width:max-content}:host .right-side .secondary{overflow:hidden}:host .right-side .dropdown{overflow:visible}:host .right-side .dropdown-content>.slot-content-active{padding:0.5rem 1.5rem 0.5rem 1.5rem;border-top:none}:host .right-side .dropdown-content .slot-content-active~.slot-content-active{border-top:1px solid var(--theme-color-x-weak-bdr)}:host .right-side .context-menu{display:none}:host .right-side .context-menu.context-menu-visible{display:block;margin-left:0.5rem}:host .right-side ::slotted(ix-avatar){margin-left:0.5rem}:host .right-side .primary-navigation{align-self:end}:host .right-side.sm{justify-content:end}@media only screen and (max-width: 48em){:host .logo{margin-left:0.5rem;display:none !important}:host .content,:host .secondary,:host .app-icon{display:none}}:host(.hide-bottom-border){border-bottom:none}`;
 
@@ -20,41 +19,104 @@ const ApplicationHeader = class {
         index.registerInstance(this, hostRef);
         this.menuToggle = index.createEvent(this, "menuToggle", 7);
         this.openAppSwitch = index.createEvent(this, "openAppSwitch", 7);
-        /**
-         * Render subtle outline around app icon to ensure proper contrast.
-         *
-         * @since 4.0.0
-         */
-        this.appIconOutline = false;
-        /**
-         * Hides the bottom border of the header
-         *
-         * @since 4.0.0
-         */
-        this.hideBottomBorder = false;
-        /**
-         * Controls the visibility of the menu toggle button based on the context of the application header.
-         *
-         * When the application header is utilized outside the application frame, the menu toggle button is displayed.
-         * Conversely, if the header is within the application frame, this property is ineffective.
-         */
-        this.showMenu = false;
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.breakpoint = 'lg';
-        this.menuExpanded = false;
-        this.suppressResponsive = false;
-        this.hasSlottedLogo = false;
-        this.hasOverflowContextMenu = false;
-        this.hasSecondarySlotElements = false;
-        this.hasDefaultSlotElements = false;
-        this.hasOverflowSlotElements = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Application name
+     */
+    name;
+    /**
+     * Define a suffix which will be displayed next to the application name
+     *
+     * @since 4.0.0
+     */
+    nameSuffix;
+    /**
+     * Company logo will be show on the left side of the application name.
+     * It will be hidden on smaller screens.
+     *
+     * @since 4.0.0
+     */
+    companyLogo;
+    /**
+     * Alt text for the company logo
+     *
+     * @since 4.0.0
+     */
+    companyLogoAlt;
+    /**
+     * The app icon will be shown as the first element inside the header.
+     * It will be hidden on smaller screens.
+     *
+     * @since 4.0.0
+     */
+    appIcon;
+    /**
+     * Alt text for the app icon
+     *
+     * @since 4.0.0
+     */
+    appIconAlt;
+    /**
+     * Render subtle outline around app icon to ensure proper contrast.
+     *
+     * @since 4.0.0
+     */
+    appIconOutline = false;
+    /**
+     * Hides the bottom border of the header
+     *
+     * @since 4.0.0
+     */
+    hideBottomBorder = false;
+    /**
+     * Controls the visibility of the menu toggle button based on the context of the application header.
+     *
+     * When the application header is utilized outside the application frame, the menu toggle button is displayed.
+     * Conversely, if the header is within the application frame, this property is ineffective.
+     */
+    showMenu = false;
+    /**
+     * ARIA label for the app switch icon button
+     *
+     * @since 3.2.0
+     */
+    ariaLabelAppSwitchIconButton;
+    /**
+     * ARIA label for the more menu icon button
+     *
+     * @since 3.2.0
+     */
+    ariaLabelMoreMenuIconButton;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Event emitted when the menu toggle button is clicked
+     */
+    menuToggle;
+    /**
+     * Event emitted when the app switch button is clicked
+     *
+     * @since 3.0.0
+     */
+    openAppSwitch;
+    breakpoint = 'lg';
+    menuExpanded = false;
+    suppressResponsive = false;
+    hasSlottedLogo = false;
+    hasOverflowContextMenu = false;
+    hasSecondarySlotElements = false;
+    hasDefaultSlotElements = false;
+    hasOverflowSlotElements = false;
+    applicationLayoutContext;
+    menuDisposable;
+    modeDisposable;
+    callbackUpdateAppSwitchModal;
     get contentBackground() {
         return this.hostElement.shadowRoot.querySelector('.dropdown-content');
     }
@@ -80,9 +142,8 @@ const ApplicationHeader = class {
         this.attachSiemensLogoIfLoaded();
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.menuDisposable?.dispose();
+        this.modeDisposable?.dispose();
     }
     watchApplicationLayoutContext() {
         if (this.applicationLayoutContext) {
@@ -101,9 +162,9 @@ const ApplicationHeader = class {
         if (isSiemensLogoDefined) {
             return shadowDom.hasSlottedElements(slotElement);
         }
-        let assignedElements = slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedElements({ flatten: true });
-        assignedElements = assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.filter((element) => element.tagName !== 'IX-SIEMENS-LOGO');
-        return (assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length) !== 0;
+        let assignedElements = slotElement?.assignedElements({ flatten: true });
+        assignedElements = assignedElements?.filter((element) => element.tagName !== 'IX-SIEMENS-LOGO');
+        return assignedElements?.length !== 0;
     }
     attachSiemensLogoIfLoaded() {
         if (this.companyLogo) {
@@ -128,23 +189,21 @@ const ApplicationHeader = class {
         return new Promise((resolve) => index.readTask(() => resolve(this.hostElement.shadowRoot.querySelector('[data-context-menu]'))));
     }
     tryUpdateAppSwitch() {
-        var _a, _b;
         if (!this.callbackUpdateAppSwitchModal ||
-            !((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+            !this.applicationLayoutContext?.appSwitchConfig) {
             return;
         }
-        this.callbackUpdateAppSwitchModal((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+        this.callbackUpdateAppSwitchModal(this.applicationLayoutContext?.appSwitchConfig);
     }
     async showAppSwitch() {
-        var _a, _b;
         const { defaultPrevented } = this.openAppSwitch.emit();
         if (defaultPrevented) {
             return;
         }
-        if (!((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+        if (!this.applicationLayoutContext?.appSwitchConfig) {
             return;
         }
-        this.callbackUpdateAppSwitchModal = await index$1.showAppSwitch((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+        this.callbackUpdateAppSwitchModal = await index$1.showAppSwitch(this.applicationLayoutContext?.appSwitchConfig);
     }
     updateHasSlotAssignedElementsStates() {
         const defaultSlot = this.hostElement.shadowRoot.querySelector('.content slot:not([name])');
@@ -164,42 +223,40 @@ const ApplicationHeader = class {
         }
     }
     render() {
-        var _a;
         const hasApplicationContextAvailable = !!this.applicationLayoutContext;
         const showMenuByApplicationFrame = this.breakpoint === 'sm' &&
             this.suppressResponsive === false &&
             hasApplicationContextAvailable;
-        const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        const showApplicationSwitch = this.applicationLayoutContext?.appSwitchConfig &&
             this.breakpoint !== 'sm' &&
             this.suppressResponsive === false;
         const showCompanyLogoByProperty = this.breakpoint !== 'sm' && !!this.companyLogo;
-        return (index.h(index.Host, { key: '2eab44957d686a9eab20ec6d03e227ec9b8bbad9', class: {
+        return (index.h(index.Host, { key: '8fed428b8e6079dff2a3c69ad5a97e7b1da48a7d', class: {
                 [`breakpoint-${this.breakpoint}`]: true,
                 'hide-bottom-border': this.hideBottomBorder,
-            }, slot: "application-header" }, index.h("div", { key: '6fb0bbe9b969637a020d93ce2f3b644328a3b587', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: '0044aec3cb9c26aba09eaeef9cc80bca8a221e4c', class: {
+            }, slot: "application-header", role: "banner" }, index.h("div", { key: 'c9931f63a7ce2f8c06180fef6cd76564f5e84bc3', class: "left-side" }, this.appIcon && this.breakpoint !== 'sm' && (index.h("div", { key: 'e4e7f62ff603a160a74009edbe46d85da8b8df24', class: {
                 'app-icon': true,
                 'app-icon-outline': this.appIconOutline,
-            } }, index.h("img", { key: 'e6a04bd01422045910b4eca206119546d361075d', src: this.appIcon, alt: this.appIconAlt }))), (this.showMenu || showMenuByApplicationFrame) && (index.h("ix-menu-expand-icon", { key: 'e7a21a031f67841fe6d4b77291c6f9d5e3e555be', onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), showApplicationSwitch && (index.h("ix-icon-button", { key: 'c045ba1f2ff0f96cf8cbcd0c646d56f9539d923d', onClick: () => this.showAppSwitch(), icon: index$2.iconApps, variant: "subtle-tertiary", class: {
+            } }, 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: {
                 'app-switch': true,
                 'without-app-icon': !this.appIcon,
-            }, "aria-label": this.ariaLabelAppSwitchIconButton })), showCompanyLogoByProperty && (index.h("div", { key: '5a016cb75ee7aaa147762c83c0978cb48a26c9d4', class: "logo" }, index.h("img", { key: '642d45a60fa095f6f57c6790b58c2002105a7eae', src: this.companyLogo, alt: this.companyLogoAlt }))), index.h("div", { key: '2380f7df6018e182176f94dd5a767541a0f8b290', class: {
+            }, "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: {
                 logo: true,
                 'hide-logo': !this.hasSlottedLogo,
-            } }, index.h("slot", { key: '98c518263a717ae711f2d0b3990dfeedecce9ece', name: "logo", onSlotchange: () => (this.hasSlottedLogo = this.checkLogoSlot()) })), index.h("div", { key: '985826c96dad09c5c2f2b2142bbdf97ab08cd359', class: "name" }, index.h("ix-typography", { key: '25e7be365fa6d51f5045535f5f142184389acf3b', format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== 'sm' && (index.h("ix-typography", { key: '0e5c646d9a0915d9e9ef3513f6de8d8b8f97d031', format: "body-xs", class: "application-name-suffix" }, this.nameSuffix)))), index.h("div", { key: '38fc7b07e54b22e62c31db3bb452fab0700b142a', class: { 'right-side': true, sm: this.breakpoint === 'sm' } }, this.breakpoint !== 'sm' && (index.h("div", { key: 'a9a26d0dc561867d657b70bd873b6d5576cc76e8', class: "secondary" }, index.h("slot", { key: '4c6f6e36e501c0472414e609394830734ccb4e33', name: "secondary" }))), index.h("div", { key: 'ace5d49c20490fbfc053f16087f8aabe7c73574f', class: "content" }, this.breakpoint !== 'sm' && index.h("slot", { key: '312c3be1999677bcf8390cc8a6b98de9d4332b9e' }), index.h("ix-icon-button", { key: '5639068ecea1e24d37957c90ad484b1e95eb4ba0', class: {
+            } }, 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: {
                 '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: '09709d9e96f02ae68fb7bd0f26f607e6630093df', "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11y.a11yBoolean(!this.hasOverflowContextMenu), enableTopLayer: this.enableTopLayer }, index.h("div", { key: '213dce0eb4003be8187342ba01477e0d4d6addb7', class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === 'sm' && (index.h("div", { key: '54657f69566a77eb752680249906b6bee9d03ee4', 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: '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: {
                 'slot-content': true,
                 'slot-content-active': this.hasSecondarySlotElements,
-            } }, index.h("slot", { key: 'a58dffdd6cc64da6f7ac6f5a7545baa14d094c01', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: 'd3abff81d272b487d5367c5f04788aa10c381c9f', class: {
+            } }, index.h("slot", { key: '19dfaf11bac37b1130122cfd7289b51112c7796d', name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), this.breakpoint === 'sm' && (index.h("div", { key: '70fc852947963fc76d28ff07737d95ecc2751474', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasDefaultSlotElements,
-            } }, index.h("slot", { key: '1da7b1a160223b77abb22295d4efa214ba5fd5cf', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: 'f0f1f86e16c18cf153a08735ddd074822c494e43', class: {
+            } }, index.h("slot", { key: '607ce94ee9c05f07281b921ef9da3c3417b8c99b', onSlotchange: () => this.updateHasSlotAssignedElementsStates() }))), index.h("div", { key: '223851bee394e67075ad931e54980b0c2691c98e', class: {
                 'slot-content': true,
                 'slot-content-active': this.hasOverflowSlotElements,
-            } }, index.h("slot", { key: 'c4354e3021d968f6f1e80a8ff61bc2356224bfa2', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: 'b58021c1e3ec91455f626ffb4dd2b5db0724a1a2', name: "ix-application-header-avatar" })))));
+            } }, index.h("slot", { key: '88e925666de5a68e6fca694cc0682954de30cd79', name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), index.h("slot", { key: '2806aac9e05a0d3b7fa423db8d19048950a936c5', name: "ix-application-header-avatar" })))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "applicationLayoutContext": [{
                 "watchApplicationLayoutContext": 0

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

@@ -1,10 +1,9 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-require('./animation-D5wGQwTg.js');
-var modal = require('./modal-BPMUkqrW.js');
-var index$1 = require('./index-DIYO-Liy.js');
-require('./typed-event-DxWATHPL.js');
+var index = require('./index-BKQkUbyE.js');
+var index$1 = require('./index-Dw-NwUuT.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}`;
 
@@ -35,21 +34,18 @@ const ApplicationSwitchModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    get hostElement() { return index.getElement(this); }
+    /** @internal */
+    config;
     componentWillLoad() {
         if (!this.config) {
             throw Error('ApplicationConfig not provided');
         }
     }
     render() {
-        var _a, _b, _c, _d;
-        return (index.h(index.Host, { key: 'ad91bb8276f431a5eaf9efc39520c3d679fa1c35' }, index.h("ix-modal-header", { key: '8818474a3ac6e57a7758af5f9ed2707c1d741f36', icon: index$1.iconApps }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), index.h("ix-modal-content", { key: '2499c10197c91b9f167f38ab864083453b497325', class: "content" }, index.h("div", { key: '1f6f1fe8f3cf57506aa28a9f758dcfa7a0114163', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (index.h("div", { key: '096832c472ffa6665e1d1a3e61234dbf867c43c8', class: "loading" }, index.h("ix-spinner", { key: '89524c61771cea96b31e89b59d722e22a418ca98', size: "medium", variant: "primary" }), index.h("span", { key: 'a9bb64f0ba5ae12e77cb86dd38a1e4da0abd7ab4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
-            'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
-            _d.apps.map((appEntry) => {
-                var _a;
-                return (index.h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === ((_a = this.config) === null || _a === void 0 ? void 0 : _a.currentAppId) }));
-            })))));
+        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 ||
+            '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 })))))));
     }
-    get hostElement() { return index.getElement(this); }
 };
 ApplicationSwitchModal.style = applicationSwitchModalCss();
 

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
-var context = require('./context-CmNuiaNz.js');
-var service = require('./service-DuiJmf7R.js');
-var menuService = require('./menu-service-CW0vT80Q.js');
-var shadowDom = require('./shadow-dom-DT01VwcB.js');
-var themeSwitcher = require('./theme-switcher-BfjZ3MX8.js');
-require('./typed-event-DxWATHPL.js');
+var index = require('./index-BKQkUbyE.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 themeSwitcher = require('./theme-switcher-sbkXOvhB.js');
+require('./typed-event-Bw4IfJC0.js');
 require('./breakpoints-C5ZrUCbZ.js');
 
 const applicationCss = () => `:host{display:flex;position:relative;width:100vw;height:100vh;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host .content-area{display:flex;position:relative;flex-direction:column;flex-wrap:nowrap;height:calc(100% - var(--ix-safe-area-inset-bottom, 0px));width:100%;margin-left:var(--ix-application-menu-margin-left);min-width:0}:host main{display:block;position:relative;flex-grow:1;width:100%;padding-bottom:var(--ix-safe-area-inset-bottom);overflow:auto}:host footer{display:block;position:relative;width:100%}:host(.breakpoint-md){--ix-application-menu-margin-left:calc(     3.25rem + var(--ix-application-menu-safe-area-left, 0rem)   )}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+.content-area{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+.content-area{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:var(     --ix-application-menu-safe-area-left,     0rem   )}`;
@@ -14,17 +14,22 @@ const applicationCss = () => `:host{display:flex;position:relative;width:100vw;h
 const Application = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        /**
-         * Use the system appearance dark or light
-         */
-        this.themeSystemAppearance = false;
-        /**
-         * Supported layouts
-         */
-        this.breakpoints = ['sm', 'md', 'lg'];
-        this.breakpoint = 'lg';
-        this.applicationSidebarSlotted = false;
     }
+    get hostElement() { return index.getElement(this); }
+    /**
+     * Application theme
+     */
+    theme;
+    /**
+     * Color schema of the theme
+     *
+     * @since 5.0.0
+     */
+    colorSchema = 'system';
+    /**
+     * Change the responsive layout of the menu structure
+     */
+    forceBreakpoint;
     forceLayoutChange(newMode) {
         if (!newMode) {
             service.applicationLayoutService.enableBreakpointDetection();
@@ -33,21 +38,32 @@ const Application = class {
         service.applicationLayoutService.disableBreakpointDetection();
         service.applicationLayoutService.setBreakpoint(newMode);
     }
+    /**
+     * Supported layouts
+     */
+    breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
         service.applicationLayoutService.setBreakpoints(breakpoints);
     }
+    /**
+     * Define application switch configuration
+     */
+    appSwitchConfig;
+    breakpoint = 'lg';
+    applicationSidebarSlotted = false;
+    contextProvider;
     get menu() {
         return this.hostElement.querySelector('ix-menu');
     }
     get applicationSidebarSlot() {
         return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
     }
+    modeDisposable;
     onContentClick() {
-        var _a;
         if (menuService.menuController.isPinned) {
             return;
         }
-        (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+        this.menu?.toggleMenu(false);
     }
     componentWillLoad() {
         service.applicationLayoutService.setBreakpoints(this.breakpoints);
@@ -63,24 +79,21 @@ const Application = class {
         if (this.forceBreakpoint) {
             this.forceLayoutChange(this.forceBreakpoint);
         }
-        this.changeTheme();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.modeDisposable?.dispose();
     }
     changeTheme() {
         if (!this.theme) {
-            if (this.themeSystemAppearance) {
-                themeSwitcher.themeSwitcher.setVariant();
-            }
             return;
         }
-        if (themeSwitcher.themeSwitcher.hasVariantSuffix(this.theme)) {
-            themeSwitcher.themeSwitcher.setTheme(`theme-${this.theme}`);
+        themeSwitcher.themeSwitcher.setTheme(this.theme);
+    }
+    changeColorSchema() {
+        if (!this.colorSchema) {
             return;
         }
-        themeSwitcher.themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+        themeSwitcher.themeSwitcher.setColorSchema(this.colorSchema);
     }
     onApplicationSidebarChange() {
         if (!this.contextProvider) {
@@ -94,14 +107,13 @@ const Application = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '80437ae705c381c0167b8d7c5ce429e611b03f91', "data-role": "", class: {
+        return (index.h(index.Host, { key: '9621e446a9532a740dcdef516a51d326c59587a7', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, index.h("slot", { key: '865d2e5a9252459f62ff8ab5dce1413d11c04379', name: "application-header" }), index.h("div", { key: 'ae1960437e8721fbc4afab659d149265660e4164', class: "application" }, index.h("slot", { key: 'a2a9a835af35e30d2ebe52347903f1838e75ac8d', name: "menu" }), index.h("aside", { key: '6141152471ac7dc7310247b23278dc594e025fa3', class: {
+            } }, 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: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, index.h("slot", { key: '3285cc16452a7a6936a542dd26758beebb515972', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = shadowDom.hasSlottedElements(this.applicationSidebarSlot)) })), index.h("div", { key: 'c6d022a1a5c220ed088adeba49ab5daa27ff8c77', class: "content-area" }, index.h("main", { key: '8ab781e17318078290a6ce4e1e64dfea43d5ae00', class: "content", onClick: () => this.onContentClick() }, index.h("slot", { key: '24e83882ab5746f4e00a0c16c797ddf4111aa1e8' })), index.h("footer", { key: '3ce838daa8f8f4b4e56cb2626476223d9575177c', class: "footer" }, index.h("slot", { key: 'e49d1cd476554dfddca3b538194040ca29394967', name: "bottom" }))))));
+            }, 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" }))))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "breakpoints": [{
                 "onBreakpointsChange": 0
@@ -109,8 +121,8 @@ const Application = class {
         "theme": [{
                 "changeTheme": 0
             }],
-        "themeSystemAppearance": [{
-                "changeTheme": 0
+        "colorSchema": [{
+                "changeColorSchema": 0
             }],
         "appSwitchConfig": [{
                 "onApplicationSidebarChange": 0