@progress/kendo-theme-default 4.43.1-dev.5 → 4.43.1-dev.6

package/dist/all.scss

@@ -2727,18 +2727,6 @@ $display4-letter-spacing: null !default;
 // #region @import "_loading.scss"; -> packages/default/scss/common/_loading.scss
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
@@ -2827,7 +2815,7 @@ $display4-letter-spacing: null !default;
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }
@@ -7314,30 +7302,69 @@ $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !d
 // #region @import "../button/_variables.scss"; -> packages/default/scss/button/_variables.scss
 // Button
 
-/// Width of border around buttons
+/// Width of the border around the button.
 /// @group button
 $button-border-width: 1px !default;
-/// Border radius of buttons
+
+/// Border radius of the button.
 /// @group button
 $button-border-radius: $border-radius !default;
 
-/// Horizontal padding of buttons
+/// Horizontal padding of the button.
+/// @group button
+$button-padding-x: map-get( $spacing, 2 ) !default;
+$button-padding-x-sm: null !default;
+$button-padding-x-md: null !default;
+$button-padding-x-lg: null !default;
+
+/// Vertical padding of the button.
 /// @group button
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
+$button-padding-y: map-get( $spacing, 1 ) !default;
+$button-padding-y-sm: null !default;
+$button-padding-y-md: null !default;
+$button-padding-y-lg: null !default;
+
+/// Font family of the button.
 /// @group button
-$button-padding-y: $padding-y !default;
 $button-font-family: $font-family !default;
+
+/// Font size of the button.
+/// @group button
 $button-font-size: $font-size !default;
-$button-line-height: $line-height !default;
+$button-font-size-sm: null !default;
+$button-font-size-md: null !default;
+$button-font-size-lg: null !default;
 
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: $line-height-sm !default;
+/// Line height used along with $font-size.
+/// @group button
+$button-line-height: $line-height !default;
+$button-line-height-sm: null !default;
+$button-line-height-md: null !default;
+$button-line-height-lg: null !default;
 
+/// Calculated height of the button.
+/// @group button
 $button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
 $button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
 
+/// Theme colors map for the button.
+/// @group button
+$button-theme-colors: (
+    "primary": map-get( $theme-colors, primary ),
+    "secondary": map-get( $theme-colors, secondary ),
+    "tertiary": map-get( $theme-colors, tertiary ),
+    "info": map-get( $theme-colors, info ),
+    "success": map-get( $theme-colors, success ),
+    "warning": map-get( $theme-colors, warning ),
+    "error": map-get( $theme-colors, error ),
+    "dark": map-get( $theme-colors, dark ),
+    "light": map-get( $theme-colors, light ),
+    "inverse": map-get( $theme-colors, inverse )
+) !default;
+
 /// The background of the buttons.
 /// @group button
 $button-bg: #f5f5f5 !default;
@@ -7434,7 +7461,31 @@ $primary-button-selected-shadow: null !default;
 
 $primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !default;
 
-$button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 ) !default;
+$solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$solid-button-shade-function: "try-shade";
+$solid-button-shade-text-amount: 0 !default;
+$solid-button-shade-bg-amount: 0 !default;
+$solid-button-shade-border-amount: 0 !default;
+$solid-button-hover-shade-text-amount: null !default;
+$solid-button-hover-shade-bg-amount: .5 !default;
+$solid-button-hover-shade-border-amount: .5 !default;
+$solid-button-active-shade-text-amount: null !default;
+$solid-button-active-shade-bg-amount: 1.5 !default;
+$solid-button-active-shade-border-amount: 1.5 !default;
+$solid-button-shadow: true !default;
+$solid-button-shadow-blur: 0px !default;
+$solid-button-shadow-spread: 2px !default;
+$solid-button-shadow-opacity: .3 !default;
+
+$outline-button-shadow: true !default;
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 2px !default;
+$outline-button-shadow-opacity: .3 !default;
+
+$link-button-shadow: true !default;
+$link-button-shadow-blur: 0px !default;
+$link-button-shadow-spread: 2px !default;
+$link-button-shadow-opacity: .3 !default;
 
 $flat-button-hover-opacity: .04 !default;
 $flat-button-focus-opacity: null !default;
