@progress/kendo-theme-fluent 14.4.0-dev.2 → 14.4.0-dev.4

package/scss/agent-response/_layout.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-core/scss/components/agent-response/_layout.scss" as *;
+
+@mixin kendo-agent-response--layout() {
+    @include kendo-agent-response--layout-base();
+}

package/scss/agent-response/_theme.scss

@@ -0,0 +1,5 @@
+@use "@progress/kendo-theme-core/scss/components/agent-response/_theme.scss" as *;
+
+@mixin kendo-agent-response--theme() {
+    @include kendo-agent-response--theme-base();
+}

package/scss/agent-response/_variables.scss

@@ -0,0 +1,61 @@
+@use "../core/_index.scss" as *;
+
+// Agent Response
+
+/// The gap between the icon and the content of the AgentStep head and content row.
+/// @group agent-response
+$kendo-agent-step-gap: var( --kendo-agent-step-gap, k-spacing(1.5) ) !default;
+/// The vertical padding of the AgentStep head.
+/// @group agent-response
+$kendo-agent-step-padding-y: var( --kendo-agent-step-padding-y, k-spacing(2) ) !default;
+/// The top margin of the AgentStep icon.
+/// @group agent-response
+$kendo-agent-step-icon-margin-top: var( --kendo-agent-step-icon-margin-top, k-spacing(0.5) ) !default;
+/// The text color of the added lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-added-color: var( --kendo-agent-step-added-color, k-color(success-on-surface) ) !default;
+/// The text color of the removed lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-removed-color: var( --kendo-agent-step-removed-color, k-color(error-on-surface) ) !default;
+/// The font size of the AgentStep label, secondary text, and diffstat.
+/// @group agent-response
+$kendo-agent-step-font-size: var( --kendo-agent-step-font-size, var(--kendo-font-size-sm) ) !default;
+/// The font size of the AgentStep body content.
+/// @group agent-response
+$kendo-agent-step-body-font-size: var( --kendo-agent-step-body-font-size, var(--kendo-font-size-sm) ) !default;
+
+/// The gap between the icon column and the content of the Thought.
+/// @group agent-response
+$kendo-thought-gap: var( --kendo-thought-gap, k-spacing(1.5) ) !default;
+/// The gap in the icon column of the Thought.
+/// @group agent-response
+$kendo-thought-icon-col-gap: var( --kendo-thought-icon-col-gap, k-spacing(2) ) !default;
+/// The spacing between stacked Thought items.
+/// @group agent-response
+$kendo-thought-spacing: var( --kendo-thought-spacing, k-spacing(4) ) !default;
+/// The color of the connector line between stacked Thought items.
+/// @group agent-response
+$kendo-thought-connector-color: var( --kendo-thought-connector-color, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
+
+/// The start indent of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-indent: var( --kendo-tool-call-indent, k-spacing(5) ) !default;
+/// The bottom padding of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-padding-y: var( --kendo-tool-call-padding-y, k-spacing(2) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/agent-response/_variables.scss" with (
+    $kendo-agent-step-gap: $kendo-agent-step-gap,
+    $kendo-agent-step-padding-y: $kendo-agent-step-padding-y,
+    $kendo-agent-step-icon-margin-top: $kendo-agent-step-icon-margin-top,
+    $kendo-agent-step-added-color: $kendo-agent-step-added-color,
+    $kendo-agent-step-removed-color: $kendo-agent-step-removed-color,
+    $kendo-agent-step-font-size: $kendo-agent-step-font-size,
+    $kendo-agent-step-body-font-size: $kendo-agent-step-body-font-size,
+    $kendo-thought-gap: $kendo-thought-gap,
+    $kendo-thought-icon-col-gap: $kendo-thought-icon-col-gap,
+    $kendo-thought-spacing: $kendo-thought-spacing,
+    $kendo-thought-connector-color: $kendo-thought-connector-color,
+    $kendo-tool-call-indent: $kendo-tool-call-indent,
+    $kendo-tool-call-padding-y: $kendo-tool-call-padding-y
+);

package/scss/bottom-navigation/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 
 /// The default theme color of the BottomNavigation.
 /// @group bottom-navigation
