diff --git a/tests/_output/bootstrap/editor/editor.png b/tests/_output/bootstrap/editor/editor.png
index fbf16cc5796..573293f94b0 100644
Binary files a/tests/_output/bootstrap/editor/editor.png and b/tests/_output/bootstrap/editor/editor.png differ
diff --git a/tests/_output/bootstrap/grid/grid-angular.png b/tests/_output/bootstrap/grid/grid-angular.png
index 9db3288eefa..2b6194596e6 100644
Binary files a/tests/_output/bootstrap/grid/grid-angular.png and b/tests/_output/bootstrap/grid/grid-angular.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png
index 7d5ba052352..fdfe843fa71 100644
Binary files a/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png and b/tests/_output/bootstrap/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..8b146efa961
Binary files /dev/null and b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons.png b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons.png
new file mode 100644
index 00000000000..b0686e90fb4
Binary files /dev/null and b/tests/_output/bootstrap/toolbar/toolbar-scrollable-buttons.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-section-sizes.png b/tests/_output/bootstrap/toolbar/toolbar-section-sizes.png
new file mode 100644
index 00000000000..44c2322712f
Binary files /dev/null and b/tests/_output/bootstrap/toolbar/toolbar-section-sizes.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-section.png b/tests/_output/bootstrap/toolbar/toolbar-section.png
new file mode 100644
index 00000000000..4adc2e0e7e1
Binary files /dev/null and b/tests/_output/bootstrap/toolbar/toolbar-section.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar-sizes.png b/tests/_output/bootstrap/toolbar/toolbar-sizes.png
index 0f6fd82def2..ed1730356ef 100644
Binary files a/tests/_output/bootstrap/toolbar/toolbar-sizes.png and b/tests/_output/bootstrap/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/bootstrap/toolbar/toolbar.png b/tests/_output/bootstrap/toolbar/toolbar.png
index c7e9c7f701a..49d248bd5af 100644
Binary files a/tests/_output/bootstrap/toolbar/toolbar.png and b/tests/_output/bootstrap/toolbar/toolbar.png differ
diff --git a/tests/_output/classic/editor/editor.png b/tests/_output/classic/editor/editor.png
index fecda6b47fc..15dd700108d 100644
Binary files a/tests/_output/classic/editor/editor.png and b/tests/_output/classic/editor/editor.png differ
diff --git a/tests/_output/classic/grid/grid-angular.png b/tests/_output/classic/grid/grid-angular.png
index 02f59831087..df81e727b03 100644
Binary files a/tests/_output/classic/grid/grid-angular.png and b/tests/_output/classic/grid/grid-angular.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-fill-modes.png b/tests/_output/classic/toolbar/toolbar-fill-modes.png
index fcd060f3e8d..2c268a27a9e 100644
Binary files a/tests/_output/classic/toolbar/toolbar-fill-modes.png and b/tests/_output/classic/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..6ec088c1851
Binary files /dev/null and b/tests/_output/classic/toolbar/toolbar-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-scrollable-buttons.png b/tests/_output/classic/toolbar/toolbar-scrollable-buttons.png
new file mode 100644
index 00000000000..4f1d90168f5
Binary files /dev/null and b/tests/_output/classic/toolbar/toolbar-scrollable-buttons.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-section-sizes.png b/tests/_output/classic/toolbar/toolbar-section-sizes.png
new file mode 100644
index 00000000000..71648e47633
Binary files /dev/null and b/tests/_output/classic/toolbar/toolbar-section-sizes.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-section.png b/tests/_output/classic/toolbar/toolbar-section.png
new file mode 100644
index 00000000000..acea6c290ee
Binary files /dev/null and b/tests/_output/classic/toolbar/toolbar-section.png differ
diff --git a/tests/_output/classic/toolbar/toolbar-sizes.png b/tests/_output/classic/toolbar/toolbar-sizes.png
index cb10c081c81..5daa517a26d 100644
Binary files a/tests/_output/classic/toolbar/toolbar-sizes.png and b/tests/_output/classic/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/classic/toolbar/toolbar.png b/tests/_output/classic/toolbar/toolbar.png
index a7191558c70..712ea965871 100644
Binary files a/tests/_output/classic/toolbar/toolbar.png and b/tests/_output/classic/toolbar/toolbar.png differ
diff --git a/tests/_output/default/editor/editor.png b/tests/_output/default/editor/editor.png
index d8ffca9b7ff..e71afb017d2 100644
Binary files a/tests/_output/default/editor/editor.png and b/tests/_output/default/editor/editor.png differ
diff --git a/tests/_output/default/grid/grid-angular.png b/tests/_output/default/grid/grid-angular.png
index 50ae52b1b5e..ac4ef7ce660 100644
Binary files a/tests/_output/default/grid/grid-angular.png and b/tests/_output/default/grid/grid-angular.png differ
diff --git a/tests/_output/default/toolbar/toolbar-fill-modes.png b/tests/_output/default/toolbar/toolbar-fill-modes.png
index 167edf1eaa9..b4f73d0210d 100644
Binary files a/tests/_output/default/toolbar/toolbar-fill-modes.png and b/tests/_output/default/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..3e1e210c3fa
Binary files /dev/null and b/tests/_output/default/toolbar/toolbar-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/default/toolbar/toolbar-scrollable-buttons.png b/tests/_output/default/toolbar/toolbar-scrollable-buttons.png
new file mode 100644
index 00000000000..aeba133604b
Binary files /dev/null and b/tests/_output/default/toolbar/toolbar-scrollable-buttons.png differ
diff --git a/tests/_output/default/toolbar/toolbar-section-sizes.png b/tests/_output/default/toolbar/toolbar-section-sizes.png
new file mode 100644
index 00000000000..62c183316e8
Binary files /dev/null and b/tests/_output/default/toolbar/toolbar-section-sizes.png differ
diff --git a/tests/_output/default/toolbar/toolbar-section.png b/tests/_output/default/toolbar/toolbar-section.png
new file mode 100644
index 00000000000..7f7ec04d0de
Binary files /dev/null and b/tests/_output/default/toolbar/toolbar-section.png differ
diff --git a/tests/_output/default/toolbar/toolbar-sizes.png b/tests/_output/default/toolbar/toolbar-sizes.png
index 0b6ed348278..f2084e50a24 100644
Binary files a/tests/_output/default/toolbar/toolbar-sizes.png and b/tests/_output/default/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/default/toolbar/toolbar.png b/tests/_output/default/toolbar/toolbar.png
index 86df1c4e322..8a46d5ed6bc 100644
Binary files a/tests/_output/default/toolbar/toolbar.png and b/tests/_output/default/toolbar/toolbar.png differ
diff --git a/tests/_output/fluent/editor/editor.png b/tests/_output/fluent/editor/editor.png
index 8c3cf05dc55..37dad6cb10f 100644
Binary files a/tests/_output/fluent/editor/editor.png and b/tests/_output/fluent/editor/editor.png differ
diff --git a/tests/_output/fluent/grid/grid-angular.png b/tests/_output/fluent/grid/grid-angular.png
index db3593e347f..b1b0a92316d 100644
Binary files a/tests/_output/fluent/grid/grid-angular.png and b/tests/_output/fluent/grid/grid-angular.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-fill-modes.png b/tests/_output/fluent/toolbar/toolbar-fill-modes.png
index 51b40e71216..1195a94e22a 100644
Binary files a/tests/_output/fluent/toolbar/toolbar-fill-modes.png and b/tests/_output/fluent/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..aa9c9ef2b8b
Binary files /dev/null and b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-scrollable-buttons.png b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons.png
new file mode 100644
index 00000000000..46fb5956d1d
Binary files /dev/null and b/tests/_output/fluent/toolbar/toolbar-scrollable-buttons.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-section-sizes.png b/tests/_output/fluent/toolbar/toolbar-section-sizes.png
new file mode 100644
index 00000000000..0c3206e12c4
Binary files /dev/null and b/tests/_output/fluent/toolbar/toolbar-section-sizes.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-section.png b/tests/_output/fluent/toolbar/toolbar-section.png
new file mode 100644
index 00000000000..bbe2c51653c
Binary files /dev/null and b/tests/_output/fluent/toolbar/toolbar-section.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar-sizes.png b/tests/_output/fluent/toolbar/toolbar-sizes.png
index b3d8e614aaf..3c20b735300 100644
Binary files a/tests/_output/fluent/toolbar/toolbar-sizes.png and b/tests/_output/fluent/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/fluent/toolbar/toolbar.png b/tests/_output/fluent/toolbar/toolbar.png
index 8b7ab3a1e84..5aeab5c44d6 100644
Binary files a/tests/_output/fluent/toolbar/toolbar.png and b/tests/_output/fluent/toolbar/toolbar.png differ
diff --git a/tests/_output/material/editor/editor.png b/tests/_output/material/editor/editor.png
index eb3364fb345..b0843c96ff3 100644
Binary files a/tests/_output/material/editor/editor.png and b/tests/_output/material/editor/editor.png differ
diff --git a/tests/_output/material/grid/grid-angular.png b/tests/_output/material/grid/grid-angular.png
index f24a05fc4e3..4d998002ef6 100644
Binary files a/tests/_output/material/grid/grid-angular.png and b/tests/_output/material/grid/grid-angular.png differ
diff --git a/tests/_output/material/toolbar/toolbar-fill-modes.png b/tests/_output/material/toolbar/toolbar-fill-modes.png
index 2a05373595f..2a4a1c8cad9 100644
Binary files a/tests/_output/material/toolbar/toolbar-fill-modes.png and b/tests/_output/material/toolbar/toolbar-fill-modes.png differ
diff --git a/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png b/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png
new file mode 100644
index 00000000000..4147fa47468
Binary files /dev/null and b/tests/_output/material/toolbar/toolbar-scrollable-buttons-hidden.png differ
diff --git a/tests/_output/material/toolbar/toolbar-scrollable-buttons.png b/tests/_output/material/toolbar/toolbar-scrollable-buttons.png
new file mode 100644
index 00000000000..b7cae9564ff
Binary files /dev/null and b/tests/_output/material/toolbar/toolbar-scrollable-buttons.png differ
diff --git a/tests/_output/material/toolbar/toolbar-section-sizes.png b/tests/_output/material/toolbar/toolbar-section-sizes.png
new file mode 100644
index 00000000000..b1b6f4dafa9
Binary files /dev/null and b/tests/_output/material/toolbar/toolbar-section-sizes.png differ
diff --git a/tests/_output/material/toolbar/toolbar-section.png b/tests/_output/material/toolbar/toolbar-section.png
new file mode 100644
index 00000000000..93c38d60a52
Binary files /dev/null and b/tests/_output/material/toolbar/toolbar-section.png differ
diff --git a/tests/_output/material/toolbar/toolbar-sizes.png b/tests/_output/material/toolbar/toolbar-sizes.png
index 181a3d63404..532d2765320 100644
Binary files a/tests/_output/material/toolbar/toolbar-sizes.png and b/tests/_output/material/toolbar/toolbar-sizes.png differ
diff --git a/tests/_output/material/toolbar/toolbar.png b/tests/_output/material/toolbar/toolbar.png
index e505ec5c4f4..f3b2f91f4f0 100644
Binary files a/tests/_output/material/toolbar/toolbar.png and b/tests/_output/material/toolbar/toolbar.png differ
diff --git a/tests/dock-manager/dock-manager.html b/tests/dock-manager/dock-manager.html
index cbd9f05a433..002bf90e0a9 100644
--- a/tests/dock-manager/dock-manager.html
+++ b/tests/dock-manager/dock-manager.html
@@ -26,7 +26,7 @@
                     <button class="k-toolbar-button  k-button k-button-sm k-button-flat k-button-flat-base k-rounded-md">
                         <span class="k-button-text">File 3</span>
                     </button>