@@ -11214,50 +11265,51 @@ $tooltip-error-border: $tooltip-error-bg !default;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button {
-            @include border-radius( 0 );
-        }
-        .k-button ~ .k-button {
+        > .k-button + .k-button {
             margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
         }
 
-        .k-button:hover,
-        .k-button.k-state-hover,
-        .k-button:active,
-        .k-button.k-state-active,
-        .k-button.k-state-selected,
-        .k-button:focus,
-        .k-button.k-state-focus {
+        > .k-button:hover,
+        > .k-button.k-state-hover,
+        > .k-button:focus,
+        > .k-button.k-state-focus,
+        > .k-button:active,
+        > .k-button.k-state-active,
+        > .k-button.k-state-selected {
             z-index: 2;
         }
 
-        .k-group-start,
-        .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
+        .k-button:not(:first-child):not(:last-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
+        }
+        > .k-button:first-child:not(:only-child) {
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
         }
-        .k-group-end,
-        .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
+        > .k-button:last-child:not(:only-child) {
+            border-start-start-radius: 0;
+            border-end-start-radius: 0;
         }
-        .k-group-start.k-group-end,
-        .k-button:first-child:last-child {
-            @include border-radius( $button-border-radius );
+
+        &:disabled,
+        &[disabled],
+        &.k-disabled,
+        &.k-state-disabled {
+            opacity: 1;
+            filter: none;
         }
 
     }
 
     .k-button-group-stretched {
-        display: flex;
+        width: 100%;
 
-        .k-button {
-            display: inline-block;
+        > * {
             flex: 1 0 0%;
             overflow: hidden;
-            text-overflow: ellipsis;
-
-            > .k-icon {
-                vertical-align: text-bottom;
-            }
         }
     }
 
@@ -11271,32 +11323,13 @@ $tooltip-error-border: $tooltip-error-bg !default;
         flex-flow: row nowrap;
         vertical-align: middle;
 
-        .k-button {
-            @include border-radius( 0 );
-        }
-
-        // .k-button
-        > .k-button:first-child {
-            @include border-left-radius( $button-border-radius );
-        }
-        > .k-split-button-arrow,
-        > .k-button:last-child {
-            @include border-right-radius( $button-border-radius );
-            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
+        .k-split-button-arrow {
             padding: $button-padding-y;
             width: auto;
             flex: none;
-        }
 
-        &[dir="rtl"] {
-            // k-button
-            > .k-button:first-child {
-                @include border-left-radius( 0 );
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-button:last-child {
-                @include border-right-radius( 0 );
-                @include border-left-radius( $button-border-radius );
+            .k-button-icon {
+                min-width: 0;
             }
         }
     }
@@ -11340,13 +11373,29 @@ $tooltip-error-border: $tooltip-error-bg !default;
     .k-button-outline {
         @include box-shadow( none );
         color: inherit;
-        background: none;
+        background-color: transparent;
+        background-image: none !important; // sass-lint:disable-line no-important
     }
     .k-button.k-outline {
         @extend .k-button-outline;
     }
 
 
+    // Link button
+    .k-button-link {
+        @include box-shadow( none );
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        color: inherit;
+        background-color: transparent !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
+        text-decoration: none;
+    }
+    .k-button-link:hover,
+    .k-button-link.k-state-hover {
+        text-decoration: underline;
+    }
+
+
     // Clear button
     .k-button-clear {
         border-color: transparent !important; // sass-lint:disable-line no-important
@@ -11356,46 +11405,11 @@ $tooltip-error-border: $tooltip-error-bg !default;
     }
 
 
-    // RTL
-    .k-rtl {
-
-        // Button group
-        .k-button-group {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            .k-group-start,
-            .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            .k-group-end,
-            .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
-            .k-group-start.k-group-end,
-            .k-button:first-child:last-child {
-                @include border-radius( $button-border-radius );
-            }
-
-        }
-
-        // Split button
-        .k-split-button {
-
-            .k-button {
-                @include border-radius( 0 );
-            }
-
-            // k-button
-            > .k-button:first-child {
-                @include border-right-radius( $button-border-radius );
-            }
-            > .k-split-button-arrow,
-            > .k-button:last-child {
-                @include border-left-radius( $button-border-radius );
-            }
+    // IE
+    .k-ie .k-button-group,
+    .k-ie .k-split-button {
+        .k-button {
+            @include border-radius( 0 );
         }
     }
 
@@ -11531,9 +11545,8 @@ $tooltip-error-border: $tooltip-error-bg !default;
 // #region @import "_theme.scss"; -> packages/default/scss/button/_theme.scss
 @include exports( "button/theme" ) {
 
-    // Default button
-    .k-button,
-    .k-button-secondary {
+    // Solid button
+    .k-button {
         @include fill(
             $button-text,
             $button-bg,
@@ -11597,75 +11610,70 @@ $tooltip-error-border: $tooltip-error-bg !default;
         }
 
     }
+    .k-button.k-primary {
+        @extend .k-button-solid-primary !optional;
+    }
 
+    $_shade-fn: get-function( $solid-button-shade-function );
 
-    // Primary button
-    .k-button-primary {
-        @include fill(
-            $primary-button-text,
-            $primary-button-bg,
-            $primary-button-border,
-            $primary-button-gradient
-        );
-        @include box-shadow( $primary-button-shadow );
+    @each $name, $color in $button-theme-colors {
+        $_button-text: contrast-wcag( $color );
+        $_button-bg: if( $solid-button-shade-bg-amount, call( $_shade-fn, $color, $solid-button-shade-bg-amount ), null );
+        $_button-border: if( $solid-button-shade-border-amount, call( $_shade-fn, $color, $solid-button-shade-border-amount ), null );
 
-        // Hovoer state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                $primary-button-hovered-text,
-                $primary-button-hovered-bg,
-                $primary-button-hovered-border,
-                $primary-button-hovered-gradient
-            );
-            @include box-shadow( $primary-button-hovered-shadow );
-        }
+        $_button-hover-text: null;
+        $_button-hover-bg: if( $solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $solid-button-hover-shade-bg-amount ), null );
+        $_button-hover-border: if( $solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $solid-button-hover-shade-border-amount ), null );
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $primary-button-focused-shadow );
-        }
+        $_button-active-text: null;
+        $_button-active-bg: if( $solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $solid-button-active-shade-bg-amount ), null );
+        $_button-active-border: if( $solid-button-active-shade-border-amount, call( $_shade-fn, $color, $solid-button-active-shade-border-amount ), null );
 
-        // Active state
-        &:active,
-        &.k-state-active {
+        .k-button-solid.k-button-solid-#{$name} {
             @include fill(
-                $primary-button-active-text,
-                $primary-button-active-bg,
-                $primary-button-active-border,
-                $primary-button-active-gradient
+                $_button-text,
+                $_button-bg,
+                $_button-border,
+                $solid-button-gradient
             );
-            @include box-shadow( $primary-button-active-shadow );
-        }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill(
-                $primary-button-selected-text,
-                $primary-button-selected-bg,
-                $primary-button-selected-border,
-                $primary-button-selected-gradient
-            );
-            @include box-shadow( $primary-button-selected-shadow );
-        }
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    $_button-hover-text,
+                    $_button-hover-bg,
+                    $_button-hover-border
+                );
+            }
 
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            @include fill(
-                $button-disabled-text,
-                $button-disabled-bg,
-                $button-disabled-border,
-                $button-disabled-gradient
-            );
-            @include box-shadow( $button-disabled-shadow );
-        }
+            // Focus state
+            &:focus,
+            &.k-state-focus {
+                @if ( $solid-button-shadow ) {
+                    box-shadow: 0 0 $solid-button-shadow-blur $solid-button-shadow-spread rgba( $_button-border, $solid-button-shadow-opacity );
+                }
+            }
 