@@ -49,7 +50,7 @@ $kendo-bottom-nav-item-min-width: var( --kendo-bottom-nav-item-min-width, 72px )
 $kendo-bottom-nav-item-max-width: var( --kendo-bottom-nav-item-max-width, none ) !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: var( --kendo-bottom-nav-item-min-height, calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) ) !default;
+$kendo-bottom-nav-item-min-height: var( --kendo-bottom-nav-item-min-height, calc( #{$ki-icon-size-xl} * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: var( --kendo-bottom-nav-item-border-radius, k-border-radius(md) ) !default;

package/scss/button/_layout.scss

@@ -3,6 +3,7 @@
 @use "../core/_index.scss" as *;
 @use "../core/z-index/index.scss" as *;
 @use "../core/functions/index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/button/_layout.scss" as *;
 
@@ -53,38 +54,38 @@
 
                         &.k-svg-icon > svg,
                         &.k-icon-md > svg {
-                            width: var( --kendo-icon-size-md, 1rem );
-                            height: var( --kendo-icon-size-md, 1rem );
+                            width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+                            height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
                         }
 
                         &.k-icon-xs > svg {
-                            width: var( --kendo-icon-size-sm, 0.75rem );
-                            height: var( --kendo-icon-size-sm, 0.75rem )s;
+                            width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
+                            height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
                         }
 
                         &.k-icon-sm > svg {
-                            width: var( --kendo-icon-size-sm, 0.875rem );
-                            height: var( --kendo-icon-size-sm, 0.875rem );
+                            width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
+                            height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
                         }
 
                         &.k-icon-lg > svg {
-                            width: var( --kendo-icon-size-lg, 1.25rem );
-                            height: var( --kendo-icon-size-lg, 1.25rem );
+                            width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
+                            height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
                         }
 
                         &.k-icon-xl > svg {
-                            width: var( --kendo-icon-size-xl, 1.5rem );
-                            height: var( --kendo-icon-size-xl, 1.5rem );
+                            width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
+                            height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
                         }
 
                         &.k-icon-xxl > svg {
-                            width: var( --kendo-icon-size-xxl, 2rem );
-                            height: var( --kendo-icon-size-xxl, 2rem );
+                            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+                            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
                         }
 
                         &.k-icon-xxxl > svg {
-                            width: var( --kendo-icon-size-xxl, 3rem );
-                            height: var( --kendo-icon-size-xxl, 3rem );
+                            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+                            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
                         }
                     }
                 }

package/scss/checkpoint/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-checkpoint--styles() {
+    @include import-once( "checkpoint" ) {
+        @include core-styles();
+        @include kendo-checkpoint--layout();
+        @include kendo-checkpoint--theme();
+    }
+}

package/scss/checkpoint/_layout.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkpoint/_layout.scss" as *;
+
+@mixin kendo-checkpoint--layout() {
+    @include kendo-checkpoint--layout-base();
+}

package/scss/checkpoint/_theme.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/checkpoint/_theme.scss" as *;
+
+@mixin kendo-checkpoint--theme() {
+    @include kendo-checkpoint--theme-base();
+}

package/scss/checkpoint/_variables.scss

@@ -0,0 +1,33 @@
+@use "../core/_index.scss" as *;
+
+/// The color of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-color: var( --kendo-checkpoint-line-color, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
+/// The gap between the Checkpoint line and stamp.
+/// @group checkpoint
+$kendo-checkpoint-gap: var( --kendo-checkpoint-gap, k-spacing(1.5) ) !default;
+/// The width of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-width: var( --kendo-checkpoint-line-width, 1px ) !default;
+/// The font size of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-size: var( --kendo-checkpoint-stamp-font-size, var(--kendo-font-size-sm) ) !default;
+/// The text color of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-color: var( --kendo-checkpoint-stamp-color, k-color(subtle) ) !default;
+/// The font weight of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-weight: null !default;
+/// The horizontal padding of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-padding-x: var( --kendo-checkpoint-stamp-padding-x, k-spacing(1) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/checkpoint/_variables.scss" with (
+    $kendo-checkpoint-line-color: $kendo-checkpoint-line-color,
+    $kendo-checkpoint-gap: $kendo-checkpoint-gap,
+    $kendo-checkpoint-line-width: $kendo-checkpoint-line-width,
+    $kendo-checkpoint-stamp-font-size: $kendo-checkpoint-stamp-font-size,
+    $kendo-checkpoint-stamp-color: $kendo-checkpoint-stamp-color,
+    $kendo-checkpoint-stamp-font-weight: $kendo-checkpoint-stamp-font-weight,
+    $kendo-checkpoint-stamp-padding-x: $kendo-checkpoint-stamp-padding-x
+);

