@progress/kendo-theme-default 6.5.0-dev.0 → 6.5.0-dev.2

package/dist/all.scss

@@ -5,18 +5,10 @@
 // #region @import "./core/_index.scss"; -> scss/core/_index.scss
 $wcag-min-contrast-ratio: 4.5 !default;
 
-// Functions
-// #region @import "./functions/index.import.scss"; -> scss/core/functions/index.import.scss
+// Variables
+// #region @import "../_variables.scss"; -> scss/_variables.scss
+// #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
 // #region @import "@progress/kendo-theme-core/scss/functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
-// #region @import "../_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
-// Equilateral triangle variables
-// stylelint-disable number-max-precision
-$equilateral-index: 1.7320508076 !default;
-$equilateral-height: .8660254038 !default;
-// stylelint-enable number-max-precision
-
-// #endregion
-
 // #region @import "./_color.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_color.import.scss
 /// Returns the alpha channel of a color.
 /// @param {Color} $color - The color to get the alpha channel for.
@@ -1242,6 +1234,36 @@ $_kendo-escape-class-name: (
     @return $map;
 }
 
+/// Returns a deep-map with the keys and values from `$map` and `$args`.
+/// @param {Map} $maps - The maps to deep-merge.
+/// @return {Map} - A map with the keys and values from `$map` and `$args`.
+///
+/// @example scss - Usage
+///   @debug k-map-deep-merge( ( "foo": ("bar": "baz", "baz": "qux" ) ), ( "foo": ("bar": "foo") ) ); // => ( "foo": ("bar": "foo", "baz": "qux" ))
+@function k-map-deep-merge($maps...) {
+    $merged: ();
+  
+    @each $map in $maps {
+      @each $key, $val in $map {
+        @if (k-meta-type-of($val) == 'map') {
+          $current: k-map-get($merged, $key);
+          @if (k-meta-type-of($current) == 'map') {
+            $val: k-map-deep-merge($current, $val);
+            $map: k-map-merge(
+              $map,
+              (
+                $key: $val
+              )
+            );
+          }
+        }
+      }
+      $merged: k-map-merge($merged, $map);
+    }
+  
+    @return $merged;
+  }
+
 /// Returns a map with the keys and values from `$map` except for `$keys`.
 /// @param {Map} $map - The map to remove keys from.
 /// @param {Any} $keys - The keys to remove from `$map`.
@@ -1323,6 +1345,10 @@ $_kendo-escape-class-name: (
 /// @example scss - Usage
 ///   @debug k-meta-function-exists( "k-string-replace" ); // => true
 @function k-meta-function-exists( $name ) {
+    @if $name == "" {
+        @return false;
+    }
+
     @return function-exists( $name );
 }
 
@@ -1543,6 +1569,15 @@ $_kendo-escape-class-name: (
 
 // #endregion
 // #region @import "./_string.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/_string.import.scss
+$svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
 /// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
 /// @param {String} $string - The string to process.
 /// @param {String} $substring - The substring to look for.
@@ -1662,329 +1697,664 @@ $_kendo-escape-class-name: (
     @return unquote( $string );
 }
 
-// #endregion
 
-// #endregion
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: k-string-index($string, $search);
 
-// #endregion
+    @if $index {
+        @return k-string-slice($string, 1, $index - 1) + $replace + str-replace(k-string-slice($string, $index + k-string-length($search)), $search, $replace);
+    }
 
-// Color system
-// #region @import "./color-system/index.import.scss"; -> scss/core/color-system/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
-// #region @import "./_functions.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
-@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
-    $result: ();
+    @return $string;
+}
 
-    @each $ui-state, $indices in $matrix {
-        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
-        $indices-count: k-list-length( $indices );
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{str-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: str-replace($string, $char, $encoded);
+            }
+        }
+    }
 
-        $bg-prop: k-list-nth( $indices, 1 );
-        $text-prop: k-list-nth( $indices, 2 );
-        $border-prop: k-list-nth( $indices, 3 );
-        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
-        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
-        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+    @return $string;
+}
 
-        // Take value from the palette only if it is a number
-        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
-        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
-        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
-        $gradient: $gradient-prop;
-        $shadow: $shadow-prop;
-        $outline: $outline-prop;
+// #endregion
 
-        $result: k-map-merge($result, (
-            #{$prefix}bg: $bg,
-            #{$prefix}text: $text,
-            #{$prefix}border: $border,
-            #{$prefix}gradient: $gradient,
-            #{$prefix}shadow: $shadow,
-            #{$prefix}outline: $outline
-        ));
-    }
+// #endregion
 
-    $result: (
-        #{$variant}: $result
-    );
+// #endregion
 
-    @return $result;
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
-};
+// Options
+$kendo-enable-rounded: true !default;
+$kendo-enable-shadows: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
+$kendo-enable-focus-contrast: false !default;
+$kendo-enable-typography: false !default;
 
+$kendo-use-input-button-width: true !default;
+$kendo-use-input-spinner-width: true !default;
+$kendo-use-input-spinner-icon-offset: false !default;
 
-@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
-    $result: ();
+$kendo-auto-bootstrap: true !default;
 
-    // @debug $theme-matrix;
-    // @debug $palette-matrix;
 
-    @each $variant, $definition in $theme-matrix {
-        $tc-index: k-string-index( $variant, "THEME_COLOR" );
-        $src-palette-name: k-map-get( $definition, PALETTE );
-        $matrix: k-map-remove( $definition, PALETTE );
+// Spacing
+$kendo-spacing: (
+    0: 0,
+    1px: 1px,
+    0.5: 2px,
+    1: 4px,
+    1.5: 6px,
+    2: 8px,
+    2.5: 10px,
+    3: 12px,
+    3.5: 14px,
+    4: 16px,
+    4.5: 18px,
+    5: 20px,
+    5.5: 22px,
+    6: 24px,
+    6.5: 26px,
+    7: 28px,
+    7.5: 30px,
+    8: 32px,
+    9: 36px,
+    10: 40px,
+    11: 44px,
+    12: 48px,
+    13: 52px,
+    14: 56px,
+    15: 60px,
+    16: 64px,
+    17: 68px,
+    18: 72px,
+    19: 76px,
+    20: 80px,
+    21: 84px,
+    22: 88px,
+    23: 92px,
+    24: 96px
+) !default;
 
-        @if ($tc-index == null ) { // stylelint-disable-line
-            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
-            $result: k-map-merge( $result, $tmp-result);
-        } @else {
-            @each $color, $palette in $palette-matrix {
-                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
-                $palette-name: k-string-unquote($src-palette-name + "");
 
-                @if ($palette-name == THEME_COLOR) {
-                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
-                    $palette-name: k-map-get( $palette-matrix, $palette-name );
-                }
+/// Icon size.
+/// @group common
+$kendo-icon-size: 16px !default;
+/// xtra small icon size.
+/// @group common
+$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
+/// Small icon size.
+/// @group common
+$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
+/// Medium icon size.
+/// @group common
+$kendo-icon-size-md: $kendo-icon-size !default;
+/// Large icon size.
+/// @group common
+$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
+/// Extra large icon size.
+/// @group common
+$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
+/// Double extra large icon size.
+/// @group common
+$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
+/// Triple extra large icon size.
+/// @group common
+$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
 
-                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
-                $result: k-map-merge( $result, $tmp-result );
-            }
-        }
-    }
+$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
-    @return $result;
-}
+/// Horizontal padding.
+/// @group common
+$kendo-padding-x: 8px !default;
+/// Vertical padding.
+/// @group common
+$kendo-padding-y: 4px !default;
+/// Small horizontal padding.
+/// @group common
+$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// Small vertical padding.
+/// @group common
+$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+/// Medium horizontal padding.
+/// @group common
+$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// Medium vertical padding.
+/// @group common
+$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// Large horizontal padding.
+/// @group common
+$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
+/// Large vertical padding.
+/// @group common
+$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
+/// Border radius for all components.
+/// @group common
+$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+/// Small border radius.
+/// @group common
+$kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default;
+/// Medium border radius.
+/// @group common
+$kendo-border-radius-md: $kendo-border-radius !default;
+/// Large border radius.
+/// @group common
+$kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default;
 
-@function k-get-theme-palette( $name ) {
-    @return k-map-get( $kendo-palettes, $name );
-}
+$kendo-border-radii: (
+    DEFAULT: $kendo-border-radius-md,
+    0: 0,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
+    lg: $kendo-border-radius-lg,
+    full: 9999px
+) !default;
 
-@function k-get-theme-color( $palette, $hue ) {
-    @if ( k-meta-type-of( $palette ) == "map" ) {
-        @return k-map-get( $palette, $hue );
-    }
 
-    @return k-map-get( k-get-theme-palette( $palette ), $hue );
-}
+$kendo-zindex-popup: 1 !default;
+$kendo-zindex-window: 2 !default;
+$kendo-zindex-loading: 100 !default;
 
-@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
-    @return var( --#{$prefix}#{$name}, #{$fallback} );
-}
 
-// #endregion
-// #region @import "./_mixins.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
+// Color settings
+$kendo-is-dark-theme: false !default;
 
-// #endregion
-// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
-// Color constants
+// Theme colors
+/// The color that focuses the user attention.
+/// Used for primary buttons and for elements of primary importance across the theme.
+/// @group color-system
+/// @type Color
+$kendo-color-primary: #ff6358 !default;
+$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default;
+$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default;
 
-/// The color white.
-/// Note: you cannot change this value.
+/// The color used along with the primary color denoted by $kendo-color-primary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
 /// @type Color
+$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default;
+
+/// The secondary color of the theme.
 /// @group color-system
-$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-secondary: #666666 !default;
+$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
+$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
 
-/// The color black.
-/// Note: you cannot change this value.
+/// The color used along with the secondary color denoted by $kendo-color-secondary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
 /// @type Color
+$kendo-color-secondary-contrast: k-contrast-legacy( $kendo-color-secondary ) !default;
+
+/// The tertiary color of the theme.
 /// @group color-system
-$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-tertiary: #03a9f4 !default;
+$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
+$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
 
-/// The color transparent.
-/// Note: you cannot change this value.
+/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
+/// Used to provide contrast between the background and foreground colors.
+/// @group color-system
 /// @type Color
+$kendo-color-tertiary-contrast: k-contrast-legacy( $kendo-color-tertiary ) !default;
+
+/// The color for informational messages and states.
 /// @group color-system
-$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-info: #0058e9 !default;
+$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default;
+$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default;
 
-/// A gradient that goes from transparent to black.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The color for success messages and states.
 /// @group color-system
-$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-success: #37b400 !default;
+$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default;
+$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default;
 
-/// A gradient that goes from transparent to white.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The color for warning messages and states.
 /// @group color-system
-$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-warning: #ffc000 !default;
+$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default;
+$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default;
 
-/// A gradient that goes from black to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The color for error messages and states.
 /// @group color-system
-$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-error: #f31700 !default;
+$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default;
+$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default;
 
-/// A gradient that goes from white to transparent.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The dark color of the theme.
 /// @group color-system
-$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-dark: #424242 !default;
 
-/// A gradient that cycles through the colors of the rainbow.
-/// Note: you cannot change this value.
-/// @type Gradient
+/// The light color of the theme.
 /// @group color-system
-$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+/// @type Color
+$kendo-color-light: #ebebeb !default;
 
-// #endregion
-// #region @import "./_palettes.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_palettes.scss
-/// Color palettes to be used in the Kendo UI themes.
-/// @access private
-/// @type Record<String, ColorMap>
-/// @prop {ColorMap} neutral - The neutral palette
-/// @prop {ColorMap} marsala - The marsala palette
-/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
-/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
-/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
-/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
-/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
-/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
-/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
-/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
-/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
-/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
-/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
-/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
-/// @prop {ColorMap} materialGray - The Material gray palette
-/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
-/// @prop {ColorMap} materialRed - The Material red palette
-/// @prop {ColorMap} materialPink - The Material pink palette
-/// @prop {ColorMap} materialPurple - The Material purple palette
-/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
-/// @prop {ColorMap} materialIndigo - The Material indigo palette
-/// @prop {ColorMap} materialBlue - The Material blue palette
-/// @prop {ColorMap} materialLightBlue - The Material light blue palette
-/// @prop {ColorMap} materialCyan - The Material cyan palette
-/// @prop {ColorMap} materialTeal - The Material teal palette
-/// @prop {ColorMap} materialGreen - The Material green palette
-/// @prop {ColorMap} materialLightGreen - The Material light green palette
-/// @prop {ColorMap} materialLime - The Material lime palette
-/// @prop {ColorMap} materialYellow - The Material yellow palette
-/// @prop {ColorMap} materialAmber - The Material amber palette
-/// @prop {ColorMap} materialOrange - The Material orange palette
-/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
-/// @prop {ColorMap} materialBrown - The Material brown palette
-/// @prop {ColorMap} primerGray - The Primer gray palette
-/// @prop {ColorMap} primerBlue - The Primer blue palette
-/// @prop {ColorMap} primerGreen - The Primer green palette
-/// @prop {ColorMap} primerYellow - The Primer yellow palette
-/// @prop {ColorMap} primerOrange - The Primer orange palette
-/// @prop {ColorMap} primerRed - The Primer red palette
-/// @prop {ColorMap} primerPurple - The Primer purple palette
-/// @prop {ColorMap} primerPink - The Primer pink palette
-/// @prop {ColorMap} primerCoral - The Primer coral palette
-/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
-/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
-/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
-/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
-/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
-/// @prop {ColorMap} tailwindRed - The Tailwind red palette
-/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
-/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
-/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
-/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
-/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
-/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
-/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
-/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
-/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
-/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
-/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
-/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
-/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
-/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
-/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
-/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
-///
+/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
 /// @group color-system
