codexly-ui 0.12.9 → 0.12.11

package/package.json

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

package/types/codexly-ui.d.ts

@@ -3322,8 +3322,12 @@ declare class ClxProductComponent {
     protected readonly _buttonSize: _angular_core.Signal<"sm" | "md">;
     protected readonly _skeletonW: _angular_core.Signal<"sm:w-32" | "sm:w-44">;
     protected readonly _skeletonH: _angular_core.Signal<"160px" | "200px">;
-    /** Themed border — same accent as the rest of the card (clxColor), same borderLight treatment
-     *  as clx-card's own elevated variant. */
+    private readonly _themeSvc;
+    /** Themed border — deliberately independent from clxColor (which drives the wishlist heart,
+     *  "Añadir al carrito" button, price accent, etc). Always resolves from the theme's
+     *  cardBorderColor (falling back to primaryColor), same as clx-card's own elevated variant —
+     *  so a host that pins clxColor to a one-off brand accent doesn't also drag the card border
+     *  along with it. */
     protected readonly _cardClass: _angular_core.Signal<string>;
     protected readonly _imageContainerClass: _angular_core.Signal<string>;
     protected readonly _imageClass: _angular_core.Signal<string>;
@@ -3432,6 +3436,12 @@ declare class ClxProductDetailComponent {
      *  clxColor() when not set, so existing consumers are unaffected. */
     readonly actionColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     protected readonly _actionColor: _angular_core.Signal<ClxColorInput>;
+    /** Text color for the same three CTAs (Comprar ahora / Agrega al carrito / Dejar una reseña) —
+     *  independent of actionColor, same rationale as clx-button's own [textColor]: a saturated
+     *  actionColor (e.g. brand yellow) can force a background where the auto-resolved white/dark-800
+     *  contrast text still reads poorly, and this lets a host pin the exact text tone instead.
+     *  Undefined (the default) leaves each button's own automatic contrast resolution untouched. */
+    readonly actionTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     /** Optional override for the floating wishlist (heart) button on the gallery — same rationale
      *  as actionColor: a saturated brand color that works as a small accent elsewhere can look wrong
      *  as a solid filled circle. Falls back to clxColor()/'solid' when not set. */
@@ -3449,6 +3459,11 @@ declare class ClxProductDetailComponent {
     protected readonly _discountBadgeColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _specButtonColor: _angular_core.Signal<ClxColorInput>;
     protected readonly _quantityColor: _angular_core.Signal<ClxColorInput>;
+    /** Text color for the spec option buttons (Talla/Material/etc — not the color-swatch spec type,
+     *  which uses opt.value as an inline background and has no clx-button text to color). Same
+     *  rationale as actionTextColor: independent of specButtonColor, undefined leaves clx-button's
+     *  own automatic contrast resolution untouched. */
+    readonly specButtonTextColor: _angular_core.InputSignal<ClxColorInput | undefined>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly currency: _angular_core.InputSignal<string>;
     /** Hides the tabs (Características/Especificaciones/Descripción) and the Reviews section —
@@ -3540,7 +3555,7 @@ declare class ClxProductDetailComponent {
     specsLeft<T>(specs: T[]): T[];
     specsRight<T>(specs: T[]): T[];
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClxProductDetailComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "initialVariationId": { "alias": "initialVariationId"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "actionColor": { "alias": "actionColor"; "required": false; "isSignal": true; }; "wishlistColor": { "alias": "wishlistColor"; "required": false; "isSignal": true; }; "wishlistVariant": { "alias": "wishlistVariant"; "required": false; "isSignal": true; }; "stockBadgeColor": { "alias": "stockBadgeColor"; "required": false; "isSignal": true; }; "discountBadgeColor": { "alias": "discountBadgeColor"; "required": false; "isSignal": true; }; "specButtonColor": { "alias": "specButtonColor"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ClxProductDetailComponent, "clx-product-detail", never, { "product": { "alias": "product"; "required": false; "isSignal": true; }; "initialVariationId": { "alias": "initialVariationId"; "required": false; "isSignal": true; }; "clxColor": { "alias": "clxColor"; "required": false; "isSignal": true; }; "actionColor": { "alias": "actionColor"; "required": false; "isSignal": true; }; "actionTextColor": { "alias": "actionTextColor"; "required": false; "isSignal": true; }; "wishlistColor": { "alias": "wishlistColor"; "required": false; "isSignal": true; }; "wishlistVariant": { "alias": "wishlistVariant"; "required": false; "isSignal": true; }; "stockBadgeColor": { "alias": "stockBadgeColor"; "required": false; "isSignal": true; }; "discountBadgeColor": { "alias": "discountBadgeColor"; "required": false; "isSignal": true; }; "specButtonColor": { "alias": "specButtonColor"; "required": false; "isSignal": true; }; "quantityColor": { "alias": "quantityColor"; "required": false; "isSignal": true; }; "specButtonTextColor": { "alias": "specButtonTextColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, { "addToCart": "addToCart"; "buyNow": "buyNow"; "wishlist": "wishlist"; "variationChange": "variationChange"; "leaveReview": "leaveReview"; }, never, never, true, never>;
 }
 
 interface ClxProductQuickViewData {
@@ -3618,8 +3633,11 @@ declare class ClxWishlistComponent {
     /** Emitted from the empty-state's "Ir a la tienda" CTA — the host navigates to the catalog. */
     readonly onBrowseCatalog: _angular_core.OutputEmitterRef<void>;
     readonly _skeletonItems: unknown[];
-    /** Themed border — falls back to cardBorderColor() (itself falling back to primaryColor) when
-     *  `color` is unset, same borderLight treatment as clx-card's own elevated variant. */
+    /** Themed border — deliberately independent from `color` (which drives the search input,
+     *  "Agregar todo al carrito" button, "Añadir al carrito" per-item button, etc). Always resolves
+     *  from the theme's cardBorderColor (falling back to primaryColor), same as clx-card's own
+     *  elevated variant — so a host passing an explicit `color` doesn't also drag the card border
+     *  along with it. */
     protected readonly _cardClass: _angular_core.Signal<string>;
     protected readonly _imageContainerClass = "relative shrink-0 w-full p-2.5 aspect-square sm:aspect-auto sm:w-40 overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl";
     protected readonly _imageClass = "w-full h-full object-cover transition-transform duration-500 group-hover:scale-105";