@progress/kendo-theme-fluent 6.4.0-dev.0 → 6.4.0-dev.2

package/scss/fab/_variables.scss

@@ -3,127 +3,133 @@
 @use "../core/" as *;
 @use "../button/_variables.scss" as *;
 
-/// Width of the border around the FAB.
+/// The width of the border around the FAB.
 /// @group floating-action-button
 $kendo-fab-border-width: 1px !default;
-/// Border radius of the FAB.
+/// The border radius of the FAB.
 /// @group floating-action-button
 $kendo-fab-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Font family of the FAB.
+/// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the FAB.
+/// The font size of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the FAB.
+/// The line height of the FAB.
 /// @group floating-action-button
 $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Horizontal padding of the FAB.
+/// The horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the small FAB.
+/// @group floating-action-button
 $kendo-fab-sm-padding-x: math.div( $kendo-fab-padding-x, 2 ) !default;
+/// The horizontal padding of the medium FAB.
+/// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+/// The horizontal padding of the large FAB.
+/// @group floating-action-button
 $kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
 
-/// Vertical padding of the FAB.
+/// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
+/// The vertical padding of the small FAB.
+/// @group floating-action-button
 $kendo-fab-sm-padding-y: math.div( $kendo-fab-padding-y, 2 ) !default;
+/// The vertical padding of the medium FAB.
+/// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+/// The vertical padding of the large FAB.
+/// @group floating-action-button
 $kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
 
-/// Offset of the focused FAB.
+/// The offset of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-offset: $kendo-button-focus-offset !default;
-/// Outline width of the focused FAB.
+/// The outline width of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-outline-width: $kendo-button-focus-outline-width !default;
-/// Outline style of the focused FAB.
+/// The outline style of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
 
-/// FAB icon width.
+/// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-width: 20px !default;
-/// FAB icon height.
+$kendo-fab-icon-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The vertical padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-height: $kendo-fab-icon-width !default;
-/// FAB icon spacing.
+$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
+/// The spacing of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-/// FAB items horizontal padding.
+/// The horizontal padding of the FAB items.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
-/// FAB items vertical padding.
+/// The vertical padding of the FAB items.
 /// @group floating-action-button
 $kendo-fab-items-padding-y: map.get( $kendo-spacing, 4 ) !default;
 
-/// FAB item text horizontal padding.
+/// The horizontal padding of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-x: map.get( $kendo-spacing, 1 ) !default;
-/// FAB item text vertical padding.
+/// The vertical padding of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// Width of the FAB item text border.
+/// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
-/// Border style of the FAB item text.
+/// The border style of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-border-style: solid !default;
-/// Border radius of the FAB item text.
+/// The border radius of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Font size of the FAB item text.
+/// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Line height of the FAB item text.
+/// The line height of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
-/// The bottom margin of the FAB item.
+/// The bottom margin of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-offset-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// Offset of the focused FAB item.
+/// The offset of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-offset: $kendo-button-focus-offset !default;
-/// Outline width of the focused FAB item.
+/// The outline width of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-outline-width: $kendo-button-focus-outline-width !default;
-/// Outline style of the focused FAB item.
+/// The outline style of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
-/// FAB item icon horizontal padding.
+/// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// FAB item icon vertical padding.
+$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
+/// The vertical padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Width of the FAB item icon border.
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// The border width of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-width: 1px !default;
-/// Border style of the FAB item icon.
+/// The border style of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-style: solid !default;
-/// Border radius of the FAB item icon.
+/// The border radius of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
-/// Width of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-width: 20px !default;
-/// Height of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
-/// Theme colors map for the FAB.
+/// The theme colors map for the FAB.
 /// @group floating-action-button
 $kendo-fab-theme-colors: (
     solid: map.get( $kendo-button-theme-colors, "solid")
 ) !default;
 
