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

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": "5.8.2-dev.2",
+  "version": "5.8.2-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.4.0",
-    "@progress/kendo-theme-utils": "^5.8.2-dev.2"
+    "@progress/kendo-theme-utils": "^5.8.2-dev.4"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "e022a1733bd95bb557a27e4f9491eb2bc300d9bc"
+  "gitHead": "03c192e0d4c7227c7d8f41b7fefee897888e6218"
 }

package/scss/bottom-navigation/_variables.scss

@@ -27,6 +27,10 @@ $kendo-bottom-nav-line-height: var( --kendo-line-height-md, normal ) !default;
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
+/// Size of the focused bottom navigation item icon.
+/// @group bottom-nav
+$kendo-bottom-nav-item-icon-size: map-get( $kendo-spacing, 6 ) !default;
+
 /// Horizontal padding of the bottom navigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
@@ -41,13 +45,13 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: none !default;
 /// Minimum height of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-bottom-nav-item-icon-size} + #{$kendo-bottom-nav-item-icon-size} + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
 /// Border radius of the bottom navigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 /// Spacing of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: 0 map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-gap: map-get( $kendo-spacing, 1 ) !default;
 /// Offset of the focused bottom navigation item.
 /// @group bottom-nav
 $kendo-bottom-nav-item-focus-offset: map-get( $kendo-spacing, thin ) !default;
@@ -65,10 +69,6 @@ $kendo-bottom-nav-item-icon-margin-y: map-get( $kendo-spacing, 2 ) !default;
 /// @group bottom-nav
 $kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
 
-/// Size of the focused bottom navigation item icon.
-/// @group bottom-nav
-$kendo-bottom-nav-item-icon-size: map-get( $kendo-spacing, 6 ) !default;
-
 /// Box shadow of the bottom navigation.
 /// @group bottom-nav
 $kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
@@ -92,7 +92,7 @@ $_tc-bottom-nav-matrix: (
         disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        normal: ($white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-30 )),
         focus: (inherit, 100, transparent, 100),
         active: (inherit, 100, transparent),
         disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
@@ -104,7 +104,7 @@ $_tc-bottom-nav-warning-matrix: (
         normal: (100, get-theme-color-var( neutral-160 ), 100),
         focus: (100, get-theme-color-var( neutral-160 ), 100, $white),
         active: (120, get-theme-color-var( neutral-190 ), 120),
-        disabled: (inherit, get-theme-color-var( neutral-120 ) , var( --kendo-disabled-border, inherit ))
+        disabled: (inherit, get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
     ),
     flat: (
         normal: ($white, get-theme-color-var( neutral-130 ), 100),
@@ -122,7 +122,7 @@ $_tc-bottom-nav-dark-matrix: (
         disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
     ),
     flat: (
-        normal: ($white, get-theme-color-var( neutral-130 ), transparent),
+        normal: ($white, get-theme-color-var( neutral-130 ), get-theme-color-var( neutral-140 )),
         focus: (inherit, 160, transparent, 130),
         active: (inherit, 170, transparent),
         disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)

package/scss/colorgradient/_layout.scss

@@ -41,7 +41,6 @@
             position: relative;
             flex: 1 1 auto;
             user-select: none;
-            overflow: hidden;
         }
 
         .k-hsv-gradient {
@@ -85,7 +84,9 @@
         &.k-slider-vertical .k-slider-track {
             width: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
             border-radius: var( --kendo-colorgradient-slider-border-radius, #{$kendo-colorgradient-slider-border-radius} );
-            margin-inline-start: calc( -1 * (var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} ) / 2) );
+
+            // Required since the track is absolutely left positioned
+            margin-left: calc( -1 * (var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} ) / 2) );
         }
 
         &.k-slider-horizontal {

package/scss/colorpalette/_layout.scss

@@ -21,6 +21,10 @@
         *::after {
             box-sizing: border-box;
         }
+
+        &.k-disabled {
+            opacity: .3;
+        }
     }
 
     // Table