-$kendo-palettes: (
+$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
 
-    // Kendo
-    neutral: (
-        0: #ffffff,
-        50: #f8f8f8,
-        100: #ededed,
-        200: #d6d6d6,
-        300: #b7b7b7,
-        400: #949494,
-        500: #767676,
-        600: #5f5f5f,
-        700: #494949,
-        800: #373737,
-        900: #282828,
-        1000: #000000
-    ),
-    marsala: (
-        0: #ffffff,
-        50: #faf0f2,
-        100: #f3dde0,
-        200: #e197a3,
-        300: #c54e69,
-        400: #8b3548,
-        500: #622331,
-        600: #551d2a,
-        700: #441620,
-        800: #340f17,
-        900: #23080e,
-        1000: #000000
-    ),
 
+$kendo-theme-colors: (
+    "primary": $kendo-color-primary,
+    "secondary": $kendo-color-secondary,
+    "tertiary": $kendo-color-tertiary,
+    "info": $kendo-color-info,
+    "success": $kendo-color-success,
+    "warning": $kendo-color-warning,
+    "error": $kendo-color-error,
+    "dark": $kendo-color-dark,
+    "light": $kendo-color-light,
+    "inverse": $kendo-color-inverse
+) !default;
 
-    // Bootstrap
-    bootstrapGray: (
-        0: #ffffff,
-        100: #f8f9fa,
-        200: #e9ecef,
-        300: #dee2e6,
-        400: #ced4da,
-        500: #adb5bd,
-        600: #6c757d,
-        700: #495057,
-        800: #343a40,
-        900: #212529,
-        1000: #000000
-    ),
-    bootstrapBlue: (
-        0: #ffffff,
-        100: #cfe2ff,
-        200: #9ec5fe,
-        300: #6ea8fe,
-        400: #3d8bfd,
-        500: #0d6efd,
-        600: #0a58ca,
-        700: #084298,
-        800: #052c65,
-        900: #031633,
-        1000: #000000
-    ),
-    bootstrapIndigo: (
-        0: #ffffff,
-        100: #e0cffc,
-        200: #c29ffa,
-        300: #a370f7,
-        400: #8540f5,
-        500: #6610f2,
-        600: #520dc2,
-        700: #3d0a91,
-        800: #290661,
-        900: #140330,
-        1000: #000000
-    ),
-    bootstrapPurple: (
-        0: #ffffff,
-        100: #e2d9f3,
-        200: #c5b3e6,
-        300: #a98eda,
-        400: #8c68cd,
-        500: #6f42c1,
-        600: #59359a,
-        700: #432874,
-        800: #2c1a4d,
-        900: #160d27,
-        1000: #000000
-    ),
-    bootstrapPink: (
-        0: #ffffff,
-        100: #f7d6e6,
-        200: #efadce,
-        300: #e685b5,
-        400: #de5c9d,
-        500: #d63384,
-        600: #ab296a,
-        700: #801f4f,
-        800: #561435,
+
+// Typography
+
+/// Base font size across all components.
+/// @group typography
+$kendo-font-size: 14px !default;
+/// Extra small font size across all components.
+/// @group typography
+$kendo-font-size-xs: 10px !default;
+/// Small font size across all components.
+/// @group typography
+$kendo-font-size-sm: 12px !default;
+/// Medium font size across all components.
+/// @group typography
+$kendo-font-size-md: $kendo-font-size !default;
+/// Large font size across all components.
+/// @group typography
+$kendo-font-size-lg: 16px !default;
+/// Extra large font size across all components.
+/// @group typography
+$kendo-font-size-xl: 20px !default;
+
+$kendo-font-sizes: (
+    xs: $kendo-font-size-xs,
+    sm: $kendo-font-size-sm,
+    md: $kendo-font-size-md,
+    lg: $kendo-font-size-lg,
+    xl: $kendo-font-size-xl
+) !default;
+
+/// Font family for text.
+/// @group typography
+$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+/// Font family for monospaced text. Used for styling the code.
+/// @group typography
+$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+/// Font family across all components.
+/// @group typography
+$kendo-font-family: inherit !default;
+
+/// Line height used along with $kendo-font-size.
+/// @group typography
+$kendo-line-height: k-math-div( 20, 14 ) !default;
+/// Extra small line height used along with $kendo-font-size-xs.
+/// @group typography
+$kendo-line-height-xs: 1 !default;
+/// Small line height used along with $kendo-font-size-sm.
+/// @group typography
+$kendo-line-height-sm: 1.25 !default;
+/// Medium line height used along with $kendo-font-size-md.
+/// @group typography
+$kendo-line-height-md: $kendo-line-height !default;
+/// Large line height used along with $kendo-font-size-lg.
+/// @group typography
+$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
+
+/// Light font weight.
+/// @group typography
+$kendo-font-weight-light: 300 !default;
+/// Normal font weight.
+/// @group typography
+$kendo-font-weight-normal: 400 !default;
+/// Medium font weight.
+/// @group typography
+$kendo-font-weight-medium: 500 !default;
+/// Semibold font weight.
+/// @group typography
+$kendo-font-weight-semibold: 600 !default;
+/// Bold font weight.
+/// @group typography
+$kendo-font-weight-bold: 700 !default;
+
+/// Letter spacing.
+/// @group typography
+$kendo-letter-spacing: null !default;
+
+
+// Generic styles
+
+/// Background color of the body.
+/// @group common
+$kendo-body-bg: $kendo-color-white !default;
+/// Text color of the body.
+/// @group common
+$kendo-body-text: #424242 !default;
+
+/// Subtle text color.
+/// @group common
+$kendo-subtle-text: #666666 !default;
+
+$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
+$kendo-app-text: $kendo-body-text !default;
+$kendo-app-border: rgba( $kendo-color-black, .08 ) !default;
+
+// Link
+/// Text color of the links.
+/// @group common
+$kendo-link-text: $kendo-color-primary !default;
+/// Text color of the links on hover.
+/// @group common
+$kendo-link-hover-text: $kendo-color-primary-darker !default;
+
+
+// Components
+
+// Component
+/// Background color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
+/// @group component
+$kendo-component-bg: $kendo-body-bg !default;
+/// Text color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
+/// @group component
+$kendo-component-text: $kendo-body-text !default;
+/// Border color of a component.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
+/// @group component
+$kendo-component-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+
+
+/// The background of the components' chrome area.
+$kendo-base-bg: #fafafa !default;
+/// The text color of the components' chrome area.
+$kendo-base-text: $kendo-body-text !default;
+/// The border color of the components' chrome area.
+$kendo-base-border: rgba( black, .08 ) !default;
+/// The gradient background of the components' chrome area.
+$kendo-base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+
+/// The background of hovered items.
+$kendo-hover-bg: k-try-shade( $kendo-base-bg, .5 ) !default;
+/// The text color of hovered items.
+$kendo-hover-text: $kendo-base-text !default;
+/// The border color of hovered items.
+$kendo-hover-border: $kendo-base-border !default;
+/// The gradient background of hovered items.
+$kendo-hover-gradient: $kendo-base-gradient !default;
+
+/// The background of selected items.
+$kendo-selected-bg: $kendo-color-primary !default;
+/// The text color of selected items.
+$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
+/// The border color of selected items.
+$kendo-selected-border: $kendo-base-border !default;
+/// The gradient background of selected items.
+$kendo-selected-gradient: $kendo-base-gradient !default;
+
+/// The background of selected and hovered items.
+$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
+/// The text color of selected and hovered items.
+$kendo-selected-hover-text: $kendo-selected-text !default;
+/// The border of selected and hovered items.
+$kendo-selected-hover-border: $kendo-base-border !default;
+/// The gradient of selected and hovered items.
+$kendo-selected-hover-gradient: $kendo-base-gradient !default;
+
+// TODO: refactor
+/// Box shadow of focused items.
+$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+
+/// Transition used across all components.
+$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
+
+
+/// Text color of disabled items.
+$kendo-disabled-text: #8f8f8f !default;
+/// Filter used for disabled items.
+$kendo-disabled-filter: grayscale(.1) !default;
+/// Opacity used for disabled items.
+$kendo-disabled-opacity: .6 !default;
+
+$kendo-disabled-styling: (
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
+
+
+// Generic styles
+
+/// Background color of the component header.
+/// @group component
+$kendo-component-header-bg: $kendo-base-bg !default;
+/// Text color of the component header.
+/// @group component
+$kendo-component-header-text: $kendo-base-text !default;
+/// Border color of the component header.
+/// @group component
+$kendo-component-header-border: $kendo-base-border !default;
+/// Gradient of the component header.
+/// @group component
+$kendo-component-header-gradient: null !default;
+
+
+/// Background color of the invalid items.
+/// @group component
+$kendo-invalid-bg: null !default;
+/// Text color of the invalid items.
+/// @group component
+$kendo-invalid-text: $kendo-color-error !default;
+/// Border color of the invalid items.
+/// @group component
+$kendo-invalid-border: $kendo-color-error !default;
+/// Shadow of the invalid items.
+/// @group component
+$kendo-invalid-shadow: null !default;
+
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+// #endregion
+
+// #region @import "@progress/kendo-theme-core/scss/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/index.import.scss
+// #region @import "./functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+// #region @import "./color-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
+// #region @import "./_functions.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_functions.import.scss
+// #region @import "./_palettes.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_palettes.scss
+/// Color palettes to be used in the Kendo UI themes.
+/// @access private
+/// @type Record<String, ColorMap>
+/// @prop {ColorMap} neutral - The neutral palette
+/// @prop {ColorMap} marsala - The marsala palette
+/// @prop {ColorMap} bootstrapGray - The Bootstrap gray palette
+/// @prop {ColorMap} bootstrapBlue - The Bootstrap blue palette
+/// @prop {ColorMap} bootstrapIndigo - The Bootstrap indigo palette
+/// @prop {ColorMap} bootstrapPurple - The Bootstrap purple palette
+/// @prop {ColorMap} bootstrapPink - The Bootstrap pink palette
+/// @prop {ColorMap} bootstrapRed - The Bootstrap red palette
+/// @prop {ColorMap} bootstrapOrange - The Bootstrap orange palette
+/// @prop {ColorMap} bootstrapYellow - The Bootstrap yellow palette
+/// @prop {ColorMap} bootstrapGreen - The Bootstrap green palette
+/// @prop {ColorMap} bootstrapTeal - The Bootstrap teal palette
+/// @prop {ColorMap} bootstrapCyan - The Bootstrap cyan palette
+/// @prop {ColorMap} fluentNeutral - The Fluent neutral palette
+/// @prop {ColorMap} materialGray - The Material gray palette
+/// @prop {ColorMap} materialBlueGray - The Material blue gray palette
+/// @prop {ColorMap} materialRed - The Material red palette
+/// @prop {ColorMap} materialPink - The Material pink palette
+/// @prop {ColorMap} materialPurple - The Material purple palette
+/// @prop {ColorMap} materialDeepPurple - The Material deep purple palette
+/// @prop {ColorMap} materialIndigo - The Material indigo palette
+/// @prop {ColorMap} materialBlue - The Material blue palette
+/// @prop {ColorMap} materialLightBlue - The Material light blue palette
+/// @prop {ColorMap} materialCyan - The Material cyan palette
+/// @prop {ColorMap} materialTeal - The Material teal palette
+/// @prop {ColorMap} materialGreen - The Material green palette
+/// @prop {ColorMap} materialLightGreen - The Material light green palette
+/// @prop {ColorMap} materialLime - The Material lime palette
+/// @prop {ColorMap} materialYellow - The Material yellow palette
+/// @prop {ColorMap} materialAmber - The Material amber palette
+/// @prop {ColorMap} materialOrange - The Material orange palette
+/// @prop {ColorMap} materialDeepOrange - The Material deep orange palette
+/// @prop {ColorMap} materialBrown - The Material brown palette
+/// @prop {ColorMap} primerGray - The Primer gray palette
+/// @prop {ColorMap} primerBlue - The Primer blue palette
+/// @prop {ColorMap} primerGreen - The Primer green palette
+/// @prop {ColorMap} primerYellow - The Primer yellow palette
+/// @prop {ColorMap} primerOrange - The Primer orange palette
+/// @prop {ColorMap} primerRed - The Primer red palette
+/// @prop {ColorMap} primerPurple - The Primer purple palette
+/// @prop {ColorMap} primerPink - The Primer pink palette
+/// @prop {ColorMap} primerCoral - The Primer coral palette
+/// @prop {ColorMap} tailwindNeutral - The Tailwind neutral palette
+/// @prop {ColorMap} tailwindSlate - The Tailwind slate palette
+/// @prop {ColorMap} tailwindGray - The Tailwind gray palette
+/// @prop {ColorMap} tailwindZinc - The Tailwind zinc palette
+/// @prop {ColorMap} tailwindStone - The Tailwind stone palette
+/// @prop {ColorMap} tailwindRed - The Tailwind red palette
+/// @prop {ColorMap} tailwindOrange - The Tailwind orange palette
+/// @prop {ColorMap} tailwindAmber - The Tailwind amber palette
+/// @prop {ColorMap} tailwindYellow - The Tailwind yellow palette
+/// @prop {ColorMap} tailwindLime - The Tailwind lime palette
+/// @prop {ColorMap} tailwindGreen - The Tailwind green palette
+/// @prop {ColorMap} tailwindEmerald - The Tailwind emerald palette
+/// @prop {ColorMap} tailwindTeal - The Tailwind teal palette
+/// @prop {ColorMap} tailwindCyan - The Tailwind cyan palette
+/// @prop {ColorMap} tailwindSky - The Tailwind sky palette
+/// @prop {ColorMap} tailwindBlue - The Tailwind blue palette
+/// @prop {ColorMap} tailwindIndigo - The Tailwind indigo palette
+/// @prop {ColorMap} tailwindViolet - The Tailwind violet palette
+/// @prop {ColorMap} tailwindPurple - The Tailwind purple palette
+/// @prop {ColorMap} tailwindFuchsia - The Tailwind fuchsia palette
+/// @prop {ColorMap} tailwindPink - The Tailwind pink palette
+/// @prop {ColorMap} tailwindRose - The Tailwind rose palette
+///
+/// @group color-system
+$kendo-palettes: (
+
+    // Kendo
+    neutral: (
+        0: #ffffff,
+        50: #f8f8f8,
+        100: #ededed,
+        200: #d6d6d6,
+        300: #b7b7b7,
+        400: #949494,
+        500: #767676,
+        600: #5f5f5f,
+        700: #494949,
+        800: #373737,
+        900: #282828,
+        1000: #000000
+    ),
+    marsala: (
+        0: #ffffff,
+        50: #faf0f2,
+        100: #f3dde0,
+        200: #e197a3,
+        300: #c54e69,
+        400: #8b3548,
+        500: #622331,
+        600: #551d2a,
+        700: #441620,
+        800: #340f17,
+        900: #23080e,
+        1000: #000000
+    ),
+
+
+    // Bootstrap
+    bootstrapGray: (
+        0: #ffffff,
+        100: #f8f9fa,
+        200: #e9ecef,
+        300: #dee2e6,
+        400: #ced4da,
+        500: #adb5bd,
+        600: #6c757d,
+        700: #495057,
+        800: #343a40,
+        900: #212529,
+        1000: #000000
+    ),
+    bootstrapBlue: (
+        0: #ffffff,
+        100: #cfe2ff,
+        200: #9ec5fe,
+        300: #6ea8fe,
+        400: #3d8bfd,
+        500: #0d6efd,
+        600: #0a58ca,
+        700: #084298,
+        800: #052c65,
+        900: #031633,
+        1000: #000000
+    ),
+    bootstrapIndigo: (
+        0: #ffffff,
+        100: #e0cffc,
+        200: #c29ffa,
+        300: #a370f7,
+        400: #8540f5,
+        500: #6610f2,
+        600: #520dc2,
+        700: #3d0a91,
+        800: #290661,
+        900: #140330,
+        1000: #000000
+    ),
+    bootstrapPurple: (
+        0: #ffffff,
+        100: #e2d9f3,
+        200: #c5b3e6,
+        300: #a98eda,
+        400: #8c68cd,
+        500: #6f42c1,
+        600: #59359a,
+        700: #432874,
+        800: #2c1a4d,
+        900: #160d27,
+        1000: #000000
+    ),
+    bootstrapPink: (
+        0: #ffffff,
+        100: #f7d6e6,
+        200: #efadce,
+        300: #e685b5,
+        400: #de5c9d,
+        500: #d63384,
+        600: #ab296a,
+        700: #801f4f,
+        800: #561435,
         900: #2b0a1a,
         1000: #000000
     ),
@@ -2807,13 +3177,380 @@ $kendo-palettes: (
 
 // #endregion
 
+@function k-generate-theme-variant( $variant, $matrix, $src-palette-name ) {
+    $result: ();
+
+    @each $ui-state, $indices in $matrix {
+        $prefix: if( $ui-state == DEFAULT, "", "#{$ui-state}-" );
+        $indices-count: k-list-length( $indices );
+
+        $bg-prop: k-list-nth( $indices, 1 );
+        $text-prop: k-list-nth( $indices, 2 );
+        $border-prop: k-list-nth( $indices, 3 );
+        $gradient-prop: if( $indices-count > 3, k-list-nth( $indices, 4 ), null );
+        $shadow-prop: if( $indices-count > 4, k-list-nth( $indices, 5 ), null );
+        $outline-prop: if( $indices-count > 5, k-list-nth( $indices, 6 ), null );
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of( $bg-prop ) == number, k-get-theme-color( $src-palette-name, $bg-prop ), $bg-prop );
+        $text: if( k-meta-type-of( $text-prop ) == number, k-get-theme-color( $src-palette-name, $text-prop ), $text-prop );
+        $border: if( k-meta-type-of( $border-prop ) == number, k-get-theme-color( $src-palette-name, $border-prop ), $border-prop );
+        $gradient: $gradient-prop;
+        $shadow: $shadow-prop;
+        $outline: $outline-prop;
+
+        $result: k-map-merge($result, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border,
+            #{$prefix}gradient: $gradient,
+            #{$prefix}shadow: $shadow,
+            #{$prefix}outline: $outline
+        ));
+    }
+
+    $result: (
+        #{$variant}: $result
+    );
+
+    @return $result;
+
+};
+
+
+@function k-process-variant-matrices( $theme-matrix, $palette-matrix: () ) {
+    $result: ();
+
+    // @debug $theme-matrix;
+    // @debug $palette-matrix;
+
+    @each $variant, $definition in $theme-matrix {
+        $tc-index: k-string-index( $variant, "THEME_COLOR" );
+        $src-palette-name: k-map-get( $definition, PALETTE );
+        $matrix: k-map-remove( $definition, PALETTE );
+
+        @if ($tc-index == null ) { // stylelint-disable-line
+            $tmp-result: k-generate-theme-variant( $variant, $matrix, $src-palette-name );
+            $result: k-map-merge( $result, $tmp-result);
+        } @else {
+            @each $color, $palette in $palette-matrix {
+                $variant-name: k-string-replace( $variant, THEME_COLOR, $color);
+                $palette-name: k-string-unquote($src-palette-name + "");
+
+                @if ($palette-name == THEME_COLOR) {
+                    $palette-name: k-string-replace( $palette-name, THEME_COLOR, $color );
+                    $palette-name: k-map-get( $palette-matrix, $palette-name );
+                }
+
+                $tmp-result: k-generate-theme-variant( $variant-name, $matrix, $palette-name );
+                $result: k-map-merge( $result, $tmp-result );
+            }
+        }
+    }
+
+    @return $result;
+}
+
+
+@function k-get-theme-palette( $name ) {
+    @return k-map-get( $kendo-palettes, $name );
+}
+
+@function k-get-theme-color( $palette, $hue ) {
+    @if ( k-meta-type-of( $palette ) == "map" ) {
+        @return k-map-get( $palette, $hue );
+    }
+
+    @return k-map-get( k-get-theme-palette( $palette ), $hue );
+}
+
+@function k-get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo-" ) {
+    @return var( --#{$prefix}#{$name}, #{$fallback} );
+}
+
+@function k-generate-theme-variation( $theme-color, $source-palette-name, $mapping ) {
+    $temp: ( );
+
+    @each $ui-state, $indices in $mapping {
+        $prefix: if( $ui-state == normal, '', '#{$ui-state}-' );
+
+        $bg-prop: k-list-nth($indices, 1);
+        $text-prop: k-list-nth($indices, 2);
+        $border-prop: k-list-nth($indices, 3);
+
+        // Take value from the palette only if it is a number
+        $bg: if( k-meta-type-of($bg-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$bg-prop} ), $bg-prop );
+        $text: if( k-meta-type-of($text-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$text-prop} ), $text-prop );
+        $border: if( k-meta-type-of($border-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$border-prop} ), $border-prop );
+
+
+        $temp: k-map-deep-merge( $temp, (
+            #{$prefix}bg: $bg,
+            #{$prefix}text: $text,
+            #{$prefix}border: $border
+        ));
+
+        // Add outline if provided in the map
+        @if ( k-list-length($indices) > 3 ) {
+            $outline-prop: k-list-nth($indices, 4);
+            $outline: if( k-meta-type-of($outline-prop) == number, k-get-theme-color-var( #{$source-palette-name}-#{$outline-prop} ), $outline-prop );
+
+            $temp: k-map-deep-merge( $temp, (
+                #{$prefix}outline: $outline
+            ));
+        }
+    }
+
+    $map: (
+        #{$theme-color}: $temp
+    );
+
+    @return $map;
+
+};
+
+@function k-generate-fill-mode-theme-variation( $fill-mode, $theme-color, $source-palette-name, $mapping ) {
+
+    $map: k-generate-theme-variation( $theme-color, $source-palette-name, $mapping );
+
+    $result: (
+       #{$fill-mode}: $map
+    );
+
+    @return $result;
+}
+
+// #endregion
+// #region @import "./_mixins.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_mixins.import.scss
+@mixin k-css-vars($map) {
+    @each $group, $values in $map {
+        @each $key, $value in $values {
+            --kendo-#{k-meta-inspect($group)}-#{$key}: #{$value};
+        }
+    }
+}
+
 // #endregion
+// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/color-system/_variables.scss
+// Color constants
+
+/// The color white.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color black.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
+
+/// The color transparent.
+/// Note: you cannot change this value.
+/// @type Color
+/// @group color-system
+$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to black.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from transparent to white.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from black to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that goes from white to transparent.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+
+/// A gradient that cycles through the colors of the rainbow.
+/// Note: you cannot change this value.
+/// @type Gradient
+/// @group color-system
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
+
+
+// Root styles
+$kendo-body-bg: $kendo-color-white !default;
+$kendo-body-text: k-get-theme-color-var( neutral-160 ) !default;
+
+// Component styles
+$kendo-component-bg: $kendo-body-bg !default;
+$kendo-component-text: $kendo-body-text !default;
+$kendo-component-border: k-get-theme-color-var( neutral-30 ) !default;
+
+// States styles
+$kendo-hover-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-hover-border: k-get-theme-color-var( neutral-20 ) !default;
+
+$kendo-selected-bg: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-selected-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-selected-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-selected-hover-bg: k-get-theme-color-var( neutral-40 ) !default;
+$kendo-selected-hover-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-selected-hover-border: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
+
+$kendo-subtle-text: k-get-theme-color-var( neutral-130 ) !default;
+
+// Shadows
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+$kendo-box-shadow-depth-1: 0 1.6px 3.6px rgba( $kendo-color-black, 0.132 ), 0 0.3px 0.9px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for command bars and dropdowns.
+/// Equivalent to fluent depth 8.
+$kendo-box-shadow-depth-2: 0 3.2px 7.2px rgba( $kendo-color-black, 0.132 ), 0 0.6px 1.8px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for teaching callouts and hover cards / tooltips.
+/// Equivalent to fluent depth 16.
+$kendo-box-shadow-depth-3: 0 6.4px 14.4px rgba( $kendo-color-black, 0.132 ), 0 1.2px 3.6px rgba( $kendo-color-black, 0.108 ) !default;
+/// Shadow for panels and pop up dialogs.
+/// Equivalent to fluent depth 64.
+$kendo-box-shadow-depth-4: 0 25.6px 57.6px rgba( $kendo-color-black, 0.22 ), 0 4.8px 14.4px rgba( $kendo-color-black, 0.18 ) !default;
+
+// Link
+$kendo-link-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-link-hover-text: k-get-theme-color-var( primary-120 ) !default;
+
+// Validator
+$kendo-invalid-bg: initial !default;
+$kendo-invalid-text: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-border: k-get-theme-color-var( error-190 ) !default;
+$kendo-invalid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: k-get-theme-color-var( neutral-20 ) !default;
+$kendo-disabled-text: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-disabled-border: transparent !default;
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+
+
+// Theme colors
+$kendo-theme-colors: (
+    primary: (
+        text: k-get-theme-color-var( primary-130 ),
+        bg: k-get-theme-color-var( primary-20 ),
+        border: k-get-theme-color-var( primary-20 )
+    ),
+    info: (
+        text: k-get-theme-color-var( info-190 ),
+        bg: k-get-theme-color-var( info-20 ),
+        border: k-get-theme-color-var( info-20 )
+    ),
+    success: (
+        text: k-get-theme-color-var( success-190 ),
+        bg: k-get-theme-color-var( success-20 ),
+        border: k-get-theme-color-var( success-20 )
+    ),
+    warning: (
+        text: k-get-theme-color-var( neutral-160 ),
+        bg: k-get-theme-color-var( warning-20 ),
+        border: k-get-theme-color-var( warning-20 )
+    ),
+    error: (
+        text: k-get-theme-color-var( error-190 ),
+        bg: k-get-theme-color-var( error-20 ),
+        border: k-get-theme-color-var( error-20 )
+    )
+) !default;
+
+
+@mixin color-system-styles() {
+    :root {
+        @include k-css-vars( $kendo-palettes );
+        @include k-css-vars( $kendo-theme-colors );
+
+        --kendo-body-bg: #{$kendo-body-bg};
+        --kendo-body-text: #{$kendo-body-text};
+
+        --kendo-component-bg: #{$kendo-component-bg};
+        --kendo-component-text: #{$kendo-component-text};
+        --kendo-component-border: #{$kendo-component-border};
+
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+
+        --kendo-link-text: #{$kendo-link-text};
+        --kendo-link-hover-text: #{$kendo-link-hover-text};
+
+        --kendo-disabled-bg: #{$kendo-disabled-bg};
+        --kendo-disabled-text: #{$kendo-disabled-text};
+        --kendo-disabled-border: #{$kendo-disabled-border};
+
+        --kendo-hover-bg: #{$kendo-hover-bg};
+        --kendo-hover-text: #{$kendo-hover-text};
+        --kendo-hover-border: #{$kendo-hover-border};
+
+        --kendo-selected-bg: #{$kendo-selected-bg};
+        --kendo-selected-text: #{$kendo-selected-text};
+        --kendo-selected-border: #{$kendo-selected-border};
+
+        --kendo-selected-hover-bg: #{$kendo-selected-hover-bg};
+        --kendo-selected-hover-text: #{$kendo-selected-hover-text};
+        --kendo-selected-hover-border: #{$kendo-selected-hover-border};
+
+        --kendo-focus-outline: #{$kendo-focus-outline};
+
+        --kendo-subtle-text: #{$kendo-subtle-text};
+
+        --kendo-invalid-bg: #{$kendo-invalid-bg};
+        --kendo-invalid-text: #{$kendo-invalid-text};
+        --kendo-invalid-border: #{$kendo-invalid-border};
+        --kendo-invalid-shadow: #{$kendo-invalid-shadow};
+
+        --kendo-border-radius-sm: #{$kendo-border-radius-sm};
+        --kendo-border-radius-md: #{$kendo-border-radius-md};
+        --kendo-border-radius-lg: #{$kendo-border-radius-lg};
+    }
+
+    // Text colors
+    @each $theme-color, $color-props in $kendo-theme-colors {
+        $_color: k-map-get( $color-props, text );
+
+        .k-text-#{$theme-color},
+        .k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} );
+        }
+        .\!k-text-#{$theme-color},
+        .\!k-color-#{$theme-color} {
+            color: var( --kendo-text-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+
+        .k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} );
+        }
+        .\!k-bg-#{$theme-color} {
+            background-color: var( --kendo-bg-#{$theme-color}, #{$_color} ) !important; // stylelint-disable-line declaration-no-important
+        }
+    };
+}
 
 // #endregion