-/// Sizes map for the FAB.
+/// The size map for the FAB.
 /// @group floating-action-button
 $kendo-fab-sizes: (
     sm: (
@@ -152,30 +158,30 @@ $kendo-fab-item-bg: var( --kendo-component-bg, inherit ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-border: get-theme-color-var( neutral-110 ) !default;
-/// The hover text color of the FAB item.
+/// The text color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
-/// The hover background color of the FAB item.
+/// The background color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
-/// The hover border color of the FAB item.
+/// The border color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-border: get-theme-color-var( neutral-110 ) !default;
-/// The focus text color of the FAB item.
+/// The text color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-text: get-theme-color-var( neutral-160 ) !default;
-/// The focus background color of the FAB item.
+/// The background color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-bg: var( --kendo-component-bg, inherit ) !default;
-/// The focus border color of the FAB item.
+/// The border color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-border: get-theme-color-var( neutral-110 ) !default;
-/// The active text color of the FAB item.
+/// The text color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
-/// The active background color of the FAB item.
+/// The background color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit ) !default;
-/// The active border color of the FAB item.
+/// The border color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-border: get-theme-color-var( neutral-110 ) !default;

package/scss/filemanager/_layout.scss

@@ -1,4 +1,4 @@
-@use "../icon/_variables.scss"as *;
+@use "../icon/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-file-manager--layout() {
@@ -104,11 +104,6 @@
             justify-content: center;
         }
 
-        // File icon
-        .k-file-icon {
-            font-size: var( --kendo-file-manager-listview-item-icon-size, #{$kendo-file-manager-listview-item-icon-size} );
-        }
-
         // File name
         .k-file-name {
             margin-block-start: calc( var( --kendo-file-manager-spacer, #{$kendo-file-manager-spacer} ) / 2 );
@@ -155,7 +150,7 @@
         padding-block-start:  calc( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 3 );
         padding-block-end: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} );
         width: var( --kendo-file-manager-preview-width, #{$kendo-file-manager-preview-width} );
-        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + ( var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} ) * 2 ) + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
+        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + var( --kendo-icon-size, 1rem ) * 2 + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
         border-width: 0;
         border-left-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-preview-border-width} );
         border-style: solid;
@@ -172,11 +167,6 @@
             justify-content: center;
         }
 
-        // File icon
-        .k-file-icon {
-            font-size: var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} );
-        }
-
         // File name
         .k-file-name {
             margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );

package/scss/filemanager/_variables.scss

@@ -105,9 +105,6 @@ $kendo-file-manager-listview-item-width: 120px !default;
 /// @group filemanager
 $kendo-file-manager-listview-item-height: 120px !default;
 
-/// Size of the listview item icon.
-/// @group filemanager
-$kendo-file-manager-listview-item-icon-size: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
 /// Background color of the listview item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-bg: transparent !default;
@@ -174,9 +171,6 @@ $kendo-file-manager-preview-text: inherit !default;
 /// @group filemanager
 $kendo-file-manager-preview-border: inherit !default;
 
-/// Size of the preview icon.
-/// @group filemanager
-$kendo-file-manager-preview-icon-size: calc( var( --kendo-icon-size, 1rem ) * 6 ) !default;
 /// Background color of the preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-bg: transparent !default;

package/scss/floating-label/_variables.scss

@@ -1,70 +1,70 @@
 @use "../core/" as *;
 @use "../input/_variables.scss" as *;
 
-/// The resize scale of the floating label
+/// The transformation scale of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-scale: 1 !default;
 
-/// The font size of the floating label
+/// The font size of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The max-width of the floating label
+/// The maximum width of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-max-width: 90% !default;
 
-/// The font weight of the floating label
+/// The font weight of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
 
-/// The line height of the floating label
+/// The line height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The height of the floating label
+/// The height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
 
-/// The horizontal offset of the floating label
+/// The horizontal offset of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-offset-x: calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) !default;
 
-/// The vertical offset of the floating label
+/// The vertical offset of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) !default;
 
-/// The focus resize scale of the floating label
+/// The transformation scale of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-scale: 1 !default;
 
-/// The horizontal focus offset of the floating label
+/// The horizontal offset of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-offset-x: 0 !default;
 
-/// The vertical focus offset of the floating label
+/// The vertical offset of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-offset-y: 0 !default;
 
-/// The transition of the floating label
+/// The transition of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-transition: .2s ease-out !default;
 
-/// The background color of the floating label
+/// The background color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-bg: inherit !default;
 
