Add ButtonGroup for grouping of toolbar items

ts/editor-toolbar/ButtonBar.svelte

@@ -1,6 +1,6 @@
 <style lang="scss">
     ul {
-        padding-left: 0;
+        padding-inline-start: 0;
         margin-bottom: 2px;
     }
 </style>

ts/editor-toolbar/ButtonGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="typescript">
+    import ButtonItem from "./ButtonItem.svelte";
+</script>
+
+<style lang="scss">
+    ul {
+        padding-inline-start: 0;
+
+        margin-left: 0.25rem;
+        margin-right: 0.25rem;
+
+        & :global(button) {
+            margin-left: -1px;
+        }
+
+        & > :global(li:nth-child(1) button) {
+            margin-left: 0px;
+            border-top-left-radius: 0.35rem;
+            border-bottom-left-radius: 0.35rem;
+        }
+
+        & > :global(li:nth-last-child(1) button) {
+            border-top-right-radius: 0.35rem;
+            border-bottom-right-radius: 0.35rem;
+        }
+    }
+</style>
+
+<ButtonItem>
+    <ul>
+        <slot />
+    </ul>
+</ButtonItem>

ts/editor-toolbar/EditorToolbar.svelte

@@ -1,6 +1,7 @@
 <script lang="typescript">
     import ButtonBarOuter from "./ButtonBarOuter.svelte";
     import ButtonBar from "./ButtonBar.svelte";
+    import ButtonGroup from "./ButtonGroup.svelte";
 
     import LabelButton from "./LabelButton.svelte";
     import IconButton from "./IconButton.svelte";
@@ -22,25 +23,28 @@
     import { forecolorButton, colorpickerButton } from "./color";
 
     export let leftButtons = [
+        [
             { component: LabelButton, label: "Fields..." },
             { component: LabelButton, label: "Cards..." },
+        ],
     ];
 
     export let rightButtons = [
+        [
             boldButton,
             italicButton,
             underlineButton,
             superscriptButton,
             subscriptButton,
             eraserButton,
-
-        forecolorButton,
-        colorpickerButton,
-
+        ],
+        [forecolorButton, colorpickerButton],
+        [
             { component: IconButton, icon: bracketsIcon },
             { component: IconButton, icon: paperclipIcon },
             { component: IconButton, icon: micIcon },
             { component: IconButton, icon: threeDotsIcon },
+        ],
     ];
     export let nightMode: boolean;
 
@@ -49,14 +53,22 @@
 
 <ButtonBarOuter>
     <ButtonBar>
-        {#each leftButtons as leftButton}
+        {#each leftButtons as leftGroup}
+            <ButtonGroup>
+                {#each leftGroup as leftButton}
                     <svelte:component this={leftButton.component} {...leftButton} />
                 {/each}
+            </ButtonGroup>
+        {/each}
     </ButtonBar>
 
     <ButtonBar>
-        {#each rightButtons as rightButton}
+        {#each rightButtons as rightGroup}
+            <ButtonGroup>
+                {#each rightGroup as rightButton}
                     <svelte:component this={rightButton.component} {...rightButton} />
                 {/each}
+            </ButtonGroup>
+        {/each}
     </ButtonBar>
 </ButtonBarOuter>