igniteui-angular 20.1.5 → 20.1.7

package/lib/core/styles/components/checkbox/_checkbox-theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use 'sass:math';
 @use '../../base' as *;
@@ -49,13 +50,6 @@
         'indigo': rem(8px),
     ), $variant);
 
-    $mark-stroke: map.get((
-        'material': 3,
-        'fluent': 1,
-        'bootstrap': 3,
-        'indigo': 3,
-    ), $variant);
-
     $mark-offset: map.get((
         'material': 0,
         'fluent': -1px,
@@ -64,7 +58,7 @@
     ), $variant);
 
     $mark-length: 24;
-    $mark-x-factor: math.div($mark-stroke, $mark-length);
+    $mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
 
     $ripple-size: rem(40px);
     $ripple-radius: math.div($ripple-size, 2);
@@ -128,7 +122,9 @@
     }
 
     %cbx-composite--hover {
-        border-color: var-get($theme, 'empty-color-hover');
+        @if $variant == 'bootstrap' or $variant == 'indigo' {
+            border-color: var-get($theme, 'empty-color-hover');
+        }
     }
 
     %cbx-composite--x {
@@ -181,6 +177,7 @@
     %cbx-composite--x--disabled {
         @if $variant == 'material' or $variant == 'fluent' {
             background: var-get($theme, 'disabled-color');
+            border-color: var-get($theme, 'disabled-color');
         }
 
         @if $variant == 'indigo' or $variant == 'bootstrap' {
@@ -205,7 +202,7 @@
         inset: 0;
         stroke: var-get($theme, 'tick-color');
         stroke-linecap: square;
-        stroke-width: $mark-stroke;
+        stroke-width: var-get($theme, 'tick-width');
         stroke-dasharray: $mark-length;
         stroke-dashoffset: $mark-length;
         fill: none;
@@ -268,7 +265,7 @@
     }
 
     %igx-checkbox--disabled-indeterminate-indigo {
-        @extend %igx-checkbox--indeterminate-indigo;
+        @extend %cbx-composite--x--disabled;
 
         %cbx-composite-mark {
             rect {
@@ -297,6 +294,14 @@
                 z-index: 1;
             }
         }
+
+        &:hover {
+            %cbx-composite {
+                &::before {
+                    background: var-get($theme, 'fill-color-hover');
+                }
+            }
+        }
     }
 
     %igx-checkbox--disabled-indeterminate-fluent {
@@ -305,7 +310,7 @@
         }
 
         %cbx-composite--x--disabled {
-            background: transparent;
+            border-color: var-get($theme, 'disabled-color');
 
             &::before {
                 background: var-get($theme, 'disabled-color');
@@ -313,7 +318,7 @@
         }
     }
 
-    %igx-checkbox--disabled-indeterminate-material {
+    %igx-checkbox--disabled-indeterminate {
         %cbx-composite--x--disabled {
             border-color: var-get($theme, 'disabled-indeterminate-color');
             background: var-get($theme, 'disabled-indeterminate-color');
@@ -366,7 +371,7 @@
     %cbx-composite-mark--in {
         stroke-dashoffset: 41; /* length of path - adjacent line length */
         opacity: 1;
-        transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
+        transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
     }
 
     %cbx-composite-mark--fluent {
@@ -464,11 +469,11 @@
     }
 
     %cbx-ripple--hover-checked {
-        background: var-get($theme, 'fill-color');
+        background: var-get($theme, 'fill-color-hover');
     }
 
     %cbx-ripple--hover-invalid {
-        background: var-get($theme, 'error-color');
+        background: var-get($theme, 'error-color-hover');
     }
 
     %igx-checkbox--focused-indigo {
@@ -550,6 +555,10 @@
         background: var-get($theme, 'fill-color');
     }
 
+    %cbx-ripple--focused--hover-checked {
+        background: var-get($theme, 'fill-color-hover');
+    }
+
     %cbx-ripple--focused-invalid {
         background: var-get($theme, 'error-color');
     }

package/lib/core/styles/components/combo/_combo-theme.scss

@@ -13,7 +13,7 @@
         'material': pad-inline(rem(4px), rem(8px), rem(16px)),
         'fluent': pad-inline(rem(2px), rem(4px), rem(8px)),
         'bootstrap': pad-inline(rem(4px), rem(8px), rem(16px)),
-        'indigo': pad-inline(rem(12px))
+        'indigo': pad-inline(rem(8px), rem(12px), rem(12px))
     ), $variant);
 
     $search-input-block-padding: map.get((
@@ -73,6 +73,16 @@
         igx-input-group {
             --theme: #{if($variant == 'indigo', 'indigo', 'material')};
             --ig-size: #{if($variant == 'indigo', 2, 1)};
+
+            @if $variant == 'bootstrap' or $variant == 'indigo' {
+                input {
+                    height: rem(28px);
+                }
+            } @else if $variant == 'fluent' {
+                input {
+                    height: rem(32px);
+                }
+            }
         }
     }
 
@@ -151,6 +161,18 @@
         %igx-combo__search {
             --igx-input-group-input-suffix-background: transparent;
             --igx-input-group-input-suffix-background--focused: transparent;
+
+            .igx-input-group__bundle::after {
+                border-block-end-color: var(--border-color);
+            }
+
+            .igx-input-group__bundle:hover::after {
+                border-block-end-color: #{if($variant == 'fluent', var(--hover-border-color), var(--border-color))};;
+            }
+
+            .igx-input-group--focused .igx-input-group__bundle::after {
+                border-block-end-color: var(--focused-bottom-line-color);
+            }
         }
     }
 

package/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss

@@ -23,6 +23,11 @@
         }
     }
 
+    igx-date-range-start,
+    igx-date-range-end {
+        min-width: 0;
+    }
+
     igx-date-range-start,
     igx-date-range-end,
     %igx-date-range-picker__start,
@@ -57,18 +62,18 @@
 }
 
 /// Adds typography styles for the igx-date-range-picker component.
