@progress/kendo-theme-material 5.5.1-dev.0 → 5.6.0

package/dist/all.scss

@@ -6968,16 +6968,16 @@ $message-box-link-text-decoration: underline !default;
 /// Font size of the list component, if no size is set.
 /// @group list
 $kendo-list-font-size: null !default;
-$kendo-list-font-size-sm: $font-size-lg !default;
-$kendo-list-font-size-md: $font-size-lg !default;
+$kendo-list-font-size-sm: $font-size-md !default;
+$kendo-list-font-size-md: $font-size-md !default;
 $kendo-list-font-size-lg: $font-size-lg !default;
 
 /// Line height of the list component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
-$kendo-list-line-height-sm: 1.25 !default;
-$kendo-list-line-height-md: 1.25 !default;
-$kendo-list-line-height-lg: 1.25 !default;
+$kendo-list-line-height-sm: (20 / 14) !default;
+$kendo-list-line-height-md: (20 / 14) !default;
+$kendo-list-line-height-lg: 1.5 !default;
 
 /// Horizontal padding of list header, if no size is set.
 /// @group list
@@ -6993,7 +6993,7 @@ $kendo-list-header-padding-y: null !default;
 $kendo-list-header-padding-y-base: map-get( $spacing, 2 ) !default;
 $kendo-list-header-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
 $kendo-list-header-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-list-header-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Border width of list header.
 /// @group list
@@ -7031,7 +7031,7 @@ $kendo-list-item-padding-y: null !default;
 $kendo-list-item-padding-y-base: map-get( $spacing, 2 ) !default;
 $kendo-list-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
 $kendo-list-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-list-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 
 /// Font size of list items, if no size is set.
 /// @group list
@@ -8948,33 +8948,32 @@ $kendo-button-border-radius: null !default;
 /// Horizontal padding of the button.
 /// @group button
 $kendo-button-padding-x: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
-
 /// Vertical padding of the button.
 /// @group button
 $kendo-button-padding-y: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
-
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
-
 /// Font sizes of the button.
 /// @group button
 $kendo-button-font-size: $font-size-md !default;
-$kendo-button-font-size-sm: $font-size-md !default;
-$kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-font-size-lg: $font-size-md !default;
-
 /// Line heights used along with $font-size.
 /// @group button
 $kendo-button-line-height: ( 20 / 14 ) !default;
+
+$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: ( 20 / 14 ) !default;
+
+$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: ( 20 / 14 ) !default;
+
+$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-button-font-size-lg: $font-size-md !default;
 $kendo-button-line-height-lg: ( 20 / 14 ) !default;
 
 /// Calculated height of the button.
@@ -8985,6 +8984,27 @@ $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;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
@@ -9210,45 +9230,27 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
 
     .k-button-text {}
 
-    // Sizes
-    .k-button-sm {
-        padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
-        font-size: $kendo-button-font-size-sm;
-        line-height: $kendo-button-line-height-sm;
-    }
-    .k-button-md {
-        padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
-        font-size: $kendo-button-font-size-md;
-        line-height: $kendo-button-line-height-md;
-    }
-    .k-button-lg {
-        padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
-        font-size: $kendo-button-font-size-lg;
-        line-height: $kendo-button-line-height-lg;
-    }
 
-    .k-icon-button.k-button-sm {
-        padding: $kendo-button-padding-y-sm;
+    // Sizes
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
-            min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
+        .k-button-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
         }
-    }
-    .k-icon-button.k-button-md {
-        padding: $kendo-button-padding-y-md;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-            min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-        }
-    }
-    .k-icon-button.k-button-lg {
-        padding: $kendo-button-padding-y-lg;
+        .k-button-#{$size}.k-icon-button {
+            padding: $_padding-y;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
-            min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
+            > .k-button-icon {
+                min-width: calc( #{$_font-size} * #{$_line-height} );
+                min-height: calc( #{$_font-size} * #{$_line-height} );
+            }
         }
     }
 
@@ -9969,16 +9971,33 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
 // Component
 // #region @import "_variables.scss"; -> packages/material/scss/input/_variables.scss
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: 1px !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 4 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 2 ) !default;
+///Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-lg !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: 1.25 !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 4 ) !default;
@@ -9992,9 +10011,9 @@ $kendo-input-font-size-md: $font-size-lg !default;
 $kendo-input-line-height-md: 1.25 !default;
 
 $kendo-input-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-lg: $font-size-lg !default;
