@progress/kendo-themes-html 5.6.1-dev.4 → 5.6.1-dev.7

package/src/progressbar/tests/progressbar-blazor.tsx

@@ -25,7 +25,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-start">
                     <span className="k-progress-status">5%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">5%</span>
                     </span>
@@ -35,7 +35,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-start">
                     <span className="k-progress-status">5%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">5%</span>
                     </span>
@@ -47,7 +47,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-center">
                     <span className="k-progress-status">50%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">50%</span>
                     </span>
@@ -57,7 +57,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-center">
                     <span className="k-progress-status">50%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">50%</span>
                     </span>
@@ -69,7 +69,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">95%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">95%</span>
                     </span>
@@ -79,7 +79,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">95%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">95%</span>
                     </span>
@@ -91,7 +91,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-start">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -101,7 +101,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-start">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -113,7 +113,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-center">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -123,7 +123,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-center">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -135,7 +135,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -145,7 +145,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -154,13 +154,13 @@ root.render(
             <span>No Label</span>
             <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ "--kendo-progressbar-progress": "50" } as React.CSSProperties}>
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end"></span>
                 </div>
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal" style={{ "--kendo-progressbar-progress": "50" } as React.CSSProperties}>
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end"></span>
                 </div>
             </div>
@@ -168,13 +168,13 @@ root.render(
             <span>Thin style</span>
             <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: "2px", "--kendo-progressbar-progress": "50" } as React.CSSProperties}>
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end"></span>
                 </div>
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal" style={{ height: "2px", "--kendo-progressbar-progress": "50" } as React.CSSProperties}>
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end"></span>
                 </div>
             </div>
@@ -184,7 +184,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">50%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">50%</span>
                     </span>
@@ -194,7 +194,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">50%</span>
                 </span>
-                <div className="k-state-selected">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">50%</span>
                     </span>

package/src/progressbar/tests/progressbar-horizontal-chunk.tsx

