@progress/kendo-theme-material 8.0.2-dev.4 → 8.1.0-dev.0

package/dist/all.scss

@@ -2175,45 +2175,73 @@ $_default-palette-forest-green: (
 );
 
 // stylelint-disable scss/no-global-function-names
+/// The Gray Palette provides colors to the Base, Secondary, Light, Dark, and Inverse variable groups.
+/// @group palette
 $kendo-palette-gray: $_default-palette-gray !default;
 $kendo-palette-gray: map-merge($_default-palette-gray, $kendo-palette-gray);
 
+/// The Indigo Palette provides colors to the Primary variable group.
+/// @group palette
 $kendo-palette-indigo: $_default-palette-indigo !default;
 $kendo-palette-indigo: map-merge($_default-palette-indigo, $kendo-palette-indigo);
 
+/// The Pink Palette provides colors to the Secondary variable group.
+/// @group palette
 $kendo-palette-pink: $_default-palette-pink !default;
 $kendo-palette-pink: map-merge($_default-palette-pink, $kendo-palette-pink);
 
+/// The Dark Teal Palette provides colors to the Tertiary variable group.
+/// @group palette
 $kendo-palette-dark-teal: $_default-palette-dark-teal !default;
 $kendo-palette-dark-teal: map-merge($_default-palette-dark-teal, $kendo-palette-dark-teal);
 
+/// The Red Palette provides colors to the Error variable group.
+/// @group palette
 $kendo-palette-red: $_default-palette-red !default;
 $kendo-palette-red: map-merge($_default-palette-red, $kendo-palette-red);
 
+/// The Blue Palette provides colors to the Info variable group.
+/// @group palette
 $kendo-palette-blue: $_default-palette-blue !default;
 $kendo-palette-blue: map-merge($_default-palette-blue, $kendo-palette-blue);
 
+/// The Green Palette provides colors to the Success variable group.
+/// @group palette
 $kendo-palette-green: $_default-palette-green !default;
 $kendo-palette-green: map-merge($_default-palette-green, $kendo-palette-green);
 
+/// The Yellow Palette provides colors to the Warning variable group.
+/// @group palette
 $kendo-palette-yellow: $_default-palette-yellow !default;
 $kendo-palette-yellow: map-merge($_default-palette-yellow, $kendo-palette-yellow);
 
+/// The Deep Purple provides colors to the Series A variable group.
+/// @group palette
 $kendo-palette-deep-purple: $_default-palette-deep-purple !default;
 $kendo-palette-deep-purple: map-merge($_default-palette-deep-purple, $kendo-palette-deep-purple);
 
+/// The Baby Blue provides colors to the Series B variable group.
+/// @group palette
 $kendo-palette-baby-blue: $_default-palette-baby-blue !default;
 $kendo-palette-baby-blue: map-merge($_default-palette-baby-blue, $kendo-palette-baby-blue);
 
+/// The Teal provides colors to the Tertiary and Series C variable groups.
+/// @group palette
 $kendo-palette-teal: $_default-palette-teal !default;
 $kendo-palette-teal: map-merge($_default-palette-teal, $kendo-palette-teal);
 
+/// The Canary Yellow provides colors to the Series D variable group.
+/// @group palette
 $kendo-palette-canary-yellow: $_default-palette-canary-yellow !default;
 $kendo-palette-canary-yellow: map-merge($_default-palette-canary-yellow, $kendo-palette-canary-yellow);
 
+/// The Canary Red provides colors to the Series E variable group.
+/// @group palette
 $kendo-palette-candy-red: $_default-palette-candy-red !default;
 $kendo-palette-candy-red: map-merge($_default-palette-candy-red, $kendo-palette-candy-red);
 
+/// The Forest Green provides colors to the Series F variable group.
+/// @group palette
 $kendo-palette-forest-green: $_default-palette-forest-green !default;
 $kendo-palette-forest-green: map-merge($_default-palette-forest-green, $kendo-palette-forest-green);
 // stylelint-enable scss/no-global-function-names