-    }
-    .k-button.k-primary {
-        @extend .k-button-primary;
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    $_button-active-text,
+                    $_button-active-bg,
+                    $_button-active-border
+                );
+            }
+
+            // Selected
+            &.k-state-selected {
+                @include fill(
+                    $_button-active-text,
+                    $_button-active-bg,
+                    $_button-active-border
+                );
+            }
+        }
     }
 
 
@@ -11674,18 +11682,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
 
 
     // Button group
-    .k-button-group {
-
-        .k-button:focus,
-        .k-button.k-state-focus,
-        .k-button.k-state-focused,
-        .k-button-outline:focus,
-        .k-button-outline.k-state-focus,
-        .k-button-outline.k-state-focused {
-            @include box-shadow( $button-group-focus-shadow );
-        }
-
-    }
+    .k-button-group {}
 
 
     // Split button
@@ -11707,62 +11704,96 @@ $tooltip-error-border: $tooltip-error-bg !default;
         @include box-shadow( none );
         border-color: currentColor;
         color: $button-text;
-        background: none;
+        background-color: transparent;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            @if ($outline-button-shadow) {
+                box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $button-text, $outline-button-shadow-opacity );
+            }
         }
 
         // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
     }
     .k-button-outline.k-primary {
-        border-color: currentColor;
-        color: $primary-button-bg;
-        background: none;
-        box-shadow: none;
+        @extend .k-button-outline-primary !optional;
+    }
 
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-        }
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            border-color: currentColor;
+            color: $color;
+            background-color: transparent;
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
-        }
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
 