-                    <div class="k-separator k-separator-horizontal"></div>
+                    <div class="k-toolbar-separator k-separator-horizontal k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-sm k-button-flat k-button-flat-base k-rounded-md">
                         <span class="k-button-text">File 4</span>
                     </button>
diff --git a/tests/editor/editor.html b/tests/editor/editor.html
index 26de2c4d31f..5ff44896d67 100644
--- a/tests/editor/editor.html
+++ b/tests/editor/editor.html
@@ -134,6 +134,7 @@
                             </span>
                         </button>
                     </div>
+                    <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                     <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -258,6 +259,7 @@
                             </span>
                         </button>
                     </div>
+                    <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                     <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/grid/grid-angular.html b/tests/grid/grid-angular.html
index 2a22b705a52..6f004e098e5 100644
--- a/tests/grid/grid-angular.html
+++ b/tests/grid/grid-angular.html
@@ -332,7 +332,7 @@
         <span class="col-3">Angular -- standalone column chooser</span>
         <section class="col-2">
             <div class="k-grid k-grid-md">
-                <div class="k-toolbar k-toolbar-solid k-grid-toolbar">
+                <div class="k-grid-toolbar k-toolbar k-toolbar-md k-toolbar-solid">
                     <div class="k-spacer"></div>
                     <div class="k-grid-column-chooser">
                         <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
@@ -401,7 +401,7 @@
                                             <td class="k-table-td">19</td>
                                             <td class="k-table-td">24 - 12 oz bottles</td>
                                         </tr>
-                                        <tr class="k-master-row k-table-row k-table-alt-row">
+                                        <tr class="k-master-row k-table-row">
                                             <td class="k-table-td">Aniseed Syrup</td>
                                             <td class="k-table-td">20</td>
                                             <td class="k-table-td">24 - 12 oz bottles</td>
diff --git a/tests/imageeditor/imageeditor-crop-pane.html b/tests/imageeditor/imageeditor-crop-pane.html
index 84d882600ee..5b4fbd7e02c 100644
--- a/tests/imageeditor/imageeditor-crop-pane.html
+++ b/tests/imageeditor/imageeditor-crop-pane.html
@@ -29,7 +29,7 @@ <h4>Image Editor Crop Pane</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-disabled k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-undo">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -44,7 +44,7 @@ <h4>Image Editor Crop Pane</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-crop">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/imageeditor/imageeditor-resize-pane.html b/tests/imageeditor/imageeditor-resize-pane.html
index b664ff2de46..b38e1a3a24a 100644
--- a/tests/imageeditor/imageeditor-resize-pane.html
+++ b/tests/imageeditor/imageeditor-resize-pane.html
@@ -29,7 +29,7 @@ <h4>Image Editor Resize Pane</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-disabled k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-undo">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -44,7 +44,7 @@ <h4>Image Editor Resize Pane</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-crop">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/imageeditor/imageeditor.html b/tests/imageeditor/imageeditor.html
index 943de26e250..16f72a71545 100644
--- a/tests/imageeditor/imageeditor.html
+++ b/tests/imageeditor/imageeditor.html
@@ -29,7 +29,7 @@ <h4>Image Editor</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-disabled k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-undo">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -44,7 +44,7 @@ <h4>Image Editor</h4>
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-disabled k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-crop">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/pdf-viewer/pdf-viewer-annotations.html b/tests/pdf-viewer/pdf-viewer-annotations.html
index f2dda123637..1dca98d7570 100644
--- a/tests/pdf-viewer/pdf-viewer-annotations.html
+++ b/tests/pdf-viewer/pdf-viewer-annotations.html
@@ -27,7 +27,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -164,7 +164,7 @@
                         </span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-free-text">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -172,7 +172,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-shapes">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -187,7 +187,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-stamp">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -202,7 +202,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-sticky-note">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -210,7 +210,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-ruler-outline">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -218,7 +218,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-comment">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -226,7 +226,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-eraser-outline">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -260,7 +260,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -374,7 +374,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-free-text">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/pdf-viewer/pdf-viewer-blank-page.html b/tests/pdf-viewer/pdf-viewer-blank-page.html
index ee77f6813b1..a3a5e8df3ce 100644
--- a/tests/pdf-viewer/pdf-viewer-blank-page.html
+++ b/tests/pdf-viewer/pdf-viewer-blank-page.html
@@ -29,7 +29,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md k-disabled">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
diff --git a/tests/pdf-viewer/pdf-viewer-free-text-annotation.html b/tests/pdf-viewer/pdf-viewer-free-text-annotation.html
index 6e3d5757b09..8159bcb5340 100644
--- a/tests/pdf-viewer/pdf-viewer-free-text-annotation.html
+++ b/tests/pdf-viewer/pdf-viewer-free-text-annotation.html
@@ -27,7 +27,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -148,7 +148,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-selected k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-free-text">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/pdf-viewer/pdf-viewer-highlight-annotation.html b/tests/pdf-viewer/pdf-viewer-highlight-annotation.html
index c9e86a0b380..f529aebdd1f 100644
--- a/tests/pdf-viewer/pdf-viewer-highlight-annotation.html
+++ b/tests/pdf-viewer/pdf-viewer-highlight-annotation.html
@@ -30,7 +30,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -151,7 +151,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-free-text">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/pdf-viewer/pdf-viewer-search-panel.html b/tests/pdf-viewer/pdf-viewer-search-panel.html
index e77858e152e..c5cd8fe9cf4 100644
--- a/tests/pdf-viewer/pdf-viewer-search-panel.html
+++ b/tests/pdf-viewer/pdf-viewer-search-panel.html
@@ -27,7 +27,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -203,7 +203,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
@@ -340,7 +340,7 @@
                         </span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-free-text">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -348,7 +348,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-shapes">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -363,7 +363,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-stamp">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -378,7 +378,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-sticky-note">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -386,7 +386,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-ruler-outline">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -394,7 +394,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-comment">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -402,7 +402,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-eraser-outline">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/pdf-viewer/pdf-viewer.html b/tests/pdf-viewer/pdf-viewer.html