@@ -3171,6 +3199,254 @@ $_default-colors: (
 
 /// The global default Colors map.
 /// @group color-system
+///
+/// @subgroup {misc}
+/// [app-surface, on-app-surface, subtle,
+/// surface, surface-alt, border, border-alt]
+/// The Misc variable group.
+/// @prop {Color} app-surface - The background color of the application.
+/// @prop {Color} on-app-surface - The text color of the application.
+/// @prop {Color} subtle - The subtle text color.
+/// @prop {Color} surface - The background color of the components' chrome area.
+/// @prop {Color} surface-alt - The alternative background color of the components' chrome area.
+/// @prop {Color} border - Тhe border color of the application.
+/// @prop {Color} border-alt - Тhe alternative border color of the application.
+///
+/// @subgroup {base}
+/// [base-subtle, base-subtle-hover, base-subtle-active,
+/// base, base-hover, base-active, base-emphasis,
+/// base-on-subtle, on-base, base-on-surface]
+/// The Base variable group.
+/// @prop {Color} base-subtle - The base subtle background color variable.
+/// @prop {Color} base-subtle-hover - The base subtle background color variable for the hover state.
+/// @prop {Color} base-subtle-active - The base subtle background color variable for the active state.
+/// @prop {Color} base - The base background color variable.
+/// @prop {Color} base-hover - The base background color variable for the hover state.
+/// @prop {Color} base-active - The base background color variable for the active state.
+/// @prop {Color} base-emphasis - The emphasized base color variable.
+/// @prop {Color} base-on-subtle - The text color variable for content on base subtle.
+/// @prop {Color} on-base - The text color variable for content on base.
+/// @prop {Color} base-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {primary}
+/// [primary-subtle, primary-subtle-hover, primary-subtle-active,
+/// primary, primary-hover, primary-active, primary-emphasis,
+/// primary-on-subtle, on-primary, primary-on-surface]
+/// The Primary variable group.
+/// @prop {Color} primary-subtle - The primary subtle background color variable.
+/// @prop {Color} primary-subtle-hover - The primary subtle background color variable for the hover state.
+/// @prop {Color} primary-subtle-active - The primary subtle background color variable for the active state.
+/// @prop {Color} primary - The primary background color variable.
+/// @prop {Color} primary-hover - The primary background color variable for the hover state.
+/// @prop {Color} primary-active - The primary background color variable for the active state.
+/// @prop {Color} primary-emphasis - The emphasized primary color variable.
+/// @prop {Color} primary-on-subtle - The text color variable for content on primary subtle.
+/// @prop {Color} on-primary - The text color variable for content on primary.
+/// @prop {Color} primary-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {secondary}
+/// [secondary-subtle, secondary-subtle-hover, secondary-subtle-active,
+/// secondary, secondary-hover, secondary-active, secondary-emphasis,
+/// secondary-on-subtle, on-secondary, secondary-on-surface]
+/// The Secondary variable group.
+/// @prop {Color} secondary-subtle - The secondary subtle background color variable.
+/// @prop {Color} secondary-subtle-hover - The secondary subtle background color variable for the hover state.
+/// @prop {Color} secondary-subtle-active - The secondary subtle background color variable for the active state.
+/// @prop {Color} secondary - The secondary background color variable.
+/// @prop {Color} secondary-hover - The secondary background color variable for the hover state.
+/// @prop {Color} secondary-active - The secondary background color variable for the active state.
+/// @prop {Color} secondary-emphasis - The emphasized secondary color variable.
+/// @prop {Color} secondary-on-subtle - The text color variable for content on secondary subtle.
+/// @prop {Color} on-secondary - The text color variable for content on secondary.
+/// @prop {Color} secondary-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {tertiary}
+/// [tertiary-subtle, tertiary-subtle-hover, tertiary-subtle-active,
+/// tertiary, tertiary-hover, tertiary-active, tertiary-emphasis,
+/// tertiary-on-subtle, on-tertiary, tertiary-on-surface]
+/// The Tertiary variable group.
+/// @prop {Color} tertiary-subtle - The tertiary subtle background color variable.
+/// @prop {Color} tertiary-subtle-hover - The tertiary subtle background color variable for the hover state.
+/// @prop {Color} tertiary-subtle-active - The tertiary subtle background color variable for the active state.
+/// @prop {Color} tertiary - The tertiary background color variable.
+/// @prop {Color} tertiary-hover - The tertiary background color variable for the hover state.
+/// @prop {Color} tertiary-active - The tertiary background color variable for the active state.
+/// @prop {Color} tertiary-emphasis - The emphasized tertiary color variable.
+/// @prop {Color} tertiary-on-subtle - The text color variable for content on tertiary subtle.
+/// @prop {Color} on-tertiary - The text color variable for content on tertiary.
+/// @prop {Color} tertiary-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {info}
+/// [info-subtle, info-subtle-hover, info-subtle-active,
+/// info, info-hover, info-active, info-emphasis,
+/// info-on-subtle, on-info, info-on-surface]
+/// The Info variable group.
+/// @prop {Color} info-subtle - The info subtle background color variable.
+/// @prop {Color} info-subtle-hover - The info subtle background color variable for the hover state.
+/// @prop {Color} info-subtle-active - The info subtle background color variable for the active state.
+/// @prop {Color} info - The info background color variable.
+/// @prop {Color} info-hover - The info background color variable for the hover state.
+/// @prop {Color} info-active - The info background color variable for the active state.
+/// @prop {Color} info-emphasis - The emphasized info color variable.
+/// @prop {Color} info-on-subtle - The text color variable for content on info subtle.
+/// @prop {Color} on-info - The text color variable for content on info.
+/// @prop {Color} info-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {success}
+/// [success-subtle, success-subtle-hover, success-subtle-active,
+/// success, success-hover, success-active, success-emphasis,
+/// success-on-subtle, on-success, success-on-surface]
+/// The Success variable group.
+/// @prop {Color} success-subtle - The success subtle background color variable.
+/// @prop {Color} success-subtle-hover - The success subtle background color variable for the hover state.
+/// @prop {Color} success-subtle-active - The success subtle background color variable for the active state.
+/// @prop {Color} success - The success background color variable.
+/// @prop {Color} success-hover - The success background color variable for the hover state.
+/// @prop {Color} success-active - The success background color variable for the active state.
+/// @prop {Color} success-emphasis - The emphasized success color variable.
+/// @prop {Color} success-on-subtle - The text color variable for content on success subtle.
+/// @prop {Color} on-success - The text color variable for content on success.
+/// @prop {Color} success-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {warning}
+/// [warning-subtle, warning-subtle-hover, warning-subtle-active,
+/// warning, warning-hover, warning-active, warning-emphasis,
+/// warning-on-subtle, on-warning, warning-on-surface]
+/// The Warning variable group.
+/// @prop {Color} warning-subtle - The warning subtle background color variable.
+/// @prop {Color} warning-subtle-hover - The warning subtle background color variable for the hover state.
+/// @prop {Color} warning-subtle-active - The warning subtle background color variable for the active state.
+/// @prop {Color} warning - The warning background color variable.
+/// @prop {Color} warning-hover - The warning background color variable for the hover state.
+/// @prop {Color} warning-active - The warning background color variable for the active state.
+/// @prop {Color} warning-emphasis - The emphasized warning color variable.
+/// @prop {Color} warning-on-subtle - The text color variable for content on warning subtle.
+/// @prop {Color} on-warning - The text color variable for content on warning.
+/// @prop {Color} warning-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {error}
+/// [error-subtle, error-subtle-hover, error-subtle-active,
+/// error, error-hover, error-active, error-emphasis,
+/// error-on-subtle, on-error, error-on-surface]
+/// The Error variable group.
+/// @prop {Color} error-subtle - The error subtle background color variable.
+/// @prop {Color} error-subtle-hover - The error subtle background color variable for the hover state.
+/// @prop {Color} error-subtle-active - The error subtle background color variable for the active state.
+/// @prop {Color} error - The error background color variable.
+/// @prop {Color} error-hover - The error background color variable for the hover state.
+/// @prop {Color} error-active - The error background color variable for the active state.
+/// @prop {Color} error-emphasis - The emphasized error color variable.
+/// @prop {Color} error-on-subtle - The text color variable for content on error subtle.
+/// @prop {Color} on-error - The text color variable for content on error.
+/// @prop {Color} error-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {light}
+/// [light-subtle, light-subtle-hover, light-subtle-active,
+/// light, light-hover, light-active, light-emphasis,
+/// light-on-subtle, on-light, light-on-surface]
+/// The Light variable group.
+/// @prop {Color} light-subtle - The light subtle background color variable.
+/// @prop {Color} light-subtle-hover - The light subtle background color variable for the hover state.
+/// @prop {Color} light-subtle-active - The light subtle background color variable for the active state.
+/// @prop {Color} light - The light background color variable.
+/// @prop {Color} light-hover - The light background color variable for the hover state.
+/// @prop {Color} light-active - The light background color variable for the active state.
+/// @prop {Color} light-emphasis - The emphasized light color variable.
+/// @prop {Color} light-on-subtle - The text color variable for content on light subtle.
+/// @prop {Color} on-light - The text color variable for content on light.
+/// @prop {Color} light-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {dark}
+/// [dark-subtle, dark-subtle-hover, dark-subtle-active,
+/// dark, dark-hover, dark-active, dark-emphasis,
+/// dark-on-subtle, on-dark, dark-on-surface]
+/// The Dark variable group.
+/// @prop {Color} dark-subtle - The dark subtle background color variable.
+/// @prop {Color} dark-subtle-hover - The dark subtle background color variable for the hover state.
+/// @prop {Color} dark-subtle-active - The dark subtle background color variable for the active state.
+/// @prop {Color} dark - The dark background color variable.
+/// @prop {Color} dark-hover - The dark background color variable for the hover state.
+/// @prop {Color} dark-active - The dark background color variable for the active state.
+/// @prop {Color} dark-emphasis - The emphasized dark color variable.
+/// @prop {Color} dark-on-subtle - The text color variable for content on dark subtle.
+/// @prop {Color} on-dark - The text color variable for content on dark.
+/// @prop {Color} dark-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {inverse}
+/// [inverse-subtle, inverse-subtle-hover, inverse-subtle-active,
+/// inverse, inverse-hover, inverse-active, inverse-emphasis,
+/// inverse-on-subtle, on-inverse, inverse-on-surface]
+/// The Inverse variable group.
+/// @prop {Color} inverse-subtle - The inverse subtle background color variable.
+/// @prop {Color} inverse-subtle-hover - The inverse subtle background color variable for the hover state.
+/// @prop {Color} inverse-subtle-active - The inverse subtle background color variable for the active state.
+/// @prop {Color} inverse - The inverse background color variable.
+/// @prop {Color} inverse-hover - The inverse background color variable for the hover state.
+/// @prop {Color} inverse-active - The inverse background color variable for the active state.
+/// @prop {Color} inverse-emphasis - The emphasized inverse color variable.
+/// @prop {Color} inverse-on-subtle - The text color variable for content on inverse subtle.
+/// @prop {Color} on-inverse - The text color variable for content on inverse.
+/// @prop {Color} inverse-on-surface - The text color variable for content on surface.
+///
+/// @subgroup {series-a}
+/// [series-a, series-a-bold, series-a-bolder,
+/// series-a-subtle, series-a-subtler]
+/// The Series A variable group.
+/// @prop {Color} series-a - The series A color variable.
+/// @prop {Color} series-a-bold - The bold series A color variable.
+/// @prop {Color} series-a-bolder - The bolder series A color variable.
+/// @prop {Color} series-a-subtle - The subtle series A color variable.
+/// @prop {Color} series-a-subtler - The subtler series A color variable.
+///
+/// @subgroup {series-b}
+/// [series-b, series-b-bold, series-b-bolder,
+/// series-b-subtle, series-b-subtler]
+/// The Series B variable group.
+/// @prop {Color} series-b - The series B color variable.
+/// @prop {Color} series-b-bold - The bold series B color variable.
+/// @prop {Color} series-b-bolder - The bolder series B color variable.
+/// @prop {Color} series-b-subtle - The subtle series B color variable.
+/// @prop {Color} series-b-subtler - The subtler series B color variable.
+///
+/// @subgroup {series-c}
+/// [series-c, series-c-bold, series-c-bolder,
+/// series-c-subtle, series-c-subtler]
+/// The Series C variable group.
+/// @prop {Color} series-c - The series C color variable.
+/// @prop {Color} series-c-bold - The bold series C color variable.
+/// @prop {Color} series-c-bolder - The bolder series C color variable.
+/// @prop {Color} series-c-subtle - The subtle series C color variable.
+/// @prop {Color} series-c-subtler - The subtler series C color variable.
+///
+/// @subgroup {series-d}
+/// [series-d, series-d-bold, series-d-bolder,
+/// series-d-subtle, series-d-subtler]
+/// The Series D variable group.
+/// @prop {Color} series-d - The series D color variable.
+/// @prop {Color} series-d-bold - The bold series D color variable.
+/// @prop {Color} series-d-bolder - The bolder series D color variable.
+/// @prop {Color} series-d-subtle - The subtle series D color variable.
+/// @prop {Color} series-d-subtler - The subtler series D color variable.
+///
+/// @subgroup {series-e}
+/// [series-e, series-e-bold, series-e-bolder,
+/// series-e-subtle, series-e-subtler]
+/// The Series E variable group.
+/// @prop {Color} series-e - The series E color variable.
+/// @prop {Color} series-e-bold - The bold series E color variable.
+/// @prop {Color} series-e-bolder - The bolder series E color variable.
+/// @prop {Color} series-e-subtle - The subtle series E color variable.
+/// @prop {Color} series-e-subtler - The subtler series E color variable.
+///
+/// @subgroup {series-f}
+/// [series-f, series-f-bold, series-f-bolder,
+/// series-f-subtle, series-f-subtler]
+/// The Series F variable group.
+/// @prop {Color} series-f - The series F color variable.
+/// @prop {Color} series-f-bold - The bold series F color variable.
+/// @prop {Color} series-f-bolder - The bolder series F color variable.
+/// @prop {Color} series-f-subtle - The subtle series F color variable.
+/// @prop {Color} series-f-subtler - The subtler series F color variable.
 $kendo-colors: $_default-colors !default;
 
 // Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
@@ -3427,48 +3703,48 @@ $_default-elevation: (
     1: (
         0px 1px 3px 0px rgba(0, 0, 0, 0.2),
         0px 2px 1px 0px rgba(0, 0, 0, 0.12),
-        0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+        0px 1px 1px 0px rgba(0, 0, 0, 0.14)
     ),
     2: (
         0px 1px 5px 0px rgba(0, 0, 0, 0.2),
         0px 3px 1px 0px rgba(0, 0, 0, 0.12),
-        0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+        0px 2px 2px 0px rgba(0, 0, 0, 0.14)
     ),
     3: (
         0px 1px 8px 0px rgba(0, 0, 0, 0.2),
         0px 3px 3px 0px rgba(0, 0, 0, 0.12),
-        0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+        0px 3px 4px 0px rgba(0, 0, 0, 0.14)
     ),
     4: (
         0px 2px 4px 0px rgba(0, 0, 0, 0.2),
         0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-        0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+        0px 4px 5px 0px rgba(0, 0, 0, 0.14)
     ),
     5: (
         0px 3px 5px 0px rgba(0, 0, 0, 0.2),
         0px 1px 18px 0px rgba(0, 0, 0, 0.12),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.14)
     ),
     6: (
         0px 5px 5px 0px rgba(0, 0, 0, 0.2),
         0px 3px 14px 0px rgba(0, 0, 0, 0.12),
-        0px 8px 10px 0px rgba(0, 0, 0, 0.14),
+        0px 8px 10px 0px rgba(0, 0, 0, 0.14)
     ),
     7: (
         0px 7px 8px 0px rgba(0, 0, 0, 0.2),
         0px 5px 22px 0px rgba(0, 0, 0, 0.12),
-        0px 12px 17px 0px rgba(0, 0, 0, 0.14),
+        0px 12px 17px 0px rgba(0, 0, 0, 0.14)
     ),
     8: (
         0px 8px 10px rgba(0, 0, 0, 0.2),
         0px 6px 30px rgba(0, 0, 0, 0.12),
-        0px 16px 24px rgba(0, 0, 0, 0.14),
+        0px 16px 24px rgba(0, 0, 0, 0.14)
     ),
     9: (
         0px 11px 15px rgba(0, 0, 0, 0.2),
         0px 9px 46px rgba(0, 0, 0, 0.12),
-        0px 24px 38px rgba(0, 0, 0, 0.14),
-    ),
+        0px 24px 38px rgba(0, 0, 0, 0.14)
+    )
 );
 
 /// The global default Elevation map.
