@progress/kendo-theme-core 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/components/chat/_layout.scss

@@ -57,7 +57,7 @@
         overflow: hidden;
 
         > * + * {
-            margin-top: $kendo-chat-message-list-spacing;
+            margin-block-start: $kendo-chat-message-list-spacing;
         }
     }
 
@@ -72,7 +72,7 @@
         position: relative;
 
         .k-message + .k-message {
-            margin-top: $kendo-chat-bubble-spacing;
+            margin-block-start: $kendo-chat-bubble-spacing;
         }
 
         .k-avatar {
@@ -82,7 +82,7 @@
         // Add margin to the avatar when the last message is selected
         // so that the avatar is aligned to the bubble and not to the status
         &:has(.k-message-group-content .k-message:last-child .k-chat-bubble.k-selected + .k-message-status) .k-avatar {
-            margin-bottom: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
+            margin-block-end: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
             transition: margin .2s ease-in-out;
         }
 
@@ -119,7 +119,7 @@
         padding-inline: $kendo-chat-file-download-padding-x;
         padding-block-end: $kendo-chat-file-download-padding-y;
         border-radius: 0 0 $kendo-chat-file-border-radius $kendo-chat-file-border-radius;
-        text-align: left;
+        text-align: start;
     }
 
     .k-message-group-sender {
@@ -173,6 +173,13 @@
         text-overflow: ellipsis;
         overflow: hidden;
         flex-shrink: 0;
+
+        word-wrap: break-word;
+        white-space: pre-wrap;
+
+        &:has(.k-skeleton-container) {
+            white-space: normal;
+        }
     }
 
     // Full-width message
@@ -194,14 +201,14 @@
         }
     }
 