index cda382a09b8..033bf25f17a 100644
--- a/tests/pdf-viewer/pdf-viewer.html
+++ b/tests/pdf-viewer/pdf-viewer.html
@@ -26,7 +26,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-pager k-pager-md">
                     <div class="k-pager-numbers-wrap">
                         <button class="k-pager-nav k-pager-first k-button k-button-md k-button-flat k-button-flat-base k-disabled k-icon-button">
diff --git a/tests/spreadsheet/spreadsheet-cell-contextmenu.html b/tests/spreadsheet/spreadsheet-cell-contextmenu.html
index c7c13de007f..960c8e0db28 100644
--- a/tests/spreadsheet/spreadsheet-cell-contextmenu.html
+++ b/tests/spreadsheet/spreadsheet-cell-contextmenu.html
@@ -82,7 +82,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -104,7 +104,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
                             <span class="k-input-value-text">Font Name</span>
@@ -129,7 +129,7 @@
                             </span>
                         </button>
                     </span>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -146,7 +146,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -198,7 +198,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-item">
                         <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                             <span class="k-input-inner">
@@ -220,7 +220,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -235,7 +235,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -264,7 +264,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/spreadsheet/spreadsheet-filtering.html b/tests/spreadsheet/spreadsheet-filtering.html
index 1afe6e9d611..1680ef128ec 100644
--- a/tests/spreadsheet/spreadsheet-filtering.html
+++ b/tests/spreadsheet/spreadsheet-filtering.html
@@ -75,7 +75,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -97,7 +97,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
                             <span class="k-input-value-text">Font Name</span>
@@ -122,7 +122,7 @@
                             </span>
                         </button>
                     </span>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -139,7 +139,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -191,7 +191,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-item">
                         <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                             <span class="k-input-inner">
@@ -213,7 +213,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -228,7 +228,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -257,7 +257,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/spreadsheet/spreadsheet-jquery.html b/tests/spreadsheet/spreadsheet-jquery.html
index 9be2089b6b1..7eab1a4fc12 100644
--- a/tests/spreadsheet/spreadsheet-jquery.html
+++ b/tests/spreadsheet/spreadsheet-jquery.html
@@ -79,7 +79,7 @@
                                     </svg>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                                 <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
@@ -103,7 +103,7 @@
                                     </span>
                                 </button>
                             </div>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-solid k-rounded-md">
                                 <span class="k-input-inner">
                                     <span class="k-input-value-text">Arial</span>
@@ -149,7 +149,7 @@
                                     </span>
                                 </button>
                             </div>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-foreground-color">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -164,7 +164,7 @@
                                     </span>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-droplet">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -193,7 +193,7 @@
                                     </span>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -215,7 +215,7 @@
                                     </svg>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                                 <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-decimal-decrease">
@@ -232,7 +232,7 @@
                                     </span>
                                 </button>
                             </div>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-filter">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -263,7 +263,7 @@
                                     </svg>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-image">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -278,7 +278,7 @@
                                     </svg>
                                 </span>
                             </button>
-                            <div class="k-separator"></div>
+                            <div class="k-toolbar-separator k-separator"></div>
                             <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                                 <span class="k-button-icon k-icon k-svg-icon k-svg-i-pane-freeze">
                                     <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/spreadsheet/spreadsheet-row-contextmenu.html b/tests/spreadsheet/spreadsheet-row-contextmenu.html
index b3e852440a6..196ec91583b 100644
--- a/tests/spreadsheet/spreadsheet-row-contextmenu.html
+++ b/tests/spreadsheet/spreadsheet-row-contextmenu.html
@@ -82,7 +82,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -104,7 +104,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
                             <span class="k-input-value-text">Font Name</span>
@@ -129,7 +129,7 @@
                             </span>
                         </button>
                     </span>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -146,7 +146,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -198,7 +198,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-item">
                         <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                             <span class="k-input-inner">
@@ -220,7 +220,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -235,7 +235,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -264,7 +264,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/spreadsheet/spreadsheet-tools.html b/tests/spreadsheet/spreadsheet-tools.html
index 66f2536c667..ae127699713 100644
--- a/tests/spreadsheet/spreadsheet-tools.html
+++ b/tests/spreadsheet/spreadsheet-tools.html
@@ -76,7 +76,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-download">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -84,7 +84,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-print">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -150,7 +150,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -172,7 +172,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
                             <span class="k-input-value-text">Font Name</span>
@@ -197,7 +197,7 @@
                             </span>
                         </button>
                     </span>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -214,7 +214,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -266,7 +266,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-item">
                         <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                             <span class="k-input-inner">
@@ -288,7 +288,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -303,7 +303,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -332,7 +332,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -391,7 +391,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-link">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -399,7 +399,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-table">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -495,7 +495,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-apply-format">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -606,7 +606,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-exclamation-circle">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -614,7 +614,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-filter">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -622,7 +622,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-sort-asc">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -695,7 +695,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cells-merge">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -710,7 +710,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-none">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -718,7 +718,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-crosstab">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/spreadsheet/spreadsheet.html b/tests/spreadsheet/spreadsheet.html
index 330b8454e5b..fbedb8798ca 100644
--- a/tests/spreadsheet/spreadsheet.html
+++ b/tests/spreadsheet/spreadsheet.html
@@ -75,7 +75,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -97,7 +97,7 @@
                             </svg>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <span class="k-toolbar-dropdownlist  k-dropdownlist k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
                             <span class="k-input-value-text">Font Name</span>
@@ -122,7 +122,7 @@
                             </span>
                         </button>
                     </span>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -139,7 +139,7 @@
                             </span>
                         </button>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                         <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                             <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -191,7 +191,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <div class="k-toolbar-item">
                         <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                             <span class="k-input-inner">
@@ -213,7 +213,7 @@
                             </button>
                         </span>
                     </div>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -228,7 +228,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -257,7 +257,7 @@
                             </span>
                         </span>
                     </button>
-                    <div class="k-separator"></div>
+                    <div class="k-toolbar-separator k-separator"></div>
                     <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                             <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/toolbar/toolbar-adaptive.html b/tests/toolbar/toolbar-adaptive.html
index 1fdff2e2ee0..cf70c15d476 100644
--- a/tests/toolbar/toolbar-adaptive.html
+++ b/tests/toolbar/toolbar-adaptive.html
@@ -52,6 +52,7 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-lg k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/toolbar/toolbar-fill-modes.html b/tests/toolbar/toolbar-fill-modes.html
index 9fd28d2a005..c229122f61c 100644
--- a/tests/toolbar/toolbar-fill-modes.html
+++ b/tests/toolbar/toolbar-fill-modes.html
@@ -10,12 +10,6 @@
     <script src="/packages/html/assets/scripts.js"></script>
 </head>
 <body id="app" class="k-body">
-    <style>
-        #test-area {
-            max-width: 1330px;
-        }
-
-    </style>
     <div id="test-area" class="k-d-grid">
         <span class="k-colspan-all k-col-span-full">solid</span>
         <section class="k-colspan-all k-col-span-full">
@@ -34,7 +28,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -56,7 +50,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-solid k-rounded-md">
                     <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
                     <span class="k-clear-value">
@@ -91,7 +85,7 @@
                         </span>
                     </button>
                 </span>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -108,7 +102,7 @@
                         </span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -160,7 +154,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
                         <span class="k-input-inner">
@@ -182,7 +176,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -197,7 +191,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -226,7 +220,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -236,6 +230,227 @@
                 </button>
             </div>
         </section>
