igniteui-angular 19.2.0-alpha.2 → 19.2.0-rc.0

package/lib/calendar/calendar.component.d.ts

@@ -317,8 +317,8 @@ export declare class IgxCalendarComponent extends IgxCalendarBaseDirective imple
     protected get activeDescendant(): number;
     protected set activeDescendant(date: Date);
     ngAfterViewInit(): void;
-    private onWrapperFocus;
-    private onWrapperBlur;
+    protected onWrapperFocus(_event: FocusEvent): void;
+    protected onWrapperBlur(_event: FocusEvent): void;
     private handleArrowKeydown;
     private handlePageUpDown;
     private handlePageUp;

package/lib/calendar/month-picker/month-picker.component.d.ts

@@ -112,8 +112,8 @@ export declare class IgxMonthPickerComponent extends IgxCalendarBaseDirective im
     get isDefaultView(): boolean;
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    private onWrapperFocus;
-    private onWrapperBlur;
+    protected onWrapperFocus(event: FocusEvent): void;
+    protected onWrapperBlur(event: FocusEvent): void;
     private handlePageUpDown;
     private handlePageUp;
     private handlePageDown;

package/lib/carousel/carousel-base.d.ts

@@ -1,7 +1,8 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, InjectionToken } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
-import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
+import { CarouselAnimationType } from './enums';
+import * as i0 from "@angular/core";
 export declare enum Direction {
     NONE = 0,
     NEXT = 1,
@@ -11,42 +12,13 @@ export interface CarouselAnimationSettings {
     enterAnimation: AnimationReferenceMetadata;
     leaveAnimation: AnimationReferenceMetadata;
 }
-export interface ICarouselComponentBase {
-    id: string;
-    role: string;
-    cssClass: string;
-    loop: boolean;
-    pause: boolean;
-    navigation: boolean;
-    indicators: boolean;
-    vertical: boolean;
-    keyboardSupport: boolean;
-    gesturesSupport: boolean;
-    maximumIndicatorsCount: number;
-    indicatorsOrientation: CarouselIndicatorsOrientation;
-    animationType: CarouselAnimationType;
-    total: number;
-    current: number;
-    interval: number;
-    slideChanged: EventEmitter<any>;
-    slideAdded: EventEmitter<any>;
-    slideRemoved: EventEmitter<any>;
-    carouselPaused: EventEmitter<any>;
-    carouselPlaying: EventEmitter<any>;
-    next(): void;
-    prev(): void;
-    play(): void;
-    stop(): void;
-}
-/** @hidden */
-export declare const IGX_CAROUSEL_COMPONENT: InjectionToken<ICarouselComponentBase>;
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;
     previous: boolean;
 }
 /** @hidden */
