@progress/kendo-theme-material 6.5.0-dev.0 → 6.5.0-dev.1

package/dist/all.scss

@@ -1323,6 +1323,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 );
 }
 
@@ -20714,53 +20718,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: #000000 !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
@@ -24650,54 +24730,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: 4px !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.5 !default;
 
+/// The horizontal padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-x: 24px !default;
+/// The vertical padding of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-padding-y: 16px !default;
+/// The width of the border of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border-width: 0px !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: 20px !default;
+/// The line height of the title of the Window.
+/// @group window
 $kendo-window-title-line-height: 1.6 !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: 24px !default;
+/// The vertical padding of the content of the Window.
+/// @group window
 $kendo-window-inner-padding-y: 8px !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: 0px !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: $box-shadow-depth-4 !default;
+/// The box shadow of the focused Window.
+/// @group window
+$kendo-window-focus-shadow: $box-shadow-depth-5 !default;
 
+/// The background color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-bg: null !default;
+/// The text color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-text: null !default;
+/// The border color of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-border: null !default;
+/// The background gradient of the Window titlebar.
+/// @group window
 $kendo-window-titlebar-gradient: null !default;
 
-$kendo-window-shadow: $box-shadow-depth-4 !default;
-$kendo-window-focus-shadow: $box-shadow-depth-5 !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"),
@@ -27780,55 +27915,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, 3 ) !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-list-md-font-size !default;
-/// Line height of the listbox.
+/// The line height of the ListBox.
 /// @group listbox
 $kendo-listbox-line-height: $kendo-list-md-line-height !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: $kendo-list-md-item-padding-x !default;
-/// Block item padding of the listbox.
+/// The block padding of the ListBox item.
 /// @group listbox
 $kendo-listbox-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-/// Width of the border around the drop hint.
-/// @group listbox
-$kendo-listbox-drop-hint-border-width: 2px !default;
-/// Width of the drop hint.
+/// The width of the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-width: 2px !default;
+/// The width of the border around the ListBox drop hint.
+/// @group listbox
+$kendo-listbox-drop-hint-border-width: 2px !default;
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/listbox/_layout.scss
@@ -28015,77 +28151,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: 5px !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: null !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-tint( $kendo-color-primary, 8 ) !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: null !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: $kendo-color-primary-contrast !default;
-/// Progress border color of the progressbar.
+/// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: null !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-component-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;
 
@@ -31736,15 +31873,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
@@ -32037,59 +32191,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: 294px !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: $kendo-hover-border !default;
+/// The box shadow of the focused ColorGradient.
+/// @group cologradient
 $kendo-color-gradient-focus-shadow: $box-shadow-depth-2 !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( white, .8 ) !default;
+/// The box shadow of the ColorGradient canvas drag handle.
+/// @group cologradient
 $kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba( black, .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: 50px !default;
+/// The spacing between the ColorGradient inputs.
+/// @group cologradient
 $kendo-color-gradient-input-gap: k-map-get( $kendo-spacing, 2 ) !default;
+/// The spacing between the ColorGradient inputs and their labels.
+/// @group cologradient
 $kendo-color-gradient-input-label-gap: k-map-get( $kendo-spacing, 1 ) !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-medium !default;
+/// The spacing between the items in the ColorGradient contrast tool.
+/// @group cologradient
 $kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/colorgradient/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/colorgradient/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/colorgradient/_layout.scss
@@ -32456,38 +32691,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: 294px !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: $kendo-hover-border !default;
+/// The box shadow of the focused ColorEditor.
+/// @group coloreditor
 $kendo-color-editor-focus-shadow: $box-shadow-depth-2 !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-map-get( $kendo-spacing, 2 ) !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: 2px !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/coloreditor/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/coloreditor/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/coloreditor/_layout.scss
@@ -36074,49 +36357,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: k-math-div( 20, 14 ) !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, 4 ) !default;
+/// The vertical padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 4 ) !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: 12px !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: 24px !default;
-$kendo-upload-item-image-height: 28px !default;
-$kendo-upload-item-image-border: 2px !default;
-
+/// 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( black, .13 ) !default;
 
 // #endregion