+        <span class="k-colspan-all k-col-span-full">solid with overlay</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable k-toolbar-scrollable-overlay">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-ccw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m62 176 55.5 32C103.8 231.6 96 258.9 96 288c0 88.2 71.8 160 160 160s160-71.8 160-160-71.8-160-160-160v64L96 96 256 0v64c123.7 0 224 100.3 224 224S379.7 512 256 512 32 411.7 32 288c0-40.8 10.9-79.1 30-112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-cw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 32h-45.3L256 210.7 210.7 256l-69.5 69.5c-9.1-3.6-18.9-5.5-29.2-5.5-44.2 0-80 35.8-80 80 0 10.3 2 20.2 5.5 29.2 8.1 20.7 24.6 37.1 45.3 45.3 9.1 3.6 18.9 5.5 29.2 5.5 44.2 0 80-35.8 80-80 0-10.3-2-20.2-5.5-29.2l69.5-69.5 69.5 69.5c-3.6 9.1-5.5 18.9-5.5 29.2 0 44.2 35.8 80 80 80 10.3 0 20.2-2 29.2-5.5 20.7-8.1 37.1-24.6 45.3-45.3 3.6-9.1 5.5-18.9 5.5-29.2 0-44.2-35.8-80-80-80-10.3 0-20.2 2-29.2 5.5L301.3 256 480 77.3zM160 400c0 26.5-21.5 48-48 48-.9 0-1.8 0-2.7-.1-24.4-1.3-43.9-20.9-45.3-45.3 0-.9-.1-1.8-.1-2.7 0-26.5 21.5-48 48-48 .9 0 1.8 0 2.7.1 24.4 1.3 43.9 20.9 45.3 45.3.1.9.1 1.8.1 2.7m237.3-47.9c.9 0 1.8-.1 2.7-.1 26.5 0 48 21.5 48 48 0 .9 0 1.8-.1 2.7-1.3 24.4-20.9 43.9-45.3 45.3-.9 0-1.8.1-2.7.1-26.5 0-48-21.5-48-48 0-.9 0-1.8.1-2.7 1.4-24.5 20.9-44 45.3-45.3M240 256c0-8.8 7.2-16 16-16s16 7.2 16 16-7.2 16-16 16-16-7.2-16-16m-74.5-45.3L32 77.3V32h45.3l133.5 133.5z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-copy">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M384 96H192c-17.7 0-32 14.3-32 32v320c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V192zm64 352H192V128h160v96h96zM64 384h64v32H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32h192l32 32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-clipboard">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M416 32H311.4C300.3 12.9 279.7 0 256 0s-44.3 12.9-55.4 32H96c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32m-160 0c17.7 0 32 14.3 32 32h-64c0-17.7 14.3-32 32-32m160 416H96V64h64v64h192V64h64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-solid k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Size">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 32-96 128h192zM222 96h-60L32 480h60l32.4-96h135.2l32.4 96h60zm-78 230.4 48-141.7 48 141.7z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-shrink">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 160 96-128H288zm-152 0h-48L80 480h48l25.9-80h108.2l25.9 80h48zm-62.4 192L208 233.9 246.4 352z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 96h115.8c25.3 0 44.2 1.1 56.6 3.2s23.6 6.5 33.4 13.2q14.7 10.05 24.6 26.7c6.6 11.1 9.8 23.6 9.8 37.4 0 15-4.1 28.7-12.1 41.2-8.1 12.5-19.1 21.9-32.9 28.2 19.5 5.7 34.5 15.4 45 29s15.7 29.8 15.7 48.2c0 14.6-3.4 28.7-10.2 42.4-6.7 13.8-16 24.8-27.7 33s-26.1 13.3-43.3 15.2c-10.8 1.2-36.7 1.9-78 2.2H128zm64 53v74h30.9c25.2 0 40.8-.4 46.9-1.1 11.1-1.3 19.7-5.2 26.1-11.5 6.3-6.3 9.5-14.7 9.5-25 0-9.9-2.7-18-8.2-24.1-5.5-6.2-13.6-10-24.4-11.2-6.4-.7-24.8-1.1-55.2-1.1zm0 127.1V362h48.6c23.4 0 38.1-.7 44.5-2 9.6-1.8 17.5-6 23.6-12.8s9-15.9 9-27.3c0-9.6-2.3-17.9-7-24.6s-11.4-11.6-20.3-14.7c-8.8-3.1-28-4.6-57.5-4.6z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-italic">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m377.2 128 6.8-32H198.8l-6.8 32h59.2l-54.4 256h-62l-6.8 32h185.2l6.8-32h-59.2l54.4-256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-underline">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 416h256v32H128zM320 64v224c0 11.6-3.5 16-10.3 20.3-11.8 7.4-31.3 11.7-53.7 11.7s-41.9-4.3-53.7-11.7c-6.8-4.3-10.3-8.7-10.3-20.3V64h-64v224c0 70.4 64.3 96 128 96s128-25.6 128-96V64z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-strikethrough">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M393.9 320c.1-23.9 4.5-41.4 13.5-52.5 9.1-11.1 20.8-16.7 35.3-16.7 9.6 0 17.7 3.1 24.5 9.3s11.4 15.4 14.1 27.7l27.9-4.7c-3.3-18.4-10.8-32.7-22.5-42.7s-26.8-15-45.2-15c-14.5 0-28.1 3.6-40.4 11.1-12.4 7.4-21.6 18.5-27.7 33.2-5.9 14.4-8.9 31.2-9.1 50.4h-25.5v-2.2c0-13.2-1.7-25.6-5.1-37.1s-8.1-21.4-14.2-29.6c-6-8.1-13.7-14.5-23-19s-19.2-6.8-29.6-6.8c-18.9 0-34.3 8.2-46.4 24.6v-90H192v160h-45v-25.8c0-13.7-.5-23.3-1.4-28.5-1.7-8.5-4.7-15.5-9-21.1-4.3-5.5-10.9-10.2-19.9-13.8s-20.8-5.5-35.3-5.5c-14.6 0-27.4 2.1-38.5 6.4s-19.5 10.4-25.4 18.4c-5.8 8-10 18.4-12.6 31.4l28.1 4.1c3.1-13 7.8-22 14.3-27.1s16.4-7.7 29.9-7.7q21.75 0 32.7 10.5c5.4 5.1 8.1 14 8.1 26.6 0 1.1 0 3.8-.2 8.1-11 4.1-28 7.7-51.2 10.7-11.4 1.5-19.9 3-25.5 4.7-6.7 2-12.9 4.9-18.5 8.6H0v32h1.2c-.8 3.8-1.2 7.7-1.2 11.8 0 15.2 5 27.8 15 37.6S39.3 416 57.9 416c11.3 0 21.8-1.9 31.6-6s20.1-10.9 30.7-20.6h.1c.8 8.6 2.7 20.3 5.7 26.7h30c-3.6-7-6-18.4-7.3-26.1-1-6-1.6-18.7-1.8-37.9h45v64h26.6V389q17.1 27 47.1 27c20.1 0 37.3-8.5 51.7-25.6 8.6-10.2 14.6-23 18-38.3h31.8c3.3 16 9.4 29.2 18.3 39.5 14.1 16.3 32.7 24.5 55.9 24.5 18.5 0 34.1-6 46.8-17.8 12.1-11.3 19.8-26.7 23.2-46.2h.5v-32H393.9zm-280.7 42.6c-4.1 9-10.4 16.1-19 21.4-8.6 5.2-18.4 7.8-29.5 7.8-11.2 0-19.6-2.8-25.4-8.2-5.8-5.6-8.7-12.4-8.7-20.7 0-3.9.7-7.5 2.1-10.9h83.6c-.7 4.1-1.8 7.7-3.1 10.6m105.1-43.3c0-22.2 4.6-39.2 13.7-50.9 9.1-11.8 20-17.6 32.5-17.6s23.1 5.6 31.8 17c8.8 11.3 13.1 28.7 13.2 52.3h-91.3c.1-.3.1-.6.1-.8m77.6 53.6c-9.1 11.8-20 17.7-32.5 17.7-15.5 0-27.7-8-36.7-23.9-2.2-3.9-4-8.8-5.3-14.7H306c-2.4 8.3-5.7 15.3-10.1 20.9m173.5 6.6c-7.5 7.5-16.9 11.2-28.2 11.2-14 0-25.4-5.6-34.1-16.7q-6.6-8.4-9.9-21.9h85.5c-2.6 11.9-7 21.1-13.3 27.4"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-foreground-color">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M299.5 96h-87.1L96 416h64l23.3-64h145.4l23.3 64h64zm-92.9 192L256 152.2 305.4 288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: red;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-droplet">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 384v32c-53 0-96-43-96-96h32c0 35.3 28.7 64 64 64m160-72c0 92.8-71.6 168-160 168S96 404.8 96 312C96 181.3 256 32 256 32s160 149.3 160 280m-32 0c0-46.3-25.3-104.7-73-169-20-27-40.3-49.8-55-65.4-14.7 15.6-34.9 38.5-55 65.4-47.8 64.3-73 122.8-73 169 0 75 57.4 136 128 136s128-61 128-136"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M32 32v416h416V32zm32 32h160v160H64zm0 352V256h160v160zm352 0H256V256h160zm0-192H256V64h160z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-middle">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 192H32v-32h448zm-64 32H96v32h320zm64 64H32v32h448z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 96v32H96V96zM352 256v224H32V256zm-32 32H64v160h256zm-32 32H96v32h192zm0 96v-32H96v32zM64 64h288V32H32v160h320v-32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </div>
+        </section>
         <span class="k-colspan-all k-col-span-full">outline</span>
         <section class="k-colspan-all k-col-span-full">
             <div class="k-toolbar k-toolbar-md k-toolbar-outline k-toolbar-resizable">