-        // Actove state
-        &:active,
-        &.k-state-active {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
-        }
+            // Focused state
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                @if ($outline-button-shadow) {
+                    box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $color, $outline-button-shadow-opacity );
+                }
+            }
 
-        // Selected state
-        &.k-state-selected {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
-            box-shadow: none;
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+
+            // Selected state
+            &.k-state-selected {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
         }
     }
 
@@ -11785,17 +11816,65 @@ $tooltip-error-border: $tooltip-error-bg !default;
         &.k-state-focus {
             color: inherit;
         }
+
+        // Disabled state
+        &:disabled,
+        &.k-state-disabled {
+            color: $button-disabled-text;
+        }
     }
     .k-button-flat.k-primary {
+        @extend .k-button-flat-primary !optional;
+    }
 
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: $primary;
+    @each $name, $color in $button-theme-colors {
+        .k-button-flat.k-button-flat-#{$name} {
+
+            &,
+            &:hover,
+            &.k-state-hover,
+            &:active,
+            &.k-state-active,
+            &:focus,
+            &.k-state-focus {
+                color: $color;
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-state-disabled {
+                color: $button-disabled-text;
+            }
+        }
+    }
+
+}
+
+
+
+
+@include exports( "link-button/theme" ) {
+
+    @each $name, $color in map-merge( $button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-link.k-button-link-#{$name} {
+            @include box-shadow( none );
+            color: $color;
+
+            &:hover,
+            &.k-state-hover {
+                color: try-shade( $color, 2 );
+            }
+            &:focus,
+            &.k-state-focus {
+                @if ($link-button-shadow) {
+                    box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $color, $link-button-shadow-opacity );
+                }
+            }
+            &:active,
+            &.k-state-active,
+            &.k-state-selected {
+                color: try-shade( $color, 2 );
+            }
         }
     }
 
@@ -12087,6 +12166,7 @@ $tooltip-error-border: $tooltip-error-bg !default;
         .k-toolbar {
             padding: 0;
             border-width: 0;
+            flex-shrink: 1;
             color: inherit;
             background: none;
         }
@@ -13423,7 +13503,7 @@ $textarea-invalid-focus-shadow: $invalid-shadow !default;
         // Targets https://github.com/telerik/kendo-react/issues/638.
         box-shadow: none;
         background: none;
-        display: inline-flex;
+        display: flex;
         flex-wrap: nowrap;
         vertical-align: middle;
         position: relative;
