@progress/kendo-theme-default 4.43.1-dev.2 → 4.43.1-dev.3

package/dist/all.css

@@ -2031,40 +2031,54 @@ kendo-sortable {
     display: none !important;
 }
 
-.k-d-flex {
+.k-d-flex, .k-d-flex-row, .k-d-flex-col {
     display: flex;
 }
 
+.\!k-d-flex, .\!k-d-flex-row, .\!k-d-flex-col {
+    display: flex !important;
+}
+
 .k-d-inline-flex {
     display: inline-flex;
 }
 
-.k-d-flex-row {
-    display: flex;
-    flex-direction: row;
+.\!k-d-inline-flex {
+    display: inline-flex !important;
 }
 
-.k-d-flex-col {
-    display: flex;
-    flex-direction: column;
+.k-flex-row, .k-d-flex-row {
+    flex-direction: row;
 }
 
-.k-flex-row {
-    flex-direction: row;
+.\!k-flex-row, .\!k-d-flex-row, .\!k-d-flex-col {
+    flex-direction: row !important;
 }
 
 .k-flex-row-reverse {
     flex-direction: row-reverse;
 }
 
-.k-flex-col, .k-flex-column {
+.\!k-flex-row-reverse {
+    flex-direction: row-reverse !important;
+}
+
+.k-flex-col, .k-d-flex-col, .k-flex-column {
     flex-direction: column;
 }
 
+.\!k-flex-col {
+    flex-direction: column !important;
+}
+
 .k-flex-col-reverse, .k-flex-column-reverse {
     flex-direction: column-reverse;
 }
 
+.\!k-flex-col-reverse {
+    flex-direction: column-reverse;
+}
+
 .k-flex-wrap {
     flex-wrap: wrap;
 }
@@ -11783,6 +11797,31 @@ kendo-list > .k-group-header,
     background-color: rgba(255, 99, 88, 0.25);
 }
 
+.k-virtual-scroller {
+    width: 100%;
+    height: 100%;
+    flex: 1 1 auto;
+    overflow: auto;
+    position: relative;
+}
+
+.k-virtual-scroller-wrap {
+    position: relative;
+    z-index: 1;
+}
+
+.k-virtual-scroller-content {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    inset-inline-start: 0;
+}
+
+.k-virtual-scroller-size {
+    position: relative;
+    z-index: 0;
+}
+
 .k-avatar {
     border-width: 0;
     border-style: solid;
@@ -12640,7 +12679,7 @@ kendo-badge-container {
     cursor: pointer;
 }
 
-.k-no-color::after {
+.k-no-color::before {
     content: "";
     width: 100%;
     height: 100%;
@@ -12663,10 +12702,10 @@ kendo-badge-container {
     border-color: rgba(0, 0, 0, 0.08);
 }
 
-.k-no-color::after {
+.k-no-color::before {
     background-color: #ffffff;
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC");
-    background-size: contain;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'%3e%3cline x1='0' x2='20' y1='0' y2='20' stroke='%23f31700' stroke-width='1'/%3e%3c/svg%3e");
+    background-size: 100% 100%;
     background-position: 0 0;
 }
 
@@ -14015,7 +14054,8 @@ kendo-label > .k-label {
     border: 0;
 }
 
-.k-form .k-form-fieldset > *:first-child {
+.k-form .k-form-fieldset > *:not(.k-hidden):first-child,
+.k-form .k-form-fieldset > *.k-hidden + :not(.k-hidden) {
     margin-top: 0;
 }
 
@@ -14038,8 +14078,10 @@ kendo-label > .k-label {
     margin-top: 1em;
 }
 
-.k-form > *:first-child,
-.k-form .k-daterangepicker .k-textbox-container:first-child {
+.k-form > *:not(.k-hidden):first-child,
+.k-form > *.k-hidden + :not(.k-hidden),
+.k-form .k-daterangepicker .k-textbox-container:not(.k-hidden):first-child,
+.k-form .k-daterangepicker .k-textbox-container.k-hidden + :not(.k-hidden) {
     margin-top: 0;
 }
 
@@ -15641,11 +15683,13 @@ kendo-label.k-radio-label > .k-label {
 }
 
 .k-slider .k-button-increase {
+    position: absolute;
     right: 0;
     top: 0;
 }
 
 .k-slider .k-button-decrease {
+    position: absolute;
     left: 0;
     top: 0;
 }
@@ -23729,7 +23773,7 @@ kendo-card-footer {
 .k-tabstrip-items {
     outline: 0;
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
     flex: 0 0 auto;
 }
 
@@ -27225,7 +27269,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     display: block;
 }
 
-.k-listview-content.k-d-flex::after,
+.k-listview-content.k-d-flex::after, .k-listview-content.k-d-flex-row::after, .k-listview-content.k-d-flex-col::after,
 .k-listview-content.k-d-grid::after {
     display: none;
 }
@@ -28595,19 +28639,19 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
             user-select: none;
 }
 
-.k-flex-row .k-pivotgrid-configurator-button,
+.k-flex-row .k-pivotgrid-configurator-button, .k-d-flex-row .k-pivotgrid-configurator-button,
 .k-flex-row-reverse .k-pivotgrid-configurator-button {
     display: flex;
     align-items: center;
 }
 
-.k-flex-row .k-pivotgrid-configurator-button span,
+.k-flex-row .k-pivotgrid-configurator-button span, .k-d-flex-row .k-pivotgrid-configurator-button span,
 .k-flex-row-reverse .k-pivotgrid-configurator-button span {
     -ms-writing-mode: tb-rl;
         writing-mode: vertical-rl;
 }
 
-.k-flex-row .k-pivotgrid-configurator-button .k-icon,
+.k-flex-row .k-pivotgrid-configurator-button .k-icon, .k-d-flex-row .k-pivotgrid-configurator-button .k-icon,
 .k-flex-row-reverse .k-pivotgrid-configurator-button .k-icon {
     vertical-align: baseline;
 }
@@ -28616,7 +28660,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     transform: rotate(-180deg);
 }
 
-.k-flex-col .k-pivotgrid-configurator-button, .k-flex-column .k-pivotgrid-configurator-button,
+.k-flex-col .k-pivotgrid-configurator-button, .k-d-flex-col .k-pivotgrid-configurator-button, .k-flex-column .k-pivotgrid-configurator-button,
 .k-flex-col-reverse .k-pivotgrid-configurator-button,
 .k-flex-column-reverse .k-pivotgrid-configurator-button {
     text-align: center;
@@ -28628,7 +28672,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     z-index: 2;
 }
 
-.k-flex-row .k-pivotgrid-configurator-overlay {
+.k-flex-row .k-pivotgrid-configurator-overlay, .k-d-flex-row .k-pivotgrid-configurator-overlay {
     right: calc(1.4285714286em + 10px);
 }
 
@@ -28636,7 +28680,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     left: calc(1.4285714286em + 10px);
 }
 
-.k-flex-col .k-pivotgrid-configurator-overlay, .k-flex-column .k-pivotgrid-configurator-overlay {
+.k-flex-col .k-pivotgrid-configurator-overlay, .k-d-flex-col .k-pivotgrid-configurator-overlay, .k-flex-column .k-pivotgrid-configurator-overlay {
     bottom: calc(1.4285714286em + 10px);
 }
 
@@ -28774,7 +28818,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     min-width: 320px;
 }
 
-.k-flex-row .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel,
+.k-flex-row .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel, .k-d-flex-row .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel,
 .k-flex-row-reverse .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
     border-right-width: 0;
     border-left-width: 0;
@@ -28828,7 +28872,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     overflow-y: auto;
 }
 
-.k-flex-col .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel, .k-flex-column .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel,
+.k-flex-col .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel, .k-d-flex-col .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel, .k-flex-column .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel,
 .k-flex-col-reverse .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel,
 .k-flex-column-reverse .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
     border-top-width: 0;
@@ -29178,7 +29222,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     border-color: rgba(0, 0, 0, 0.08);
 }
 
-.k-flex-row .k-pivotgrid-configurator-overlay {
+.k-flex-row .k-pivotgrid-configurator-overlay, .k-d-flex-row .k-pivotgrid-configurator-overlay {
     box-shadow: -3px 0px 6px rgba(0, 0, 0, 0.16);
 }
 
@@ -29186,7 +29230,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
     box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.16);
 }
 
-.k-flex-col .k-pivotgrid-configurator-overlay, .k-flex-column .k-pivotgrid-configurator-overlay {
+.k-flex-col .k-pivotgrid-configurator-overlay, .k-d-flex-col .k-pivotgrid-configurator-overlay, .k-flex-column .k-pivotgrid-configurator-overlay {
     box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.16);
 }
 

package/dist/all.scss

@@ -3454,34 +3454,42 @@ $display4-letter-spacing: null !default;
     /// @description This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-flex                        { display: flex; }
+    .\!k-d-flex                      { display: flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-inline-flex
     /// @description This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-inline-flex                 { display: inline-flex; }
+    .\!k-d-inline-flex               { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-flex-row
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: row`.
     /// @group flex-layout
-    .k-d-flex-row                    { display: flex; flex-direction: row; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-row                    { @extend .k-d-flex, .k-flex-row; }
+    .\!k-d-flex-row                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-d-flex-col
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: column`.
     /// @group flex-layout
-    .k-d-flex-col                    { display: flex; flex-direction: column; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-col                    { @extend .k-d-flex, .k-flex-col; }
+    .\!k-d-flex-col                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-flex-row
     /// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
     /// @group flex-layout
     .k-flex-row                      { flex-direction: row; }
+    .\!k-flex-row                    { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-row-reverse
     /// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
     /// @group flex-layout
     .k-flex-row-reverse              { flex-direction: row-reverse; }
+    .\!k-flex-row-reverse            { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col
     /// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
     /// @group flex-layout
     .k-flex-col                      { flex-direction: column; }
+    .\!k-flex-col                    { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col-reverse
     /// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
     /// @group flex-layout
     .k-flex-col-reverse              { flex-direction: column-reverse; }
+    .\!k-flex-col-reverse            { flex-direction: column-reverse; } // sass-lint:disable-line no-important class-name-format
 
 
     // Aliases
@@ -3536,7 +3544,7 @@ $display4-letter-spacing: null !default;
     /// @group flex-layout
     .k-flex-shrink                   { flex-shrink: 1; }
     /// @name k-flex-shrink-0
-    /// @description This is equivalent to `flex-shrink: 0`. The item will not srhink.
+    /// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
     /// @group flex-layout
     .k-flex-shrink-0                 { flex-shrink: 0; }
     /// @name k-flex-basis-auto
@@ -8415,6 +8423,66 @@ $table-selected-border: $grid-selected-border !default;
 // #endregion
 
 
+// #endregion
+// #region @import "virtual-scroller/_index.scss"; -> packages/default/scss/virtual-scroller/_index.scss
+// #region @import "../core/_index.scss"; -> packages/default/scss/core/_index.scss
+// File already imported_once. Skipping output.
+// #endregion
+
+
+// Dependencies
+
+
+// Component
+// #region @import "_variables.scss"; -> packages/default/scss/virtual-scroller/_variables.scss
+// Virtual-scroller
+
+// #endregion
+// #region @import "_layout.scss"; -> packages/default/scss/virtual-scroller/_layout.scss
+@include exports( "virtual-scroller/layout" ) {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+
+}
+
+// #endregion
+// #region @import "_theme.scss"; -> packages/default/scss/virtual-scroller/_theme.scss
+@include exports( "virtual-scroller/theme" ) {
+
+}
+
+// #endregion
+
 // #endregion
 
 
@@ -9632,8 +9700,8 @@ $color-preview-no-color-bg: $white !default;
 $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
-// $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
-$color-preview-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
+$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/color-preview/_layout.scss
@@ -9665,7 +9733,7 @@ $color-preview-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
     }
 
     // No Color
-    .k-no-color::after {
+    .k-no-color::before {
         content: "";
         width: 100%;
         height: 100%;
@@ -9689,7 +9757,7 @@ $color-preview-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
         );
 
         &::before {
-            background: url(map-get($data-uris, "alpha-slider-bgr.png"));
+            background: $color-preview-transparent-color-image;
             background-size: contain;
             background-position: 0;
         }
@@ -9702,10 +9770,10 @@ $color-preview-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
     }
 
     // No Color
-    .k-no-color::after {
+    .k-no-color::before {
         background-color: $color-preview-no-color-bg;
         background-image: $color-preview-no-color-image;
-        background-size: contain;
+        background-size: 100% 100%;
         background-position: 0 0;
     }
 
@@ -11878,7 +11946,8 @@ $fieldset-legend-border: null !default;
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -11907,7 +11976,8 @@ $fieldset-legend-border: null !default;
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }
@@ -14492,11 +14562,13 @@ $slider-disabled-opacity: null !default;
         }
 
         .k-button-increase {
+            position: absolute;
             right: 0;
             top: 0;
         }
 
         .k-button-decrease {
+            position: absolute;
             left: 0;
             top: 0;
         }
@@ -26398,7 +26470,7 @@ $tabstrip-content-border-focused: $component-text !default;
     .k-tabstrip-items {
         outline: 0;
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap;
         flex: 0 0 auto;
 
         .k-item {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "4.43.1-dev.2",
+  "version": "4.43.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "dart:flat": "gulp dart:flat",
     "prepublishOnly": "echo 'no prebublish for default theme'"
   },
-  "gitHead": "c8f3818a458d171ff85a688531bb94ea3ab9799c"
+  "gitHead": "17b6139d64d5dab2c8687e0f2e50fda466679766"
 }

package/scss/color-preview/_layout.scss

@@ -26,7 +26,7 @@
     }
 
     // No Color
-    .k-no-color::after {
+    .k-no-color::before {
         content: "";
         width: 100%;
         height: 100%;

package/scss/color-preview/_theme.scss

@@ -9,7 +9,7 @@
         );
 
         &::before {
-            background: url(map-get($data-uris, "alpha-slider-bgr.png"));
+            background: $color-preview-transparent-color-image;
             background-size: contain;
             background-position: 0;
         }
@@ -22,10 +22,10 @@
     }
 
     // No Color
-    .k-no-color::after {
+    .k-no-color::before {
         background-color: $color-preview-no-color-bg;
         background-image: $color-preview-no-color-image;
-        background-size: contain;
+        background-size: 100% 100%;
         background-position: 0 0;
     }
 

package/scss/color-preview/_variables.scss

@@ -10,5 +10,5 @@ $color-preview-no-color-bg: $white !default;
 $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
-// $color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
-$color-preview-no-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
+$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

package/scss/forms/_layout.scss

@@ -83,7 +83,8 @@
             border: 0;
 
             > * {
-                &:first-child {
+                &:not(.k-hidden):first-child,
+                &.k-hidden + :not(.k-hidden) {
                     margin-top: 0;
                 }
             }
@@ -112,7 +113,8 @@
 
         > *,
         .k-daterangepicker .k-textbox-container {
-            &:first-child {
+            &:not(.k-hidden):first-child,
+            &.k-hidden + :not(.k-hidden) {
                 margin-top: 0;
             }
         }

package/scss/index.scss

@@ -21,6 +21,7 @@
 @import "popup/_index.scss";
 @import "ripple/_index.scss";
 @import "table/_index.scss";
+@import "virtual-scroller/_index.scss";
 
 
 // Indicators

package/scss/slider/_layout.scss

@@ -35,11 +35,13 @@
         }
 
         .k-button-increase {
+            position: absolute;
             right: 0;
             top: 0;
         }
 
         .k-button-decrease {
+            position: absolute;
             left: 0;
             top: 0;
         }

package/scss/tabstrip/_layout.scss

@@ -39,7 +39,7 @@
     .k-tabstrip-items {
         outline: 0;
         display: flex;
-        flex-direction: row;
+        flex-flow: row wrap;
         flex: 0 0 auto;
 
         .k-item {

package/scss/utils/_flex.scss

@@ -8,34 +8,42 @@
     /// @description This is equivalent to `display: flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-flex                        { display: flex; }
+    .\!k-d-flex                      { display: flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-inline-flex
     /// @description This is equivalent to `display: inline-flex`. It defines a flex container and enables a flex context for all its direct children. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
     /// @group flex-layout
     .k-d-inline-flex                 { display: inline-flex; }
+    .\!k-d-inline-flex               { display: inline-flex !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-d-flex-row
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: row`.
     /// @group flex-layout
-    .k-d-flex-row                    { display: flex; flex-direction: row; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-row                    { @extend .k-d-flex, .k-flex-row; }
+    .\!k-d-flex-row                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-d-flex-col
     /// @description This is equivalent to `display: inline-flex` and `flex-direction: column`.
     /// @group flex-layout
-    .k-d-flex-col                    { display: flex; flex-direction: column; } // sass-lint:disable-line one-declaration-per-line
+    .k-d-flex-col                    { @extend .k-d-flex, .k-flex-col; }
+    .\!k-d-flex-col                  { @extend .\!k-d-flex, .\!k-flex-row; } // sass-lint:disable-line class-name-format
     /// @name k-flex-row
     /// @description This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
     /// @group flex-layout
     .k-flex-row                      { flex-direction: row; }
+    .\!k-flex-row                    { flex-direction: row !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-row-reverse
     /// @description This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
     /// @group flex-layout
     .k-flex-row-reverse              { flex-direction: row-reverse; }
+    .\!k-flex-row-reverse            { flex-direction: row-reverse !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col
     /// @description This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
     /// @group flex-layout
     .k-flex-col                      { flex-direction: column; }
+    .\!k-flex-col                    { flex-direction: column !important; } // sass-lint:disable-line no-important class-name-format
     /// @name k-flex-col-reverse
     /// @description This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
     /// @group flex-layout
     .k-flex-col-reverse              { flex-direction: column-reverse; }
+    .\!k-flex-col-reverse            { flex-direction: column-reverse; } // sass-lint:disable-line no-important class-name-format
 
 
     // Aliases
@@ -90,7 +98,7 @@
     /// @group flex-layout
     .k-flex-shrink                   { flex-shrink: 1; }
     /// @name k-flex-shrink-0
-    /// @description This is equivalent to `flex-shrink: 0`. The item will not srhink.
+    /// @description This is equivalent to `flex-shrink: 0`. The item will not shrink.
     /// @group flex-layout
     .k-flex-shrink-0                 { flex-shrink: 0; }
     /// @name k-flex-basis-auto

package/scss/virtual-scroller/_index.scss

@@ -0,0 +1,10 @@
+@import "../core/_index.scss";
+
+
+// Dependencies
+
+
+// Component
+@import "_variables.scss";
+@import "_layout.scss";
+@import "_theme.scss";

package/scss/virtual-scroller/_layout.scss

@@ -0,0 +1,35 @@
+@include exports( "virtual-scroller/layout" ) {
+
+    // Virtual scroller
+    .k-virtual-scroller {
+        width: 100%;
+        height: 100%;
+        flex: 1 1 auto;
+        overflow: auto;
+        position: relative;
+    }
+
+
+    // Virtual scroller wrap
+    .k-virtual-scroller-wrap {
+        position: relative;
+        z-index: 1;
+    }
+
+
+    // Virtual scroller content
+    .k-virtual-scroller-content {
+        position: absolute;
+        width: 100%;
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+
+    // Virtual scroller size
+    .k-virtual-scroller-size {
+        position: relative;
+        z-index: 0;
+    }
+
+}

package/scss/virtual-scroller/_theme.scss

@@ -0,0 +1,3 @@
+@include exports( "virtual-scroller/theme" ) {
+
+}

package/scss/virtual-scroller/_variables.scss

@@ -0,0 +1 @@
+// Virtual-scroller