-/// The text color of the floating label
+/// The text color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-text: inherit !default;
 
-/// The focus background color of the floating label
+/// The background color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-bg: inherit !default;
 
-/// The focus text color of the floating label
+/// The text color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-text: inherit !default;
 
-/// The invalid text color of the floating label
+/// The invalid text color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;

package/scss/forms/_variables.scss

@@ -1,63 +1,69 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The padding of the inline form
+/// The padding of the inline Form.
 /// @group form
 $kendo-form-spacer: ( $kendo-padding-md-x * 2 ) !default;
 
-/// The font size of the form
+/// The font size of the Form.
 /// @group form
 $kendo-form-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The line heights of the form
+/// The line height of the Form.
 /// @group form
 $kendo-form-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the Form in em units.
+/// @group form
 $kendo-form-line-height-em: $kendo-line-height-em !default;
+/// The line height of the small Form.
+/// @group form
 $kendo-form-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height of the large Form.
+/// @group form
 $kendo-form-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
-/// The margin of the form fieldset
+/// The margin of the Form fieldset.
 /// @group form
 $kendo-form-fieldset-margin: 2em 0 0 !default;
 
-/// The padding of the form fieldset
+/// The padding of the Form fieldset.
 /// @group form
 $kendo-form-fieldset-padding: 0px !default;
 
-/// The margin of the form legend
+/// The margin of the Form legend.
 /// @group form
 $kendo-form-legend-margin: 0 0 map.get( $kendo-spacing, 3 ) !default;
 
-/// The padding of the form legend
+/// The padding of the Form legend.
 /// @group form
 $kendo-form-legend-padding: 0px !default;
 
-/// The border width of the form legend
+/// The border width of the Form legend.
 /// @group form
 $kendo-form-legend-border-width: 0 0 map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-/// The border style of the form legend
+/// The border style of the Form legend.
 /// @group form
 $kendo-form-legend-border-style: solid !default;
 
-/// The border color of the form legend
+/// The border color of the Form legend.
 /// @group form
 $kendo-form-legend-border-color: var( --kendo-component-border, initial ) !default;
 
-/// The width of the form legend
+/// The width of the Form legend.
 /// @group form
 $kendo-form-legend-width: 100% !default;
 
-/// The font size of the form legend
+/// The font size of the Form legend.
 /// @group form
 $kendo-form-legend-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The text capitalization of the form legend
+/// The text capitalization of the Form legend.
 /// @group form
 $kendo-form-legend-text-transform: uppercase !default;
 
 
-/// The bottom margin of the form label
+/// The bottom margin of the Form label.
 /// @group form
 $kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
 
@@ -65,91 +71,113 @@ $kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
 /// @group form
 $kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
 
-/// The horizontal margin of the form button
+/// The horizontal margin of the Form buttons.
 /// @group form
 $kendo-form-button-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// The font size of the form hint
+/// The font size of the Form hint.
 /// @group form
 $kendo-form-hint-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
-/// The font style of the form hint
+/// The font style of the Form hint.
 /// @group form
 $kendo-form-hint-font-style: normal !default;
 
-/// The top margin of the form hint
+/// The top margin of the Form hint.
 /// @group form
 $kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
 
-/// The text color of the font hint
+/// The text color of the Form hint.
 /// @group form
 $kendo-form-hint-text: get-theme-color-var( neutral-130 ) !default;
 
-/// Form row small size spacing
+/// The row spacing of the small Form.
 /// @group form
 $kendo-form-sm-rows-spacing: map.get( $kendo-spacing, 3 ) !default;
-/// Form row medium size spacing
+/// The row spacing of the medium Form.
 /// @group form
 $kendo-form-md-rows-spacing: $kendo-form-sm-rows-spacing !default;
-/// Form row large size spacing
+/// The row spacing of the large Form.
 /// @group form
 $kendo-form-lg-rows-spacing: $kendo-form-sm-rows-spacing !default;
 
-/// The margin of the form separator
+/// The margin of the Form separator.
 /// @group form
 $kendo-form-separator-margin: map.get( $kendo-spacing, 3 ) 0 0 !default;
 
-/// The border color of the form separator
+/// The border color of the Form separator.
 /// @group form
 $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