-$kendo-input-line-height-lg: 1.25 !default;
+$kendo-input-line-height-lg: 1.5 !default;
 
 $kendo-input-sizes: (
     sm: (
@@ -16687,6 +16706,10 @@ $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $component-bg !default;
 
+// Circular Progressbar
+$kendo-circular-progressbar-arc-stroke: $primary !default;
+$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/progressbar/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/progressbar/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/progressbar/_layout.scss
@@ -16957,6 +16980,49 @@ $progressbar-chunk-border: $component-bg !default;
 
 }
 
+@include exports("circular-progressbar/layout") {
+
+    .k-circular-progressbar {
+        display: inline-block;
+        text-align: left;
+        position: relative;
+    }
+
+    .k-circular-progressbar-surface {
+        height: 100%;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-circular-progressbar-scale {
+        fill: none;
+    }
+
+    .k-circular-progressbar-arc {
+        transform-box: fill-box;
+        transform-origin: center center;
+        transform: rotate(-90deg);
+        stroke-linecap: round;
+        fill: none;
+    }
+
+    .k-circular-progressbar-label {
+        position: absolute;
+        text-align: center;
+        padding: 0;
+        margin: 0;
+    }
+
+}
+
 // #endregion
 
 @include exports("progressbar/layout/material") {
@@ -17034,6 +17100,51 @@ $progressbar-chunk-border: $component-bg !default;
 
 // #endregion
 // #region @import "_theme.scss"; -> packages/material/scss/progressbar/_theme.scss
+// #region @import "~@progress/kendo-theme-default/scss/progressbar/_theme.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/progressbar/_theme.scss
+@include exports("progressbar/theme") {
+
+    @keyframes progressbar-indeterminate-animation {
+        from { background-position: 0 0; }
+        to { background-position: $progressbar-height 0; }
+    }
+
+    .k-progressbar {
+        @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
+
+        .k-state-selected,
+        .k-selected {
+            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
+        }
+
+        .k-item {
+            border-color: $progressbar-chunk-border;
+        }
+    }
+
+    .k-progressbar-indeterminate {
+        @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
+        @include striped-gradient( shade($progressbar-indeterminate-bg) );
+        background-size: $progressbar-height $progressbar-height;
+        animation: progressbar-indeterminate-animation $progressbar-animation-timing;
+    }
+
+}
+
+@include exports("circular-progressbar/theme") {
+
+    .k-circular-progressbar-scale {
+        stroke: $kendo-circular-progressbar-scale-stroke;
+    }
+
+    .k-circular-progressbar-arc {
+        stroke: $kendo-circular-progressbar-arc-stroke;
+        transition: stroke .5s ease;
+    }
+
+}
+
+// #endregion
+
 @function _translate($direction, $value) {
     @return if($direction == horizontal, translateX($value), translateY($value));
 }
@@ -17081,32 +17192,12 @@ $progressbar-chunk-border: $component-bg !default;
     }
 }
 
-@include exports("progressbar/theme") {
+@include exports("progressbar/theme/material") {
     @include progressbar-indeterminate-animation(horizontal);
     @include progressbar-indeterminate-animation(vertical);
 
-    // Theme
-    .k-progressbar {
-        @include fill(
-            $progressbar-text,
-            $progressbar-bg,
-            $progressbar-border,
-            $progressbar-gradient
-        );
-
-        .k-state-selected,
-        .k-selected {
-            @include fill(
-                $progressbar-fill-text,
-                $progressbar-fill-bg,
-                $progressbar-fill-border,
-                $progressbar-fill-gradient
-            );
-        }
-
-        .k-item {
-            border-color: $progressbar-chunk-border;
-        }
+    .k-progressbar-indeterminate {
+        background-image: none;
     }
 }
 
@@ -18369,7 +18460,6 @@ $calendar-border: $component-border !default;
 $calendar-header-padding-x: map-get( $spacing, 1 ) !default;
 $calendar-header-padding-y: map-get( $spacing, 1 ) !default;
 $calendar-header-border-width: 0px !default;
-$calendar-header-min-width: ($calendar-cell-size * 8) !default;
 
 $calendar-header-bg: null !default;
 $calendar-header-text: $header-text !default;
@@ -18467,6 +18557,50 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 // Multiview calendar
 
+
+// Calendar sizes
+$kendo-calendar-sm-font-size: $font-size-md !default;
+$kendo-calendar-sm-line-height: $line-height-md !default;
+$kendo-calendar-sm-cell-size: 32px !default;
+$kendo-calendar-sm-cell-padding-x: .125rem !default;
+$kendo-calendar-sm-cell-padding-y: .125rem !default;
+
+$kendo-calendar-md-font-size: $font-size-md !default;
+$kendo-calendar-md-line-height: $line-height-md !default;
+$kendo-calendar-md-cell-size: 36px !default;
+$kendo-calendar-md-cell-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: map-get( $spacing, 1 ) !default;
+
+$kendo-calendar-lg-font-size: $font-size-lg !default;
+$kendo-calendar-lg-line-height: $line-height-lg !default;
+$kendo-calendar-lg-cell-size: 40px !default;
+$kendo-calendar-lg-cell-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: map-get( $spacing, 1 ) !default;
+
+$kendo-calendar-sizes: (
+    sm: (
+        font-size: $kendo-calendar-sm-font-size,
+        line-height: $kendo-calendar-sm-line-height,
+        cell-size: $kendo-calendar-sm-cell-size,
+        cell-padding-x: $kendo-calendar-sm-cell-padding-y,
+        cell-padding-y: $kendo-calendar-sm-cell-padding-x
+    ),
+    md: (
+        font-size: $kendo-calendar-md-font-size,
+        line-height: $kendo-calendar-md-line-height,
+        cell-size: $kendo-calendar-md-cell-size,
+        cell-padding-x: $kendo-calendar-md-cell-padding-y,
+        cell-padding-y: $kendo-calendar-md-cell-padding-x
+    ),
+    lg: (
+        font-size: $kendo-calendar-lg-font-size,
+        line-height: $kendo-calendar-lg-line-height,
+        cell-size: $kendo-calendar-lg-cell-size,
+        cell-padding-x: $kendo-calendar-lg-cell-padding-y,
+        cell-padding-y: $kendo-calendar-lg-cell-padding-x
+    )
+) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/calendar/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/calendar/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/calendar/_layout.scss
@@ -18474,6 +18608,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
     // Base
     .k-calendar {
+        inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-height, min-content );
         border-width: $calendar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -18494,19 +18630,12 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         > .k-calendar {
             border: 0;
         }
-
-        // Common
-        .k-link {
-            white-space: normal;
-            position: relative;
-            overflow: hidden;
-        }
     }
 
 
     // Calendar table
     .k-calendar-table {
-        margin: 0;
+        margin: 0 auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -18514,8 +18643,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         table-layout: fixed;
         text-align: center;
         outline: 0;
-        display: inline-table;
-        vertical-align: top;
+        display: table;
         position: relative;
         z-index: 1;
     }
@@ -18533,6 +18661,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         font-weight: $calendar-caption-font-weight;
         cursor: default;
     }
+
+
+    // Calendar cell
     .k-calendar-th,
     .k-calendar-td {
         border-width: 0;
@@ -18554,10 +18685,32 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
     }
     .k-calendar-td {
         @include border-radius( $calendar-cell-border-radius );
+        inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
+        block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
         border-color: transparent;
     }
 
 
+    // Calendar cell inner
+    // Remove .k-calendar once we remove k-link
+    .k-calendar .k-calendar-cell-inner {
+        @include border-radius( $calendar-cell-border-radius );
+        padding: $calendar-cell-padding-y $calendar-cell-padding-x;
+        padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$calendar-cell-padding-x} );
+        padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$calendar-cell-padding-y} );
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        white-space: normal;
+        position: relative;
+        overflow: hidden;
+    }
+
+
     // Calendar header
     .k-calendar .k-header {
         padding: $calendar-header-padding-y $calendar-header-padding-x;
@@ -18575,7 +18728,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
     // Calendar header
     .k-calendar-header {
         padding: $calendar-header-padding-y $calendar-header-padding-x;
-        min-width: $calendar-header-min-width;
+        min-width: ($calendar-cell-size * 8);
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -18617,22 +18770,13 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         padding: 0 $calendar-header-padding-x;
         // setting width / height prevents layout changes in meta views
         width: $calendar-view-width;
+        inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$calendar-view-width});
         min-height: $calendar-view-height;
         box-sizing: content-box;
         gap: $calendar-view-gap;
         position: relative;
         z-index: 1;
         overflow: hidden;