-export declare abstract class IgxCarouselComponentBase {
+export declare abstract class IgxCarouselComponentBase implements OnDestroy {
     private animationService;
     protected cdr: ChangeDetectorRef;
     /** @hidden */
@@ -72,6 +44,7 @@ export declare abstract class IgxCarouselComponentBase {
     /** @hidden */
     protected vertical: boolean;
     constructor(animationService: AnimationService, cdr: ChangeDetectorRef);
+    ngOnDestroy(): void;
     /** @hidden */
     protected triggerAnimations(): void;
     /** @hidden */
@@ -84,4 +57,6 @@ export declare abstract class IgxCarouselComponentBase {
     private playLeaveAnimation;
     protected abstract getPreviousElement(): HTMLElement;
     protected abstract getCurrentElement(): HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselComponentBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<IgxCarouselComponentBase, never, never, {}, {}, never, never, true, never>;
 }

package/lib/carousel/carousel.component.d.ts

@@ -3,7 +3,7 @@ import { HammerGestureConfig } from '@angular/platform-browser';
 import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { IBaseEventArgs, PlatformUtil } from '../core/utils';
 import { AnimationService } from '../services/animation/animation';
-import { Direction, ICarouselComponentBase, IgxCarouselComponentBase } from './carousel-base';
+import { Direction, IgxCarouselComponentBase } from './carousel-base';
 import { IgxSlideComponent } from './slide.component';
 import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
 import { IgxDirectionality } from '../services/direction/directionality';
@@ -38,7 +38,7 @@ export declare class CarouselHammerConfig extends HammerGestureConfig {
  * </igx-carousel>
  * ```
  */
-export declare class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit {
+export declare class IgxCarouselComponent extends IgxCarouselComponentBase implements OnDestroy, AfterContentInit {
     private element;
     private iterableDiffers;
     private platformUtil;
@@ -135,17 +135,6 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
      * @memberOf IgxCarouselComponent
      */
     vertical: boolean;
-    /**
-     * Controls whether the carousel should support keyboard navigation.
-     * Default value is `false`.
-     * ```html
-     * <igx-carousel [keyboardSupport]="true"></igx-carousel>
-     * ```
-     *
-     * @memberOf IgxCarouselComponent
-     * @deprecated in version 18.2.0.
-     */
-    keyboardSupport: boolean;
     /**
      * Controls whether the carousel should support gestures.
      * Default value is `true`.
@@ -421,16 +410,8 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     set interval(value: number);
     constructor(cdr: ChangeDetectorRef, element: ElementRef, iterableDiffers: IterableDiffers, animationService: AnimationService, platformUtil: PlatformUtil, dir: IgxDirectionality, document: any);
     /** @hidden */
-    onKeydownArrowRight(event: any): void;
-    /** @hidden */
-    onKeydownArrowLeft(event: any): void;
-    /** @hidden */
     onTap(event: any): void;
     /** @hidden */
-    onKeydownHome(event: any): void;
-    /** @hidden */
-    onKeydownEnd(event: any): void;
-    /** @hidden */
     onMouseEnter(): void;
     /** @hidden */
     onMouseLeave(): void;
@@ -547,7 +528,6 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     /** @hidden */
     get prevButtonDisabled(): boolean;
     private get indicatorsElements();
-    private focusElement;
     private getIndicatorsClass;
     private getNextIndex;
     private getPrevIndex;
@@ -558,15 +538,13 @@ export declare class IgxCarouselComponent extends IgxCarouselComponentBase imple
     private finishAnimations;
     private initSlides;
     private updateSlidesSelection;
-    private focusSlideElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<IgxCarouselComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCarouselComponent, "igx-carousel", never, { "id": { "alias": "id"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "pause": { "alias": "pause"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "indicators": { "alias": "indicators"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "keyboardSupport": { "alias": "keyboardSupport"; "required": false; }; "gesturesSupport": { "alias": "gesturesSupport"; "required": false; }; "maximumIndicatorsCount": { "alias": "maximumIndicatorsCount"; "required": false; }; "indicatorsOrientation": { "alias": "indicatorsOrientation"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; }, { "slideChanged": "slideChanged"; "slideAdded": "slideAdded"; "slideRemoved": "slideRemoved"; "carouselPaused": "carouselPaused"; "carouselPlaying": "carouselPlaying"; }, ["indicatorTemplate", "nextButtonTemplate", "prevButtonTemplate", "slides"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IgxCarouselComponent, "igx-carousel", never, { "id": { "alias": "id"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "pause": { "alias": "pause"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "indicators": { "alias": "indicators"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "gesturesSupport": { "alias": "gesturesSupport"; "required": false; }; "maximumIndicatorsCount": { "alias": "maximumIndicatorsCount"; "required": false; }; "indicatorsOrientation": { "alias": "indicatorsOrientation"; "required": false; }; "animationType": { "alias": "animationType"; "required": false; }; "resourceStrings": { "alias": "resourceStrings"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; }, { "slideChanged": "slideChanged"; "slideAdded": "slideAdded"; "slideRemoved": "slideRemoved"; "carouselPaused": "carouselPaused"; "carouselPlaying": "carouselPlaying"; }, ["indicatorTemplate", "nextButtonTemplate", "prevButtonTemplate", "slides"], ["*"], true, never>;
     static ngAcceptInputType_loop: unknown;
     static ngAcceptInputType_pause: unknown;
     static ngAcceptInputType_navigation: unknown;
     static ngAcceptInputType_indicators: unknown;
     static ngAcceptInputType_vertical: unknown;
-    static ngAcceptInputType_keyboardSupport: unknown;
     static ngAcceptInputType_gesturesSupport: unknown;
 }
 export interface ISlideEventArgs extends IBaseEventArgs {

package/lib/carousel/slide.component.d.ts

@@ -1,6 +1,6 @@
 import { OnDestroy, EventEmitter, ElementRef, AfterContentChecked } from '@angular/core';
 import { Subject } from 'rxjs';
-import { Direction, ICarouselComponentBase, IgxSlideComponentBase } from './carousel-base';
+import { Direction, IgxSlideComponentBase } from './carousel-base';
 import * as i0 from "@angular/core";
 /**
  * A slide component that usually holds an image and/or a caption text.
@@ -16,7 +16,6 @@ import * as i0 from "@angular/core";
  */
 export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase {
     private elementRef;
-    private carousel;
     /**
      * Gets/sets the `index` of the slide inside the carousel.
      * ```html
@@ -47,6 +46,7 @@ export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy
      * ```
      *
      * @memberof IgxSlideComponent
+     * @deprecated in version 19.2.0.
      */
     get tabIndex(): number;
     /**
@@ -97,7 +97,7 @@ export declare class IgxSlideComponent implements AfterContentChecked, OnDestroy
     activeChange: EventEmitter<boolean>;
     private _active;
     private _destroy$;
-    constructor(elementRef: ElementRef, carousel: ICarouselComponentBase);
+    constructor(elementRef: ElementRef);
     /**
      * Returns a reference to the carousel element in the DOM.
      * ```typescript

package/lib/checkbox/checkbox-base.directive.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementRef, ChangeDetectorRef, Renderer2, DestroyRef, AfterViewInit } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, DestroyRef, AfterViewInit } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { IBaseEventArgs } from '../core/utils';
 import { Subject } from 'rxjs';
@@ -15,7 +15,6 @@ export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
 }
 export declare class CheckboxBaseDirective implements AfterViewInit {
     protected cdr: ChangeDetectorRef;
-    protected renderer: Renderer2;
     protected themeToken: ThemeToken;
     ngControl: NgControl;
     /**
@@ -185,7 +184,7 @@ export declare class CheckboxBaseDirective implements AfterViewInit {
      * ```
      */
     ariaLabel: string | null;
-    constructor(cdr: ChangeDetectorRef, renderer: Renderer2, themeToken: ThemeToken, ngControl: NgControl);
+    constructor(cdr: ChangeDetectorRef, themeToken: ThemeToken, ngControl: NgControl);
     /**
      * Sets/gets whether the checkbox is required.
      * If not set, `required` will have value `false`.
@@ -274,7 +273,7 @@ export declare class CheckboxBaseDirective implements AfterViewInit {
      * @internal
      */
     private checkNativeValidity;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxBaseDirective, [null, null, null, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxBaseDirective, [null, null, { optional: true; self: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CheckboxBaseDirective, never, never, { "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelId": { "alias": "labelId"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "ariaLabelledBy": { "alias": "aria-labelledby"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_disableRipple: unknown;

package/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -200,5 +200,11 @@
         igx-icon {
             color: var-get($theme, 'delete-action');
         }
+
+        [igxIconButton] {
+            igx-icon {
+                color: var-get($theme, 'delete-action');
+            }
+        }
     }
 }

package/lib/core/styles/components/calendar/_calendar-component.scss

@@ -179,6 +179,10 @@
             @extend %date-range-preview !optional;
         }
 
+        @include e(date, $mods: ('range-preview', 'inactive')) {
+            @extend %date-range-preview-inactive !optional;
+        }
+
         @include e(date, $mods: ('range-preview', 'current')) {
             @extend %date-range-preview-current !optional;
         }
@@ -389,6 +393,18 @@
             @extend %date-last-preview-special !optional;
         }
 
+        @include e(date, $mods: ('first', 'range-preview', 'active')) {
+            @extend %date-first-preview-active !optional;
+        }
+
+        @include e(date, $mods: ('last', 'range-preview', 'active')) {
+            @extend %date-last-preview-active !optional;
+        }
+
+        @include e(date, $mods: ('first', 'last', 'selected')) {
+            @extend %date-first-last-selected !optional;
+        }
+
         @include e(date, $mods: ('first', 'range-preview', 'special', 'current')) {
             @extend %date-first-preview-special-current !optional;
         }

package/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -108,10 +108,6 @@
 /// @param {Color} $date-selected-current-range-focus-foreground [null] - The :focus foreground of the current date in the selected range.
 /// @param {Color} $date-selected-current-range-focus-background [null] - The :focus background of the current date in the selected range.
 ///
-/// @param {Color} $date-selected-current-outline [null] - The outline of the current selected date.
-/// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
-/// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
-///
 /// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
 /// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
 /// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
@@ -137,8 +133,6 @@
 /// @param {Color} $date-special-range-foreground [null] - The foreground of the dates inside a range and marked as special.
 /// @param {Color} $date-special-range-border-color [null] - The outline of the dates inside a range and marked as special.
 ///
-/// @param {Color} $date-special-current-border-color [null] - The outline color of a special current date.
-///
 /// @param {Color} $border-color [null] - The calendar border color.
 ///
 /// @param {Color} $date-border-color [null] - The border color of the date.
@@ -282,10 +276,6 @@
     $date-selected-current-hover-border-color: null,
     $date-selected-current-focus-border-color: null,
 
-    $date-selected-current-outline: null,
-    $date-selected-current-hover-outline: null,
-    $date-selected-current-focus-outline: null,
-
     $date-selected-special-border-color: null,
     $date-selected-special-hover-border-color: null,
     $date-selected-special-focus-border-color: null,
@@ -310,7 +300,6 @@
     $date-special-range-focus-background: null,
     $date-special-range-foreground: null,
     $date-special-range-border-color: null,
-    $date-special-current-border-color: null,
     $date-disabled-foreground: null,
     $date-disabled-range-foreground: null,
 
@@ -400,26 +389,6 @@
         }
     }
 
-    @if $variant == 'material' or $variant == 'indigo' {
-        @if not($date-selected-current-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-outline: $content-background;
-            }
-        }
-
-        @if not($date-selected-current-hover-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-hover-outline: $content-background;
-            }
-        }
-
-        @if not($date-selected-current-focus-outline) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-selected-current-focus-outline: $content-background;
-            }
-        }
-    }
-
     @if not($content-foreground) and $content-background {
         @if meta.type-of($content-background) == 'color' {
             $content-foreground: text-contrast($content-background);
@@ -640,10 +609,6 @@
         date-selected-current-hover-foreground: $date-selected-current-hover-foreground,
         date-selected-current-focus-foreground: $date-selected-current-focus-foreground,
 
-        date-selected-current-outline: $date-selected-current-outline,
-        date-selected-current-hover-outline: $date-selected-current-hover-outline,
-        date-selected-current-focus-outline: $date-selected-current-focus-outline,
-
         date-selected-special-border-color: $date-selected-special-border-color,
         date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
         date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
@@ -1578,7 +1543,9 @@
     %date-selected-special-active {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                }
             }
         }
     }
