From 70d3e5e033ffb062deea0d369d0b44b2f206e180 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Thu, 21 Sep 2023 21:13:26 +0200
Subject: [PATCH 01/13] init

---
 packages/skeleton/src/lib/utilities/Modal/Modal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index ecad9256b..386fe57a3 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -107,7 +107,7 @@
 	const cModalImage = 'w-full h-auto';
 
 	// Local
-	let promptValue: any;
+	let promptValue: string;
 	const buttonTextDefaults: Record<string, string> = {
 		buttonTextCancel,
 		buttonTextConfirm,

From 724a88135dc9167689f1bdf2f197d3049b974060 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Thu, 21 Sep 2023 22:58:53 +0200
Subject: [PATCH 02/13] fixed jsdoc typo, added backdrop role

---
 packages/skeleton/src/lib/utilities/Modal/Modal.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index 386fe57a3..dd2df609f 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
-	import { fly, fade } from 'svelte/transition';
-	import { type Transition, type TransitionParams, prefersReducedMotionStore } from '../../index.js';
+	import { fade, fly } from 'svelte/transition';
+	import { prefersReducedMotionStore, type Transition, type TransitionParams } from '../../index.js';
 	import { dynamicTransition } from '../../internal/transitions.js';
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -81,7 +81,7 @@
 	export let transitions = !$prefersReducedMotionStore;
 	/**
 	 * Provide the transition used on entry.
-	 * @type {ModalTransitionIn}
+	 * @type {TransitionIn}
 	 */
 	export let transitionIn: TransitionIn = fly as TransitionIn;
 	/**
@@ -218,11 +218,10 @@
 {#if $modalStore.length > 0}
 	{#key $modalStore}
 		<!-- Backdrop -->
-		<!-- FIXME: resolve a11y warnings -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="modal-backdrop {classesBackdrop}"
 			data-testid="modal-backdrop"
+			role="presentation"
 			on:mousedown={onBackdropInteractionBegin}
 			on:mouseup={onBackdropInteractionEnd}
 			on:touchstart|passive

From e3b27cd9ba33b36239095aee45ab2afb0dbb82ab Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 10:42:39 +0200
Subject: [PATCH 03/13] response value depends on the modal type

---
 .../src/lib/utilities/Modal/Modal.svelte      | 47 +++++++------
 .../skeleton/src/lib/utilities/Modal/types.ts | 68 ++++++++++---------
 .../(inner)/utilities/modals/+page.svelte     |  4 +-
 sites/skeleton.dev/src/routes/+layout.svelte  |  4 +-
 4 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index dd2df609f..beebd7064 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -117,12 +117,13 @@
 	let registeredInteractionWithBackdrop = false;
 
 	const modalStore = getModalStore();
+	$: currentModal = $modalStore[0];
 
 	// Modal Store Subscription
 	modalStore.subscribe((modals: ModalSettings[]) => {
 		if (!modals.length) return;
 		// Set Prompt input value and type
-		if (modals[0].type === 'prompt') promptValue = modals[0].value;
+		if (modals[0].type === 'prompt' && modals[0].value) promptValue = modals[0].value;
 		// Override button text per instance, if available
 		buttonTextCancel = modals[0].buttonTextCancel || buttonTextDefaults.buttonTextCancel;
 		buttonTextConfirm = modals[0].buttonTextConfirm || buttonTextDefaults.buttonTextConfirm;
@@ -144,7 +145,7 @@
 		const classList = event.target.classList;
 		if ((classList.contains('modal-backdrop') || classList.contains('modal-transition')) && registeredInteractionWithBackdrop) {
 			// We return `undefined` to differentiate from the cancel button
-			if ($modalStore[0].response) $modalStore[0].response(undefined);
+			if (currentModal.response) currentModal.response(undefined);
 			modalStore.close();
 			/** @event {{ event }} backdrop - Fires on backdrop interaction.  */
 			dispatch('backdrop', event);
@@ -153,18 +154,22 @@
 	}
 
 	function onClose(): void {
-		if ($modalStore[0].response) $modalStore[0].response(false);
+		if (currentModal.response) currentModal.response(false);
 		modalStore.close();
 	}
 
 	function onConfirm(): void {
-		if ($modalStore[0].response) $modalStore[0].response(true);
+		if (currentModal.type !== 'confirm') return;
+
+		if (currentModal.response) currentModal.response(true);
 		modalStore.close();
 	}
 
 	function onPromptSubmit(event: SvelteEvent<SubmitEvent, HTMLFormElement>): void {
+		if (currentModal.type !== 'prompt') return;
 		event.preventDefault();
-		if ($modalStore[0].response) $modalStore[0].response(promptValue);
+
+		if (currentModal.response) currentModal.response(promptValue);
 		modalStore.close();
 	}
 