-
-        .k-link {
-            @include border-radius( $calendar-cell-border-radius );
-            padding: $calendar-cell-padding-y $calendar-cell-padding-x;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: center;
-        }
     }
     .k-week-number .k-calendar-view {
         width: (8 * $calendar-cell-size);
@@ -18640,61 +18784,59 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
     // Month view
+    .k-month-calendar,
     .k-calendar-monthview {
         $_month-cell-size: $calendar-cell-size;
 
         .k-calendar-td {
             width: $_month-cell-size;
             height: $_month-cell-size;
-        }
-        .k-link {
-            width: $_month-cell-size;
-            height: $_month-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
         }
     }
 
 
     // Year view
+    .k-year-calendar,
     .k-calendar-yearview {
-        $_year-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_year-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_year-cell-size;
             height: $_year-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
         }
     }
 
 
     // Decade view
+    .k-decade-calendar,
     .k-calendar-decadeview {
-        $_decade-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_decade-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_decade-cell-size;
             height: $_decade-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
         }
     }
 
 
     // Century view
+    .k-century-calendar,
     .k-calendar-centuryview {
-        $_century-cell-size: ( (7 / 4) * $calendar-cell-size);
+        $_century-cell-size: ( 1.75 * $calendar-cell-size ); // 7 / 4 => 1.75
 
         .k-calendar-td {
-            width: auto;
-            height: auto;
-        }
-        .k-link {
             width: $_century-cell-size;
             height: $_century-cell-size;
+            inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+            block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
+        }
+        .k-calendar-cell-inner {
             text-align: left;
         }
     }