@@ -13709,9 +13789,18 @@ $listbox-drop-hint-width: 1px !default;
 
         .k-list-scroller {
             width: 100%;
+            height: inherit;
             border-width: $listbox-border-width;
             border-style: solid;
             box-sizing: border-box;
+
+            .k-list-scroller {
+                border-width: 0;
+            }
+
+            .k-list {
+                height: inherit;
+            }
         }
 
         .k-drop-hint {
@@ -14642,42 +14731,11 @@ $slider-disabled-opacity: null !default;
         line-height: $slider-line-height;
         background: none;
         display: inline-flex;
-        align-items: stretch;
+        align-items: center;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
-        .k-button {
-            height: $slider-button-size;
-            line-height: $slider-button-size;
-            margin: 0;
-            min-width: 0;
-            outline: 0;
-            padding: 0;
-            position: absolute;
-            width: $slider-button-size;
-            box-sizing: content-box;
-
-            .k-icon,
-            .k-button-icon {
-                vertical-align: baseline;
-                line-height: $slider-button-size;
-                height: 100%;
-            }
-        }
-
-        .k-button-increase {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-
-        .k-button-decrease {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
         .k-label {
             width: auto;
             font-size: .92em;
@@ -14717,28 +14775,18 @@ $slider-disabled-opacity: null !default;
                 left: auto;
                 right: 0;
             }
-
-            .k-button-increase {
-                left: 0;
-                right: auto;
-            }
-
-            .k-button-decrease {
-                right: 0;
-                left: auto;
-            }
         }
     }
 
 
     // New rendering
     .k-slider {
+        width: min-content;
+        height: min-content;
         gap: calc( #{$slider-draghandle-size} / 2 );
 
         > .k-button {
-            position: relative;
-            flex-shrink: 0;
-            align-self: center;
+            flex: none;
         }
         > .k-slider-track-wrap {
             flex: 1 1 auto;
@@ -14755,8 +14803,7 @@ $slider-disabled-opacity: null !default;
                 display: flex;
                 flex-flow: inherit;
                 justify-content: space-between;
-
-                &::after { display: none; }
+                user-select: none;
             }
             .k-tick {
                 flex: 0 0 1px;
@@ -14769,6 +14816,7 @@ $slider-disabled-opacity: null !default;
 
         &-horizontal {
             > .k-slider-track-wrap {
+                height: 26px;
 
                 .k-slider-track {
                     width: 100%;
@@ -14821,6 +14869,7 @@ $slider-disabled-opacity: null !default;
 
         &-vertical {
             > .k-slider-track-wrap {
+                width: 26px;
 
                 .k-slider-track {
                     height: 100%;
@@ -14853,14 +14902,8 @@ $slider-disabled-opacity: null !default;
     // Slider vertical
     .k-slider-vertical {
         height: $slider-size;
-        width: $slider-alt-size;
         flex-flow: column-reverse nowrap;
 
-        .k-button-decrease {
-            bottom: 0;
-            top: auto;
-        }
-
         .k-tick {
             text-align: right;
             margin-left: 2px;
@@ -14872,32 +14915,32 @@ $slider-disabled-opacity: null !default;
 
         // ticks
 
-        .k-tick { background-position: -92px center; }
-        .k-slider-topleft .k-tick { background-position: -122px center; }
-        .k-slider-bottomright .k-tick { background-position: -152px center; }
+        .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 {
             display: flex;
             align-items: center;
-            background-position: -2px center;
+            background-position: -4px center;
         }
 
-        .k-slider-topleft .k-tick-large { background-position: -32px center; }
-        .k-slider-bottomright .k-tick-large { background-position: -62px 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: -92px 100%; }
-        .k-tick-large.k-first { background-position: -2px 100%; }
-        .k-slider-topleft .k-first { background-position: -122px 100%; }
-        .k-slider-topleft .k-tick-large.k-first { background-position: -32px 100%; }
-        .k-slider-bottomright .k-first { background-position: -152px 100%; }
-        .k-slider-bottomright .k-tick-large.k-first { background-position: -62px 100%; }
+        .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: -92px 0; }
-        .k-tick-large.k-last { background-position: -2px 0; }
-        .k-slider-topleft .k-last { background-position: -122px 0; }
-        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
-        .k-slider-bottomright .k-last { background-position: -152px 0; }
-        .k-slider-bottomright .k-tick-large.k-last { background-position: -62px 0; }
+        .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; }
 
         // labels
 
@@ -14935,17 +14978,9 @@ $slider-disabled-opacity: null !default;
 
     // Slider horizontal
     .k-slider-horizontal {
-        height: $slider-alt-size;
         width: $slider-size;
         flex-flow: row nowrap;
 
-        // ticks
-        .k-tick {
-            float: left;
-            height: 100%;
-            text-align: center;
-        }
-
         .k-tick { background-position: center -92px; }
         .k-slider-topleft .k-tick { background-position: center -122px; }
         .k-slider-bottomright .k-tick { background-position: center -152px; }
@@ -14991,9 +15026,6 @@ $slider-disabled-opacity: null !default;
                 right: 0;
                 left: auto;
             }
-            .k-slider-buttons .k-slider-track {
-                right: $slider-button-spacing;
-            }
 
             .k-button .k-i-arrow-e,
             .k-button .k-i-arrow-w {
@@ -15002,11 +15034,6 @@ $slider-disabled-opacity: null !default;
         }
     }
 
-    .k-slider-wrap {
-        height: 100%;
-        width: 100%;
-    }
-
     .k-slider-track,
     .k-slider-selection {
         margin: 0;
@@ -15028,16 +15055,6 @@ $slider-disabled-opacity: null !default;
         }
     }
 
-    .k-slider-buttons .k-slider-track {
-        .k-slider-horizontal & {
-            left: $slider-button-spacing;
-        }
-
-        .k-slider-vertical & {
-            bottom: $slider-button-spacing;
-        }
-    }
-
 
     .k-draghandle {
         background-color: transparent;
@@ -15048,30 +15065,10 @@ $slider-disabled-opacity: null !default;
         position: absolute;
         text-align: center;
         text-decoration: none;
-        box-sizing: content-box;
+        box-sizing: border-box;
         width: $slider-draghandle-size;
         height: $slider-draghandle-size;
 
-        .k-slider-horizontal & {
-            top: 50%;
-            transform: translateY(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateY(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
-        .k-slider-vertical & {
-            left: 50%;
-            transform: translateX(-50%);
-
-            &:active,
-            &.k-pressed {
-                transform: translateX(-50%) scale($slider-draghandle-active-scale);
-            }
-        }
-
         .k-slider-transitions.k-slider-horizontal & {
             transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
         }
@@ -15100,34 +15097,18 @@ $slider-disabled-opacity: null !default;
     }
 
 
-    .k-slider-items {
-        user-select: none;
-
-        .k-slider-buttons & {
-            margin-left: $slider-button-spacing;
-        }
-
-        .k-slider-horizontal & {
-            height: 100%;
-            padding: 2px 0;
-            box-sizing: border-box;
-        }
-
-        .k-slider-vertical & {
-            padding-top: 1px;
-        }
-
-        .k-slider-vertical .k-slider-buttons & {
-            margin: 0;
-            padding-top: $slider-button-spacing;
+    // Slider readonly
+    .k-slider.k-readonly {
+        .k-button,
+        .k-slider-track,
+        .k-tick,
+        .k-draghandle {
+            pointer-events: none;
         }
     }
-    .k-slider-items::after {
-        content: "";
-        display: block;
-        clear: both;
-    }
 
+
+    // Slider tooltip
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
@@ -15210,12 +15191,6 @@ $slider-disabled-opacity: null !default;
         &.k-state-disabled {
             opacity: $slider-disabled-opacity;
         }
-
-        .k-slider-wrap {
-            &:focus {
-                outline: none;
-            }
-        }
     }
 
     .k-slider-horizontal .k-tick {
@@ -17210,10 +17185,6 @@ $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
             z-index: 1;
         }
 
-        .k-slider-wrap > .k-slider-track {
-            height: $colorgradient-slider-vertical-size;
-        }
-
         .k-slider-selection {
             display: none;
         }
@@ -19309,8 +19280,8 @@ $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$button-padding-y /2} + 2px );
+                padding: ($button-padding-y / 4) ($button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;
@@ -19732,6 +19703,16 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
     }
 
 
+    // Treeview filter
+    .k-treeview-filter {
+        padding: map-get( $spacing, 1 );
+        box-sizing: border-box;
+        display: block;
+        position: relative;
+        flex: none;
+    }
+
+
     // Treeview group
     .k-treeview-group,
     .k-treeview .k-group {
@@ -19792,11 +19773,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
     .k-treeview .k-i-collapse {
         margin-left: -$treeview-indent;
         cursor: pointer;
-
-        + .k-checkbox-wrap,
-        + .k-checkbox-wrapper {
-            margin-left: $icon-spacing;
-        }
     }
 
 
@@ -19809,6 +19785,7 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
     // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
+        margin-left: $icon-spacing;
         margin-right: $icon-spacing;
         align-self: center;
     }
@@ -19872,11 +19849,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
         .k-treeview-toggle {
             margin-left: 0;
             margin-right: -$treeview-indent;
-
-            + .k-checkbox-wrap,
-            + .k-checkbox-wrapper {
-                margin-right: $icon-spacing;
-            }
         }
 
         // Loading
@@ -19885,13 +19857,6 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
             margin-left: $icon-spacing;
         }
 
-        // Checkbox
-        .k-checkbox-wrap,
-        .k-checkbox-wrapper {
-            margin-right: 0;
-            margin-left: $icon-spacing;
-        }
-
         // Treeview leaf
         .k-treeview-leaf,
         .k-in {
@@ -19902,8 +19867,8 @@ $treeview-loadmore-focus-shadow: $treeview-item-focused-shadow !default;
                 margin-left: $icon-spacing;
             }
         }
-
     }
+
 }
 
 // #endregion
@@ -23212,10 +23177,10 @@ $actionsheet-item-disabled-shadow: null !default;
         margin-top: -($window-inner-padding-y / 2);
     }
     .k-window-content:first-child {
-        padding-top: #{"max( #{$window-inner-padding-y}, #{$window-titlebar-padding-y} )"};
+        padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
     }
     .k-window-content:last-child {
-        padding-bottom: #{"max( #{$window-inner-padding-y}, #{$window-titlebar-padding-y} )"};
+        padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
     }
 
     .k-window-iframecontent {
@@ -26589,7 +26554,7 @@ $tabstrip-content-border-focused: $component-text !default;
         color: inherit;
         background-color: transparent;
         display: flex;
-        flex-direction: column;
+        flex-flow: column nowrap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
@@ -26682,6 +26647,9 @@ $tabstrip-content-border-focused: $component-text !default;
         left: 0;
         transition: width .2s linear;
 
+        // TODO: a better name
+        display: none;
+
         &.k-complete {
             width: 100%;
             border-top-width: 0;
@@ -26695,6 +26663,7 @@ $tabstrip-content-border-focused: $component-text !default;
 
             > .k-tabstrip-items {
                 flex: 1 1 auto;
+                flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
             }
@@ -30379,7 +30348,7 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
             padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
         }
         .k-popup > & {
-            width: 100%;
+            max-width: 100%;
         }
 
         .k-actions {
@@ -30675,12 +30644,6 @@ $adaptive-scheduler-subtle-text: $subtle-text !default;
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {
@@ -31388,6 +31351,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         margin: 0;
     }
     .k-spreadsheet-tabstrip .k-loading {
+        // TODO: better name
         display: none;
     }
     .k-spreadsheet-tabstrip .k-content,
@@ -33739,9 +33703,13 @@ $treelist-footer-row-border-width: 1px !default;
             padding: .4em .6em;
             line-height: 1.6em;
 
+            // TODO: see what this does and use a better name
             .k-loading {
                 vertical-align: baseline;
                 margin-right: 5px;
+
+                // TODO
+                display: none;
             }
         }
 
@@ -39760,10 +39728,16 @@ $chat-quick-reply-hover-border: $primary !default;
 
         .k-scroll-button {
             height: 100%;
+            aspect-ratio: auto;
             position: absolute;
             z-index: 2;
             top: 50%;
             transform: translateY(-50%);
+
+            .k-button-icon {
+                min-width: auto;
+                min-height: auto;
+            }
         }
         .k-scroll-button-left {
             left: 0;
@@ -40060,6 +40034,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -40067,8 +40044,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -40076,6 +40054,9 @@ $mediaplayer-titlebar-gradient: rgba( $mediaplayer-text, .7 ), rgba( $mediaplaye
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;