package/scss/citation/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-citation--styles() {
+    @include import-once( "citation" ) {
+        @include core-styles();
+        @include kendo-citation--layout();
+        @include kendo-citation--theme();
+    }
+}

package/scss/citation/_layout.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/citation/_layout.scss" as *;
+
+@mixin kendo-citation--layout() {
+    @include kendo-citation--layout-base();
+}

package/scss/citation/_theme.scss

@@ -0,0 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/citation/_theme.scss" as *;
+
+@mixin kendo-citation--theme() {
+    @include kendo-citation--theme-base();
+}

package/scss/citation/_variables.scss

@@ -0,0 +1,15 @@
+@use "../core/_index.scss" as *;
+
+// Citation
+
+/// The padding of the CitationPopover view.
+/// @group citation
+$kendo-citation-popover-view-padding: var( --kendo-citation-popover-view-padding, k-spacing(4) ) !default;
+/// The text color of the CitationPopover page indicator.
+/// @group citation
+$kendo-citation-pages-color: var( --kendo-citation-pages-color, k-color(subtle) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/citation/_variables.scss" with (
+    $kendo-citation-popover-view-padding: $kendo-citation-popover-view-padding,
+    $kendo-citation-pages-color: $kendo-citation-pages-color
+);

package/scss/color-preview/_layout.scss

@@ -9,7 +9,7 @@
     .k-icon-color-preview {
 
         .k-color-preview-mask {
-            width: $kendo-icon-size;
+            width: $ki-icon-size;
             height: 3px;
         }
     }

package/scss/drawer/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 
 /// The background color of the Drawer.
@@ -86,7 +87,7 @@ $kendo-drawer-icon-padding-y: var( --kendo-drawer-icon-padding-y, k-spacing(1) )
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + 2 * #{$kendo-drawer-items-padding-x} + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + 2 * #{$kendo-drawer-items-padding-x} + #{$kendo-icon-size} ) !default;
 
 /// The border width of the Drawer item ripple.
 /// @group drawer

package/scss/filemanager/_variables.scss

