@progress/kendo-theme-material 12.0.0-dev.0 → 12.0.0-dev.2

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.0.0-dev.0",
+    "version": "12.0.0-dev.2",
     "previewColors": [
         "#121212",
         "#212121",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.0.0-dev.0",
+    "version": "12.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "12.0.0-dev.0",
+    "version": "12.0.0-dev.2",
     "previewColors": [
         "#ffffff",
         "#e0e0e0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "12.0.0-dev.0",
+  "version": "12.0.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "12.0.0-dev.0",
-    "@progress/kendo-theme-utils": "12.0.0-dev.0"
+    "@progress/kendo-theme-core": "12.0.0-dev.2",
+    "@progress/kendo-theme-utils": "12.0.0-dev.2"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "e1ba80301b9bb9353203603cb431d8ce1891e0c6"
+  "gitHead": "3d3c1e57932a00e6c1a0e1fbbd14d7ba1e2fe4a9"
 }

package/scss/calendar/_theme.scss

@@ -36,6 +36,8 @@
     }
 
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
         .k-range-start {
             background: $kendo-calendar-range-end-bg;

package/scss/chat/_layout.scss

@@ -8,7 +8,7 @@
     @include kendo-chat--layout-base();
 
     .k-chat-file:has( + .k-chat-file) {
-        padding-bottom: calc( #{$kendo-chat-file-padding-y} / 2 );
+        padding-block-end: calc( #{$kendo-chat-file-padding-y} / 2 );
     }
 
     .k-message-group-sender .k-chat-bubble {

package/scss/dialog/_layout.scss

@@ -11,8 +11,8 @@
     .k-dialog-content.k-scroll {
         border-width: 1px 0;
         border-style: solid;
-        padding-top: #{list.slash( $kendo-window-inner-padding-y, 2 )};
-        padding-bottom: #{list.slash( $kendo-window-inner-padding-y, 2 )};
+        padding-block-start: #{list.slash( $kendo-window-inner-padding-y, 2 )};
+        padding-block-end: #{list.slash( $kendo-window-inner-padding-y, 2 )};
     }
 
 }

package/scss/floating-label/_layout.scss

@@ -14,6 +14,7 @@
 
     [dir="rtl"] .k-floating-label-container,
     .k-rtl .k-floating-label-container,
+    .k-floating-label-container.k-rtl,
     .k-floating-label-container[dir="rtl"] {
         > .k-floating-label {
             transform-origin: right bottom;

package/scss/forms/_layout.scss

@@ -36,7 +36,7 @@
         }
 
         .k-validator-tooltip {
-            bottom: 0;
+            inset-block-end: 0;
             // TODO: do we need the tooltip variable?
             transform: translateY(100%) translateY($kendo-tooltip-callout-size);
         }

package/scss/gantt/_layout.scss

@@ -6,11 +6,4 @@
 
     @include kendo-gantt--layout-base();
 
-    // Timeline
-    .k-rtl .k-gantt-timeline-pane {
-        .k-header {
-            border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
-        }
-    }
-
 }

package/scss/gantt/_theme.scss

@@ -10,16 +10,7 @@
     .k-gantt-timeline-pane {
 
         tbody > tr:not(:only-child) > .k-header {
-            border-left-color: $kendo-grid-border;
+            border-inline-start-color: $kendo-grid-border;
         }
     }
-
-    .k-rtl .k-gantt-timeline-pane {
-        .k-grid-header {
-            tbody > tr:not(:only-child) > .k-header {
-                border-right-color: $kendo-grid-border;
-            }
-        }
-    }
-
 }

package/scss/gantt/_variables.scss

@@ -188,16 +188,6 @@ $kendo-gantt-planned-summary-drag-hint-top: 1.35em !default;
 /// @group gantt
 $kendo-gantt-planned-milestone-drag-hint-top: 1.15em !default;
 
-/// The horizontal margin of the Gantt milestone wrap.
-/// @group gantt
-$kendo-gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
-/// The horizontal margin of the Gantt milestone line dot.
-/// @group gantt
-$kendo-gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
-/// The horizontal margin of the Gantt milestone task dot.
-/// @group gantt
-$kendo-gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
-
 /// The horizontal offset of the Gantt delayed task resize handler.
 /// @group gantt
 $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
@@ -309,9 +299,6 @@ $kendo-gantt-task-tooltip-padding-y: k-spacing(1) !default;
     $kendo-gantt-planned-single-drag-hint-top: $kendo-gantt-planned-single-drag-hint-top,
     $kendo-gantt-planned-summary-drag-hint-top: $kendo-gantt-planned-summary-drag-hint-top,
     $kendo-gantt-planned-milestone-drag-hint-top: $kendo-gantt-planned-milestone-drag-hint-top,
-    $kendo-gantt-rtl-milestone-wrap-margin-x: $kendo-gantt-rtl-milestone-wrap-margin-x,
-    $kendo-gantt-rtl-milestone-planned-moment-margin-x: $kendo-gantt-rtl-milestone-planned-moment-margin-x,
-    $kendo-gantt-rtl-milestone-dot-start-margin-x: $kendo-gantt-rtl-milestone-dot-start-margin-x,
     $kendo-gantt-planned-offset-resize-handler-margin-x: $kendo-gantt-planned-offset-resize-handler-margin-x,
     $kendo-gantt-planned-bg: $kendo-gantt-planned-bg,
     $kendo-gantt-planned-border: $kendo-gantt-planned-border,

package/scss/grid/_layout.scss

@@ -12,7 +12,7 @@
 
         .k-table .k-group-footer td,
         .k-table .k-group-footer .k-table-td {
-            border-top-width: 0;
+            border-block-start-width: 0;
         }
 
         .k-command-cell .k-button {
@@ -38,8 +38,8 @@
         }
 
         .k-resizable-columns .k-table-th:not(.k-group-cell) {
-            border-right-width: 1px;
-            border-right-style: solid;
+            border-inline-end-width: 1px;
+            border-inline-end-style: solid;
         }
 
         .k-resizable-columns .k-resize-handle .k-resize-handle-inner {
@@ -74,11 +74,11 @@
         display: block;
         content: "";
         height: 100%;
-        border-right: 2px solid currentColor;
+        border-inline-end: 2px solid currentColor;
     }
 
     .k-reorder-cue {
-        margin-left: -1px;
+        margin-inline-start: -1px;
         width: 2px;
     }
 
@@ -92,7 +92,7 @@
 
         &.k-menu-vertical {
             & > .k-item + .k-item {
-                margin-top: 0;
+                margin-block-start: 0;
             }
         }
     }

package/scss/grid/_theme.scss

@@ -21,8 +21,8 @@
         .k-grid-header-locked .k-table-th,
         .k-grid-content-locked td,
         .k-grid-content-locked .k-table-td {
-            border-top-color: $kendo-grid-header-border;
-            border-bottom-color: $kendo-grid-header-border;
+            border-block-start-color: $kendo-grid-header-border;
+            border-block-end-color: $kendo-grid-header-border;
 
             .k-group-footer {
                 &:hover td,
@@ -38,11 +38,11 @@
         .k-master-row {
             .k-grid-content-sticky {
                 border-color: $kendo-grid-sticky-border;
-                border-bottom-color: $kendo-grid-header-border;
+                border-block-end-color: $kendo-grid-header-border;
             }
             .k-grid-row-sticky {
-                border-top-color: $kendo-grid-sticky-border;
-                border-bottom-color: $kendo-grid-sticky-border;
+                border-block-start-color: $kendo-grid-sticky-border;
+                border-block-end-color: $kendo-grid-sticky-border;
             }
         }
     }

package/scss/input/_layout.scss

@@ -12,7 +12,7 @@
     .k-picker-solid {
         @include border-bottom-radius( 0 !important ); // stylelint-disable-line declaration-no-important
         border-width: $kendo-input-border-width 0;
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
+        border-block-start-color: transparent !important; // stylelint-disable-line declaration-no-important
 
         .k-input-button,
         .k-input-spinner .k-spinner-increase,

package/scss/panelbar/_layout.scss

@@ -9,23 +9,7 @@
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
                     .k-link {
-                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
-                    }
-                }
-            }
-        }
-    }
-
-    .k-rtl .k-panelbar,
-    .k-panelbar.k-rtl,
-    .k-panelbar [dir = "rtl"] {
-        .k-panelbar-group > .k-panelbar-item {
-            // Hierarchy items
-            @for $i from 1 through $kendo-panelbar-item-level-count {
-                &.k-level-#{$i} {
-                    .k-link {
-                        padding-left: $kendo-panelbar-item-padding-x;
-                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
+                        padding-inline-start: calc( #{$kendo-panelbar-item-padding-x} * #{$i} + #{$kendo-panelbar-item-padding-x} );
                     }
                 }
             }

package/scss/pivotgrid/_layout.scss

@@ -6,12 +6,12 @@
     @include kendo-pivotgrid--layout-base();
 
     .k-pivot-rowheaders .k-grid tr .k-grid-footer {
-        border-bottom-width: 0;
+        border-block-end-width: 0;
     }
 
     .k-pivot .k-grid th,
     .k-pivot .k-grid td {
-        border-left-color: inherit;
+        border-inline-start-color: inherit;
     }
 
 }

package/scss/progressbar/_layout.scss

@@ -58,26 +58,26 @@
 
         &.k-progressbar-horizontal {
             &::before {
-                top: 0;
-                left: -150%;
+                inset-block-start: 0;
+                inset-inline-start: -150%;
                 animation: kendo-progressbar-primary-indeterminate-horizontal $kendo-progressbar-indeterminate-animation-timing;
             }
             &::after {
-                top: 0;
-                left: -50%;
+                inset-block-start: 0;
+                inset-inline-start: -50%;
                 animation: kendo-progressbar-secondary-indeterminate-horizontal $kendo-progressbar-indeterminate-animation-timing;
             }
         }
 
         &.k-progressbar-vertical {
             &::before {
-                top: -150%;
-                left: 0;
+                inset-block-start: -150%;
+                inset-inline-start: 0;
                 animation: kendo-progressbar-primary-indeterminate-vertical $kendo-progressbar-indeterminate-animation-timing;
             }
             &::after {
-                top: -50%;
-                left: 0;
+                inset-block-start: -50%;
+                inset-inline-start: 0;
                 animation: kendo-progressbar-secondary-indeterminate-vertical $kendo-progressbar-indeterminate-animation-timing;
             }
         }

package/scss/scheduler/_layout.scss

@@ -19,7 +19,7 @@
         }
 
         .k-event-actions {
-            right: k-spacing(2);
+            inset-inline-end: k-spacing(2);
         }
     }
 

