@progress/kendo-themes-html 5.6.1-dev.6 → 5.8.0

package/src/pivotgrid/tests/pivotgrid-header-cell-states.tsx

@@ -0,0 +1,293 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <section>
+                <div className="k-d-flex k-flex-row k-pos-relative">
+                    <div className="k-pivotgrid">
+                        <span className="k-pivotgrid-empty-cell k-focus"></span>
+
+                        {/* Pivot Multi Column Headers */}
+                        <div className="k-pivotgrid-column-headers">
+
+                            <table className="k-pivotgrid-table">
+                                <tbody className="k-pivotgrid-tbody">
+                                    {/* Four Rows for Date.Calendar Column grouping field */}
+                                    <tr className="k-pivotgrid-row k-pivotgrid-column-total">
+                                        <th colSpan={10} className="k-pivotgrid-cell k-pivotgrid-expanded k-pivotgrid-header-root">
+                                            <Icon name="arrow-chevron-up" />
+                                            <span className="k-pivotgrid-header-title">All Periods</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={5} className="k-pivotgrid-cell">
+                                            Beverages
+                                        </th>
+                                        <th colSpan={5} className="k-pivotgrid-cell">
+                                            Seafood
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={10} className="k-pivotgrid-cell k-pivotgrid-expanded">
+                                            <Icon name="arrow-chevron-up" />
+                                            <span className="k-pivotgrid-header-title">CY 2010</span>
+                                        </th>
+                                    </tr>
+
+                                </tbody>
+                            </table>
+                        </div>
+                        {/* Pivot Multi Row Headers */}
+                        <div className="k-pivotgrid-row-headers">
+                            <table className="k-pivotgrid-table">
+                                <tbody className="k-pivotgrid-tbody">
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} rowSpan={9} className="k-pivotgrid-cell k-pivotgrid-row-total k-pivotgrid-expanded k-pivotgrid-header-root">
+                                            <Icon name="arrow-chevron-up" />
+                                            <span className="k-pivotgrid-header-title">All Geographies</span>
+                                        </th>
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Austell</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row k-hover">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Biloxi</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Braintree</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell k-selected">
+                                            <span className="k-pivotgrid-header-title">Casper</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Clearwater</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell k-focus">
+                                            <span className="k-pivotgrid-header-title">Destin</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Euclid</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Everett</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-header-title">Fort Wayne</span>
+                                        </th>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <th colSpan={2} className="k-pivotgrid-cell k-pivotgrid-header-total">
+                                            <span className="k-pivotgrid-header-title">All Geographies</span>
+                                        </th>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        {/* Details */}
+                        <div className="k-pivotgrid-values">
+                            <table className="k-pivotgrid-table">
+                                <tbody className="k-pivotgrid-tbody">
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$514.14</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2.02</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2451.14</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2919.53</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$10567.67</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$344.69</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2.52</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$105.70</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$1911.60</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$96.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$0.72</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$816.16</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$1070.34</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$3.03</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$6621.86</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$5156.51</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$17520.10</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$514.14</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2.02</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$4.00</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2919.53</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$10567.67</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$344.69</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$2.52</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$105.70</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$1911.60</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$96.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$816.16</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$1070.34</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$3.03</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$6621.86</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$5156.51</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$17520.10</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$96.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content">$96.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell">
+                                            <span className="k-pivotgrid-content"></span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$816.16</span>
+                                        </td>
+                                    </tr>
+                                    <tr className="k-pivotgrid-row">
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$9336.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$9546.89</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$4719.27</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$4719.27</span>
+                                        </td>
+                                        <td colSpan={1} className="k-pivotgrid-cell k-pivotgrid-total">
+                                            <span className="k-pivotgrid-content">$88816.16</span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                </div>
+            </section>
+        </div>
+    </>
+);

package/src/pivotgrid/tests/pivotgrid.tsx

@@ -246,7 +246,7 @@ root.render(
                                             <span className="k-pivotgrid-content">$10567.67</span>
                                         </td>
                                     </tr>
-                                    <tr className="k-pivotgrid-row k-state-hover">
+                                    <tr className="k-pivotgrid-row k-hover">
                                         <td colSpan={1} className="k-pivotgrid-cell">
                                             <span className="k-pivotgrid-content">$344.69</span>
                                         </td>
@@ -279,7 +279,7 @@ root.render(
                                         </td>
                                     </tr>
                                     <tr className="k-pivotgrid-row">
-                                        <td colSpan={1} className="k-pivotgrid-cell k-state-focus">
+                                        <td colSpan={1} className="k-pivotgrid-cell k-focus">
                                             <span className="k-pivotgrid-content">$96.89</span>
                                         </td>
                                         <td colSpan={1} className="k-pivotgrid-cell">
@@ -310,7 +310,7 @@ root.render(
                                             <span className="k-pivotgrid-content">$816.16</span>
                                         </td>
                                     </tr>
-                                    <tr className="k-pivotgrid-row k-state-selected">
+                                    <tr className="k-pivotgrid-row k-selected">
                                         <td colSpan={1} className="k-pivotgrid-cell">
                                             <span className="k-pivotgrid-content">$1070.34</span>
                                         </td>
@@ -375,7 +375,7 @@ root.render(
                                         </td>
                                     </tr>
                                     <tr className="k-pivotgrid-row">
-                                        <td colSpan={1} className="k-pivotgrid-cell k-state-selected">
+                                        <td colSpan={1} className="k-pivotgrid-cell k-selected">
                                             <span className="k-pivotgrid-content">$344.69</span>
                                         </td>
                                         <td colSpan={1} className="k-pivotgrid-cell">

package/src/progressbar/tests/progressbar-blazor-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">
+                <div className="k-selected">
                     <span className="k-progress-status-wrap k-progress-end">
                         <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">
+                <div className="k-selected k-complete">
                     <span className="k-progress-status-wrap k-progress-end">
                         <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" style={{ "--kendo-progressbar-progress": "5" } as React.CSSProperties}>
                 <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">
+                <div className="k-selected k-complete">
                     <span className="k-progress-status-wrap k-progress-end">
                         <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" 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 className="k-widget k-progressbar k-progressbar-vertical" style={{ width: "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>
@@ -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">
+                <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-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>