@@ -253,7 +468,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -275,7 +490,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-outline k-rounded-md">
                     <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
                     <span class="k-clear-value">
@@ -310,7 +525,7 @@
                         </span>
                     </button>
                 </span>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-outline">
                     <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -327,7 +542,7 @@
                         </span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-outline">
                     <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -379,7 +594,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-outline k-rounded-md">
                         <span class="k-input-inner">
@@ -401,7 +616,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -416,7 +631,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -445,7 +660,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -455,6 +670,227 @@
                 </button>
             </div>
         </section>
+        <span class="k-colspan-all k-col-span-full">outline with overlay</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-outline k-toolbar-scrollable k-toolbar-scrollable-overlay">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-ccw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m62 176 55.5 32C103.8 231.6 96 258.9 96 288c0 88.2 71.8 160 160 160s160-71.8 160-160-71.8-160-160-160v64L96 96 256 0v64c123.7 0 224 100.3 224 224S379.7 512 256 512 32 411.7 32 288c0-40.8 10.9-79.1 30-112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-cw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 32h-45.3L256 210.7 210.7 256l-69.5 69.5c-9.1-3.6-18.9-5.5-29.2-5.5-44.2 0-80 35.8-80 80 0 10.3 2 20.2 5.5 29.2 8.1 20.7 24.6 37.1 45.3 45.3 9.1 3.6 18.9 5.5 29.2 5.5 44.2 0 80-35.8 80-80 0-10.3-2-20.2-5.5-29.2l69.5-69.5 69.5 69.5c-3.6 9.1-5.5 18.9-5.5 29.2 0 44.2 35.8 80 80 80 10.3 0 20.2-2 29.2-5.5 20.7-8.1 37.1-24.6 45.3-45.3 3.6-9.1 5.5-18.9 5.5-29.2 0-44.2-35.8-80-80-80-10.3 0-20.2 2-29.2 5.5L301.3 256 480 77.3zM160 400c0 26.5-21.5 48-48 48-.9 0-1.8 0-2.7-.1-24.4-1.3-43.9-20.9-45.3-45.3 0-.9-.1-1.8-.1-2.7 0-26.5 21.5-48 48-48 .9 0 1.8 0 2.7.1 24.4 1.3 43.9 20.9 45.3 45.3.1.9.1 1.8.1 2.7m237.3-47.9c.9 0 1.8-.1 2.7-.1 26.5 0 48 21.5 48 48 0 .9 0 1.8-.1 2.7-1.3 24.4-20.9 43.9-45.3 45.3-.9 0-1.8.1-2.7.1-26.5 0-48-21.5-48-48 0-.9 0-1.8.1-2.7 1.4-24.5 20.9-44 45.3-45.3M240 256c0-8.8 7.2-16 16-16s16 7.2 16 16-7.2 16-16 16-16-7.2-16-16m-74.5-45.3L32 77.3V32h45.3l133.5 133.5z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-copy">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M384 96H192c-17.7 0-32 14.3-32 32v320c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V192zm64 352H192V128h160v96h96zM64 384h64v32H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32h192l32 32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-clipboard">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M416 32H311.4C300.3 12.9 279.7 0 256 0s-44.3 12.9-55.4 32H96c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32m-160 0c17.7 0 32 14.3 32 32h-64c0-17.7 14.3-32 32-32m160 416H96V64h64v64h192V64h64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-outline k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Size">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-outline">
+                        <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 32-96 128h192zM222 96h-60L32 480h60l32.4-96h135.2l32.4 96h60zm-78 230.4 48-141.7 48 141.7z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-shrink">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 160 96-128H288zm-152 0h-48L80 480h48l25.9-80h108.2l25.9 80h48zm-62.4 192L208 233.9 246.4 352z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-outline">
+                        <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 96h115.8c25.3 0 44.2 1.1 56.6 3.2s23.6 6.5 33.4 13.2q14.7 10.05 24.6 26.7c6.6 11.1 9.8 23.6 9.8 37.4 0 15-4.1 28.7-12.1 41.2-8.1 12.5-19.1 21.9-32.9 28.2 19.5 5.7 34.5 15.4 45 29s15.7 29.8 15.7 48.2c0 14.6-3.4 28.7-10.2 42.4-6.7 13.8-16 24.8-27.7 33s-26.1 13.3-43.3 15.2c-10.8 1.2-36.7 1.9-78 2.2H128zm64 53v74h30.9c25.2 0 40.8-.4 46.9-1.1 11.1-1.3 19.7-5.2 26.1-11.5 6.3-6.3 9.5-14.7 9.5-25 0-9.9-2.7-18-8.2-24.1-5.5-6.2-13.6-10-24.4-11.2-6.4-.7-24.8-1.1-55.2-1.1zm0 127.1V362h48.6c23.4 0 38.1-.7 44.5-2 9.6-1.8 17.5-6 23.6-12.8s9-15.9 9-27.3c0-9.6-2.3-17.9-7-24.6s-11.4-11.6-20.3-14.7c-8.8-3.1-28-4.6-57.5-4.6z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-italic">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m377.2 128 6.8-32H198.8l-6.8 32h59.2l-54.4 256h-62l-6.8 32h185.2l6.8-32h-59.2l54.4-256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-underline">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 416h256v32H128zM320 64v224c0 11.6-3.5 16-10.3 20.3-11.8 7.4-31.3 11.7-53.7 11.7s-41.9-4.3-53.7-11.7c-6.8-4.3-10.3-8.7-10.3-20.3V64h-64v224c0 70.4 64.3 96 128 96s128-25.6 128-96V64z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-strikethrough">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M393.9 320c.1-23.9 4.5-41.4 13.5-52.5 9.1-11.1 20.8-16.7 35.3-16.7 9.6 0 17.7 3.1 24.5 9.3s11.4 15.4 14.1 27.7l27.9-4.7c-3.3-18.4-10.8-32.7-22.5-42.7s-26.8-15-45.2-15c-14.5 0-28.1 3.6-40.4 11.1-12.4 7.4-21.6 18.5-27.7 33.2-5.9 14.4-8.9 31.2-9.1 50.4h-25.5v-2.2c0-13.2-1.7-25.6-5.1-37.1s-8.1-21.4-14.2-29.6c-6-8.1-13.7-14.5-23-19s-19.2-6.8-29.6-6.8c-18.9 0-34.3 8.2-46.4 24.6v-90H192v160h-45v-25.8c0-13.7-.5-23.3-1.4-28.5-1.7-8.5-4.7-15.5-9-21.1-4.3-5.5-10.9-10.2-19.9-13.8s-20.8-5.5-35.3-5.5c-14.6 0-27.4 2.1-38.5 6.4s-19.5 10.4-25.4 18.4c-5.8 8-10 18.4-12.6 31.4l28.1 4.1c3.1-13 7.8-22 14.3-27.1s16.4-7.7 29.9-7.7q21.75 0 32.7 10.5c5.4 5.1 8.1 14 8.1 26.6 0 1.1 0 3.8-.2 8.1-11 4.1-28 7.7-51.2 10.7-11.4 1.5-19.9 3-25.5 4.7-6.7 2-12.9 4.9-18.5 8.6H0v32h1.2c-.8 3.8-1.2 7.7-1.2 11.8 0 15.2 5 27.8 15 37.6S39.3 416 57.9 416c11.3 0 21.8-1.9 31.6-6s20.1-10.9 30.7-20.6h.1c.8 8.6 2.7 20.3 5.7 26.7h30c-3.6-7-6-18.4-7.3-26.1-1-6-1.6-18.7-1.8-37.9h45v64h26.6V389q17.1 27 47.1 27c20.1 0 37.3-8.5 51.7-25.6 8.6-10.2 14.6-23 18-38.3h31.8c3.3 16 9.4 29.2 18.3 39.5 14.1 16.3 32.7 24.5 55.9 24.5 18.5 0 34.1-6 46.8-17.8 12.1-11.3 19.8-26.7 23.2-46.2h.5v-32H393.9zm-280.7 42.6c-4.1 9-10.4 16.1-19 21.4-8.6 5.2-18.4 7.8-29.5 7.8-11.2 0-19.6-2.8-25.4-8.2-5.8-5.6-8.7-12.4-8.7-20.7 0-3.9.7-7.5 2.1-10.9h83.6c-.7 4.1-1.8 7.7-3.1 10.6m105.1-43.3c0-22.2 4.6-39.2 13.7-50.9 9.1-11.8 20-17.6 32.5-17.6s23.1 5.6 31.8 17c8.8 11.3 13.1 28.7 13.2 52.3h-91.3c.1-.3.1-.6.1-.8m77.6 53.6c-9.1 11.8-20 17.7-32.5 17.7-15.5 0-27.7-8-36.7-23.9-2.2-3.9-4-8.8-5.3-14.7H306c-2.4 8.3-5.7 15.3-10.1 20.9m173.5 6.6c-7.5 7.5-16.9 11.2-28.2 11.2-14 0-25.4-5.6-34.1-16.7q-6.6-8.4-9.9-21.9h85.5c-2.6 11.9-7 21.1-13.3 27.4"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-outline k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-foreground-color">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M299.5 96h-87.1L96 416h64l23.3-64h145.4l23.3 64h64zm-92.9 192L256 152.2 305.4 288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: red;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-outline k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-droplet">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 384v32c-53 0-96-43-96-96h32c0 35.3 28.7 64 64 64m160-72c0 92.8-71.6 168-160 168S96 404.8 96 312C96 181.3 256 32 256 32s160 149.3 160 280m-32 0c0-46.3-25.3-104.7-73-169-20-27-40.3-49.8-55-65.4-14.7 15.6-34.9 38.5-55 65.4-47.8 64.3-73 122.8-73 169 0 75 57.4 136 128 136s128-61 128-136"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-outline k-button-outline-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M32 32v416h416V32zm32 32h160v160H64zm0 352V256h160v160zm352 0H256V256h160zm0-192H256V64h160z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-middle">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 192H32v-32h448zm-64 32H96v32h320zm64 64H32v32h448z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 96v32H96V96zM352 256v224H32V256zm-32 32H64v160h256zm-32 32H96v32h192zm0 96v-32H96v32zM64 64h288V32H32v160h320v-32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </div>
+        </section>
         <span class="k-colspan-all k-col-span-full">flat</span>
         <section class="k-colspan-all k-col-span-full">
             <div class="k-toolbar k-toolbar-md k-toolbar-flat k-toolbar-resizable">
