From f43bf7c4ee6abf931dd015261d0d51111a4aa222 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:01:25 +0000
Subject: [PATCH 1/9] feat: Add Alert and Notice components with Lucide icon
 support

- Created alerts/ folder containing Alert and Notice components
- Added shared alertIcons helper and alert.types definitions
- Both components support info, warning, success, and error types
- Fully customizable via CSS variables and props
- Added @lucide/svelte as peer dependency
- Updated package.json exports for @ainsleydev/sveltekit-helper/components/alerts
- Exported components from main components/index.ts

Usage:
import { Alert, Notice } from '@ainsleydev/sveltekit-helper/components/alerts'
---
 packages/sveltekit-helper/package.json        |   6 +
 .../src/components/alerts/Alert.svelte        | 133 ++++++++++++++++++
 .../src/components/alerts/Notice.svelte       | 108 ++++++++++++++
 .../src/components/alerts/alert.types.ts      |   8 ++
 .../src/components/alerts/alertIcons.ts       |  10 ++
 .../src/components/alerts/index.ts            |   6 +
 .../sveltekit-helper/src/components/index.ts  |   6 +-
 7 files changed, 275 insertions(+), 2 deletions(-)
 create mode 100644 packages/sveltekit-helper/src/components/alerts/Alert.svelte
 create mode 100644 packages/sveltekit-helper/src/components/alerts/Notice.svelte
 create mode 100644 packages/sveltekit-helper/src/components/alerts/alert.types.ts
 create mode 100644 packages/sveltekit-helper/src/components/alerts/alertIcons.ts
 create mode 100644 packages/sveltekit-helper/src/components/alerts/index.ts

diff --git a/packages/sveltekit-helper/package.json b/packages/sveltekit-helper/package.json
index 2e805652..fa308bae 100644
--- a/packages/sveltekit-helper/package.json
+++ b/packages/sveltekit-helper/package.json
@@ -38,6 +38,11 @@
 			"svelte": "./dist/components/payload/index.js",
 			"default": "./dist/components/payload/index.js"
 		},
