codexly-ui 0.6.11 → 0.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codexly-ui",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "description": "Standalone, signal-based Angular UI component library for Codexly, styled with Tailwind CSS.",
   "keywords": [
     "angular",

package/types/codexly-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Signal, InjectionToken, OnDestroy, ElementRef, AfterViewInit, AfterContentInit, OnInit, QueryList, TemplateRef, Provider, OnChanges, SimpleChanges } from '@angular/core';
+import { Signal, InjectionToken, OnDestroy, ElementRef, AfterViewInit, AfterContentInit, OnInit, Provider, QueryList, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
 import * as codexly_ui from 'codexly-ui';
 import { ControlValueAccessor, FormControl, FormGroup } from '@angular/forms';
 import * as _angular_cdk_overlay from '@angular/cdk/overlay';
@@ -240,11 +240,21 @@ declare class ClxCardComponent {
     readonly shadow: _angular_core.InputSignal<ClxCardShadow | undefined>;
     readonly hover: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** 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. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** 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. */
+    readonly headerTitle: _angular_core.InputSignal<string | undefined>;
+    /** Optional secondary line under headerTitle. */
+    readonly headerSubtitle: _angular_core.InputSignal<string | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     private readonly _headerSlot;
+    private readonly _headerActionsSlot;
     private readonly _bodySlot;
     private readonly _footerSlot;
     protected readonly _hasHeader: _angular_core.Signal<boolean>;
+    protected readonly _hasHeaderActions: _angular_core.Signal<boolean>;
     protected readonly _hasBody: _angular_core.Signal<boolean>;
     protected readonly _hasFooter: _angular_core.Signal<boolean>;
     /** Blocks interaction only — applied to body/footer so the header (e.g. an enable/disable switch) stays clickable. */
@@ -253,7 +263,7 @@ declare class ClxCardComponent {
     protected readonly _footerClass: _angular_core.Signal<string>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCardComponent, "clx-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["_headerSlot", "_bodySlot", "_footerSlot"], ["[clxCardHeader]", "[clxCardBody]", "*", "[clxCardFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCardComponent, "clx-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerSubtitle": { "alias": "headerSubtitle"; "required": false; "isSignal": true; }; }, {}, ["_headerSlot", "_headerActionsSlot", "_bodySlot", "_footerSlot"], ["[clxCardHeader]", "[clxCardHeaderActions]", "[clxCardBody]", "*", "[clxCardFooter]"], true, never>;
 }
 
 declare class ClxCardHeaderDirective {
@@ -261,6 +271,13 @@ declare class ClxCardHeaderDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardHeaderDirective, "[clxCardHeader]", never, {}, {}, never, never, true, never>;
 }
 
+/** 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. */
+declare class ClxCardHeaderActionsDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardHeaderActionsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardHeaderActionsDirective, "[clxCardHeaderActions]", never, {}, {}, never, never, true, never>;
+}
+
 declare class ClxCardBodyDirective {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxCardBodyDirective, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxCardBodyDirective, "[clxCardBody]", never, {}, {}, never, never, true, never>;
@@ -1792,12 +1809,78 @@ declare class ClxBrandComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxBrandComponent, "clx-brand", never, { "logo": { "alias": "logo"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type ClxFontFamily = 'Roboto' | 'Inter' | 'Poppins' | 'Plus Jakarta Sans' | 'Nunito' | 'DM Sans' | 'Geist' | 'Lato' | 'Montserrat' | 'Open Sans' | 'Work Sans' | 'Manrope' | 'Sora' | 'Outfit' | 'Rubik' | 'Source Sans 3' | 'Space Grotesk' | 'Merriweather' | 'Playfair Display' | 'Lora' | 'PT Serif' | 'Caveat' | 'Dancing Script' | 'Cinzel' | 'Berkshire Swash' | 'JetBrains Mono' | 'Orbitron' | 'UnifrakturMaguntia' | 'Pirata One' | 'Press Start 2P' | 'Bungee';
+interface ClxFontOption {
+    label: string;
+    value: ClxFontFamily;
+    googleUrl: string;
+}
+declare const CLX_FONT_CATALOG: ClxFontOption[];
+interface ClxNavZoneStyle {
+    color?: ClxColorInput;
+    size?: Extract<ClxSize, 'xs' | 'sm' | 'md'>;
+    /** Which theme weight token this zone reads — 'label' (lighter) or 'emphasis' (heavier) */
+    weight?: 'label' | 'emphasis';
+}
+interface ClxThemeConfig {
+    /** Default accent color for all components (buttons, inputs, checkboxes…) */
+    primaryColor: ClxColorInput;
+    /** Color used for secondary actions (cancel, close buttons) */
+    secondaryColor: ClxColorInput;
+    /** Color used for destructive actions and error states */
+    dangerColor: ClxColorInput;
+    /** Color used for success confirmations */
+    successColor: ClxColorInput;
+    /** Color used for warnings */
+    warningColor: ClxColorInput;
+    /** Neutral color for surfaces, nav idle states */
+    neutralColor: ClxColorInput;
+    /** Base text color applied across the app */
+    textColor: ClxColorInput;
+    /** Sidebar nav-group label style override — falls back to neutralColor/xs/label when unset */
+    sidebarGroup?: ClxNavZoneStyle;
+    /** Sidebar top-level menu style override — falls back to primaryColor/sm/emphasis when unset */
+    sidebarMenu?: ClxNavZoneStyle;
+    /** Sidebar menu-item style override — falls back to primaryColor/sm/label when unset */
+    sidebarItem?: ClxNavZoneStyle;
+    /** Default border-radius style applied to all components */
+    borderRadius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Default size for all form/interactive components */
+    defaultSize: Extract<ClxSize, 'sm' | 'md' | 'lg'>;
+    /** Default shape for buttons, badges, tags */
+    defaultShape: Extract<ClxShape, 'rounded' | 'pill'>;
+    /** Body font family — must be one of CLX_FONT_CATALOG values */
+    fontFamily: ClxFontFamily;
+    /** Overall type-weight intensity — shifts both label and emphasis weights together */
+    fontWeight: ClxFontWeightIntensity;
+}
+type ClxFontWeightIntensity = 'light' | 'normal' | 'bold';
+interface ClxFontWeightPair {
+    label: number;
+    emphasis: number;
+}
+declare const CLX_FONT_WEIGHT_MAP: Record<ClxFontWeightIntensity, ClxFontWeightPair>;
+declare const CLX_RADIUS_MAP: Record<ClxThemeConfig['borderRadius'], string>;
+/** Returns the Tailwind class for a form-control radius */
+declare function resolveRadius(r: ClxThemeConfig['borderRadius']): string;
+/** Returns the Tailwind class for a surface/container radius (card, panel, dropzone) */
+declare function resolveContainerRadius(r: ClxThemeConfig['borderRadius']): string;
+declare const CLX_THEME_DEFAULTS: ClxThemeConfig;
+declare const CLX_THEME_CONFIG: InjectionToken<ClxThemeConfig>;
+declare function provideCodexlyTheme(config: Partial<ClxThemeConfig>): Provider;
+
 declare class ClxMenuComponent implements AfterViewInit {
     private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    /** Per-instance override — any field left unset falls back to the theme's sidebarMenu style */
+    readonly style: _angular_core.InputSignal<ClxNavZoneStyle | undefined>;
+    protected readonly _resolved: _angular_core.Signal<{
+        color: codexly_ui.ClxColorInput;
+        size: "xs" | "sm" | "md";
+        weight: "label" | "emphasis";
+    }>;
+    protected readonly _color: _angular_core.Signal<codexly_ui.ClxColorInput>;
     readonly collapsed: _angular_core.InputSignal<boolean>;
     readonly active: _angular_core.InputSignal<boolean>;
     readonly routerLink: _angular_core.InputSignal<string | any[]>;
@@ -1816,7 +1899,7 @@ declare class ClxMenuComponent implements AfterViewInit {
     protected readonly NAV_CHILDREN_LIST = "ml-6 py-1 space-y-0.5";
     protected _toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuComponent, "clx-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuComponent, "clx-menu", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class ClxMenuItemComponent {
@@ -1824,7 +1907,8 @@ declare class ClxMenuItemComponent {
     readonly label: _angular_core.InputSignal<string>;
     readonly icon: _angular_core.InputSignal<string>;
     readonly active: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Per-instance override — any field left unset falls back to the theme's sidebarItem style */
+    readonly style: _angular_core.InputSignal<ClxNavZoneStyle | undefined>;
     readonly nested: _angular_core.InputSignal<boolean>;
     readonly collapsed: _angular_core.InputSignal<boolean>;
     readonly routerLink: _angular_core.InputSignal<string | any[]>;
@@ -1832,22 +1916,25 @@ declare class ClxMenuItemComponent {
         exact: boolean;
     }>;
     readonly itemClick: _angular_core.OutputEmitterRef<void>;
-    private readonly _resolvedColor;
+    private readonly _resolved;
     private readonly _geom;
     protected readonly _iconCls: _angular_core.Signal<string>;
     protected readonly _idleCls: _angular_core.Signal<string>;
     protected readonly _activeCls: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxMenuItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuItemComponent, "clx-menu-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxMenuItemComponent, "clx-menu-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
 declare class ClxNavGroupComponent {
+    private readonly _themeSvc;
     readonly label: _angular_core.InputSignal<string>;
     readonly collapsed: _angular_core.InputSignal<boolean>;
-    readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
+    /** Per-instance override — any field left unset falls back to the theme's sidebarGroup style */
+    readonly style: _angular_core.InputSignal<ClxNavZoneStyle | undefined>;
+    private readonly _resolved;
     readonly labelClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxNavGroupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNavGroupComponent, "clx-nav-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxNavGroupComponent, "clx-nav-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface ClxProfileMenuItem {
@@ -2942,52 +3029,6 @@ declare class ClxCartSummaryDrawer {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxCartSummaryDrawer, "clx-cart-summary-drawer", never, {}, {}, never, never, true, never>;
 }
 
-type ClxFontFamily = 'Roboto' | 'Inter' | 'Poppins' | 'Plus Jakarta Sans' | 'Nunito' | 'DM Sans' | 'Geist' | 'Lato' | 'Montserrat' | 'Open Sans' | 'Work Sans' | 'Manrope' | 'Sora' | 'Outfit' | 'Rubik' | 'Source Sans 3' | 'Space Grotesk' | 'Merriweather' | 'Playfair Display' | 'Lora' | 'PT Serif' | 'Caveat' | 'Dancing Script' | 'Cinzel' | 'Berkshire Swash' | 'JetBrains Mono' | 'Orbitron' | 'UnifrakturMaguntia' | 'Pirata One' | 'Press Start 2P' | 'Bungee';
-interface ClxFontOption {
-    label: string;
-    value: ClxFontFamily;
-    googleUrl: string;
-}
-declare const CLX_FONT_CATALOG: ClxFontOption[];
-interface ClxThemeConfig {
-    /** Default accent color for all components (buttons, inputs, checkboxes…) */
-    primaryColor: ClxColorInput;
-    /** Color used for secondary actions (cancel, close buttons) */
-    secondaryColor: ClxColorInput;
-    /** Color used for destructive actions and error states */
-    dangerColor: ClxColorInput;
-    /** Color used for success confirmations */
-    successColor: ClxColorInput;
-    /** Color used for warnings */
-    warningColor: ClxColorInput;
-    /** Neutral color for surfaces, nav idle states */
-    neutralColor: ClxColorInput;
-    /** Base text color applied across the app */
-    textColor: ClxColorInput;
-    /** Sidebar nav-group label color override — falls back to neutralColor when unset */
-    sidebarGroupColor?: ClxColorInput;
-    /** Sidebar top-level menu color override — falls back to primaryColor when unset */
-    sidebarMenuColor?: ClxColorInput;
-    /** Sidebar menu-item color override — falls back to primaryColor when unset */
-    sidebarItemColor?: ClxColorInput;
-    /** Default border-radius style applied to all components */
-    borderRadius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    /** Default size for all form/interactive components */
-    defaultSize: Extract<ClxSize, 'sm' | 'md' | 'lg'>;
-    /** Default shape for buttons, badges, tags */
-    defaultShape: Extract<ClxShape, 'rounded' | 'pill'>;
-    /** Body font family — must be one of CLX_FONT_CATALOG values */
-    fontFamily: ClxFontFamily;
-}
-declare const CLX_RADIUS_MAP: Record<ClxThemeConfig['borderRadius'], string>;
-/** Returns the Tailwind class for a form-control radius */
-declare function resolveRadius(r: ClxThemeConfig['borderRadius']): string;
-/** Returns the Tailwind class for a surface/container radius (card, panel, dropzone) */
-declare function resolveContainerRadius(r: ClxThemeConfig['borderRadius']): string;
-declare const CLX_THEME_DEFAULTS: ClxThemeConfig;
-declare const CLX_THEME_CONFIG: InjectionToken<ClxThemeConfig>;
-declare function provideCodexlyTheme(config: Partial<ClxThemeConfig>): Provider;
-
 declare const CLX_TEXT_LABEL = "text-clx-text-label";
 declare const CLX_TEXT_HINT = "text-clx-text-subtle";
 declare const CLX_TEXT_DISABLED = "text-clx-text-subtle";
@@ -3083,6 +3124,11 @@ declare class ClxAnimateGroupDirective {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClxAnimateGroupDirective, "[clxAnimateGroup]", ["clxAnimateGroup"], { "stagger": { "alias": "stagger"; "required": false; "isSignal": true; }; }, {}, ["children"], never, true, never>;
 }
 
+interface ClxResolvedNavZoneStyle {
+    color: ClxColorInput;
+    size: Extract<ClxSize, 'xs' | 'sm' | 'md'>;
+    weight: 'label' | 'emphasis';
+}
 type ClxThemeMode = 'light' | 'dark' | 'system';
 declare class ClxThemeService {
     private readonly _isBrowser;
@@ -3093,12 +3139,13 @@ declare class ClxThemeService {
     readonly mode: _angular_core.Signal<ClxThemeMode>;
     readonly config: _angular_core.Signal<ClxThemeConfig>;
     readonly isDark: _angular_core.Signal<boolean>;
-    /** Color to apply to clx-nav-group labels — falls back to neutralColor */
-    readonly sidebarGroupColor: _angular_core.Signal<ClxColorInput>;
-    /** Color to apply to top-level clx-menu — falls back to primaryColor */
-    readonly sidebarMenuColor: _angular_core.Signal<ClxColorInput>;
-    /** Color to apply to clx-menu-item — falls back to primaryColor */
-    readonly sidebarItemColor: _angular_core.Signal<ClxColorInput>;
+    /** Resolved style for clx-nav-group labels — falls back to neutralColor/xs/label */
+    readonly sidebarGroupStyle: _angular_core.Signal<ClxResolvedNavZoneStyle>;
+    /** Resolved style for top-level clx-menu — falls back to primaryColor/sm/emphasis */
+    readonly sidebarMenuStyle: _angular_core.Signal<ClxResolvedNavZoneStyle>;
+    /** Resolved style for clx-menu-item — falls back to primaryColor/sm/label */
+    readonly sidebarItemStyle: _angular_core.Signal<ClxResolvedNavZoneStyle>;
+    private _resolveNavZoneStyle;
     constructor();
     setMode(mode: ClxThemeMode): void;
     setConfig(patch: Partial<ClxThemeConfig>): void;
@@ -3106,6 +3153,7 @@ declare class ClxThemeService {
     private _applyColorVar;
     private _applyTextColor;
     private _applyFont;
+    private _applyFontWeight;
     private _loadMode;
     private _getSystemDark;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxThemeService, never>;
@@ -3194,5 +3242,5 @@ declare class ClxToastService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ClxToastService>;
 }
 
-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 type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, SparkPoint };
+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 };
+export type { ClxAlertButtonOptions, ClxAlertOptions, ClxAlertResult, ClxAlertType, ClxAnimateAttentionSeeker, ClxAnimateBackEntrance, ClxAnimateBackExit, ClxAnimateBouncingEntrance, ClxAnimateBouncingExit, ClxAnimateConfig, ClxAnimateDefaults, ClxAnimateEvent, ClxAnimateFadingEntrance, ClxAnimateFadingExit, ClxAnimateFlipper, ClxAnimateLightspeed, ClxAnimateName, ClxAnimateRotatingEntrance, ClxAnimateRotatingExit, ClxAnimateSlidingEntrance, ClxAnimateSlidingExit, ClxAnimateSpecial, ClxAnimateTrigger, ClxAnimateZoomingEntrance, ClxAnimateZoomingExit, ClxAvatarContentType, ClxBadgeVariant, ClxButtonColor, ClxButtonGroupShape, ClxButtonVariant, ClxCardPadding, ClxCardShadow, ClxCardVariant, ClxCarouselAspectRatio, ClxCarouselConfig, ClxCartItem, ClxCartSummaryData, ClxCellContext, ClxCheckboxVariant, ClxColor, ClxColorInput, ClxColorPickerFormat, ClxColorPickerSize, ClxColorResolved, ClxColorTokens, ClxCouponResult, ClxDateRange, ClxDateRangePickerSize, ClxDateRangePickerStatus, ClxDatepickerSize, ClxDatepickerStatus, ClxDrawerButtonOptions, ClxDrawerConfig, ClxDrawerRef, ClxDrawerSize, ClxEditorSize, ClxEditorTool, ClxEditorToolbarGroup, ClxExistingFile, ClxFabItem, ClxFabPosition, ClxFilterChangeEvent, ClxFilterField, ClxFilterFieldType, ClxFilterOption, ClxFilterValue, ClxFilterValues, ClxFontFamily, ClxFontOption, ClxFontWeightIntensity, ClxFontWeightPair, ClxInputSize, ClxInputStatus, ClxInputType, ClxListItem, ClxListSize, ClxListVariant, ClxModalButtonOptions, ClxModalConfig, ClxModalRef, ClxModalSize, ClxNavZoneStyle, ClxNumberSize, ClxNumberVariant, ClxPageChangeEvent, ClxPageSizeChangeEvent, ClxPaginationSize, ClxProduct, ClxProductDescription, ClxProductDetailData, ClxProductLayout, ClxProductSize, ClxProductSpec, ClxProfileMenuItem, ClxProgressBarSize, ClxProgressBarVariant, ClxRadioVariant, ClxResolvedNavZoneStyle, ClxReview, ClxRippleItem, ClxSelectOption, ClxSelectSize, ClxShade, ClxShape, ClxSize, ClxSkeletonVariant, ClxSliderSize, ClxSpecOption, ClxSpecType, ClxSpinnerColor, ClxSpinnerVariant, ClxStatMetric, ClxStepperOrientation, ClxStepperSize, ClxStepperStatus, ClxStepperStep, ClxTabItem, ClxTableColumn, ClxTablePageEvent, ClxTableSelectionEvent, ClxTableSort, ClxTableSortEvent, ClxTagShape, ClxTagSize, ClxTagVariant, ClxTextareaResize, ClxTextareaSize, ClxTextareaStatus, ClxThemeConfig, ClxThemeMode, ClxTimelineLineStyle, ClxTimelineMode, ClxTimelineSize, ClxTimepickerSize, ClxTimepickerStatus, ClxToastAction, ClxToastEntry, ClxToastOptions, ClxToastPosition, ClxToastType, ClxTooltipPosition, ClxTooltipSize, ClxTreeExpandEvent, ClxTreeNode, ClxTreeSelectEvent, ClxTreeSize, ClxTreeVariant, ClxTrendDirection, ClxUploadError, ClxUploadItemAction, ClxUploadItemActionResolver, ClxUploadPreviewItem, ClxUploadSize, ClxVariation, ClxWishlistItem, ClxWishlistPageChangeEvent, ClxWizardColor, ClxWizardOrientation, ClxWizardStepStatus, SparkPoint };