@siemens/ix 4.4.0 → 5.1.0

package/dist/cjs/{tree.types-BygtRFW3.js → tree.types-Cs9O1Wtf.js}

@@ -13,8 +13,10 @@ function renderDefaultItem(item, context, update) {
     el.hasChildren = item.hasChildren;
     el.context = context;
     el.text = item.data.name;
+    el.disabled = item.disabled || false;
     update((updateTreeItem) => {
         el.text = updateTreeItem.data.name;
+        el.disabled = updateTreeItem.disabled || false;
     });
     return el;
 }

package/dist/cjs/typed-event-Bw4IfJC0.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class TypedEvent {
+    listeners = [];
+    listenersOncer = [];
+    on = (listener) => {
+        this.listeners.push(listener);
+        return {
+            dispose: () => this.off(listener),
+        };
+    };
+    once = (listener) => {
+        this.listenersOncer.push(listener);
+    };
+    off = (listener) => {
+        const callbackIndex = this.listeners.indexOf(listener);
+        if (callbackIndex > -1) {
+            this.listeners.splice(callbackIndex, 1);
+        }
+    };
+    emit = (event) => {
+        /** Update any general listeners */
+        this.listeners.forEach((listener) => listener(event));
+        /** Clear the `once` queue */
+        if (this.listenersOncer.length > 0) {
+            const toCall = this.listenersOncer;
+            this.listenersOncer = [];
+            toCall.forEach((listener) => listener(event));
+        }
+    };
+    pipe = (te) => {
+        return this.on((e) => te.emit(e));
+    };
+}
+
+exports.TypedEvent = TypedEvent;

package/dist/cjs/uuid-Bo2QzEg9.js

@@ -0,0 +1,15 @@
+'use strict';
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const createSequentialId = (prefix, sequenceId) => {
+    return `${prefix}-${sequenceId++}`;
+};
+
+exports.createSequentialId = createSequentialId;

