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/dist/progressbar/tests/progressbar-horizontal-reverse.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/progressbar/tests/progressbar-horizontal-reverse.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .k-progressbar-indeterminate,\n    .k-progressbar-indeterminate::before,\n    .k-progressbar-indeterminate::after {\n        /* Comment if you need to preview the indeterminate animation */\n        animation: none !important;\n    }\n\n    .grid hr {\n        width: 100%;\n        grid-column: 1 / -1;\n        visibility: hidden;\n    }\n\n    .subgrid-horizontal {\n        display: grid;\n        grid-template-columns: auto 1fr 1fr;\n        grid-gap: 20px;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <div className=\"subgrid-horizontal\">\n                <span></span>\n                <span>LTR</span>\n                <span>RTL</span>\n\n                <span>Reverse start</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"95%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"105.263%\" }} >\n                            <span className=\"k-progress-status\">95%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"95%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"105.263%\" }} >\n                            <span className=\"k-progress-status\">95%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>Reverse center</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                            <span className=\"k-progress-status\">50%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                            <span className=\"k-progress-status\">50%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>Reverse end</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"5%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"2000%\" }} >\n                            <span className=\"k-progress-status\">5%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: \"5%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"2000%\" }} >\n                            <span className=\"k-progress-status\">5%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% start</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% center</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% end</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    .k-progressbar-indeterminate,\n    .k-progressbar-indeterminate::before,\n    .k-progressbar-indeterminate::after {\n        /* Comment if you need to preview the indeterminate animation */\n        animation: none !important;\n    }\n\n    .grid hr {\n        width: 100%;\n        grid-column: 1 / -1;\n        visibility: hidden;\n    }\n\n    .subgrid-horizontal {\n        display: grid;\n        grid-template-columns: auto 1fr 1fr;\n        grid-gap: 20px;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n            <div className=\"subgrid-horizontal\">\n                <span></span>\n                <span>LTR</span>\n                <span>RTL</span>\n\n                <span>Reverse start</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"95%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"105.263%\" }} >\n                            <span className=\"k-progress-status\">95%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"95%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"105.263%\" }} >\n                            <span className=\"k-progress-status\">95%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>Reverse center</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                            <span className=\"k-progress-status\">50%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                            <span className=\"k-progress-status\">50%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>Reverse end</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"5%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"2000%\" }} >\n                            <span className=\"k-progress-status\">5%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: \"5%\" }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"2000%\" }} >\n                            <span className=\"k-progress-status\">5%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% start</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-start\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% center</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-center\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n\n                <span>R 100% end</span>\n                <div className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n                <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse\">\n                    <span className=\"k-progress-status-wrap k-progress-end\">\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                    <div className=\"k-selected\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                            <span className=\"k-progress-status\">100%</span>\n                        </span>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qBAAkB;AAClB,sBAAqB;AAErB,MAAM,OAAO,cAAAA,QAAS;AAAA,IAClB,SAAS,eAAe,KAAK;AAAA,EACjC;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBd,OAAK;AAAA,IACD,6BAAAC,QAAA,2BAAAA,QAAA,gBACI,6BAAAA,QAAA,cAAC,eAAO,KAAM,GACd,6BAAAA,QAAA,cAAC;AAAA,MAAI,IAAG;AAAA,MAAY,WAAU;AAAA,OAC1B,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC,YAAK,GACN,6BAAAA,QAAA,cAAC,cAAK,KAAG,GACT,6BAAAA,QAAA,cAAC,cAAK,KAAG,GAET,6BAAAA,QAAA,cAAC,cAAK,eAAa,GACnB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,MAAM;AAAA,OAC9C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA0C,OAAO,EAAE,OAAO,WAAW;AAAA,OACjF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,MAAM;AAAA,OAC9C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA0C,OAAO,EAAE,OAAO,WAAW;AAAA,OACjF,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,gBAAc,GACpB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,MAAM;AAAA,OAC9C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA2C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC9E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,MAAM;AAAA,OAC9C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA2C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC9E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,KAAG,CAC3C,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,aAAW,GACjB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,IAAE,CAC1C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,KAAK;AAAA,OAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO,EAAE,OAAO,QAAQ;AAAA,OAC5E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,IAAE,CAC1C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,IAAE,CAC1C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,KAAK;AAAA,OAC7C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO,EAAE,OAAO,QAAQ;AAAA,OAC5E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,IAAE,CAC1C,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,cAAY,GAClB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA0C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA0C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC7E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,eAAa,GACnB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA2C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC9E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAA2C,OAAO,EAAE,OAAO,OAAO;AAAA,OAC9E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,GAEA,6BAAAA,QAAA,cAAC,cAAK,YAAU,GAChB,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,OACX,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO,EAAE,OAAO,OAAO;AAAA,OAC3E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAI;AAAA,MAAM,WAAU;AAAA,OACrB,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OACZ,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,WAAU;AAAA,MAAa,OAAO,EAAE,OAAO,OAAO;AAAA,OAC/C,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,MAAwC,OAAO,EAAE,OAAO,OAAO;AAAA,OAC3E,6BAAAA,QAAA,cAAC;AAAA,MAAK,WAAU;AAAA,OAAoB,MAAI,CAC5C,CACJ,CACJ,CACJ,CACJ,CACJ;AAAA,EACJ;",
   "names": ["ReactDOM", "React"]
 }