@@ -18734,6 +18876,56 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         top: 0;
         right: 0;
     }
+
+
+
+
+    // Calendar sizes
+    @each $size, $size-props in $kendo-calendar-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_cell-size: map-get( $size-props, cell-size );
+        $_cell-padding-x: map-get( $size-props, cell-padding-x );
+        $_cell-padding-y: map-get( $size-props, cell-padding-y );
+
+        $_month-cell-size: $_cell-size;
+        $_year-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+        $_decade-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+        $_century-cell-size: ( 1.75 * $_cell-size ); // 7 / 4 => 1.75
+
+        .k-calendar-#{$size} {
+            --INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
+            --INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
+            --INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            &.k-month-calendar,
+            .k-calendar-monthview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
+            }
+            &.k-year-calendar,
+            .k-calendar-yearview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
+            }
+            &.k-decade-calendar,
+            .k-calendar-decadeview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
+            }
+            &.k-century-calendar,
+            .k-calendar-centuryview {
+                --INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
+            }
+        }
+    }
+
+
+
+
+    // Alias
+    .k-link {
+        @extend .k-calendar-cell-inner;
+    }
 }
 
 
@@ -19011,8 +19203,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             &.k-hover,
             &.k-state-hover,
             &:focus,
-            &.k-state-focus,
-            &.k-focus {
+            &.k-focus,
+            &.k-state-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19030,11 +19222,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         // Special days
         .k-calendar-view .k-today {
             @if $calendar-today-style == box {
-                .k-link {
+                .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-state-focused .k-link,
-                &.k-focus .k-link {
+                &.k-focus .k-calendar-cell-inner,
+                &.k-state-focused .k-calendar-cell-inner {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -19068,9 +19260,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
         // Interactive states
-        .k-calendar-td:hover .k-link,
-        .k-calendar-td.k-state-hover .k-link,
-        .k-calendar-td.k-hover .k-link {
+        .k-calendar-td:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-hover .k-calendar-cell-inner,
+        .k-calendar-td.k-state-hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -19078,8 +19270,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-state-selected .k-link,
-        .k-calendar-td.k-selected .k-link {
+        .k-calendar-td.k-selected .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -19087,12 +19279,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 $calendar-cell-selected-gradient
             );
         }
-        .k-calendar-td.k-state-selected:hover .k-link,
-        .k-calendar-td.k-selected:hover .k-link,
-        .k-calendar-td.k-state-selected.k-state-hover .k-link,
-        .k-calendar-td.k-selected.k-hover .k-link,
-        .k-calendar-td.k-selected:hover .k-link,
-        .k-calendar-td.k-selected.k-hover .k-link {
+        .k-calendar-td.k-selected:hover .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-hover .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected:hover .k-calendar-cell-inner {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -19100,18 +19289,15 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 $calendar-cell-selected-hover-gradient
             );
         }
-        .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-focus .k-link,
-        .k-calendar-td.k-state-focus .k-link,
-        .k-calendar-td.k-focus .k-link {
+        .k-calendar-td:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-focused .k-calendar-cell-inner {
             box-shadow: $calendar-cell-focused-shadow;
         }
-        .k-calendar-td.k-state-selected.k-state-focused .k-link,
-        .k-calendar-td.k-selected.k-focused .k-link,
-        .k-calendar-td.k-state-selected.k-state-focus .k-link,
-        .k-calendar-td.k-selected.k-focus .k-link,
-        .k-calendar-td.k-selected:focus .k-link,
-        .k-calendar-td.k-selected.k-focus .k-link {
+        .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
+        .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner,
+        .k-calendar-td.k-state-selected.k-state-focus .k-calendar-cell-inner {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -19125,8 +19311,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-state-hover,
-            li.k-hover {
+            li.k-hover,
+            li.k-state-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19181,19 +19367,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         .k-range-start,
         .k-range-end,
         .k-range-mid {
-            // sass-lint:disable-block indentation
-            background-image:
-                linear-gradient(
-                    transparent $calendar-range-gap,
-                    $calendar-range-bg $calendar-range-gap,
-                    $calendar-range-bg calc(100% - #{$calendar-range-gap}),
-                    transparent calc(100% - #{$calendar-range-gap})
-                );
-
-            .k-ie & {
-                background-image: none;
-                background-color: $calendar-range-bg;
-            }
+            background-color: $calendar-range-bg;
         }
 
         .k-range-start.k-range-end {
@@ -19203,16 +19377,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
         .k-range-start,
         .k-range-end {
-            .k-link {
+            .k-calendar-cell-inner {
                 background-color: $calendar-cell-selected-bg;
             }
         }
 
-        .k-range-start.k-state-active,
         .k-range-start.k-active,
-        .k-range-end.k-state-active,
-        .k-range-end.k-active {
-            .k-link {
+        .k-range-start.k-state-active,
+        .k-range-end.k-active,
+        .k-range-end.k-state-active {
+            .k-calendar-cell-inner {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
         }
@@ -19225,8 +19399,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 content: "";
                 display: block;
                 position: absolute;
-                top: $calendar-range-gap;
-                bottom: $calendar-range-gap;
+                top: 0;
+                bottom: 0;
                 width: $calendar-range-split-size;
             }
         }
@@ -19261,7 +19435,7 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-state-selected.k-state-focused .k-link,
-        .k-selected.k-focused .k-link {
+        .k-selected.k-focus .k-link {
             @include fill(
                 $calendar-cell-selected-text,
                 try-tint($calendar-cell-selected-bg),
@@ -19328,6 +19502,44 @@ $time-list-highlight-border: $component-border !default;
 
 $time-list-focused-bg: null !default;
 
+
+// Time selector sizes
+$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
+$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
+$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
+$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
+
+$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
+$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
+$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
+$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
+$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
+$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
+
+$kendo-time-selector-sizes: (
+    sm: (
+        font-size: $kendo-time-selector-sm-font-size,
+        line-height: $kendo-time-selector-sm-line-height,
+        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
+    ),
+    md: (
+        font-size: $kendo-time-selector-md-font-size,
+        line-height: $kendo-time-selector-md-line-height,
+        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
+    ),
+    lg: (
+        font-size: $kendo-time-selector-lg-font-size,
+        line-height: $kendo-time-selector-lg-line-height,
+        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
+        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
+    )
+) !default;
+
 // #endregion
 // #region @import "_layout.scss"; -> packages/material/scss/timeselector/_layout.scss
 // #region @import "~@progress/kendo-theme-default/scss/timeselector/_layout.scss"; -> packages/material/node_modules/@progress/kendo-theme-default/scss/timeselector/_layout.scss
@@ -19539,6 +19751,36 @@ $time-list-focused-bg: null !default;
         top: calc( #{$time-list-title-height / 2} );
     }
 
+
+    // Time selector sizes
+    @each $size, $size-props in $kendo-time-selector-sizes {
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+        $_list-item-padding-x: map-get( $size-props, list-item-padding-x );
+        $_list-item-padding-y: map-get( $size-props, list-item-padding-y );
+        $_highlight-height: calc( #{$_font-size * $_line-height} + #{ $_list-item-padding-y * 2} );
+
+
+        .k-timeselector-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+            .k-time-highlight,
+            .k-time-list-highlight {
+                height: $_highlight-height;
+            }
+
+            .k-time-separator {
+                height:  $_highlight-height;
+            }
+
+            .k-time-list-item,
+            .k-time-list .k-item {
+                padding: $_list-item-padding-y $_list-item-padding-x;
+            }
+        }
+    }
+
 }
 
 // #endregion
@@ -21278,15 +21520,15 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-lg !default;
-$kendo-treeview-font-size-sm: $font-size-lg !default;
-$kendo-treeview-font-size-md: $font-size-lg !default;
+$kendo-treeview-font-size-sm: $font-size-md !default;
+$kendo-treeview-font-size-md: $font-size-md !default;
 $kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: 1.25 !default;
-$kendo-treeview-line-height-sm: 1.25 !default;
-$kendo-treeview-line-height-md: 1.25 !default;
-$kendo-treeview-line-height-lg: 1.25 !default;
+$kendo-treeview-line-height-sm: ( 20 / 14 ) !default;
+$kendo-treeview-line-height-md: ( 20 / 14 ) !default;
+$kendo-treeview-line-height-lg: 1.5 !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -21302,7 +21544,7 @@ $kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
 $kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
 $kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
 $kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
-$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -24284,6 +24526,10 @@ $actionsheet-item-disabled-opacity: .42 !default;
             box-sizing: border-box;
         }
     }
+    .k-actionsheet-fullscreen {
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Actionsheet header
@@ -24297,6 +24543,35 @@ $actionsheet-item-disabled-opacity: .42 !default;
         font-size: $actionsheet-header-font-size;
         font-family: $actionsheet-header-font-family;
         line-height: $actionsheet-header-line-height;
+        flex: none;
+    }
+
+
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+    .k-actionsheet-title {
+        flex: 1;
+    }
+    .k-actionsheet-actions {
+        flex: none;
+    }
+
+
+    // Actionsheet content
+    .k-actionsheet-content {
+        flex: 1;
+        overflow: auto;
+    }
+
+
+    // Actionsheet footer
+    .k-actionsheet-footer {
+        flex: none;
     }
 
 
@@ -24393,6 +24668,37 @@ $actionsheet-item-disabled-opacity: .42 !default;
         transform: none;
     }
 
+
+    // Adaptive action sheet
+    .k-adaptive-actionsheet {
+        max-width: 100%;
+        width: 100%;
+
+        // TMP: this should be moved to action sheet
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-calendar {
+            margin-inline: auto;
+            border-width: 0;
+            display: flex;
+        }
+
+        .k-timeselector {
+            height: 100%;
+            border-width: 0;
+            overflow: hidden;
+
+            .k-time-part {
+                display: contents;
+            }
+
+            .k-time-list-wrapper {
+                height: 100%;
+            }
+        }
+    }
+
 }
 
 // #endregion
@@ -44901,8 +45207,6 @@ $treemap-line-height: $line-height !default;
 }
 
 
-
-
 @include exports("dataviz/treemap/theme") {
 
     // Treemap