@progress/kendo-theme-fluent 5.10.1-dev.1 → 5.10.1-dev.2

package/dist/all.css

@@ -30770,6 +30770,14 @@ kendo-toolbar-renderer {
   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-actionsheet-filter {
+  width: min(100%,  360px - 2rem);
+}
+.k-adaptive-actionsheet .k-actionsheet-content,
+.k-adaptive-actionsheet .k-actionsheet-footer {
+  margin-inline: auto;
+  width: min(100%, 360px);
+}
 .k-adaptive-actionsheet .k-list-container,
 .k-adaptive-actionsheet .k-treeview {
   height: 100%;
@@ -30823,6 +30831,12 @@ kendo-toolbar-renderer {
   height: 100%;
   overflow-y: auto;
 }
+.k-adaptive-actionsheet .k-data-table {
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-flow: column nowrap;
+}
 
 .k-actionsheet-jq.k-actionsheet {
   height: auto;
@@ -31260,6 +31274,7 @@ kendo-drawer .k-drawer-wrapper {
   display: inline-flex;
   flex-flow: column-reverse wrap;
   position: fixed;
+  z-index: 1000;
 }
 
 .k-notification-container {
@@ -32812,7 +32827,6 @@ kendo-drawer .k-drawer-wrapper {
   border-style: solid;
   border-color: inherit;
   position: relative;
-  z-index: 2;
 }
 
 .k-tabstrip-items {
@@ -32820,7 +32834,8 @@ kendo-drawer .k-drawer-wrapper {
   outline: 0;
   display: flex;
   flex-flow: row wrap;
-  flex: 0 0 auto;
+  flex: 1 1 auto;
+  gap: 0.5rem;
 }
 .k-tabstrip-items *,
 .k-tabstrip-items *::before,
@@ -32839,16 +32854,8 @@ kendo-drawer .k-drawer-wrapper {
   justify-items: stretch;
   outline: 0;
 }
-.k-tabstrip-items .k-item::before {
-  content: "";
-  border-style: solid;
-  border-color: var(--kendo-tabstrip-item-ripple-border, var(--kendo-primary-100, inherit));
-  display: block;
-  position: absolute;
-  z-index: 2;
-  opacity: 0;
-  transition: opacity 0.3s, transform 0.3s;
-  pointer-events: none;
+.k-tabstrip-items .k-item:active, .k-tabstrip-items .k-item.k-active, .k-tabstrip-items .k-item.k-selected {
+  font-weight: var(--kendo-tabstrip-item-selected-font-weight, var(--kendo-font-weight-bold, normal));
 }
 .k-tabstrip-items .k-tab-on-top {
   z-index: 1;
@@ -32866,12 +32873,9 @@ kendo-drawer .k-drawer-wrapper {
   align-items: center;
 }
 
-.k-ie11 .k-tabstrip-items {
-  white-space: nowrap;
-}
-
 .k-tabstrip-content,
 .k-tabstrip > .k-content {
+  margin: 0 !important;
   padding-inline: var(--kendo-tabstrip-content-padding-x, 0.75rem);
   padding-block: var(--kendo-tabstrip-content-padding-y, 0.375rem);
   box-sizing: border-box;
@@ -32882,7 +32886,6 @@ kendo-drawer .k-drawer-wrapper {
   overflow: auto;
   flex: 1 1 auto;
   position: relative;
-  z-index: 1;
 }
 .k-tabstrip-content:active, .k-tabstrip-content.k-active,
 .k-tabstrip > .k-content:active,
@@ -32909,7 +32912,6 @@ kendo-drawer .k-drawer-wrapper {
 }
 
 .k-tabstrip-scrollable > .k-tabstrip-items-wrapper > .k-tabstrip-items {
-  flex: 1 1 auto;
   flex-wrap: nowrap;
   white-space: nowrap;
   overflow: hidden;
@@ -32934,131 +32936,103 @@ kendo-drawer .k-drawer-wrapper {
 
 .k-tabstrip-top > .k-tabstrip-items-wrapper {
   border-bottom-width: var(--kendo-tabstrip-border-width, 0px);
-  margin-block-end: calc(var(--kendo-tabstrip-content-border-width, 1px)*-1);
-}
-.k-tabstrip-top > .k-tabstrip-items-wrapper > .k-tabstrip-items {
-  width: 100%;
 }
 .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
   margin-block-end: calc(var(--kendo-tabstrip-border-width, 0px)*-1);
 }
-.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::before {
-  width: 100%;
-  border-width: 0 0 var(--kendo-tabstrip-item-ripple-border-width, 0.125rem) 0;
-  inset-block-end: 0;
-  transform: scaleX(0);
-}
-.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected {
-  font-weight: var(--kendo-tabstrip-item-selected-font-weight, var(--kendo-font-weight-bold, normal));
-}
-.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active::before, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active::before, .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-selected::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item + .k-item {
-  margin-inline-start: var(--kendo-tabstrip-item-gap, 0.5rem);
-}
 
 .k-tabstrip-bottom > .k-tabstrip-items-wrapper {
   border-top-width: var(--kendo-tabstrip-border-width, 0px);
-  margin-block-start: calc(var(--kendo-tabstrip-content-border-width, 1px)*-1);
-}
-.k-tabstrip-bottom > .k-tabstrip-items-wrapper > .k-tabstrip-items {
-  width: 100%;
 }
 .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item {
   margin-block-start: calc(var(--kendo-tabstrip-border-width, 0px)*-1);
 }
-.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::before {
-  width: 100%;
-  border-width: var(--kendo-tabstrip-item-ripple-border-width, 0.125rem) 0 0 0;
-  inset-block-start: 0;
-  transform: scaleX(0);
-}
-.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-selected {
-  font-weight: var(--kendo-tabstrip-item-selected-font-weight, var(--kendo-font-weight-bold, normal));
-}
-.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item:active::before, .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-active::before, .k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item.k-selected::before {
-  opacity: 1;
-  transform: scaleX(1);
-}
-.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item + .k-item {
-  margin-inline-start: var(--kendo-tabstrip-item-gap, 0.5rem);
-}
 
 .k-tabstrip-left {
   flex-direction: row;
 }
 .k-tabstrip-left > .k-tabstrip-items-wrapper {
   border-right-width: var(--kendo-tabstrip-border-width, 0px);
-  margin-inline-end: calc(var(--kendo-tabstrip-content-border-width, 1px)*-1);
 }
 .k-tabstrip-left > .k-tabstrip-items-wrapper > .k-tabstrip-items {
-  height: 100%;
-  display: inline-flex;
   flex-direction: column;
 }
 .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item {
   margin-inline-end: calc(var(--kendo-tabstrip-border-width, 0px)*-1);
 }
-.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::before {
-  height: 100%;
-  border-width: 0 var(--kendo-tabstrip-item-ripple-border-width, 0.125rem) 0 0;
-  inset-inline-end: 0;
-  transform: scaleY(0);
-}
-.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-selected {
-  font-weight: var(--kendo-tabstrip-item-selected-font-weight, var(--kendo-font-weight-bold, normal));
-}
-.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item:active::before, .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-active::before, .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item.k-selected::before {
-  opacity: 1;
-  transform: scaleY(1);
-}
-.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item + .k-item {
-  margin-block-start: var(--kendo-tabstrip-item-gap, 0.5rem);
-}
-.k-tabstrip-left > .k-content,
-.k-tabstrip-left > .k-tabstrip-content {
-  margin: 0 !important;
-}
 
 .k-tabstrip-right {
   flex-direction: row-reverse;
 }
 .k-tabstrip-right > .k-tabstrip-items-wrapper {
   border-left-width: var(--kendo-tabstrip-border-width, 0px);
-  margin-inline-start: calc(var(--kendo-tabstrip-content-border-width, 1px)*-1);
 }
 .k-tabstrip-right > .k-tabstrip-items-wrapper > .k-tabstrip-items {
-  height: 100%;
-  display: inline-flex;
   flex-direction: column;
 }
 .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item {
   margin-inline-start: calc(var(--kendo-tabstrip-border-width, 0px)*-1);
 }
-.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::before {
-  height: 100%;
-  border-width: 0 0 0 var(--kendo-tabstrip-item-ripple-border-width, 0.125rem);
-  inset-inline-start: 0;
+
+.k-tabstrip-items-start {
+  justify-content: flex-start;
+}
+
+.k-tabstrip-items-center {
+  justify-content: center;
+}
+
+.k-tabstrip-items-end {
+  justify-content: flex-end;
+}
+
+.k-tabstrip-items-justify {
+  justify-content: space-between;
+}
+
+.k-tabstrip-items-stretched > * {
+  flex: 1 0 0;
+}
+
+.k-tabstrip-items-wrapper .k-item::after {
+  content: "";
+  border-width: 0;
+  border-style: solid;
+  display: block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
   transform: scaleY(0);
+  pointer-events: none;
+  transition: opacity 0.3s, transform 0.3s;
 }
-.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-selected {
-  font-weight: var(--kendo-tabstrip-item-selected-font-weight, var(--kendo-font-weight-bold, normal));
+.k-tabstrip-top > .k-tabstrip-items-wrapper .k-item::after {
+  border-bottom-width: var(--kendo-tabstrip-indicator-size, 0.125rem);
+}
+.k-tabstrip-bottom > .k-tabstrip-items-wrapper .k-item::after {
+  border-top-width: var(--kendo-tabstrip-indicator-size, 0.125rem);
+}
+.k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {
+  border-right-width: var(--kendo-tabstrip-indicator-size, 0.125rem);
 }
-.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item:active::before, .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-active::before, .k-tabstrip-right > .k-tabstrip-items-wrapper .k-item.k-selected::before {
+.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item::after {
+  border-left-width: var(--kendo-tabstrip-indicator-size, 0.125rem);
+}
+.k-tabstrip-items-wrapper .k-item:active::after,
+.k-tabstrip-items-wrapper .k-item.k-active::after,
+.k-tabstrip-items-wrapper .k-item.k-selected::after {
   opacity: 1;
   transform: scaleY(1);
 }
-.k-tabstrip-right > .k-tabstrip-items-wrapper .k-item + .k-item {
-  margin-block-start: var(--kendo-tabstrip-item-gap, 0.5rem);
-}
-.k-tabstrip-right > .k-content,
-.k-tabstrip-right > .k-tabstrip-content {
-  margin: 0 !important;
+.k-tabstrip-items-wrapper .k-item > .k-link {
+  z-index: 1;
 }
 
-.k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging::before {
+.k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging::after {
   display: none !important;
 }
 
@@ -33136,6 +33110,10 @@ kendo-drawer .k-drawer-wrapper {
   outline-color: var(--kendo-tabstrip-content-border-focused, var(--kendo-component-text, initial));
 }
 
+.k-tabstrip-items-wrapper .k-item.k-active::after {
+  border-color: var(--kendo-tabstrip-indicator-color, var(--kendo-primary-100, inherit));
+}
+
 .k-treeview {
   padding: 0;
   border-width: 0;

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.10.1-dev.1",
+  "version": "5.10.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,10 +47,11 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "^0.6.0",
-    "@progress/kendo-theme-utils": "^5.10.1-dev.1"
+    "@progress/kendo-theme-core": "^5.10.1-dev.2",
+    "@progress/kendo-theme-utils": "^5.10.1-dev.2"
   },
   "devDependencies": {
-    "sass-build": "^1.0.0"
+    "sass-build": "^1.1.0"
   },
-  "gitHead": "694cfbd14fca3ecaf03ff8fbafb64d10601cebde"
+  "gitHead": "02863aedd51b707c27514b6c7c336052a3dc55c7"
 }

package/scss/action-sheet/_layout.scss

@@ -286,6 +286,15 @@
             padding-block: var( --kendo-adaptive-actionsheet-footer-padding-y, #{$kendo-adaptive-actionsheet-footer-padding-y} );
         }
 
+        .k-actionsheet-filter {
+            width: calc( min(100%, calc( 360px - #{$kendo-adaptive-actionsheet-header-padding-x * 2}) ) );
+        }
+        .k-actionsheet-content,
+        .k-actionsheet-footer {
+            margin-inline: auto;
+            width: unquote("min(100%, 360px)");
+        }
+
         .k-list-container,
         .k-treeview {
             height: 100%;
@@ -347,6 +356,13 @@
             height: 100%;
             overflow-y: auto;
         }
+
+        .k-data-table {
+            max-height: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-flow: column nowrap;
+        }
     }
 }
 

package/scss/notification/_layout.scss

@@ -10,6 +10,7 @@
         display: inline-flex;
         flex-flow: column-reverse wrap;
         position: fixed;
+        z-index: 1000;
     }
 
     .k-notification-container {

package/scss/tabstrip/_layout.scss

@@ -39,7 +39,6 @@
         border-style: solid;
         border-color: inherit;
         position: relative;
-        z-index: 2;
     }
 
     .k-tabstrip-items {
@@ -47,7 +46,8 @@
         outline: 0;
         display: flex;
         flex-flow: row wrap;
-        flex: 0 0 auto;
+        flex: 1 1 auto;
+        gap: $kendo-tabstrip-item-gap;
 
         *,
         *::before,
@@ -67,16 +67,11 @@
             justify-items: stretch;
             outline: 0;
 
-            &::before {
-                content: "";
-                border-style: solid;
-                border-color: var( --kendo-tabstrip-item-ripple-border, #{$kendo-tabstrip-item-ripple-border} );
-                display: block;
-                position: absolute;
-                z-index: 2;
-                opacity: 0;
-                transition: opacity .3s, transform .3s;
-                pointer-events: none;
+            // Active state
+            &:active,
+            &.k-active,
+            &.k-selected {
+                font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
             }
         }
 
@@ -97,12 +92,10 @@
             align-items: center;
         }
     }
-    .k-ie11 .k-tabstrip-items {
-        white-space: nowrap;
-    }
 
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
+        margin: 0 !important; // sass-lint:disable-line no-important
         padding-inline: var( --kendo-tabstrip-content-padding-x, #{$kendo-tabstrip-content-padding-x} ) ;
         padding-block: var( --kendo-tabstrip-content-padding-y, #{$kendo-tabstrip-content-padding-y} ) ;
         box-sizing: border-box;
@@ -113,7 +106,6 @@
         overflow: auto;
         flex: 1 1 auto;
         position: relative;
-        z-index: 1;
 
         &:active,
         &.k-active {
@@ -149,7 +141,6 @@
         > .k-tabstrip-items-wrapper {
 
             > .k-tabstrip-items {
-                flex: 1 1 auto;
                 flex-wrap: nowrap;
                 white-space: nowrap;
                 overflow: hidden;
@@ -183,40 +174,13 @@
     }
 
 
-    // Tabstrip variants
+    // Tabstrip position
     .k-tabstrip-top {
         > .k-tabstrip-items-wrapper {
             border-bottom-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-block-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    width: 100%;
-                    border-width: 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0;
-                    inset-block-end: 0;
-                    transform: scaleX(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-                }
-            }
-
-            .k-item + .k-item {
-                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
 
         }
@@ -224,38 +188,9 @@
     .k-tabstrip-bottom {
         > .k-tabstrip-items-wrapper {
             border-top-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-block-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
-
-            > .k-tabstrip-items {
-                width: 100%;
-            }
 
             .k-item {
                 margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    width: 100%;
-                    border-width: var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0 0;
-                    inset-block-start: 0;
-                    transform: scaleX(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleX(1);
-                    }
-
-                }
-
-            }
-
-            .k-item + .k-item {
-                margin-inline-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
 
         }
@@ -265,46 +200,14 @@
 
         > .k-tabstrip-items-wrapper {
             border-right-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-inline-end: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
             .k-item {
                 margin-inline-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    height: 100%;
-                    border-width: 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} ) 0 0;
-                    inset-inline-end: 0;
-                    transform: scaleY(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleY(1);
-                    }
-
-                }
-
             }
-
-            .k-item + .k-item {
-                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
-            }
-        }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            margin: 0 !important; // sass-lint:disable-line no-important
         }
 
     }
@@ -313,56 +216,36 @@
 
         > .k-tabstrip-items-wrapper {
             border-left-width: var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} );
-            margin-inline-start: calc( var( --kendo-tabstrip-content-border-width, #{$kendo-tabstrip-content-border-width} ) * -1 );
 
             > .k-tabstrip-items {
-                height: 100%;
-                display: inline-flex;
                 flex-direction: column;
             }
 
             .k-item {
                 margin-inline-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-
-                &::before {
-                    height: 100%;
-                    border-width: 0 0 0 var( --kendo-tabstrip-item-ripple-border-width, #{$kendo-tabstrip-item-ripple-border-width} );
-                    inset-inline-start: 0;
-                    transform: scaleY(0);
-                }
-
-                &:active,
-                &.k-active,
-                &.k-selected {
-                    font-weight: var( --kendo-tabstrip-item-selected-font-weight, #{$kendo-tabstrip-item-selected-font-weight} );
-
-                    &::before {
-                        opacity: 1;
-                        transform: scaleY(1);
-                    }
-
-                }
-
-            }
-
-            .k-item + .k-item {
-                margin-block-start: var( --kendo-tabstrip-item-gap, #{$kendo-tabstrip-item-gap} );
             }
         }
-
-        > .k-content,
-        > .k-tabstrip-content {
-            margin: 0 !important; // sass-lint:disable-line no-important
-        }
     }
 
-    // Hide tabstrip ripple when dragging
-    .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
-        &::before {
-            display: none !important; // sass-lint:disable-line no-important
-        }
+
+    // Tabstrip align
+    .k-tabstrip-items-start {
+        justify-content: flex-start;
+    }
+    .k-tabstrip-items-center {
+        justify-content: center;
+    }
+    .k-tabstrip-items-end {
+        justify-content: flex-end;
+    }
+    .k-tabstrip-items-justify {
+        justify-content: space-between;
+    }
+    .k-tabstrip-items-stretched > * {
+        flex: 1 0 0;
     }
 
+
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
 
@@ -372,13 +255,17 @@
                 content: "";
                 border-width: 0;
                 border-style: solid;
-                display: none;
+                display: block;
                 position: absolute;
-                z-index: 0;
+                z-index: 2;
                 top: 0;
                 right: 0;
                 bottom: 0;
                 left: 0;
+                opacity: 0;
+                transform: scaleY(0);
+                pointer-events: none;
+                transition: opacity .3s, transform .3s;
 
                 // Variants
                 .k-tabstrip-top > & {
@@ -394,8 +281,11 @@
                     border-left-width: var( --kendo-tabstrip-indicator-size, #{$kendo-tabstrip-indicator-size} );
                 }
             }
-            .k-item.k-active::after {
-                display: block;
+            .k-item:active::after,
+            .k-item.k-active::after,
+            .k-item.k-selected::after {
+                opacity: 1;
+                transform: scaleY(1);
             }
 
             .k-item > .k-link {
@@ -403,6 +293,13 @@
             }
         }
 
+        // Hide tabstrip indicator when dragging
+        .k-tabstrip-items-wrapper .k-item.k-tabstrip-dragging {
+            &::after {
+                display: none !important; // sass-lint:disable-line no-important
+            }
+        }
+
     }
 
     .k-rtl .k-tabstrip,

package/scss/tabstrip/_variables.scss

@@ -51,12 +51,6 @@ $kendo-tabstrip-item-padding-y: map-get( $kendo-spacing, 2 ) + map-get( $kendo-s
 /// The width of the border around the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
-/// The border width of the tabstrip ripple
-/// @group tabstrip
-$kendo-tabstrip-item-ripple-border-width: map-get( $kendo-spacing, thin ) !default;
-/// The border color of the tabstrip ripple
-/// @group tabstrip
-$kendo-tabstrip-item-ripple-border: get-theme-color-var( primary-100 ) !default;
 /// The border radius of the tabstrip item
 /// @group tabstrip
 $kendo-tabstrip-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;
@@ -111,8 +105,12 @@ $kendo-tabstrip-item-focused-shadow: $kendo-list-item-focus-shadow !default;
 $kendo-tabstrip-item-dragging-text: get-theme-color-var( primary-100 ) !default;
 
 // Indicator
-$kendo-tabstrip-indicator-size: null !default;
-$kendo-tabstrip-indicator-color: null !default;
+/// The border width of the tabstrip indicator
+/// @group tabstrip
+$kendo-tabstrip-indicator-size: map-get( $kendo-spacing, thin ) !default;
+/// The border color of the tabstrip ripple
+/// @group tabstrip
+$kendo-tabstrip-indicator-color: get-theme-color-var( primary-100 ) !default;
 
 /// The horizontal padding of tabstrip content
 /// @group tabstrip