@progress/kendo-themes-html 10.2.0-dev.0 → 10.2.0-dev.2

package/src/chart/tests/chart.tsx

@@ -10,8 +10,8 @@ export default () =>(
                         <clipPath id="kdef4"><path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="#000" strokeLinejoin="miter" fill="none"></path></clipPath>
                     </defs>
                     <g>
-                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" className="k-var--background"></path>
-                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" className="k-var--background" fillOpacity="0"></path>
+                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" fill="var(--kendo-chart-bg)"></path>
+                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" fill="var(--kendo-chart-bg)" fillOpacity="0"></path>
                         <path d="M38.5 311.5 L 1319.5 311.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                         <path d="M38.5 284.5 L 1319.5 284.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                         <path d="M38.5 257.5 L 1319.5 257.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
@@ -38,39 +38,39 @@ export default () =>(
                     </g>
                     <g>
                         <g clipPath="url(#kdef4)">
-                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" className="k-var--series-a" fillOpacity="0.8"></path>
-                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" className="k-var--series-b" fillOpacity="0.8"></path>
-                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" className="k-var--series-c" fillOpacity="0.8"></path>
-                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
+                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-1)" fillOpacity="0.8"></path>
+                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-2)" fillOpacity="0.8"></path>
+                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-3)" fillOpacity="0.8"></path>
+                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="24.5" y="358" stroke="none" fillOpacity="1">2002</text>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="166.833" y="358" stroke="none" fillOpacity="1">2003</text>
                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="309.167" y="358" stroke="none" fillOpacity="1">2004</text>