+// @import "./_palettes.scss";
 
-// Mixins
-// #region @import "./mixins/index.import.scss"; -> scss/core/mixins/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/mixins/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/index.import.scss
+// #endregion
+// #region @import "./mixins/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/index.import.scss
 // #region @import "./_border-radius.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_border-radius.scss
 // Border radius
 @mixin border-radius( $radius: null ) {
@@ -2913,6 +3650,47 @@ $_kendo-data-uris: () !default;
     box-shadow: none;
 }
 
+@mixin disabled-color( $color: null, $bg: null, $border: null ) {
+    outline: none;
+    cursor: default;
+    background-color: $bg;
+    color: $color;
+    border-color: $border;
+    pointer-events: none;
+    box-shadow: none;
+}
+
+// #endregion
+// #region @import "./_decoration.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_decoration.scss
+@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
+    @if $border {
+        border-color: $border;
+    }
+    @if $color {
+        color: $color;
+    }
+    @if $bg {
+        background-color: $bg;
+    }
+    @if $gradient {
+        @include linear-gradient( $gradient );
+    }
+}
+
+@mixin linear-gradient( $gradient: null ) {
+    @if $gradient and $kendo-enable-gradients {
+        @if $gradient == none {
+            background-image: none;
+        } @else {
+            background-image: linear-gradient( $gradient );
+        }
+    }
+}
+
+@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
+    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
+}
+
 // #endregion
 // #region @import "./_focus-indicator.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_focus-indicator.scss
 @mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
@@ -2965,7 +3743,7 @@ $_kendo-data-uris: () !default;
 // #region @import "./_hide-scrollbar.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_hide-scrollbar.scss
 $kendo-scrollbar-width: 17px !default;
 
-@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px ) {
+@mixin hide-scrollbar( $dir: "right", $max-scrollbar: 100px) {
     // anything larger than the scrollbar width will do
     $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
     $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
@@ -2982,6 +3760,18 @@ $kendo-scrollbar-width: 17px !default;
     }
 }
 
