codexly-ui 0.6.11 → 0.6.13

package/assets/styles/_theme.css

@@ -6,6 +6,12 @@
 /* ── Font body variable (overridden dynamically by ClxThemeService) ───────── */
 :root {
   --clx-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
+
+  /* ── Font weight (overridden dynamically by ClxThemeService) ──
+     label:    field labels, secondary text, idle nav, badges
+     emphasis: titles, selected/active state, standout values (prices, counters) */
+  --clx-font-weight-label:    500;
+  --clx-font-weight-emphasis: 600;
 }
 
 /* ── Light theme (default) ────────────────────────────────────────────────── */

package/fesm2022/codexly-ui.mjs

@@ -378,6 +378,11 @@ const CLX_FONT_CATALOG = [
         googleUrl: 'https://fonts.googleapis.com/css2?family=Bungee&display=swap',
     },
 ];
+const CLX_FONT_WEIGHT_MAP = {
+    light: { label: 400, emphasis: 500 },
+    normal: { label: 500, emphasis: 600 },
+    bold: { label: 600, emphasis: 700 },
+};
 // ── Tailwind rounded classes per borderRadius token ───────────────────────────
 const CLX_RADIUS_MAP = {
     none: 'rounded-none',
@@ -417,6 +422,7 @@ const CLX_THEME_DEFAULTS = {
     defaultSize: 'md',
     defaultShape: 'rounded',
     fontFamily: 'DM Sans',
+    fontWeight: 'normal',
 };
 // ── Injection token ───────────────────────────────────────────────────────────
 const CLX_THEME_CONFIG = new InjectionToken('CLX_THEME_CONFIG', { factory: () => CLX_THEME_DEFAULTS });
@@ -545,12 +551,19 @@ class ClxThemeService {
             return false;
         return this._sysDark();
     }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
-    /** Color to apply to clx-nav-group labels — falls back to neutralColor */
-    sidebarGroupColor = computed(() => this._config().sidebarGroupColor ?? this._config().neutralColor, ...(ngDevMode ? [{ debugName: "sidebarGroupColor" }] : /* istanbul ignore next */ []));
-    /** Color to apply to top-level clx-menu — falls back to primaryColor */
-    sidebarMenuColor = computed(() => this._config().sidebarMenuColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarMenuColor" }] : /* istanbul ignore next */ []));
-    /** Color to apply to clx-menu-item — falls back to primaryColor */
-    sidebarItemColor = computed(() => this._config().sidebarItemColor ?? this._config().primaryColor, ...(ngDevMode ? [{ debugName: "sidebarItemColor" }] : /* istanbul ignore next */ []));
+    /** Resolved style for clx-nav-group labels — falls back to neutralColor/xs/label */
+    sidebarGroupStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarGroup, this._config().neutralColor, 'xs', 'label'), ...(ngDevMode ? [{ debugName: "sidebarGroupStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for top-level clx-menu — falls back to primaryColor/sm/emphasis */
+    sidebarMenuStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarMenu, this._config().primaryColor, 'sm', 'emphasis'), ...(ngDevMode ? [{ debugName: "sidebarMenuStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for clx-menu-item — falls back to primaryColor/sm/label */
+    sidebarItemStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarItem, this._config().primaryColor, 'sm', 'label'), ...(ngDevMode ? [{ debugName: "sidebarItemStyle" }] : /* istanbul ignore next */ []));
+    _resolveNavZoneStyle(override, defaultColor, defaultSize, defaultWeight) {
+        return {
+            color: override?.color ?? defaultColor,
+            size: override?.size ?? defaultSize,
+            weight: override?.weight ?? defaultWeight,
+        };
+    }
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -570,6 +583,11 @@ class ClxThemeService {
                 return;
             this._applyFont(this._config().fontFamily ?? 'Roboto');
         });
+        effect(() => {
+            if (!this._isBrowser)
+                return;
+            this._applyFontWeight(this._config().fontWeight ?? 'normal');
+        });
         if (this._isBrowser) {
             const mq = window.matchMedia('(prefers-color-scheme: dark)');
             mq.addEventListener('change', e => this._sysDark.set(e.matches));
@@ -622,6 +640,13 @@ class ClxThemeService {
         link.href = option.googleUrl;
         document.documentElement.style.setProperty('--clx-font-body', `'${family}', ui-sans-serif, system-ui, sans-serif`);
     }
+    _applyFontWeight(intensity) {
+        const pair = CLX_FONT_WEIGHT_MAP[intensity];
+        if (!pair)
+            return;
+        document.documentElement.style.setProperty('--clx-font-weight-label', String(pair.label));
+        document.documentElement.style.setProperty('--clx-font-weight-emphasis', String(pair.emphasis));
+    }
     _loadMode() {
         if (!this._isBrowser)
             return 'system';
@@ -1236,6 +1261,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ selector: '[clxCardHeader]', standalone: true }]
         }] });
 
