@progress/kendo-theme-core 14.4.1-dev.0 → 14.4.1-dev.1

package/scss/components/agent-response/_layout.scss

@@ -3,23 +3,15 @@
 
 @mixin kendo-agent-response--layout-base() {
     // Agent Step
-    .k-agent-step {
-        .k-card {
-            box-shadow: none;
-        }
-    }
-
     .k-agent-step-icon {
         align-self: start;
         margin-top: $kendo-agent-step-icon-margin-top;
         aspect-ratio: 1;
     }
 
-    // Typography — label, secondary/meta text, and diffstat all share the small font size.
     .k-agent-step-label,
     .k-agent-step-sep,
     .k-agent-step-secondary,
-    .k-agent-step-time,
     .k-agent-step-added,
     .k-agent-step-removed {
         font-size: $kendo-agent-step-font-size;
@@ -30,8 +22,8 @@
         gap: k-spacing(1);
     }
 
-    // Head — a reset <button> housing the icon column and the content row.
     .k-agent-step-head {
+        cursor: pointer;
         padding-inline: 0;
         padding-block: $kendo-agent-step-padding-y;
         display: flex;
@@ -60,8 +52,6 @@
         font-weight: var(--kendo-font-weight-medium);
     }
 
-    // Body — expanded content indented under the head, with vertical spacing
-    // between stacked steps and a connector line linking them.
     .k-agent-step-body {
         width: 100%;
         display: flex;
@@ -69,15 +59,27 @@
         font-size: $kendo-agent-step-body-font-size;
     }
 
+    // Reasoning Specific Styles
     .k-reasoning {
     }
 
+    // Tool Call Specific Styles
     .k-tool-call .k-agent-step-body {
         padding-inline-start: $kendo-tool-call-indent;
         padding-block-end: $kendo-tool-call-padding-y;
         gap: k-spacing(2);
+
+        .k-card {
+            box-shadow: none;
+        }
+
+        .k-pre {
+            margin: 0;
+            border-radius: $kendo-tool-call-pre-border-radius;
+        }
     }
 
+    // Chain of Thought Specific Styles
     .k-chain-of-thought {
         .k-agent-step-body {
             padding-block: k-spacing(2);

package/scss/components/agent-response/_theme.scss

@@ -12,8 +12,7 @@
         }
 
         .k-agent-step-sep,
-        .k-agent-step-secondary,
-        .k-agent-step-time {
+        .k-agent-step-secondary {
             color: k-color("subtle");
         }
 
@@ -40,8 +39,7 @@
         .k-agent-step-label,
         .k-agent-step-expand,
         .k-agent-step-sep,
-        .k-agent-step-secondary,
-        .k-agent-step-time {
+        .k-agent-step-secondary {
             color: k-color("on-app-surface");
         }
     }
@@ -51,17 +49,20 @@
         @include text-shimmer();
     }
 
-    .k-thought .k-agent-step-icon-col::after {
-        background: $kendo-thought-connector-color;
-    }
-
+    // Reasoning Specific Styles
     .k-reasoning {
     }
 
-    .k-tool-call .k-agent-step-body {
+    // Tool Call Specific Styles
+    .k-tool-call-label {
         color: k-color("subtle");
     }
 
+    // Chain of Thought Specific Styles
     .k-chain-of-thought {
     }
+
+    .k-thought .k-agent-step-icon-col::after {
+        background: $kendo-thought-connector-color;
+    }
 }

package/scss/components/agent-response/_variables.scss

@@ -41,3 +41,6 @@ $kendo-tool-call-indent: null !default;
 /// The bottom padding of the ToolCall body.
 /// @group agent-response
 $kendo-tool-call-padding-y: null !default;
+/// The border radius of the pre element in the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-pre-border-radius: null !default;

package/scss/components/citation/_layout.scss

@@ -20,6 +20,7 @@
     }
 
     .k-citation-popover-view {
+        width: 100%;
         flex: 0 0 100%;
         box-sizing: border-box;
         padding: $kendo-citation-popover-view-padding;
@@ -30,4 +31,34 @@
     :is([dir="rtl"], .k-rtl) .k-citation-popover-view {
         transform: translateX(calc(100% * (var(--kendo-citation-popover-view-current, 1) - 1)));
     }
+
+    .k-citation-popover-view-title {
+        font-weight: $kendo-citation-popover-view-title-font-weight;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .k-citation-popover-view-body {
+        max-height: 108px;
+        overflow: auto;
+        display: block;
+        font-size: $kendo-citation-popover-view-body-font-size;
+        margin-top: $kendo-citation-popover-view-body-margin-top;
+    }
+
+    .k-citation-popover-view-source {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        gap: $kendo-citation-popover-view-source-gap;
+        font-size: $kendo-citation-popover-view-source-font-size;
+        margin-top: $kendo-citation-popover-view-source-margin-top;
+
+        .k-icon {
+            aspect-ratio: 1;
+        }
+    }
 }

package/scss/components/citation/_theme.scss

@@ -7,4 +7,12 @@
             color: $kendo-citation-pages-color;
         }
     }
+
+    .k-citation-popover-view-body {
+        color: $kendo-citation-popover-view-body-color;
+    }
+
+    .k-citation-popover-view-source {
+        color: k-color(info-on-surface);
+    }
 }

package/scss/components/citation/_variables.scss

@@ -6,3 +6,24 @@ $kendo-citation-popover-view-padding: null !default;
 /// The text color of the CitationPopover page indicator.
 /// @group citation
 $kendo-citation-pages-color: null !default;
+/// The font weight of the CitationPopoverView title.
+/// @group citation
+$kendo-citation-popover-view-title-font-weight: null !default;
+/// The font size of the CitationPopoverView body text.
+/// @group citation
+$kendo-citation-popover-view-body-font-size: null !default;
+/// The top margin of the CitationPopoverView body text.
+/// @group citation
+$kendo-citation-popover-view-body-margin-top: null !default;
+/// The text color of the CitationPopoverView body text.
+/// @group citation
+$kendo-citation-popover-view-body-color: null !default;
+/// The font size of the CitationPopoverView source link.
+/// @group citation
+$kendo-citation-popover-view-source-font-size: null !default;
+/// The top margin of the CitationPopoverView source link.
+/// @group citation
+$kendo-citation-popover-view-source-margin-top: null !default;
+/// The gap between the icon and text of the CitationPopoverView source link.
+/// @group citation
+$kendo-citation-popover-view-source-gap: null !default;

package/scss/components/forms/_layout.scss

@@ -197,6 +197,7 @@
         .k-form-field-wrap {
             max-width: $kendo-horizontal-form-field-wrap-max-width;
             flex: 1 1 auto;
+            align-content: center;
         }
     }