@progress/kendo-theme-material 7.0.3-dev.2 → 7.1.0-dev.0

package/dist/all.scss

@@ -17861,6 +17861,7 @@ $kendo-popup-shadow: $box-shadow-depth-4 !default;
     .k-popup.k-popup-transparent {
         border-width: 0;
         background-color: transparent;
+        box-shadow: none;
     }
 
     // Flush popup
@@ -21241,15 +21242,27 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/skeleton/_variables.scss
 // Skeleton
+
+/// The transform scale of the Skeleton text.
+/// @group skeleton
 $kendo-skeleton-text-transform: scale( 1, .6 ) !default;
+/// The border radius of the Skeleton text.
+/// @group skeleton
 $kendo-skeleton-text-border-radius: $kendo-border-radius-md !default;
 
+/// The border radius of the rectangular Skeleton.
+/// @group skeleton
 $kendo-skeleton-rect-border-radius: 0 !default;
 
+/// The border radius of the circular Skeleton.
+/// @group skeleton
 $kendo-skeleton-circle-border-radius: 9999px !default;
 
+/// The background color of the Skeleton item.
+/// @group skeleton
 $kendo-skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
-
+/// The background color of the Skeleton wave animation.
+/// @group skeleton
 $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
 
 // #endregion
@@ -24412,43 +24425,74 @@ $kendo-picker-flat-hover-focus-border: null !default;
 // #region @import "../tooltip/_variables.scss"; -> scss/tooltip/_variables.scss
 // Tooltip
 
+/// The vertical padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-y: ($kendo-padding-md-y * .75) !default;
+/// The horizontal padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-x: k-math-div( $kendo-padding-md-x, 2 ) !default;
-$kendo-tooltip-max-width: null !default;
+/// The width of the border around the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
+/// The border radius of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border-radius: $kendo-border-radius-md !default;
 
+/// The font family of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-font-family: $kendo-font-family !default;
+/// The font size of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-font-size: $kendo-font-size-sm !default;
+/// The line height of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-line-height: k-math-div( 20, 14 ) !default;
 
+/// The font size of the Tooltip title.
+/// @group tooltip
 $kendo-tooltip-title-font-size: ($kendo-tooltip-font-size * 1.25) !default;
+/// The line height of the Tooltip title.
+/// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;
 
+/// The size of the Tooltip callout.
+/// @group tooltip
 $kendo-tooltip-callout-size: 6px !default;
 
+/// The default background of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-bg: material-color( gray, 700, .9 ) !default;
+/// The default text color of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-text: get-base-contrast( gray, 700 ) !default;
+/// The default border color of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
 
+/// The box-shadow of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-shadow: $box-shadow-depth-2 !default;
 