@@ -472,7 +908,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -494,7 +930,7 @@
                         </svg>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-flat k-rounded-md">
                     <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
                     <span class="k-clear-value">
@@ -529,7 +965,7 @@
                         </span>
                     </button>
                 </span>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                     <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
@@ -546,7 +982,7 @@
                         </span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
                     <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
@@ -598,7 +1034,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
                         <span class="k-input-inner">
@@ -620,7 +1056,7 @@
                         </button>
                     </span>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -635,7 +1071,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -664,7 +1100,7 @@
                         </span>
                     </span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -674,6 +1110,227 @@
                 </button>
             </div>
         </section>
+        <span class="k-colspan-all k-col-span-full">flat with overlay</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-flat k-toolbar-scrollable k-toolbar-scrollable-overlay">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-ccw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m62 176 55.5 32C103.8 231.6 96 258.9 96 288c0 88.2 71.8 160 160 160s160-71.8 160-160-71.8-160-160-160v64L96 96 256 0v64c123.7 0 224 100.3 224 224S379.7 512 256 512 32 411.7 32 288c0-40.8 10.9-79.1 30-112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-arrow-rotate-cw">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-cut">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 32h-45.3L256 210.7 210.7 256l-69.5 69.5c-9.1-3.6-18.9-5.5-29.2-5.5-44.2 0-80 35.8-80 80 0 10.3 2 20.2 5.5 29.2 8.1 20.7 24.6 37.1 45.3 45.3 9.1 3.6 18.9 5.5 29.2 5.5 44.2 0 80-35.8 80-80 0-10.3-2-20.2-5.5-29.2l69.5-69.5 69.5 69.5c-3.6 9.1-5.5 18.9-5.5 29.2 0 44.2 35.8 80 80 80 10.3 0 20.2-2 29.2-5.5 20.7-8.1 37.1-24.6 45.3-45.3 3.6-9.1 5.5-18.9 5.5-29.2 0-44.2-35.8-80-80-80-10.3 0-20.2 2-29.2 5.5L301.3 256 480 77.3zM160 400c0 26.5-21.5 48-48 48-.9 0-1.8 0-2.7-.1-24.4-1.3-43.9-20.9-45.3-45.3 0-.9-.1-1.8-.1-2.7 0-26.5 21.5-48 48-48 .9 0 1.8 0 2.7.1 24.4 1.3 43.9 20.9 45.3 45.3.1.9.1 1.8.1 2.7m237.3-47.9c.9 0 1.8-.1 2.7-.1 26.5 0 48 21.5 48 48 0 .9 0 1.8-.1 2.7-1.3 24.4-20.9 43.9-45.3 45.3-.9 0-1.8.1-2.7.1-26.5 0-48-21.5-48-48 0-.9 0-1.8.1-2.7 1.4-24.5 20.9-44 45.3-45.3M240 256c0-8.8 7.2-16 16-16s16 7.2 16 16-7.2 16-16 16-16-7.2-16-16m-74.5-45.3L32 77.3V32h45.3l133.5 133.5z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-copy">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M384 96H192c-17.7 0-32 14.3-32 32v320c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V192zm64 352H192V128h160v96h96zM64 384h64v32H64c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32h192l32 32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-clipboard">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M416 32H311.4C300.3 12.9 279.7 0 256 0s-44.3 12.9-55.4 32H96c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32m-160 0c17.7 0 32 14.3 32 32h-64c0-17.7 14.3-32 32-32m160 416H96V64h64v64h192V64h64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Name">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <span class="k-toolbar-combobox  k-combobox k-input k-input-md k-input-flat k-rounded-md">
+                        <input type="text" class="k-input-inner" placeholder="" autocomplete="off" value="Font Size">
+                        <span class="k-clear-value">
+                            <span class="k-icon k-svg-icon k-svg-i-x">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                        <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </span>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
+                        <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-grow">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 32-96 128h192zM222 96h-60L32 480h60l32.4-96h135.2l32.4 96h60zm-78 230.4 48-141.7 48 141.7z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-font-shrink">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m384 160 96-128H288zm-152 0h-48L80 480h48l25.9-80h108.2l25.9 80h48zm-62.4 192L208 233.9 246.4 352z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
+                        <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 96h115.8c25.3 0 44.2 1.1 56.6 3.2s23.6 6.5 33.4 13.2q14.7 10.05 24.6 26.7c6.6 11.1 9.8 23.6 9.8 37.4 0 15-4.1 28.7-12.1 41.2-8.1 12.5-19.1 21.9-32.9 28.2 19.5 5.7 34.5 15.4 45 29s15.7 29.8 15.7 48.2c0 14.6-3.4 28.7-10.2 42.4-6.7 13.8-16 24.8-27.7 33s-26.1 13.3-43.3 15.2c-10.8 1.2-36.7 1.9-78 2.2H128zm64 53v74h30.9c25.2 0 40.8-.4 46.9-1.1 11.1-1.3 19.7-5.2 26.1-11.5 6.3-6.3 9.5-14.7 9.5-25 0-9.9-2.7-18-8.2-24.1-5.5-6.2-13.6-10-24.4-11.2-6.4-.7-24.8-1.1-55.2-1.1zm0 127.1V362h48.6c23.4 0 38.1-.7 44.5-2 9.6-1.8 17.5-6 23.6-12.8s9-15.9 9-27.3c0-9.6-2.3-17.9-7-24.6s-11.4-11.6-20.3-14.7c-8.8-3.1-28-4.6-57.5-4.6z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-italic">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="m377.2 128 6.8-32H198.8l-6.8 32h59.2l-54.4 256h-62l-6.8 32h185.2l6.8-32h-59.2l54.4-256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-underline">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M128 416h256v32H128zM320 64v224c0 11.6-3.5 16-10.3 20.3-11.8 7.4-31.3 11.7-53.7 11.7s-41.9-4.3-53.7-11.7c-6.8-4.3-10.3-8.7-10.3-20.3V64h-64v224c0 70.4 64.3 96 128 96s128-25.6 128-96V64z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-strikethrough">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M393.9 320c.1-23.9 4.5-41.4 13.5-52.5 9.1-11.1 20.8-16.7 35.3-16.7 9.6 0 17.7 3.1 24.5 9.3s11.4 15.4 14.1 27.7l27.9-4.7c-3.3-18.4-10.8-32.7-22.5-42.7s-26.8-15-45.2-15c-14.5 0-28.1 3.6-40.4 11.1-12.4 7.4-21.6 18.5-27.7 33.2-5.9 14.4-8.9 31.2-9.1 50.4h-25.5v-2.2c0-13.2-1.7-25.6-5.1-37.1s-8.1-21.4-14.2-29.6c-6-8.1-13.7-14.5-23-19s-19.2-6.8-29.6-6.8c-18.9 0-34.3 8.2-46.4 24.6v-90H192v160h-45v-25.8c0-13.7-.5-23.3-1.4-28.5-1.7-8.5-4.7-15.5-9-21.1-4.3-5.5-10.9-10.2-19.9-13.8s-20.8-5.5-35.3-5.5c-14.6 0-27.4 2.1-38.5 6.4s-19.5 10.4-25.4 18.4c-5.8 8-10 18.4-12.6 31.4l28.1 4.1c3.1-13 7.8-22 14.3-27.1s16.4-7.7 29.9-7.7q21.75 0 32.7 10.5c5.4 5.1 8.1 14 8.1 26.6 0 1.1 0 3.8-.2 8.1-11 4.1-28 7.7-51.2 10.7-11.4 1.5-19.9 3-25.5 4.7-6.7 2-12.9 4.9-18.5 8.6H0v32h1.2c-.8 3.8-1.2 7.7-1.2 11.8 0 15.2 5 27.8 15 37.6S39.3 416 57.9 416c11.3 0 21.8-1.9 31.6-6s20.1-10.9 30.7-20.6h.1c.8 8.6 2.7 20.3 5.7 26.7h30c-3.6-7-6-18.4-7.3-26.1-1-6-1.6-18.7-1.8-37.9h45v64h26.6V389q17.1 27 47.1 27c20.1 0 37.3-8.5 51.7-25.6 8.6-10.2 14.6-23 18-38.3h31.8c3.3 16 9.4 29.2 18.3 39.5 14.1 16.3 32.7 24.5 55.9 24.5 18.5 0 34.1-6 46.8-17.8 12.1-11.3 19.8-26.7 23.2-46.2h.5v-32H393.9zm-280.7 42.6c-4.1 9-10.4 16.1-19 21.4-8.6 5.2-18.4 7.8-29.5 7.8-11.2 0-19.6-2.8-25.4-8.2-5.8-5.6-8.7-12.4-8.7-20.7 0-3.9.7-7.5 2.1-10.9h83.6c-.7 4.1-1.8 7.7-3.1 10.6m105.1-43.3c0-22.2 4.6-39.2 13.7-50.9 9.1-11.8 20-17.6 32.5-17.6s23.1 5.6 31.8 17c8.8 11.3 13.1 28.7 13.2 52.3h-91.3c.1-.3.1-.6.1-.8m77.6 53.6c-9.1 11.8-20 17.7-32.5 17.7-15.5 0-27.7-8-36.7-23.9-2.2-3.9-4-8.8-5.3-14.7H306c-2.4 8.3-5.7 15.3-10.1 20.9m173.5 6.6c-7.5 7.5-16.9 11.2-28.2 11.2-14 0-25.4-5.6-34.1-16.7q-6.6-8.4-9.9-21.9h85.5c-2.6 11.9-7 21.1-13.3 27.4"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-foreground-color">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M299.5 96h-87.1L96 416h64l23.3-64h145.4l23.3 64h64zm-92.9 192L256 152.2 305.4 288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: red;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <div class="k-toolbar-item">
+                        <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-flat k-rounded-md">
+                            <span class="k-input-inner">
+                                <span class="k-value-icon k-color-preview k-icon-color-preview">
+                                    <span class="k-color-preview-icon k-icon k-svg-icon k-svg-i-droplet">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 384v32c-53 0-96-43-96-96h32c0 35.3 28.7 64 64 64m160-72c0 92.8-71.6 168-160 168S96 404.8 96 312C96 181.3 256 32 256 32s160 149.3 160 280m-32 0c0-46.3-25.3-104.7-73-169-20-27-40.3-49.8-55-65.4-14.7 15.6-34.9 38.5-55 65.4-47.8 64.3-73 122.8-73 169 0 75 57.4 136 128 136s128-61 128-136"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-color-preview-mask" style="background-color: fuchsia;"></span>
+                                </span>
+                            </span>
+                            <button class="k-input-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                                <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 352 128 160h256z"></path>
+                                    </svg>
+                                </span>
+                            </button>
+                        </span>
+                    </div>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-borders-all">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M32 32v416h416V32zm32 32h160v160H64zm0 352V256h160v160zm352 0H256V256h160zm0-192H256V64h160z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-middle">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 192H32v-32h448zm-64 32H96v32h320zm64 64H32v32h448z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-separator k-separator"></div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-text-wrap">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M480 96v32H96V96zM352 256v224H32V256zm-32 32H64v160h256zm-32 32H96v32h192zm0 96v-32H96v32zM64 64h288V32H32v160h320v-32H64z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </span>
+            </div>
+        </section>
     </div>
 </body>
 </html>
