Add withLabel component

ts/editor-toolbar/WithLabel.d.ts

@@ -0,0 +1,8 @@
+// Copyright: Ankitects Pty Ltd and contributors
+// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+import type { ToolbarItem } from "./types";
+
+export interface WithLabelProps {
+    button: ToolbarItem;
+    label: string;
+}

ts/editor-toolbar/WithLabel.svelte

@@ -0,0 +1,22 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="typescript">
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
+    import type { Modifier } from "lib/shortcuts";
+
+    import { onDestroy } from "svelte";
+    import { registerShortcut, getPlatformString } from "lib/shortcuts";
+
+    export let button: ToolbarItem;
+    export let label: string;
+</script>
+
+<!-- svelte-ignore a11y-label-has-associated-control -->
+
+<label>
+    {label}
+    <svelte:component this={button.component} {...button} />
+</label>

ts/editor-toolbar/dynamicComponents.ts

@@ -26,6 +26,9 @@ import type { WithDropdownMenuProps } from "./WithDropdownMenu";
 import WithShortcut from "./WithShortcut.svelte";
 import type { WithShortcutProps } from "./WithShortcut";
 
+import WithLabel from "./WithLabel.svelte";
+import type { WithLabelProps } from "./WithLabel";
+
 import { dynamicComponent } from "sveltelib/dynamicComponent";
 
 export const rawButton = dynamicComponent<typeof RawButton, { html: string }>(
@@ -71,3 +74,5 @@ export const withDropdownMenu = dynamicComponent<
 export const withShortcut = dynamicComponent<typeof WithShortcut, WithShortcutProps>(
     WithShortcut
 );
+
+export const withLabel = dynamicComponent<typeof WithLabel, WithLabelProps>(WithLabel);