igniteui-angular 20.0.7 → 20.0.9

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

@@ -1,533 +1,7 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use '../../base' as *;
-@use '../../themes/schemas' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
 
-////
-/// @group themes
-/// @access public
-/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
-////
-
-/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
-/// @param {Color} $idle-text-color [null] - The input text color in the idle state.
-/// @param {Color} $filled-text-color [null] - The input text color in the filled state.
-/// @param {Color} $filled-text-hover-color [null] - The input text color in the filled state on hover.
-/// @param {Color} $focused-text-color [null] - The input text color in the focused state.
-/// @param {Color} $disabled-text-color [null] - The input text color in the disabled state.
-/// @param {Color} $helper-text-color [null] - The helper text color.
-/// @param {Color} $input-prefix-color [null] - The input prefix color in the idle state.
-/// @param {Color} $input-prefix-background [null] - The background color of an input prefix in the idle state.
-/// @param {Color} $input-prefix-color--filled [null] - The input prefix color in the filled state.
-/// @param {Color} $input-prefix-background--filled] - The background color of an input prefix in the filled state.
-/// @param {Color} $input-prefix-color--focused [null] - The input prefix color in the focused state.
-/// @param {Color} $input-prefix-background--focused [null] - The background color of an input prefix in the focused state.
-/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state.
-/// @param {Color} $input-suffix-background [null] - The background color of an input suffix in the idle state.
-/// @param {Color} $input-suffix-color--filled [null] - The input suffix color in the filled state.
-/// @param {Color} $input-suffix-background-filled [null] - The background color of an input suffix in the filled state.
-/// @param {Color} $input-suffix-color--focused [null] - The input suffix color in the focused state.
-/// @param {Color} $input-suffix-background--focused [null] - The background color of an input suffix in the focused state.
-/// @param {Color} $idle-secondary-color [null] - The label color in the idle state.
-/// @param {Color} $focused-secondary-color [null] - The label color in the focused state.
-/// @param {Color} $idle-bottom-line-color [null] - The bottom line and border colors in the idle state.
-/// @param {Color} $hover-bottom-line-color [null] - The bottom line and border colors in the hover state.
-/// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state.
-/// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state.
-/// @param {Color} $border-color [null] - The border color for input groups of type border and fluent.
-/// @param {Color} $hover-border-color [null] - The hover input border for input groups of type border and fluent.
-/// @param {Color} $focused-border-color [null] - The focused input border color for input groups of type border and fluent.
-/// @param {Color} $disabled-border-color [null] - The disabled border color for input groups of type border and fluent.
-/// @param {Color} $box-background [null] - The background color of an input group of type box.
-/// @param {Color} $box-background-hover [null] - The background color on hover of an input group of type box.
-/// @param {Color} $box-background-focus [null] - The background color on focus of an input group of type box.
-/// @param {Color} $box-disabled-background [null] - The background color of an input group of type box in the disabled state.
-/// @param {Color} $border-background [null] - The background color of an input group of type border.
-/// @param {Color} $border-disabled-background [null] - The background color of an input group of type border in the disabled state.
-/// @param {Color} $search-background [null] - The background color of an input group of type search.
-/// @param {Color} $search-disabled-background [null] - The background color of an input group of type search in the disabled state.
-/// @param {box-shadow} $search-resting-shadow [null] - The shadow color of an input group of type search in its resting state.
-/// @param {box-shadow} $search-hover-shadow [null] - The shadow color of an input group of type search in its hover state.
-/// @param {box-shadow} $search-disabled-shadow [null] - The shadow color of an input group of type search in its disabled state.
-/// @param {Color} $success-secondary-color [null] - The success color used in the valid state.
-/// @param {Color} $warning-secondary-color [null] - The warning color used in the warning state.
-/// @param {Color} $error-secondary-color [null] - The error color used in the error state.
-/// @param {List} $box-border-radius [null] - The border radius used for box input.
-/// @param {List} $border-border-radius [null] - The border radius used for border input.
-/// @param {List} $search-border-radius [null] - The border radius used for search input.
-/// @param {Color} placeholder-color [null] - The placeholder color of an input group.
-/// @param {Color} hover-placeholder-color [null] - The placeholder color of an input group on hover.
-/// @param {Color} disabled-placeholder-color [null] - The disabled placeholder color of an input group.
-/// @example scss Change the focused border and label colors
-///   $my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);
-///   // Pass the theme to the css-vars() mixin
-///   @include css-vars($my-input-group-theme);
-@function input-group-theme(
-    $schema: $light-material-schema,
-
-    $box-background: null,
-    $box-background-hover: null,
-    $box-background-focus: null,
-    $box-disabled-background: null,
-    $box-border-radius: null,
-
-    $idle-text-color: null,
-    $filled-text-color: null,
-    $filled-text-hover-color: null,
-    $focused-text-color: null,
-    $helper-text-color: null,
-    $disabled-text-color: null,
-
-    $idle-secondary-color: null,
-    $focused-secondary-color: null,
-
-    $idle-bottom-line-color: null,
-    $hover-bottom-line-color: null,
-    $focused-bottom-line-color: null,
-    $disabled-bottom-line-color: null,
-
-    $border-color: null,
-    $hover-border-color: null,
-    $focused-border-color: null,
-    $disabled-border-color: null,
-
-    $border-border-radius: null,
-    $border-background: null,
-    $border-disabled-background: null,
-
-    $search-background: null,
-    $search-disabled-background: null,
-    $search-border-radius: null,
-    $search-resting-shadow: null,
-    $search-hover-shadow: null,
-    $search-disabled-shadow: null,
-
-    $success-secondary-color: null,
-    $warning-secondary-color: null,
-    $error-secondary-color: null,
-    $success-shadow-color: null,
-    $error-shadow-color: null,
-
-    $placeholder-color: null,
-    $hover-placeholder-color: null,
-    $disabled-placeholder-color: null,
-
-    $input-prefix-color: null,
-    $input-prefix-background: null,
-    $input-prefix-color--filled: null,
-    $input-prefix-background--filled: null,
-    $input-prefix-color--focused: null,
-    $input-prefix-background--focused: null,
-
-    $input-suffix-color: null,
-    $input-suffix-background: null,
-    $input-suffix-color--filled: null,
-    $input-suffix-background--filled: null,
-    $input-suffix-color--focused: null,
-    $input-suffix-background--focused: null,
-    $size: null,
-) {
-    $name: 'igx-input-group';
-    $selector: 'igx-input-group, igx-date-range-start, igx-date-range-end';
-    $input-group-schema: ();
-
-    @if map.has-key($schema, 'input-group') {
-        $input-group-schema: map.get($schema, 'input-group');
-    } @else {
-        $input-group-schema: $schema;
-    }
-
-    $theme: digest-schema($input-group-schema);
-    $variant: map.get($theme, '_meta', 'theme');
-
-    $search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation');
-    $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
-    $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
-
-    @if $variant == 'material' {
-        @if not($box-background-hover) and $box-background {
-            $box-background-hover: var(--box-background);
-        }
-
-        @if not($box-background-focus) and $box-background {
-            $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
-        }
-
-        @if not($placeholder-color) and $box-background {
-            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
-        }
-
-        @if not($hover-placeholder-color) and $box-background-hover {
-            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
-        }
-
-        @if not($idle-text-color) and $box-background {
-            $idle-text-color: adaptive-contrast(var(--box-background));
-        }
-
-        @if not($filled-text-color) and $box-background {
-            $filled-text-color: adaptive-contrast(var(--box-background));
-        }
-
-        @if not($filled-text-hover-color) and $box-background {
-            $filled-text-hover-color: adaptive-contrast(var(--box-background));
-        }
-
-        @if not($focused-text-color) and $box-background-focus {
-            $focused-text-color: adaptive-contrast(var(--box-background-focus));
-        }
-
-        @if not($idle-secondary-color) and $box-background {
-            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
-        }
-
-        @if not($input-prefix-color) and $box-background {
-            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
-        }
-
-        @if not($input-prefix-color--filled) and $box-background {
-            $input-prefix-color--filled: adaptive-contrast(var(--box-background));
-        }
-
-        @if not($input-prefix-color--focused) and $box-background-focus {
-            $input-prefix-color--focused: adaptive-contrast(var(--box-background-focus));
-        }
-
-        @if not($input-suffix-color) and $box-background {
-            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
-        }
-
-        @if not($input-suffix-color--filled) and $box-background {
-            $input-suffix-color--filled: adaptive-contrast(var(--box-background));
-        }
-
-        @if not($input-suffix-color--focused) and $box-background-focus {
-            $input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
-        }
-
-        @if $box-background != transparent {
-            @if not($box-disabled-background) and $box-background {
-                $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
-            }
-
-            @if not($disabled-placeholder-color) and $box-disabled-background {
-                $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
-            }
-
-            @if not($disabled-text-color) and $box-disabled-background {
-                $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
-            }
-        } @else {
-            @if not($box-disabled-background) and $box-background {
-                $box-disabled-background: var(--box-background);
-            }
-
-            @if not($disabled-placeholder-color) and $placeholder-color {
-                $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
-            }
-
-            @if not($disabled-text-color) and $idle-text-color {
-                $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
-            }
-        }
-    }
-
-    @if $variant == 'fluent' or $variant == 'bootstrap' {
-        @if not($input-prefix-background) and $input-suffix-background {
-            $input-prefix-background: var(--input-suffix-background);
-        }
-
-        @if not($input-suffix-background) and $input-prefix-background {
-            $input-suffix-background: var(--input-prefix-background);
-        }
-    }
-
-    @if $variant == 'material' or $variant == 'indigo' {
-        //bottom line color
-        @if not($hover-bottom-line-color) and $idle-bottom-line-color {
-            $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
-        }
-
-        @if not($focused-bottom-line-color) and $hover-bottom-line-color {
-            $focused-bottom-line-color: var(--hover-bottom-line-color);
-        }
-
-        @if $variant == 'material' {
-            @if not($focused-secondary-color) and $focused-bottom-line-color {
-                $focused-secondary-color: var(--focused-bottom-line-color);
-            }
-
-            @if not($border-color) and $idle-bottom-line-color {
-                $border-color: var(--idle-bottom-line-color);
-            }
-        }
-    }
-
-    //border-color
-    @if $variant == 'bootstrap' {
-        @if not($focused-border-color) and $border-color {
-            $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
-        }
-
-        @if not($focused-secondary-color) and $focused-border-color {
-            $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
-        }
-    } @else {
-        @if not($hover-border-color) and $border-color {
-            $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
-        }
-
-        @if not($focused-border-color) and $hover-border-color {
-            $focused-border-color: var(--hover-border-color);
-        }
-
-        @if $variant != 'indigo' {
-            @if not($focused-secondary-color) and $focused-border-color {
-                $focused-secondary-color: var(--focused-border-color);
-            }
-        }
-    }
-
-    @if $variant == 'material' {
-        @if not($focused-bottom-line-color) and $focused-border-color {
-            $focused-bottom-line-color: var(--focused-border-color);
-        }
-    }
-
-    //search input
-    @if not($placeholder-color) and $search-background {
-        $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
-    }
-
-    @if not($hover-placeholder-color) and $placeholder-color {
-        $hover-placeholder-color: var(--placeholder-color);
-    }
-
-    @if $variant == 'indigo' {
-        @if not($box-background-hover) and $search-background {
-            $box-background-hover: var(--search-background);
-        }
-    } @else {
-        @if not($idle-secondary-color) and $placeholder-color {
-            $idle-secondary-color: var(--placeholder-color);
-        }
-    }
-
-    @if not($idle-text-color) and $search-background {
-        $idle-text-color: adaptive-contrast(var(--search-background));
-    }
-
-    @if not($filled-text-color) and $search-background {
-        $filled-text-color: adaptive-contrast(var(--search-background));
-    }
-
-    @if not($filled-text-hover-color) and $search-background {
-        $filled-text-hover-color: adaptive-contrast(var(--search-background));
-    }
-
-    @if not($focused-text-color) and $search-background {
-        $focused-text-color: adaptive-contrast(var(--search-background));
-    }
-
-    @if not($input-prefix-color) and $search-background {
-        $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
-    }
-
-    @if not($input-suffix-color) and $search-background {
-        $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
-    }
-
-    @if $variant != 'indigo' {
-        @if not($input-prefix-color--filled) and $search-background {
-            $input-prefix-color--filled: adaptive-contrast(var(--search-background));
-        }
-
-        @if not($input-prefix-color--focused) and $search-background {
-            $input-prefix-color--focused: adaptive-contrast(var(--search-background));
-        }
-
-        @if not($input-suffix-color--filled) and $search-background {
-            $input-suffix-color--filled: adaptive-contrast(var(--search-background));
-        }
-
-        @if not($input-suffix-color--focused) and $search-background {
-            $input-suffix-color--focused: adaptive-contrast(var(--search-background));
-        }
-    }
-
-    @if $search-background != transparent {
-        @if not($search-disabled-background) and $search-background {
-            $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
-        }
-
-        @if not($disabled-placeholder-color) and $search-disabled-background {
-            $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
-        }
-
-        @if not($disabled-text-color) and $search-disabled-background {
-            $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
-        }
-    } @else {
-        @if not($search-disabled-background) and $search-background {
-            $search-disabled-background: var(--search-background);
-        }
-
-        @if not($disabled-placeholder-color) and $placeholder-color {
-            $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
-        }
-
-        @if not($disabled-text-color) and $idle-text-color {
-            $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
-        }
-    }
-
-    @if not($search-resting-shadow) {
-        $search-resting-shadow: elevation($search-resting-elevation);
-    }
-
-    @if not($search-hover-shadow) {
-        $search-hover-shadow: elevation($search-hover-elevation);
-    }
-
-    @if not($search-disabled-shadow) {
-        $search-disabled-shadow: elevation($search-disabled-elevation);
-    }
-    //end search input
-
-    @if not($input-prefix-color) and $input-suffix-color {
-        $input-prefix-color: var(--input-suffix-color);
-    }
-
-    @if not($input-suffix-color) and $input-prefix-color {
-        $input-suffix-color: var(--input-prefix-color);
-    }
-
-    @if not($input-prefix-background--filled) and $input-prefix-background {
-        $input-prefix-background--filled: var(--input-prefix-background);
-    }
-
-    @if not($input-prefix-background--focused) and $input-prefix-background {
-        $input-prefix-background--focused: var(--input-prefix-background);
-    }
-
-    @if not($input-prefix-color) and $input-prefix-background {
-        $input-prefix-color: adaptive-contrast(var(--input-prefix-background));
-    }
-
-    @if not($input-prefix-color--filled) and $input-prefix-color {
-        $input-prefix-color--filled: var(--input-prefix-color);
-    }
-
-    @if not($input-prefix-color--focused) and $input-prefix-color--filled {
-        $input-prefix-color--focused: var(--input-prefix-color--filled);
-    }
-
-    @if not($input-prefix-color--filled) and $input-prefix-background--filled {
-        $input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled));
-    }
-
-    @if not($input-prefix-color--focused) and $input-prefix-background--focused {
-        $input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused));
-    }
-
-    @if not($input-suffix-background--filled) and $input-suffix-background {
-        $input-suffix-background--filled: var(--input-suffix-background);
-    }
-
-    @if not($input-suffix-background--focused) and $input-suffix-background {
-        $input-suffix-background--focused: var(--input-suffix-background);
-    }
-
-    @if not($input-suffix-color) and $input-suffix-background {
-        $input-suffix-color: adaptive-contrast(var(--input-suffix-background));
-    }
-
-    @if not($input-suffix-color--filled) and $input-suffix-color {
-        $input-suffix-color--filled: var(--input-suffix-color);
-    }
-
-    @if not($input-suffix-color--focused) and $input-suffix-color--filled {
-        $input-suffix-color--focused: var(--input-suffix-color--filled);
-    }
-
-    @if not($input-suffix-color--filled) and $input-suffix-background--filled {
-        $input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled));
-    }
-
-    @if not($input-suffix-color--focused) and $input-suffix-background--focused {
-        $input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused));
-    }
-
-    @if not($box-border-radius) {
-        $box-border-radius: map.get($theme, 'box-border-radius');
-    }
-
-    @if not($border-border-radius) {
-        $border-border-radius: map.get($theme, 'border-border-radius');
-    }
-
-    @if not($search-border-radius) {
-        $search-border-radius: map.get($theme, 'search-border-radius');
-    }
-
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        idle-text-color: $idle-text-color,
-        filled-text-color: $filled-text-color,
-        filled-text-hover-color: $filled-text-hover-color,
-        focused-text-color: $focused-text-color,
-        disabled-text-color: $disabled-text-color,
-        helper-text-color: $helper-text-color,
-        box-border-radius: $box-border-radius,
-        border-border-radius: $border-border-radius,
-        search-border-radius: $search-border-radius,
-        idle-secondary-color: $idle-secondary-color,
-        focused-secondary-color: $focused-secondary-color,
-        idle-bottom-line-color: $idle-bottom-line-color,
-        hover-bottom-line-color: $hover-bottom-line-color,
-        focused-bottom-line-color: $focused-bottom-line-color,
-        disabled-bottom-line-color: $disabled-bottom-line-color,
-        border-color: $border-color,
-        hover-border-color: $hover-border-color,
-        focused-border-color: $focused-border-color,
-        disabled-border-color: $disabled-border-color,
-        box-background: $box-background,
-        box-background-hover: $box-background-hover,
-        box-background-focus: $box-background-focus,
-        box-disabled-background: $box-disabled-background,
-        border-background: $border-background,
-        border-disabled-background: $border-disabled-background,
-        search-background: $search-background,
-        search-disabled-background: $search-disabled-background,
-        search-resting-shadow: $search-resting-shadow,
-        search-hover-shadow: $search-hover-shadow,
-        search-disabled-shadow: $search-disabled-shadow,
-        success-secondary-color: $success-secondary-color,
-        warning-secondary-color: $warning-secondary-color,
-        error-secondary-color: $error-secondary-color,
-        success-shadow-color: $success-shadow-color,
-        error-shadow-color: $error-shadow-color,
-        placeholder-color: $placeholder-color,
-        hover-placeholder-color: $hover-placeholder-color,
-        disabled-placeholder-color: $disabled-placeholder-color,
-        input-prefix-color: $input-prefix-color,
-        input-prefix-background: $input-prefix-background,
-        input-prefix-color--filled: $input-prefix-color--filled,
-        input-prefix-background--filled: $input-prefix-background--filled,
-        input-prefix-color--focused: $input-prefix-color--focused,
-        input-prefix-background--focused: $input-prefix-background--focused,
-        input-suffix-color: $input-suffix-color,
-        input-suffix-background: $input-suffix-background,
-        input-suffix-color--filled: $input-suffix-color--filled,
-        input-suffix-background--filled: $input-suffix-background--filled,
-        input-suffix-color--focused: $input-suffix-color--focused,
-        input-suffix-background--focused: $input-suffix-background--focused,
-        size: $size,
-    ));
-}
-
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
@@ -602,6 +76,13 @@
         'indigo': 0,
     ), $variant);
 
