Add class property

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Next
+- Add `class` property
 - Fix escape shortcut handling
 - Fix Tailwind compatibility
 

README.md

@@ -45,13 +45,13 @@ This shows all available functionality
   form={() => submitMyForm()}
   noEscapeHandling
   noCloseIcon
-  let:focus
+  class="w-full"
 >
   <p>Content</p>
   <input />
 
   <!-- If you want to bring focus to a specific element -->
-  <input use:focus />
+  <input autofocus />
 
   <div slot="buttons">
     <button type="submit">Submit</button>

src/lib/Modal.svelte

@@ -14,6 +14,8 @@
 	$: tag = form === undefined ? 'div' : 'form'
 	export let noCloseIcon = false
 	export let title: string | null = null
+	export let classes = ''
+	export { classes as class }
 
 	let dialogEl: HTMLDialogElement
 	let backdrop = false
@@ -50,7 +52,7 @@
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
-	class="modal"
+	class="modal{classes ? ' ' + classes : ''}"
 	class:show-backdrop={backdrop}
 	bind:this={dialogEl}
 	on:mousedown|self={() => {

src/routes/+page.svelte

@@ -27,10 +27,10 @@
 			<span>noCloseIcon</span>
 			<input type="checkbox" bind:checked={noCloseIcon} />
 		</div>
-	</div>
-	<div class="row">
-		<span>disableEscapeHandling</span>
-		<input type="checkbox" bind:checked={noEscapeHandling} />
+		<div class="row">
+			<span>noEscapeHandling</span>
+			<input type="checkbox" bind:checked={noEscapeHandling} />
+		</div>
 	</div>
 </div>
 
@@ -75,8 +75,8 @@
     display: flex
     align-items: center
     height: 24px
-  span
-    margin-right: 12px
+    width: 100%
+    gap: 20px
   input
     margin-left: auto
   p