@progress/kendo-theme-fluent 5.8.2-dev.5 → 5.8.2-dev.6

package/dist/all.css

@@ -19627,6 +19627,15 @@ hr.k-separator {
   background-color: var(--kendo-actions-bg, inherit);
 }
 
+.k-list-container {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.k-list-container > .k-list {
+  flex: 1;
+  height: 100%;
+}
+
 .k-list {
   margin: 0;
   padding: 0;
@@ -21977,7 +21986,7 @@ kendo-badge-container {
 }
 
 .k-skeleton-wave .k-skeleton::after,
-.k-skeleton-wave .k-skeleton::after {
+.k-skeleton-wave.k-skeleton::after {
   background-image: linear-gradient(to right, transparent, var(--kendo-skeleton-wave-bg, var(--kendo-neutral-20, inherit)), transparent);
 }
 
@@ -27116,6 +27125,7 @@ textarea.k-input-inner {
   display: flex;
   position: relative;
   flex: 1 1 auto;
+  overflow: hidden;
 }
 
 .k-time-highlight,
@@ -30021,13 +30031,42 @@ kendo-toolbar-renderer {
 }
 
 .k-actionsheet-container {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  max-width: max(100%, 100vw);
+  max-height: max(100%, 100vh);
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
   overflow: hidden;
+  transform: translateZ(0);
+}
+
+.k-actionsheet-container > .k-overlay {
+  position: absolute;
+  z-index: 1;
+}
+.k-actionsheet-container > .k-animation-container {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+.k-actionsheet-container > .k-animation-container > .k-child-animation-container {
+  position: absolute;
+}
+.k-actionsheet-container > .k-actionsheet {
+  position: absolute;
+  z-index: 2;
+}
+.k-actionsheet-container .k-actionsheet {
+  pointer-events: all;
 }
 
 .k-actionsheet {
@@ -30035,7 +30074,8 @@ kendo-toolbar-renderer {
   padding-block: var(--kendo-actionsheet-padding-y, 0px);
   width: var(--kendo-actionsheet-width, 360px);
   max-width: var(--kendo-actionsheet-max-width, 100%);
-  max-height: var(--kendo-actionsheet-max-height, 50vh);
+  height: var(--kendo-actionsheet-height, 60vh);
+  max-height: var(--kendo-actionsheet-max-height, 60vh);
   border-width: 0;
   border-style: solid;
   border-color: transparent;
@@ -30043,10 +30083,8 @@ kendo-toolbar-renderer {
   font-size: var(--kendo-actionsheet-font-size, var(--kendo-font-size, inherit));
   font-family: var(--kendo-actionsheet-font-family, var(--kendo-font-family, inherit));
   line-height: var(--kendo-actionsheet-line-height, var(--kendo-line-height, inherit));
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: fixed;
-  z-index: 10002;
+  overflow: hidden;
+  position: relative;
 }
 .k-actionsheet *,
 .k-actionsheet *::before,
@@ -30055,11 +30093,13 @@ kendo-toolbar-renderer {
 }
 
 .k-actionsheet-fullscreen {
+  width: 100%;
+  max-width: 100%;
   max-height: 100%;
   height: 100%;
 }
 
-.k-actionsheet-header, .k-actionsheet-titlebar {
+.k-actionsheet-header, .k-actionsheet-titlebar, .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-actionsheet-titlebar {
   padding-inline: var(--kendo-actionsheet-header-padding-x, 1rem);
   padding-block: var(--kendo-actionsheet-header-padding-y, 0.5rem);
   border-width: 0;
@@ -30071,18 +30111,31 @@ kendo-toolbar-renderer {
   font-family: var(--kendo-actionsheet-header-font-family, inherit);
   line-height: var(--kendo-actionsheet-header-line-height, inherit);
   flex: none;
+  gap: var(--kendo-actionsheet-header-gap, 1rem);
 }
 
-.k-actionsheet-titlebar {
+.k-actionsheet-titlebar, .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-actionsheet-titlebar {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+}
+
+.k-actionsheet-titlebar-group {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
+  width: 100%;
 }
 
 .k-actionsheet-title {
   flex: 1;
 }
 
+.k-actionsheet-subtitle {
+  font-size: var(--kendo-actionsheet-subtitle-font-size, var(--kendo-font-size-sm, inherit));
+  line-height: var(--kendo-actionsheet-subtitle-line-height, var(--kendo-line-height-sm, inherit));
+}
+
 .k-actionsheet-actions {
   flex: none;
 }
@@ -30090,6 +30143,7 @@ kendo-toolbar-renderer {
 .k-actionsheet-content {
   flex: 1;
   overflow: auto;
+  position: relative;
 }
 
 .k-actionsheet-footer {
@@ -30100,12 +30154,18 @@ kendo-toolbar-renderer {
   margin: 0;
   padding: 0;
   list-style: none;
+  flex: none;
 }
 
 .k-actionsheet-item {
   padding: 0;
   box-sizing: border-box;
 }
+.k-actionsheet-item:focus, .k-actionsheet-item.k-focus {
+  outline-width: var(--kendo-actionsheet-item-focus-outline-width, 1px);
+  outline-style: solid;
+  outline-offset: calc(var(--kendo-actionsheet-item-focus-outline-width, 1px)*-1);
+}
 
 .k-actionsheet-action {
   margin: 0;
@@ -30118,14 +30178,9 @@ kendo-toolbar-renderer {
   outline: 0;
   display: flex;
   flex-flow: row nowrap;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--kendo-actionsheet-item-spacing, 0.5rem);
 }
-.k-actionsheet-action:focus, .k-actionsheet-action.k-focus {
-  outline-width: var(--kendo-actionsheet-item-focus-outline-width, 1px);
-  outline-style: solid;
-  outline-offset: calc(var(--kendo-actionsheet-item-focus-outline-width, 1px)*-1);
-}
 
 .k-actionsheet-item-icon {
   font-size: var(--kendo-actionsheet-item-icon-size, var(--kendo-icon-size, 1rem));
@@ -30148,6 +30203,7 @@ kendo-toolbar-renderer {
 .k-actionsheet > .k-hr {
   margin: 0;
   border-color: inherit;
+  flex: none;
 }
 
 .k-actionsheet-top {
@@ -30204,6 +30260,27 @@ kendo-toolbar-renderer {
   display: flex;
   flex-flow: column nowrap;
 }
+.k-adaptive-actionsheet .k-actionsheet-titlebar, .k-adaptive-actionsheet .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-adaptive-actionsheet .k-actionsheet-header {
+  padding-inline: var(--kendo-adaptive-actionsheet-header-padding-x, 1rem);
+  padding-block: var(--kendo-adaptive-actionsheet-header-padding-y, 1rem);
+  border-bottom-width: var(--kendo-adaptive-actionsheet-header-border-width, 1px);
+}
+.k-adaptive-actionsheet .k-actionsheet-content {
+  padding-inline: var(--kendo-adaptive-actionsheet-content-padding-x, 1rem);
+  padding-block: var(--kendo-adaptive-actionsheet-content-padding-y, 0.5rem);
+}
+.k-adaptive-actionsheet .k-actionsheet-footer {
+  padding-inline: var(--kendo-adaptive-actionsheet-footer-padding-x, 1rem);
+  padding-block: var(--kendo-adaptive-actionsheet-footer-padding-y, 0.5rem);
+}
+.k-adaptive-actionsheet .k-list-container,
+.k-adaptive-actionsheet .k-treeview {
+  height: 100%;
+}
+.k-adaptive-actionsheet .k-list-filter {
+  width: 100%;
+  padding-inline: 0;
+}
 .k-adaptive-actionsheet .k-calendar {
   margin-inline: auto;
   border-width: 0;
@@ -30220,6 +30297,46 @@ kendo-toolbar-renderer {
 .k-adaptive-actionsheet .k-timeselector .k-time-list-wrapper {
   height: 100%;
 }
+.k-adaptive-actionsheet .k-datetime-wrap {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+.k-adaptive-actionsheet .k-datetime-selector {
+  flex: 1 1 auto;
+}
+.k-adaptive-actionsheet .k-datetime-calendar-wrap {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  flex: 0 0 100%;
+}
+.k-adaptive-actionsheet .k-datetime-time-wrap {
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  bottom: 0;
+  flex: 0 0 100%;
+}
+.k-adaptive-actionsheet .k-scrollable-wrap {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.k-actionsheet-jq.k-actionsheet {
+  height: auto;
+  position: relative;
+}
+.k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-actionsheet-titlebar {
+  align-items: flex-start;
+}
+.k-actionsheet-jq .k-actionsheet-action {
+  align-items: center;
+}
 
 .k-actionsheet {
   color: var(--kendo-actionsheet-text, var(--kendo-component-text, initial));
@@ -30228,13 +30345,17 @@ kendo-toolbar-renderer {
   box-shadow: var(--kendo-actionsheet-shadow, var(--kendo-box-shadow-depth-4, none));
 }
 
-.k-actionsheet-header, .k-actionsheet-titlebar {
+.k-actionsheet-header, .k-actionsheet-titlebar, .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-actionsheet-titlebar {
   color: var(--kendo-actionsheet-header-text, inherit);
   background-color: var(--kendo-actionsheet-header-bg, inherit);
   border-color: var(--kendo-actionsheet-header-border, inherit);
   box-shadow: var(--kendo-actionsheet-header-shadow, none);
 }
 
+.k-actionsheet-subtitle-text {
+  color: var(--kendo-actionsheet-subtitle-text, var(--kendo-subtle-text, inherit));
+}
+
 .k-actionsheet-item-icon {
   color: var(--kendo-actionsheet-item-icon-color, var(--kendo-primary-110, inherit));
 }
@@ -30243,39 +30364,43 @@ kendo-toolbar-renderer {
   color: var(--kendo-actionsheet-item-description-text, var(--kendo-subtle-text, inherit));
 }
 
-.k-actionsheet-action {
+.k-actionsheet-item {
   color: var(--INTERNAL--kendo-actionsheet-item-text, inherit);
   background-color: var(--INTERNAL--kendo-actionsheet-item-bg, inherit);
   border-color: var(--INTERNAL--kendo-actionsheet-item-border, inherit);
   outline-color: var(--INTERNAL--kendo-actionsheet-item-outline, inherit);
 }
-.k-actionsheet-action:hover, .k-actionsheet-action.k-hover {
+.k-actionsheet-item:hover, .k-actionsheet-item.k-hover {
   --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-hover-text, var(--kendo-hover-text, inherit) );
   --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-hover-bg, var(--kendo-hover-bg, inherit) );
   --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-hover-border, inherit );
 }
-.k-actionsheet-action:focus, .k-actionsheet-action.k-focus {
+.k-actionsheet-item:focus, .k-actionsheet-item.k-focus {
   --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-focus-text, inherit );
   --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-focus-bg, inherit );
   --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-focus-border, inherit );
   --INTERNAL--kendo-actionsheet-item-outline: var( --kendo-actionsheet-item-focus-outline, var(--kendo-outline-color, inherit) );
 }
-.k-actionsheet-action:focus:hover, .k-actionsheet-action:focus.k-hover, .k-actionsheet-action.k-focus:hover, .k-actionsheet-action.k-focus.k-hover {
+.k-actionsheet-item:focus:hover, .k-actionsheet-item:focus.k-hover, .k-actionsheet-item.k-focus:hover, .k-actionsheet-item.k-focus.k-hover {
   --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-focus-hover-text, var(--kendo-hover-text, inherit) );
   --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-focus-hover-bg, var(--kendo-hover-bg, inherit) );
   --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-focus-hover-border, inherit );
 }
-.k-actionsheet-action:disabled, .k-actionsheet-action.k-disabled {
+.k-actionsheet-item:disabled, .k-actionsheet-item.k-disabled {
   --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-disabled-text, var(--kendo-disabled-text, inherit) );
   --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-disabled-bg, var(--kendo-component-bg, initial) );
   --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-disabled-border, var(--kendo-disabled-border, inherit) );
 }
-.k-actionsheet-action:disabled .k-actionsheet-item-description,
-.k-actionsheet-action:disabled .k-actionsheet-item-icon, .k-actionsheet-action.k-disabled .k-actionsheet-item-description,
-.k-actionsheet-action.k-disabled .k-actionsheet-item-icon {
+.k-actionsheet-item:disabled .k-actionsheet-item-description,
+.k-actionsheet-item:disabled .k-actionsheet-item-icon, .k-actionsheet-item.k-disabled .k-actionsheet-item-description,
+.k-actionsheet-item.k-disabled .k-actionsheet-item-icon {
   color: inherit;
 }
 
+.k-adaptive-actionsheet .k-actionsheet-titlebar, .k-adaptive-actionsheet .k-actionsheet-jq .k-actionsheet-header, .k-actionsheet-jq .k-adaptive-actionsheet .k-actionsheet-header {
+  border-color: var(--kendo-adaptive-actionsheet-header-border, var(--kendo-component-border, initial));
+}
+
 .k-dialog-wrapper {
   display: flex;
   align-items: center;
@@ -39649,6 +39774,9 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
 .k-task-delayed .k-task-complete {
   background-color: var(--kendo-gantt-delayed-bg, var(--kendo-error-160, inherit));
 }
+.k-task-delayed:hover .k-task-complete {
+  background-color: var(--kendo-gantt-delayed-hover-bg, var(--kendo-error-190, inherit));
+}
 
 .k-task-advanced .k-task-complete {
   background-color: var(--kendo-gantt-advanced-bg, var(--kendo-success-160, inherit));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "5.8.2-dev.5",
+  "version": "5.8.2-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -45,10 +45,10 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.4.0",
-    "@progress/kendo-theme-utils": "^5.8.2-dev.5"
+    "@progress/kendo-theme-utils": "^5.8.2-dev.6"
   },
   "devDependencies": {
     "sass-build": "^1.0.0"
   },
-  "gitHead": "071af936605691a801eaa4de3b8714e6223670f4"
+  "gitHead": "b1b2e33a3ce1b92bcefae87e8c46cbd797d814d1"
 }

package/scss/action-sheet/_layout.scss

@@ -3,13 +3,54 @@
 
 @mixin kendo-action-sheet--layout() {
     .k-actionsheet-container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
+        max-width: unquote("max(100%, 100vw)");
+        max-height: unquote("max(100%, 100vh)");
         position: fixed;
         top: 0;
         left: 0;
         z-index: 9999;
         overflow: hidden;
+        transform: translateZ(0);
+    }
+
+    // Animation container
+    .k-actionsheet-container {
+
+        // Overlay
+        > .k-overlay {
+            position: absolute;
+            z-index: 1;
+        }
+
+        // Nested animation container
+        > .k-animation-container {
+            width: 100%;
+            height: 100%;
+            border-radius: 0;
+            overflow: hidden;
+            position: absolute;
+            z-index: 2;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+
+            > .k-child-animation-container {
+                position: absolute;
+            }
+        }
+
+        // No animation container
+        > .k-actionsheet {
+            position: absolute;
+            z-index: 2;
+        }
+
+        // Enable mouse events for action sheet
+        .k-actionsheet {
+            pointer-events: all;
+        }
     }
 
     // Actionsheet
@@ -18,6 +59,7 @@
         padding-block: var( --kendo-actionsheet-padding-y, #{$kendo-actionsheet-padding-y} );
         width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
         max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
+        height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
         max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
         border-width: 0;
         border-style: solid;
@@ -26,10 +68,8 @@
         font-size: var( --kendo-actionsheet-font-size, #{$kendo-actionsheet-font-size} );
         font-family: var( --kendo-actionsheet-font-family, #{$kendo-actionsheet-font-family} );
         line-height: var( --kendo-actionsheet-line-height, #{$kendo-actionsheet-line-height} );
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: fixed;
-        z-index: 10002;
+        overflow: hidden;
+        position: relative;
 
         *,
         *::before,
@@ -39,6 +79,8 @@
     }
 
     .k-actionsheet-fullscreen {
+        width: 100%;
+        max-width: 100%;
         max-height: 100%;
         height: 100%;
     }
@@ -57,21 +99,34 @@
         font-family: var( --kendo-actionsheet-header-font-family, #{$kendo-actionsheet-header-font-family} );
         line-height: var( --kendo-actionsheet-header-line-height, #{$kendo-actionsheet-header-line-height} );
         flex: none;
+        gap: var( --kendo-actionsheet-header-gap, #{$kendo-actionsheet-header-gap} );
     }
 
 
     // Actionsheet titlebar
     .k-actionsheet-titlebar {
         @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+    }
+
+    .k-actionsheet-titlebar-group {
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
+        width: 100%;
     }
 
     .k-actionsheet-title {
         flex: 1;
     }
 
+    .k-actionsheet-subtitle {
+        font-size: var( --kendo-actionsheet-subtitle-font-size, #{$kendo-actionsheet-subtitle-font-size} );
+        line-height: var( --kendo-actionsheet-subtitle-line-height, #{$kendo-actionsheet-subtitle-line-height} );
+    }
+
     .k-actionsheet-actions {
         flex: none;
     }
@@ -81,6 +136,7 @@
     .k-actionsheet-content {
         flex: 1;
         overflow: auto;
+        position: relative;
     }
 
 
@@ -95,6 +151,7 @@
         margin: 0;
         padding: 0;
         list-style: none;
+        flex: none;
     }
 
 
@@ -102,6 +159,13 @@
     .k-actionsheet-item {
         padding: 0;
         box-sizing: border-box;
+
+        &:focus,
+        &.k-focus {
+            outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
+            outline-style: solid;
+            outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
+        }
     }
 
     .k-actionsheet-action {
@@ -115,16 +179,8 @@
         outline: 0;
         display: flex;
         flex-flow: row nowrap;
-        align-items: center;
+        align-items: flex-start;
         gap: var( --kendo-actionsheet-item-spacing, #{$kendo-actionsheet-item-spacing} );
-
-
-        &:focus,
-        &.k-focus {
-            outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
-            outline-style: solid;
-            outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
-        }
     }
 
     .k-actionsheet-item-icon {
@@ -150,6 +206,7 @@
     .k-actionsheet > .k-hr {
         margin: 0;
         border-color: inherit;
+        flex: none;
     }
 
 
@@ -210,6 +267,31 @@
         display: flex;
         flex-flow: column nowrap;
 
+        .k-actionsheet-titlebar {
+            padding-inline: var( --kendo-adaptive-actionsheet-header-padding-x, #{$kendo-adaptive-actionsheet-header-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-header-padding-y, #{$kendo-adaptive-actionsheet-header-padding-y} );
+            border-bottom-width: var( --kendo-adaptive-actionsheet-header-border-width, #{$kendo-adaptive-actionsheet-header-border-width} );
+        }
+
+        .k-actionsheet-content {
+            padding-inline: var( --kendo-adaptive-actionsheet-content-padding-x, #{$kendo-adaptive-actionsheet-content-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-content-padding-y, #{$kendo-adaptive-actionsheet-content-padding-y} );
+        }
+
+        .k-actionsheet-footer {
+            padding-inline: var( --kendo-adaptive-actionsheet-footer-padding-x, #{$kendo-adaptive-actionsheet-footer-padding-x} );
+            padding-block: var( --kendo-adaptive-actionsheet-footer-padding-y, #{$kendo-adaptive-actionsheet-footer-padding-y} );
+        }
+
+        .k-list-container,
+        .k-treeview {
+            height: 100%;
+        }
+        .k-list-filter {
+            width: 100%;
+            padding-inline: 0;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -229,5 +311,58 @@
                 height: 100%;
             }
         }
+
+        .k-datetime-wrap {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-flow: column nowrap;
+        }
+        .k-datetime-selector {
+            flex: 1 1 auto;
+        }
+
+        .k-datetime-calendar-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-datetime-time-wrap {
+            width: 100%;
+            position: absolute;
+            top: 0;
+            left: 100%;
+            bottom: 0;
+            flex: 0 0 100%;
+        }
+
+        .k-scrollable-wrap {
+            height: 100%;
+            overflow-y: auto;
+        }
     }
 }
+
+@mixin kendo-action-sheet--layout-jq() {
+
+    .k-actionsheet-jq {
+        &.k-actionsheet {
+            height: auto;
+            position: relative;
+        }
+
+        .k-actionsheet-header {
+            @extend .k-actionsheet-titlebar !optional;
+            align-items: flex-start;
+        }
+
+        .k-actionsheet-action {
+            align-items: center;
+        }
+    }
+
+}

package/scss/action-sheet/_theme.scss

@@ -19,7 +19,9 @@
         border-color: var( --kendo-actionsheet-header-border, #{$kendo-actionsheet-header-border} );
         @include box-shadow( var( --kendo-actionsheet-header-shadow, #{$kendo-actionsheet-header-shadow} ) );
     }
-
+    .k-actionsheet-subtitle-text {
+        color: var( --kendo-actionsheet-subtitle-text, #{$kendo-actionsheet-subtitle-text} );
+    }
 
     // Actionsheet items
     .k-actionsheet-items {}
@@ -40,7 +42,7 @@
 
 
     // Actionsheet action
-    .k-actionsheet-action {
+    .k-actionsheet-item {
 
         color: var( --INTERNAL--kendo-actionsheet-item-text, inherit );
         background-color: var( --INTERNAL--kendo-actionsheet-item-bg, inherit );
@@ -86,4 +88,10 @@
             }
         }
     }
+
+    // Adaptive Actionsheet
+    .k-adaptive-actionsheet .k-actionsheet-titlebar {
+            border-color: var( --kendo-adaptive-actionsheet-header-border, #{$kendo-adaptive-actionsheet-header-border} );
+    }
+
 }

package/scss/action-sheet/_variables.scss

@@ -13,9 +13,12 @@ $kendo-actionsheet-width: 360px !default;
 /// Maximum width of the action sheet.
 /// @group action-sheet
 $kendo-actionsheet-max-width: 100% !default;
+/// Height of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-height: 60vh !default;
 /// Maximum height of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-max-height: 50vh !default;
+$kendo-actionsheet-max-height: 60vh !default;
 
 /// Border width around the action sheet.
 /// @group action-sheet
@@ -65,6 +68,10 @@ $kendo-actionsheet-header-font-family: inherit !default;
 /// Line height of the action sheet header.
 /// @group action-sheet
 $kendo-actionsheet-header-line-height: inherit !default;
+/// Spacing between the action sheet header groups.
+/// @group action-sheet
+$kendo-actionsheet-header-gap: map-get( $kendo-spacing, 4 ) !default;
+
 
 /// Background color of the action sheet header.
 /// @group action-sheet
@@ -79,6 +86,16 @@ $kendo-actionsheet-header-border: inherit !default;
 /// @group action-sheet
 $kendo-actionsheet-header-shadow: none !default;
 
+/// Font size of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Line height of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, inherit ) !default;
+/// Text color of the action sheet subtitle.
+/// @group action-sheet
+$kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
+
 /// Minimum height of the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-min-height: 40px !default;
@@ -161,3 +178,33 @@ $kendo-actionsheet-item-disabled-text: var( --kendo-disabled-text, inherit ) !de
 /// Disabled border color of the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit ) !default;
+
+
+// Adaptive Actionsheet
+
+/// Border width of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-border-width: 1px !default;
+/// Vertical padding of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-padding-y: map-get( $kendo-spacing, 4 ) !default;
+/// Horizontal padding of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-padding-x: $kendo-adaptive-actionsheet-header-padding-y !default;
+/// Text color of the adaptive action sheet titlebar.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-header-border: var( --kendo-component-border, initial ) !default;
+
+/// Vertical padding of the adaptive action sheet content.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-content-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal padding of the adaptive action sheet content.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-content-padding-x: map-get( $kendo-spacing, 4 ) !default;
+
+/// Vertical padding of the adaptive action sheet footer.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal padding of the adaptive action sheet footer.
+/// @group action-sheet
+$kendo-adaptive-actionsheet-footer-padding-x: map-get( $kendo-spacing, 4 ) !default;

package/scss/action-sheet/index.scss

@@ -22,6 +22,7 @@ $_kendo-module-meta: (
 @mixin styles() {
     @include module.render( "action-sheet" ) {
         @include kendo-action-sheet--layout();
+        @include kendo-action-sheet--layout-jq();
         @include kendo-action-sheet--theme();
     }
 }

package/scss/gantt/_theme.scss

@@ -165,10 +165,18 @@
         }
     }
 
-    .k-task-delayed .k-task-complete {
-        @include fill(
-            $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
-        );
+    .k-task-delayed {
+        .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-bg, #{$kendo-gantt-delayed-bg} )
+            );
+        }
+
+        &:hover .k-task-complete {
+            @include fill(
+                $bg: var( --kendo-gantt-delayed-hover-bg, #{$kendo-gantt-delayed-hover-bg} )
+            );
+        }
     }
 
     .k-task-advanced {

package/scss/gantt/_variables.scss

@@ -203,6 +203,9 @@ $kendo-gantt-delayed-bg: get-theme-color-var( error-160 ) !default;
 /// Complement background color of the gantt delayed task.
 /// @group gantt
 $kendo-gantt-delayed-bg-lighter: get-theme-color-var( error-110) !default;
+/// Background hover color of the gantt delayed task.
+/// @group gantt
+$kendo-gantt-delayed-hover-bg: get-theme-color-var( error-190 ) !default;
 
 /// Background color of the gantt advanced task.
 /// @group gantt

package/scss/list/_layout.scss

@@ -3,6 +3,17 @@
 
 @mixin kendo-list--layout() {
 
+    // List container
+    .k-list-container {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > .k-list {
+            flex: 1;
+            height: 100%;
+        }
+    }
+
     .k-list {
         margin: 0;
         padding: 0;

package/scss/skeleton/_theme.scss

@@ -10,8 +10,8 @@
     }
 
     // Wave animation
-    .k-skeleton-wave  .k-skeleton::after,
-    .k-skeleton-wave .k-skeleton::after {
+    .k-skeleton-wave .k-skeleton::after,
+    .k-skeleton-wave.k-skeleton::after {
         background-image: linear-gradient(
             to right,
             transparent,

package/scss/timeselector/_layout.scss

@@ -62,6 +62,7 @@
         display: flex;
         position: relative;
         flex: 1 1 auto;
+        overflow: hidden;
     }