codexly-ui 0.6.19 → 0.7.0

package/assets/styles/_theme.css

@@ -6,12 +6,6 @@
 /* ── 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,11 +378,6 @@ 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',
@@ -422,7 +417,6 @@ 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 });
@@ -551,12 +545,12 @@ class ClxThemeService {
             return false;
         return this._sysDark();
     }, ...(ngDevMode ? [{ debugName: "isDark" }] : /* 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 */ []));
+    /** Resolved style for clx-nav-group labels — falls back to neutralColor/xs/500 */
+    sidebarGroupStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarGroup, this._config().neutralColor, 'xs', 500), ...(ngDevMode ? [{ debugName: "sidebarGroupStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for top-level clx-menu — falls back to primaryColor/sm/500 */
+    sidebarMenuStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarMenu, this._config().primaryColor, 'sm', 500), ...(ngDevMode ? [{ debugName: "sidebarMenuStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for clx-menu-item — falls back to primaryColor/sm/500 */
+    sidebarItemStyle = computed(() => this._resolveNavZoneStyle(this._config().sidebarItem, this._config().primaryColor, 'sm', 500), ...(ngDevMode ? [{ debugName: "sidebarItemStyle" }] : /* istanbul ignore next */ []));
     _resolveNavZoneStyle(override, defaultColor, defaultSize, defaultWeight) {
         return {
             color: override?.color ?? defaultColor,
@@ -565,11 +559,11 @@ class ClxThemeService {
         };
     }
     /** Resolved style for ClxPageHeaderComponent's title — falls back to the default
-     *  text-clx-text-label color (no override) / 2xl / emphasis */
-    pageHeaderTitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderTitle, '2xl', 'emphasis'), ...(ngDevMode ? [{ debugName: "pageHeaderTitleStyle" }] : /* istanbul ignore next */ []));
+     *  text-clx-text-label color (no override) / 2xl / 600 */
+    pageHeaderTitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderTitle, '2xl', 600), ...(ngDevMode ? [{ debugName: "pageHeaderTitleStyle" }] : /* istanbul ignore next */ []));
     /** Resolved style for ClxPageHeaderComponent's subtitle — falls back to the default
-     *  text-clx-text-muted color (no override) / sm / label */
-    pageHeaderSubtitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderSubtitle, 'sm', 'label'), ...(ngDevMode ? [{ debugName: "pageHeaderSubtitleStyle" }] : /* istanbul ignore next */ []));
+     *  text-clx-text-muted color (no override) / sm / 500 */
+    pageHeaderSubtitleStyle = computed(() => this._resolvePageHeaderZoneStyle(this._config().pageHeaderSubtitle, 'sm', 500), ...(ngDevMode ? [{ debugName: "pageHeaderSubtitleStyle" }] : /* istanbul ignore next */ []));
     _resolvePageHeaderZoneStyle(override, defaultSize, defaultWeight) {
         return {
             color: override?.color,
@@ -577,6 +571,10 @@ class ClxThemeService {
             weight: override?.weight ?? defaultWeight,
         };
     }
+    /** Resolved style for ClxCardComponent's auto-generated headerTitle — falls back to 600 */
+    cardTitleStyle = computed(() => ({
+        weight: this._config().cardTitle?.weight ?? 600,
+    }), ...(ngDevMode ? [{ debugName: "cardTitleStyle" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             if (!this._isBrowser)
@@ -596,11 +594,6 @@ 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));
@@ -653,13 +646,6 @@ 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';
@@ -1348,6 +1334,7 @@ class ClxCardComponent {
     /** 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 */ []));
+    _titleClass = computed(() => `text-sm font-[${this._themeSvc.cardTitleStyle().weight}] text-clx-text-label leading-tight truncate`, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* 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 */ []));
@@ -1399,7 +1386,7 @@ class ClxCardComponent {
             </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>
+            <p [class]="_titleClass()">{{ headerTitle() }}</p>
             @if (headerSubtitle()) {
               <p class="text-xs text-clx-text-muted leading-tight truncate">{{ headerSubtitle() }}</p>
             }
@@ -1451,7 +1438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             </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>
+            <p [class]="_titleClass()">{{ headerTitle() }}</p>
             @if (headerSubtitle()) {
               <p class="text-xs text-clx-text-muted leading-tight truncate">{{ headerSubtitle() }}</p>
             }
@@ -9651,6 +9638,8 @@ const NAV_ITEM_BASE = 'flex items-center gap-3 cursor-pointer select-none';
 // sidebar edges instead of touching them — width is `w-[calc(100%-...)]`, not `w-full`.
 const NAV_ITEM_L1 = 'w-[calc(100%-1.5rem)] mx-3 px-4 py-3';
 const NAV_ITEM_L2 = 'w-[calc(100%-1.5rem)] mx-3 pl-3 pr-3 py-2';
+// Collapsed sidebar: same breathing room, centered icon, no text.
+const NAV_ITEM_COLLAPSED = 'w-[calc(100%-1rem)] mx-2 py-3 justify-center';
 const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Nav zone size → Tailwind text-size class ─────────────────────────────────
 const NAV_ZONE_SIZE_CLASS = {
@@ -9658,19 +9647,10 @@ const NAV_ZONE_SIZE_CLASS = {
     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}`;
+/** Resolves a nav zone's configured size + weight — same typography for idle and active;
+ *  the active/selected state is distinguished by color/background, not extra weight. */
+function resolveNavZoneTypography(style) {
+    return `${NAV_ZONE_SIZE_CLASS[style.size]} font-[${style.weight}]`;
 }
 // ── Children container ─────────────────────────────────────────────────────────
 const NAV_CHILDREN_WRAPPER = 'grid transition-[grid-template-rows] duration-300 ease-in-out';
@@ -9714,12 +9694,13 @@ 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 geom = this.collapsed() ? NAV_ITEM_COLLAPSED : NAV_ITEM_L1;
         const t = resolveColor(this._color());
+        const typography = resolveNavZoneTypography(this._resolved());
         if (isActive) {
-            return `${NAV_ITEM_BASE} ${resolveNavZoneActive(this._resolved())} ${geom} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
+            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
         }
-        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${geom} ${t.hoverBgMuted} rounded-lg`;
+        return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }
     NAV_CHILDREN_WRAPPER = NAV_CHILDREN_WRAPPER;
     NAV_CHILDREN_INNER = NAV_CHILDREN_INNER;
@@ -9875,18 +9856,18 @@ class ClxMenuItemComponent {
     }, ...(ngDevMode ? [{ debugName: "_resolved" }] : /* istanbul ignore next */ []));
     _geom = computed(() => {
         if (this.collapsed())
-            return 'w-full py-3 px-0 justify-center';
+            return NAV_ITEM_COLLAPSED;
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : /* istanbul ignore next */ []));
     _iconCls = computed(() => resolveColor(this._resolved().color).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : /* istanbul ignore next */ []));
+    _typography = computed(() => resolveNavZoneTypography(this._resolved()), ...(ngDevMode ? [{ debugName: "_typography" }] : /* istanbul ignore next */ []));
     _idleCls = computed(() => {
         const hover = resolveColor(this._resolved().color).hoverBgMuted;
-        return `${NAV_ITEM_BASE} ${resolveNavZoneIdle(this._resolved())} ${this._geom()} ${hover} rounded-lg`;
+        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${hover} rounded-lg`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : /* istanbul ignore next */ []));
     _activeCls = computed(() => {
         const t = resolveColor(this._resolved().color);
-        const typography = resolveNavZoneActive(this._resolved());
-        return `${NAV_ITEM_BASE} ${typography} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
+        return `${NAV_ITEM_BASE} ${this._typography()} ${this._geom()} ${t.textSubtle} ${t.bgSubtle} rounded-lg`;
     }, ...(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 }, 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: `
@@ -9975,7 +9956,7 @@ class ClxNavGroupComponent {
         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 */ []));
+    labelClass = computed(() => `${resolveColor(this._resolved().color).textSubtle} ${resolveNavZoneTypography(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 }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
@@ -10029,10 +10010,6 @@ const TEXT_SIZE_CLASS = {
     '2xl': 'text-2xl',
     '3xl': 'text-3xl',
 };
-const WEIGHT_CLASS = {
-    label: 'font-(--clx-font-weight-label)',
-    emphasis: 'font-(--clx-font-weight-emphasis)',
-};
 /**
  * Standard page title block: an optional back button, title + optional subtitle on the
  * left, a free-content slot (button, select, badge...) on the right. Replaces the
@@ -10055,12 +10032,12 @@ class ClxPageHeaderComponent {
     _titleClass = computed(() => {
         const s = this._themeSvc.pageHeaderTitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-label';
-        return `${TEXT_SIZE_CLASS[s.size]} ${WEIGHT_CLASS[s.weight]} ${colorCls} truncate`;
+        return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} truncate`;
     }, ...(ngDevMode ? [{ debugName: "_titleClass" }] : /* istanbul ignore next */ []));
     _subtitleClass = computed(() => {
         const s = this._themeSvc.pageHeaderSubtitleStyle();
         const colorCls = s.color ? resolveColor(s.color).textSubtle : 'text-clx-text-muted';
-        return `${TEXT_SIZE_CLASS[s.size]} ${WEIGHT_CLASS[s.weight]} ${colorCls} mt-0.5`;
+        return `${TEXT_SIZE_CLASS[s.size]} font-[${s.weight}] ${colorCls} mt-0.5`;
     }, ...(ngDevMode ? [{ debugName: "_subtitleClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxPageHeaderComponent, isStandalone: true, selector: "clx-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { classAttribute: "flex items-center gap-3 flex-wrap" }, queries: [{ propertyName: "_titleSlot", first: true, predicate: ClxPageHeaderTitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -15850,5 +15827,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_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, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, 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_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, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, 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