@@ -95,21 +95,21 @@ export default () =>(
                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="558" y="29" stroke="none" fillOpacity="1">Gross domestic product growth</text>
                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="611" y="47" stroke="none" fillOpacity="1">/GDP annual %/</text>
                             <g transform="matrix(1,0,0,1,590.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" className="k-var--series-a"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" fill="var(--kendo-chart-series-1)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">India</text>
                                 </g>
                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 47 0 47 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                             </g>
                             <g transform="matrix(1,0,0,1,643.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" className="k-var--series-b"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" fill="var(--kendo-chart-series-2)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">World</text>
                                 </g>
                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 52 0 52 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                             </g>
                             <g transform="matrix(1,0,0,1,701.5,371)">
-                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" className="k-var--series-c"></path>
+                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" fill="var(--kendo-chart-series-3)"></path>
                                 <g>
                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">Haiti</text>
                                 </g>

package/src/chart-wizard/templates/chart-wizard-normal.tsx

@@ -18,8 +18,8 @@ export const ChartWizardNormal = (props) => (
                                         <clipPath id="kdef4"><path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="#000" strokeLinejoin="miter" fill="none"></path></clipPath>
                                     </defs>
                                     <g>
-                                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" className="k-var--background"></path>
-                                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" className="k-var--background" fillOpacity="0"></path>
+                                        <path d="M0 0 L 1337 0 1337 400 0 400Z" stroke="none" fill="var(--kendo-chart-bg)"></path>
+                                        <path d="M38 68 L 1319 68 1319 338 38 338Z" stroke="none" fill="var(--kendo-chart-bg)" fillOpacity="0"></path>
                                         <path d="M38.5 311.5 L 1319.5 311.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                                         <path d="M38.5 284.5 L 1319.5 284.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
                                         <path d="M38.5 257.5 L 1319.5 257.5" stroke="#c8c8c8" strokeWidth="1" fill="none"></path>
@@ -46,39 +46,39 @@ export const ChartWizardNormal = (props) => (
                                     </g>
                                     <g>
                                         <g clipPath="url(#kdef4)">
-                                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" className="k-var--series-a" fillOpacity="0.8"></path>
-                                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" className="k-var--series-b" fillOpacity="0.8"></path>
-                                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" className="k-var--series-c" fillOpacity="0.8"></path>
-                                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-a" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-b" fillOpacity="1"></circle>
-                                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
-                                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" className="k-var--series-c" fillOpacity="1"></circle>
+                                            <path d="M38 177.255 C 85.397 159.112 132.936 122.77 180.333 122.77 227.73 122.77 275.27 124.052 322.667 124.052 370.064 124.052 417.603 104.666 465 104.666 512.397 104.666 559.936 104.95 607.333 104.95 654.73 104.95 702.27 97.687 749.667 97.687 797.064 97.687 844.603 177.485 892 177.485 939.397 177.485 986.936 131.514 1034.333 118.787 1081.73 106.06 1129.27 101.048 1176.667 101.048 1224.064 101.048 1271.603 125.333 1319 137.457 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-1)" fillOpacity="0.8"></path>
+                                            <path d="M38 203.162 C 85.397 199.813 132.936 197.613 180.333 193.104 227.73 188.596 275.27 176.081 322.667 176.081 370.064 176.081 417.603 183.236 465 183.236 512.397 183.236 559.936 175.986 607.333 175.986 654.73 175.986 743.051 175.986 749.667 176.824 797.064 182.82 844.603 198.104 892 212.005 939.397 225.905 986.936 260.308 1034.333 260.308 1081.73 260.308 1129.27 171.424 1176.667 171.424 1224.064 171.424 1271.603 185.939 1319 193.186 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-2)" fillOpacity="0.8"></path>
+                                            <path d="M38 233.416 C 85.397 230.651 132.936 225.113 180.333 225.113 227.73 225.113 275.27 277.506 322.667 277.506 370.064 277.506 417.603 218.685 465 205.714 487.345 199.598 559.936 203.069 607.333 199.598 654.73 196.127 702.27 184.87 749.667 184.87 797.064 184.87 844.603 218.62 892 218.62 939.397 218.62 986.936 191.161 1034.333 191.161 1081.73 191.161 1129.27 303.116 1176.667 303.116 1224.064 303.116 1271.603 204.012 1319 154.535 L 1319 338 38 338" stroke="none" fill="var(--kendo-chart-series-3)" fillOpacity="0.8"></path>
+                                            <circle cx="465" cy="182.382" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="465" cy="204.693" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="198.623" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="184.004" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="217.504" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="190.248" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="301.374" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="104.676" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="465" cy="104.394" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="175.28" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="123.637" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="122.364" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="97.467" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="749.667" cy="176.017" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="210.938" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="892" cy="176.674" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="607.333" cy="175.187" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="322.667" cy="275.955" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="176.446" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="118.411" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="100.803" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="136.943" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-1)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="202.161" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="192.178" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1034.333" cy="258.883" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1176.667" cy="170.657" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="192.258" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-2)" fillOpacity="1"></circle>
+                                            <circle cx="38" cy="232.19" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="180.333" cy="223.949" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
+                                            <circle cx="1319" cy="153.894" r="5" stroke="#fff" strokeWidth="2" strokeOpacity="1" fill="var(--kendo-chart-series-3)" fillOpacity="1"></circle>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="24.5" y="358" stroke="none" fillOpacity="1">2002</text>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="166.833" y="358" stroke="none" fillOpacity="1">2003</text>
                                             <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="309.167" y="358" stroke="none" fillOpacity="1">2004</text>
@@ -103,21 +103,21 @@ export const ChartWizardNormal = (props) => (
                                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="558" y="29" stroke="none" fillOpacity="1">Gross domestic product growth</text>
                                             <text style={{ font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="611" y="47" stroke="none" fillOpacity="1">/GDP annual %/</text>
                                             <g transform="matrix(1,0,0,1,590.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" className="k-var--series-a"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#008fd3" strokeWidth="0" fill="var(--kendo-chart-series-1)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">India</text>
                                                 </g>
                                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 47 0 47 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                                             </g>
                                             <g transform="matrix(1,0,0,1,643.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" className="k-var--series-b"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#99d101" strokeWidth="0" fill="var(--kendo-chart-series-2)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">World</text>
                                                 </g>
                                                 <path style={{ cursor: 'pointer' }} d="M0 0 L 52 0 52 14 0 14Z" stroke="none" fill="#fff" fillOpacity="0"></path>
                                             </g>
                                             <g transform="matrix(1,0,0,1,701.5,371)">
-                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" className="k-var--series-c"></path>
+                                                <path d="M0 5.5 L 15 5.5 15 8.5 0 8.5Z" stroke="#f39b02" strokeWidth="0" fill="var(--kendo-chart-series-3)"></path>
                                                 <g>
                                                     <text style={{ font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }} x="21" y="11" stroke="none" fillOpacity="1">Haiti</text>
                                                 </g>

package/src/prompt/prompt-view.tsx

@@ -31,7 +31,7 @@ export const PromptView = (
             { showSearch && <Textarea resize="y" rows={1} placeholder="Ask or generate content with AI"></Textarea> }
             { suggestions &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Prompt Suggestions</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Prompt Suggestions</IconTextButton>
                     <div className="k-prompt-expander-content">
                         <>{suggestions}</>
                     </div>
@@ -39,7 +39,7 @@ export const PromptView = (
             }
             { settings &&
                 <div className="k-prompt-expander">
-                    <IconTextButton fillMode={"flat"} icon="chevron-down">Settings</IconTextButton>
+                    <IconTextButton fillMode={"flat"} icon="chevron-up">Settings</IconTextButton>
                     <div className="k-prompt-expander-content">
                         {settings}
                     </div>

package/src/tabstrip/tabstrip.spec.tsx

@@ -1,5 +1,5 @@
-import { Button, TabStripItems, TabStripItemsWrapper } from '..';
-import { classNames, optionClassNames, Size } from '../misc';
+import { Icon, TabStripItems, TabStripItemsWrapper } from '..';
+import { classNames, FillMode, optionClassNames, Size, ThemeColor } from '../misc';
 
 export const TABSTRIP_CLASSNAME = `k-tabstrip`;
 
@@ -19,7 +19,7 @@ export type KendoTabStripProps = KendoTabStripOptions & {
     tabStripItems?: React.JSX.Element | React.JSX.Element[];
     scrollable?: boolean;
     scrollButtons?: "around" | "start" | "end" | "hidden";
-    scrollingPosition?: "start" | "end";
+    scrollingPosition?: "start" | "end" | "both";
     dir?: "rtl" | "ltr";
 };
 
@@ -80,7 +80,7 @@ export const TabStrip = (
                     [`${TABSTRIP_CLASSNAME}-${position}`]: position,
                     [`${TABSTRIP_CLASSNAME}-scrollable`]: scrollable,
                     [`${TABSTRIP_CLASSNAME}-scrollable-overlay`]: (scrollable && (scrollButtons === 'hidden' || !scrollButtons) ),
-                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+                    [`${TABSTRIP_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition  && scrollingPosition !== 'both',
                 },
                 optionClassNames(TABSTRIP_CLASSNAME, {size})
             )}>
@@ -88,21 +88,69 @@ export const TabStrip = (
             <TabStripItemsWrapper orientation={orientationMap[position]}>
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'start') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable && scrollButtons === 'start' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
                 <TabStripItems className={classNames({[`k-tabstrip-items-scroll`]: scrollable && scrollButtons === 'hidden'})}
                 tabAlignment={tabAlignmentMap[tabAlignment]}>
                     {tabStripItems}
                 </TabStripItems>
                 {scrollable && scrollButtons === 'end' &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["prev"]}`} className="k-tabstrip-prev"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-prev',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["prev"]}`} />
+                    </span>
                 }
                 {scrollable &&
                     (scrollButtons === 'around' || scrollButtons === 'end') &&
-                    <Button fillMode="flat" rounded={null} size={size} icon={`caret-alt-${caretMap[position]["next"]}`} className="k-tabstrip-next"></Button>
+                    <span className={classNames(
+                        'k-tabstrip-next',
+                        'k-button',
+                        optionClassNames('k-button', {
+                            size,
+                            fillMode: FillMode.flat,
+                            themeColor: ThemeColor.base,
+                            rounded: null
+                        }),
+                        'k-icon-button',
+                    )}>
+                        <Icon className='k-button-icon' icon={`caret-alt-${caretMap[position]["next"]}`} />
+                    </span>
                 }
             </TabStripItemsWrapper>
             {position !== "bottom" && children}

package/src/tabstrip/tests/tabstrip-scrollable-buttons-hidden.tsx

@@ -53,7 +53,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null}
+                <TabStripScrollableButtonsHidden scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -117,7 +117,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden position="left" scrollingPosition={null}
+                <TabStripScrollableButtonsHidden position="left" scrollingPosition="both"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />
@@ -182,7 +182,7 @@ export default () => (
 
 
             <section>
-                <TabStripScrollableButtonsHidden scrollingPosition={null} dir="rtl"
+                <TabStripScrollableButtonsHidden scrollingPosition="both" dir="rtl"
                     tabStripItems={
                         <>
                             <TabStripItem first value="First" />

package/src/toolbar/tests/toolbar-fill-modes.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../button';
 import { ColorPicker } from '../../colorpicker';
 import { ButtonGroup } from '../../button-group';
-import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollable } from '../../toolbar';
+import { ToolbarItem, ToolbarSeparator, ToolbarResizable, Toolbar, ToolbarScrollableButtonsHidden } from '../../toolbar';
 
 import { Combobox, MenuButton } from '../..';
 
@@ -52,7 +52,7 @@ export default () =>(
                     </section>
                     <span className="k-colspan-all k-col-span-full">{fillMode} with overlay</span>
                     <section className="k-colspan-all k-col-span-full">
-                      <ToolbarScrollable fillMode={fillMode}>
+                      <ToolbarScrollableButtonsHidden scrollingPosition="both" fillMode={fillMode}>
                           <Button icon="arrow-rotate-ccw" fillMode={fillMode}></Button>
                           <Button icon="arrow-rotate-cw" fillMode={fillMode}></Button>
                           <ToolbarSeparator></ToolbarSeparator>
@@ -88,7 +88,7 @@ export default () =>(
                           <MenuButton fillMode={fillMode} icon="align-middle" showArrow></MenuButton>
                           <ToolbarSeparator></ToolbarSeparator>
                           <Button fillMode={fillMode} icon="text-wrap"></Button>
-                      </ToolbarScrollable>
+                      </ToolbarScrollableButtonsHidden>
                     </section>
                 </>
             ))}

package/src/toolbar/tests/toolbar-scrollable-buttons-hidden.tsx

@@ -17,12 +17,12 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle RTL</span>
             <section className="k-colspan-all k-col-span-full" dir="rtl">
-                <ToolbarScrollableButtonsHidden scrollingPosition={null} />
+                <ToolbarScrollableButtonsHidden scrollingPosition="both" />
             </section>
 
         </div>

package/src/toolbar/tests/toolbar-scrollable-buttons.tsx

@@ -7,7 +7,7 @@ export default () =>(
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Around</span>
             <section className="k-colspan-all k-col-span-full">
-                <ToolbarScrollable scrollButtons="around" />
+                <ToolbarScrollable />
             </section>
 
             <span className="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>