package/dist/cjs/{validation-DF9UXqHB.js → validation-DJaUH-UR.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-Dxeom0qd.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-B4J4JK0P.js');
 
 /*
  * SPDX-FileCopyrightText: 2024 Siemens AG
@@ -29,8 +30,8 @@ async function shouldSuppressInternalValidation(host) {
 function createClassMutationObserver(element, callback, options) {
     const observer = new MutationObserver(callback);
     observer.observe(element, {
-        subtree: options === null || options === void 0 ? void 0 : options.includeChildren,
-        childList: options === null || options === void 0 ? void 0 : options.includeChildren,
+        subtree: options?.includeChildren,
+        childList: options?.includeChildren,
         attributes: true,
         attributeFilter: ['class'],
     });
@@ -66,6 +67,10 @@ function HookValidationLifecycle(options) {
                 if (skipValidation) {
                     return;
                 }
+                if (!index$1.isIxInputFieldComponent(host)) {
+                    return;
+                }
+                const validationElement = await host.getNativeInputElement?.();
                 if (host.hasValidValue && typeof host.hasValidValue === 'function') {
                     const hasValue = await host.hasValidValue();
                     const touched = await isTouched(host);
@@ -82,23 +87,41 @@ function HookValidationLifecycle(options) {
                     const touched = await isTouched(host);
                     host.classList.toggle(`ix-invalid--validity-patternMismatch`, validityState.patternMismatch);
                     host.classList.toggle('ix-invalid--validity-invalid', !validityState.valid && touched);
+                    const fieldWrapper = host.shadowRoot?.querySelector('ix-field-wrapper');
+                    if (validationElement && fieldWrapper) {
+                        const ariaErrorMessageElement = await fieldWrapper.getAriaErrorMessageElement();
+                        const ariaHelperMessageElement = await fieldWrapper.getAriaHelperMessageElement();
+                        if (ariaHelperMessageElement) {
+                            validationElement.setAttribute('aria-describedby', `${ariaHelperMessageElement.id}`);
+                        }
+                        if (!validityState.valid) {
+                            validationElement?.setAttribute('aria-invalid', 'true');
+                            if (ariaErrorMessageElement && !validityState.valid) {
+                                validationElement.setAttribute('aria-errormessage', `${ariaErrorMessageElement.id}`);
+                                validationElement.setAttribute('aria-describedby', `${ariaErrorMessageElement.id}`);
+                            }
+                        }
+                        else {
+                            validationElement?.removeAttribute('aria-invalid');
+                        }
+                    }
                 }
             };
             host.addEventListener('checkedChange', checkIfRequiredFunction);
             host.addEventListener('valueChange', checkIfRequiredFunction);
             host.addEventListener('ixBlur', checkIfRequiredFunction);
             setTimeout(checkIfRequiredFunction);
-            return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+            return connectedCallback?.call(this);
         };
         proto.componentWillLoad = function () {
             const host = index.getElement(this);
             classMutationObserver = createClassMutationObserver(host, () => {
-                const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+                const result = checkFieldClasses(host, options?.includeChildren);
                 proto[methodName].call(this, result);
             }, options);
-            const result = checkFieldClasses(host, options === null || options === void 0 ? void 0 : options.includeChildren);
+            const result = checkFieldClasses(host, options?.includeChildren);
             proto[methodName].call(this, result);
-            return componentWillLoad === null || componentWillLoad === void 0 ? void 0 : componentWillLoad.call(this);
+            return componentWillLoad?.call(this);
         };
         proto.disconnectedCallback = function () {
             const host = index.getElement(this);
@@ -112,13 +135,13 @@ function HookValidationLifecycle(options) {
                 host.removeEventListener('ixBlur', checkIfRequiredFunction);
                 checkIfRequiredFunction = null;
             }
-            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+            return disconnectedCallback?.call(this);
         };
     };
 }
 function getValidationText(isInputInvalid, customInvalidText, i18nFallbackText) {
     if (isInputInvalid) {
-        return customInvalidText !== null && customInvalidText !== void 0 ? customInvalidText : i18nFallbackText;
+        return customInvalidText ?? i18nFallbackText;
     }
     return customInvalidText;
 }

package/dist/collection/collection-manifest.json

@@ -1,14 +1,11 @@
 {
   "entries": [
     "components/button/button.js",
-    "components/menu-settings/menu-settings.js",
-    "components/menu-about/menu-about.js",
     "components/toggle-button/toggle-button.js",
     "components/action-card/action-card.js",
     "components/application/application.js",
     "components/application-header/application-header.js",
     "components/application-header/application-switch-modal/application-switch-modal.js",
-    "components/application-sidebar/application-sidebar.js",
     "components/avatar/avatar.js",
     "components/blind/blind.js",
     "components/breadcrumb/breadcrumb.js",
@@ -32,9 +29,9 @@
     "components/date-input/date-input.js",
     "components/date-picker/date-picker.js",
     "components/date-time-card/date-time-card.js",
+    "components/datetime-input/datetime-input.js",
     "components/datetime-picker/datetime-picker.js",
     "components/divider/divider.js",
-    "components/drawer/drawer.js",
     "components/dropdown/dropdown.js",
     "components/dropdown-button/dropdown-button.js",
     "components/dropdown-header/dropdown-header.js",
@@ -58,7 +55,7 @@
     "components/input/input.js",
     "components/input/number-input.js",
     "components/input/textarea.js",
-    "components/input-group/input-group.js",
+    "components/ix-playground/ix-playground.js",
     "components/key-value/key-value.js",
     "components/key-value-list/key-value-list.js",
     "components/kpi/kpi.js",
@@ -67,12 +64,14 @@
     "components/link-button/link-button.js",
     "components/menu/menu-expand-icon.js",
     "components/menu/menu.js",
+    "components/menu-about/menu-about.js",
     "components/menu-about-item/menu-about-item.js",
     "components/menu-about-news/menu-about-news.js",
     "components/menu-avatar/menu-avatar.js",
     "components/menu-avatar-item/menu-avatar-item.js",
     "components/menu-category/menu-category.js",
     "components/menu-item/menu-item.js",
+    "components/menu-settings/menu-settings.js",
     "components/menu-settings-item/menu-settings-item.js",
     "components/message-bar/message-bar.js",
     "components/modal/modal.js",
@@ -84,10 +83,16 @@
     "components/pane/pane.js",
     "components/pane-layout/pane-layout.js",
     "components/pill/pill.js",
+    "components/popover/popover.js",
+    "components/popover-content/popover-content.js",
+    "components/popover-footer/popover-footer.js",
+    "components/popover-header/popover-header.js",
+    "components/popover-image/popover-image.js",
     "components/progress-indicator/progress-indicator.js",
     "components/push-card/push-card.js",
     "components/radio/radio.js",
     "components/radio-group/radio-group.js",
+    "components/range-field/range-field.js",
     "components/row/row.js",
     "components/select/select.js",
     "components/select-item/select-item.js",
@@ -95,6 +100,8 @@
     "components/spinner/spinner.js",
     "components/split-button/split-button.js",
     "components/tab-item/tab-item.js",
+    "components/tab-panel/tab-panel.js",
+    "components/tab-set/tab-set.js",
     "components/tabs/tabs.js",
     "components/tile/tile.js",
     "components/time-input/time-input.js",
@@ -107,16 +114,21 @@
     "components/tree-item/tree-item.js",
     "components/typography/typography.js",
     "components/upload/upload.js",
-    "components/validation-tooltip/validation-tooltip.js",
     "components/workflow-step/workflow-step.js",
     "components/workflow-steps/workflow-steps.js"
   ],
+  "mixins": [
+    "components/utils/internal/mixins/focus-visible.mixin.js",
+    "components/utils/internal/mixins/accessibility/inherit-aria-attributes.mixin.js",
+    "components/utils/internal/mixins/accessibility/aria-activedescendant.mixin.js",
+    "components/utils/internal/mixins/input/input-picker.mixin.js",
+    "components/tab-item/tab.mixin.js"
+  ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.1",
+    "version": "4.43.5",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],
-  "bundles": [],
-  "global": "setup.js"
+  "bundles": []
 }

package/dist/collection/components/action-card/action-card.css

@@ -79,6 +79,24 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host button {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: transparent;
+  text-align: start;
+  padding: 0;
+  border: 0;
+  border-radius: var(--theme-btn--border-radius);
+  box-shadow: initial;
+}
+:host button:focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host button[disabled] {
+  cursor: default;
+}
 :host ix-card {
   width: 100%;
   height: 100%;

package/dist/collection/components/action-card/action-card.js

@@ -8,25 +8,46 @@
  */
 import { h, Host } from "@stencil/core";
 import { a11yBoolean, getFallbackLabelFromIconName } from "../utils/a11y";
+/**
+ * @slot - Place additional non-interactive content inside the card. Avoid interactive elements (links, buttons, inputs) as the card itself is rendered as a single button.
+ */
 export class IxActionCard {
-    constructor() {
-        /**
-         * 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'
@@ -36,7 +57,8 @@ export class IxActionCard {
         const ariaLabelledBy = !this.ariaLabelCard && this.heading
             ? 'ix-action-card-heading'
             : undefined;
-        return (h(Host, { key: '600ad1913e671fb47ec9da8f66e984bbde498fae' }, 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 }, h("ix-card-content", { key: 'c138b94b131af478fee65244f32b91cdf78b31df' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: 'eb0252c628c75709fddae387a3b4a7abbf7c3df0' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'f47fd515fc5b8f22344dc83b808e527116238618' }))))));
+        return (h(Host, { key: 'b56ab72218bf3b098acb7d1f7bbbc967dc7851c9' }, h("button", { key: '87ef305e4149a4f883f52b9d2d26cc3080073082', type: "button", disabled: this.passive, "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy }, h("ix-card", { key: '5064b548f6434036d5c46e9162e4bad1f06f3a40', selected: this.selected, variant: this.variant, passive: this.passive, class: this.passive ? undefined : 'pointer' }, h("ix-card-content", { key: 'dbfb7bcda7ae018721e8e1d06f85b2fadd8330d0' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32", "aria-label": this.ariaLabelIcon ||
+                getFallbackLabelFromIconName(this.icon) })) : null, h("div", { key: '51a82f1f462f9638980f7f2b18a4cfd54db24cf6' }, this.heading ? (h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading)) : null, this.subheading ? (h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading)) : null, h("slot", { key: 'c8ae09e93db05dab6f0a1820c0022c9142b6cc54' })))))));
     }
     static get is() { return "ix-action-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/application/application.js

@@ -14,74 +14,97 @@ import { menuController } from "../utils/menu-service/menu-service";
 import { hasSlottedElements } from "../utils/shadow-dom";
 import { themeSwitcher } from "../utils/theme-switcher";
 export class Application {
-    constructor() {
-        /**
-         * Use the system appearance dark or light
-         */
-        this.themeSystemAppearance = false;
-        /**
-         * Supported layouts
-         */
-        this.breakpoints = ['sm', 'md', 'lg'];
-        this.breakpoint = 'lg';
-        this.applicationSidebarSlotted = false;
+    hostElement;
+    /**
+     * Application theme
+     */
+    theme;
+    /**
+     * Color schema of the theme
+     *
+     * @since 5.0.0
+     */
+    colorSchema = 'system';
+    /**
+     * Change the responsive layout of the menu structure
+     */
+    forceBreakpoint;
+    onForceBreakpointChange(forceBreakpoint) {
+        this.setBreakpoints(this.breakpoints);
+        this.forceLayoutChange(forceBreakpoint);
     }
     forceLayoutChange(newMode) {
         if (!newMode) {
             applicationLayoutService.enableBreakpointDetection();
+            applicationLayoutService.debouncedOnResize();
             return;
         }
         applicationLayoutService.disableBreakpointDetection();
         applicationLayoutService.setBreakpoint(newMode);
     }
+    /**
+     * Supported layouts
+     */
+    breakpoints = ['sm', 'md', 'lg'];
     onBreakpointsChange(breakpoints) {
-        applicationLayoutService.setBreakpoints(breakpoints);
+        this.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 (menuController.isPinned) {
             return;
         }
-        (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+        this.menu?.toggleMenu(false);
+    }
+    setBreakpoints(breakpoints) {
+        if (this.forceBreakpoint) {
+            applicationLayoutService.setBreakpoints([this.forceBreakpoint]);
+        }
+        else {
+            applicationLayoutService.setBreakpoints(breakpoints);
+        }
     }
     componentWillLoad() {
-        applicationLayoutService.setBreakpoints(this.breakpoints);
+        this.setBreakpoints(this.breakpoints);
         this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
             hideHeader: false,
             sidebar: this.applicationSidebarSlotted,
             appSwitchConfig: this.appSwitchConfig,
         });
         this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
-            this.breakpoint = mode;
+            this.breakpoint = this.forceBreakpoint || mode;
         });
-        this.breakpoint = applicationLayoutService.breakpoint;
-        if (this.forceBreakpoint) {
-            this.forceLayoutChange(this.forceBreakpoint);
-        }
-        this.changeTheme();
+        this.breakpoint =
+            this.forceBreakpoint || applicationLayoutService.breakpoint;
+        this.forceLayoutChange(this.forceBreakpoint);
     }
     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.setVariant();
