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

@progress/kendo-theme-classic 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 +580 -326
package/dist/all.scss +587 -321
package/dist/meta/variables.json +9 -1
package/lib/swatches/classic-green-dark.json +1 -1
package/lib/swatches/classic-green.json +1 -1
package/lib/swatches/classic-lavender-dark.json +1 -1
package/lib/swatches/classic-lavender.json +1 -1
package/lib/swatches/classic-main-dark.json +1 -1
package/lib/swatches/classic-main.json +1 -1
package/lib/swatches/classic-metro-dark.json +1 -1
package/lib/swatches/classic-metro.json +1 -1
package/lib/swatches/classic-moonlight.json +1 -1
package/lib/swatches/classic-opal-dark.json +1 -1
package/lib/swatches/classic-opal.json +1 -1
package/lib/swatches/classic-silver-dark.json +1 -1
package/lib/swatches/classic-silver.json +1 -1
package/lib/swatches/classic-uniform.json +1 -1
package/package.json +5 -5

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
@@ -5451,16 +5456,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
@@ -5569,7 +5574,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;
     }
@@ -5583,7 +5589,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
@@ -6303,7 +6310,10 @@ $kendo-utils: (
         capitalize: capitalize,
         normal-case: none
     ),
-    "text-overflow": (),
+    "text-overflow": (
+        clip: clip,
+        ellipsis: ellipsis
+    ),
     "text-indent": (),
     "vertical-align": (),
     "white-space": (
@@ -7746,6 +7756,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.
@@ -7773,7 +7810,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
@@ -7827,16 +7863,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();
 }
@@ -9966,7 +9998,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;
@@ -10056,7 +10089,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;
@@ -10776,7 +10810,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;
@@ -11010,7 +11045,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;
@@ -11051,7 +11087,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;
@@ -11086,13 +11123,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;
@@ -11111,7 +11149,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;
@@ -11178,19 +11217,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;
             }
@@ -11391,7 +11433,8 @@ $kendo-listgroup-item-border-width: 1px !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;
@@ -11403,8 +11446,10 @@ $kendo-listgroup-item-border-width: 1px !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;
@@ -11447,8 +11492,10 @@ $kendo-listgroup-item-border-width: 1px !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;
@@ -11677,7 +11724,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;
@@ -11700,7 +11748,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
@@ -12027,7 +12076,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;
@@ -12057,7 +12106,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;
@@ -12151,7 +12201,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;
@@ -12244,7 +12295,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 {
@@ -12264,7 +12316,6 @@ $kendo-table-selected-border: null !default;
     [dir="rtl"] {
         &.k-table,
         .k-table {
-            text-align: right;
             .k-table-th,
             .k-table-td {
@@ -12769,7 +12820,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;
@@ -13295,7 +13347,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;
@@ -13326,8 +13379,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;
@@ -13374,7 +13429,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;
@@ -13418,7 +13474,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;
         }
@@ -14723,7 +14780,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;
         }
@@ -14929,7 +14987,7 @@ $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
     .k-button {
         &::before {
-            @extend .k-button-overlay;
+            @extend .k-button-overlay !optional;
         }
         // Hovered state
@@ -15543,7 +15601,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;
@@ -15587,7 +15646,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;
@@ -15605,7 +15665,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;
         }
@@ -15615,7 +15676,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;
@@ -15627,7 +15689,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;
@@ -15656,7 +15719,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;
@@ -15681,7 +15745,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;
         }
@@ -15701,7 +15766,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;
         }
@@ -15721,7 +15787,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;
         }
@@ -15741,12 +15808,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 {
@@ -16088,7 +16157,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;
@@ -16211,7 +16281,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
@@ -16245,7 +16316,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;
@@ -16299,7 +16371,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;
@@ -16490,7 +16563,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;
@@ -16522,7 +16596,7 @@ $kendo-actions-gradient: null !default;
     .k-edit-buttons,
     .k-action-buttons,
     .k-columnmenu-actions {
-        @extend .k-actions;
+        @extend .k-actions !optional;
     }
     // Actions align
@@ -17111,7 +17185,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;
         }
@@ -17126,7 +17201,7 @@ $kendo-form-sizes: (
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -17247,7 +17322,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;
@@ -17259,12 +17334,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;
@@ -17325,7 +17400,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;
     }
@@ -17456,7 +17531,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;
@@ -17788,7 +17864,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] {
@@ -17811,7 +17888,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,
@@ -17829,7 +17907,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;
@@ -18059,7 +18138,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
             }
@@ -18138,13 +18218,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,
@@ -18170,7 +18252,8 @@ $kendo-form-sizes: (
             }
         }
         select.k-picker-#{$size} {
-            padding: $_padding-y $_padding-x;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
         }
     }
@@ -18905,21 +18988,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 {
@@ -19624,7 +19711,7 @@ $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
     .k-circular-progressbar {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         position: relative;
     }
@@ -20034,7 +20121,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;
@@ -20509,12 +20597,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
@@ -20549,7 +20637,7 @@ $kendo-slider-disabled-opacity: null !default;
         // labels
         .k-label {
-            text-align: left;
+            text-align: start;
             left: 120%;
             top: 50%;
             transform: translateY(-50%);
@@ -21040,7 +21128,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;
@@ -21056,13 +21145,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;
     }
@@ -21080,7 +21170,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;
@@ -21100,7 +21191,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%;
@@ -21118,7 +21208,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;
@@ -21132,7 +21223,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;
@@ -21157,7 +21249,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;
     }
