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

package/src/grid/tests/grid-column-menu-blazor.tsx

@@ -24,19 +24,19 @@ root.render(
                                 <tr role="row">
                                     <th className="k-header" colSpan={1}>
                                         <Checkbox/>
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
                                     <th className="k-header" colSpan={1}>
                                         Name
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
                                     <th className="k-header" colSpan={1}>
                                         Command
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
@@ -112,7 +112,7 @@ root.render(
                                 <tr role="row">
                                     <th className="k-header" colSpan={1}>
                                         <Checkbox/>
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
@@ -126,13 +126,13 @@ root.render(
                                             </span>
                                             <span className="k-sort-status" style={{ position: "absolute", left: "-10000px" }}>Sorted in ascending order</span>
                                         </span>
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
                                     <th className="k-header" colSpan={1}>
                                         Command
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                     </th>
@@ -209,7 +209,7 @@ root.render(
                                 <tr role="row">
                                     <th className="k-header" colSpan={1}>
                                         <Checkbox/>
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                         <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>
@@ -222,14 +222,14 @@ root.render(
                                                 </span>
                                             </span>
                                         </span>
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                         <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>
                                     </th>
                                     <th className="k-header" colSpan={1}>
                                         Command
-                                        <span className="k-grid-column-menu k-grid-filter">
+                                        <span className="k-grid-header-menu k-grid-filter-menu">
                                             <Icon name="more-vertical" />
                                         </span>
                                         <span className="k-column-resizer" style={{ right: '0px', cursor: "col-resize" }}></span>

package/src/grid/tests/grid-locked-columns.tsx

@@ -32,8 +32,8 @@ root.render(
                             </colgroup>
                             <thead>
                                 <tr>
-                                    <th className="k-header k-with-icon"><a className="k-header-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=OrderID-asc">Order ID</a></th>
-                                    <th className="k-header k-with-icon"><a className="k-header-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipName-asc">Ship Name</a></th>
+                                    <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=OrderID-asc">Order ID</a></th>
+                                    <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipName-asc">Ship Name</a></th>
                                 </tr>
                             </thead>
                         </table>
@@ -47,9 +47,9 @@ root.render(
                             </colgroup>
                             <thead>
                                 <tr>
-                                    <th className="k-header k-with-icon"><a className="k-header-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCountry-asc">Ship Country</a></th>
-                                    <th className="k-header k-with-icon"><a className="k-header-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCity-asc">Ship City</a></th>
-                                    <th className="k-header k-with-icon"><a className="k-header-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipAddress-asc">Ship Address</a></th>
+                                    <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCountry-asc">Ship Country</a></th>
+                                    <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipCity-asc">Ship City</a></th>
+                                    <th className="k-header k-with-icon"><a className="k-grid-header-menu k-grid-column-menu" href="#"><Icon name="more-vertical" /></a><a className="k-link" href="/aspnet-mvc/Grid/FrozenColumns_Read?Grid-sort=ShipAddress-asc">Ship Address</a></th>
                                 </tr>
                             </thead>
                         </table>

package/src/grid/tests/grid-long-titles.tsx

@@ -32,7 +32,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon">
-                                                <a className="k-header-column-menu k-state-active" href="#">
+                                                <a className="k-grid-header-menu k-grid-column-menu k-state-active" href="#">
                                                     <Icon name="more-vertical" />
                                                 </a>
                                                 Active Column Menu &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lorem ipsum dolor sit amet consectetur adipiscing elit
@@ -58,7 +58,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon">
-                                                <a className="k-header-column-menu" href="#">
+                                                <a className="k-grid-header-menu k-grid-column-menu" href="#">
                                                     <Icon name="more-vertical" />
                                                 </a>
                                                 Lorem ipsum dolor sit amet consectetur adipiscing elit &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; RTL Column Menu
@@ -144,7 +144,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon">
-                                                <a className="k-header-column-menu" href="#">
+                                                <a className="k-grid-header-menu k-grid-column-menu" href="#">
                                                     <Icon name="more-vertical" />
                                                 </a>
                                                 <a className="k-link" href="#">
@@ -172,7 +172,7 @@ root.render(
                                     <thead>
                                         <tr>
                                             <th scope="col" className="k-header k-with-icon">
-                                                <a className="k-header-column-menu" href="#">
+                                                <a className="k-grid-header-menu k-grid-column-menu" href="#">
                                                     <Icon name="more-vertical" />
                                                 </a>
                                                 <a className="k-link" href="#">

package/src/grid/tests/grid-multicolumn-headers.tsx

@@ -145,33 +145,33 @@ root.render(
                                 <thead>
                                     <tr>
                                         <th scope="col" rowSpan={3} className="k-header k-with-icon">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">Company</a>
                                         </th>
                                         <th scope="col" colSpan={5} className="k-header">Contact Info</th>
                                     </tr>
                                     <tr>
                                         <th scope="col" rowSpan={2} className="k-header k-with-icon k-first">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">First Name</a>
                                         </th>
                                         <th scope="col" rowSpan={2} className="k-header k-with-icon">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">Last Name</a>
                                         </th>
                                         <th scope="col" colSpan={2} className="k-header">Location</th>
                                         <th scope="col" rowSpan={2} className="k-header k-with-icon">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">Phone</a>
                                         </th>
                                     </tr>
                                     <tr>
                                         <th scope="col" className="k-header k-with-icon k-first">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">Country</a>
                                         </th>
                                         <th scope="col" className="k-header k-with-icon">
-                                            <a className="k-header-column-menu"><Icon name="more-vertical" /></a>
+                                            <a className="k-grid-header-menu k-grid-column-menu"><Icon name="more-vertical" /></a>
                                             <a className="k-link" href="#">City</a>
                                         </th>
                                     </tr>

package/src/grid/tests/grid-pager.tsx

@@ -49,15 +49,15 @@ root.render(
                             </tbody>
                         </table>
                     </div>
-                    <div className="k-widget k-pager-wrap k-grid-pager k-state-focused">
-                        <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-widget k-pager k-grid-pager 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>
                         <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 k-state-selected">1</span></li>
+                                <li><span className="k-link k-selected">1</span></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -117,14 +117,14 @@ root.render(
                             </div>
                         </div>
                     </div>
-                    <div className="k-widget k-pager-wrap k-grid-pager k-state-focused">
+                    <div className="k-widget k-pager k-grid-pager k-focus">
                         <div>
-                            <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="seek-w" /></a>
-                            <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                            <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="seek-w" /></a>
+                            <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                         </div>
                         <div>
                             <ul className="k-pager-numbers">
-                                <li><a className="k-link k-state-selected">1</a></li>
+                                <li><a className="k-link k-selected">1</a></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -145,15 +145,15 @@ root.render(
 
             <section>
                 <div className="k-widget k-grid k-grid-no-scrollbar">
-                    <div className="k-widget k-pager-wrap k-grid-pager k-grid-pager-top">
-                        <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-widget k-pager k-grid-pager k-grid-pager-top">
+                        <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>
                             </select>
                             <ul className="k-pager-numbers">
-                                <li><span className="k-link k-state-selected">1</span></li>
+                                <li><span className="k-link k-selected">1</span></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -201,14 +201,14 @@ root.render(
 
             <section>
                 <div className="k-widget k-grid k-grid-no-scrollbar">
-                    <div className="k-widget k-pager-wrap k-grid-pager k-grid-pager-top">
+                    <div className="k-widget k-pager k-grid-pager k-grid-pager-top">
                         <div>
-                            <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="seek-w" /></a>
-                            <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                            <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="seek-w" /></a>
+                            <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                         </div>
                         <div>
                             <ul className="k-pager-numbers">
-                                <li><a className="k-link k-state-selected">1</a></li>
+                                <li><a className="k-link k-selected">1</a></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>

package/src/grid/tests/grid-rtl-angular.tsx

@@ -74,14 +74,14 @@ root.render(
                             </div>
                         </div>
                     </div>
-                    <div className="k-widget k-pager-wrap k-grid-pager">
+                    <div className="k-widget k-pager k-grid-pager">
                         <div>
-                            <a className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="seek-w" /></a>
-                            <a className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
+                            <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="seek-w" /></a>
+                            <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
                         </div>
                         <div>
                             <ul className="k-pager-numbers">
-                                <li><a className="k-link k-state-selected">1</a></li>
+                                <li><a className="k-link k-selected">1</a></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -118,12 +118,12 @@ root.render(
                                                 <div><a className="k-grid-filter"><Icon name="filter" /></a></div>
                                                 <a className="k-link">Hover<span></span></a>
                                             </th>
-                                            <th className="k-header k-filterable k-state-focused">
+                                            <th className="k-header k-filterable k-focus">
                                                 <div><a className="k-grid-filter"><Icon name="filter" /></a></div>
                                                 <a className="k-link">Focus<span></span></a>
                                             </th>
                                             <th className="k-header k-filterable">
-                                                <div><a className="k-grid-filter k-state-active"><Icon name="filter" /></a></div>
+                                                <div><a className="k-grid-filter k-active"><Icon name="filter" /></a></div>
                                                 <a className="k-link">Active<span></span></a>
                                             </th>
                                             <th className="k-header k-filterable k-sorted">

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

@@ -60,7 +60,7 @@ root.render(
                             </tbody>
                         </table>
                     </div>
-                    <div className="k-widget k-pager-wrap k-grid-pager">
+                    <div className="k-widget k-pager k-grid-pager">
                         <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-numbers-wrap">

package/src/grid/tests/grid-sticky-columns-rtl.tsx

@@ -150,7 +150,7 @@ root.render(
                         <div className="k-height-container"><div></div></div>
                     </div>
                 </div>
-                <div className="k-pager-wrap k-pager k-widget k-grid-pager k-pager-sm" role="navigation">
+                <div className="k-pager k-widget k-grid-pager k-pager-sm" role="navigation">
                     <a href="#" className="k-link k-pager-nav k-pager-first k-state-disabled"><Icon name="arrow-end-left" /></a>
                     <a href="#" className="k-link k-pager-nav k-state-disabled"><Icon name="arrow-w" /></a>
                     <div className="k-pager-numbers-wrap">

package/src/grid/tests/grid.tsx

@@ -62,15 +62,15 @@ root.render(
                             </tbody>
                         </table>
                     </div>
-                    <div className="k-widget k-pager-wrap k-grid-pager">
-                        <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-widget k-pager k-grid-pager">
+                        <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>
                             </select>
                             <ul className="k-pager-numbers">
-                                <li><span className="k-link k-state-selected">1</span></li>
+                                <li><span className="k-link k-selected">1</span></li>
                                 <li><a className="k-link">2</a></li>
                                 <li><a className="k-link">3</a></li>
                             </ul>
@@ -99,15 +99,15 @@ root.render(
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Default<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-hover">
+                                        <th className="k-header k-filterable k-hover">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Hover<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-focused">
+                                        <th className="k-header k-filterable k-focus">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Focus<span></span></a>
                                         </th>
-                                        <th className="k-header k-filterable k-state-active">
+                                        <th className="k-header k-filterable k-active">
                                             <a className="k-grid-filter"><Icon name="filter" /></a>
                                             <a className="k-link">Active<span></span></a>
                                         </th>

package/src/menu-button/menu-button.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { classNames } from '../utils';
 import { Button } from '../button';
-import { Icon } from '../icon';
 
 
 export interface MenuButtonProps {
@@ -72,8 +71,9 @@ export class MenuButton extends React.Component<MenuButtonProps> {
                 selected={selected}
                 disabled={disabled}
                 icon={icon}
+                showArrow={showArrow}
+                arrowIconName={arrowIconName}
             >
-                {showArrow && <span className="k-menu-button-arrow k-button-arrow"><Icon name={arrowIconName} /></span>}
             </Button>
         );
     }

package/src/pager/tests/pager-responsive.tsx

@@ -24,23 +24,23 @@ root.render(
             <span></span>
 
             <span>lg</span>
-            <div className="k-pager-wrap k-widget k-pager-lg">
-                <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 k-pager-lg">
+                <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">
@@ -55,15 +55,15 @@ root.render(
             <span></span>
 
             <span>md</span>
-            <div className="k-pager-wrap k-widget k-pager-md">
-                <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-pager-md">
+                <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>
                     </select>
                     <ul className="k-pager-numbers">
-                        <li><span className="k-link k-state-selected">1</span></li>
+                        <li><span className="k-link k-selected">1</span></li>
                         <li><a className="k-link">2</a></li>
                         <li><a className="k-link">3</a></li>
                         <li><a className="k-link">4</a></li>
@@ -85,15 +85,15 @@ root.render(
             <span></span>
 
             <span>sm</span>
-            <div className="k-pager-wrap k-widget k-pager-sm">
-                <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-pager-sm">
+                <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>
                     </select>
                     <ul className="k-pager-numbers">
-                        <li><span className="k-link k-state-selected">1</span></li>
+                        <li><span className="k-link k-selected">1</span></li>
                         <li><a className="k-link">2</a></li>
                         <li><a className="k-link">3</a></li>
                         <li><a className="k-link">4</a></li>
@@ -112,17 +112,17 @@ root.render(
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
-            <div className="k-pager-wrap k-widget k-pager-sm">
-                <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-pager-sm">
+                <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>
                     </select>
                     <ul className="k-pager-numbers">
                         <li><a className="k-link">1</a></li>
-                        <li><a className="k-link k-state-hover">2</a></li>
-                        <li><span className="k-link k-state-selected">3</span></li>
+                        <li><a className="k-link k-hover">2</a></li>
+                        <li><span className="k-link k-selected">3</span></li>
                         <li><a className="k-link">4</a></li>
                         <li><a className="k-link">5</a></li>
                     </ul>
@@ -145,15 +145,15 @@ root.render(
             <span></span>
 
             <span>lg</span>
-            <div className="k-pager-wrap k-widget k-pager-lg" 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 k-pager-lg" 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>
                     </select>
                     <ul className="k-pager-numbers">
-                        <li><span className="k-link k-state-selected">1</span></li>
+                        <li><span className="k-link k-selected">1</span></li>
                         <li><a className="k-link">2</a></li>
                         <li><a className="k-link">3</a></li>
                         <li><a className="k-link">4</a></li>
@@ -175,15 +175,15 @@ root.render(
             <span></span>
 
             <span>md</span>
-            <div className="k-pager-wrap k-widget k-pager-md" 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 k-pager-md" 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>
                     </select>
                     <ul className="k-pager-numbers">
-                        <li><span className="k-link k-state-selected">1</span></li>
+                        <li><span className="k-link k-selected">1</span></li>
                         <li><a className="k-link">2</a></li>
                         <li><a className="k-link">3</a></li>
                         <li><a className="k-link">4</a></li>
@@ -205,15 +205,15 @@ root.render(
             <span></span>
 
             <span>sm</span>
-            <div className="k-pager-wrap k-widget k-pager-sm" 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 k-pager-sm" 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>
                     </select>
                     <ul className="k-pager-numbers">
-                        <li><span className="k-link k-state-selected">1</span></li>
+                        <li><span className="k-link k-selected">1</span></li>
                         <li><a className="k-link">2</a></li>
                         <li><a className="k-link">3</a></li>
                         <li><a className="k-link">4</a></li>
@@ -232,17 +232,17 @@ root.render(
 
                 <span className="k-pager-info k-label">1 - 20 of 91 items</span>
             </div>
-            <div className="k-pager-wrap k-widget k-pager-sm" 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 k-pager-sm" 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>
                     </select>
                     <ul className="k-pager-numbers">
                         <li><a className="k-link">1</a></li>
-                        <li><a className="k-link k-state-hover">2</a></li>
-                        <li><span className="k-link k-state-selected">3</span></li>
+                        <li><a className="k-link k-hover">2</a></li>
+                        <li><span className="k-link k-selected">3</span></li>
                         <li><a className="k-link">4</a></li>
                         <li><a className="k-link">5</a></li>
                     </ul>