@acorex-platform/framework-client 0.0.38 → 0.0.48

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

@@ -1,3 +1,5 @@
+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 * as i2 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
 import * as i3 from '@acorex/components/decorators';
@@ -9,9 +11,7 @@ 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 { 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 { coerceUnknownToBoolean, AXPRegionalSetting, AXPPlatformScope } from '@acorex-platform/framework-shared/core';
 import { HttpClient } from '@angular/common/http';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { timer, firstValueFrom, timeout, filter } from 'rxjs';
@@ -47,7 +47,11 @@ var AXPThemeLayoutSetting;
     AXPThemeLayoutSetting["SideMenuCompactWidth"] = "Common:Setting:Layout.SideMenu.CompactWidth";
     AXPThemeLayoutSetting["MenuOrientation"] = "Common:Setting:Layout.RootMenu.Direction";
     AXPThemeLayoutSetting["MenuVerticalMode"] = "Common:Setting:Layout.RootMenu.VerticalMode";
+    AXPThemeLayoutSetting["MenuToggleCyclesStyle"] = "Common:Setting:Layout.RootMenu.ToggleCyclesStyle";
     AXPThemeLayoutSetting["MenuBadgeVisible"] = "Common:Setting:Layout.RootMenu.Badge";
+    AXPThemeLayoutSetting["MenuLookWithLine"] = "Common:Setting:Layout.RootMenu.LookWithLine";
+    AXPThemeLayoutSetting["MenuChildBackgroundDarker"] = "Common:Setting:Layout.RootMenu.ChildBackgroundDarker";
+    AXPThemeLayoutSetting["MenuDensity"] = "Common:Setting:Layout.RootMenu.Density";
     AXPThemeLayoutSetting["MenuDark"] = "Common:Setting:Layout.RootMenu.Dark";
     AXPThemeLayoutSetting["MenuFooterFullWidth"] = "Common:Setting:Layout.RootMenu.Footer.FullWidth";
     AXPThemeLayoutSetting["HeaderAppearance"] = "Common:Setting:Layout.Header.Appearance";
@@ -66,6 +70,24 @@ var AXPSideMenuState;
     AXPSideMenuState["Opened"] = "opened";
     AXPSideMenuState["Closed"] = "closed";
 })(AXPSideMenuState || (AXPSideMenuState = {}));
