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

package/lib/core/styles/components/chip/_chip-theme.scss

@@ -268,14 +268,14 @@
     $box-shadow-focus: map.get((
         'material': null,
         'fluent': null,
-        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'),
         'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
     ), $variant);
 
     $box-shadow-focus-selected: map.get((
         'material': null,
         'fluent': null,
-        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color'),
         'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
     ), $variant);
 
@@ -378,19 +378,21 @@
         }
 
         igx-avatar,
-        igx-circular-bar,
         igx-icon {
             --component-size: var(--chip-size);
         }
 
+        igx-circular-bar {
+            --diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
+        }
+
         @if $variant == 'indigo' {
             igx-icon {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }
 
-        igx-avatar,
-        igx-circular-bar {
+        igx-avatar {
             max-height: 100%;
             width: sizable(rem(14px), rem(18px), rem(24px));
             max-width: sizable(rem(14px), rem(18px), rem(24px));
@@ -427,9 +429,17 @@
     %igx-chip%igx-chip--primary {
         &:focus {
             %igx-chip__item {
-                color: contrast-color($color: 'primary', $variant: 800);
-                background: color($color: 'primary', $variant: 800);
-                border-color: color($color: 'primary', $variant: 800);
+                @if $variant != 'bootstrap' and $variant != 'indigo' {
+                    color: contrast-color($color: 'primary', $variant: 800);
+                    background: color($color: 'primary', $variant: 800);
+                    border-color: color($color: 'primary', $variant: 800);
+                }
+
+                @if $variant == "bootstrap" {
+                    color: contrast-color($color: 'primary', $variant: 500);
+                    background: color($color: 'primary', $variant: 500);
+                    border-color: color($color: 'primary', $variant: 500);
+                }
 
                 @if $variant == 'indigo' {
                     color: contrast-color($color: 'primary', $variant: 900);
@@ -439,7 +449,7 @@
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'primary', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -472,15 +482,18 @@
                 background: color($color: 'info', $variant: 800);
                 border-color: color($color: 'info', $variant: 800);
 
-                @if $variant == 'indigo' {
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     color: contrast-color($color: 'info', $variant: 500);
                     background: color($color: 'info', $variant: 500);
                     border-color: color($color: 'info', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
                     box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'info', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -517,15 +530,19 @@
                 background: color($color: 'success', $variant: 800);
                 border-color: color($color: 'success', $variant: 800);
 
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'success', $variant: 900);
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     background: color($color: 'success', $variant: 500);
                     border-color: color($color: 'success', $variant: 500);
                     box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800));
                 }
 
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'success', $variant: 900);
+                }
+
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'success', $variant: 200);
+                    color: contrast-color($color: 'success', $variant: 600);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -558,15 +575,18 @@
                 background: color($color: 'warn', $variant: 800);
                 border-color: color($color: 'warn', $variant: 800);
 
-                @if $variant == 'indigo' {
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     color: contrast-color($color: 'warn', $variant: 900);
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
                     box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'warn', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -603,15 +623,19 @@
                 background: color($color: 'error', $variant: 800);
                 border-color: color($color: 'error', $variant: 800);
 
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'error', $variant: 900);
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     background: color($color: 'error', $variant: 500);
                     border-color: color($color: 'error', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'error', $variant: 900);
                     box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'error', $variant: 200);
+                    color: contrast-color($color: 'error', $variant: 600);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
                 }
             }
         }

package/lib/core/styles/components/grid/_grid-theme.scss

@@ -90,11 +90,8 @@
 /// @param {Color} $excel-filtering-actions-foreground [null] - The text color of the excel style filtering options.
 /// @param {Color} $excel-filtering-actions-hover-foreground [null] - The text color of the excel style filtering options in hover/focus state.
 /// @param {Color} $excel-filtering-actions-disabled-foreground [null] - The text color of the excel style filtering options in disabled state.
-/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.
-/// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.
-/// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.
-/// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.
-/// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.
+/// @param {Color} $tree-filtered-text-color [null] - Grouping row background color on focus.
+/// @param {Color} $summaries-patch-background [null] - The leading summaries patch backround. Used in hierarchical grids.
 /// @param {Color} $row-highlight [null] - The grid row highlight indication color.
 /// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.
 /// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).
