@progress/kendo-theme-fluent 10.1.0-dev.2 → 10.1.0-dev.4

package/dist/meta/{variables.scss → _variables.scss}

@@ -1,10 +1,11 @@
 @use "sass:meta";
+@use "sass:string";
 @use "../all.scss";
 
 $_vars: meta.module-variables("all");
 
 body {
     @each $key, $val in $_vars {
-        var: k-resolve-var( unquote($key), meta.type-of( $val ), $val ); // stylelint-disable-line
+        var: k-resolve-var( string.unquote($key), meta.type-of( $val ), $val ); // stylelint-disable-line
     }
 }

package/dist/meta/sassdoc-data.json

@@ -31696,7 +31696,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-form-spacer",
-                "value": "calc( #{k-spacing(2)} * 2 )",
+                "value": "k-spacing(4)",
                 "scope": "default",
                 "line": {
                     "start": 7,
@@ -31711,8 +31711,8 @@
                 "path": "fluent/scss/forms/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2)",
-            "resolvedType": "Calculation"
+            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedType": "String"
         },
         {
             "description": "The font size of the Form.\n",
@@ -39726,7 +39726,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-image-editor-action-pane-width",
-                "value": "if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )",
+                "value": "if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )",
                 "scope": "default",
                 "line": {
                     "start": 70,
@@ -39741,7 +39741,7 @@
                 "path": "fluent/scss/imageeditor/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "240px",
+            "resolvedValue": "270px",
             "resolvedType": "Number"
         },
         {
@@ -54388,7 +54388,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-panelbar-header-padding-x-start",
-                "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+                "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -54403,7 +54403,7 @@
                 "path": "fluent/scss/panelbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))",
+            "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))",
             "resolvedType": "Calculation"
         },
         {
@@ -54469,7 +54469,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-panelbar-item-padding-x-start",
-                "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+                "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -54484,7 +54484,7 @@
                 "path": "fluent/scss/panelbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))",
+            "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))",
             "resolvedType": "Calculation"
         },
         {
@@ -89465,8 +89465,8 @@
         {
             "description": "",
             "commentRange": {
-                "start": 583,
-                "end": 587
+                "start": 584,
+                "end": 588
             },
             "context": {
                 "type": "variable",
@@ -89474,8 +89474,8 @@
                 "value": "black",
                 "scope": "default",
                 "line": {
-                    "start": 588,
-                    "end": 588
+                    "start": 589,
+                    "end": 589
                 }
             },
             "link": [
@@ -89501,8 +89501,8 @@
         {
             "description": "Default light color for WCAG 2.0.\n",
             "commentRange": {
-                "start": 589,
-                "end": 591
+                "start": 590,
+                "end": 592
             },
             "context": {
                 "type": "variable",
@@ -89510,8 +89510,8 @@
                 "value": "white",
                 "scope": "default",
                 "line": {
-                    "start": 592,
-                    "end": 592
+                    "start": 593,
+                    "end": 593
                 }
             },
             "type": "Color",
@@ -91820,8 +91820,8 @@
                 {
                     "description": "",
                     "commentRange": {
-                        "start": 583,
-                        "end": 587
+                        "start": 584,
+                        "end": 588
                     },
                     "context": {
                         "type": "variable",
@@ -91829,8 +91829,8 @@
                         "value": "black",
                         "scope": "default",
                         "line": {
-                            "start": 588,
-                            "end": 588
+                            "start": 589,
+                            "end": 589
                         }
                     },
                     "link": [
@@ -91856,8 +91856,8 @@
                 {
                     "description": "Default light color for WCAG 2.0.\n",
                     "commentRange": {
-                        "start": 589,
-                        "end": 591
+                        "start": 590,
+                        "end": 592
                     },
                     "context": {
                         "type": "variable",
@@ -91865,8 +91865,8 @@
                         "value": "white",
                         "scope": "default",
                         "line": {
-                            "start": 592,
-                            "end": 592
+                            "start": 593,
+                            "end": 593
                         }
                     },
                     "type": "Color",
@@ -124302,7 +124302,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-form-spacer",
-                        "value": "calc( #{k-spacing(2)} * 2 )",
+                        "value": "k-spacing(4)",
                         "scope": "default",
                         "line": {
                             "start": 7,
@@ -124317,8 +124317,8 @@
                         "path": "fluent/scss/forms/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2)",
-                    "resolvedType": "Calculation"
+                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The font size of the Form.\n",
@@ -132356,7 +132356,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-image-editor-action-pane-width",
-                        "value": "if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )",
+                        "value": "if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )",
                         "scope": "default",
                         "line": {
                             "start": 70,
@@ -132371,7 +132371,7 @@
                         "path": "fluent/scss/imageeditor/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "240px",
+                    "resolvedValue": "270px",
                     "resolvedType": "Number"
                 },
                 {
@@ -148621,7 +148621,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-panelbar-header-padding-x-start",
-                        "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+                        "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -148636,7 +148636,7 @@
                         "path": "fluent/scss/panelbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))",
+                    "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))",
                     "resolvedType": "Calculation"
                 },
                 {
@@ -148702,7 +148702,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-panelbar-item-padding-x-start",
-                        "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+                        "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
                         "scope": "default",
                         "line": {
                             "start": 51,
@@ -148717,7 +148717,7 @@
                         "path": "fluent/scss/panelbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))",
+                    "resolvedValue": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))",
                     "resolvedType": "Calculation"
                 },
                 {

package/dist/meta/sassdoc-raw-data.json

@@ -27277,7 +27277,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-form-spacer",
-            "value": "calc( #{k-spacing(2)} * 2 )",
+            "value": "k-spacing(4)",
             "scope": "default",
             "line": {
                 "start": 7,
@@ -34702,7 +34702,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-image-editor-action-pane-width",
-            "value": "if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) )",
+            "value": "if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) )",
             "scope": "default",
             "line": {
                 "start": 70,
@@ -47952,7 +47952,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-header-padding-x-start",
-            "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+            "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -48027,7 +48027,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-panelbar-item-padding-x-start",
-            "value": "calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) * 2 + var( --kendo-icon-size, 1rem ) )",
+            "value": "calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) )",
             "scope": "default",
             "line": {
                 "start": 51,
@@ -79805,8 +79805,8 @@
     {
         "description": "",
         "commentRange": {
-            "start": 583,
-            "end": 587
+            "start": 584,
+            "end": 588
         },
         "context": {
             "type": "variable",
@@ -79814,8 +79814,8 @@
             "value": "black",
             "scope": "default",
             "line": {
-                "start": 588,
-                "end": 588
+                "start": 589,
+                "end": 589
             }
         },
         "link": [
@@ -79841,8 +79841,8 @@
     {
         "description": "Default light color for WCAG 2.0.\n",
         "commentRange": {
-            "start": 589,
-            "end": 591
+            "start": 590,
+            "end": 592
         },
         "context": {
             "type": "variable",
@@ -79850,8 +79850,8 @@
             "value": "white",
             "scope": "default",
             "line": {
-                "start": 592,
-                "end": 592
+                "start": 593,
+                "end": 593
             }
         },
         "type": "Color",
@@ -80075,8 +80075,8 @@
     {
         "description": "Set a specific jump point for requesting color jumps\n",
         "commentRange": {
-            "start": 178,
-            "end": 180
+            "start": 179,
+            "end": 181
         },
         "context": {
             "type": "variable",
@@ -80084,8 +80084,8 @@
             "value": "8%",
             "scope": "default",
             "line": {
-                "start": 181,
-                "end": 181
+                "start": 182,
+                "end": 182
             }
         },
         "group": [

package/dist/meta/variables.json

@@ -7389,8 +7389,8 @@
         }
     },
     "kendo-form-spacer": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-2, 0.5rem) * 2)"
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
     },
     "kendo-form-font-size": {
         "type": "String",
@@ -12570,7 +12570,7 @@
     },
     "kendo-panelbar-header-padding-x-start": {
         "type": "Calculation",
-        "value": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))"
+        "value": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))"
     },
     "kendo-panelbar-header-padding-x-end": {
         "type": "String",
@@ -12582,7 +12582,7 @@
     },
     "kendo-panelbar-item-padding-x-start": {
         "type": "Calculation",
-        "value": "calc(var(--kendo-panelbar-icon-spacing, var(--kendo-spacing-2, 0.5rem)) * 2 + var(--kendo-icon-size, 1rem))"
+        "value": "calc(var(--kendo-spacing-2, 0.5rem) * 2 + var(--kendo-icon-size, 1rem))"
     },
     "kendo-panelbar-item-padding-x-end": {
         "type": "String",
@@ -15410,7 +15410,7 @@
     },
     "kendo-image-editor-action-pane-width": {
         "type": "Number",
-        "value": "240px"
+        "value": "270px"
     },
     "kendo-image-editor-crop-bg": {
         "type": "String",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.2",
+    "version": "10.1.0-dev.4",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.2",
+    "version": "10.1.0-dev.4",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.2",
+    "version": "10.1.0-dev.4",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "10.1.0-dev.2",
+  "version": "10.1.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -38,11 +38,12 @@
     }
   },
   "scripts": {
-    "build": "sass-build",
-    "watch": "npx sass --load-path=../../node_modules --watch ./scss/all.scss ./dist/all.css",
-    "sass": "sass-build",
-    "sass:standalone": "sass-build -c sass-standalone.config.js",
-    "sass:swatches": "gulp dist:swatches && sass-build -c sass-swatches.config.js",
+    "sass": "npm run sass:compile:all && npm run css:prefix",
+    "sass:dist": "gulp sass:dist --theme packages/fluent && npm run sass:compile:dist && npm run css:prefix",
+    "sass:compile:all": "npx sass --no-source-map --load-path=../../node_modules ./scss/all.scss ./dist/all.css",
+    "sass:compile:dist": "npx sass --style=compressed --no-source-map --load-path=../../node_modules ./dist:dist",
+    "sass:watch": "npx sass --no-source-map --load-path=../../node_modules --watch ./scss/all.scss ./dist/all.css",
+    "css:prefix": "npx postcss --replace ./dist/**/*.css",
     "docs": "node ../../scripts/sassdoc.js",
     "predocs": "npm run resolve-variables",
     "resolve-variables": "node ../../scripts/resolve-variables.js",
@@ -53,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.2",
-    "@progress/kendo-theme-utils": "10.1.0-dev.2"
+    "@progress/kendo-theme-core": "10.1.0-dev.4",
+    "@progress/kendo-theme-utils": "10.1.0-dev.4"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "3bdbfbae6356962c8f37ba63b38f124e37f00e1a"
+  "gitHead": "4089693fbd3a10aebc8155f11e7b7b7f814be2be"
 }

package/scss/chat/_layout.scss

@@ -342,7 +342,6 @@
 
     .k-chat .k-card-deck {
         max-width: calc( 100% + calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ); // prevent overflowing in the parent element
-        max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ) );
         box-sizing: border-box;
         margin-inline: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
         padding-block-start: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );

package/scss/colorgradient/_layout.scss

@@ -165,9 +165,10 @@
         }
 
         .k-contrast-validation {
+            --INTERNAL--kendo-color-gradient-contrast-spacing: var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} );
             display: inline-flex;
             align-items: center;
-            gap: calc( var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} ) / 2 );
+            gap: calc( var( --INTERNAL--kendo-color-gradient-contrast-spacing ) / 2 );
 
             .k-icon {
                 vertical-align: middle;

package/scss/core/_index.scss

@@ -19,7 +19,7 @@
 // Variables
 @forward "./_variables.scss";
 
-@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
+@forward "@progress/kendo-theme-core/scss/index.scss" with (
     $kendo-enable-color-system: $kendo-enable-color-system !default,
     $kendo-nested-disabled: false !default,
     // Color System
@@ -40,7 +40,7 @@
     $kendo-line-height: $kendo-line-height !default,
 
     $kendo-letter-spacing: $kendo-letter-spacing !default,
-    
+
     $kendo-font-family: $kendo-font-family !default,
     // Spacing
     $_default-spacing: $kendo-spacing,

package/scss/core/color-system/_swatch-legacy.scss

@@ -1,6 +1,6 @@
 @use "sass:meta";
 @use "sass:map";
-@use "@progress/kendo-theme-core/scss/index.import.scss" as *;
+@use "@progress/kendo-theme-core/scss/index.scss" as *;
 
 // Legacy
 

package/scss/forms/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: calc( #{k-spacing(2)} * 2 ) !default;
+$kendo-form-spacer: k-spacing(4) !default;
 
 /// The font size of the Form.
 /// @group form

package/scss/gantt/_index.scss

@@ -9,6 +9,7 @@
 @use "../window/_index.scss" as *;
 @use "../splitter/_index.scss" as *;
 @use "../treelist/_index.scss" as *;
+@use "../time-marker/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -27,6 +28,7 @@
         @include kendo-window--styles();
         @include kendo-splitter--styles();
         @include kendo-treelist--styles();
+        @include kendo-time-marker--styles();
         @include kendo-gantt--layout();
         @include kendo-gantt--theme();
         @include kendo-utils--typography--white-space();

package/scss/gantt/_layout.scss

@@ -455,6 +455,7 @@
     }
     .k-task-start { inset-inline-start: 0; }
     .k-task-end { inset-inline-end: 0; }
+
     .k-task-draghandle {
         margin-inline-start: 16px;
         width: 0;
@@ -465,9 +466,10 @@
         position: absolute;
         bottom: 0;
         // display: none;
-        cursor: e-resize;
+        cursor: ew-resize;
         visibility: hidden;
     }
+
     .k-task-wrap:hover .k-task-draghandle {
         visibility: visible;
     }
@@ -543,18 +545,28 @@
             opacity: .5;
             z-index: 2;
             visibility: hidden;
+            cursor: ew-resize;
         }
+
         .k-resize-handle::before {
             position: absolute;
             top: 2px;
             bottom: 2px;
         }
-        .k-resize-w { left: 0; }
+
+        .k-resize-w {
+            left: 0;
+        }
+
         .k-resize-w::before {
             left: 2px;
             border-left-width: 1px;
         }
-        .k-resize-e { right: 0; }
+
+        .k-resize-e {
+            right: 0;
+        }
+
         .k-resize-e::before {
             right: 2px;
             border-left-width: 1px;

package/scss/grid/_layout.scss

@@ -845,9 +845,9 @@
         }
 
         .k-grid-row-sticky td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt td.k-grid-content-sticky,
+        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt .k-table-td.k-grid-content-sticky {
+        .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
             z-index: 3;
         }
 

package/scss/imageeditor/_layout.scss

@@ -112,14 +112,16 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - var( --kendo-image-editor-resize-left-offset, #{$kendo-image-editor-resize-left-offset} ) );
+            --INTERNAL--kendo-image-editor-resize-left-offset: var( --kendo-image-editor-resize-left-offset, #{$kendo-image-editor-resize-left-offset} );
+            left: calc( 50% - var( --INTERNAL--kendo-image-editor-resize-left-offset ) );
             width: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - var( --kendo-image-editor-resize-top-offset, #{$kendo-image-editor-resize-top-offset} ) );
+            --INTERNAL--kendo-image-editor-resize-top-offset: var( --kendo-image-editor-resize-top-offset, #{$kendo-image-editor-resize-top-offset} );
+            top: calc( 50% - var( --INTERNAL--kendo-image-editor-resize-top-offset ) );
             width: 0;
             height: var( --kendo-image-editor-resize-handle-size, #{$kendo-image-editor-resize-handle-size} );
         }

package/scss/imageeditor/_variables.scss

@@ -67,7 +67,7 @@ $kendo-image-editor-action-pane-padding-y: k-spacing(3) !default;
 $kendo-image-editor-action-pane-padding-x: k-spacing(3) !default;
 /// Imageeditor action pane width.
 /// @group imageeditor
-$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 240px, calc( 240px + #{$kendo-image-editor-content-border-width}) ) !default;
+$kendo-image-editor-action-pane-width: if( $kendo-image-editor-content-border-width == 0, 270px, calc( 270px + #{$kendo-image-editor-content-border-width}) ) !default;
 
 /// Crop background color of the imageeditor.
 /// @group imageeditor

package/scss/input/_layout.scss

@@ -113,6 +113,7 @@
         padding-inline: var( --INTERNAL--kendo-input-padding-x, 0 );
         padding-block: var( --INTERNAL--kendo-input-padding-y,  0 );
         appearance: auto;
+        align-items: center;
     }