@progress/kendo-vue-buttons 6.1.0-develop.9 → 6.1.1-develop.1

package/toolbar/Toolbar.mjs

@@ -5,18 +5,26 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as n, createVNode as a } from "vue";
-import { validatePackage as u, kendoThemeMaps as l, getDefaultSlots as f, Keys as r } from "@progress/kendo-vue-common";
-import { toolbarButtons as d, internalButtons as h } from "../util.mjs";
-import { packageMetadata as c } from "../package-metadata.mjs";
-const y = /* @__PURE__ */ n({
+import { defineComponent as d, cloneVNode as u, createVNode as a, Fragment as b } from "vue";
+import { validatePackage as p, kendoThemeMaps as S, canUseDOM as c, getDefaultSlots as v, Keys as h } from "@progress/kendo-vue-common";
+import { toolbarButtons as w, internalButtons as g } from "../util.mjs";
+import { packageMetadata as m } from "../package-metadata.mjs";
+import { ToolbarScrollable as y } from "./tools/ToolbarScrollable.mjs";
+import { ToolbarOverflowSection as T } from "./tools/ToolbarOverflowSection.mjs";
+const I = /* @__PURE__ */ d({
   name: "KendoToolbar",
   props: {
     tabIndex: {
       type: Number,
       default: 0
     },
-    dir: String,
+    dir: {
+      type: String,
+      validator: function(t) {
+        return [null, "ltr", "rtl"].includes(t);
+      },
+      default: "ltr"
+    },
     keyboardNavigation: {
       type: Boolean,
       default: !0
@@ -40,54 +48,142 @@ const y = /* @__PURE__ */ n({
         return [null, "solid", "flat", "outline"].includes(t);
       }
     },
-    ariaLabel: String
+    ariaLabel: String,
+    overflow: {
+      type: String,
+      default: "section",
+      validator: function(t) {
+        return [null, "none", "section", "scroll"].includes(t);
+      }
+    },
+    scrollButtons: {
+      type: String,
+      default: "auto",
+      validator: function(t) {
+        return [null, "hidden", "visible", "auto"].includes(t);
+      }
+    },
+    scrollButtonsPosition: {
+      type: String,
+      default: "split",
+      validator: function(t) {
+        return [null, "start", "end", "split"].includes(t);
+      }
+    },
+    buttonScrollSpeed: {
+      type: Number,
+      default: 100
+    }
+  },
+  data() {
+    return {
+      defaultSlot: null,
+      offsetWidth: 0,
+      offsetHeight: 0,
+      currentButtons: [],
+      focusedSelector: "",
+      isScrollStartPosition: !0,
+      isScrollEndPosition: !1,
+      focusableButtons: [],
+      isOverflowing: !1,
+      scrollContentRef: null,
+      lastToolbarWidthRef: 0,
+      overFlowToolsRef: [],
+      overFlowOpened: !1,
+      visibleToolsRef: void 0
+    };
   },
   created() {
-    this.offsetHeight = 0, this.offsetWidth = 0, this.currentButtons = [], this.focusedSelector = this.selectors.map((t) => t + ":focus").join(","), u(c);
+    this.focusedSelector = this.selectors.map((t) => t + ":focus").join(","), p(m);
   },
   computed: {
     selectors() {
-      return this.$props.buttons || d;
+      return this.$props.buttons || w;
     },
     wrapperClass() {
       const {
         size: t,
-        fillMode: e
+        fillMode: e,
+        overflow: o,
+        scrollButtons: s
       } = this.$props;
       return {
         "k-toolbar": !0,
         [`k-toolbar-${e}`]: e,
-        [`k-toolbar-${l.sizeMap[t] || t}`]: t
+        [`k-toolbar-${S.sizeMap[t] || t}`]: t,
+        "k-toolbar-scrollable": o === "scroll",
+        "k-toolbar-scrollable-overlay": o === "scroll" && (s === "hidden" || s === void 0),
+        "k-toolbar-scrollable-start": o === "scroll" && s === "hidden" && this.isScrollStartPosition,
+        "k-toolbar-scrollable-end": o === "scroll" && s === "hidden" && this.isScrollEndPosition,
+        "k-toolbar-section": o && o === "section"
       };
     }
   },
   mounted() {
-    window.addEventListener("resize", this.onWindowResize);
+    c && window.ResizeObserver && (this.observerResize = new window.ResizeObserver(this.onWindowResize), this.observerResize.observe(this.$el));
     const t = this.$el;
-    t && (this.offsetWidth = t.offsetWidth, this.offsetHeight = t.offsetHeight, this.$props.keyboardNavigation !== !1 && (this.currentButtons = this.getCurrentButtons(), this.setTabIndex(0)));
+    t && (this.offsetWidth = t.offsetWidth, this.offsetHeight = t.offsetHeight, this.$props.keyboardNavigation !== !1 && (this.currentButtons = this.getCurrentButtons(), this.setTabIndex(0))), this.scrollContentRef = this.$refs.toolbarScrollable && this.$refs.toolbarScrollable.scrollContentRef, this.defaultSlot && (this.visibleToolsRef = this.defaultSlot.filter((e) => e && e.type).map((e, o) => u(e, {
+      key: e.key || o
+    })), this.$nextTick(() => {
+      this.checkOverflow(), this.initOverflow(this.$refs.toolbar);
+    }));
   },
   updated() {
     !this.$el || this.$props.keyboardNavigation === !1 || (this.currentButtons = this.getCurrentButtons(), this.setTabIndex(this.focusedIndex()));
   },
   unmounted() {
-    window.removeEventListener("resize", this.onWindowResize), this.currentButtons.length = 0;
+    c && this.observerResize && this.observerResize.disconnect(), this.currentButtons.length = 0;
   },
   render() {
-    const t = f(this);
-    return a("div", {
+    const {
+      overflow: t,
+      scrollButtons: e,
+      scrollButtonsPosition: o,
+      prevButton: s,
+      nextButton: l,
+      buttonScrollSpeed: n,
+      dir: f,
+      fillMode: i,
+      size: r
+    } = this.$props;
+    return this.defaultSlot = v(this), a("div", {
+      ref: "toolbar",
       class: this.wrapperClass,
       role: "toolbar",
-      dir: this.$props.dir,
+      dir: f,
       "aria-label": this.$props.ariaLabel,
       onKeydown: this.onKeyDown
-    }, [t]);
+    }, [t === "scroll" && a(b, null, [a(y, {
+      ref: "toolbarScrollable",
+      scrollButtons: e,
+      scrollButtonsPosition: o,
+      prevButton: s,
+      nextButton: l,
+      isOverflowing: this.isOverflowing,
+      buttonScrollSpeed: n,
+      dir: f,
+      isScrollStartPosition: this.isScrollStartPosition,
+      isScrollEndPosition: this.isScrollEndPosition,
+      toolbarItems: this.defaultSlot,
+      onContentscroll: this.onContentScroll
+    }, null)]), t === "section" && a(T, {
+      opened: this.overFlowOpened,
+      toolbarRef: this.$refs.toolbar,
+      toolbarWidth: this.offsetWidth,
+      fillMode: i,
+      size: r,
+      visibleTools: this.visibleToolsRef,
+      overFlowTools: this.overFlowToolsRef,
+      onToggleoverflow: this.onToggleoverflow,
+      allTools: this.defaultSlot
+    }, null), t === "none" && this.defaultSlot]);
   },
   methods: {
     getCurrentButtons() {
       return this.$el && this.$el.querySelectorAll ? Array.from(this.$el.querySelectorAll(this.selectors.join(","))) : [];
     },
     getInternalButtons() {
-      return this.$el && this.$el.querySelectorAll ? Array.from(this.$el.querySelectorAll(h)) : [];
+      return this.$el && this.$el.querySelectorAll ? Array.from(this.$el.querySelectorAll(g)) : [];
     },
     focusedIndex() {
       const t = this.$el && this.$el.querySelector && this.$el.querySelector(this.focusedSelector);
@@ -107,10 +203,10 @@ const y = /* @__PURE__ */ n({
       if (this.$props.keyboardNavigation === !1)
         return;
       const e = t.target;
-      if (!(t.keyCode === r.left || t.keyCode === r.right) || t.defaultPrevented || this.currentButtons.findIndex((i) => i === e) === -1)
+      if (!(t.keyCode === h.left || t.keyCode === h.right) || t.defaultPrevented || this.currentButtons.findIndex((l) => l === e) === -1)
         return;
       const s = this.focusedIndex();
-      t.keyCode === r.left ? this.focusButton(s, s - 1) : this.focusButton(s, s + 1);
+      t.keyCode === h.left ? this.focusButton(s, s - 1) : this.focusButton(s, s + 1);
     },
     focusButton(t, e) {
       const {
@@ -118,30 +214,71 @@ const y = /* @__PURE__ */ n({
       } = this.$props, s = this.currentButtons[e];
       if (s) {
         s.tabIndex = o, s.focus();
-        const i = this.currentButtons[t];
-        i && (i.tabIndex = -1);
+        const l = this.currentButtons[t];
+        l && (l.tabIndex = -1);
       }
     },
-    onWindowResize(t) {
-      const e = this.$el;
-      if (!e)
-        return;
-      const o = e.offsetWidth, s = e.offsetHeight;
-      if (this.offsetWidth !== o || this.offsetHeight !== s) {
-        this.offsetWidth = o, this.offsetHeight = s;
-        const i = {
-          offsetWidth: this.offsetWidth,
-          offsetHeight: this.offsetHeight
-        };
-        this.$emit("resize", {
-          target: this,
-          ...i,
-          nativeEvent: t
-        });
+    initOverflow(t, e) {
+      let o = 200;
+      const s = [], l = [];
+      Array.from(t.children).forEach((n, f) => {
+        o += Math.ceil(n.clientWidth), o <= this.$refs.toolbar.offsetWidth - 50 ? s.push(this.visibleToolsRef[f]) : l.push(this.visibleToolsRef[f]);
+      }), this.visibleToolsRef = s, this.overFlowToolsRef = l;
+    },
+    checkOverflow() {
+      if (this.$props.overflow === "scroll") {
+        const t = this.scrollContentRef;
+        t && (this.isOverflowing = t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight, this.isOverflowing ? this.onContentScroll() : (this.isScrollStartPosition = !0, this.isScrollEndPosition = !0));
+      } else if (this.$props.overflow === "section" || this.$props.overflow === void 0) {
+        const t = this.$refs.toolbar;
+        let e = 0;
+        if (t) {
+          const o = t.offsetWidth, s = parseInt(window.getComputedStyle(t).gap || "0", 10), l = Array.from(t.children).reduce((i, r) => (i += Math.ceil(r.clientWidth), i), 0), n = Array.from(t.children).length, f = s * 2;
+          if (e = 36 + Number(l) + n * s + f, e > o) {
+            const i = [...this.visibleToolsRef], r = i.pop();
+            this.visibleToolsRef = i, r && (this.overFlowToolsRef = [r, ...this.overFlowToolsRef]), this.lastToolbarWidthRef = o;
+          } else if (o > this.lastToolbarWidthRef + s * n / 2.75) {
+            const i = [...this.overFlowToolsRef], r = i.shift();
+            r && this.lastToolbarWidthRef + s * n > 30 && (this.overFlowToolsRef = i, this.visibleToolsRef = [...this.visibleToolsRef, r]), this.lastToolbarWidthRef = o;
+          } else
+            this.$forceUpdate();
+        }
       }
+    },
+    onWindowResize(t) {
+      window.requestAnimationFrame(() => {
+        const e = this.$el;
+        if (this.overFlowOpened = !1, !e)
+          return;
+        const o = e.offsetWidth, s = e.offsetHeight;
+        if (this.offsetWidth !== o || this.offsetHeight !== s) {
+          this.offsetWidth = o, this.offsetHeight = s;
+          const l = {
+            offsetWidth: this.offsetWidth,
+            offsetHeight: this.offsetHeight
+          };
+          this.$emit("resize", {
+            target: this,
+            ...l,
+            nativeEvent: t
+          });
+        }
+        this.checkOverflow();
+      });
+    },
+    onContentScroll(t) {
+      const e = this.scrollContentRef;
+      if (t && e) {
+        let o, s;
+        t === "next" ? o = !1 : e.scrollLeft <= this.$props.buttonScrollSpeed ? o = !0 : o = e.scrollLeft === 0, t === "prev" ? s = !1 : e.scrollLeft + e.clientWidth + this.$props.buttonScrollSpeed >= e.scrollWidth ? s = !0 : s = e.scrollLeft + e.clientWidth === e.scrollWidth, this.isScrollStartPosition = !!o, this.isScrollEndPosition = !!s;
+      } else
+        this.isScrollStartPosition = !0, this.isScrollEndPosition = !1;
+    },
+    onToggleoverflow(t) {
+      this.overFlowOpened = t;
     }
   }
 });
 export {
-  y as Toolbar
+  I as Toolbar
 };

package/toolbar/messages/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="prevArrow.title",e="nextArrow.title",o="moreButtonTitle.title",r={[t]:"Previous scroll button",[e]:"Next scroll button",[o]:"More button"};exports.messages=r;exports.moreButtonTitle=o;exports.nextArrowTitle=e;exports.prevArrowTitle=t;

package/toolbar/messages/index.mjs

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const t = "prevArrow.title", o = "nextArrow.title", e = "moreButtonTitle.title", r = {
+  [t]: "Previous scroll button",
+  [o]: "Next scroll button",
+  [e]: "More button"
+};
+export {
+  r as messages,
+  e as moreButtonTitle,
+  o as nextArrowTitle,
+  t as prevArrowTitle
+};

package/toolbar/tools/ToolbarOverflowSection.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),c=require("@progress/kendo-vue-popup"),u=require("./ToolbarSeparator.js"),p=require("../../Button.js"),d=require("@progress/kendo-svg-icons"),b=require("@progress/kendo-vue-intl"),l=require("../messages/index.js"),g=require("@progress/kendo-vue-common"),h=o.defineComponent({name:"ToolbarOverflowSection",props:{toolbarRef:Object,toolbarWidth:Number,fillMode:String,size:String,visibleTools:Array,overFlowTools:Array,opened:Boolean,allTools:Array},emits:["toggleoverflow"],inject:{kendoLocalizationService:{default:null}},methods:{handleClick(){this.$emit("toggleoverflow",!this.$props.opened)}},render(){const{visibleTools:e,overFlowTools:n,allTools:t}=this.$props,{toolbarRef:i,toolbarWidth:r,fillMode:s,size:a}=this.$props;return o.createVNode(o.Fragment,null,[e&&[...t].splice(0,e.length),n.length>0&&o.createVNode(o.Fragment,null,[o.createVNode(u.ToolbarSeparator,{class:"k-toolbar-button-separator"},null),o.createVNode(p.Button,{ref:"buttonRef",class:"k-toolbar-overflow-button",fillMode:"flat",svgIcon:d.moreHorizontalIcon,title:b.provideLocalizationService(this).toLanguageString(l.moreButtonTitle,l.messages[l.moreButtonTitle]),onClick:this.handleClick},null),o.createVNode(c.Popup,{anchor:i,show:this.$props.opened,popupClass:"k-toolbar-popup",key:r,style:{width:r+"px"}},{default:()=>[o.createVNode("span",{class:`k-toolbar-items-list k-toolbar-items-list-${g.kendoThemeMaps.sizeMap[a]} k-toolbar-items-list-${s}`},[e&&[...t].splice(e.length,t.length)])]})])])}});exports.ToolbarOverflowSection=h;

package/toolbar/tools/ToolbarOverflowSection.mjs

@@ -0,0 +1,76 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as m, createVNode as o, Fragment as r } from "vue";
+import { Popup as f } from "@progress/kendo-vue-popup";
+import { ToolbarSeparator as c } from "./ToolbarSeparator.mjs";
+import { Button as b } from "../../Button.mjs";
+import { moreHorizontalIcon as d } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as h } from "@progress/kendo-vue-intl";
+import { moreButtonTitle as i, messages as u } from "../messages/index.mjs";
+import { kendoThemeMaps as g } from "@progress/kendo-vue-common";
+const C = /* @__PURE__ */ m({
+  name: "ToolbarOverflowSection",
+  props: {
+    toolbarRef: Object,
+    toolbarWidth: Number,
+    fillMode: String,
+    size: String,
+    visibleTools: Array,
+    overFlowTools: Array,
+    opened: Boolean,
+    allTools: Array
+  },
+  emits: ["toggleoverflow"],
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit("toggleoverflow", !this.$props.opened);
+    }
+  },
+  render() {
+    const {
+      visibleTools: e,
+      overFlowTools: s,
+      allTools: t
+    } = this.$props, {
+      toolbarRef: a,
+      toolbarWidth: l,
+      fillMode: n,
+      size: p
+    } = this.$props;
+    return o(r, null, [e && [...t].splice(0, e.length), s.length > 0 && o(r, null, [o(c, {
+      class: "k-toolbar-button-separator"
+    }, null), o(b, {
+      ref: "buttonRef",
+      class: "k-toolbar-overflow-button",
+      fillMode: "flat",
+      svgIcon: d,
+      title: h(this).toLanguageString(i, u[i]),
+      onClick: this.handleClick
+    }, null), o(f, {
+      anchor: a,
+      show: this.$props.opened,
+      popupClass: "k-toolbar-popup",
+      key: l,
+      style: {
+        width: l + "px"
+      }
+    }, {
+      default: () => [o("span", {
+        class: `k-toolbar-items-list k-toolbar-items-list-${g.sizeMap[p]} k-toolbar-items-list-${n}`
+      }, [e && [...t].splice(e.length, t.length)])]
+    })])]);
+  }
+});
+export {
+  C as ToolbarOverflowSection
+};

package/toolbar/tools/ToolbarScrollButton.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),s=require("@progress/kendo-vue-common"),e=require("../messages/index.js"),c=require("@progress/kendo-svg-icons"),r=require("@progress/kendo-vue-intl"),u=i.defineComponent({name:"KendoToolbarScrollButton",props:{buttonScrollSpeed:Number,disabled:Boolean,scrollContentRef:Object,type:String,prevButton:Object,nextButton:Object,dir:String},inject:{kendoLocalizationService:{default:null}},emits:["contentscroll"],methods:{getScrollButtonTitle(){const{dir:o,type:t}=this.$props;return o!=="rtl"?t==="prev"?r.provideLocalizationService(this).toLanguageString(e.prevArrowTitle,e.messages[e.prevArrowTitle]):r.provideLocalizationService(this).toLanguageString(e.nextArrowTitle,e.messages[e.nextArrowTitle]):t==="prev"?r.provideLocalizationService(this).toLanguageString(e.nextArrowTitle,e.messages[e.nextArrowTitle]):r.provideLocalizationService(this).toLanguageString(e.prevArrowTitle,e.messages[e.prevArrowTitle])}},render(){const{disabled:o,type:t,scrollContentRef:l,buttonScrollSpeed:n,prevButton:d,nextButton:p}=this.$props,a=()=>{l&&n&&(l.scrollBy({left:t==="next"?n:-n,behavior:"smooth"}),this.$emit("contentscroll",t))};return i.createVNode("span",{class:s.classNames("k-button","k-button-md","k-button-solid","k-button-solid-base","k-rounded-md","k-icon-button",`k-toolbar-${t}`,{"k-disabled":o}),title:this.getScrollButtonTitle(),"aria-hidden":!0,tabindex:o?-1:void 0,onClick:a},[i.createVNode(s.SvgIcon,{icon:t==="prev"?c.caretAltLeftIcon:c.caretAltRightIcon,class:"k-button-icon"},null)])}});exports.ToolbarScrollButton=u;

package/toolbar/tools/ToolbarScrollButton.mjs

@@ -0,0 +1,73 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as d, createVNode as c } from "vue";
+import { classNames as u, SvgIcon as p } from "@progress/kendo-vue-common";
+import { prevArrowTitle as e, messages as n, nextArrowTitle as r } from "../messages/index.mjs";
+import { caretAltLeftIcon as b, caretAltRightIcon as m } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as l } from "@progress/kendo-vue-intl";
+const L = /* @__PURE__ */ d({
+  name: "KendoToolbarScrollButton",
+  props: {
+    buttonScrollSpeed: Number,
+    disabled: Boolean,
+    scrollContentRef: Object,
+    type: String,
+    prevButton: Object,
+    nextButton: Object,
+    dir: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  emits: ["contentscroll"],
+  methods: {
+    getScrollButtonTitle() {
+      const {
+        dir: o,
+        type: t
+      } = this.$props;
+      return o !== "rtl" ? t === "prev" ? l(this).toLanguageString(e, n[e]) : l(this).toLanguageString(r, n[r]) : t === "prev" ? l(this).toLanguageString(r, n[r]) : l(this).toLanguageString(e, n[e]);
+    }
+  },
+  render() {
+    const {
+      disabled: o,
+      type: t,
+      scrollContentRef: s,
+      buttonScrollSpeed: i,
+      prevButton: g,
+      nextButton: S
+    } = this.$props, a = () => {
+      s && i && (s.scrollBy({
+        left: t === "next" ? i : -i,
+        behavior: "smooth"
+      }), this.$emit("contentscroll", t));
+    };
+    return (
+      // Using span instead of real Button component is intentional.
+      // Ref: https://progresssoftware.atlassian.net/wiki/spaces/DE/pages/edit-v2/544997922#Hidden-interactive-elements
+      c("span", {
+        class: u("k-button", "k-button-md", "k-button-solid", "k-button-solid-base", "k-rounded-md", "k-icon-button", `k-toolbar-${t}`, {
+          "k-disabled": o
+        }),
+        title: this.getScrollButtonTitle(),
+        "aria-hidden": !0,
+        tabindex: o ? -1 : void 0,
+        onClick: a
+      }, [c(p, {
+        icon: t === "prev" ? b : m,
+        class: "k-button-icon"
+      }, null)])
+    );
+  }
+});
+export {
+  L as ToolbarScrollButton
+};

package/toolbar/tools/ToolbarScrollable.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=require("./ToolbarSeparator.js"),m=require("./ToolbarScrollButton.js"),B=t.defineComponent({name:"ToolbarScrollable",props:{scrollButtons:String,scrollButtonsPosition:String,isOverflowing:Boolean,buttonScrollSpeed:Number,dir:String,isScrollStartPosition:Boolean,isScrollEndPosition:Boolean,prevButton:Object,nextButton:Object,toolbarItems:Object},emits:["contentscroll"],data(){return{scrollContentRef:null}},mounted(){this.scrollContentRef=this.$refs.scrollContentRef},methods:{onContentScroll(r){this.$emit("contentscroll",r)}},render(){const{scrollButtons:r,buttonScrollSpeed:i,prevButton:u,nextButton:b,scrollButtonsPosition:l,dir:o,isScrollStartPosition:a,isScrollEndPosition:c,toolbarItems:p}=this.$props,e=(S,d)=>t.createVNode(m.ToolbarScrollButton,{type:S,dir:o,disabled:d,scrollContentRef:this.scrollContentRef,buttonScrollSpeed:i,prevButton:u,nextButton:b,onContentscroll:this.onContentScroll},null),n=r==="visible"||r==="auto"&&this.$props.isOverflowing;return t.createVNode(t.Fragment,null,[n&&l==="split"&&t.createVNode(t.Fragment,null,[e(o!=="rtl"?"prev":"next",a),t.createVNode(s.ToolbarSeparator,{class:"k-toolbar-button-separator"},null)]),n&&l==="start"&&t.createVNode(t.Fragment,null,[e(o!=="rtl"?"prev":"next",a),e(o!=="rtl"?"next":"prev",c),t.createVNode(s.ToolbarSeparator,{class:"k-toolbar-button-separator"},null)]),t.createVNode("span",{class:"k-toolbar-items k-toolbar-items-scroll",ref:"scrollContentRef"},[p]),n&&l==="split"&&t.createVNode(t.Fragment,null,[t.createVNode(s.ToolbarSeparator,{class:"k-toolbar-button-separator"},null),e(o!=="rtl"?"next":"prev",c)]),n&&l==="end"&&t.createVNode(t.Fragment,null,[t.createVNode(s.ToolbarSeparator,{class:"k-toolbar-button-separator"},null),e(o!=="rtl"?"prev":"next",a),e(o!=="rtl"?"next":"prev",c)])])}});exports.ToolbarScrollable=B;

package/toolbar/tools/ToolbarScrollable.mjs

@@ -0,0 +1,76 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as B, createVNode as t, Fragment as r } from "vue";
+import { ToolbarSeparator as i } from "./ToolbarSeparator.mjs";
+import { ToolbarScrollButton as f } from "./ToolbarScrollButton.mjs";
+const h = /* @__PURE__ */ B({
+  name: "ToolbarScrollable",
+  props: {
+    scrollButtons: String,
+    scrollButtonsPosition: String,
+    isOverflowing: Boolean,
+    buttonScrollSpeed: Number,
+    dir: String,
+    isScrollStartPosition: Boolean,
+    isScrollEndPosition: Boolean,
+    prevButton: Object,
+    nextButton: Object,
+    toolbarItems: Object
+  },
+  emits: ["contentscroll"],
+  data() {
+    return {
+      scrollContentRef: null
+    };
+  },
+  mounted() {
+    this.scrollContentRef = this.$refs.scrollContentRef;
+  },
+  methods: {
+    onContentScroll(n) {
+      this.$emit("contentscroll", n);
+    }
+  },
+  render() {
+    const {
+      scrollButtons: n,
+      buttonScrollSpeed: u,
+      prevButton: p,
+      nextButton: b,
+      scrollButtonsPosition: e,
+      dir: o,
+      isScrollStartPosition: a,
+      isScrollEndPosition: c,
+      toolbarItems: S
+    } = this.$props, l = (d, m) => t(f, {
+      type: d,
+      dir: o,
+      disabled: m,
+      scrollContentRef: this.scrollContentRef,
+      buttonScrollSpeed: u,
+      prevButton: p,
+      nextButton: b,
+      onContentscroll: this.onContentScroll
+    }, null), s = n === "visible" || n === "auto" && this.$props.isOverflowing;
+    return t(r, null, [s && e === "split" && t(r, null, [l(o !== "rtl" ? "prev" : "next", a), t(i, {
+      class: "k-toolbar-button-separator"
+    }, null)]), s && e === "start" && t(r, null, [l(o !== "rtl" ? "prev" : "next", a), l(o !== "rtl" ? "next" : "prev", c), t(i, {
+      class: "k-toolbar-button-separator"
+    }, null)]), t("span", {
+      class: "k-toolbar-items k-toolbar-items-scroll",
+      ref: "scrollContentRef"
+    }, [S]), s && e === "split" && t(r, null, [t(i, {
+      class: "k-toolbar-button-separator"
+    }, null), l(o !== "rtl" ? "next" : "prev", c)]), s && e === "end" && t(r, null, [t(i, {
+      class: "k-toolbar-button-separator"
+    }, null), l(o !== "rtl" ? "prev" : "next", a), l(o !== "rtl" ? "next" : "prev", c)])]);
+  }
+});
+export {
+  h as ToolbarScrollable
+};

package/toolbar/tools/ToolbarSeparator.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=e.defineComponent({name:"KendoToolbarItem",render(){return e.createVNode("div",{class:"k-separator"},null)}});exports.ToolbarSeparator=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=e.defineComponent({name:"KendoToolbarItem",render(){return e.createVNode("div",{class:"k-toolbar-separator k-separator"},null)}});exports.ToolbarSeparator=r;

package/toolbar/tools/ToolbarSeparator.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as e, createVNode as o } from "vue";
-const a = /* @__PURE__ */ e({
+import { defineComponent as o, createVNode as r } from "vue";
+const a = /* @__PURE__ */ o({
   name: "KendoToolbarItem",
   render() {
-    return o("div", {
-      class: "k-separator"
+    return r("div", {
+      class: "k-toolbar-separator k-separator"
     }, null);
   }
 });