@progress/kendo-theme-material 6.2.1-dev.0 → 6.2.1-dev.8

package/dist/all.scss

@@ -1277,6 +1277,30 @@ $_kendo-escape-class-name: (
     @return map-values( $map );
 }
 
+/// Returns negative values of a number or numbers in a list.
+/// @param {Map} $map - The map to get the values from.
+/// @return {Map} - A comma separated list of the values in `$map`.
+///
+/// @example scss - Usage
+///   @debug k-map-negate( ( 0: 0, 1: 1px, 2: 2px ) ); // => ("-1": -1px, "-2": -2px)
+@function k-map-negate($map) {
+    $_map-neg: ();
+
+    @if( k-meta-type-of($map) != map ) {
+        @error "expected type of #{$map} is map, was #{k-meta-type-of($map)}";
+    };
+    @each $key, $value in $map {
+        $_key-neg: "-" + $key;
+
+        @if( k-meta-type-of($value) == number and $value != 0) {
+            $_map-neg: k-map-set($_map-neg, $_key-neg, -1 * $value );
+        }
+    }
+
+    @return $_map-neg;
+
+}
+
 // #endregion
 // #region @import "./_meta.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_meta.import.scss
 // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
@@ -6316,14 +6340,32 @@ $kendo-utils: (
         video: k-string-unquote("16 / 9")
     ),
     "container": (),
-    "columns": (),
+    "columns": (
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+        7: 7,
+        8: 8,
+        9: 9,
+        10: 10,
+        11: 11,
+        12: 12,
+        auto: auto
+    ),
     "break-after": (),
     "break-before": (),
     "break-inside": (),
     "box-decoration-break": (),
