codexly-ui 0.12.15 → 0.12.17

package/fesm2022/codexly-ui.mjs

@@ -15346,6 +15346,9 @@ class ClxProductComponent {
      *  variant="ghost" (text tinted at textSubtle strength, not a solid fill), so contrast risk is
      *  low, but this is still exposed for full parity with clx-product-detail/clx-wishlist. */
     actionTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "actionTextColor" }] : /* istanbul ignore next */ []));
+    /** Card drop shadow — same ClxCardShadow scale as clx-card ('none' turns it off entirely).
+     *  Falls back to 'sm', the shadow this card has always rendered with. */
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     imageFit = input('cover', ...(ngDevMode ? [{ debugName: "imageFit" }] : /* istanbul ignore next */ []));
     addToCart = output();
     addToWishlist = output();
@@ -15369,9 +15372,10 @@ class ClxProductComponent {
      *  so a host that pins clxColor to a one-off brand accent doesn't also drag the card border
      *  along with it. */
     _cardClass = computed(() => {
+        const shadowCls = CARD_SHADOW_MAP[this.shadow() ?? 'sm'];
         const hover = this._disabled() ? '' : 'hover:shadow-md hover:-translate-y-0.5';
         const t = resolveColor(this._themeSvc.cardBorderColor());
-        return `bg-clx-surface rounded-2xl shadow-sm border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group ${hover} ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`;
+        return `bg-clx-surface rounded-2xl ${shadowCls} border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group ${hover} ${this._h() ? 'flex flex-col sm:flex-row' : 'flex flex-col'}`;
     }, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
     _imageContainerClass = computed(() => this._h()
         ? `relative shrink-0 w-full aspect-square sm:aspect-auto ${this._sm() ? 'sm:w-32' : 'sm:w-44'} overflow-hidden rounded-t-2xl sm:rounded-t-none sm:rounded-l-2xl`
@@ -15403,7 +15407,7 @@ class ClxProductComponent {
         return `${sz} font-bold ${color}`;
     }, ...(ngDevMode ? [{ debugName: "_priceClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxProductComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, actionTextColor: { classPropertyName: "actionTextColor", publicName: "actionTextColor", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist", viewOptions: "viewOptions" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxProductComponent, isStandalone: true, selector: "clx-product", inputs: { product: { classPropertyName: "product", publicName: "product", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, actionTextColor: { classPropertyName: "actionTextColor", publicName: "actionTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, imageFit: { classPropertyName: "imageFit", publicName: "imageFit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addToCart: "addToCart", addToWishlist: "addToWishlist", viewOptions: "viewOptions" }, ngImport: i0, template: `
     @if (loading()) {
       @if (_h()) {
         <!-- Skeleton Horizontal -->
@@ -15673,7 +15677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], actionTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTextColor", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }], viewOptions: [{ type: i0.Output, args: ["viewOptions"] }] } });
+        }], propDecorators: { product: [{ type: i0.Input, args: [{ isSignal: true, alias: "product", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clxColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "clxColor", required: false }] }], actionTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], imageFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageFit", required: false }] }], addToCart: [{ type: i0.Output, args: ["addToCart"] }], addToWishlist: [{ type: i0.Output, args: ["addToWishlist"] }], viewOptions: [{ type: i0.Output, args: ["viewOptions"] }] } });
 
 class ClxProductDetailComponent {
     product = input(null, ...(ngDevMode ? [{ debugName: "product" }] : /* istanbul ignore next */ []));
@@ -16024,6 +16028,9 @@ class ClxWishlistComponent {
     /** Text color for each item's own "Añadir al carrito" (variant="solid") — independent of
      *  `color`, same rationale as checkoutAllTextColor. */
     addToCartTextColor = input(undefined, ...(ngDevMode ? [{ debugName: "addToCartTextColor" }] : /* istanbul ignore next */ []));
+    /** Product card drop shadow — same ClxCardShadow scale as clx-card ('none' turns it off
+     *  entirely). Falls back to 'sm', the shadow these cards have always rendered with. */
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     sortOptions = input(WISHLIST_SORT_OPTIONS, ...(ngDevMode ? [{ debugName: "sortOptions" }] : /* istanbul ignore next */ []));
     currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     pageSize = model(WISHLIST_PAGE_SIZE_DEFAULT, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
@@ -16050,7 +16057,8 @@ class ClxWishlistComponent {
      *  along with it. */
     _cardClass = computed(() => {
         const t = resolveColor(this._themeSvc.cardBorderColor());
-        return `bg-clx-surface rounded-2xl shadow-sm border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group hover:shadow-md hover:-translate-y-0.5 flex flex-col sm:flex-row`;
+        const shadowCls = CARD_SHADOW_MAP[this.shadow() ?? 'sm'];
+        return `bg-clx-surface rounded-2xl ${shadowCls} border ${t.borderLight} transition-[box-shadow,transform] duration-200 overflow-hidden group hover:shadow-md hover:-translate-y-0.5 flex flex-col sm:flex-row`;
     }, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
     _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';
     _imageClass = 'w-full h-full object-cover transition-transform duration-500 group-hover:scale-105';
@@ -16121,7 +16129,7 @@ class ClxWishlistComponent {
         this.onCheckoutAll.emit(this._filtered());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxWishlistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWishlistComponent, isStandalone: true, selector: "clx-wishlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllTextColor: { classPropertyName: "checkoutAllTextColor", publicName: "checkoutAllTextColor", isSignal: true, isRequired: false, transformFunction: null }, addToCartTextColor: { classPropertyName: "addToCartTextColor", publicName: "addToCartTextColor", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", sortValue: "sortValueChange", searchValue: "searchValueChange", onRemove: "onRemove", onAddToCart: "onAddToCart", onSearchChange: "onSearchChange", onSortChange: "onSortChange", onPageChange: "onPageChange", onCheckoutAll: "onCheckoutAll", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxWishlistComponent, isStandalone: true, selector: "clx-wishlist", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, checkoutAllTextColor: { classPropertyName: "checkoutAllTextColor", publicName: "checkoutAllTextColor", isSignal: true, isRequired: false, transformFunction: null }, addToCartTextColor: { classPropertyName: "addToCartTextColor", publicName: "addToCartTextColor", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, sortValue: { classPropertyName: "sortValue", publicName: "sortValue", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", pageSize: "pageSizeChange", sortValue: "sortValueChange", searchValue: "searchValueChange", onRemove: "onRemove", onAddToCart: "onAddToCart", onSearchChange: "onSearchChange", onSortChange: "onSortChange", onPageChange: "onPageChange", onCheckoutAll: "onCheckoutAll", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
     <div class="flex flex-col gap-6">
 
       @if (loading() || items().length > 0) {
@@ -16524,7 +16532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checkoutAllTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllTextColor", required: false }] }], addToCartTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "addToCartTextColor", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddToCart: [{ type: i0.Output, args: ["onAddToCart"] }], onSearchChange: [{ type: i0.Output, args: ["onSearchChange"] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onCheckoutAll: [{ type: i0.Output, args: ["onCheckoutAll"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], checkoutAllTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkoutAllTextColor", required: false }] }], addToCartTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "addToCartTextColor", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], sortOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOptions", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], sortValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortValue", required: false }] }, { type: i0.Output, args: ["sortValueChange"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onAddToCart: [{ type: i0.Output, args: ["onAddToCart"] }], onSearchChange: [{ type: i0.Output, args: ["onSearchChange"] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }], onCheckoutAll: [{ type: i0.Output, args: ["onCheckoutAll"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
 
 class ClxCartComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -16537,7 +16545,27 @@ class ClxCartComponent {
      *  showing a code input that always fails would read as broken, not "not built yet". */
     showCoupon = input(true, ...(ngDevMode ? [{ debugName: "showCoupon" }] : /* istanbul ignore next */ []));
     coupon = model(null, ...(ngDevMode ? [{ debugName: "coupon" }] : /* istanbul ignore next */ []));
+    /** Drop shadow for the item cards and Order Summary panel — same ClxCardShadow scale as
+     *  clx-card ('none' turns it off entirely). Falls back to 'sm', the shadow these have always
+     *  rendered with. */
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
+    _themeSvc = inject(ClxThemeService);
     _quantityColor = computed(() => this.quantityColor() ?? this.color(), ...(ngDevMode ? [{ debugName: "_quantityColor" }] : /* istanbul ignore next */ []));
+    /** Item cards — was bg-clx-surface + shadow-sm with NO border at all (unlike clx-product/
+     *  clx-wishlist, which already read cardBorderColor). Now consistent: themed border +
+     *  configurable shadow, same borderLight treatment as clx-card's own elevated variant. */
+    _cardClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        const shadowCls = CARD_SHADOW_MAP[this.shadow() ?? 'sm'];
+        return `bg-clx-surface rounded-2xl ${shadowCls} border ${t.borderLight} flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-200 hover:shadow-md hover:-translate-y-0.5`;
+    }, ...(ngDevMode ? [{ debugName: "_cardClass" }] : /* istanbul ignore next */ []));
+    /** Order Summary panel — same border/shadow treatment as _cardClass, but no hover lift (it's a
+     *  static panel, not a clickable card). */
+    _summaryClass = computed(() => {
+        const t = resolveColor(this._themeSvc.cardBorderColor());
+        const shadowCls = CARD_SHADOW_MAP[this.shadow() ?? 'sm'];
+        return `bg-clx-surface rounded-2xl ${shadowCls} border ${t.borderLight} p-5 flex flex-col gap-4`;
+    }, ...(ngDevMode ? [{ debugName: "_summaryClass" }] : /* istanbul ignore next */ []));
     onRemove = output();
     onQuantityChange = output();
     onClearCart = output();
@@ -16573,7 +16601,7 @@ class ClxCartComponent {
         this.coupon.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCartComponent, isStandalone: true, selector: "clx-cart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, quantityColor: { classPropertyName: "quantityColor", publicName: "quantityColor", isSignal: true, isRequired: false, transformFunction: null }, showCoupon: { classPropertyName: "showCoupon", publicName: "showCoupon", isSignal: true, isRequired: false, transformFunction: null }, coupon: { classPropertyName: "coupon", publicName: "coupon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coupon: "couponChange", onRemove: "onRemove", onQuantityChange: "onQuantityChange", onClearCart: "onClearCart", onApplyCoupon: "onApplyCoupon", onCheckout: "onCheckout", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCartComponent, isStandalone: true, selector: "clx-cart", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, quantityColor: { classPropertyName: "quantityColor", publicName: "quantityColor", isSignal: true, isRequired: false, transformFunction: null }, showCoupon: { classPropertyName: "showCoupon", publicName: "showCoupon", isSignal: true, isRequired: false, transformFunction: null }, coupon: { classPropertyName: "coupon", publicName: "coupon", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { coupon: "couponChange", onRemove: "onRemove", onQuantityChange: "onQuantityChange", onClearCart: "onClearCart", onApplyCoupon: "onApplyCoupon", onCheckout: "onCheckout", onBrowseCatalog: "onBrowseCatalog" }, ngImport: i0, template: `
     <!-- ── Loading ─────────────────────────────────────────────────────────────── -->
     @if (loading()) {
 
@@ -16637,7 +16665,7 @@ class ClxCartComponent {
 
           <!-- Item cards -->
           @for (item of items(); track item.id) {
-            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-200 hover:shadow-md hover:-translate-y-0.5">
+            <article [class]="_cardClass()">
 
               <!-- Image — fixed square -->
               <div class="relative shrink-0 w-28 h-28 p-2.5 lg:w-36 lg:h-36 overflow-hidden">
@@ -16737,7 +16765,7 @@ class ClxCartComponent {
         <!-- ══ RIGHT — Order Summary ══════════════════════════════════════════════ -->
         <aside class="w-full lg:w-80 shrink-0 lg:sticky lg:top-6 flex flex-col gap-4">
 
-          <div class="bg-clx-surface rounded-2xl shadow-sm p-5 flex flex-col gap-4">
+          <div [class]="_summaryClass()">
             <h2 class="text-base font-semibold text-clx-text-label">Order Summary</h2>
 
             <!-- Coupon -->
@@ -16918,7 +16946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
           <!-- Item cards -->
           @for (item of items(); track item.id) {
-            <article class="bg-clx-surface rounded-2xl shadow-sm flex gap-0 overflow-hidden group transition-[box-shadow,transform] duration-200 hover:shadow-md hover:-translate-y-0.5">
+            <article [class]="_cardClass()">
 
               <!-- Image — fixed square -->
               <div class="relative shrink-0 w-28 h-28 p-2.5 lg:w-36 lg:h-36 overflow-hidden">
@@ -17018,7 +17046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <!-- ══ RIGHT — Order Summary ══════════════════════════════════════════════ -->
         <aside class="w-full lg:w-80 shrink-0 lg:sticky lg:top-6 flex flex-col gap-4">
 
-          <div class="bg-clx-surface rounded-2xl shadow-sm p-5 flex flex-col gap-4">
+          <div [class]="_summaryClass()">
             <h2 class="text-base font-semibold text-clx-text-label">Order Summary</h2>
 
             <!-- Coupon -->
@@ -17117,7 +17145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], quantityColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantityColor", required: false }] }], showCoupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCoupon", required: false }] }], coupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "coupon", required: false }] }, { type: i0.Output, args: ["couponChange"] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onQuantityChange: [{ type: i0.Output, args: ["onQuantityChange"] }], onClearCart: [{ type: i0.Output, args: ["onClearCart"] }], onApplyCoupon: [{ type: i0.Output, args: ["onApplyCoupon"] }], onCheckout: [{ type: i0.Output, args: ["onCheckout"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], quantityColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "quantityColor", required: false }] }], showCoupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCoupon", required: false }] }], coupon: [{ type: i0.Input, args: [{ isSignal: true, alias: "coupon", required: false }] }, { type: i0.Output, args: ["couponChange"] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], onQuantityChange: [{ type: i0.Output, args: ["onQuantityChange"] }], onClearCart: [{ type: i0.Output, args: ["onClearCart"] }], onApplyCoupon: [{ type: i0.Output, args: ["onApplyCoupon"] }], onCheckout: [{ type: i0.Output, args: ["onCheckout"] }], onBrowseCatalog: [{ type: i0.Output, args: ["onBrowseCatalog"] }] } });
 
 class ClxCartSummaryDrawer {
     data = inject(CLX_MODAL_DATA);