@@ -33,8 +37,8 @@
 
     // Tile
     .k-colorpalette-tile {
-        border-width: var( --kendo-colorpalette-tile-border-width, #{$kendo-colorpalette-tile-border-width} );
-        border-style: var( --kendo-colorpalette-tile-border-style, #{$kendo-colorpalette-tile-border-style} );
+        outline-width: var( --kendo-colorpalette-tile-outline-width, #{$kendo-colorpalette-tile-outline-width} );
+        outline-style: var( --kendo-colorpalette-tile-outline-style, #{$kendo-colorpalette-tile-outline-style} );
         width: var( --kendo-colorpalette-tile-width, #{$kendo-colorpalette-tile-width} );
         height: var( --kendo-colorpalette-tile-height, #{$kendo-colorpalette-tile-height} );
         box-sizing: border-box;

package/scss/colorpalette/_theme.scss

@@ -5,9 +5,7 @@
 
     // Tile
     .k-colorpalette-tile {
-        @include fill(
-            $border: var( --kendo-colorpalette-tile-border, #{$kendo-colorpalette-tile-border} )
-        );
+        outline-color: var( --kendo-colorpalette-tile-outline, #{$kendo-colorpalette-tile-outline} );
 
         // Hover
         &:hover,
@@ -15,9 +13,7 @@
             @include box-shadow(
                 var( --kendo-colorpalette-tile-hover-shadow, #{$kendo-colorpalette-tile-hover-shadow} )
             );
-            @include fill(
-                $border: var( --kendo-colorpalette-tile-hover-border, #{$kendo-colorpalette-tile-hover-border} )
-            );
+            outline-color: var( --kendo-colorpalette-tile-hover-outline, #{$kendo-colorpalette-tile-hover-outline} );
         }
 
         // Focus
@@ -26,9 +22,7 @@
             @include box-shadow(
                 var( --kendo-colorpalette-tile-focus-shadow, #{$kendo-colorpalette-tile-focus-shadow} )
             );
-            @include fill(
-                $border: var( --kendo-colorpalette-tile-focus-border, #{$kendo-colorpalette-tile-focus-border} )
-            );
+            outline-color: var( --kendo-colorpalette-tile-focus-outline, #{$kendo-colorpalette-tile-focus-outline} );
         }
 
         // Selected
@@ -36,17 +30,13 @@
             @include box-shadow(
                 var( --kendo-colorpalette-tile-selected-shadow, #{$kendo-colorpalette-tile-selected-shadow} )
             );
-            @include fill(
-                $border: var( --kendo-colorpalette-tile-selected-border, #{$kendo-colorpalette-tile-selected-border} )
-            );
+            outline-color: var( --kendo-colorpalette-tile-selected-outline, #{$kendo-colorpalette-tile-selected-outline} );
         }
 
         // Selected hover/focus
         &.k-selected:hover,
         &.k-selected:focus {
-            @include fill(
-                $border: var( --kendo-colorpalette-tile-selected-hover-border, #{$kendo-colorpalette-tile-selected-hover-border} )
-            );
+            outline-color: var( --kendo-colorpalette-tile-selected-hover-outline, #{$kendo-colorpalette-tile-selected-hover-outline} );
         }
     }
 

package/scss/colorpalette/_variables.scss

@@ -10,39 +10,39 @@ $kendo-colorpalette-font-size: var( --kendo-font-size, inherit ) !default;
 /// @group colorpalette
 $kendo-colorpalette-line-height: 0 !default;
 
-/// Border width of the color palette tile.
+/// Outline width of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-border-width: map-get( $kendo-spacing, hair ) !default;
-/// Border style of the color palette tile.
+$kendo-colorpalette-tile-outline-width: map-get( $kendo-spacing, hair ) !default;
+/// Outline style of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-border-style: solid !default;
-/// Border color of the color palette tile.
+$kendo-colorpalette-tile-outline-style: solid !default;
+/// Outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-border: transparent !default;
+$kendo-colorpalette-tile-outline: transparent !default;
 /// Width of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-width: map-get( $kendo-spacing, 6 ) !default;
 /// Height of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-height: $kendo-colorpalette-tile-width !default;
-/// Focus border color of the color palette tile.
+/// Focus outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-focus-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-colorpalette-tile-focus-outline: get-theme-color-var( neutral-130 ) !default;
 /// Focus shadow of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-focus-shadow: inset 0 0 0 2px $white !default;
-/// Hover border color of the color palette tile.
+/// Hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-border: get-theme-color-var( neutral-20 ) !default;
+$kendo-colorpalette-tile-hover-outline: get-theme-color-var( neutral-20 ) !default;
 /// Hover shadow of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-border, inset 0 0 0 4px $white !default;
-/// Selected border color of the color palette tile.
+$kendo-colorpalette-tile-hover-shadow: inset 0 0 0 2px $kendo-colorpalette-tile-hover-outline, inset 0 0 0 4px $white !default;
+/// Selected outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-border: $kendo-colorpalette-tile-hover-border !default;
+$kendo-colorpalette-tile-selected-outline: $kendo-colorpalette-tile-hover-outline !default;
 /// Selected shadow of the color palette tile.
 /// @group colorpalette
 $kendo-colorpalette-tile-selected-shadow: $kendo-colorpalette-tile-hover-shadow !default;
-/// Selected hover border color of the color palette tile.
+/// Selected hover outline color of the color palette tile.
 /// @group colorpalette
-$kendo-colorpalette-tile-selected-hover-border: $kendo-colorpalette-tile-focus-border !default;
+$kendo-colorpalette-tile-selected-hover-outline: $kendo-colorpalette-tile-focus-outline !default;

package/scss/core/_index.scss

@@ -20,14 +20,10 @@
 // Module System
 @use "module-system/" as module;
 
-$config: null !default;
+$components: null !default;
 
-@mixin configure($config: null) {
-    @if $config {
-        $_components: map-get( $config, "components" );
-
-        @if ($_components) {
-            module.$components: $_components;
-        }
+@mixin configure($components: null) {
+    @if $components {
+        module.$components: $components;
     }
 }

package/scss/core/color-system/_variables.scss

@@ -41,16 +41,16 @@ $kendo-subtle-text: get-theme-color-var( neutral-130 ) !default;
 
 /// Shadow for cards and grid item thumbnails.
 /// Equivalent to fluent depth 4.
-$kendo-box-shadow-depth-1: 0px 0.3px 0.9px rgba( $black, 0.1 ), 0px 1.6px 3.6px rgba( $black, 0.13 ) !default;
+$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $black, 0.132 ), 0 0.3px 0.9px rgba( $black, 0.108 ) !default;
 /// Shadow for command bars and dropdowns.
 /// Equivalent to fluent depth 8.
-$kendo-box-shadow-depth-2: 0px 0.6px 1.8px rgba( $black, 0.1 ), 0px 3.2px 7.2px rgba( $black, 0.13 ) !default;
+$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $black, 0.132 ), 0 0.6px 1.8px rgba( $black, 0.108 ) !default;
 /// Shadow for teaching callouts and hover cards / tooltips.
 /// Equivalent to fluent depth 16.
-$kendo-box-shadow-depth-3: 0px 1.2px 3.6px rgba( $black, 0.1 ), 0px 6.4px 14.4px rgba( $black, 0.13 ) !default;
+$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $black, 0.132 ), 0 1.2px 3.6px rgba( $black, 0.108 ) !default;
 /// Shadow for panels and pop up dialogs.
 /// Equivalent to fluent depth 64.
-$kendo-box-shadow-depth-4: 0px 4.8px 14.4px rgba( $black, 0.18 ), 0px 25.6px 57.6px rgba( $black, 0.22 ) !default;
+$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $black, 0.22 ), 0 4.8px 14.4px rgba( $black, 0.18 ) !default;
 
 // Link
 $kendo-link-text: get-theme-color-var( primary-100 ) !default;

package/scss/dataviz/_layout.scss

@@ -451,8 +451,8 @@
         series-29: $kendo-series-29,
         series-30: $kendo-series-30,
 
-        gauge-pointer: get-theme-color( primary, 100 ),
-        gauge-track: $white
+        gauge-pointer: $kendo-series-f,
+        gauge-track: get-theme-color( neutral, 30 )
     );
 
     @each $name, $value in $exported {

package/scss/grid/_layout.scss

@@ -435,6 +435,10 @@
             overflow: hidden;
             text-overflow: ellipsis;
             outline: 0;
+
+            .k-icon {
+                margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
+            }
         }
 
         .k-with-icon,
@@ -471,19 +475,14 @@
         }
 
         .k-cell-inner > .k-link > .k-icon {
-            &.k-i-sort-desc-small,
-            &.k-i-sort-asc-small {
-                vertical-align: text-top;
-                margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
-            }
+            vertical-align: text-top;
+            margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
         }
 
         .k-sort-order {
             display: inline-block;
-            vertical-align: top;
             height: var( --kendo-icon-size, 1rem );
             font-size: var( --kendo-grid-sort-index-font-size, #{$kendo-grid-sort-index-font-size} );
-            margin-block-start: var( --kendo-grid-sort-index-spacing-y, #{$kendo-grid-sort-index-spacing-y} );
             margin-inline-start: var( --kendo-grid-sort-index-spacing-x, #{$kendo-grid-sort-index-spacing-x} );
         }
     }
@@ -959,8 +958,7 @@
             flex: 1;
             overflow: hidden;
 
-            > .k-icon.k-i-sort-desc-small,
-            > .k-icon.k-i-sort-asc-small {
+            > .k-icon {
                 margin-left: 0;
                 display: inline-block;
                 flex-shrink: 0;

package/scss/grid/_variables.scss

@@ -209,10 +209,10 @@ $kendo-grid-sort-index-height: var( --kendo-icon-size, 1rem ) !default;
 $kendo-grid-sort-index-spacing-y: calc( var( --kendo-icon-spacing, .5rem ) / 4 ) !default;
 /// Vertical offset of the grid sort index.
 /// @group grid
-$kendo-grid-sort-index-spacing-x: calc( -1 * #{$kendo-grid-sort-index-spacing-y} ) !default;
+$kendo-grid-sort-index-spacing-x: map-get( $kendo-spacing, thin ) !default;
 /// Spacing of the grid sort icon.
 /// @group grid
-$kendo-grid-sort-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+$kendo-grid-sort-icon-spacing: var( --kendo-icon-spacing-lg, .5rem ) !default;
 /// Text color of the grid sort indicator.
 /// @group grid
 $kendo-grid-sort-indicator-text: get-theme-color-var( neutral-130 ) !default;

package/scss/index.scss

@@ -158,8 +158,8 @@
 @use "signature";
 
 // Setup
-@mixin config($config: null ) {
-    @include core.configure($config: $config);
+@mixin config( $components: null ) {
+    @include core.configure( $components: $components );
 }
 @mixin styles() {
     // Typography and utils

package/scss/input/_layout.scss

@@ -264,8 +264,8 @@
             // min-height: auto !important; // sass-lint:disable-line no-important
         }
 
-        &:focus {
-            box-shadow: none;
+        &:focus::after {
+            outline: none;
         }
     }
     .k-input-outline .k-input-button {

package/scss/input/_theme.scss

@@ -26,7 +26,7 @@
             --INTERNAL--kendo-input-border: var( --kendo-input-focus-border );
 
             &::after {
-                border-color: var( --kendo-input-focus-border );
+                border-color: var( --kendo-input-focus-border, transparent );
             }
         }
 

package/scss/menu/_layout.scss

@@ -44,6 +44,7 @@
         position: relative;
         user-select: none;
 
+        &:focus,
         &:focus-visible,
         &.k-focus {
             outline-offset: var( --kendo-menu-item-focus-outline-offset, #{$kendo-menu-item-focus-outline-offset} );
@@ -112,6 +113,15 @@
     .k-menu-vertical {
         flex-direction: column;
 
+        > .k-menu-item > .k-menu-link {
+            padding-inline-end: var( --kendo-menu-popup-item-padding-end-md, #{$kendo-menu-popup-item-padding-end-md} );
+        }
+
+        > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
+            margin-inline-start: var( --kendo-menu-popup-item-icon-margin-start-md, #{$kendo-menu-popup-item-icon-margin-start-md} );
+            margin-inline-end: var( --kendo-menu-popup-item-icon-margin-end-md, #{$kendo-menu-popup-item-icon-margin-end-md} );
+        }
+
         > .k-menu-item + .k-menu-item {
             margin-block-start: var( --kendo-menu-item-spacing, #{$kendo-menu-item-spacing} );
         }
@@ -183,6 +193,7 @@
     .k-menu.k-context-menu {
 
         .k-item {
+            &:focus,
             &:focus-visible,
             &.k-focus {
 

package/scss/menu/_theme.scss

@@ -78,9 +78,12 @@
                 }
             }
 
+            &:focus,
             &:focus-visible,
             &.k-focus {
 
+                outline-color: transparent;
+
                 > .k-link {
                     outline-color: var( --kendo-menu-popup-item-focus-outline, #{$kendo-menu-popup-item-focus-outline} );
                 }

package/scss/progressbar/_layout.scss

@@ -82,12 +82,6 @@
         white-space: nowrap;
     }
 
-    .k-selected {
-        .k-progress-status {
-            display: none;
-        }
-    }
-
 
     // Horizontal
     .k-progressbar-horizontal {
@@ -163,6 +157,10 @@
             > .k-progress-status-wrap {
                 height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
             }
+
+            .k-progress-status {
+                display: none;
+            }
         }
 
 

package/scss/scheduler/_theme.scss

@@ -204,7 +204,11 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: var( --kendo-selected-bg, #{$kendo-selected-bg} );
+            @include fill(
+                var( --kendo-scheduler-selected-text, #{$kendo-scheduler-selected-text} ),
+                var( --kendo-scheduler-selected-bg, #{$kendo-scheduler-selected-bg} ),
+                var( --kendo-scheduler-selected-border, #{$kendo-scheduler-selected-border} )
+            );
         }
 
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,

package/scss/scheduler/_variables.scss

@@ -26,6 +26,16 @@ $kendo-scheduler-text: var( --kendo-component-text, initial ) !default;
 /// @group scheduler
 $kendo-scheduler-border: var( --kendo-component-border, initial ) !default;
 
+/// Background color of the selected row in scheduler.
+/// @group scheduler
+$kendo-scheduler-selected-bg: get-theme-color-var( primary-20 ) !default;
+/// Text color of the selected row in scheduler.
+/// @group scheduler
+$kendo-scheduler-selected-text: $kendo-scheduler-text !default;
+/// Border color of the selected row in scheduler.
+/// @group scheduler
+$kendo-scheduler-selected-border: $kendo-scheduler-border !default;
+
 /// Background color of the scheduler toolbar.
 /// @group scheduler
 $kendo-scheduler-toolbar-bg: var( --kendo-toolbar-bg, $kendo-toolbar-bg ) !default;

package/scss/signature/_layout.scss

@@ -65,4 +65,8 @@
         }
     }
 
+    .k-signature-lg {
+        min-height: var( --kendo-signature-lg-min-height, #{$kendo-signature-lg-min-height} );
+    }
+
 }

package/scss/signature/_variables.scss

@@ -71,3 +71,7 @@ $kendo-signature-actions-gap: map-get( $kendo-spacing, 1 ) !default;
 /// The bottom-border width of the row line of the maximized signature component.
 /// @group signature
 $kendo-signature-maximized-line-width: 3px !default;
+
+/// The min-height of the large size signature component.
+/// @group signature
+$kendo-signature-lg-min-height: 110px;

package/scss/skeleton/_layout.scss

@@ -39,7 +39,7 @@
     }
 
     .k-skeleton-wave .k-skeleton,
-    .k-skeleton-wave .k-skeleton {
+    .k-skeleton-wave.k-skeleton {
         position: relative;
         overflow: hidden;
 
@@ -68,8 +68,8 @@
         }
     }
 
-    .k-skeleton-pulse  .k-skeleton,
-    .k-skeleton-pulse .k-skeleton {
+    .k-skeleton-pulse .k-skeleton,
+    .k-skeleton-pulse.k-skeleton {
         animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
     }
 

package/scss/split-button/_layout.scss

@@ -21,38 +21,32 @@
         aspect-ratio: auto;
         flex: none;
 
-        &::before {
-            content:"";
-            width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
-            height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
-            position: absolute;
-            top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
-            left: 0;
-            background: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
-            z-index: 2;
-        }
-
-        [dir="rtl"] &::before,
-        .k-rtl &::before {
-            right: 0;
-            left: auto;
-        }
+        .k-button-icon {
+            min-width: 0;
 
-        &.k-button-sm {
-            padding: var( --kendo-split-button-arrow-padding-y-sm, #{$kendo-split-button-arrow-padding-y-sm} );
+            &::after {
+                content:"";
+                width: var( --kendo-split-button-arrow-delimiter-line-size, #{$kendo-split-button-arrow-delimiter-line-size} );
+                height: var( --kendo-split-button-arrow-delimiter-size, #{$kendo-split-button-arrow-delimiter-size} );
+                position: absolute;
+                top: calc( ( 100% - #{$kendo-split-button-arrow-delimiter-size} ) / 2 );
+                background: var( --kendo-split-button-arrow-delimiter-bg, #{$kendo-split-button-arrow-delimiter-bg} );
+                z-index: 2;
+            }
         }
 
-        &.k-button-md {
-            padding: var( --kendo-split-button-arrow-padding-y-md, #{$kendo-split-button-arrow-padding-y-md} );
-        }
+        // Sizes
+        @each $size, $size-props in $kendo-split-button-sizes {
 
-        &.k-button-lg {
-            padding: var( --kendo-split-button-arrow-padding-y-lg, #{$kendo-split-button-arrow-padding-y-lg} );
-        }
+            &.k-button-#{$size} {
+                padding: var( --kendo-split-button-arrow-padding-y-#{$size}, #{$size-props} );
 
-        .k-button-icon {
-            min-width: 0;
+                .k-button-icon {
+                    &::after {
+                        inset-inline-start: calc( var( --kendo-split-button-delimiter-offset-#{$size}, #{$size-props} ) * -1 );
+                    }
+                }
+            }
         }
     }
-
 }

package/scss/split-button/_variables.scss

@@ -22,3 +22,11 @@ $kendo-split-button-arrow-delimiter-line-size: 1px !default;
 /// Background color of the split button arrow delimiter.
 /// @group split-button
 $kendo-split-button-arrow-delimiter-bg: get-theme-color-var( neutral-60 ) !default;
+
+/// Sizes map for the split button.
+/// @group split-button
+$kendo-split-button-sizes: (
+    sm: $kendo-split-button-arrow-padding-y-sm,
+    md: $kendo-split-button-arrow-padding-y-md,
+    lg: $kendo-split-button-arrow-padding-y-lg
+) !default;