@@ -204,11 +201,6 @@
     $excel-filtering-actions-hover-foreground: null,
     $excel-filtering-actions-disabled-foreground: null,
 
-    $body-summaries-background: null,
-    $body-summaries-text-color: null,
-    $root-summaries-background: null,
-    $root-summaries-text-color: null,
-
     $row-highlight: null,
     $grid-shadow: null,
     $drag-shadow: null,
@@ -217,6 +209,7 @@
     $drop-area-border-radius: null,
     $grid-border-color: null,
     $sortable-header-icon-hover-color: null,
+    $summaries-patch-background: null,
 
     $cell-selected-within-background: null,
     $cell-selected-within-text-color: null,
@@ -434,14 +427,6 @@
         $filtering-row-text-color: text-contrast(to-opaque($filtering-row-background));
     }
 
-    @if not($body-summaries-text-color) and $body-summaries-background {
-        $body-summaries-text-color: text-contrast($body-summaries-background);
-    }
-
-    @if not($root-summaries-text-color) and $root-summaries-background {
-        $root-summaries-text-color: text-contrast($root-summaries-background);
-    }
-
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
         $grid-shadow: elevation($grid-elevation);
@@ -556,11 +541,6 @@
         tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
         tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,
 
-        body-summaries-background: $body-summaries-background,
-        body-summaries-text-color: $body-summaries-text-color,
-        root-summaries-background: $root-summaries-background,
-        root-summaries-text-color: $root-summaries-text-color,
-
         row-highlight: $row-highlight,
         grid-shadow: $grid-shadow,
         drag-shadow: $drag-shadow,
@@ -569,6 +549,7 @@
         drop-area-border-radius: $drop-area-border-radius,
         sortable-header-icon-hover-color: $sortable-header-icon-hover-color,
         grid-border-color: $grid-border-color,
+        summaries-patch-background: $summaries-patch-background,
 
         cell-selected-within-background: $cell-selected-within-background,
         cell-selected-within-text-color: $cell-selected-within-text-color,
@@ -2103,7 +2084,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-
+	        
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2131,10 +2112,18 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
+	            
+	            > igx-icon {
+		            color: inherit;
+	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
+	                
+	                > igx-icon {
+		                color: inherit;
+	                }
                 }
             }
         }
@@ -2188,9 +2177,17 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
+	        
+	        > igx-icon {
+		        color: inherit;
+	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
+	            
+	            > igx-icon {
+		            color: inherit;
+	            }
             }
         }
     }