package/scss/scheduler/_variables.scss

@@ -252,10 +252,7 @@ $kendo-scheduler-event-actions-inset-x: k-spacing(4) !default;
 
 /// The margin of the Scheduler event indicators.
 /// @group scheduler
-$kendo-scheduler-indicators-margin: k-spacing(0.5) .4ex 0 k-spacing(2) !default;
-/// The margin of the Scheduler event indicators in rtl.
-/// @group scheduler
-$kendo-scheduler-rtl-indicators-margin: k-spacing(0.5) k-spacing(2) 0 .4ex !default;
+$kendo-scheduler-indicators-margin: k-spacing(0.5) k-spacing(1) !default;
 
 /// The inline inset of the Scheduler marquee labels.
 /// @group scheduler
@@ -341,7 +338,6 @@ $kendo-scheduler-header-bg: k-color(app-surface) !default;
     $kendo-scheduler-event-template-padding-y: $kendo-scheduler-event-template-padding-y,
     $kendo-scheduler-event-actions-inset-x: $kendo-scheduler-event-actions-inset-x,
     $kendo-scheduler-indicators-margin: $kendo-scheduler-indicators-margin,
-    $kendo-scheduler-rtl-indicators-margin: $kendo-scheduler-rtl-indicators-margin,
     $kendo-scheduler-marquee-label-inset-x: $kendo-scheduler-marquee-label-inset-x,
     $kendo-scheduler-marquee-label-inset-y: $kendo-scheduler-marquee-label-inset-y,
     $kendo-scheduler-header-bg: $kendo-scheduler-header-bg

