@progress/kendo-themes-html 5.5.1-dev.2 → 5.6.1-dev.1

package/src/pager/tests/pager.tsx

@@ -14,23 +14,23 @@ root.render(
 
             <span>LTR</span>
             <section>
-                <div className="k-pager-wrap k-widget">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-focus"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-focus"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
                         </select>
                         <ul className="k-pager-numbers">
                             <li><span className="k-link">1</span></li>
-                            <li><a className="k-link k-state-hover">2</a></li>
-                            <li><span className="k-link k-state-focus">3</span></li>
-                            <li><a className="k-link k-state-selected">4</a></li>
-                            <li><a className="k-link k-state-hover k-state-focus">5</a></li>
-                            <li><a className="k-link k-state-selected k-state-focus">6</a></li>
+                            <li><a className="k-link k-hover">2</a></li>
+                            <li><span className="k-link k-focus">3</span></li>
+                            <li><a className="k-link k-selected">4</a></li>
+                            <li><a className="k-link k-hover k-focus">5</a></li>
+                            <li><a className="k-link k-selected k-focus">6</a></li>
                         </ul>
                     </div>
-                    <a className="k-link k-pager-nav k-state-hover"><Icon name="arrow-e" /></a>
+                    <a className="k-link k-pager-nav k-hover"><Icon name="arrow-e" /></a>
                     <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
 
                     <span className="k-pager-sizes k-label">
@@ -44,9 +44,9 @@ root.render(
                 </div>
             </section>
             <section>
-                <div className="k-pager-wrap k-widget k-focus">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget k-focus">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <span className="k-pager-input k-label">
                         Page
                         <Textbox showClearButton={false} value="999" />
@@ -66,9 +66,9 @@ root.render(
                 </div>
             </section>
             <section>
-                <div className="k-pager-wrap k-widget">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -98,9 +98,9 @@ root.render(
 
             <span>RTL</span>
             <section>
-                <div className="k-pager-wrap k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget" dir="rtl">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -127,9 +127,9 @@ root.render(
                 </div>
             </section>
             <section>
-                <div className="k-pager-wrap k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget" dir="rtl">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <span className="k-pager-input k-label">
                         Page
                         <Textbox showClearButton={false} value="999" />
@@ -149,9 +149,9 @@ root.render(
                 </div>
             </section>
             <section>
-                <div className="k-pager-wrap k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                <div className="k-pager k-widget" dir="rtl">
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>

package/src/panelbar/tests/panelbar-angular.tsx

@@ -73,7 +73,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">First</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -101,7 +101,7 @@ root.render(
                                         <Icon className="k-panelbar-expand" name="arrow-s" />
                                     </span>
                                 </div>
-                                <div className="k-item k-state-expanded">
+                                <div className="k-item k-expanded">
                                     <span className="k-link">
                                         Child expanded
                                         <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -144,7 +144,7 @@ root.render(
 
             <section>
                 <div className="k-widget k-panelbar">
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -173,7 +173,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -238,7 +238,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">First</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -266,7 +266,7 @@ root.render(
                                         <Icon className="k-panelbar-expand" name="arrow-s" />
                                     </span>
                                 </div>
-                                <div className="k-item k-state-expanded">
+                                <div className="k-item k-expanded">
                                     <span className="k-link">
                                         Child expanded
                                         <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -309,7 +309,7 @@ root.render(
 
             <section>
                 <div className="k-widget k-panelbar" dir="rtl">
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -338,7 +338,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />

package/src/panelbar/tests/panelbar-jquery.tsx

@@ -71,7 +71,7 @@ root.render(
                     <li className="k-item k-first">
                         <span className="k-link k-header">First</span>
                     </li>
-                    <li className="k-item k-state-expanded">
+                    <li className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -98,7 +98,7 @@ root.render(
                                     <Icon className="k-panelbar-expand" name="arrow-s" />
                                 </span>
                             </li>
-                            <li className="k-item k-state-expanded">
+                            <li className="k-item k-expanded">
                                 <span className="k-link">
                                     Child expanded
                                     <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -134,7 +134,7 @@ root.render(
 
             <section>
                 <ul className="k-widget k-reset k-header k-panelbar">
-                    <li className="k-item k-first k-state-expanded">
+                    <li className="k-item k-first k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -161,7 +161,7 @@ root.render(
                     <li className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </li>
-                    <li className="k-item k-state-expanded k-last">
+                    <li className="k-item k-expanded k-last">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -222,7 +222,7 @@ root.render(
                     <li className="k-item k-first">
                         <span className="k-link k-header">First</span>
                     </li>
-                    <li className="k-item k-state-expanded">
+                    <li className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -249,7 +249,7 @@ root.render(
                                     <Icon className="k-panelbar-expand" name="arrow-s" />
                                 </span>
                             </li>
-                            <li className="k-item k-state-expanded">
+                            <li className="k-item k-expanded">
                                 <span className="k-link">
                                     Child expanded
                                     <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -285,7 +285,7 @@ root.render(
 
             <section className="k-rtl">
                 <ul className="k-widget k-reset k-header k-panelbar">
-                    <li className="k-item k-first k-state-expanded">
+                    <li className="k-item k-first k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -312,7 +312,7 @@ root.render(
                     <li className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </li>
-                    <li className="k-item k-state-expanded k-last">
+                    <li className="k-item k-expanded k-last">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />

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

@@ -71,7 +71,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">First</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -100,7 +100,7 @@ root.render(
                                             <Icon className="k-panelbar-expand" name="arrow-s" />
                                         </span>
                                     </div>
-                                    <div className="k-item k-state-expanded">
+                                    <div className="k-item k-expanded">
                                         <span className="k-link">
                                             Child expanded
                                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -142,7 +142,7 @@ root.render(
 
             <section>
                 <div className="k-widget k-panelbar">
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -173,7 +173,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -238,7 +238,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">First</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -267,7 +267,7 @@ root.render(
                                             <Icon className="k-panelbar-expand" name="arrow-s" />
                                         </span>
                                     </div>
-                                    <div className="k-item k-state-expanded">
+                                    <div className="k-item k-expanded">
                                         <span className="k-link">
                                             Child expanded
                                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -309,7 +309,7 @@ root.render(
 
             <section className="k-rtl">
                 <div className="k-widget k-panelbar">
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             First expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />
@@ -340,7 +340,7 @@ root.render(
                     <div className="k-item">
                         <span className="k-link k-header">Middle</span>
                     </div>
-                    <div className="k-item k-state-expanded">
+                    <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Last expanded
                             <Icon className="k-panelbar-collapse" name="arrow-n" />

package/src/panelbar/tests/panelbar-universal.tsx

@@ -95,7 +95,7 @@ root.render(
                             <span className="k-panelbar-item-text">First</span>
                         </span>
                     </li>
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">Middle expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -141,7 +141,7 @@ root.render(
                                     <span className="k-panelbar-item-text">Child selected focus&hover</span>
                                 </span>
                             </li>
-                            <li className="k-panelbar-item k-item k-state-expanded k-level-1">
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
                                 <span className="k-link">
                                     <span className="k-panelbar-item-text">Child expanded</span>
                                     <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -187,7 +187,7 @@ root.render(
 
             <section>
                 <ul className="k-panelbar">
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">First expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -222,7 +222,7 @@ root.render(
                             <span className="k-panelbar-item-text">Middle</span>
                         </span>
                     </li>
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">Last expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -307,7 +307,7 @@ root.render(
                             <span className="k-panelbar-item-text">First</span>
                         </span>
                     </li>
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">Middle expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -353,7 +353,7 @@ root.render(
                                     <span className="k-panelbar-item-text">Child selected focus&hover</span>
                                 </span>
                             </li>
-                            <li className="k-panelbar-item k-item k-state-expanded k-level-1">
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
                                 <span className="k-link">
                                     <span className="k-panelbar-item-text">Child expanded</span>
                                     <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -399,7 +399,7 @@ root.render(
 
             <section className="k-rtl">
                 <ul className="k-panelbar">
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">First expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
@@ -434,7 +434,7 @@ root.render(
                             <span className="k-panelbar-item-text">Middle</span>
                         </span>
                     </li>
-                    <li className="k-panelbar-header k-item k-state-expanded k-level-0">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
                         <span className="k-link">
                             <span className="k-panelbar-item-text">Last expanded</span>
                             <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />

package/src/pdf-viewer/tests/pdf-viewer.tsx

@@ -20,7 +20,7 @@ root.render(
 
             <div className="k-widget k-pdf-viewer">
                 <div className="k-toolbar k-widget k-toolbar-resizable">
-                    <div className="k-pager-wrap">
+                    <div className="k-pager">
                         <Button fillMode="flat" icon="arrow-end-left" className="k-pager-nav k-pager-first"></Button>
                         <Button fillMode="flat" icon="arrow-60-left" className="k-pager-nav"></Button>
                         <span className="k-pager-input k-label"><Textbox />of 4 pages</span>

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

@@ -46,7 +46,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -88,7 +88,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus k-step-error" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus k-step-error" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <span className="k-step-indicator-text">2</span>
@@ -131,7 +131,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="user"></Icon>
@@ -172,7 +172,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-indicator">
                                     <Icon className="k-step-indicator-icon" name="user"></Icon>
@@ -214,7 +214,7 @@ root.render(
                                 </span>
                             </a>
                         </li>
-                        <li className="k-step k-step-current k-step-focus" style={{ maxWidth: "33.333%" }}>
+                        <li className="k-step k-step-current k-focus" style={{ maxWidth: "33.333%" }}>
                             <a href="#" className="k-step-link">
                                 <span className="k-step-label">
                                     <span className="k-step-text">Personal Info</span>