@progress/kendo-theme-fluent 6.1.1-dev.25 → 6.1.1-dev.38

package/dist/all.css

@@ -12241,12 +12241,6 @@ hr.k-separator {
   max-width: fit-content !important;
 }
 
-.k-text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .k-font-size-xs {
   font-size: 10px;
 }
@@ -12599,6 +12593,34 @@ hr.k-separator {
   color: white !important;
 }
 
+.k-text-clip {
+  text-overflow: clip;
+}
+
+.\!k-text-clip {
+  text-overflow: clip !important;
+}
+
+.k-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.\!k-text-ellipsis {
+  text-overflow: ellipsis !important;
+}
+
+.k-text-truncate, .k-text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.\!k-text-truncate, .\!k-text-ellipsis {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
 .k-text-uppercase {
   text-transform: uppercase;
 }
@@ -27111,8 +27133,10 @@ kendo-badge-container {
 }
 
 .k-chip-content {
-  padding: 0.5em 0;
-  margin: -0.5em 0;
+  padding-block: 0.5em;
+  padding-inline: 0;
+  margin-block: -0.5em;
+  margin-inline: 0;
   min-width: 0;
   display: flex;
   flex-flow: row nowrap;
@@ -27156,7 +27180,8 @@ kendo-badge-container {
 }
 
 .k-chip-actions {
-  margin: -5em 0;
+  margin-block: -5em;
+  margin-inline: 0;
   flex: none;
   display: flex;
   flex-flow: row nowrap;
@@ -28308,7 +28333,7 @@ kendo-label > .k-label {
 }
 .k-form-inline legend {
   font-size: var(--kendo-font-size-sm, 12px);
-  text-align: left;
+  text-align: start;
   font-weight: 600;
   line-height: 1;
   margin-block-end: calc(var(--kendo-padding-y-lg, 0.375rem)*2);
@@ -28319,12 +28344,12 @@ kendo-label > .k-label {
 .k-form-inline .k-form-field {
   display: flex;
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
   margin-block-end: calc(var(--kendo-padding-y-lg, 0.375rem)*2);
 }
 .k-form-inline .k-form-field > span:not(.k-widget) {
   width: var(--kendo-inline-form-element-width, 25%);
-  text-align: right;
+  text-align: end;
   line-height: var(--kendo-line-height, 1.4285714286);
   padding-block: calc(0.25rem + 1px);
   padding-inline-end: var(--kendo-padding-x-lg, 0.75rem);
@@ -28373,7 +28398,7 @@ kendo-label > .k-label {
   padding-block: calc(0.375rem + 1px);
   width: 30%;
   line-height: var(--kendo-form-line-height, var(--kendo-line-height, normal));
-  text-align: right;
+  text-align: end;
   float: left;
   clear: both;
 }
@@ -30863,7 +30888,8 @@ textarea.k-input-inner {
 }
 .k-input-spinner .k-spinner-increase .k-button-icon,
 .k-input-spinner .k-spinner-decrease .k-button-icon {
-  margin: -1em 0;
+  margin-block: -1em;
+  margin-inline: 0;
   min-width: auto !important;
   min-height: auto !important;
 }
@@ -31763,7 +31789,7 @@ textarea.k-input-inner {
 
 .k-circular-progressbar {
   display: inline-block;
-  text-align: left;
+  text-align: start;
   position: relative;
 }
 
@@ -32397,11 +32423,11 @@ textarea.k-input-inner {
   bottom: calc(var(--kendo-slider-end, 0)*1%);
 }
 .k-vertical-slider .k-tick, .k-slider-vertical .k-tick {
-  text-align: right;
+  text-align: end;
   margin-left: 2px;
 }
 .k-vertical-slider .k-slider-topleft .k-tick, .k-slider-vertical .k-slider-topleft .k-tick {
-  text-align: left;
+  text-align: start;
 }
 .k-vertical-slider .k-tick, .k-slider-vertical .k-tick {
   background-position: -94px center;
@@ -32458,7 +32484,7 @@ textarea.k-input-inner {
   background-position: -64px 0;
 }
 .k-vertical-slider .k-label, .k-slider-vertical .k-label {
-  text-align: left;
+  text-align: start;
   inset-inline-start: 120%;
   inset-inline-end: auto;
   top: 50%;
@@ -32633,7 +32659,8 @@ textarea.k-input-inner {
 }
 
 .k-calendar-table {
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   border-width: 0;
   border-color: inherit;
   border-spacing: 0;
@@ -32814,7 +32841,7 @@ textarea.k-input-inner {
 }
 .k-century-calendar .k-link,
 .k-calendar-centuryview .k-link {
-  text-align: left;
+  text-align: start;
 }
 
 .k-popup .k-calendar {
@@ -36053,8 +36080,10 @@ k-datetimepicker[dir=rtl] .k-time-tab .k-datetime-selector, .k-rtl k-datetimepic
 }
 
 .k-window-title {
-  padding: 0.5em 0;
-  margin: -0.5em 0;
+  padding-block: 0.5em;
+  padding-inline: 0;
+  margin-block: -0.5em;
+  margin-inline: 0;
   font-size: var(--kendo-window-title-font-size, var(--kendo-font-size-xl, inherit));
   line-height: var(--kendo-window-title-line-height, var(--kendo-line-height, normal));
   font-weight: var(--kendo-window-title-font-weight, var(--kendo-font-weight-bold, bold));
@@ -36070,7 +36099,8 @@ k-datetimepicker[dir=rtl] .k-time-tab .k-datetime-selector, .k-rtl k-datetimepic
 }
 
 .k-window-titlebar-actions {
-  margin: -5em 0;
+  margin-block: -5em;
+  margin-inline: 0;
   margin-inline-end: -0.25rem;
   line-height: 1;
   display: flex;
@@ -38028,7 +38058,7 @@ kendo-drawer .k-drawer-wrapper {
 }
 
 .k-pager-info {
-  text-align: right;
+  text-align: end;
   justify-content: flex-end;
   flex: 1 1 0%;
   order: 9;
@@ -41023,7 +41053,8 @@ div.k-grid-norecords {
 
 .k-grid-norecords-template {
   box-sizing: border-box;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 20em;
   height: 4em;
   border: 1px solid;
@@ -42093,7 +42124,8 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 }
 
 .k-spreadsheet-cell-editor {
-  padding: 0 3px;
+  padding-block: 0;
+  padding-inline: 3px;
   line-height: var(--kendo-spreadsheet-line-height, var(--kendo-line-height, initial));
   display: none;
   overflow: hidden;
@@ -42942,7 +42974,7 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
   font-size: var(--kendo-pivotgrid-font-size, var(--kendo-font-size, inherit));
   font-family: var(--kendo-pivotgrid-font-family, var(--kendo-font-family, inherit));
   line-height: var(--kendo-pivotgrid-line-height, var(--kendo-line-height, normal));
-  text-align: left;
+  text-align: start;
   vertical-align: top;
   display: grid;
   grid-template-columns: var(--kendo-pivotgrid-row-header-width, 300px) auto;
@@ -42958,6 +42990,7 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
   border-collapse: separate;
   border-spacing: 0;
   outline: 0;
+  text-align: inherit;
   empty-cells: show;
 }
 .k-pivotgrid thead,
@@ -42966,6 +42999,7 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 .k-pivotgrid tr,
 .k-pivotgrid td {
   border-color: inherit;
+  text-align: inherit;
 }
 
 .k-pivotgrid-table {
@@ -43697,7 +43731,8 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
   border-right: 1px solid;
   height: 1em;
   vertical-align: top;
-  margin: 0 0.5em;
+  margin-block: 0;
+  margin-inline: 0.5em;
 }
 
 .k-treelist tr.k-footer,
@@ -44330,7 +44365,8 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 
 .k-editor-inline {
   border-radius: 0.125rem;
-  padding: 0.125rem 0.25rem;
+  padding-block: 0.125rem;
+  padding-inline: 0.25rem;
   border: 1px solid transparent;
   word-wrap: break-word;
   overflow: auto;
@@ -44484,14 +44520,18 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 .k-editor-content th {
   min-width: 1em;
   border: 1px solid;
-  padding: 3px 5px;
+  padding-block: 3px;
+  padding-inline: 5px;
   vertical-align: top;
   box-sizing: border-box;
   position: relative;
 }
 .k-editor-content th {
   font-weight: bold;
-  text-align: left;
+  text-align: start;
+}
+.k-editor-content td {
+  text-align: start;
 }
 .k-editor-content .selectedCell::after {
   z-index: 2;
@@ -44507,8 +44547,10 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 .k-edit-form-content {
   flex: 1 1 auto;
   overflow: auto;
-  margin: -0.75rem -1.5rem;
-  padding: 0.75rem 1.5rem;
+  margin-block: -0.75rem;
+  margin-inline: -1.5rem;
+  padding-block: 0.75rem;
+  padding-inline: 1.5rem;
 }
 
 .k-ct-popup {
@@ -44631,14 +44673,16 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
   height: 390px;
   max-height: 50vh;
   margin-block-end: 1rem;
-  padding: 0.25rem 0.5rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
   border-top-width: 0;
   overflow: auto;
 }
 .k-filebrowser .k-tile {
   width: 33%;
   height: 90px;
-  padding: 0.25rem 0.5rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
@@ -44726,7 +44770,8 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 }
 .k-editor-inline .k-table td {
   min-width: 1px;
-  padding: 0.125rem 0.25rem;
+  padding-block: 0.125rem;
+  padding-inline: 0.25rem;
 }
 .k-editor-inline .k-element-resize-handle-wrapper {
   position: absolute;
@@ -44778,7 +44823,8 @@ kendo-grid.k-grid .k-table-row.k-hover .k-grid-content-sticky.k-selected {
 .k-editor-inline .k-column-resize-handle-wrapper .k-column-resize-handle .k-column-resize-marker {
   width: 2px;
   height: 100%;
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   display: none;
   opacity: 0.8;
 }
@@ -45100,7 +45146,8 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
   padding: 0;
 }
 .k-gantt .k-treelist-scrollable .k-grid-header th:last-child .k-header {
-  padding: 0.75rem 0.75rem;
+  padding-block: 0.75rem;
+  padding-inline: 0.75rem;
   border-width: 0 0 1px 1px;
   white-space: nowrap;
 }
@@ -45270,7 +45317,8 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
   overflow-x: scroll;
 }
 .k-gantt-timeline .k-header {
-  padding: 0.75rem 0.75rem;
+  padding-block: 0.75rem;
+  padding-inline: 0.75rem;
   border-block-start-width: 0;
   border-block-end-width: 1px;
   border-inline-start-width: 1px;
@@ -45351,8 +45399,10 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
 }
 
 .k-task-wrap {
-  margin: 0 -21px;
-  padding: 5px 21px;
+  margin-block: 0;
+  margin-inline: -21px;
+  padding-block: 5px;
+  padding-inline: 21px;
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -45576,11 +45626,13 @@ kendo-editor.k-readonly .k-editor-content.k-focus {
   white-space: nowrap;
 }
 .k-resources-wrap .k-resource {
-  margin: 0 5px;
+  margin-block: 0;
+  margin-inline: 5px;
 }
 
 .k-task-details {
-  padding: 0.25rem 0.5rem;
+  padding-block: 0.25rem;
+  padding-inline: 0.5rem;
   white-space: nowrap;
 }
 .k-task-details strong {
@@ -46214,7 +46266,7 @@ kendo-scheduler.k-scheduler.k-readonly-scheduler .k-event-delete {
 .k-scheduler-times th {
   border-inline-width: 0 1px;
   border-block-width: 0 1px;
-  text-align: right;
+  text-align: end;
 }
 .k-scheduler-times .k-slot-cell,
 .k-scheduler-times .k-scheduler-times-all-day {
@@ -46487,7 +46539,7 @@ kendo-scheduler .k-recurrence-editor {
 }
 .k-scheduler-monthview .k-scheduler-table td {
   height: 80px;
-  text-align: right;
+  text-align: end;
 }
 .k-scheduler-monthview .k-scheduler-body .k-scheduler-cell {
   min-height: 80px;
@@ -46975,7 +47027,8 @@ kendo-scheduler .k-recurrence-editor {
 }
 .k-pane-wrapper .k-scheduler-edit-form .k-recur-items-wrap {
   width: 100%;
-  margin: -1px 0;
+  margin-block: -1px;
+  margin-inline: 0;
 }
 .k-pane-wrapper .k-scheduler-edit-form .k-scheduler-recur-end-wrap {
   white-space: nowrap;
@@ -46992,7 +47045,8 @@ kendo-scheduler .k-recurrence-editor {
   visibility: hidden;
 }
 .k-scheduler-mobile .k-scheduler-toolbar {
-  padding: 0.5rem 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
 }
 .k-scheduler-mobile .k-scheduler-toolbar > * {
   margin: 0;
@@ -47019,7 +47073,8 @@ kendo-scheduler .k-recurrence-editor {
   display: inline-block;
 }
 .k-scheduler-mobile .k-scheduler-footer {
-  padding: 0.5rem 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
   display: flex;
   justify-content: space-between;
 }
@@ -47135,11 +47190,13 @@ kendo-scheduler .k-recurrence-editor {
 }
 .k-pane-wrapper .k-list-title,
 .k-pane-wrapper .k-filter-help-text {
-  padding: 0.5rem 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
   display: block;
 }
 .k-pane-wrapper .k-listgroup-title {
-  padding: 0.5rem 0.5rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.5rem;
   font-weight: bold;
   text-transform: uppercase;
 }
@@ -47342,7 +47399,7 @@ kendo-scheduler .k-recurrence-editor {
 }
 .k-chat .k-message-group:not(.k-alt) {
   align-items: flex-start;
-  text-align: left;
+  text-align: start;
 }
 .k-chat .k-message-group:not(.k-alt) .k-message-time {
   margin-inline-start: var(--kendo-chat-item-spacing-x, 0.5rem);
@@ -47362,7 +47419,7 @@ kendo-scheduler .k-recurrence-editor {
 .k-chat .k-message-group.k-alt {
   align-self: flex-end;
   align-items: flex-end;
-  text-align: right;
+  text-align: end;
 }
 .k-chat .k-message-group.k-alt .k-message-time {
   margin-inline-end: var(--kendo-chat-item-spacing-x, 0.5rem);
@@ -47980,7 +48037,7 @@ kendo-scheduler .k-recurrence-editor {
   padding-inline-end: var(--kendo-timeline-items-padding, 1rem);
   margin-block-start: var(--kendo-timeline-track-event-offset, 2rem);
   transform: translate(-100%, -50%);
-  text-align: right;
+  text-align: end;
 }
 .k-timeline-vertical .k-timeline-event {
   display: flex;
@@ -48046,7 +48103,7 @@ kendo-scheduler .k-recurrence-editor {
   flex-direction: row-reverse;
 }
 .k-timeline-vertical.k-timeline-alternating .k-timeline-event.k-reverse .k-timeline-date-wrap {
-  text-align: left;
+  text-align: start;
   padding-inline-end: 0;
   padding-inline-start: var(--kendo-timeline-items-padding, 1rem);
 }
@@ -48454,7 +48511,7 @@ kendo-scheduler .k-recurrence-editor {
 .km-scroller-pull .km-template {
   display: inline-block;
   min-width: 200px;
-  text-align: left;
+  text-align: start;
 }
 
 .km-load-more .km-icon,
@@ -48855,7 +48912,7 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 
 .k-chart-tooltip td {
   width: auto;
-  text-align: left;
+  text-align: start;
   padding-inline: var(--kendo-padding-x-sm, 0.25rem);
   padding-block: var(--kendo-padding-y-sm, 0.125rem);
   line-height: var(--kendo-chart-tooltip-line-height, var(--kendo-line-height-sm, normal));
@@ -49097,7 +49154,7 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 }
 
 .k-gauge {
-  text-align: left;
+  text-align: start;
   position: relative;
 }
 
@@ -49604,7 +49661,8 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 }
 
 .k-orgchart-container {
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: 100%;
   height: 100%;
   position: relative;
@@ -49685,7 +49743,8 @@ div.k-scrollview.k-scrollview-light .k-scrollview-nav-wrap {
 }
 
 .k-orgchart-line-v {
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
   width: var(--kendo-orgchart-line-size, 1px);
   height: var(--kendo-orgchart-line-v-height, 25px);
 }

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.1.1-dev.25+bd878b468",
+    "version": "6.1.1-dev.38+aedcf66cc",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.1.1-dev.25+bd878b468",
+    "version": "6.1.1-dev.38+aedcf66cc",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.1.1-dev.25+bd878b468",
+  "version": "6.1.1-dev.38+aedcf66cc",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.0",
-    "@progress/kendo-theme-core": "6.1.1-dev.25+bd878b468",
-    "@progress/kendo-theme-utils": "6.1.1-dev.25+bd878b468"
+    "@progress/kendo-theme-core": "6.1.1-dev.38+aedcf66cc",
+    "@progress/kendo-theme-utils": "6.1.1-dev.38+aedcf66cc"
   },
-  "gitHead": "bd878b468ff65ff14c8a636431427ad2ba4b7b7e"
+  "gitHead": "aedcf66cc006856d53f3fde47acdeaf627f44a1c"
 }

package/scss/action-buttons/_layout.scss

@@ -26,7 +26,7 @@
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
 
     // Actions align

package/scss/adaptive/_layout.scss

@@ -140,7 +140,8 @@
 
             .k-recur-items-wrap {
                 width: 100%;
-                margin: -1px 0;
+                margin-block: -1px;
+                margin-inline: 0;
             }
 
             .k-scheduler-recur-end-wrap {
@@ -166,7 +167,8 @@
         }
 
         .k-scheduler-toolbar {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
 
             > * {
                 margin: 0;
@@ -201,7 +203,8 @@
         }
 
         .k-scheduler-footer {
-            padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x;
+            padding-block: $kendo-toolbar-md-padding-y;
+            padding-inline: $kendo-toolbar-md-padding-x;
             display: flex;
             justify-content: space-between;
 
@@ -360,12 +363,14 @@
 
         .k-list-title,
         .k-filter-help-text {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             display: block;
         }
 
         .k-listgroup-title {
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             font-weight: bold;
             text-transform: uppercase;
         }

package/scss/calendar/_layout.scss

@@ -42,7 +42,8 @@
 
     // Calendar table
     .k-calendar-table {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -261,7 +262,7 @@
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-link {
-            text-align: left;
+            text-align: start;
         }
     }
 

package/scss/chat/_layout.scss

@@ -61,7 +61,7 @@
         }
         .k-message-group:not(.k-alt) {
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
 
             .k-message-time {
                 margin-inline-start: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
@@ -83,7 +83,7 @@
         .k-message-group.k-alt {
             align-self: flex-end;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
 
             .k-message-time {
                 margin-inline-end: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );

package/scss/chip/_layout.scss

@@ -55,8 +55,10 @@
 
     // Chip content
     .k-chip-content {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         min-width: 0;
         display: flex;
         flex-flow: row nowrap;
@@ -106,7 +108,8 @@
 
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;

package/scss/colorpicker/_layout.scss

@@ -9,7 +9,7 @@
 
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 
 }

package/scss/dataviz/_layout.scss

@@ -98,7 +98,7 @@
 
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
+        text-align: start;
         padding-inline: var( --kendo-padding-x-sm, #{$kendo-padding-sm-x} );
         padding-block: var( --kendo-padding-y-sm, #{$kendo-padding-sm-y} );
         line-height: var( --kendo-chart-tooltip-line-height, #{$kendo-chart-tooltip-line-height} );
@@ -358,7 +358,7 @@
     }
 
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/daterangepicker/_layout.scss

@@ -35,6 +35,6 @@
 
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 }

package/scss/editor/_layout.scss

@@ -41,7 +41,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -220,7 +221,8 @@
         th {
             min-width: 1em;
             border: 1px solid;
-            padding: 3px 5px;
+            padding-block: 3px;
+            padding-inline: 5px;
             vertical-align: top;
             box-sizing: border-box;
             position: relative;
@@ -228,7 +230,10 @@
 
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
 
         // Give selected cells a blue overlay
@@ -247,8 +252,10 @@
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        margin-block: (-$kendo-window-inner-padding-y);
+        margin-inline: (-$kendo-window-inner-padding-x);
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
     // Insert table
@@ -390,7 +397,8 @@
             height: 390px;
             max-height: 50vh;
             margin-block-end: map.get( $kendo-spacing, 4 );
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -398,7 +406,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -510,7 +519,8 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
             }
         }
 
@@ -574,7 +584,8 @@
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }

package/scss/forms/_layout.scss

@@ -126,7 +126,7 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -223,7 +223,7 @@
 
         legend {
             font-size: var( --kendo-font-size-sm, #{$kendo-font-size-sm} );
-            text-align: left;
+            text-align: start;
             font-weight: 600;
             line-height: 1;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
@@ -235,12 +235,12 @@
         .k-form-field {
             display: flex;
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             margin-block-end: calc( var( --kendo-padding-y-lg, #{$kendo-padding-lg-y} ) * 2 );
 
             > span:not(.k-widget) {
                 width: var( --kendo-inline-form-element-width, #{$kendo-inline-form-element-width} );
-                text-align: right;
+                text-align: end;
                 line-height: var( --kendo-line-height, #{$kendo-line-height-md} );
                 padding-block: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} );
                 padding-inline-end: var( --kendo-padding-x-lg, #{$kendo-padding-lg-x} );
@@ -294,7 +294,7 @@
         padding-block: calc( #{$kendo-input-md-padding-y} + #{$kendo-input-border-width} );
         width: 30%;
         line-height: var( --kendo-form-line-height, #{$kendo-form-line-height} );
-        text-align: right;
+        text-align: end;
         float: left;
         clear: both;
     }

package/scss/gantt/_layout.scss

@@ -85,7 +85,8 @@
             }
             .k-grid-header th:last-child {
                 .k-header {
-                    padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+                    padding-block: $kendo-grid-header-padding-y;
+                    padding-inline: $kendo-grid-header-padding-x;
                     border-width: 0 0 1px $kendo-grid-cell-border-width-y;
                     white-space: nowrap;
                 }
@@ -299,7 +300,8 @@
             overflow-x: scroll;
         }
         .k-header {
-            padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+            padding-block: $kendo-grid-header-padding-y;
+            padding-inline: $kendo-grid-header-padding-x;
             border-block-start-width: 0;
             border-block-end-width: 1px;
             border-inline-start-width: $kendo-grid-cell-border-width-y;
@@ -389,8 +391,10 @@
     }
 
     .k-task-wrap {
-        margin: 0 -21px;
-        padding: 5px 21px;
+        margin-block: 0;
+        margin-inline: -21px;
+        padding-block: 5px;
+        padding-inline: 21px;
         display: inline-flex;
         flex-direction: row;
         align-items: center;
@@ -598,14 +602,16 @@
         white-space: nowrap;
 
         .k-resource {
-            margin: 0 5px;
+            margin-block: 0;
+            margin-inline: 5px;
         }
     }
 
 
     // Task tooltip
     .k-task-details {
-        padding: $kendo-padding-md-y $kendo-padding-md-x;
+        padding-block: $kendo-padding-md-y;
+        padding-inline: $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {

package/scss/grid/_layout.scss

@@ -331,7 +331,7 @@
 
     // Alias used in jQuery
     .k-reorder-cue {
-        @extend .k-grouping-dropclue;
+        @extend .k-grouping-dropclue !optional;
     }
 
     // Grid header / footer
@@ -888,7 +888,8 @@
 
     .k-grid-norecords-template {
         box-sizing: border-box;
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 20em;
         height: 4em;
         border: 1px solid;

package/scss/input/_layout.scss

@@ -350,7 +350,8 @@
             aspect-ratio: auto;
 
             .k-button-icon {
-                margin: -1em 0;
+                margin-block: -1em;
+                margin-inline: 0;
                 min-width: auto !important; // sass-lint:disable-line no-important
                 min-height: auto !important; // sass-lint:disable-line no-important
             }

package/scss/list/_layout.scss

@@ -123,7 +123,7 @@
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
 
 

package/scss/orgchart/_layout.scss

@@ -20,7 +20,8 @@
     }
 
     .k-orgchart-container {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 100%;
         height: 100%;
         position: relative;
@@ -108,7 +109,8 @@
     }
 
     .k-orgchart-line-v {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: var( --kendo-orgchart-line-size, #{$kendo-orgchart-line-size} );
         height: var( --kendo-orgchart-line-v-height, #{$kendo-orgchart-line-v-height} );
     }

package/scss/pager/_layout.scss

@@ -79,7 +79,7 @@
 
     // Pager items
     .k-pager-nav {
-        @extend %base-pager-item;
+        @extend %base-pager-item !optional;
         @include border-radius( var( --kendo-pager-item-border-radius, #{$kendo-pager-item-border-radius} ) );
     }
 
@@ -127,7 +127,7 @@
 
     // Pager input
     .k-pager-input {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
 
         .k-textbox {
             margin-inline: 1ex;
@@ -139,7 +139,7 @@
 
     // Pager sizes
     .k-pager-sizes {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
 
         .k-dropdown-list,
         > select {
@@ -156,8 +156,8 @@
 
     // Pager info
     .k-pager-info {
-        @extend %base-pager-section;
-        text-align: right;
+        @extend %base-pager-section !optional;
+        text-align: end;
         justify-content: flex-end;
         flex: 1 1 0%;
         order: 9;
@@ -178,7 +178,7 @@
         // Show native select
         .k-pager-numbers-wrap {
             select.k-dropdown-list {
-                @extend %base-pager-section;
+                @extend %base-pager-section !optional;
                 @if ($kendo-pager-section-spacing) {
                     margin-left: $kendo-pager-section-spacing;
                     margin-right: $kendo-pager-section-spacing;

package/scss/pivotgrid/_layout.scss

@@ -14,7 +14,7 @@
         font-size: var( --kendo-pivotgrid-font-size, #{$kendo-pivotgrid-font-size} );
         font-family: var( --kendo-pivotgrid-font-family, #{$kendo-pivotgrid-font-family} );
         line-height: var( --kendo-pivotgrid-line-height, #{$kendo-pivotgrid-line-height} );
-        text-align: left;
+        text-align: start;
         vertical-align: top;
         display: grid;
         grid-template-columns: var( --kendo-pivotgrid-row-header-width, #{$kendo-pivotgrid-row-header-width} ) auto;
@@ -30,6 +30,7 @@
             border-collapse: separate;
             border-spacing: 0;
             outline: 0;
+            text-align: inherit;
             empty-cells: show;
         }
 
@@ -39,6 +40,7 @@
         tr,
         td {
             border-color: inherit;
+            text-align: inherit;
         }
     }
 

package/scss/popover/_layout.scss

@@ -40,7 +40,7 @@
 
     // Header
     .k-popover-header {
-        @extend .k-card-title;
+        @extend .k-card-title !optional;
         border-width: 0 0 var( --kendo-popover-header-border-width, #{$kendo-popover-header-border-width} );
         border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-header-border-style} );
         padding-inline: var( --kendo-popover-header-padding-x, #{$kendo-popover-header-padding-x} );

package/scss/progressbar/_layout.scss

@@ -233,7 +233,7 @@
 
     .k-circular-progressbar {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/scheduler/_layout.scss

@@ -349,7 +349,7 @@
         th {
             border-inline-width: 0 1px;
             border-block-width: 0 1px;
-            text-align: right;
+            text-align: end;
         }
 
         .k-slot-cell,
@@ -674,7 +674,7 @@
 
         .k-scheduler-table td {
             height: 80px;
-            text-align: right;
+            text-align: end;
         }
 
         .k-scheduler-body .k-scheduler-cell {

package/scss/scroller/_layout.scss

@@ -33,7 +33,7 @@
     .km-scroller-pull .km-template {
         display: inline-block;
         min-width: 200px;
-        text-align: left;
+        text-align: start;
     }
     .km-load-more .km-icon,
     .km-widget .km-scroller-pull .km-icon {

package/scss/slider/_layout.scss

@@ -266,11 +266,11 @@
 
         // Slider ticks
         .k-tick {
-            text-align: right;
+            text-align: end;
             margin-left: 2px;
         }
         .k-slider-topleft .k-tick {
-            text-align: left;
+            text-align: start;
         }
 
         .k-tick { background-position: -94px center; }
@@ -298,7 +298,7 @@
 
         // Slider labels
         .k-label {
-            text-align: left;
+            text-align: start;
             inset-inline-start: 120%;
             inset-inline-end: auto;
             top: 50%;
@@ -362,7 +362,7 @@
     [dir="rtl"] .k-slider,
     .k-slider.k-rtl,
     .k-rtl .k-slider {
-        @extend .k-slider-rtl;
+        @extend .k-slider-rtl !optional;
     }
 
 
@@ -379,14 +379,14 @@
 
 
     // Aliases
-    .k-slider .k-button { @extend .k-slider-button; }
-    .k-tick { @extend .k-slider-tick; }
-    .k-draghandle { @extend .k-slider-thumb; }
-    .k-draghandle-start { @extend .k-slider-thumb-start; }
-    .k-draghandle-end { @extend .k-slider-thumb-end; }
-    .k-slider-horizontal { @extend .k-horizontal-slider; }
-    .k-slider-vertical { @extend .k-vertical-slider; }
-    .k-tick-horizontal { @extend .k-slider-tick-vertical; }
-    .k-tick-vertical { @extend .k-slider-tick-horizontal; }
+    .k-slider .k-button { @extend .k-slider-button !optional; }
+    .k-tick { @extend .k-slider-tick !optional; }
+    .k-draghandle { @extend .k-slider-thumb !optional; }
+    .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
+    .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
+    .k-slider-horizontal { @extend .k-horizontal-slider !optional; }
+    .k-slider-vertical { @extend .k-vertical-slider !optional; }
+    .k-tick-horizontal { @extend .k-slider-tick-vertical !optional; }
+    .k-tick-vertical { @extend .k-slider-tick-horizontal !optional; }
 
 }

package/scss/spreadsheet/_layout.scss

@@ -202,7 +202,8 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding: 0 3px;
+        padding-block: 0;
+        padding-inline: 3px;
         line-height: var( --kendo-spreadsheet-line-height, $kendo-spreadsheet-line-height );
         display: none;
         overflow: hidden;

package/scss/timeline/_layout.scss

@@ -167,7 +167,7 @@
             padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
             margin-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
             transform: translate(-100%, -50%);
-            text-align: right;
+            text-align: end;
         }
 
         .k-timeline-event {
@@ -251,7 +251,7 @@
                     flex-direction: row-reverse;
 
                     .k-timeline-date-wrap {
-                        text-align: left;
+                        text-align: start;
                         padding-inline-end: 0;
                         padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
                     }

package/scss/treelist/_layout.scss

@@ -92,7 +92,8 @@
         border-right: 1px solid;
         height: 1em;
         vertical-align: top;
-        margin: 0 .5em;
+        margin-block: 0;
+        margin-inline: .5em;
     }
 
 }

package/scss/typography/_layout.scss

@@ -4,16 +4,16 @@
 
 @mixin kendo-typography--layout() {
     @if $kendo-enable-typography {
-        body { @extend .k-body; }
-        h1 { @extend .k-h1; }
-        h2 { @extend .k-h2; }
-        h3 { @extend .k-h3; }
-        h4 { @extend .k-h4; }
-        h5 { @extend .k-h5; }
-        h6 { @extend .k-h6; }
-        p { @extend .k-paragraph; }
-        pre { @extend .k-pre; }
-        code { @extend .k-code; }
+        body { @extend .k-body !optional; }
+        h1 { @extend .k-h1 !optional; }
+        h2 { @extend .k-h2 !optional; }
+        h3 { @extend .k-h3 !optional; }
+        h4 { @extend .k-h4 !optional; }
+        h5 { @extend .k-h5 !optional; }
+        h6 { @extend .k-h6 !optional; }
+        p { @extend .k-paragraph !optional; }
+        pre { @extend .k-pre !optional; }
+        code { @extend .k-code !optional; }
     }
 
     .k-body {

package/scss/window/_layout.scss

@@ -47,8 +47,10 @@
 
     // Title bar title text
     .k-window-title {
-        padding: .5em 0;
-        margin: -.5em 0;
+        padding-block: .5em;
+        padding-inline: 0;
+        margin-block: -.5em;
+        margin-inline: 0;
         font-size: var( --kendo-window-title-font-size, #{$kendo-window-title-font-size} );
         line-height: var( --kendo-window-title-line-height, #{$kendo-window-title-line-height} );
         font-weight: var( --kendo-window-title-font-weight, #{$kendo-window-title-font-weight} );
@@ -67,7 +69,8 @@
 
     // Actions
     .k-window-titlebar-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
         line-height: 1;
         display: flex;