@acorex-platform/framework-client 0.0.28 → 0.0.32

package/fesm2022/acorex-platform-framework-client-themes-shared.mjs

@@ -9,17 +9,17 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, computed, inject, Injector, effect, ChangeDetectionStrategy, Component, InjectionToken, Input, signal, input, ElementRef, Directive, DestroyRef, NgModule } from '@angular/core';
 import { primaryLanguageSubtag, resolveEffectiveAvailableLanguageCodes, AXPSettingsService, AXP_LOCALE_MANAGEMENT_PORT, AXPPlatformSettingsLoadState, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/common';
-import { AXPPlatformScope, AXPRegionalSetting } from '@acorex-platform/framework-shared/core';
+import { AXPRegionalSetting, AXPPlatformScope } from '@acorex-platform/framework-shared/core';
 import * as i1$3 from '@acorex-platform/framework-client/core';
 import { AXPScreenSize, AXPDeviceService, AXPDebugService, OVERLAY_LAYOUT_TRACE_NS, AXP_APP_STARTUP_PRIORITY, AXPComponentSlotModule, AXP_LOGO_THEME_RESOLVER } from '@acorex-platform/framework-client/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
-import { timer, firstValueFrom, filter } from 'rxjs';
-import * as i5 from '@acorex/core/translation';
+import { timer, firstValueFrom, timeout, filter } from 'rxjs';
+import * as i2$1 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXPValueWidgetComponent, AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_WIDGETS_LAYOUT_CATEGORY, AXPWidgetCoreModule, AXP_WIDGET_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/layout/widget-core';
 import { AXPopupService } from '@acorex/components/popup';
-import * as i2$1 from '@acorex/components/button-group';
+import * as i2$2 from '@acorex/components/button-group';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import { AXBasePageComponent } from '@acorex/components/page';
 import * as i1$1 from '@acorex/components/search-box';
@@ -30,7 +30,7 @@ import { FormsModule } from '@angular/forms';
 import * as i3$1 from '@acorex/components/text-box';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2$2 from '@acorex/components/form';
+import * as i2$3 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i1$2 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
@@ -49,6 +49,9 @@ var AXPThemeLayoutSetting;
     AXPThemeLayoutSetting["MenuOrientation"] = "Common:Setting:Layout.RootMenu.Direction";
     AXPThemeLayoutSetting["MenuVerticalMode"] = "Common:Setting:Layout.RootMenu.VerticalMode";
     AXPThemeLayoutSetting["MenuBadgeVisible"] = "Common:Setting:Layout.RootMenu.Badge";
+    AXPThemeLayoutSetting["MenuDark"] = "Common:Setting:Layout.RootMenu.Dark";
+    AXPThemeLayoutSetting["MenuFooterFullWidth"] = "Common:Setting:Layout.RootMenu.Footer.FullWidth";
+    AXPThemeLayoutSetting["HeaderAppearance"] = "Common:Setting:Layout.Header.Appearance";
 })(AXPThemeLayoutSetting || (AXPThemeLayoutSetting = {}));
 
 // Theme Enum
@@ -78,6 +81,28 @@ var AXPMenuVerticalMode;
 })(AXPMenuVerticalMode || (AXPMenuVerticalMode = {}));
 const AXP_SIDE_MENU_FULL_DEFAULT_WIDTH = 300;
 const AXP_SIDE_MENU_COMPACT_WIDTH = 80;
+function normalizeMenuAppearance(value, fallback = 'dark') {
+    if (value === 'dark' ||
+        value === 'light' ||
+        value === 'brand-light' ||
+        value === 'brand-dark') {
+        return value;
+    }
+    // Legacy persisted value before brand light/dark split.
+    if (value === 'brand') {
+        return 'brand-light';
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'dark' : 'light';
+    }
+    return fallback;
+}
+function normalizeHeaderAppearance(value, fallback = 'brand') {
+    if (value === 'brand' || value === 'simple') {
+        return value;
+    }
+    return fallback;
+}
 
 //#endregion
 //#region ----- Constants -----
