@progress/kendo-themes-html 7.0.1 → 7.0.2-dev.0

package/dist/esm/tilelayout/tests/tilelayout-resizing.js

@@ -4737,13 +4737,43 @@ TileLayoutItem.options = options7;
 TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
 TileLayoutItem.defaultProps = defaultProps7;
 
+// src/tilelayout/tilelayout-item-hint.spec.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var TILELAYOUTITEMHINT_CLASSNAME = `k-layout-item-hint`;
+var states9 = [];
+var options8 = {};
+var defaultProps8 = {};
+var TileLayoutItemHint = (props) => {
+  const { style } = props;
+  return /* @__PURE__ */ jsx19("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
+};
+TileLayoutItemHint.states = states9;
+TileLayoutItemHint.options = options8;
+TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
+TileLayoutItemHint.defaultProps = defaultProps8;
+
+// src/tilelayout/templates/tilelayout-normal.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TileLayoutNormal = (props) => /* @__PURE__ */ jsx20(
+  TileLayout,
+  {
+    children: [
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" })
+    ],
+    ...props
+  }
+);
+
 // src/tilelayout/tests/tilelayout-resizing.tsx
-import { Fragment as Fragment9, jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
-var tilelayout_resizing_default = () => /* @__PURE__ */ jsx19(Fragment9, { children: /* @__PURE__ */ jsx19("div", { id: "test-area", children: /* @__PURE__ */ jsxs6(TileLayout, { columns: 4, gap: "16px", columnWidth: "1fr", children: [
-  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: "horizontal", header: "Card Title", body: "Horizontally resizable card" }),
-  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: "vertical", header: "Card Title", body: "Vertically resizable card" }),
-  /* @__PURE__ */ jsx19(TileLayoutItem, { resize: true, header: "Card Title", body: "Horizontally and Vertically resizable card" }),
-  /* @__PURE__ */ jsx19(TileLayoutItem, { header: "Card Title", body: "Non-resizable card" })
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var tilelayout_resizing_default = () => /* @__PURE__ */ jsx21(Fragment9, { children: /* @__PURE__ */ jsx21("div", { id: "test-area", children: /* @__PURE__ */ jsxs6(TileLayoutNormal, { columns: 4, gap: "16px", columnWidth: "1fr", children: [
+  /* @__PURE__ */ jsx21(TileLayoutItem, { resize: "horizontal", header: "Card Title", body: "Horizontally resizable card" }),
+  /* @__PURE__ */ jsx21(TileLayoutItem, { resize: "vertical", header: "Card Title", body: "Vertically resizable card" }),
+  /* @__PURE__ */ jsx21(TileLayoutItem, { resize: true, header: "Card Title", body: "Horizontally and Vertically resizable card" }),
+  /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Card Title", body: "Non-resizable card" })
 ] }) }) });
 export {
   tilelayout_resizing_default as default

package/dist/esm/tilelayout/tests/tilelayout.js

@@ -4753,10 +4753,25 @@ TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
 TileLayoutItemHint.defaultProps = defaultProps8;
 var tilelayout_item_hint_spec_default = TileLayoutItemHint;
 
-// src/tilelayout/tests/tilelayout.tsx
-import { Fragment as Fragment9, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
-var tilelayout_default = () => /* @__PURE__ */ jsx20(Fragment9, { children: /* @__PURE__ */ jsx20("div", { id: "test-area", children: /* @__PURE__ */ jsxs6(
+// src/tilelayout/templates/tilelayout-normal.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TileLayoutNormal = (props) => /* @__PURE__ */ jsx20(
   TileLayout,
+  {
+    children: [
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here" })
+    ],
+    ...props
+  }
+);
+
+// src/tilelayout/tests/tilelayout.tsx
+import { Fragment as Fragment9, jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var tilelayout_default = () => /* @__PURE__ */ jsx21(Fragment9, { children: /* @__PURE__ */ jsx21("div", { id: "test-area", children: /* @__PURE__ */ jsxs6(
+  TileLayoutNormal,
   {
     columns: 5,
     columnWidth: "1fr",
@@ -4764,20 +4779,20 @@ var tilelayout_default = () => /* @__PURE__ */ jsx20(Fragment9, { children: /* @
     gap: "16px",
     style: { width: "1000px" },
     children: [
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, focus: true }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "410px", top: "16px", zIndex: 1 } }),
-      /* @__PURE__ */ jsx20(tilelayout_item_hint_spec_default, { style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ jsx20(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, focus: true }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "410px", top: "16px", zIndex: 1 } }),
+      /* @__PURE__ */ jsx21(tilelayout_item_hint_spec_default, { style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ jsx21(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ jsx21(
         TileLayoutItem,
         {
-          header: /* @__PURE__ */ jsx20("h5", { className: "k-card-title", children: "Header element" }),
+          header: /* @__PURE__ */ jsx21("h5", { className: "k-card-title", children: "Header element" }),
           body: "Content goes here",
           style: { order: "9", gridColumnEnd: "span 1", gridRowEnd: "span 2" }
         }

package/dist/esm/toolbar/templates/toolbar-normal.js

@@ -7398,9 +7398,38 @@ Toolbar.className = TOOLBAR_CLASSNAME;
 Toolbar.defaultProps = defaultProps40;
 var toolbar_spec_default = Toolbar;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 import { jsx as jsx106 } from "react/jsx-runtime";
-var ToolbarNormal = ({ children, ...other }) => /* @__PURE__ */ jsx106(toolbar_spec_default, { ...other, children });
+
+// src/split-button/templates/icon-text-split-button.tsx
+import { jsx as jsx107 } from "react/jsx-runtime";
+
+// src/split-button/templates/text-split-button.tsx
+import { jsx as jsx108 } from "react/jsx-runtime";
+
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx109, jsxs as jsxs47 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment29, jsx as jsx110, jsxs as jsxs48 } from "react/jsx-runtime";
+var ToolbarNormal = (props) => /* @__PURE__ */ jsx110(
+  toolbar_spec_default,
+  {
+    children: [
+      /* @__PURE__ */ jsxs48(Fragment29, { children: [
+        /* @__PURE__ */ jsx110(Button, { children: "Button" }),
+        /* @__PURE__ */ jsx110(MenuButton, { text: "Menu button" }),
+        /* @__PURE__ */ jsx110(SplitButton, { children: "Split button" }),
+        /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx110(Button, { icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ jsx110(Button, { icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ jsx110(Button, { icon: "align-right", children: "Right" })
+        ] })
+      ] })
+    ],
+    ...props
+  }
+);
 export {
   ToolbarNormal
 };

package/dist/esm/toolbar/tests/toolbar-adaptive.js

@@ -7634,21 +7634,33 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 import { jsx as jsx110 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 import { jsx as jsx111 } from "react/jsx-runtime";
-var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ jsx111(toolbar_spec_default, { ...other, resizable: true, children });
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 import { jsx as jsx112 } from "react/jsx-runtime";
 
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx113, jsxs as jsxs47 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs48 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-resizable.tsx
+import { jsx as jsx115 } from "react/jsx-runtime";
+var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ jsx115(toolbar_spec_default, { ...other, resizable: true, children });
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+import { jsx as jsx116 } from "react/jsx-runtime";
+
 // src/toolbar/templates/toolbar-angular-resizable.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-adaptive.tsx
-import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         --kendo-actionsheet-height: 300px;
@@ -7662,32 +7674,32 @@ var styles = `
         transform: translateZ(0);
     }
 `;
-var toolbar_adaptive_default = () => /* @__PURE__ */ jsxs47(Fragment29, { children: [
-  /* @__PURE__ */ jsx114("style", { children: styles }),
-  /* @__PURE__ */ jsxs47("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx114("span", { className: "k-colspan-all k-col-span-full", children: "Screen width <= 500px" }),
-    /* @__PURE__ */ jsxs47("section", { className: "k-colspan-all k-col-span-full", children: [
-      /* @__PURE__ */ jsxs47(ToolbarResizable, { size: "large", children: [
-        /* @__PURE__ */ jsxs47(ButtonGroup, { children: [
-          /* @__PURE__ */ jsx114(Button, { size: "large", icon: "align-left", children: "Left" }),
-          /* @__PURE__ */ jsx114(Button, { size: "large", icon: "align-center", children: "Center" }),
-          /* @__PURE__ */ jsx114(Button, { size: "large", icon: "align-right", children: "Right" })
+var toolbar_adaptive_default = () => /* @__PURE__ */ jsxs49(Fragment30, { children: [
+  /* @__PURE__ */ jsx118("style", { children: styles }),
+  /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ jsx118("span", { className: "k-colspan-all k-col-span-full", children: "Screen width <= 500px" }),
+    /* @__PURE__ */ jsxs49("section", { className: "k-colspan-all k-col-span-full", children: [
+      /* @__PURE__ */ jsxs49(ToolbarResizable, { size: "large", children: [
+        /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx118(Button, { size: "large", icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ jsx118(Button, { size: "large", icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ jsx118(Button, { size: "large", icon: "align-right", children: "Right" })
         ] }),
-        /* @__PURE__ */ jsx114(Button, { size: "large", icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
+        /* @__PURE__ */ jsx118(Button, { size: "large", icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
       ] }),
-      /* @__PURE__ */ jsxs47(ActionSheet, { adaptive: true, overlay: false, children: [
-        /* @__PURE__ */ jsx114(ActionSheetHeader, { title: "Toolbar title", className: "k-text-center" }),
-        /* @__PURE__ */ jsxs47(MenuList, { size: "large", children: [
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Left", icon: "align-left" }),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Center", icon: "align-center" }),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Right", icon: "align-right" }),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Justify", icon: "align-justify" }),
-          /* @__PURE__ */ jsx114(MenuSeparator, {}),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Font color" }),
-          /* @__PURE__ */ jsx114(MenuSeparator, {}),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Cut", icon: "cut" }),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Copy", icon: "copy" }),
-          /* @__PURE__ */ jsx114(MenuItem, { text: "Paste", icon: "paste" })
+      /* @__PURE__ */ jsxs49(ActionSheet, { adaptive: true, overlay: false, children: [
+        /* @__PURE__ */ jsx118(ActionSheetHeader, { title: "Toolbar title", className: "k-text-center" }),
+        /* @__PURE__ */ jsxs49(MenuList, { size: "large", children: [
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Left", icon: "align-left" }),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Center", icon: "align-center" }),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Right", icon: "align-right" }),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Justify", icon: "align-justify" }),
+          /* @__PURE__ */ jsx118(MenuSeparator, {}),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Font color" }),
+          /* @__PURE__ */ jsx118(MenuSeparator, {}),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Cut", icon: "cut" }),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Copy", icon: "copy" }),
+          /* @__PURE__ */ jsx118(MenuItem, { text: "Paste", icon: "paste" })
         ] })
       ] })
     ] })

package/dist/esm/toolbar/tests/toolbar-angular.js

@@ -7649,7 +7649,7 @@ ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
 // src/toolbar/templates/toolbar-normal.tsx
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs48 } from "react/jsx-runtime";
 
 // src/toolbar/templates/toolbar-resizable.tsx
 import { jsx as jsx115 } from "react/jsx-runtime";
@@ -7662,17 +7662,17 @@ var ToolbarAngularNormal = ({ children, ...other }) => /* @__PURE__ */ jsx116(to
 import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-angular.tsx
-import { Fragment as Fragment29, jsx as jsx118, jsxs as jsxs48 } from "react/jsx-runtime";
-var toolbar_angular_default = () => /* @__PURE__ */ jsx118(Fragment29, { children: /* @__PURE__ */ jsxs48("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+import { Fragment as Fragment30, jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
+var toolbar_angular_default = () => /* @__PURE__ */ jsx118(Fragment30, { children: /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
   /* @__PURE__ */ jsx118("span", { className: "k-colspan-all k-col-span-full", children: "Angular specific rendering and spacing" }),
-  /* @__PURE__ */ jsx118("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs48(ToolbarAngularNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ jsxs49(ToolbarAngularNormal, { children: [
     /* @__PURE__ */ jsx118(Button, { children: "Button" }),
     /* @__PURE__ */ jsx118("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx118(ToolbarSeparator, {}) }),
     /* @__PURE__ */ jsx118(SplitButton, { children: "Split button" }),
     /* @__PURE__ */ jsx118("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx118(ToolbarSeparator, {}) }),
     /* @__PURE__ */ jsx118(MenuButton, { text: "Menu button" }),
     /* @__PURE__ */ jsx118("div", { className: "k-toolbar-renderer", children: /* @__PURE__ */ jsx118(ToolbarSeparator, {}) }),
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
       /* @__PURE__ */ jsx118(Button, { icon: "align-left" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-center" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-right" }),
@@ -7681,22 +7681,22 @@ var toolbar_angular_default = () => /* @__PURE__ */ jsx118(Fragment29, { childre
   ] }) }),
   /* @__PURE__ */ jsx118("span", { children: "wrapped" }),
   /* @__PURE__ */ jsx118("span", { children: "rtl" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarAngularNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarAngularNormal, { children: [
     /* @__PURE__ */ jsx118(Button, { children: "Button" }),
     /* @__PURE__ */ jsx118(SplitButton, { children: "Split button" }),
     /* @__PURE__ */ jsx118(MenuButton, { text: "Menu button" }),
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
       /* @__PURE__ */ jsx118(Button, { icon: "align-left", children: "Left" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-center", children: "Center" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-right", children: "Right" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-justify", children: "Justify" })
     ] })
   ] }) }),
-  /* @__PURE__ */ jsx118("section", { dir: "rtl", children: /* @__PURE__ */ jsxs48(ToolbarAngularNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { dir: "rtl", children: /* @__PURE__ */ jsxs49(ToolbarAngularNormal, { children: [
     /* @__PURE__ */ jsx118(Button, { children: "Button" }),
     /* @__PURE__ */ jsx118(SplitButton, { children: "Split button" }),
     /* @__PURE__ */ jsx118(MenuButton, { text: "Menu button" }),
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
       /* @__PURE__ */ jsx118(Button, { icon: "align-left", children: "Left" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-center", children: "Center" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-right", children: "Right" }),

package/dist/esm/toolbar/tests/toolbar-components.js

@@ -7647,8 +7647,25 @@ ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
 // src/toolbar/templates/toolbar-normal.tsx
-import { jsx as jsx114 } from "react/jsx-runtime";
-var ToolbarNormal = ({ children, ...other }) => /* @__PURE__ */ jsx114(toolbar_spec_default, { ...other, children });
+import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs48 } from "react/jsx-runtime";
+var ToolbarNormal = (props) => /* @__PURE__ */ jsx114(
+  toolbar_spec_default,
+  {
+    children: [
+      /* @__PURE__ */ jsxs48(Fragment29, { children: [
+        /* @__PURE__ */ jsx114(Button, { children: "Button" }),
+        /* @__PURE__ */ jsx114(MenuButton, { text: "Menu button" }),
+        /* @__PURE__ */ jsx114(SplitButton, { children: "Split button" }),
+        /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+          /* @__PURE__ */ jsx114(Button, { icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ jsx114(Button, { icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ jsx114(Button, { icon: "align-right", children: "Right" })
+        ] })
+      ] })
+    ],
+    ...props
+  }
+);
 
 // src/toolbar/templates/toolbar-resizable.tsx
 import { jsx as jsx115 } from "react/jsx-runtime";
@@ -7660,25 +7677,25 @@ import { jsx as jsx116 } from "react/jsx-runtime";
 import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-components.tsx
-import { Fragment as Fragment29, jsx as jsx118, jsxs as jsxs48 } from "react/jsx-runtime";
-var toolbar_components_default = () => /* @__PURE__ */ jsx118(Fragment29, { children: /* @__PURE__ */ jsxs48("div", { id: "test-area", className: "k-d-grid", children: [
+import { Fragment as Fragment30, jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
+var toolbar_components_default = () => /* @__PURE__ */ jsx118(Fragment30, { children: /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid", children: [
   /* @__PURE__ */ jsx118("span", { children: "Menu button" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
     /* @__PURE__ */ jsx118(MenuButton, { text: "Normal" }),
     /* @__PURE__ */ jsx118(MenuButton, { hover: true, text: "Hover" }),
     /* @__PURE__ */ jsx118(MenuButton, { focus: true, text: "Focus" }),
     /* @__PURE__ */ jsx118(MenuButton, { disabled: true, text: "Disabled" })
   ] }) }),
   /* @__PURE__ */ jsx118("span", { children: "Split button" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
     /* @__PURE__ */ jsx118(SplitButton, { children: "Normal" }),
     /* @__PURE__ */ jsx118(SplitButton, { hover: true, children: "Hover" }),
     /* @__PURE__ */ jsx118(SplitButton, { focus: true, children: "Focus" }),
     /* @__PURE__ */ jsx118(SplitButton, { disabled: true, children: "Disabled" })
   ] }) }),
   /* @__PURE__ */ jsx118("span", { children: "Button group" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarNormal, { children: [
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
+    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
       /* @__PURE__ */ jsx118(Button, { icon: "align-left", children: "Normal" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-center", hover: true, children: "Hover" }),
       /* @__PURE__ */ jsx118(Button, { icon: "align-right", focus: true, children: "Focus" }),
@@ -7686,20 +7703,20 @@ var toolbar_components_default = () => /* @__PURE__ */ jsx118(Fragment29, { chil
       /* @__PURE__ */ jsx118(Button, { icon: "bold", selected: true, children: "Selected" }),
       /* @__PURE__ */ jsx118(Button, { icon: "italic", disabled: true, children: "Disabled" })
     ] }),
-    /* @__PURE__ */ jsxs48(ButtonGroup, { children: [
+    /* @__PURE__ */ jsxs49(ButtonGroup, { children: [
       /* @__PURE__ */ jsx118(Button, { children: "Adjacent" }),
       /* @__PURE__ */ jsx118(Button, { children: "Button group" })
     ] })
   ] }) }),
   /* @__PURE__ */ jsx118("span", { children: "Dropdownlist in Toolbar" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(DropdownList, { value: "Normal" }) }),
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(DropdownList, { value: "Hover", hover: true }) }),
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(DropdownList, { value: "Focus", focus: true }) }),
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(DropdownList, { value: "Disabled", disabled: true }) })
   ] }) }),
   /* @__PURE__ */ jsx118("span", { children: "Combobox in Toolbar" }),
-  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs48(ToolbarNormal, { children: [
+  /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsxs49(ToolbarNormal, { children: [
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(Combobox, { value: "Normal" }) }),
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(Combobox, { value: "Hover", hover: true }) }),
     /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(Combobox, { value: "Focus", focus: true }) }),

package/dist/esm/toolbar/tests/toolbar-popup-size.js

@@ -7633,20 +7633,32 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 import { jsx as jsx110 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 import { jsx as jsx111 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 import { jsx as jsx112 } from "react/jsx-runtime";
 
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx113, jsxs as jsxs47 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs48 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-resizable.tsx
+import { jsx as jsx115 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+import { jsx as jsx116 } from "react/jsx-runtime";
+
 // src/toolbar/templates/toolbar-angular-resizable.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-popup-size.tsx
-import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var style = `
     .k-animation-container {
         width: min-content;
@@ -7654,18 +7666,18 @@ var style = `
         overflow: visible;
     }
 `;
-var toolbar_popup_size_default = () => /* @__PURE__ */ jsxs47(Fragment29, { children: [
-  /* @__PURE__ */ jsx114("style", { children: style }),
-  /* @__PURE__ */ jsxs47("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ jsx114("span", { children: "Small" }),
-    /* @__PURE__ */ jsx114("span", { children: "Medium" }),
-    /* @__PURE__ */ jsx114("span", { children: "Large" }),
-    MenuList.options.size.map((size) => /* @__PURE__ */ jsx114("section", { children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { size, children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ jsx114(MenuSeparator, {}),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item after separator", icon: "plus" })
+var toolbar_popup_size_default = () => /* @__PURE__ */ jsxs49(Fragment30, { children: [
+  /* @__PURE__ */ jsx118("style", { children: style }),
+  /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+    /* @__PURE__ */ jsx118("span", { children: "Small" }),
+    /* @__PURE__ */ jsx118("span", { children: "Medium" }),
+    /* @__PURE__ */ jsx118("span", { children: "Large" }),
+    MenuList.options.size.map((size) => /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { size, children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ jsx118(MenuSeparator, {}),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) }))
   ] })
 ] });

package/dist/esm/toolbar/tests/toolbar-popup.js

@@ -7633,20 +7633,32 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 import { jsx as jsx110 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 import { jsx as jsx111 } from "react/jsx-runtime";
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 import { jsx as jsx112 } from "react/jsx-runtime";
 
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx113, jsxs as jsxs47 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-normal.tsx
+import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs48 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-resizable.tsx
+import { jsx as jsx115 } from "react/jsx-runtime";
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+import { jsx as jsx116 } from "react/jsx-runtime";
+
 // src/toolbar/templates/toolbar-angular-resizable.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx117 } from "react/jsx-runtime";
 
 // src/toolbar/tests/toolbar-popup.tsx
-import { Fragment as Fragment29, jsx as jsx114, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var style = `
     .k-animation-container {
         width: min-content;
@@ -7654,46 +7666,46 @@ var style = `
         overflow: visible;
     }
 `;
-var toolbar_popup_default = () => /* @__PURE__ */ jsxs47(Fragment29, { children: [
-  /* @__PURE__ */ jsx114("style", { children: style }),
-  /* @__PURE__ */ jsxs47("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ jsx114("span", { children: "Normal" }),
-    /* @__PURE__ */ jsx114("span", { children: "With Icon" }),
-    /* @__PURE__ */ jsx114("span", { children: "With Separator" }),
-    /* @__PURE__ */ jsx114("section", { children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3" })
+var toolbar_popup_default = () => /* @__PURE__ */ jsxs49(Fragment30, { children: [
+  /* @__PURE__ */ jsx118("style", { children: style }),
+  /* @__PURE__ */ jsxs49("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+    /* @__PURE__ */ jsx118("span", { children: "Normal" }),
+    /* @__PURE__ */ jsx118("span", { children: "With Icon" }),
+    /* @__PURE__ */ jsx118("span", { children: "With Separator" }),
+    /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3" })
     ] }) }) }),
-    /* @__PURE__ */ jsx114("section", { children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1", icon: "plus" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2", icon: "plus" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3", icon: "plus" })
+    /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1", icon: "plus" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2", icon: "plus" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ jsx114("section", { children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ jsx114(MenuSeparator, {}),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item after separator", icon: "plus" })
+    /* @__PURE__ */ jsx118("section", { children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ jsx118(MenuSeparator, {}),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ jsx114("span", { className: "k-colspan-all k-col-span-full", children: "rtl" }),
-    /* @__PURE__ */ jsx114("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3" })
+    /* @__PURE__ */ jsx118("span", { className: "k-colspan-all k-col-span-full", children: "rtl" }),
+    /* @__PURE__ */ jsx118("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3" })
     ] }) }) }),
-    /* @__PURE__ */ jsx114("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1", icon: "plus" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2", icon: "plus" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3", icon: "plus" })
+    /* @__PURE__ */ jsx118("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1", icon: "plus" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2", icon: "plus" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ jsx114("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx114(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs47(MenuList, { children: [
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ jsx114(MenuSeparator, {}),
-      /* @__PURE__ */ jsx114(MenuItem, { text: "Item after separator", icon: "plus" })
+    /* @__PURE__ */ jsx118("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ jsx118(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ jsxs49(MenuList, { children: [
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ jsx118(MenuSeparator, {}),
+      /* @__PURE__ */ jsx118(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) })
   ] })
 ] });