Pass wraps more similiar to how size is passed via CSS variables

ts/editor-toolbar/ButtonGroup.svelte

@@ -6,12 +6,12 @@
     export let props: Record<string, string> = {};
 
     export let buttons: Buttons;
-    export let wraps: boolean;
 </script>
 
 <style lang="scss">
     ul {
         display: flex;
+        flex-wrap: var(--toolbar-wrap);
         overflow-y: auto;
 
         padding-inline-start: 0;
@@ -23,10 +23,6 @@
         }
     }
 
-    .wraps {
-        flex-flow: wrap;
-    }
-
     li {
         display: inline-block;
         margin-bottom: calc(var(--toolbar-size) / 15);
@@ -54,11 +50,11 @@
     }
 </style>
 
-<ul {id} class={className} {...props} class:wraps>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
-                <svelte:self buttons={button} {wraps} />
+                <svelte:self buttons={button} />
             {:else}
                 <svelte:component this={button.component} {...button} />
             {/if}

ts/editor-toolbar/EditorToolbar.svelte

@@ -58,7 +58,7 @@
     }
 </style>
 
-<div style={`--toolbar-size: ${size}px`}>
+<div style={`--toolbar-size: ${size}px; --toolbar-wrap: ${wraps ? "wrap" : "nowrap"}`}>
     <div>
         {#each _menus as menu}
             <svelte:component this={menu.component} {...menu} />
@@ -66,6 +66,6 @@
     </div>
 
     <nav>
-        <ButtonGroup buttons={_buttons} {wraps} />
+        <ButtonGroup buttons={_buttons} />
     </nav>
 </div>

ts/editor-toolbar/index.ts

@@ -26,7 +26,6 @@ class EditorToolbar extends HTMLElement {
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
-            console.log(this.buttons);
             this.component = new EditorToolbarSvelte({
                 target: this,
                 props: {