@@ -21166,7 +21259,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});
@@ -21233,7 +21327,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;
         }
     }
@@ -21320,7 +21414,7 @@ $kendo-calendar-sizes: (
     // Alias
     .k-link {
-        @extend .k-calendar-cell-inner;
+        @extend .k-calendar-cell-inner !optional;
     }
 }
@@ -21337,7 +21431,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;
@@ -21366,7 +21461,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;
         }
@@ -21422,7 +21518,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;
@@ -21512,11 +21609,6 @@ $kendo-calendar-sizes: (
             @include hide-scrollbar("left");
         }
-        tbody th,
-        .k-calendar-tbody .k-calendar-th {
-            text-align: right;
-        }
     }
 }
@@ -21878,7 +21970,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;
@@ -21887,7 +21980,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;
         }
@@ -22041,7 +22135,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;
     }
@@ -22083,7 +22178,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;
             }
         }
     }
@@ -22654,7 +22750,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;
@@ -22835,7 +22932,6 @@ $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer,
 }
 // #endregion
 // #endregion
@@ -23039,7 +23135,8 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !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 {
@@ -23146,7 +23243,7 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 }
@@ -23428,7 +23525,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,
@@ -23541,7 +23639,7 @@ $kendo-daterange-picker-input-width: 10em !default;
     // Angular specific
     kendo-daterange {
-        // @extend .k-daterangepicker;
+        // @extend .k-daterangepicker !optional;
     }
@@ -23556,7 +23654,7 @@ $kendo-daterange-picker-input-width: 10em !default;
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 }
@@ -24074,7 +24172,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;
@@ -24153,7 +24252,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;
             }
         }
     }
@@ -24275,7 +24375,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;
         }
     }
@@ -24431,12 +24532,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;
@@ -24476,7 +24579,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,
@@ -25208,7 +25312,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;
@@ -25370,7 +25475,8 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba( black, .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;
@@ -25465,7 +25571,8 @@ $kendo-upload-focus-shadow: 0 0 0 2px rgba( black, .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;
             }
@@ -25755,8 +25862,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;
@@ -26109,19 +26218,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;
     }
@@ -26166,7 +26279,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;
@@ -26176,7 +26290,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;
@@ -26559,7 +26674,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;
@@ -26624,7 +26740,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;
@@ -26719,16 +26836,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 {
@@ -27023,7 +27143,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;
@@ -27039,8 +27160,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;
@@ -27058,7 +27181,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;
@@ -27080,7 +27204,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;
@@ -27115,7 +27240,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;
@@ -27276,7 +27402,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;
@@ -27518,7 +27645,8 @@ $kendo-drawer-selected-hover-text: $kendo-selected-hover-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;
@@ -27529,8 +27657,10 @@ $kendo-drawer-selected-hover-text: $kendo-selected-hover-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;
@@ -27807,7 +27937,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;
@@ -28050,7 +28181,8 @@ $kendo-card-callout-height: 20px !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;
@@ -28072,7 +28204,8 @@ $kendo-card-callout-height: 20px !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;
@@ -28082,7 +28215,8 @@ $kendo-card-callout-height: 20px !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;
@@ -28185,7 +28319,8 @@ $kendo-card-callout-height: 20px !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;
@@ -28563,7 +28698,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;
@@ -28571,7 +28707,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
@@ -28819,7 +28956,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;
@@ -28855,7 +28993,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;
@@ -28885,8 +29024,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;
@@ -29074,8 +29215,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;
@@ -29139,7 +29282,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;
@@ -29163,7 +29307,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;
     }
@@ -29570,7 +29715,7 @@ $kendo-pager-sizes: (
     // Pager items
     .k-pager-nav {
-        @extend %base-pager-item;
+        @extend %base-pager-item !optional;
     }
@@ -29617,10 +29762,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;
         }
     }
@@ -29628,7 +29774,7 @@ $kendo-pager-sizes: (
     // Pager sizes
     .k-pager-sizes {
-        @extend %base-pager-section;
+        @extend %base-pager-section !optional;
         .k-dropdown-list,
         > select {
@@ -29653,8 +29799,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;
@@ -29677,7 +29823,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;
@@ -29873,8 +30019,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;
@@ -29977,7 +30125,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 {
@@ -30104,7 +30253,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;
         }
     }
 }
@@ -30491,7 +30641,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;
@@ -30559,7 +30710,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;
@@ -30574,7 +30726,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;
@@ -30990,7 +31143,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;
@@ -31232,7 +31386,8 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !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;
@@ -31257,7 +31412,8 @@ $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !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
@@ -31487,7 +31643,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;
@@ -31525,7 +31682,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;
@@ -32433,7 +32591,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 {
@@ -32459,7 +32618,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;
@@ -32494,7 +32654,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;
@@ -32652,12 +32813,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;
         }
@@ -33541,7 +33704,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
@@ -33758,8 +33922,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
@@ -34104,7 +34270,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;
@@ -34140,16 +34307,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 {
@@ -34159,8 +34329,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,
@@ -34176,10 +34348,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;
                     }
                 }
             }
