codexly-ui 0.19.7 → 0.19.9

package/package.json

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

package/types/codexly-ui.d.ts

@@ -123,9 +123,9 @@ declare class ClxSocialIconComponent {
     readonly platform: _angular_core.InputSignal<ClxSocialPlatform>;
     readonly variant: _angular_core.InputSignal<ClxButtonVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg" | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs" | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"xxs" | "xs" | "sm" | "md" | "lg">;
+    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg" | "xxs" | "xs">;
     protected readonly _markup: _angular_core.Signal<SafeHtml>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxSocialIconComponent, never>;
@@ -148,11 +148,11 @@ declare class ClxButtonComponent {
      *  unusual background shade (bright yellow) where the variant's own resolved text color (white)
      *  reads poorly and a themed text tone is needed instead. */
     readonly textColor: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg" | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs" | undefined>;
     readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
     private readonly _tableActionsColor;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"xxs" | "xs" | "sm" | "md" | "lg">;
+    protected readonly _size: _angular_core.Signal<"sm" | "md" | "lg" | "xxs" | "xs">;
     protected readonly _shape: _angular_core.Signal<ClxShape>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly disabled: _angular_core.InputSignal<boolean>;
@@ -208,11 +208,11 @@ declare class ClxBadgeComponent {
     private readonly _themeSvc;
     readonly variant: _angular_core.InputSignal<ClxBadgeVariant>;
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
-    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | undefined>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "xs" | undefined>;
     readonly shape: _angular_core.InputSignal<ClxShape | undefined>;
     readonly positioned: _angular_core.InputSignal<boolean>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
-    protected readonly _size: _angular_core.Signal<"xs" | "sm" | "md">;
+    protected readonly _size: _angular_core.Signal<"sm" | "md" | "xs">;
     protected readonly _shape: _angular_core.Signal<ClxShape>;
     protected readonly _hostClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxBadgeComponent, never>;
@@ -294,7 +294,7 @@ declare class ClxCardComponent {
      *  product-cart-style layout) regardless of variant/color. */
     readonly border: _angular_core.InputSignal<boolean>;
     /** Per-instance border-radius override — falls back to the theme's global borderRadius when unset. */
-    readonly radius: _angular_core.InputSignal<"sm" | "md" | "lg" | "xl" | "none" | "full" | undefined>;
+    readonly radius: _angular_core.InputSignal<"none" | "sm" | "md" | "lg" | "xl" | "full" | undefined>;
     /** 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>;
@@ -304,6 +304,11 @@ declare class ClxCardComponent {
     /** Optional secondary line under headerTitle. */
     readonly headerSubtitle: _angular_core.InputSignal<string | undefined>;
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
+    /** Header icon badge: explicit [color] → theme cardIconColor → primaryColor (same fallback chain
+     *  as clx-collapse / the form controls). */
+    private readonly _iconColor;
+    protected readonly _iconWrapCls: _angular_core.Signal<string>;
+    protected readonly _iconCls: _angular_core.Signal<string>;
     protected readonly _titleClass: _angular_core.Signal<string>;
     private readonly _headerSlot;
     private readonly _headerActionsSlot;
@@ -314,7 +319,7 @@ declare class ClxCardComponent {
     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. */
-    protected readonly _disabledInteractionCls: _angular_core.Signal<"" | "pointer-events-none">;
+    protected readonly _disabledInteractionCls: _angular_core.Signal<"pointer-events-none" | "">;
     protected readonly _bodyClass: _angular_core.Signal<string>;
     protected readonly _footerClass: _angular_core.Signal<string>;
     protected readonly _hostClass: _angular_core.Signal<string>;
@@ -369,6 +374,8 @@ declare class ClxCollapseComponent {
     readonly dividerThickness: _angular_core.InputSignal<number>;
     /** Two-way bindable: [(expanded)]="..." */
     readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** Explicit [color] → theme collapseColor → primaryColor (same fallback chain as clx-input's
+     *  formControls.input). */
     protected readonly _color: _angular_core.Signal<ClxColorInput>;
     protected readonly _size: _angular_core.Signal<ClxCollapseSize>;
     protected readonly _sizeConfig: _angular_core.Signal<{
@@ -2410,6 +2417,9 @@ interface ClxThemeConfig {
     timelineTitle?: ClxTimelineTitleZoneStyle;
     /** Per-form-control accent color overrides — each falls back to primaryColor when unset */
     formControls?: ClxFormControlsTheme;
+    /** ClxCollapseComponent accent (header icon + hover tint) when no [color] is passed — falls
+     *  back to primaryColor when unset, same as each formControls entry. */
+    collapseColor?: ClxColorInput;
     /** ClxTableComponent global style override — see ClxTableTheme for per-field fallbacks */
     table?: ClxTableTheme;
     /** ClxTabsComponent global style override — see ClxTabsTheme for per-field fallbacks */
@@ -2422,6 +2432,9 @@ interface ClxThemeConfig {
     notification?: ClxNotificationTheme;
     /** ClxCardComponent border color (outlined/elevated variants) — falls back to primaryColor when unset */
     cardBorderColor?: ClxColorInput;
+    /** ClxCardComponent header icon (the [icon] badge) when no [color] is passed — falls back to
+     *  primaryColor when unset. */
+    cardIconColor?: ClxColorInput;
     /** ClxListComponent divider/border color — falls back to primaryColor when unset */
     listBorderColor?: ClxColorInput;
     /** Scrollbar thumb color (--clx-scroll/--clx-scroll-light CSS vars) — falls back to
@@ -2453,7 +2466,7 @@ declare class ClxMenuComponent implements AfterViewInit {
     readonly style: _angular_core.InputSignal<ClxNavZoneStyle | undefined>;
     protected readonly _resolved: _angular_core.Signal<{
         color: codexly_ui.ClxColorInput;
-        size: "xs" | "sm" | "md";
+        size: "sm" | "md" | "xs";
         weight: codexly_ui.ClxFontWeight;
     }>;
     protected readonly _color: _angular_core.Signal<codexly_ui.ClxColorInput>;
@@ -2587,6 +2600,8 @@ declare class ClxProfileComponent {
     readonly color: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly menuItems: _angular_core.InputSignal<ClxProfileMenuItem[]>;
     readonly signOutLabel: _angular_core.InputSignal<string>;
+    /** Small line under the sign-out item — e.g. the app version. Hidden when empty. */
+    readonly footerText: _angular_core.InputSignal<string>;
     readonly menuAction: _angular_core.OutputEmitterRef<string>;
     readonly signOut: _angular_core.OutputEmitterRef<void>;
     private readonly _themeSvc;
@@ -2609,7 +2624,7 @@ declare class ClxProfileComponent {
     protected _onAction(action: string): void;
     protected _onSignOut(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProfileComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProfileComponent, "clx-profile", never, { "firstName": { "alias": "firstName"; "required": false; "isSignal": true; }; "lastName": { "alias": "lastName"; "required": false; "isSignal": true; }; "username": { "alias": "username"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "signOutLabel": { "alias": "signOutLabel"; "required": false; "isSignal": true; }; }, { "menuAction": "menuAction"; "signOut": "signOut"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProfileComponent, "clx-profile", never, { "firstName": { "alias": "firstName"; "required": false; "isSignal": true; }; "lastName": { "alias": "lastName"; "required": false; "isSignal": true; }; "username": { "alias": "username"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; "signOutLabel": { "alias": "signOutLabel"; "required": false; "isSignal": true; }; "footerText": { "alias": "footerText"; "required": false; "isSignal": true; }; }, { "menuAction": "menuAction"; "signOut": "signOut"; }, never, never, true, never>;
 }
 
 type ClxAnimateAttentionSeeker = 'bounce' | 'flash' | 'pulse' | 'rubberBand' | 'shakeX' | 'shakeY' | 'headShake' | 'swing' | 'tada' | 'wobble' | 'jello' | 'heartBeat';
@@ -2807,7 +2822,7 @@ declare class ClxNotificationComponent {
     } | undefined>;
     readonly buttonColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly buttonVariant: _angular_core.InputSignal<ClxButtonVariant>;
-    readonly buttonSize: _angular_core.InputSignal<"xxs" | "xs" | "sm" | "md" | "lg">;
+    readonly buttonSize: _angular_core.InputSignal<"sm" | "md" | "lg" | "xxs" | "xs">;
     readonly buttonIcon: _angular_core.InputSignal<string>;
     /** Unread-count badge color — falls back to the theme's notification.unreadColor (then
      *  primaryColor) when unset. */
@@ -3366,7 +3381,7 @@ declare class ClxFabComponent {
     protected readonly _position: _angular_core.Signal<ClxFabPosition>;
     protected readonly _triggerClass: _angular_core.Signal<string>;
     /** Los botones de la pila de accesos van un paso más pequeños que el trigger. */
-    protected readonly _itemSize: _angular_core.Signal<"xxs" | "xs" | "sm">;
+    protected readonly _itemSize: _angular_core.Signal<"sm" | "xxs" | "xs">;
     private readonly _sso;
     readonly _scrollStrategy: _angular_cdk_overlay.RepositionScrollStrategy;
     readonly _positions: ConnectedPosition[];
@@ -4351,7 +4366,7 @@ declare class ClxSearchComponent implements ControlValueAccessor {
         padDefaultL: string;
         padDefaultR: string;
     }>;
-    protected readonly _buttonSize: _angular_core.Signal<"xs" | "sm" | "md" | "lg">;
+    protected readonly _buttonSize: _angular_core.Signal<"sm" | "md" | "lg" | "xs">;
     protected readonly _wrapperClass: _angular_core.Signal<string>;
     protected readonly _inputClass: _angular_core.Signal<string>;
     writeValue(val: string): void;
@@ -4577,6 +4592,7 @@ declare class ClxThemeService {
     /** Resolved border color for ClxCardComponent (outlined/elevated variants) — falls back to
      *  primaryColor when unset. Per-instance `[color]` input on clx-card still takes precedence. */
     readonly cardBorderColor: _angular_core.Signal<ClxColorInput>;
+    readonly cardIconColor: _angular_core.Signal<ClxColorInput>;
     /** Resolved divider/border color for ClxListComponent — falls back to primaryColor when unset.
      *  Per-instance `[color]` input on clx-list still takes precedence. */
     readonly listBorderColor: _angular_core.Signal<ClxColorInput>;