+function normalizeSideMenuState(value, fallback) {
+    if (value === AXPSideMenuState.Opened || value === AXPSideMenuState.Closed) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === 'opened' || normalized === 'open') {
+            return AXPSideMenuState.Opened;
+        }
+        if (normalized === 'closed' || normalized === 'close') {
+            return AXPSideMenuState.Closed;
+        }
+    }
+    if (typeof value === 'object' && value !== null && 'id' in value) {
+        return normalizeSideMenuState(value.id, fallback);
+    }
+    return fallback;
+}
 // Menu Orientation Enum
 var AXPMenuOrientation;
 (function (AXPMenuOrientation) {
@@ -103,6 +125,51 @@ function normalizeHeaderAppearance(value, fallback = 'brand') {
     return fallback;
 }
 
+//#region ----- Theme boot cache (first paint) -----
+/** localStorage key for last applied layout mode (`light` | `dark` | `system`). */
+const AXP_THEME_BOOT_MODE_KEY = 'axp-boot-theme-mode';
+/** localStorage key for last applied palette name. */
+const AXP_THEME_BOOT_PALETTE_KEY = 'axp-boot-theme-palette';
+function coerceThemeMode(value, fallback) {
+    if (value === AXPThemeMode.Light || value === AXPThemeMode.Dark || value === AXPThemeMode.System) {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null && 'id' in value) {
+        return coerceThemeMode(value.id, fallback);
+    }
+    return fallback;
+}
+function readBootThemeMode() {
+    try {
+        return coerceThemeMode(localStorage.getItem(AXP_THEME_BOOT_MODE_KEY), AXPThemeMode.Light);
+    }
+    catch {
+        return AXPThemeMode.Light;
+    }
+}
+function readBootThemePalette() {
+    try {
+        const name = localStorage.getItem(AXP_THEME_BOOT_PALETTE_KEY)?.trim();
+        return name && name.length > 0 ? name : 'default';
+    }
+    catch {
+        return 'default';
+    }
+}
+function persistThemeBootCache(mode, palette) {
+    try {
+        localStorage.setItem(AXP_THEME_BOOT_MODE_KEY, mode);
+        const name = palette.trim();
+        if (name.length > 0) {
+            localStorage.setItem(AXP_THEME_BOOT_PALETTE_KEY, name);
+        }
+    }
+    catch {
+        /* private mode / quota */
+    }
+}
+//#endregion
+
 //#endregion
 //#region ----- Constants -----
 const FONT_FALLBACK = 'Tahoma, system-ui, sans-serif';
@@ -414,8 +481,8 @@ withState(() => {
         return AXPScreenSize.Large;
     };
     const state = {
-        currentMode: AXPThemeMode.System,
-        currentPalette: 'default',
+        currentMode: readBootThemeMode(),
+        currentPalette: readBootThemePalette(),
         systemThemeMode: (isSystemDark ? AXPThemeMode.Dark : AXPThemeMode.Light),
         font: {
             family: 'system-ui',
@@ -433,8 +500,9 @@ withState(() => {
         sideMenuWidth: AXP_SIDE_MENU_FULL_DEFAULT_WIDTH,
         sideMenuCompactWidth: AXP_SIDE_MENU_COMPACT_WIDTH,
         menuVerticalMode: AXPMenuVerticalMode.Full,
+        menuToggleCyclesStyle: false,
         menuOrientation: 'vertical',
-        menuAppearance: 'dark',
+        menuAppearance: 'light',
         headerAppearance: 'brand',
         mainFooterFullWidth: false,
         _listener: null,
@@ -443,7 +511,7 @@ withState(() => {
     return state;
 }), 
 // Computed Signals
-withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, overlayLoadingTaskCount, menuOrientation, menuVerticalMode, menuAppearance, headerAppearance, mainFooterFullWidth, sideMenuWidth, sideMenuCompactWidth, isPrinting, }, deviceService = inject(AXPDeviceService)) => {
+withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMenuState, overlaySideMenuOpen, overlayLoading, navigationLoading, overlayLoadingTaskCount, menuOrientation, menuVerticalMode, menuAppearance, headerAppearance, mainFooterFullWidth, sideMenuWidth, sideMenuCompactWidth, isPrinting, menuToggleCyclesStyle, }, deviceService = inject(AXPDeviceService)) => {
     const effectiveMenuVerticalMode = computed(() => {
         if (!deviceService.isLarge()) {
             return AXPMenuVerticalMode.Full;
@@ -469,6 +537,7 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
         overlayTaskCount: computed(() => overlayLoadingTaskCount()),
         isNavigationLoading: computed(() => navigationLoading()),
         isMenuHorizontal: computed(() => menuOrientation() === AXPMenuOrientation.Horizontal),
+        menuToggleCyclesStyleEnabled: computed(() => coerceUnknownToBoolean(menuToggleCyclesStyle())),
         effectiveMenuVerticalMode,
         sideMenuDrawerWidth: computed(() => effectiveMenuVerticalMode() === AXPMenuVerticalMode.Compact ? sideMenuCompactWidth() : sideMenuWidth()),
         menuDarkEnabled: computed(() => {
@@ -490,13 +559,15 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
 withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService), injector = inject(Injector)) => {
     const _applySettings = async () => {
         // Initialize theme and side menu setting from storage
-        const settingThemeMode = (await settingsService.get(AXPThemeLayoutSetting.Mode)) ?? AXPThemeMode.Light;
+        const settingThemeMode = coerceThemeMode(await settingsService.get(AXPThemeLayoutSetting.Mode), AXPThemeMode.Light);
         patchState(store, { currentMode: settingThemeMode });
-        //
-        const settingThemePallete = (await settingsService.get(AXPThemeLayoutSetting.Palette)) ?? 'default';
+        const settingThemePaletteRaw = await settingsService.get(AXPThemeLayoutSetting.Palette);
+        const settingThemePallete = typeof settingThemePaletteRaw === 'string' && settingThemePaletteRaw.trim().length > 0
+            ? settingThemePaletteRaw.trim()
+            : 'default';
         patchState(store, { currentPalette: settingThemePallete });
         //
-        const settingSideMenu = (await settingsService.get(AXPThemeLayoutSetting.SideMenuStatus)) ?? store.sideMenuState();
+        const settingSideMenu = normalizeSideMenuState(await settingsService.get(AXPThemeLayoutSetting.SideMenuStatus), store.sideMenuState());
         patchState(store, { sideMenuState: settingSideMenu });
         //
         const settingMenuOrientation = (await settingsService.get(AXPThemeLayoutSetting.MenuOrientation)) ??
@@ -506,6 +577,15 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         const settingMenuVerticalMode = normalizeMenuVerticalMode(await settingsService.get(AXPThemeLayoutSetting.MenuVerticalMode), store.menuVerticalMode());
         patchState(store, { menuVerticalMode: settingMenuVerticalMode });
         //
+        let menuToggleCyclesStyle = false;
+        try {
+            menuToggleCyclesStyle = coerceUnknownToBoolean(await settingsService.get(AXPThemeLayoutSetting.MenuToggleCyclesStyle));
+        }
+        catch {
+            menuToggleCyclesStyle = false;
+        }
+        patchState(store, { menuToggleCyclesStyle });
+        //
         let rawMenuAppearance;
         try {
             rawMenuAppearance = await settingsService.get(AXPThemeLayoutSetting.MenuDark);
@@ -557,7 +637,10 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
     const _updateHtmlClass = async () => {
         const html = document.getElementsByTagName('html')[0];
         //
-        store.isDarkMode() ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
+        const isDark = store.isDarkMode();
+        html.classList.toggle('ax-dark', isDark);
+        html.style.colorScheme = isDark ? 'dark' : 'light';
+        persistThemeBootCache(store.currentMode(), store.currentPalette());
         //
         html.style.fontFamily = resolveFontCssFamily(store.font().family);
         const fontVariation = resolveFontVariationSettings(store.font().family);
@@ -682,6 +765,11 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         patchState(store, { sideMenuState });
         settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuStatus, sideMenuState);
     };
+    const setMenuVerticalMode = (mode) => {
+        const next = normalizeMenuVerticalMode(mode, store.menuVerticalMode());
+        patchState(store, { menuVerticalMode: next });
+        settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.MenuVerticalMode, next);
+    };
     return {
         // Change theme and update HTML class
         changeThemeMode(theme) {
@@ -718,8 +806,26 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
                 settingsService.scope(AXPPlatformScope.User).set(AXPThemeLayoutSetting.SideMenuWidth, width);
             }
         },
-        // Toggle side menu state
+        // Persist vertical rail mode (full labels vs compact icons)
+        setMenuVerticalMode,
+        // Large screens with the setting on: cycle full ↔ compact without hiding.
+        // Otherwise: hide/show the drawer (overlay on smaller screens).
         toggleSideMenu() {
+            if (!deviceService.isLarge()) {
+                setSideMenuOpen(!store.isSideMenuOpen());
+                return;
+            }
+            if (store.menuToggleCyclesStyleEnabled()) {
+                if (!store.isSideMenuOpen()) {
+                    setSideMenuOpen(true);
+                    return;
+                }
+                const current = normalizeMenuVerticalMode(store.menuVerticalMode(), AXPMenuVerticalMode.Full);
+                setMenuVerticalMode(current === AXPMenuVerticalMode.Compact
+                    ? AXPMenuVerticalMode.Full
+                    : AXPMenuVerticalMode.Compact);
+                return;
+            }
             setSideMenuOpen(!store.isSideMenuOpen());
         },
         // Set navigation loading state with a task counter
@@ -759,6 +865,7 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
 // Lifecycle Hooks
 withHooks((store, settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => ({
     onInit() {
+        void store['_internal_updateHtmlClass']();
         effect(() => {
             if (!deviceService.isLarge()) {
                 patchState(store, { overlaySideMenuOpen: false });
@@ -782,6 +889,11 @@ withHooks((store, settingsService = inject(AXPSettingsService), deviceService =
                     menuVerticalMode: normalizeMenuVerticalMode(changes.values[AXPThemeLayoutSetting.MenuVerticalMode], store.menuVerticalMode()),
                 });
             }
+            if (changes.keys.includes(AXPThemeLayoutSetting.MenuToggleCyclesStyle)) {
+                patchState(store, {
+                    menuToggleCyclesStyle: coerceUnknownToBoolean(changes.values[AXPThemeLayoutSetting.MenuToggleCyclesStyle]),
+                });
+            }
             if (changes.keys.includes(AXPThemeLayoutSetting.MenuDark)) {
                 const rawMenuAppearance = changes.values[AXPThemeLayoutSetting.MenuDark];
                 patchState(store, {
@@ -799,11 +911,32 @@ withHooks((store, settingsService = inject(AXPSettingsService), deviceService =
                     mainFooterFullWidth: changes.values[AXPThemeLayoutSetting.MenuFooterFullWidth] ?? false,
                 });
             }
+            if (changes.keys.includes(AXPThemeLayoutSetting.SideMenuStatus)) {
+                patchState(store, {
+                    sideMenuState: normalizeSideMenuState(changes.values[AXPThemeLayoutSetting.SideMenuStatus], store.sideMenuState()),
+                });
+            }
+            if (changes.keys.includes(AXPThemeLayoutSetting.SideMenuWidth)) {
+                const width = changes.values[AXPThemeLayoutSetting.SideMenuWidth];
+                if (typeof width === 'number' && Number.isFinite(width)) {
+                    patchState(store, { sideMenuWidth: width });
+                }
+            }
+            if (changes.keys.includes(AXPThemeLayoutSetting.SideMenuCompactWidth)) {
+                const width = changes.values[AXPThemeLayoutSetting.SideMenuCompactWidth];
+                if (typeof width === 'number' && Number.isFinite(width)) {
+                    patchState(store, { sideMenuCompactWidth: width });
+                }
+            }
             const shouldReloadSettings = changes.keys.some((key) => keys.includes(key) &&
                 key !== AXPThemeLayoutSetting.MenuVerticalMode &&
+                key !== AXPThemeLayoutSetting.MenuToggleCyclesStyle &&
                 key !== AXPThemeLayoutSetting.MenuDark &&
                 key !== AXPThemeLayoutSetting.HeaderAppearance &&
-                key !== AXPThemeLayoutSetting.MenuFooterFullWidth);
+                key !== AXPThemeLayoutSetting.MenuFooterFullWidth &&
+                key !== AXPThemeLayoutSetting.SideMenuStatus &&
+                key !== AXPThemeLayoutSetting.SideMenuWidth &&
+                key !== AXPThemeLayoutSetting.SideMenuCompactWidth);
             if (shouldReloadSettings) {
                 await store['loadSettings']();
             }
@@ -836,10 +969,12 @@ withHooks((store, settingsService = inject(AXPSettingsService), deviceService =
 class AXPThemeSlotComponent {
     constructor() {
         this.store = inject(AXPLayoutThemeService);
+        this.deviceService = inject(AXPDeviceService);
         this.variants = AXPThemeMode;
     }
     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: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    @if (!deviceService.isSmall()) {
     <ax-button [iconOnly]="true" [color]="store.headerButtonColor()" [look]="store.headerButtonLook()">
       <ax-icon>
         <i
@@ -883,12 +1018,14 @@ 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", "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: `
+    @if (!deviceService.isSmall()) {
     <ax-button [iconOnly]="true" [color]="store.headerButtonColor()" [look]="store.headerButtonLook()">
       <ax-icon>
         <i
@@ -932,6 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         </ax-button-item-list>
       </ax-dropdown-panel>
     </ax-button>
+    }
   `,
                     imports: [
                         CommonModule,
@@ -2077,11 +2215,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{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 }); }
+    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%}:host .axp-font-style-chooser__input{width:100%;cursor:pointer;border-width:1px;border-style:solid;border-color:var(--color-border-default)}.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{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"] }]
+            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%}:host .axp-font-style-chooser__input{width:100%;cursor:pointer;border-width:1px;border-style:solid;border-color:var(--color-border-default)}.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: [{
@@ -2176,13 +2314,13 @@ class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
         }
     }
     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    >\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", "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%}:host .axp-font-style-chooser__input{width:100%;cursor:pointer;border-width:1px;border-style:solid;border-color:var(--color-border-default)}.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", "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    >\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"] }]
+                    }, 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%}:host .axp-font-style-chooser__input{width:100%;cursor:pointer;border-width:1px;border-style:solid;border-color:var(--color-border-default)}.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({
@@ -2241,6 +2379,20 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
                     },
                 ];
             }
+            if (chooser === 'density') {
+                return [
+                    {
+                        id: 'normal',
+                        icon: 'fa-light fa-distribute-spacing-vertical',
+                        labelKey: '@layout:settings.appearance.items.root-menu.density.options.normal',
+                    },
+                    {
+                        id: 'compact',
+                        icon: 'fa-light fa-compress',
+                        labelKey: '@layout:settings.appearance.items.root-menu.density.options.compact',
+                    },
+                ];
+            }
             return [
                 {
                     id: 'vertical',
@@ -3029,7 +3181,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-CpsAIsxj.mjs')).AXPThemeSettingProvider;
+                    const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-DIkjSTU7.mjs')).AXPThemeSettingProvider;
                     return new provider(injector);
                 },
                 multi: true,
@@ -3073,7 +3225,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-CpsAIsxj.mjs')).AXPThemeSettingProvider;
+                                const provider = (await import('./acorex-platform-framework-client-themes-shared-settings.provider-DIkjSTU7.mjs')).AXPThemeSettingProvider;
                                 return new provider(injector);
                             },
                             multi: true,
@@ -3087,5 +3239,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, normalizeHeaderAppearance, normalizeMenuAppearance };
+export { AXPLayoutThemeService, AXPMenuOrientation, AXPMenuVerticalMode, AXPSideMenuState, AXPThemeLayoutSetting, AXPThemeMode, AXPThemePaletteProviderDefault, AXPThemeSlotComponent, AXPThemesSharedModule, AXP_SIDE_MENU_COMPACT_WIDTH, AXP_SIDE_MENU_FULL_DEFAULT_WIDTH, AXP_THEME_BOOT_MODE_KEY, AXP_THEME_BOOT_PALETTE_KEY, AXP_THEME_PALETTE_PROVIDER, coerceThemeMode, configureRegionalFontStylesheets, getRegionalFontStylesheet, normalizeHeaderAppearance, normalizeMenuAppearance, normalizeSideMenuState, persistThemeBootCache, readBootThemeMode, readBootThemePalette };
 //# sourceMappingURL=acorex-platform-framework-client-themes-shared.mjs.map