@@ -34197,7 +34371,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;
                 }
             }
@@ -34207,7 +34382,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;
             }
@@ -34216,7 +34392,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;
                 }
             }
@@ -34364,7 +34541,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;
         }
@@ -34405,7 +34583,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%;
         }
@@ -34443,7 +34622,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 {
@@ -34461,11 +34641,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;
@@ -34484,7 +34666,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;
@@ -35094,7 +35277,8 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
         &::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;
@@ -35111,11 +35295,14 @@ $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
         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;
@@ -35454,7 +35641,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;
@@ -35469,7 +35657,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 {
@@ -35509,7 +35698,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,
@@ -35520,7 +35710,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;
@@ -35958,7 +36149,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;
@@ -36688,14 +36880,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;
@@ -36711,6 +36904,7 @@ $kendo-pivotgrid-remove-text: null !default;
             border-collapse: separate;
             border-spacing: 0;
             outline: 0;
+            text-align: inherit;
             empty-cells: show;
         }
@@ -36720,6 +36914,7 @@ $kendo-pivotgrid-remove-text: null !default;
         tr,
         td {
             border-color: inherit;
+            text-align: inherit;
         }
     }
@@ -36815,7 +37010,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;
@@ -36837,7 +37033,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;
     }
@@ -36853,7 +37050,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;
@@ -36865,7 +37063,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;
@@ -36918,7 +37117,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;
@@ -36932,7 +37132,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;
@@ -36960,7 +37161,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 );
@@ -36985,7 +37187,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;
         }
     }
@@ -36993,7 +37196,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;
@@ -37633,7 +37837,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
@@ -37721,7 +37926,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;
     }
 }
@@ -37835,7 +38041,8 @@ $kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
         .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: "";
@@ -38124,7 +38331,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;
@@ -38158,7 +38366,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;
     }
@@ -38170,7 +38379,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;
@@ -38580,7 +38790,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;
@@ -38598,7 +38809,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;
@@ -38636,7 +38848,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;
@@ -38653,14 +38866,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;
@@ -38686,7 +38901,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;
@@ -38701,7 +38917,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;
@@ -38719,13 +38936,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 {
@@ -38745,7 +38964,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 {
@@ -39015,7 +39235,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;
@@ -39213,7 +39434,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;
@@ -39221,7 +39443,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
@@ -39241,8 +39466,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;
     }
@@ -39397,7 +39624,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;
         }
@@ -39405,7 +39633,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;
@@ -39524,7 +39753,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;
             }
         }
@@ -39588,7 +39818,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;
                 }
@@ -39820,8 +40051,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;
@@ -39874,7 +40107,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;
@@ -39909,7 +40143,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;
         }
@@ -40251,7 +40486,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;
                 }
@@ -40278,7 +40514,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;
@@ -40471,7 +40708,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;
         }
@@ -40559,8 +40797,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;
@@ -40627,7 +40867,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;
@@ -40734,7 +40975,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;
@@ -40764,14 +41006,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 {
@@ -40977,14 +41221,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;
             }
@@ -41004,7 +41245,7 @@ $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
         }
         .k-task-content {
-            text-align: right;
+            text-align: end;
         }
         .k-task-complete {
@@ -41523,7 +41764,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;
@@ -41617,7 +41859,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;
@@ -41819,7 +42062,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,
@@ -41866,7 +42109,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;
@@ -41881,7 +42124,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 );
         }
@@ -42169,7 +42413,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;
@@ -42284,7 +42528,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;
         }
@@ -42327,7 +42572,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;
@@ -42356,7 +42602,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;
@@ -42460,7 +42707,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;
@@ -42980,7 +43226,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;
@@ -43007,7 +43254,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;
@@ -43029,7 +43276,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;
@@ -43087,7 +43334,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;
@@ -43175,7 +43423,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;
@@ -43366,7 +43615,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;
@@ -43433,8 +43683,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;
@@ -43447,8 +43695,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;
@@ -43678,7 +43924,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;
@@ -43909,7 +44156,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;
@@ -43989,8 +44237,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;
@@ -44039,13 +44289,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 {
@@ -44075,7 +44326,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;
             }
@@ -44121,7 +44373,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;
                     }
@@ -44221,7 +44473,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;
@@ -44275,8 +44528,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;
@@ -44542,7 +44797,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;
@@ -44602,7 +44858,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;
@@ -44784,7 +45041,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 {
@@ -45479,7 +45736,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 {
@@ -45490,8 +45748,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;
     }
@@ -45697,7 +45956,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;
@@ -45706,7 +45966,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;
@@ -45755,7 +46016,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;
     }
@@ -46146,7 +46407,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;
@@ -46375,7 +46637,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;
@@ -46390,7 +46653,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;
@@ -46411,7 +46675,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;
@@ -46465,7 +46730,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;
     }