@@ -36564,29 +36900,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;
+/// TThe text color of the AppBar based on light theme color.
+/// @group appbar
 $kendo-appbar-light-text: k-contrast-color( $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-color( $kendo-color-dark ) !default;
 
+/// The box shadow of the AppBar.
+/// @group appbar
 $kendo-appbar-box-shadow: 0px 2px 3px rgba( black, .24 ) !default;
+/// The box shadow of the AppBar with bottom position.
+/// @group appbar
 $kendo-appbar-bottom-box-shadow: 0px -2px 3px rgba( black, .24 ) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/appbar/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/appbar/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/appbar/_layout.scss
@@ -38397,17 +38764,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: null !default;
+/// The text color of the Dialog titlebar.
+/// @group dialog
 $kendo-dialog-titlebar-text: null !default;
+/// The border color of the Dialog titlebar.
+/// @group dialog
 $kendo-dialog-titlebar-border: null !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"),
@@ -39074,44 +39455,44 @@ $_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: 16px !default;
-/// Horizontal padding of the notification.
+/// The vertical padding of the Notification.
 /// @group notification
 $kendo-notification-padding-y: 14px !default;
-/// Width of the border around the notification.
+/// The width of the border around the Notification.
 /// @group notification
 $kendo-notification-border-width: 0px !default;
-/// Border radius of the notification.
+/// The border radius of the Notification.
 /// @group notification
 $kendo-notification-border-radius: k-map-get( $kendo-spacing, 1 ) !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-md !default;
-/// Line height of the notification.
+/// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: k-math-div( 20, 14 ) !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: ();
@@ -39127,9 +39508,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
@@ -39949,37 +40332,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: 1px !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-card-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
 // #region @import "@progress/kendo-theme-default/scss/popover/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/popover/_layout.scss
@@ -40341,35 +40777,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: 0px !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-sm-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: null !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( black, .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
 // #region @import "@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/bottom-navigation/_layout.scss
@@ -40625,63 +41094,236 @@ $_kendo-module-meta: (
 // Component
 // #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-md !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-md !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( black, .06 ) !default;
+
+/// The horizontal padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The horizontal padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !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.5 ) !default;
+
+/// The vertical padding of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the small Breadcrumb link.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !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, 1.5 ) !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;
+/// The vertical padding of the Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+/// The vertical padding of the small Breadcrumb link icon.
+/// @group breadcrumb
+$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !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 spacing of the Breadcrumb link icon.
+/// @group breadcrumb
 $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
+/// The text color of the Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !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-color-primary !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-hover-bg !default;
+/// The text color of the hovered Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: null !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: k-map-get( $theme, focus-bg ) !default;
+/// The text color of the focused Breadcrumb link.
+/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !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: null !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-hover-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: k-map-get( $theme, focus-bg ) !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: null !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( black, .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
@@ -40699,8 +41341,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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;
@@ -40752,8 +41392,6 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
-        padding-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;
@@ -40767,21 +41405,12 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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,
@@ -40800,6 +41429,34 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .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;
+            }
+        }
+    }
+
 }
 
 
@@ -43122,40 +43779,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, 3 ) !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, 6 ) !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: inset 0 0 0 2px rgba( black, .08 ) !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, 6 ) !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( black, .04 ) !default;
-
+/// The background color of the focused ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-focus-bg: rgba( black, .12 ) !default;
+/// The box shadow of the focused ExpansionPanel header.
+/// @group expander
 $kendo-expander-header-focus-shadow: none !default;
 
+/// The text color of the ExpansionPanel title.
+/// @group expander
 $kendo-expander-title-text: $kendo-color-secondary !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, 6 ) !default;
+/// The vertical padding of the ExpansionPanel content.
+/// @group expander
 $kendo-expander-content-padding-y: k-map-get( $kendo-spacing, 6 ) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/expansion-panel/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/expansion-panel/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/expansion-panel/_layout.scss
@@ -44258,17 +44958,34 @@ $_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: if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) !default;
+
+/// The width of the border around the TileLayout card.
+/// @group tilelayout
 $kendo-tile-layout-card-border-width: 1px !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-md !default;
-
-$kendo-tile-layout-bg: if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light) !default;
-
-$kendo-tile-layout-hint-bg: rgba( white, .2 ) !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( white, .2 ) !default;
+
 
 // #endregion
 // #region @import "./_layout.scss"; -> scss/tilelayout/_layout.scss
@@ -47830,32 +48547,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( k-contrast-color( $kendo-listview-bg ), .04 ) !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( k-contrast-color( $kendo-listview-bg ), .04 ) !default;
+/// The border color of the selected ListView items.
+/// @group listview
 $kendo-listview-item-selected-border: null !default;
 
-$kendo-listview-item-focus-bg: rgba( k-contrast-color( $kendo-listview-bg ), .08 ) !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: rgba( k-contrast-color( $kendo-listview-bg ), .08 ) !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: null !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/listview/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/listview/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/listview/_layout.scss
@@ -51184,19 +51935,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-sm-x !default;
+/// The vertical padding of the Filter.
+/// @group filter
 $kendo-filter-padding-y: $kendo-filter-padding-x !default;
 
+/// The bottom margin of the Filter.
+/// @group filter
 $kendo-filter-bottom-margin: 2.1em !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 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12) !default;
-
 // #endregion
 // #region @import "./_layout.scss"; -> scss/filter/_layout.scss
 // #region @import "@progress/kendo-theme-default/scss/filter/_layout.scss"; -> node_modules/@progress/kendo-theme-default/scss/filter/_layout.scss
@@ -52525,27 +53292,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: .5em !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
@@ -59124,44 +59924,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( black, .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( black, .3 ) 0 0 15px !default;
+/// The background color of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-bg: rgba( black, 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( white, .4 ) !default;
+/// The background color of the ScrollView pager in dark mode.
+/// @group scrollview
 $kendo-scrollview-dark-bg: rgba( black, .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