npm - @progress/kendo-theme-bootstrap - Versions diffs - 6.1.1-dev.25 → 6.1.1-dev.38 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/all.css +587 -330
package/dist/all.scss +593 -324
package/dist/meta/variables.json +9 -1
package/lib/swatches/bootstrap-3-dark.json +1 -1
package/lib/swatches/bootstrap-3.json +1 -1
package/lib/swatches/bootstrap-4-dark.json +1 -1
package/lib/swatches/bootstrap-4.json +1 -1
package/lib/swatches/bootstrap-dataviz-v4.json +1 -1
package/lib/swatches/bootstrap-main-dark.json +1 -1
package/lib/swatches/bootstrap-main.json +1 -1
package/lib/swatches/bootstrap-nordic.json +1 -1
package/lib/swatches/bootstrap-turquoise-dark.json +1 -1
package/lib/swatches/bootstrap-turquoise.json +1 -1
package/lib/swatches/bootstrap-urban.json +1 -1
package/lib/swatches/bootstrap-vintage.json +1 -1
package/package.json +5 -5
package/scss/menu/_layout.scss +4 -2
package/scss/scheduler/_layout.scss +2 -1

package/dist/all.scss CHANGED Viewed

@@ -586,12 +586,17 @@ $wcag-light: white !default;
 // #endregion
 // #region @import "./_color-manipulation.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color-manipulation.import.scss
+$kendo-light-color-level-step: 8% !default;
+$kendo-dark-color-level-step: 16% !default;
 /// Set a specific jump point for requesting color jumps
 /// @group color-system
 /// @access private
 $kendo-color-level-step: 8% !default;
 @function k-color-level( $color, $level: 0 ) {
+    $_dark-theme: if( k-meta-variable-exists( kendo-is-dark-theme ), $kendo-is-dark-theme, false );
+    $_color-level-step: if( $_dark-theme, $kendo-dark-color-level-step, $kendo-light-color-level-step );
     @if ( $level == 0 ) or ( $level == 0% ) {
         @return $color;
@@ -605,7 +610,7 @@ $kendo-color-level-step: 8% !default;
         @return k-color-mix( $base, $color, $level );
     }
-    @return k-color-mix( $base, $color, $level * $kendo-color-level-step );
+    @return k-color-mix( $base, $color, k-math-clamp( $level * $_color-level-step, 0%, 100% ) );
 }
 /// Makes a color lighter by mixing it with white
@@ -7421,16 +7426,16 @@ $kendo-display4-letter-spacing: null !default;
 @include exports( "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; }
     }
     // TODO delete k-typography class for R1 2022
@@ -7539,7 +7544,8 @@ $kendo-display4-letter-spacing: null !default;
     }
     .k-pre {
-        padding: $kendo-pre-padding-y $kendo-pre-padding-x;
+        padding-block: $kendo-pre-padding-y;
+        padding-inline: $kendo-pre-padding-x;
         overflow: auto;
     }
@@ -7553,7 +7559,8 @@ $kendo-display4-letter-spacing: null !default;
     }
     .k-code {
-        padding: $kendo-code-padding-y $kendo-code-padding-x;
+        padding-block: $kendo-code-padding-y;
+        padding-inline: $kendo-code-padding-x;
     }
     // Display
@@ -8273,7 +8280,10 @@ $kendo-utils: (
         capitalize: capitalize,
         normal-case: none
     ),
-    "text-overflow": (),
+    "text-overflow": (
+        clip: clip,
+        ellipsis: ellipsis
+    ),
     "text-indent": (),
     "vertical-align": (),
     "white-space": (
@@ -9716,6 +9726,33 @@ $kendo-utils: (
 // #endregion
 // text decoration
+// #region @import "./_text-overflow.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_text-overflow.scss
+@mixin kendo-utils--typography--text-overflow() {
+    // Text overflow utility classes
+    $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
+    @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
+    // Text truncate utility classes
+    .#{$kendo-prefix}text-truncate {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    .\!#{$kendo-prefix}text-truncate {
+        white-space: nowrap !important; // sass-lint:disable-line no-important
+        overflow: hidden !important; // sass-lint:disable-line no-important
+        text-overflow: ellipsis !important; // sass-lint:disable-line no-important
+    }
+    // Legacy aliases
+    .#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
+    .\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }
+}
+// #endregion
 // #region @import "./_text-transform.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_text-transform.scss
 // Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
@@ -9743,7 +9780,6 @@ $kendo-utils: (
 }
 // #endregion
-// text overflow
 // text indent
 // vertical align
 // #region @import "./_white-space.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_white-space.scss