+@mixin hide-scrollbar-dir-agnostic($max-scrollbar: 100px) {
+    // anything larger than the scrollbar width will do
+    $scrollbar-size: var( --kendo-scrollbar-width, #{$kendo-scrollbar-width} );
+    $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
+
+    padding-inline-end: $max-scrollbar;
+    padding-inline-start: $max-scrollbar;
+
+    margin-inline-start: -$max-scrollbar;
+    margin-inline-end: $margin;
+}
+
 // #endregion
 // #region @import "./_import-once.scss"; -> node_modules/@progress/kendo-theme-core/scss/mixins/_import-once.scss
 /// A list of exported modules.
@@ -3011,13 +3801,6 @@ $_kendo-imported-modules: () !default;
 
 // #endregion
 
-@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
-    border-color: $border;
-    color: $color;
-    background-color: $bg;
-    @include linear-gradient( $gradient );
-}
-
 @mixin background-image( $background-image: null ) {
     @if $background-image {
         background-image: url(#{$background-image});
@@ -3025,12 +3808,7 @@ $_kendo-imported-modules: () !default;
 }
 
 // #endregion
-
-// #endregion
-
-// Module system
-// #region @import "./module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
+// #region @import "./module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
 // #region @import "./_components.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/_components.scss
 $kendo-components: (
     // Typography and utils
@@ -3709,12 +4487,7 @@ $_imported: () !default;
 // stylelint-enable scss/at-if-no-null
 
 // #endregion
-
-// #endregion
-
-// Common styles
-// #region @import "./styles/index.import.scss"; -> scss/core/styles/index.import.scss
-// #region @import "@progress/kendo-theme-core/scss/styles/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/index.import.scss
+// #region @import "./styles/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/index.import.scss
 // #region @import "./_accessibility.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_accessibility.scss
 @mixin kendo-core--styles--accessibility() {
 
@@ -3745,6 +4518,20 @@ $_imported: () !default;
 // #endregion
 // #region @import "./_layout.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_layout.scss
 @mixin kendo-core--styles--layout() {
+    .k-body {
+        @include typography(
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight, normal ),
+            var( --kendo-letter-spacing, normal ),
+        );
+        @include fill(
+            var( --kendo-body-text, initial ),
+            var( --kendo-body-bg, initial )
+        );
+        margin: 0;
+    }
 
     // Basic layout
     .k-hstack {
@@ -3859,472 +4646,386 @@ $_imported: () !default;
 }
 
 // #endregion
+// #region @import "./_base.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_base.scss
+@mixin kendo-core--styles--base() {
+    // Disabled state
+    .k-disabled,
+    .k-widget[disabled],
+    .k-disabled {
+        @include disabled-color(
+            $color: var( --kendo-disabled-text, inherit ),
+            $border: var( --kendo-disabled-border, inherit )
+        );
 
+        .k-link {
+            cursor: default;
+            outline: 0;
+        }
+    }
 
-@mixin kendo-core--styles() {
-    @include kendo-core--styles--accessibility();
-    @include kendo-core--styles--asp-fallback();
-    @include kendo-core--styles--layout();
-    @include kendo-core--styles--normalize();
-}
-
-// #endregion
-
-// #endregion
-
-// Variables
-// #region @import "../_variables.scss"; -> scss/_variables.scss
-// #region @import "./core/functions/index.import.scss"; -> scss/core/functions/index.import.scss
-// File already imported_once. Skipping output.
-// #endregion
-// #region @import "./core/color-system/index.import.scss"; -> scss/core/color-system/index.import.scss
-// File already imported_once. Skipping output.
-// #endregion
-
-
-// Options
-$kendo-enable-rounded: true !default;
-$kendo-enable-shadows: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
-$kendo-enable-focus-contrast: false !default;
-$kendo-enable-typography: false !default;
+    // Horizontal line
+    .k-hr {
+        margin-block: k-map-get( $kendo-spacing, 4 );
+        padding: 0;
+        height: 0;
+        border-width: 1px 0 0;
+        border-style: solid;
+        border-color: var( --kendo-component-border, inherit );
+        display: block;
+        float: none;
+        clear: both;
+    }
 
-$kendo-use-input-button-width: true !default;
-$kendo-use-input-spinner-width: true !default;
-$kendo-use-input-spinner-icon-offset: false !default;
+    // Horizontal rule
+    .k-d-flex-row > .k-hr {
+        margin: 0;
+        width: 0;
+        height: auto;
+        border-width: 0 0 0 1px;
+        flex: 0 0 auto;
+    }
 
-$kendo-auto-bootstrap: true !default;
+    // Vertical rule
+    .k-d-flex-col > .k-hr {
+        margin: 0;
+        flex: 0 0 auto;
+    }
 
+    .k-sprite {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        font-size: 0;
+        line-height: 0;
+        text-align: center;
+    }
 
-// Spacing
-$kendo-spacing: (
-    0: 0,
-    1px: 1px,
-    0.5: 2px,
-    1: 4px,
-    1.5: 6px,
-    2: 8px,
-    2.5: 10px,
-    3: 12px,
-    3.5: 14px,
-    4: 16px,
-    4.5: 18px,
-    5: 20px,
-    5.5: 22px,
-    6: 24px,
-    6.5: 26px,
-    7: 28px,
-    7.5: 30px,
-    8: 32px,
-    9: 36px,
-    10: 40px,
-    11: 44px,
-    12: 48px,
-    13: 52px,
-    14: 56px,
-    15: 60px,
-    16: 64px,
-    17: 68px,
-    18: 72px,
-    19: 76px,
-    20: 80px,
-    21: 84px,
-    22: 88px,
-    23: 92px,
-    24: 96px
-) !default;
+    .k-image {
+        display: inline-block;
+    }
 
+    // Layout
+    .k-reset {
+        margin: 0;
+        padding: 0;
+        border-width: 0;
+        outline: 0;
+        text-decoration: none;
+        font: inherit;
+        list-style: none;
+    }
 
-/// Icon size.
-/// @group common
-$kendo-icon-size: 16px !default;
-/// xtra small icon size.
-/// @group common
-$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
-/// Small icon size.
-/// @group common
-$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
-/// Medium icon size.
-/// @group common
-$kendo-icon-size-md: $kendo-icon-size !default;
-/// Large icon size.
-/// @group common
-$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
-/// Extra large icon size.
-/// @group common
-$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
-/// Double extra large icon size.
-/// @group common
-$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
-/// Triple extra large icon size.
-/// @group common
-$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
+    kendo-sortable {
+        display: block;
+    }
 
-$kendo-icon-spacing: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-icon-padding: k-map-get( $kendo-spacing, 1 ) !default;
 
-/// Horizontal padding.
-/// @group common
-$kendo-padding-x: 8px !default;
-/// Vertical padding.
-/// @group common
-$kendo-padding-y: 4px !default;
-/// Small horizontal padding.
-/// @group common
-$kendo-padding-sm-x: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small vertical padding.
-/// @group common
-$kendo-padding-sm-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium horizontal padding.
-/// @group common
-$kendo-padding-md-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// Medium vertical padding.
-/// @group common
-$kendo-padding-md-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// Large horizontal padding.
-/// @group common
-$kendo-padding-lg-x: k-map-get( $kendo-spacing, 3 ) !default;
-/// Large vertical padding.
-/// @group common
-$kendo-padding-lg-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-
-/// Border radius for all components.
-/// @group common
-$kendo-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
-/// Small border radius.
-/// @group common
-$kendo-border-radius-sm: $kendo-border-radius - k-map-get( $kendo-spacing, 0.5 ) !default;
-/// Medium border radius.
-/// @group common
-$kendo-border-radius-md: $kendo-border-radius !default;
-/// Large border radius.
-/// @group common
-$kendo-border-radius-lg: $kendo-border-radius + k-map-get( $kendo-spacing, 0.5 ) !default;
+    // Links
+    .k-link,
+    .k-link:hover {
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        cursor: pointer;
+    }
 
-$kendo-border-radii: (
-    DEFAULT: $kendo-border-radius-md,
-    0: 0,
-    sm: $kendo-border-radius-sm,
-    md: $kendo-border-radius-md,
-    lg: $kendo-border-radius-lg,
-    full: 9999px
-) !default;
+    // Outline
+    .k-content {
+        outline: 0;
+    }
 
+    // Centering
+    .k-centered {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 
-$kendo-zindex-popup: 1 !default;
-$kendo-zindex-window: 2 !default;
-$kendo-zindex-loading: 100 !default;
+    // Disable mouse events
+    .k-no-click {
+        pointer-events: none;
+    }
 
+    // Off-screen container used during PDF export
+    .k-pdf-export-shadow {
+        position: absolute;
+        overflow: hidden;
+        left: -15000px;
+        width: 14400px;
+    }
 
-// Color settings
-$kendo-is-dark-theme: false !default;
+    // PDF export icons fix
+    .kendo-pdf-hide-pseudo-elements::before,
+    .kendo-pdf-hide-pseudo-elements::after {
+        display: none !important; // stylelint-disable-line declaration-no-important
+    }
 
-// Theme colors
-/// The color that focuses the user attention.
-/// Used for primary buttons and for elements of primary importance across the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-primary: #ff6358 !default;
-$kendo-color-primary-lighter: k-color-tint( $kendo-color-primary, 2 ) !default;
-$kendo-color-primary-darker: k-color-shade( $kendo-color-primary, 2 ) !default;
+    // Dirty indicator
+    .k-dirty {
+        margin: 0;
+        padding: 0;
+        width: 0;
+        height: 0;
+        border-width: 3px;
+        border-style: solid;
+        border-block-start-color: currentColor;
+        border-block-end-color: transparent;
+        border-inline-start-color: transparent;
+        border-inline-end-color: currentColor;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+    }
+}
+// #endregion
+// #region @import "./_loading.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_loading.scss
+@mixin kendo-core--styles--loading() {
+    // Loading mask
+    .k-loading-mask,
+    .k-loading-image,
+    .k-loading-color {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        left: 0;
 
-/// The color used along with the primary color denoted by $kendo-color-primary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-primary-contrast: k-contrast-legacy( $kendo-color-primary ) !default;
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-/// The secondary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary: #666666 !default;
-$kendo-color-secondary-lighter: k-color-tint( $kendo-color-secondary, 2 ) !default;
-$kendo-color-secondary-darker: k-color-shade( $kendo-color-secondary, 2 ) !default;
+    .k-loading-mask {
+        z-index: $kendo-zindex-loading;
 
-/// The color used along with the secondary color denoted by $kendo-color-secondary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-secondary-contrast: k-contrast-legacy( $kendo-color-secondary ) !default;
+        &.k-opaque {
+            .k-loading-color {
+                opacity: 1;
+            }
+        }
+    }
+    .k-loading-text {
+        text-indent: -4000px;
+        text-align: center;
+        position: absolute;
+        color: $kendo-loading-text;
+    }
+    .k-loading-image {
+        z-index: 2;
+        color: $kendo-loading-text;
+    }
+    .k-loading-color {
+        background-color: $kendo-loading-bg;
+        opacity: $kendo-loading-opacity;
+    }
 
-/// The tertiary color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary: #03a9f4 !default;
-$kendo-color-tertiary-lighter: k-color-tint( $kendo-color-tertiary, 2 ) !default;
-$kendo-color-tertiary-darker: k-color-shade( $kendo-color-tertiary, 2 ) !default;
+    // Loading indicator
+    .k-i-loading {
+        position: relative;
+        background-color: transparent;
+        box-sizing: border-box;
+        color: $kendo-loading-text;
 
-/// The color used along with the tertiary color denoted by $kendo-color-tertiary.
-/// Used to provide contrast between the background and foreground colors.
-/// @group color-system
-/// @type Color
-$kendo-color-tertiary-contrast: k-contrast-legacy( $kendo-color-tertiary ) !default;
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
+    }
 
-/// The color for informational messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-info: #0058e9 !default;
-$kendo-color-info-lighter: k-color-tint( $kendo-color-info, 2 ) !default;
-$kendo-color-info-darker: k-color-shade( $kendo-color-info, 2 ) !default;
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: inline-block;
+        content: "";
+        box-sizing: inherit;
+        border-radius: 50%;
+        border-width: .05em;
+        border-style: solid;
+        border-color: currentColor;
+        border-top-color: transparent;
+        border-bottom-color: transparent;
+        background-color: transparent;
+    }
 
-/// The color for success messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-success: #37b400 !default;
-$kendo-color-success-lighter: k-color-tint( $kendo-color-success, 2 ) !default;
-$kendo-color-success-darker: k-color-shade( $kendo-color-success, 2 ) !default;
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
 
-/// The color for warning messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-warning: #ffc000 !default;
-$kendo-color-warning-lighter: k-color-tint( $kendo-color-warning, 2 ) !default;
-$kendo-color-warning-darker: k-color-shade( $kendo-color-warning, 2 ) !default;
+    .k-i-loading::before,
+    .k-loading-image::before {
+        margin-top: -.5em;
+        margin-left: -.5em;
+        width: 1em;
+        height: 1em;
+        animation: k-loading-animation .7s linear infinite;
+    }
 
-/// The color for error messages and states.
-/// @group color-system
-/// @type Color
-$kendo-color-error: #f31700 !default;
-$kendo-color-error-lighter: k-color-tint( $kendo-color-error, 2 ) !default;
-$kendo-color-error-darker: k-color-shade( $kendo-color-error, 2 ) !default;
+    .k-i-loading::after,
+    .k-loading-image::after {
+        margin-top: -.25em;
+        margin-left: -.25em;
+        width: .5em;
+        height: .5em;
+        animation: k-loading-animation reverse 1.4s linear infinite;
+    }
 
-/// The dark color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-dark: #424242 !default;
+    .k-loading-image::before,
+    .k-loading-image::after {
+        content: "";
+        // See https://github.com/telerik/kendo-themes/issues/1925
+        border-width: 1px; // TODO: Remove once we drop IE support
+        border-width: clamp( .015em, 1px, 1px );
+        font-size: 4em;
+    }
 
-/// The light color of the theme.
-/// @group color-system
-/// @type Color
-$kendo-color-light: #ebebeb !default;
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+}
+// #endregion
+// #region @import "./_selection.scss"; -> node_modules/@progress/kendo-theme-core/scss/styles/_selection.scss
+@mixin kendo-core--styles--selection() {
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
 
-/// Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark
-/// @group color-system
-$kendo-color-inverse: if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark ) !default;
+    .k-marquee-color,
+    .k-marquee-text {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 
+    .k-marquee-color {
+        color: $kendo-selected-text;
+        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
+        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: $kendo-selected-text;
+    }
+}
+// #endregion
 
-$kendo-theme-colors: (
-    "primary": $kendo-color-primary,
-    "secondary": $kendo-color-secondary,
-    "tertiary": $kendo-color-tertiary,
-    "info": $kendo-color-info,
-    "success": $kendo-color-success,
-    "warning": $kendo-color-warning,
-    "error": $kendo-color-error,
-    "dark": $kendo-color-dark,
-    "light": $kendo-color-light,
-    "inverse": $kendo-color-inverse
-) !default;
 
+@mixin kendo-core--styles() {
+    @include kendo-core--styles--accessibility();
+    @include kendo-core--styles--asp-fallback();
+    @include kendo-core--styles--layout();
+    @include kendo-core--styles--normalize();
+    @include kendo-core--styles--base();
+    @include kendo-core--styles--loading();
+    @include kendo-core--styles--selection();
+}
 
-// Typography
+// #endregion
+// #region @import "./_variables.scss"; -> node_modules/@progress/kendo-theme-core/scss/_variables.scss
+// #region @import "./functions/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/functions/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
 
-/// Base font size across all components.
-/// @group typography
-$kendo-font-size: 14px !default;
-/// Extra small font size across all components.
-/// @group typography
-$kendo-font-size-xs: 10px !default;
-/// Small font size across all components.
-/// @group typography
-$kendo-font-size-sm: 12px !default;
-/// Medium font size across all components.
-/// @group typography
-$kendo-font-size-md: $kendo-font-size !default;
-/// Large font size across all components.
-/// @group typography
-$kendo-font-size-lg: 16px !default;
-/// Extra large font size across all components.
-/// @group typography
-$kendo-font-size-xl: 20px !default;
+// Options
+$kendo-enable-shadows: true !default;
+$kendo-enable-rounded: true !default;
+$kendo-enable-gradients: true !default;
+$kendo-enable-transitions: true !default;
 
-$kendo-font-sizes: (
-    xs: $kendo-font-size-xs,
-    sm: $kendo-font-size-sm,
-    md: $kendo-font-size-md,
-    lg: $kendo-font-size-lg,
-    xl: $kendo-font-size-xl
+$kendo-spacing: (
+    0: 0,
+    1px: 1px,
+    0.5: 0.125rem,
+    1: 0.25rem,
+    1.5: 0.375rem,
+    2: 0.5rem,
+    2.5: 0.625rem,
+    3: 0.75rem,
+    3.5: 0.875rem,
+    4: 1rem,
+    4.5: 1.125rem,
+    5: 1.25rem,
+    5.5: 1.375rem,
+    6: 1.5rem,
+    6.5: 1.625rem,
+    7: 1.75rem,
+    7.5: 1.875rem,
+    8: 2rem,
+    9: 2.25rem,
+    10: 2.5rem,
+    11: 2.75rem,
+    12: 3rem,
+    13: 3.25rem,
+    14: 3.5rem,
+    15: 3.75rem,
+    16: 4rem,
+    17: 4.25rem,
+    18: 4.5rem,
+    19: 4.75rem,
+    20: 5rem,
+    21: 5.25rem,
+    22: 5.5rem,
+    23: 5.75rem,
+    24: 6rem,
 ) !default;
 
-/// Font family for text.
-/// @group typography
-$kendo-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-
-/// Font family for monospaced text. Used for styling the code.
-/// @group typography
-$kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono", "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-/// Font family across all components.
-/// @group typography
-$kendo-font-family: inherit !default;
-
-/// Line height used along with $kendo-font-size.
-/// @group typography
-$kendo-line-height: k-math-div( 20, 14 ) !default;
-/// Extra small line height used along with $kendo-font-size-xs.
-/// @group typography
-$kendo-line-height-xs: 1 !default;
-/// Small line height used along with $kendo-font-size-sm.
-/// @group typography
-$kendo-line-height-sm: 1.25 !default;
-/// Medium line height used along with $kendo-font-size-md.
-/// @group typography
-$kendo-line-height-md: $kendo-line-height !default;
-/// Large line height used along with $kendo-font-size-lg.
-/// @group typography
-$kendo-line-height-lg: 1.5 !default;
-$kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
-
-/// Light font weight.
-/// @group typography
-$kendo-font-weight-light: 300 !default;
-/// Normal font weight.
-/// @group typography
-$kendo-font-weight-normal: 400 !default;
-/// Medium font weight.
-/// @group typography
-$kendo-font-weight-medium: 500 !default;
-/// Semibold font weight.
-/// @group typography
-$kendo-font-weight-semibold: 600 !default;
-/// Bold font weight.
-/// @group typography
-$kendo-font-weight-bold: 700 !default;
-
-/// Letter spacing.
-/// @group typography
-$kendo-letter-spacing: null !default;
-
-
-// Generic styles
-
-/// Background color of the body.
-/// @group common
-$kendo-body-bg: $kendo-color-white !default;
-/// Text color of the body.
-/// @group common
-$kendo-body-text: #424242 !default;
-
-/// Subtle text color.
-/// @group common
-$kendo-subtle-text: #666666 !default;
-
-$kendo-app-bg: k-try-shade( $kendo-body-bg, .25 ) !default;
-$kendo-app-text: $kendo-body-text !default;
-$kendo-app-border: rgba( $kendo-color-black, .08 ) !default;
-
-// Link
-/// Text color of the links.
-/// @group common
-$kendo-link-text: $kendo-color-primary !default;
-/// Text color of the links on hover.
-/// @group common
-$kendo-link-hover-text: $kendo-color-primary-darker !default;
-
-
-// Components
-
-// Component
-/// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.
-/// @group component
-$kendo-component-bg: $kendo-body-bg !default;
-/// Text color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.
-/// @group component
-$kendo-component-text: $kendo-body-text !default;
-/// Border color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.
-/// @group component
-$kendo-component-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-
-
-/// The background of the components' chrome area.
-$kendo-base-bg: #fafafa !default;
-/// The text color of the components' chrome area.
-$kendo-base-text: $kendo-body-text !default;
-/// The border color of the components' chrome area.
-$kendo-base-border: rgba( black, .08 ) !default;
-/// The gradient background of the components' chrome area.
-$kendo-base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-
-/// The background of hovered items.
-$kendo-hover-bg: k-try-shade( $kendo-base-bg, .5 ) !default;
-/// The text color of hovered items.
-$kendo-hover-text: $kendo-base-text !default;
-/// The border color of hovered items.
-$kendo-hover-border: $kendo-base-border !default;
-/// The gradient background of hovered items.
-$kendo-hover-gradient: $kendo-base-gradient !default;
-
-/// The background of selected items.
-$kendo-selected-bg: $kendo-color-primary !default;
-/// The text color of selected items.
-$kendo-selected-text: k-contrast-legacy( $kendo-selected-bg ) !default;
-/// The border color of selected items.
-$kendo-selected-border: $kendo-base-border !default;
-/// The gradient background of selected items.
-$kendo-selected-gradient: $kendo-base-gradient !default;
-
-/// The background of selected and hovered items.
-$kendo-selected-hover-bg: k-try-shade( $kendo-selected-bg, .5 ) !default;
-/// The text color of selected and hovered items.
-$kendo-selected-hover-text: $kendo-selected-text !default;
-/// The border of selected and hovered items.
-$kendo-selected-hover-border: $kendo-base-border !default;
-/// The gradient of selected and hovered items.
-$kendo-selected-hover-gradient: $kendo-base-gradient !default;
-
-// TODO: refactor
-/// Box shadow of focused items.
-$kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
-
-/// Transition used across all components.
-$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
-
-
-/// Text color of disabled items.
-$kendo-disabled-text: #8f8f8f !default;
-/// Filter used for disabled items.
-$kendo-disabled-filter: grayscale(.1) !default;
-/// Opacity used for disabled items.
-$kendo-disabled-opacity: .6 !default;
+/// Border radius for all components.
+$kendo-border-radius: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: k-math-div($kendo-border-radius, 2) !default;
+$kendo-border-radius-md: $kendo-border-radius !default;
+$kendo-border-radius-lg: ($kendo-border-radius * 2) !default;
 
-$kendo-disabled-styling: (
-    opacity: $kendo-disabled-opacity,
-    filter: $kendo-disabled-filter
+$kendo-border-radii: (
+    DEFAULT: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    0: 0,
+    sm: var(--kendo-border-radius-sm, $kendo-border-radius-sm),
+    md: var(--kendo-border-radius-md, $kendo-border-radius-md),
+    lg: var(--kendo-border-radius-lg, $kendo-border-radius-lg),
+    none: 0,
+    full: 9999px,
 ) !default;
 
+// Metrics
+$kendo-padding-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-x: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-sm-y: k-map-get($kendo-spacing, 0.5) !default;
+$kendo-padding-md-x: k-map-get($kendo-spacing, 2) !default;
+$kendo-padding-md-y: k-map-get($kendo-spacing, 1) !default;
+$kendo-padding-lg-x: k-map-get($kendo-spacing, 3) !default;
+$kendo-padding-lg-y: k-map-get($kendo-spacing, 1.5) !default;
 
-// Generic styles
-
-/// Background color of the component header.
-/// @group component
-$kendo-component-header-bg: $kendo-base-bg !default;
-/// Text color of the component header.
-/// @group component
-$kendo-component-header-text: $kendo-base-text !default;
-/// Border color of the component header.
-/// @group component
-$kendo-component-header-border: $kendo-base-border !default;
-/// Gradient of the component header.
-/// @group component
-$kendo-component-header-gradient: null !default;
-
+// Equilateral triangle variables
+// stylelint-disable number-max-precision
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: 0.8660254038 !default;
+// stylelint-enable number-max-precision
 
-/// Background color of the invalid items.
-/// @group component
-$kendo-invalid-bg: null !default;
-/// Text color of the invalid items.
-/// @group component
-$kendo-invalid-text: $kendo-color-error !default;
-/// Border color of the invalid items.
-/// @group component
-$kendo-invalid-border: $kendo-color-error !default;
-/// Shadow of the invalid items.
-/// @group component
-$kendo-invalid-shadow: null !default;
+// Loading
+$kendo-loading-opacity: .3 !default;
+$kendo-zindex-loading: 100 !default;
+// #endregion
 
 // #endregion
 
@@ -5407,36 +6108,6 @@ $kendo-invalid-shadow: null !default;
 
 }
 
-// #endregion
-// #region @import "./_selection.scss"; -> scss/common/_selection.scss
-@include exports( "common/selection/marquee" ) {
-
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
-
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .k-marquee-color {
-        color: $kendo-selected-text;
-        background-color: $kendo-selected-bg;
-        border-color: $kendo-selected-border;
-        opacity: .6;
-    }
-    .k-marquee-text {
-        color: $kendo-selected-text;
-    }
-
-}
-
 // #endregion
 
 // #endregion
@@ -13331,7 +14002,10 @@ $kendo-utils: (
 
 // Register
 // #region @import "../core/module-system/index.import.scss"; -> scss/core/module-system/index.import.scss
+// #region @import "@progress/kendo-theme-core/scss/module-system/index.import.scss"; -> node_modules/@progress/kendo-theme-core/scss/module-system/index.import.scss
 // File already imported_once. Skipping output.
+// #endregion
+
 // #endregion
 @include module-register( $_kendo-module-meta... );
 
@@ -19579,53 +20253,129 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/loader/_variables.scss
 // Loader
 
+/// The border radius of the Loader segment.
+/// @group loader
 $kendo-loader-segment-border-radius: 50% !default;
+
+/// The size of the small Loader segment.
+/// @group loader
 $kendo-loader-sm-segment-size: k-map-get( $kendo-spacing, 1 ) !default;
+/// The size of the medium Loader segment.
+/// @group loader
 $kendo-loader-md-segment-size: k-map-get( $kendo-spacing, 2 ) !default;
+/// The size of the large Loader segment.
+/// @group loader
 $kendo-loader-lg-segment-size: k-map-get( $kendo-spacing, 4 ) !default;
 
+/// The padding of the small Loader.
+/// @group loader
 $kendo-loader-sm-padding: k-math-div( $kendo-loader-sm-segment-size, 2 ) !default;
+/// The padding of the medium Loader.
+/// @group loader
 $kendo-loader-md-padding: k-math-div( $kendo-loader-md-segment-size, 2 ) !default;
+/// The padding of the large Loader.
+/// @group loader
 $kendo-loader-lg-padding: k-math-div( $kendo-loader-lg-segment-size, 2 ) !default;
 
+/// The width of the small spinner-3 Loader.
+/// @group loader
 $kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
-$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+/// The width of the medium spinner-3 Loader.
+/// @group loader
 $kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
-$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+/// The width of the large spinner-3 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+
+/// The height of the small spinner-3 Loader.
+/// @group loader
+$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+/// The height of the medium spinner-3 Loader.
+/// @group loader
+$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+/// The height of the large spinner-3 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $equilateral-height ) !default;
 
+/// The width of the small spinner-4 Loader.
+/// @group loader
 $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-segment-size * 4 !default;
-$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+/// The width of the medium spinner-4 Loader.
+/// @group loader
 $kendo-loader-md-spinner-4-width: $kendo-loader-md-segment-size * 4 !default;
-$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+/// The width of the large spinner-4 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-segment-size * 4 !default;
+
+/// The height of the small spinner-4 Loader.
+/// @group loader
+$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+/// The height of the medium spinner-4 Loader.
+/// @group loader
+$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+/// The height of the large spinner-4 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;
 
+/// The color of the Loader based on the secondary theme color.
+/// @group loader
 $kendo-loader-secondary-bg: #656565 !default;
 
+/// The border width of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-width: 1px !default;
+/// The border style of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-style: solid !default;
+/// The border color of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-color: $kendo-component-border !default;
+/// The border radius of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+/// The background color of the container panel.
+/// @group loader
 $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
+/// The padding of the small Loader container.
+/// @group loader
 $kendo-loader-sm-container-padding: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-loader-sm-container-font-size: $kendo-font-size-sm !default;
-
+/// The padding of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-padding: k-map-get( $kendo-spacing, 5 ) !default;
-$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
-
+/// The padding of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-padding: k-map-get( $kendo-spacing, 6 ) !default;
+
+/// The gap of the small Loader container.
+/// @group loader
+$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
+/// The gap of the medium Loader container.
+/// @group loader
+$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
+/// The gap of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-gap: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
 
+/// The font size of the small Loader container.
+/// @group loader
+$kendo-loader-sm-container-font-size: $kendo-font-size-sm !default;
+/// The font size of the medium Loader container.
+/// @group loader
+$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
+/// The font size of the large Loader container.
+/// @group loader
+$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
 
-// Loading
+// Loading indicator
+/// The background color of the Loading indicator.
+/// @group loading
 $kendo-loading-bg: $kendo-component-bg !default;
+/// The text color of the Loading indicator.
+/// @group loading
 $kendo-loading-text: currentColor !default;
+/// The opacity of the Loading indicator.
+/// @group loading
 $kendo-loading-opacity: .3 !default;
 
 // #endregion
@@ -21320,14 +22070,14 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-sm-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-md-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-lg-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-lg-font-size: $kendo-font-size-lg !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
 $kendo-menu-popup-line-height: $kendo-line-height-md !default;
 $kendo-menu-popup-sm-line-height: $kendo-line-height-md !default;
 $kendo-menu-popup-md-line-height: $kendo-line-height-md !default;
-$kendo-menu-popup-lg-line-height: $kendo-line-height-md !default;
+$kendo-menu-popup-lg-line-height: $kendo-line-height-lg !default;
 
 /// The background of the menu popup.
 /// @group menu
@@ -23044,54 +23794,109 @@ $kendo-tooltip-error-border: $kendo-tooltip-error-bg !default;
 // File already imported_once. Skipping output.
 // #endregion
 
-
 // Window
 
+/// The width of the border around the Window.
+/// @group window
 $kendo-window-border-width: 0px !default;
+/// The border radius of the Window.
+/// @group window
 $kendo-window-border-radius: 0px !default;
+/// The font family of the Window.
+/// @group window
 $kendo-window-font-family: $kendo-font-family !default;
+/// The font size of the Window.
+/// @group window
 $kendo-window-font-size: $kendo-font-size-md !default;
+/// The line height of the Window.
+/// @group window
 $kendo-window-line-height: 1.25 !default;
 
+/// The horizontal padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-x: 16px !default;
+/// The vertical padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-y: 12px !default;
+/// The width of the border of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border-width: 0 0 1px !default;
+/// The style of the border of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border-style: solid !default;
 
+/// The font size of the title of the Window.
+/// @group window
 $kendo-window-title-font-size: $kendo-font-size-lg !default;
+/// The line height of the title of the Window.
+/// @group window
 $kendo-window-title-line-height: 1.25 !default;
 
+/// The spacing between the buttons in the Window titlebar.
+/// @group window
 $kendo-window-actions-gap: null !default;
-
+/// The opacity of the buttons in the Window titlebar.
+/// @group window
 $kendo-window-action-opacity: null !default;
+/// The opacity of the hovered buttons in the Window titlebar.
+/// @group window
 $kendo-window-action-hover-opacity: null !default;
 
+/// The horizontal padding of the content of the Window.
+/// @group window
 $kendo-window-inner-padding-x: 16px !default;
+/// The vertical padding of the content of the Window.
+/// @group window
 $kendo-window-inner-padding-y: 16px !default;
 
+/// The horizontal padding of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-padding-x: $kendo-actions-padding-x !default;
+/// The vertical padding of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-padding-y: $kendo-actions-padding-y !default;
+/// The width of the top border of the Window action buttons.
+/// @group window
 $kendo-window-buttongroup-border-width: 1px !default;
 
+/// The background color of the Window.
+/// @group window
 $kendo-window-bg: $kendo-component-bg !default;
+/// The text color of the Window.
+/// @group window
 $kendo-window-text: $kendo-component-text !default;
+/// The border color of the Window.
+/// @group window
 $kendo-window-border: $kendo-component-border !default;
+/// The box shadow of the Window.
+/// @group window
+$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+/// The box shadow of the focused Window.
+/// @group window
+$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
+/// The background color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-bg: $kendo-component-header-bg !default;
+/// The text color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-text: $kendo-component-header-text !default;
+/// The border color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border: inherit !default;
+/// The background gradient of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-gradient: null !default;
 
-$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
-$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
-
+/// The map of the width for the different Window sizes.
+/// @group window
 $kendo-window-sizes: (
     sm: 300px,
     md: 800px,
     lg: 1200px
 ) !default;
 
-/// Theme colors map for the window.
+/// The theme colors map for the Window.
 /// @group window
 $kendo-window-theme-colors: (
     "primary": k-map-get($kendo-theme-colors, "primary"),
@@ -25854,56 +26659,56 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/listbox/_variables.scss
-// Listbox
+// ListBox
 
-/// Margin between the listbox elements.
+/// The spacing between the ListBox elements.
 /// @group listbox
 $kendo-listbox-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-/// Margin between the listbox buttons.
+/// The spacing between the ListBox buttons.
 /// @group listbox
 $kendo-listbox-button-spacing: k-map-get( $kendo-spacing, 2 ) !default;
-/// Width of the listbox.
+/// The width of the ListBox.
 /// @group listbox
 $kendo-listbox-width: 10em !default;
-/// Height of the listbox.
+/// The height of the ListBox.
 /// @group listbox
 $kendo-listbox-default-height: 200px !default;
-/// Width of the border around the listbox.
+/// The width of the border around the ListBox.
 /// @group listbox
 $kendo-listbox-border-width: 1px !default;
-/// Font family of the listbox.
+/// The font family of the ListBox.
 /// @group listbox
 $kendo-listbox-font-family: $kendo-font-family !default;
-/// Font size of the listbox.
+/// The font size of the ListBox.
 /// @group listbox
 $kendo-listbox-font-size: $kendo-font-size-md !default;
-/// Line height of the listbox.
+/// The line height of the ListBox.
 /// @group listbox
 $kendo-listbox-line-height: $kendo-line-height-md !default;
-/// Background color of the listbox.
-/// @group listbox
-$kendo-listbox-bg: $kendo-component-bg !default;
-/// Text color of the listbox.
+
+/// The text color of the ListBox.
 /// @group listbox
 $kendo-listbox-text: $kendo-component-text !default;
-/// Border color of the listbox.
+/// The background color of the ListBox.
+/// @group listbox
+$kendo-listbox-bg: $kendo-component-bg !default;
+/// The border color of the ListBox.
 /// @group listbox
 $kendo-listbox-border: $kendo-component-border !default;
 
-/// Inline item padding of the listbox.
+/// The inline padding of the ListBox item.
 /// @group listbox
 $kendo-listbox-item-padding-x: null !default;
-/// Block item padding of the listbox.
+/// The block padding of the ListBox item.
 /// @group listbox
 $kendo-listbox-item-padding-y: null !default;
 
-/// Width of the border around the drop hint.
-/// @group listbox
-$kendo-listbox-drop-hint-border-width: null !default;
-/// Width of the drop hint.
+/// The width of the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-width: 1px !default;
-
+/// The width of the border around the ListBox drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-border-width: null !default;
 // #endregion
 // #region @import "./_layout.scss"; -> scss/listbox/_layout.scss
 @mixin kendo-listbox--layout-base() {
@@ -26064,77 +26869,78 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/progressbar/_variables.scss
-// Progressbar
+// ProgressBar
 
-/// Height of the progressbar.
+/// The height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-height: 22px !default;
-/// Horizontal width of the progressbar.
+/// The horizontal width of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-horizontal-width: 100% !default;
-/// Animation timing of the progressbar.
+/// The animation timing of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-animation-timing: 1s linear infinite !default;
-/// Border width of the progressbar.
+/// The width of the border around the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border-width: 0px !default;
-/// Font family of the progressbar.
+/// The font family of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-font-family: $kendo-font-family !default;
-/// Font size of the progressbar.
+/// The font size of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-font-size: $kendo-font-size-sm !default;
-/// Line height of the progressbar.
+/// The line height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-line-height: 1 !default;
-/// Background color of the progressbar.
+
+/// The background color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
-/// Text color of the progressbar.
+/// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
-/// Border color of the progressbar.
+/// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: $kendo-component-border !default;
-/// Background gradient of the progressbar.
+/// The background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-gradient: null !default;
 
-/// Progress background color of the progressbar.
+/// The progress background color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-bg: $kendo-color-primary !default;
-/// Progress text color of the progressbar.
+/// The progress text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
-/// Progress border color of the progressbar.
+/// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
-/// Progress background gradient of the progressbar.
+/// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;
 
-/// Background color of the indeterminate progressbar.
+/// The background color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-bg: $kendo-progressbar-bg !default;
-/// Text color of the indeterminate progressbar.
+/// The text color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
-/// Border color of the indeterminate progressbar.
+/// The border color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-border: $kendo-progressbar-border !default;
-/// Background gradient of the indeterminate progressbar.
+/// The background gradient of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-gradient: null !default;
 
-/// Border color of the chunk progressbar.
+/// The border color of the chunk ProgressBar.
 /// @group progressbar
 $kendo-progressbar-chunk-border: $kendo-body-bg !default;
 
 // Circular Progressbar
-/// Arc stroke color of the circular progressbar.
+/// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
-/// Scale stroke background color of the circular progressbar.
+/// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 
@@ -29379,15 +30185,32 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/colorpalette/_variables.scss
-// Colorpalette
+// ColorPalette
+
+/// The font family of the ColorPalette.
+/// @group colorpalette
 $kendo-color-palette-font-family: $kendo-font-family !default;
+/// The font size of the ColorPalette.
+/// @group colorpalette
 $kendo-color-palette-font-size: $kendo-font-size-md !default;
+/// The line height of the ColorPalette.
+/// @group colorpalette
 $kendo-color-palette-line-height: 0 !default;
 
+/// The width of the ColorPalette tile.
+/// @group colorpalette
 $kendo-color-palette-tile-width: k-map-get( $kendo-spacing, 6 ) !default;
+/// The height of the ColorPalette tile.
+/// @group colorpalette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The shadow of the ColorPalette focused tile.
+/// @group colorpalette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
+/// The shadow of the ColorPalette hovered tile.
+/// @group colorpalette
 $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 ) !default;
+/// The shadow of the ColorPalette selected tile.
+/// @group colorpalette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
 
 // #endregion
@@ -29648,59 +30471,140 @@ $_kendo-module-meta: (
 // File already imported_once. Skipping output.
 // #endregion
 
-
 // ColorGradient
+
+/// The spacer of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 
+/// The width of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-width: 272px !default;
+/// The width of the border around the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-border-width: 1px !default;
+/// The border radius of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-border-radius: $kendo-border-radius-md !default;
+/// The vertical padding of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
+/// The horizontal padding of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
+/// The spacing between the sections of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
+/// The font family of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-font-family: $kendo-font-family !default;
+/// The font size of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-font-size: $kendo-font-size-md !default;
+/// The line height of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-line-height: $kendo-line-height-md !default;
-$kendo-color-gradient-bg: $kendo-component-bg !default;
+/// The text color of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-text: $kendo-component-text !default;
+/// The background color of the ColorGradient.
+/// @group cologradient
+$kendo-color-gradient-bg: $kendo-component-bg !default;
+/// The border color of the ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The border color of the focused ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-focus-border: null !default;
+/// The box shadow of the focused ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
+/// The border radius of the ColorGradient canvas.
+/// @group cologradient
 $kendo-color-gradient-canvas-border-radius: $kendo-border-radius-md !default;
+/// The spacing between the items of the ColorGradient canvas.
+/// @group cologradient
 $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
+/// The height the ColorGradient canvas hsv rectangle.
+/// @group cologradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 
+/// The width of the ColorGradient slider.
+/// @group cologradient
 $kendo-color-gradient-slider-track-size: 10px !default;
+/// The border radius of the ColorGradient slider.
+/// @group cologradient
 $kendo-color-gradient-slider-border-radius: 10px !default;
+/// The width of the border around the ColorGradient slider drag handle.
+/// @group cologradient
 $kendo-color-gradient-slider-draghandle-border-width: 3px !default;
 
+/// The height of the ColorGradient vertical slider.
+/// @group cologradient
 $kendo-color-gradient-slider-vertical-size: 180px !default;
+/// The width of the ColorGradient horizontal slider.
+/// @group cologradient
 $kendo-color-gradient-slider-horizontal-size: 100% !default;
 
+/// The width of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-width: 14px !default;
+/// The height of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-height: 14px !default;
+/// The width of the border around the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-border-width: 1px !default;
+/// The border radius of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-border-radius: 50% !default;
-$kendo-color-gradient-draghandle-bg: transparent !default;
+/// The text color of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-text: null !default;
+/// The background color of the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-bg: transparent !default;
+/// The color of the border around the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
+/// The box shadow of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
+/// The box shadow of the focused ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
+/// The box shadow of the hovered ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
 
+/// The vertical margin of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-canvas-draghandle-margin-y: - k-math-div( $kendo-color-gradient-draghandle-height, 2 ) !default;
+/// The horizontal margin of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-canvas-draghandle-margin-x: - k-math-div( $kendo-color-gradient-draghandle-width, 2 ) !default;
 
+/// The width of the ColorGradient input.
+/// @group cologradient
 $kendo-color-gradient-input-width: 46px !default;
+/// The spacing between the ColorGradient inputs.
+/// @group cologradient
 $kendo-color-gradient-input-gap: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
+/// The spacing between the ColorGradient inputs and their labels.
+/// @group cologradient
 $kendo-color-gradient-input-label-gap: k-math-div( $kendo-color-gradient-spacer, 3 ) !default;
+/// The text color of the ColorGradient input labels.
+/// @group cologradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
+/// The font weight of the ColorGradient contrast ratio text.
+/// @group cologradient
 $kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
+/// The spacing between the items in the ColorGradient contrast tool.
+/// @group cologradient
 $kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/colorgradient/_layout.scss
 @mixin kendo-color-gradient--layout-base() {
@@ -30051,38 +30955,86 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/coloreditor/_variables.scss
-// Coloreditor/FlatColorPicker
+// ColorEditor/FlatColorPicker
+
+/// The spacer of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-spacer: k-map-get( $kendo-spacing, 3 ) !default;
 
+/// The minimum width of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-min-width: 272px !default;
+/// The width of the border around the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-border-width: 1px !default;
+/// The border radius of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-border-radius: $kendo-border-radius-md !default;
+/// The font family of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-font-family: $kendo-font-family !default;
+/// The font size of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-font-size: $kendo-font-size-md !default;
+/// The line height of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-line-height: $kendo-line-height-md !default;
-$kendo-color-editor-bg: $kendo-component-bg !default;
+/// The text color of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-text: $kendo-component-text !default;
+/// The background color of the ColorEditor.
+/// @group coloreditor
+$kendo-color-editor-bg: $kendo-component-bg !default;
+/// The border color of the ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-border: $kendo-component-border !default;
 
+/// The border color of the focused ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-focus-border: null !default;
+/// The box shadow of the focused ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
 
+/// The vertical padding of the ColorEditor header.
+/// @group coloreditor
 $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the ColorEditor header.
+/// @group coloreditor
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
+/// The spacing between the ColorEditor header actions.
+/// @group coloreditor
 $kendo-color-editor-header-actions-gap: k-math-div( $kendo-color-editor-spacer, 1.5 ) !default;
 
-$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
+/// The width of the ColorEditor preview.
+/// @group coloreditor
 $kendo-color-editor-color-preview-width: 32px !default;
+/// The height of the ColorEditor preview.
+/// @group coloreditor
 $kendo-color-editor-color-preview-height: 12px !default;
+/// The spacing between the colors in the ColorEditor preview.
+/// @group coloreditor
+$kendo-color-editor-preview-gap: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The vertical padding of the ColorEditor views container.
+/// @group coloreditor
 $kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the ColorEditor views container.
+/// @group coloreditor
 $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the ColorEditor views container.
+/// @group coloreditor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
 
+/// The outline color of the focused ColorGradient.
+/// @group coloreditor
 $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
+/// The outline width of the focused ColorGradient.
+/// @group coloreditor
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
+/// The outline offset of the focused ColorGradient.
+/// @group coloreditor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/coloreditor/_layout.scss
 @mixin kendo-color-editor--layout-base() {
@@ -33265,49 +34217,102 @@ $kendo-dropzone-note-text: $kendo-subtle-text !default;
 // #region @import "./_variables.scss"; -> scss/upload/_variables.scss
 // Upload
 
+/// The width of the border around the Upload.
+/// @group upload
 $kendo-upload-border-width: 1px !default;
+/// The font family of the Upload.
+/// @group upload
 $kendo-upload-font-family: $kendo-font-family !default;
+/// The font size of the Upload.
+/// @group upload
 $kendo-upload-font-size: $kendo-font-size-md !default;
+/// The line height of the Upload.
+/// @group upload
 $kendo-upload-line-height: $kendo-line-height-md !default;
+/// The maximum height of the list with uploaded items.
+/// @group upload
 $kendo-upload-max-height: 300px !default;
 
-$kendo-upload-bg: $kendo-component-bg !default;
+/// The text color of the Upload.
+/// @group upload
 $kendo-upload-text: $kendo-component-text !default;
+/// The background color of the Upload.
+/// @group upload
+$kendo-upload-bg: $kendo-component-bg !default;
+/// The border color of the Upload.
+/// @group upload
 $kendo-upload-border: $kendo-component-border !default;
 
+/// The horizontal padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The text color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-text: $kendo-component-header-text !default;
+/// The background color of the Upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The border color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
+/// The background color of the hovered Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
+/// The text color of the Upload status message.
+/// @group upload
 $kendo-upload-status-text: $kendo-subtle-text !default;
+/// The opacity of the Upload status message.
+/// @group upload
 $kendo-upload-status-text-opacity: null !default;
 
+/// The horizontal padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The vertical spacing between uploaded batch items.
+/// @group upload
 $kendo-upload-multiple-items-spacing: 12px !default;
 
+/// The font size of the Upload validation message.
+/// @group upload
 $kendo-upload-validation-font-size: 11px !default;
+/// The horizontal spacing of the Upload status icon.
+/// @group upload
 $kendo-upload-icon-spacing: $kendo-icon-spacing !default;
+/// The color of the uploaded items icon.
+/// @group upload
 $kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$kendo-upload-item-image-width: 30px !default;
-$kendo-upload-item-image-height: 30px !default;
-$kendo-upload-item-image-border: 0px !default; // TODO: remove
-
+/// The thickness of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-thickness: 2px !default;
+/// The background color of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-bg: $kendo-color-info !default;
 
-$kendo-upload-success-bg: $kendo-color-success !default;
+/// The success text color of the Upload.
+/// @group upload
 $kendo-upload-success-text: $kendo-color-success !default;
+/// The success background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-success-bg: $kendo-color-success !default;
 
-$kendo-upload-error-bg: $kendo-color-error !default;
+/// The error text color of the Upload.
+/// @group upload
 $kendo-upload-error-text: $kendo-color-error !default;
-$kendo-upload-error-border: $kendo-color-error !default;
+/// The error background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-error-bg: $kendo-color-error !default;
 
+/// The shadow of the focused Upload button, actions and uploaded items.
+/// @group upload
 $kendo-upload-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 // #endregion
@@ -33729,29 +34734,60 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/appbar/_variables.scss
-// Appbar
-$kendo-appbar-margin-y: null !default;
+// AppBar
+
+/// The horizontal margin of the AppBar.
+/// @group appbar
 $kendo-appbar-margin-x: null !default;
-$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical margin of the AppBar.
+/// @group appbar
+$kendo-appbar-margin-y: null !default;
+/// The horizontal padding of the AppBar.
+/// @group appbar
 $kendo-appbar-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the AppBar.
+/// @group appbar
+$kendo-appbar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The width of the border around the AppBar.
+/// @group appbar
 $kendo-appbar-border-width: 0px !default;
-
+/// The z-index of the AppBar.
+/// @group appbar
 $kendo-appbar-zindex: 1000 !default;
-
+/// The font family of the AppBar.
+/// @group appbar
+$kendo-appbar-font-family: $kendo-font-family !default;
+/// The font size of the AppBar.
+/// @group appbar
 $kendo-appbar-font-size: $kendo-font-size-md !default;
+/// The line height of the AppBar.
+/// @group appbar
 $kendo-appbar-line-height: $kendo-line-height-md !default;
-$kendo-appbar-font-family: $kendo-font-family !default;
+
+/// The spacing between the AppBar sections.
+/// @group appbar
 $kendo-appbar-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The background color of the AppBar based on light theme color.
+/// @group appbar
 $kendo-appbar-light-bg: $kendo-color-light !default;
+/// The text color of the AppBar based on light theme color.
+/// @group appbar
 $kendo-appbar-light-text: k-contrast-legacy( $kendo-color-light ) !default;
 
+/// The background color of the AppBar based on dark theme color.
+/// @group appbar
 $kendo-appbar-dark-bg: $kendo-color-dark !default;
+/// The text color of the AppBar based on dark theme color.
+/// @group appbar
 $kendo-appbar-dark-text: k-contrast-legacy( $kendo-color-dark ) !default;
 
+/// The box shadow of the AppBar.
+/// @group appbar
 $kendo-appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
+/// The box shadow of the AppBar with bottom position.
+/// @group appbar
 $kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/appbar/_layout.scss
 @mixin kendo-appbar--layout-base() {
@@ -34564,6 +35600,7 @@ $kendo-actionsheet-item-disabled-shadow: null !default;
 
 
 // Adaptive Actionsheet
+$kendo-adaptive-actionsheet-font-size: $kendo-font-size-lg !default;
 $kendo-adaptive-actionsheet-titlebar-border-width: 1px !default;
 $kendo-adaptive-actionsheet-titlebar-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 $kendo-adaptive-actionsheet-titlebar-padding-x: $kendo-adaptive-actionsheet-titlebar-padding-y !default;
@@ -34809,6 +35846,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
     .k-adaptive-actionsheet {
         max-width: 100%;
         width: 100%;
+        font-size: $kendo-adaptive-actionsheet-font-size;
 
         // TMP: this should be moved to action sheet
         display: flex;
@@ -34848,6 +35886,12 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
             padding-inline: 0;
         }
 
+        .k-menu-group {
+            height: 100%;
+            overflow: auto;
+            position: static;
+        }
+
         .k-calendar {
             margin-inline: auto;
             border-width: 0;
@@ -35391,17 +36435,31 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/dialog/_variables.scss
 // Dialog
+
+/// The background color of the Dialog titlebar.
+/// @group dialog
 $kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
+/// The text color of the Dialog titlebar.
+/// @group dialog
 $kendo-dialog-titlebar-text: $kendo-component-header-text !default;
+/// The border color of the Dialog titlebar.
+/// @group dialog
 $kendo-dialog-titlebar-border: inherit !default;
 
+/// The horizontal padding of the Dialog action buttons.
+/// @group dialog
 $kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
+/// The vertical padding of the Dialog action buttons.
+/// @group dialog
 $kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
+/// The width of the top border of the Dialog action buttons.
+/// @group dialog
 $kendo-dialog-buttongroup-border-width: 1px !default;
-
+/// The spacing between the Dialog action buttons.
+/// @group dialog
 $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
-/// Theme colors map for the dialog.
+/// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
     "primary": k-map-get($kendo-theme-colors, "primary"),
@@ -35993,44 +37051,43 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/notification/_variables.scss
 // Notification
 
-/// Vertical padding of the notification container.
+/// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;
-/// Horizontal padding of the notification.
+/// The vertical padding of the Notification.
 /// @group notification
 $kendo-notification-padding-y: 4px !default;
-/// Width of the border around the notification.
+/// The width of the border around the Notification.
 /// @group notification
 $kendo-notification-border-width: 1px !default;
-/// Border radius of the notification.
+/// The border radius of the Notification.
 /// @group notification
 $kendo-notification-border-radius: $kendo-border-radius-md !default;
-/// Box shadow of the notification.
-/// @group notification
-$kendo-notification-shadow: $kendo-popup-shadow !default;
-/// Font family of the notification.
+/// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: $kendo-font-family !default;
-/// Font size of the notification.
+/// The font size of the Notification.
 /// @group notification
 $kendo-notification-font-size: $kendo-font-size-sm !default;
-/// Line height of the notification.
+/// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: $kendo-line-height-md !default;
-
-/// Horizontal spacing of the notification icon.
-/// @group notification
-$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
-
-/// Background color of the notification.
+/// The background color of the Notification.
 /// @group notification
 $kendo-notification-bg: $kendo-component-bg !default;
-/// Text color of the notification.
+/// The text color of the Notification.
 /// @group notification
 $kendo-notification-text: $kendo-component-text !default;
-/// Border color of the notification.
+/// The border color of the Notification.
 /// @group notification
 $kendo-notification-border: $kendo-component-border !default;
+/// The box shadow of the Notification.
+/// @group notification
+$kendo-notification-shadow: $kendo-popup-shadow !default;
+
+/// The horizontal spacing of the Notification icon.
+/// @group notification
+$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 @function notification-theme( $colors ) {
     $_theme: ();
@@ -36046,9 +37103,11 @@ $kendo-notification-border: $kendo-component-border !default;
     @return $_theme;
 }
 
-/// Theme colors of the notification.
+/// The theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme-colors: $kendo-theme-colors !default;
+/// The generated theme colors map for the Notification.
+/// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
 
 // #endregion
@@ -36840,37 +37899,90 @@ $kendo-card-callout-height: 20px !default;
 // Component
 // #region @import "./_variables.scss"; -> scss/popover/_variables.scss
 // Popover
+
+/// The width of the border around the Popover.
+/// @group popover
 $kendo-popover-border-width: $kendo-card-border-width !default;
+/// The style of the border around the Popover.
+/// @group popover
 $kendo-popover-border-style: solid !default;
+/// The radius of the border around the Popover.
+/// @group popover
 $kendo-popover-border-radius: $kendo-card-border-radius !default;
-$kendo-popover-font-size: $kendo-card-font-size !default;
+/// The font family of the Popover.
+/// @group popover
 $kendo-popover-font-family: $kendo-card-font-family !default;
+/// The font size of the Popover.
+/// @group popover
+$kendo-popover-font-size: $kendo-card-font-size !default;
+/// The line height of the Popover.
+/// @group popover
 $kendo-popover-line-height: $kendo-card-line-height !default;
-$kendo-popover-bg: $kendo-component-bg !default;
+
+/// The text color of the Popover.
+/// @group popover
 $kendo-popover-text: $kendo-component-text !default;
+/// The background color of the Popover.
+/// @group popover
+$kendo-popover-bg: $kendo-component-bg !default;
+/// The border color of the Popover.
+/// @group popover
 $kendo-popover-border: $kendo-component-border !default;
+/// The box shadow of the Popover.
+/// @group popover
 $kendo-popover-shadow: $kendo-popup-shadow !default;
 
-$kendo-popover-header-padding-y: $kendo-card-header-padding-y !default;
+/// The horizontal padding of the Popover header.
+/// @group popover
 $kendo-popover-header-padding-x: $kendo-card-header-padding-x !default;
+/// The vertical padding of the Popover header.
+/// @group popover
+$kendo-popover-header-padding-y: $kendo-card-header-padding-y !default;
+/// The border width of the Popover header.
+/// @group popover
 $kendo-popover-header-border-width: $kendo-card-header-border-width !default;
+/// The border style of the Popover header.
+/// @group popover
 $kendo-popover-header-border-style: $kendo-popover-border-style !default;
-$kendo-popover-header-bg: $kendo-card-header-bg !default;
+/// The text color of the Popover header.
+/// @group popover
 $kendo-popover-header-text: $kendo-card-header-text !default;
+/// The background color of the Popover header.
+/// @group popover
+$kendo-popover-header-bg: $kendo-card-header-bg !default;
+/// The border color of the Popover header.
+/// @group popover
 $kendo-popover-header-border: $kendo-card-header-border !default;
 
-$kendo-popover-body-padding-y: $kendo-card-body-padding-y !default;
+/// The horizontal padding of the Popover body.
+/// @group popover
 $kendo-popover-body-padding-x: $kendo-card-body-padding-x !default;
+/// The vertical padding of the Popover body.
+/// @group popover
+$kendo-popover-body-padding-y: $kendo-card-body-padding-y !default;
 
+/// The border width of the Popover actions.
+/// @group popover
 $kendo-popover-actions-border-width: $kendo-popover-border-width !default;
 
+/// The width of the Popover callout.
+/// @group popover
 $kendo-popover-callout-width: $kendo-card-callout-width !default;
+/// The height of the Popover callout.
+/// @group popover
 $kendo-popover-callout-height: $kendo-card-callout-height !default;
+/// The border width of the Popover callout.
+/// @group popover
 $kendo-popover-callout-border-width: $kendo-popover-border-width !default;
+/// The border style of the Popover callout.
+/// @group popover
 $kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+/// The background color of the Popover callout.
+/// @group popover
 $kendo-popover-callout-bg: $kendo-popover-bg !default;
+/// The border color of the Popover callout.
+/// @group popover
 $kendo-popover-callout-border: $kendo-popover-border !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/popover/_layout.scss
 @mixin kendo-popover--layout-base() {
@@ -37200,35 +38312,68 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/bottom-navigation/_variables.scss
-// Bottom-navigation
+// BottomNavigation
+
+/// The horizontal padding of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+/// The spacing between the BottomNavigation items.
+/// @group bottom-navigation
 $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+/// The width of the border around the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
-
+/// The font family of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-font-family: $kendo-font-family !default;
+/// The font size of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-font-size: $kendo-font-size-md !default;
+/// The line height of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-line-height: normal !default;
+/// The letter spacing of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
+/// The horizontal padding of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-padding-y: 0 !default;
+/// The minimum width of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
+/// The maximum width of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-max-width: null !default;
+/// The minimum height of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+/// The border radius of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: $kendo-border-radius-md !default;
+/// The spacing of the BottomNavigation item.
+/// @group bottom-navigation
 $kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
-$kendo-bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-bottom-nav-item-icon-margin-x: $kendo-bottom-nav-item-icon-margin-y !default;
-$kendo-bottom-nav-item-disabled-opacity: .5 !default;
-
+/// The box shadow of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
 
-$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+/// The text color of the flat BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-flat-text: $kendo-component-text !default;
+/// The background color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+/// The border color of the flat BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-nav-flat-border: $kendo-component-border !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/bottom-navigation/_layout.scss
 @mixin kendo-bottom-navigation--layout-base() {
@@ -37469,63 +38614,234 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/breadcrumb/_variables.scss
 // Breadcrumb
 
+/// The width of the border around the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-border-width: 0px !default;
+
+/// The horizontal margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
+/// The vertical margin of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
+/// The horizontal padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
+/// The vertical padding of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
-$kendo-breadcrumb-border-width: 0px !default;
 
+/// The font family of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
+
+/// The font size of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+/// The font size of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
+/// The font size of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
+/// The font size of the large Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
+
+/// The line-height of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-
+/// The line-height of the small Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
+/// The line-height of the medium Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
+/// The line-height of the height Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
+
+/// The base background of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
+/// The base text color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
+/// The base border color of the Breadcrumb.
+/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
+/// The box shadow of the focused Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+
+/// The horizontal padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The vertical padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the medium Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+
+/// The border-radius of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
-
-$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
-$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
-
+/// The vertical padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+/// The vertical padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The vertical padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+
+/// The horizontal padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
+/// The horizontal padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
+/// The horizontal padding of the medium Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
+/// The horizontal padding of the large Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
+/// The spacing of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
+/// The background color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
+/// The border color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
+/// The text color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
+/// The border color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
+/// The background color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: null !default;
+/// The text color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
+/// The border color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
+/// The background color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
+/// The text color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
+/// The border color of the Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
+/// The background color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
+/// The text color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
+/// The border color of the hovered Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
+/// The background color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: null !default;
+/// The text color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
+/// The border color of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
+/// The box shadow of the focused Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
+/// The background color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
+/// The text color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
+/// The border color of the current Breadcrumb root link.
+/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+/// The sizes map for the Breadcrumb.
+/// @group breadcrumb
+$kendo-breadcrumb-sizes: (
+    sm: (
+        link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-sm-font-size,
+        line-height: $kendo-breadcrumb-sm-line-height
+    ),
+    md: (
+        link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-md-font-size,
+        line-height: $kendo-breadcrumb-md-line-height
+    ),
+    lg: (
+        link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+        link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+        icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+        icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+        font-size: $kendo-breadcrumb-lg-font-size,
+        line-height: $kendo-breadcrumb-lg-line-height
+    )
+) !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/breadcrumb/_layout.scss
@@ -37542,8 +38858,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-breadcrumb-font-family;
-        font-size: $kendo-breadcrumb-font-size;
-        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -37595,8 +38909,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding-block: $kendo-breadcrumb-link-padding-y;
-        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -37610,21 +38922,12 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         transition: $kendo-transition;
     }
 
-    .k-breadcrumb-root-link {
-        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
-    }
-
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
-    .k-breadcrumb-icon-link {
-        padding-block: $kendo-breadcrumb-icon-link-padding-y;
-        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
-    }
-
 
     // Breadcrumb delimiter
     .k-breadcrumb-delimiter,
@@ -37643,6 +38946,34 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
         }
     }
 
+
+    // Sizes
+    @each $size, $size-props in $kendo-breadcrumb-sizes {
+        $_link-padding-x: k-map-get( $size-props, link-padding-x );
+        $_link-padding-y: k-map-get( $size-props, link-padding-y );
+        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
+        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+
+        .k-breadcrumb-#{$size} {
+            font-size: $_font-size;
+            line-height: $_line-height;
+
+
+            .k-breadcrumb-link,
+            .k-breadcrumb-root-link {
+                padding-block: $_link-padding-y;
+                padding-inline: $_link-padding-x;
+            }
+
+            .k-breadcrumb-icon-link {
+                padding-block: $_icon-link-padding-y;
+                padding-inline: $_icon-link-padding-x;
+            }
+        }
+    }
+
 }
 
 
@@ -39844,40 +41175,83 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/expansion-panel/_variables.scss
-// Expansion panel
+// ExpansionPanel
+
+/// The vertical spacing of the ExpansionPanel.
+/// @group expander
 $kendo-expander-spacing-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The width of the border around the ExpansionPanel.
+/// @group expander
+$kendo-expander-border-width: 1px !default;
+/// The font family of the ExpansionPanel.
+/// @group expander
 $kendo-expander-font-family: $kendo-font-family !default;
+/// The font size of the ExpansionPanel.
+/// @group expander
 $kendo-expander-font-size: $kendo-font-size-md !default;
+/// The hine height of the ExpansionPanel.
+/// @group expander
 $kendo-expander-line-height: $kendo-line-height-md !default;
-$kendo-expander-border-width: 1px !default;
 
-$kendo-expander-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
-$kendo-expander-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-$kendo-expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
-
-$kendo-expander-bg: $kendo-component-bg !default;
+/// The text color of the ExpansionPanel.
+/// @group expander
 $kendo-expander-text: $kendo-component-text !default;
+/// The background color of the ExpansionPanel.
+/// @group expander
+$kendo-expander-bg: $kendo-component-bg !default;
+/// The border color of the ExpansionPanel.
+/// @group expander
 $kendo-expander-border: $kendo-component-border !default;
 
+/// The box shadow of the focused ExpansionPanel.
+/// @group expander
 $kendo-expander-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$kendo-expander-header-bg: transparent !default;
+/// The horizontal padding of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+
+/// The text color of the ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-text: $kendo-expander-text !default;
+/// The background color of the ExpansionPanel header.
+/// @group expander
+$kendo-expander-header-bg: transparent !default;
+/// The border color of the ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-border: null !default;
 
+/// The background color of the hovered ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-hover-bg: rgba(0, 0, 0, .04) !default;
-
+/// The background color of the focused ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-focus-bg: null !default;
+/// The box shadow of the focused ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-focus-shadow: $kendo-list-item-focus-shadow !default;
 
+/// The text color of the ExpansionPanel title.
+/// @group expander
 $kendo-expander-title-text: $kendo-color-primary !default;
 
+/// The text color of the ExpansionPanel sub-title.
+/// @group expander
 $kendo-expander-header-sub-title-text: $kendo-subtle-text !default;
 
+/// The horizontal margin of the ExpansionPanel indicator.
+/// @group expander
+$kendo-expander-indicator-margin-x: k-map-get( $kendo-spacing, 3 ) !default;
+
+/// The horizontal padding of the ExpansionPanel content.
+/// @group expander
 $kendo-expander-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the ExpansionPanel content.
+/// @group expander
 $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/expansion-panel/_layout.scss
 @mixin kendo-expander--layout-base() {
@@ -40931,17 +42305,36 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/tilelayout/_variables.scss
 // TileLayout
+
+/// The width of the border around the TileLayout.
+/// @group tilelayout
 $kendo-tile-layout-border-width: 0px !default;
+/// The background color of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-bg: $kendo-base-bg !default;
+
+/// The width of the border around the TileLayout card.
+/// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;
+/// The focus box shadow of the TileLayout card.
+/// @group tilelayout
 $kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;
 
+/// The width of the border around the TileLayout hint.
+/// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;
+/// The radius of the border around the TileLayout hint.
+/// @group tilelayout
 $kendo-tile-layout-hint-border-radius: $kendo-border-radius-lg !default;
+/// The color of the border around the TileLayout hint.
+/// @group tilelayout
+$kendo-tile-layout-hint-border: $kendo-component-border !default;
+/// The background color of the TileLayout hint.
+/// @group tilelayout
+$kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;
+
 
-$kendo-tile-layout-bg: $kendo-base-bg !default;
 
-$kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;
-$kendo-tile-layout-hint-border: $kendo-component-border !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/tilelayout/_layout.scss
@@ -44115,32 +45508,66 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/listview/_variables.scss
-// Listview
+// ListView
+
+/// The horizontal padding of the ListView.
+/// @group listview
 $kendo-listview-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the ListView.
+/// @group listview
 $kendo-listview-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The width of the border around bordered ListView.
+/// @group listview
 $kendo-listview-border-width: 1px !default;
+/// The font family of the ListView.
+/// @group listview
 $kendo-listview-font-family: $kendo-font-family !default;
+/// The font size of the ListView.
+/// @group listview
 $kendo-listview-font-size: $kendo-font-size-md !default;
+/// The line height of the ListView.
+/// @group listview
 $kendo-listview-line-height: $kendo-line-height-md !default;
 
-$kendo-listview-bg: $kendo-component-bg !default;
+/// The text color of the ListView.
+/// @group listview
 $kendo-listview-text: $kendo-component-text !default;
+/// The background color of the ListView.
+/// @group listview
+$kendo-listview-bg: $kendo-component-bg !default;
+/// The border color of the ListView.
+/// @group listview
 $kendo-listview-border: $kendo-component-border !default;
 
-$kendo-listview-grid-gap: 10px !default;
-
+/// The horizontal padding of the ListView items.
+/// @group listview
 $kendo-listview-item-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the ListView items.
+/// @group listview
 $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
-$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+/// The text color of the selected ListView items.
+/// @group listview
 $kendo-listview-item-selected-text: null !default;
+/// The background color of the selected ListView items.
+/// @group listview
+$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+/// The border color of the selected ListView items.
+/// @group listview
 $kendo-listview-item-selected-border: null !default;
 
-$kendo-listview-item-focus-bg: null !default;
+/// The text color of the focused ListView items.
+/// @group listview
 $kendo-listview-item-focus-text: null !default;
+/// The background color of the focused ListView items.
+/// @group listview
+$kendo-listview-item-focus-bg: null !default;
+/// The border color of the focused ListView items.
+/// @group listview
 $kendo-listview-item-focus-border: null !default;
+/// The box shadow of the focused ListView items.
+/// @group listview
 $kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/listview/_layout.scss
 @mixin kendo-listview--layout-base() {
@@ -47019,19 +48446,35 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/filter/_variables.scss
 // Filter expression builder
+
+/// The horizontal padding of the Filter.
+/// @group filter
 $kendo-filter-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Filter.
+/// @group filter
 $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
+/// The bottom margin of the Filter.
+/// @group filter
 $kendo-filter-bottom-margin: 30px !default;
+/// The width of the line that connects the Filter items.
+/// @group filter
 $kendo-filter-line-size: 1px !default;
 
+/// The width of the dropdown elements in the Filter items.
+/// @group filter
 $kendo-filter-operator-dropdown-width: 15em !default;
 
+/// The text color of the Filter preview field.
+/// @group filter
 $kendo-filter-preview-field-text: $kendo-color-primary !default;
+/// The text color of the Filter preview operator.
+/// @group filter
 $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
+/// The box shadow of the focused Filter toolbar.
+/// @group filter
 $kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/filter/_layout.scss
 @mixin kendo-filter--layout-base() {
@@ -48312,27 +49755,60 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/editor/_variables.scss
 // Editor
+
+/// The width of the border around the Еditor.
+/// @group editor
 $kendo-editor-border-width: 1px !default;
+/// The font family of the Еditor.
+/// @group editor
 $kendo-editor-font-family: $kendo-font-family !default;
+/// The font size of the Еditor.
+/// @group editor
 $kendo-editor-font-size: $kendo-font-size-md !default;
+/// The line height of the Еditor.
+/// @group editor
 $kendo-editor-line-height: $kendo-line-height-md !default;
 
+/// The text color of the Еditor placeholder.
+/// @group editor
 $kendo-editor-placeholder-text: $kendo-input-placeholder-text !default;
+/// The opacity of the Editor placeholder.
+/// @group editor
 $kendo-editor-placeholder-opacity: $kendo-input-placeholder-opacity !default;
 
+/// The selected text color of the Editor.
+/// @group editor
 $kendo-editor-selected-text: $kendo-color-primary-contrast !default;
+/// The selected background color of the Editor.
+/// @group editor
 $kendo-editor-selected-bg: $kendo-color-primary !default;
 
+/// The highlighted background color of the Editor.
+/// @group editor
 $kendo-editor-highlighted-bg: k-color-mix($kendo-color-primary, #ffffff, 20%) !default;
 
+/// The horizontal margin of the Editor's export tool icon.
+/// @group editor
 $kendo-editor-export-tool-icon-margin-x: .25em !default;
 
+/// The size of the Editor's resize handle.
+/// @group editor
 $kendo-editor-resize-handle-size: 8px !default;
+/// The border width of the Editor's resize handle.
+/// @group editor
 $kendo-editor-resize-handle-border-width: 1px !default;
+/// The border color of the Editor's resize handle.
+/// @group editor
 $kendo-editor-resize-handle-border: #000000 !default;
+/// The background color of the Editor's resize handle.
+/// @group editor
 $kendo-editor-resize-handle-bg: #ffffff !default;
 
+///  The outline width of the Editor's selected node.
+/// @group editor
 $kendo-editor-selectednode-outline-width: 2px !default;
+/// The outline color of the Editor's selected node.
+/// @group editor
 $kendo-editor-selectednode-outline-color: #88ccff !default;
 
 // #endregion
@@ -54522,44 +55998,97 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/scrollview/_variables.scss
-// Scrollview
+// ScrollView
+
+/// The width of the border around the ScrollView.
+/// @group scrollview
 $kendo-scrollview-border-width: 1px !default;
+/// The font family of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-font-family: $kendo-font-family !default;
+/// The font size of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-font-size: $kendo-font-size-md !default;
+/// The line height of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-line-height: $kendo-line-height-md !default;
 
-$kendo-scrollview-bg: $kendo-component-bg !default;
+/// The text color of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-text: $kendo-component-text !default;
+/// The background color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-bg: $kendo-component-bg !default;
+/// The border color of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-border: $kendo-component-border !default;
 
+/// The size of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-size: 10px !default;
+/// The background color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-bg: $kendo-button-bg !default;
+/// The border color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
+/// The primary background color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
+/// The primary border color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-primary-border: $kendo-color-primary !default;
+/// The box shadow of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
+/// The offset of the ScrollView pager.
+/// @group scrollview
 $kendo-scrollview-pager-offset: 0 !default;
+/// The spacing between the ScrollView pager items.
+/// @group scrollview
 $kendo-scrollview-pager-item-spacing: 20px !default;
+/// The border width of the ScrollView pager items.
+/// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
+/// The height of the ScrollView pager.
+/// @group scrollview
 $kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
 
-$kendo-scrollview-pager-multidot-threshold: 10 !default;
-$kendo-scrollview-pager-multidot-intermediate: 3 !default;
-$kendo-scrollview-pager-multidot-step: 1px !default;
-
+/// The text color of the highlight over the tapped ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
+/// The color of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-color: white !default;
+/// The box shadow of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
+/// The background color of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;
+/// The opacity of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-default-opacity: .7 !default;
+/// The hover opacity of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-hover-opacity: 1 !default;
+/// The hover background color of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-hover-span-bg: null !default;
 
+/// The background color of the ScrollView pager in light mode.
+/// @group scrollview
 $kendo-scrollview-light-bg: rgba(255, 255, 255, .4) !default;
+/// The background color of the ScrollView pager in dark mode.
+/// @group scrollview
 $kendo-scrollview-dark-bg: rgba(0, 0, 0, .4) !default;
 
+/// The duration of the ScrollView transition.
+/// @group scrollview
 $kendo-scrollview-transition-duration: .3s !default;
+/// The timing function of the ScrollView transition.
+/// @group scrollview
 $kendo-scrollview-transition-timing-function: ease-in-out !default;
 
 // #endregion