-    .k-chat-bubble.k-expanded {
-        white-space: normal;
-    }
-
     .k-chat-bubble.k-bubble-expandable:not(.k-expanded) {
         .k-bubble-content {
             height: calc( $kendo-chat-line-height * $kendo-chat-font-size);
         }
+
+        .k-chat-bubble-text {
+            white-space: nowrap;
+        }
     }
 
     .k-chat-bubble:has(.k-typing-indicator) {
@@ -236,7 +243,6 @@
         max-width: 100%;
         overflow: hidden;
         overflow-wrap: break-word;
-        word-break: normal;
         text-align: start;
 
         .k-bubble-content {
@@ -273,7 +279,7 @@
 
     .k-message-error,
     .k-message-sending {
-        margin-bottom: $kendo-chat-item-spacing-y;
+        margin-block-end: $kendo-chat-item-spacing-y;
 
         .k-message-status {
             height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
@@ -315,15 +321,15 @@
             display: inline-block;
             content: "";
             position: absolute;
-            left: $kendo-chat-message-reference-padding-x;
+            inset-inline-start: $kendo-chat-message-reference-padding-x;
             height: calc( 100% - #{$kendo-chat-message-reference-padding-y} );
             width: 2px;
         }
     }
 
     .k-message-pinned {
-        border-bottom-width: $kendo-chat-message-pinned-border-width;
-        border-bottom-style: $kendo-chat-message-pinned-border-style;
+        border-block-end-width: $kendo-chat-message-pinned-border-width;
+        border-block-end-style: $kendo-chat-message-pinned-border-style;
         cursor: pointer;
     }
 
@@ -333,7 +339,7 @@
 
     // Author
     .k-message-author {
-        margin-bottom: calc( #{$kendo-chat-bubble-spacing} / 2);
+        margin-block-end: calc( #{$kendo-chat-bubble-spacing} / 2);
         font-size: $kendo-chat-author-font-size;
         line-height: $kendo-chat-author-line-height;
         font-weight: bold;
@@ -463,7 +469,7 @@
 
     .k-message-group {
         .k-chat-file + .k-chat-file:not(.k-chat-file-deleted) {
-            padding-top: 0;
+            padding-block-start: 0;
         }
     }
 
@@ -505,18 +511,18 @@
     }
 
     .k-chat .k-card-deck-scrollwrap {
-        margin-right: calc( #{$kendo-chat-message-list-padding-y} * -1 );
-        margin-left: calc( #{$kendo-chat-message-list-padding-y} * -1 );
-        padding-left: $kendo-chat-message-list-padding-y;
-        padding-right: $kendo-chat-message-list-padding-y;
+        margin-inline-end: calc( #{$kendo-chat-message-list-padding-y} * -1 );
+        margin-inline-start: calc( #{$kendo-chat-message-list-padding-y} * -1 );
+        padding-inline-start: $kendo-chat-message-list-padding-y;
+        padding-inline-end: $kendo-chat-message-list-padding-y;
     }
 
     .k-chat .k-card-deck-scrollwrap > .k-card-deck {
         // hide scrollbar in chat
         $scrollbar-size: 20px;
 
-        margin-bottom: -$scrollbar-size;
-        padding-bottom: $scrollbar-size;
+        margin-block-end: -$scrollbar-size;
+        padding-block-end: $scrollbar-size;
     }
 
     // Deck
@@ -525,7 +531,7 @@
         flex-flow: row nowrap;
         align-items: stretch;
         flex: 0 0 auto;
-        padding-bottom: 5px; // accommodate for focused box shadow on OSX
+        padding-block-end: 5px; // accommodate for focused box shadow on OSX
 
         .k-card {
             flex: 0 0 auto;
@@ -571,7 +577,7 @@
         }
 
         .k-upload {
-            margin-top: k-spacing(6);
+            margin-block-start: k-spacing(6);
         }
 
         .k-upload-files {

package/scss/components/checkbox/_layout.scss

@@ -179,8 +179,8 @@
             content: "";
             display: block;
             position: absolute;
-            left: 50%;
             top: 50%;
+            left: 50%;
             border-radius: 100%;
             z-index: -1;
             transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);

package/scss/components/checkbox/_theme.scss

@@ -58,6 +58,13 @@
         @include focus-indicator( $kendo-checkbox-focus-checked-shadow );
     }
 
+    // Invalid
+    .k-checkbox.k-invalid {
+        @include fill( $border: $kendo-checkbox-invalid-border );
+    }
+    .k-checkbox.k-invalid + .k-checkbox-label {
+        @include fill( $color: $kendo-checkbox-invalid-text );
+    }
 
     // Disabled
     .k-checkbox:disabled,
@@ -80,13 +87,6 @@
     }
 
 
-    // Invalid
-    .k-checkbox.k-invalid {
-        @include fill( $border: $kendo-checkbox-invalid-border );
-    }
-    .k-checkbox.k-invalid + .k-checkbox-label {
-        @include fill( $color: $kendo-checkbox-invalid-text );
-    }
 
 
     // Ripple

package/scss/components/color-preview/_layout.scss

@@ -58,8 +58,8 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         z-index: -1;
         background: $kendo-color-preview-transparent-color-image;
         background-size: contain;

package/scss/components/colorgradient/_layout.scss

@@ -92,7 +92,7 @@
         &.k-slider-vertical .k-slider-track {
             width: $kendo-color-gradient-slider-track-size;
             border-radius: $kendo-color-gradient-slider-border-radius;
-            margin-left: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
+            margin-inline-start: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
         }
 
         &.k-slider-horizontal {
@@ -103,7 +103,7 @@
         &.k-slider-horizontal .k-slider-track {
             height: $kendo-color-gradient-slider-track-size;
             border-radius: $kendo-color-gradient-slider-border-radius;
-            margin-top: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
+            margin-block-start: calc( -1 * ( $kendo-color-gradient-slider-track-size / 2 ) );
         }
 
         &.k-alpha-slider .k-slider-track::before {
@@ -205,7 +205,7 @@
         }
 
         .k-contrast-ratio {
-            margin-bottom: $kendo-color-gradient-contrast-spacer;
+            margin-block-end: $kendo-color-gradient-contrast-spacer;
         }
 
         .k-contrast-ratio-text {
@@ -230,8 +230,8 @@
     }
     .k-color-contrast-svg {
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         overflow: visible;
         pointer-events: none;
     }

package/scss/components/column-menu/_layout.scss

@@ -51,7 +51,7 @@
     }
 
     .k-group-menu .k-group-menu-item-wrap + .k-group-menu-item-wrap {
-        border-top: 1px solid;
+        border-block-start: 1px solid;
     }
 
     .k-group-menu-item {

package/scss/components/column-menu/_theme.scss

@@ -19,7 +19,7 @@
     }
 
     .k-group-menu .k-group-menu-item-wrap + .k-group-menu-item-wrap {
-        border-top-color: $kendo-group-menu-item-border;
+        border-block-start-color: $kendo-group-menu-item-border;
     }
 }
 

package/scss/components/dataviz/_layout.scss

@@ -121,7 +121,7 @@
         height: 100%;
         border-width: 1px;
         border-style: solid;
-        border-bottom: 0;
+        border-block-end: 0;
     }
 
     .k-selection-bg {
@@ -147,11 +147,11 @@
     }
 
     .k-left-handle {
-        left: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
+        inset-inline-start: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
     }
 
     .k-right-handle {
-        right: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
+        inset-inline-end: calc( -1 * ( $kendo-chart-selection-handle-size / 2 ) );
     }
 
     .k-left-handle div {
@@ -165,13 +165,13 @@
     }
 
     .k-left-handle.k-handle-active div {
-        margin-left: calc( -1 * ( $kendo-chart-selection-handle-size * 2 ) );
-        padding-left: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
+        margin-inline-start: calc( -1 * ( $kendo-chart-selection-handle-size * 2 ) );
+        padding-inline-start: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
     }
 
     .k-right-handle.k-handle-active div {
-        margin-left: calc( $kendo-chart-selection-handle-size * -2);
-        padding-right: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
+        margin-inline-start: calc( $kendo-chart-selection-handle-size * -2);
+        padding-inline-end: calc( ( $kendo-chart-selection-handle-size * 2 ) + ( $kendo-chart-selection-handle-size / 1.5 ) );
     }
 
     .k-mask {
@@ -191,7 +191,7 @@
     }
 
     .k-navigator-hint .k-tooltip {
-        margin-top: 20px;
+        margin-block-start: 20px;
         min-width: 160px;
         opacity: 1;
         text-align: center;
@@ -242,13 +242,13 @@
         width: 100%;
         height: if( --kendo-chart-computed-title-height, calc( 100% - var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} ) ), 100% );
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         opacity: 1;
         z-index: 10001;
 
         &-top {
-            top: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );
+            inset-block-start: var( --kendo-chart-computed-title-height, #{$kendo-chart-computed-title-height} );
         }
 
         .k-no-data {
@@ -339,15 +339,15 @@
             overflow: hidden;
             text-overflow: ellipsis;
             position: absolute;
-            top: 0;
-            bottom: 0;
+            inset-block-start: 0;
+            inset-block-end: 0;
 
             > div {
                 transform-origin: right;
                 transform: rotate(-90deg);
                 position: absolute;
-                top: 0;
-                right: 1em;
+                inset-block-start: 0;
+                inset-inline-end: 1em;
             }
         }
 
@@ -358,16 +358,16 @@
             color: inherit;
             background-color: inherit;
             position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
+            inset-block-start: 0;
+            inset-inline-start: 0;
+            inset-block-end: 0;
+            inset-inline-end: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            top: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-block-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            left: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
+            inset-inline-start: calc( calc( #{$kendo-treemap-padding-y} * 2 ) + calc( var( --kendo-line-height, normal ) * var( --kendo-font-size, inherit) ) + 1px);
         }
 
 

package/scss/components/dialog/_layout.scss

@@ -11,8 +11,8 @@
         flex-direction: column;
         outline: 0;
         position: fixed;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
         z-index: 10001;

package/scss/components/dock-manager/_layout.scss

@@ -150,8 +150,8 @@
         box-sizing: border-box;
         display: flex;
         position: absolute;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         border-width: $kendo-dock-manager-dock-preview-border-width;
         border-style: $kendo-dock-manager-dock-preview-border-style;
         border-radius: $kendo-dock-manager-dock-preview-border-radius;

package/scss/components/draggable/_layout.scss

@@ -30,7 +30,7 @@
     .k-drag-status,
     .k-drag-clue .k-drag-status {
         margin: 0;
-        margin-right: .4ex;
+        margin-inline-end: .4ex;
     }
 
 
@@ -60,9 +60,9 @@
 
     .k-drop-hint-h {
         .k-drop-hint-start {
-            border-left-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
-            border-left-color: $kendo-drop-hint-bg;
-            border-right-width: 0;
+            border-inline-start-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
+            border-inline-start-color: $kendo-drop-hint-bg;
+            border-inline-end-width: 0;
         }
 
         .k-drop-hint-line {
@@ -71,9 +71,9 @@
         }
 
         .k-drop-hint-end {
-            border-right-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
-            border-right-color: $kendo-drop-hint-bg;
-            border-left-width: 0;
+            border-inline-end-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
+            border-inline-end-color: $kendo-drop-hint-bg;
+            border-inline-start-width: 0;
         }
     }
 
@@ -81,9 +81,9 @@
         flex-direction: column;
 
         .k-drop-hint-start {
-            border-top-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
-            border-top-color: $kendo-drop-hint-bg;
-            border-bottom-width: 0;
+            border-block-start-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
+            border-block-start-color: $kendo-drop-hint-bg;
+            border-block-end-width: 0;
         }
 
         .k-drop-hint-line {
@@ -92,9 +92,9 @@
         }
 
         .k-drop-hint-end {
-            border-bottom-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
-            border-bottom-color: $kendo-drop-hint-bg;
-            border-top-width: 0;
+            border-block-end-width: calc( ( $kendo-drop-hint-arrow-size / 2 ) * $equilateral-index );
+            border-block-end-color: $kendo-drop-hint-bg;
+            border-block-start-width: 0;
         }
     }
 
@@ -114,14 +114,14 @@
         }
 
         &::before {
-            border-bottom-width: 0;
-            border-top-color: currentColor;
-            top: -4px;
+            border-block-end-width: 0;
+            border-block-start-color: currentColor;
+            inset-block-start: -4px;
         }
         &::after {
-            border-top-width: 0;
-            border-bottom-color: currentColor;
-            bottom: -4px;
+            border-block-start-width: 0;
+            border-block-end-color: currentColor;
+            inset-block-end: -4px;
         }
     }
 

package/scss/components/drawer/_layout.scss

@@ -54,11 +54,11 @@
 
         // Position
         &.k-drawer-start {
-            top: 0;
+            inset-block-start: 0;
             inset-inline-start: 0;
         }
         &.k-drawer-end {
-            top: 0;
+            inset-block-start: 0;
             inset-inline-end: 0;
         }
     }

package/scss/components/dropzone/_layout.scss

@@ -27,16 +27,16 @@
         position: relative;
 
         .k-dropzone-icon {
-            margin-bottom: $kendo-dropzone-icon-spacing;
+            margin-block-end: $kendo-dropzone-icon-spacing;
         }
 
         .k-dropzone-hint {
-            margin-bottom: $kendo-dropzone-hint-spacing;
+            margin-block-end: $kendo-dropzone-hint-spacing;
             font-size: $kendo-dropzone-hint-font-size;
         }
 
         .k-dropzone-note {
-            margin-bottom: $kendo-dropzone-note-spacing;
+            margin-block-end: $kendo-dropzone-note-spacing;
             font-size: $kendo-dropzone-note-font-size;
         }
     }