@@ -1641,7 +1608,9 @@
     %date-selected-special-current-first-last {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1814,7 +1783,9 @@
     %date-special-current-selected-active {
         %date-inner {
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
             }
         }
     }
@@ -1887,6 +1858,16 @@
         }
     }
 
+    @if $variant == 'fluent' {
+        %date-selected-current-special {
+            %date-inner {
+                &::after {
+                    border-color: var-get($theme, 'date-selected-current-background');
+                }
+            }
+        }
+    }
+
     %date-inactive {
         cursor: default;
 
@@ -2042,7 +2023,7 @@
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
     %date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
         %date-inner {
-            @if not $bootstrap-theme {
+            @if not $bootstrap-theme and not $variant == 'fluent' {
                 color: var-get($theme, 'date-special-focus-foreground');
             }
 
@@ -2192,7 +2173,6 @@
             position: absolute;
             height: $date-size;
             width: $date-size;
-            border-radius: var-get($theme, 'date-border-radius');
         }
     }
 
@@ -2218,7 +2198,32 @@
             &::after {
                 width: $date-inner-size;
                 height: $date-inner-size;
-                border-color: var-get($theme, 'date-selected-special-border-color');
+
+                @if $variant != 'fluent' {
+                    border-color: var-get($theme, 'date-selected-special-border-color');
+                }
+            }
+        }
+    }
+
+    @if $variant == 'fluent' {
+        %date-first-preview-active {
+            %date-inner {
+                background: transparent;
+                border-inline-end-color: transparent;
+            }
+        }
+
+        %date-last-preview-active {
+            %date-inner {
+                background: transparent;
+                border-inline-start-color: transparent;
+            }
+        }
+
+        %date-first-last-selected {
+            %date-inner {
+                background: transparent;
             }
         }
     }