+    $hint-min-size: map.get((
+        'material': rem(18px),
+        'fluent': rem(18px),
+        'bootstrap': rem(20px),
+        'indigo': rem(15px),
+    ), $variant);
+
     // Base Start
     %form-group-prefix--upload {
         padding: 0;
@@ -702,10 +183,6 @@
             font-family: inherit;
         }
 
-        input[type='file'] {
-            @include hide-default();
-        }
-
         textarea {
             overflow: auto;
         }
@@ -760,7 +237,7 @@
     }
 
     %form-group-placeholder {
-        &:has(input:placeholder-shown, textarea:placeholder-shown) { 
+        &:has(input:placeholder-shown, textarea:placeholder-shown) {
             %form-group-label {
                 transition: none !important;
             }
@@ -884,7 +361,7 @@
     }
 
     %form-group-bundle--hover {
-        cursor: pointer;
+        //cursor: pointer;
 
         &::after {
             border-block-end-width: rem(1px);
@@ -946,6 +423,288 @@
         max-width: inherit;
     }
 
+    @if $material-theme {
+        %form-group-display--file {
+            %form-group-file-input {
+                padding-inline: rem(4px);
+            }
+        }
+
+        %form-group-display--file-border {
+            %form-group-input {
+                z-index: 2;
+            }
+
+            // We need this otherwise we have to use !important
+            %form-group-bundle {
+                grid-template-columns: auto auto auto 1fr auto;
+
+                %form-group-bundle-end {
+                    grid-area: 1 / 5;
+                }
+
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'hover-border-color');
+                    }
+                }
+            }
+
+            %upload-button {
+                border-block: rem(1px) solid var-get($theme, 'border-color');
+
+                .igx-button {
+                    border: none;
+                }
+            }
+        }
+
+        %form-group-display--file-border-focused {
+            %upload-button {
+                border-width: rem(2px);
+                border-color: var-get($theme, 'focused-border-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'focused-border-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-success {
+            %upload-button {
+                border-color: var-get($theme, 'success-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'success-secondary-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-warning {
+            %upload-button {
+                border-color: var-get($theme, 'warning-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'warning-secondary-color');
+                    }
+                }
+            }
+        }
+
+        %form-group-display--file-border-error {
+            %upload-button {
+                border-color: var-get($theme, 'error-secondary-color');
+            }
+
+            %form-group-bundle {
+                &:hover {
+                    %upload-button {
+                        border-color: var-get($theme, 'error-secondary-color');
+                    }
+                }
+            }
+        }
+    }
+
+    %form-group-display--file {
+        %form-group-bundle {
+            grid-template-columns: auto auto auto 1fr auto;
+        }
+
+        %form-group-file-input {
+            grid-area: 1/3 / span 1 / span 2;
+            flex-grow: 1;
+            padding-inline: rem(4px);
+            cursor: pointer;
+
+            @if $variant != 'material' {
+                display: flex;
+                align-items: center;
+
+                span {
+                    transform: revert;
+                    inset: revert;
+                }
+            }
+        }
+
+        %igx-input-group__notch {
+            grid-area: 1 / 3;
+        }
+
+        %form-group-bundle-end {
+            grid-area: 1 / 5;
+        }
+
+        %igx-input-group__filler {
+            grid-area: 1 / 4;
+        }
+
+        %form-group-bundle-end {
+            grid-area: 1 / 5;
+        }
+
+        %form-group-bundle-main {
+            display: contents;
+        }
+
+        %form-group-input {
+            grid-column: 2 / -2;
+            grid-row: 1 / -1;
+            border: none;
+            inset: 0;
+            width: 100%;
+            appearance: none;
+            opacity: 0;
+            z-index: 2;
+            cursor: pointer;
+        }
+
+        ::file-selector-button {
+            cursor: pointer;
+        }
+    }
+
+    %upload-button {
+        display: flex;
+        align-items: center;
+        grid-area: 1 / 2;
+        pointer-events: none;
+        height: var-get($theme, 'size');
+        cursor: pointer;
+        overflow: hidden;
+    }
+
+    %form-group-display--bootstrap-file {
+        %form-group-bundle-start,
+        %form-group-bundle-end {
+            [igxPrefix],
+            igx-prefix {
+                height: var-get($theme, 'size');
+            }
+        }
+    }
+
+    %bootstrap-upload-button {
+        border: rem(1px) solid var-get($theme, 'border-color');
+        border-inline-end: 0;
+
+        igx-button {
+            border: 0;
+        }
+    }
+
+    %bootstrap-file-disabled-upload-button {
+        border-color: var-get($theme, 'disabled-border-color');
+    }
+
+    %bootstrap-file-focused,
+    %bootstrap-file-valid,
+    %bootstrap-file-warning,
+    %bootstrap-file-invalid,
+    {
+        %form-group-bundle {
+            border-radius: var-get($theme, 'box-border-radius');
+            transition: box-shadow .15s ease-out, border .15s ease-out;
+
+            &:hover {
+                %form-group-file-input {
+                    box-shadow: none;
+                }
+            }
+        }
+
+        %form-group-file-input {
+            box-shadow: none;
+        }
+    }
+
+    %bootstrap-file-focused {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'focused-border-color');
+        }
+
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
+        }
+    }
+
+    %bootstrap-file-valid {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %bootstrap-file-warning {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'warning-secondary-color');
+        }
+    }
+
+    %bootstrap-file-invalid {
+        %form-group-bundle-start,
+        %form-group-bundle-end,
+        %upload-button {
+            border-color: var-get($theme, 'error-secondary-color');
+        }
+    }
+
+    %bootstrap-file-valid-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');
+        }
+    }
+
+    %bootstrap-file-warning-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+        }
+    }
+
+    %bootstrap-file-invalid-focused {
+        %form-group-bundle {
+            box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        %form-group-display--file-focused {
+            %form-group-bundle-start,
+            %form-group-bundle-end,
+            %upload-button {
+                border-color: var-get($theme, 'focused-border-color');
+            }
+        }
+    }
+
+    .igx-input-group--bootstrap:not(.igx-input-group--prefixed) {
+        .igx-input-group__upload-button {
+            border-radius: var-get($theme, 'box-border-radius') 0 0 var-get($theme, 'box-border-radius');
+        }
+
+        .igx-input-group__file-input {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+    }
+
     %form-group-bundle--box {
         // padding 0 is needed here because of the search variant
         padding: 0 !important;
@@ -1521,11 +1280,13 @@
         overflow: hidden;
         padding-block-start: $input-top-padding;
         padding-block-end: $input-bottom-padding;
-        height: calc(var-get($theme, 'size') - 2px);
+        height: var-get($theme, 'size');
+        max-height: 100%;
         color: var-get($theme, 'filled-text-color');
 
         span {
             @include ellipsis();
+
             position: relative;
             display: inline-block;
             width: inherit;
@@ -1540,22 +1301,6 @@
         }
     }
 
-    %form-group-clear-icon {
-        &:focus {
-            background-color: color($color: 'primary', $variant: 500);
-            color: contrast-color($color: 'primary', $variant: 600);
-
-            @if $variant == 'material' {
-                background-color: transparent;
-                color: color($color: 'secondary', $variant: 500);
-            }
-
-            @if $variant == 'bootstrap' {
-                color: contrast-color($color: 'primary', $variant: 600);
-            }
-        }
-    }
-
     // This is a hack that removes the autofill background and it's essential,
     // otherwise the background is on top of the floating label in material theme.
     // The !important flag is because bootstrap theme(and potentially feature themes) is overriding the transition delay.
@@ -1567,18 +1312,12 @@
         &:autofill,
         &:autofill:hover,
         &:autofill:focus,
-        &:autofill:active, {
+        &:autofill:active {
             -webkit-transition-delay: 99999s !important;
             transition-delay: 99999s !important;
         }
     }
 
-    %edge-clear-icon-fix {
-        &::-ms-clear {
-            display: none;
-        }
-    }
-
     %form-group-file-input-indigo {
         padding-block: 0;
     }
@@ -1611,6 +1350,14 @@
         }
     }
 