-/// Uses the 'subtitle-1'
+/// Uses the 'caption'
 /// categories from the typographic scale.
 /// @group typography
-/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
 @mixin date-range-typography(
     $categories: (
-        label: 'subtitle-1',
+        label: 'caption',
     )
 ) {
     $label: map.get($categories, 'label');
 
-    %igx-date-range__label {
+    %igx-date-range-picker__label {
         @include type-style($label);
     }
 }

package/lib/core/styles/components/grid/_pivot-data-selector-theme.scss

@@ -3,31 +3,6 @@
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
-/// @deprecated Use the `css-vars` mixin instead.
-/// @see {mixin} css-vars
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-@function pivot-data-selector-theme(
-    $schema: $light-material-schema,
-    $background: null
-) {
-    $name: 'igx-pivot-data-selector';
-    $selector: '.igx-pivot-data-selector';
-    $pivot-data-selector-schema: ();
-
-    @if map.has-key($schema, 'pivot-data-selector') {
-        $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector');
-    } @else {
-        $pivot-data-selector-schema: $schema;
-    }
-
-    $theme: digest-schema($pivot-data-selector-schema);
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

package/lib/core/styles/components/input/_file-input-theme.scss

@@ -4,88 +4,6 @@
 @use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
 
-////
-/// @group themes
-/// @access public
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $file-names-background [null] - The file names container background color.
-/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused.
-/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled.
-/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled.
-/// @param {Color} $file-names-foreground [null] - The file names color.
-/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused.
-/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled.
-/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled.
-/// @param {Color} $file-selector-button-background [null] - The file input selector button background color.
-/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused.
-/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled.
-/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled.
-/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color.
-/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused.
-/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled.
-/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled.
-/// @example scss Change the focused border and label colors
-///   $my-file-input-theme: file-input-theme($file-names-foreground: #09f);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-file-input-theme);
-@function file-input-theme(
-    $schema: $light-material-schema,
-    $file-names-background: null,
-    $file-names-background--focused: null,
-    $file-names-background--filled: null,
-    $file-names-background--disabled: null,
-    $file-names-foreground: null,
-    $file-names-foreground--focused: null,
-    $file-names-foreground--filled: null,
-    $file-names-foreground--disabled: null,
-
-    $file-selector-button-background: null,
-    $file-selector-button-background--focused: null,
-    $file-selector-button-background--filled: null,
-    $file-selector-button-background--disabled: null,
-    $file-selector-button-foreground: null,
-    $file-selector-button-foreground--focused: null,
-    $file-selector-button-foreground--filled: null,
-    $file-selector-button-foreground--disabled: null,
-) {
-    $name: 'igx-file-input';
-    $file-input-schema: ();
-
-    @if map.has-key($schema, 'file-input') {
-        $file-input-schema: map.get($schema, 'file-input');
-    } @else {
-        $file-input-schema: $schema;
-    }
-
-    $theme: digest-schema($file-input-schema);
-
-    @return extend(
-        $theme,
-        (
-            name: $name,
-            file-names-background: $file-names-background,
-            file-names-background--focused: $file-names-background--focused,
-            file-names-background--filled: $file-names-background--filled,
-            file-names-background--disabled: $file-names-background--disabled,
-            file-names-foreground: $file-names-foreground,
-            file-names-foreground--focused: $file-names-foreground--focused,
-            file-names-foreground--filled: $file-names-foreground--filled,
-            file-names-foreground--disabled: $file-names-foreground--disabled,
-
-            file-selector-button-background: $file-selector-button-background,
-            file-selector-button-background--focused: $file-selector-button-background--focused,
-            file-selector-button-background--filled: $file-selector-button-background--filled,
-            file-selector-button-background--disabled: $file-selector-button-background--disabled,
-            file-selector-button-foreground: $file-selector-button-foreground,
-            file-selector-button-foreground--focused: $file-selector-button-foreground--focused,
-            file-selector-button-foreground--filled: $file-selector-button-foreground--filled,
-            file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled,
-        ),
-    );
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.

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

@@ -16,28 +16,13 @@
     $indigo-theme: $variant == 'indigo';
     $fluent-theme: $variant == 'fluent';
     $bootstrap-theme: $variant == 'bootstrap';
-    $NOT-material-theme: $variant != 'material';
-    $NOT-indigo-theme: $variant != 'indigo';
-    $NOT-fluent-theme: $variant != 'fluent';
-    $NOT-bootstrap-theme: $variant != 'bootstrap';
 
     $required-symbol: '*';
     $required-symbol-margin: rem(2px);
 
-    // This creates an inverse relationship
-    // between the value of the base scale size and
-    // the sizing of all inner elements.
-    // i.e. the bigger the scale size,
-    // the smaller the padding of the inner items.
-    $base-scale-size: (
-        'comfortable': 16px,
-        'cosy': 19px,
-        'compact': 22px
-    );
-
     $bootstrap-inline-padding: (
-        'comfortable': rem(16px),
-        'cosy': rem(12px),
+        'comfortable': rem(14px),
+        'cosy': rem(10px),
         'compact': rem(8px)
     );
 
@@ -50,12 +35,6 @@
     $input-top-padding: rem(20px);
     $input-bottom-padding: rem(6px);
 
-    $bundle-padding-top: (
-        'comfortable': rem(18px, map.get($base-scale-size, 'comfortable')),
-        'cosy': rem(18px, map.get($base-scale-size, 'cosy')),
-        'compact': rem(18px, map.get($base-scale-size, 'compact')),
-    );
-
     $hint-spacing-block: map.get((
         'material': rem(4px),
         'fluent': rem(5px),
@@ -64,7 +43,7 @@
     ), $variant);
 
     $hint-spacing-inline: map.get((
-        'material': sizable(rem(14px), rem(16px), rem(18px)),
+        'material': sizable(rem(12px), rem(14px), rem(16px)),
         'fluent': 0,
         'bootstrap': 0,
         'indigo': 0,
@@ -77,6 +56,23 @@
         'indigo': rem(15px),
     ), $variant);
 
+    $material-box-top-padding: sizable(rem(16px), rem(20px), rem(24px));
+    $material-border-top-padding: sizable(rem(8px), rem(12px), rem(16px));
+
+    $textarea-top-padding: map.get((
+        'material': rem(0px),
+        'fluent': sizable(rem(6px), rem(10px), rem(14px)),
+        'bootstrap': sizable(rem(4px), rem(8px), rem(12px)),
+        'indigo': sizable(rem(4px), rem(6px), rem(8px)),
+    ), $variant);
+
+    $textarea-font: map.get((
+        'material': 'var(--ig-subtitle-1-line-height)',
+        'fluent': 'var(--ig-body-2-line-height)',
+        'bootstrap': 'var(--ig-body-1-line-height)',
+        'indigo': 'var(--ig-body-2-line-height)',
+    ), $variant);
+
     // Base Start
     %form-group-prefix--upload {
         padding: 0;
@@ -115,7 +111,7 @@
             } @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));
+                padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
             }
         }
     }