-/// The top padding of the horizontal form label
+/// The top padding of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-padding-top: map.get( $kendo-spacing, 1.5 ) !default;
 
-/// The horizontal margin of the horizontal form
+/// The horizontal margin of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// The width of the horizontal form label
+/// The width of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-width: 25% !default;
 
-/// The horizontal alignment of the form label
+/// The horizontal alignment of the label in the horizontal Form.
+/// @group form
 $kendo-horizontal-form-label-align: flex-end !default;
 
-/// The max-width of the horizontal form
+/// The maximum width of the field wrap in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;
 
-/// The width of the element of the inline form
+/// The width of the inline Form element.
 /// @group form
 $kendo-inline-form-element-width: 25% !default;
 
-/// The invalid text color of the form
+/// The invalid text color of the Form.
 /// @group form
 $kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
 
 
-// Label
+/// The horizontal margin of the optional label in the Form.
+/// @group form
 $kendo-label-optional-margin-x: map.get( $kendo-spacing, 1.5 ) !default;
+/// The font size of the optional label in the Form.
+/// @group form
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font style of the optional label in the Form.
+/// @group form
 $kendo-label-optional-font-style: normal !default;
 
 
-// Fieldset
+/// The margin of the Form fieldset.
+/// @group form
 $kendo-fieldset-margin: map.get( $kendo-spacing, 7.5 ) !default;
+/// The font size of the Form fieldset.
+/// @group form
 $kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;
 
+/// The background color of the Form fieldset.
+/// @group form
 $kendo-fieldset-bg: transparent !default;
+/// The text color of the Form fieldset.
+/// @group form
 $kendo-fieldset-text: inherit !default;
+/// The border color of the Form fieldset.
+/// @group form
 $kendo-fieldset-border: initial !default;
 
+/// The background color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-bg: transparent !default;
+/// The text color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-text: get-theme-color-var( neutral-130 ) !default;
+/// The border color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-border: initial !default;
 
-// Sizes
+/// The sizes map for the Form.
+/// @group form
 $kendo-form-sizes: (
     sm: (
         form-rows-spacing: $kendo-form-sm-rows-spacing

package/scss/grid/_layout.scss

@@ -190,11 +190,15 @@
             > .k-svg-icon {
                 padding-inline: 0;
                 padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
-                width: 100%;
-                height: 100%;
                 display: inline-block;
                 outline: 0;
             }
+
+            > .k-icon {
+                width: 100%;
+                height: 100%;
+            }
+
         }
 
         .k-hierarchy-cell + .k-grid-content-sticky {

package/scss/icon/_layout.scss

@@ -28,13 +28,16 @@
     }
 
     // RTL icons
-    .k-rtl .k-i-indent-increase,
-    .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-caret-alt-right,
-    .k-rtl .k-i-caret-alt-down,
-    [dir="rtl"] .k-i-caret-alt-right,
-    [dir="rtl"] .k-i-caret-alt-down {
-        transform: scaleX(-1);
+    .k-rtl,
+    [dir="rtl"] {
+        .k-i-indent-increase,
+        .k-i-indent-decrease,
+        .k-i-caret-alt-right,
+        .k-i-caret-alt-left,
+        .k-svg-i-caret-alt-right,
+        .k-svg-i-caret-alt-left {
+            transform: scaleX(-1);
+        }
     }
 
     .k-icon-action {

package/scss/input/_layout.scss

@@ -36,8 +36,8 @@
             box-sizing: border-box;
         }
 
-        .k-input,
-        .k-picker {
+        > .k-input,
+        > .k-picker {
             border-width: 0 !important; // sass-lint:disable-line no-important
             color: inherit;
             background: none;
@@ -226,14 +226,15 @@
     .k-input-prefix > .k-svg-icon,
     .k-input-suffix > .k-icon,
     .k-input-suffix > .k-svg-icon {
-        width: var( --INTERNAL--kendo-input-icon-size, min-content );
-        height: var( --INTERNAL--kendo-input-icon-size, min-content );
+        padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
+        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         flex: none;
         align-self: center;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
+        box-sizing: content-box;
     }
 
     // Input with SVG icon