Remove props property in favor of $$restProps

ts/editor-toolbar/ButtonDropdown.svelte

@@ -4,7 +4,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
 
     function extendClassName(className: string): string {
         return `dropdown-menu bg-transparent border-0 ${className}`;
@@ -13,4 +12,4 @@
     export let buttons: DynamicSvelteComponent[];
 </script>
 
-<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
+<ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />

ts/editor-toolbar/ButtonGroup.svelte

@@ -3,7 +3,6 @@
 
     export let id;
     export let className = "";
-    export let props: Record<string, string> = {};
 
     export let buttons: DynamicSvelteComponent[];
 </script>
@@ -50,7 +49,7 @@
     }
 </style>
 
-<ul {id} class={className} {...props}>
+<ul {id} class={className} {...$$restProps}>
     {#each buttons as button}
         <li>
             <svelte:component this={button.component} {...button} />

ts/editor-toolbar/ColorPicker.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript">
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onChange: (event: Event) => void;
@@ -46,8 +45,8 @@
     tabindex="-1"
     {id}
     class={className}
-    {...props}
     title={tooltip}
+    {...$$restProps}
     on:mousedown|preventDefault>
     <span> <input type="color" on:change={onChange} /> </span>
 </button>

ts/editor-toolbar/CommandIconButton.svelte

@@ -38,7 +38,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let icon;
@@ -62,6 +61,6 @@
     }
 </script>
 
-<SquareButton {id} {className} {props} {tooltip} {active} {onClick} on:mount>
+<SquareButton {id} {className} {tooltip} {active} {onClick} {...$$restProps} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/DropdownItem.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript">
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
@@ -12,8 +11,8 @@
 <button
     {id}
     class={`dropdown-item ${className}`}
-    {...props}
     title={tooltip}
+    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="float-start">{label}</span>

ts/editor-toolbar/IconButton.svelte

@@ -3,13 +3,12 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let icon = "";
     export let onClick: (event: MouseEvent) => void;
 </script>
 
-<SquareButton {id} {className} {props} {tooltip} {onClick} on:mount>
+<SquareButton {id} {className} {tooltip} {onClick} {...$$restProps} on:mount>
     {@html icon}
 </SquareButton>

ts/editor-toolbar/LabelButton.svelte

@@ -4,7 +4,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
 
     export let label: string;
     export let tooltip: string;
@@ -57,9 +56,9 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    {...props}
+    title={tooltip}
+    {...$$restProps}
     on:click={onClick}
-    on:mousedown|preventDefault
+    on:mousedown|preventDefault>
-    title={tooltip}>
     {label}
 </button>

ts/editor-toolbar/SelectButton.svelte

@@ -11,7 +11,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     function extendClassName(classes: string) {
@@ -59,8 +58,8 @@
     disabled={_disabled}
     {id}
     class={extendClassName(className)}
-    {...props}
+    title={tooltip}
-    title={tooltip}>
+    {...$$restProps}>
     {#each options as option}
         <SelectOption {...option} />
     {/each}

ts/editor-toolbar/SquareButton.svelte

@@ -5,7 +5,6 @@
 
     export let id = "";
     export let className = "";
-    export let props: Record<string, string> = {};
     export let tooltip: string;
 
     export let onClick: (event: MouseEvent) => void;
@@ -85,11 +84,11 @@
     bind:this={buttonRef}
     {id}
     class={className}
-    {...props}
     title={tooltip}
     class:active
     tabindex="-1"
     disabled={_disabled}
+    {...$$restProps}
     on:click={onClick}
     on:mousedown|preventDefault>
     <span class="p-1"><slot /></span>

ts/editor-toolbar/WithDropdownMenu.svelte

@@ -4,14 +4,14 @@
     export let button: DynamicSvelteComponent;
     export let menuId: string;
 
-    function extend({ className, props, ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
+    function extend({
+        className,
+        ...rest
+    }: DynamicSvelteComponent): DynamicSvelteComponent {
         return {
             className: `${className} dropdown-toggle`,
-            props: {
+            "data-bs-toggle": "dropdown",
-                "data-bs-toggle": "dropdown",
+            "aria-expanded": "false",
-                "aria-expanded": "false",
-                ...props,
-            },
             ...rest,
         };
     }