-            }
             return;
         }
-        if (themeSwitcher.hasVariantSuffix(this.theme)) {
-            themeSwitcher.setTheme(`theme-${this.theme}`);
+        themeSwitcher.setTheme(this.theme);
+    }
+    changeColorSchema() {
+        if (!this.colorSchema) {
             return;
         }
-        themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+        themeSwitcher.setColorSchema(this.colorSchema);
     }
     onApplicationSidebarChange() {
         if (!this.contextProvider) {
@@ -95,12 +118,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '80437ae705c381c0167b8d7c5ce429e611b03f91', "data-role": "", class: {
+        return (h(Host, { key: 'b580ca5dbbd164b45beb5b6863fc3f6ffd830f08', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: '865d2e5a9252459f62ff8ab5dce1413d11c04379', name: "application-header" }), h("div", { key: 'ae1960437e8721fbc4afab659d149265660e4164', class: "application" }, h("slot", { key: 'a2a9a835af35e30d2ebe52347903f1838e75ac8d', name: "menu" }), h("aside", { key: '6141152471ac7dc7310247b23278dc594e025fa3', class: {
+            } }, h("slot", { key: '6055d2a286d3b90e4aca43bee094e509ab4780fd', name: "application-header" }), h("div", { key: '6418c3369dc0525d99c29015d5717a791a2ddd4c', class: "application" }, h("slot", { key: 'a6adda421cf6294d34da129a5dd3bc366f6384ca', name: "menu" }), h("aside", { key: '3f359f1ef65e8fa1f35f4001b23ec10d32a7d5be', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '3285cc16452a7a6936a542dd26758beebb515972', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: 'c6d022a1a5c220ed088adeba49ab5daa27ff8c77', class: "content-area" }, h("main", { key: '8ab781e17318078290a6ce4e1e64dfea43d5ae00', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '24e83882ab5746f4e00a0c16c797ddf4111aa1e8' })), h("footer", { key: '3ce838daa8f8f4b4e56cb2626476223d9575177c', class: "footer" }, h("slot", { key: 'e49d1cd476554dfddca3b538194040ca29394967', name: "bottom" }))))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: 'f335892f90b7d9f9020bbeb5b9a732404bfcde00', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("div", { key: '93333ea8c99802b366971d1c9717418262fc649d', class: "content-area" }, h("main", { key: '79fe70895b7725377b679b98c04784f6fd7ff789', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '22d8f248280108d31903f67e7678804cf78dc658' })), h("footer", { key: '9e541aa388f2aaf44d8f41987ded1bcd863a22f6', class: "footer" }, h("slot", { key: '9b87eb43ced974fca634e1f4c1282669be3135b4', name: "bottom" }))))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }
@@ -120,16 +143,9 @@ export class Application {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IxTheme",
-                    "resolved": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & Record<never, never> | undefined",
-                    "references": {
-                        "IxTheme": {
-                            "location": "import",
-                            "path": "../utils/theme-switcher",
-                            "id": "src/components/utils/theme-switcher.ts::IxTheme",
-                            "referenceLocation": "IxTheme"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
@@ -142,25 +158,35 @@ export class Application {
                 "reflect": false,
                 "attribute": "theme"
             },
-            "themeSystemAppearance": {
-                "type": "boolean",
+            "colorSchema": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "ThemeVariant",
+                    "resolved": "\"dark\" | \"light\" | \"system\" | undefined",
+                    "references": {
+                        "ThemeVariant": {
+                            "location": "import",
+                            "path": "../utils/theme-switcher",
+                            "id": "src/components/utils/theme-switcher.ts::ThemeVariant",
+                            "referenceLocation": "ThemeVariant"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Use the system appearance dark or light"
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Color schema of the theme"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "theme-system-appearance",
-                "defaultValue": "false"
+                "attribute": "color-schema",
+                "defaultValue": "'system'"
             },
             "forceBreakpoint": {
                 "type": "string",
@@ -248,14 +274,17 @@ export class Application {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
+                "propName": "forceBreakpoint",
+                "methodName": "onForceBreakpointChange"
+            }, {
                 "propName": "breakpoints",
                 "methodName": "onBreakpointsChange"
             }, {
                 "propName": "theme",
                 "methodName": "changeTheme"
             }, {
-                "propName": "themeSystemAppearance",
-                "methodName": "changeTheme"
+                "propName": "colorSchema",
+                "methodName": "changeColorSchema"
             }, {
                 "propName": "appSwitchConfig",
                 "methodName": "onApplicationSidebarChange"