@@ -2338,7 +2343,7 @@
                 content: '';
                 position: absolute;
                 height: $date-size;
-                width: calc($date-size / 2 + #{$border-size});
+                width: $date-size;
                 border: rem(1px) solid var-get($theme, 'date-range-border-color');
                 z-index: 3;
                 pointer-events: none;
@@ -2346,16 +2351,53 @@
         }
 
         %date-range-selected-first {
+            %date-inner {
+                border-start-end-radius: var-get($theme, 'date-border-radius');
+                border-end-end-radius: var-get($theme, 'date-border-radius');
+            }
+
             &::before {
-                inset-inline-end: calc(50% - #{$border-size});
                 border-inline-end-color: transparent;
+                border-start-start-radius: var-get($theme, 'date-range-border-radius');
+                border-end-start-radius: var-get($theme, 'date-range-border-radius');
             }
         }
 
         %date-range-selected-last {
+            %date-inner {
+                border-start-start-radius: var-get($theme, 'date-border-radius');
+                border-end-start-radius: var-get($theme, 'date-border-radius');
+            }
+
             &::before {
-                inset-inline-start: calc(50% - #{$border-size});
                 border-inline-start-color: transparent;
+                border-start-end-radius: var-get($theme, 'date-range-border-radius');
+                border-end-end-radius: var-get($theme, 'date-range-border-radius');
+            }
+        }
+
+
+        %date-first-preview {
+            %date-inner {
+                border-start-start-radius: var-get($theme, 'date-range-border-radius');
+                border-end-start-radius: var-get($theme, 'date-range-border-radius');
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
+            }
+        }
+
+        %date-last-preview {
+            %date-inner {
+                border-start-end-radius: var-get($theme, 'date-range-border-radius');
+                border-end-end-radius: var-get($theme, 'date-range-border-radius');
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
+            }
+        }
+
+        %date-first-last {
+            %date-inner {
+                border-radius: var-get($theme, 'date-range-border-radius');
             }
         }
     }
@@ -2389,6 +2431,12 @@
         }
     }
 
