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

package/src/scrollview/tests/scrollview.tsx

@@ -48,8 +48,8 @@ root.render(
                         <ul className="k-scrollview-nav">
                             <li className="k-link"></li>
                             <li className="k-link k-primary"></li>
-                            <li className="k-link k-primary k-state-focused"></li>
-                            <li className="k-link k-state-focused"></li>
+                            <li className="k-link k-primary k-focus"></li>
+                            <li className="k-link k-focus"></li>
                             <li className="k-link"></li>
                         </ul>
                     </div>

package/src/signature/tests/signature-sizes.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Signature } from '../../signature';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    div[dir="rtl"] {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Signature</span>
+            <span>Signature RTL</span>
+
+            <div>
+                <span>Small</span>
+                <Signature size="small" />
+            </div>
+            <div dir="rtl">
+                <span>Small</span>
+                <Signature size="small" />
+            </div>
+
+            <div>
+                <span>Medium</span>
+                <Signature size="medium" />
+            </div>
+            <div dir="rtl">
+                <span>Medium</span>
+                <Signature size="medium" />
+            </div>
+
+            <div>
+                <span>Large</span>
+                <Signature size="large" />
+            </div>
+            <div dir="rtl">
+                <span>Large</span>
+                <Signature size="large" />
+            </div>
+        </div>
+    </>
+);

package/src/splitter/tests/splitter.tsx

