@progress/kendo-theme-fluent 5.7.0

package/scss/slider/_layout.scss

@@ -0,0 +1,392 @@
+@use "sass:math";
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-slider--layout() {
+
+    // Slider
+    .k-slider {
+        width: min-content;
+        height: min-content;
+        border: 0;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-slider-font-family, #{$kendo-slider-font-family} );
+        font-size: var( --kendo-slider-font-size, #{$kendo-slider-font-size} );
+        line-height: var( --kendo-slider-line-height, #{$kendo-slider-line-height} );
+        background: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
+        position: relative;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        .k-label {
+            width: auto;
+            font-size: .875em;
+            line-height: 1;
+            white-space: nowrap;
+            pointer-events: all;
+            position: absolute;
+        }
+
+
+        &[disabled],
+        &.k-disabled {
+            .k-slider-tick,
+            .k-slider-track,
+            .k-slider-thumb {
+                cursor: default;
+            }
+        }
+    }
+
+
+    // Slider wrap
+    .k-slider-wrap {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: inherit;
+        align-items: inherit;
+        gap: inherit;
+        position: relative;
+    }
+
+
+    // Slider button
+    .k-slider-button {
+        flex: none;
+    }
+
+
+    // Slider track
+    .k-slider-track-wrap {
+        flex-grow: 1;
+        display: flex;
+        flex-flow: inherit;
+        justify-content: space-between;
+        position: relative;
+        touch-action: none;
+    }
+    .k-slider-track {
+        margin: 0;
+        padding: 0;
+        border-radius: var( --kendo-slider-track-border-radius, #{$kendo-slider-track-border-radius} );
+        position: absolute;
+        z-index: 2;
+    }
+    .k-slider-selection {
+        margin: 0;
+        padding: 0;
+        border-radius: var( --kendo-slider-track-border-radius, #{$kendo-slider-track-border-radius} );
+        position: absolute;
+
+        &:active,
+        &.k-active {
+            transition: none;
+        }
+    }
+    .k-slider-thumb {
+        width: var( --kendo-slider-thumb-size, #{$kendo-slider-thumb-size} );
+        height: var( --kendo-slider-thumb-size, #{$kendo-slider-thumb-size} );
+        border-style: solid;
+        border-width: var( --kendo-slider-thumb-border-widths, #{$kendo-slider-thumb-border-width} );
+        border-radius: var( --kendo-slider-thumb-border-radius, #{$kendo-slider-thumb-border-radius} );
+        background-color: transparent;
+        background-repeat: no-repeat;
+        outline: 0;
+        text-align: center;
+        text-decoration: none;
+        position: absolute;
+
+        &:active,
+        &.k-active {
+            transition: none;
+        }
+    }
+
+
+    // Slider ticks
+    .k-slider-items {
+        display: contents;
+        pointer-events: none;
+    }
+    .k-slider-tick {
+        margin: 0;
+        padding: 0;
+        background-color: transparent;
+        background-position: center center;
+        background-repeat: no-repeat;
+        flex: 0 0 1px;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        cursor: pointer;
+        position: relative;
+    }
+    .k-slider-tick-horizontal {
+        width: 100%;
+        min-height: 1px;
+    }
+    .k-slider-tick-vertical {
+        width: 1px;
+        min-height: 100%;
+    }
+
+
+    // Horizontal slider
+    .k-horizontal-slider {
+        width: var( --kendo-slider-size, #{$kendo-slider-size} );
+        flex-flow: row nowrap;
+
+        // Slider track
+        .k-slider-track-wrap {
+            height: var( --kendo-slider-alt-size, #{$kendo-slider-alt-size} );
+        }
+        .k-slider-track {
+            width: 100%;
+            height: var( --kendo-slider-track-size, #{$kendo-slider-track-size} );
+            inset-inline-start: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .k-slider-selection {
+            width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
+            height: 100%;
+            inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
+            top: 0;
+        }
+        .k-slider-thumb {
+            top: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .k-slider-thumb:focus,
+        .k-slider-thumb:active {
+            transform: translate(-50%, -50%) scale($kendo-slider-thumb-active-scale);
+        }
+        .k-slider-thumb-start {
+            inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
+        }
+        .k-slider-thumb-end {
+            inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% );
+        }
+
+        // Slider ticks
+        .k-tick { background-position: center -92px; }
+        .k-slider-topleft .k-tick { background-position: center -122px; }
+        .k-slider-bottomright .k-tick { background-position: center -152px; }
+
+        .k-tick-large { background-position: center -2px; }
+        .k-slider-topleft .k-tick-large { background-position: center -32px; }
+        .k-slider-bottomright .k-tick-large { background-position: center -62px; }
+
+        .k-first { background-position: 0 -92px; }
+        .k-tick-large.k-first { background-position: 0 -2px; }
+        .k-slider-topleft .k-first { background-position: 0 -122px; }
+        .k-slider-topleft .k-tick-large.k-first { background-position: 0 -32px; }
+        .k-slider-bottomright .k-first { background-position: 0 -152px; }
+        .k-slider-bottomright .k-tick-large.k-first { background-position: 0 -62px; }
+
+        .k-last { background-position: 100% -92px; }
+        .k-tick-large.k-last { background-position: 100% -2px; }
+        .k-slider-topleft .k-last { background-position: 100% -122px; }
+        .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; }
+        .k-slider-bottomright .k-last { background-position: 100% -152px; }
+        .k-slider-bottomright .k-tick-large.k-last { background-position: 100% -62px; }
+
+
+        // Slider labels
+        .k-label {
+            inset-inline-start: 50%;
+            bottom: -1.2em;
+            transform: translateX(-50%);
+        }
+        .k-first .k-label { inset-inline-start: 0; }
+        .k-last .k-label { inset-inline-start: 100%; }
+        .k-slider-topleft .k-label {
+            top: -1.2em;
+        }
+
+        // Transitions
+        &.k-slider-transitions {
+            .k-slider-selection {
+                transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
+            }
+            .k-slider-thumb {
+                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-thumb-transition-speed $kendo-slider-thumb-transition-function;
+            }
+        }
+    }
+
+
+    // Vertical slider
+    .k-vertical-slider {
+        height: var( --kendo-slider-size, #{$kendo-slider-size} );
+        flex-flow: column-reverse nowrap;
+
+        // Slider track
+        .k-slider-track-wrap {
+            width: var( --kendo-slider-alt-size, #{$kendo-slider-alt-size} );
+        }
+        .k-slider-track {
+            width: var( --kendo-slider-track-size, #{$kendo-slider-track-size} );
+            height: 100%;
+            bottom: 0;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .k-slider-selection {
+            width: 100%;
+            bottom: calc( var(--kendo-slider-start, 0) * 1% );
+            height: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
+        }
+        .k-slider-thumb {
+            left: 50%;
+            transform: translate(-50%, 50%);
+        }
+        .k-slider-thumb:focus,
+        .k-slider-thumb:active {
+            transform: if( $kendo-slider-thumb-active-scale, translate(-50%, 50%) scale($kendo-slider-thumb-active-scale), null );
+        }
+        .k-slider-thumb-start {
+            bottom: calc( var(--kendo-slider-start, 0) * 1% );
+        }
+        .k-slider-thumb-end {
+            bottom: calc( var(--kendo-slider-end, 0) * 1% );
+        }
+
+
+        // Slider ticks
+        .k-tick {
+            text-align: right;
+            margin-left: 2px;
+        }
+        .k-slider-topleft .k-tick {
+            text-align: left;
+        }
+
+        .k-tick { background-position: -94px center; }
+        .k-slider-topleft .k-tick { background-position: -124px center; }
+        .k-slider-bottomright .k-tick { background-position: -154px center; }
+
+        .k-tick-large { background-position: -4px center; }
+        .k-slider-topleft .k-tick-large { background-position: -34px center; }
+        .k-slider-bottomright .k-tick-large { background-position: -64px center; }
+
+        .k-first { background-position: -94px 100%; }
+        .k-tick-large.k-first { background-position: -4px 100%; }
+        .k-slider-topleft .k-first { background-position: -124px 100%; }
+        .k-slider-topleft .k-tick-large.k-first { background-position: -34px 100%; }
+        .k-slider-bottomright .k-first { background-position: -154px 100%; }
+        .k-slider-bottomright .k-tick-large.k-first { background-position: -64px 100%; }
+
+        .k-last { background-position: -94px 0; }
+        .k-tick-large.k-last { background-position: -4px 0; }
+        .k-slider-topleft .k-last { background-position: -124px 0; }
+        .k-slider-topleft .k-tick-large.k-last { background-position: -34px 0; }
+        .k-slider-bottomright .k-last { background-position: -154px 0; }
+        .k-slider-bottomright .k-tick-large.k-last { background-position: -64px 0; }
+
+
+        // Slider labels
+        .k-label {
+            text-align: left;
+            inset-inline-start: 120%;
+            inset-inline-end: auto;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .k-first .k-label { top: 100%; }
+        .k-last .k-label { top: 0; }
+        .k-slider-topleft .k-label {
+            inset-inline-start: auto;
+            inset-inline-end: 120%;
+        }
+
+        // Transitions
+        &.k-slider-transitions {
+            .k-slider-selection {
+                transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
+            }
+            .k-slider-thumb {
+                transition: bottom $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-thumb-transition-speed $kendo-slider-thumb-transition-function;
+            }
+        }
+
+    }
+
+
+    // Slider readonly
+    .k-slider.k-readonly {
+        .k-slider-button,
+        .k-slider-track,
+        .k-slider-tick,
+        .k-slider-thumb {
+            pointer-events: none;
+        }
+    }
+
+
+    // RTL
+    .k-slider-rtl {
+        &.k-horizontal-slider {
+            .k-slider-thumb {
+                transform: translate(50%, -50%);
+            }
+            .k-slider-thumb:focus,
+            .k-slider-thumb:active {
+                transform: if( $kendo-slider-thumb-active-scale, translate(50%, -50%) scale($kendo-slider-thumb-active-scale), null );
+            }
+            .k-label {
+                transform: translateX(50%);
+            }
+
+            .k-button-increase .k-icon,
+            .k-button-decrease .k-icon {
+                transform: scaleX(-1);
+            }
+        }
+        &.k-vertical-slider {
+
+        }
+    }
+    .k-slider[dir="rtl"],
+    [dir="rtl"] .k-slider,
+    .k-slider.k-rtl,
+    .k-rtl .k-slider {
+        @extend .k-slider-rtl;
+    }
+
+
+    // Angular specific
+    .k-slider kendo-resize-sensor {
+        position: absolute;
+    }
+    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
+        padding-inline: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
+    }
+    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
+        padding-block: var( --kendo-slider-spacing, #{$kendo-slider-spacing} );
+    }
+
+
+    // Aliases
+    .k-slider .k-button { @extend .k-slider-button; }
+    .k-tick { @extend .k-slider-tick; }
+    .k-draghandle { @extend .k-slider-thumb; }
+    .k-draghandle-start { @extend .k-slider-thumb-start; }
+    .k-draghandle-end { @extend .k-slider-thumb-end; }
+    .k-slider-horizontal { @extend .k-horizontal-slider; }
+    .k-slider-vertical { @extend .k-vertical-slider; }
+    .k-tick-horizontal { @extend .k-slider-tick-vertical; }
+    .k-tick-vertical { @extend .k-slider-tick-horizontal; }
+
+}

package/scss/slider/_theme.scss

@@ -0,0 +1,76 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-slider--theme() {
+
+    $kendo-slider-tick-h-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+    $kendo-slider-tick-v-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+
+    // Slider
+    .k-slider {
+        --INTERNAL--kendo-slider-text: var( --kendo-slider-text, #{$kendo-slider-text} );
+        --INTERNAL--kendo-slider-track-bg: var( --kendo-slider-track-bg, #{$kendo-slider-track-bg} );
+        --INTERNAL--kendo-slider-selection-bg: var( --kendo-slider-selection-bg, #{$kendo-slider-selection-bg} );
+        --INTERNAL--kendo-slider-thumb-bg: var(--kendo-slider-thumb-bg,  #{$kendo-slider-thumb-bg});
+        --INTERNAL--kendo-slider-thumb-text: var(--kendo-slider-thumb-text,  #{$kendo-slider-thumb-text});
+        --INTERNAL--kendo-slider-thumb-border: var(--kendo-slider-thumb-border,  #{$kendo-slider-thumb-border});
+        --INTERNAL--kendo-slider-thumb-gradient: var(--kendo-slider-thumb-gradient,  #{$kendo-slider-thumb-gradient});
+
+        color: var( --INTERNAL--kendo-slider-text, inherit );
+    }
+
+
+    // Slider track
+    .k-slider-track {
+        background-color: var( --INTERNAL--kendo-slider-track-bg, transparent );
+    }
+
+
+    // Slider selection
+    .k-slider-selection {
+        background-color: var( --INTERNAL--kendo-slider-selection-bg, currentColor);
+    }
+
+
+    // Slider thumb
+    .k-slider-thumb {
+        color: var( --INTERNAL--kendo-slider-thumb-text, transparent );
+        background-color: var( --INTERNAL--kendo-slider-thumb-bg, currentColor );
+        border-color: var( --INTERNAL--kendo-slider-thumb-border, currentColor );
+        background-image: linear-gradient( var( --INTERNAL--kendo-slider-thumb-gradient, transparent, transparent ) );
+
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-slider-thumb-bg: #{$kendo-slider-thumb-hover-bg};
+            --INTERNAL--kendo-slider-thumb-text: #{$kendo-slider-thumb-hover-text};
+            --INTERNAL--kendo-slider-thumb-border: #{$kendo-slider-thumb-hover-border};
+            --INTERNAL--kendo-slider-thumb-gradient: #{$kendo-slider-thumb-hover-gradient};
+        }
+
+        &:active,
+        &.k-active {
+            --INTERNAL--kendo-slider-thumb-bg: #{$kendo-slider-thumb-active-bg};
+            --INTERNAL--kendo-slider-thumb-text: #{$kendo-slider-thumb-active-text};
+            --INTERNAL--kendo-slider-thumb-border: #{$kendo-slider-thumb-active-border};
+            --INTERNAL--kendo-slider-thumb-gradient: #{$kendo-slider-thumb-active-gradient};
+        }
+
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-slider-thumb-bg: #{$kendo-slider-thumb-focus-bg};
+            --INTERNAL--kendo-slider-thumb-text: #{$kendo-slider-thumb-focus-text};
+            --INTERNAL--kendo-slider-thumb-border: #{$kendo-slider-thumb-focus-border};
+            --INTERNAL--kendo-slider-thumb-gradient: #{$kendo-slider-thumb-focus-gradient};
+        }
+    }
+
+    .k-slider-horizontal .k-tick {
+        background-image: url( $kendo-slider-tick-v-image );
+    }
+
+    .k-slider-vertical .k-tick {
+        background-image: url( $kendo-slider-tick-h-image );
+    }
+
+
+}

package/scss/slider/_variables.scss

@@ -0,0 +1,136 @@
+@use "sass:color";
+@use "../core/" as *;
+
+/// The default slider size.
+/// @group slider
+$kendo-slider-size: 200px !default;
+/// The default slider track wrap size.
+/// @group slider
+$kendo-slider-alt-size: 26px !default;
+/// The spacing of the slider.
+/// @group slider
+$kendo-slider-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+/// Font family of the slider.
+/// @group slider
+$kendo-slider-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the slider.
+/// @group slider
+$kendo-slider-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the slider.
+/// @group slider
+$kendo-slider-line-height: var( --kendo-line-height, normal ) !default;
+/// The text color of the slider.
+/// @group slider
+$kendo-slider-text: inherit !default;
+
+/// The size of the slider track.
+/// @group slider
+$kendo-slider-track-size: map-get( $kendo-spacing, 1 ) !default;
+/// The border radius of the slider track.
+/// @group slider
+$kendo-slider-track-border-radius: map-get( $kendo-spacing, thin ) !default;
+/// The background color of the slider track.
+/// @group slider
+$kendo-slider-track-bg: get-theme-color-var( neutral-60 ) !default;
+/// The border color of the slider track.
+/// @group slider
+$kendo-slider-track-border: inherit !default;
+/// The hover background color of the slider track.
+/// @group slider
+$kendo-slider-track-hover-bg: get-theme-color-var( neutral-60 ) !default;
+/// The hover border color of the slider track.
+/// @group slider
+$kendo-slider-track-hover-border: inherit !default;
+/// The focus background color of the slider track.
+/// @group slider
+$kendo-slider-track-focus-bg: get-theme-color-var( neutral-60 ) !default;
+/// The focus border color of the slider track.
+/// @group slider
+$kendo-slider-track-focus-border: inherit !default;
+
+/// The selection background color of the slider track.
+/// @group slider
+$kendo-slider-selection-bg: get-theme-color-var( primary-100 ) !default;
+
+/// The default size of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-size: 16px !default;
+/// The default border width of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-border-width: map-get( $kendo-spacing, thin ) !default;
+/// The border radius of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-border-radius: 999em !default;
+/// The active transition scale of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-scale: null !default;
+/// The active size of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-size: null !default;
+
+/// The background color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-bg: var( --kendo-component-bg, transparent ) !default;
+/// The text color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-text: inherit !default;
+/// The border color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-border: get-theme-color-var( neutral-130 ) !default;
+/// The gradient of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-gradient: transparent !default;
+
+/// The hover background color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-hover-bg: $kendo-slider-thumb-bg !default;
+/// The hover text color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-hover-text: inherit !default;
+/// The hover border color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-hover-border: get-theme-color-var( primary-100 ) !default;
+/// The hover gradient of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-hover-gradient: transparent !default;
+
+/// The active background color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-bg: $kendo-slider-thumb-hover-bg !default;
+/// The active text color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-text: inherit !default;
+/// The active border color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-border: $kendo-slider-thumb-hover-border !default;
+/// The active gradient of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-active-gradient: transparent !default;
+
+/// The focus background color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-focus-bg: $kendo-slider-thumb-hover-bg !default;
+/// The focus text color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-focus-text: inherit !default;
+/// The focus border color of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-focus-border: $kendo-slider-thumb-hover-border !default;
+/// The focus gradient of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-focus-gradient: transparent !default;
+
+/// The transition speed of the slider.
+/// @group slider
+$kendo-slider-transition-speed: .3s !default;
+/// The transition function function.
+/// @group slider
+$kendo-slider-transition-function: ease-out !default;
+
+/// The transition speed of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-transition-speed: .4s !default;
+/// The transition function of the slider thumb.
+/// @group slider
+$kendo-slider-thumb-transition-function: cubic-bezier(.25, .8, .25, 1) !default;

package/scss/slider/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "slider",
+    dependencies: (
+        "icon",
+        "button",
+        "tooltip"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "slider" ) {
+        @include kendo-slider--layout();
+        @include kendo-slider--theme();
+    }
+}

package/scss/split-button/_layout.scss

@@ -0,0 +1,58 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-split-button--layout() {
+
+    // Split button
+    .k-split-button {
+        > .k-button:first-child {
+            border-inline-end-width: 0;
+        }
+
+        > .k-button:last-child {
+            border-inline-start-width: 0;
+        }
+    }
+
+    // Split button arrow
+    .k-split-button-arrow {
+        width: auto;
+        padding-inline: var( --kendo-split-button-arrow-padding-x, #{$kendo-split-button-arrow-padding-x-md} );
+        padding-block: var( --kendo-split-button-arrow-padding-y , #{$kendo-split-button-arrow-padding-y-md} );
+        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-sm {
+            padding: var( --kendo-split-button-arrow-padding-y-sm, #{$kendo-split-button-arrow-padding-y-sm} );
+        }
+
+        &.k-button-md {
+            padding: var( --kendo-split-button-arrow-padding-y-md, #{$kendo-split-button-arrow-padding-y-md} );
+        }
+
+        &.k-button-lg {
+            padding: var( --kendo-split-button-arrow-padding-y-lg, #{$kendo-split-button-arrow-padding-y-lg} );
+        }
+
+        .k-button-icon {
+            min-width: 0;
+        }
+    }
+
+}

package/scss/split-button/_theme.scss

@@ -0,0 +1,5 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-split-button--theme() {
+    .k-split-button { }
+}