@@ -164,6 +164,10 @@ $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
 /// The gap between the columns in the FileManager preview.
 /// @group file-manager
 $kendo-file-manager-preview-column-gap: var( --kendo-file-manager-preview-column-gap, #{k-spacing(1)} ) !default;
+
+/// The icon spacing in FileManager items.
+/// @group file-manager
+$kendo-file-manager-icon-spacing: var( --kendo-file-manager-icon-spacing, #{k-spacing(2)} ) !default;
 /// The background color of the FileManager preview.
 /// @group file-manager
 $kendo-file-manager-preview-bg: var( --kendo-file-manager-preview-bg, transparent ) !default;
@@ -230,6 +234,7 @@ $kendo-file-manager-preview-icon-border: var( --kendo-file-manager-preview-icon-
     $kendo-file-manager-preview-border-width: $kendo-file-manager-preview-border-width,
     $kendo-file-manager-preview-spacing: $kendo-file-manager-preview-spacing,
     $kendo-file-manager-preview-column-gap: $kendo-file-manager-preview-column-gap,
+    $kendo-file-manager-icon-spacing: $kendo-file-manager-icon-spacing,
     $kendo-file-manager-preview-bg: $kendo-file-manager-preview-bg,
     $kendo-file-manager-preview-text: $kendo-file-manager-preview-text,
     $kendo-file-manager-preview-border: $kendo-file-manager-preview-border,

package/scss/grid/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../chip/_variables.scss" as *;
 @use "../forms/_variables.scss" as *;
@@ -145,7 +146,7 @@
         }
 
         .k-sort-order {
-            height: var( --kendo-icon-size, 1rem );
+            height: $ki-icon-size;
             font-size: $kendo-grid-sort-index-font-size;
             margin-inline-start: $kendo-grid-sort-index-spacing-x;
         }

package/scss/grid/_variables.scss

@@ -245,7 +245,7 @@ $kendo-grid-header-font-size: var( --kendo-grid-header-font-size, inherit ) !def
 $kendo-grid-header-font-weight: var( --kendo-grid-header-font-weight, var(--kendo-font-weight-normal) ) !default;
 /// The menu spacing of the Grid header.
 /// @group grid
-$kendo-grid-header-menu-spacing: var( --kendo-grid-header-menu-spacing, var(--kendo-icon-spacing, .5rem) ) !default;
+$kendo-grid-header-menu-spacing: var( --kendo-grid-header-menu-spacing, #{$kendo-icon-spacing} ) !default;
 /// The border width of the first cell in the Grid header.
 /// @group grid
 $kendo-grid-header-first-border-width: var( --kendo-grid-header-first-border-width, #{$kendo-grid-border-width} ) !default;
@@ -356,7 +356,7 @@ $kendo-grid-sort-index-font-size: var( --kendo-grid-sort-index-font-size, var(--
 $kendo-grid-sort-index-spacing-x: var( --kendo-grid-sort-index-spacing-x, #{k-spacing(0.5)} ) !default;
 /// The spacing of the Grid sort icon.
 /// @group grid
-$kendo-grid-sort-icon-spacing: var( --kendo-grid-sort-icon-spacing, var(--kendo-icon-lg-spacing, .5rem) ) !default;
+$kendo-grid-sort-icon-spacing: var( --kendo-grid-sort-icon-spacing, #{$kendo-icon-spacing} ) !default;
 /// The text color of the Grid sort indicator.
 /// @group grid
 $kendo-grid-sort-indicator-text: var( --kendo-grid-sort-indicator-text, k-color(on-app-surface) ) !default;
@@ -443,6 +443,10 @@ $kendo-grid-column-menu-max-width: var( --kendo-grid-column-menu-max-width, 320p
 /// The spacing of the Grid column menu.
 /// @group grid
 $kendo-grid-column-menu-spacing: var( --kendo-grid-column-menu-spacing, #{k-spacing(2)} ) !default;
+
+/// The spacing between icon and text in Grid column menu items.
+/// @group grid
+$kendo-grid-column-menu-icon-spacing: var( --kendo-grid-column-menu-icon-spacing, #{k-spacing(2)} ) !default;
 /// The focus shadow of the Grid column menu.
 /// @group grid
 $kendo-grid-column-menu-shadow: var( --kendo-grid-column-menu-shadow, k-elevation(4) ) !default;
@@ -538,10 +542,10 @@ $kendo-grid-column-menu-tabbed-bg: var( --kendo-grid-column-menu-tabbed-bg, k-co
 
 /// The default width of the Grid drag cell.
 /// @group grid
-$kendo-grid-drag-cell-width: var( --kendo-grid-drag-cell-width, calc( var( --kendo-icon-size, 1rem ) * 2.25 ) ) !default;
+$kendo-grid-drag-cell-width: var( --kendo-grid-drag-cell-width, calc( #{$kendo-icon-size} * 2.25 ) ) !default;
 /// The default width of the Grid hierarchy cell.
 /// @group grid
-$kendo-grid-hierarchy-col-width: var( --kendo-grid-hierarchy-col-width, calc( var( --kendo-icon-size, 1rem ) * 2 ) ) !default;
+$kendo-grid-hierarchy-col-width: var( --kendo-grid-hierarchy-col-width, calc( #{$kendo-icon-size} * 2 ) ) !default;
 
 /// The background color of the Grid row resize indicator.
 /// @group grid
@@ -650,6 +654,7 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-semibold) !defaul
     $kendo-grid-header-font-size: $kendo-grid-header-font-size,
     $kendo-grid-header-first-border: $kendo-grid-header-first-border-width,
     $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-spacing,
+    $kendo-grid-column-menu-icon-spacing: $kendo-grid-column-menu-icon-spacing,
     $kendo-grid-toolbar-border-width: $kendo-grid-toolbar-border-width,
     $kendo-grid-bg: $kendo-grid-bg,
     $kendo-grid-text: $kendo-grid-text,

package/scss/icons/_variables.scss

@@ -9,27 +9,6 @@ $kendo-icon-default-size: "md" !default;
 /// The default size of the Icons.
 /// @group icon
 $kendo-icon-size: 1rem !default;
-/// The xs size of the Icon.
-/// @group icon
-$kendo-icon-size-xs: calc( var( --kendo-icon-size, 1rem ) * .75 ) !default;
-/// The sm size of the Icon.
-/// @group icon
-$kendo-icon-size-sm: calc( var( --kendo-icon-size-sm, 1rem ) * .875 ) !default;
-/// The md size of the Icon.
-/// @group icon
-$kendo-icon-size-md: 1rem !default;
-/// The lg size of the Icon.
-/// @group icon
-$kendo-icon-size-lg: calc( var( --kendo-icon-size-lg, 1rem ) * 1.25 ) !default;
-/// The xl size of the Icon.
-/// @group icon
-$kendo-icon-size-xl: calc( var( --kendo-icon-size, 1rem ) * 1.5 ) !default;
-/// The xxl size of the Icon.
-/// @group icon
-$kendo-icon-size-xxl: calc( var( --kendo-icon-size-xxl, 1rem ) * 2 ) !default;
-/// The xxxl size of the Icon.
-/// @group icon
-$kendo-icon-size-xxxl: calc( var( --kendo-icon-size-xxxl, 1rem ) * 3 ) !default;
 
 /// The spacing around the Icons.
 /// @group icon
@@ -48,28 +27,8 @@ $kendo-action-icon-color: var( --kendo-action-icon-color, #{k-color( primary-on-
 @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
     $kendo-icon-default-size: $kendo-icon-default-size,
     $kendo-icon-size: $kendo-icon-size,
-    $kendo-icon-size-xs: $kendo-icon-size-xs,
-    $kendo-icon-size-sm: $kendo-icon-size-sm,
-    $kendo-icon-size-md: $kendo-icon-size-md,
-    $kendo-icon-size-lg: $kendo-icon-size-lg,
-    $kendo-icon-size-xl: $kendo-icon-size-xl,
-    $kendo-icon-size-xxl: $kendo-icon-size-xxl,
-    $kendo-icon-size-xxxl: $kendo-icon-size-xxxl,
     $kendo-icon-spacing: $kendo-icon-spacing,
     $kendo-icon-padding: $kendo-icon-padding,
     $kendo-accent-icon-color: $kendo-accent-icon-color,
     $kendo-action-icon-color: $kendo-action-icon-color
 );
-
-:root {
-    --kendo-icon-size: var( --kendo-icon-size, 1rem );
-    --kendo-icon-size-xs: #{$kendo-icon-size-xs};
-    --kendo-icon-size-sm: #{$kendo-icon-size-sm};
-    --kendo-icon-size-md: #{$kendo-icon-size-md};
-    --kendo-icon-size-lg: #{$kendo-icon-size-lg};
-    --kendo-icon-size-xl: #{$kendo-icon-size-xl};
-    --kendo-icon-size-xxl: #{$kendo-icon-size-xxl};
-    --kendo-icon-size-xxxl: #{$kendo-icon-size-xxxl};
-    --kendo-icon-spacing: #{$kendo-icon-spacing};
-    --kendo-icon-padding: #{$kendo-icon-padding};
-}

package/scss/index.scss

@@ -109,6 +109,9 @@
 @forward "./file-box/_index.scss";
 @forward "./prompt-box/_index.scss";
 @forward "./chat/_index.scss";
+@forward "./agent-response/_index.scss";
+@forward "./citation/_index.scss";
+@forward "./checkpoint/_index.scss";
 @forward "./mediaplayer/_index.scss";
 @forward "./timeline/_index.scss";
 @forward "./pdf-viewer/_index.scss";
@@ -284,6 +287,9 @@
 // Misc
 @use "./file-box/index.scss" as *;
 @use "./chat/index.scss" as *;
+@use "./agent-response/index.scss" as *;
+@use "./citation/index.scss" as *;
+@use "./checkpoint/index.scss" as *;
 @use "./mediaplayer/index.scss" as *;
 @use "./timeline/index.scss" as *;
 @use "./pdf-viewer/index.scss" as *;
@@ -462,6 +468,9 @@
     // Misc
     @include kendo-file-box--styles();
     @include kendo-chat--styles();
+    @include kendo-agent-response--styles();
+    @include kendo-citation--styles();
+    @include kendo-checkpoint--styles();
     @include kendo-media-player--styles();
     @include kendo-timeline--styles();
     @include kendo-pdf-viewer--styles();

package/scss/input/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss"as *;
 
 /// The default fill mode of the Input.
@@ -441,7 +442,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-md-padding-y} * 2 ) ),
+        icon-size: calc( #{$kendo-icon-size} + calc( #{$kendo-input-md-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-sm-padding-y,
         button-padding-y: $kendo-input-sm-padding-y,
         button-width: $kendo-input-sm-button-width
@@ -451,7 +452,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-sm-padding-y} * 2 ) ),
+        icon-size: calc( #{$kendo-icon-size} + calc( #{$kendo-input-sm-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-md-padding-y,
         button-padding-y: $kendo-input-md-padding-y,
         button-width: $kendo-input-md-button-width
@@ -461,7 +462,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-lg-padding-y,
         font-size: $kendo-input-lg-font-size,
         line-height: $kendo-input-lg-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + calc( #{$kendo-input-lg-padding-y} * 2 ) ),
+        icon-size: calc( #{$kendo-icon-size} + calc( #{$kendo-input-lg-padding-y} * 2 ) ),
         button-padding-x: $kendo-input-lg-padding-y,
         button-padding-y: $kendo-input-lg-padding-y,
         button-width: $kendo-input-lg-button-width

package/scss/map/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 
@@ -41,7 +42,7 @@ $kendo-map-navigator-margin-y: var( --kendo-map-navigator-margin-y, k-spacing(4)
 $kendo-map-navigator-padding: var( --kendo-map-navigator-padding, k-spacing(0.5) ) !default;
 /// The width of the Map navigator.
 /// @group map
-$kendo-map-navigator-width: var( --kendo-map-navigator-width, calc( var( --kendo-icon-size, 1rem) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) ) !default;
+$kendo-map-navigator-width: var( --kendo-map-navigator-width, calc( #{$kendo-icon-size} * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) ) !default;
 /// The border width of the Map navigator.
 /// @group map
 $kendo-map-navigator-border-width: var( --kendo-map-navigator-border-width, 1px ) !default;

package/scss/menu/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../list/_variables.scss"as *;
 @use "../popup/_variables.scss"as *;
 
@@ -50,7 +51,11 @@ $kendo-menu-item-padding-y: var( --kendo-menu-item-padding-y, #{k-spacing(3)} )
 $kendo-menu-item-spacing: var( --kendo-menu-item-spacing, #{k-spacing(0)} ) !default;
 /// The spacing between the Menu item text and icons.
 /// @group menu
-$kendo-menu-item-icon-spacing: var( --kendo-menu-item-icon-spacing, var( --kendo-icon-spacing, .5rem ) ) !default;
+$kendo-menu-item-icon-spacing: var( --kendo-menu-item-icon-spacing, #{$kendo-icon-spacing} ) !default;
+
+/// The spacing used for the menu expand arrow negative offset.
+/// @group menu
+$kendo-menu-expand-arrow-spacing: var( --kendo-menu-expand-arrow-spacing, #{k-spacing(2)} ) !default;
 
 /// The font weight of the selected Menu item.
 /// @group menu
@@ -191,13 +196,13 @@ $kendo-menu-popup-md-item-padding-y: var( --kendo-menu-popup-md-item-padding-y,
 $kendo-menu-popup-lg-item-padding-y: var( --kendo-menu-popup-lg-item-padding-y, #{$kendo-list-lg-item-padding-y} ) !default;
 /// The end padding of the small Menu popup item.
 /// @group menu
-$kendo-menu-popup-sm-item-padding-end: calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-sm-item-padding-end: calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + #{$kendo-icon-size} ) !default;
 /// The end padding of the medium Menu popup item.
 /// @group menu
-$kendo-menu-popup-md-item-padding-end: calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-md-item-padding-end: calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + #{$kendo-icon-size} ) !default;
 /// The end padding of the large Menu popup item.
 /// @group menu
-$kendo-menu-popup-lg-item-padding-end: calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-menu-popup-lg-item-padding-end: calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + #{$kendo-icon-size} ) !default;
 
 /// The start margin of the small Menu popup item expand icon.
 /// @group menu
@@ -210,13 +215,13 @@ $kendo-menu-popup-item-icon-md-margin-start: k-spacing(0) !default;
 $kendo-menu-popup-lg-item-icon-margin-start: k-spacing(0) !default;
 /// The end margin of the small Menu popup item expand icon.
 /// @group menu
-$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
+$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-icon-size} + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
 /// The end margin of the medium Menu popup item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-md-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-md-item-padding-x}) ) !default;
+$kendo-menu-popup-item-icon-md-margin-end: calc( -1 * (#{$kendo-icon-size} + #{$kendo-menu-popup-md-item-padding-x}) ) !default;
 /// The end margin of the large Menu popup item expand icon.
 /// @group menu
-$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-lg-item-padding-x}) ) !default;
+$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-icon-size} + #{$kendo-menu-popup-lg-item-padding-x}) ) !default;
 
 /// The spacing between the Menu items in popup.
 /// @group menu
@@ -285,6 +290,7 @@ $kendo-menu-icon-color: var( --kendo-menu-icon-color, #{k-color(primary)} ) !def
     $kendo-menu-item-padding-y: $kendo-menu-item-padding-y,
     $kendo-menu-item-spacing: $kendo-menu-item-spacing,
     $kendo-menu-item-icon-spacing: $kendo-menu-item-icon-spacing,
+    $kendo-menu-expand-arrow-spacing: $kendo-menu-expand-arrow-spacing,
     $kendo-menu-item-selected-font-weight: $kendo-menu-item-selected-font-weight,
     $kendo-menu-item-bg: $kendo-menu-item-bg,
     $kendo-menu-item-text: $kendo-menu-item-text,

package/scss/panelbar/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../list/_variables.scss" as *;
 
 /// The font family of the PanelBar.
@@ -31,7 +32,7 @@ $kendo-panelbar-icon-spacing: var( --kendo-panelbar-icon-spacing, #{k-spacing(2.
 
 /// The horizontal start padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x-start: var( --kendo-panelbar-header-padding-x-start, calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) ) !default;
+$kendo-panelbar-header-padding-x-start: var( --kendo-panelbar-header-padding-x-start, calc( #{$kendo-panelbar-icon-spacing} * 2 + #{$kendo-icon-size} ) ) !default;
 
 /// The horizontal end padding of the PanelBar header.
 /// @group panelbar
@@ -42,7 +43,7 @@ $kendo-panelbar-header-padding-y: var( --kendo-panelbar-header-padding-y, #{k-sp
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + var( --kendo-icon-size, 1rem ) ) !default;
+$kendo-panelbar-item-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2 + #{$kendo-icon-size} ) !default;
 
 /// The horizontal end padding of the PanelBar items.
 /// @group panelbar
@@ -51,6 +52,10 @@ $kendo-panelbar-item-padding-x-end: var( --kendo-panelbar-item-padding-x-end, #{
 /// @group panelbar
 $kendo-panelbar-item-padding-y: var( --kendo-panelbar-item-padding-y, #{k-spacing(2.5)} ) !default;
 
+/// The spacing between icon and text in PanelBar items.
+/// @group panelbar
+$kendo-panelbar-item-icon-spacing: var( --kendo-panelbar-item-icon-spacing, #{k-spacing(2)} ) !default;
+
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-level-count: 4 !default;
@@ -241,6 +246,7 @@ $kendo-panelbar-item-selected-hover-focus-border: var( --kendo-panelbar-item-sel
     $kendo-panelbar-item-border-style: $kendo-panelbar-item-border-style,
     $kendo-panelbar-header-padding-y: $kendo-panelbar-header-padding-y,
     $kendo-panelbar-item-padding-y: $kendo-panelbar-item-padding-y,
+    $kendo-panelbar-item-icon-spacing: $kendo-panelbar-item-icon-spacing,
     $kendo-panelbar-item-level-count: $kendo-panelbar-item-level-count,
     $kendo-panelbar-bg: $kendo-panelbar-bg,
     $kendo-panelbar-text: $kendo-panelbar-text,