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

package/dist/all.scss

@@ -16706,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
@@ -16976,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") {
@@ -17053,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));
 }
@@ -17100,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;
     }
 }
 
@@ -18388,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;
@@ -18486,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
@@ -18493,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;
@@ -18513,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;
@@ -18533,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;
     }
@@ -18552,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;
@@ -18573,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;
@@ -18594,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;
@@ -18606,7 +18740,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             font-weight: bold;
         }
         .k-today,
-        .k-nav-today {
+        .k-nav-today,
+        .k-calendar-nav-today {
             text-decoration: none;
             cursor: pointer;
             outline: none;
@@ -18636,22 +18771,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);
@@ -18659,61 +18785,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;
         }
     }
@@ -18753,6 +18877,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;
+    }
 }
 
 
@@ -18937,7 +19111,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         .k-nav-prev,
         .k-nav-next,
         .k-prev-view,
-        .k-next-view {
+        .k-next-view,
+        .k-calendar-nav-prev,
+        .k-calendar-nav-next {
             transform: scaleX(-1);
         }
 
@@ -18974,7 +19150,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         .k-title,
         .k-calendar-title,
         .k-nav-fast,
-        .k-nav-today {
+        .k-nav-today,
+        .k-calendar-nav-today {
             font-weight: 500;
             text-transform: none;
         }
@@ -19023,15 +19200,16 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
 
         // Today navigation
-        .k-nav-today {
+        .k-nav-today,
+        .k-calendar-nav-today {
             color: $calendar-today-nav-text;
 
             &:hover,
             &.k-hover,
             &.k-state-hover,
             &:focus,
-            &.k-state-focus,
-            &.k-focus {
+            &.k-focus,
+            &.k-state-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -19049,11 +19227,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 {
@@ -19087,9 +19265,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,
@@ -19097,8 +19275,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,
@@ -19106,12 +19284,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,
@@ -19119,18 +19294,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;
         }
 
@@ -19144,8 +19316,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;
             }
         }
@@ -19200,19 +19372,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 {
@@ -19222,16 +19382,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);
             }
         }
@@ -19244,8 +19404,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;
             }
         }
@@ -19347,6 +19507,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
@@ -19558,6 +19756,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
@@ -20607,10 +20835,7 @@ $coloreditor-views-gap: $coloreditor-spacer !default;
 // #region @import "../button/_index.scss"; -> packages/material/scss/button/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
-// #region @import "../colorpalette/_index.scss"; -> packages/material/scss/colorpalette/_index.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "../colorgradient/_index.scss"; -> packages/material/scss/colorgradient/_index.scss
+// #region @import "../coloreditor/_index.scss"; -> packages/material/scss/coloreditor/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
 // #region @import "../popup/_index.scss"; -> packages/material/scss/popup/_index.scss
@@ -21021,6 +21246,9 @@ $kendo-daterange-picker-input-width: 10em;
 // #region @import "../common/_index.scss"; -> packages/material/scss/common/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
+// #region @import "../table/_index.scss"; -> packages/material/scss/table/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
 // #region @import "../input/_index.scss"; -> packages/material/scss/input/_index.scss
 // File already imported_once. Skipping output.
 // #endregion
@@ -24303,6 +24531,10 @@ $actionsheet-item-disabled-opacity: .42 !default;
             box-sizing: border-box;
         }
     }
+    .k-actionsheet-fullscreen {
+        max-height: 100%;
+        height: 100%;
+    }
 
 
     // Actionsheet header
@@ -24316,6 +24548,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;
     }
 
 
@@ -24412,6 +24673,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
@@ -44920,8 +45212,6 @@ $treemap-line-height: $line-height !default;
 }
 
 
-
-
 @include exports("dataviz/treemap/theme") {
 
     // Treemap