@progress/kendo-themes-html 14.4.1-dev.1 → 14.4.1-dev.2

package/dist/types/agent-response/agent-step.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { KendoComponent } from "../_types/component";
 export declare const AGENT_STEP_CLASSNAME = "k-agent-step";
+declare const states: readonly ["focus"];
+export type KendoAgentStepState = {
+    [K in (typeof states)[number]]?: boolean;
+};
 export type KendoAgentStepProps = {
     /** Icon name for the step type (e.g. "sparkles", "search", "wrench", "code", "file-txt") */
     icon?: string;
@@ -34,9 +38,10 @@ export type KendoAgentStepProps = {
  * @ux {Expand / Collapse} Clicking or activating the step's head via keyboard toggles the body content open and closed.
  * @ux {Hover feedback} Hovering the head highlights it with the app-surface background and normalizes all text/icon colors to on-app-surface.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  * @ux {Diff stats} Added/removed line counts always render in success/error colors, regardless of hover or completed state.
  */
-export declare const AgentStep: KendoComponent<KendoAgentStepProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const AgentStep: KendoComponent<KendoAgentStepProps & KendoAgentStepState & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * @keyboard {Enter or Space} Triggers the focused step's head, toggling the expanded state when the step is expandable.
  * @keyboard {Tab} Moves focus to the next step's head; each AgentStep head is its own stop in the tab sequence.

package/dist/types/agent-response/chain-of-thought.spec.d.ts

@@ -1,16 +1,18 @@
 import * as React from "react";
-import { KendoAgentStepProps } from "./agent-step";
+import { KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent } from "../_types/component";
 export declare const CHAIN_OF_THOUGHT_CLASSNAME = "k-chain-of-thought";
 export type KendoChainOfThoughtProps = KendoAgentStepProps;
+export type KendoChainOfThoughtState = KendoAgentStepState;
 /**
  * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
  * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
  * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
  * @ux {Expand / Collapse} Clicking or activating the head toggles the nested Thought steps open and closed.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export declare const ChainOfThought: KendoComponent<KendoChainOfThoughtProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const ChainOfThought: KendoComponent<KendoChainOfThoughtProps & KendoChainOfThoughtState & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
  * @keyboard {Tab} Moves focus to the next ChainOfThought head; each instance is its own stop in the tab sequence.

package/dist/types/agent-response/reasoning.spec.d.ts

@@ -1,16 +1,18 @@
 import * as React from "react";
-import { KendoAgentStepProps } from "./agent-step";
+import { KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent } from "../_types/component";
 export declare const REASONING_CLASSNAME = "k-reasoning";
 export type KendoReasoningProps = KendoAgentStepProps;
+export type KendoReasoningState = KendoAgentStepState;
 /**
  * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
  * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
  * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
  * @ux {Expand / Collapse} Clicking or activating the head toggles the reasoning body open and closed.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export declare const Reasoning: KendoComponent<KendoReasoningProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Reasoning: KendoComponent<KendoReasoningProps & KendoReasoningState & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
  * @keyboard {Tab} Moves focus to the next Reasoning head; each instance is its own stop in the tab sequence.

package/dist/types/agent-response/tool-call.spec.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-import { KendoAgentStepProps } from "./agent-step";
+import { KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent } from "../_types/component";
 export declare const TOOL_CALL_CLASSNAME = "k-tool-call";
 export type KendoToolCallProps = KendoAgentStepProps;
+export type KendoToolCallState = KendoAgentStepState;
 /**
  * @aria {role="button"} The role is implicit from the native <button> element used for the step's head.
  * @aria {aria-expanded="true"|"false"} Rendered on the head only when the step is expandable, indicating whether its body is currently shown.
@@ -10,8 +11,9 @@ export type KendoToolCallProps = KendoAgentStepProps;
  * @ux {Expand / Collapse} Clicking or activating the head toggles the tool call body (parameters, results, approval actions) open and closed.
  * @ux {Status} The optional status Badge reflects the call's outcome (e.g. "Completed", "Awaiting Approval", "Error").
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export declare const ToolCall: KendoComponent<KendoToolCallProps & React.HTMLAttributes<HTMLDivElement>>;
+export declare const ToolCall: KendoComponent<KendoToolCallProps & KendoToolCallState & React.HTMLAttributes<HTMLDivElement>>;
 /**
  * @keyboard {Enter or Space} Triggers the focused head, toggling the expanded state when expandable.
  * @keyboard {Tab} Moves focus to the next ToolCall head; each instance is its own stop in the tab sequence.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "14.4.1-dev.1",
+  "version": "14.4.1-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [

package/src/agent-response/agent-step.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { classNames } from "../misc";
+import { classNames, stateClassNames, States } from "../misc";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
 import { KendoComponent, KendoBaseProps } from "../_types/component";
@@ -7,9 +7,14 @@ import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./consta
 
 export const AGENT_STEP_CLASSNAME = "k-agent-step";
 
-const states = [] as const;
+const states = [
+  States.focus
+] as const;
+
 const options = {};
 
+export type KendoAgentStepState = { [K in (typeof states)[number]]?: boolean };
+
 export type KendoAgentStepProps = {
   /** Icon name for the step type (e.g. "sparkles", "search", "wrench", "code", "file-txt") */
   icon?: string;
@@ -50,10 +55,11 @@ const defaultOptions = {
  * @ux {Expand / Collapse} Clicking or activating the step's head via keyboard toggles the body content open and closed.
  * @ux {Hover feedback} Hovering the head highlights it with the app-surface background and normalizes all text/icon colors to on-app-surface.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  * @ux {Diff stats} Added/removed line counts always render in success/error colors, regardless of hover or completed state.
  */
-export const AgentStep: KendoComponent<KendoAgentStepProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoAgentStepProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
-  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, status, statusThemeColor = "success", statusIcon, expandable = defaultOptions.expandable, expanded = defaultOptions.expanded, completed = defaultOptions.completed, className, children, ...other } = props;
+export const AgentStep: KendoComponent<KendoAgentStepProps & KendoAgentStepState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoAgentStepProps & KendoAgentStepState & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, status, statusThemeColor = "success", statusIcon, expandable = defaultOptions.expandable, expanded = defaultOptions.expanded, completed = defaultOptions.completed, focus, className, children, ...other } = props;
 
   return (
     <div
@@ -62,7 +68,7 @@ export const AgentStep: KendoComponent<KendoAgentStepProps & React.HTMLAttribute
         "k-agent-completed": completed,
       })}
     >