@@ -176,12 +181,12 @@
 	}
 
 	// State
-	$: cPosition = $modalStore[0]?.position ?? position;
+	$: cPosition = currentModal?.position ?? position;
 	// Reactive
-	$: classesBackdrop = `${cBackdrop} ${regionBackdrop} ${zIndex} ${$$props.class ?? ''} ${$modalStore[0]?.backdropClasses ?? ''}`;
+	$: classesBackdrop = `${cBackdrop} ${regionBackdrop} ${zIndex} ${$$props.class ?? ''} ${currentModal?.backdropClasses ?? ''}`;
 	$: classesTransitionLayer = `${cTransitionLayer} ${cPosition ?? ''}`;
 	$: classesModal = `${cModal} ${background} ${width} ${height} ${padding} ${spacing} ${rounded} ${shadow} ${
-		$modalStore[0]?.modalClasses ?? ''
+		currentModal?.modalClasses ?? ''
 	}`;
 	// IMPORTANT: add values to pass to the children templates.
 	// There is a way to self-reference component values, but it involves svelte-internal and is not yet stable.
@@ -235,34 +240,34 @@
 				in:dynamicTransition|global={{ transition: transitionIn, params: transitionInParams, enabled: transitions }}
 				out:dynamicTransition|global={{ transition: transitionOut, params: transitionOutParams, enabled: transitions }}
 			>
