From fac83342ce12bdf9727238c2a2d1d7d9284e469e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 14 Feb 2026 19:43:53 +0000
Subject: [PATCH 1/2] fix: Ensuring modal close button renders independently of
 title

The close button was previously nested inside the `{#if title}` block,
so it only appeared when a title was provided. This refactors the header
so the close button always renders (controlled by a new `showClose` prop
that defaults to true), and the title `<h4>` is conditionally rendered
separately.

https://claude.ai/code/session_018sfc6wyLi8es84KFQ74rJW
---
 .../src/components/Modal.svelte               | 35 ++++++++++++++-----
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/Modal.svelte b/packages/sveltekit-helper/src/components/Modal.svelte
index 6862e3e3..e011cd34 100644
--- a/packages/sveltekit-helper/src/components/Modal.svelte
+++ b/packages/sveltekit-helper/src/components/Modal.svelte
@@ -6,6 +6,7 @@ export type TransitionFn = (node: Element, params: Record<string, unknown>) => T
 export type ModalProps = {
 	title?: string;
 	isOpen?: boolean;
+	showClose?: boolean;
 	children?: Snippet;
 	class?: string;
 	onClose?: () => void;
@@ -21,6 +22,7 @@ export type ModalProps = {
 	let {
 		title = '',
 		isOpen = $bindable(false),
+		showClose = true,
 		children,
 		class: className = '',
 		onClose,
@@ -112,6 +114,16 @@ export type ModalProps = {
 	- `--modal-content-padding`: Content padding (default: 1.5rem / 2rem on tablet)
 	- `--modal-header-border`: Header bottom border (default: 1px solid var(--token-border-grey))
 	- `--modal-close-colour`: Close icon colour (default: var(--token-icon-grey))
+
+	Props:
+	- `title` (optional): Modal heading text.
+	- `isOpen` (bindable): Controls modal visibility.
+	- `showClose` (default: true): Whether to render the close button.
+	- `children`: Slot content (Snippet).
+	- `class`: Custom CSS class.
+	- `onClose`: Callback when the modal should close.
+	- `transition`: Custom transition function (default: fade).
+	- `transitionParams`: Transition parameters.
 -->
 {#if isOpen}
 	<dialog
@@ -123,16 +135,20 @@ export type ModalProps = {
 		transition:transitionFn={transitionParams}
 	>
 		<div class="modal__content" bind:this={modalContent}>
-			{#if title}
+			{#if title || showClose}
 				<header class="modal__header">
-					<h4 class="modal__title">{title}</h4>
-					<button
-						class="modal__close"
-						onclick={() => onClose?.()}
-						aria-label={title ? `Close ${title}` : 'Close modal'}
-					>
-						<X color="var(--modal-close-colour, var(--token-icon-grey))" />
-					</button>
+					{#if title}
+						<h4 class="modal__title">{title}</h4>
+					{/if}
+					{#if showClose}
+						<button
+							class="modal__close"
+							onclick={() => onClose?.()}
+							aria-label={title ? `Close ${title}` : 'Close modal'}
+						>
+							<X color="var(--modal-close-colour, var(--token-icon-grey))" />
+						</button>
+					{/if}
 				</header>
 			{/if}
 			<div class="modal__body">
@@ -188,6 +204,7 @@ export type ModalProps = {
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			margin-left: auto;
 		}
 
 		&__content {

From d01692e0be7fd557333cd3a6b00635825bee3045 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 14 Feb 2026 19:49:54 +0000
Subject: [PATCH 2/2] chore: Adding changeset for modal close button fix

https://claude.ai/code/session_018sfc6wyLi8es84KFQ74rJW
---
 .changeset/fix-modal-close-button.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-modal-close-button.md

diff --git a/.changeset/fix-modal-close-button.md b/.changeset/fix-modal-close-button.md
new file mode 100644
index 00000000..71347bf5
--- /dev/null
+++ b/.changeset/fix-modal-close-button.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+Ensuring the modal close button always renders independently of the title prop, controlled by a new `showClose` prop (defaults to `true`).