+    %form-group-file-input--disabled {
+        cursor: default;
+
+        &::placeholder {
+            color: var-get($theme, 'disabled-placeholder-color');
+        }
+    }
+
     %form-group-textarea {
         --textarea-size: #{sizable(
             rem(82px, map.get($base-scale-size, 'compact')),
@@ -1800,10 +1547,13 @@
     }
 
     %form-group-helper {
+        --ig-caption-margin-top: #{$hint-spacing-block};
+        --ig-caption-margin-bottom: 0;
+
         color: var-get($theme, 'helper-text-color');
         position: relative;
-        display: flex;
-        padding-block-start: $hint-spacing-block;
+        display: grid;
+        grid-auto-rows: minmax($hint-min-size, auto);
         padding-inline: $hint-spacing-inline;
 
         justify-content: space-between;
@@ -1817,11 +1567,7 @@
         }
 
         &:empty {
-            @if $variant == 'fluent' {
-                padding: 0;
-            } @else {
-                display: none;
-            }
+            display: none;
         }
     }
 
@@ -1943,13 +1689,6 @@
             border-bottom-style: solid;
         }
     }
-
-    %indigo-upload-button {
-        [igxButton] {
-            min-height: 0;
-            height: calc(100% - #{rem(8px)});
-        }
-    }
     // INDIGO END
 
     // ==============================================
@@ -2045,72 +1784,74 @@
 
     %form-group-bundle--fluent {
         --min-width: #{sizable(rem(4px), rem(6px), rem(8px))};
+        --_fluent-input-border-size: #{rem(1px)};
 
         min-height: var-get($theme, 'size');
         padding: 0;
-        border: rem(1px) solid var-get($theme, 'border-color');
         background: var-get($theme, 'border-background');
         align-items: stretch;
-        overflow: hidden;
-
-        @if $variant == 'fluent' {
-            border-radius: var-get($theme, 'border-border-radius');
-        }
-
-        // Those focus styles are needed since when we focus the button inside
-        // the file type input the class .igx-input-group--focused is not added but the input is focused.
-        &:focus,
-        &:focus-within {
-            %form-group-bundle-start {
-                margin-block-start: rem(-1px);
-                margin-inline-start: rem(-1px);
-            }
-
-            %form-group-bundle-end {
-                margin-block-start: rem(-1px);
-                margin-inline-end: rem(-1px);
-            }
-
-            %form-group-bundle-start:empty + %form-group-bundle-main,
-            %form-group-bundle-end:empty + %form-group-bundle-main {
-                margin-inline-start: rem(-1px);
-            }
+        overflow: visible;
+        border-radius: var-get($theme, 'border-border-radius');
+        position: relative;
+        border: rem(1px) solid transparent;
 
-            %form-group-bundle-main {
-                margin-block-start: rem(-1px);
-            }
+        &::before {
+            content: '';
+            position: absolute;
+            width: calc(100% + var(--_fluent-input-border-size) * 2);
+            height: calc(100% + var(--_fluent-input-border-size) * 2);
+            pointer-events: none;
+            user-select: none;
+            inset: calc(var(--_fluent-input-border-size) * -1);
+            z-index: 1;
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color');
+            border-radius: inherit;
         }
     }
 
     %form-group-bundle--fluent--hover {
-        border-color: var-get($theme, 'hover-border-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'hover-border-color');
+        }
     }
 
     %form-group-bundle--fluent--focus {
-        border-color: var-get($theme, 'focused-border-color');
-        border-width: rem(2px);
+        --_fluent-input-border-size: #{rem(2px)};
+
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
+        }
 
         &:hover {
-            border-color: var-get($theme, 'focused-border-color');
+            &::before {
+                box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'focused-border-color');
+            }
         }
     }
 
     %form-group-bundle-error--fluent,
     %form-group-bundle-error--fluent--hover,
     %form-group-bundle-error--fluent--focus {
-        border-color: var-get($theme, 'error-secondary-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'error-secondary-color');
+        }
     }
 
     %form-group-bundle-success--fluent,
     %form-group-bundle-success--fluent--hover,
     %form-group-bundle-success--fluent--focus {
-        border-color: var-get($theme, 'success-secondary-color');
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'success-secondary-color');
+        }
     }
 
     %form-group-bundle--fluent--hover-disabled,
     %form-group-bundle--fluent-disabled {
-        border-color: var-get($theme, 'disabled-border-color');
         background: var-get($theme, 'border-disabled-background');
+
+        &::before {
+            box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'disabled-border-color');
+        }
     }
 
     %form-group-bundle-main--fluent {
@@ -2118,27 +1859,6 @@
         cursor: default;
     }
 