package/scss/slider/_layout.scss

@@ -56,11 +56,11 @@
 
         .k-tick {
             &.k-last::after {
-                top: 0;
+                inset-block-start: 0;
             }
             &.k-first::after {
-                top: auto;
-                bottom: 0;
+                inset-block-start: auto;
+                inset-block-end: 0;
             }
         }
     }

package/scss/spreadsheet/_layout.scss

@@ -7,7 +7,7 @@
 
     // Spreadsheet tabstrip
     .k-spreadsheet-tabstrip {
-        padding-top: 0;
+        padding-block-start: 0;
 
         .k-tabstrip-items-wrapper {
             border-width: 0;

package/scss/stepper/_layout.scss

@@ -11,14 +11,14 @@
 
     .k-step-list-horizontal {
         & ~ .k-progressbar {
-            top: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
+            inset-block-start: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
         }
     }
 
 
     .k-step-list-vertical {
         & ~ .k-progressbar {
-            left: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
+            inset-inline-start: calc( (#{$kendo-stepper-indicator-height} / 2  ) - (#{$kendo-stepper-progressbar-size} / 2 ) + $kendo-stepper-indicator-focus-offset ) ;
         }
     }
 

package/scss/table/_layout.scss

@@ -22,8 +22,8 @@
                 width: 100%;
                 height: 100%;
                 position: absolute;
-                top: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-start: 0;
                 pointer-events: none;
             }
         }

package/scss/tabstrip/_layout.scss

@@ -20,8 +20,8 @@
 
     .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
     .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
-        margin-bottom: 0;
-        border-bottom-width: 0;
+        margin-block-end: 0;
+        border-block-end-width: 0;
     }
 
     .k-tabstrip-top,
@@ -40,10 +40,10 @@
                 display: none;
                 position: absolute;
                 z-index: 2;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
+                inset-block-end: 0;
+                inset-inline-start: 0;
                 height: $kendo-tabstrip-indicator-size;
                 margin: 0 $kendo-tabstrip-md-item-padding-x;
                 pointer-events: none;
@@ -66,10 +66,10 @@
                 display: none;
                 position: absolute;
                 z-index: 2;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
+                inset-block-start: 0;
+                inset-inline-end: 0;
+                inset-block-end: 0;
+                inset-inline-start: 0;
                 pointer-events: none;
                 width: $kendo-tabstrip-indicator-size;
                 height: auto;
@@ -83,7 +83,7 @@
 
     // Variants
     .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item .k-link::after {
-        top: auto;
+        inset-block-start: auto;
     }
 
     .k-tabstrip-left > .k-tabstrip-items-wrapper .k-item::after {

package/scss/timeline/_layout.scss

@@ -11,7 +11,7 @@
     }
 
     .k-timeline-card .k-timeline-card-callout.k-callout-s {
-        bottom: 5px;
+        inset-block-end: 5px;
     }
 
     .k-timeline-track-item:hover .k-timeline-circle::before,

package/scss/timeselector/_layout.scss

@@ -12,13 +12,6 @@
         .k-title {
             font-weight: var( --kendo-font-weight, normal );
         }
-
-        &.k-focus {
-            &::before,
-            &::after {
-                height: calc( 50% - (calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height})) / 2);
-            }
-        }
     }
 
     // Time selector header
@@ -38,7 +31,7 @@
     .k-time-list-highlight {
         width: auto;
         border-radius: k-border-radius(xxxl);
-        left: k-spacing(3);
-        right: k-spacing(3);
+        inset-inline-start: k-spacing(3);
+        inset-inline-end: k-spacing(3);
     }
 }

package/scss/toolbar/_theme.scss

@@ -9,7 +9,7 @@
 
     @include kendo-toolbar--theme-base();
     .k-toolbar-flat {
-        border-top-color: $kendo-toolbar-flat-border !important; // stylelint-disable-line declaration-no-important
+        border-block-start-color: $kendo-toolbar-flat-border !important; // stylelint-disable-line declaration-no-important
         border-inline-color: $kendo-toolbar-flat-border !important; // stylelint-disable-line declaration-no-important
     }
 }

package/scss/window/_layout.scss

@@ -5,8 +5,8 @@
     @include kendo-window--layout-base();
 
     .k-window-minimized {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+        border-end-start-radius: 0;
+        border-end-end-radius: 0;
     }
 
     .k-window-title,