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

package/dist/all.scss

@@ -711,27 +711,129 @@ $kendo-color-level-step: 8% !default;
     @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
 }
 
+// #endregion
+// #region @import "./_color-variations.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_color-variations.import.scss
 /// Generates all color variations of a given main color
 /// @param {String} $name - The name of the main color
-/// @param {Color} $level - The color value to be assigned to the main color
+/// @param {Color} $color - The color value to be assigned to the main color
+/// @param {String} $theme - The theme the colors will be generated for
 /// @return {Map} - A map with the generated keys and values
 ///
 /// @group color-system
-@function k-generate-colors( $name, $color ) {
-    $_variations: (
-        #{$name}-subtle: k-try-tint( $color, 80% ),
-        #{$name}-subtle-hover: k-try-tint( $color, 65% ),
-        #{$name}-subtle-active: k-try-tint( $color, 50% ),
-        #{$name}: $color,
-        #{$name}-hover: k-try-shade( $color, 0.5 ),
-        #{$name}-active: k-try-shade( $color, 1.5 ),
-        #{$name}-emphasis: k-try-tint( $color, 4.5 ),
-        #{$name}-on-subtle: k-try-shade( $color, 8 ),
-        on-#{$name}: k-contrast-legacy( $color ),
-        #{$name}-on-surface: $color,
-    );
-    
-    @return $_variations;
+@function k-generate-color-variations( $name, $color, $theme: null ) {
+    $result: ();
+
+    // DataViz
+    @if ( 
+            $name == 'series-a' or
+            $name == 'series-b' or
+            $name == 'series-c' or
+            $name == 'series-d' or
+            $name == 'series-e' or
+            $name == 'series-f'
+        ) {
+        $_variations: (
+            #{$name}: $color,
+            #{$name}-bold: k-color-mix(black, $color, 25%),
+            #{$name}-bolder: k-color-mix(black, $color, 50%),
+            #{$name}-subtle: k-color-mix(white, $color, 25%),
+            #{$name}-subtler: k-color-mix(white, $color, 50%),
+        );
+
+        $result: k-map-merge($result, $_variations);
+    } @else {
+        // Default
+        @if ( $theme == 'default' or $theme == null ) { // stylelint-disable-line
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 4% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 13% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 75% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 75% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Bootstrap
+        @if ( $theme == 'bootstrap' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 30% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', $color, k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-color-darken( $color, 7.5% ),
+                #{$name}-active: k-color-darken( $color, 10% ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 21% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-color( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Material
+        @if ( $theme == 'material' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 16% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 24% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 32% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 87% ), k-contrast-color( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 87% ), k-try-shade( $color, 50% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Fluent
+        @if ( $theme == 'fluent' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-shade( $color, 2% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-shade( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 12% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 0.5 ),
+                #{$name}-active: k-try-shade( $color, 1.5 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 18% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 74% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 86% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 86% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+
+        // Classic
+        @if ( $theme == 'classic' ) {
+            $_variations: (
+                #{$name}-subtle: if( $name == 'base', k-try-tint( $color, 20% ), k-try-tint( $color, 80% )),
+                #{$name}-subtle-hover: if( $name == 'base', k-try-tint( $color, 8% ), k-try-tint($color, 65% )),
+                #{$name}-subtle-active: if( $name == 'base', k-try-shade( $color, 6% ), k-try-tint( $color, 50% )),
+                #{$name}: $color,
+                #{$name}-hover: k-try-shade( $color, 1 ),
+                #{$name}-active: k-try-shade( $color, 2 ),
+                #{$name}-emphasis: if( $name == 'base', k-try-shade( $color, 14% ), k-try-tint( $color, 25% )),
+                #{$name}-on-subtle: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 65% )),
+                on-#{$name}: if( $name == 'base', k-try-shade( $color, 84% ), k-contrast-legacy( $color )),
+                #{$name}-on-surface: if( $name == 'base', k-try-shade( $color, 84% ), k-try-shade( $color, 25% )),
+            );
+
+            $result: k-map-merge($result, $_variations);
+        }
+    }
+
+    @return $result;
 }
 // #endregion
 // #region @import "./_custom-properties.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/functions/_custom-properties.import.scss
@@ -7883,13 +7985,57 @@ $_kendo-module-meta: (
 
 // #endregion
 // #region @import "./_variables.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/_variables.scss
+// #region @import "@progress/kendo-theme-core/scss/color-system/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-core/scss/color-system/index.import.scss
+// File already imported_once. Skipping output.
+// #endregion
+
 $kendo-prefix: k- !default;
 $kendo-important: true !default;
+$kendo-enable-color-system: false !default;
 
 $kendo-theme-colors: () !default;
 
 $kendo-font-sizes: () !default;
 
+$kendo-util-colors-list: (
+    primary-subtle,
+    primary,
+    primary-emphasis,
+    secondary-subtle,
+    secondary,
+    secondary-emphasis,
+    tertiary-subtle,
+    tertiary,
+    tertiary-emphasis,
+    info-subtle,
+    info,
+    info-emphasis,
+    success-subtle,
+    success,
+    success-emphasis,
+    warning-subtle,
+    warning,
+    warning-emphasis,
+    error-subtle,
+    error,
+    error-emphasis,
+    light-subtle,
+    light,
+    light-emphasis,
+    dark-subtle,
+    dark,
+    dark-emphasis,
+) !default;
+
+$kendo-util-colors: () !default;
+@each $name, $color in $kendo-colors {
+    @each $util-color in $kendo-util-colors-list {
+        @if ( $name == $util-color ) {
+            $kendo-util-colors: k-map-merge( $kendo-util-colors, ( $name: $color) );
+        }
+    }
+}
+
 $kendo-spacing: (
     0: 0,
     1px: 1px,
@@ -8577,7 +8723,7 @@ $kendo-utils: (
         start,
         end
     ),
-    "text-color": k-map-merge( $kendo-theme-colors, (
+    "text-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -8632,7 +8778,7 @@ $kendo-utils: (
         content: content-box,
         text: text
     ),
-    "background-color": k-map-merge( $kendo-theme-colors, (
+    "background-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "transparent": transparent,
         "black": black,
@@ -8675,7 +8821,7 @@ $kendo-utils: (
         hidden,
         none
     ),
-    "border-color": k-map-merge( $kendo-theme-colors, (
+    "border-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -8701,7 +8847,7 @@ $kendo-utils: (
         outset,
         none
     ),
-    "outline-color": k-map-merge( $kendo-theme-colors, (
+    "outline-color": k-map-merge( if( $kendo-enable-color-system, $kendo-util-colors, $kendo-theme-colors ), (
         "inherit": inherit,
         "current": currentColor,
         "transparent": transparent,
@@ -8920,7 +9066,7 @@ $kendo-utils: (
 
 // #endregion
 // #region @import "./_mixins.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/_mixins.scss
-@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important ) {
+@mixin generate-utils( $name, $props, $values, $function: "", $important: $kendo-important, $css-var: null ) {
     @if $values {
         $_props: if( k-meta-type-of($props) == list, $props, ( $props ) );
         $_fn: if( k-meta-function-exists( $function ), k-meta-get-function( $function ), null );
@@ -8930,25 +9076,33 @@ $kendo-utils: (
             $_val: if( k-meta-type-of($values) == list, $key, $val );
             $_name: k-escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
+            $_custom-prop: if( $_key == DEFAULT, var( --kendo-#{$css-var}, #{$_val} ), var( --kendo-#{$css-var}-#{$_key}, #{$_val} ) );
 
             @if $important != only {
                 .#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_custom-prop), $_custom-prop );
+                        } @else {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $_val), $_val );
+                        }
                     }
                 }
             }
             @if $important {
                 .\!#{$_selector} {
                     @each $prop in $_props {
-                        #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        @if $css-var {
+                            #{$prop}: if( $_fn, k-meta-call($_fn, $-custom-prop), $-custom-prop ) !important; // stylelint-disable-line declaration-no-important
+                        } @else {
+                            #{$prop}:  if( $_fn, k-meta-call($_fn, $_val), $_val ) !important; // stylelint-disable-line declaration-no-important
+                        }
                     }
                 }
             }
         }
     }
 }
-
 // #endregion
 
 // #region @import "./accessibility/index.import.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-utils/scss/accessibility/index.import.scss
@@ -13002,11 +13156,11 @@ $kendo-utils: (
 
     // Text color utility classes
     $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
-    @include generate-utils( text, color, $kendo-utils-text-color );
+    @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
 
 
     // Legacy aliases
-    @include generate-utils( color, color, $kendo-utils-text-color );
+    @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );
 
 }
 
@@ -13304,7 +13458,7 @@ $kendo-utils: (
 
     // Background color utility classes
     $kendo-utils-background-color: k-map-get( $kendo-utils, "background-color" ) !default;
-    @include generate-utils( bg, background-color, $kendo-utils-background-color );
+    @include generate-utils( bg, background-color, $kendo-utils-background-color, $css-var: 'color' );
 
 }
 
@@ -13448,13 +13602,7 @@ $kendo-utils: (
 
     // Border color utility classes
     $kendo-utils-border-color: k-map-get( $kendo-utils, "border-color" ) !default;
-    @include generate-utils( border, border-color, $kendo-utils-border-color );
-    @include generate-utils( border-t, border-top-color, $kendo-utils-border-color );
-    @include generate-utils( border-r, border-right-color, $kendo-utils-border-color );
-    @include generate-utils( border-b, border-bottom-color, $kendo-utils-border-color );
-    @include generate-utils( border-l, border-left-color, $kendo-utils-border-color );
-    @include generate-utils( border-x, border-inline-color, $kendo-utils-border-color );
-    @include generate-utils( border-y, border-block-color, $kendo-utils-border-color );
+    @include generate-utils( border, border-color, $kendo-utils-border-color, $css-var: 'color' );
 
 }
 
@@ -14334,7 +14482,7 @@ $kendo-utils: (
 
     // Outline color utility classes
     $kendo-utils-outline-color: k-map-get( $kendo-utils, "outline-color" ) !default;
-    @include generate-utils( outline, outline-color, $kendo-utils-outline-color );
+    @include generate-utils( outline, outline-color, $kendo-utils-outline-color, $css-var: 'color' );
 
 }
 
@@ -15724,7 +15872,7 @@ $kendo-utils: (
 // #endregion
 
 @mixin kendo-utils--elevation {
-    @include generate-utils(elevation, box-shadow, $kendo-elevation);
+    @include generate-utils(elevation, box-shadow, $kendo-elevation, $css-var: 'elevation');
 }
 
 // #endregion
@@ -25690,19 +25838,6 @@ $kendo-form-sizes: (
         }
     }
 
-    .k-input-label {
-        margin-right: $kendo-horizontal-form-label-margin-x;
-        z-index: 1;
-
-        &:dir(rtl),
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            margin-right: 0;
-            margin-left: $kendo-horizontal-form-label-margin-x;
-        }
-    }
 
 
     // Vertical Form
@@ -27841,7 +27976,7 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
             box-sizing: border-box;
         }
 
-        > .k-label {
+        > .k-floating-label {
             max-width: $kendo-floating-label-max-width;
             font-size: $kendo-floating-label-font-size;
             line-height: $kendo-floating-label-line-height;
@@ -27856,13 +27991,9 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
             transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, left $kendo-floating-label-transition;
         }
 
-        > .k-widget {
-            flex: 1 1 auto;
-            width: auto;
-        }
 
         &.k-empty {
-            > .k-label {
+            > .k-floating-label {
                 top: var(--kendo-floating-label-offset-y, #{$kendo-floating-label-offset-y});
                 left: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 transform: scale( $kendo-floating-label-scale );
@@ -27870,13 +28001,13 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
             }
         }
 
-        > .k-label,
-        &.k-focus > .k-label {
+        > .k-floating-label,
+        &.k-focus > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
         }
-        &:focus-within > .k-label {
+        &:focus-within > .k-floating-label {
             top: var(--kendo-floating-label-focus-offset-y, #{$kendo-floating-label-focus-offset-y});
             left: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             transform: scale( $kendo-floating-label-focus-scale );
@@ -27890,24 +28021,24 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right center;
                 transition: transform $kendo-floating-label-transition, color $kendo-floating-label-transition, top $kendo-floating-label-transition, right $kendo-floating-label-transition;
             }
 
             &.k-empty {
-                > .k-label {
+                > .k-floating-label {
                     left: auto;
                     right: var(--kendo-floating-label-offset-x, #{$kendo-floating-label-offset-x});
                 }
             }
 
-            > .k-label,
-            &.k-focus > .k-label {
+            > .k-floating-label,
+            &.k-focus > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
-            &:focus-within > .k-label {
+            &:focus-within > .k-floating-label {
                 left: auto;
                 right: var(--kendo-floating-label-focus-offset-x, #{$kendo-floating-label-focus-offset-x});
             }
@@ -27931,7 +28062,7 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
     // Floating label
     .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             transform-origin: left bottom;
         }
 
@@ -27939,7 +28070,7 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
         .k-rtl &,
         &[dir="rtl"] {
 
-            > .k-label {
+            > .k-floating-label {
                 transform-origin: right bottom;
             }
 
@@ -27956,23 +28087,23 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
     // Floating label
     .k-floating-label-container {
 
-        > .k-label {
+        > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-text,
                 $bg: $kendo-floating-label-bg
             );
         }
 
-        &.k-focus > .k-label {
+        &.k-focus > .k-floating-label {
             @include fill(
                 $color: $kendo-floating-label-focus-text,
                 $bg: $kendo-floating-label-focus-bg
             );
         }
 
-        &.k-invalid > .k-label,
-        &.ng-invalid.ng-touched > .k-label,
-        &.ng-invalid.ng-dirty > .k-label {
+        &.k-invalid > .k-floating-label,
+        &.ng-invalid.ng-touched > .k-floating-label,
+        &.ng-invalid.ng-dirty > .k-floating-label {
             @include fill ( $color: $kendo-invalid-text );
         }
     }
@@ -27994,10 +28125,10 @@ $kendo-floating-label-focus-text: $kendo-color-primary !default;
     // Floating label
     .k-floating-label-container {
 
-        &.k-invalid + .k-label,
-        .k-invalid + .k-label,
-        .ng-invalid.ng-touched + .k-label,
-        .ng-invalid.ng-dirty + .k-label {
+        &.k-invalid + .k-floating-label,
+        .k-invalid + .k-floating-label,
+        .ng-invalid.ng-touched + .k-floating-label,
+        .ng-invalid.ng-dirty + .k-floating-label {
             @include fill( $color: $kendo-color-error );
         }
     }
@@ -30765,136 +30896,327 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/calendar/_variables.scss
 // Calendar
 
+/// The width of the border around the Calendar.
+/// @group calendar
 $kendo-calendar-border-width: 1px !default;
+/// The font family of the Calendar.
+/// @group calendar
 $kendo-calendar-font-family: $kendo-font-family !default;
+/// The font size of the Calendar.
+/// @group calendar
 $kendo-calendar-font-size: $kendo-font-size-md !default;
+/// The line height of the Calendar.
+/// @group calendar
 $kendo-calendar-line-height: k-math-div( 20, 14 ) !default;
 
+/// The size of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-size: 36px !default;
 
+/// The background color of the Calendar.
+/// @group calendar
 $kendo-calendar-bg: $kendo-component-bg !default;
+/// The text color of the Calendar.
+/// @group calendar
 $kendo-calendar-text: $kendo-component-text !default;
+/// The border color of the Calendar.
+/// @group calendar
 $kendo-calendar-border: $kendo-component-border !default;
 
+/// The horizontal padding of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The height of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-border-width: 0px !default;
 
+/// The background color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-bg: null !default;
+/// The text color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-text: $kendo-component-header-text !default;
+/// The border color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-border: $kendo-component-header-border !default;
+/// The gradient of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-gradient: null !default;
+/// The shadow of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-shadow: null !default;
 
+/// The gap between the items in the navigation of the Calendar.
+/// @group calendar
 $kendo-calendar-nav-gap: null !default;
 
+/// The horizontal padding of the footer in the Calendar.
+/// @group calendar
 $kendo-calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the footer in the Calendar.
 $kendo-calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The horizontal padding of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-padding-x: .25em !default;
+/// The vertical padding of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
+
+/// The line height of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
+
+/// The border radius of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-border-radius: 100px !default;
 
+/// The horizontal padding of the header cells in the Calendar.
+/// @group calenda
 $kendo-calendar-header-cell-padding-x: null !default;
+/// The vertical padding of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-padding-y: null !default;
+/// The width of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
+/// The height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// The font size of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-font-size: $kendo-font-size-sm !default;
+/// The line height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
+
+/// The background color of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-bg: null !default;
+/// The text color of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-text: $kendo-subtle-text !default;
+
+/// The opacity of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-opacity: null !default;
 
+/// The horizontal padding of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The height of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
+/// The font size of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-font-size: null !default;
+/// The line height of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-line-height: null !default;
+/// The font weight of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-font-weight: bold !default;
 
+/// The font size of the week number cells in the Calendar.
+/// @group calendar
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
+/// The width of the Calendar view.
+/// @group calendar
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
+/// The height of the Calendar view.
+/// @group calendar
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
+
+/// The gap between the items in the Calendar view.
+/// @group calendar
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
+/// The background color of the weekend cells in the Calendar.
+/// @group calendar
 $kendo-calendar-weekend-bg: null !default;
+/// The text color of the weekend cells in the Calendar.
 $kendo-calendar-weekend-text: null !default;
 
+/// The style of the current day in the Calendar.
+/// @group calendar
 $kendo-calendar-today-style: color !default;
+/// The color of the current day in the Calendar.
+/// @group calendar
 $kendo-calendar-today-color: $kendo-color-primary !default;
 
+/// The background color of the week number cells in the Calendar.
+/// @group calendar
 $kendo-calendar-week-number-bg: null !default;
+/// The text color of the week number cells in the Calendar.
+/// @group calendar
 $kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
 $kendo-calendar-other-month-bg: null !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
 $kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;
 
+/// The background color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-bg: null !default;
+/// The text color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-text: null !default;
+/// The border color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-border: null !default;
+/// The gradient of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-gradient: null !default;
 
+/// The background color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-text: $kendo-hover-text !default;
+/// The border color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-border: $kendo-hover-border !default;
+/// The gradient of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-gradient: null !default;
 
+/// The background color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-bg: $kendo-color-primary !default;
+/// The text color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-calendar-cell-selected-bg )) !default;
+/// The border color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-bg !default;
+/// The gradient of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-gradient: null !default;
 
+/// The background color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-calendar-cell-selected-bg, .5 )) !default;
+/// The text color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-text !default;
+/// The border color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-border: null !default;
+/// The gradient of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-gradient: null !default;
 
+/// The shadow of the focused cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-focus-shadow: $kendo-list-item-focus-shadow !default;
+/// The shadow of the selected and focused cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
 
 
-// Calendar navigation
+/// The width of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-width: 5em !default;
+/// The height of the items in the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-item-height: 2em !default;
 
+/// The background color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-bg: if($kendo-enable-color-system, k-color( surface ), k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3)) !default;
+/// The text color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-text !default;
+/// The border color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-border: $kendo-calendar-border !default;
 
+/// The background color of the hovered items in the Calendar navigation.
 $kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 
-
-// Infinite calendar
+/// The horizontal padding of the header in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the header in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The horizontal padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-padding-y: 0px !default;
+
+/// The height of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;
 
 
 // Multiview calendar
 
 
-// Calendar sizes
+/// The font size of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-font-size: $kendo-font-size-md !default;
+/// The line height of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-line-height: $kendo-line-height-md !default;
+/// The size of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-size: 32px !default;
+/// The horizontal padding of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-padding-x: .125rem !default;
+/// The vertical padding of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-padding-y: .125rem !default;
 
+/// The font size of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-font-size: $kendo-font-size-md !default;
+/// The line height of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-line-height: $kendo-line-height-md !default;
+/// The size of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-size: 36px !default;
+/// The horizontal padding of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The font size of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-font-size: $kendo-font-size-lg !default;
+/// The line height of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-line-height: $kendo-line-height-lg !default;
+/// The size of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-size: 40px !default;
+/// The horizontal padding of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The sizes Map of the Calendar.
+/// @group calendar
 $kendo-calendar-sizes: (
     sm: (
         font-size: $kendo-calendar-sm-font-size,
@@ -31010,6 +31332,9 @@ $kendo-calendar-sizes: (
         block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
         border-color: transparent;
     }
+    .k-calendar-td.k-alt {
+        font-size: $kendo-calendar-week-number-font-size;
+    }
 
 
     // Calendar cell inner
@@ -31057,11 +31382,6 @@ $kendo-calendar-sizes: (
         justify-content: space-between;
         flex: 0 0 auto;
 
-        .k-title,
-        .k-calendar-title {
-            font-weight: bold;
-        }
-
         .k-calendar-nav {
             display: flex;
             flex-flow: row nowrap;
@@ -31095,6 +31415,10 @@ $kendo-calendar-sizes: (
         position: relative;
         z-index: 1;
         overflow: hidden;
+
+        .k-today {
+            font-weight: bold;
+        }
     }
 
 
@@ -31528,9 +31852,6 @@ $kendo-calendar-sizes: (
                 $kendo-calendar-week-number-bg
             );
         }
-        .k-out-of-range {
-            pointer-events: none;
-        }
 
 
         // Interactive states
@@ -39839,44 +40160,109 @@ $_kendo-module-meta: (
 // Component
 // #region @import "./_variables.scss"; -> scss/drawer/_variables.scss
 // Drawer
+
+/// The background color of the Drawer.
+/// @group drawer
 $kendo-drawer-bg: $kendo-component-bg !default;
+/// The text color of the Drawer.
+/// @group drawer
 $kendo-drawer-text: $kendo-component-text !default;
+/// The border color of the Drawer.
+/// @group drawer
 $kendo-drawer-border: $kendo-component-border !default;
+/// The border width of the Drawer.
+/// @group drawer
 $kendo-drawer-border-width: 1px !default;
+/// The font family of the Drawer.
+/// @group drawer
 $kendo-drawer-font-family: $kendo-font-family !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: $kendo-font-size-md !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: $kendo-line-height-md !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
 
+/// The width of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-width: 7px !default;
+/// The color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+/// The background color of the Drawer scrollbar thumb.
+/// @group drawer
 $kendo-drawer-scrollbar-bg: #dedede !default;
+/// The border radius of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
+/// The hover color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
 
+/// The horizontal padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+/// The font size of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-font-size: 16px !default;
+/// The line height of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-line-height: $kendo-line-height-lg !default;
 
+/// The horizontal padding of the Drawer item in each level.
+/// @group drawer
 $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+/// The count of the Drawer item levels.
+/// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
 
+/// The horizontal padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-x: 0 !default;
+/// The vertical padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The initial width of the mini Drawer.
+/// @group drawer
 $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size}) !default;
 
+/// The background color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-text: $kendo-hover-text !default;
 
+/// The background color of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-bg: $kendo-hover-bg !default;
+/// The box shadow of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-shadow: none !default;
 
+/// The background color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-bg: null !default;
+/// The text color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-text: $kendo-color-secondary !default;
+
+/// The background color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-bg: $kendo-hover-bg !default;
+/// The text color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
 
 // #endregion
@@ -39884,15 +40270,20 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
 // #region @import "@progress/kendo-theme-default/scss/drawer/_layout.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/drawer/_layout.scss
 @mixin kendo-drawer--layout-base() {
 
+    // Container
     .k-drawer-container {
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-start;
     }
+
     kendo-drawer.k-drawer,
     kendo-drawer .k-drawer-wrapper {
         transition: none;
     }
+
+
+    // Drawer
     .k-drawer {
         height: 100%;
         max-width: 100%;
@@ -39917,41 +40308,38 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
             box-sizing: border-box;
         }
 
-        // Borders
         .k-drawer-mini &.k-drawer-start,
-        .k-drawer-expanded &.k-drawer-start,
-        .k-drawer-left.k-drawer-mini &,
-        .k-drawer-left.k-drawer-expanded & {
-            border-right-width: $kendo-drawer-border-width;
+        .k-drawer-expanded &.k-drawer-start {
+            border-inline-end-width: $kendo-drawer-border-width;
         }
+
         .k-drawer-mini &.k-drawer-end,
-        .k-drawer-expanded &.k-drawer-end,
-        .k-drawer-right.k-drawer-mini &,
-        .k-drawer-right.k-drawer-expanded & {
-            border-left-width: $kendo-drawer-border-width;
+        .k-drawer-expanded &.k-drawer-end {
+            border-inline-start-width: $kendo-drawer-border-width;
         }
 
+
         // Position
-        &.k-drawer-start,
-        .k-drawer-left & {
+        &.k-drawer-start {
             top: 0;
-            left: 0;
+            inset-inline-start: 0;
         }
-        &.k-drawer-end,
-        .k-drawer-right & {
+        &.k-drawer-end {
             top: 0;
-            right: 0;
+            inset-inline-end: 0;
         }
     }
+
+
+    // Content
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
     }
 
 
-    // Overlay drawer
+    // Overlay
     .k-drawer-overlay {
-
         .k-drawer {
             max-width: 80vw; // limit width
             position: fixed;
@@ -39965,7 +40353,6 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
         &.k-drawer-expanded > .k-overlay {
             display: block;
         }
-
     }
 
 
@@ -39980,13 +40367,9 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
             align-self: stretch;
         }
 
-
-        // right drawer
-        .k-drawer.k-drawer-end,
-        &.k-drawer-right .k-drawer {
-            order: 1;
+        &:has(.k-drawer.k-drawer-end) {
+            flex-direction: row-reverse;
         }
-
     }
 
 
@@ -40005,8 +40388,7 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
             border-radius: $kendo-drawer-scrollbar-radius;
         }
     }
-    .k-drawer-items,
-    .k-drawer-items ul {
+    .k-drawer-items {
         margin: 0;
         padding: 0;
         list-style: none;
@@ -40069,61 +40451,18 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
             }
         }
     }
+
+
+    // Separator
     .k-drawer-separator {
         padding: 0;
         height: 1px;
     }
 
 
-
     // Mini mode
-    .k-drawer-mini {
-
-        .k-drawer-wrapper {
-            width: $kendo-drawer-mini-initial-width;
-        }
-
-    }
-
-
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Borders
-        &.k-drawer-mini .k-drawer-start,
-        .k-drawer-mini .k-drawer-start,
-        .k-drawer-expanded .k-drawer-start,
-        &.k-drawer-expanded .k-drawer-start {
-            border-left-width: $kendo-drawer-border-width;
-            border-right-width: 0;
-        }
-        &.k-drawer-mini .k-drawer-end,
-        .k-drawer-mini .k-drawer-end,
-        &.k-drawer-expanded .k-drawer-end
-        .k-drawer-expanded .k-drawer-end {
-            border-left-width: 0;
-            border-right-width: $kendo-drawer-border-width;
-        }
-
-        // Position
-        &.k-drawer-overlay .k-drawer-start,
-        .k-drawer-overlay .k-drawer-start {
-            left: auto;
-            right: 0;
-        }
-        &.k-drawer-overlay .k-drawer-end,
-        .k-drawer-overlay .k-drawer-end {
-            left: 0;
-            right: auto;
-        }
-
-        // Order
-        .k-drawer-left.k-drawer-push .k-drawer {
-            order: 1;
-        }
-        .k-drawer-right.k-drawer-push .k-drawer {
-            order: 0;
-        }
+    .k-drawer-mini .k-drawer-wrapper {
+        width: $kendo-drawer-mini-initial-width;
     }
 }
 
@@ -45153,109 +45492,275 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/panelbar/_variables.scss
 // Panelbar
 
+/// The horizontal padding of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-padding-x: 0px !default;
+/// The vertical padding of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-padding-y: 0px !default;
+/// The font family of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-font-family: $kendo-font-family !default;
+/// The font size of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-font-size: $kendo-font-size-md !default;
+/// The line height of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-line-height: k-math-div( 20, 14 ) !default;
+/// The width of the border around the PanelBar.
+/// @group panelbar
 $kendo-panelbar-border-width: 1px !default;
+/// The border style around the the PanelBar.
+/// @group panelbar
 $kendo-panelbar-border-style: solid !default;
+/// The width of the border around the PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-border-width: 1px !default;
+/// The style of the border around the PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-border-style: solid !default;
 
+/// The horizontal padding of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-padding-x: k-map-get( $kendo-spacing, 6 ) !default;
+/// The vertical padding of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 
+/// The horizontal padding of the PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-padding-x: k-map-get( $kendo-spacing, 6 ) !default;
+/// The vertical padding of the PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 
+/// The maximum nesting of the PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-level-count: 4 !default;
 
+/// The background color of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-bg: $kendo-component-bg !default;
+/// The text color of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-text: $kendo-component-text !default;
+/// The border color of the PanelBar.
+/// @group panelbar
 $kendo-panelbar-border: $kendo-component-border !default;
 
+/// The background color of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-bg: $kendo-panelbar-bg !default;
+/// The text color of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-text: $kendo-link-text !default;
+/// The border color of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-border: null !default;
+/// The gradient of the PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-gradient: null !default;
 
+/// The background color of the hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
+/// The text color of the hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-text: null !default;
+/// The border color of the hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-border: null !default;
+/// The gradient of the hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-gradient: null !default;
 
+/// The background color of the focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !default;
+/// The text color of the focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-focus-text: null !default;
+/// The border color of the focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-focus-border: null !default;
+/// The gradient of the focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-focus-gradient: null !default;
+/// The shadow of the focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-focus-shadow: null !default;
 
+/// The background color of the focused and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !default;
+/// The text color of the focused and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-focus-text: null !default;
+/// The border color of the focused and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-focus-border: null !default;
+/// The gradient of the focused and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-hover-focus-gradient: null !default;
 
+/// The background color of the selected PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
+/// The border color of the selected PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-border: null !default;
+/// The gradient of the selected PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-gradient: null !default;
 
+/// The background color of the selected and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-header-selected-bg, .95)) !default;
+/// The text color of the selected and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-text: null !default;
+/// The border color of the selected and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-border: null !default;
+/// The gradient of the selected and hovered PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-gradient: null !default;
 
+/// The background color of the selected and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3)) !default;
+/// The text color of the selected and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-focus-text: null !default;
+/// The border color of the selected and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-focus-border: null !default;
+/// The gradient of the selected and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-focus-gradient: null !default;
 
+/// The background color of the selected, hovered and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-header-selected-bg, 3.95)) !default;
+/// The text color of the selected, hovered and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-focus-text: null !default;
+/// The border color of the selected, hovered and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-focus-border: null !default;
+/// The gradient of the selected, hovered and focused PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 
+/// The background color of the hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
+/// The text color of the hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;
+/// The border color of the hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-border: null !default;
+/// The gradient of the hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-gradient: null !default;
 
+/// The background color of the focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 1.5 )) !default;
+/// The text color of the focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-focus-text: null !default;
+/// The border color of the focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-focus-border: null !default;
+/// The gradient of the focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-focus-gradient: null !default;
+/// The box shadow of the focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-focus-shadow: null !default;
 
+/// The background color of the focused and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-focus-bg: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-panelbar-header-bg, 2 )) !default;
+/// The text color of the focused and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-focus-text: null !default;
+/// The border color of the focused and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-focus-border: null !default;
+/// The gradient of the focused and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-hover-focus-gradient: null !default;
 
+/// The background color of the selected PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
+/// The border color of the selected PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-border: null !default;
+/// The gradient of the selected PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-gradient: null !default;
 
+/// The background color of the selected and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( secondary-hover ), k-try-tint($kendo-panelbar-item-selected-bg, .95)) !default;
+/// The text color of the selected and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-text: null !default;
+/// The border color of the selected and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-border: null !default;
+/// The gradient of the selected and hovered PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-gradient: null !default;
 
+/// The background color of the selected and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3)) !default;
+/// The text color of the selected and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-focus-text: null !default;
+/// The border color of the selected and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-focus-border: null !default;
+/// The gradient of the selected and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-focus-gradient: null !default;
 
+/// The background color of the selected, hovered and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-focus-bg: if($kendo-enable-color-system, k-color( secondary-active ), k-try-tint($kendo-panelbar-item-selected-bg, 3.95)) !default;
+/// The text color of the selected, hovered and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-focus-text: null !default;
+/// The border color of the selected, hovered and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-focus-border: null !default;
+/// The gradient of the selected, hovered and focused PanelBar items.
+/// @group panelbar
 $kendo-panelbar-item-selected-hover-focus-gradient: null !default;
 
+/// The background color of the expanded PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-expanded-bg: null !default;
+/// The text color of the expanded PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-expanded-text: null !default;
+/// The border color of the expanded PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-expanded-border: null !default;
+/// The gradient of the expanded PanelBar header.
+/// @group panelbar
 $kendo-panelbar-header-expanded-gradient: null !default;
 
 // #endregion
@@ -45288,7 +45793,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
 
 
         // Root
-        > .k-item,
         > .k-panelbar-header {
             // TODO
             border-width: 0;
@@ -45314,14 +45818,12 @@ $kendo-panelbar-header-expanded-gradient: null !default;
                 transition: $kendo-transition;
             }
         }
-        > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
             border-top-width: $kendo-panelbar-item-border-width;
         }
 
 
         // Sub
-        .k-group,
         .k-panelbar-group {
             margin: 0;
             padding: 0;
@@ -45331,7 +45833,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             background-color: transparent;
             list-style: none;
         }
-        .k-group > .k-item,
         .k-panelbar-group > .k-panelbar-item {
             display: block;
 
@@ -45378,8 +45879,8 @@ $kendo-panelbar-header-expanded-gradient: null !default;
         .k-panelbar-toggle {
             margin-inline-start: auto;
         }
-        .k-group .k-panelbar-expand,
-        .k-group .k-panelbar-collapse,
+        .k-panelbar-group .k-panelbar-expand,
+        .k-panelbar-group .k-panelbar-collapse,
         .k-panelbar-group .k-panelbar-toggle {
             margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
         }
@@ -45388,7 +45889,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
-            .k-group > .k-item,
             .k-panelbar-group > .k-panelbar-item {
                 // Hierarchy items
                 @for $i from 1 through $kendo-panelbar-item-level-count {
@@ -45433,7 +45933,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
 
 
         // Root
-        > .k-item,
         > .k-panelbar-header {
 
             &.k-expanded.k-level-0 > .k-link  {
@@ -45545,12 +46044,9 @@ $kendo-panelbar-header-expanded-gradient: null !default;
 
 
         // Sub
-        .k-group,
         .k-panelbar-group {
 
             // Hover
-            > .k-item > .k-link:hover,
-            > .k-item > .k-link.k-hover,
             > .k-panelbar-item > .k-link:hover,
             > .k-panelbar-item > .k-link.k-hover {
                 @include fill(
@@ -45562,8 +46058,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Focus
-            > .k-item > .k-link:focus,
-            > .k-item > .k-link.k-focus,
             > .k-panelbar-item > .k-link:focus,
             > .k-panelbar-item > .k-link.k-focus {
                 @include fill(
@@ -45576,8 +46070,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Focus & Hover
-            > .k-item > .k-link:focus:hover,
-            > .k-item > .k-link.k-focus.k-hover,
             > .k-panelbar-item > .k-link:focus:hover,
             > .k-panelbar-item > .k-link.k-focus.k-hover {
                 @include fill(
@@ -45589,7 +46081,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected
-            > .k-item > .k-link.k-selected,
             > .k-panelbar-item > .k-link.k-selected {
                 @include fill(
                     $kendo-panelbar-item-selected-text,
@@ -45600,8 +46091,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Hover
-            > .k-item > .k-link.k-selected:hover,
-            > .k-item > .k-link.k-selected.k-hover,
             > .k-panelbar-item > .k-link.k-selected:hover,
             > .k-panelbar-item > .k-link.k-selected.k-hover {
                 @include fill(
@@ -45613,8 +46102,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus
-            > .k-item > .k-link.k-selected:focus,
-            > .k-item > .k-link.k-selected.k-focus,
             > .k-panelbar-item > .k-link.k-selected:focus,
             > .k-panelbar-item > .k-link.k-selected.k-focus {
                 @include fill(
@@ -45626,8 +46113,6 @@ $kendo-panelbar-header-expanded-gradient: null !default;
             }
 
             // Selected Focus & Hover
-            > .k-item > .k-link.k-selected:focus:hover,
-            > .k-item > .k-link.k-selected.k-focus.k-hover,
             > .k-panelbar-item > .k-link.k-selected:focus:hover,
             > .k-panelbar-item > .k-link.k-selected.k-focus.k-hover {
                 @include fill(