-    @if $fluent-theme {
-        %form-group-bundle-start--fluent--focused {
-            margin-block-start: rem(-1px);
-            margin-inline-start: rem(-1px);
-        }
-
-        %form-group-bundle-end--fluent--focused {
-            margin-block-start: rem(-1px);
-            margin-inline-end: rem(-1px);
-        }
-
-        %form-group-bundle-start--fluent--focused:empty + %form-group-bundle-main--fluent--focused,
-        %form-group-bundle-end--fluent--focused:empty + %form-group-bundle-main--fluent--focused {
-            margin-inline-start: rem(-1px);
-        }
-
-        %form-group-bundle-main--fluent--focused {
-            margin-block-start: rem(-1px);
-        }
-    }
-
     %form-group-bundle-textarea-start--fluent,
     %form-group-bundle-textarea-end--fluent {
         &:empty {
@@ -2155,6 +1875,10 @@
         border: none;
     }
 
+    %fluent-file-input {
+        padding-inline: 0;
+    }
+
     %indigo-textarea {
         padding-block: rem(6px);
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
@@ -2180,6 +1904,8 @@
         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);
@@ -2216,10 +1942,6 @@
         transform: translateY(0) scale(1);
     }
 
-    %form-group-helper--textarea--fluent--focused {
-        margin-block-start: rem(-1px);
-    }
-
     %fluent-placeholder-label {
         transform: translateY(0) scale(1);
     }