diff --git a/tests/toolbar/toolbar-scrollable-buttons-hidden.html b/tests/toolbar/toolbar-scrollable-buttons-hidden.html
new file mode 100644
index 00000000000..b1da6876c12
--- /dev/null
+++ b/tests/toolbar/toolbar-scrollable-buttons-hidden.html
@@ -0,0 +1,452 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <div id="test-area" class="k-d-grid k-grid-cols-2">
+        <span class="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Start</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable k-toolbar-scrollable-overlay k-toolbar-scrollable-start">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </span>
+            </div>
+        </section>
+        <span class="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll End</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable k-toolbar-scrollable-overlay k-toolbar-scrollable-end">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </span>
+            </div>
+        </section>
+        <span class="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable k-toolbar-scrollable-overlay">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </span>
+            </div>
+        </section>
+        <span class="k-colspan-all k-col-span-full">Toolbar Hidden Buttons Scroll Middle RTL</span>
+        <section class="k-colspan-all k-col-span-full" dir="rtl">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable k-toolbar-scrollable-overlay">
+                <span class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </span>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/toolbar/toolbar-scrollable-buttons.html b/tests/toolbar/toolbar-scrollable-buttons.html
new file mode 100644
index 00000000000..61ea83ae3a9
--- /dev/null
+++ b/tests/toolbar/toolbar-scrollable-buttons.html
@@ -0,0 +1,393 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <div id="test-area" class="k-d-grid k-grid-cols-2">
+        <span class="k-colspan-all k-col-span-full">Toolbar Buttons Around</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable">
+                <button class="k-toolbar-prev k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="m160 256 192-128v256z"></path>
+                        </svg>
+                    </span>
+                </button>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <div class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-next k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M352 256 160 384V128z"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+        </section>
+        <span class="k-colspan-all k-col-span-full">Toolbar Buttons Start</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable">
+                <div class="k-button-group k-button-group-solid">
+                    <button class="k-toolbar-prev k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m160 256 192-128v256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-next k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M352 256 160 384V128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <div class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <span class="k-colspan-all k-col-span-full">Toolbar Buttons End</span>
+        <section class="k-colspan-all k-col-span-full">
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-scrollable">
+                <div class="k-toolbar-items k-toolbar-items-scroll">
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                    <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Button</span>
+                    </button>
+                    <button class="k-toolbar-menu-button  k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-text">Menu button</span>
+                        <span class="k-menu-button-arrow k-button-arrow">
+                            <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </span>
+                    </button>
+                    <div class="k-toolbar-split-button  k-split-button k-button-group k-rounded-md">
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-text">Split button</span>
+                        </button>
+                        <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 352 128 160h256z"></path>
+                                </svg>
+                            </span>
+                        </button>
+                    </div>
+                    <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                        <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Left</span>
+                        </button>
+                        <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Center</span>
+                        </button>
+                        <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                            <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                </svg>
+                            </span>
+                            <span class="k-button-text">Right</span>
+                        </button>
+                    </div>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <div class="k-button-group k-button-group-solid">
+                    <button class="k-toolbar-prev k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="m160 256 192-128v256z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                    <button class="k-toolbar-next k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M352 256 160 384V128z"></path>
+                            </svg>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/toolbar/toolbar-section-sizes.html b/tests/toolbar/toolbar-section-sizes.html
new file mode 100644
index 00000000000..6eddbc95636
--- /dev/null
+++ b/tests/toolbar/toolbar-section-sizes.html
@@ -0,0 +1,332 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        .k-animation-container {
+            width: 100%;
+        }
+        .toolbar-popup-section {
+            position: relative;
+            height: 200px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-2">
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Small Toolbar Popup Section</span>
+            <div class="k-toolbar k-toolbar-sm k-toolbar-solid k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                    <button class="k-group-start k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-sm k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-sm k-toolbar-items-list-solid">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-solid">
+                                <button class="k-group-start k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Medium Toolbar Popup Section</span>
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                    <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-md k-toolbar-items-list-solid">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-solid">
+                                <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Large Toolbar Popup Section</span>
+            <div class="k-toolbar k-toolbar-lg k-toolbar-solid k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                    <button class="k-group-start k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-lg k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-lg k-toolbar-items-list-solid">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-solid">
+                                <button class="k-group-start k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/toolbar/toolbar-section.html b/tests/toolbar/toolbar-section.html
new file mode 100644
index 00000000000..f0829f80b13
--- /dev/null
+++ b/tests/toolbar/toolbar-section.html
@@ -0,0 +1,332 @@
+<!doctype html>
+<html lang="en" class="k-no-animations" style="--kendo-scrollbar-width: 15px;">
+<head>
+    <title>Document</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" data-role="kendo-theme" href="/packages/default/dist/all.css">
+    <link rel="stylesheet" data-role="kendo-theme-utils" href="/packages/utils/dist/all.css">
+    <link rel="stylesheet" href="/packages/html/assets/styles.css">
+    <script src="/packages/html/assets/scripts.js"></script>
+</head>
+<body id="app" class="k-body">
+    <style>
+        .k-animation-container {
+            width: 100%;
+        }
+        .toolbar-popup-section {
+            position: relative;
+            height: 200px;
+        }
+
+    </style>
+    <div id="test-area" class="k-d-grid k-grid-cols-2">
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Toolbar Popup Section</span>
+            <div class="k-toolbar k-toolbar-md k-toolbar-solid k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
+                    <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-md k-toolbar-items-list-solid">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-solid">
+                                <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Toolbar Popup Section Outline</span>
+            <div class="k-toolbar k-toolbar-md k-toolbar-outline k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-outline">
+                    <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-md k-toolbar-items-list-outline">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-md k-button-outline k-button-outline-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-outline">
+                                <button class="k-group-start k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-md k-button-outline k-button-outline-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="k-colspan-all k-col-span-full toolbar-popup-section">
+            <span>Toolbar Popup Section Flat</span>
+            <div class="k-toolbar k-toolbar-md k-toolbar-flat k-toolbar-section">
+                <button class="k-toolbar-button  k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                    <span class="k-button-text">Button</span>
+                </button>
+                <div class="k-toolbar-button-group  k-button-group k-button-group-flat">
+                    <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Left</span>
+                    </button>
+                    <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Center</span>
+                    </button>
+                    <button class="k-group-end k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                        <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                            <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                            </svg>
+                        </span>
+                        <span class="k-button-text">Right</span>
+                    </button>
+                </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
+                <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
+                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-horizontal">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M128 240c0-26.4-21.6-48-48-48s-48 21.6-48 48 21.6 48 48 48 48-21.6 48-48m64 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48m160 0c0 26.4 21.6 48 48 48s48-21.6 48-48-21.6-48-48-48-48 21.6-48 48"></path>
+                        </svg>
+                    </span>
+                </button>
+            </div>
+            <div class="k-animation-container k-animation-container-shown">
+                <div class="k-child-animation-container">
+                    <div class="k-toolbar-popup k-popup">
+                        <span class="k-toolbar-items-list k-toolbar-items-list-md k-toolbar-items-list-flat">
+                            <div class="k-split-button k-button-group k-rounded-md">
+                                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                    <span class="k-button-text">Split button</span>
+                                </button>
+                                <button class="k-split-button-arrow k-button k-button-md k-button-flat k-button-flat-base k-rounded-md k-icon-button">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </button>
+                            </div>
+                            <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                <span class="k-button-text">Button</span>
+                            </button>
+                            <div class="k-toolbar-separator k-separator"></div>
+                            <button class="k-menu-button k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                <span class="k-button-text">Menu button</span>
+                                <span class="k-menu-button-arrow k-button-arrow">
+                                    <span class="k-icon k-svg-icon k-svg-i-caret-alt-down">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M256 352 128 160h256z"></path>
+                                        </svg>
+                                    </span>
+                                </span>
+                            </button>
+                            <div class="k-button-group k-button-group-flat">
+                                <button class="k-group-start k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-96 32H64v32h288zm96 64H64v32h384zm-96 64H64v32h288zm96 64H64v32h384zm-96 64H64v32h288z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Left</span>
+                                </button>
+                                <button class="k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-center">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M448 96H64V64h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256zm64 64H64v-32h384zm-64 64H128v-32h256z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Center</span>
+                                </button>
+                                <button class="k-group-end k-button k-button-md k-button-flat k-button-flat-base k-rounded-md">
+                                    <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-right">
+                                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                            <path d="M64 192h384v32H64zm384-96V64H64v32zm-288 64h288v-32H160zM64 320v32h384v-32zm96-32h288v-32H160zm0 96v32h288v-32z"></path>
+                                        </svg>
+                                    </span>
+                                    <span class="k-button-text">Right</span>
+                                </button>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+</body>
+</html>
diff --git a/tests/toolbar/toolbar-sizes.html b/tests/toolbar/toolbar-sizes.html
index 0fbf17c282b..9974e437812 100644
--- a/tests/toolbar/toolbar-sizes.html
+++ b/tests/toolbar/toolbar-sizes.html
@@ -27,7 +27,7 @@
                 <button class="k-toolbar-button  k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
                     <span class="k-button-text">Toggle</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-sm k-button-solid k-button-solid-base k-rounded-md">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
@@ -54,11 +54,11 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-sm k-button-solid k-button-solid-primary k-rounded-md">
                     <span class="k-button-text">Primary</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <label>Label:</label>
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-sm k-picker-solid k-rounded-md">
@@ -82,6 +82,7 @@
                         <span class="k-switch-thumb k-rounded-full"></span>
                     </span>
                 </span>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-sm k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -107,7 +108,7 @@
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                     <span class="k-button-text">Toggle</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
@@ -134,11 +135,11 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
                     <span class="k-button-text">Primary</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <label>Label:</label>
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
@@ -162,6 +163,7 @@
                         <span class="k-switch-thumb k-rounded-full"></span>
                     </span>
                 </span>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -187,7 +189,7 @@
                 <button class="k-toolbar-button  k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
                     <span class="k-button-text">Toggle</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-lg k-button-solid k-button-solid-base k-rounded-md">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
@@ -214,11 +216,11 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-lg k-button-solid k-button-solid-primary k-rounded-md">
                     <span class="k-button-text">Primary</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <label>Label:</label>
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-lg k-picker-solid k-rounded-md">
@@ -242,6 +244,7 @@
                         <span class="k-switch-thumb k-rounded-full"></span>
                     </span>
                 </span>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-lg k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
diff --git a/tests/toolbar/toolbar.html b/tests/toolbar/toolbar.html
index 93a493961b6..ebbad89ecc0 100644
--- a/tests/toolbar/toolbar.html
+++ b/tests/toolbar/toolbar.html
@@ -27,7 +27,7 @@
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                     <span class="k-button-text">Toggle</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
@@ -54,11 +54,11 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
                     <span class="k-button-text">Primary</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <label>Label:</label>
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
@@ -82,6 +82,7 @@
                         <span class="k-switch-thumb k-rounded-full"></span>
                     </span>
                 </span>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -107,7 +108,7 @@
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                     <span class="k-button-text">Toggle</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-button-group  k-button-group k-button-group-solid">
                     <button class="k-group-start k-button k-button-md k-button-solid k-button-solid-base k-rounded-md">
                         <span class="k-button-icon k-icon k-svg-icon k-svg-i-align-left">
@@ -134,11 +135,11 @@
                         <span class="k-button-text">Right</span>
                     </button>
                 </div>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-primary k-rounded-md">
                     <span class="k-button-text">Primary</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <div class="k-toolbar-item">
                     <label>Label:</label>
                     <span class="k-colorpicker k-icon-picker k-picker k-picker-md k-picker-solid k-rounded-md">
@@ -162,6 +163,7 @@
                         <span class="k-switch-thumb k-rounded-full"></span>
                     </span>
                 </span>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -192,7 +194,7 @@
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-disabled">
                     <span class="k-button-text">Disabled</span>
                 </button>
-                <div class="k-separator"></div>
+                <div class="k-toolbar-separator k-separator"></div>
                 <button class="k-toolbar-button  k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-bold">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -235,6 +237,7 @@
                         </svg>
                     </span>
                 </button>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-hover k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -294,6 +297,7 @@
                     </span>
                     <span class="k-button-text">Disabled</span>
                 </button>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-focus k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -353,6 +357,7 @@
                     </span>
                     <span class="k-button-text">Disabled</span>
                 </button>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-active k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -408,6 +413,7 @@
                         <span class="k-button-text">Button 2</span>
                     </button>
                 </div>
+                <div class="k-toolbar-separator k-toolbar-button-separator k-separator"></div>
                 <button class="k-toolbar-overflow-button k-button k-button-md k-button-flat k-button-flat-base k-focus k-disabled k-icon-button">
                     <span class="k-button-icon k-icon k-svg-icon k-svg-i-more-vertical">
                         <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">