@@ -57,7 +57,7 @@ root.render(
                                 <Icon name="arrow-e"></Icon>
                             </div>
                         </div>
-                        <div className="k-splitbar k-state-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
+                        <div className="k-splitbar k-hover k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "7" }}>
                             <div className="k-collapse-prev">
                                 <Icon name="arrow-w"></Icon>
                             </div>
@@ -66,7 +66,7 @@ root.render(
                                 <Icon name="arrow-e"></Icon>
                             </div>
                         </div>
-                        <div className="k-splitbar k-state-focused k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
+                        <div className="k-splitbar k-focus k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ order: "9" }}>
                             <div className="k-collapse-prev">
                                 <Icon name="arrow-w"></Icon>
                             </div>

package/src/spreadsheet/tests/spreadsheet-filter-menu.tsx

@@ -25,7 +25,7 @@ root.render(
 
             <section>
                 <div className="k-animation-container">
-                    <div className="k-spreadsheet-filter-menu k-popup k-group k-reset k-state-border-up">
+                    <div className="k-spreadsheet-filter-menu k-popup k-group k-reset">
                         <div className="k-columnmenu-item-wrapper">
                             <div className="k-columnmenu-item">
                                 <Icon name="sort-asc-sm"></Icon>Sort range A to Z

package/src/spreadsheet/tests/spreadsheet.tsx

@@ -570,7 +570,7 @@ root.render(
                         <div className="k-tabstrip-items-wrapper k-hstack">
                             <Button fillMode="flat" rounded={null} size={null} icon="arrow-60-left" className="k-tabstrip-prev"></Button>
                             <ul className="k-reset k-tabstrip-items">
-                                <li className="k-item k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active">
+                                <li className="k-item k-active k-tab-on-top k-spreadsheet-sheets-bar-active">
                                     <span className="k-link">Food Order</span>
                                     <Button fillMode="flat" icon="close" className="k-spreadsheet-sheets-remove k-remove-tab"></Button>
                                 </li>

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

@@ -66,7 +66,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -113,7 +113,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -151,7 +151,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -196,7 +196,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -232,7 +232,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>

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

@@ -53,7 +53,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -97,7 +97,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -132,7 +132,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -172,7 +172,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -216,7 +216,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -251,7 +251,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -289,7 +289,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -333,7 +333,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -368,7 +368,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -406,9 +406,9 @@ root.render(
                             </a>
                         </li>
                     </ol>
-                    <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6", opacity: ".6" }}>
+                    <div className="k-widget k-progressbar k-progressbar-horizontal k-disabled" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -450,9 +450,9 @@ root.render(
                             </a>
                         </li>
                     </ol>
-                    <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6", opacity: ".6" }}>
+                    <div className="k-widget k-progressbar k-progressbar-horizontal k-disabled" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -485,9 +485,9 @@ root.render(
                             </a>
                         </li>
                     </ol>
-                    <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6", opacity: ".6" }}>
+                    <div className="k-widget k-progressbar k-progressbar-horizontal k-disabled" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>

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

@@ -52,7 +52,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -97,7 +97,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -130,7 +130,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -163,7 +163,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>

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

@@ -52,7 +52,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -97,7 +97,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -130,7 +130,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -163,7 +163,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "50%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>
@@ -220,7 +220,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse" style={{ gridRowStart: "1", gridRowEnd: "3", top: "17px" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ width: '100%', height: "20%" }}>
+                        <div className="k-selected" style={{ width: '100%', height: "20%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ width: '100%', height: "200%" }}></span>
                         </div>
                     </div>

package/src/stepper/tests/stepper.tsx

@@ -58,7 +58,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -105,7 +105,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -143,7 +143,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -188,7 +188,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -224,7 +224,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "6" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "50%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "50%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>
@@ -320,7 +320,7 @@ root.render(
                     </ol>
                     <div className="k-widget k-progressbar k-progressbar-horizontal" style={{ gridColumnStart: "2", gridColumnEnd: "16" }}>
                         <span className="k-progress-status-wrap k-progress-end"></span>
-                        <div className="k-state-selected" style={{ height: "100%", width: "59%" }}>
+                        <div className="k-selected" style={{ height: "100%", width: "59%" }}>
                             <span className="k-progress-status-wrap k-progress-end" style={{ height: "100%", width: "200%" }}></span>
                         </div>
                     </div>

package/src/taskboard/tests/taskboard-card.tsx

@@ -109,7 +109,7 @@ root.render(
                                     </Card>
                                     <Card className="k-taskboard-card" hover>
                                         <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link k-state-hover" href="#">Hovered Card Title</a>
+                                            <a className="k-card-title k-link k-hover" href="#">Hovered Card Title</a>
                                             <span className="k-spacer"></span>
                                         </CardHeader>
                                         <CardBody>
@@ -118,7 +118,7 @@ root.render(
                                     </Card>
                                     <Card className="k-taskboard-card" focus>
                                         <CardHeader className="k-hbox" details>
-                                            <a className="k-card-title k-link k-state-focus" href="#">Focused Card Title</a>
+                                            <a className="k-card-title k-link k-focus" href="#">Focused Card Title</a>
                                             <span className="k-spacer"></span>
                                         </CardHeader>
                                         <CardBody>

package/src/taskboard/tests/taskboard-column.tsx

@@ -54,7 +54,7 @@ root.render(
                     <div className="k-taskboard-header k-hidden"></div>
                     <div className="k-taskboard-content">
                         <div className="k-taskboard-columns-container">
-                            <div className="k-taskboard-column k-state-focus">
+                            <div className="k-taskboard-column k-focus">
                                 <div className="k-taskboard-column-header">
                                     <div className="k-taskboard-column-header-text k-text-ellipsis">Column Header</div>
                                     <span className="k-spacer"></span>
@@ -154,7 +154,7 @@ root.render(
                     <div className="k-taskboard-header k-hidden"></div>
                     <div className="k-taskboard-content">
                         <div className="k-taskboard-columns-container">
-                            <div className="k-taskboard-column k-state-focus">
+                            <div className="k-taskboard-column k-focus">
                                 <div className="k-taskboard-column-header">
                                     <div className="k-taskboard-column-header-text k-text-ellipsis">Column with a very very very very very very very very long title</div>
                                     <span className="k-spacer"></span>

package/src/taskboard/tests/taskboard-pane.tsx

@@ -54,6 +54,15 @@ root.render(
                                             <p>Card Body</p>
                                         </CardBody>
                                     </Card>
+                                    <Card className="k-taskboard-card">
+                                        <CardHeader className="k-hbox" details>
+                                            <a className="k-card-title k-link" href="#">Card Title</a>
+                                            <span className="k-spacer"></span>
+                                        </CardHeader>
+                                        <CardBody>
+                                            <p>Card Body</p>
+                                        </CardBody>
+                                    </Card>
                                 </div>
                             </div>
                         </div>
@@ -166,6 +175,15 @@ root.render(
                                             <p>Card Body</p>
                                         </CardBody>
                                     </Card>
+                                    <Card className="k-taskboard-card">
+                                        <CardHeader className="k-hbox" details>
+                                            <a className="k-card-title k-link" href="#">Card Title</a>
+                                            <span className="k-spacer"></span>
+                                        </CardHeader>
+                                        <CardBody>
+                                            <p>Card Body</p>
+                                        </CardBody>
+                                    </Card>
                                 </div>
                             </div>
                         </div>

package/src/taskboard/tests/taskboard-rtl.tsx

@@ -11,7 +11,7 @@ const root = ReactDOM.createRoot(
 const style = `
     #test-area {
         max-width: 1030px;
-        padding: 0;
+        padding: 5px;
     }
 
     #test-area > span {

package/src/taskboard/tests/taskboard.tsx

@@ -11,7 +11,7 @@ const root = ReactDOM.createRoot(
 const style = `
     #test-area {
         max-width: 1030px;
-        padding: 0;
+        padding: 5px;
     }
 
     #test-area > span {

package/src/timeline/tests/timeline-horizontal.tsx

@@ -38,7 +38,7 @@ root.render(
                                 </div>
                                 <a className="k-timeline-circle" href="#"></a>
                             </li>
-                            <li className="k-timeline-track-item k-state-focus">
+                            <li className="k-timeline-track-item k-focus">
                                 <div className="k-timeline-date-wrap">
                                     <span className="k-timeline-date">Jun 1, 2015</span>
                                 </div>

package/src/treelist/tests/treelist-aggregates.tsx

@@ -71,7 +71,7 @@ root.render(
                                     <td>June 26, 2015</td>
                                 </tr>
                                 <tr className="k-footer-template">
-                                    <td className="k-state-focused"><Icon name="none"></Icon><Icon name="none"></Icon><Icon name="none"></Icon>7 employee(s)</td>
+                                    <td className="k-focus"><Icon name="none"></Icon><Icon name="none"></Icon><Icon name="none"></Icon>7 employee(s)</td>
                                     <td></td>
                                     <td>Last employee hired on July 30, 2015</td>
                                 </tr>
@@ -166,7 +166,7 @@ root.render(
                                                 <td colSpan={1}>4/13/2019</td>
                                             </tr>
                                             <tr className="k-footer">
-                                                <td className="k-state-focused">
+                                                <td className="k-focus">
                                                     <Icon name="none"></Icon><Icon name="none"></Icon><Icon name="none"></Icon>
                                                     35 employee(s)
                                                 </td>

package/src/upload/tests/upload-react.tsx

@@ -32,7 +32,7 @@ root.render(
                                 <span className="k-file-invalid-group-wrapper"><Icon className="k-file-group" name="file-image"></Icon><span className="k-file-state"></span></span>
                                 <span className="k-file-name-size-wrapper">
                                     <span className="k-file-name k-file-name-invalid">Video_File_with_Very_Very_Very_Very_Long_Name.jpg</span>
-                                    <span className="k-file-validation-message k-text-error">File type not allowed.</span>
+                                    <span className="k-file-validation-message !k-text-error">File type not allowed.</span>
                                 </span>
                                 <strong className="k-upload-status">
                                     <Button icon="close" fillMode="flat" className="k-upload-action"></Button>
@@ -70,7 +70,7 @@ root.render(
                                     <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video_File_with_Very_Very_Very_VeryLong_Name2.jpg</span><span className="k-file-size">106.43 KB</span> </span>
                                     <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video3.png</span><span className="k-file-size">24.34 KB</span> </span>
                                     <span className="k-file-name-size-wrapper"> <span className="k-file-name">Video4.png</span><span className="k-file-size">19.85 KB</span> </span>
-                                    <span className="k-file-information k-hidden">Total: 4 files, 170.22 KB</span><span className="k-file-validation-message k-text-success">4 File(s) uploaded successfully.</span>
+                                    <span className="k-file-information k-hidden">Total: 4 files, 170.22 KB</span><span className="k-file-validation-message !k-text-success">4 File(s) uploaded successfully.</span>
                                 </span>
                                 <strong className="k-upload-status">
                                     <Button icon="close" fillMode="flat" className="k-upload-action"></Button>

package/src/upload/tests/upload-rtl.tsx

@@ -37,7 +37,7 @@ root.render(
                                 </span>
                                 <span className="k-file-name-size-wrapper">
                                     <span className="k-file-name">Video_File_with_Very_Very_Very_Very_Long_Name.mkv</span>
-                                    <span className="k-file-validation-message k-text-error">File type not allowed.</span>
+                                    <span className="k-file-validation-message !k-text-error">File type not allowed.</span>
                                 </span>
                                 <div>
                                     <strong className="k-upload-status">
@@ -88,7 +88,7 @@ root.render(
                                 </span>
                                 <span className="k-file-name-size-wrapper">
                                     <span className="k-file-name">Image1_With_Very_Very_Very_Very_Long_Name.jpg</span>
-                                    <span className="k-text-success k-file-information">File successfully uploaded.</span>
+                                    <span className="!k-text-success k-file-information">File successfully uploaded.</span>
                                 </span>
                                 <div>
                                     <strong className="k-upload-status">
@@ -107,7 +107,7 @@ root.render(
                                 </span>
                                 <span className="k-file-name-size-wrapper">
                                     <span className="k-file-name">Image2.jpg</span>
-                                    <span className="k-text-success k-file-information">File successfully uploaded.</span>
+                                    <span className="!k-text-success k-file-information">File successfully uploaded.</span>
                                 </span>
                                 <div>
                                     <strong className="k-upload-status">
@@ -148,7 +148,7 @@ root.render(
             </section>
 
             <section>
-                <div className="k-widget k-upload k-state-disabled" dir="rtl">
+                <div className="k-widget k-upload k-disabled" dir="rtl">
                     <div className="k-dropzone">
                         <Button className="k-upload-button">Select files...</Button>
                         <div className="k-dropzone-hint">Disabled! Drop files here to upload</div>
@@ -191,7 +191,7 @@ root.render(
                                         <span className="k-file-name"> Video4.png </span>
                                         <span className="k-file-size">24.34 KB</span>
                                     </span>
-                                    <span className="k-file-information k-text-success">4 files successfully uploaded.</span>
+                                    <span className="k-file-information !k-text-success">4 files successfully uploaded.</span>
                                 </span>
                                 <div>
                                     <strong className="k-upload-status">
@@ -270,11 +270,11 @@ root.render(
                                 <span className="k-multiple-files-wrapper">
                                     <span className="k-file-name-size-wrapper">
                                         <span className="k-file-name">Movie_With_Very_Very_Very_Very_Very_Long_Name1.mkv </span>
-                                        <span className="k-text-error k-file-validation-message">File type not allowed.</span>
+                                        <span className="!k-text-error k-file-validation-message">File type not allowed.</span>
                                     </span>
                                     <span className="k-file-name-size-wrapper">
                                         <span className="k-file-name">Movie2.mkv </span>
-                                        <span className="k-text-error k-file-validation-message">File type not allowed.</span>
+                                        <span className="!k-text-error k-file-validation-message">File type not allowed.</span>
                                     </span>
                                     <span className="k-file-name-size-wrapper">
                                         <span className="k-file-name">Image1.jpg </span>