npm - @progress/kendo-themes-html - Versions diffs - 5.6.1-dev.5 → 5.7.0 - Mend

@progress/kendo-themes-html 5.6.1-dev.5 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (827) hide show

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

@@ -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 CHANGED Viewed

@@ -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/button/button.tsx CHANGED Viewed

@@ -71,7 +71,7 @@ export class Button extends React.Component<ButtonProps> {
                         [`k-button-${fillMode}`]: fillMode,
                         [`k-button-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),
                         [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,
-                        'k-icon-button': !hasChildren && hasIcon,
+                        'k-icon-button': !text && !hasChildren && hasIcon,
                         'k-hover': hover,
                         'k-focus': focus,
                         'k-active': active,

package/src/captcha/captcha.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/card/tests/card.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ root.render(
             </Card>
             <Card>
-                <CardBody title="Card Title" subtitle="Card Subtitle">
+                <CardBody title="Card Title">
                     <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" orientation="vertical">

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>