-    "box-sizing": (),
+    "box-sizing": (
+        border: border-box,
+        content: content-box
+    ),
     "display": (
         none,
+        contents,
         block,
         inline,
         inline-block,
@@ -6333,6 +6375,8 @@ $kendo-utils: (
         inline-grid,
         table,
         inline-table,
+        table-row,
+        table-cell,
         list-item
     ),
     "float": (
@@ -6347,26 +6391,37 @@ $kendo-utils: (
         none
     ),
     "isolation": (),
-    "object-fit": (),
-    "object-position": (),
+    "object-fit": (
+        contain,
+        cover,
+        fill,
+        scale-down,
+        initial,
+        none
+    ),
+    "object-position": (
+        center: center,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+        top-left: top left,
+        top-right: top right,
+        bottom-left: bottom left,
+        bottom-right: bottom right
+    ),
     "overflow": (
         auto: auto,
         hidden: hidden,
         visible: visible,
         scroll: scroll,
-        clip: clip,
-        x-auto: auto,
-        x-hidden: hidden,
-        x-visible: visible,
-        x-scroll: scroll,
-        x-clip: clip,
-        y-auto: auto,
-        y-hidden: hidden,
-        y-visible: visible,
-        y-scroll: scroll,
-        y-clip: clip
+        clip: clip
     ),
     "overscroll": (),
+    "placement": k-map-merge( $kendo-spacing, (
+        // sass-lint:disable-block indentation
+        -1: -1px
+    )),
     "position": (
         static,
         relative,
@@ -6380,8 +6435,9 @@ $kendo-utils: (
         -1: -1px
     ),
     "visibility": (
-        visible,
-        hidden
+        visible: visible,
+        invisible: hidden,
+        collapse: collapse
     ),
     "zindex": (
         0: 0,
@@ -6481,6 +6537,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-column-end": (
@@ -6497,6 +6566,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-column-span": (
@@ -6529,6 +6611,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-row-end": (
@@ -6545,6 +6640,19 @@ $kendo-utils: (
         11: 11,
         12: 12,
         13: 13,
+        -1: -1,
+        -2: -2,
+        -3: -3,
+        -4: -4,
+        -5: -5,
+        -6: -6,
+        -7: -7,
+        -8: -8,
+        -9: -9,
+        -10: -10,
+        -11: -11,
+        -12: -12,
+        -13: -13,
         auto: auto
     ),
     "grid-row-span": (
@@ -6566,6 +6674,7 @@ $kendo-utils: (
     "grid-auto-flow": (
         row: row,
         col: column,
+        dense: dense,
         row-dense: row dense,
         col-dense: column dense,
         unset: unset
@@ -6725,7 +6834,8 @@ $kendo-utils: (
     ),
 
     // Spacing
-    "margin": k-map-merge( $kendo-spacing, (
+    "margin": k-map-merge( $kendo-spacing,
+        k-map-negate( $kendo-spacing), (
         // sass-lint:disable-block indentation
         // TODO: remove this extension once we fix docs
         xs: k-map-get( $kendo-spacing, 1 ),
@@ -6734,7 +6844,8 @@ $kendo-utils: (
         lg: k-map-get( $kendo-spacing, 4 ),
         xl: k-map-get( $kendo-spacing, 6 ),
         thin: k-map-get( $kendo-spacing, 0.5 ), // sass-lint:disable-line leading-zero
-        hair: k-map-get( $kendo-spacing, 1px )
+        hair: k-map-get( $kendo-spacing, 1px ),
+        auto: auto
     )),
     "padding": k-map-merge( $kendo-spacing, (
         // sass-lint:disable-block indentation
@@ -6815,13 +6926,19 @@ $kendo-utils: (
     "font-variant-numeric": (),
     "letter-spacing": (),
     "line-height": (),
-    "list-style-type": (),
+    "list-style-type": (
+        none,
+        disc,
+        decimal
+    ),
     "list-style-position": (),
     "text-align": (
         left,
         right,
         center,
-        justify
+        justify,
+        start,
+        end
     ),
     "text-color": k-map-merge( $kendo-theme-colors, (
         // sass-lint:disable-block indentation
@@ -6831,7 +6948,12 @@ $kendo-utils: (
         "black": black,
         "white": white
     )),
-    "text-decoration": (),
+    "text-decoration": (
+        underline: underline,
+        overline: overline,
+        line-through: line-through,
+        no-underline: none
+    ),
     "text-decoration-width": (),
     "text-decoration-style": (),
     "text-decoration-color": (),
@@ -6847,7 +6969,16 @@ $kendo-utils: (
         ellipsis: ellipsis
     ),
     "text-indent": (),
-    "vertical-align": (),
+    "vertical-align": (
+        baseline,
+        top,
+        middle,
+        bottom,
+        text-top,
+        text-bottom,
+        sub,
+        super
+    ),
     "white-space": (
         normal,
         nowrap,
@@ -6859,6 +6990,12 @@ $kendo-utils: (
     "word-break": (),
 
     // Background
+    "background-clip": (
+        border: border-box,
+        padding: padding-box,
+        content: content-box,
+        text: text
+    ),
     "background-color": k-map-merge( $kendo-theme-colors, (
         // sass-lint:disable-block indentation
         "inherit": inherit,
@@ -6880,6 +7017,10 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
+        // groove,
+        // ridge,
+        inset,
+        outset,
         hidden,
         none
     ),
@@ -6904,13 +7045,20 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
-        groove,
-        ridge,
+        // groove,
+        // ridge,
         inset,
         outset,
         none
     ),
-    "outline-color": (),
+    "outline-color": k-map-merge( $kendo-theme-colors, (
+        // sass-lint:disable-block indentation
+        "inherit": inherit,
+        "current": currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
+    )),
     "outline-offset": (
         0: 0,
         1: 1px,
@@ -6920,8 +7068,32 @@ $kendo-utils: (
     ),
 
     // Effects
+    "box-shadow": (),
+    "box-shadow-color": (),
+    "opacity": (
+        // sass-lint:disable-block leading-zero
+        0: 0,
+        5: 0.05,
+        10: 0.1,
+        20: 0.2,
+        30: 0.3,
+        40: 0.4,
+        50: 0.5,
+        60: 0.6,
+        70: 0.7,
+        80: 0.8,
+        90: 0.9,
+        100: 1
+    ),
 
     // Filter
+    "backdrop-blur": (
+        DEFAULT: blur(8px),
+        none: blur(0),
+        sm: blur(4px),
+        md: blur(6px),
+        lg: blur(12px)
+    ),
 
     // Table
     "border-collapse": (
@@ -7088,6 +7260,14 @@ $kendo-utils: (
         scroll: scroll-position,
         contents: contents,
         transform: transform
+    ),
+    "fill-stroke": (
+        none: none,
+        inherit: inherit,
+        current: currentColor,
+        "transparent": transparent,
+        "black": black,
+        "white": white
     )
 ) !default;
 
@@ -7203,6 +7383,18 @@ $kendo-utils: (
 
 }
 
+// #endregion
+// #region @import "./_box-sizing.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_box-sizing.scss
+// TODO: docs
+
+@mixin kendo-utils--layout--box-sizing() {
+
+    // box-sizing utility classes
+    $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
+    @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
+
+}
+
 // #endregion
 // #region @import "./_clear.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_clear.scss
 // Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
@@ -7235,6 +7427,83 @@ $kendo-utils: (
 
 }
 
+// #endregion
+// #region @import "./_columns.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_columns.scss
+// Columns documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/columns.
+
+/// This is equivalent to `columns: 1;`. Element's content is displayed into 1 column.
+/// @name .k-columns-1
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 2;`. Element's content is broken into 2 columns.
+/// @name .k-columns-2
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 3;`. Element's content is broken into 3 columns.
+/// @name .k-columns-3
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 4;`. Element's content is broken into 4 columns.
+/// @name .k-columns-4
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 5;`. Element's content is broken into 5 columns.
+/// @name .k-columns-5
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 6;`. Element's content is broken into 6 columns.
+/// @name .k-columns-6
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 7;`. Element's content is broken into 7 columns.
+/// @name .k-columns-7
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 8;`. Element's content is broken into 8 columns.
+/// @name .k-columns-8
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 9;`. Element's content is broken into 9 columns.
+/// @name .k-columns-9
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 10;`. Element's content is broken into 10 columns.
+/// @name .k-columns-10
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 11;`. Element's content is broken into 11 columns.
+/// @name .k-columns-11
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 12;`. Element's content is broken into 12 columns.
+/// @name .k-columns-12
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: auto;`.The number of columns is determined by other CSS properties, such as column-width.
+/// @name .k-columns-auto
+/// @group columns
+/// @contextType css
+
+@mixin kendo-utils--layout--columns() {
+
+    // columns utility classes
+    $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
+    @include generate-utils( columns, columns, $kendo-utils-columns );
+
+}
+
 // #endregion
 // #region @import "./_display.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_display.scss
 /// This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
@@ -7292,6 +7561,8 @@ $kendo-utils: (
 /// @group display
 /// @contextType css
 
+// TODO tables' parts
+
 @mixin kendo-utils--layout--display() {
 
     // Display utility classes
@@ -7335,6 +7606,30 @@ $kendo-utils: (
 
 }
 
+// #endregion
+// #region @import "./_object-fit.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_object-fit.scss
+// TODO: docs
+
+@mixin kendo-utils--layout--object-fit() {
+
+    // object-fit utility classes
+    $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
+    @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
+
+}
+
+// #endregion
+// #region @import "./_object-position.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_object-position.scss
+// TODO: docs
+
+@mixin kendo-utils--layout--object-position() {
+
+    // object-position utility classes
+    $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
+    @include generate-utils( object-position, object-position, $kendo-utils-object-position );
+
+}
+
 // #endregion
 // #region @import "./_overflow.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_overflow.scss
 /// This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
@@ -7417,38 +7712,14 @@ $kendo-utils: (
     // Overflow utility classes
     $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
     @include generate-utils( overflow, overflow, $kendo-utils-overflow );
-
+    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
+    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
 }
 
 // #endregion
-// #region @import "./_position.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_position.scss
+// #region @import "./_placement.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_placement.scss
 // Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
 
-/// This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
-/// @name .k-pos-static
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
-/// @name .k-pos-relative
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
-/// @name .k-pos-absolute
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
-/// @name .k-pos-fixed
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
-/// @name .k-pos-sticky
-/// @group position
-/// @contextType css
-
 
 // TODO: inset docs
 
@@ -7473,35 +7744,26 @@ $kendo-utils: (
 /// @group position
 /// @contextType css
 
-@mixin kendo-utils--layout--position() {
-
-    // Position utility classes
-    $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
-    @include generate-utils( pos, position, $kendo-utils-position );
-
+@mixin kendo-utils--layout--placement() {
+    // Top / right / bottom / left
+    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+    @include generate-utils( top, top, $kendo-utils-placement );
+    @include generate-utils( right, right, $kendo-utils-placement );
+    @include generate-utils( bottom, bottom, $kendo-utils-placement );
+    @include generate-utils( left, left, $kendo-utils-placement );
 
-    // Legacy aliases
-    .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
-    .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
-    .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
-    .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
-    .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
-    .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
-    .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
-    .\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
-    .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
-    .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
 
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
 
     // Inset utility classes
     $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
     @include generate-utils( inset, inset, $kendo-utils-inset );
     @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
     @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-    @include generate-utils( top, top, $kendo-utils-inset );
-    @include generate-utils( right, right, $kendo-utils-inset );
-    @include generate-utils( bottom, bottom, $kendo-utils-inset );
-    @include generate-utils( left, left, $kendo-utils-inset );
     @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
     @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
     @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
@@ -7565,12 +7827,55 @@ $kendo-utils: (
         transform: translateX(-50%);
     }
 
+}
 
-    // Position length utility classes
-    @each $side in (top, right, bottom, left) {
-        .#{$kendo-prefix}#{$side},
-        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
-    }
+// #endregion
+// #region @import "./_position.scss"; -> node_modules/@progress/kendo-theme-utils/scss/layout/_position.scss
+// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
+
+/// This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
+/// @name .k-pos-static
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
+/// @name .k-pos-relative
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
+/// @name .k-pos-absolute
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
+/// @name .k-pos-fixed
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
+/// @name .k-pos-sticky
+/// @group position
+/// @contextType css
+
+@mixin kendo-utils--layout--position() {
+
+    // Position utility classes
+    $kendo-utils-position: k-map-get( $kendo-utils, "position" ) !default;
+    @include generate-utils( pos, position, $kendo-utils-position );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}static { @extend .#{$kendo-prefix}pos-static !optional; }
+    .\!#{$kendo-prefix}static { @extend .\!#{$kendo-prefix}pos-static !optional; }
+    .#{$kendo-prefix}relative { @extend .#{$kendo-prefix}pos-relative !optional; }
+    .\!#{$kendo-prefix}relative { @extend .\!#{$kendo-prefix}pos-relative !optional; }
+    .#{$kendo-prefix}absolute { @extend .#{$kendo-prefix}pos-absolute !optional; }
+    .\!#{$kendo-prefix}absolute { @extend .\!#{$kendo-prefix}pos-absolute !optional; }
+    .#{$kendo-prefix}fixed { @extend .#{$kendo-prefix}pos-fixed !optional; }
+    .\!#{$kendo-prefix}fixed { @extend .\!#{$kendo-prefix}pos-fixed !optional; }
+    .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
+    .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
 
 }
 
@@ -7610,10 +7915,15 @@ $kendo-utils: (
 
 @mixin kendo-utils--layout() {
     @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--box-sizing();
     @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--columns();
     @include kendo-utils--layout--display();
     @include kendo-utils--layout--float();
+    @include kendo-utils--layout--object-fit();
+    @include kendo-utils--layout--object-position();
     @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--placement();
     @include kendo-utils--layout--position();
     @include kendo-utils--layout--visibility();
     @include kendo-utils--layout--zindex();
@@ -8237,7 +8547,18 @@ $kendo-utils: (
 // font variant
 // letter spacing
 // line height
-// list style
+// #region @import "./_list-style.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_list-style.scss
+// TODO: docs
+
+@mixin kendo-utils--typography--list-style-type() {
+
+    // list-style-type utility classes
+    $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
+    @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
+
+}
+
+// #endregion
 // #region @import "./_text-align.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_text-align.scss
 // Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
 
@@ -8287,7 +8608,18 @@ $kendo-utils: (
 }
 
 // #endregion
-// text decoration
+// #region @import "./_text-decoration.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_text-decoration.scss
+// TODO: docs
+
+@mixin kendo-utils--typography--text-decoration() {
+
+    // text-decoration utility classes
+    $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
+    @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
+
+}
+
+// #endregion
 // #region @import "./_text-overflow.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_text-overflow.scss
 @mixin kendo-utils--typography--text-overflow() {
 
@@ -8343,7 +8675,18 @@ $kendo-utils: (
 
 // #endregion
 // text indent
-// vertical align
+// #region @import "./_vertical-align.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_vertical-align.scss
+// TODO: docs
+
+@mixin kendo-utils--typography--vertical-align() {
+
+    // vertical-align utility classes
+    $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
+    @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
+
+}
+
+// #endregion
 // #region @import "./_white-space.scss"; -> node_modules/@progress/kendo-theme-utils/scss/typography/_white-space.scss
 // White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
 
@@ -8398,15 +8741,30 @@ $kendo-utils: (
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--list-style-type();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-decoration();
     @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
+    @include kendo-utils--typography--vertical-align();
     @include kendo-utils--typography--white-space();
 }
 
 // #endregion
 // #region @import "./background/index.import.scss"; -> node_modules/@progress/kendo-theme-utils/scss/background/index.import.scss
+// #region @import "./_background-clip.scss"; -> node_modules/@progress/kendo-theme-utils/scss/background/_background-clip.scss
+// TODO: docs
+
+@mixin kendo-utils--background--background-clip() {
+
+    // Background color utility classes
+    $kendo-utils-background-clip: k-map-get( $kendo-utils, "background-clip" ) !default;
+    @include generate-utils( bg-clip, background-clip, $kendo-utils-background-clip );
+
+}
+
+// #endregion
 // #region @import "./_background-color.scss"; -> node_modules/@progress/kendo-theme-utils/scss/background/_background-color.scss
 // TODO: docs
 
@@ -8422,6 +8780,7 @@ $kendo-utils: (
 
 
 @mixin kendo-utils--background() {
+    @include kendo-utils--background--background-clip();
     @include kendo-utils--background--background-color();
 }
 
@@ -8570,8 +8929,46 @@ $kendo-utils: (
 }
 
 // #endregion
-// effects
-// filter
+// #region @import "./effects/index.import.scss"; -> node_modules/@progress/kendo-theme-utils/scss/effects/index.import.scss
+// box shadow
+// box shadow color
+// #region @import "./_opacity.scss"; -> node_modules/@progress/kendo-theme-utils/scss/effects/_opacity.scss
+// TODO: docs
+
+@mixin kendo-utils--effects--opacity() {
+
+    // opacity utility classes
+    $kendo-utils-opacity: k-map-get( $kendo-utils, "opacity" ) !default;
+    @include generate-utils( opacity, opacity, $kendo-utils-opacity );
+
+}
+
+// #endregion
+
+@mixin kendo-utils--effects() {
+    @include kendo-utils--effects--opacity();
+}
+
+// #endregion
+// #region @import "./filter/index.import.scss"; -> node_modules/@progress/kendo-theme-utils/scss/filter/index.import.scss
+// #region @import "./_backdrop.scss"; -> node_modules/@progress/kendo-theme-utils/scss/filter/_backdrop.scss
+// TODO: docs
+
+@mixin kendo-utils--filter--backdrop() {
+
+    // backdrop utility classes
+    $kendo-utils-backdrop-blur: k-map-get( $kendo-utils, "backdrop-blur" ) !default;
+    @include generate-utils( backdrop-blur, backdrop-filter, $kendo-utils-backdrop-blur );
+
+}
+
+// #endregion
+
+@mixin kendo-utils--filter() {
+    @include kendo-utils--filter--backdrop();
+}
+
+// #endregion
 // #region @import "./table/index.import.scss"; -> node_modules/@progress/kendo-theme-utils/scss/table/index.import.scss
 // #region @import "./_border-collapse.scss"; -> node_modules/@progress/kendo-theme-utils/scss/table/_border-collapse.scss
 // TODO: docs
@@ -9124,6 +9521,38 @@ $kendo-utils: (
     @include kendo-utils--interactivity--will-change();
 }
 
+// #endregion
+// #region @import "./svg/index.import.scss"; -> node_modules/@progress/kendo-theme-utils/scss/svg/index.import.scss
+// #region @import "./_fill.scss"; -> node_modules/@progress/kendo-theme-utils/scss/svg/_fill.scss
+// TODO: docs
+
+@mixin kendo-utils--svg--fill() {
+
+    // fill utility classes
+    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( fill, fill, $kendo-utils-fill );
+
+}
+
+// #endregion
+// #region @import "./_stroke.scss"; -> node_modules/@progress/kendo-theme-utils/scss/svg/_stroke.scss
+// TODO: docs
+
+@mixin kendo-utils--svg--stroke() {
+
+    // stroke utility classes
+    $kendo-utils-stroke: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( stroke, stroke, $kendo-utils-stroke );
+
+}
+
+// #endregion
+
+@mixin kendo-utils--svg() {
+    @include kendo-utils--svg--fill();
+    @include kendo-utils--svg--stroke();
+}
+
 // #endregion
 
 
@@ -9137,9 +9566,12 @@ $kendo-utils: (
     @include kendo-utils--typography();
     @include kendo-utils--background();
     @include kendo-utils--border();
+    @include kendo-utils--effects();
+    @include kendo-utils--filter();
     @include kendo-utils--table();
     @include kendo-utils--transform();
     @include kendo-utils--interactivity();
+    @include kendo-utils--svg();
 }
 
 // #endregion
@@ -11173,122 +11605,123 @@ $_kendo-module-meta: (
 // #region @import "../list/_variables.scss"; -> scss/list/_variables.scss
 // List
 
-/// Font size of the list component, if no size is set.
+/// The font size of the List component, if no size is set.
 /// @group list
 $kendo-list-font-size: null !default;
 $kendo-list-sm-font-size: $kendo-font-size-md !default;
 $kendo-list-md-font-size: $kendo-font-size-md !default;
 $kendo-list-lg-font-size: $kendo-font-size-lg !default;
 
-/// Line height of the list component, if no size is set.
+/// The line height of the List component, if no size is set.
 /// @group list
 $kendo-list-line-height: null !default;
 $kendo-list-sm-line-height: k-math-div( 20, 14 ) !default;
 $kendo-list-md-line-height: k-math-div( 20, 14 ) !default;
 $kendo-list-lg-line-height: 1.5 !default;
 
-/// Horizontal padding of list header, if no size is set.
+/// The horizontal padding of the List header, if no size is set.
 /// @group list
 $kendo-list-header-padding-x: null !default;
 $kendo-list-sm-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-md-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-lg-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 
-/// Vertical padding of list header, if no size is set.
+/// The vertical padding of the List header, if no size is set.
 /// @group list
 $kendo-list-header-padding-y: null !default;
 $kendo-list-sm-header-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $kendo-list-md-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-list-lg-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-/// Border width of list header.
+/// The border width of the List header.
 /// @group list
 $kendo-list-header-border-width: 0 0 1px !default;
 
-/// Font size of list header, if no size is set.
+/// The font size of the List header, if no size is set.
 /// @group list
 $kendo-list-header-font-size: null !default;
 $kendo-list-sm-header-font-size: null !default;
 $kendo-list-md-header-font-size: null !default;
 $kendo-list-lg-header-font-size: null !default;
 
-/// Line height of list header, if no size is set.
+/// The line height of the List header, if no size is set.
 /// @group list
 $kendo-list-header-line-height: null !default;
 $kendo-list-sm-header-line-height: null !default;
 $kendo-list-md-header-line-height: null !default;
 $kendo-list-lg-header-line-height: null !default;
 
-/// Font weight of list header.
+/// The font weight of the List header.
 /// @group list
 $kendo-list-header-font-weight: null !default;
 
-/// Horizontal padding of list items, when no size is set.
+/// The horizontal padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-x: null !default;
 $kendo-list-sm-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-md-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 
-/// Vertical padding of list items, when no size is set.
+/// The vertical padding of the List items, when no size is set.
 /// @group list
 $kendo-list-item-padding-y: null !default;
 $kendo-list-sm-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $kendo-list-md-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-list-lg-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-/// Font size of list items, if no size is set.
+/// The font size of the List items, if no size is set.
 /// @group list
 $kendo-list-item-font-size: null !default;
 $kendo-list-sm-item-font-size: null !default;
 $kendo-list-md-item-font-size: null !default;
 $kendo-list-lg-item-font-size: null !default;
 
-/// Line height of list items, if no size is set.
+/// The line height of the List items, if no size is set.
 /// @group list
 $kendo-list-item-line-height: null !default;
 $kendo-list-sm-item-line-height: null !default;
 $kendo-list-md-item-line-height: null !default;
 $kendo-list-lg-item-line-height: null !default;
 
-/// Horizontal padding of list group items, when no size is set.
+/// The horizontal padding of the List group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-x: null !default;
 $kendo-list-sm-group-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-md-group-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-list-lg-group-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 
-/// Vertical padding of list group items, when no size is set.
+/// The vertical padding of the List group items, when no size is set.
 /// @group list
 $kendo-list-group-item-padding-y: null !default;
 $kendo-list-sm-group-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $kendo-list-md-group-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-list-lg-group-item-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
 
-/// Border width of list group items.
+/// The border width of the List group items.
 /// @group list
 $kendo-list-group-item-border-width: 1px 0 0 !default;
 
-/// Font size of list group items, if no size is set.
+/// The font size of the List group items, if no size is set.
 /// @group list
 $kendo-list-group-item-font-size: null !default;
 $kendo-list-sm-group-item-font-size: null !default;
 $kendo-list-md-group-item-font-size: null !default;
 $kendo-list-lg-group-item-font-size: null !default;
 
-/// Line height of list group items, if no size is set.
+/// The line height of the List group items, if no size is set.
 /// @group list
 $kendo-list-group-item-line-height: null !default;
 $kendo-list-sm-group-item-line-height: null !default;
 $kendo-list-md-group-item-line-height: null !default;
 $kendo-list-lg-group-item-line-height: null !default;
 
-/// Font weight of list group item.
+/// The font weight of a List group item.
 /// @group list
 $kendo-list-group-item-font-weight: null !default;
 
 
-// Kendo list sizes
+/// The map with the sizes of the List.
+/// /// @group list
 $kendo-list-sizes: (
     sm: (
         font-size: $kendo-list-sm-font-size,
@@ -11341,243 +11774,273 @@ $kendo-list-sizes: (
 ) !default;
 
 
-/// Background color of the list component.
+/// The background color of the List component.
 /// @group list
 $kendo-list-bg: $kendo-component-bg !default;
-/// Text color of the list component.
+/// The text color of the List component.
 /// @group list
 $kendo-list-text: $kendo-component-text !default;
-/// Border color of the list component.
+/// The border color of the List component.
 /// @group list
 $kendo-list-border: $kendo-component-border !default;
 
 
-/// Background color of list header.
+/// The background color of the List header.
 /// @group list
 $kendo-list-header-bg: null !default;
-/// Text color of list header.
+/// The text color of the List header.
 /// @group list
 $kendo-list-header-text: null !default;
-/// Border color of list header.
+/// The border color of the List header.
 /// @group list
 $kendo-list-header-border: inherit !default;
-/// Box shadow of list header.
+/// The box shadow of the List header.
 /// @group list
 $kendo-list-header-shadow: null !default;
 
 
-/// Background color of list items.
+/// The background color of the List items.
 /// @group list
 $kendo-list-item-bg: null !default;
-/// Text color of list items.
+/// The text color of the List items.
 /// @group list
 $kendo-list-item-text: null !default;
 
-/// Background color of hovered list items.
+/// The background color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-bg: $kendo-hover-bg !default;
-/// Text color of hovered list items.
+/// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: $kendo-hover-text !default;
 
-/// Background color of focused list items.
+/// The background color of the focused List items.
 /// @group list
 $kendo-list-item-focus-bg: $kendo-list-item-hover-bg !default;
-/// Text color of focused list items.
+/// The text color of the focused List items.
 /// @group list
 $kendo-list-item-focus-text: null !default;
-/// Box shadow of focused list items.
+/// The box shadow of the focused List items.
 /// @group list
 $kendo-list-item-focus-shadow: null !default;
 
-/// Background color of selected list items.
+/// The background color of the selected List items.
 /// @group list
 $kendo-list-item-selected-bg: $kendo-component-bg !default;
-/// Text color of selected list items.
+/// The text color of the selected List items.
 /// @group list
 $kendo-list-item-selected-text: $kendo-color-secondary !default;
 
-/// Background color of list group items.
+/// The background color of the List group items.
 /// @group list
 $kendo-list-group-item-bg: null !default;
-/// Text color of list group items.
+/// The text color of the List group items.
 /// @group list
 $kendo-list-group-item-text: null !default;
-/// The border color of list group items.
+/// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: inherit !default;
-/// The base shadow of list group items.
+/// The base shadow of the List group items.
 /// @group list
 $kendo-list-group-item-shadow: null !default;
 
-/// Text color of the 'No Data' text.
+/// The color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: $kendo-subtle-text !default;
 
 // #endregion
 
 
-// Checkbox
+// CheckBox
 
-/// Border width of checkbox.
+/// The border width of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border-width: 2px !default;
 
-// Checkbox sizes
+/// The size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+/// The size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+/// The size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+
+/// The glyph size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The glyph size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The glyph size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+
+/// The ripple size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-ripple-size: 300% !default;
+/// The ripple size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-ripple-size: 300% !default;
+/// The ripple size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-ripple-size: 300% !default;
+
+// A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-map-get( $kendo-spacing, 3 ),
-        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-sm-size,
+        glyph-size: $kendo-checkbox-sm-glyph-size,
+        ripple-size: $kendo-checkbox-sm-ripple-size
     ),
     md: (
-        size: k-map-get( $kendo-spacing, 4 ),
-        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-md-size,
+        glyph-size: $kendo-checkbox-md-glyph-size,
+        ripple-size: $kendo-checkbox-md-ripple-size
     ),
     lg: (
-        size: k-map-get( $kendo-spacing, 5 ),
-        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
-        ripple-size: 300%
+        size: $kendo-checkbox-lg-size,
+        glyph-size: $kendo-checkbox-lg-glyph-size,
+        ripple-size: $kendo-checkbox-lg-ripple-size
     )
 ) !default;
 
-/// Background color of checkbox.
+/// The background color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-bg: null !default;
-/// Color of checkbox.
+/// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
-/// Border color of checkbox.
+/// The border color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 ) !default;
 
-/// Background color of hovered checkbox.
+/// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: null !default;
-/// Color of hovered checkbox.
+/// The text color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-text: null !default;
-/// Border color of hovered checkbox.
+/// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: null !default;
 
-/// Background color of checked checkbox.
+/// The background color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
-/// Color of checked checkbox.
+/// The text color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-text: k-contrast-color( $kendo-checkbox-checked-bg ) !default;
-/// Border color of checked checkbox.
+/// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
-/// Background color of indeterminate checkbox.
+/// The background color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
-/// Color of indeterminate checkbox.
+/// The text color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
-/// Border color of indeterminate checkbox.
+/// The border color of the indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
-/// Border color of focused checkbox.
+/// The border color of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-border: null !default;
-/// Box shadow of focused checkbox.
+/// The box shadow of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: null !default;
-/// Border color of focused and checked checkbox.
+/// The border color of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-border: null !default;
-/// Box shadow of focused and checked checkbox.
+/// The box shadow of the focused and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-checked-shadow: null !default;
 
-/// Background color of disabled checkbox.
+/// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: null !default;
-/// Color of disabled checkbox.
+/// The text color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-text: null !default;
-/// Border color of disabled checkbox.
+/// The border color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: k-try-shade( $kendo-component-bg, 4 ) !default;
 
 
-/// Background color of disabled and checked checkbox.
+/// The background color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
-/// Color of disabled and checked checkbox.
+/// The text color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-text: k-contrast-color( $kendo-checkbox-disabled-checked-bg ) !default;
-/// Border color of disabled and checked checkbox.
+/// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
 
-/// Background color of invalid checkbox.
+/// The background color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: null !default;
-/// Color of invalid checkbox.
+/// The text color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $kendo-invalid-text !default;
-/// Border color of invalid checkbox.
+/// The border color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
-// Checkbox indicator
+// CheckBox indicator
 
-/// Type of checkbox indicator.
+/// The type of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indicator-type: image !default;
 
-/// Glyph font family of checkbox indicator.
+/// The font family of the CheckBox indicator glyph.
 /// @group checkbox
 $kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 $kendo-checkbox-glyph-size: 10px !default;
-/// Glyph of checkbox indicator.
+/// The glyph of the CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-glyph: "\e118" !default;
-/// Glyph of indeterminate checkbox indicator.
+/// The glyph of the indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-/// Image of checked checkbox indicator.
+/// The image for a checked CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
-/// Image of checked checkbox indicator.
+/// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
 $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
-// Checkbox label
+// CheckBox label
 
-/// The horizontal margin of the checkbox inside a label.
+/// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
 $kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
-// Checkbox list
+// CheckBox list
 
-/// Spacing between items of horizontal checkbox list.
+/// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
 $kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
-/// Horizontal padding of checkbox list items.
+/// The horizontal padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
-/// Vertical padding of checkbox list items.
+/// The vertical padding of the CheckBox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
-// Checkbox ripple
+// CheckBox ripple
 
-/// Background color of checkbox ripple.
+/// The background color of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-bg: $kendo-color-primary !default;
-/// Opacity of checkbox ripple.
+/// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .2 !default;
 
@@ -14037,59 +14500,86 @@ $_kendo-module-meta: (
 // #region @import "../button/_variables.scss"; -> scss/button/_variables.scss
 // Button
 
-/// Width of the border around the button.
+/// The width of the border around the Button.
 /// @group button
 $kendo-button-border-width: 1px !default;
 
-/// Border radius of the button.
+/// The border radius of the Button.
 /// @group button
 $kendo-button-border-radius: null !default;
 
-/// Horizontal padding of the button.
+/// The horizontal padding of the Button.
 /// @group button
 $kendo-button-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of the button.
+/// The horizontal padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the Button.
 /// @group button
 $kendo-button-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// Font family of the button.
+/// The vertical padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+
+/// The font family of the Button.
 /// @group button
 $kendo-button-font-family: $kendo-font-family !default;
-/// Font sizes of the button.
+
+/// The font size of the Button.
 /// @group button
 $kendo-button-font-size: $kendo-font-size-md !default;
+/// The font size of the small Button.
+/// @group button
+$kendo-button-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Button.
+/// @group button
+$kendo-button-md-font-size: $kendo-font-size-md !default;
+/// The font size of the large Button.
+/// @group button
+$kendo-button-lg-font-size: $kendo-font-size-md !default;
+
 /// Line heights used along with $kendo-font-size.
 /// @group button
 $kendo-button-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-$kendo-button-sm-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the small Button.
+/// @group button
 $kendo-button-sm-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-button-md-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the medium Button.
+/// @group button
 $kendo-button-md-line-height: k-math-div( 20, 14 ) !default;
-
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
-$kendo-button-lg-font-size: $kendo-font-size-md !default;
+/// The line height used along with the $kendo-font-size of the large Button.
+/// @group button
 $kendo-button-lg-line-height: k-math-div( 20, 14 ) !default;
 
-/// Calculated height of the button.
+/// The calculated height of the Button.
 /// @group button
 $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 $kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 $kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 $kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
-/// Calculated inner height of the button. Without the border width.
+/// The calculated inner height of the Button excluding the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 $kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} ) !default;
 $kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} ) !default;
 $kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} ) !default;
 
+/// The sizes map for the Button.
+/// @group button
 $kendo-button-sizes: (
     sm: (
         padding-x: $kendo-button-sm-padding-x,
@@ -14111,110 +14601,110 @@ $kendo-button-sizes: (
     )
 ) !default;
 
-/// Theme colors map for the button.
+/// The theme colors map for the Button.
 /// @group button
 $kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
     ( "base": $kendo-base-bg )
 ) !default;
 
-/// The base background of the button.
+/// The base background of the Button.
 /// @group button
 $kendo-button-bg: $kendo-base-bg !default;
-/// The base text color of the button.
+/// The base text color of the Button.
 /// @group button
 $kendo-button-text: $kendo-base-text !default;
-/// The base border color of the button.
+/// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
-/// The base background gradient of the button.
+/// The base background gradient of the Button.
 /// @group button
 $kendo-button-gradient: null !default;
-/// The base shadow of the button.
+/// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: $box-shadow-depth-2 !default;
 
-/// The base background of hovered button.
+/// The base background of the hovered Button.
 /// @group button
 $kendo-button-hover-bg: null !default;
-/// The base text color of hovered button.
+/// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
-/// The base border color of hovered button.
+/// The base border color of the hovered Button.
 /// @group button
 $kendo-button-hover-border: null !default;
-/// The base background gradient of hovered button.
+/// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
-/// The base shadow of hovered button.
+/// The base shadow of the hovered Button.
 /// @group button
 $kendo-button-hover-shadow: null !default;
 
-/// The base background color of active button.
+/// The base background color of the active Button.
 /// @group button
 $kendo-button-active-bg: null !default;
-/// The base text color of active button.
+/// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
-/// The base border color of active button.
+/// The base border color of the active Button.
 /// @group button
 $kendo-button-active-border: null !default;
-/// The base background gradient of active button.
+/// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
-/// The base shadow of active button.
+/// The base shadow of the active Button.
 /// @group button
 $kendo-button-active-shadow: $box-shadow-depth-3 !default;
 
-/// The base background color of selected button.
+/// The base background color of the selected Button.
 /// @group button
 $kendo-button-selected-bg: $kendo-button-active-bg !default;
-/// The base text color of selected button.
+/// The base text color of the selected Button.
 /// @group button
 $kendo-button-selected-text: $kendo-button-active-text !default;
-/// The base border color of selected button.
+/// The base border color of the selected Button.
 /// @group button
 $kendo-button-selected-border: $kendo-button-active-bg !default;
-/// The base background gradient of selected button.
+/// The base background gradient of the selected Button.
 /// @group button
 $kendo-button-selected-gradient: null !default;
-/// The base shadow of selected button.
+/// The base shadow of the selected Button.
 /// @group button
 $kendo-button-selected-shadow: null !default;
 
-/// The base background of focused button.
+/// The base background of the focused Button.
 /// @group button
 $kendo-button-focus-bg: null !default;
-/// The base text color of focused button.
+/// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
-/// The base border color of focused button.
+/// The base border color of the focused Button.
 /// @group button
 $kendo-button-focus-border: null !default;
-/// The base background gradient of focused button.
+/// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
-/// The base shadow of focused buttons.
+/// The base shadow of the focused Button.
 /// @group button
 $kendo-button-focus-shadow: null !default;
 
-/// The base background color of disabled button.
+/// The base background color of the disabled Button.
 /// @group button
 $kendo-button-disabled-bg: k-try-shade( $kendo-body-bg, 12% ) !default;
-/// The base text color of disabled button.
+/// The base text color of the disabled Button.
 /// @group button
 $kendo-button-disabled-text: $kendo-disabled-text !default;
-/// The base border color of disabled button.
+/// The base border color of the disabled Button.
 /// @group button
 $kendo-button-disabled-border: $kendo-button-disabled-bg !default;
-/// The base background gradient of disabled button.
+/// The base background gradient of the disabled Button.
 /// @group button
 $kendo-button-disabled-gradient: null !default;
-/// The base shadow of disabled button.
+/// The base shadow of the disabled Button.
 /// @group button
 $kendo-button-disabled-shadow: none !default;
 
-// Solid button
+// Solid Button
 $kendo-solid-button-gradient: null !default;
 $kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: null !default;
@@ -14231,38 +14721,38 @@ $kendo-solid-button-shadow-blur: null !default;
 $kendo-solid-button-shadow-spread: null !default;
 $kendo-solid-button-shadow-opacity: null !default;
 
-// Outline button
+// Outline Button
 $kendo-outline-button-shadow: null !default;
 $kendo-outline-button-shadow-blur: null !default;
 $kendo-outline-button-shadow-spread: null !default;
 $kendo-outline-button-shadow-opacity: null !default;
 
-// link button
+// Link Button
 $kendo-link-button-shadow: null !default;
 $kendo-link-button-shadow-blur: null !default;
 $kendo-link-button-shadow-spread: null !default;
 $kendo-link-button-shadow-opacity: null !default;
 
-// Clear button
+// Clear Button
 $kendo-clear-button-focus-opacity: .155 !default; // equal to 10% of black
 
-/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-hover-opacity: .08 !default;
-/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-focus-opacity: .12 !default;
-/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// The overlay opacity of the active flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-active-opacity: .16 !default;
-/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// The overlay opacity of the selected flat Button. Used to create a background for the flat Button.
 /// @group button
 $kendo-flat-button-selected-opacity: .22 !default;
-/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// The opacity of the flat Button focus ring. Used to create a border for the flat Button.
 /// @group button
 $kendo-flat-button-focus-ring-opacity: null !default;
 
-/// The transition of the button.
+/// The box-shadow transition of the Button.
 /// @group button
 $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;
 
@@ -14271,47 +14761,71 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
 
 // Chip
 
-/// Width of the border around the button.
+/// The width of the border around the Chip.
 /// @group chip
 $kendo-chip-border-width: 1px !default;
-/// The spacing between the text and the icons of the chip.
+/// The spacing between the text and the icons of the Chip.
 /// @group chip
 $kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Horizontal padding of the chip.
+/// The horizontal padding of the Chip.
 /// @group chip
 $kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the small Chip.
+/// @group chip
 $kendo-chip-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Vertical padding of the chip.
+/// The vertical padding of the Chip.
 /// @group chip
 $kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the small Chip.
+/// @group chip
 $kendo-chip-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The vertical padding of the medium Chip.
+/// @group chip
 $kendo-chip-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the large Chip.
+/// @group chip
 $kendo-chip-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
-/// Font sizes of the chip.
+/// The font size of the Chip.
 /// @group chip
 $kendo-chip-font-size: $kendo-font-size-md !default;
+/// The font size of the small Chip.
+/// @group chip
 $kendo-chip-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Chip.
+/// @group chip
 $kendo-chip-md-font-size: $kendo-font-size-md !default;
+/// The font size of the large Chip.
+/// @group chip
 $kendo-chip-lg-font-size: $kendo-font-size-md !default;
 
-/// Line heights of the chip that are connected to the $kendo-font-size.
+/// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-line-height: k-math-div( 18, 14 ) !default;
+/// The small Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-sm-line-height: $kendo-chip-line-height !default;
+/// The medium Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-md-line-height: $kendo-chip-line-height !default;
+/// The large Chip's line height that is related to the $kendo-font-size.
+/// @group chip
 $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
-/// Calculated height of the chip.
+/// The calculated height of the Chip.
 /// @group chip
 $kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height * 1em} + #{$kendo-chip-sm-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
 
-/// Sizes map for the chip.
+/// The map with the sizes of the Chip.
 /// @group chip
 $kendo-chip-sizes: (
     sm: (
@@ -14334,11 +14848,11 @@ $kendo-chip-sizes: (
     )
 ) !default;
 
-/// The base background of the chip.
+/// The base background of the Chip.
 /// @group chip
 $kendo-chip-base-bg: if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black) !default;
 
-/// Theme colors map for the chip.
+/// The theme colors map for the Chip.
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
@@ -14348,73 +14862,73 @@ $kendo-chip-theme-colors: (
     "success": k-map-get( $kendo-theme-colors, "success" )
 ) !default;
 
-/// The base background color of solid chip.
+/// The base background color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-bg: if( $kendo-is-dark-theme, $kendo-button-bg, k-try-tint( $kendo-chip-base-bg, 92% )) !default;
-/// The base text color of solid chip.
+/// The base text color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-text: $kendo-button-text !default;
-/// The base border color of solid chip.
+/// The base border color of the solid Chip.
 /// @group chip
 $kendo-chip-solid-border: $kendo-chip-solid-bg !default;
-/// The base shadow of solid chip.
+/// The base shadow of the solid Chip.
 /// @group chip
 $kendo-chip-solid-shadow: null !default;
-/// The base gradient of solid chip.
+/// The base gradient of the solid Chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
 
-/// The base background color of focused solid chip.
+/// The base background color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-bg: k-try-tint( $kendo-chip-base-bg, 80% ) !default;
-/// The base text color of focused solid chip.
+/// The base text color of the focused solid Chip.
 /// @group chip
 $kendo-chip-solid-focus-text: null !default;
 
-/// The base background color of hovered solid chip.
+/// The base background color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
-/// The base text color of hovered solid chip.
+/// The base text color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-solid-hover-text: null !default;
 
-/// The base background color of selected solid chip.
+/// The base background color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-bg: k-try-tint( $kendo-chip-base-bg, 76% ) !default;
-/// The base text color of selected solid chip.
+/// The base text color of the selected solid Chip.
 /// @group chip
 $kendo-chip-solid-selected-text: null !default;
 
-/// The base background color of outline chip.
+/// The base background color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-bg: $kendo-component-bg !default;
-/// The base text color of outline chip.
+/// The base text color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-text: $kendo-chip-solid-text !default;
-/// The base border color of outline chip.
+/// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
-/// The base shadow of outline chip.
+/// The base shadow of the outline Chip.
 /// @group chip
 $kendo-chip-outline-shadow: null !default;
 
-/// The base background color of hovered outline chip.
+/// The base background color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: k-try-tint( $kendo-chip-base-bg, 92% ) !default;
-/// The base text color of hovered outline chip.
+/// The base text color of the hovered outline Chip.
 /// @group chip
 $kendo-chip-outline-hover-text: k-contrast-color( $kendo-chip-outline-hover-bg ) !default;
 
-/// The base background color of selected outline chip.
+/// The base background color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-bg: k-try-tint( $kendo-chip-base-bg, 84% ) !default;
-/// The base text color of selected outline chip.
+/// The base text color of the selected outline Chip.
 /// @group chip
 $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 
 // Chip List
 
-/// The sizes of the chip list.
+/// The sizes of the Chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
     sm: k-map-get( $kendo-spacing, 1 ),
@@ -18312,49 +18826,76 @@ $kendo-actions-gradient: null !default;
 // #region @import "../input/_variables.scss"; -> scss/input/_variables.scss
 // Input
 
-/// Default width of input components.
+/// The default width of the Input components.
 /// @group input
 $kendo-input-default-width: 100% !default;
 
-/// Border width of input components.
+/// The border width of the Input components.
 /// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: 1px !default;
-/// Border radius of input components.
+/// The border radius of the Input components.
 /// @group input
 $kendo-input-border-radius: null !default;
 
-/// Horizontal padding of input components.
+/// The horizontal padding of the Input components.
 /// @group input
 $kendo-input-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of input components.
+/// The horizontal padding of the small Input components.
+/// @group input
+$kendo-input-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the medium Input components.
+/// @group input
+$kendo-input-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the large Input components.
+/// @group input
+$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the Input components.
 /// @group input
 $kendo-input-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-///Font family of input components.
+/// The vertical padding of the small Input components.
+/// @group input
+$kendo-input-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Input components.
+/// @group input
+$kendo-input-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the large Input components.
+/// @group input
+$kendo-input-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The font family of the Input components.
 /// @group input
 $kendo-input-font-family: $kendo-font-family !default;
-/// Font size of input components.
+
+/// The font size of the Input components.
 /// @group input
 $kendo-input-font-size: $kendo-font-size-lg !default;
-/// Line height of input components.
+/// The font size of the small Input components.
 /// @group input
-$kendo-input-line-height: 1.25 !default;
-
-$kendo-input-sm-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-input-sm-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $kendo-input-sm-font-size: $kendo-font-size-lg !default;
-$kendo-input-sm-line-height: 1.25 !default;
-
-$kendo-input-md-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-input-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The font size of the medium Input components.
+/// @group input
 $kendo-input-md-font-size: $kendo-font-size-lg !default;
-$kendo-input-md-line-height: 1.25 !default;
-
-$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-input-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The font size of the large Input components.
+/// @group input
 $kendo-input-lg-font-size: $kendo-font-size-lg !default;
+
+/// The line height of the Input components.
+/// @group input
+$kendo-input-line-height: 1.25 !default;
+/// The line height of the small Input components.
+/// @group input
+$kendo-input-sm-line-height: 1.25 !default;
+/// The line height of the medium Input components.
+/// @group input
+$kendo-input-md-line-height: 1.25 !default;
+/// The line height of the large Input components.
+/// @group input
 $kendo-input-lg-line-height: 1.5 !default;
 
+/// The sizes map for the Input components.
+/// @group input
 $kendo-input-sizes: (
     sm: (
         padding-x: $kendo-input-sm-padding-x,
@@ -18385,142 +18926,339 @@ $kendo-input-sizes: (
     )
 ) !default;
 
+/// The background color of the Input components.
+/// @group input
 $kendo-input-bg: k-try-shade( $kendo-component-bg, .5 ) !default;
+/// The text color of the Input components.
+/// @group input
 $kendo-input-text: $kendo-component-text !default;
+/// The border color of the Input components.
+/// @group input
 $kendo-input-border: rgba( $kendo-component-border, .38 ) !default;
+/// The shadow of the Input components.
+/// @group input
 $kendo-input-shadow: null !default;
 
+/// The background color of the hovered Input components.
+/// @group input
 $kendo-input-hover-bg: null !default;
+/// The text color of the hovered Input components.
+/// @group input
 $kendo-input-hover-text: null !default;
+/// The border color of the hovered Input components.
+/// @group input
 $kendo-input-hover-border: $kendo-input-text !default;
+/// The shadow of the hovered Input components.
+/// @group input
 $kendo-input-hover-shadow: null !default;
 
+/// The background color of the focused Input components.
+/// @group input
 $kendo-input-focus-bg: null !default;
+/// The text color of the focused Input components.
+/// @group input
 $kendo-input-focus-text: null !default;
+/// The border color of the focused Input components.
+/// @group input
 $kendo-input-focus-border: $kendo-color-primary !default;
+/// The shadow of the focused Input components.
+/// @group input
 $kendo-input-focus-shadow: null !default;
 
+/// The background color of the selected Input components.
+/// @group input
+$kendo-input-selected-bg: null !default;
+/// The text color of the selected Input components.
+/// @group input
+$kendo-input-selected-text: null !default;
+
+/// The background color of the disabled Input components.
+/// @group input
 $kendo-input-disabled-bg: k-try-shade( $kendo-component-bg, .25 ) !default;
+/// The text color of the disabled Input components.
+/// @group input
 $kendo-input-disabled-text: $kendo-disabled-text !default;
+/// The border color of the disabled Input components.
+/// @group input
 $kendo-input-disabled-border: rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) ) !default;
+/// The gradient of the disabled Input components.
+/// @group input
 $kendo-input-disabled-gradient: null !default;
+/// The shadow of the disabled Input components.
+/// @group input
 $kendo-input-disabled-shadow: null !default;
 
+/// The background color of the outline Input components.
+/// @group input
 $kendo-input-outline-bg: null !default;
+/// The text color of the outline Input components.
+/// @group input
 $kendo-input-outline-text: $kendo-input-text !default;
+/// The border color of the outline Input components.
+/// @group input
 $kendo-input-outline-border: $kendo-input-border !default;
 
+/// The background color of the outline hovered Input components.
+/// @group input
 $kendo-input-outline-hover-bg: null !default;
+/// The text color of the outline hovered Input components.
+/// @group input
 $kendo-input-outline-hover-text: null !default;
+/// The border color of the outline hovered Input components.
+/// @group input
 $kendo-input-outline-hover-border: $kendo-input-hover-border !default;
 
+/// The background color of the outline focused Input components.
+/// @group input
 $kendo-input-outline-focus-bg: null !default;
+/// The text color of the outline focused Input components.
+/// @group input
 $kendo-input-outline-focus-text: null !default;
+/// The border color of the outline focused Input components.
+/// @group input
 $kendo-input-outline-focus-border: $kendo-input-focus-border !default;
+/// The shadow of the outline focused Input components.
+/// @group input
 $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The background color of the flat Input components.
+/// @group input
 $kendo-input-flat-bg: null !default;
+/// The text color of the flat Input components.
+/// @group input
 $kendo-input-flat-text: $kendo-input-text !default;
+/// The border color of the flat Input components.
+/// @group input
 $kendo-input-flat-border: $kendo-input-border !default;
 
+/// The background color of the flat hovered Input components.
+/// @group input
 $kendo-input-flat-hover-bg: null !default;
+/// The text color of the flat hovered Input components.
+/// @group input
 $kendo-input-flat-hover-text: null !default;
+/// The border color of the flat hovered Input components.
+/// @group input
 $kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
+/// The background color of the flat focused Input components.
+/// @group input
 $kendo-input-flat-focus-bg: null !default;
+/// The text color of the flat focused Input components.
+/// @group input
 $kendo-input-flat-focus-text: null !default;
+/// The border color of the flat focused Input components.
+/// @group input
 $kendo-input-flat-focus-border: $kendo-input-focus-border !default;
+/// The shadow of the flat focused Input components.
+/// @group input
 $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The text color of the Input placeholder.
+/// @group input
+$kendo-input-placeholder-text: $kendo-subtle-text !default;
+/// The opacity of the Input placeholder.
+/// @group input
+$kendo-input-placeholder-opacity: 1 !default;
+
+
+/// The color of the Input clear value icon.
+/// @group input
+$kendo-input-clear-value-text: null !default;
+/// The opacity of the Input clear value icon.
+/// @group input
+$kendo-input-clear-value-opacity: .5 !default;
+/// The color of the hovered Input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-text: null !default;
+/// The opacity of the hovered Input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-opacity: 1 !default;
+
+/// The vertical margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The horizontal margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+
+/// The width of the Input button.
+/// @group input
+$kendo-input-button-width: null !default;
+/// The border width of the Input button.
+/// @group input
+$kendo-input-button-border-width: 1px !default;
+/// The width of the Input spinner button.
+/// @group input
+$kendo-input-spinner-width: null !default;
+/// The icon offset of the Input spinner button.
+/// @group input
+$kendo-input-spinner-icon-offset: null !default;
+
+/// The color of the Input separator.
+/// @group input
+$kendo-input-separator-color: $kendo-input-text !default;
+/// The opacity of the Input separator.
+/// @group input
+$kendo-input-separator-opacity: .5 !default;
+
+/// The border color of the invalid Input components.
+/// @group input
+$kendo-input-invalid-border: $kendo-invalid-border !default;
+/// The shadow of the invalid Input components.
+/// @group input
+$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
+
+/// The background color of the Picker components.
+/// @group picker
 $kendo-picker-bg: $kendo-input-bg !default;
+/// The text color of the Picker components.
+/// @group picker
 $kendo-picker-text: $kendo-input-text !default;
+/// The border color of the Picker components.
+/// @group picker
 $kendo-picker-border: $kendo-input-border !default;
+/// The gradient of the Picker components.
+/// @group picker
 $kendo-picker-gradient: null !default;
+/// The shadow of the Picker components.
+/// @group picker
 $kendo-picker-shadow: $kendo-input-shadow !default;
 
+/// The background color of the hovered Picker components.
+/// @group picker
 $kendo-picker-hover-bg: $kendo-input-hover-bg !default;
+/// The text color of the hovered Picker components.
+/// @group picker
 $kendo-picker-hover-text: $kendo-input-hover-text !default;
+/// The border color of the hovered Picker components.
+/// @group picker
 $kendo-picker-hover-border: $kendo-input-hover-border !default;
+/// The gradient of the hovered Picker components.
+/// @group picker
 $kendo-picker-hover-gradient: null !default;
+/// The shadow of the hovered Picker components.
+/// @group picker
 $kendo-picker-hover-shadow: $kendo-input-hover-shadow !default;
 
+/// The background color of the focused Picker components.
+/// @group picker
 $kendo-picker-focus-bg: $kendo-input-focus-bg !default;
+/// The text color of the focused Picker components.
+/// @group picker
 $kendo-picker-focus-text: $kendo-input-focus-text !default;
+/// The border color of the focused Picker components.
+/// @group picker
 $kendo-picker-focus-border: $kendo-input-focus-border !default;
+/// The gradient of the focused Picker components.
+/// @group picker
 $kendo-picker-focus-gradient: null !default;
+/// The shadow of the focused Picker components.
+/// @group picker
 $kendo-picker-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The background color of the disabled Picker components.
+/// @group picker
 $kendo-picker-disabled-bg: $kendo-input-disabled-bg !default;
+/// The text color of the disabled Picker components.
+/// @group picker
 $kendo-picker-disabled-text: $kendo-input-disabled-text !default;
+/// The border color of the disabled Picker components.
+/// @group picker
 $kendo-picker-disabled-border: $kendo-input-disabled-border !default;
+/// The gradient of the disabled Picker components.
+/// @group picker
 $kendo-picker-disabled-gradient: null !default;
+/// The shadow of the disabled Picker components.
+/// @group picker
 $kendo-picker-disabled-shadow: null !default;
 
+/// The background color of the outline Picker components.
+/// @group picker
 $kendo-picker-outline-bg: null !default;
+/// The text color of the outline Picker components.
+/// @group picker
 $kendo-picker-outline-text: $kendo-picker-text !default;
+/// The border color of the outline Picker components.
+/// @group picker
 $kendo-picker-outline-border: $kendo-picker-border !default;
 
+/// The background color of the outline hovered Picker components.
+/// @group picker
 $kendo-picker-outline-hover-bg: null !default;
+/// The text color of the outline hovered Picker components.
+/// @group picker
 $kendo-picker-outline-hover-text: null !default;
+/// The border color of the outline hovered Picker components.
+/// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-hover-border !default;
 
+/// The background color of the outline focused Picker components.
+/// @group picker
 $kendo-picker-outline-focus-bg: nul !default;
+/// The text color of the outline focused Picker components.
+/// @group picker
 $kendo-picker-outline-focus-text: null !default;
+/// The border color of the outline focused Picker components.
+/// @group picker
 $kendo-picker-outline-focus-border: $kendo-picker-focus-border !default;
+/// The shadow of the outline focused Picker components.
+/// @group picker
 $kendo-picker-outline-focus-shadow: null !default;
 
+/// The background color of the outline hovered and focused Picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-bg: null !default;
+/// The text color of the outline hovered and focused Picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-text: null !default;
+/// The border color of the outline hovered and focused Picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-border: null !default;
 
+/// The background color of the flat Picker components.
+/// @group picker
 $kendo-picker-flat-bg: null !default;
+/// The text color of the flat Picker components.
+/// @group picker
 $kendo-picker-flat-text: $kendo-picker-text !default;
+/// The border color of the flat Picker components.
+/// @group picker
 $kendo-picker-flat-border: $kendo-picker-border !default;
 
+/// The background color of the flat hovered Picker components.
+/// @group picker
 $kendo-picker-flat-hover-bg: null !default;
+/// The text color of the flat hovered Picker components.
+/// @group picker
 $kendo-picker-flat-hover-text: null !default;
+/// The border color of the flat hovered Picker components.
+/// @group pickers
 $kendo-picker-flat-hover-border: $kendo-picker-hover-border !default;
 
+/// The background color of the flat focused Picker components.
+/// @group picker
 $kendo-picker-flat-focus-bg: null !default;
+/// The text color of the flat focused Picker components.
+/// @group picker
 $kendo-picker-flat-focus-text: null !default;
+/// The border color of the flat focused Picker components.
+/// @group picker
 $kendo-picker-flat-focus-border: $kendo-picker-focus-border !default;
+/// The shadow of the flat focused Picker components.
+/// @group picker
 $kendo-picker-flat-focus-shadow: null !default;
 
+/// The background color of the flat hovered and focused Picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-bg: null !default;
+/// The text color of the flat hovered and focused Picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-text: null !default;
+/// The border color of the flat hovered and focused Picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-border: null !default;
 
-$kendo-input-placeholder-text: $kendo-subtle-text !default;
-$kendo-input-placeholder-opacity: 1 !default;
-
-$kendo-input-selected-bg: null !default;
-$kendo-input-selected-text: null !default;
-
-$kendo-input-clear-value-text: null !default;
-$kendo-input-clear-value-opacity: .5 !default;
-$kendo-input-clear-value-hover-text: null !default;
-$kendo-input-clear-value-hover-opacity: 1 !default;
-
-$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
-
-
-// Input actions
-$kendo-input-button-width: null !default;
-$kendo-input-button-border-width: 1px !default;
-$kendo-input-spinner-width: null !default;
-$kendo-input-spinner-icon-offset: null !default;
-
-
-// Input separator
-$kendo-input-separator-color: $kendo-input-text !default;
-$kendo-input-separator-opacity: .5 !default;
-
-
-// Invalid
-$kendo-input-invalid-border: $kendo-invalid-border !default;
-$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
-
 // #endregion
 // #region @import "../tooltip/_variables.scss"; -> scss/tooltip/_variables.scss
 // Tooltip
@@ -20882,22 +21620,34 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/split-button/_variables.scss
 // Split-button
 
-/// Focus shadow of the split button.
+/// The focus shadow of the SplitButton.
 /// @group split-button
 $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
-/// Horizontal padding of the arrow button.
+/// The horizontal padding of the arrow Button.
 /// @group split-button
 $kendo-split-button-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the small arrow Button.
+/// @group split-button
 $kendo-split-button-sm-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium arrow Button.
+/// @group split-button
 $kendo-split-button-md-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the large arrow Button.
+/// @group split-button
 $kendo-split-button-lg-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Vertical padding of the arrow button.
+/// The vertical padding of the arrow Button.
 /// @group split-button
 $kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
+/// The vertical padding of the small arrow Button.
+/// @group split-button
 $kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
+/// The vertical padding of the medium arrow Button.
+/// @group split-button
 $kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
+/// The vertical padding of the large arrow Button.
+/// @group split-button
 $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;
 
 // #endregion
@@ -21971,153 +22721,185 @@ $_kendo-module-meta: (
 
 // Radio button
 
-/// Border radius of radio button.
+/// The border radius of the RadioButton.
 /// @group radio
 $kendo-radio-radius: 50% !default;
-/// Border width of radio button.
+/// The border width of the RadioButton.
 /// @group radio
 $kendo-radio-border-width: 2px !default;
 
-// Radio button sizes
+/// The size of a small RadioButton.
+/// @group radio
+$kendo-radio-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+/// The size of a medium RadioButton.
+/// @group radio
+$kendo-radio-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+/// The size of a large RadioButton.
+/// @group radio
+$kendo-radio-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+
+/// The glyph size of a small RadioButton.
+/// @group radio
+$kendo-radio-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The glyph size of a medium RadioButton.
+/// @group radio
+$kendo-radio-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+/// The glyph size of a large RadioButton.
+/// @group radio
+$kendo-radio-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+
+/// The ripple size of a small RadioButton.
+/// @group radio
+$kendo-radio-sm-ripple-size: 300% !default;
+/// The ripple size of a medium RadioButton.
+/// @group radio
+$kendo-radio-md-ripple-size: 300% !default;
+/// The ripple size of a large RadioButton.
+/// @group radio
+$kendo-radio-lg-ripple-size: 300% !default;
+
+/// The map with the different RadioButton sizes.
+/// @group radio
 $kendo-radio-sizes: (
     sm: (
-        size: k-map-get( $kendo-spacing, 3 ),
-        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
-        ripple-size: 300%
+        size: $kendo-radio-sm-size,
+        glyph-size: $kendo-radio-sm-glyph-size,
+        ripple-size: $kendo-radio-sm-ripple-size
     ),
     md: (
-        size: k-map-get( $kendo-spacing, 4 ),
-        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
-        ripple-size: 300%
+        size: $kendo-radio-md-size,
+        glyph-size: $kendo-radio-md-glyph-size,
+        ripple-size: $kendo-radio-md-ripple-size
     ),
     lg: (
-        size: k-map-get( $kendo-spacing, 5 ),
-        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
-        ripple-size: 300%
+        size: $kendo-radio-lg-size,
+        glyph-size: $kendo-radio-lg-glyph-size,
+        ripple-size: $kendo-radio-lg-ripple-size
     )
 ) !default;
 
-/// Background color of radio button.
+/// The background color of the RadioButton.
 /// @group radio
 $kendo-radio-bg: $kendo-checkbox-bg !default;
-/// Color of radio button.
+/// The color of the RadioButton.
 /// @group radio
 $kendo-radio-text: $kendo-checkbox-text !default;
-/// Border color of radio button.
+/// The border color of the RadioButton.
 /// @group radio
 $kendo-radio-border: $kendo-checkbox-border !default;
 
-/// Background color of hovered radio button.
+/// The background color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-bg: null !default;
-/// Color of hovered radio button.
+/// The color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-text: null !default;
-/// Border color of hovered radio button.
+/// The border color of the hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-border: null !default;
 
-/// Background color of checked radio button.
+/// The background color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-bg: null !default;
-/// Color of checked radio button.
+/// The color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-text: $kendo-color-primary !default;
-/// Border color of checked radio button.
+/// The border color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-border: $kendo-radio-checked-text !default;
 
-/// Border color of focused radio button.
+/// The border color of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
-/// Box shadow of focused radio button.
+/// The box shadow of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
-/// Border color of focused and checked radio button.
+
+/// The border color of the focused and checked RadioButton.
 /// @group radio
 $kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
-/// Box shadow of focused and checked radio button.
+/// The box shadow of the focused and checked RadioButton.
 /// @group radio
 $kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
-/// Background color of disabled radio button.
+/// The background color of the disabled RadioButton.
 /// @group radio
 $kendo-radio-disabled-bg: null !default;
-/// Color of disabled radio button.
+/// The color of the disabled RadioButton.
 /// @group radio
 $kendo-radio-disabled-text: null !default;
-/// Border color of disabled radio button.
+/// The border color of the disabled RadioButton.
 /// @group radio
 $kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
-/// Background color of disabled and checked radio button.
+/// The background color of the disabled and checked RadioButton.
 /// @group radio
 $kendo-radio-disabled-checked-bg: null !default;
-/// Color of disabled and checked radio button.
+/// The color of the disabled and checked RadioButton.
 /// @group radio
 $kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
-/// Border color of disabled and checked radio button.
+/// The border color of disabled and checked RadioButton.
 /// @group radio
 $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
 
-/// Background color of invalid radio button.
+/// The background color of the invalid RadioButton.
 /// @group radio
 $kendo-radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
-/// Color of invalid radio button.
+/// The color of the invalid RadioButton.
 /// @group radio
 $kendo-radio-invalid-text: $kendo-checkbox-invalid-text !default;
-/// Border color of invalid radio button.
+/// The border color of the invalid RadioButton.
 /// @group radio
 $kendo-radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator
 
-/// Type of radio button indicator.
+/// The type of the RadioButton indicator.
 /// @group radio
 $kendo-radio-indicator-type: image !default;
 
-/// Glyph font family of radio button indicator.
+/// The font family of the RadioButton indicator glyph.
 /// @group radio
 $kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
-/// Glyph of radio button indicator.
+/// The glyph of the RadioButton indicator.
 /// @group radio
 $kendo-radio-checked-glyph: "\e308" !default;
 
-/// Image of checked radio button indicator.
+/// The image of the checked RadioButton indicator.
 /// @group radio
 $kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
-/// Image of disabled and checked radio button indicator.
+/// The image of the disabled and checked RadioButton indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
 
 
 // Radio label
 
-/// The horizontal margin of the radio button inside of a label.
+/// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
 $kendo-radio-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Radio list
 
-/// Spacing between items of horizontal radio button list.
+/// The horizontal list item margin of the RadioButton.
 /// @group radio
 $kendo-radio-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
-/// Horizontal padding of radio button list items.
+/// The horizontal list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
-/// Vertical padding of radio button list items.
+/// The vertical list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 
 // Radio ripple
 
-/// Background color of radio button ripple.
+/// The background color of the RadioButton ripple..
 /// @group radio
 $kendo-radio-ripple-bg: $kendo-color-primary !default;
-/// Opacity of radio button ripple.
+/// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .2 !default;
 
@@ -27458,27 +28240,27 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/switch/_variables.scss
 // Switch
 
-/// Font family of the switch.
+/// The font family of the Switch.
 /// @group switch
 $kendo-switch-font-family: null !default;
 
-/// Border width of the switch track.
+/// The border width of the Switch track.
 /// @group switch
 $kendo-switch-track-border-width: null !default;
 
-/// Border width of the switch thumb.
+/// The border width of the Switch thumb.
 /// @group switch
 $kendo-switch-thumb-border-width: null !default;
 
-/// Text transform of the switch label.
+/// The text transform of the Switch label.
 /// @group switch
 $kendo-switch-label-text-transform: null !default;
 
-/// Display of the switch label.
+/// The display of the Switch label.
 /// @group switch
 $kendo-switch-label-display: none !default;
 
-/// Map with the different switch sizes.
+/// The map with the different Switch sizes.
 /// @group switch
 $kendo-switch-sizes: (
     sm: ( font-size: null, track-width: 26px, track-height:  12px, thumb-width: 16px, thumb-height: 16px, thumb-offset: -2px, label-offset: 0px ),
@@ -27486,166 +28268,166 @@ $kendo-switch-sizes: (
     lg: ( font-size: null, track-width: 38px, track-height:  16px, thumb-width: 24px, thumb-height: 24px, thumb-offset: -4px, label-offset: 0px )
 ) !default;
 
-/// The background of the track when the switch is not checked.
+/// The background of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-bg: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) !default;
-/// The text color of the track when the switch is not checked.
+/// The text color of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: null !default;
-/// The border color of the track when the switch is not checked.
+/// The border color of the track when the Switch is not checked
 /// @group switch
 $kendo-switch-off-track-border: null !default;
-/// The background gradient of the track when the switch is not checked.
+/// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
 
-/// The background of the track when hovered switch is not checked.
+/// The background of the track when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-hover-bg: null !default;
-/// The text color of the track when hovered switch is not checked.
+/// The text color of the track when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-hover-text: null !default;
-/// The border color of the track when hovered switch is not checked.
+/// The border color of the track when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-hover-border: null !default;
-/// The background gradient of the track when hovered switch is not checked.
+/// The background gradient of the track when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-hover-gradient: null !default;
 
-/// The background of the track when focused switch is not checked.
+/// The background of the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-bg: null !default;
-/// The text color of the track when focused switch is not checked.
+/// The text color of the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-text: null !default;
-/// The border color of the track when focused switch is not checked.
+/// The border color of the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-border: null !default;
-/// The background gradient of the track when focused switch is not checked.
+/// The background gradient of the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-gradient: null !default;
-/// The ring around the track when focused switch is not checked.
+/// The ring around the track when the focused Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-focus-ring: null !default;
 
-/// The background of the track when disabled switch is not checked.
+/// The background of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-bg: null !default;
-/// The text color of the track when disabled switch is not checked.
+/// The text color of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-text: null !default;
-/// The border color of the track when disabled switch is not checked.
+/// The border color of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-border: null !default;
-/// The background gradient of the track when disabled switch is not checked.
+/// The background gradient of the track when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-disabled-gradient: null !default;
 
-/// The background of the thumb when the switch is not checked.
+/// The background of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-bg: if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white ) !default;
-/// The text color of the thumb when the switch is not checked.
+/// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;
-/// The border color of the thumb when the switch is not checked.
+/// The border color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-border: null !default;
-/// The background gradient of the thumb when the switch is not checked.
+/// The background gradient of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-gradient: null !default;
 
-/// The background of the thumb when the hovered switch is not checked.
+/// The background of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-bg: null !default;
-/// The text color of the thumb when the hovered switch is not checked.
+/// The text color of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: null !default;
-/// The border color of the thumb when the hovered switch is not checked.
+/// The border color of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-border: null !default;
-/// The background gradient of the thumb when the hovered switch is not checked.
+/// The background gradient of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-gradient: null !default;
 
 
-/// The background of the track when the switch is checked.
+/// The background of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-bg: rgba( $kendo-color-primary, .54 ) !default;
-/// The text color of the track when the switch is checked.
+/// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;
-/// The border color of the track when the switch is checked.
+/// The border color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: null !default;
-/// The background gradient of the track when the switch is checked.
+/// The background gradient of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-gradient: null !default;
 
-/// The background of the track when the hovered switch is checked.
+/// The background of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-bg: null !default;
-/// The text color of the track when the hovered switch is checked.
+/// The text color of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-text: null !default;
-/// The border color of the track when the hovered switch is checked.
+/// The border color of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-border: null !default;
-/// The background gradient of the track when the hovered switch is checked.
+/// The background gradient of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-gradient: null !default;
 
-/// The background of the track when the focused switch is checked.
+/// The background of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-bg: null !default;
-/// The text color of the track when the focused switch is checked.
+/// The text color of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-text: null !default;
-/// The border color of the track when the focused switch is checked.
+/// The border color of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-border: null !default;
-/// The background gradient of the track when the focused switch is checked.
+/// The background gradient of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-gradient: null !default;
-/// The ring around the track when the focused switch is checked.
+/// The ring around the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-ring: null !default;
 
-/// The background of the track when the disabled switch is checked.
+/// The background of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-bg: null !default;
-/// The text color of the track when the disabled switch is checked.
+/// The text color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-text: null !default;
-/// The border color of the track when the disabled switch is checked.
+/// The border color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-border: null !default;
-/// The background gradient of the track when the disabled switch is checked.
+/// The background gradient of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-gradient: null !default;
 
-/// The background of the thumb when the switch is checked.
+/// The background of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-bg: $kendo-color-primary !default;
-/// The text color of the thumb when the switch is checked.
+/// The text color of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-text: null !default;
-/// The border color of the thumb when the switch is checked.
+/// The border color of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-border: null !default;
-/// The background gradient of the thumb when the switch is checked.
+/// The background gradient of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-gradient: null !default;
 
-/// The background of the thumb when the hovered switch is checked.
+/// The background of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-bg: null !default;
-/// The text color of the thumb when the hovered switch is checked.
+/// The text color of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: null !default;
-/// The border color of the thumb when the hovered switch is checked.
+/// The border color of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-border: null !default;
-/// The background gradient of the thumb when the hovered switch is checked.
+/// The background gradient of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-gradient: null !default;
 
@@ -43149,7 +43931,6 @@ $kendo-editor-selectednode-outline-color: #8cf !default; // sass-lint:disable-li
         display: flex;
         flex-flow: column nowrap;
         position: relative;
-        z-index: 1;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;