@@ -9797,16 +9833,12 @@ $kendo-utils: (
 @mixin kendo-utils--typography() {
-    /// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
-    /// @name .k-text-ellipsis
-    /// @group text
-    .#{$kendo-prefix}text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
     @include kendo-utils--typography--white-space();
 }
@@ -11936,7 +11968,8 @@ $kendo-message-box-link-text-decoration: underline !default;
     // Base
     .k-messagebox {
         margin: $kendo-message-box-margin;
-        padding: $kendo-message-box-padding-y $kendo-message-box-padding-x;
+        padding-block: $kendo-message-box-padding-y;
+        padding-inline: $kendo-message-box-padding-x;
         border-width: $kendo-message-box-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -12026,7 +12059,8 @@ $kendo-drop-hint-bg: $kendo-color-primary !default;
     // Layout
     .k-drag-clue {
         @include border-radius( $kendo-drag-hint-border-radius );
-        padding: $kendo-drag-hint-padding-y $kendo-drag-hint-padding-x;
+        padding-block: $kendo-drag-hint-padding-y;
+        padding-inline: $kendo-drag-hint-padding-x;
         border-width: $kendo-drag-hint-border-width;
         border-style: if( $kendo-drag-hint-border-width == null, null, solid );
         box-sizing: border-box;
@@ -12746,7 +12780,8 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     }
     .k-checkbox-item,
     .k-checkbox-list-item {
-        padding: $kendo-checkbox-list-item-padding-y $kendo-checkbox-list-item-padding-x;
+        padding-block: $kendo-checkbox-list-item-padding-y;
+        padding-inline: $kendo-checkbox-list-item-padding-x;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -12995,7 +13030,8 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     // List header
     // .k-list-header,
     .k-list-group-sticky-header {
-        padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
+        padding-block: $kendo-list-header-padding-y;
+        padding-inline: $kendo-list-header-padding-x;
         border-width: 0;
         border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -13036,7 +13072,8 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     // List item
     .k-list-item {
-        padding: $kendo-list-item-padding-y $kendo-list-item-padding-x;
+        padding-block: $kendo-list-item-padding-y;
+        padding-inline: $kendo-list-item-padding-x;
         border: 0;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
@@ -13071,13 +13108,14 @@ $kendo-checkbox-ripple-opacity: .25 !default;
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
     // List group item
     .k-list-group-item {
-        padding: $kendo-list-group-item-padding-y $kendo-list-group-item-padding-x;
+        padding-block: $kendo-list-group-item-padding-y;
+        padding-inline: $kendo-list-group-item-padding-x;
         border-width: 0;
         border-width: $kendo-list-group-item-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -13096,7 +13134,8 @@ $kendo-checkbox-ripple-opacity: .25 !default;
     // List item group label
     .k-list-item-group-label {
-        padding: 0 .5em;
+        padding-block: 0;
+        padding-inline: .5em;
         font-size: .75em;
         position: absolute;
         top: 0;
@@ -13163,19 +13202,22 @@ $kendo-checkbox-ripple-opacity: .25 !default;
             // .k-list-header,
             .k-list-group-sticky-header {
-                padding: $_header-padding-y $_header-padding-x;
+                padding-block: $_header-padding-y;
+                padding-inline: $_header-padding-x;
                 font-size: $_header-font-size;
                 line-height: $_header-line-height;
             }
             .k-list-item {
-                padding: $_item-padding-y $_item-padding-x;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
                 font-size: $_item-font-size;
                 line-height: $_item-line-height;
             }
             .k-list-group-item {
-                padding: $_group-item-padding-y $_group-item-padding-x;
+                padding-block: $_group-item-padding-y;
+                padding-inline: $_group-item-padding-x;
                 font-size: $_group-item-font-size;
                 line-height: $_group-item-line-height;
             }
@@ -13376,7 +13418,8 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;
     .k-listgroup-item {
-        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;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -13388,8 +13431,10 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;
         position: relative;
         > .k-link {
-            margin: (-$kendo-listgroup-item-padding-y) (-$kendo-listgroup-item-padding-x);
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            margin-block: (-$kendo-listgroup-item-padding-y);
+            margin-inline: (-$kendo-listgroup-item-padding-x);
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             color: inherit;
             text-decoration: none;
             outline: 0;
@@ -13432,8 +13477,10 @@ $kendo-listgroup-item-border-width: $kendo-listgroup-border-width !default;
     // Forms in listgroup
     .k-listgroup-form-row {
-        margin: (-$kendo-listgroup-item-padding-y) (-$kendo-listgroup-item-padding-x);
-        padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+        margin-block: (-$kendo-listgroup-item-padding-y);
+        margin-inline: (-$kendo-listgroup-item-padding-x);
+        padding-block: $kendo-listgroup-item-padding-y;
+        padding-inline: $kendo-listgroup-item-padding-x;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -13663,7 +13710,8 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .0
         @include border-radius( $kendo-popup-border-radius );
         margin: 0;
         padding: 0;
-        // padding: $kendo-popup-padding-y $kendo-popup-padding-x;
+        // padding-block: $kendo-popup-padding-y;
+        // padding-inline: $kendo-popup-padding-x;
         border-width: $kendo-popup-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -13686,7 +13734,8 @@ $kendo-popup-shadow: 0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .0
     }
     .k-popup > .k-colorpalette {
-        padding: $kendo-popup-content-padding-y $kendo-popup-content-padding-x;
+        padding-block: $kendo-popup-content-padding-y;
+        padding-inline: $kendo-popup-content-padding-x;
     }
     // Transparent popup
@@ -14022,7 +14071,7 @@ $kendo-table-selected-border: null !default;
         border-style: solid;
         font-size: $kendo-table-font-size;
         line-height: $kendo-table-line-height;
-        text-align: left;
+        text-align: start;
         border-collapse: collapse;
         border-spacing: 0;
         empty-cells: show;
@@ -14052,7 +14101,8 @@ $kendo-table-selected-border: null !default;
     }
     .k-table-th,
     .k-table-td {
-        padding: $kendo-table-cell-padding-y $kendo-table-cell-padding-x;
+        padding-block: $kendo-table-cell-padding-y;
+        padding-inline: $kendo-table-cell-padding-x;
         border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
@@ -14146,7 +14196,8 @@ $kendo-table-selected-border: null !default;
             &::before {
                 content: "\200b";
-                padding: $kendo-table-cell-padding-y 0;
+                padding-block: $kendo-table-cell-padding-y;
+                padding-inline: 0;
                 width: 0;
                 display: block;
                 overflow: hidden;
@@ -14239,7 +14290,8 @@ $kendo-table-selected-border: null !default;
         .k-table-#{$size} .k-table-th,
         .k-table-#{$size} .k-table-td {
-            padding: $_cell-padding-y $_cell-padding-x;
+            padding-block: $_cell-padding-y;
+            padding-inline: $_cell-padding-x;
         }
         .k-table-#{$size} .k-table-list .k-table-group-td > span {
@@ -14259,7 +14311,6 @@ $kendo-table-selected-border: null !default;
     [dir="rtl"] {
         &.k-table,
         .k-table {
-            text-align: right;
             .k-table-th,
             .k-table-td {
@@ -14764,7 +14815,8 @@ $kendo-badge-sizes: (
         $_min-width: k-map-get( $size-props, min-width );
         .k-badge-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
             min-width: $_min-width;
@@ -15291,7 +15343,8 @@ $kendo-chip-list-sizes: (
     // Chip
     .k-chip {
-        padding: $kendo-chip-padding-y $kendo-chip-padding-x;
+        padding-block: $kendo-chip-padding-y;
+        padding-inline: $kendo-chip-padding-x;
         border-width: $kendo-chip-border-width;
         border-style: solid;
         outline: 0;
@@ -15322,8 +15375,10 @@ $kendo-chip-list-sizes: (
     // 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;
@@ -15370,7 +15425,8 @@ $kendo-chip-list-sizes: (
     // Actions
     .k-chip-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         flex: none;
         display: flex;
         flex-flow: row nowrap;
@@ -15414,7 +15470,8 @@ $kendo-chip-list-sizes: (
         $_avatar-size: 1em;
         .k-chip-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }
@@ -16766,7 +16823,8 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
         $_line-height: k-map-get( $size-props, line-height );
         .k-button-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             font-size: $_font-size;
             line-height: $_line-height;
         }
@@ -16972,7 +17030,7 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
     .k-button {
         &::before {
-            @extend .k-button-overlay;
+            @extend .k-button-overlay !optional;
         }
         // Hovered state
@@ -17583,7 +17641,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
     // Menu link
     .k-menu-link {
-        padding: $kendo-menu-item-padding-y $kendo-menu-item-padding-x;
+        padding-block: $kendo-menu-item-padding-y;
+        padding-inline: $kendo-menu-item-padding-x;
         outline: 0;
         color: inherit;
         display: flex;
@@ -17627,7 +17686,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         > .k-separator {
-            margin: 0 $kendo-menu-separator-spacing;
+            margin-block: 0;
+            margin-inline: $kendo-menu-separator-spacing;
             width: 0;
             height: auto;
             border-width: 0 0 0 1px;
@@ -17645,7 +17705,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         > .k-menu-item > .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-block: $kendo-menu-popup-item-padding-y;
+            padding-inline: $kendo-menu-popup-item-padding-x;
             padding-right: $kendo-menu-popup-item-padding-end;
         }
@@ -17655,7 +17716,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         > .k-separator {
-            margin: $kendo-menu-separator-spacing 0;
+            margin-block: $kendo-menu-separator-spacing;
+            margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -17667,7 +17729,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
     // Menu popup
     .k-menu-popup {
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
         box-sizing: border-box;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
@@ -17696,7 +17759,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         .k-separator {
-            margin: $kendo-menu-separator-spacing 0;
+            margin-block: $kendo-menu-separator-spacing;
+            margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -17721,7 +17785,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         .k-menu-link {
-            padding: $kendo-menu-popup-sm-item-padding-y $kendo-menu-popup-sm-item-padding-x;
+            padding-block: $kendo-menu-popup-sm-item-padding-y;
+            padding-inline: $kendo-menu-popup-sm-item-padding-x;
             padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
         }
@@ -17741,7 +17806,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         .k-menu-link {
-            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
             padding-inline-end: $kendo-menu-popup-md-item-padding-end;
         }
@@ -17761,7 +17827,8 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
         }
         .k-menu-link {
-            padding: $kendo-menu-popup-lg-item-padding-y $kendo-menu-popup-lg-item-padding-x;
+            padding-block: $kendo-menu-popup-lg-item-padding-y;
+            padding-inline: $kendo-menu-popup-lg-item-padding-x;
             padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
         }
@@ -17781,12 +17848,14 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
     }
     .k-context-menu {
         margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
         &.k-menu-horizontal {
-            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
+            padding-block: $kendo-menu-popup-padding-x;
+            padding-inline: $kendo-menu-popup-padding-y;
         }
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {
@@ -17903,10 +17972,12 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
 @include exports( "menu/layout/bootstrap" ) {
     .k-menu.k-menu-horizontal:not(.k-context-menu) {
-        padding: $navbar-padding-y $navbar-padding-x;
+        padding-block: $navbar-padding-y;
+        padding-inline: $navbar-padding-x;
     }
     .k-menu.k-menu-vertical:not(.k-context-menu) {
-        padding: $navbar-padding-y 0;
+        padding-block: $navbar-padding-y;
+        padding-inline: 0;
     }
     .k-menu-group,
@@ -18161,7 +18232,8 @@ $kendo-toolbar-sizes: (
     // Base
     .k-toolbar {
         margin: 0;
-        padding: $kendo-toolbar-padding-y $kendo-toolbar-padding-x;
+        padding-block: $kendo-toolbar-padding-y;
+        padding-inline: $kendo-toolbar-padding-x;
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -18284,7 +18356,8 @@ $kendo-toolbar-sizes: (
         $_spacing: k-map-get( $size-props, spacing );
         .k-toolbar-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
             gap: $_spacing;
             // Remove once we decide to not size empty containers
@@ -18318,7 +18391,8 @@ $kendo-toolbar-sizes: (
     // sass-lint:disable class-name-format
     .k-floating-toolbar,
     .editorToolbarWindow.k-window-content {
-        padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x !important; // sass-lint:disable-line no-important
+        padding-block: $kendo-toolbar-md-padding-y !important; // sass-lint:disable-line no-important
+        padding-inline: $kendo-toolbar-md-padding-x !important; // sass-lint:disable-line no-important
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         display: flex;
@@ -18372,7 +18446,8 @@ $kendo-toolbar-sizes: (
         // Button
         .k-overflow-button {
-            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
             width: 100%;
             height: auto;
             border-width: 0;
@@ -18563,7 +18638,8 @@ $kendo-actions-gradient: null !default;
 @include exports("action-buttons/layout") {
     .k-actions {
-        padding: $kendo-actions-padding-y $kendo-actions-padding-x;
+        padding-block: $kendo-actions-padding-y;
+        padding-inline: $kendo-actions-padding-x;
         box-sizing: border-box;
         border-width: $kendo-actions-border-width 0 0 0;
         border-style: solid;
@@ -18595,7 +18671,7 @@ $kendo-actions-gradient: null !default;
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
     // Actions align
@@ -19183,7 +19259,8 @@ $kendo-form-sizes: (
             display: inline-block;
             font-size: $kendo-font-size-xs;
             line-height: 1;
-            margin: 0 $kendo-padding-md-x;
+            margin-block: 0;
+            margin-inline: $kendo-padding-md-x;
         }
@@ -19198,7 +19275,7 @@ $kendo-form-sizes: (
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -19319,7 +19396,7 @@ $kendo-form-sizes: (
         legend {
             font-size: $kendo-font-size-sm;
-            text-align: left;
+            text-align: start;
             font-weight: 600;
             line-height: 1;
             margin-bottom: $kendo-padding-lg-y * 2;
@@ -19331,12 +19408,12 @@ $kendo-form-sizes: (
         .k-form-field {
             display: flex;
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             margin-bottom: $kendo-padding-lg-y * 2;
             > span:not(.k-widget) {
                 width: $kendo-inline-form-element-width;
-                text-align: right;
+                text-align: end;
                 line-height: $kendo-line-height-md;
                 // TODO: do we need the input variable?
                 padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
@@ -19397,7 +19474,7 @@ $kendo-form-sizes: (
         padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $kendo-form-line-height;
-        text-align: right;
+        text-align: end;
         float: left;
         clear: both;
     }
@@ -19579,7 +19656,8 @@ $kendo-form-sizes: (
     .k-tooltip {
         @include border-radius( $kendo-tooltip-border-radius );
         margin: 0;
-        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        padding-block: $kendo-tooltip-padding-y;
+        padding-inline: $kendo-tooltip-padding-x;
         // max-width: $kendo-tooltip-max-width;
         border-width: $kendo-tooltip-border-width;
         border-style: solid;
@@ -19911,7 +19989,8 @@ $kendo-form-sizes: (
     .k-input {}
     input.k-input,
     textarea.k-textarea {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
         &:disabled,
         &[disabled] {
@@ -19934,7 +20013,8 @@ $kendo-form-sizes: (
         cursor: pointer;
     }
     select.k-picker {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
         appearance: auto;
         &:disabled,
@@ -19952,7 +20032,8 @@ $kendo-form-sizes: (
     // Input inner
     .k-input-inner {
-        padding: $kendo-input-padding-y $kendo-input-padding-x;
+        padding-block: $kendo-input-padding-y;
+        padding-inline: $kendo-input-padding-x;
         width: 100%;
         border: 0;
         outline: 0;
@@ -20182,7 +20263,8 @@ $kendo-form-sizes: (
             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
             }
@@ -20261,13 +20343,15 @@ $kendo-form-sizes: (
             }
             .k-input-inner {
-                padding: $_padding-y $_padding-x;
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
             }
             .k-input-button,
             .k-spinner-increase,
             .k-spinner-decrease {
-                padding: $_button-padding-y $_button-padding-x;
+                padding-block: $_button-padding-y;
+                padding-inline: $_button-padding-x;
             }
             .k-input-icon,
@@ -20293,7 +20377,8 @@ $kendo-form-sizes: (
             }
         }
         select.k-picker-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
         }
     }
@@ -21037,21 +21122,25 @@ $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
     // Split button arrow
     .k-split-button .k-split-button-arrow {
-        padding: $kendo-split-button-arrow-padding-y $kendo-split-button-arrow-padding-x;
+        padding-block: $kendo-split-button-arrow-padding-y;
+        padding-inline: $kendo-split-button-arrow-padding-x;
         width: auto;
         aspect-ratio: auto;
         flex: none;
         &.k-button-sm {
-            padding: $kendo-split-button-sm-arrow-padding-y $kendo-split-button-sm-arrow-padding-x;
+            padding-block: $kendo-split-button-sm-arrow-padding-y;
+            padding-inline: $kendo-split-button-sm-arrow-padding-x;
         }
         &.k-button-md {
-            padding: $kendo-split-button-md-arrow-padding-y $kendo-split-button-md-arrow-padding-x;
+            padding-block: $kendo-split-button-md-arrow-padding-y;
+            padding-inline: $kendo-split-button-md-arrow-padding-x;
         }
         &.k-button-lg {
-            padding: $kendo-split-button-lg-arrow-padding-y $kendo-split-button-lg-arrow-padding-x;
+            padding-block: $kendo-split-button-lg-arrow-padding-y;
+            padding-inline: $kendo-split-button-lg-arrow-padding-x;
         }
         .k-button-icon {
@@ -21756,7 +21845,7 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
     .k-circular-progressbar {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         position: relative;
     }
@@ -22166,7 +22255,8 @@ $kendo-radio-ripple-opacity: .25 !default;
     }
     .k-radio-item,
     .k-radio-list-item {
-        padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
+        padding-block: $kendo-radio-list-item-padding-y;
+        padding-inline: $kendo-radio-list-item-padding-x;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;
@@ -22647,12 +22737,12 @@ $kendo-slider-disabled-opacity: null !default;
         flex-flow: column-reverse nowrap;
         .k-tick {
-            text-align: right;
+            text-align: end;
             margin-left: 2px;
         }
         .k-slider-topleft .k-tick {
-            text-align: left;
+            text-align: start;
         }
         // ticks
@@ -22687,7 +22777,7 @@ $kendo-slider-disabled-opacity: null !default;
         // labels
         .k-label {
-            text-align: left;
+            text-align: start;
             left: 120%;
             top: 50%;
             transform: translateY(-50%);
@@ -23178,7 +23268,8 @@ $kendo-calendar-sizes: (
     // Calendar table
     .k-calendar-table {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         border-width: 0;
         border-color: inherit;
         border-spacing: 0;
@@ -23194,13 +23285,14 @@ $kendo-calendar-sizes: (
     .k-calendar-caption.k-calendar-th,
     .k-calendar .k-meta-header,
     .k-calendar .k-month-header {
-        padding: $kendo-calendar-caption-padding-y $kendo-calendar-caption-padding-x;
+        padding-block: $kendo-calendar-caption-padding-y;
+        padding-inline: $kendo-calendar-caption-padding-x;
         height: $kendo-calendar-caption-height;
         box-sizing: border-box;
         font-size: $kendo-calendar-caption-font-size;
         line-height: $kendo-calendar-caption-line-height;
         text-transform: none;
-        text-align: left;
+        text-align: start;
         font-weight: $kendo-calendar-caption-font-weight;
         cursor: default;
     }
@@ -23218,7 +23310,8 @@ $kendo-calendar-sizes: (
         cursor: default;
     }
     .k-calendar-th {
-        padding: $kendo-calendar-header-cell-padding-y $kendo-calendar-header-cell-padding-x;
+        padding-block: $kendo-calendar-header-cell-padding-y;
+        padding-inline: $kendo-calendar-header-cell-padding-x;
         width: $kendo-calendar-header-cell-width;
         height: $kendo-calendar-header-cell-height;
         font-size: $kendo-calendar-header-cell-font-size;
@@ -23238,7 +23331,6 @@ $kendo-calendar-sizes: (
     // Remove .k-calendar once we remove k-link
     .k-calendar .k-calendar-cell-inner {
         @include border-radius( $kendo-calendar-cell-border-radius );
-        padding: $kendo-calendar-cell-padding-y $kendo-calendar-cell-padding-x;
         padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, #{$kendo-calendar-cell-padding-x} );
         padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, #{$kendo-calendar-cell-padding-y} );
         width: 100%;
@@ -23256,7 +23348,8 @@ $kendo-calendar-sizes: (
     // Calendar header
     .k-calendar .k-header {
-        padding: $kendo-calendar-header-padding-y $kendo-calendar-header-padding-x;
+        padding-block: $kendo-calendar-header-padding-y;
+        padding-inline: $kendo-calendar-header-padding-x;
         border-bottom-width: $kendo-calendar-header-border-width;
         border-bottom-style: solid;
         display: flex;
@@ -23270,7 +23363,8 @@ $kendo-calendar-sizes: (
     // Calendar header
     .k-calendar-header {
-        padding: $kendo-calendar-header-padding-y $kendo-calendar-header-padding-x;
+        padding-block: $kendo-calendar-header-padding-y;
+        padding-inline: $kendo-calendar-header-padding-x;
         min-width: ($kendo-calendar-cell-size * 8);
         box-sizing: border-box;
         display: flex;
@@ -23295,7 +23389,8 @@ $kendo-calendar-sizes: (
     // Calendar footer
     .k-calendar-footer,
     .k-calendar .k-footer {
-        padding: $kendo-calendar-footer-padding-y $kendo-calendar-footer-padding-x;
+        padding-block: $kendo-calendar-footer-padding-y;
+        padding-inline: $kendo-calendar-footer-padding-x;
         text-align: center;
         clear: both;
     }
@@ -23304,7 +23399,8 @@ $kendo-calendar-sizes: (
     // Calendar view wrapper
     .k-calendar-view {
         margin: auto;
-        padding: 0 $kendo-calendar-header-padding-x;
+        padding-block: 0;
+        padding-inline: $kendo-calendar-header-padding-x;
         // setting width / height prevents layout changes in meta views
         width: $kendo-calendar-view-width;
         inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
@@ -23371,7 +23467,7 @@ $kendo-calendar-sizes: (
             block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
         }
         .k-calendar-cell-inner {
-            text-align: left;
+            text-align: start;
         }
     }
@@ -23458,7 +23554,7 @@ $kendo-calendar-sizes: (
     // Alias
     .k-link {
-        @extend .k-calendar-cell-inner;
+        @extend .k-calendar-cell-inner !optional;
     }
 }
@@ -23475,7 +23571,8 @@ $kendo-calendar-sizes: (
         flex-flow: row nowrap;
         .k-calendar-view {
-            padding: $kendo-infinite-calendar-view-padding-y $kendo-infinite-calendar-view-padding-x;
+            padding-block: $kendo-infinite-calendar-view-padding-y;
+            padding-inline: $kendo-infinite-calendar-view-padding-x;
             height: $kendo-infinite-calendar-view-height;
             flex: 0 0 auto;
             display: flex;
@@ -23504,7 +23601,8 @@ $kendo-calendar-sizes: (
         .k-calendar-header {
             margin-left: -$kendo-infinite-calendar-view-padding-x;
             margin-right: -$kendo-infinite-calendar-view-padding-x;
-            padding: $kendo-infinite-calendar-header-padding-y $kendo-infinite-calendar-header-padding-x;
+            padding-block: $kendo-infinite-calendar-header-padding-y;
+            padding-inline: $kendo-infinite-calendar-header-padding-x;
             width: auto;
             min-width: 0;
         }
@@ -23560,7 +23658,8 @@ $kendo-calendar-sizes: (
                 height: $kendo-calendar-navigation-item-height;
                 line-height: $kendo-calendar-navigation-item-height;
                 cursor: pointer;
-                padding: 0 1em;
+                padding-block: 0;
+                padding-inline: 1em;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: clip;
@@ -23650,11 +23749,6 @@ $kendo-calendar-sizes: (
             @include hide-scrollbar("left");
         }
-        tbody th,
-        .k-calendar-tbody .k-calendar-th {
-            text-align: right;
-        }
     }
 }
@@ -24019,7 +24113,8 @@ $kendo-time-selector-sizes: (
     // Time selector header
     .k-time-header,
     .k-time-selector-header {
-        padding: $kendo-time-selector-header-padding-y $kendo-time-selector-header-padding-x;
+        padding-block: $kendo-time-selector-header-padding-y;
+        padding-inline: $kendo-time-selector-header-padding-x;
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -24028,7 +24123,8 @@ $kendo-time-selector-sizes: (
         .k-title,
         .k-time-selector-header-title {
-            padding: $kendo-button-padding-y $kendo-button-padding-x;
+            padding-block: $kendo-button-padding-y;
+            padding-inline: $kendo-button-padding-x;
             font-weight: bold;
             display: inline-block;
         }
@@ -24182,7 +24278,8 @@ $kendo-time-selector-sizes: (
     // Time list item
     .k-time-list-item,
     .k-time-list .k-item {
-        padding: $kendo-time-list-item-padding-y $kendo-time-list-item-padding-x;
+        padding-block: $kendo-time-list-item-padding-y;
+        padding-inline: $kendo-time-list-item-padding-x;
     }
@@ -24224,7 +24321,8 @@ $kendo-time-selector-sizes: (
             .k-time-list-item,
             .k-time-list .k-item {
-                padding: $_list-item-padding-y $_list-item-padding-x;
+                padding-block: $_list-item-padding-y;
+                padding-inline: $_list-item-padding-x;
             }
         }
     }
@@ -24793,7 +24891,8 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
         width: $kendo-color-gradient-width;
-        padding: $kendo-color-gradient-padding-y $kendo-color-gradient-padding-x;
+        padding-block: $kendo-color-gradient-padding-y;
+        padding-inline: $kendo-color-gradient-padding-x;
         border-style: solid;
         border-width: $kendo-color-gradient-border-width;
         box-sizing: border-box;
@@ -24974,7 +25073,6 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
 }
 // #endregion
 // #endregion
@@ -25177,7 +25275,8 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
     // Views
     .k-coloreditor-views {
         min-width: calc( var(--kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var(--kendo-color-preview-columns, 10) );
-        padding: $kendo-color-editor-views-padding-y $kendo-color-editor-views-padding-x;
+        padding-block: $kendo-color-editor-views-padding-y;
+        padding-inline: $kendo-color-editor-views-padding-x;
         gap: $kendo-color-editor-views-gap;
         .k-colorgradient {
@@ -25284,7 +25383,7 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 }
@@ -25566,7 +25665,8 @@ $kendo-datetime-width: calc( #{$kendo-calendar-cell-size * 8} + #{$kendo-infinit
         overflow: hidden;
         .k-datetime-buttongroup {
-            padding: $kendo-actions-padding-y $kendo-actions-padding-x;
+            padding-block: $kendo-actions-padding-y;
+            padding-inline: $kendo-actions-padding-x;
         }
         .k-calendar,
@@ -25679,7 +25779,7 @@ $kendo-daterange-picker-input-width: 10em !default;
     // Angular specific
     kendo-daterange {
-        // @extend .k-daterangepicker;
+        // @extend .k-daterangepicker !optional;
     }
@@ -25694,7 +25794,7 @@ $kendo-daterange-picker-input-width: 10em !default;
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 }
@@ -26213,7 +26313,8 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
     // Treeview leaf
     .k-treeview-leaf {
         @include border-radius( $kendo-treeview-item-border-radius );
-        padding: $kendo-treeview-item-padding-y $kendo-treeview-item-padding-x;
+        padding-block: $kendo-treeview-item-padding-y;
+        padding-inline: $kendo-treeview-item-padding-x;
         border: $kendo-treeview-item-border-width solid transparent;
         text-decoration: none;
         display: inline-flex;
@@ -26292,7 +26393,8 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
             line-height: $_line-height;
             .k-treeview-leaf {
-                padding: $_item-padding-y $_item-padding-x;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
             }
         }
     }
@@ -26427,7 +26529,8 @@ $kendo-dropdowntree-popup-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
         }
         .k-treeview {
-            padding: $kendo-dropdowntree-popup-padding-y $kendo-dropdowntree-popup-padding-x;
+            padding-block: $kendo-dropdowntree-popup-padding-y;
+            padding-inline: $kendo-dropdowntree-popup-padding-x;
         }
     }
@@ -26582,12 +26685,14 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
     .k-rating-container {
         flex: 0 1 auto;
         position: relative;
-        margin: 0 $kendo-rating-container-margin-x;
+        margin-block: 0;
+        margin-inline: $kendo-rating-container-margin-x;
         .k-rating-item {
             display: inline-flex;
             position: relative;
-            padding: $kendo-rating-item-padding-y $kendo-rating-item-padding-x;
+            padding-block: $kendo-rating-item-padding-y;
+            padding-inline: $kendo-rating-item-padding-x;
             align-items: center;
             vertical-align: middle;
             margin: 0;
@@ -26627,7 +26732,8 @@ $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
         align-items: center;
         vertical-align: middle;
         line-height: $kendo-rating-label-line-height;
-        margin: $kendo-rating-label-margin-y $kendo-rating-label-margin-x;
+        margin-block: $kendo-rating-label-margin-y;
+        margin-inline: $kendo-rating-label-margin-x;
     }
     .k-rtl,
@@ -27369,7 +27475,8 @@ $kendo-dropzone-note-text: $kendo-subtle-text !default;
     // Dropzpne inner
     .k-dropzone-inner {
-        padding: $kendo-dropzone-padding-y $kendo-dropzone-padding-x;
+        padding-block: $kendo-dropzone-padding-y;
+        padding-inline: $kendo-dropzone-padding-x;
         border-width: $kendo-dropzone-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -27531,7 +27638,8 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
         // Drop zone
         .k-dropzone,
         .k-upload-dropzone {
-            padding: $kendo-upload-dropzone-padding-y $kendo-upload-dropzone-padding-x;
+            padding-block: $kendo-upload-dropzone-padding-y;
+            padding-inline: $kendo-upload-dropzone-padding-x;
             border-width: 0;
             text-align: end;
             display: flex;
@@ -27626,7 +27734,8 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
             }
             .k-upload-pct {
-                margin: 0 $kendo-upload-icon-spacing;
+                margin-block: 0;
+                margin-inline: $kendo-upload-icon-spacing;
                 font-weight: normal;
                 vertical-align: middle;
             }
@@ -27916,8 +28025,10 @@ $kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba( black, .16 ) !default;
     // Appbar
     .k-appbar {
-        margin: $kendo-appbar-margin-y $kendo-appbar-margin-x;
-        padding: $kendo-appbar-padding-y $kendo-appbar-padding-x;
+        margin-block: $kendo-appbar-margin-y;
+        margin-inline: $kendo-appbar-margin-x;
+        padding-block: $kendo-appbar-padding-y;
+        padding-inline: $kendo-appbar-padding-x;
         border-width: $kendo-appbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -28269,19 +28380,23 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     // Sizes
     .k-fab-sm {
-        padding: $kendo-fab-sm-padding-y $kendo-fab-sm-padding-x;
+        padding-block: $kendo-fab-sm-padding-y;
+        padding-inline: $kendo-fab-sm-padding-x;
     }
     .k-fab-md {
-        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
+        padding-block: $kendo-fab-padding-y;
+        padding-inline: $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $kendo-fab-lg-padding-y $kendo-fab-lg-padding-x;
+        padding-block: $kendo-fab-lg-padding-y;
+        padding-inline: $kendo-fab-lg-padding-x;
     }
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
+        padding-block: $kendo-fab-items-padding-y;
+        padding-inline: $kendo-fab-items-padding-x;
         display: flex;
     }
@@ -28326,7 +28441,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
     .k-fab-item-text {
-        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        padding-block: $kendo-fab-item-text-padding-y;
+        padding-inline: $kendo-fab-item-text-padding-x;
         border-width: $kendo-fab-item-text-border-width;
         border-radius: $kendo-fab-item-text-border-radius;
         font-size: $kendo-fab-item-text-font-size;
@@ -28336,7 +28452,8 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     .k-fab-item-icon {
         width: $kendo-fab-item-icon-width;
         height: $kendo-fab-item-icon-height;
-        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        padding-block: $kendo-fab-item-icon-padding-y;
+        padding-inline: $kendo-fab-item-icon-padding-x;
         border-width: $kendo-fab-item-icon-border-width;
         border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;
@@ -28710,7 +28827,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // Actionsheet titlebar
     .k-actionsheet-titlebar {
-        padding: $kendo-actionsheet-titlebar-padding-y $kendo-actionsheet-titlebar-padding-x;
+        padding-block: $kendo-actionsheet-titlebar-padding-y;
+        padding-inline: $kendo-actionsheet-titlebar-padding-x;
         border-width: 0;
         border-bottom-width: if( $kendo-actionsheet-titlebar-border-width, $kendo-actionsheet-titlebar-border-width, null );
         border-style: solid;
@@ -28775,7 +28893,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     }
     .k-actionsheet-action {
         margin: 0;
-        padding: $kendo-actionsheet-item-padding-y $kendo-actionsheet-item-padding-x;
+        padding-block: $kendo-actionsheet-item-padding-y;
+        padding-inline: $kendo-actionsheet-item-padding-x;
         min-height: $kendo-actionsheet-item-min-height;
         box-sizing: border-box;
         color: inherit;
@@ -28870,16 +28989,19 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
         flex-flow: column nowrap;
         .k-actionsheet-titlebar {
-            padding: $kendo-adaptive-actionsheet-titlebar-padding-y $kendo-adaptive-actionsheet-titlebar-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-titlebar-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-titlebar-padding-x;
             border-bottom-width: $kendo-adaptive-actionsheet-titlebar-border-width;
         }
         .k-actionsheet-content {
-            padding: $kendo-adaptive-actionsheet-content-padding-y $kendo-adaptive-actionsheet-content-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-content-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-content-padding-x;
         }
         .k-actionsheet-footer {
-            padding: $kendo-adaptive-actionsheet-footer-padding-y $kendo-adaptive-actionsheet-footer-padding-x;
+            padding-block: $kendo-adaptive-actionsheet-footer-padding-y;
+            padding-inline: $kendo-adaptive-actionsheet-footer-padding-x;
         }
         .k-actionsheet-filter {
@@ -29174,7 +29296,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // Title bar
     .k-window-titlebar {
         @include border-top-radius( $kendo-window-border-radius );
-        padding: $kendo-window-titlebar-padding-y $kendo-window-titlebar-padding-x;
+        padding-block: $kendo-window-titlebar-padding-y;
+        padding-inline: $kendo-window-titlebar-padding-x;
         border-width: $kendo-window-titlebar-border-width;
         border-style: $kendo-window-titlebar-border-style;
         white-space: nowrap;
@@ -29190,8 +29313,10 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // 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: $kendo-window-title-font-size;
         line-height: $kendo-window-title-line-height;
         text-overflow: ellipsis;
@@ -29209,7 +29334,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // Actions
     .k-window-titlebar-actions {
-        margin: -5em 0;
+        margin-block: -5em;
+        margin-inline: 0;
         margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
         line-height: 1;
         display: flex;
@@ -29231,7 +29357,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // Content
     .k-window-content,
     .k-prompt-container {
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
         border-width: 0;
         border-color: inherit;
         color: inherit;
@@ -29266,7 +29393,8 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     // Buttons Layout
     .k-window-actions {
         @include border-bottom-radius( $kendo-window-border-radius );
-        padding: $kendo-window-buttongroup-padding-y $kendo-window-buttongroup-padding-x;
+        padding-block: $kendo-window-buttongroup-padding-y;
+        padding-inline: $kendo-window-buttongroup-padding-x;
         border-width: $kendo-window-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
@@ -29427,7 +29555,8 @@ $kendo-dialog-theme-colors: (
     // Buttons
     .k-dialog-actions {
         @include border-bottom-radius( $kendo-window-border-radius );
-        padding: $kendo-dialog-buttongroup-padding-y $kendo-dialog-buttongroup-padding-x;
+        padding-block: $kendo-dialog-buttongroup-padding-y;
+        padding-inline: $kendo-dialog-buttongroup-padding-x;
         border-width: $kendo-dialog-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
@@ -29674,7 +29803,8 @@ $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
         align-items: stretch;
     }
     .k-drawer-item {
-        padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+        padding-block: $kendo-drawer-item-padding-y;
+        padding-inline: $kendo-drawer-item-padding-x;
         outline: 0;
         color: inherit;
         font-size: $kendo-drawer-item-font-size;
@@ -29685,8 +29815,10 @@ $kendo-drawer-selected-hover-text: $kendo-selected-text !default;
         cursor: pointer;
         > .k-drawer-link {
-            margin: (-$kendo-drawer-item-padding-y) (-$kendo-drawer-item-padding-x);
-            padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+            margin-block: (-$kendo-drawer-item-padding-y);
+            margin-inline: (-$kendo-drawer-item-padding-x);
+            padding-block: $kendo-drawer-item-padding-y;
+            padding-inline: $kendo-drawer-item-padding-x;
             color: inherit;
             display: flex;
             flex-flow: row nowrap;
@@ -29963,7 +30095,8 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
     .k-notification {
         @include border-radius( $kendo-notification-border-radius );
-        padding: $kendo-notification-padding-y $kendo-notification-padding-x;
+        padding-block: $kendo-notification-padding-y;
+        padding-inline: $kendo-notification-padding-x;
         border-width: $kendo-notification-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -30206,7 +30339,8 @@ $kendo-card-callout-height: 1.3em !default;
     // Header
     .k-card-header {
-        padding: $kendo-card-header-padding-y $kendo-card-header-padding-x;
+        padding-block: $kendo-card-header-padding-y;
+        padding-inline: $kendo-card-header-padding-x;
         border-width: 0 0 $kendo-card-header-border-width;
         border-style: solid;
         outline: 0;
@@ -30228,7 +30362,8 @@ $kendo-card-callout-height: 1.3em !default;
     // Footer
     .k-card-footer {
-        padding: $kendo-card-footer-padding-y $kendo-card-footer-padding-x;
+        padding-block: $kendo-card-footer-padding-y;
+        padding-inline: $kendo-card-footer-padding-x;
         border-width: $kendo-card-footer-border-width 0 0;
         border-style: solid;
         outline: 0;
@@ -30238,7 +30373,8 @@ $kendo-card-callout-height: 1.3em !default;
     // Body
     .k-card-body {
-        padding: $kendo-card-body-padding-y $kendo-card-body-padding-x;
+        padding-block: $kendo-card-body-padding-y;
+        padding-inline: $kendo-card-body-padding-x;
         outline: 0;
         flex: 1 1 auto;
@@ -30341,7 +30477,8 @@ $kendo-card-callout-height: 1.3em !default;
     // Card actions
     .k-card-actions {
-        padding: $kendo-card-actions-padding-y $kendo-card-actions-padding-x;
+        padding-block: $kendo-card-actions-padding-y;
+        padding-inline: $kendo-card-actions-padding-x;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -30719,7 +30856,8 @@ $kendo-popover-callout-border: $kendo-popover-border !default;
     // Header
     .k-popover-header {
         @include border-top-radius( $kendo-popover-border-radius );
-        padding: $kendo-popover-header-padding-y $kendo-popover-header-padding-x;
+        padding-block: $kendo-popover-header-padding-y;
+        padding-inline: $kendo-popover-header-padding-x;
         border-width: 0 0 $kendo-popover-header-border-width;
         border-style: $kendo-popover-header-border-style;
         border-color: inherit;
@@ -30727,7 +30865,8 @@ $kendo-popover-callout-border: $kendo-popover-border !default;
     // Body
     .k-popover-body {
-        padding: $kendo-popover-body-padding-y $kendo-popover-body-padding-x;
+        padding-block: $kendo-popover-body-padding-y;
+        padding-inline: $kendo-popover-body-padding-x;
     }
     // Actions
@@ -30967,7 +31106,8 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     // Bottom Navigation
     .k-bottom-nav {
-        padding: $kendo-bottom-nav-padding-y $kendo-bottom-nav-padding-x;
+        padding-block: $kendo-bottom-nav-padding-y;
+        padding-inline: $kendo-bottom-nav-padding-x;
         width: 100%;
         border-width: 0;
         border-style: solid;
@@ -31003,7 +31143,8 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     // Items
     .k-bottom-nav-item {
-        padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
+        padding-block: $kendo-bottom-nav-item-padding-y;
+        padding-inline: $kendo-bottom-nav-item-padding-x;
         min-width: $kendo-bottom-nav-item-min-width;
         max-width: $kendo-bottom-nav-item-max-width;
         min-height: $kendo-bottom-nav-item-min-height;
@@ -31033,8 +31174,10 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
         }
         > .k-bottom-nav-link {
-            margin: (-$kendo-bottom-nav-item-padding-y) (-$kendo-bottom-nav-item-padding-x);
-            padding: $kendo-bottom-nav-item-padding-y $kendo-bottom-nav-item-padding-x;
+            margin-block: (-$kendo-bottom-nav-item-padding-y);
+            margin-inline: (-$kendo-bottom-nav-item-padding-x);
+            padding-block: $kendo-bottom-nav-item-padding-y;
+            padding-inline: $kendo-bottom-nav-item-padding-x;
             width: 100%;
             color: inherit;
             display: flex;
@@ -31222,8 +31365,10 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
     // Breadcrumb
     .k-breadcrumb {
-        margin: $kendo-breadcrumb-margin-y $kendo-breadcrumb-margin-x;
-        padding: $kendo-breadcrumb-padding-y $kendo-breadcrumb-padding-x;
+        margin-block: $kendo-breadcrumb-margin-y;
+        margin-inline: $kendo-breadcrumb-margin-x;
+        padding-block: $kendo-breadcrumb-padding-y;
+        padding-inline: $kendo-breadcrumb-padding-x;
         border-width: $kendo-breadcrumb-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -31287,7 +31432,8 @@ $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: $kendo-breadcrumb-link-padding-y $kendo-breadcrumb-link-padding-x;
+        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;
@@ -31311,7 +31457,8 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
     }
     .k-breadcrumb-icon-link {
-        padding: $kendo-breadcrumb-icon-link-padding-y $kendo-breadcrumb-icon-link-padding-x;
+        padding-block: $kendo-breadcrumb-icon-link-padding-y;
+        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
     }
@@ -31739,7 +31886,7 @@ $kendo-pager-sizes: (
     // Pager items
     .k-pager-nav {
-        @extend %base-pager-item;
+        @extend %base-pager-item !optional;
     }
@@ -31786,10 +31933,11 @@ $kendo-pager-sizes: (
     // Pager input
     .k-pager-input {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
         .k-textbox {
-            margin: 0 1ex;
+            margin-block: 0;
+            margin-inline: 1ex;
             width: $kendo-pager-input-width;
         }
     }
@@ -31797,7 +31945,7 @@ $kendo-pager-sizes: (
     // Pager sizes
     .k-pager-sizes {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
         .k-dropdown-list,
         > select {
@@ -31822,8 +31970,8 @@ $kendo-pager-sizes: (
     // 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;
@@ -31846,7 +31994,7 @@ $kendo-pager-sizes: (
             border-color: inherit;
             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;
@@ -32058,8 +32206,10 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
     // Base
     .k-stepper {
-        margin: $kendo-stepper-margin-y $kendo-stepper-margin-x;
-        padding: $kendo-stepper-padding-y $kendo-stepper-padding-x;
+        margin-block: $kendo-stepper-margin-y;
+        margin-inline: $kendo-stepper-margin-x;
+        padding-block: $kendo-stepper-padding-y;
+        padding-inline: $kendo-stepper-padding-x;
         border-width: $kendo-stepper-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -32162,7 +32312,8 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
         }
         .k-step-label:only-child {
             @include border-radius( k-math-div( ( $kendo-stepper-indicator-height + 2 * $kendo-stepper-indicator-border-width ), 2 ) );
-            padding: $kendo-stepper-label-padding-y $kendo-stepper-label-padding-x;
+            padding-block: $kendo-stepper-label-padding-y;
+            padding-inline: $kendo-stepper-label-padding-x;
             border-width: 0;
         }
         .k-step-label .k-step-text {
@@ -32289,7 +32440,8 @@ $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0m
             flex-direction: column;
             justify-content: space-between;
             margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
-            padding: $kendo-stepper-inline-content-padding-x $kendo-stepper-inline-content-padding-y;
+            padding-block: $kendo-stepper-inline-content-padding-x;
+            padding-inline: $kendo-stepper-inline-content-padding-y;
         }
     }
 }
@@ -32677,7 +32829,8 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
 @include exports("tabstrip/layout") {
     .k-tabstrip-wrapper {
-        padding: $kendo-tabstrip-wrapper-padding-y $kendo-tabstrip-wrapper-padding-x;
+        padding-block: $kendo-tabstrip-wrapper-padding-y;
+        padding-inline: $kendo-tabstrip-wrapper-padding-x;
         box-sizing: border-box;
         border-width: $kendo-tabstrip-wrapper-border-width;
         border-style: solid;
@@ -32745,7 +32898,8 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
         }
         .k-link {
-            padding: $kendo-tabstrip-item-padding-y $kendo-tabstrip-item-padding-x;
+            padding-block: $kendo-tabstrip-item-padding-y;
+            padding-inline: $kendo-tabstrip-item-padding-x;
             color: inherit;
             cursor: pointer;
             display: inline-flex;
@@ -32760,7 +32914,8 @@ $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
     .k-tabstrip-content,
     .k-tabstrip > .k-content {
         margin: 0 !important; // sass-lint:disable-line no-important
-        padding: $kendo-tabstrip-content-padding-y $kendo-tabstrip-content-padding-x;
+        padding-block: $kendo-tabstrip-content-padding-y;
+        padding-inline: $kendo-tabstrip-content-padding-x;
         box-sizing: border-box;
         border-width: $kendo-tabstrip-content-border-width;
         border-style: solid;
@@ -33215,7 +33370,8 @@ $kendo-wizard-step-focus-border: #656565 !default;
 // #region @import "@progress/kendo-theme-default/scss/wizard/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/wizard/_layout.scss
 @include exports("wizard/layout") {
     .k-wizard {
-        padding: $kendo-wizard-padding-y $kendo-wizard-padding-x;
+        padding-block: $kendo-wizard-padding-y;
+        padding-inline: $kendo-wizard-padding-x;
         border-width: $kendo-wizard-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -33456,7 +33612,8 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 6 ) !default;
     // Header
     .k-expander-header {
-        padding: $kendo-expander-header-padding-y $kendo-expander-header-padding-x;
+        padding-block: $kendo-expander-header-padding-y;
+        padding-inline: $kendo-expander-header-padding-x;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -33481,7 +33638,8 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 6 ) !default;
     // Expander content
     .k-expander-content {
-        padding: $kendo-expander-content-padding-y $kendo-expander-content-padding-x;
+        padding-block: $kendo-expander-content-padding-y;
+        padding-inline: $kendo-expander-content-padding-x;
     }
     // Multiple expanders
@@ -33711,7 +33869,8 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             display: block;
             > .k-link {
-                padding: $kendo-panelbar-header-padding-y $kendo-panelbar-header-padding-x;
+                padding-block: $kendo-panelbar-header-padding-y;
+                padding-inline: $kendo-panelbar-header-padding-x;
                 color: inherit;
                 background: none;
                 text-decoration: none;
@@ -33749,7 +33908,8 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             display: block;
             > .k-link {
-                padding: $kendo-panelbar-item-padding-y $kendo-panelbar-item-padding-x;
+                padding-block: $kendo-panelbar-item-padding-y;
+                padding-inline: $kendo-panelbar-item-padding-x;
                 color: inherit;
                 text-decoration: none;
                 display: flex;
@@ -34655,7 +34815,8 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
             .k-recur-items-wrap {
                 width: 100%;
-                margin: -1px 0;
+                margin-block: -1px;
+                margin-inline: 0;
             }
             .k-scheduler-recur-end-wrap {
@@ -34681,7 +34842,8 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
         }
         .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;
@@ -34716,7 +34878,8 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
         }
         .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;
@@ -34874,12 +35037,14 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
         .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;
         }
@@ -35757,7 +35922,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             overflow: visible;
             > .k-icon {
-                padding: $kendo-grid-cell-padding-y 0;
+                padding-block: $kendo-grid-cell-padding-y;
+                padding-inline: 0;
                 width: 100%;
                 height: 100%;
                 // That causes an issue with grid material. Commenting it for now
@@ -35974,8 +36140,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid-column-menu-standalone a.k-grid-filter {
         position: initial;
         display: inline-block;
-        margin: -4px 0;
-        padding: 4px 8px;
+        margin-block: -4px;
+        margin-inline: 0;
+        padding-block: 4px;
+        padding-inline: 8px;
     }
     // Filter row
@@ -36320,7 +36488,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-grid-norecords-template {
         box-sizing: border-box;
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 20em;
         height: 4em;
         border: 1px solid;
@@ -36356,16 +36525,19 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         .k-grid-#{$size} {
             .k-table-th {
-                padding: $_header-padding-y $_header-padding-x;
+                padding-block: $_header-padding-y;
+                padding-inline: $_header-padding-x;
             }
             td,
             .k-table-td {
-                padding: $_cell-padding-y $_cell-padding-x;
+                padding-block: $_cell-padding-y;
+                padding-inline: $_cell-padding-x;
             }
             .k-grouping-header {
-                padding: $_grouping-header-padding-y $_grouping-header-padding-x;
+                padding-block: $_grouping-header-padding-y;
+                padding-inline: $_grouping-header-padding-x;
                 gap: $_grouping-header-padding-y;
                 &::before {
@@ -36375,8 +36547,10 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             .k-grid-header {
                 .k-table-th > .k-link {
-                    margin: (-$_header-padding-y) (-$_header-padding-x);
-                    padding: $_header-padding-y $_header-padding-x;
+                    margin-block: (-$_header-padding-y);
+                    margin-inline: (-$_header-padding-x);
+                    padding-block: $_header-padding-y;
+                    padding-inline: $_header-padding-x;
                 }
                 .k-grid-filter,
@@ -36392,10 +36566,12 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             .k-table-th {
                 > .k-cell-inner {
-                    margin: (-$_header-padding-y) (-$_header-padding-x);
+                    margin-block: (-$_header-padding-y);
+                    margin-inline: (-$_header-padding-x);
                     > .k-link {
-                        padding: $_header-padding-y $_header-padding-x;
+                        padding-block: $_header-padding-y;
+                        padding-inline: $_header-padding-x;
                     }
                 }
             }
@@ -36413,7 +36589,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
                 padding: 0;
                 > .k-icon {
-                    padding: $_cell-padding-y 0;
+                    padding-block: $_cell-padding-y;
+                    padding-inline: 0;
                 }
             }
@@ -36423,7 +36600,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
             .k-command-cell,
             .k-grid-edit-row td,
             .k-grid-edit-row .k-table-td {
-                padding: $_edit-cell-padding-y $_edit-cell-padding-x;
+                padding-block: $_edit-cell-padding-y;
+                padding-inline: $_edit-cell-padding-x;
             }
@@ -36432,7 +36610,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
                 td,
                 .k-table-td,
                 .k-table-th {
-                    padding: $_filter-cell-padding-y $_filter-cell-padding-x;
+                    padding-block: $_filter-cell-padding-y;
+                    padding-inline: $_filter-cell-padding-x;
                 }
             }
@@ -36580,7 +36759,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         .k-item,
         .k-check-all-wrap {
-            padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
+            padding-block: $kendo-grid-column-menu-list-item-padding-y;
+            padding-inline: $kendo-grid-column-menu-list-item-padding-x;
             display: flex;
             flex-flow: row nowrap;
         }
@@ -36621,7 +36801,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
         box-sizing: border-box;
         &.k-popup {
-            padding: $kendo-grid-column-menu-popup-padding-y $kendo-grid-column-menu-popup-padding-x;
+            padding-block: $kendo-grid-column-menu-popup-padding-y;
+            padding-inline: $kendo-grid-column-menu-popup-padding-x;
             max-width: 100%;
         }
@@ -36659,7 +36840,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     .k-column-chooser-title,
     .k-column-list-item {
-        padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
+        padding-block: $kendo-grid-column-menu-list-item-padding-y;
+        padding-inline: $kendo-grid-column-menu-list-item-padding-x;
     }
     .k-column-list-item {
@@ -36677,11 +36859,13 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     }
     .k-columns-items-wrap {
-        padding: $kendo-grid-column-menu-items-wrap-padding-y $kendo-grid-column-menu-items-wrap-padding-x;
+        padding-block: $kendo-grid-column-menu-items-wrap-padding-y;
+        padding-inline: $kendo-grid-column-menu-items-wrap-padding-x;
     }
     .k-columnmenu-item {
-        padding: $kendo-grid-column-menu-item-padding-y $kendo-grid-column-menu-item-padding-x;
+        padding-block: $kendo-grid-column-menu-item-padding-y;
+        padding-inline: $kendo-grid-column-menu-item-padding-x;
         outline: 0;
         cursor: pointer;
@@ -36700,7 +36884,8 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
     }
     .k-column-menu-group-header {
-        padding: $kendo-grid-column-menu-group-header-padding-y $kendo-grid-column-menu-group-header-padding-x;
+        padding-block: $kendo-grid-column-menu-group-header-padding-y;
+        padding-inline: $kendo-grid-column-menu-group-header-padding-x;
         display: flex;
         flex: 0 0 auto;
         position: relative;
@@ -37283,7 +37468,8 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .
         &::after { display: none; }
     }
     .k-listview-content-padding-rectangle {
-        padding: $kendo-listview-padding-y $kendo-listview-padding-x;
+        padding-block: $kendo-listview-padding-y;
+        padding-inline: $kendo-listview-padding-x;
     }
     .k-listview-content-padding-square {
         padding: $kendo-listview-padding-y;
@@ -37300,11 +37486,14 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .
         flex-shrink: 0;
     }
     .k-listview-item-padding-rectangle {
-        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-rectangle .k-listview-link {
-        margin: (-$kendo-listview-item-padding-y) (-$kendo-listview-item-padding-x);
-        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
+        margin-block: (-$kendo-listview-item-padding-y);
+        margin-inline: (-$kendo-listview-item-padding-x);
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-square {
         padding: $kendo-listview-item-padding-y;
@@ -37643,7 +37832,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
         flex: 1;
         > .k-i-formula-fx {
-            padding: 0 $kendo-padding-md-y;
+            padding-block: 0;
+            padding-inline: $kendo-padding-md-y;
             box-sizing: content-box;
             border-width: 0 1px 0 0;
             border-style: solid;
@@ -37658,7 +37848,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
         }
         .k-spreadsheet-formula-input {
-            padding: $kendo-input-padding-y $kendo-input-padding-x;
+            padding-block: $kendo-input-padding-y;
+            padding-inline: $kendo-input-padding-x;
             line-height: $kendo-input-line-height;
             &.k-spreadsheet-array-formula {
@@ -37698,7 +37889,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
         min-width: 100px;
         .k-item {
-            padding: $kendo-list-md-item-padding-y $kendo-list-md-item-padding-x;
+            padding-block: $kendo-list-md-item-padding-y;
+            padding-inline: $kendo-list-md-item-padding-x;
         }
     }
     .k-syntax-func,
@@ -37709,7 +37901,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding: 0 3px;
+        padding-block: 0;
+        padding-inline: 3px;
         line-height: 20px;
         display: none;
         overflow: hidden;
@@ -38147,7 +38340,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
         }
         .k-details-summary,
         .k-columnmenu-item {
-            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-block: $kendo-menu-popup-item-padding-y;
+            padding-inline: $kendo-menu-popup-item-padding-x;
             display: flex;
             align-items: center;
             cursor: pointer;
@@ -38879,14 +39073,15 @@ $kendo-pivotgrid-remove-text: null !default;
     // Pivotgrid
     .k-pivotgrid {
-        padding: $kendo-pivotgrid-padding-y $kendo-pivotgrid-padding-x;
+        padding-block: $kendo-pivotgrid-padding-y;
+        padding-inline: $kendo-pivotgrid-padding-x;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
         box-sizing: content-box;
         font-size: $kendo-pivotgrid-font-size;
         font-family: $kendo-pivotgrid-font-family;
         line-height: $kendo-pivotgrid-line-height;
-        text-align: left;
+        text-align: start;
         vertical-align: top;
         display: grid;
         grid-template-columns: $kendo-pivotgrid-row-header-width auto;
@@ -38902,6 +39097,7 @@ $kendo-pivotgrid-remove-text: null !default;
             border-collapse: separate;
             border-spacing: 0;
             outline: 0;
+            text-align: inherit;
             empty-cells: show;
         }
@@ -38911,6 +39107,7 @@ $kendo-pivotgrid-remove-text: null !default;
         tr,
         td {
             border-color: inherit;
+            text-align: inherit;
         }
     }
@@ -39006,7 +39203,8 @@ $kendo-pivotgrid-remove-text: null !default;
     }
     .k-pivotgrid-cell {
-        padding: $kendo-pivotgrid-cell-padding-y $kendo-pivotgrid-cell-padding-x;
+        padding-block: $kendo-pivotgrid-cell-padding-y;
+        padding-inline: $kendo-pivotgrid-cell-padding-x;
         text-overflow: ellipsis;
         white-space: nowrap;
         vertical-align: top;
@@ -39028,7 +39226,8 @@ $kendo-pivotgrid-remove-text: null !default;
     // Column menus
     .k-column-menu .k-treeview {
-        padding: $kendo-pivotgrid-treeview-padding-y $kendo-pivotgrid-treeview-padding-x;
+        padding-block: $kendo-pivotgrid-treeview-padding-y;
+        padding-inline: $kendo-pivotgrid-treeview-padding-x;
         overflow: auto;
     }
@@ -39044,7 +39243,8 @@ $kendo-pivotgrid-remove-text: null !default;
     }
     .k-pivotgrid-configurator-panel {
-        padding: $kendo-pivotgrid-configurator-padding-y $kendo-pivotgrid-configurator-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-padding-x;
         border-width: $kendo-pivotgrid-configurator-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -39056,7 +39256,8 @@ $kendo-pivotgrid-remove-text: null !default;
     // Configurator Button
     .k-pivotgrid-configurator-button {
-        padding: $kendo-pivotgrid-configurator-button-padding-y $kendo-pivotgrid-configurator-button-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-button-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-button-padding-x;
         border-width: $kendo-pivotgrid-configurator-button-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -39109,7 +39310,8 @@ $kendo-pivotgrid-remove-text: null !default;
     // Panel Content
     .k-pivotgrid-configurator-header {
-        padding: $kendo-pivotgrid-configurator-header-padding-y $kendo-pivotgrid-configurator-header-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-header-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-header-padding-x;
         font-size: $kendo-pivotgrid-configurator-header-font-size;
         font-weight: $kendo-pivotgrid-configurator-header-font-weight;
         display: flex;
@@ -39123,7 +39325,8 @@ $kendo-pivotgrid-remove-text: null !default;
     }
     .k-pivotgrid-configurator-content {
-        padding: $kendo-pivotgrid-configurator-content-padding-y $kendo-pivotgrid-configurator-content-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-content-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-content-padding-x;
         flex: 1 1 auto;
         overflow: auto;
@@ -39151,7 +39354,8 @@ $kendo-pivotgrid-remove-text: null !default;
         // Values
         .k-value-fields {
-            margin: $kendo-pivotgrid-configurator-fields-margin-y $kendo-pivotgrid-configurator-fields-margin-x;
+            margin-block: $kendo-pivotgrid-configurator-fields-margin-y;
+            margin-inline: $kendo-pivotgrid-configurator-fields-margin-x;
             display: flex;
             flex-direction: column;
             gap: k-math-div( $kendo-pivotgrid-spacer, 2 );
@@ -39176,7 +39380,8 @@ $kendo-pivotgrid-remove-text: null !default;
         }
         .k-treeview {
-            padding: $kendo-pivotgrid-treeview-padding-y $kendo-pivotgrid-treeview-padding-x;
+            padding-block: $kendo-pivotgrid-treeview-padding-y;
+            padding-inline: $kendo-pivotgrid-treeview-padding-x;
             overflow: auto;
         }
     }
@@ -39184,7 +39389,8 @@ $kendo-pivotgrid-remove-text: null !default;
     // Calculated field
     .k-calculated-field {
-        padding: $kendo-pivotgrid-calculated-field-padding-y $kendo-pivotgrid-calculated-field-padding-x;
+        padding-block: $kendo-pivotgrid-calculated-field-padding-y;
+        padding-inline: $kendo-pivotgrid-calculated-field-padding-x;
         border-width: $kendo-pivotgrid-calculated-field-border-width;
         border-radius: $kendo-pivotgrid-calculated-field-border-radius;
         border-style: solid;
@@ -39824,7 +40030,8 @@ $kendo-treelist-footer-row-border-width: 1px !default;
         }
         .k-status {
-            padding: .4em .6em;
+            padding-block: .4em;
+            padding-inline: .6em;
             line-height: 1.6em;
             // TODO: see what this does and use a better name
@@ -39912,7 +40119,8 @@ $kendo-treelist-footer-row-border-width: 1px !default;
         border-right: 1px solid;
         height: 1em;
         vertical-align: top;
-        margin: 0 .5em;
+        margin-block: 0;
+        margin-inline: .5em;
     }
 }
@@ -40060,7 +40268,8 @@ $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem rgba( $kendo-color-primary, .25
         .k-filter-toolbar {
             display: inline-flex;
             position: relative;
-            padding: $kendo-filter-padding-y 0;
+            padding-block: $kendo-filter-padding-y;
+            padding-inline: 0;
             &::before {
                 content: "";
@@ -40349,7 +40558,8 @@ $kendo-file-manager-preview-icon-border: null !default;
     // Navigation
     .k-filemanager-navigation {
-        padding: $kendo-file-manager-navigation-padding-y $kendo-file-manager-navigation-padding-x;
+        padding-block: $kendo-file-manager-navigation-padding-y;
+        padding-inline: $kendo-file-manager-navigation-padding-x;
         width: $kendo-file-manager-navigation-width;
         border-width: 0;
         border-right-width: $kendo-file-manager-navigation-border-width;
@@ -40383,7 +40593,8 @@ $kendo-file-manager-preview-icon-border: null !default;
     .k-filemanager-breadcrumb {
         border-width: 0;
         border-bottom-width: $kendo-file-manager-breadcrumb-border-width;
-        padding: $kendo-file-manager-breadcrumb-padding-y $kendo-file-manager-breadcrumb-padding-x;
+        padding-block: $kendo-file-manager-breadcrumb-padding-y;
+        padding-inline: $kendo-file-manager-breadcrumb-padding-x;
         flex-shrink: 0;
     }
@@ -40395,7 +40606,8 @@ $kendo-file-manager-preview-icon-border: null !default;
         // Listview item
         .k-listview-item {
-            padding: $kendo-file-manager-listview-item-padding-y $kendo-file-manager-listview-item-padding-x;
+            padding-block: $kendo-file-manager-listview-item-padding-y;
+            padding-inline: $kendo-file-manager-listview-item-padding-x;
             width: $kendo-file-manager-listview-item-width;
             height: $kendo-file-manager-listview-item-height;
             text-align: center;
@@ -40805,7 +41017,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     // TaskBoard
     .k-taskboard {
-        padding: $kendo-taskboard-padding-y $kendo-taskboard-padding-x;
+        padding-block: $kendo-taskboard-padding-y;
+        padding-inline: $kendo-taskboard-padding-x;
         box-sizing: border-box;
         font-size: $kendo-taskboard-font-size;
         font-family: $kendo-taskboard-font-family;
@@ -40823,7 +41036,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     // Toolbar
     .k-taskboard-toolbar {
-        padding: $kendo-taskboard-toolbar-padding-y $kendo-taskboard-toolbar-padding-x;
+        padding-block: $kendo-taskboard-toolbar-padding-y;
+        padding-inline: $kendo-taskboard-toolbar-padding-x;
         border-width: 0;
         box-shadow: none;
         background: none;
@@ -40861,7 +41075,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     }
     .k-taskboard-column-header {
-        padding: $kendo-taskboard-column-header-padding-y $kendo-taskboard-column-header-padding-x;
+        padding-block: $kendo-taskboard-column-header-padding-y;
+        padding-inline: $kendo-taskboard-column-header-padding-x;
         font-weight: $kendo-taskboard-column-header-font-weight;
         display: flex;
         flex-direction: row;
@@ -40878,14 +41093,16 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     .k-taskboard-column-cards-container {
         margin-bottom: $kendo-taskboard-column-container-spacing-y;
-        padding: $kendo-taskboard-column-container-padding-y $kendo-taskboard-column-container-padding-x;
+        padding-block: $kendo-taskboard-column-container-padding-y;
+        padding-inline: $kendo-taskboard-column-container-padding-x;
         outline: none;
         overflow: auto;
         flex: 1 1 auto;
     }
     .k-taskboard-column-cards {
-        padding: $kendo-taskboard-column-cards-padding-y $kendo-taskboard-column-cards-padding-x;
+        padding-block: $kendo-taskboard-column-cards-padding-y;
+        padding-inline: $kendo-taskboard-column-cards-padding-x;
         min-height: 100%;
         display: flex;
         flex-direction: column;
@@ -40911,7 +41128,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     // Preview/Edit Pane
     .k-taskboard-pane {
-        padding: $kendo-taskboard-pane-padding-y $kendo-taskboard-pane-padding-x;
+        padding-block: $kendo-taskboard-pane-padding-y;
+        padding-inline: $kendo-taskboard-pane-padding-x;
         width: $kendo-taskboard-pane-width;
         border-width: $kendo-taskboard-pane-border-width;
         border-style: solid;
@@ -40926,7 +41144,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     }
     .k-taskboard-pane-header {
-        padding: $kendo-taskboard-pane-header-padding-y $kendo-taskboard-pane-header-padding-x;
+        padding-block: $kendo-taskboard-pane-header-padding-y;
+        padding-inline: $kendo-taskboard-pane-header-padding-x;
         font-weight: $kendo-taskboard-pane-header-font-weight;
         display: flex;
         flex-direction: row;
@@ -40944,13 +41163,15 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
     }
     .k-taskboard-pane-content {
-        padding: $kendo-taskboard-pane-content-padding-y $kendo-taskboard-pane-content-padding-x;
+        padding-block: $kendo-taskboard-pane-content-padding-y;
+        padding-inline: $kendo-taskboard-pane-content-padding-x;
         overflow: auto;
         flex: 1 1 auto;
     }
     .k-taskboard-pane-actions {
-        padding: $kendo-taskboard-pane-actions-padding-y $kendo-taskboard-pane-actions-padding-x;
+        padding-block: $kendo-taskboard-pane-actions-padding-y;
+        padding-inline: $kendo-taskboard-pane-actions-padding-x;
     }
     .k-taskboard-pane-start {
@@ -40970,7 +41191,8 @@ $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
         .k-card-header
         .k-card-body,
         .k-card-footer {
-            padding: $kendo-taskboard-card-padding-y $kendo-taskboard-card-padding-x;
+            padding-block: $kendo-taskboard-card-padding-y;
+            padding-inline: $kendo-taskboard-card-padding-x;
         }
         .k-card-header {
@@ -41240,7 +41462,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
     // 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;
@@ -41438,7 +41661,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
         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;
@@ -41446,7 +41670,10 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
         // Give selected cells a blue overlay
@@ -41466,8 +41693,10 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
     .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;
     }
@@ -41622,7 +41851,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
             height: 390px;
             max-height: 50vh;
             margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
-            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;
         }
@@ -41630,7 +41860,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
         .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;
@@ -41749,7 +41980,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
             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;
             }
         }
@@ -41813,7 +42045,8 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }
@@ -42045,8 +42278,10 @@ $kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default;
     // Image Editor
     .k-imageeditor {
-        margin: $kendo-image-editor-margin-y $kendo-image-editor-margin-x;
-        padding: $kendo-image-editor-padding-y $kendo-image-editor-padding-x;
+        margin-block: $kendo-image-editor-margin-y;
+        margin-inline: $kendo-image-editor-margin-x;
+        padding-block: $kendo-image-editor-padding-y;
+        padding-inline: $kendo-image-editor-padding-x;
         border-width: $kendo-image-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -42099,7 +42334,8 @@ $kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default;
     // Action Pane
     .k-imageeditor-action-pane {
-        padding: $kendo-image-editor-action-pane-padding-y $kendo-image-editor-action-pane-padding-x;
+        padding-block: $kendo-image-editor-action-pane-padding-y;
+        padding-inline: $kendo-image-editor-action-pane-padding-x;
         width: $kendo-image-editor-action-pane-width;
         border-width: 0;
         border-left-width: $kendo-image-editor-content-border-width;
@@ -42134,7 +42370,8 @@ $kendo-image-editor-crop-overlay-bg: rgba( black, .3 ) !default;
         position: absolute;
         .k-resize-handle {
-            margin: $kendo-image-editor-resize-handle-margin-y $kendo-image-editor-resize-handle-margin-x;
+            margin-block: $kendo-image-editor-resize-handle-margin-y;
+            margin-inline: $kendo-image-editor-resize-handle-margin-x;
             border-style: solid;
             border-width: $kendo-image-editor-resize-handle-border-width;
         }
@@ -42476,7 +42713,8 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
             }
             .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-vertical-border-width;
                     white-space: nowrap;
                 }
@@ -42503,7 +42741,8 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
                 }
             }
             .k-task-content {
-                padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
+                padding-block: $kendo-gantt-task-padding-y;
+                padding-inline: $kendo-gantt-task-padding-x;
                 display: block;
                 line-height: normal;
                 flex: 1 1 auto;
@@ -42696,7 +42935,8 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
             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-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
             white-space: nowrap;
         }
@@ -42784,8 +43024,10 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
     }
     .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;
@@ -42852,7 +43094,8 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
     // Milestone
     .k-milestone-wrap {
-        margin: 0 -2em;
+        margin-block: 0;
+        margin-inline: -2em;
     }
     .k-task-milestone {
         width: 1em;
@@ -42959,7 +43202,8 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         white-space: nowrap;
     }
     .k-task-template {
-        padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
+        padding-block: $kendo-gantt-task-padding-y;
+        padding-inline: $kendo-gantt-task-padding-x;
         line-height: normal;
         flex: 1;
         overflow: hidden;
@@ -42989,14 +43233,16 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         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 {
@@ -43202,14 +43448,11 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         }
         .k-task-wrap:not(.k-milestone-wrap) {
-            margin: 0 -26px;
+            margin-block: 0;
+            margin-inline: -26px;
         }
         .k-gantt-timeline {
-            .k-gantt-tasks tbody {
-                text-align: left;
-            }
             .k-header {
                 border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
@@ -43229,7 +43472,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         }
         .k-task-content {
-            text-align: right;
+            text-align: end;
         }
         .k-task-complete {
@@ -43746,7 +43989,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         td,
         th {
-            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-x;
+            padding-block: $kendo-scheduler-cell-padding-y;
+            padding-inline: $kendo-scheduler-cell-padding-x;
             height: $kendo-scheduler-cell-height;
             overflow: hidden;
             white-space: nowrap;
@@ -43840,7 +44084,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         .k-scheduler-cell {
             display: flex;
             flex: 1 1 100%;
-            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-y;
+            padding-block: $kendo-scheduler-cell-padding-y;
+            padding-inline: $kendo-scheduler-cell-padding-y;
             min-height: 1.5em;
             overflow: hidden;
             white-space: nowrap;
@@ -44042,7 +44287,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         th {
             border-width: 0 1px 1px 0;
-            text-align: right;
+            text-align: end;
         }
         .k-slot-cell,
@@ -44089,7 +44334,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         border-width: 0;
         border-style: solid;
         border-radius: $kendo-scheduler-event-border-radius;
-        text-align: left;
+        text-align: start;
         outline: 0;
         cursor: default;
         position: absolute;
@@ -44104,7 +44349,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         // Template
         .k-event-template {
             line-height: $kendo-scheduler-event-line-height;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             // TODO: incompatible units
             // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
         }
@@ -44392,7 +44638,7 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         }
         .k-scheduler-table td {
             height: 80px;
-            text-align: right;
+            text-align: end;
         }
         .k-scheduler-body .k-scheduler-cell {
             min-height: 80px;
@@ -44507,7 +44753,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
     // Year view
     .k-scheduler-yearview {
         .k-scheduler-body {
-            padding: $kendo-scheduler-yearview-padding-y $kendo-scheduler-yearview-padding-x;
+            padding-block: $kendo-scheduler-yearview-padding-y;
+            padding-inline: $kendo-scheduler-yearview-padding-x;
             justify-content: center;
         }
@@ -44550,7 +44797,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
 @include exports("scheduler-tooltip/layout") {
     .k-scheduler-tooltip {
-        padding: $kendo-scheduler-tooltip-padding-y $kendo-scheduler-tooltip-padding-x;
+        padding-block: $kendo-scheduler-tooltip-padding-y;
+        padding-inline: $kendo-scheduler-tooltip-padding-x;
         border-width: $kendo-scheduler-tooltip-border-width;
         color: inherit;
@@ -44579,7 +44827,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         }
         .k-tooltip-event {
-            padding: $kendo-scheduler-tooltip-event-padding-y $kendo-scheduler-tooltip-event-padding-x;
+            padding-block: $kendo-scheduler-tooltip-event-padding-y;
+            padding-inline: $kendo-scheduler-tooltip-event-padding-x;
             border-radius: $kendo-scheduler-tooltip-event-border-radius;
             box-sizing: border-box;
             display: flex;
@@ -44683,7 +44932,6 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         }
         .k-event {
-            text-align: right;
             padding-right: 0;
             padding-left: $kendo-padding-md-x;
@@ -44808,7 +45056,8 @@ $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;
         .k-event-template {
             // Angular fix for stronger selector and smaller padding
             & {
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
                 font-size: $kendo-font-size-sm;
             }
         }
@@ -45236,7 +45485,8 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             scroll-behavior: smooth;
         }
         .k-message-list-content {
-            padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-x;
+            padding-block: $kendo-chat-message-list-padding-y;
+            padding-inline: $kendo-chat-message-list-padding-x;
             width: 100%;
             box-sizing: border-box;
             position: relative;
@@ -45263,7 +45513,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         }
         .k-message-group:not(.k-alt) {
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             .k-message-time {
                 margin-left: $kendo-chat-item-spacing-x;
@@ -45285,7 +45535,7 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         .k-message-group.k-alt {
             align-self: flex-end;
             align-items: flex-end;
-            text-align: right;
+            text-align: end;
             .k-message-time {
                 margin-right: $kendo-chat-item-spacing-x;
@@ -45343,7 +45593,8 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         // Bubble
         .k-bubble {
             @include border-radius( $kendo-chat-bubble-border-radius );
-            padding: $kendo-chat-bubble-padding-y $kendo-chat-bubble-padding-x;
+            padding-block: $kendo-chat-bubble-padding-y;
+            padding-inline: $kendo-chat-bubble-padding-x;
             border-width: 1px;
             border-style: solid;
             line-height: $kendo-chat-bubble-line-height;
@@ -45431,7 +45682,8 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         @include border-radius( 100px );
         margin-right: $kendo-chat-quick-reply-spacing;
         margin-bottom: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
-        padding: $kendo-chat-quick-reply-padding-y $kendo-chat-quick-reply-padding-x;
+        padding-block: $kendo-chat-quick-reply-padding-y;
+        padding-inline: $kendo-chat-quick-reply-padding-x;
         border-width: 1px;
         border-style: solid;
         line-height: $kendo-chat-quick-reply-line-height;
@@ -45622,7 +45874,8 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
     .k-chat-toolbar,
     .k-chat .k-toolbar-box {
-        padding: $kendo-chat-toolbar-padding-y $kendo-chat-toolbar-padding-x;
+        padding-block: $kendo-chat-toolbar-padding-y;
+        padding-inline: $kendo-chat-toolbar-padding-x;
         width: 100%;
         border-width: 1px 0 0;
         box-sizing: border-box;
@@ -45689,8 +45942,6 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
         // Text align
         .k-message-group:not(.k-alt) {
-            text-align: right;
             .k-message-time {
                 margin-left: 0;
                 margin-right: $kendo-chat-item-spacing-x;
@@ -45703,8 +45954,6 @@ $kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
             }
         }
         .k-message-group.k-alt {
-            text-align: left;
             .k-message-time {
                 margin-right: 0;
                 margin-left: $kendo-chat-item-spacing-x;
@@ -45934,7 +46183,8 @@ $kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgb
     // Title bar
     .k-mediaplayer-titlebar {
-        padding: $kendo-media-player-titlebar-padding-y $kendo-media-player-titlebar-padding-x;
+        padding-block: $kendo-media-player-titlebar-padding-y;
+        padding-inline: $kendo-media-player-titlebar-padding-x;
         position: absolute;
         z-index: 2;
         top: 0;
@@ -46165,7 +46415,8 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
         .k-timeline-flag {
             display: inline-block;
             text-align: center;
-            padding: $kendo-timeline-flag-padding-y $kendo-timeline-flag-padding-x;
+            padding-block: $kendo-timeline-flag-padding-y;
+            padding-inline: $kendo-timeline-flag-padding-x;
             border-radius: $kendo-border-radius;
             line-height: $kendo-timeline-flag-line-height;
             min-width: $kendo-timeline-flag-min-width;
@@ -46245,8 +46496,10 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
     .k-timeline-vertical,
     .k-timeline-horizontal {
-        padding: 0 $kendo-timeline-spacing-x;
-        margin: $kendo-timeline-spacing-y 0;
+        padding-block: 0;
+        padding-inline: $kendo-timeline-spacing-x;
+        margin-block: $kendo-timeline-spacing-y;
+        margin-inline: 0;
         width: 100%;
         position: relative;
         border: 0;
@@ -46295,13 +46548,14 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
             padding-right: $kendo-timeline-items-padding;
             margin-top: $kendo-timeline-track-event-offset;
             transform: translate(-100%, -50%);
-            text-align: right;
+            text-align: end;
         }
         .k-timeline-event {
             display: flex;
             align-items: flex-start;
-            padding: $kendo-timeline-spacing-y 0;
+            padding-block: $kendo-timeline-spacing-y;
+            padding-inline: 0;
         }
         .k-timeline-card {
@@ -46331,7 +46585,8 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
             }
             .k-event-collapse {
-                margin: -$kendo-icon-spacing 0;
+                margin-block: -$kendo-icon-spacing;
+                margin-inline: 0;
                 transform: rotate(90deg);
                 transition: transform .2s ease-in-out;
             }
@@ -46377,7 +46632,7 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
                     flex-direction: row-reverse;
                     .k-timeline-date-wrap {
-                        text-align: left;
+                        text-align: start;
                         padding-right: 0;
                         padding-left: $kendo-timeline-items-padding;
                     }
@@ -46477,7 +46732,8 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
             .k-timeline-track {
                 overflow: hidden;
-                margin: 0 $kendo-timeline-track-arrow-width;
+                margin-block: 0;
+                margin-inline: $kendo-timeline-track-arrow-width;
                 position: relative;
                 z-index: 2;
@@ -46531,8 +46787,10 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
     }
     .k-timeline-mobile {
-        padding: 0 $kendo-timeline-mobile-spacing-x;
-        margin: $kendo-timeline-mobile-spacing-y 0;
+        padding-block: 0;
+        padding-inline: $kendo-timeline-mobile-spacing-x;
+        margin-block: $kendo-timeline-mobile-spacing-y;
+        margin-inline: 0;
         .k-timeline-flag {
             max-width: $kendo-timeline-mobile-flag-max-width;
@@ -46804,7 +47062,8 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
         .k-page {
             position: relative;
-            margin: $kendo-pdf-viewer-page-spacing auto;
+            margin-block: $kendo-pdf-viewer-page-spacing;
+            margin-inline: auto;
             canvas {
                 direction: ltr;
@@ -46864,7 +47123,8 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
     }
     .k-search-panel {
-        padding: $kendo-pdf-viewer-search-dialog-padding-y $kendo-pdf-viewer-search-dialog-padding-x;
+        padding-block: $kendo-pdf-viewer-search-dialog-padding-y;
+        padding-inline: $kendo-pdf-viewer-search-dialog-padding-x;
         display: flex;
         gap: $kendo-pdf-viewer-search-dialog-spacing;
         flex-flow: row nowrap;
@@ -47046,7 +47306,7 @@ $kendo-pdf-viewer-icon-size: calc( #{$kendo-icon-size} * 3 ) !default;
     .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 {
@@ -47736,7 +47996,8 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
         @include border-radius( $kendo-border-radius-md );
         font-size: $kendo-chart-tooltip-font-size;
         line-height: $kendo-line-height-md;
-        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        padding-block: $kendo-tooltip-padding-y;
+        padding-inline: $kendo-tooltip-padding-x;
     }
     .k-chart-tooltip th {
@@ -47747,8 +48008,9 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        text-align: start;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         line-height: $kendo-line-height-md;
         vertical-align: middle;
     }
@@ -47954,7 +48216,8 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
         // Title
         .k-treemap-title {
-            padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+            padding-block: $kendo-padding-sm-y;
+            padding-inline: $kendo-padding-sm-x;
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -47963,7 +48226,8 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding: $kendo-padding-sm-x $kendo-padding-sm-y;
+            padding-block: $kendo-padding-sm-x;
+            padding-inline: $kendo-padding-sm-y;
             width: $kendo-line-height-em;
             white-space: nowrap;
             overflow: hidden;
@@ -48012,7 +48276,7 @@ $kendo-treemap-line-height: $kendo-line-height-md !default;
 @include exports("dataviz/gauge/layout") {
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
@@ -48403,7 +48667,8 @@ $kendo-map-marker-fill: $kendo-color-primary !default;
         // Attribution
         .k-attribution {
-            padding: $kendo-map-attribution-padding-y $kendo-map-attribution-padding-x;
+            padding-block: $kendo-map-attribution-padding-y;
+            padding-inline: $kendo-map-attribution-padding-x;
             border-width: 0;
             font-size: $kendo-map-attribution-font-size;
             z-index: 1000;
@@ -48632,7 +48897,8 @@ $kendo-orgchart-line-v-height: 25px !default;
     // OrgChart
     .k-orgchart {
         width: 100%;
-        padding: $kendo-orgchart-padding-x $kendo-orgchart-padding-y;
+        padding-block: $kendo-orgchart-padding-x;
+        padding-inline: $kendo-orgchart-padding-y;
         box-sizing: border-box;
         font-size: $kendo-orgchart-font-size;
         font-family: $kendo-orgchart-font-family;
@@ -48647,7 +48913,8 @@ $kendo-orgchart-line-v-height: 25px !default;
     }
     .k-orgchart-container {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 100%;
         height: 100%;
         position: relative;
@@ -48668,7 +48935,8 @@ $kendo-orgchart-line-v-height: 25px !default;
     .k-orgchart-node-group-container {
         @include border-radius( $kendo-orgchart-node-group-border-radius );
-        padding: $kendo-orgchart-node-group-padding-y $kendo-orgchart-node-group-padding-x;
+        padding-block: $kendo-orgchart-node-group-padding-y;
+        padding-inline: $kendo-orgchart-node-group-padding-x;
         border-width: $kendo-orgchart-node-group-border-width;
         border-style: solid;
         outline: 0;
@@ -48722,7 +48990,8 @@ $kendo-orgchart-line-v-height: 25px !default;
     }
     .k-orgchart-line-v {
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: $kendo-orgchart-line-size;
         height: $kendo-orgchart-line-v-height;
     }