-      <button className="k-agent-step-head" aria-expanded={expandable ? expanded : undefined}>
+      <button className={classNames("k-agent-step-head", stateClassNames(AGENT_STEP_CLASSNAME, { focus }))} aria-expanded={expandable ? expanded : undefined}>
         {icon && <Icon icon={icon} size="small" className="k-agent-step-icon" />}
         <span className="k-agent-step-content">
           {label && <span className={classNames("k-agent-step-label", labelClassName)}>{label}</span>}

package/src/agent-response/chain-of-thought.spec.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
-import { classNames } from "../misc";
-import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { classNames, States } from "../misc";
+import { AgentStep, KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent, KendoBaseProps } from "../_types/component";
 import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
 
 export const CHAIN_OF_THOUGHT_CLASSNAME = "k-chain-of-thought";
 
-const states = [] as const;
+const states = [
+  States.focus
+] as const;
+
 const options = {};
 
 export type KendoChainOfThoughtProps = KendoAgentStepProps;
+export type KendoChainOfThoughtState = KendoAgentStepState;
 
 const defaultOptions = {
   icon: "sparkles",
@@ -21,8 +25,9 @@ const defaultOptions = {
  * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
  * @ux {Expand / Collapse} Clicking or activating the head toggles the nested Thought steps open and closed.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export const ChainOfThought: KendoComponent<KendoChainOfThoughtProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoChainOfThoughtProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+export const ChainOfThought: KendoComponent<KendoChainOfThoughtProps & KendoChainOfThoughtState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoChainOfThoughtProps & KendoChainOfThoughtState & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
   const { icon = defaultOptions.icon, className, ...other } = props;
 
   return <AgentStep {...other} icon={icon} className={classNames(className, CHAIN_OF_THOUGHT_CLASSNAME)} />;

package/src/agent-response/reasoning.spec.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
-import { classNames } from "../misc";
-import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { classNames, States } from "../misc";
+import { AgentStep, KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent, KendoBaseProps } from "../_types/component";
 import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
 
 export const REASONING_CLASSNAME = "k-reasoning";
 
-const states = [] as const;
+const states = [
+  States.focus
+] as const;
+
 const options = {};
 
 export type KendoReasoningProps = KendoAgentStepProps;
+export type KendoReasoningState = KendoAgentStepState;
 
 const defaultOptions = {
   icon: "sparkles",
@@ -22,8 +26,9 @@ const defaultOptions = {
  * @aria {aria-label|aria-labelledby} Required on the head when it has no visible label/secondaryLabel text.
  * @ux {Expand / Collapse} Clicking or activating the head toggles the reasoning body open and closed.
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export const Reasoning: KendoComponent<KendoReasoningProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoReasoningProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+export const Reasoning: KendoComponent<KendoReasoningProps & KendoReasoningState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoReasoningProps & KendoReasoningState & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
   const { icon = defaultOptions.icon, label = defaultOptions.label, className, ...other } = props;
 
   return <AgentStep {...other} icon={icon} label={label} className={classNames(className, REASONING_CLASSNAME)} />;

package/src/agent-response/templates/tool-call-expanded.tsx

@@ -1,15 +1,10 @@
-import ToolCall from '../tool-call.spec';
-import { Card, CardBody } from '../../card';
+import ToolCall from "../tool-call.spec";
 
 export const ToolCallExpanded = (props: any) => (
-    <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded {...props}>
-        <div>Parameters</div>
-        <Card>
-            <CardBody>
-                <pre style={{ fontSize: '14px', marginTop: '0px' }}>
-                    <code>{`cd packages/html && npx tsc --noEmit -p .`}</code>
-                </pre>
-            </CardBody>
-        </Card>
-    </ToolCall>
+  <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded {...props}>
+    <div>Parameters</div>
+    <pre className="k-pre">
+      <code className="k-code">{`cd packages/html && npx tsc --noEmit -p .`}</code>
+    </pre>
+  </ToolCall>
 );

package/src/agent-response/tests/chain-of-thought.tsx

@@ -41,6 +41,9 @@ export default () => (
           </div>
         </Thought>
       </ChainOfThought>
+
+      {/* focused */}
+      <ChainOfThought label="Thought" secondaryLabel="for 4m 18s" completed expandable focus />
     </section>
   </div>
 );

package/src/agent-response/tests/reasoning.tsx

@@ -16,6 +16,9 @@ export default () => (
         <span>I'll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
         <span>I'll gather local design system context, then create a comprehensive resource component system.</span>
       </Reasoning>
+
+      {/* focused */}
+      <Reasoning secondaryLabel="for 48s" completed label="Completed" expandable focus />
     </section>
   </div>
 );

package/src/agent-response/tests/tool-call.tsx

@@ -48,6 +48,9 @@ export default () => (
         </pre>
         <MessageBox themeColor="error">cd: no such file or directory: packges/hmtl</MessageBox>
       </ToolCall>
+
+      {/* focused */}
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable focus />
     </section>
   </div>
 );

package/src/agent-response/tool-call.spec.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
-import { classNames } from "../misc";
-import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { classNames, States } from "../misc";
+import { AgentStep, KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent, KendoBaseProps } from "../_types/component";
 import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
 
 export const TOOL_CALL_CLASSNAME = "k-tool-call";
 
-const states = [] as const;
+const states = [
+  States.focus
+] as const;
+
 const options = {};
 
 export type KendoToolCallProps = KendoAgentStepProps;
+export type KendoToolCallState = KendoAgentStepState;
 
 const defaultOptions = {
   icon: "wrench",
@@ -22,8 +26,9 @@ const defaultOptions = {
  * @ux {Expand / Collapse} Clicking or activating the head toggles the tool call body (parameters, results, approval actions) open and closed.
  * @ux {Status} The optional status Badge reflects the call's outcome (e.g. "Completed", "Awaiting Approval", "Error").
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export const ToolCall: KendoComponent<KendoToolCallProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoToolCallProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+export const ToolCall: KendoComponent<KendoToolCallProps & KendoToolCallState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoToolCallProps & KendoToolCallState & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
   const { icon = defaultOptions.icon, className, ...other } = props;
 
   return <AgentStep {...other} icon={icon} className={classNames(className, TOOL_CALL_CLASSNAME)} />;

package/src/scheduler/scheduler-toolbar.spec.tsx

@@ -36,12 +36,12 @@ export const SchedulerToolbar: KendoComponent<KendoSchedulerToolbarProps & React
             {props.children ||
                 [
                     <Button key="new-event" themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>,
+                    <Button key="today" fillMode="flat">Today</Button>,
                     <Button key="prev" icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>,
                     <Button key="next" icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>,
                     <Button key="current" icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                         13 June
                     </Button>,
-                    <Button key="today" fillMode="flat">Today</Button>,
                     <span key="spacer" className="k-spacer"></span>,
                     <SegmentedControl thumbStyles={{width: "15%"}} key="views" className="k-scheduler-views">
                         <SegmentedControlButton selected>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-agenda.tsx

@@ -12,6 +12,7 @@ export const SchedulerAgenda = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerAgenda = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     24 June – 25 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "22%", right: "0%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-agenda.tsx

@@ -11,6 +11,7 @@ export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -18,7 +19,6 @@ export const SchedulerFlexAgenda = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     24 June – 25 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "22%", right: "0%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-day.tsx

@@ -11,6 +11,7 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -18,7 +19,6 @@ export const SchedulerFlexDay = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     24 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "15%"}} className="k-scheduler-views">
                     <SegmentedControlButton selected>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-month.tsx

@@ -12,6 +12,7 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerFlexMonth = ({ style, ...props } :any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     February 2026
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "19%", left: "34%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-timeline.tsx

@@ -12,6 +12,7 @@ export const SchedulerFlexTimeline = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerFlexTimeline = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     21 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "23%", left: "54%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-week.tsx

@@ -12,6 +12,7 @@ export const SchedulerFlexWeek = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerFlexWeek = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     31 May – 6 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{ width: "19%", left: "15%" }} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-flex-year.tsx

@@ -13,6 +13,7 @@ export const SchedulerFlexYear = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -20,7 +21,6 @@ export const SchedulerFlexYear = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     2021
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "14%", right: "1px"}}  className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-month.tsx

@@ -12,6 +12,7 @@ export const SchedulerMonth = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerMonth = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     June 2024
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "19%", left: "34%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-timeline.tsx

@@ -12,6 +12,7 @@ export const SchedulerTimeline = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerTimeline = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     13 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{width: "23%", left: "54%"}} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/templates/scheduler-week.tsx

@@ -12,6 +12,7 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
         toolbar={
             <SchedulerToolbar>
                 <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                <Button fillMode="flat">Today</Button>
                 <ButtonGroup fillMode="flat">
                     <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                     <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -19,7 +20,6 @@ export const SchedulerWeek = ({ style, ...props }: any) => (
                 <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                     31 May – 6 June
                 </Button>
-                <Button fillMode="flat">Today</Button>
                 <span className="k-spacer"></span>
                 <SegmentedControl thumbStyles={{ width: "19%", left: "15%" }} className="k-scheduler-views">
                     <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/tests/scheduler-current-time-marker.tsx

@@ -19,6 +19,7 @@ export default () => (
                 toolbar={
                     <SchedulerToolbar>
                         <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                        <Button fillMode="flat">Today</Button>
                         <ButtonGroup fillMode="flat">
                             <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                             <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -26,7 +27,6 @@ export default () => (
                         <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                             10 June – 14 June
                         </Button>
-                        <Button fillMode="flat">Today</Button>
                         <span className="k-spacer"></span>
                         <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
                             <SegmentedControlButton>Day</SegmentedControlButton>
@@ -462,6 +462,7 @@ export default () => (
                     <>
                         <SchedulerToolbar>
                             <Button themeColor="primary" icon="plus" aria-label="Add new event">New Event</Button>
+                            <Button fillMode="flat">Today</Button>
                             <ButtonGroup fillMode="flat">
                                 <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                                 <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -469,7 +470,6 @@ export default () => (
                             <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                                 18 February
                             </Button>
-                            <Button fillMode="flat">Today</Button>
                             <span className="k-spacer"></span>
                             <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
                                 <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/tests/scheduler-events.tsx

@@ -19,6 +19,7 @@ export default () => (
             <Button themeColor="primary" icon="plus" aria-label="Add new event">
               New Event
             </Button>
+            <Button fillMode="flat">Today</Button>
             <ButtonGroup fillMode="flat">
               <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
               <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -26,7 +27,6 @@ export default () => (
             <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
               10 June – 14 June
             </Button>
-            <Button fillMode="flat">Today</Button>
             <span className="k-spacer"></span>
             <SegmentedControl thumbStyles={{ width: "18%", left: "16%" }} className="k-scheduler-views">
               <SegmentedControlButton>Day</SegmentedControlButton>

package/src/scheduler/tests/scheduler-react-timeline-multi.tsx

@@ -21,6 +21,7 @@ export default () => (
               <Button themeColor="primary" icon="plus" aria-label="Add new event">
                 New Event
               </Button>
+              <Button fillMode="flat">Today</Button>
                <ButtonGroup fillMode="flat">
                 <Button icon="chevron-left" fillMode="flat" aria-label="Navigate to previous period"></Button>
                 <Button icon="chevron-right" fillMode="flat" aria-label="Navigate to next period"></Button>
@@ -28,7 +29,6 @@ export default () => (
               <Button icon="calendar" className="k-nav-current" fillMode="flat" aria-live="polite">
                 24 June – 25 June
               </Button>
-              <Button fillMode="flat">Today</Button>
               <span className="k-spacer"></span>
               <SegmentedControl thumbStyles={{ width: "23%", left: "54%" }} className="k-scheduler-views">
                 <SegmentedControlButton>Day</SegmentedControlButton>