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

package/dist/cjs/calendar/tests/calendar-modern.js

@@ -8939,7 +8939,8 @@ var options98 = {
 };
 var defaultOptions96 = {
   size: Size.medium,
-  fillMode: FillMode.solid
+  fillMode: FillMode.solid,
+  scrollButtons: "around"
 };
 var Toolbar = (props) => {
   const {
@@ -9111,18 +9112,38 @@ var Toolbar = (props) => {
         {
           [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
           [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
-          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && (scrollButtons === "hidden" || !scrollButtons),
-          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && scrollButtons === "hidden",
+          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== "both",
           [`${TOOLBAR_CLASSNAME}-section`]: section
         }
       ),
       children: [
         !scrollable && toolbarChildren,
-        scrollable && (scrollButtons === "hidden" || !scrollButtons) && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
+        scrollable && scrollButtons === "hidden" && /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
         scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(import_jsx_runtime342.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(ButtonGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren })
@@ -9131,16 +9152,56 @@ var Toolbar = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(ButtonGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] })
         ] }),
-        scrollable && scrollButtons === "around" && /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(import_jsx_runtime342.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
+        scrollable && (scrollButtons === "around" || !scrollButtons) && /* @__PURE__ */ (0, import_jsx_runtime342.jsxs)(import_jsx_runtime342.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+            "k-toolbar-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+          /* @__PURE__ */ (0, import_jsx_runtime342.jsx)("span", { className: classNames(
+            "k-toolbar-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime342.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
         ] })
       ]
     }
