@progress/kendo-theme-material 6.6.1-dev.0 → 6.7.0-dev.1

package/dist/all.scss

@@ -41806,63 +41806,236 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/breadcrumb/_variables.scss
 // Breadcrumb
+
+/// The width of the border around the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-border-width: 0px !default;
+
+/// The horizontal margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
+/// The vertical margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
+/// The horizontal padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
+/// The vertical padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
-$kendo-breadcrumb-border-width: 0px !default;
 
+/// The font family of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
+
+/// The font size of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+/// The font size of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
+/// The font size of the large Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default;
+
+/// The line-height of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-
+/// The line-height of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
+/// The line-height of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
+/// The line-height of the height Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default;
+
+/// The base background of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
+/// The base text color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
+/// The base border color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
+/// The box shadow of the focused Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
+
+/// The horizontal padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The horizontal padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The vertical padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+/// The vertical padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+
+/// The border-radius of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
-
-$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
+/// The vertical padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+
+/// The horizontal padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The horizontal padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+/// The horizontal padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+
+/// The spacing of the Breadcrumb link icon.
+/// @group breadcrumb
 $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
 
+/// The background color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-color-primary !default;
+/// The border color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: null !default;
+/// The border color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
+/// The background color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
+/// The text color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !default;
+/// The border color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: null !default;
 
+/// The background color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
+/// The text color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
+/// The border color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
+/// The border color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
+/// The background color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
+/// The text color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
+/// The border color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: null !default;
 
+/// The background color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
+/// The text color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
+/// The border color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
+/// The sizes map for the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sizes: (
+    sm: (
+        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-sm-font-size,
+        line-height: $kendo-breadcrumb-sm-line-height
+    ),
+    md: (
+        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-md-font-size,
+        line-height: $kendo-breadcrumb-md-line-height
+    ),
+    lg: (
+        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-lg-font-size,
+        line-height: $kendo-breadcrumb-lg-line-height
+    )
+) !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/breadcrumb/_layout.scss
@@ -41880,8 +42053,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-breadcrumb-font-family;
-        font-size: $kendo-breadcrumb-font-size;
-        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -41933,8 +42104,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding-block: $kendo-breadcrumb-link-padding-y;
-        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -41948,21 +42117,12 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
         transition: $kendo-transition;
     }
 
-    .k-breadcrumb-root-link {
-        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
-    }
-
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
-    .k-breadcrumb-icon-link {
-        padding-block: $kendo-breadcrumb-icon-link-padding-y;
-        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
-    }
-
 
     // Breadcrumb delimiter
     .k-breadcrumb-delimiter,
@@ -41981,6 +42141,34 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
         }
     }
 
+
+    // Sizes
+    @each $size, $size-props in $kendo-breadcrumb-sizes {
+        $_link-padding-x: k-map-get( $size-props, link-padding-x );
+        $_link-padding-y: k-map-get( $size-props, link-padding-y );
+        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
+        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+
+        .k-breadcrumb-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+
+            .k-breadcrumb-link,
+            .k-breadcrumb-root-link {
+                padding-block: $_link-padding-y;
+                padding-inline: $_link-padding-x;
+            }
+
+            .k-breadcrumb-icon-link {
+                padding-block: $_icon-link-padding-y;
+                padding-inline: $_icon-link-padding-x;
+            }
+        }
+    }
+
 }
 
 