package/dist/progressbar/tests/progressbar-vertical.js CHANGED Viewed

@@ -47,7 +47,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "95%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { height: "95%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -61,7 +61,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected k-complete",
+      className: "k-selected k-complete",
       style: { height: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -79,32 +79,32 @@
       className: "k-item",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-last k-state-selected",
+      className: "k-item k-last k-selected",
       style: { height: "20%" }
     }))), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-widget k-progressbar k-progressbar-vertical"
     }, /* @__PURE__ */ import_react.default.createElement("ul", {
       className: "k-reset"
     }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected k-first",
+      className: "k-item k-selected k-first",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-last k-state-selected",
+      className: "k-item k-last k-selected",
       style: { height: "20%" }
     }))), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse"
@@ -113,7 +113,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "5%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { height: "5%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -127,7 +127,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected k-complete",
+      className: "k-selected k-complete",
       style: { height: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -139,13 +139,13 @@
     }, /* @__PURE__ */ import_react.default.createElement("ul", {
       className: "k-reset"
     }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-first k-state-selected",
+      className: "k-item k-first k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
       className: "k-item",
@@ -158,19 +158,19 @@
     }, /* @__PURE__ */ import_react.default.createElement("ul", {
       className: "k-reset"
     }, /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-first k-state-selected",
+      className: "k-item k-first k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected",
+      className: "k-item k-selected",
       style: { height: "20%" }
     }), /* @__PURE__ */ import_react.default.createElement("li", {
-      className: "k-item k-state-selected k-last",
+      className: "k-item k-selected k-last",
       style: { height: "20%" }
     }))), /* @__PURE__ */ import_react.default.createElement("div", {
       className: "k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate"
@@ -183,7 +183,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { height: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -194,7 +194,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { height: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -207,7 +207,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "50%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { height: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",

package/dist/progressbar/tests/progressbar-vertical.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/progressbar/tests/progressbar-vertical.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area {\n        justify-items: center;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-12\">\n\n            <span>Partial</span>\n            <span>100%</span>\n            <span>Chunk</span>\n            <span>Ch 100%</span>\n            <span>Reversed</span>\n            <span>R 100%</span>\n            <span>R ch</span>\n            <span>R ch 100%</span>\n            <span>Indeterminate</span>\n            <span>No Label</span>\n            <span>Thin style</span>\n            <span>Thick style</span>\n\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ height: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected k-complete\" style={{ height: \"100%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"100%\" }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last k-state-selected\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-state-selected k-first\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last k-state-selected\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ height: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected k-complete\" style={{ height: \"100%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"100%\" }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-state-selected k-last\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate\">\n                <span className=\"k-progress-status-wrap\">\n                    <span className=\"k-progress-status\">0</span>\n                </span>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\" style={{ width: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\" style={{ width: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area {\n        justify-items: center;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid k-grid-cols-12\">\n\n            <span>Partial</span>\n            <span>100%</span>\n            <span>Chunk</span>\n            <span>Ch 100%</span>\n            <span>Reversed</span>\n            <span>R 100%</span>\n            <span>R ch</span>\n            <span>R ch 100%</span>\n            <span>Indeterminate</span>\n            <span>No Label</span>\n            <span>Thin style</span>\n            <span>Thick style</span>\n\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-selected\" style={{ height: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected k-complete\" style={{ height: \"100%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"100%\" }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last k-selected\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-selected k-first\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last k-selected\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-selected\" style={{ height: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected k-complete\" style={{ height: \"100%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"100%\" }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-last\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse\">\n                <ul className=\"k-reset\">\n                    <li className=\"k-item k-first k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected\" style={{ height: \"20%\" }} ></li>\n                    <li className=\"k-item k-selected k-last\" style={{ height: \"20%\" }} ></li>\n                </ul>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate\">\n                <span className=\"k-progress-status-wrap\">\n                    <span className=\"k-progress-status\">0</span>\n                </span>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\" style={{ width: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div className=\"k-widget k-progressbar k-progressbar-vertical\" style={{ width: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-selected\" style={{ height: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ height: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n"],
+  "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

package/dist/progressbar/tests/progressbar.js CHANGED Viewed

@@ -47,7 +47,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "5%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "5%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-start",
@@ -62,7 +62,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "5%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "5%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-start",
@@ -76,7 +76,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "50%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-center",
@@ -91,7 +91,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "50%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-center",
@@ -105,7 +105,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "95%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "95%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -120,7 +120,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "95%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "95%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -134,7 +134,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-start",
@@ -149,7 +149,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-start",
@@ -163,7 +163,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-center",
@@ -178,7 +178,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-center",
@@ -192,7 +192,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -207,7 +207,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "100%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "100%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -219,7 +219,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -230,7 +230,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -241,7 +241,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -253,7 +253,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end"
     }), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -266,7 +266,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "50%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",
@@ -282,7 +282,7 @@
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status"
     }, "50%")), /* @__PURE__ */ import_react.default.createElement("div", {
-      className: "k-state-selected",
+      className: "k-selected",
       style: { width: "50%" }
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-progress-status-wrap k-progress-end",

package/dist/progressbar/tests/progressbar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/progressbar/tests/progressbar.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area {\n        grid-template-columns: auto 1fr 1fr;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n\n            <span></span>\n            <span>LTR</span>\n            <span>RTL</span>\n\n            <span>Partial start</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>Partial center</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>Partial end</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% start</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% center</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% end</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <span>No Label</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n\n            <span>Thin style</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n\n            <span>Thick style</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-state-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst style = `\n    #test-area {\n        grid-template-columns: auto 1fr 1fr;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{style}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n\n            <span></span>\n            <span>LTR</span>\n            <span>RTL</span>\n\n            <span>Partial start</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">5%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"5%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: \"2000%\" }} >\n                        <span className=\"k-progress-status\">5%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>Partial center</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>Partial end</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">95%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"95%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"105.263%\" }} >\n                        <span className=\"k-progress-status\">95%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% start</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-start\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-start\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% center</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-center\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-center\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n\n            <span>100% end</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">100%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: '100%' }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: '100%' }} >\n                        <span className=\"k-progress-status\">100%</span>\n                    </span>\n                </div>\n            </div>\n            <span>No Label</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\">\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n\n            <span>Thin style</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: \"2px\" }} >\n                <span className=\"k-progress-status-wrap k-progress-end\"></span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} ></span>\n                </div>\n            </div>\n\n            <span>Thick style</span>\n            <div className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n            <div dir=\"rtl\" className=\"k-widget k-progressbar k-progressbar-horizontal\" style={{ height: '50px' }} >\n                <span className=\"k-progress-status-wrap k-progress-end\">\n                    <span className=\"k-progress-status\">50%</span>\n                </span>\n                <div className=\"k-selected\" style={{ width: \"50%\" }} >\n                    <span className=\"k-progress-status-wrap k-progress-end\" style={{ width: \"200%\" }} >\n                        <span className=\"k-progress-status\">50%</span>\n                    </span>\n                </div>\n            </div>\n\n        </div>\n    </>\n);\n"],
+  "mappings": "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",
   "names": ["ReactDOM", "React"]
 }

package/dist/rating/tests/rating.js CHANGED Viewed

@@ -538,7 +538,7 @@
     })))), /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-rating-label"
     }, /* @__PURE__ */ import_react.default.createElement("span", null, "1.5 / 3")))), /* @__PURE__ */ import_react.default.createElement("span", null, "Readonly"), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-rating k-widget k-state-readonly"
+      className: "k-rating k-widget k-readonly"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-rating-container"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
@@ -562,7 +562,7 @@
     }, /* @__PURE__ */ import_react.default.createElement(Icon, {
       name: "star-outline"
     }))))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement("span", {
-      className: "k-rating k-widget k-state-readonly"
+      className: "k-rating k-widget k-readonly"
     }, /* @__PURE__ */ import_react.default.createElement("span", {
       className: "k-rating-container"
     }, /* @__PURE__ */ import_react.default.createElement("span", {