Extract SLForm

src/global.css

@@ -27,7 +27,7 @@ body {
 }
 
 /** form */
-form.attention-error {
+form {
   & sl-input[data-user-invalid]::part(base),
   & sl-select[data-user-invalid]::part(combobox),
   & form.attention-error sl-checkbox[data-user-invalid]::part(control) {

src/pages/FormBasic.svelte

@@ -9,22 +9,11 @@
 
   import Layout from "$src/layout/Layout.svelte";
 
+  import { SLForm } from "$src/shoelace";
+
   let alert;
   let alertText = $state('');
 
-  let form;
-
-  $effect(() => {
-    // @see https://shoelace.style/getting-started/form-controls#required-fields
-    customElements.whenDefined("sl-input").then(() => {
-      form?.addEventListener("submit", onSubmit);
-    });
-
-    return () => {
-      form?.removeEventListener("submit", onSubmit);
-    }
-  });
-
   function onSubmit(evt) {
     evt.preventDefault();
 
@@ -43,7 +32,7 @@
 <Layout>
   <h1>Form - basic</h1>
 
-  <form class="attention-error" bind:this={form}>
+  <SLForm {onSubmit}>
     <sl-input
       name="name"
       type="text"
@@ -69,7 +58,7 @@
     </sl-checkbox>
     <br><br>
     <sl-button type="submit" variant="primary">Submit</sl-button>
-  </form>
+  </SLForm>
 
   <sl-alert type="success" duration=3000 closable bind:this={alert}>
     <sl-icon slot="icon" name="check2-circle"></sl-icon>

src/pages/FormReactive.svelte

@@ -1,28 +1,14 @@
 <script lang="ts">
   import "@shoelace-style/shoelace/dist/components/input/input";
-  import "@shoelace-style/shoelace/dist/components/select/select";
-  import "@shoelace-style/shoelace/dist/components/menu-item/menu-item";
-  import "@shoelace-style/shoelace/dist/components/checkbox/checkbox";
   import "@shoelace-style/shoelace/dist/components/button/button";
 
   import Layout from "$src/layout/Layout.svelte";
+  import { SLForm } from "$src/shoelace";
 
   let confirmation = $state('');
-  let form;
 
   let upper = $derived(confirmation.toUpperCase());
 
-  $effect(() => {
-    // @see https://shoelace.style/getting-started/form-controls#required-fields
-    customElements.whenDefined("sl-input").then(() => {
-      form?.addEventListener("submit", onSubmit);
-    });
-
-    return () => {
-      form?.removeEventListener("submit", onSubmit);
-    }
-  });
-
   function onSubmit(evt: SubmitEvent) {
     evt.preventDefault();
     alert('confirmed!');
@@ -33,7 +19,7 @@
 </svelte:head>
 <Layout>
   <h1>Form - reactive</h1>
-  <form class="attention-error" bind:this={form}>
+  <SLForm {onSubmit}>
     <sl-input
       name="Confirmation"
       type="text"
@@ -57,5 +43,5 @@
       type="submit"
       variant="primary"
     >Submit</sl-button>
-  </form>
+  </SLForm>
 </Layout>

src/shoelace.ts

@@ -2,3 +2,4 @@ export { default as SLApp } from "$src/shoelace/SLApp.svelte";
 export { default as SLButton } from "./shoelace/SLButton.svelte";
 export { default as SLIconButton } from "./shoelace/SLIconButton.svelte";
 export { default as SLDialog } from "./shoelace/SLDialog.svelte";
+export { default as SLForm } from "./shoelace/SLForm.svelte";

src/shoelace/SLDialog.svelte

@@ -25,7 +25,7 @@
     footer?: Snippet
   } & Props = $props();
 
-  let dialog;
+  let dialog: SlDialog;
 
   $effect(() => {
     const afterHide = () => {

src/shoelace/SLForm.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import "@shoelace-style/shoelace/dist/components/button/button";
+  import "@shoelace-style/shoelace/dist/components/checkbox/checkbox";
+  import "@shoelace-style/shoelace/dist/components/input/input";
+  import "@shoelace-style/shoelace/dist/components/option/option";
+  import "@shoelace-style/shoelace/dist/components/select/select";
+  import "@shoelace-style/shoelace/dist/components/textarea/textarea";
+
+  import type { Snippet } from "svelte";
+
+  let {
+    onSubmit,
+    children,
+  } : {
+    onSubmit: (evt: SubmitEvent) => any
+    children: Snippet
+  } = $props();
+
+  let form: HTMLFormElement | undefined;
+
+
+  $effect(() => {
+    // @see https://shoelace.style/getting-started/form-controls#required-fields
+    const elements = [
+      "sl-button",
+      "sl-checkbox",
+      "sl-input",
+      "sl-option",
+      "sl-select",
+      "sl-textarea",
+    ];
+
+    Promise.all(
+      elements.map(elm => customElements.whenDefined(elm))
+    ).then(() => {
+      form?.addEventListener("submit", onSubmit);
+    });
+
+    return () => {
+      form?.removeEventListener("submit", onSubmit);
+    }
+  });
+
+</script>
+<form bind:this={form}>
+  {@render children()}
+</form>