+		"./components/alerts": {
+			"types": "./dist/components/alerts/index.d.ts",
+			"svelte": "./dist/components/alerts/index.js",
+			"default": "./dist/components/alerts/index.js"
+		},
 		"./utils/forms": {
 			"types": "./dist/utils/forms/index.d.ts",
 			"import": "./dist/utils/forms/index.js"
@@ -60,6 +65,7 @@
 		"access": "public"
 	},
 	"peerDependencies": {
+		"@lucide/svelte": "^0.468.0",
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
diff --git a/packages/sveltekit-helper/src/components/alerts/Alert.svelte b/packages/sveltekit-helper/src/components/alerts/Alert.svelte
new file mode 100644
index 00000000..8d6b522a
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/alerts/Alert.svelte
@@ -0,0 +1,133 @@
+<script lang="ts" module>
+	import { type Icon as IconType } from '@lucide/svelte'
+
+	import type { AlertType } from './alert.types'
+	import type { Snippet } from 'svelte'
+
+	export type AlertProps = {
+		type?: AlertType
+		title?: string
+		children?: Snippet
+		visible?: boolean
+		dismiss?: boolean
+		icon?: typeof IconType
+	}
+</script>
+
+<script lang="ts">
+	import { X } from '@lucide/svelte'
+	import { fade } from 'svelte/transition'
+
+	import { alertIcons } from './alertIcons'
+
+	let {
+		type = 'info',
+		title = '',
+		children,
+		visible = true,
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: AlertProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+</script>
+
+{#if visible}
+	<div
+		class="alert alert--{type}"
+		role="alert"
+		style="--_alert-icon-colour: {iconDetail.colour}"
+		transition:fade={{ duration: 300 }}
+		{...restProps}
+	>
+		<!-- Icon -->
+		<figure class="alert__icon">
+			<Icon size={24} color={iconDetail.colour} strokeWidth={1.2}></Icon>
+		</figure>
+		<!-- Content -->
+		<div class="alert__content">
+			{#if title}
+				<p class="alert__title">
+					{title}
+				</p>
+			{/if}
+			{#if children}
+				<p class="alert__text">
+					{@render children()}
+				</p>
+			{/if}
+		</div>
+		<!-- Dismiss -->
+		{#if dismiss}
+			<button class="alert__dismiss" onclick={hide} aria-label="Close">
+				<X size={24} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '$lib/scss/abstracts' as a;
+
+	.alert {
+		$self: &;
+
+		position: relative;
+		display: flex;
+		gap: var(--_alert-gap, a.$size-12);
+		width: 100%;
+		border-radius: var(--_alert-border-radius, a.$border-radius-6);
+		padding: var(--_alert-padding, a.$size-24);
+		background-color: var(--_alert-bg, rgba(255, 255, 255, 0.02));
+
+		&__icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			flex-shrink: 0;
+		}
+
+		&__content {
+			display: grid;
+			gap: var(--_alert-content-gap, a.$size-8);
+		}
+
+		&__title {
+			font-weight: var(--_alert-title-font-weight, var(--font-weight-semibold));
+			margin: 0;
+			line-height: 1;
+			color: var(--_alert-title-colour, rgba(255, 255, 255, 1));
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		&__text {
+			margin: 0;
+			line-height: var(--_alert-text-line-height, 1.4);
+			color: var(--_alert-text-colour, rgba(255, 255, 255, 50%));
+		}
+
+		&__dismiss {
+			cursor: pointer;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: none;
+			border: none;
+			padding: 0;
+			color: var(--_alert-icon-colour);
+		}
+
+		:global(svg) {
+			min-width: 1.4rem;
+			min-height: 1.4rem;
+		}
+	}
+</style>
diff --git a/packages/sveltekit-helper/src/components/alerts/Notice.svelte b/packages/sveltekit-helper/src/components/alerts/Notice.svelte
new file mode 100644
index 00000000..4662f4f4
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/alerts/Notice.svelte
@@ -0,0 +1,108 @@
+<script lang="ts" module>
+	import { type Icon as IconType } from '@lucide/svelte'
+
+	import type { AlertType } from './alert.types'
+
+	export type NoticeProps = {
+		type?: AlertType
+		title: string
+		visible?: boolean
+		dismiss?: boolean
+		icon?: typeof IconType
+	}
+</script>
+
+<script lang="ts">
+	import { X } from '@lucide/svelte'
+	import { fade } from 'svelte/transition'
+
+	import { alertIcons } from './alertIcons'
+
+	let {
+		type = 'info',
+		title = '',
+		visible = true,
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: NoticeProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+</script>
+
+{#if visible}
+	<div
+		class="notice notice--{type}"
+		role="alert"
+		style="--_notice-icon-colour: {iconDetail.colour}"
+		transition:fade={{ duration: 300 }}
+		{...restProps}
+	>
+		<!-- Icon -->
+		<figure class="notice__icon">
+			<Icon size={20} color={iconDetail.colour} strokeWidth={1.2}></Icon>
+		</figure>
+		<!-- Title -->
+		<p class="notice__title">
+			{title}
+		</p>
+		<!-- Dismiss -->
+		{#if dismiss}
+			<button class="notice__dismiss" onclick={hide} aria-label="Close">
+				<X size={20} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '$lib/scss/abstracts' as a;
+
+	.notice {
+		$self: &;
+
+		position: relative;
+		display: inline-flex;
+		width: auto;
+		gap: var(--_notice-gap, a.$size-12);
+		padding: var(--_notice-padding, 0.8rem a.$size-12);
+		border-radius: var(--_notice-border-radius, a.$border-radius-6);
+		background-color: var(--_notice-bg, rgba(255, 255, 255, 0.025));
+		align-items: center;
+
+		&__icon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin: 0;
+			flex-shrink: 0;
+		}
+
+		&__title {
+			margin: 0;
+			font-size: var(--_notice-font-size, 1rem);
+			font-weight: var(--font-weight-medium);
+			color: var(--_notice-title-colour, rgba(255, 255, 255, 1));
+			line-height: 1;
+		}
+
+		&__dismiss {
+			cursor: pointer;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: none;
+			border: none;
+			padding: 0;
+			color: var(--_notice-icon-colour);
+		}
+
+		:global(svg) {
+			min-width: 1.4rem;
+			min-height: 1.4rem;
+		}
+	}
+</style>
diff --git a/packages/sveltekit-helper/src/components/alerts/alert.types.ts b/packages/sveltekit-helper/src/components/alerts/alert.types.ts
new file mode 100644
index 00000000..994f29cc
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/alerts/alert.types.ts
@@ -0,0 +1,8 @@
+import { type Icon as IconType } from '@lucide/svelte'
+
+export type AlertType = 'info' | 'warning' | 'success' | 'error'
+
+export type IconDetail = {
+	icon: typeof IconType
+	colour: string
+}
diff --git a/packages/sveltekit-helper/src/components/alerts/alertIcons.ts b/packages/sveltekit-helper/src/components/alerts/alertIcons.ts
new file mode 100644
index 00000000..60485f9b
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/alerts/alertIcons.ts
@@ -0,0 +1,10 @@
+import { CircleX, Info, CircleCheck, TriangleAlert } from '@lucide/svelte'
+
+import type { AlertType, IconDetail } from './alert.types'
+
+export const alertIcons: Record<AlertType, IconDetail> = {
+	info: { icon: Info, colour: 'var(--colour-semantic-info)' },
+	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },
+	warning: { icon: TriangleAlert, colour: 'var(--colour-semantic-warning)' },
+	error: { icon: CircleX, colour: 'var(--colour-semantic-error)' },
+}
diff --git a/packages/sveltekit-helper/src/components/alerts/index.ts b/packages/sveltekit-helper/src/components/alerts/index.ts
new file mode 100644
index 00000000..4741e3be
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/alerts/index.ts
@@ -0,0 +1,6 @@
+export { default as Alert } from './Alert.svelte'
+export { default as Notice } from './Notice.svelte'
+export type { AlertProps } from './Alert.svelte'
+export type { NoticeProps } from './Notice.svelte'
+export type { AlertType, IconDetail } from './alert.types'
+export { alertIcons } from './alertIcons'
diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index e9ec2b0b..14023dbb 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,2 +1,4 @@
-export { default as Sidebar } from './Sidebar.svelte';
-export { default as Hamburger } from './Hamburger.svelte';
+export { default as Sidebar } from './Sidebar.svelte'
+export { default as Hamburger } from './Hamburger.svelte'
+export { Alert, Notice } from './alerts'
+export type { AlertProps, NoticeProps, AlertType } from './alerts'

From 79bf43664b74bbffc85bf447b2d18c6282ca88a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:11:21 +0000
Subject: [PATCH 2/9] chore: Improve alerts package configuration and
 documentation

- Move @lucide/svelte from peerDependencies to dependencies
- Upgrade @lucide/svelte to latest version (^0.562.0)
- Add comprehensive JSDoc comments to AlertType and IconDetail types
- Document each alert variant (info, warning, success, error)
---
 packages/sveltekit-helper/package.json              |  2 +-
 .../src/components/alerts/alert.types.ts            | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/sveltekit-helper/package.json b/packages/sveltekit-helper/package.json
index fa308bae..0b74b19a 100644
--- a/packages/sveltekit-helper/package.json
+++ b/packages/sveltekit-helper/package.json
@@ -65,7 +65,6 @@
 		"access": "public"
 	},
 	"peerDependencies": {
-		"@lucide/svelte": "^0.468.0",
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
@@ -78,6 +77,7 @@
 		}
 	},
 	"dependencies": {
+		"@lucide/svelte": "^0.562.0",
 		"svelte-hamburgers": "^5.0.0"
 	},
 	"devDependencies": {
diff --git a/packages/sveltekit-helper/src/components/alerts/alert.types.ts b/packages/sveltekit-helper/src/components/alerts/alert.types.ts
index 994f29cc..a0f51c4e 100644
--- a/packages/sveltekit-helper/src/components/alerts/alert.types.ts
+++ b/packages/sveltekit-helper/src/components/alerts/alert.types.ts
@@ -1,8 +1,21 @@
 import { type Icon as IconType } from '@lucide/svelte'
 
+/**
+ * Available alert type variants
+ * - info: Informational message
+ * - warning: Warning or cautionary message
+ * - success: Success confirmation message
+ * - error: Error or critical message
+ */
 export type AlertType = 'info' | 'warning' | 'success' | 'error'
 
+/**
+ * Icon configuration for alert types
+ * Contains the Lucide icon component and corresponding colour
+ */
 export type IconDetail = {
+	/** Lucide icon component to display */
 	icon: typeof IconType
+	/** CSS colour value for the icon (usually a semantic colour variable) */
 	colour: string
 }

From 9f80b5938edbf5305deab2d1d47fdc04f26c1b92 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:17:28 +0000
Subject: [PATCH 3/9] refactor: Rename alerts to notifications and update
 dependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename alerts/ folder to notifications/ for better semantic clarity
- Move @lucide/svelte from dependencies to peerDependencies (v0.562.0)
- Simplify type documentation in alert.types.ts
- Update package.json exports: ./components/alerts → ./components/notifications
- Update components/index.ts imports to reference ./notifications

BREAKING CHANGE: Import path changed from '@ainsleydev/sveltekit-helper/components/alerts' to '@ainsleydev/sveltekit-helper/components/notifications'
---
 packages/sveltekit-helper/package.json        | 10 ++++-----
 .../src/components/alerts/alert.types.ts      | 21 -------------------
 .../sveltekit-helper/src/components/index.ts  |  4 ++--
 .../{alerts => notifications}/Alert.svelte    |  0
 .../{alerts => notifications}/Notice.svelte   |  0
 .../components/notifications/alert.types.ts   | 10 +++++++++
 .../{alerts => notifications}/alertIcons.ts   |  0
 .../{alerts => notifications}/index.ts        |  0
 8 files changed, 17 insertions(+), 28 deletions(-)
 delete mode 100644 packages/sveltekit-helper/src/components/alerts/alert.types.ts
 rename packages/sveltekit-helper/src/components/{alerts => notifications}/Alert.svelte (100%)
 rename packages/sveltekit-helper/src/components/{alerts => notifications}/Notice.svelte (100%)
 create mode 100644 packages/sveltekit-helper/src/components/notifications/alert.types.ts
 rename packages/sveltekit-helper/src/components/{alerts => notifications}/alertIcons.ts (100%)
 rename packages/sveltekit-helper/src/components/{alerts => notifications}/index.ts (100%)

diff --git a/packages/sveltekit-helper/package.json b/packages/sveltekit-helper/package.json
index 0b74b19a..91b26741 100644
--- a/packages/sveltekit-helper/package.json
+++ b/packages/sveltekit-helper/package.json
@@ -38,10 +38,10 @@
 			"svelte": "./dist/components/payload/index.js",
 			"default": "./dist/components/payload/index.js"
 		},
-		"./components/alerts": {
-			"types": "./dist/components/alerts/index.d.ts",
-			"svelte": "./dist/components/alerts/index.js",
-			"default": "./dist/components/alerts/index.js"
+		"./components/notifications": {
+			"types": "./dist/components/notifications/index.d.ts",
+			"svelte": "./dist/components/notifications/index.js",
+			"default": "./dist/components/notifications/index.js"
 		},
 		"./utils/forms": {
 			"types": "./dist/utils/forms/index.d.ts",
@@ -65,6 +65,7 @@
 		"access": "public"
 	},
 	"peerDependencies": {
+		"@lucide/svelte": "^0.562.0",
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
@@ -77,7 +78,6 @@
 		}
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.562.0",
 		"svelte-hamburgers": "^5.0.0"
 	},
 	"devDependencies": {
diff --git a/packages/sveltekit-helper/src/components/alerts/alert.types.ts b/packages/sveltekit-helper/src/components/alerts/alert.types.ts
deleted file mode 100644
index a0f51c4e..00000000
--- a/packages/sveltekit-helper/src/components/alerts/alert.types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type Icon as IconType } from '@lucide/svelte'
-
-/**
- * Available alert type variants
- * - info: Informational message
- * - warning: Warning or cautionary message
- * - success: Success confirmation message
- * - error: Error or critical message
- */
-export type AlertType = 'info' | 'warning' | 'success' | 'error'
-
-/**
- * Icon configuration for alert types
- * Contains the Lucide icon component and corresponding colour
- */
-export type IconDetail = {
-	/** Lucide icon component to display */
-	icon: typeof IconType
-	/** CSS colour value for the icon (usually a semantic colour variable) */
-	colour: string
-}
diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index 14023dbb..0e185935 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,4 +1,4 @@
 export { default as Sidebar } from './Sidebar.svelte'
 export { default as Hamburger } from './Hamburger.svelte'
-export { Alert, Notice } from './alerts'
-export type { AlertProps, NoticeProps, AlertType } from './alerts'
+export { Alert, Notice } from './notifications'
+export type { AlertProps, NoticeProps, AlertType } from './notifications'
diff --git a/packages/sveltekit-helper/src/components/alerts/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
similarity index 100%
rename from packages/sveltekit-helper/src/components/alerts/Alert.svelte
rename to packages/sveltekit-helper/src/components/notifications/Alert.svelte
diff --git a/packages/sveltekit-helper/src/components/alerts/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
similarity index 100%
rename from packages/sveltekit-helper/src/components/alerts/Notice.svelte
rename to packages/sveltekit-helper/src/components/notifications/Notice.svelte
diff --git a/packages/sveltekit-helper/src/components/notifications/alert.types.ts b/packages/sveltekit-helper/src/components/notifications/alert.types.ts
new file mode 100644
index 00000000..c97f5861
--- /dev/null
+++ b/packages/sveltekit-helper/src/components/notifications/alert.types.ts
@@ -0,0 +1,10 @@
+import { type Icon as IconType } from '@lucide/svelte'
+
+/** Available notification type variants */
+export type AlertType = 'info' | 'warning' | 'success' | 'error'
+
+/** Icon configuration for notification types */
+export type IconDetail = {
+	icon: typeof IconType
+	colour: string
+}
diff --git a/packages/sveltekit-helper/src/components/alerts/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
similarity index 100%
rename from packages/sveltekit-helper/src/components/alerts/alertIcons.ts
rename to packages/sveltekit-helper/src/components/notifications/alertIcons.ts
diff --git a/packages/sveltekit-helper/src/components/alerts/index.ts b/packages/sveltekit-helper/src/components/notifications/index.ts
similarity index 100%
rename from packages/sveltekit-helper/src/components/alerts/index.ts
rename to packages/sveltekit-helper/src/components/notifications/index.ts

From 889f5266c5a086cebdd9a50c70f1d0392ce3e50b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:40:22 +0000
Subject: [PATCH 4/9] refactor: Improve notification components structure and
 documentation

- Move AlertType and NoticeType into respective component files
- Remove internal exports (alertIcons, IconDetail) from public API
- Add comprehensive @component documentation with examples to Alert and Notice
- Convert single-line comments to multi-line format for better readability
- Move IconDetail type definition into alertIcons.ts (internal use only)
- Delete alert.types.ts (types now colocated with components)
- Export both AlertType and NoticeType for external type usage

Components now have complete inline documentation showing usage examples.
---
 .../sveltekit-helper/src/components/index.ts  |  2 +-
 .../src/components/notifications/Alert.svelte | 26 +++++++++++++++++--
 .../components/notifications/Notice.svelte    | 20 ++++++++++++--
 .../components/notifications/alert.types.ts   | 10 -------
 .../components/notifications/alertIcons.ts    | 17 +++++++++---
 .../src/components/notifications/index.ts     |  6 ++---
 6 files changed, 59 insertions(+), 22 deletions(-)
 delete mode 100644 packages/sveltekit-helper/src/components/notifications/alert.types.ts

diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index 0e185935..47028b3b 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,4 +1,4 @@
 export { default as Sidebar } from './Sidebar.svelte'
 export { default as Hamburger } from './Hamburger.svelte'
 export { Alert, Notice } from './notifications'
-export type { AlertProps, NoticeProps, AlertType } from './notifications'
+export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications'
diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index 8d6b522a..29f5d3ee 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -1,9 +1,12 @@
 <script lang="ts" module>
 	import { type Icon as IconType } from '@lucide/svelte'
-
-	import type { AlertType } from './alert.types'
 	import type { Snippet } from 'svelte'
 
+	/**
+	 * Available alert type variants
+	 */
+	export type AlertType = 'info' | 'warning' | 'success' | 'error'
+
 	export type AlertProps = {
 		type?: AlertType
 		title?: string
@@ -35,6 +38,25 @@
 	const hide = () => (visible = false)
 </script>
 
+<!--
+	@component
+
+	Full-width alert component for displaying important messages with optional body text.
+	Supports title, children content, and custom icons with dismissible functionality.
+
+	@example
+	```svelte
+	<Alert type="info" title="New features available">
+		Check out the latest updates in your dashboard.
+	</Alert>
+
+	<Alert type="warning" title="Maintenance scheduled" dismiss />
+
+	<Alert type="error" title="Payment failed" dismiss>
+		Your card was declined. Please update your payment method.
+	</Alert>
+	```
+-->
 {#if visible}
 	<div
 		class="alert alert--{type}"
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index 4662f4f4..930615de 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -1,10 +1,13 @@
 <script lang="ts" module>
 	import { type Icon as IconType } from '@lucide/svelte'
 
-	import type { AlertType } from './alert.types'
+	/**
+	 * Available notice type variants
+	 */
+	export type NoticeType = 'info' | 'warning' | 'success' | 'error'
 
 	export type NoticeProps = {
-		type?: AlertType
+		type?: NoticeType
 		title: string
 		visible?: boolean
 		dismiss?: boolean
@@ -32,6 +35,19 @@
 	const hide = () => (visible = false)
 </script>
 
+<!--
+	@component
+
+	Inline notification component for displaying brief messages with icons.
+	Compact design suitable for inline alerts, badges, or status indicators.
+
+	@example
+	```svelte
+	<Notice type="success" title="Upload complete" />
+	<Notice type="warning" title="Session expiring" dismiss />
+	<Notice type="error" title="Connection failed" icon={CustomIcon} />
+	```
+-->
 {#if visible}
 	<div
 		class="notice notice--{type}"
diff --git a/packages/sveltekit-helper/src/components/notifications/alert.types.ts b/packages/sveltekit-helper/src/components/notifications/alert.types.ts
deleted file mode 100644
index c97f5861..00000000
--- a/packages/sveltekit-helper/src/components/notifications/alert.types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { type Icon as IconType } from '@lucide/svelte'
-
-/** Available notification type variants */
-export type AlertType = 'info' | 'warning' | 'success' | 'error'
-
-/** Icon configuration for notification types */
-export type IconDetail = {
-	icon: typeof IconType
-	colour: string
-}
diff --git a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
index 60485f9b..d76d1574 100644
--- a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
+++ b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
@@ -1,8 +1,19 @@
-import { CircleX, Info, CircleCheck, TriangleAlert } from '@lucide/svelte'
+import { CircleX, Info, CircleCheck, TriangleAlert, type Icon as IconType } from '@lucide/svelte'
 
-import type { AlertType, IconDetail } from './alert.types'
+/**
+ * Notification type variants
+ */
+type NotificationType = 'info' | 'warning' | 'success' | 'error'
 
-export const alertIcons: Record<AlertType, IconDetail> = {
+/**
+ * Icon configuration for notification types
+ */
+type IconDetail = {
+	icon: typeof IconType
+	colour: string
+}
+
+export const alertIcons: Record<NotificationType, IconDetail> = {
 	info: { icon: Info, colour: 'var(--colour-semantic-info)' },
 	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },
 	warning: { icon: TriangleAlert, colour: 'var(--colour-semantic-warning)' },
diff --git a/packages/sveltekit-helper/src/components/notifications/index.ts b/packages/sveltekit-helper/src/components/notifications/index.ts
index 4741e3be..3bccded1 100644
--- a/packages/sveltekit-helper/src/components/notifications/index.ts
+++ b/packages/sveltekit-helper/src/components/notifications/index.ts
@@ -1,6 +1,4 @@
 export { default as Alert } from './Alert.svelte'
 export { default as Notice } from './Notice.svelte'
-export type { AlertProps } from './Alert.svelte'
-export type { NoticeProps } from './Notice.svelte'
-export type { AlertType, IconDetail } from './alert.types'
-export { alertIcons } from './alertIcons'
+export type { AlertProps, AlertType } from './Alert.svelte'
+export type { NoticeProps, NoticeType } from './Notice.svelte'

From 22577691dca3b171340917461616bd5ab34702c1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:44:17 +0000
Subject: [PATCH 5/9] chore: Clean up notification component type comments

- Remove verbose comments from AlertType and NoticeType
- Add concise comment to alertIcons export
- Keep code minimal and self-documenting
---
 .../sveltekit-helper/src/components/notifications/Alert.svelte | 3 ---
 .../src/components/notifications/Notice.svelte                 | 3 ---
 .../src/components/notifications/alertIcons.ts                 | 3 +++
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index 29f5d3ee..1210819d 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -2,9 +2,6 @@
 	import { type Icon as IconType } from '@lucide/svelte'
 	import type { Snippet } from 'svelte'
 
-	/**
-	 * Available alert type variants
-	 */
 	export type AlertType = 'info' | 'warning' | 'success' | 'error'
 
 	export type AlertProps = {
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index 930615de..99677073 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -1,9 +1,6 @@
 <script lang="ts" module>
 	import { type Icon as IconType } from '@lucide/svelte'
 
-	/**
-	 * Available notice type variants
-	 */
 	export type NoticeType = 'info' | 'warning' | 'success' | 'error'
 
 	export type NoticeProps = {
diff --git a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
index d76d1574..0c412144 100644
--- a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
+++ b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
@@ -13,6 +13,9 @@ type IconDetail = {
 	colour: string
 }
 
+/**
+ * Icon mapping for notification types
+ */
 export const alertIcons: Record<NotificationType, IconDetail> = {
 	info: { icon: Info, colour: 'var(--colour-semantic-info)' },
 	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },

From b5cb566433b32808de4d7fc83cb430547c237643 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 22 Jan 2026 13:56:43 +0000
Subject: [PATCH 6/9] fix: Add $bindable for visible prop and CSS variables
 documentation

- Fix Svelte 5 reactivity: use $bindable(true) for visible prop in Alert and Notice
- Add comprehensive CSS custom properties documentation to both components
- Fix linter issues (type import formatting)
- Ensures dismiss functionality properly updates parent component state
- All tests passing

CSS variables are now documented inline for easier customization.
---
 .../src/components/notifications/Alert.svelte    | 16 ++++++++++++++--
 .../src/components/notifications/Notice.svelte   | 13 +++++++++++--
 pnpm-lock.yaml                                   | 12 ++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index 1210819d..94f3ba0c 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { type Icon as IconType } from '@lucide/svelte'
+	import type { Icon as IconType } from '@lucide/svelte'
 	import type { Snippet } from 'svelte'
 
 	export type AlertType = 'info' | 'warning' | 'success' | 'error'
@@ -24,7 +24,7 @@
 		type = 'info',
 		title = '',
 		children,
-		visible = true,
+		visible = $bindable(true),
 		dismiss = false,
 		icon: customIcon,
 		...restProps
@@ -53,6 +53,18 @@
 		Your card was declined. Please update your payment method.
 	</Alert>
 	```
+
+	CSS Custom Properties:
+	- `--_alert-gap`: Gap between icon and content (default: 12px)
+	- `--_alert-padding`: Internal padding (default: 24px)
+	- `--_alert-border-radius`: Border radius (default: 6px)
+	- `--_alert-bg`: Background color (default: rgba(255, 255, 255, 0.02))
+	- `--_alert-content-gap`: Gap between title and text (default: 8px)
+	- `--_alert-title-font-weight`: Title font weight (default: var(--font-weight-semibold))
+	- `--_alert-title-colour`: Title text color (default: rgba(255, 255, 255, 1))
+	- `--_alert-text-line-height`: Text line height (default: 1.4)
+	- `--_alert-text-colour`: Text color (default: rgba(255, 255, 255, 50%))
+	- `--_alert-icon-colour`: Icon color (set automatically based on type)
 -->
 {#if visible}
 	<div
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index 99677073..a551e615 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { type Icon as IconType } from '@lucide/svelte'
+	import type { Icon as IconType } from '@lucide/svelte'
 
 	export type NoticeType = 'info' | 'warning' | 'success' | 'error'
 
@@ -21,7 +21,7 @@
 	let {
 		type = 'info',
 		title = '',
-		visible = true,
+		visible = $bindable(true),
 		dismiss = false,
 		icon: customIcon,
 		...restProps
@@ -44,6 +44,15 @@
 	<Notice type="warning" title="Session expiring" dismiss />
 	<Notice type="error" title="Connection failed" icon={CustomIcon} />
 	```
+
+	CSS Custom Properties:
+	- `--_notice-gap`: Gap between icon and title (default: 12px)
+	- `--_notice-padding`: Internal padding (default: 0.8rem 12px)
+	- `--_notice-border-radius`: Border radius (default: 6px)
+	- `--_notice-bg`: Background color (default: rgba(255, 255, 255, 0.025))
+	- `--_notice-font-size`: Title font size (default: 1rem)
+	- `--_notice-title-colour`: Title text color (default: rgba(255, 255, 255, 1))
+	- `--_notice-icon-colour`: Icon color (set automatically based on type)
 -->
 {#if visible}
 	<div
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49c83d10..de38618d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -249,6 +249,9 @@ importers:
 
   packages/sveltekit-helper:
     dependencies:
+      '@lucide/svelte':
+        specifier: ^0.562.0
+        version: 0.562.0(svelte@5.43.6)
       svelte-hamburgers:
         specifier: ^5.0.0
         version: 5.0.0(svelte@5.43.6)
@@ -1727,6 +1730,11 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@lucide/svelte@0.562.0':
+    resolution: {integrity: sha512-wDMULwtTFN2Sc/TFBm6gfuVCNb4Y5P9LDrwxNnUbV52+IEU7NXZmvxwXoz+vrrpad6Xupq+Hw5eUlqIHEGhouw==}
+    peerDependencies:
+      svelte: ^5
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -8787,6 +8795,10 @@ snapshots:
   '@libsql/win32-x64-msvc@0.4.7':
     optional: true
 
+  '@lucide/svelte@0.562.0(svelte@5.43.6)':
+    dependencies:
+      svelte: 5.43.6
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.28.4

From b6b78ed3bc922b6e12d3c9d74d1e3d55a4dc961c Mon Sep 17 00:00:00 2001
From: Ainsley <hello@ainsley.dev>
Date: Thu, 22 Jan 2026 14:19:16 +0000
Subject: [PATCH 7/9] feat: Adding scss

---
 packages/sveltekit-helper/package.json        |   4 +-
 .../src/components/notifications/Alert.svelte |   9 +-
 .../components/notifications/Notice.svelte    |   9 +-
 .../src/scss/_border-radius.scss              |  21 +++
 .../sveltekit-helper/src/scss/_index.scss     |   3 +
 .../sveltekit-helper/src/scss/_mixins.scss    | 156 ++++++++++++++++++
 .../sveltekit-helper/src/scss/_sizes.scss     |  25 +++
 7 files changed, 219 insertions(+), 8 deletions(-)
 create mode 100644 packages/sveltekit-helper/src/scss/_border-radius.scss
 create mode 100644 packages/sveltekit-helper/src/scss/_index.scss
 create mode 100644 packages/sveltekit-helper/src/scss/_mixins.scss
 create mode 100644 packages/sveltekit-helper/src/scss/_sizes.scss

diff --git a/packages/sveltekit-helper/package.json b/packages/sveltekit-helper/package.json
index 91b26741..69d9e43a 100644
--- a/packages/sveltekit-helper/package.json
+++ b/packages/sveltekit-helper/package.json
@@ -65,7 +65,6 @@
 		"access": "public"
 	},
 	"peerDependencies": {
-		"@lucide/svelte": "^0.562.0",
 		"@sveltejs/kit": "^2.0.0",
 		"svelte": "^5.0.0"
 	},
@@ -78,7 +77,8 @@
 		}
 	},
 	"dependencies": {
-		"svelte-hamburgers": "^5.0.0"
+		"svelte-hamburgers": "^5.0.0",
+		"@lucide/svelte": "^0.562.0"
 	},
 	"devDependencies": {
 		"@ainsleydev/eslint-config": "workspace:*",
diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index 94f3ba0c..c51c68ae 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -33,6 +33,7 @@
 	const iconDetail = $derived(alertIcons[type])
 	const Icon = $derived(customIcon || iconDetail.icon)
 	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
 </script>
 
 <!--
@@ -70,6 +71,8 @@
 	<div
 		class="alert alert--{type}"
 		role="alert"
+		aria-live={ariaLive}
+		aria-atomic="true"
 		style="--_alert-icon-colour: {iconDetail.colour}"
 		transition:fade={{ duration: 300 }}
 		{...restProps}
@@ -93,7 +96,7 @@
 		</div>
 		<!-- Dismiss -->
 		{#if dismiss}
-			<button class="alert__dismiss" onclick={hide} aria-label="Close">
+			<button class="alert__dismiss" onclick={hide} aria-label="Close Alert">
 				<X size={24} color={iconDetail.colour} />
 			</button>
 		{/if}
@@ -101,7 +104,7 @@
 {/if}
 
 <style lang="scss">
-	@use '$lib/scss/abstracts' as a;
+	@use '../../scss' as a;
 
 	.alert {
 		$self: &;
@@ -110,7 +113,7 @@
 		display: flex;
 		gap: var(--_alert-gap, a.$size-12);
 		width: 100%;
-		border-radius: var(--_alert-border-radius, a.$border-radius-6);
+		border-radius: var(--_alert-border-radius, 6px);
 		padding: var(--_alert-padding, a.$size-24);
 		background-color: var(--_alert-bg, rgba(255, 255, 255, 0.02));
 
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index a551e615..58ab2887 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -30,6 +30,7 @@
 	const iconDetail = $derived(alertIcons[type])
 	const Icon = $derived(customIcon || iconDetail.icon)
 	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
 </script>
 
 <!--
@@ -58,12 +59,14 @@
 	<div
 		class="notice notice--{type}"
 		role="alert"
+		aria-live={ariaLive}
+		aria-atomic="true"
 		style="--_notice-icon-colour: {iconDetail.colour}"
 		transition:fade={{ duration: 300 }}
 		{...restProps}
 	>
 		<!-- Icon -->
-		<figure class="notice__icon">
+		<figure class="notice__icon" >
 			<Icon size={20} color={iconDetail.colour} strokeWidth={1.2}></Icon>
 		</figure>
 		<!-- Title -->
@@ -72,7 +75,7 @@
 		</p>
 		<!-- Dismiss -->
 		{#if dismiss}
-			<button class="notice__dismiss" onclick={hide} aria-label="Close">
+			<button class="notice__dismiss" onclick={hide} aria-label="Close Notice">
 				<X size={20} color={iconDetail.colour} />
 			</button>
 		{/if}
@@ -80,7 +83,7 @@
 {/if}
 
 <style lang="scss">
-	@use '$lib/scss/abstracts' as a;
+	@use '../../scss' as a;
 
 	.notice {
 		$self: &;
diff --git a/packages/sveltekit-helper/src/scss/_border-radius.scss b/packages/sveltekit-helper/src/scss/_border-radius.scss
new file mode 100644
index 00000000..05b2d2f9
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_border-radius.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+$border-radius-2: 2px;
+$border-radius-4: 4px;
+$border-radius-6: 6px;
+$border-radius-8: 8px;
+$border-radius-12: 12px;
+$border-radius-16: 16px;
+$border-radius-32: 32px;
+$border-radius-full: 9999999px;
+
+$border-radius: (
+	'2': $border-radius-2,
+	'4': $border-radius-4,
+	'6': $border-radius-6,
+	'8': $border-radius-8,
+	'12': $border-radius-12,
+	'16': $border-radius-16,
+	'32': $border-radius-32,
+	'full': $border-radius-full,
+);
diff --git a/packages/sveltekit-helper/src/scss/_index.scss b/packages/sveltekit-helper/src/scss/_index.scss
new file mode 100644
index 00000000..e1973260
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_index.scss
@@ -0,0 +1,3 @@
+@forward 'border-radius';
+@forward 'sizes';
+@forward 'mixins';
diff --git a/packages/sveltekit-helper/src/scss/_mixins.scss b/packages/sveltekit-helper/src/scss/_mixins.scss
new file mode 100644
index 00000000..90a0d03a
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_mixins.scss
@@ -0,0 +1,156 @@
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+@use 'breakpoints' as *;
+@use 'typography' as *;
+
+// Media Queries
+// ==========================================================================
+
+@mixin mq($size) {
+	@if map.has-key($breakpoints, $size) {
+		$breakpoint: map.get($breakpoints, $size);
+		@media screen and (min-width: $breakpoint * 1px) {
+			@content;
+		}
+	} @else if meta.type-of($size) == number {
+		@if math.is-unitless($size) {
+			@error 'When using a number with @mq() make sure to include a unit';
+		} @else {
+			@media screen and (min-width: $size) {
+				@content;
+			}
+		}
+	} @else {
+		@error 'The keyword #{$size} is not in the $breakpoints map';
+	}
+}
+
+@mixin mq-max($size) {
+	@if map.has-key($breakpoints, $size) {
+		$breakpoint: map.get($breakpoints, $size);
+		@media screen and (max-width: $breakpoint * 1px) {
+			@content;
+		}
+	} @else if meta.type-of($size) == number {
+		@if math.is-unitless($size) {
+			@error 'When using a number with @mq() make sure to include a unit';
+		} @else {
+			@media screen and (max-width: $size) {
+				@content;
+			}
+		}
+	} @else {
+		@error 'The keyword #{$size} is not in the $breakpoints map';
+	}
+}
+
+@mixin media-small-phones {
+	@media (width <= 350px) {
+		@content;
+	}
+}
+
+//// Pixel to REM Converter
+//// ==========================================================================
+//
+//// @author Ainsley Clark
+//// @param {Number} $pxValue - Pixel amount to convert
+//// @param {String} $property [font-size] - Property to convert
+//// @param {Number} $standard-size - Initial base rem size
+//@mixin px-to-rem($pxValue, $property: 'font-size', $standard-size: 16) {
+//	#{$property}: $pxValue + px;
+//	#{$property}: $pxValue / å $standard-size + rem;
+//}
+
+// Type
+// ==========================================================================
+
+@mixin ellipsis($lines) {
+	display: -webkit-box;
+	-webkit-line-clamp: $lines;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+@function strip-unit($value) {
+	@return math.div($value, $value * 0 + 1);
+}
+
+// Usage:
+// @include fluid-type(34px, 98px);
+@mixin fluid-type($min-font-size, $max-font-size) {
+	$u1: math.unit($type-fluid-start-size);
+	$u2: math.unit($type-fluid-end-size);
+	$u3: math.unit($min-font-size);
+	$u4: math.unit($max-font-size);
+
+	@if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+		& {
+			font-size: $min-font-size;
+
+			@media screen and (min-width: $type-fluid-start-size) {
+				font-size: calc(
+					#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
+						(
+							(100vw - #{$type-fluid-start-size}) /
+								#{strip-unit($type-fluid-end-size - $type-fluid-start-size)}
+						)
+				);
+			}
+
+			@media screen and (min-width: $type-fluid-end-size) {
+				font-size: $max-font-size;
+			}
+		}
+	}
+}
+
+// Landscape Mixin
+// ==========================================================================
+
+@mixin landscape {
+	@media screen and (orientation: landscape) {
+		@content;
+	}
+}
+
+// Browser
+// ==========================================================================
+
+@mixin ie11 {
+	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+		@content;
+	}
+}
+
+@mixin ie11andedge {
+	// stylelint-disable-next-line media-feature-name-no-unknown
+	@media screen and (min-device-pixel-ratio: 0) and (-ms-high-contrast: none),
+		(-ms-high-contrast: active) {
+		@content;
+	}
+}
+
+@mixin firefox {
+	// stylelint-disable-next-line media-feature-name-no-unknown
+	@media screen and (min-device-pixel-ratio: 0) and (resolution >= 0.001dpcm) {
+		@content;
+	}
+}
+
+@mixin safari {
+	@media not all and (resolution >= 0.001dpcm) {
+		@supports (-webkit-appearance: none) {
+			@content;
+		}
+	}
+}
+
+// Full Height
+// ==========================================================================
+
+@mixin full-height {
+	height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
+	height: 100svh;
+}
diff --git a/packages/sveltekit-helper/src/scss/_sizes.scss b/packages/sveltekit-helper/src/scss/_sizes.scss
new file mode 100644
index 00000000..31904cdf
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_sizes.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'functions' as f;
+
+$size-2: f.px-to-rem(2);
+$size-4: f.px-to-rem(4);
+$size-8: f.px-to-rem(8);
+$size-12: f.px-to-rem(12);
+$size-16: f.px-to-rem(16);
+$size-24: f.px-to-rem(24);
+$size-32: f.px-to-rem(32);
+$size-40: f.px-to-rem(40);
+$size-48: f.px-to-rem(48);
+
+$sizes: (
+	'0': 0,
+	'2': $size-2,
+	'4': $size-4,
+	'8': $size-8,
+	'12': $size-12,
+	'16': $size-16,
+	'24': $size-24,
+	'32': $size-32,
+	'40': $size-40,
+	'48': $size-48,
+);

From 4dfbf93367c91197f035557f880cb805cfe4b542 Mon Sep 17 00:00:00 2001
From: Ainsley <hello@ainsley.dev>
Date: Thu, 22 Jan 2026 14:25:02 +0000
Subject: [PATCH 8/9] refactor: Making components aligned

---
 .../src/components/Grid/Column.svelte         |  4 ++++
 .../src/components/Grid/Container.svelte      | 22 +++++++++++++++++++
 .../src/components/Grid/Row.svelte            |  4 ++++
 .../src/components/Hamburger.svelte           |  9 ++++++++
 .../src/components/Sidebar.svelte             | 15 +++++++++++++
 .../src/components/notifications/Alert.svelte |  2 +-
 .../components/notifications/Notice.svelte    |  2 +-
 .../src/scss/_breakpoints.scss                | 10 +++++++++
 .../sveltekit-helper/src/scss/_functions.scss |  6 +++++
 .../sveltekit-helper/src/scss/_index.scss     |  2 ++
 .../sveltekit-helper/src/scss/_mixins.scss    | 11 +++++-----
 11 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 packages/sveltekit-helper/src/scss/_breakpoints.scss
 create mode 100644 packages/sveltekit-helper/src/scss/_functions.scss

diff --git a/packages/sveltekit-helper/src/components/Grid/Column.svelte b/packages/sveltekit-helper/src/components/Grid/Column.svelte
index 3f0240e8..4f77a344 100644
--- a/packages/sveltekit-helper/src/components/Grid/Column.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Column.svelte
@@ -15,6 +15,10 @@ const { ...restProps } = $props();
 		Content
 	</Column>
 	```
+
+	CSS Custom Properties:
+	- `--col-gap`: Horizontal padding on desktop (default: 1rem)
+	- `--col-gap-mobile`: Horizontal padding on mobile (default: var(--col-gap, 0.5rem))
 -->
 <div class="col" {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Grid/Container.svelte b/packages/sveltekit-helper/src/components/Grid/Container.svelte
index d4679403..bdf572d0 100644
--- a/packages/sveltekit-helper/src/components/Grid/Container.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Container.svelte
@@ -7,6 +7,28 @@ const { ...restProps } = $props();
 
 	Centre content such as rows & columns horizontally with predefined max-width.
 	Uses CSS Grid to provide breakout and full-width layout options.
+
+	@example
+	```svelte
+	<Container>
+		<Row>
+			<Column class="col-12">Content</Column>
+		</Row>
+	</Container>
+	```
+
+	@example
+	```svelte
+	<Container>
+		<div class="breakout">Full breakout content</div>
+		<div class="full-width">Full width content</div>
+	</Container>
+	```
+
+	CSS Custom Properties:
+	- `--container-max-width`: Maximum content width (default: 1328px)
+	- `--container-breakout-max-width`: Maximum breakout width (default: 1500px)
+	- `--container-padding`: Horizontal padding (default: 1rem)
 -->
 <div class="container" {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Grid/Row.svelte b/packages/sveltekit-helper/src/components/Grid/Row.svelte
index cdeb558b..2b53f0ea 100644
--- a/packages/sveltekit-helper/src/components/Grid/Row.svelte
+++ b/packages/sveltekit-helper/src/components/Grid/Row.svelte
@@ -26,6 +26,10 @@ const { noGaps = false, ...restProps }: RowProps = $props();
 		<Column></Column>
 	</Row>
 	```
+
+	CSS Custom Properties:
+	- `--row-gap`: Gap between columns (default: 1rem)
+	- `--row-gap-mobile`: Gap on mobile screens (default: var(--row-gap, 0.5rem))
 -->
 <div class="row" class:row--no-gaps={noGaps} {...restProps}>
 	<slot />
diff --git a/packages/sveltekit-helper/src/components/Hamburger.svelte b/packages/sveltekit-helper/src/components/Hamburger.svelte
index b63874bc..cee65c41 100644
--- a/packages/sveltekit-helper/src/components/Hamburger.svelte
+++ b/packages/sveltekit-helper/src/components/Hamburger.svelte
@@ -40,6 +40,15 @@ export type HamburgerProps = {
 	```svelte
 	<Hamburger gap="1rem">
 	```
+
+	CSS Custom Properties:
+	- `--hamburger-gap`: Distance from top and right edges (default: 0.8rem)
+	- `--hamburger-z-index`: Stacking order (default: 10000)
+	- `--hamburger-colour`: Icon color (default: var(--colour-base-light))
+	- `--hamburger-layer-width`: Width of each line (default: 24px)
+	- `--hamburger-layer-height`: Height of each line (default: 2px)
+	- `--hamburger-layer-spacing`: Gap between lines (default: 5px)
+	- `--hamburger-border-radius`: Rounding of lines (default: 2px)
 -->
 <div class="hamburger-wrapper {className}" style="--hamburger-gap: {gap}" aria-label="Toggle Menu">
 	<SvelteHamburger
diff --git a/packages/sveltekit-helper/src/components/Sidebar.svelte b/packages/sveltekit-helper/src/components/Sidebar.svelte
index 1c815331..5baf6819 100644
--- a/packages/sveltekit-helper/src/components/Sidebar.svelte
+++ b/packages/sveltekit-helper/src/components/Sidebar.svelte
@@ -135,6 +135,21 @@ export type SidebarProps = {
 		<nav>...</nav>
 	</Sidebar>
 	```
+
+	CSS Custom Properties:
+	- `--sidebar-width`: Mobile sidebar width (default: 50vw)
+	- `--sidebar-min-width`: Minimum sidebar width (default: 270px)
+	- `--sidebar-top`: Desktop sticky position from top (default: 160px)
+	- `--sidebar-overlay-opacity`: Overlay opacity when open (default: 0.3)
+	- `--sidebar-background`: Sidebar background color (default: var(--colour-base-black))
+	- `--sidebar-border-colour`: Border color (default: rgba(255, 255, 255, 0.1))
+	- `--sidebar-overlay-colour`: Overlay background color (default: var(--colour-grey-900))
+	- `--sidebar-inner-padding`: Content padding (default: 2rem 1.8rem 0 1.8rem)
+	- `--sidebar-toggle-background`: Toggle button background (default: var(--colour-base-black))
+	- `--sidebar-toggle-colour`: Toggle button text color (default: var(--colour-base-light))
+	- `--sidebar-toggle-padding`: Toggle button padding (default: 0.25rem 1.5rem)
+	- `--sidebar-toggle-radius`: Toggle button border radius (default: 0.375rem)
+	- `--sidebar-toggle-font-size`: Toggle button font size (default: 0.9rem)
 -->
 <aside
 	class="sidebar sidebar--{toggleStyle} sidebar--{position} {className}"
diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index c51c68ae..2dd9ffc1 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -18,7 +18,7 @@
 	import { X } from '@lucide/svelte'
 	import { fade } from 'svelte/transition'
 
-	import { alertIcons } from './alertIcons'
+	import { alertIcons } from './alertIcons.js'
 
 	let {
 		type = 'info',
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index 58ab2887..6596bc1e 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -66,7 +66,7 @@
 		{...restProps}
 	>
 		<!-- Icon -->
-		<figure class="notice__icon" >
+		<figure class="notice__icon">
 			<Icon size={20} color={iconDetail.colour} strokeWidth={1.2}></Icon>
 		</figure>
 		<!-- Title -->
diff --git a/packages/sveltekit-helper/src/scss/_breakpoints.scss b/packages/sveltekit-helper/src/scss/_breakpoints.scss
new file mode 100644
index 00000000..08125240
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_breakpoints.scss
@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$breakpoints: (
+	'small': 320,
+	'mobile': 568,
+	'tablet': 768,
+	'desktop': 1024,
+	'wide': 1280,
+	'ultrawide': 1920,
+);
diff --git a/packages/sveltekit-helper/src/scss/_functions.scss b/packages/sveltekit-helper/src/scss/_functions.scss
new file mode 100644
index 00000000..4b0bf07a
--- /dev/null
+++ b/packages/sveltekit-helper/src/scss/_functions.scss
@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+@function px-to-rem($value) {
+	$remValue: math.div($value, 16) + rem;
+	@return $remValue;
+}
diff --git a/packages/sveltekit-helper/src/scss/_index.scss b/packages/sveltekit-helper/src/scss/_index.scss
index e1973260..578ba5a3 100644
--- a/packages/sveltekit-helper/src/scss/_index.scss
+++ b/packages/sveltekit-helper/src/scss/_index.scss
@@ -1,3 +1,5 @@
+@forward 'breakpoints';
 @forward 'border-radius';
+@forward 'functions';
 @forward 'sizes';
 @forward 'mixins';
diff --git a/packages/sveltekit-helper/src/scss/_mixins.scss b/packages/sveltekit-helper/src/scss/_mixins.scss
index 90a0d03a..eeb45fc3 100644
--- a/packages/sveltekit-helper/src/scss/_mixins.scss
+++ b/packages/sveltekit-helper/src/scss/_mixins.scss
@@ -1,15 +1,14 @@
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:map';
-@use 'breakpoints' as *;
-@use 'typography' as *;
+@use 'breakpoints';
 
 // Media Queries
 // ==========================================================================
 
 @mixin mq($size) {
-	@if map.has-key($breakpoints, $size) {
-		$breakpoint: map.get($breakpoints, $size);
+	@if map.has-key(breakpoints.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$breakpoints, $size);
 		@media screen and (min-width: $breakpoint * 1px) {
 			@content;
 		}
@@ -27,8 +26,8 @@
 }
 
 @mixin mq-max($size) {
-	@if map.has-key($breakpoints, $size) {
-		$breakpoint: map.get($breakpoints, $size);
+	@if map.has-key(breakpoints.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$breakpoints, $size);
 		@media screen and (max-width: $breakpoint * 1px) {
 			@content;
 		}

From 6c6914433f32d3544854598cb1781da56d0e10c6 Mon Sep 17 00:00:00 2001
From: Ainsley <hello@ainsley.dev>
Date: Thu, 22 Jan 2026 14:27:41 +0000
Subject: [PATCH 9/9] chore: Linting & adding changset

---
 .changeset/whole-beans-hide.md                |  5 ++++
 .../sveltekit-helper/src/components/index.ts  |  8 +++---
 .../src/components/notifications/Alert.svelte | 26 +++++++++----------
 .../components/notifications/Notice.svelte    | 18 ++++++-------
 .../components/notifications/alertIcons.ts    | 12 ++++-----
 .../src/components/notifications/index.ts     |  8 +++---
 6 files changed, 41 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/whole-beans-hide.md

diff --git a/.changeset/whole-beans-hide.md b/.changeset/whole-beans-hide.md
new file mode 100644
index 00000000..565c58e5
--- /dev/null
+++ b/.changeset/whole-beans-hide.md
@@ -0,0 +1,5 @@
+---
+"@ainsleydev/sveltekit-helper": minor
+---
+
+Adding notification components
diff --git a/packages/sveltekit-helper/src/components/index.ts b/packages/sveltekit-helper/src/components/index.ts
index 47028b3b..29060bb5 100644
--- a/packages/sveltekit-helper/src/components/index.ts
+++ b/packages/sveltekit-helper/src/components/index.ts
@@ -1,4 +1,4 @@
-export { default as Sidebar } from './Sidebar.svelte'
-export { default as Hamburger } from './Hamburger.svelte'
-export { Alert, Notice } from './notifications'
-export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications'
+export { default as Sidebar } from './Sidebar.svelte';
+export { default as Hamburger } from './Hamburger.svelte';
+export { Alert, Notice } from './notifications';
+export type { AlertProps, AlertType, NoticeProps, NoticeType } from './notifications';
diff --git a/packages/sveltekit-helper/src/components/notifications/Alert.svelte b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
index 2dd9ffc1..b289e747 100644
--- a/packages/sveltekit-helper/src/components/notifications/Alert.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Alert.svelte
@@ -1,17 +1,17 @@
 <script lang="ts" module>
-	import type { Icon as IconType } from '@lucide/svelte'
-	import type { Snippet } from 'svelte'
-
-	export type AlertType = 'info' | 'warning' | 'success' | 'error'
-
-	export type AlertProps = {
-		type?: AlertType
-		title?: string
-		children?: Snippet
-		visible?: boolean
-		dismiss?: boolean
-		icon?: typeof IconType
-	}
+import type { Icon as IconType } from '@lucide/svelte';
+import type { Snippet } from 'svelte';
+
+export type AlertType = 'info' | 'warning' | 'success' | 'error';
+
+export type AlertProps = {
+	type?: AlertType;
+	title?: string;
+	children?: Snippet;
+	visible?: boolean;
+	dismiss?: boolean;
+	icon?: typeof IconType;
+};
 </script>
 
 <script lang="ts">
diff --git a/packages/sveltekit-helper/src/components/notifications/Notice.svelte b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
index 6596bc1e..6ba41baa 100644
--- a/packages/sveltekit-helper/src/components/notifications/Notice.svelte
+++ b/packages/sveltekit-helper/src/components/notifications/Notice.svelte
@@ -1,15 +1,15 @@
 <script lang="ts" module>
-	import type { Icon as IconType } from '@lucide/svelte'
+import type { Icon as IconType } from '@lucide/svelte';
 
-	export type NoticeType = 'info' | 'warning' | 'success' | 'error'
+export type NoticeType = 'info' | 'warning' | 'success' | 'error';
 
-	export type NoticeProps = {
-		type?: NoticeType
-		title: string
-		visible?: boolean
-		dismiss?: boolean
-		icon?: typeof IconType
-	}
+export type NoticeProps = {
+	type?: NoticeType;
+	title: string;
+	visible?: boolean;
+	dismiss?: boolean;
+	icon?: typeof IconType;
+};
 </script>
 
 <script lang="ts">
diff --git a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
index 0c412144..0ee817b7 100644
--- a/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
+++ b/packages/sveltekit-helper/src/components/notifications/alertIcons.ts
@@ -1,17 +1,17 @@
-import { CircleX, Info, CircleCheck, TriangleAlert, type Icon as IconType } from '@lucide/svelte'
+import { CircleCheck, CircleX, type Icon as IconType, Info, TriangleAlert } from '@lucide/svelte';
 
 /**
  * Notification type variants
  */
-type NotificationType = 'info' | 'warning' | 'success' | 'error'
+type NotificationType = 'info' | 'warning' | 'success' | 'error';
 
 /**
  * Icon configuration for notification types
  */
 type IconDetail = {
-	icon: typeof IconType
-	colour: string
-}
+	icon: typeof IconType;
+	colour: string;
+};
 
 /**
  * Icon mapping for notification types
@@ -21,4 +21,4 @@ export const alertIcons: Record<NotificationType, IconDetail> = {
 	success: { icon: CircleCheck, colour: 'var(--colour-semantic-success)' },
 	warning: { icon: TriangleAlert, colour: 'var(--colour-semantic-warning)' },
 	error: { icon: CircleX, colour: 'var(--colour-semantic-error)' },
-}
+};
diff --git a/packages/sveltekit-helper/src/components/notifications/index.ts b/packages/sveltekit-helper/src/components/notifications/index.ts
index 3bccded1..e841ddda 100644
--- a/packages/sveltekit-helper/src/components/notifications/index.ts
+++ b/packages/sveltekit-helper/src/components/notifications/index.ts
@@ -1,4 +1,4 @@
-export { default as Alert } from './Alert.svelte'
-export { default as Notice } from './Notice.svelte'
-export type { AlertProps, AlertType } from './Alert.svelte'
-export type { NoticeProps, NoticeType } from './Notice.svelte'
+export { default as Alert } from './Alert.svelte';
+export { default as Notice } from './Notice.svelte';
+export type { AlertProps, AlertType } from './Alert.svelte';
+export type { NoticeProps, NoticeType } from './Notice.svelte';