@acorex-platform/framework-client 0.0.15 → 0.0.20

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

@@ -7,16 +7,16 @@ import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { computed, inject, effect, ChangeDetectionStrategy, Component, InjectionToken, Injectable, Input, signal, Injector, NgModule } from '@angular/core';
-import { AXPSettingsService, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/common';
-import { AXPPlatformScope } from '@acorex-platform/framework-shared/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 * as i1$3 from '@acorex-platform/framework-client/core';
-import { AXPScreenSize, AXPDeviceService, AXPDebugService, OVERLAY_LAYOUT_TRACE_NS, AXPComponentSlotModule, AXP_LOGO_THEME_RESOLVER } 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 { AXTranslationModule } 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';
@@ -27,6 +27,9 @@ import { AXSearchBoxModule } from '@acorex/components/search-box';
 import { AXSelectionCdkModule } from '@acorex/cdk/selection';
 import * as i4$1 from '@angular/forms';
 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 { AXFormModule } from '@acorex/components/form';
 import * as i1$2 from '@acorex/components/select-box';
@@ -76,6 +79,277 @@ var AXPMenuVerticalMode;
 const AXP_SIDE_MENU_FULL_DEFAULT_WIDTH = 300;
 const AXP_SIDE_MENU_COMPACT_WIDTH = 80;
 
+//#endregion
+//#region ----- Constants -----
+const FONT_FALLBACK = 'Tahoma, system-ui, sans-serif';
+//#endregion
+//#region ----- Options -----
+const AXP_FONT_STYLE_OPTIONS = [
+    {
+        id: 'system-ui',
+        title: 'System Default',
+        cssFamily: `system-ui, ${FONT_FALLBACK}`,
+        script: 'universal',
+    },
+    {
+        id: 'tahoma',
+        title: 'Tahoma',
+        cssFamily: `Tahoma, system-ui, sans-serif`,
+        script: 'universal',
+    },
+    {
+        id: 'inter',
+        title: 'Inter',
+        cssFamily: `inter, ${FONT_FALLBACK}`,
+        script: 'en',
+    },
+    {
+        id: 'open-sans',
+        title: 'Open Sans',
+        cssFamily: `"open-sans", ${FONT_FALLBACK}`,
+        script: 'en',
+    },
+    {
+        id: 'roboto',
+        title: 'Roboto',
+        cssFamily: `roboto, ${FONT_FALLBACK}`,
+        script: 'en',
+    },
+    {
+        id: 'rubik',
+        title: 'Rubik',
+        cssFamily: `rubik, ${FONT_FALLBACK}`,
+        script: 'en',
+    },
+    {
+        id: 'google-sans',
+        title: 'Google Sans',
+        cssFamily: `"google-sans", ${FONT_FALLBACK}`,
+        script: 'en',
+    },
+    {
+        id: 'vazirmatn',
+        title: 'Vazir وزیر',
+        cssFamily: `vazirmatn, ${FONT_FALLBACK}`,
+        script: 'fa',
+    },
+    {
+        id: 'dana',
+        title: 'Dana دانا',
+        cssFamily: `dana, ${FONT_FALLBACK}`,
+        script: 'fa',
+    },
+    {
+        id: 'iranyekanx',
+        title: 'Iran Yekan X ایران‌یکان',
+        cssFamily: `iranyekanx, ${FONT_FALLBACK}`,
+        script: 'fa',
+    },
+    {
+        id: 'peyda',
+        title: 'Peyda پیدا',
+        cssFamily: `peyda, ${FONT_FALLBACK}`,
+        script: 'fa',
+    },
+    {
+        id: 'cairo',
+        title: 'Cairo',
+        cssFamily: `cairo, ${FONT_FALLBACK}`,
+        script: 'ar',
+    },
+    {
+        id: 'kufam',
+        title: 'Kufam',
+        cssFamily: `kufam, ${FONT_FALLBACK}`,
+        script: 'ar',
+    },
+    {
+        id: 'noto-kufi-arabic',
+        title: 'Noto Kufi Arabic',
+        cssFamily: `"noto-kufi-arabic", ${FONT_FALLBACK}`,
+        script: 'ar',
+    },
+    {
+        id: 'playpen-sans-arabic',
+        title: 'Playpen Sans Arabic',
+        cssFamily: `"playpen-sans-arabic", ${FONT_FALLBACK}`,
+        script: 'ar',
+    },
+];
+//#endregion
+//#region ----- Helpers -----
+function resolveFontCssFamily(fontId) {
+    const match = AXP_FONT_STYLE_OPTIONS.find((font) => font.id === fontId);
+    return match?.cssFamily ?? fontId ?? `system-ui, ${FONT_FALLBACK}`;
+}
+function resolveFontVariationSettings(fontId) {
+    if (fontId === 'iranyekanx') {
+        return '"dots" 1';
+    }
+    return undefined;
+}
+//#endregion
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Regional context -----
+function resolveContextFromLocaleCodes(codes) {
+    if (codes.length === 0) {
+        return { showEnglishFonts: true, showPersianFonts: false, showArabicFonts: false };
+    }
+    let showEnglishFonts = false;
+    let showPersianFonts = false;
+    let showArabicFonts = false;
+    for (const code of codes) {
+        const language = primaryLanguageSubtag(code);
+        if (language === 'fa' || language === 'ar') {
+            showPersianFonts = true;
+            showArabicFonts = true;
+        }
+        else {
+            showEnglishFonts = true;
+        }
+    }
+    return { showEnglishFonts, showPersianFonts, showArabicFonts };
+}
+function resolveContextFromProfiles(profiles) {
+    const codes = profiles.map((profile) => profile.code).filter((code) => !!code);
+    return resolveContextFromLocaleCodes(codes);
+}
+async function resolveContextFromAvailableLanguages(settingsService, localePort) {
+    const allowed = await resolveEffectiveAvailableLanguageCodes(settingsService);
+    if (allowed.length === 0) {
+        return null;
+    }
+    if (localePort) {
+        try {
+            const profiles = await localePort.getAvailableLocaleProfiles();
+            const profileCodes = profiles.map((profile) => profile.code).filter(Boolean);
+            if (profileCodes.length > 0) {
+                const allowSet = new Set(allowed);
+                const intersected = profileCodes.filter((code) => allowSet.has(code));
+                if (intersected.length > 0) {
+                    return resolveContextFromLocaleCodes(intersected);
+                }
+            }
+        }
+        catch {
+            // use allowed codes only
+        }
+    }
+    return resolveContextFromLocaleCodes(allowed);
+}
+async function resolveRegionalFontScriptContext(settingsService, localePort) {
+    const fromLanguages = await resolveContextFromAvailableLanguages(settingsService, localePort);
+    if (fromLanguages) {
+        return fromLanguages;
+    }
+    if (localePort) {
+        try {
+            const profiles = await localePort.getAvailableLocaleProfiles();
+            if (profiles.length > 0) {
+                return resolveContextFromProfiles(profiles);
+            }
+        }
+        catch {
+            // fall through to default
+        }
+    }
+    return { showEnglishFonts: true, showPersianFonts: false, showArabicFonts: false };
+}
+async function resolveRegionalFontScriptContextFromInjector(injector) {
+    const settingsService = injector.get(AXPSettingsService);
+    const localePort = injector.get(AXP_LOCALE_MANAGEMENT_PORT, null, { optional: true });
+    return resolveRegionalFontScriptContext(settingsService, localePort);
+}
+//#endregion
+//#region ----- Filtering -----
+function filterFontsForRegionalContext(options, context) {
+    return options.filter((font) => {
+        switch (font.script) {
+            case 'universal':
+                return true;
+            case 'en':
+                return context.showEnglishFonts;
+            case 'fa':
+                return context.showPersianFonts;
+            case 'ar':
+                return context.showArabicFonts;
+            default:
+                return false;
+        }
+    });
+}
+function resolveRegionalFontOptions(context) {
+    return filterFontsForRegionalContext(AXP_FONT_STYLE_OPTIONS, context);
+}
+function resolveEffectiveFontId(fontId, availableFonts) {
+    const fallback = availableFonts[0]?.id ?? 'system-ui';
+    if (!fontId) {
+        return fallback;
+    }
+    return availableFonts.some((font) => font.id === fontId) ? fontId : fallback;
+}
+//#endregion
+
+//#endregion
+//#region ----- Config -----
+let regionalFontStylesheets = {};
+/** App-level font-face stylesheets keyed by font-style-chooser id (demo assets). */
+function configureRegionalFontStylesheets(map) {
+    regionalFontStylesheets = { ...map };
+}
+function getRegionalFontStylesheet(fontId) {
+    return regionalFontStylesheets[fontId];
+}
+//#endregion
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Service -----
+class AXPRegionalFontStyleLoaderService {
+    constructor() {
+        //#region ----- State -----
+        this.loadedStylesheets = new Set();
+    }
+    //#endregion
+    //#region ----- Public API -----
+    /** Loads @font-face stylesheets for the given font ids (skips ids with no configured href). */
+    ensureFontStylesLoaded(fontIds) {
+        const ids = typeof fontIds === 'string' ? [fontIds] : fontIds;
+        for (const fontId of ids) {
+            const href = getRegionalFontStylesheet(fontId);
+            if (href) {
+                this.ensureStylesheet(href);
+            }
+        }
+    }
+    //#endregion
+    //#region ----- Private helpers -----
+    ensureStylesheet(href) {
+        if (!href || this.loadedStylesheets.has(href)) {
+            return;
+        }
+        const selector = `link[data-axp-regional-font="${href}"]`;
+        if (document.head.querySelector(selector)) {
+            this.loadedStylesheets.add(href);
+            return;
+        }
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        link.setAttribute('data-axp-regional-font', href);
+        document.head.appendChild(link);
+        this.loadedStylesheets.add(href);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRegionalFontStyleLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRegionalFontStyleLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPRegionalFontStyleLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 function normalizeMenuVerticalMode(value, fallback) {
     if (value === AXPMenuVerticalMode.Compact || value === AXPMenuVerticalMode.Full) {
         return value;
@@ -135,7 +409,8 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
             return AXPMenuVerticalMode.Full;
         }
         return normalizeMenuVerticalMode(menuVerticalMode(), AXPMenuVerticalMode.Full);
-    }, ...(ngDevMode ? [{ debugName: "effectiveMenuVerticalMode" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMenuVerticalMode" }] : /* istanbul ignore next */ []));
     return {
         isDarkMode: computed(() => {
             if (isPrinting()) {
@@ -159,7 +434,7 @@ withComputed(({ currentMode: currentTheme, systemThemeMode: systemTheme, sideMen
     };
 }), 
 // Methods for State Management
-withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSettingsService), deviceService = inject(AXPDeviceService)) => {
+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;
@@ -180,7 +455,11 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         //
         const fontFamily = await settingsService.get(AXPThemeLayoutSetting.Font);
         const fontSize = await settingsService.get(AXPThemeLayoutSetting.FontSize);
-        patchState(store, { font: { family: fontFamily, size: fontSize } });
+        const regionalContext = await resolveRegionalFontScriptContextFromInjector(injector);
+        const availableFonts = resolveRegionalFontOptions(regionalContext);
+        const effectiveFontFamily = resolveEffectiveFontId(fontFamily, availableFonts);
+        await injector.get(AXPRegionalFontStyleLoaderService).ensureFontStylesLoaded(effectiveFontFamily);
+        patchState(store, { font: { family: effectiveFontFamily, size: fontSize } });
         //
         const sideMenuWidth = (await settingsService.get(AXPThemeLayoutSetting.SideMenuWidth)) ?? store.sideMenuWidth();
         patchState(store, { sideMenuWidth });
@@ -196,7 +475,9 @@ withMethods((store, http = inject(HttpClient), settingsService = inject(AXPSetti
         //
         store.isDarkMode() ? html.classList.add('ax-dark') : html.classList.remove('ax-dark');
         //
-        html.style.fontFamily = store.font().family;
+        html.style.fontFamily = resolveFontCssFamily(store.font().family);
+        const fontVariation = resolveFontVariationSettings(store.font().family);
+        html.style.fontVariationSettings = fontVariation ?? '';
         html.style.fontSize = store.font().size;
         //
         await _applyThemePalette(store.currentPalette());
@@ -447,8 +728,8 @@ class AXPThemeSlotComponent {
         this.store = inject(AXPLayoutThemeService);
         this.variants = AXPThemeMode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPThemeSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    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-icon>
         <i
@@ -494,7 +775,7 @@ class AXPThemeSlotComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeSlotComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -653,10 +934,10 @@ class AXPIconChooserService {
         this.iconsCache = uniqueIcons;
         return uniqueIcons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -721,8 +1002,8 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
     getIconClass(icon) {
         return `${this.selectedIconType} fa-${icon.name}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPIconChooserPopupComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value" }, usesInheritance: true, ngImport: i0, template: `
     <div class="flex flex-col h-full bg-lightest">
       <!-- Fixed Header Section -->
       <div class="sticky top-0 z-10 bg-lightest border-b p-4 gap-4 flex flex-col">
@@ -799,7 +1080,7 @@ class AXPIconChooserPopupComponent extends AXBasePageComponent {
     </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserPopupComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -904,7 +1185,8 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
                 }
             }
             return value;
-        }, ...(ngDevMode ? [{ debugName: "computedValue" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "computedValue" }] : /* istanbul ignore next */ []));
     }
     async openPopup() {
         const result = await this.popupService.open(AXPIconChooserPopupComponent, {
@@ -929,8 +1211,8 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
     editIcon() {
         this.openPopup();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPIconChooserWidgetEditComponent, isStandalone: true, selector: "ax-icon-chooser-edit", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPIconChooserWidgetEditComponent, isStandalone: true, selector: "ax-icon-chooser-edit", usesInheritance: true, ngImport: i0, template: `
     <div
       class="grid grid-cols-[6rem_auto] items-center rounded-md text-3xl w-fit"
       [class.border]="getValue()"
@@ -959,9 +1241,9 @@ class AXPIconChooserWidgetEditComponent extends AXPValueWidgetComponent {
         </div>
       }
     </div>
-   `, isInline: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px}@supports (color: color-mix(in lab,red,red)){.icon-container{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){.icon-container{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+   `, isInline: true, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px}@supports (color: color-mix(in lab,red,red)){.icon-container{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){.icon-container{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPIconChooserWidgetEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-icon-chooser-edit', template: `
     <div
@@ -992,7 +1274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       }
     </div>
-   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px}@supports (color: color-mix(in lab,red,red)){.icon-container{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){.icon-container{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".icon-container{background-color:rgba(var(--ax-sys-color-primary-300));background-image:linear-gradient(135deg,rgba(var(--ax-sys-color-primary-300)) 10%,transparent 0,transparent 50%,rgba(var(--ax-sys-color-primary-300)) 0,rgba(var(--ax-sys-color-primary-300)) 60%,transparent 0,transparent);background-size:7.5px 7.5px}@supports (color: color-mix(in lab,red,red)){.icon-container{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 10%,transparent)}}@supports (color: color-mix(in lab,red,red)){.icon-container{background-image:linear-gradient(135deg,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 10%,transparent 0,transparent 50%,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 0,color-mix(in oklab,rgba(var(--ax-sys-color-primary-300)) 50%,transparent) 60%,transparent 0,transparent)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var iconChooserEdit_component = /*#__PURE__*/Object.freeze({
@@ -1012,10 +1294,10 @@ const AXPIconChooserWidget = {
             component: () => Promise.resolve().then(function () { return iconChooserEdit_component; }).then((c) => c.AXPIconChooserWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-framework-client-themes-shared-icon-chooser-column.component-Ci_oH7NE.mjs').then((c) => c.AXPIconChooserWidgetColumnComponent),
+            component: () => import('./acorex-platform-framework-client-themes-shared-icon-chooser-column.component-CbZALjB5.mjs').then((c) => c.AXPIconChooserWidgetColumnComponent),
         },
         view: {
-            component: () => import('./acorex-platform-framework-client-themes-shared-icon-chooser-view.component-Lb1G2Xz7.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-framework-client-themes-shared-icon-chooser-view.component-BRrNT6x2.mjs').then((c) => c.AXPIconChooserWidgetViewComponent),
         },
     },
 };
@@ -1563,20 +1845,23 @@ function provideCustomIconStyleProvider(providerClass) {
 class AXPFontSizeChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        this.sizes = signal(['small', 'medium', 'large', 'x-large'], ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
-        this.selectedSize = signal(null, ...(ngDevMode ? [{ debugName: "selectedSize" }] : /* istanbul ignore next */ []));
+        this.sizes = signal(['small', 'medium', 'large', 'x-large'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizes" }] : /* istanbul ignore next */ []));
+        this.selectedSize = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedSize" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.getValue()) {
                 this.selectedSize.set(this.sizes().find((s) => s === this.getValue()) ?? this.sizes()[0]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     onSizeClick(size) {
         this.setValue(size);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFontSizeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPFontSizeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (size of sizes(); track size) {
       <div (click)="onSizeClick(size)" [style.font-size]="size" [class.--selected]="size === selectedSize()">
         <div>
@@ -1584,9 +1869,9 @@ 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.2 | 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: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontSizeChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (size of sizes(); track size) {
@@ -1596,7 +1881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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 fontSizeChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -1622,65 +1907,167 @@ const AXPFontSizeChooserWidget = {
     }
 };
 
-class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
+//#region ----- Imports -----
+//#endregion
+//#region ----- Directive -----
+/** Loads a font stylesheet when the host row enters (or nears) the viewport. */
+class AXPFontStyleLazyLoadDirective {
     constructor() {
-        super(...arguments);
-        this.fonts = signal([
-            { id: 'system-ui', title: 'Default' },
-            { id: 'serif', title: 'Serif' },
-            { id: 'sans-serif', title: 'Sans-serif' },
-            { id: 'monospace', title: 'Monospace' },
-            { id: 'arial', title: 'Arial' },
-            { id: 'verdana', title: 'Verdana' },
-            { id: 'tahoma', title: 'Tahoma' },
-            { id: 'times-new-roman', title: 'Times New Roman' },
-            { id: 'georgia', title: 'Georgia' },
-            { id: 'helvetica', title: 'Helvetica' },
-            { id: 'calibri', title: 'Calibri' },
-            { id: 'cursive', title: 'Cursive' },
-            { id: 'vazirmatn', title: 'Vazir وزیر' },
-        ], ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
-        this.selectedFont = signal(null, ...(ngDevMode ? [{ debugName: "selectedFont" }] : /* istanbul ignore next */ []));
-        this.#eff = effect(() => {
-            if (this.getValue()) {
-                this.selectedFont.set(this.fonts().find((f) => f.id === this.getValue()) ?? this.fonts()[0]);
+        //#region ----- Inputs -----
+        this.axpFontStyleLazyLoad = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axpFontStyleLazyLoad" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Services & Dependencies -----
+        this.elementRef = inject((ElementRef));
+        this.fontLoader = inject(AXPRegionalFontStyleLoaderService);
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    ngOnInit() {
+        this.observer = new IntersectionObserver((entries) => {
+            if (!entries.some((entry) => entry.isIntersecting)) {
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+            this.fontLoader.ensureFontStylesLoaded(this.axpFontStyleLazyLoad());
+            this.observer?.disconnect();
+            this.observer = undefined;
+        }, { rootMargin: '120px 0px' });
+        this.observer.observe(this.elementRef.nativeElement);
     }
-    #eff;
-    onFontClick(font) {
-        this.setValue(font.id);
+    ngOnDestroy() {
+        this.observer?.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPFontStyleChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-    @for (font of fonts(); track font.id) {
-      <div
-        (click)="onFontClick(font)"
-        [class.--selected]="font.id === selectedFont()?.id"
-        [style.font-family]="font.id"
-      >
-        <div>
-          <span>{{ font.title }}</span>
-        </div>
-      </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleLazyLoadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXPFontStyleLazyLoadDirective, isStandalone: true, selector: "[axpFontStyleLazyLoad]", inputs: { axpFontStyleLazyLoad: { classPropertyName: "axpFontStyleLazyLoad", publicName: "axpFontStyleLazyLoad", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleLazyLoadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axpFontStyleLazyLoad]',
+                    standalone: true,
+                }]
+        }], propDecorators: { axpFontStyleLazyLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "axpFontStyleLazyLoad", required: true }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXPFontStyleChooserPopupComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Inputs -----
+        this.fonts = [];
+        this.selectedFontId = 'system-ui';
     }
-  `, 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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    //#endregion
+    //#region ----- Event Handlers -----
+    fontVariation(fontId) {
+        return resolveFontVariationSettings(fontId);
+    }
+    selectFont(font) {
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPFontStyleChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFontStyleChooserPopupComponent, decorators: [{
             type: Component,
-            args: [{ template: `
-    @for (font of fonts(); track font.id) {
-      <div
-        (click)="onFontClick(font)"
-        [class.--selected]="font.id === selectedFont()?.id"
-        [style.font-family]="font.id"
-      >
-        <div>
-          <span>{{ font.title }}</span>
-        </div>
-      </div>
+            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"] }]
+        }], propDecorators: { fonts: [{
+                type: Input
+            }], selectedFontId: [{
+                type: Input
+            }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXPFontStyleChooserWidgetComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Services & Dependencies -----
+        this.settingsService = inject(AXPSettingsService);
+        this.localePort = inject(AXP_LOCALE_MANAGEMENT_PORT, { optional: true });
+        this.regionalFontLoader = inject(AXPRegionalFontStyleLoaderService);
+        this.popupService = inject(AXPopupService);
+        this.translateService = inject(AXTranslationService);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ----- State Signals -----
+        this.fonts = signal(AXP_FONT_STYLE_OPTIONS.filter((font) => font.script === 'universal'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fonts" }] : /* istanbul ignore next */ []));
+        this.selectedFontId = computed(() => {
+            const available = this.fonts();
+            return resolveEffectiveFontId(this.getValue(), available);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontId" }] : /* istanbul ignore next */ []));
+        this.selectedFont = computed(() => {
+            const id = this.selectedFontId();
+            return this.fonts().find((font) => font.id === id) ?? this.fonts()[0];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFont" }] : /* istanbul ignore next */ []));
+        this.selectedFontLabel = computed(() => this.selectedFont()?.title ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontLabel" }] : /* istanbul ignore next */ []));
+        this.selectedFontFamily = computed(() => this.selectedFont()?.cssFamily ?? 'inherit', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontFamily" }] : /* istanbul ignore next */ []));
+        this.selectedFontVariation = computed(() => resolveFontVariationSettings(this.selectedFontId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedFontVariation" }] : /* istanbul ignore next */ []));
+        this.isInteractionDisabled = computed(() => !!(this.options()['disabled'] || this.options()['readonly']), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInteractionDisabled" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    async ngOnInit() {
+        await this.refreshFonts();
+        super.ngOnInit();
+        this.settingsService.onLoaded.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            void this.refreshFonts();
+        });
+        this.settingsService.onChanged
+            .pipe(filter((change) => change.keys.includes(AXPRegionalSetting.AvailableLanguages)), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            void this.refreshFonts();
+        });
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    async openPopup() {
+        if (this.isInteractionDisabled()) {
+            return;
+        }
+        await this.refreshFonts();
+        const result = await this.popupService.open(AXPFontStyleChooserPopupComponent, {
+            title: await this.translateService.translateAsync('@general:widgets.font-style-chooser.popup-title'),
+            size: 'md',
+            data: {
+                fonts: this.fonts(),
+                selectedFontId: this.selectedFontId(),
+            },
+        });
+        const fontId = result?.data?.fontId;
+        if (fontId) {
+            this.setValue(resolveEffectiveFontId(fontId, this.fonts()));
+        }
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXSelectionCdkModule], 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.2 | MIT License | https://tailwindcss.com */\n"] }]
+    //#endregion
+    //#region ----- Data Loading -----
+    async refreshFonts() {
+        const context = await resolveRegionalFontScriptContext(this.settingsService, this.localePort);
+        const available = resolveRegionalFontOptions(context);
+        this.fonts.set(available);
+        const effectiveId = resolveEffectiveFontId(this.getValue(), available);
+        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 }); }
+}
+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"] }]
         }] });
 
 var fontStyleChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -1715,12 +2102,12 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
                 return [
                     {
                         id: 'compact',
-                        image: '/assets/images/menu-mode/compact.svg',
+                        image: '/assets/images/ui/menu-mode/compact.svg',
                         labelKey: '@layout:terms.menu-modes.compact',
                     },
                     {
                         id: 'full',
-                        image: '/assets/images/menu-mode/full.svg',
+                        image: '/assets/images/ui/menu-mode/full.svg',
                         labelKey: '@layout:terms.menu-modes.full',
                     },
                 ];
@@ -1729,12 +2116,12 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
                 return [
                     {
                         id: 'simple',
-                        image: '/assets/images/navigation-mode/simple.svg',
+                        image: '/assets/images/ui/navigation-mode/simple.svg',
                         labelKey: '@layout:terms.navigation-modes.simple',
                     },
                     {
                         id: 'tabular',
-                        image: '/assets/images/navigation-mode/tabular.svg',
+                        image: '/assets/images/ui/navigation-mode/tabular.svg',
                         labelKey: '@layout:terms.navigation-modes.tabular',
                     },
                 ];
@@ -1751,21 +2138,24 @@ class AXPMenuOrientationChooserWidgetComponent extends AXPValueWidgetComponent {
                     labelKey: '@layout:terms.menu-modes.horizontal',
                 },
             ];
-        }, ...(ngDevMode ? [{ debugName: "orientations" }] : /* istanbul ignore next */ []));
-        this.selectedOrientation = signal(null, ...(ngDevMode ? [{ debugName: "selectedOrientation" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientations" }] : /* istanbul ignore next */ []));
+        this.selectedOrientation = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedOrientation" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             const options = this.orientations();
             if (this.getValue()) {
                 this.selectedOrientation.set(options.find((o) => o.id === this.getValue()) ?? options[0]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     onOrientationClick(orientation) {
         this.setValue(orientation.id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuOrientationChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (orientation of orientations(); track orientation.id) {
       <div
         (click)="onOrientationClick(orientation)"
@@ -1781,9 +2171,9 @@ 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.2 | 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: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuOrientationChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (orientation of orientations(); track orientation.id) {
@@ -1801,7 +2191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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.--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.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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.--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"] }]
         }] });
 
 var menuOrientationChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -1947,10 +2337,10 @@ class AXPColorChooserService {
         this.cache = colors;
         return colors;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1961,8 +2351,10 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.colorService = inject(AXPColorChooserService);
-        this.colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
-        this.placeholder = computed(() => this.options()['placeholder'] ?? '', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.colors = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+        this.placeholder = computed(() => this.options()['placeholder'] ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.selectedColor = computed(() => {
             const value = this.getValue();
             const fallbackName = () => this.colors()[0]?.name;
@@ -1977,7 +2369,8 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
                 return fallbackName();
             }
             return value.name;
-        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedColor" }] : /* istanbul ignore next */ []));
     }
     async ngOnInit() {
         const allColors = await this.colorService.getColors();
@@ -2018,8 +2411,8 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", host: { classAttribute: "block flex-1 w-full" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", host: { classAttribute: "block flex-1 w-full" }, usesInheritance: true, ngImport: i0, template: `
         <ax-form-field>
           <ax-select-box
             [dataSource]="colors()"
@@ -2059,7 +2452,7 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
         </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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserWidgetEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-chooser-widget',
@@ -2127,10 +2520,10 @@ const AXPThemeColorChooserWidgetConfig = {
             component: () => Promise.resolve().then(function () { return themeColorChooserEdit_component; }).then((c) => c.AXPColorChooserWidgetEditComponent),
         },
         column: {
-            component: () => import('./acorex-platform-framework-client-themes-shared-theme-color-chooser-column.component-D4ubvFYf.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
+            component: () => import('./acorex-platform-framework-client-themes-shared-theme-color-chooser-column.component-BIsQTr6B.mjs').then((c) => c.AXPColorChooserWidgetColumnComponent),
         },
         view: {
-            component: () => import('./acorex-platform-framework-client-themes-shared-theme-color-chooser-view.component-Br8j_BF_.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
+            component: () => import('./acorex-platform-framework-client-themes-shared-theme-color-chooser-view.component-ZclmSbt9.mjs').then((c) => c.AXPColorChooserWidgetViewComponent),
         },
     },
 };
@@ -2142,20 +2535,23 @@ class AXPThemeModeChooserWidgetComponent extends AXPValueWidgetComponent {
             { id: AXPThemeMode.Light, icon: 'fa-light fa-brightness' },
             { id: AXPThemeMode.Dark, icon: 'fa-light fa-moon' },
             { id: AXPThemeMode.System, icon: 'fa-light fa-desktop' },
-        ], ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
-        this.selectedMode = signal(null, ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modes" }] : /* istanbul ignore next */ []));
+        this.selectedMode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.getValue()) {
                 this.selectedMode.set(this.modes().find((m) => m.id === this.getValue()) ?? this.modes()[0]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @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: "21.2.9", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPThemeModeChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPThemeModeChooserWidgetComponent, 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>
@@ -2164,9 +2560,9 @@ 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: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)}:host>div{padding-block:var(--spacing, .25rem)}@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.2 | 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: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemeModeChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (mode of modes(); track mode.id) {
@@ -2177,7 +2573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <span>{{ '@layout:terms.theme-modes.' + mode.id | translate | async }}</span>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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)}:host>div{padding-block:var(--spacing, .25rem)}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, 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: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"] }]
         }] });
 
 var themeModeChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -2207,15 +2603,18 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
         this.paletteService = inject(AXP_THEME_PALETTE_PROVIDER);
-        this.palettes = signal([], ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
-        this.selectedPalette = signal(null, ...(ngDevMode ? [{ debugName: "selectedPalette" }] : /* istanbul ignore next */ []));
+        this.palettes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
+        this.selectedPalette = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedPalette" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (this.getValue()) {
                 this.selectedPalette.set(this.palettes().find((p) => p.name === this.getValue()) ??
                     this.palettes().find((p) => p.name === 'default') ??
                     this.palettes()[0]);
             }
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
     async ngOnInit() {
@@ -2226,8 +2625,8 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
     onPaletteClick(palette) {
         this.setValue(palette.name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPThemePaletteChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPThemePaletteChooserWidgetComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @for (palette of palettes(); track palette.name) {
       <div (click)="onPaletteClick(palette)" [class.--selected]="palette.name === selectedPalette()?.name">
         <span>{{ palette.title }}</span>
@@ -2238,9 +2637,9 @@ class AXPThemePaletteChooserWidgetComponent extends AXPValueWidgetComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer properties;:host{display:flex;width:100%;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)}:host>div{height:calc(var(--spacing, .25rem) * 12);min-width:100%}@media(width>=48rem){:host>div{min-width:calc(var(--spacing, .25rem) * 64)}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 50%,transparent);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@supports (color: color-mix(in lab,red,red)){:host>div>div div{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@layer properties;:host{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;height:calc(var(--spacing, .25rem) * 12);min-width:100%;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}@media(width>=48rem){:host>div{min-width:calc(var(--spacing, .25rem) * 64)}}: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{position:relative;display:flex;height:100%;width:fit-content;align-items:center;justify-content:center}:host>div>div div{position:absolute;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 50%,transparent);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@supports (color: color-mix(in lab,red,red)){:host>div>div div{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}: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-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionCdkModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemePaletteChooserWidgetComponent, decorators: [{
             type: Component,
             args: [{ template: `
     @for (palette of palettes(); track palette.name) {
@@ -2253,7 +2652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </div>
       </div>
     }
-  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXSelectionCdkModule], styles: ["@layer properties;:host{display:flex;width:100%;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)}:host>div{height:calc(var(--spacing, .25rem) * 12);min-width:100%}@media(width>=48rem){:host>div{min-width:calc(var(--spacing, .25rem) * 64)}}:host>div>div{position:relative;height:100%;width:fit-content}:host>div>div div{position:absolute;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 50%,transparent);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@supports (color: color-mix(in lab,red,red)){:host>div>div div{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+  `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, AXSelectionCdkModule], styles: ["@layer properties;:host{display:flex;width:100%;flex-direction:row;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2)}:host>div{display:flex;height:calc(var(--spacing, .25rem) * 12);min-width:100%;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}@media(width>=48rem){:host>div{min-width:calc(var(--spacing, .25rem) * 64)}}: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{position:relative;display:flex;height:100%;width:fit-content;align-items:center;justify-content:center}:host>div>div div{position:absolute;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:color-mix(in srgb,#fff 50%,transparent);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@supports (color: color-mix(in lab,red,red)){:host>div>div div{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}: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-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 var themePaletteChooserWidget_component = /*#__PURE__*/Object.freeze({
@@ -2294,28 +2693,34 @@ class AXPThemesSharedWidgetsProvider {
     getWidgets() {
         return WIDGETS;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedWidgetsProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedWidgetsProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedWidgetsProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedWidgetsProvider, decorators: [{
             type: Injectable
         }] });
 
 class AXPThemesSharedModule {
     constructor(appInitService, injector) {
         const service = injector.get(AXPLayoutThemeService);
+        const platformSettingsLoadState = injector.get(AXPPlatformSettingsLoadState, null);
         appInitService.registerTask({
             name: 'layout-theme',
             statusText: '@layout:app-startup.applying-theme-settings',
-            priority: 100,
+            priority: AXP_APP_STARTUP_PRIORITY.layoutTheme,
             run: async () => {
+                if (platformSettingsLoadState?.hasFailure() ||
+                    platformSettingsLoadState?.hasPendingOfflineContinue() ||
+                    platformSettingsLoadState?.isOfflineMode()) {
+                    return;
+                }
                 await service.loadSettings();
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$3.AXPComponentSlotModule, AXPWidgetCoreModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedModule, deps: [{ token: i1$3.AXPAppStartUpService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedModule, imports: [i1$3.AXPComponentSlotModule, AXPWidgetCoreModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedModule, providers: [
             {
                 provide: AXP_LOGO_THEME_RESOLVER,
                 useExisting: AXPLayoutThemeService,
@@ -2342,7 +2747,7 @@ class AXPThemesSharedModule {
             }),
             AXPWidgetCoreModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPThemesSharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2383,5 +2788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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 };
+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 };
 //# sourceMappingURL=acorex-platform-framework-client-themes-shared.mjs.map