package/scss/components/editor/_layout.scss

@@ -156,7 +156,7 @@
 
         .k-editor-export {
             .k-icon {
-                margin-right: $kendo-editor-export-tool-icon-margin-x;
+                margin-inline-end: $kendo-editor-export-tool-icon-margin-x;
             }
 
             .k-icon,
@@ -196,7 +196,7 @@
                 content: attr(data-placeholder);
                 height: 0;
                 color: $kendo-editor-placeholder-text;
-                float: left;
+                float: inline-start;
                 opacity: $kendo-editor-placeholder-opacity;
                 cursor: text;
                 user-select: none;
@@ -266,10 +266,10 @@
             z-index: 2;
             position: absolute;
             content: "";
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
+            inset-block-start: 0;
+            inset-block-end: 0;
             pointer-events: none;
         }
     }
@@ -314,15 +314,15 @@
 
     .k-editor .k-resize-handle {
         position: absolute;
-        right: 0;
-        bottom: 0;
+        inset-inline-end: 0;
+        inset-block-end: 0;
         padding: 0;
         width: 0;
         height: 0;
         border-style: solid;
         border-width: 0 0 13px 13px;
         border-color: transparent;
-        border-bottom-color: inherit;
+        border-block-end-color: inherit;
         cursor: se-resize;
 
         .k-i-arrow-45-down-right,
@@ -350,9 +350,9 @@
 
         .k-matches-container {
             position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
+            inset-block-end: 0;
+            inset-inline-start: 0;
+            inset-inline-end: 0;
             padding: 0;
             display: flex;
             flex-direction: row;
@@ -436,7 +436,7 @@
             margin: 0 0 k-spacing(4);
             padding-block: $kendo-editor-filebrowser-tiles-padding-y;
             padding-inline: $kendo-editor-filebrowser-tiles-padding-x;
-            border-top-width: 0;
+            border-block-start-width: 0;
             overflow: auto;
         }
 
@@ -487,18 +487,18 @@
         }
 
         .k-thumb {
-            float: left;
-            margin-right: $kendo-editor-filebrowser-tiles-padding-y;
+            float: inline-start;
+            margin-inline-end: $kendo-editor-filebrowser-tiles-padding-y;
         }
 
         .k-breadcrumbs-wrap {
             position: absolute;
-            left: $kendo-input-md-padding-x;
-            top: $kendo-input-md-padding-y;
+            inset-inline-start: $kendo-input-md-padding-x;
+            inset-block-start: $kendo-input-md-padding-y;
 
             .k-icon {
                 position: static;
-                margin-top: 0;
+                margin-block-start: 0;
             }
         }
     }
