@progress/kendo-themes-html 5.6.1-dev.0 → 5.6.1-dev.3

package/src/scheduler/tests/scheduler-jquery-agenda.tsx

@@ -24,11 +24,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/10/2013 - 6/14/2013</span>
-                        <span className="k-lg-date-format">Monday, June 10, 2013 - Friday, June 14, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 10, 2013 - Friday, June 14, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-jquery-month.tsx

@@ -39,11 +39,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a role="button" href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format" data-bind="text: formattedShortDate">June, 2013</span>
-                        <span className="k-lg-date-format" data-bind="text: formattedDate">June, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        June, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-agenda.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/21/2020 - 6/28/2020</span>
-                        <span className="k-lg-date-format">Sunday, June 21, 2020 - Saturday, June 27, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Sunday, June 21, 2020 - Saturday, June 27, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-day.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-month.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">June 2020</span>
-                        <span className="k-lg-date-format">June 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        June 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

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

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020 - 6/26/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020 - Thursday, June 25, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020 - Thursday, June 25, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

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

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2020</span>
-                        <span className="k-lg-date-format">Wednesday, June 24, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Wednesday, June 24, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler-react-week.tsx

@@ -25,11 +25,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/21/2020 - 6/28/2020</span>
-                        <span className="k-lg-date-format">Sunday, June 21, 2020 - Saturday, June 27, 2020</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Sunday, June 21, 2020 - Saturday, June 27, 2020
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { Button } from '../../button';
-import { Icon } from '../../icon';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -17,11 +16,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">2021</span>
-                        <span className="k-lg-date-format">2021</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        2021
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/scheduler/tests/scheduler.tsx

@@ -17,11 +17,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/10/2013 - 6/14/2013</span>
-                        <span className="k-lg-date-format">Monday, June 10, 2013 - Friday, June 14, 2013</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 10, 2013 - Friday, June 14, 2013
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">
@@ -223,14 +221,14 @@ root.render(
                                                 <td className="k-nonwork-hour"></td>
                                                 <td className="k-nonwork-hour"></td>
                                                 <td className="k-nonwork-hour"></td>
-                                                <td className="k-nonwork-hour k-state-selected"></td>
+                                                <td className="k-nonwork-hour k-selected"></td>
                                             </tr>
                                             <tr className="k-middle-row">
                                                 <td></td>
                                                 <td></td>
                                                 <td></td>
                                                 <td></td>
-                                                <td className="k-state-selected"></td>
+                                                <td className="k-selected"></td>
                                             </tr>
                                             <tr>
                                                 <td></td>
@@ -475,7 +473,7 @@ root.render(
                                         <span className="k-resize-handle k-resize-n"></span>
                                         <span className="k-resize-handle k-resize-s"></span>
                                     </div>
-                                    <div style={{ top: "36px", height: "108px", width: "166px", left: "348px" }} className="k-event k-state-hover k-event-ongoing">
+                                    <div style={{ top: "36px", height: "108px", width: "166px", left: "348px" }} className="k-event k-hover k-event-ongoing">
                                         <span className="k-event-actions">
                                             <Icon name="reload"></Icon>
                                         </span>
@@ -489,7 +487,7 @@ root.render(
                                         <span className="k-resize-handle k-resize-n"></span>
                                         <span className="k-resize-handle k-resize-s"></span>
                                     </div>
-                                    <div style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} className="k-event k-state-selected k-event-ongoing">
+                                    <div style={{ top: "110px", height: "71px", width: "166px", left: "520px" }} className="k-event k-selected k-event-ongoing">
                                         <span className="k-event-actions"></span>
                                         <div>
                                             <div className="k-event-template k-event-time">8:30 AM - 9:30 AM</div>
@@ -571,11 +569,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">2/18/2019</span>
-                        <span className="k-lg-date-format">Monday, February 18, 2019</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, February 18, 2019
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">

package/src/splitter/tests/splitter.tsx

@@ -35,29 +35,45 @@ root.render(
                         <div style={{ flexBasis: "10px", order: "10" }} className="k-pane-static k-pane">
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "1" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
                             <Icon />
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "3" }}>
                             <Icon />
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "5" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-state-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                         <div className="k-splitbar k-state-focused k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
-                            <Icon className="k-collapse-prev" name="arrow-w"></Icon>
+                            <div className="k-collapse-prev">
+                                <Icon name="arrow-w"></Icon>
+                            </div>
                             <div className="k-resize-handle"></div>
-                            <Icon className="k-collapse-next" name="arrow-e"></Icon>
+                            <div className="k-collapse-next">
+                                <Icon name="arrow-e"></Icon>
+                            </div>
                         </div>
                     </div>
                 </div>

package/src/stepper/tests/stepper-horizontal-rtl.tsx

@@ -46,7 +46,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -88,7 +88,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-error" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-step-error" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -131,7 +131,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="user"></Icon>
@@ -172,7 +172,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="user"></Icon>
@@ -214,7 +214,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>

package/src/stepper/tests/stepper-states.tsx

@@ -33,7 +33,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -74,7 +74,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -115,7 +115,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>
@@ -145,21 +145,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-optional k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-step-optional k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -183,7 +183,7 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
@@ -193,7 +193,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -203,7 +203,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -227,21 +227,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Account Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-hover" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-hover" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Payment Details</span>
@@ -262,21 +262,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-optional k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-step-optional k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -300,7 +300,7 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
@@ -310,7 +310,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -320,7 +320,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -344,21 +344,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Account Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Payment Details</span>
@@ -381,21 +381,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-optional k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-step-optional k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -419,7 +419,7 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="check"></Icon>
@@ -429,7 +429,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -439,7 +439,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">3</span>
@@ -463,21 +463,21 @@ root.render(
             <section className="col-4">
                 <nav className="k-stepper k-widget" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
                     <ol className="k-step-list k-step-list-horizontal" style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
-                        <li className="k-step k-step-first k-step-done k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-first k-step-done k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Account Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-last k-step-disabled" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-last k-disabled" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Payment Details</span>