@@ -283,11 +308,24 @@ function filterFontsForRegionalContext(options, context) {
 function resolveRegionalFontOptions(context) {
     return filterFontsForRegionalContext(AXP_FONT_STYLE_OPTIONS, context);
 }
-function resolveEffectiveFontId(fontId, availableFonts) {
-    const fallback = availableFonts[0]?.id ?? 'system-ui';
+function resolveRegionalDefaultFontId(availableFonts, languageCode) {
+    const language = languageCode ? primaryLanguageSubtag(languageCode) : null;
+    if (language === 'fa') {
+        const iranYekan = availableFonts.find((font) => font.id === 'iranyekanx');
+        if (iranYekan) {
+            return iranYekan.id;
+        }
+    }
+    return availableFonts[0]?.id ?? 'system-ui';
+}
+function resolveEffectiveFontId(fontId, availableFonts, languageCode) {
+    const fallback = resolveRegionalDefaultFontId(availableFonts, languageCode);
     if (!fontId) {
         return fallback;
     }
+    if (fontId === 'system-ui' && languageCode && primaryLanguageSubtag(languageCode) === 'fa') {
+        return fallback;
+    }
     return availableFonts.some((font) => font.id === fontId) ? fontId : fallback;
 }
 //#endregion
@@ -397,13 +435,16 @@ withState(() => {
         sideMenuCompactWidth: AXP_SIDE_MENU_COMPACT_WIDTH,
         menuVerticalMode: AXPMenuVerticalMode.Full,
         menuOrientation: 'vertical',
+        menuAppearance: 'dark',
+        headerAppearance: 'brand',
+        mainFooterFullWidth: false,
         _listener: null,
         isPrinting: false,
     };
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, overlayLoadingTaskCount, menuOrientation, menuVerticalMode, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, overlayLoadingTaskCount, menuOrientation, menuVerticalMode, menuAppearance, headerAppearance, mainFooterFullWidth, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
     const effectiveMenuVerticalMode = computed(() => {
         if (!deviceService.isLarge()) {
             return AXPMenuVerticalMode.Full;
@@ -431,6 +472,19 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
         isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
         effectiveMenuVerticalMode,
         sideMenuDrawerWidth: computed(() => effectiveMenuVerticalMode() === AXPMenuVerticalMode.Compact ? sideMenuCompactWidth() : sideMenuWidth()),
+        menuDarkEnabled: computed(() => {
+            const appearance = menuAppearance();
+            return appearance === 'dark' || appearance === 'brand-dark';
+        }),
+        menuBrandEnabled: computed(() => {
+            const appearance = menuAppearance();
+            return appearance === 'brand-light' || appearance === 'brand-dark';
+        }),
+        /** Full-width footer applies only to vertical layout. */
+        effectiveMainFooterFullWidth: computed(() => menuOrientation() !== AXPMenuOrientation.Horizontal && mainFooterFullWidth()),
+        headerBrandEnabled: computed(() => headerAppearance() === 'brand'),
+        headerButtonColor: computed(() => headerAppearance() === 'simple' ? 'default' : 'primary'),
+        headerButtonLook: computed(() => headerAppearance() === 'simple' ? 'blank' : 'default'),
     };
 }), 
 // Methods for State Management
@@ -453,11 +507,42 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         const settingMenuVerticalMode = normalizeMenuVerticalMode(await settingsService.get(AXPThemeLayoutSetting.MenuVerticalMode), store.menuVerticalMode());
         patchState(store, { menuVerticalMode: settingMenuVerticalMode });
         //
+        let rawMenuAppearance;
+        try {
+            rawMenuAppearance = await settingsService.get(AXPThemeLayoutSetting.MenuDark);
+        }
+        catch {
+            rawMenuAppearance = undefined;
+        }
+        patchState(store, {
+            menuAppearance: normalizeMenuAppearance(rawMenuAppearance, 'brand-dark'),
+        });
+        let rawHeaderAppearance;
+        try {
+            rawHeaderAppearance = await settingsService.get(AXPThemeLayoutSetting.HeaderAppearance);
+        }
+        catch {
+            rawHeaderAppearance = undefined;
+        }
+        patchState(store, {
+            headerAppearance: normalizeHeaderAppearance(rawHeaderAppearance, 'simple'),
+        });
+        let mainFooterFullWidth = false;
+        try {
+            mainFooterFullWidth =
+                (await settingsService.get(AXPThemeLayoutSetting.MenuFooterFullWidth)) ?? false;
+        }
+        catch {
+            mainFooterFullWidth = false;
+        }
+        patchState(store, { mainFooterFullWidth });
+        //
         const fontFamily = await settingsService.get(AXPThemeLayoutSetting.Font);
         const fontSize = await settingsService.get(AXPThemeLayoutSetting.FontSize);
+        const language = (await settingsService.get(AXPRegionalSetting.Language));
         const regionalContext = await resolveRegionalFontScriptContextFromInjector(injector);
         const availableFonts = resolveRegionalFontOptions(regionalContext);
-        const effectiveFontFamily = resolveEffectiveFontId(fontFamily, availableFonts);
+        const effectiveFontFamily = resolveEffectiveFontId(fontFamily, availableFonts, language);
         await injector.get(AXPRegionalFontStyleLoaderService).ensureFontStylesLoaded(effectiveFontFamily);
         patchState(store, { font: { family: effectiveFontFamily, size: fontSize } });
         //
@@ -568,7 +653,7 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         _setNavigationLoading(true);
         try {
             // Fetch the CSS file via HttpClient
-            const cssText = await firstValueFrom(http.get(path, { responseType: 'text' }));
+            const cssText = await firstValueFrom(http.get(path, { responseType: 'text' }).pipe(timeout({ first: 5_000 })));
             // Create a new <style> tag and apply the CSS
             const style = document.createElement('style');
             style.setAttribute('data-theme', name);
@@ -684,7 +769,13 @@ withHooks((store, settingsService = inject(AXPSettingsService), deviceService =
             .pipe(filter((c) => [AXPPlatformScope.Platform, AXPPlatformScope.Tenant, AXPPlatformScope.User].includes(c.scope)))
             .subscribe(async (changes) => {
             const keys = Object.values(AXPThemeLayoutSetting);
-            if (!changes.keys.some((key) => keys.includes(key))) {
+            const layoutKeysChanged = changes.keys.some((key) => keys.includes(key));
+            const languageChanged = changes.keys.includes(AXPRegionalSetting.Language);
+            if (!layoutKeysChanged && !languageChanged) {
+                return;
+            }
+            if (languageChanged) {
+                await store['loadSettings']();
                 return;
             }
             if (changes.keys.includes(AXPThemeLayoutSetting.MenuVerticalMode)) {
@@ -692,8 +783,28 @@ withHooks((store, settingsService = inject(AXPSettingsService), deviceService =
                     menuVerticalMode: normalizeMenuVerticalMode(changes.values[AXPThemeLayoutSetting.MenuVerticalMode], store.menuVerticalMode()),
                 });
             }
+            if (changes.keys.includes(AXPThemeLayoutSetting.MenuDark)) {
+                const rawMenuAppearance = changes.values[AXPThemeLayoutSetting.MenuDark];
+                patchState(store, {
+                    menuAppearance: normalizeMenuAppearance(rawMenuAppearance, store.menuAppearance()),
+                });
+            }
+            if (changes.keys.includes(AXPThemeLayoutSetting.HeaderAppearance)) {
+                const rawHeaderAppearance = changes.values[AXPThemeLayoutSetting.HeaderAppearance];
+                patchState(store, {
+                    headerAppearance: normalizeHeaderAppearance(rawHeaderAppearance, store.headerAppearance()),
+                });
+            }
+            if (changes.keys.includes(AXPThemeLayoutSetting.MenuFooterFullWidth)) {
+                patchState(store, {
+                    mainFooterFullWidth: changes.values[AXPThemeLayoutSetting.MenuFooterFullWidth] ?? false,
+                });
+            }
             const shouldReloadSettings = changes.keys.some((key) => keys.includes(key) &&
-                key !== AXPThemeLayoutSetting.MenuVerticalMode);
+                key !== AXPThemeLayoutSetting.MenuVerticalMode &&
+                key !== AXPThemeLayoutSetting.MenuDark &&
+                key !== AXPThemeLayoutSetting.HeaderAppearance &&
+                key !== AXPThemeLayoutSetting.MenuFooterFullWidth);
             if (shouldReloadSettings) {
                 await store['loadSettings']();
             }
@@ -730,7 +841,7 @@ class AXPThemeSlotComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
-    <ax-button [iconOnly]="true" color="primary">
+    <ax-button [iconOnly]="true" [color]="store.headerButtonColor()" [look]="store.headerButtonLook()">
       <ax-icon>
         <i
           class="fa-regular"
@@ -773,13 +884,13 @@ class AXPThemeSlotComponent {
         </ax-button-item-list>
       </ax-dropdown-panel>
     </ax-button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i2$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
-    <ax-button [iconOnly]="true" color="primary">
+    <ax-button [iconOnly]="true" [color]="store.headerButtonColor()" [look]="store.headerButtonLook()">
       <ax-icon>
         <i
           class="fa-regular"
@@ -1078,7 +1189,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$1.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$1.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i2$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i2$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
@@ -1869,7 +1980,7 @@ class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
             type: Component,
@@ -1967,11 +2078,11 @@ class AXPFontStyleChooserPopupComponent extends AXBasePageComponent {
         this.close({ fontId: font.id });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFontStyleChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { fonts: "fonts", selectedFontId: "selectedFontId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axp-font-style-chooser-popup flex h-full flex-col bg-lightest\">\n  <!-- ----- Scrollable font list filtered by regional language settings ----- -->\n  <div class=\"flex-1 overflow-y-auto p-2\">\n    <div class=\"flex flex-col gap-1\">\n      @for (font of fonts; track font.id) {\n        <button\n          type=\"button\"\n          class=\"axp-font-style-chooser-popup__item\"\n          [class.--selected]=\"font.id === selectedFontId\"\n          [axpFontStyleLazyLoad]=\"font.id\"\n          (click)=\"selectFont(font)\"\n        >\n          <div class=\"axp-font-style-option\">\n            <span\n              class=\"axp-font-style-option__sample\"\n              [style.font-family]=\"font.cssFamily\"\n              [style.font-variation-settings]=\"fontVariation(font.id)\"\n            >\n              {{ font.title }}\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXPFontStyleLazyLoadDirective, selector: "[axpFontStyleLazyLoad]", inputs: ["axpFontStyleLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFontStyleChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { fonts: "fonts", selectedFontId: "selectedFontId" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axp-font-style-chooser-popup flex h-full flex-col bg-lightest\">\n  <!-- ----- Scrollable font list filtered by regional language settings ----- -->\n  <div class=\"flex-1 overflow-y-auto p-2\">\n    <div class=\"flex flex-col gap-1\">\n      @for (font of fonts; track font.id) {\n        <button\n          type=\"button\"\n          class=\"axp-font-style-chooser-popup__item\"\n          [class.--selected]=\"font.id === selectedFontId\"\n          [axpFontStyleLazyLoad]=\"font.id\"\n          (click)=\"selectFont(font)\"\n        >\n          <div class=\"axp-font-style-option\">\n            <span\n              class=\"axp-font-style-option__sample\"\n              [style.font-family]=\"font.cssFamily\"\n              [style.font-variation-settings]=\"fontVariation(font.id)\"\n            >\n              {{ font.title }}\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{pointer-events:none;padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: AXPFontStyleLazyLoadDirective, selector: "[axpFontStyleLazyLoad]", inputs: ["axpFontStyleLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleChooserPopupComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPFontStyleLazyLoadDirective], template: "<div class=\"axp-font-style-chooser-popup flex h-full flex-col bg-lightest\">\n  <!-- ----- Scrollable font list filtered by regional language settings ----- -->\n  <div class=\"flex-1 overflow-y-auto p-2\">\n    <div class=\"flex flex-col gap-1\">\n      @for (font of fonts; track font.id) {\n        <button\n          type=\"button\"\n          class=\"axp-font-style-chooser-popup__item\"\n          [class.--selected]=\"font.id === selectedFontId\"\n          [axpFontStyleLazyLoad]=\"font.id\"\n          (click)=\"selectFont(font)\"\n        >\n          <div class=\"axp-font-style-option\">\n            <span\n              class=\"axp-font-style-option__sample\"\n              [style.font-family]=\"font.cssFamily\"\n              [style.font-variation-settings]=\"fontVariation(font.id)\"\n            >\n              {{ font.title }}\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPFontStyleLazyLoadDirective], template: "<div class=\"axp-font-style-chooser-popup flex h-full flex-col bg-lightest\">\n  <!-- ----- Scrollable font list filtered by regional language settings ----- -->\n  <div class=\"flex-1 overflow-y-auto p-2\">\n    <div class=\"flex flex-col gap-1\">\n      @for (font of fonts; track font.id) {\n        <button\n          type=\"button\"\n          class=\"axp-font-style-chooser-popup__item\"\n          [class.--selected]=\"font.id === selectedFontId\"\n          [axpFontStyleLazyLoad]=\"font.id\"\n          (click)=\"selectFont(font)\"\n        >\n          <div class=\"axp-font-style-option\">\n            <span\n              class=\"axp-font-style-option__sample\"\n              [style.font-family]=\"font.cssFamily\"\n              [style.font-variation-settings]=\"fontVariation(font.id)\"\n            >\n              {{ font.title }}\n            </span>\n          </div>\n        </button>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{pointer-events:none;padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { fonts: [{
                 type: Input
             }], selectedFontId: [{
@@ -1995,9 +2106,11 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
         //#region ----- State Signals -----
         this.fonts = signal(AXP_FONT_STYLE_OPTIONS.filter((font) => font.script === 'universal'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
+        this.languageCode = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languageCode" }] : /* istanbul ignore next */ []));
         this.selectedFontId = computed(() => {
             const available = this.fonts();
-            return resolveEffectiveFontId(this.getValue(), available);
+            return resolveEffectiveFontId(this.getValue(), available, this.languageCode());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedFontId" }] : /* istanbul ignore next */ []));
         this.selectedFont = computed(() => {
@@ -2023,7 +2136,8 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
             void this.refreshFonts();
         });
         this.settingsService.onChanged
-            .pipe(filter((change) => change.keys.includes(AXPRegionalSetting.AvailableLanguages)), takeUntilDestroyed(this.destroyRef))
+            .pipe(filter((change) => change.keys.includes(AXPRegionalSetting.AvailableLanguages) ||
+            change.keys.includes(AXPRegionalSetting.Language)), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             void this.refreshFonts();
         });
@@ -2045,7 +2159,7 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
         });
         const fontId = result?.data?.fontId;
         if (fontId) {
-            this.setValue(resolveEffectiveFontId(fontId, this.fonts()));
+            this.setValue(resolveEffectiveFontId(fontId, this.fonts(), this.languageCode()));
         }
     }
     //#endregion
@@ -2053,21 +2167,23 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
     async refreshFonts() {
         const context = await resolveRegionalFontScriptContext(this.settingsService, this.localePort);
         const available = resolveRegionalFontOptions(context);
+        const language = (await this.settingsService.get(AXPRegionalSetting.Language));
+        this.languageCode.set(language);
         this.fonts.set(available);
-        const effectiveId = resolveEffectiveFontId(this.getValue(), available);
+        const effectiveId = resolveEffectiveFontId(this.getValue(), available, language);
         this.regionalFontLoader.ensureFontStylesLoaded(effectiveId);
         if (effectiveId !== this.getValue()) {
             this.setValue(effectiveId);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", host: { classAttribute: "axp-font-style-chooser block w-full" }, usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  class=\"axp-font-style-chooser__input\"\n  look=\"fill\"\n  [ngModel]=\"selectedFontLabel()\"\n  [readonly]=\"true\"\n  [disabled]=\"isInteractionDisabled()\"\n  [style.font-family]=\"selectedFontFamily()\"\n  [style.font-variation-settings]=\"selectedFontVariation()\"\n  (click)=\"openPopup()\"\n>\n  <ax-suffix>\n    <ax-button\n      look=\"none\"\n      class=\"axp-font-style-chooser__suffix-btn\"\n      [disabled]=\"isInteractionDisabled()\"\n      (onClick)=\"openPopup()\"\n    >\n      <ax-icon icon=\"fa-light fa-up-right-from-square\"></ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-text-box>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", host: { classAttribute: "axp-font-style-chooser block w-full" }, usesInheritance: true, ngImport: i0, template: "<ax-text-box\n  class=\"axp-font-style-chooser__input\"\n  look=\"fill\"\n  [ngModel]=\"selectedFontLabel()\"\n  [readonly]=\"true\"\n  [disabled]=\"isInteractionDisabled()\"\n  [style.font-family]=\"selectedFontFamily()\"\n  [style.font-variation-settings]=\"selectedFontVariation()\"\n  (click)=\"openPopup()\"\n>\n  <ax-suffix>\n    <ax-button\n      look=\"none\"\n      class=\"axp-font-style-chooser__suffix-btn\"\n      [disabled]=\"isInteractionDisabled()\"\n    >\n      <ax-icon icon=\"fa-light fa-up-right-from-square\"></ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-text-box>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{pointer-events:none;padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i3$1.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ host: {
                         class: 'axp-font-style-chooser block w-full',
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXTextBoxModule, FormsModule], template: "<ax-text-box\n  class=\"axp-font-style-chooser__input\"\n  look=\"fill\"\n  [ngModel]=\"selectedFontLabel()\"\n  [readonly]=\"true\"\n  [disabled]=\"isInteractionDisabled()\"\n  [style.font-family]=\"selectedFontFamily()\"\n  [style.font-variation-settings]=\"selectedFontVariation()\"\n  (click)=\"openPopup()\"\n>\n  <ax-suffix>\n    <ax-button\n      look=\"none\"\n      class=\"axp-font-style-chooser__suffix-btn\"\n      [disabled]=\"isInteractionDisabled()\"\n      (onClick)=\"openPopup()\"\n    >\n      <ax-icon icon=\"fa-light fa-up-right-from-square\"></ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-text-box>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXButtonModule, AXDecoratorModule, AXTextBoxModule, FormsModule], template: "<ax-text-box\n  class=\"axp-font-style-chooser__input\"\n  look=\"fill\"\n  [ngModel]=\"selectedFontLabel()\"\n  [readonly]=\"true\"\n  [disabled]=\"isInteractionDisabled()\"\n  [style.font-family]=\"selectedFontFamily()\"\n  [style.font-variation-settings]=\"selectedFontVariation()\"\n  (click)=\"openPopup()\"\n>\n  <ax-suffix>\n    <ax-button\n      look=\"none\"\n      class=\"axp-font-style-chooser__suffix-btn\"\n      [disabled]=\"isInteractionDisabled()\"\n    >\n      <ax-icon icon=\"fa-light fa-up-right-from-square\"></ax-icon>\n    </ax-button>\n  </ax-suffix>\n</ax-text-box>\n", styles: ["@layer properties;:host{display:block;width:100%}.axp-font-style-chooser__input{width:100%;cursor:pointer}.axp-font-style-chooser__suffix-btn{pointer-events:none;padding-inline:var(--spacing, .25rem);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-font-style-option{display:flex;width:100%;align-items:center;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5)}.axp-font-style-option__sample{width:100%;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-700, oklch(37.1% 0 none))}.axp-font-style-option__sample:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-neutral-200, oklch(92.2% 0 none))}.axp-font-style-chooser-popup__item{width:100%;cursor:pointer;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;text-align:start;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}.axp-font-style-chooser-popup__item:hover{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter);border-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-font-style-chooser-popup__item.--selected .axp-font-style-option__sample{color:inherit}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var fontStyleChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -2171,7 +2287,7 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
         }
       </div>
     }
-  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div.--visual{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3)}:host>div.--visual img{display:block;height:auto;width:100%}:host>div.--visual>span{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div.--visual{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3)}:host>div.--visual img{display:block;height:auto;width:100%}:host>div.--visual>span{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
             type: Component,
@@ -2450,7 +2566,7 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
             <ax-validation-rule message="field can't be empty" rule="required"></ax-validation-rule>
           </ax-select-box>
         </ax-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$2.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "directive", type: i2$2.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i1$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$3.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "directive", type: i2$3.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
             type: Component,
@@ -2560,7 +2676,7 @@ class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
         <span>{{ '@layout:terms.theme-modes.' + mode.id | translate | async }}</span>
       </div>
     }
-  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:var(--spacing, .25rem);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:var(--spacing, .25rem);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
             type: Component,
@@ -2678,11 +2794,175 @@ const AXPThemePaletteChooserWidget = {
     }
 };
 
+class AXPMenuAppearanceChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.modes = signal([
+            {
+                id: 'dark',
+                icon: 'fa-light fa-moon',
+                labelKey: '@layout:settings.appearance.items.root-menu.dark.options.dark',
+            },
+            {
+                id: 'light',
+                icon: 'fa-light fa-sun',
+                labelKey: '@layout:settings.appearance.items.root-menu.dark.options.light',
+            },
+            {
+                id: 'brand-light',
+                icon: 'fa-light fa-palette',
+                labelKey: '@layout:settings.appearance.items.root-menu.dark.options.brand-light',
+            },
+            {
+                id: 'brand-dark',
+                icon: 'fa-light fa-moon-stars',
+                labelKey: '@layout:settings.appearance.items.root-menu.dark.options.brand-dark',
+            },
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+        this.selectedMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
+        this.#eff = effect(() => {
+            const value = this.getValue();
+            const normalized = normalizeMenuAppearance(value, 'dark');
+            this.selectedMode.set(this.modes().find((m) => m.id === normalized) ?? this.modes()[0]);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onModeClick(mode) {
+        this.setValue(mode.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuAppearanceChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuAppearanceChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    @for (mode of modes(); track mode.id) {
+      <div (click)="onModeClick(mode)" [class.--selected]="mode.id === selectedMode()?.id">
+        <div>
+          <i [class]="mode.icon"></i>
+        </div>
+        <span>{{ mode.labelKey | translate | async }}</span>
+      </div>
+    }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuAppearanceChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    @for (mode of modes(); track mode.id) {
+      <div (click)="onModeClick(mode)" [class.--selected]="mode.id === selectedMode()?.id">
+        <div>
+          <i [class]="mode.icon"></i>
+        </div>
+        <span>{{ mode.labelKey | translate | async }}</span>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXSelectionCdkModule, AXTranslationModule], styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host>div:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}:host>div:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}:host>div.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host>div>div{display:flex;align-items:center;justify-content:center}:host>div>div i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+var menuAppearanceChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPMenuAppearanceChooserWidgetComponent: AXPMenuAppearanceChooserWidgetComponent
+});
+
+const AXPMenuAppearanceChooserWidget = {
+    name: 'menu-appearance-chooser',
+    title: 'Menu Appearance Chooser',
+    icon: 'fa-light fa-paintbrush',
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return menuAppearanceChooserWidget_component; }).then((c) => c.AXPMenuAppearanceChooserWidgetComponent),
+        },
+    },
+};
+
+class AXPHeaderAppearanceChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        this.modes = signal([
+            {
+                id: 'brand',
+                icon: 'fa-light fa-palette',
+                labelKey: '@layout:settings.appearance.items.header.appearance.options.brand',
+            },
+            {
+                id: 'simple',
+                icon: 'fa-light fa-window-maximize',
+                labelKey: '@layout:settings.appearance.items.header.appearance.options.simple',
+            },
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+        this.selectedMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
+        this.#eff = effect(() => {
+            const value = this.getValue();
+            const normalized = normalizeHeaderAppearance(value, 'brand');
+            this.selectedMode.set(this.modes().find((m) => m.id === normalized) ?? this.modes()[0]);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+    }
+    #eff;
+    onModeClick(mode) {
+        this.setValue(mode.id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPHeaderAppearanceChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPHeaderAppearanceChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    @for (mode of modes(); track mode.id) {
+      <div
+        (click)="onModeClick(mode)"
+        [class.--selected]="mode.id === selectedMode()?.id"
+        class="axp-header-appearance-chooser__option"
+      >
+        <i [class]="mode.icon"></i>
+        <span>{{ mode.labelKey | translate | async }}</span>
+      </div>
+    }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host .axp-header-appearance-chooser__option{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:var(--spacing, .25rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host .axp-header-appearance-chooser__option i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host .axp-header-appearance-chooser__option span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host .axp-header-appearance-chooser__option.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host .axp-header-appearance-chooser__option:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXSelectionCdkModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPHeaderAppearanceChooserWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ template: `
+    @for (mode of modes(); track mode.id) {
+      <div
+        (click)="onModeClick(mode)"
+        [class.--selected]="mode.id === selectedMode()?.id"
+        class="axp-header-appearance-chooser__option"
+      >
+        <i [class]="mode.icon"></i>
+        <span>{{ mode.labelKey | translate | async }}</span>
+      </div>
+    }
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXSelectionCdkModule, AXTranslationModule], styles: ["@layer properties;:host{display:flex;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host .axp-header-appearance-chooser__option{display:flex;cursor:pointer;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-lg, .5rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:var(--spacing, .25rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s}:host .axp-header-appearance-chooser__option i{font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}:host .axp-header-appearance-chooser__option span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}:host .axp-header-appearance-chooser__option.--selected{background-color:var(--color-primary-lighter);color:var(--color-on-primary-lighter);border-color:var(--color-border-primary-lighter)}:host .axp-header-appearance-chooser__option:hover{background-color:var(--color-dark);color:var(--color-on-dark);border-color:var(--color-border-dark)}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-duration: initial;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+var headerAppearanceChooserWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPHeaderAppearanceChooserWidgetComponent: AXPHeaderAppearanceChooserWidgetComponent
+});
+
+const AXPHeaderAppearanceChooserWidget = {
+    name: 'header-appearance-chooser',
+    title: 'Header Appearance Chooser',
+    icon: 'fa-light fa-window-maximize',
+    type: 'editor',
+    categories: AXP_WIDGETS_LAYOUT_CATEGORY,
+    properties: [AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY],
+    components: {
+        edit: {
+            component: () => Promise.resolve().then(function () { return headerAppearanceChooserWidget_component; }).then((c) => c.AXPHeaderAppearanceChooserWidgetComponent),
+        },
+    },
+};
+
 //#endregion
 //#region ----   Theme Widgets Provider   ----
 const WIDGETS = [
     AXPThemePaletteChooserWidget,
     AXPThemeModeChooserWidget,
+    AXPMenuAppearanceChooserWidget,
+    AXPHeaderAppearanceChooserWidget,
     AXPMenuOrientationChooserWidget,
     AXPFontSizeChooserWidget,
     AXPFontStyleChooserWidget,
@@ -2714,7 +2994,15 @@ class AXPThemesSharedModule {
                     platformSettingsLoadState?.isOfflineMode()) {
                     return;
                 }
-                await service.loadSettings();
+                const LAYOUT_THEME_STARTUP_TIMEOUT_MS = 8_000;
+                await Promise.race([
+                    service.loadSettings().catch((error) => {
+                        console.warn('layout-theme settings apply failed', error);
+                    }),
+                    new Promise((resolve) => {
+                        setTimeout(resolve, LAYOUT_THEME_STARTUP_TIMEOUT_MS);
+                    }),
+                ]);
             },
         });
     }
@@ -2730,7 +3018,7 @@ class AXPThemesSharedModule {
                 provide: AXP_SETTING_DEFINITION_PROVIDER,
                 useFactory: async () => {
                     const injector = inject(Injector);
-                    const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-D2XPkc71.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-CpsAIsxj.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -2774,7 +3062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             provide: AXP_SETTING_DEFINITION_PROVIDER,
                             useFactory: async () => {
                                 const injector = inject(Injector);
-                                const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-D2XPkc71.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-CpsAIsxj.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,
@@ -2788,5 +3076,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPLayoutThemeService, AXPMenuOrientation, AXPMenuVerticalMode, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_SIDE_MENU_COMPACT_WIDTH, AXP_SIDE_MENU_FULL_DEFAULT_WIDTH, AXP_THEME_PALETTE_PROVIDER, configureRegionalFontStylesheets, getRegionalFontStylesheet };
+export { AXPLayoutThemeService, AXPMenuOrientation, AXPMenuVerticalMode, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_SIDE_MENU_COMPACT_WIDTH, AXP_SIDE_MENU_FULL_DEFAULT_WIDTH, AXP_THEME_PALETTE_PROVIDER, configureRegionalFontStylesheets, getRegionalFontStylesheet, normalizeHeaderAppearance, normalizeMenuAppearance };
 //# sourceMappingURL=acorex-platform-framework-client-themes-shared.mjs.map