@@ -517,7 +517,7 @@
 
             .k-tabstrip.k-root-tabs {
                 flex: 1 1 auto;
-                margin-bottom: 0;
+                margin-block-end: 0;
             }
         }
 

package/scss/components/expansion-panel/_layout.scss

@@ -25,16 +25,6 @@
         }
     }
 
-    .k-rtl .k-expander,
-    .k-expander.k-rtl,
-    .k-expander[dir="rtl"] {
-        // Expand / collapse icon
-        .k-expander-indicator {
-            margin-left: 0;
-            margin-right: $kendo-expander-indicator-margin-x;
-        }
-    }
-
     // Header
     .k-expander-header {
         padding-block: $kendo-expander-header-padding-y;
@@ -58,7 +48,7 @@
 
     // Expand / collapse icon
     .k-expander-indicator {
-        margin-left: $kendo-expander-indicator-margin-x;
+        margin-inline-start: $kendo-expander-indicator-margin-x;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -73,11 +63,11 @@
     // Multiple expanders
     .k-expander + .k-expander.k-expanded,
     .k-expander.k-expanded + .k-expander {
-        margin-top: $kendo-expander-spacing-y;
+        margin-block-start: $kendo-expander-spacing-y;
     }
 
     .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
-        border-top-width: 0;
+        border-block-start-width: 0;
     }
 }
 

package/scss/components/fab/_layout.scss

@@ -99,7 +99,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-right: k-spacing(2);
+                margin-inline-end: k-spacing(2);
             }
         }
         &.k-text-left {
@@ -107,7 +107,7 @@
 
             .k-fab-item-text {
                 // Needed for fab item positioning in RTL
-                margin-left: k-spacing(2);
+                margin-inline-start: k-spacing(2);
             }
         }
     }