@@ -2261,9 +1983,6 @@
         }
     }
 
-    %fluent-upload-button {
-        padding: 0;
-    }
     // FLUENT END
 
     // ==============================================
@@ -2296,6 +2015,39 @@
                 };
             }
         }
+
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-inline-start: rem(1px) solid var-get($theme, 'border-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-focused {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'focused-border-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-valid {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'success-secondary-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-form-group-display--bootstrap-suffixed-warning {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'warning-secondary-color');
+        }
+    }
+
+    %form-group-display--bootstrap-suffixed-invalid {
+        .igx-input-group__clear-icon + igx-suffix,
+        .igx-input-group__clear-icon + [igxPrefix] {
+            border-color: var-get($theme, 'error-secondary-color');
+        }
     }
 
     %form-group-display--disabled-bootstrap {
@@ -2405,7 +2157,9 @@
     %bootstrap-input {
         height: auto;
         line-height: 1.5;
+        grid-area: 1 / 2;
         margin: 0;
+        z-index: 2;
         font-size: pad(
             map.get($bootstrap-font-size, 'compact'),
             map.get($bootstrap-font-size, 'cosy'),
@@ -2445,15 +2199,24 @@
             map.get($bootstrap-inline-padding, 'cosy'),
             map.get($bootstrap-inline-padding, 'comfortable')
         );
-        grid-area: 1 / 2 / auto / auto;
         border-radius: var-get($theme, 'box-border-radius');
-        z-index: 1;
+
     }
 
     %bootstrap-file-input {
         height: inherit;
     }
 
+    %bootstrap-input-file {
+        grid-column: 2 / -2;
+        grid-row: 1 / -1;
+        height: var-get($theme, 'size');
+    }
+
+    %bootstrap-bundle-end {
+        grid-area: 1 / 5;
+    }
+
     %bootstrap-input--focus {
         border: rem(1px) solid var-get($theme, 'focused-border-color');
         box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');
@@ -2471,6 +2234,11 @@
         }
     }
 
+    %bootstrap-input--warning {
+        border: rem(1px) solid var-get($theme, 'warning-secondary-color');
+        box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: '500', $opacity: .38);
+    }
+
     %bootstrap-input--error {
         border: rem(1px) solid var-get($theme, 'error-secondary-color');
 
@@ -2501,6 +2269,11 @@
         box-shadow: none;
     }
 
+    %bootstrap-file-input--disabled {
+        border: rem(1px) solid var-get($theme, 'disabled-border-color');
+        box-shadow: none;
+    }
+
     %bootstrap-input--search {
         transform: translateY(0);
     }
@@ -2511,16 +2284,6 @@
         border-color: var-get($theme, 'disabled-border-color');
         color: var-get($theme, 'disabled-text-color');
     }
-
-    // Upload button for file type input
-    %bootstrap-upload-button {
-        padding: 0;
-
-        [igxButton] {
-            min-height: 0;
-            height: calc(100% - #{rem(8px)});
-        }
-    }
 }
 
 /// Adds typography styles for the igx-input-group component.
@@ -2544,9 +2307,7 @@
     }
 
     %form-group-helper {
-        @include type-style($helper-text) {
-            margin: 0;
-        }
+        @include type-style($helper-text);
     }
 
     %form-group-prefix,