+    %date-range-preview-inactive {
+        %date-inner {
+            color: var-get($theme, 'inactive-color');
+        }
+    }
+
     %date-range-preview-current {
         %date-inner {
             color: var-get($theme, 'date-selected-current-range-foreground');

package/lib/core/styles/components/card/_card-theme.scss

@@ -114,8 +114,6 @@
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);
-    $card-content-padding: rem(16px);
-    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
 
@@ -159,7 +157,7 @@
     %igx-card-header {
         display: flex;
         flex-flow: row wrap;
-        align-content: flex-start;
+        align-items: center;
         width: 100%;
         padding: $card-heading-padding;
         color: var-get($theme, 'header-text-color');
@@ -168,10 +166,6 @@
             display: block;
             padding: 0;
         }
-
-        @if $variant == 'fluent' {
-            padding: rem(16px) rem(8px);
-        }
     }
 
     %igx-card-header--vertical {
@@ -195,7 +189,6 @@
     }
 
     %igx-card-header-thumbnail {
-        align-self: flex-start;
         margin-inline-end: rem(16px);
 
         @if $variant == 'indigo' {
@@ -235,7 +228,7 @@
     %igx-card-content {
         display: block;
         width: 100%;
-        padding: $card-content-padding;
+        padding: rem(16px);
         color: var-get($theme, 'content-text-color');
         overflow: auto;
     }
@@ -259,6 +252,14 @@
     }
 
     %igx-card-actions {
+        $card-actions-padding: map.get((
+            'material': rem(8px) rem(16px),
+            'fluent': rem(8px) rem(16px),
+            'bootstrap': rem(16px),
+            'indigo': rem(16px),
+        ), $variant);
+
+
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
@@ -283,29 +284,26 @@
 
     @if $variant == 'bootstrap' {
         %igx-card-content {
-            @if $variant == 'bootstrap' {
-                padding-block: rem(16px) rem(24px);
-                padding-inline: rem(24px);
-            }
-        }
-
-        %igx-card-actions {
-            padding: rem(16px);
+            padding-block-end: rem(24px);
         }
     }
 
     @if $variant == 'indigo' {
-        %igx-card-content,
-        %igx-card-actions {
-            padding: rem(16px);
+        %igx-card-content {
+            padding-block-end: rem(8px);
         }
 
-        %igx-card-content + %igx-card-actions {
-            padding-block-start: rem(8px);
+        %igx-card-content:last-child {
+            padding-block-end: rem(16px);
         }
 
-        %igx-card-header + %igx-card-content {
-            padding-block-start: 0;
+        %igx-card-header {
+            padding-block-end: 0;
+        }
+
+        %igx-card-header:last-child,
+        %igx-card-header:first-child {
+            padding-block-end: rem(16px);
         }
     }
 
@@ -329,6 +327,10 @@
         margin-inline-start: auto;
         gap: rem(8px);
 
+        [igxIconButton] {
+            color: var-get($theme, 'actions-text-color');
+        }
+
         &:empty {
             display: none;
         }
@@ -340,6 +342,10 @@
         order: 0;
         gap: rem(8px);
 
+        [igxIconButton] {
+            color: var-get($theme, 'actions-text-color');
+        }
+
         &:empty {
             display: none;
         }