@@ -2286,37 +2283,31 @@
     %grid-summaries {
         display: flex;
         overflow: hidden;
-        background: var-get($theme, 'root-summaries-background');
         outline-style: none;
-
-        %igx-grid-summary__result {
-            color: var-get($theme, 'root-summaries-text-color');
-        }
-
+        background-color: var-get($theme, 'summaries-patch-background');
     }
 
     %grid-summaries--body {
-        background: var-get($theme, 'body-summaries-background');
+        --summaries-patch-background: var(--ig-gray-100);
+
         border-bottom: rem(1px) dashed var-get($theme, 'row-border-color');
+        background-color: var-get($theme, 'summaries-patch-background');
 
         &:last-of-type {
             border-bottom: none;
         }
 
-        %igx-grid-summary__result {
-            color: var-get($theme, 'body-summaries-text-color');
+        .igx-grid-summary {
+          --background-color: inherit;
+          --result-color: #{adaptive-contrast(var(--background-color))};
         }
     }
 
     %grid-summaries-patch {
-        @if $bootstrap-theme {
-            background: color($color: 'gray', $variant: 100);
-        } @else {
-            background: inherit;
-        }
         position: relative;
-        z-index: 1;
+        background: inherit;
         border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');
+        z-index: 1;
 
         @if $variant == 'indigo' {
             border-top: rem(1px) solid var-get($theme, 'header-border-color');
@@ -3199,7 +3190,7 @@
 	    } @else {
 		    background: color($color: 'surface', $variant: 500);
 	    }
-	    
+
         box-shadow: elevation(if($variant == 'indigo', if($theme-variant == 'light', 24, 23), 24));
 
         @if $variant == 'material' or $variant == 'bootstrap' {

package/lib/core/styles/components/input/_input-group-theme.scss

@@ -380,14 +380,17 @@
         } @else {
             min-height: 100% !important;
         }
+
         transition: color $transition-timing, background $transition-timing;
 
-        @if $material-theme {
-            padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
-        } @else if $indigo-theme {
-            padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
-        } @else {
-            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            @if $material-theme {
+                padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+            } @else if $indigo-theme {
+                padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
+            } @else {
+                padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+            }
         }
     }
 
@@ -816,16 +819,16 @@
             %form-group-bundle-start {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__filler {
                 border-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %igx-input-group__notch {
                 border-block-start-color: var-get($theme, 'hover-border-color');
                 border-block-end-color: var-get($theme, 'hover-border-color');
             }
-    
+
             %form-group-bundle-end {
                 border-color: var-get($theme, 'hover-border-color');
             }
@@ -1009,8 +1012,8 @@
     }
 
     %form-group-label--focused-border:not(:is(
-        %form-group-border--error, 
-        %form-group-border--warning, 
+        %form-group-border--error,
+        %form-group-border--warning,
         %form-group-border--success))
     {
         &:hover {
@@ -1645,6 +1648,18 @@
         [igxPrefix] {
             overflow: hidden;
         }
+
+        igx-prefix,
+        [igxPrefix] {
+            background: var(--igx-input-group-input-prefix-background, transparent);
+            color: var(--igx-input-group-input-prefix-color, var(--ig-primary-500));
+        }
+
+        igx-suffix,
+        [igxSuffix] {
+            background: var(--igx-input-group-input-suffix-background, transparent);
+            color: var(--igx-input-group-input-suffix-color, var(--ig-primary-500));
+        }
     }
 
     %igx-input-group-fluent-search--focused {
@@ -1728,6 +1743,10 @@
     %form-group-bundle--fluent--focus {
         border-color: var-get($theme, 'focused-border-color');
         border-width: rem(2px);
+
+        &:hover {
+            border-color: var-get($theme, 'focused-border-color');
+        }
     }
 
     %form-group-bundle-error--fluent,
@@ -1843,7 +1862,6 @@
     }
 
     %fluent-label-focused {
-        color: color(null, 'gray', 800);
         transform: translateY(0) scale(1);
     }
 
@@ -1887,7 +1905,9 @@
     %form-group-suffix-fluent,
     %form-group-prefix-fluent-search,
     %form-group-suffix-fluent-search {
-        padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        &:not(:empty) {
+            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+        }
     }
 
     %fluent-upload-button {

package/lib/core/styles/components/list/_list-theme.scss

@@ -425,7 +425,6 @@
         justify-content: center;
         border-radius: var-get($theme, 'item-border-radius');
         color: var-get($theme, 'item-text-color');
-        background: var-get($theme, 'item-background');
 
         @if $bootstrap-theme or $variant == 'fluent' {
             border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
@@ -436,9 +435,6 @@
         }
 
         &:hover {
-            color: var-get($theme, 'item-text-color-hover');
-            background: var-get($theme, 'item-background-hover');
-
             %igx-list__item-lines {
                 color: currentColor;
             }
@@ -544,9 +540,15 @@
         align-items: center;
         position: relative;
         border-radius: var-get($theme, 'item-border-radius');
-        background: inherit;
+        background: var-get($theme, 'item-background');
         z-index: 2;
         gap: if($variant == 'indigo', rem(8px), rem(16px));
+
+        &:hover,
+        &:focus-within {
+            color: var-get($theme, 'item-text-color-hover');
+            background: var-get($theme, 'item-background-hover');
+        }
     }
 
     %igx-list-header,

package/lib/core/styles/components/progress/circular/_circular-theme.scss

@@ -64,6 +64,7 @@
     @return extend($theme, (
         name: $name,
         base-circle-color: $base-circle-color,
+	    fill-color-default: $fill-color-default,
         fill-color-default-start: $fill-color-default-start,
         fill-color-default-end: $fill-color-default-end,
         fill-color-danger: $fill-color-danger,
@@ -134,6 +135,8 @@
             transform-origin: center;
 
             %outer {
+	            stroke: var-get($theme, 'fill-color-default');
+	            
                 @if $variant != 'bootstrap' {
                     animation: igx-initial-dashoffset var(--_transition-duration) linear;
                 } @else {
@@ -310,14 +313,14 @@
     %text--hidden {
         visibility: hidden;
     }
-
-    %gradient-start {
-        stop-color: var-get($theme, 'fill-color-default-start');
-    }
-
-    %gradient-end {
-        stop-color: var-get($theme, 'fill-color-default-end');
-    }
+	
+	%gradient-start {
+		stop-color: var-get($theme, 'fill-color-default-end');
+	}
+
+	%gradient-end {
+		stop-color: var-get($theme, 'fill-color-default-start');
+	}
 
     @keyframes igx-indeterminate-accordion {
         0% {

package/lib/core/styles/components/query-builder/_query-builder-component.scss

@@ -107,12 +107,12 @@
             @extend %filter-tree__expression-item !optional;
         }
 
-        @include e(expression-item-ghost) {
+        @include e(expression-item-drop-ghost) {
             @extend %filter-tree__expression-item-ghost !optional;
         }
 	    
-	    @include e(expression-item-drop-ghost) {
-		    @extend %filter-tree__expression-drop-item-ghost !optional;
+	    @include e(expression-item-keyboard-ghost) {
+		    @extend %filter-tree__expression-item-keyboard-ghost !optional;
 	    }
 
         @include e(expression-column) {

package/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -480,19 +480,39 @@
 
 
     %filter-tree__expression-item-ghost {
-        &.igx-chip__item {
+        .igx-chip__item {
             @include type-style('body-2');
 
             --ig-body-2-text-transform: unset;
 
             padding-inline: rem(32px);
-        }
 
-        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
-        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
-        background:  transparent;
+	        color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
+	        border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
+	        background:  transparent;
+        }
     }
 
+	%filter-tree__expression-item-keyboard-ghost {
+		.igx-chip__item {
+			box-shadow: var(--ghost-shadow);
+            background: var(--ghost-background);
+            color: var(--focus-text-color);
+		}
+
+        .igx-chip:hover {
+            .igx-chip__item {
+                box-shadow: var(--ghost-shadow);
+                background: var(--ghost-background);
+                color: var(--focus-text-color);
+
+                @if $variant == 'indigo' {
+                    border-color: var(--border-color);
+                }
+            }
+        }
+	}
+
     %filter-tree__expression-column {
         padding: 0 rem(8px);
     }

package/lib/core/styles/components/switch/_switch-component.scss

@@ -132,56 +132,6 @@
             }
         }
 
-        @include m(invalid) {
-            @include e(composite) {
-                @extend %switch-composite--invalid !optional;
-            }
-
-            &:hover {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover !optional;
-                    @extend %switch-ripple--hover-invalid !optional;
-                }
-
-                @include e(composite) {
-                    @extend %switch-composite--invalid--hover !optional;
-                }
-            }
-
-            &:active {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover !optional;
-                    @extend %switch-ripple--hover-invalid !optional;
-                    @extend %switch-ripple--pressed !optional;
-                }
-            }
-
-            @include e(label) {
-                @extend %switch-label--invalid !optional;
-            }
-          
-            @include e(label, $m: before) {
-                @extend %switch-label--invalid !optional;
-            }
-
-            @include e(thumb) {
-                @extend %switch-thumb--invalid !optional;
-            }
-        }
-
-        @include mx(invalid, checked) {
-            @include e(thumb) {
-                @extend %switch-thumb--x--invalid !optional;
-            }
-
-            &:hover {
-                @include e(ripple) {
-                    @extend %switch-ripple--hover !optional;
-                    @extend %switch-ripple--hover-checked-invalid !optional;
-                }
-            }
-        }
-
         @include m(disabled) {
             @extend %switch-display--disabled !optional;
 
@@ -202,26 +152,11 @@
             }
         }
 
-        @include mx(disabled, invalid) {
-            @include e(thumb) {
-                @extend %switch-thumb--disabled !optional;
-            }
-        }
-
         @include mx(focused, checked) {
             @include e(ripple) {
                 @extend %switch-ripple--focused !optional;
                 @extend %switch-ripple--focused-checked !optional;
             }
         }
-
-        @include mx(focused, invalid) {
-            @include e(ripple) {
-                @extend %switch-ripple--focused !optional;
-                @extend %switch-ripple--focused-invalid !optional;
-            }
-
-            @extend %igx-switch--focused--invalid !optional;
-        }
     }
 }