@@ -10170,15 +10231,35 @@ var TabStrip = (props) => {
           [`${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 })
       ),
       children: [
         position === "bottom" && children,
         /* @__PURE__ */ (0, import_jsx_runtime387.jsxs)(TabStripItemsWrapper, { orientation: orientationMap[position], children: [
-          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) }),
           /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(
             TabStripItems,
             {
@@ -10187,8 +10268,28 @@ var TabStrip = (props) => {
               children: tabStripItems
             }
           ),
-          scrollable && scrollButtons === "end" && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" })
+          scrollable && scrollButtons === "end" && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ (0, import_jsx_runtime387.jsx)("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime387.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) })
         ] }),
         position !== "bottom" && children
       ]

package/dist/cjs/chart/tests/chart.js

@@ -29,8 +29,8 @@ var chart_default = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "kdef4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "#000", strokeLinejoin: "miter", fill: "none" }) })
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "none", className: "k-var--background" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M38 68 L 1319 68 1319 338 38 338Z", stroke: "none", className: "k-var--background", fillOpacity: "0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0 L 1337 0 1337 400 0 400Z", stroke: "none", fill: "var(--kendo-chart-bg)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M38 68 L 1319 68 1319 338 38 338Z", stroke: "none", fill: "var(--kendo-chart-bg)", fillOpacity: "0" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M38.5 311.5 L 1319.5 311.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M38.5 284.5 L 1319.5 284.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M38.5 257.5 L 1319.5 257.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" }),
@@ -56,39 +56,39 @@ var chart_default = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1319.5 338.5 L 1319.5 342.5", stroke: "#c8c8c8", strokeWidth: "1", fill: "none" })
   ] }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: "url(#kdef4)", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "182.382", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "204.693", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "198.623", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "184.004", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "217.504", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "190.248", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "301.374", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "104.676", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "104.394", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "175.28", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "123.637", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "122.364", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "97.467", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "176.017", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "210.938", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "176.674", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "175.187", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "275.955", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "176.446", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "118.411", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "100.803", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "136.943", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-a", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "202.161", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "192.178", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "258.883", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "170.657", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "192.258", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-b", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "232.19", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "223.949", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "153.894", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", className: "k-var--series-c", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "182.382", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "204.693", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "198.623", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "184.004", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "217.504", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "190.248", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "301.374", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "104.676", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "465", cy: "104.394", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "175.28", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "123.637", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "122.364", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "97.467", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "749.667", cy: "176.017", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "210.938", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "892", cy: "176.674", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "607.333", cy: "175.187", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "322.667", cy: "275.955", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "176.446", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "118.411", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "100.803", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "136.943", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-1)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "202.161", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "192.178", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1034.333", cy: "258.883", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1176.667", cy: "170.657", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "192.258", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-2)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "38", cy: "232.19", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "180.333", cy: "223.949", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "1319", cy: "153.894", r: "5", stroke: "#fff", strokeWidth: "2", strokeOpacity: "1", fill: "var(--kendo-chart-series-3)", fillOpacity: "1" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "24.5", y: "358", stroke: "none", fillOpacity: "1", children: "2002" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "166.833", y: "358", stroke: "none", fillOpacity: "1", children: "2003" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "309.167", y: "358", stroke: "none", fillOpacity: "1", children: "2004" }),
@@ -113,17 +113,17 @@ var chart_default = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "558", y: "29", stroke: "none", fillOpacity: "1", children: "Gross domestic product growth" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "16px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "611", y: "47", stroke: "none", fillOpacity: "1", children: "/GDP annual %/" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(1,0,0,1,590.5,371)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#008fd3", strokeWidth: "0", className: "k-var--series-a" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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)" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "India" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { style: { cursor: "pointer" }, d: "M0 0 L 47 0 47 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(1,0,0,1,643.5,371)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#99d101", strokeWidth: "0", className: "k-var--series-b" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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)" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "World" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { style: { cursor: "pointer" }, d: "M0 0 L 52 0 52 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "matrix(1,0,0,1,701.5,371)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 5.5 L 15 5.5 15 8.5 0 8.5Z", stroke: "#f39b02", strokeWidth: "0", className: "k-var--series-c" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("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)" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { style: { font: "12px Arial, Helvetica, sans-serif", whiteSpace: "pre" }, x: "21", y: "11", stroke: "none", fillOpacity: "1", children: "Haiti" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { style: { cursor: "pointer" }, d: "M0 0 L 45 0 45 14 0 14Z", stroke: "none", fill: "#fff", fillOpacity: "0" })
     ] })

package/dist/cjs/chart-wizard/chart-wizard-preview-panel-content.js

@@ -9104,7 +9104,8 @@ var options96 = {
 };
 var defaultOptions96 = {
   size: Size.medium,
-  fillMode: FillMode.solid
+  fillMode: FillMode.solid,
+  scrollButtons: "around"
 };
 var Toolbar = (props) => {
   const {
@@ -9276,18 +9277,38 @@ var Toolbar = (props) => {
         {
           [`${TOOLBAR_CLASSNAME}-resizable`]: resizable,
           [`${TOOLBAR_CLASSNAME}-scrollable`]: scrollable,
-          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && (scrollButtons === "hidden" || !scrollButtons),
-          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition,
+          [`${TOOLBAR_CLASSNAME}-scrollable-overlay`]: scrollable && scrollButtons === "hidden",
+          [`${TOOLBAR_CLASSNAME}-scrollable-${scrollingPosition}`]: scrollingPosition && scrollingPosition !== "both",
           [`${TOOLBAR_CLASSNAME}-section`]: section
         }
       ),
       children: [
         !scrollable && toolbarChildren,
-        scrollable && (scrollButtons === "hidden" || !scrollButtons) && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
+        scrollable && scrollButtons === "hidden" && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
         scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(import_jsx_runtime351.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(ButtonGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren })
@@ -9296,16 +9317,56 @@ var Toolbar = (props) => {
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(ButtonGroup, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
-            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+              "k-toolbar-prev",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+              "k-toolbar-next",
+              "k-button",
+              optionClassNames("k-button", {
+                size,
+                fillMode,
+                themeColor: ThemeColor.base,
+                rounded: Roundness.medium
+              }),
+              "k-icon-button"
+            ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
           ] })
         ] }),
-        scrollable && scrollButtons === "around" && /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(import_jsx_runtime351.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-left", className: "k-toolbar-prev" }),
+        scrollable && (scrollButtons === "around" || !scrollButtons) && /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(import_jsx_runtime351.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+            "k-toolbar-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-left" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "k-toolbar-items k-toolbar-items-scroll", children: toolbarChildren }),
           /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(ToolbarSeparator, { className: "k-toolbar-button-separator" }),
-          /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { fillMode, size, icon: "caret-alt-right", className: "k-toolbar-next" })
+          /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: classNames(
+            "k-toolbar-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode,
+              themeColor: ThemeColor.base,
+              rounded: Roundness.medium
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Icon, { className: "k-button-icon", icon: "caret-alt-right" }) })
         ] })
       ]
     }
@@ -10314,15 +10375,35 @@ var TabStrip = (props) => {
           [`${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 })
       ),
       children: [
         position === "bottom" && children,
         /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(TabStripItemsWrapper, { orientation: orientationMap[position], children: [
-          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "start") && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && scrollButtons === "start" && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) }),
           /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
             TabStripItems,
             {
@@ -10331,8 +10412,28 @@ var TabStrip = (props) => {
               children: tabStripItems
             }
           ),
-          scrollable && scrollButtons === "end" && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["prev"]}`, className: "k-tabstrip-prev" }),
-          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Button, { fillMode: "flat", rounded: null, size, icon: `caret-alt-${caretMap[position]["next"]}`, className: "k-tabstrip-next" })
+          scrollable && scrollButtons === "end" && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("span", { className: classNames(
+            "k-tabstrip-prev",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["prev"]}` }) }),
+          scrollable && (scrollButtons === "around" || scrollButtons === "end") && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("span", { className: classNames(
+            "k-tabstrip-next",
+            "k-button",
+            optionClassNames("k-button", {
+              size,
+              fillMode: FillMode.flat,
+              themeColor: ThemeColor.base,
+              rounded: null
+            }),
+            "k-icon-button"
+          ), children: /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(Icon, { className: "k-button-icon", icon: `caret-alt-${caretMap[position]["next"]}` }) })
         ] }),
         position !== "bottom" && children
       ]