-$kendo-tooltip-primary-bg: $kendo-color-primary !default;
-$kendo-tooltip-primary-text: k-contrast-color( $kendo-tooltip-primary-bg ) !default;
-$kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;
-$kendo-tooltip-info-bg: $kendo-color-info !default;
-$kendo-tooltip-info-text: k-contrast-color( $kendo-tooltip-info-bg ) !default;
-$kendo-tooltip-info-border: $kendo-tooltip-info-bg !default;
-$kendo-tooltip-success-bg: $kendo-color-success !default;
-$kendo-tooltip-success-text: k-contrast-color( $kendo-tooltip-success-bg ) !default;
-$kendo-tooltip-success-border: $kendo-tooltip-success-bg !default;
-$kendo-tooltip-warning-bg: $kendo-color-warning !default;
-$kendo-tooltip-warning-text: k-contrast-color( $kendo-tooltip-warning-bg ) !default;
-$kendo-tooltip-warning-border: $kendo-tooltip-warning-bg !default;
-$kendo-tooltip-error-bg: $kendo-color-error !default;
-$kendo-tooltip-error-text: k-contrast-color( $kendo-tooltip-error-bg ) !default;
-$kendo-tooltip-error-border: $kendo-tooltip-error-bg !default;
+@function tooltip-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: k-map-merge(( $name: (
+            color: k-contrast-color( $color ),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}
 
+/// The theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme-colors: $kendo-theme-colors !default;
+/// The generated theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
 // #endregion
 // #region @import "../typography/_variables.scss"; -> scss/typography/_variables.scss
 // File already imported_once. Skipping output.
@@ -25324,7 +25368,6 @@ $_kendo-module-meta: (
         margin: 0;
         padding-block: $kendo-tooltip-padding-y;
         padding-inline: $kendo-tooltip-padding-x;
-        // max-width: $kendo-tooltip-max-width;
         border-width: $kendo-tooltip-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -25447,14 +25490,6 @@ $_kendo-module-meta: (
 // #region @import "./_theme.scss"; -> scss/tooltip/_theme.scss
 // #region @import "@progress/kendo-theme-default/scss/tooltip/_theme.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/tooltip/_theme.scss
 @mixin kendo-tooltip--theme-base() {
-
-    .k-tooltip-wrapper {
-        .k-tooltip {
-            box-shadow: $kendo-tooltip-shadow;
-        }
-    }
-
-
     // Default tooltip
     .k-tooltip {
         @include fill(
@@ -25462,67 +25497,26 @@ $_kendo-module-meta: (
             $kendo-tooltip-bg,
             $kendo-tooltip-border
         );
+        
+        @include box-shadow( $kendo-tooltip-shadow );
 
         .k-callout {
             color: $kendo-tooltip-bg;
         }
     }
 
-
     // Tooltip variants
-    .k-tooltip-primary {
-        @include fill(
-            $kendo-tooltip-primary-text,
-            $kendo-tooltip-primary-bg,
-            $kendo-tooltip-primary-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-primary-bg;
-        }
-    }
-    .k-tooltip-info {
-        @include fill(
-            $kendo-tooltip-info-text,
-            $kendo-tooltip-info-bg,
-            $kendo-tooltip-info-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-info-bg;
-        }
-    }
-    .k-tooltip-success {
-        @include fill(
-            $kendo-tooltip-success-text,
-            $kendo-tooltip-success-bg,
-            $kendo-tooltip-success-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-success-bg;
-        }
-    }
-    .k-tooltip-warning {
-        @include fill(
-            $kendo-tooltip-warning-text,
-            $kendo-tooltip-warning-bg,
-            $kendo-tooltip-warning-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-warning-bg;
-        }
-    }
-    .k-tooltip-error {
-        @include fill(
-            $kendo-tooltip-error-text,
-            $kendo-tooltip-error-bg,
-            $kendo-tooltip-error-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-error-bg;
+    @each $name, $props in $kendo-tooltip-theme {
+        .k-tooltip-#{$name} {
+            @include fill(
+                k-map-get( $props, color ),
+                k-map-get( $props, background-color ),
+                k-map-get( $props, border )
+            );
+            
+            .k-callout {
+                color: k-map-get( $props, background-color );
+            }
         }
     }
 
@@ -29173,19 +29167,6 @@ $kendo-slider-disabled-opacity: .65 !default;
         }
     }
 
-
-    // Slider wrap
-    .k-slider-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-        position: relative;
-    }
-
-
     // New rendering
     .k-slider {
         width: min-content;
@@ -29517,15 +29498,7 @@ $kendo-slider-disabled-opacity: .65 !default;
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
-    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-inline-start: calc( #{$kendo-slider-draghandle-size} / 2 );
-        padding-inline-end: calc( #{$kendo-slider-draghandle-size} / 2 );
-    }
-    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
-        padding-top: calc( #{$kendo-slider-draghandle-size} / 2 );
-        padding-bottom: calc( #{$kendo-slider-draghandle-size} / 2 );
-    }
-
+    
     // Aliases
     .k-draghandle { @extend .k-slider-thumb !optional; }
     .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
@@ -31435,23 +31408,51 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/captcha/_variables.scss
 // Captcha
+
+/// The spacer of the Captcha.
+/// @group captcha
 $kendo-captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The width of the Captcha.
+/// @group captcha
 $kendo-captcha-width: 335px !default;
+/// The font family of the Captcha.
+/// @group captcha
 $kendo-captcha-font-family: $kendo-font-family !default;
+/// The font size of the Captcha.
+/// @group captcha
 $kendo-captcha-font-size: $kendo-font-size-md !default;
+/// The line height of the Captcha.
+/// @group captcha
 $kendo-captcha-line-height: $kendo-line-height-md !default;
+/// The gap of the Captcha.
+/// @group captcha
 $kendo-captcha-gap: $kendo-captcha-spacer !default;
+/// The background color of the Captcha.
+/// @group captcha
 $kendo-captcha-bg: $kendo-component-bg !default;
+/// The text color of the Captcha.
+/// @group captcha
 $kendo-captcha-text: $kendo-component-bg !default;
+/// The border color of the Captcha.
+/// @group captcha
 $kendo-captcha-border: $kendo-component-bg !default;
 
+/// The gap of the Captcha image wrapper.
+/// @group captcha
 $kendo-captcha-image-wrap-gap: $kendo-captcha-spacer !default;
-
+/// The gap of the Captcha image controls.
+/// @group captcha
 $kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;
 
+/// The top margin of the Captcha validation message.
+/// @group captcha
 $kendo-captcha-validation-message-margin-top: k-math-div( $kendo-captcha-spacer, 2 ) !default;
+/// The font size of the Captcha validation message.
+/// @group captcha
 $kendo-captcha-validation-message-font-size: $kendo-font-size-sm !default;
+/// The font style of the Captcha validation message.
+/// @group captcha
 $kendo-captcha-validation-message-font-style: italic !default;
 
 // #endregion
@@ -32181,7 +32182,6 @@ $kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
             z-index: -1;
         }
 
-        .k-slider-wrap,
         .k-slider-track-wrap {
             z-index: 1;
         }
@@ -34914,25 +34914,55 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/rating/_variables.scss
 // Rating
 
+/// The font family of the Rating.
+/// @group rating
 $kendo-rating-font-family: $kendo-font-family !default;
+/// The font size of the Rating.
+/// @group rating
 $kendo-rating-font-size: $kendo-font-size-md !default;
+/// The line height of the Rating.
+/// @group rating
 $kendo-rating-line-height: $kendo-line-height-md !default;
 
+/// The horizontal margin of the Rating container.
+/// @group rating
 $kendo-rating-container-margin-x: k-math-div( $kendo-padding-sm-x, 2 ) !default;
 
+/// The horizontal padding of the Rating item.
+/// @group rating
 $kendo-rating-item-padding-x: k-math-div( $kendo-padding-sm-x, 2 ) !default;
+/// The vertical padding of the Rating item.
+/// @group rating
 $kendo-rating-item-padding-y: $kendo-padding-md-y !default;
 
+/// The horizontal margin of the Rating label.
+/// @group rating
 $kendo-rating-label-margin-x: $kendo-padding-sm-x !default;
+/// The vertical margin of the Rating label.
+/// @group rating
 $kendo-rating-label-margin-y: $kendo-padding-md-y !default;
+/// The line height of the Rating label.
+/// @group rating
 $kendo-rating-label-line-height: $kendo-line-height-lg !default;
 
+/// The text color of the Rating icon.
+/// @group rating
 $kendo-rating-icon-text: $kendo-subtle-text !default;
+/// The text color of the selected Rating icon.
+/// @group rating
 $kendo-rating-icon-selected-text: $kendo-color-primary-darker !default;
+/// The text color of the hovered Rating icon.
+/// @group rating
 $kendo-rating-icon-hover-text: $kendo-color-primary-darker !default;
+/// The text color of the focused Rating icon.
+/// @group rating
 $kendo-rating-icon-focus-text: $kendo-color-primary-darker !default;
 
+/// The shadow of the focused Rating icon.
+/// @group rating
 $kendo-rating-icon-focus-shadow: 0 2px 4px rgba( black, .1 ) !default;
+/// The shadow of the focused and selected Rating icon.
+/// @group rating
 $kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( black, .1) !default;
 
 // #endregion
@@ -35931,31 +35961,69 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/dropzone/_variables.scss
-// Dropzone
+// DropZone
 
+/// The horizontal padding of the DropZone.
+/// @group dropzone
 $kendo-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the DropZone.
+/// @group dropzone
 $kendo-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The border width of the DropZone.
+/// @group dropzone
 $kendo-dropzone-border-width: 1px !default;
+/// The minimum height of the DropZone.
+/// @group dropzone
 $kendo-dropzone-min-height: 220px !default;
 
+/// The font family of the DropZone.
+/// @group dropzone
 $kendo-dropzone-font-family: $kendo-font-family !default;
+/// The font size of the DropZone.
+/// @group dropzone
 $kendo-dropzone-font-size: $kendo-font-size-md !default;
+/// The line height of the DropZone.
+/// @group dropzone
 $kendo-dropzone-line-height: k-math-div( 20, 14 ) !default;
 
+/// The background color of the DropZone.
+/// @group dropzone
 $kendo-dropzone-bg: k-try-shade( $kendo-base-bg, 1 ) !default;
+/// The text color of the DropZone.
+/// @group dropzone
 $kendo-dropzone-text: $kendo-base-text !default;
+/// The border color of the DropZone.
+/// @group dropzone
 $kendo-dropzone-border: $kendo-base-border !default;
 
+/// The spacing below the DropZone icon.
+/// @group dropzone
 $kendo-dropzone-icon-spacing: k-map-get( $kendo-spacing, 6 ) !default;
+/// The text color of the DropZone icon.
+/// @group dropzone
 $kendo-dropzone-icon-text: k-try-tint( $kendo-dropzone-text, 4 ) !default;
+/// The text color of the hovered DropZone icon.
+/// @group dropzone
 $kendo-dropzone-icon-hover-text: $kendo-color-primary !default;
 
+/// The font size of the DropZone hint.
+/// @group dropzone
 $kendo-dropzone-hint-font-size: null !default;
+/// The spacing below the DropZone hint.
+/// @group dropzone
 $kendo-dropzone-hint-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+/// The text color of the DropZone hint.
+/// @group dropzone
 $kendo-dropzone-hint-text: null !default;
 
+/// The font size of the DropZone note.
+/// @group dropzone
 $kendo-dropzone-note-font-size: $kendo-font-size-sm !default;
+/// The spacing below the DropZone note.
+/// @group dropzone
 $kendo-dropzone-note-spacing: null !default;
+/// The text color of the DropZone note.
+/// @group dropzone
 $kendo-dropzone-note-text: $kendo-subtle-text !default;
 
 // #endregion
@@ -39695,6 +39763,15 @@ $kendo-card-callout-height: 20px !default;
         *::after {
             box-sizing: border-box;
         }
+
+        // Card avatar
+        .k-card-avatar,
+        .k-avatar {
+            margin-right: $kendo-card-avatar-spacing;
+            width: $kendo-card-avatar-size;
+            height: $kendo-card-avatar-size;
+            flex-basis: $kendo-card-avatar-size;
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( $kendo-card-inner-border-radius );
@@ -39704,11 +39781,9 @@ $kendo-card-callout-height: 20px !default;
         position: relative;
     }
 
-
     // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
+    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
     // Header
     .k-card-header {
@@ -39765,30 +39840,13 @@ $kendo-card-callout-height: 20px !default;
         }
     }
 
-
-    // Card avatar
-    .k-card-avatar,
-    .k-card .k-avatar {
-        margin-right: $kendo-card-avatar-spacing;
-        width: $kendo-card-avatar-size;
-        height: $kendo-card-avatar-size;
-        flex-basis: $kendo-card-avatar-size;
-    }
-
-
-    // Card image
-    .k-card-image,
+    // Card media
     .k-card-media {
         border: 0;
         max-width: 100%;
         flex-shrink: 0;
         overflow: hidden;
 
-        > img {
-            border: 0;
-            max-width: 100%;
-        }
-
         .k-card-horizontal & {
             max-width: $kendo-card-img-max-width;
             object-fit: cover;
@@ -39832,22 +39890,23 @@ $kendo-card-callout-height: 20px !default;
         flex: 0 0 auto;
         align-self: stretch;
     }
-    .k-card-separator.k-separator-vertical,
-    .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
-    }
+
     .k-card-separator.k-separator-horizontal,
     .k-card-vertical > .k-card-separator {
         border-top-width: 1px;
     }
 
+    .k-card-separator.k-separator-vertical,
+    .k-card-horizontal > .k-card-separator {
+        border-left-width: 1px;
+    }
+
     .k-card > .k-hr {
         margin: 0;
         flex: 0 0 auto;
         border-color: inherit;
     }
 
-
     // Card actions
     .k-card-actions {
         padding-block: $kendo-card-actions-padding-y;
@@ -39862,33 +39921,6 @@ $kendo-card-callout-height: 20px !default;
         gap: $kendo-card-actions-gap;
     }
 
-
-    // Actions align
-    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Stretched actions
-    .k-card-actions-stretched > * {
-        flex: 1 1 auto;
-    }
-
-
-    // Card action
-    .k-card-action {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: inline-flex;
-    }
-
-
     // List
     .k-card-list {
         display: flex;
@@ -39980,9 +40012,6 @@ $kendo-card-callout-height: 20px !default;
         }
     }
 
-
-
-
     // Card with callout
     .k-card-with-callout {
         overflow: visible;
@@ -45116,18 +45145,6 @@ $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
             height: 0;
             border-width: $kendo-dock-manager-border-width 0 0;
         }
-
-        // Needed because of a bug in Chrome - Issue 1473554
-        // A fix will be shipped likely in milestone 118 and then we can revisit this
-        @supports  (not (-ms-ime-mode: none)) and (not (overflow: -webkit-marquee)) and (not (-moz-appearance:none)) {
-            .k-toolbar-button {
-                padding-block: $kendo-button-padding-x;
-                padding-inline: $kendo-button-padding-y;
-            }
-            .k-toolbar-button .k-button-text {
-                writing-mode: vertical-lr;
-            }
-        }
     }
 
     // Panes
@@ -47447,6 +47464,7 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         $_selection-aggregates-padding-x: k-map-get( $size-props, selection-aggregates-padding-x );
         $_selection-aggregates-padding-y: k-map-get( $size-props, selection-aggregates-padding-y );
 
+        .k-grid .k-grid-#{$size},
         .k-grid-#{$size} {
 
             .k-table-th {
@@ -52267,72 +52285,187 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/filemanager/_variables.scss
-// File manager
+// FileManager
+
+/// The space between the FileManager items.
+/// @group filemanager
 $kendo-file-manager-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+/// The border width of the FileManager.
+/// @group filemanager
 $kendo-file-manager-border-width: 1px !default;
+/// The font family of the FileManager.
+/// @group filemanager
 $kendo-file-manager-font-family: $kendo-font-family !default;
+/// The font size of the FileManager.
+/// @group filemanager
 $kendo-file-manager-font-size: $kendo-font-size-md !default;
+/// The line height of the FileManager.
+/// @group filemanager
 $kendo-file-manager-line-height: $kendo-line-height-md !default;
+/// The background color of the FileManager.
+/// @group filemanager
 $kendo-file-manager-bg: $kendo-component-bg !default;
+/// The text color of the FileManager.
+/// @group filemanager
 $kendo-file-manager-text: $kendo-component-text !default;
+/// The border color of the FileManager.
+/// @group filemanager
 $kendo-file-manager-border: $kendo-component-border !default;
 
+/// The border width of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
+/// The background color of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
+/// The text color of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-text: null !default;
+/// The border color of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-border: null !default;
+/// The gradient of the FileManager Toolbar.
+/// @group filemanager
 $kendo-file-manager-toolbar-gradient: null !default;
 
+/// The horizontal padding of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-padding-x: $kendo-file-manager-spacer !default;
+/// The vertical padding of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-padding-y: $kendo-file-manager-spacer !default;
+/// The width of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-width: 20% !default;
+/// The border width of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-border-width: $kendo-file-manager-border-width !default;
+/// The background color of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-bg: null !default;
+/// The text color of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-text: null !default;
+/// The border color of the FileManager Navigation.
+/// @group filemanager
 $kendo-file-manager-navigation-border: null !default;
 
+/// The horizontal padding of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+/// The border width of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
+/// The background color of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-bg: $kendo-file-manager-toolbar-bg !default;
+/// The text color of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-text: null !default;
+/// The border color of the FileManager Breadcrumb.
+/// @group filemanager
 $kendo-file-manager-breadcrumb-border: null !default;
 
+/// The background color of the FileManager ListView.
+/// @group filemanager
 $kendo-file-manager-listview-bg: null !default;
+/// The text color of the FileManager ListView.
+/// @group filemanager
 $kendo-file-manager-listview-text: null !default;
+/// The border color of the FileManager ListView.
+/// @group filemanager
 $kendo-file-manager-listview-border: null !default;
 
+/// The horizontal padding of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+/// The width of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-width: 120px !default;
+/// The height of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-height: 120px !default;
+/// The background color of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-bg: null !default;
+/// The text color of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-text: null !default;
+/// The border color of the FileManager ListView item.
+/// @group filemanager
 $kendo-file-manager-listview-item-border: null !default;
 
+/// The background color of the FileManager ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-bg: null !default;
+/// The text color of the FileManager ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+/// The border color of the FileManager ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-border: null !default;
+/// Background color of the FileManager selected ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-bg: null !default;
+/// Text color of the FileManager selected ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-text: inherit !default;
+/// Border color of the FileManager selected ListView item icon.
+/// @group filemanager
 $kendo-file-manager-listview-item-icon-selected-border: null !default;
 
+/// The background color of the FileManager Grid.
+/// @group filemanager
 $kendo-file-manager-grid-bg: null !default;
+/// The text color of the FileManager Grid.
+/// @group filemanager
 $kendo-file-manager-grid-text: null !default;
+/// The border color of the FileManager Grid.
+/// @group filemanager
 $kendo-file-manager-grid-border: null !default;
 
+/// The horizontal padding of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-padding-x: $kendo-file-manager-spacer !default;
+/// The vertical padding of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-padding-y: $kendo-file-manager-spacer !default;
+/// The width of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-width: 20% !default;
+/// The border width of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !default;
+/// The spacing of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
+/// The gap between the columns in the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-column-gap: k-map-get( $kendo-spacing, 1 ) !default;
+/// The background color of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-bg: null !default;
+/// The text color of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-text: null !default;
+/// The border color of the FileManager preview.
+/// @group filemanager
 $kendo-file-manager-preview-border: null !default;
 
+/// The background color of the FileManager preview icon.
+/// @group filemanager
 $kendo-file-manager-preview-icon-bg: null !default;
+/// The text color of the FileManager preview icon.
+/// @group filemanager
 $kendo-file-manager-preview-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+/// The border color of the FileManager preview icon.
+/// @group filemanager
 $kendo-file-manager-preview-icon-border: null !default;
 
 // #endregion
@@ -59284,49 +59417,115 @@ $_kendo-module-meta: (
 
 // Component
 // #region @import "./_variables.scss"; -> scss/pdf-viewer/_variables.scss
-// PDF viewer
+// PDFViewer
 
+/// The border width of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-border-width: 1px !default;
+/// The font family of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-font-family: $kendo-font-family !default;
+/// The font size of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-font-size: $kendo-font-size-md !default;
+/// The line height of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-line-height: $kendo-line-height-md !default;
 
+/// The background color of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-bg: $kendo-component-bg !default;
+/// The text color of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-text: $kendo-component-text !default;
+/// The border color of the PDFViewer.
+/// @group pdf-viewer
 $kendo-pdf-viewer-border: $kendo-component-border !default;
 
+/// The background color of the PDFViewer Toolbar.
+/// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-bg: k-try-shade( $kendo-button-bg, .25 ) !default;
+/// The text color of the PDFViewer Toolbar.
+/// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-text: null !default;
+/// The border color of the PDFViewer Toolbar.
+/// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-border: null !default;
+/// The gradient of the PDFViewer Toolbar.
+/// @group pdf-viewer
 $kendo-pdf-viewer-toolbar-gradient: null !default;
 
+/// The background color of the PDFViewer canvas.
+/// @group pdf-viewer
 $kendo-pdf-viewer-canvas-bg: $kendo-app-bg !default;
+/// The text color of the PDFViewer canvas.
+/// @group pdf-viewer
 $kendo-pdf-viewer-canvas-text: null !default;
+/// The border color of the PDFViewer canvas.
+/// @group pdf-viewer
 $kendo-pdf-viewer-canvas-border: null !default;
 
+/// The spacing of the PDFViewer page.
+/// @group pdf-viewer
 $kendo-pdf-viewer-page-spacing: 30px !default;
 
+/// The background color of the PDFViewer page.
+/// @group pdf-viewer
 $kendo-pdf-viewer-page-bg: white !default;
+/// The text color of the PDFViewer page.
+/// @group pdf-viewer
 $kendo-pdf-viewer-page-text: $kendo-component-text !default;
+/// The border color of the PDFViewer page.
+/// @group pdf-viewer
 $kendo-pdf-viewer-page-border: $kendo-component-border !default;
+/// The shadow of the PDFViewer page.
+/// @group pdf-viewer
 $kendo-pdf-viewer-page-shadow: $box-shadow-depth-3 !default;
 
+/// The horizontal padding of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
+/// The vertical padding of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;
+/// The spacing of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-spacing: $kendo-toolbar-md-spacing !default;
+/// The border width of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
+/// The border radius of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+/// The background color of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: $kendo-component-bg !default;
+/// The text color of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-text: $kendo-component-text !default;
+/// The border color of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-border: $kendo-component-border !default;
+/// The shadow of the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-shadow: $kendo-window-shadow !default;
+/// The spacing of the matches container in the PDFViewer search panel.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-matches-spacing: $kendo-padding-sm-x !default;
 
+/// The line height of the PDFViewer selection.
+/// @group pdf-viewer
 $kendo-pdf-viewer-selection-line-height: $kendo-line-height-sm !default;
 
+/// The background color of the PDFViewer highlight.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-bg: $kendo-body-text !default;
+/// The background color of the PDFViewer highlight mark.
+/// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
 
+/// The text color of the PDFViewer icon.
+/// @group pdf-viewer
 $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;
 
 // #endregion