@@ -149,7 +145,7 @@
         @include sizable();
         --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         --input-size: var(--component-size);
-        --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
+        --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
 
         position: relative;
         display: block;
@@ -869,7 +865,7 @@
 
         @if $variant == 'material' {
             overflow: hidden;
-            min-width: pad(rem(10px), rem(12px), rem(14px));
+            min-width: pad(rem(8px), rem(10px), rem(12px));
         }
     }
 
@@ -1020,7 +1016,7 @@
     %form-group-display--search {
         %igx-input-group__notch--search,
         %form-group-bundle-main--search {
-            @if $variant != 'indigo' {
+            @if $variant == 'material' {
                 padding-inline: rem(4px);
             }
         }
@@ -1083,11 +1079,9 @@
     }
 
     %form-group-label {
-        padding-inline-end: rem(4px);
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
     }
 
     %form-group-label--border {
@@ -1204,6 +1198,18 @@
     }
 
     @if $variant == 'material' {
+        %textarea-group:not(%textarea-group--outlined) {
+            --textarea-box-padding: #{pad-block(rem(8px), rem(12px), rem(16px))};
+
+            &:has(%igx-input-group__notch:not(:empty)) {
+                --textarea-box-padding: #{pad-block(rem(16px), rem(20px), rem(24px))};
+            }
+
+            %form-group-textarea {
+                margin-block-end: rem(2px);
+            }
+        }
+
         %textarea-group:not(%suffixed) {
             %form-group-bundle-main {
                 grid-area: 1 / 2 / span 1 / span 3;
@@ -1211,7 +1217,7 @@
             }
 
             textarea {
-                padding-inline-end: rem(4px);
+                padding-inline-end: #{pad-inline(rem(12px), rem(14px), rem(16px))};
                 width: calc(100% - #{rem(1px)});
             }
         }
@@ -1227,7 +1233,7 @@
                 %form-group-textarea-label:not(%textarea-group-label--focused) {
                     @include type-style('subtitle-1');
 
-                    top: calc($input-top-padding - #{rem(3px)});
+                    top: calc(#{$material-box-top-padding} - #{rem(3px)});
                     transform: translateY(0);
                     margin-bottom: auto;
                 }
@@ -1244,13 +1250,6 @@
     }
 
     %form-group-textarea-group-bundle {
-        // 3 lines * 22px + 8px bottom padding + 8px top padding
-        --textarea-size: #{sizable(
-            rem(82px, map.get($base-scale-size, 'compact')),
-            rem(82px, map.get($base-scale-size, 'cosy')),
-            rem(82px, map.get($base-scale-size, 'comfortable'))
-        )};
-        min-height: var(--textarea-size) !important;
         height: auto !important;
 
         %form-group-label {
@@ -1260,25 +1259,25 @@
 
     @if $material-theme {
         %form-group-textarea-label {
-            top: calc($input-top-padding - #{rem(1px)});
+            top: calc(#{$material-box-top-padding} - #{rem(1px)});
             margin-block-end: auto;
         }
 
         %textarea-group--outlined {
             %form-group-textarea-label {
-                top: calc($input-top-padding - #{rem(3px)});
+                top: calc(#{$material-border-top-padding} - #{rem(3px)});
             }
         }
 
         %textarea-group--box {
             %form-group-textarea-label {
-                top: calc($input-top-padding - #{rem(2px)});
+                top: calc(#{$material-box-top-padding} - #{rem(2px)});
             }
         }
 
         %textarea-group-label--focused {
             transform: translateY(0);
-            top: calc(#{$input-top-padding} / 4);
+            top: calc(#{$material-box-top-padding} / 4);
         }
 
         %textarea-group-label--filled--border,
@@ -1336,7 +1335,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
 
-        &:not([type='date']) {
+        &:not(%form-group-textarea, [type='date']) {
             line-height: 0 !important; /* Reset typography */
         }
 
@@ -1450,29 +1449,13 @@
     }
 
     %form-group-textarea {
-        --textarea-size: #{sizable(
-            rem(82px, map.get($base-scale-size, 'compact')),
-            rem(82px, map.get($base-scale-size, 'cosy')),
-            rem(82px, map.get($base-scale-size, 'comfortable'))
-        )};
-
-        min-height: var(--textarea-size);
         height: auto;
         resize: vertical;
         overflow: hidden;
+        z-index: 1;
 
         @if $material-theme {
             padding: 0;
-            inset-block-start: rem(-3px);
-        }
-
-        // resets typography styles
-        line-height: normal !important;
-
-        z-index: 1;
-
-        &:not([type='*']) {
-            line-height: normal !important; /* resets typography styles */
         }
     }
 
@@ -1485,7 +1468,17 @@
         }
 
         @if $material-theme {
-            padding-block-start: $input-top-padding;
+            padding-block-start: var(--textarea-box-padding);
+        }
+    }
+
+    %textarea-group--outlined {
+        %form-group-textarea-group-bundle-main {
+            padding-block-start: #{$material-border-top-padding};
+        }
+
+        %form-group-textarea {
+            inset-block-start: rem(-2px);
         }
     }
 
@@ -1637,13 +1630,13 @@
     %form-group-helper {
         --ig-caption-margin-top: #{$hint-spacing-block};
         --ig-caption-margin-bottom: 0;
+        --ig-body-2-margin-top: #{$hint-spacing-block};
 
         color: var-get($theme, 'helper-text-color');
         position: relative;
         display: grid;
         grid-auto-rows: minmax($hint-min-size, auto);
         padding-inline: pad-inline($hint-spacing-inline);
-
         justify-content: space-between;
 
         > * {
@@ -1670,7 +1663,9 @@
     }
 
     %form-group-helper-item {
-        display: flex;
+        @include line-clamp(2, true, true);
+
+        overflow-wrap: anywhere;
         align-items: center;
         position: relative;
     }
@@ -1710,7 +1705,9 @@
             [igxPrefix],
             igx-suffix,
             [igxSuffix] {
-                padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+                &:not(:empty) {
+                    padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+                }
             }
         }
 
@@ -2014,13 +2011,14 @@
     }
 
     %indigo-textarea {
-        padding-block: rem(6px);
+        padding-block: $textarea-top-padding 0;
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
         inset-block-end: rem(2px);
     }
 
     %fluent-textarea {
-        padding: rem(8px);
+        padding-inline: pad-inline(rem(8px));
+        padding-block: $textarea-top-padding 0;
     }
 
     %fluent-input-disabled {
@@ -2038,8 +2036,6 @@
         color: var-get($theme, 'idle-secondary-color');
 
         @if $variant == 'fluent' {
-            --ig-subtitle-2-line-height: rem(16px);
-
             margin-block-end: rem(5px);
         } @else {
             margin-block-end: rem(4px);
@@ -2113,7 +2109,7 @@
     %form-group-prefix-fluent-search,
     %form-group-suffix-fluent-search {
         &:not(:empty) {
-            padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+            padding-inline: pad-inline(rem(8px), rem(10px), rem(14px));
         }
     }
 
@@ -2299,6 +2295,10 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
+
+        &:is(textarea) {
+            padding-block: $textarea-top-padding 0;
+        }
     }
 
     // The :not selector is needed otherwise bootstrap will override the %autofill-background-fix