@@ -23,8 +23,8 @@ root.render(
             <span>Chunk</span>
             <div className="k-widget k-progressbar k-progressbar-horizontal">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item k-last" style={{ width: "20%" }} ></li>
@@ -32,8 +32,8 @@ root.render(
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item k-last" style={{ width: "20%" }} ></li>
@@ -43,20 +43,20 @@ root.render(
             <span>Chunk 100%</span>
             <div className="k-widget k-progressbar k-progressbar-horizontal">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
 
@@ -66,8 +66,8 @@ root.render(
                     <li className="k-item k-first" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
@@ -75,28 +75,28 @@ root.render(
                     <li className="k-item k-first" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
                     <li className="k-item" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
 
             <span>Chunk 100% reverse</span>
             <div className="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
             <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ width: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ width: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ width: "20%" }} ></li>
                 </ul>
             </div>
 

package/src/progressbar/tests/progressbar-horizontal-indeterminate.tsx

@@ -46,7 +46,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">75</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "75%", height: "100%" }} >
+                    <div className="k-selected" style={{ width: "75%", height: "100%" }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: "133.333%", height: "100%" }} >
                             <span className="k-progress-status">75</span>
                         </span>
@@ -56,7 +56,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">75</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "75%", height: "100%" }} >
+                    <div className="k-selected" style={{ width: "75%", height: "100%" }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: "133.333%", height: "100%" }} >
                             <span className="k-progress-status">75</span>
                         </span>
@@ -66,11 +66,11 @@ root.render(
                 <span>Chunk Indeterminate</span>
                 <div className="k-widget k-progressbar k-progressbar-horizontal k-progressbar-indeterminate">
                     <ul className="k-reset">
-                        <li className="k-item k-first k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-first k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>
@@ -80,11 +80,11 @@ root.render(
                 </div>
                 <div dir="rtl" className="k-widget k-progressbar k-progressbar-horizontal k-progressbar-indeterminate">
                     <ul className="k-reset">
-                        <li className="k-item k-first k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
-                        <li className="k-item k-state-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-first k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
+                        <li className="k-item k-selected" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>
                         <li className="k-item" style={{ width: "10%" }} ></li>

package/src/progressbar/tests/progressbar-horizontal-reverse.tsx

@@ -40,7 +40,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">95%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "95%" }} >
+                    <div className="k-selected" style={{ width: "95%" }} >
                         <span className="k-progress-status-wrap k-progress-start" style={{ width: "105.263%" }} >
                             <span className="k-progress-status">95%</span>
                         </span>
@@ -50,7 +50,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">95%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "95%" }} >
+                    <div className="k-selected" style={{ width: "95%" }} >
                         <span className="k-progress-status-wrap k-progress-start" style={{ width: "105.263%" }} >
                             <span className="k-progress-status">95%</span>
                         </span>
@@ -62,7 +62,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">50%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "50%" }} >
+                    <div className="k-selected" style={{ width: "50%" }} >
                         <span className="k-progress-status-wrap k-progress-center" style={{ width: "200%" }} >
                             <span className="k-progress-status">50%</span>
                         </span>
@@ -72,7 +72,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">50%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "50%" }} >
+                    <div className="k-selected" style={{ width: "50%" }} >
                         <span className="k-progress-status-wrap k-progress-center" style={{ width: "200%" }} >
                             <span className="k-progress-status">50%</span>
                         </span>
@@ -84,7 +84,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">5%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "5%" }} >
+                    <div className="k-selected" style={{ width: "5%" }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: "2000%" }} >
                             <span className="k-progress-status">5%</span>
                         </span>
@@ -94,7 +94,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">5%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: "5%" }} >
+                    <div className="k-selected" style={{ width: "5%" }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: "2000%" }} >
                             <span className="k-progress-status">5%</span>
                         </span>
@@ -106,7 +106,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-start" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>
@@ -116,7 +116,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-start">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-start" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>
@@ -128,7 +128,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-center" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>
@@ -138,7 +138,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-center">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-center" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>
@@ -150,7 +150,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>
@@ -160,7 +160,7 @@ root.render(
                     <span className="k-progress-status-wrap k-progress-end">
                         <span className="k-progress-status">100%</span>
                     </span>
-                    <div className="k-state-selected" style={{ width: '100%' }} >
+                    <div className="k-selected" style={{ width: '100%' }} >
                         <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%' }} >
                             <span className="k-progress-status">100%</span>
                         </span>

package/src/progressbar/tests/progressbar-vertical.tsx

@@ -33,7 +33,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">95%</span>
                 </span>
-                <div className="k-state-selected" style={{ height: "95%" }} >
+                <div className="k-selected" style={{ height: "95%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "105.263%" }} >
                         <span className="k-progress-status">95%</span>
                     </span>
@@ -43,7 +43,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected k-complete" style={{ height: "100%" }} >
+                <div className="k-selected k-complete" style={{ height: "100%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%" }} >
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -53,25 +53,25 @@ root.render(
                 <ul className="k-reset">
                     <li className="k-item k-first" style={{ height: "20%" }} ></li>
                     <li className="k-item" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-last k-state-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-last k-selected" style={{ height: "20%" }} ></li>
                 </ul>
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical">
                 <ul className="k-reset">
-                    <li className="k-item k-state-selected k-first" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-last k-state-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected k-first" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-last k-selected" style={{ height: "20%" }} ></li>
                 </ul>
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">5%</span>
                 </span>
-                <div className="k-state-selected" style={{ height: "5%" }} >
+                <div className="k-selected" style={{ height: "5%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "2000%" }} >
                         <span className="k-progress-status">5%</span>
                     </span>
@@ -81,7 +81,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">100%</span>
                 </span>
-                <div className="k-state-selected k-complete" style={{ height: "100%" }} >
+                <div className="k-selected k-complete" style={{ height: "100%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%" }} >
                         <span className="k-progress-status">100%</span>
                     </span>
@@ -89,20 +89,20 @@ root.render(
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
                     <li className="k-item" style={{ height: "20%" }} ></li>
                     <li className="k-item k-last" style={{ height: "20%" }} ></li>
                 </ul>
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
                 <ul className="k-reset">
-                    <li className="k-item k-first k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected" style={{ height: "20%" }} ></li>
-                    <li className="k-item k-state-selected k-last" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-first k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected" style={{ height: "20%" }} ></li>
+                    <li className="k-item k-selected k-last" style={{ height: "20%" }} ></li>
                 </ul>
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate">
@@ -112,13 +112,13 @@ root.render(
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical">
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected" style={{ height: "50%" }} >
+                <div className="k-selected" style={{ height: "50%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "200%" }} ></span>
                 </div>
             </div>
             <div className="k-widget k-progressbar k-progressbar-vertical" style={{ width: "2px" }} >
                 <span className="k-progress-status-wrap k-progress-end"></span>
-                <div className="k-state-selected" style={{ height: "50%" }} >
+                <div className="k-selected" style={{ height: "50%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "200%" }} ></span>
                 </div>
             </div>
@@ -126,7 +126,7 @@ root.render(
                 <span className="k-progress-status-wrap k-progress-end">
                     <span className="k-progress-status">50%</span>
                 </span>
-                <div className="k-state-selected" style={{ height: "50%" }} >
+                <div className="k-selected" style={{ height: "50%" }} >
                     <span className="k-progress-status-wrap k-progress-end" style={{ height: "200%" }} >
                         <span className="k-progress-status">50%</span>
                     </span>