-				{#if $modalStore[0].type !== 'component'}
+				{#if currentModal.type !== 'component'}
 					<!-- Modal: Presets -->
-					<div class="modal {classesModal}" data-testid="modal" role="dialog" aria-modal="true" aria-label={$modalStore[0].title ?? ''}>
+					<div class="modal {classesModal}" data-testid="modal" role="dialog" aria-modal="true" aria-label={currentModal.title ?? ''}>
 						<!-- Header -->
-						{#if $modalStore[0]?.title}
-							<header class="modal-header {regionHeader}">{@html $modalStore[0].title}</header>
+						{#if currentModal?.title}
+							<header class="modal-header {regionHeader}">{@html currentModal.title}</header>
 						{/if}
 						<!-- Body -->
-						{#if $modalStore[0]?.body}
-							<article class="modal-body {regionBody}">{@html $modalStore[0].body}</article>
+						{#if currentModal?.body}
+							<article class="modal-body {regionBody}">{@html currentModal.body}</article>
 						{/if}
 						<!-- Image -->
-						{#if $modalStore[0]?.image && typeof $modalStore[0]?.image === 'string'}
-							<img class="modal-image {cModalImage}" src={$modalStore[0]?.image} alt="Modal" />
+						{#if currentModal?.image && typeof currentModal?.image === 'string'}
+							<img class="modal-image {cModalImage}" src={currentModal?.image} alt="Modal" />
 						{/if}
 						<!-- Type -->
-						{#if $modalStore[0].type === 'alert'}
+						{#if currentModal.type === 'alert'}
 							<!-- Template: Alert -->
 							<footer class="modal-footer {regionFooter}">
 								<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
 							</footer>
-						{:else if $modalStore[0].type === 'confirm'}
+						{:else if currentModal.type === 'confirm'}
 							<!-- Template: Confirm -->
 							<footer class="modal-footer {regionFooter}">
 								<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
 								<button type="button" class="btn {buttonPositive}" on:click={onConfirm}>{buttonTextConfirm}</button>
 							</footer>
-						{:else if $modalStore[0].type === 'prompt'}
+						{:else if currentModal.type === 'prompt'}
 							<!-- Template: Prompt -->
 							<form class="space-y-4" on:submit={onPromptSubmit}>
 								<input class="modal-prompt-input input" name="prompt" type="text" bind:value={promptValue} {...$modalStore[0].valueAttr} />
@@ -277,11 +282,11 @@
 					<!-- Modal: Components -->
 					<!-- Note: keep `contents` class to allow widths from children -->
 					<div
-						class="modal contents {$modalStore[0]?.modalClasses ?? ''}"
+						class="modal contents {currentModal?.modalClasses ?? ''}"
 						data-testid="modal-component"
 						role="dialog"
 						aria-modal="true"
-						aria-label={$modalStore[0].title ?? ''}
+						aria-label={currentModal.title ?? ''}
 					>
 						{#if currentComponent?.slot}
 							<svelte:component this={currentComponent?.ref} {...currentComponent?.props} {parent}>
diff --git a/packages/skeleton/src/lib/utilities/Modal/types.ts b/packages/skeleton/src/lib/utilities/Modal/types.ts
index f3e46dd93..700991c1a 100644
--- a/packages/skeleton/src/lib/utilities/Modal/types.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/types.ts
@@ -11,35 +11,39 @@ export interface ModalComponent {
 	slot?: string;
 }
 
-export interface ModalSettings {
-	/** Designate what type of component will display. */
-	type: 'alert' | 'confirm' | 'prompt' | 'component';
-	/** Set the modal position within the backdrop container. */
-	position?: string;
-	/** Provide the modal header content. Accepts HTML. */
-	title?: string;
-	/** Provide the modal body content. Accepts HTML. */
-	body?: string;
-	/** Provide a URL to display an image within the modal. */
-	image?: string;
-	/** By default, used to provide a prompt value. */
-	value?: any;
-	/** Provide input attributes as key/value pairs. */
-	valueAttr?: object;
-	/** Provide your component reference key or object. */
-	component?: ModalComponent | string;
-	/** Provide a function. Returns the response value. */
-	response?: (r: any) => void;
-	/** Provide arbitrary classes to the backdrop. */
-	backdropClasses?: string;
-	/** Provide arbitrary classes to the modal window. */
-	modalClasses?: string;
-	/** Override the Cancel button label. */
-	buttonTextCancel?: string;
-	/** Override the Confirm button label. */
-	buttonTextConfirm?: string;
-	/** Override the Submit button label. */
-	buttonTextSubmit?: string;
-	/** Pass arbitrary data per modal instance. */
-	meta?: any;
-}
+export type ModalType = 'alert' | 'confirm' | 'prompt' | 'component';
+export type ModalValue<Type extends ModalType> = false | (Type extends 'prompt' ? string : Type extends 'confirm' ? boolean : never);
+export type ModalSettings<Type extends ModalType = ModalType> = Type extends Type
+	? {
+			/** Designate what type of component will display. */
+			type: Type;
+			/** Set the modal position within the backdrop container. */
+			position?: string;
+			/** Provide the modal header content. Accepts HTML. */
+			title?: string;
+			/** Provide the modal body content. Accepts HTML. */
+			body?: string;
+			/** Provide a URL to display an image within the modal. */
+			image?: string;
+			/** By default, used to provide a prompt value. */
+			value?: string;
+			/** Provide input attributes as key/value pairs. */
+			valueAttr?: object;
+			/** Provide your component reference key or object. */
+			component?: ModalComponent | string;
+			/** Provide a function. Returns the response value. */
+			response?: (r?: ModalValue<Type> & {}) => void; // "& {}"" forces TS to unwrap the type so consumers see actual union instead of an alias
+			/** Provide arbitrary classes to the backdrop. */
+			backdropClasses?: string;
+			/** Provide arbitrary classes to the modal window. */
+			modalClasses?: string;
+			/** Override the Cancel button label. */
+			buttonTextCancel?: string;
+			/** Override the Confirm button label. */
+			buttonTextConfirm?: string;
+			/** Override the Submit button label. */
+			buttonTextSubmit?: string;
+			/** Pass arbitrary data per modal instance. */
+			meta?: any;
+	  }
+	: never;
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
index e74737780..4e2638391 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -69,7 +69,7 @@
 			type: 'confirm',
 			title: 'Please Confirm',
 			body: 'Are you sure you wish to proceed?',
-			response: (r: boolean) => console.log('response:', r)
+			response: (r) => console.log('response:', r)
 		};
 		modalStore.trigger(modal);
 	}
@@ -81,7 +81,7 @@
 			body: 'Provide your first name in the field below.',
 			value: 'Skeleton',
 			valueAttr: { type: 'text', minlength: 3, maxlength: 10, required: true },
-			response: (r: string) => console.log('response:', r)
+			response: (r) => console.log('response:', r)
 		};
 		modalStore.trigger(modal);
 	}
diff --git a/sites/skeleton.dev/src/routes/+layout.svelte b/sites/skeleton.dev/src/routes/+layout.svelte
index 95eafd1fe..a77e8a7d8 100644
--- a/sites/skeleton.dev/src/routes/+layout.svelte
+++ b/sites/skeleton.dev/src/routes/+layout.svelte
@@ -106,9 +106,9 @@
 	}
 
 	// Lifecycle
-	afterNavigate((params: any) => {
+	afterNavigate((params) => {
 		// Scroll to top
-		const isNewPage: boolean = params.from && params.to && params.from.route.id !== params.to.route.id;
+		const isNewPage: boolean = !!params.from && !!params.to && params.from.route.id !== params.to.route.id;
 		const elemPage = document.querySelector('#page');
 		if (isNewPage && elemPage !== null) {
 			elemPage.scrollTop = 0;

From 880dd5190c031c4c9eeab3b2b9068b02d4e1e0d5 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 15:47:41 +0200
Subject: [PATCH 04/13] response type refactor

---
 .../skeleton/src/lib/utilities/Modal/Modal.test.ts    |  4 ++--
 packages/skeleton/src/lib/utilities/Modal/types.ts    | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.test.ts b/packages/skeleton/src/lib/utilities/Modal/Modal.test.ts
index 477102e0b..78ceeb6a4 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.test.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.test.ts
@@ -15,14 +15,14 @@ const modalConfirm: ModalSettings = {
 	type: 'confirm',
 	title: 'Please Confirm',
 	body: 'Are you sure you wish to proceed?',
-	response: (r: boolean) => console.log(r)
+	response: (r) => console.log(r)
 };
 const modalPrompt: ModalSettings = {
 	type: 'prompt',
 	title: 'Enter Name',
 	body: 'Provide your first name in the field below.',
 	value: 'foobar',
-	response: (r: string) => console.log(r)
+	response: (r) => console.log(r)
 };
 
 describe('Modal.svelte', () => {
diff --git a/packages/skeleton/src/lib/utilities/Modal/types.ts b/packages/skeleton/src/lib/utilities/Modal/types.ts
index 700991c1a..4448d8be8 100644
--- a/packages/skeleton/src/lib/utilities/Modal/types.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/types.ts
@@ -11,8 +11,13 @@ export interface ModalComponent {
 	slot?: string;
 }
 
-export type ModalType = 'alert' | 'confirm' | 'prompt' | 'component';
-export type ModalValue<Type extends ModalType> = false | (Type extends 'prompt' ? string : Type extends 'confirm' ? boolean : never);
+type ModalResponseRecord = {
+	alert: never;
+	confirm: boolean;
+	prompt: string;
+	component: any;
+};
+type ModalType = keyof ModalResponseRecord;
 export type ModalSettings<Type extends ModalType = ModalType> = Type extends Type
 	? {
 			/** Designate what type of component will display. */
@@ -32,7 +37,7 @@ export type ModalSettings<Type extends ModalType = ModalType> = Type extends Typ
 			/** Provide your component reference key or object. */
 			component?: ModalComponent | string;
 			/** Provide a function. Returns the response value. */
-			response?: (r?: ModalValue<Type> & {}) => void; // "& {}"" forces TS to unwrap the type so consumers see actual union instead of an alias
+			response?: (r?: ModalResponseRecord[Type] | false) => void;
 			/** Provide arbitrary classes to the backdrop. */
 			backdropClasses?: string;
 			/** Provide arbitrary classes to the modal window. */

From 40b211054967461e93264662e85e0ca82d74c8ff Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 16:00:48 +0200
Subject: [PATCH 05/13] typed component ref

---
 packages/skeleton/src/lib/utilities/Modal/types.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/types.ts b/packages/skeleton/src/lib/utilities/Modal/types.ts
index 4448d8be8..58fe8160f 100644
--- a/packages/skeleton/src/lib/utilities/Modal/types.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/types.ts
@@ -1,10 +1,12 @@
 // Modal Types
 
+import type { ComponentType, SvelteComponent } from 'svelte';
+
 export type { ModalStore } from './stores.js';
 
 export interface ModalComponent {
 	/** Import and provide your component reference. */
-	ref: any;
+	ref: ComponentType<SvelteComponent>;
 	/** Provide component props as key/value pairs. */
 	props?: Record<string, unknown>;
 	/** Provide an HTML template literal for the default slot. */

From d24fb27f6c5103ccfe03e5dc4792718e105de808 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 17:13:02 +0200
Subject: [PATCH 06/13] generics for modal store trigger, input attributes
 type,

---
 .../src/lib/utilities/Modal/stores.ts         |  6 +--
 .../skeleton/src/lib/utilities/Modal/types.ts | 19 +++----
 .../modals/examples/ModalExampleForm.svelte   |  2 +-
 .../modals/examples/ModalExampleList.svelte   |  2 +-
 .../(inner)/utilities/modals/+page.svelte     | 50 ++++++++-----------
 5 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/stores.ts b/packages/skeleton/src/lib/utilities/Modal/stores.ts
index d1bb67bf2..128475027 100644
--- a/packages/skeleton/src/lib/utilities/Modal/stores.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/stores.ts
@@ -1,8 +1,8 @@
 // Modal Store Queue
 
 import { writable } from 'svelte/store';
-import { getContext, setContext } from 'svelte';
-import type { ModalSettings } from './types.js';
+import { SvelteComponent, getContext, setContext } from 'svelte';
+import type { ModalSettings, ModalType } from './types.js';
 
 const MODAL_STORE_KEY = 'modalStore';
 
@@ -50,7 +50,7 @@ function modalService() {
 		set,
 		update,
 		/** Append to end of queue. */
-		trigger: (modal: ModalSettings) =>
+		trigger: <T extends ModalType, C extends SvelteComponent>(modal: ModalSettings<T, C>) =>
 			update((mStore) => {
 				mStore.push(modal);
 				return mStore;
diff --git a/packages/skeleton/src/lib/utilities/Modal/types.ts b/packages/skeleton/src/lib/utilities/Modal/types.ts
index 58fe8160f..2b812f6d5 100644
--- a/packages/skeleton/src/lib/utilities/Modal/types.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/types.ts
@@ -1,14 +1,15 @@
 // Modal Types
 
-import type { ComponentType, SvelteComponent } from 'svelte';
+import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
 
 export type { ModalStore } from './stores.js';
 
-export interface ModalComponent {
+export interface ModalComponent<Component extends SvelteComponent = SvelteComponent> {
 	/** Import and provide your component reference. */
-	ref: ComponentType<SvelteComponent>;
+	ref: ComponentType<Component>;
 	/** Provide component props as key/value pairs. */
-	props?: Record<string, unknown>;
+	props?: ComponentProps<Component>;
 	/** Provide an HTML template literal for the default slot. */
 	slot?: string;
 }
@@ -19,8 +20,8 @@ type ModalResponseRecord = {
 	prompt: string;
 	component: any;
 };
-type ModalType = keyof ModalResponseRecord;
-export type ModalSettings<Type extends ModalType = ModalType> = Type extends Type
+export type ModalType = keyof ModalResponseRecord;
+export type ModalSettings<Type extends ModalType = ModalType, Component extends SvelteComponent = SvelteComponent> = Type extends Type
 	? {
 			/** Designate what type of component will display. */
 			type: Type;
@@ -35,9 +36,9 @@ export type ModalSettings<Type extends ModalType = ModalType> = Type extends Typ
 			/** By default, used to provide a prompt value. */
 			value?: string;
 			/** Provide input attributes as key/value pairs. */
-			valueAttr?: object;
-			/** Provide your component reference key or object. */
-			component?: ModalComponent | string;
+			valueAttr?: HTMLInputAttributes;
+			/** Provide your component reference key or object. Type has to be `component` to take effect */
+			component?: Type extends 'component' ? ModalComponent<Component> | string : never;
 			/** Provide a function. Returns the response value. */
 			response?: (r?: ModalResponseRecord[Type] | false) => void;
 			/** Provide arbitrary classes to the backdrop. */
diff --git a/sites/skeleton.dev/src/lib/modals/examples/ModalExampleForm.svelte b/sites/skeleton.dev/src/lib/modals/examples/ModalExampleForm.svelte
index b77a18db1..d60106044 100644
--- a/sites/skeleton.dev/src/lib/modals/examples/ModalExampleForm.svelte
+++ b/sites/skeleton.dev/src/lib/modals/examples/ModalExampleForm.svelte
@@ -16,7 +16,7 @@
 
 	// We've created a custom submit function to pass the response and close the modal.
 	function onFormSubmit(): void {
-		if ($modalStore[0].response) $modalStore[0].response(formData);
+		if ($modalStore[0].response && $modalStore[0].type === 'component') $modalStore[0].response(formData);
 		modalStore.close();
 	}
 
diff --git a/sites/skeleton.dev/src/lib/modals/examples/ModalExampleList.svelte b/sites/skeleton.dev/src/lib/modals/examples/ModalExampleList.svelte
index 65d4f75e6..d1d650a35 100644
--- a/sites/skeleton.dev/src/lib/modals/examples/ModalExampleList.svelte
+++ b/sites/skeleton.dev/src/lib/modals/examples/ModalExampleList.svelte
@@ -11,7 +11,7 @@
 
 	// Handle Form Submission
 	function onFormSubmit(): void {
-		if ($modalStore[0].response) $modalStore[0].response(flavor);
+		if ($modalStore[0].response && $modalStore[0].type === 'component') $modalStore[0].response(flavor);
 		modalStore.close();
 	}
 
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
index 4e2638391..f751e3ef3 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -43,101 +43,91 @@
 	// Demo ---
 
 	function modalDemo(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'alert',
 			title: 'Hello Skeleton',
 			body: 'This modal example includes a title, body, and image.',
 			image: 'https://i.imgur.com/TykCy5e.gif'
 			// image: 'https://i.imgur.com/WOgTG96.gif'
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	// Variants ---
 
 	function modalAlert(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'alert',
 			title: 'Hello World!',
 			body: 'This simple alert modal uses <code class="code">type: alert</code>.'
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	function modalConfirm(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'confirm',
 			title: 'Please Confirm',
 			body: 'Are you sure you wish to proceed?',
 			response: (r) => console.log('response:', r)
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	function modalPrompt(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'prompt',
 			title: 'Enter Name',
 			body: 'Provide your first name in the field below.',
 			value: 'Skeleton',
 			valueAttr: { type: 'text', minlength: 3, maxlength: 10, required: true },
-			response: (r) => console.log('response:', r)
-		};
-		modalStore.trigger(modal);
+			response: (r) => console.log('response:', r, typeof r)
+		});
 	}
 
 	function modalMultiple(): void {
 		[1, 2, 3].forEach((dNum: number) => {
-			const modal: ModalSettings = {
+			modalStore.trigger({
 				type: 'alert',
 				title: `Modal ${dNum}`,
 				body: `The modal body of ${dNum}.`
-			};
-			modalStore.trigger(modal);
+			});
 		});
 	}
 
 	// Custom ---
 
 	function modalComponentForm(): void {
-		const c: ModalComponent = { ref: ModalExampleForm };
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'component',
-			component: c,
+			component: { ref: ModalExampleForm },
 			title: 'Custom Form Component',
 			body: 'Complete the form below and then press submit.',
 			response: (r) => console.log('response:', r)
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	function modalComponentList(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'component',
 			component: 'exampleList',
 			title: 'Custom List Component',
 			body: 'Make your selection then press submit.',
 			response: (r) => console.log('response:', r)
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	function modalComponentEmbed(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'component',
 			component: 'exampleEmbed'
-		};
-		modalStore.trigger(modal);
+		});
 	}
 
 	function modalComponentImage(): void {
-		const modal: ModalSettings = {
+		modalStore.trigger({
 			type: 'component',
 			component: 'exampleImage',
 			image: 'https://i.imgur.com/WOgTG96.gif',
 			meta: { source: 'Silly Symphonies - The Skeleton Dance' }
-		};
-		modalStore.trigger(modal);
+		});
 	}
 </script>
 

From 7beb8c1fb01abd0f34efb4f76b31b8ad38c7cdb6 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 18:09:47 +0200
Subject: [PATCH 07/13] revert a11y changes

---
 packages/skeleton/src/lib/utilities/Modal/Modal.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index beebd7064..887423f3f 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -223,10 +223,11 @@
 {#if $modalStore.length > 0}
 	{#key $modalStore}
 		<!-- Backdrop -->
+		<!-- FIXME: resolve a11y warnings -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="modal-backdrop {classesBackdrop}"
 			data-testid="modal-backdrop"
-			role="presentation"
 			on:mousedown={onBackdropInteractionBegin}
 			on:mouseup={onBackdropInteractionEnd}
 			on:touchstart|passive

From 3c4331d5fa7f733418e1b8af7aefc136f111b6ad Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 19:34:36 +0200
Subject: [PATCH 08/13] my LSP is dying

---
 .../src/lib/utilities/Modal/Modal.svelte        | 12 +++++++++---
 .../(inner)/utilities/modals/+page.svelte       |  1 -
 sites/skeleton.dev/src/routes/+layout.svelte    | 17 ++++++++---------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index 887423f3f..8305a4eba 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -7,10 +7,17 @@
 	type FlyTransition = typeof fly;
 	type TransitionIn = Transition;
 	type TransitionOut = Transition;
+	type DefaultComponentRecord = Record<string, SvelteComponent>;
+	type ComponentRecord = DefaultComponentRecord;
 </script>
 
-<script lang="ts" generics="TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition">
+<script
+	lang="ts"
+	generics="TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition, 
+	ComponentRecord extends DefaultComponentRecord = DefaultComponentRecord"
+>
 	import { createEventDispatcher } from 'svelte';
+	import type { SvelteComponent } from 'svelte';
 
 	// Event Dispatcher
 	type ModalEvent = {
@@ -31,8 +38,7 @@
 
 	// Props (components)
 	/** Register a list of reusable component modals. */
-	export let components: Record<string, ModalComponent> = {};
-
+	export let components: { [K in keyof ComponentRecord]: ModalComponent<ComponentRecord[K]> } = {} as any;
 	// Props (modal)
 	/** Provide classes to style the modal background. */
 	export let background: CssClasses = 'bg-surface-100-800-token';
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
index f751e3ef3..58c01ca7b 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -12,7 +12,6 @@
 	import sveldModal from '@skeletonlabs/skeleton/utilities/Modal/Modal.svelte?raw&sveld';
 
 	// Modals Utils
-	import type { ModalSettings, ModalComponent } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 
 	const modalStore = getModalStore();
diff --git a/sites/skeleton.dev/src/routes/+layout.svelte b/sites/skeleton.dev/src/routes/+layout.svelte
index a77e8a7d8..4a19b81ff 100644
--- a/sites/skeleton.dev/src/routes/+layout.svelte
+++ b/sites/skeleton.dev/src/routes/+layout.svelte
@@ -74,14 +74,6 @@
 	};
 	let isBlogArticle = false;
 
-	// Registered list of Components for Modals
-	const modalComponentRegistry: Record<string, ModalComponent> = {
-		modalSearch: { ref: DocsSearch },
-		exampleList: { ref: ModalExampleList },
-		exampleEmbed: { ref: ModalExampleEmbed },
-		exampleImage: { ref: ModalExampleImage }
-	};
-
 	function matchPathWhitelist(pageUrlPath: string): boolean {
 		// If homepage route
 		if (pageUrlPath === '/') return true;
@@ -187,7 +179,14 @@
 </svelte:head>
 
 <!-- Overlays -->
-<Modal components={modalComponentRegistry} />
+<Modal
+	components={{
+		modalSearch: { ref: DocsSearch },
+		exampleList: { ref: ModalExampleList },
+		exampleEmbed: { ref: ModalExampleEmbed },
+		exampleImage: { ref: ModalExampleImage }
+	}}
+/>
 <Toast />
 <DocsDrawer />
 

From 98c82cdf7d742127487da4173f3ee78f7d561df6 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 19:36:27 +0200
Subject: [PATCH 09/13] unused import

---
 sites/skeleton.dev/src/routes/+layout.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/sites/skeleton.dev/src/routes/+layout.svelte b/sites/skeleton.dev/src/routes/+layout.svelte
index 4a19b81ff..628317132 100644
--- a/sites/skeleton.dev/src/routes/+layout.svelte
+++ b/sites/skeleton.dev/src/routes/+layout.svelte
@@ -16,9 +16,6 @@
 	import { page } from '$app/stores';
 	import { afterNavigate } from '$app/navigation';
 
-	// Types
-	import type { ModalComponent } from '@skeletonlabs/skeleton';
-
 	// Stores
 	import { storePreview } from '$lib/layouts/DocsThemer/stores';
 

From b2b43f7bd05e84e1c11fba7b32b6c618af4032d3 Mon Sep 17 00:00:00 2001
From: hugeletters <ckuka71@gmail.com>
Date: Fri, 22 Sep 2023 19:39:51 +0200
Subject: [PATCH 10/13] cleanup

---
 packages/skeleton/src/lib/utilities/Modal/Modal.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index 8305a4eba..18386e55a 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -31,6 +31,7 @@
 	import { focusTrap } from '../../actions/FocusTrap/focusTrap.js';
 	import { getModalStore } from './stores.js';
 	import type { ModalComponent, ModalSettings } from './types.js';
+	type ComponentRegistry = { [K in keyof ComponentRecord]: ModalComponent<ComponentRecord[K]> };
 
 	// Props
 	/** Set the modal position within the backdrop container */
@@ -38,7 +39,7 @@
 
 	// Props (components)
 	/** Register a list of reusable component modals. */
-	export let components: { [K in keyof ComponentRecord]: ModalComponent<ComponentRecord[K]> } = {} as any;
+	export let components: ComponentRegistry = {} as ComponentRegistry;
 	// Props (modal)
 	/** Provide classes to style the modal background. */
 	export let background: CssClasses = 'bg-surface-100-800-token';

From f178dd3ec36e66873f749783cd45c8367a2d8356 Mon Sep 17 00:00:00 2001
From: Evgenii Perminov <119697239+HugeLetters@users.noreply.github.com>
Date: Fri, 6 Oct 2023 17:58:36 +0200
Subject: [PATCH 11/13] forgot to remove this

---
 .../src/routes/(inner)/utilities/modals/+page.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
index 58c01ca7b..046c1e85b 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte
@@ -77,7 +77,7 @@
 			body: 'Provide your first name in the field below.',
 			value: 'Skeleton',
 			valueAttr: { type: 'text', minlength: 3, maxlength: 10, required: true },
-			response: (r) => console.log('response:', r, typeof r)
+			response: (r) => console.log('response:', r)
 		});
 	}
 

From d50b828c7d87925aa4fbaf492a11b4da97258f46 Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 18 Dec 2023 16:57:44 -0500
Subject: [PATCH 12/13] getting rid of a couple of brackets

---
 .../skeleton/src/lib/utilities/Modal/Modal.svelte   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
index 18386e55a..ff67c456c 100644
--- a/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
+++ b/packages/skeleton/src/lib/utilities/Modal/Modal.svelte
@@ -129,14 +129,15 @@
 	// Modal Store Subscription
 	modalStore.subscribe((modals: ModalSettings[]) => {
 		if (!modals.length) return;
+		const modal = modals[0];
 		// Set Prompt input value and type
-		if (modals[0].type === 'prompt' && modals[0].value) promptValue = modals[0].value;
+		if (modal.type === 'prompt' && modal.value) promptValue = modal.value;
 		// Override button text per instance, if available
-		buttonTextCancel = modals[0].buttonTextCancel || buttonTextDefaults.buttonTextCancel;
-		buttonTextConfirm = modals[0].buttonTextConfirm || buttonTextDefaults.buttonTextConfirm;
-		buttonTextSubmit = modals[0].buttonTextSubmit || buttonTextDefaults.buttonTextSubmit;
+		buttonTextCancel = modal.buttonTextCancel || buttonTextDefaults.buttonTextCancel;
+		buttonTextConfirm = modal.buttonTextConfirm || buttonTextDefaults.buttonTextConfirm;
+		buttonTextSubmit = modal.buttonTextSubmit || buttonTextDefaults.buttonTextSubmit;
 		// Set Active Component
-		currentComponent = typeof modals[0].component === 'string' ? components[modals[0].component] : modals[0].component;
+		currentComponent = typeof modal.component === 'string' ? components[modal.component] : modal.component;
 	});
 
 	// Event Handlers ---
@@ -278,7 +279,7 @@
 						{:else if currentModal.type === 'prompt'}
 							<!-- Template: Prompt -->
 							<form class="space-y-4" on:submit={onPromptSubmit}>
-								<input class="modal-prompt-input input" name="prompt" type="text" bind:value={promptValue} {...$modalStore[0].valueAttr} />
+								<input class="modal-prompt-input input" name="prompt" type="text" bind:value={promptValue} {...currentModal.valueAttr} />
 								<footer class="modal-footer {regionFooter}">
 									<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
 									<button type="submit" class="btn {buttonPositive}">{buttonTextSubmit}</button>

From 73b6c86a1e3debe86f723bcb06526c94a38fe718 Mon Sep 17 00:00:00 2001
From: AdrianGonz97 <31664583+AdrianGonz97@users.noreply.github.com>
Date: Mon, 18 Dec 2023 17:06:19 -0500
Subject: [PATCH 13/13] import as a type

---
 packages/skeleton/src/lib/utilities/Modal/stores.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/skeleton/src/lib/utilities/Modal/stores.ts b/packages/skeleton/src/lib/utilities/Modal/stores.ts
index 303c286b5..fc4666f18 100644
--- a/packages/skeleton/src/lib/utilities/Modal/stores.ts
+++ b/packages/skeleton/src/lib/utilities/Modal/stores.ts
@@ -1,7 +1,7 @@
 // Modal Store Queue
 
 import { writable } from 'svelte/store';
-import { SvelteComponent, getContext, setContext } from 'svelte';
+import { type SvelteComponent, getContext, setContext } from 'svelte';
 import type { ModalSettings, ModalType } from './types.js';
 
 const MODAL_STORE_KEY = 'modalStore';