@@ -4161,6 +4437,9 @@ $kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
 $kendo-border-radius-xxxl: k-map-get($kendo-spacing, 5) !default;
+/// The largest border radius used across the Components.
+/// @group radii
+$kendo-border-radius-full: 9999px !default;
 
 /// The global radii Map.
 /// @group radii
@@ -4172,7 +4451,8 @@ $kendo-border-radii: (
     lg: $kendo-border-radius-lg,
     xl: $kendo-border-radius-xl,
     xxl: $kendo-border-radius-xxl,
-    xxxl: $kendo-border-radius-xxxl
+    xxxl: $kendo-border-radius-xxxl,
+    full: $kendo-border-radius-full
 ) !default;
 
 // #region @import "@progress/kendo-theme-core/scss/border-radii/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/border-radii/index.import.scss
@@ -33495,29 +33775,29 @@ $_kendo-module-meta: (
 // ColorPalette
 
 /// The font family of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorPalette.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-line-height: 0 !default;
 
 /// The width of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
-/// @group colorpalette
+/// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
 /// The shadow of the ColorPalette focused tile.
-/// @group colorpalette
+/// @group color-palette
 $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
+/// @group color-palette
 $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
+/// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
 
 // #endregion
@@ -33813,142 +34093,142 @@ $_kendo-module-meta: (
 // ColorGradient
 
 /// The spacer of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-spacer: k-spacing(3) !default;
 
 /// The width of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-width: 294px !default;
 /// The width of the border around the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border-radius: k-border-radius(md) !default;
 /// The vertical padding of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-padding-y: $kendo-color-gradient-spacer !default;
 /// The horizontal padding of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-padding-x: $kendo-color-gradient-padding-y !default;
 /// The spacing between the sections of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-gap: $kendo-color-gradient-spacer !default;
 /// The font family of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-text: $kendo-component-text !default;
 /// The background color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// The border color of the ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
 /// The border color of the focused ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-focus-border: $kendo-hover-border !default;
 /// The box shadow of the focused ColorGradient.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The border radius of the ColorGradient canvas.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 /// The height the ColorGradient canvas hsv rectangle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 
 /// The width of the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-track-size: 10px !default;
 /// The border radius of the ColorGradient slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-border-radius: 10px !default;
 /// The width of the border around the ColorGradient slider drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-draghandle-border-width: 3px !default;
 
 /// The height of the ColorGradient vertical slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-vertical-size: 180px !default;
 /// The width of the ColorGradient horizontal slider.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-slider-horizontal-size: 100% !default;
 
 /// The width of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-width: 14px !default;
 /// The height of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-height: 14px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-border-width: 1px !default;
 /// The width of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The border radius of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-border-radius: 50% !default;
 /// The text color of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-text: null !default;
 /// The background color of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-border: rgba( white, .8 ) !default;
 /// The color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
 /// The outline color of the outline around the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
 /// The box shadow of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 
 /// The vertical margin of the ColorGradient canvas drag handle.
-/// @group cologradient
+/// @group color-gradient
 $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
+/// @group color-gradient
 $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
+/// @group color-gradient
 $kendo-color-gradient-input-width: 50px !default;
 /// The spacing between the ColorGradient inputs.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-gap: k-spacing(2) !default;
 /// The spacing between the ColorGradient inputs and their labels.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// The text color of the ColorGradient input labels.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-medium, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
-/// @group cologradient
+/// @group color-gradient
 $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
 
 // #endregion
@@ -34321,82 +34601,82 @@ $_kendo-module-meta: (
 // ColorEditor/FlatColorPicker
 
 /// The spacer of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-spacer: k-spacing(3) !default;
 
 /// The minimum width of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-min-width: 294px !default;
 /// The width of the border around the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
 /// The border radius of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border-radius: k-border-radius(md) !default;
 /// The font family of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-font-size: var( --kendo-font-size, inherit )  !default;
 /// The line height of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
 /// The text color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-text: $kendo-component-text !default;
 /// The background color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-bg: $kendo-component-bg !default;
 /// The border color of the ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-border: $kendo-component-border !default;
 
 /// The border color of the focused ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-focus-border: $kendo-hover-border !default;
 /// The box shadow of the focused ColorEditor.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The vertical padding of the ColorEditor header.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 /// The horizontal padding of the ColorEditor header.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-header-actions-gap: k-spacing(2) !default;
 
 /// The width of the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-preview-width: 32px !default;
 /// The height of the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
 
 /// The vertical padding of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
 /// The horizontal padding of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
 /// The spacing of the ColorEditor views container.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
 
 /// The outline color of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !default;
 /// The outline width of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
-/// @group coloreditor
+/// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
 
 // #endregion
@@ -47175,38 +47455,38 @@ $_kendo-module-meta: (
 // TileLayout
 
 /// The width of the border around the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light)) !default;
 
 /// The horizontal padding of the TileLayout.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the TileLayout
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
 
 /// The width of the border around the TileLayout card.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-card-border-width: 1px !default;
 /// The focus box shadow of the TileLayout card.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;
 
 /// The width of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border-width: 1px !default;
 /// The radius of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border-radius: k-border-radius(md) !default;
 /// The color of the border around the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-border: $kendo-component-border !default;
 /// The background color of the TileLayout hint.
-/// @group tilelayout
+/// @group tile-layout
 $kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
 
 
@@ -54895,184 +55175,184 @@ $_kendo-module-meta: (
 // FileManager
 
 /// The space between the FileManager items.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-spacer: k-spacing(4) !default;
 /// The border width of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-border-width: 1px !default;
 /// The font family of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-bg: $kendo-component-bg !default;
 /// The text color of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-text: $kendo-component-text !default;
 /// The border color of the FileManager.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-border: $kendo-component-border !default;
 
 /// The border width of the FileManager Toolbar.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-toolbar-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Toolbar.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
 /// The text color of the FileManager Toolbar.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-toolbar-text: null !default;
 /// The border color of the FileManager Toolbar.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-toolbar-border: null !default;
 /// The gradient of the FileManager Toolbar.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-toolbar-gradient: null !default;
 
 /// The horizontal padding of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-padding-x: $kendo-file-manager-spacer !default;
 /// The vertical padding of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-padding-y: $kendo-file-manager-spacer !default;
 /// The width of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-width: 20% !default;
 /// The border width of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-bg: null !default;
 /// The text color of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-text: null !default;
 /// The border color of the FileManager Navigation.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-navigation-border: null !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
 /// The vertical padding of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
 /// The border width of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
 /// The background color of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-bg: $kendo-file-manager-toolbar-bg !default;
 /// The text color of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-text: null !default;
 /// The border color of the FileManager Breadcrumb.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-breadcrumb-border: null !default;
 
 /// The background color of the FileManager ListView.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-bg: null !default;
 /// The text color of the FileManager ListView.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-text: null !default;
 /// The border color of the FileManager ListView.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-border: null !default;
 
 /// The horizontal padding of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
 /// The width of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-width: 120px !default;
 /// The height of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-height: 120px !default;
 /// The background color of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-bg: null !default;
 /// The text color of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-text: null !default;
 /// The border color of the FileManager ListView item.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-border: null !default;
 
 /// The background color of the FileManager ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-border: null !default;
 /// Background color of the FileManager selected ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-selected-bg: null !default;
 /// Text color of the FileManager selected ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-selected-text: inherit !default;
 /// Border color of the FileManager selected ListView item icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-listview-item-icon-selected-border: null !default;
 
 /// The background color of the FileManager Grid.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-grid-bg: null !default;
 /// The text color of the FileManager Grid.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-grid-text: null !default;
 /// The border color of the FileManager Grid.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-grid-border: null !default;
 
 /// The horizontal padding of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-padding-x: $kendo-file-manager-spacer !default;
 /// The vertical padding of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-padding-y: $kendo-file-manager-spacer !default;
 /// The width of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-width: 20% !default;
 /// The border width of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !default;
 /// The spacing of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
 /// The gap between the columns in the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-column-gap: k-spacing(1) !default;
 /// The background color of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-bg: null !default;
 /// The text color of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-text: null !default;
 /// The border color of the FileManager preview.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-border: null !default;
 
 /// The background color of the FileManager preview icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager preview icon.
-/// @group filemanager
+/// @group file-manager
 $kendo-file-manager-preview-icon-border: null !default;
 
 // #endregion