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

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

@@ -25,7 +25,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -49,7 +49,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -70,7 +70,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -94,7 +94,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -114,7 +114,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -138,7 +138,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -165,7 +165,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -175,13 +175,13 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-focused">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-focus">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item">
-                            <a className="k-breadcrumb-link k-state-focused" href="#">First item</a>
+                            <a className="k-breadcrumb-link k-focus" href="#">First item</a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item">
@@ -189,7 +189,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -199,13 +199,13 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item">
-                            <a className="k-breadcrumb-link k-state-hover" href="#">First item</a>
+                            <a className="k-breadcrumb-link k-hover" href="#">First item</a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item">
@@ -213,7 +213,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -223,7 +223,7 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
@@ -242,7 +242,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -250,7 +250,7 @@ root.render(
 
             <span className="k-colspan-all k-col-span-full">Edit Mode</span>
             <div>
-                <nav id="breadcrumbs" className="k-widget k-breadcrumb k-state-focused">
+                <nav id="breadcrumbs" className="k-widget k-breadcrumb k-focus">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
                             <a href="#" className="k-breadcrumb-root-link">
@@ -267,7 +267,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -301,7 +301,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-left" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Breadcrumb item </a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Breadcrumb item </a>
                         </li>
                     </ol>
                 </nav>

package/src/breadcrumb/tests/breadcrumb.tsx

@@ -25,7 +25,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -49,7 +49,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -70,7 +70,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -94,7 +94,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -114,7 +114,7 @@ root.render(
                     <ol className="k-breadcrumb-container k-flex-wrap">
                         <li className="k-flex-none k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled k-breadcrumb-icontext-link">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled k-breadcrumb-icontext-link">
                                 <Icon name="clock" />
                                 First item
                             </span>
@@ -138,7 +138,7 @@ root.render(
                         </li>
                         <li className="k-flex-none k-breadcrumb-last-item k-breadcrumb-item">
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
-                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-state-disabled">
+                            <span className="k-cursor-pointer k-flex-none k-breadcrumb-link k-disabled">
                                 Fifth item
                             </span>
                         </li>
@@ -165,7 +165,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -175,13 +175,13 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-focused">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-focus">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item">
-                            <a className="k-breadcrumb-link k-state-focused" href="#">First item</a>
+                            <a className="k-breadcrumb-link k-focus" href="#">First item</a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item">
@@ -189,7 +189,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -199,13 +199,13 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item">
-                            <a className="k-breadcrumb-link k-state-hover" href="#">First item</a>
+                            <a className="k-breadcrumb-link k-hover" href="#">First item</a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item">
@@ -213,7 +213,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -223,7 +223,7 @@ root.render(
                 <nav id="breadcrumbs" className="k-widget k-breadcrumb">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
-                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-state-hover">
+                            <a href="#" className="k-breadcrumb-root-link k-breadcrumb-icon-link k-hover">
                                 <Icon name="home" />
                             </a>
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
@@ -242,7 +242,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -250,7 +250,7 @@ root.render(
 
             <span className="k-colspan-all k-col-span-full">Edit Mode</span>
             <div>
-                <nav id="breadcrumbs" className="k-widget k-breadcrumb k-state-focused">
+                <nav id="breadcrumbs" className="k-widget k-breadcrumb k-focus">
                     <ol className="k-breadcrumb-container">
                         <li className="k-breadcrumb-item k-breadcrumb-root-item">
                             <a href="#" className="k-breadcrumb-root-link">
@@ -267,7 +267,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Third item</a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Third item</a>
                         </li>
                     </ol>
                 </nav>
@@ -301,7 +301,7 @@ root.render(
                             <Icon className="k-breadcrumb-delimiter-icon" name="arrow-chevron-right" />
                         </li>
                         <li className="k-breadcrumb-item k-breadcrumb-last-item">
-                            <a className="k-breadcrumb-link k-state-disabled" href="#">Breadcrumb item </a>
+                            <a className="k-breadcrumb-link k-disabled" href="#">Breadcrumb item </a>
                         </li>
                     </ol>
                 </nav>

package/src/captcha/captcha.tsx

@@ -59,7 +59,7 @@ export class Captcha extends React.Component<CaptchaProps> {
                         disabled={loading === true}
                     />
                     {valid && !loading && (
-                        <span className="k-captcha-validation-message k-text-success">
+                        <span className="k-captcha-validation-message !k-text-success">
                             Verification Success
                         </span>
                     )}

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

@@ -18,8 +18,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 
@@ -28,8 +28,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 
@@ -38,8 +38,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 
@@ -48,8 +48,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 
@@ -58,8 +58,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 
@@ -68,8 +68,8 @@ root.render(
                     <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 </CardBody>
                 <ActionButtons className="k-card-actions">
-                    <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                    <Button fillMode="flat" themeColor="primary">Action 2</Button>
+                    <Button fillMode="flat" themeColor="base">Action 1</Button>
+                    <Button fillMode="flat" themeColor="base">Action 2</Button>
                 </ActionButtons>
             </Card>
 

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

@@ -28,7 +28,7 @@ root.render(
             <span>Focus</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor k-state-focus">
+                <div className="k-flatcolorpicker k-coloreditor k-focus">
                     <div className="k-coloreditor-header k-hstack">
                         <div className="k-coloreditor-header-actions k-hstack"></div>
                         <div className="k-spacer"></div>

package/src/colorgradient/tests/colorgradient-contrast.tsx

@@ -84,21 +84,21 @@ root.render(
                     <div className="k-colorgradient-color-contrast k-vbox">
                         <div className="k-contrast-ratio">
                             <span className="k-contrast-ratio-text">Contrast ratio: 7.1</span>
-                            <span className="k-contrast-validation k-text-success">
+                            <span className="k-contrast-validation !k-text-success">
                                 <Icon name="check" />
                                 <Icon name="check" />
                             </span>
                         </div>
                         <div>
                             <span>AA: 4.5</span>
-                            <span className="k-contrast-validation k-text-success">
+                            <span className="k-contrast-validation !k-text-success">
                                 Pass
                                 <Icon name="check" />
                             </span>
                         </div>
                         <div>
                             <span>AAA: 7.0</span>
-                            <span className="k-contrast-validation k-text-error">
+                            <span className="k-contrast-validation !k-text-error">
                                 Fail
                                 <Icon name="x" />
                             </span>

package/src/colorgradient/tests/colorgradient-draghandle.tsx

@@ -83,23 +83,23 @@ root.render(
                     <div className="k-colorgradient-canvas k-hstack">
                         <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
                             <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle k-state-focus" style={{ top: '50px', left: "73px" }}></div>
+                                <div className="k-hsv-draghandle k-draghandle k-focus" style={{ top: '50px', left: "73px" }}></div>
                             </div>
                         </div>
                         <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-state-focus">
+                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-focus">
                                 <div className="k-slider-track-wrap">
                                     <div className="k-slider-track">
                                         <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-state-focus"></a>
+                                        <a className="k-draghandle k-draghandle-end k-focus"></a>
                                     </div>
                                 </div>
                             </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-state-focus" style={{ "--kendo-slider-end": "100" } as any }>
+                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-focus" style={{ "--kendo-slider-end": "100" } as any }>
                                 <div className="k-slider-track-wrap">
                                     <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
                                         <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-state-focus"></a>
+                                        <a className="k-draghandle k-draghandle-end k-focus"></a>
                                     </div>
                                 </div>
                             </div>
@@ -134,23 +134,23 @@ root.render(
                     <div className="k-colorgradient-canvas k-hstack">
                         <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
                             <div className="k-hsv-gradient">
-                                <div className="k-hsv-draghandle k-draghandle k-state-hover" style={{ top: '50px', left: "73px" }}></div>
+                                <div className="k-hsv-draghandle k-draghandle k-hover" style={{ top: '50px', left: "73px" }}></div>
                             </div>
                         </div>
                         <div className="k-hsv-controls k-hstack">
-                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-state-hover">
+                            <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider k-hover">
                                 <div className="k-slider-track-wrap">
                                     <div className="k-slider-track">
                                         <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-state-hover"></a>
+                                        <a className="k-draghandle k-draghandle-end k-hover"></a>
                                     </div>
                                 </div>
                             </div>
-                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-state-hover" style={{ "--kendo-slider-end": "100" } as any }>
+                            <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider k-hover" style={{ "--kendo-slider-end": "100" } as any }>
                                 <div className="k-slider-track-wrap">
                                     <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
                                         <div className="k-slider-selection"></div>
-                                        <a className="k-draghandle k-draghandle-end k-state-hover"></a>
+                                        <a className="k-draghandle k-draghandle-end k-hover"></a>
                                     </div>
                                 </div>
                             </div>

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

@@ -75,21 +75,21 @@ root.render(
                     <div className="k-colorgradient-color-contrast k-vbox">
                         <div className="k-contrast-ratio">
                             <span className="k-contrast-ratio-text">Contrast ratio: 7.1</span>
-                            <span className="k-contrast-validation k-text-success">
+                            <span className="k-contrast-validation !k-text-success">
                                 <Icon name="check" />
                                 <Icon name="check" />
                             </span>
                         </div>
                         <div>
                             <span>AA: 4.5</span>
-                            <span className="k-contrast-validation k-text-success">
+                            <span className="k-contrast-validation !k-text-success">
                                 Pass
                                 <Icon name="check" />
                             </span>
                         </div>
                         <div>
                             <span>AAA: 7.0</span>
-                            <span className="k-contrast-validation k-text-error">
+                            <span className="k-contrast-validation !k-text-error">
                                 Fail
                                 <Icon name="x" />
                             </span>

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

@@ -24,7 +24,7 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Focus</span>
             <section>
-                <div className="k-colorgradient k-state-focus">
+                <div className="k-colorgradient k-focus">
                     <div className="k-colorgradient-canvas k-hstack">
                         <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
                             <div className="k-hsv-gradient">

package/src/drawer/tests/drawer-hierarchical-item-levels.tsx

@@ -25,11 +25,11 @@ root.render(
                                     <span className="k-item-text">Getting Started</span>
                                     <span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
                                 </li>
-                                <li className="k-drawer-item k-state-hover k-level-1">
+                                <li className="k-drawer-item k-hover k-level-1">
                                     <Icon name="question" />
                                     <span className="k-item-text">About Kendo UI</span>
                                 </li>
-                                <li className="k-drawer-item k-state-selected k-level-2">
+                                <li className="k-drawer-item k-selected k-level-2">
                                     <Icon name="palette" />
                                     <span className="k-item-text">Supported Themes</span>
                                 </li>
@@ -83,11 +83,11 @@ root.render(
                                     <span className="k-item-text">Getting Started</span>
                                     <span className="k-drawer-toggle"><Icon name="arrow-chevron-down" /></span>
                                 </li>
-                                <li className="k-drawer-item k-state-hover k-level-1">
+                                <li className="k-drawer-item k-hover k-level-1">
                                     <Icon name="question" />
                                     <span className="k-item-text">About Kendo UI</span>
                                 </li>
-                                <li className="k-drawer-item k-state-selected k-level-2">
+                                <li className="k-drawer-item k-selected k-level-2">
                                     <Icon name="palette" />
                                     <span className="k-item-text">Supported Themes</span>
                                 </li>