@progress/kendo-theme-material 5.1.2-dev.6 → 5.2.1-dev.0

package/dist/all.scss

@@ -1864,9 +1864,10 @@ $padding-x-lg: $padding-x * 1.5 !default;
 $padding-y-lg: $padding-y * 1.5 !default;
 
 /// Border radius for all components.
-$border-radius: 2px !default;
-$border-radius-sm: $border-radius / 2 !default;
-$border-radius-lg: $border-radius * 2 !default;
+$kendo-border-radius: map-get( $spacing, 1 ) !default;
+$kendo-border-radius-sm: $kendo-border-radius / 2 !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: $kendo-border-radius * 1.5 !default;
 
 $panel-padding-x: $padding-x !default;
 $panel-padding-y: $padding-y !default;
@@ -2564,7 +2565,7 @@ $display4-letter-spacing: null !default;
     // Panels
     .k-block,
     .k-panel {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         @include fill(
             $panel-text,
             $panel-bg,
@@ -2576,7 +2577,7 @@ $display4-letter-spacing: null !default;
         box-sizing: border-box;
 
         > .k-header {
-            @include border-top-radius( $border-radius );
+            @include border-top-radius( $kendo-border-radius-md );
             @include fill(
                 $header-text,
                 $header-bg,
@@ -4148,11 +4149,11 @@ $display4-letter-spacing: null !default;
 // Component
 // #region @import "_border.scss"; -> packages/material/scss/utils/_border.scss
 $utils-border-radius: (
-    default: map-get( $spacing, 1 ),
+    default: $kendo-border-radius-md,
     0: 0,
-    sm: .125rem,
-    md: .25rem,
-    lg: .375rem,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
     full: 9999px
 ) !default;
 
@@ -4200,11 +4201,11 @@ $utils-border-radius: (
     ) !default;
 
     $utils-border-radius: (
-        default: map-get( $spacing, 1 ),
+        default: $kendo-border-radius-md,
         0: 0,
-        sm: ( map-get( $spacing, 1 ) / 4 ),
-        md: ( map-get( $spacing, 1 ) / 2 ),
-        lg: map-get( $spacing, 1 ),
+        sm: $kendo-border-radius-sm,
+        md: $kendo-border-radius-md,
+        lg: $kendo-border-radius-lg,
         full: 9999px
     ) !default;
 
@@ -4328,48 +4329,48 @@ $utils-border-radius: (
     /// @name k-d-flex
     /// @description This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
-    .k-d-flex                        { display: flex; }
-    .\!k-d-flex                      { display: flex !important; } // sass-lint:disable-line no-important class-name-format
+    .k-d-flex                           { display: flex; }
+    .\!k-d-flex                         { display: flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-inline-flex
     /// @description This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
-    .k-d-inline-flex                 { display: inline-flex; }
-    .\!k-d-inline-flex               { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
+    .k-d-inline-flex                    { display: inline-flex; }
+    .\!k-d-inline-flex                  { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-flex-row
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: row`.
     /// @group flex-layout
-    .k-d-flex-row                    { @extend .k-d-flex, .k-flex-row; }
-    .\!k-d-flex-row                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
+    .k-d-flex-row                       { @extend .k-d-flex, .k-flex-row; }
+    .\!k-d-flex-row                     { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-d-flex-col
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: column`.
     /// @group flex-layout
-    .k-d-flex-col                    { @extend .k-d-flex, .k-flex-col; }
-    .\!k-d-flex-col                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
+    .k-d-flex-col                       { @extend .k-d-flex, .k-flex-col; }
+    .\!k-d-flex-col                     { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-flex-row
     /// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
     /// @group flex-layout
-    .k-flex-row                      { flex-direction: row; }
-    .\!k-flex-row                    { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-row                         { flex-direction: row; }
+    .\!k-flex-row                       { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-row-reverse
     /// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
     /// @group flex-layout
-    .k-flex-row-reverse              { flex-direction: row-reverse; }
-    .\!k-flex-row-reverse            { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-row-reverse                 { flex-direction: row-reverse; }
+    .\!k-flex-row-reverse               { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col
     /// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
     /// @group flex-layout
-    .k-flex-col                      { flex-direction: column; }
-    .\!k-flex-col                    { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-col                         { flex-direction: column; }
+    .\!k-flex-col                       { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col-reverse
     /// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
     /// @group flex-layout
-    .k-flex-col-reverse              { flex-direction: column-reverse; }
-    .\!k-flex-col-reverse            { flex-direction: column-reverse; } // sass-lint:disable-line no-important class-name-format
+    .k-flex-col-reverse                 { flex-direction: column-reverse; }
+    .\!k-flex-col-reverse               { flex-direction: column-reverse !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Aliases
-    .k-flex-column                   { @extend .k-flex-col; }
-    .k-flex-column-reverse           { @extend .k-flex-col-reverse; }
+    .k-flex-column                      { @extend .k-flex-col; }
+    .k-flex-column-reverse              { @extend .k-flex-col-reverse; }
 
 
     // Flex wrap
@@ -4377,15 +4378,18 @@ $utils-border-radius: (
     /// @name k-flex-wrap
     /// @description This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
     /// @group flex-layout
-    .k-flex-wrap                     { flex-wrap: wrap; }
+    .k-flex-wrap                        { flex-wrap: wrap; }
+    .\!k-flex-wrap                      { flex-wrap: wrap !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-nowrap
     /// @description This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
     /// @group flex-layout
-    .k-flex-nowrap                   { flex-wrap: nowrap; }
+    .k-flex-nowrap                      { flex-wrap: nowrap; }
+    .\!k-flex-nowrap                    { flex-wrap: nowrap !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-wrap-reverse
     /// @description This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
     /// @group flex-layout
-    .k-flex-wrap-reverse             { flex-wrap: wrap-reverse; }
+    .k-flex-wrap-reverse                { flex-wrap: wrap-reverse; }
+    .\!k-flex-wrap-reverse              { flex-wrap: wrap-reverse !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Flex, shrink, grow,
@@ -4393,80 +4397,116 @@ $utils-border-radius: (
     /// @name k-flex-initial
     /// @description This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
     /// @group flex-layout
-    .k-flex-initial                  { flex: 0 1 auto; }
+    .k-flex-initial                     { flex: 0 1 auto; }
+    .\!k-flex-initial                   { flex: 0 1 auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-1
     /// @description This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` execpt it is allowed to shrink beyond its initial size.
     /// @group flex-layout
-    .k-flex-1                        { flex: 1 1 0%; }
+    .k-flex-1                           { flex: 1 1 0%; }
+    .\!k-flex-1                         { flex: 1 1 0% !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-auto
     /// @description This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
     /// @group flex-layout
-    .k-flex-auto                     { flex: 1 1 auto; }
+    .k-flex-auto                        { flex: 1 1 auto; }
+    .\!k-flex-auto                      { flex: 1 1 auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-none
     /// @description This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
     /// @group flex-layout
-    .k-flex-none                     { flex: none; }
+    .k-flex-none                        { flex: none; }
+    .\!k-flex-none                      { flex: none !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-grow
     /// @description This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
     /// @group flex-layout
-    .k-flex-grow                     { flex-grow: 1; }
+    .k-flex-grow                        { flex-grow: 1; }
+    .\!k-flex-grow                      { flex-grow: 1 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-grow-0
     /// @description This is equivalent to `flex-grow: 0`. The item will not grow.
     /// @group flex-layout
-    .k-flex-grow-0                   { flex-grow: 0; }
+    .k-flex-grow-0                      { flex-grow: 0; }
+    .\!k-flex-grow-0                    { flex-grow: 0 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-shrink
     /// @description This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
     /// @group flex-layout
-    .k-flex-shrink                   { flex-shrink: 1; }
+    .k-flex-shrink                      { flex-shrink: 1; }
+    .\!k-flex-shrink                    { flex-shrink: 1 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-shrink-0
     /// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
     /// @group flex-layout
-    .k-flex-shrink-0                 { flex-shrink: 0; }
+    .k-flex-shrink-0                    { flex-shrink: 0; }
+    .\!k-flex-shrink-0                  { flex-shrink: 0 !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-basis-auto
     /// @description This is equivalent to `flex-basis: auto`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It sizes the element according to its size property.
     /// @group flex-layout
-    .k-flex-basis-auto               { flex-basis: auto; }
+    .k-flex-basis-auto                  { flex-basis: auto; }
+    .\!k-flex-basis-auto                { flex-basis: auto !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-basis-0
     /// @description This is equivalent to `flex-basis: 0`. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. It disregards the element' size property.
     /// @group flex-layout
-    .k-flex-basis-0                  { flex-basis: 0%; }
+    .k-flex-basis-0                     { flex-basis: 0%; }
+    .\!k-flex-basis-0                   { flex-basis: 0% !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Flex align
-    .k-align-items-start            { align-items: flex-start; }
-    .k-align-items-end              { align-items: flex-end; }
-    .k-align-items-center           { align-items: center; }
-    .k-align-items-stretch          { align-items: stretch; }
-    .k-align-items-baseline         { align-items: baseline; }
-
-    .k-align-content-start          { align-content: flex-start; }
-    .k-align-content-end            { align-content: flex-end; }
-    .k-align-content-center         { align-content: center; }
-    .k-align-content-stretch        { align-content: stretch; }
-    .k-align-content-baseline       { align-content: baseline; }
-
-    .k-align-self-start             { align-self: flex-start; }
-    .k-align-self-end               { align-self: flex-end; }
-    .k-align-self-center            { align-self: center; }
-    .k-align-self-stretch           { align-self: stretch; }
-    .k-align-self-baseline          { align-self: baseline; }
+    .k-align-items-start                { align-items: flex-start; }
+    .\!k-align-items-start              { align-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-end                  { align-items: flex-end; }
+    .\!k-align-items-end                { align-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-center               { align-items: center; }
+    .\!k-align-items-center             { align-items: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-stretch              { align-items: stretch; }
+    .\!k-align-items-stretch            { align-items: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-items-baseline             { align-items: baseline; }
+    .\!k-align-items-baseline           { align-items: baseline !important; } // sass-lint:disable-line no-important class-name-format
+
+    .k-align-content-start              { align-content: flex-start; }
+    .\!k-align-content-start            { align-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-end                { align-content: flex-end; }
+    .\!k-align-content-end              { align-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-center             { align-content: center; }
+    .\!k-align-content-center           { align-content: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-stretch            { align-content: stretch; }
+    .\!k-align-content-stretch          { align-content: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-content-baseline           { align-content: baseline; }
+    .\!k-align-content-baseline         { align-content: baseline !important; } // sass-lint:disable-line no-important class-name-format
+
+    .k-align-self-start                 { align-self: flex-start; }
+    .\!k-align-self-start               { align-self: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-end                   { align-self: flex-end; }
+    .\!k-align-self-end                 { align-self: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-center                { align-self: center; }
+    .\!k-align-self-center              { align-self: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-stretch               { align-self: stretch; }
+    .\!k-align-self-stretch             { align-self: stretch !important; } // sass-lint:disable-line no-important class-name-format
+    .k-align-self-baseline              { align-self: baseline; }
+    .\!k-align-self-baseline            { align-self: baseline !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Justify content
-    .k-justify-content-start        { justify-content: flex-start; }
-    .k-justify-content-end          { justify-content: flex-end; }
-    .k-justify-content-center       { justify-content: center; }
-    .k-justify-content-between      { justify-content: space-between; }
-    .k-justify-content-around       { justify-content: space-around; }
-    .k-justify-content-evenly       { justify-content: space-evenly; }
-    .k-justify-content-stretch > *  { flex: 1 0 0%; }
+    .k-justify-content-start            { justify-content: flex-start; }
+    .\!k-justify-content-start          { justify-content: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-end              { justify-content: flex-end; }
+    .\!k-justify-content-end            { justify-content: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-center           { justify-content: center; }
+    .\!k-justify-content-center         { justify-content: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-between          { justify-content: space-between; }
+    .\!k-justify-content-between        { justify-content: space-between !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-around           { justify-content: space-around; }
+    .\!k-justify-content-around         { justify-content: space-around !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-evenly           { justify-content: space-evenly; }
+    .\!k-justify-content-evenly         { justify-content: space-evenly !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-content-stretch > *      { flex: 1 0 0%; }
+    .\!k-justify-content-stretch > *    { flex: 1 0 0% !important; } // sass-lint:disable-line no-important class-name-format
 
 
     // Justify items
-    .k-justify-items-start          { justify-items: flex-start; }
-    .k-justify-items-end            { justify-items: flex-end; }
-    .k-justify-items-center         { justify-items: center; }
-    .k-justify-items-stretch        { justify-items: stretch; }
+    .k-justify-items-start              { justify-items: flex-start; }
+    .\!k-justify-items-start            { justify-items: flex-start !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-end                { justify-items: flex-end; }
+    .\!k-justify-items-end              { justify-items: flex-end !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-center             { justify-items: center; }
+    .\!k-justify-items-center           { justify-items: center !important; } // sass-lint:disable-line no-important class-name-format
+    .k-justify-items-stretch            { justify-items: stretch; }
+    .\!k-justify-items-stretch          { justify-items: stretch !important; } // sass-lint:disable-line no-important class-name-format
 
 }
 
@@ -7757,6 +7797,14 @@ $kendo-checkbox-ripple-opacity: .2 !default;
             right: 0;
         }
     }
+    .k-list-item-text,
+    .k-list-optionlabel {
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+        }
+    }
     .k-list-optionlabel {
         @extend .k-list-item;
     }
@@ -8019,7 +8067,7 @@ $kendo-checkbox-ripple-opacity: .2 !default;
 // #region @import "_variables.scss"; -> packages/material/scss/listgroup/_variables.scss
 // Listgroup
 $listgroup-border-width: 1px !default;
-$listgroup-border-radius: $border-radius !default;
+$listgroup-border-radius: $kendo-border-radius-md !default;
 
 $listgroup-font-size: $font-size !default;
 $listgroup-line-height: (20 / 14) !default;
@@ -8373,7 +8421,7 @@ $popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevati
         }
     }
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius-md );
 
         .k-popup {}
     }
@@ -8431,7 +8479,7 @@ $popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevati
     }
 
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius );
     }
 
 }
@@ -8572,21 +8620,21 @@ $popup-shadow: 0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevati
 $badge-padding-x: $padding-y !default;
 $badge-padding-y: $badge-padding-x !default;
 $badge-border-width: 1px !default;
-$badge-border-radius: $border-radius !default;
+$badge-border-radius: $kendo-border-radius-md !default;
 $badge-font-size: $font-size-sm !default;
 $badge-line-height: 1 !default;
 
 $badge-padding-x-sm: ( $badge-padding-x / 2 ) !default;
 $badge-padding-y-sm: ( $badge-padding-y / 2 ) !default;
 $badge-border-width-sm: $badge-border-width !default;
-$badge-border-radius-sm: $border-radius-sm !default;
+$badge-border-radius-sm: $kendo-border-radius-sm !default;
 $badge-font-size-sm: $font-size-xs !default;
 $badge-line-height-sm: 1 !default;
 
 $badge-padding-x-lg: ( $badge-padding-x * 1.5 ) !default;
 $badge-padding-y-lg: ( $badge-padding-y * 1.5 ) !default;
 $badge-border-width-lg: $badge-border-width !default;
-$badge-border-radius-lg: $border-radius-lg !default;
+$badge-border-radius-lg: $kendo-border-radius-lg !default;
 $badge-font-size-lg: $font-size !default;
 $badge-line-height-lg: 1 !default;
 
@@ -8904,8 +8952,19 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+/// Horizontal padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-sm: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-md: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-x-lg: map-get( $spacing, 1 ) !default;
+
+/// Vertical padding of the arrow button.
+/// @group button
 $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y-sm: $kendo-button-padding-y-sm !default;
+$kendo-button-arrow-padding-y-md: $kendo-button-padding-y-md !default;
+$kendo-button-arrow-padding-y-lg: $kendo-button-padding-y-lg !default;
 
 /// Theme colors map for the button.
 /// @group button
@@ -9069,6 +9128,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
         box-sizing: border-box;
         border-width: $kendo-button-border-width;
         border-style: solid;
+        border-radius: $kendo-button-border-radius;
         color: inherit;
         background: none;
         font-family: $kendo-button-font-family;
@@ -9283,6 +9343,18 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
             aspect-ratio: auto;
             flex: none;
 
+            &.k-button-sm {
+                padding: $kendo-button-arrow-padding-y-sm $kendo-button-arrow-padding-x-sm;
+            }
+
+            &.k-button-md {
+                padding: $kendo-button-arrow-padding-y-md $kendo-button-arrow-padding-x-md;
+            }
+
+            &.k-button-lg {
+                padding: $kendo-button-arrow-padding-y-lg $kendo-button-arrow-padding-x-lg;
+            }
+
             .k-button-icon {
                 min-width: 0;
             }
@@ -10178,7 +10250,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         position: relative;
         z-index: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
         -webkit-appearance: none;
 
         // Hide clear icon
@@ -10217,7 +10289,7 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
     .k-input-value-text {
         flex: 1;
         overflow: hidden;
-        text-overflow: clip;
+        text-overflow: ellipsis;
     }
     .k-input-value-text::before {
         content: "\200b";
@@ -12326,6 +12398,8 @@ $kendo-chip-list-sizes: (
 
     // Chip content
     .k-chip-content {
+        padding: .5em 0;
+        margin: -.5em 0;
         min-width: 0;
         display: flex;
         flex-flow: row nowrap;
@@ -12649,7 +12723,7 @@ $kendo-chip-list-sizes: (
 // #endregion
 // #region @import "_variables.scss"; -> packages/material/scss/color-preview/_variables.scss
 // Color Preview
-$color-preview-border-radius: $border-radius !default;
+$color-preview-border-radius: $kendo-border-radius-md !default;
 $color-preview-border-width: 1px !default;
 $color-preview-bg: null !default;
 $color-preview-text: null !default;
@@ -12817,7 +12891,7 @@ $loader-secondary-bg: #000000 !default;
 $loader-container-panel-border-width: 1px !default;
 $loader-container-panel-border-style: solid !default;
 $loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $loader-container-panel-bg: $white !default;
 
 $loader-container-padding-sm: map-get( $spacing, 4 ) !default;
@@ -13345,7 +13419,7 @@ $loader-container-font-size-lg: $font-size-lg !default;
 // #region @import "_variables.scss"; -> packages/material/scss/skeleton/_variables.scss
 // Skeleton
 $skeleton-text-transform: scale( 1, .6 ) !default;
-$skeleton-text-border-radius: $border-radius !default;
+$skeleton-text-border-radius: $kendo-border-radius-md !default;
 
 $skeleton-rect-border-radius: 0 !default;
 
@@ -13500,7 +13574,7 @@ $tooltip-padding-y: ($padding-y * .75) !default;
 $tooltip-padding-x: ($padding-x / 2) !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
-$tooltip-border-radius: $border-radius !default;
+$tooltip-border-radius: $kendo-border-radius-md !default;
 
 $tooltip-font-family: $font-family !default;
 $tooltip-font-size: $font-size-sm !default;
@@ -15022,11 +15096,6 @@ $fieldset-legend-border: null !default;
             display: inline-flex;
             width: 100%;
         }
-        .k-daterangepicker {
-            width: 100%;
-            flex-flow: column nowrap;
-            gap: 0;
-        }
     }
 
     // Form Buttons Container
@@ -16006,7 +16075,7 @@ $progressbar-chunk-border: $component-bg !default;
 
     // Base
     .k-progressbar {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         --kendo-progressbar-progress: 0;
         border-width: $progressbar-border-width;
         border-style: solid;
@@ -17500,7 +17569,7 @@ $slider-disabled-opacity: .65 !default;
 
         .k-slider-track,
         .k-slider-selection {
-            @include border-radius( $border-radius );
+            @include border-radius( $kendo-border-radius );
         }
 
         .k-slider-track {
@@ -18115,6 +18184,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 line-height: $calendar-navigation-item-height;
                 cursor: pointer;
                 padding: 0 1em;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: clip;
             }
         }
 
@@ -19313,7 +19385,7 @@ $colorgradient-spacer: map-get( $spacing, 3 ) !default;
 
 $colorgradient-width: 294px !default;
 $colorgradient-border-width: 1px !default;
-$colorgradient-border-radius: $border-radius !default;
+$colorgradient-border-radius: $kendo-border-radius-md !default;
 $colorgradient-padding-y: $colorgradient-spacer !default;
 $colorgradient-padding-x: $colorgradient-padding-y !default;
 $colorgradient-gap: $colorgradient-spacer !default;
@@ -19327,7 +19399,7 @@ $colorgradient-border: $component-border !default;
 $colorgradient-focus-border: $hovered-border !default;
 $colorgradient-focus-shadow: $box-shadow-depth-2 !default;
 
-$colorgradient-canvas-border-radius: $border-radius !default;
+$colorgradient-canvas-border-radius: $kendo-border-radius-md !default;
 $colorgradient-canvas-gap: $colorgradient-spacer !default;
 $colorgradient-canvas-rectangle-height: 180px !default;
 
@@ -19499,6 +19571,10 @@ $colorgradient-contrast-spacer: map-get( $spacing, 2 ) !default;
         .k-numerictextbox {
             width: $colorgradient-input-width;
         }
+
+        .k-input-inner {
+            text-overflow: clip;
+        }
     }
 
     // Contrast
@@ -19680,7 +19756,7 @@ $coloreditor-spacer: map-get( $spacing, 3 ) !default;
 
 $coloreditor-min-width: 294px !default;
 $coloreditor-border-width: 1px !default;
-$coloreditor-border-radius: $border-radius !default;
+$coloreditor-border-radius: $kendo-border-radius-md !default;
 $coloreditor-font-family: $font-family !default;
 $coloreditor-font-size: $font-size !default;
 $coloreditor-line-height: $line-height !default;
@@ -23214,7 +23290,7 @@ $appbar-bottom-box-shadow: 0px -2px 3px rgba(0, 0, 0, .24) !default;
 $kendo-fab-border-width: 0px !default;
 /// Border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: $border-radius !default;
+$kendo-fab-border-radius: $kendo-border-radius-md !default;
 
 /// Font family of the FAB.
 /// @group floating-action-button
@@ -24830,6 +24906,7 @@ $notification-border: $component-border !default;
 @function notification-theme( $colors ) {
     $_theme: ();
 
+    // sass-lint:disable-block indentation
     @each $name, $color in $colors {
         $_theme: map-merge(( $name: (
             color: contrast-wcag( $color ),
@@ -25022,7 +25099,7 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
 $card-padding-x: map-get( $spacing, lg ) !default;
 $card-padding-y: map-get( $spacing, md ) !default;
 $card-border-width: 0px !default;
-$card-border-radius: $border-radius !default;
+$card-border-radius: $kendo-border-radius-md !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
 $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
@@ -26157,7 +26234,7 @@ $breadcrumb-delimiter-icon-padding-y: 0px !default;
 
 $breadcrumb-link-padding-x: ( $padding-x * 1.25 ) / 2 !default;
 $breadcrumb-link-padding-y: $padding-y !default;
-$breadcrumb-link-border-radius: $border-radius !default;
+$breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
 $breadcrumb-icon-link-padding-x: $breadcrumb-link-padding-x !default;
 $breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
@@ -26700,6 +26777,11 @@ $pager-dropdown-width: 5em !default;
             width: $pager-dropdown-width;
         }
 
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
+
         .k-rtl &,
         [dir="rtl"] & {
             .k-dropdown-list,
@@ -27160,6 +27242,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
             display: flex;
             align-items: center;
             justify-content: center;
+            flex: none;
             position: relative;
             z-index: 1;
             overflow: visible;
@@ -27193,7 +27276,7 @@ $stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !def
 
         // Step label
         .k-step-label {
-            max-width: 10em;
+            max-width: clamp(100%, 10em, 100%);
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;
@@ -29466,7 +29549,7 @@ $tilelayout-card-border-width: 1px !default;
 $tilelayout-card-focus-shadow: $card-focus-shadow !default;
 
 $tilelayout-hint-border-width: 1px !default;
-$tilelayout-hint-border-radius: $border-radius !default;
+$tilelayout-hint-border-radius: $kendo-border-radius-md !default;
 
 $tilelayout-bg: if( $dark-theme, $dark, $light) !default;
 
@@ -30327,7 +30410,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
 
     $grid-hierarchy-col-width: ($icon-size * 2) !default;
 
-    $grid-group-indicator-border-radius: $border-radius !default;
+    $grid-group-indicator-border-radius: $kendo-border-radius-md !default;
     $grid-group-indicator-gap: $table-cell-padding-y !default;
 
     $grid-grouping-row-border-top: 1px !default;
@@ -32939,9 +33022,9 @@ $spreadsheet-insert-image-dialog-preview-width: 355px !default;
 $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
 $spreadsheet-insert-image-dialog-preview-border: $component-border !default;
-$spreadsheet-insert-image-dialog-preview-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
-$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
 
 $spreadsheet-drawing-handle-width: 6px !default;
@@ -32951,7 +33034,7 @@ $spreadsheet-drawing-handle-border-width: 1px !default;
 $spreadsheet-drawing-handle-outline-color: $primary !default;
 $spreadsheet-drawing-handle-border-color: $primary !default;
 $spreadsheet-drawing-handle-bg: $primary !default;
-$spreadsheet-drawing-handle-border-radius: $border-radius-lg !default;
+$spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 
 $spreadsheet-drawing-outline-style: solid !default;
 $spreadsheet-drawing-outline-width: 2px !default;
@@ -33060,10 +33143,6 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
             min-width: $form-line-height * 1em;
         }
 
-        .k-input,
-        .k-picker {
-            width: 5em;
-        }
         .k-color-picker {
             width: min-content;
         }
@@ -33538,7 +33617,7 @@ $spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         line-height: 1;
         position: absolute;
         cursor: pointer;
@@ -34369,7 +34448,7 @@ $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$
 $pivotgrid-calculated-field-padding-x: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-padding-y: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-border-width: 1px !default;
-$pivotgrid-calculated-field-border-radius: $border-radius !default;
+$pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
 $pivotgrid-calculated-field-gap: $pivotgrid-spacer !default;
 
 $pivotgrid-calculated-field-bg: $component-bg !default;
@@ -36329,7 +36408,7 @@ $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
 $taskboard-column-border-width: 1px !default;
-$taskboard-column-border-radius: $border-radius !default;
+$taskboard-column-border-radius: $kendo-border-radius-md !default;
 $taskboard-column-bg: if( $dark-theme, $dark, $light) !default;
 $taskboard-column-text: null !default;
 $taskboard-column-border: transparent !default;
@@ -36881,7 +36960,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
 
     // Inline editor
     .k-editor-inline {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         padding: $padding-y-sm $padding-x-sm;
         border: 1px solid transparent;
         word-wrap: break-word;
@@ -37302,7 +37381,7 @@ $editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-line hex
             white-space: nowrap;
             overflow: hidden;
             cursor: pointer;
-            @include border-radius( $border-radius );
+            @include border-radius( $kendo-border-radius-md );
 
             .k-i-file,
             .k-i-folder {
@@ -37823,6 +37902,11 @@ $imageeditor-crop-overlay-bg: rgba(black, .3) !default;
         box-sizing: border-box;
         flex: none;
         overflow-y: auto;
+
+        .k-input-inner,
+        .k-input-value-text {
+            text-overflow: clip;
+        }
     }
 
 
@@ -38109,6 +38193,11 @@ $gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;
 $gantt-action-on-offset-text: #000000 !default;
 $gantt-offset-resize-handler-top: 50% !default;
 
+$gantt-validation-tooltip-width: 200px !default;
+$gantt-validation-tooltip-border: #656565 !default;
+$gantt-validation-tooltip-valid-border: $success !default;
+$gantt-validation-tooltip-invalid-border: $error !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/gantt/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/gantt/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/gantt/_layout.scss
@@ -38620,7 +38709,7 @@ $gantt-offset-resize-handler-top: 50% !default;
     // Single task
     .k-single-wrap {}
     .k-task-single {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         border-width: $gantt-task-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -38653,7 +38742,7 @@ $gantt-offset-resize-handler-top: 50% !default;
         }
     }
     .k-task-complete {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         width: 20%;
         position: absolute;
         z-index: 1;
@@ -38723,7 +38812,6 @@ $gantt-offset-resize-handler-top: 50% !default;
     }
 
     // Planned position
-
     .k-gantt-planned {
         .k-gantt-dependencies,
         .k-task-dot,
@@ -38754,7 +38842,6 @@ $gantt-offset-resize-handler-top: 50% !default;
     }
 
     // Planned element
-
     .k-task-planned {
         margin: 0 0 $gantt-planned-margin-y;
         line-height: $gantt-planned-line-height;
@@ -38787,7 +38874,6 @@ $gantt-offset-resize-handler-top: 50% !default;
     }
 
     // Planned Tooltip
-
     .k-planned-tooltip {
         .k-task-content {
             display: block;
@@ -38795,7 +38881,6 @@ $gantt-offset-resize-handler-top: 50% !default;
     }
 
     // Delay offset
-
     .k-task-offset-wrap .k-task-content .k-resize-e {
         display: none;
     }
@@ -38826,6 +38911,36 @@ $gantt-offset-resize-handler-top: 50% !default;
     .k-task-offset:hover .k-resize-handle {
         visibility: visible;
     }
+
+
+    // Dependency Validation Tooltip
+    .k-gantt-tooltip-validation {
+        max-width: $gantt-validation-tooltip-width;
+        display: block;
+
+        &::before {
+            content: "";
+            width: 4px;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+    .k-gantt-tooltip-validation-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    .k-gantt-tooltip-validation-label {
+        display: inline-flex;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .k-gantt-tooltip-validation-value {
+        font-weight: $font-weight-bold;
+    }
 }
 
 @include exports("gantt/export") {
@@ -38871,7 +38986,8 @@ $gantt-offset-resize-handler-top: 50% !default;
 
 @include exports("gantt/rtl") {
 
-    .k-rtl {
+    .k-rtl,
+    [dir="rtl"] {
 
         .k-gantt-rows,
         .k-gantt-columns {
@@ -38950,6 +39066,11 @@ $gantt-offset-resize-handler-top: 50% !default;
         .k-gantt-timeline .k-milestone-wrap .k-task-start {
             right: $gantt-rtl-milestone-dot-start-margin-x;
         }
+
+        .k-gantt-tooltip-validation::before {
+            left: auto;
+            right: 0;
+        }
     }
 }
 
@@ -39218,7 +39339,6 @@ $gantt-offset-resize-handler-top: 50% !default;
     }
 
     // Tooltips
-
     .k-offset-tooltip-delayed {
         @include fill(
             $bg: $gantt-delayed-bg
@@ -39230,6 +39350,22 @@ $gantt-offset-resize-handler-top: 50% !default;
             $bg: $gantt-planned-bg
         );
     }
+
+    .k-gantt-tooltip-validation {
+        &::before {
+            background-color: $gantt-validation-tooltip-border;
+        }
+    }
+    .k-gantt-tooltip-valid {
+        &::before {
+            background-color: $gantt-validation-tooltip-valid-border;
+        }
+    }
+    .k-gantt-tooltip-invalid {
+        &::before {
+            background-color: $gantt-validation-tooltip-invalid-border;
+        }
+    }
 }
 
 // #endregion
@@ -39315,7 +39451,7 @@ $scheduler-footer-border: null !default;
 $scheduler-footer-gradient: null !default;
 
 $scheduler-event-min-height: 25px !default;
-$scheduler-event-border-radius: $border-radius !default;
+$scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y-sm}) ) !default;
 
 $scheduler-event-bg: $primary !default;
@@ -39382,7 +39518,7 @@ $scheduler-tooltip-events-gap: $padding-y !default;
 
 $scheduler-tooltip-event-padding-x: $padding-x-sm !default;
 $scheduler-tooltip-event-padding-y: map-get( $spacing, 2 ) !default;
-$scheduler-tooltip-event-border-radius: $border-radius !default;
+$scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-tooltip-event-gap: $padding-x-sm !default;
 
 $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
@@ -39785,7 +39921,7 @@ $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         min-height: $scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;
@@ -42027,7 +42163,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             display: inline-block;
             text-align: center;
             padding: $timeline-flag-padding-y $timeline-flag-padding-x;
-            border-radius: $border-radius;
+            border-radius: $kendo-border-radius;
             line-height: $timeline-flag-line-height;
             min-width: $timeline-flag-min-width;
             max-width: $timeline-flag-max-width;
@@ -42091,7 +42227,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    border-radius: $border-radius;
+                    border-radius: $kendo-border-radius;
                 }
             }
         }
@@ -42135,7 +42271,7 @@ $timeline-event-min-height-calc: calc(2 * (#{$timeline-track-event-offset} - #{$
             height: 100%;
             width: $timeline-track-size;
             transform: translateX(-50%);
-            border-radius: $border-radius-lg;
+            border-radius: $kendo-border-radius-lg;
         }
 
         .k-timeline-flag-wrap {
@@ -43524,7 +43660,7 @@ $treemap-line-height: $line-height !default;
     }
 
     .k-chart-tooltip {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         font-size: $chart-tooltip-font-size;
         line-height: $line-height;
         padding: $tooltip-padding-y $tooltip-padding-x;
@@ -43632,7 +43768,7 @@ $treemap-line-height: $line-height !default;
     }
 
     .k-navigator-hint .k-scroll {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius-md );
         position: absolute;
         height: 4px;
     }
@@ -43859,7 +43995,7 @@ $treemap-line-height: $line-height !default;
         base: $base-bg,
         background: $chart-bg,
 
-        border-radius: $border-radius,
+        border-radius: $kendo-border-radius-md,
 
         normal-background: $base-bg,
         normal-text-color: $base-text,
@@ -44388,7 +44524,7 @@ $orgchart-node-container-gap: $orgchart-spacer !default;
 $orgchart-node-group-padding-y: $orgchart-spacer !default;
 $orgchart-node-group-padding-x: $orgchart-node-group-padding-y !default;
 $orgchart-node-group-border-width: 1px !default;
-$orgchart-node-group-border-radius: $border-radius !default;
+$orgchart-node-group-border-radius: $kendo-border-radius-md !default;
 $orgchart-node-group-bg: if( $dark-theme, $dark, $light) !default;
 $orgchart-node-group-text: $base-text !default;
 $orgchart-node-group-border: $base-border !default;