@@ -42416,8 +42604,7 @@ $kendo-pager-sizes: (
         position: relative;
 
         select.k-dropdown-list {
-            cursor: pointer;
-            display: none;
+            width: $kendo-pager-md-dropdown-width;
         }
     }
     .k-pager-numbers {
@@ -42453,10 +42640,11 @@ $kendo-pager-sizes: (
     // Pager input
     .k-pager-input {
         @extend %base-pager-section !optional;
+        gap: 1ex;
 
-        .k-textbox {
+        .k-textbox,
+        .k-numerictextbox {
             margin-block: 0;
-            margin-inline: 1ex;
             width: $kendo-pager-input-width;
         }
     }
@@ -42465,25 +42653,12 @@ $kendo-pager-sizes: (
     // Pager sizes
     .k-pager-sizes {
         @extend %base-pager-section !optional;
-
-        .k-dropdown-list,
-        > select {
-            margin-right: 1ex;
-        }
+        gap: 1ex;
 
         .k-input-inner,
         .k-input-value-text {
             text-overflow: clip;
         }
-
-        .k-rtl &,
-        [dir="rtl"] & {
-            .k-dropdown-list,
-            > select {
-                margin-left: 1ex;
-                margin-right: 0;
-            }
-        }
     }
 
 
@@ -42504,33 +42679,6 @@ $kendo-pager-sizes: (
         order: 10;
     }
 
-    // Responsive
-    .k-pager-mobile-sm {
-        overflow: visible;
-
-        // Show native select
-        .k-pager-numbers-wrap {
-            border-color: inherit;
-
-            select.k-dropdown-list {
-                @extend %base-pager-section !optional;
-                @if ($kendo-pager-section-spacing) {
-                    margin-left: $kendo-pager-section-spacing;
-                    margin-right: $kendo-pager-section-spacing;
-                }
-                width: $kendo-pager-sm-dropdown-width;
-            }
-        }
-    }
-
-    // Hide components
-    .k-pager-mobile-md .k-pager-info,
-    .k-pager-mobile-sm .k-pager-info,
-    .k-pager-mobile-sm .k-pager-sizes,
-    .k-pager-mobile-sm .k-pager-numbers {
-        display: none;
-    }
-
     // Pager sizes
     @each $size, $size-props in $kendo-pager-sizes {
         $_padding-x: k-map-get($size-props, padding-x);
@@ -42549,7 +42697,8 @@ $kendo-pager-sizes: (
                     min-width: $_item-min-width;
                 }
 
-                .k-pager-input {
+                .k-pager-input,
+                > select.k-dropdown-list {
                     margin-inline-start: $_item-group-spacing;
                     margin-inline-end: $_item-group-spacing;
                 }
@@ -45490,6 +45639,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: 1px !default;
@@ -45522,6 +45679,7 @@ $kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -46582,8 +46740,6 @@ $kendo-grid-toolbar-border-width: $kendo-grid-border-width !default;
 $kendo-grid-cell-horizontal-border-width: $kendo-table-cell-horizontal-border-width !default;
 $kendo-grid-cell-vertical-border-width: $kendo-table-cell-vertical-border-width !default;
 
-$kendo-grid-cell-placeholder-line-width: 80% !default;
-
 /// Background color of the grid component
 /// @group grid
 $kendo-grid-bg: $kendo-table-bg !default;
@@ -46860,10 +47016,6 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
                 outline: none;
             }
 
-            .k-placeholder-line {
-                width: $kendo-grid-cell-placeholder-line-width;
-            }
-
             > .k-radio,
             > .k-radio-wrap,
             > .k-checkbox,
@@ -47461,14 +47613,6 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         border-width: 0 0 1px;
     }
 
-    .k-pager-input {
-        .k-numerictextbox {
-            margin-block: 0;
-            margin-inline: k-math-div( $kendo-font-size-md, 2 );
-            width: 3em;
-        }
-    }
-
     .k-grid-virtual .k-grid-content {
         .k-grid-table-wrap {
             float: left;
@@ -52524,12 +52668,12 @@ $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px
 
         .k-filter-container,
         .k-filter-preview {
-            margin-bottom: $kendo-filter-bottom-margin;
+            margin-block-end: $kendo-filter-bottom-margin;
         }
 
         .k-filter-lines,
         .k-filter-item {
-            padding-left: $kendo-filter-padding-x;
+            padding-inline-start: $kendo-filter-padding-x;
         }
 
         .k-filter-toolbar {
@@ -52543,8 +52687,8 @@ $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px
                 position: absolute;
                 width: $kendo-filter-padding-x;
                 height: $kendo-filter-line-size;
-                top: 50%;
-                left: -$kendo-filter-padding-x;
+                inset-block-start: 50%;
+                inset-inline-start: -$kendo-filter-padding-x;
             }
 
             .k-toolbar {
@@ -52563,8 +52707,8 @@ $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px
                 position: absolute;
                 width: $kendo-filter-line-size;
                 height: 100%;
-                top: -$kendo-filter-padding-y;
-                left: 0;
+                inset-block-start: -$kendo-filter-padding-y;
+                inset-inline-start: 0;
             }
         }
 
@@ -52574,9 +52718,9 @@ $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px
             content: "";
             position: absolute;
             width: $kendo-filter-line-size;
-            top: calc(-#{$kendo-filter-padding-y} - #{$kendo-filter-line-size});
-            bottom: 50%;
-            left: -$kendo-filter-padding-x;
+            inset-block-start: calc(-#{$kendo-filter-padding-y} - #{$kendo-filter-line-size});
+            inset-block-end: 50%;
+            inset-inline-start: -$kendo-filter-padding-x;
         }
 
         // The forth and fifth selectors targets the Angular rendering
@@ -52588,39 +52732,6 @@ $kendo-filter-toolbar-focus-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px
         .k-filter-lines .k-filter-item:last-child::before {
             display: none;
         }
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            .k-filter-lines,
-            .k-filter-item {
-                padding-left: 0;
-                padding-right: $kendo-filter-padding-x;
-            }
-
-            .k-filter-toolbar {
-
-                &::before {
-                    left: auto;
-                    right: -$kendo-filter-padding-x;
-                }
-            }
-
-            .k-filter-item {
-
-                &::before {
-                    left: auto;
-                    right: 0;
-                }
-            }
-
-            // The second selector targets the Angular rendering
-            .k-filter-lines .k-filter-item:last-child > .k-filter-toolbar::after,
-            .k-filter-lines .k-filter-item:last-child > * > .k-filter-toolbar::after {
-                left: auto;
-                right: -$kendo-filter-padding-x;
-            }
-        }
     }
 
 }
@@ -58214,8 +58325,6 @@ $kendo-chat-bubble-border-radius-sm: 2px !default;
 $kendo-chat-avatar-size: 32px !default;
 $kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
 
-$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
-$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 $kendo-chat-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
@@ -58320,19 +58429,19 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             text-align: start;
 
             .k-message-time {
-                margin-left: $kendo-chat-item-spacing-x;
-                left: 100%;
+                margin-inline-start: $kendo-chat-item-spacing-x;
+                inset-inline-start: 100%;
             }
             .k-message-status {
-                left: 0;
+                inset-inline-start: 0;
             }
 
-            .k-first .k-bubble,
-            .k-only .k-bubble {
+            .k-first .k-chat-bubble,
+            .k-only .k-chat-bubble {
                 border-bottom-left-radius: $kendo-chat-bubble-border-radius-sm;
             }
-            .k-middle .k-bubble,
-            .k-last .k-bubble {
+            .k-middle .k-chat-bubble,
+            .k-last .k-chat-bubble {
                 @include border-left-radius( $kendo-chat-bubble-border-radius-sm );
             }
         }
@@ -58342,19 +58451,19 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             text-align: end;
 
             .k-message-time {
-                margin-right: $kendo-chat-item-spacing-x;
-                right: 100%;
+                margin-inline-end: $kendo-chat-item-spacing-x;
+                inset-inline-end: 100%;
             }
             .k-message-status {
-                right: 0;
+                inset-inline-end: 0;
             }
 
-            .k-first .k-bubble,
-            .k-only .k-bubble {
+            .k-first .k-chat-bubble,
+            .k-only .k-chat-bubble {
                 border-bottom-right-radius: $kendo-chat-bubble-border-radius-sm;
             }
-            .k-middle .k-bubble,
-            .k-last .k-bubble {
+            .k-middle .k-chat-bubble,
+            .k-last .k-chat-bubble {
                 @include border-right-radius( $kendo-chat-bubble-border-radius-sm );
             }
         }
@@ -58395,7 +58504,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
 
         // Bubble
-        .k-bubble {
+        .k-chat-bubble {
             @include border-radius( $kendo-chat-bubble-border-radius );
             padding-block: $kendo-chat-bubble-padding-y;
             padding-inline: $kendo-chat-bubble-padding-x;
@@ -58431,27 +58540,24 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
         // Avatar
         .k-avatar {
-            @include border-radius( 100% );
             margin: 0;
-            width: $kendo-chat-avatar-size;
-            height: $kendo-chat-avatar-size;
             position: absolute;
 
             @at-root .k-message-group:not(.k-alt) > .k-avatar {
-                left: 0;
+                inset-inline-start: 0;
                 bottom: 0;
             }
             @at-root .k-message-group.k-alt > .k-avatar {
-                right: 0;
+                inset-inline-end: 0;
                 bottom: 0;
             }
         }
         .k-avatars {
-            .k-message-group:not(.k-alt):not(.k-no-avatar) {
-                padding-left: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
+            .k-message-group:not(.k-no-avatar) {
+                padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
             }
             .k-message-group.k-alt:not(.k-no-avatar) {
-                padding-right: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
+                padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
             }
         }
     }
@@ -58484,8 +58590,8 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
     }
     .k-quick-reply {
         @include border-radius( 100px );
-        margin-right: $kendo-chat-quick-reply-spacing;
-        margin-bottom: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
+        margin-inline-end: $kendo-chat-quick-reply-spacing;
+        margin-block-end: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
         padding-block: $kendo-chat-quick-reply-padding-y;
         padding-inline: $kendo-chat-quick-reply-padding-x;
         border-width: 1px;
@@ -58504,10 +58610,10 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
     // Scrollable quick replies
     .k-scrollable-quick-replies {
-        margin-left: -$kendo-chat-message-list-padding-y;
-        margin-right: -$kendo-chat-message-list-padding-y;
-        padding-left: $kendo-chat-message-list-padding-y;
-        padding-right: $kendo-chat-message-list-padding-y;
+        margin-inline-start: -$kendo-chat-message-list-padding-y;
+        margin-inline-end: -$kendo-chat-message-list-padding-y;
+        padding-inline-start: $kendo-chat-message-list-padding-y;
+        padding-inline-end: $kendo-chat-message-list-padding-y;
         display: flex;
         flex-flow: row nowrap;
         flex: 0 0 auto;
@@ -58522,7 +58628,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             margin: 0;
         }
         .k-quick-reply + .k-quick-reply {
-            margin-left: $kendo-chat-quick-reply-spacing;
+            margin-inline-start: $kendo-chat-quick-reply-spacing;
         }
     }
 
@@ -58563,7 +58669,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             }
 
             .k-rtl &,
-            &[dir="rtl"] {
+            [dir="rtl"] & {
                 transform: scaleX(-1);
             }
         }
@@ -58577,18 +58683,22 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         margin: $kendo-chat-bubble-spacing 0 0;
     }
 
+    .k-message-group.k-alt + .k-card-list,
+    .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
+        align-self: flex-end;
+    }
+
     .k-chat .k-card-deck {
         max-width: calc(100% + #{$kendo-chat-message-list-padding-y * 2}); // prevent overflowing in the parent element
         box-sizing: border-box;
-        margin-left: -$kendo-chat-message-list-padding-y;
-        margin-right: -$kendo-chat-message-list-padding-y;
+        margin-inline-start: -$kendo-chat-message-list-padding-y;
+        margin-inline-end: -$kendo-chat-message-list-padding-y;
         padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
         overflow: hidden;
         overflow-x: auto;
         scroll-behavior: smooth;
     }
-    .k-chat .k-card-deck .k-card,
-    .k-chat .k-card-deck .k-card-wrap {
+    .k-chat .k-card-deck .k-card {
         width: 200px;
     }
 
@@ -58663,16 +58773,10 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
 
     // Chat toolbar
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        padding-block: $kendo-chat-toolbar-padding-y;
-        padding-inline: $kendo-chat-toolbar-padding-x;
+    .k-chat-toolbar {
         width: 100%;
         border-width: 1px 0 0;
-        box-sizing: border-box;
         flex: none;
-        overflow: hidden;
-        position: relative;
 
         &::before {
             display: none;
@@ -58717,78 +58821,6 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
 
     }
-
-
-
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-
-
-        // Text align
-        .k-message-group:not(.k-alt) {
-            .k-message-time {
-                margin-left: 0;
-                margin-right: $kendo-chat-item-spacing-x;
-                left: auto;
-                right: 100%;
-            }
-            .k-message-status {
-                left: auto;
-                right: 0;
-            }
-        }
-        .k-message-group.k-alt {
-            .k-message-time {
-                margin-right: 0;
-                margin-left: $kendo-chat-item-spacing-x;
-                right: auto;
-                left: 100%;
-            }
-            .k-message-status {
-                right: auto;
-                left: 0;
-            }
-        }
-
-
-        // Avatar
-        .k-message-group:not(.k-alt) > .k-avatar {
-            left: auto;
-            right: 0;
-        }
-        .k-message-group.k-alt > .k-avatar {
-            right: auto;
-            left: 0;
-        }
-        .k-avatars {
-            .k-message-group:not(.k-alt):not(.k-no-avatar) {
-                padding-left: 0;
-                padding-right: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
-            }
-            .k-message-group.k-alt:not(.k-no-avatar) {
-                padding-right: 0;
-                padding-left: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
-            }
-        }
-
-        .k-chat .k-card-deck {
-            .k-card-wrap + .k-card-wrap {
-                margin-left: 0;
-                margin-right: $kendo-card-deck-gap;
-            }
-        }
-
-
-        // Quick replies
-        .k-quick-reply {
-            margin-right: 0;
-            margin-left: $kendo-chat-quick-reply-spacing;
-        }
-
-    }
-
 }
 
 
@@ -58830,7 +58862,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
 
 
         // Bubbles
-        .k-bubble {
+        .k-chat-bubble {
             @include fill(
                 $kendo-chat-bubble-text,
                 $kendo-chat-bubble-bg,
@@ -58843,14 +58875,14 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             a { color: $kendo-link-text; }
             a:hover { color: $kendo-link-hover-text; }
         }
-        .k-bubble:hover {
+        .k-chat-bubble:hover {
             @include box-shadow( $kendo-chat-bubble-hover-shadow );
         }
-        .k-selected .k-bubble {
+        .k-selected .k-chat-bubble {
             @include box-shadow( $kendo-chat-bubble-selected-shadow );
         }
 
-        .k-alt .k-bubble {
+        .k-alt .k-chat-bubble {
             @include fill(
                 $kendo-chat-alt-bubble-text,
                 $kendo-chat-alt-bubble-bg,
@@ -58858,10 +58890,10 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             );
             @include box-shadow( $kendo-chat-alt-bubble-shadow );
         }
-        .k-alt .k-bubble:hover {
+        .k-alt .k-chat-bubble:hover {
             @include box-shadow( $kendo-chat-alt-bubble-hover-shadow );
         }
-        .k-alt .k-selected .k-bubble {
+        .k-alt .k-selected .k-chat-bubble {
             @include box-shadow( $kendo-chat-alt-bubble-selected-shadow );
         }
 
@@ -60555,8 +60587,6 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
 // #region @import "@progress/kendo-theme-default/scss/scrollview/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/scrollview/_layout.scss
 @mixin kendo-scrollview--layout-base() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
     .k-scrollview {
         border-width: $kendo-scrollview-border-width;
         border-style: solid;
@@ -60572,60 +60602,39 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
-    .k-scrollview-wrap .k-scrollview,
-    .k-scrollview .k-scrollview-wrap {
-        list-style-type: none;
+    .k-scrollview-wrap {
         position: absolute;
         margin: 0;
         padding: 0;
-        width: 100%;
         height: 100%;
+        width: calc( var(--kendo-scrollview-views, 1) * 100% );
+        display: flex;
+        flex-flow: row nowrap;
         cursor: default;
         white-space: nowrap;
 
-        img {
-            user-select: none;
+        .k-scrollview-view {
+            width: calc( 100% / var(--kendo-scrollview-views, 1) );
+            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
 
-        & > li {
-            display: inline-block;
-            overflow: hidden;
-            position: absolute;
-            top: 0;
-            left: 0;
+        img {
+            user-select: none;
         }
 
-        & > [data-role="page"] {
-            vertical-align: top;
-            display: inline-block;
-            min-height: 1px;
-        }
     }
 
-
-    // Blazor rendering
     .k-scrollview-wrap.k-scrollview-animate {
-        display: flex;
-        flex-flow: row nowrap;
-        width: calc( var(--kendo-scrollview-views, 1) * 100% );
         transition-duration: $kendo-scrollview-transition-duration;
         transition-timing-function: $kendo-scrollview-transition-timing-function;
         transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
 
-        .k-scrollview-view {
-            width: calc( 100% / var(--kendo-scrollview-views, 1) );
-            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
-        }
-
         [dir="rtl"] &,
         .k-rtl & {
             transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
         }
     }
 
-
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
-    kendo-scrollview.k-scrollview kendo-scrollview-pager,
     .k-scrollview-nav-wrap {
         padding: 0;
         margin: 0;
@@ -60637,17 +60646,14 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         text-align: center;
     }
 
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
     kendo-scrollview.k-scrollview kendo-scrollview-pager {
         pointer-events: none;
     }
 
-    kendo-scrollview.k-scrollview-wrap .k-scrollview-nav,
     kendo-scrollview.k-scrollview .k-scrollview-nav {
         pointer-events: initial;
     }
 
-    .k-scrollview-pageable,
     .k-scrollview-nav {
         margin: 0;
         padding: $kendo-scrollview-pager-item-spacing;
@@ -60668,7 +60674,6 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         }
     }
 
-    .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
         margin-block: 0;
         margin-inline: k-math-div( $kendo-scrollview-pager-item-spacing, 2 );
@@ -60735,24 +60740,6 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         transition-duration: .3s;
         transition-timing-function: ease-in-out;
     }
-
-
-    @supports (-webkit-user-select: none) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
-        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
-        div.k-scrollview ul.k-scrollview-wrap li > * {
-            pointer-events: auto;
-        }
-    }
-
-    @supports (not (-webkit-user-select: none)) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
-        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
-        div.k-scrollview ul.k-scrollview-wrap li > * {
-            pointer-events: none;
-        }
-    }
-
 }
 
 
@@ -60772,9 +60759,7 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
 // #region @import "@progress/kendo-theme-default/scss/scrollview/_theme.scss"; -> node_modules/@progress/kendo-theme-default/scss/scrollview/_theme.scss
 @mixin kendo-scrollview--theme-base() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
-    div.k-scrollview {
+   .k-scrollview {
         @include fill(
             $kendo-scrollview-text,
             $kendo-scrollview-bg,
@@ -60839,7 +60824,6 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
     }
 
     // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
-    .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
         background: $kendo-scrollview-pagebutton-bg;
         border: $kendo-scrollview-pagebutton-border;
@@ -60853,15 +60837,11 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         &.k-focus {
             @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
         }
-    }
-
-    .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-hover {
-        box-shadow: $kendo-scrollview-pagebutton-shadow;
-    }
 
-    .k-scrollview-pageable > .k-button {
-        box-shadow: inset 0 0 2px rgba(0, 0, 0, .08);
+        &:hover,
+        &.k-hover {
+            box-shadow: $kendo-scrollview-pagebutton-shadow;
+        }
     }
 
 }