+/** Optional trailing slot next to the auto-generated icon+title header (see ClxCardComponent's
+ *  `icon`/`headerTitle` inputs) — for a button, badge or switch shown to the right of the title. */
+class ClxCardHeaderActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardHeaderActionsDirective, isStandalone: true, selector: "[clxCardHeaderActions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardHeaderActionsDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[clxCardHeaderActions]', standalone: true }]
+        }] });
+
 class ClxCardBodyDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ClxCardBodyDirective, isStandalone: true, selector: "[clxCardBody]", providers: [
@@ -1290,11 +1326,21 @@ class ClxCardComponent {
     shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Auto-generated header icon (Material Symbols name) — shown in a rounded primary-subtle
+     *  square next to headerTitle. Ignored when a manual [clxCardHeader] block is projected. */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Auto-generated header title — set this (without projecting [clxCardHeader]) to get the
+     *  standard icon+title(+subtitle) card header used across the app, instead of hand-rolling it. */
+    headerTitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
+    /** Optional secondary line under headerTitle. */
+    headerSubtitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
+    _headerActionsSlot = contentChild(ClxCardHeaderActionsDirective, ...(ngDevMode ? [{ debugName: "_headerActionsSlot" }] : /* istanbul ignore next */ []));
     _bodySlot = contentChild(ClxCardBodyDirective, ...(ngDevMode ? [{ debugName: "_bodySlot" }] : /* istanbul ignore next */ []));
     _footerSlot = contentChild(ClxCardFooterDirective, ...(ngDevMode ? [{ debugName: "_footerSlot" }] : /* istanbul ignore next */ []));
     _hasHeader = computed(() => !!this._headerSlot(), ...(ngDevMode ? [{ debugName: "_hasHeader" }] : /* istanbul ignore next */ []));
+    _hasHeaderActions = computed(() => !!this._headerActionsSlot(), ...(ngDevMode ? [{ debugName: "_hasHeaderActions" }] : /* istanbul ignore next */ []));
     _hasBody = computed(() => !!this._bodySlot(), ...(ngDevMode ? [{ debugName: "_hasBody" }] : /* istanbul ignore next */ []));
     _hasFooter = computed(() => !!this._footerSlot(), ...(ngDevMode ? [{ debugName: "_hasFooter" }] : /* istanbul ignore next */ []));
     /** Blocks interaction only — applied to body/footer so the header (e.g. an enable/disable switch) stays clickable. */
@@ -1326,11 +1372,30 @@ class ClxCardComponent {
         return `flex flex-col ${resolveContainerRadius(this._themeSvc.config().borderRadius)} overflow-hidden w-full ${variantClass} ${hover} ${disabledCls}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()", "attr.aria-disabled": "disabled() || null" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_headerActionsSlot", first: true, predicate: ClxCardHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <ng-content select="[clxCardHeader]" />
       </div>
+    } @else if (headerTitle()) {
+      <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
+        <div class="flex items-center gap-3 min-w-0">
+          @if (icon()) {
+            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
+              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            </div>
+          }
+          <div class="flex flex-col min-w-0">
+            <p class="text-sm font-(--clx-font-weight-emphasis) text-clx-text-label leading-tight truncate">{{ headerTitle() }}</p>
+            @if (headerSubtitle()) {
+              <p class="text-xs text-clx-text-muted leading-tight truncate">{{ headerSubtitle() }}</p>
+            }
+          </div>
+        </div>
+        @if (_hasHeaderActions()) {
+          <ng-content select="[clxCardHeaderActions]" />
+        }
+      </div>
     }
 
     <div [class]="_bodyClass()">
@@ -1345,14 +1410,14 @@ class ClxCardComponent {
         <ng-content select="[clxCardFooter]" />
       </div>
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-card',
                     standalone: true,
-                    imports: [],
+                    imports: [ClxIconComponent],
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -1364,6 +1429,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       <div class="clx-card-header flex items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
         <ng-content select="[clxCardHeader]" />
       </div>
+    } @else if (headerTitle()) {
+      <div class="clx-card-header flex w-full items-center justify-between gap-3 px-4 py-3 border-b border-clx-border-soft">
+        <div class="flex items-center gap-3 min-w-0">
+          @if (icon()) {
+            <div class="w-8 h-8 rounded-lg bg-clx-primary-subtle flex items-center justify-center shrink-0">
+              <span clx-icon [name]="icon()!" size="sm" class="text-clx-primary"></span>
+            </div>
+          }
+          <div class="flex flex-col min-w-0">
+            <p class="text-sm font-(--clx-font-weight-emphasis) text-clx-text-label leading-tight truncate">{{ headerTitle() }}</p>
+            @if (headerSubtitle()) {
+              <p class="text-xs text-clx-text-muted leading-tight truncate">{{ headerSubtitle() }}</p>
+            }
+          </div>
+        </div>
+        @if (_hasHeaderActions()) {
+          <ng-content select="[clxCardHeaderActions]" />
+        }
+      </div>
     }
 
     <div [class]="_bodyClass()">
@@ -1380,7 +1464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _headerActionsSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderActionsDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const CLX_LIST_CONTEXT = new InjectionToken('CLX_LIST_CONTEXT');
 // ── Variant maps ──────────────────────────────────────────────────────────────
@@ -9537,10 +9621,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }], propDecorators: { logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
-const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium cursor-pointer select-none';
+const NAV_ITEM_BASE = 'flex items-center gap-3 w-full cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
+// ── Nav zone size → Tailwind text-size class ─────────────────────────────────
+const NAV_ZONE_SIZE_CLASS = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-base',
+};
+// ── Nav weight token → CSS var-backed arbitrary Tailwind class ───────────────
+const NAV_ZONE_WEIGHT_CLASS = {
+    label: 'font-(--clx-font-weight-label)',
+    emphasis: 'font-(--clx-font-weight-emphasis)',
+};
+/** Resolves a nav zone's configured size + idle weight (its base, theme-configured weight). */
+function resolveNavZoneIdle(style) {
+    return `${NAV_ZONE_SIZE_CLASS[style.size]} ${NAV_ZONE_WEIGHT_CLASS[style.weight]}`;
+}
+/** Resolves a nav zone's configured size + the active/selected state's emphasis weight —
+ *  the selected item always reads one step heavier than its configured idle weight. */
+function resolveNavZoneActive(style) {
+    return `${NAV_ZONE_SIZE_CLASS[style.size]} ${NAV_ZONE_WEIGHT_CLASS.emphasis}`;
+}
 // ── Children container ─────────────────────────────────────────────────────────
 const NAV_CHILDREN_WRAPPER = 'grid transition-[grid-template-rows] duration-300 ease-in-out';
 const NAV_CHILDREN_INNER = 'overflow-hidden';
@@ -9550,8 +9654,14 @@ class ClxMenuComponent {
     _themeSvc = inject(ClxThemeService);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    _color = computed(() => this.color() ?? this._themeSvc.sidebarMenuColor(), ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarMenu style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarMenuStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this._resolved().color, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
@@ -9578,14 +9688,14 @@ class ClxMenuComponent {
     _iconCls = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _buttonCls(isActive) {
         const geom = this.collapsed() ? 'w-full py-3 px-0 justify-center' : NAV_ITEM_L1;
-        const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this._color());
         if (isActive) {
+            const base = `${NAV_ITEM_BASE} ${resolveNavZoneActive(this._resolved())} ${geom}`;
             if (this.collapsed())
-                return `${base} ${t.textSubtle} font-semibold`;
-            return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
+                return `${base} ${t.textSubtle}`;
+            return `${base} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px]`;
         }
-        return `${base} ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${geom} ${t.hoverBgMuted}`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
@@ -9594,7 +9704,7 @@ class ClxMenuComponent {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "_rla", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -9717,7 +9827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], _rla: [{
                 type: ViewChild,
                 args: [RouterLinkActive]
             }] } });
@@ -9727,32 +9837,38 @@ class ClxMenuItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarItem style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     routerLink = input('', ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
     routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
     itemClick = output();
-    _resolvedColor = computed(() => this.color() ?? this._themeSvc.sidebarItemColor(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarItemStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
             return 'w-full py-3 px-0 justify-center';
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
-    _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
+    _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
-        const hover = resolveColor(this._resolvedColor()).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${this._geom()} ${hover}`;
+        const hover = resolveColor(this._resolved().color).hoverBgMuted;
+        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
+        const t = resolveColor(this._resolved().color);
+        const typography = resolveNavZoneActive(this._resolved());
         if (this.collapsed()) {
-            return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
+            return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle}`;
         }
-        return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
+        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (routerLink()) {
       <a
         [routerLink]="routerLink()"
@@ -9825,20 +9941,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class ClxNavGroupComponent {
+    _themeSvc = inject(ClxThemeService);
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
-    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    labelClass = computed(() => {
-        const c = this.color();
-        return c ? resolveColor(c).textSubtle : 'text-clx-text-subtle';
-    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
+    /** Per-instance override — any field left unset falls back to the theme's sidebarGroup style */
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    _resolved = computed(() => {
+        const base = this._themeSvc.sidebarGroupStyle();
+        const o = this.style();
+        return { color: o?.color ?? base.color, size: o?.size ?? base.size, weight: o?.weight ?? base.weight };
+    }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
+    labelClass = computed(() => `${resolveColor(this._resolved().color).textSubtle} ${resolveNavZoneIdle(this._resolved())}`, ...(ngDevMode ? [{ debugName: "labelClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -9853,7 +9973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 uppercase tracking-widest select-none" [class]="labelClass()">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
         <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
@@ -9864,7 +9984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
 class ClxProfileComponent {
     // ── Inputs ──────────────────────────────────────────────────────────────────
@@ -15596,5 +15716,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_FONT_WEIGHT_MAP, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxModalComponent, ClxModalService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map