Add svelte slots to SubtleButton

UI/Base/SubtleButton.svelte

@@ -7,11 +7,18 @@
 
   export let imageUrl: string | BaseUIElement
   export let message: string | BaseUIElement
-  export let options: { url?: string | Store<string>; newTab?: boolean; imgSize?: string, extraClasses?: string }
+  export let options: {
+    url?: string | Store<string>
+    newTab?: boolean
+    imgSize?: string
+    extraClasses?: string
+  }
 
-  let element: HTMLElement
   let href = typeof options?.url == "string" ? options.url : ""
 
+  let imgElem: HTMLElement
+  let msgElem: HTMLElement
+
   onMount(() => {
     if (typeof options?.url != "string" && options?.url != undefined) {
       options.url.addCallbackAndRun((data) => {
@@ -19,33 +26,53 @@
       })
     }
 
-    let img: BaseUIElement
+    // Image
-    const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
+    if (imgElem != undefined) {
-    if ((imageUrl ?? "") === "") {
+      let img: BaseUIElement
-      img = undefined
-    } else if (typeof imageUrl === "string") {
-      img = new Img(imageUrl)?.SetClass(imgClasses)
-    } else {
-      img = imageUrl?.SetClass(imgClasses)
-    }
-    if (img != undefined) element.appendChild(img.ConstructElement())
 
-    let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
+      const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
-    element.appendChild(msg.ConstructElement())
+      if ((imageUrl ?? "") === "") {
+        img = undefined
+      } else if (typeof imageUrl === "string") {
+        img = new Img(imageUrl)?.SetClass(imgClasses)
+      } else {
+        img = imageUrl?.SetClass(imgClasses)
+      }
+
+      if (img) imgElem.replaceWith(img.ConstructElement())
+    }
+
+    // Message
+    if (msgElem != undefined) {
+      let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
+      msgElem.replaceWith(msg.ConstructElement())
+    }
   })
 </script>
 
-{#if options?.url == undefined}
+<svelte:element
-  <span bind:this={element} class="{options.extraClasses}"/>
+  this={options?.url == undefined ? "span" : "a"}
-{:else}
+  class={options.extraClasses}
-  <a {href} class="no-underline" bind:this={element} target={options?.newTab ? "_blank" : ""} />
+  target={options?.newTab ? "_blank" : ""}
-{/if}
+  {href}
+>
+  <slot name="image">
+    <template bind:this={imgElem} />
+  </slot>
+  <slot name="message">
+    <template bind:this={msgElem} />
+  </slot>
+</svelte:element>
 
 <style lang="scss">
   span,
   a {
-    @apply flex p-3 my-2 rounded-lg hover:shadow-xl transition-colors transition-shadow;
+    @apply flex p-3 my-2 rounded-lg hover:shadow-xl transition-[color,background-color,box-shadow];
-    @apply items-center w-full;
+    @apply items-center w-full no-underline;
     @apply bg-subtle text-black hover:bg-unsubtle;
+
+    :global(img) {
+      @apply block justify-center flex-none mr-4 h-11 w-11;
+    }
   }
 </style>