@ainsleydev/sveltekit-helper 0.2.1 → 0.3.1

package/README.md

@@ -219,13 +219,13 @@ Override CSS variables globally from `:root`:
 :root {
 	--sidebar-width: 400px;
 	--sidebar-min-width: 300px;
-	--sidebar-background: #1a1a1a;
+	--sidebar-bg: #1a1a1a;
 	--sidebar-border-colour: rgba(255, 255, 255, 0.2);
 	--sidebar-overlay-colour: #000;
 	--sidebar-overlay-opacity: 0.5;
 
 	/* Toggle button */
-	--sidebar-toggle-background: #2a2a2a;
+	--sidebar-toggle-bg: #2a2a2a;
 	--sidebar-toggle-colour: #fff;
 	--sidebar-toggle-padding: 0.5rem 1.5rem;
 	--sidebar-toggle-radius: 8px;
@@ -239,7 +239,7 @@ Override CSS variables globally from `:root`:
 Or use inline styles:
 
 ```svelte
-<Sidebar style="--sidebar-background: #2a2a2a; --sidebar-width: 400px">
+<Sidebar style="--sidebar-bg: #2a2a2a; --sidebar-width: 400px">
 	<nav>...</nav>
 </Sidebar>
 ```
@@ -359,13 +359,13 @@ Override CSS variables globally:
 	--form-input-border: 1px solid #e5e7eb;
 	--form-input-border-radius: 0.5rem;
 	--form-input-bg: #ffffff;
-	--form-input-text: #111827;
-	--form-error-color: #ef4444;
+	--form-input-colour: #111827;
+	--form-error-colour: #ef4444;
 	--form-error-bg: #fee2e2;
-	--form-success-color: #10b981;
+	--form-success-colour: #10b981;
 	--form-success-bg: #d1fae5;
 	--form-button-bg: #3b82f6;
-	--form-button-text: #ffffff;
+	--form-button-colour: #ffffff;
 	--form-button-hover-bg: #2563eb;
 	--form-button-disabled-bg: #9ca3af;
 }

package/dist/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 />

package/dist/components/Grid/Column.svelte.d.ts

@@ -27,6 +27,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * 	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))
  */
 declare const Column: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Record<string, any>, {
     default: {};

package/dist/components/Grid/Column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Column.svelte.ts"],"names":[],"mappings":"AAgBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,MAAM;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Column.svelte.ts"],"names":[],"mappings":"AAgBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM;;;;;;UAAqF,CAAC;AAChF,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/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 />

package/dist/components/Grid/Container.svelte.d.ts

@@ -19,6 +19,28 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 /**
  * 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)
  */
 declare const Container: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Record<string, any>, {
     default: {};

package/dist/components/Grid/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Container.svelte.ts"],"names":[],"mappings":"AAgBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;GAGG;AACH,QAAA,MAAM,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Container.svelte.ts"],"names":[],"mappings":"AAgBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,SAAS;;;;;;UAAqF,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}

package/dist/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 />

package/dist/components/Grid/Row.svelte.d.ts

@@ -35,6 +35,10 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * 	<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))
  */
 declare const Row: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<RowProps, {
     default: {};

package/dist/components/Grid/Row.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Row.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiBF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,GAAG;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/Row.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,QAAQ,GAAG;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAiBF,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,GAAG;;;;;;UAAqF,CAAC;AAC7E,KAAK,GAAG,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;AACtC,eAAe,GAAG,CAAC"}

package/dist/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

package/dist/components/Hamburger.svelte.d.ts

@@ -20,6 +20,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)
  */
 declare const Hamburger: import("svelte").Component<HamburgerProps, {}, "isOpen">;
 type Hamburger = ReturnType<typeof Hamburger>;

package/dist/components/Hamburger.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hamburger.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Hamburger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAE5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AA8BF;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,SAAS,0DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Hamburger.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Hamburger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,gBAAgB,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG;IAE5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AA8BF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,SAAS,0DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/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-bg`: 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-bg`: 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}"
@@ -171,7 +186,7 @@ export type SidebarProps = {
   display: none;
   bottom: 0;
   right: 1px;
-  background-color: var(--sidebar-toggle-background, var(--colour-base-black));
+  background-color: var(--sidebar-toggle-bg, var(--colour-base-black));
   color: var(--sidebar-toggle-colour, var(--colour-base-light));
   padding: var(--sidebar-toggle-padding, 0.25rem 1.5rem);
   border-top-right-radius: var(--sidebar-toggle-radius, 0.375rem);
@@ -191,7 +206,7 @@ export type SidebarProps = {
   left: 1px;
   width: calc(100% - 2px);
   height: 10%;
-  background: var(--sidebar-toggle-background, var(--colour-base-black));
+  background: var(--sidebar-toggle-bg, var(--colour-base-black));
 }
 .sidebar__overlay {
   position: fixed;
@@ -229,7 +244,7 @@ export type SidebarProps = {
     height: 100%;
     width: var(--sidebar-width, 50vw);
     min-width: var(--sidebar-min-width, 270px);
-    background-color: var(--sidebar-background, var(--colour-base-black));
+    background-color: var(--sidebar-bg, var(--colour-base-black));
     border-color: var(--sidebar-border-colour, rgba(255, 255, 255, 0.1));
     z-index: 1000;
     transition: translate 600ms cubic-bezier(0.1, 0.7, 0.1, 1);

package/dist/components/Sidebar.svelte.d.ts

@@ -34,6 +34,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-bg`: 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-bg`: 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)
  */
 declare const Sidebar: import("svelte").Component<SidebarProps, {}, "isOpen">;
 type Sidebar = ReturnType<typeof Sidebar>;

package/dist/components/Sidebar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAiIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/Sidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC,CAAC;AAiIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/index.js

@@ -1,2 +1,3 @@
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as Hamburger } from './Hamburger.svelte';
+export { Alert, Notice } from './notifications';

package/dist/components/notifications/Alert.svelte

@@ -0,0 +1,154 @@
+<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;
+};
+</script>
+
+<script lang="ts">
+	import { X } from '@lucide/svelte'
+	import { fade } from 'svelte/transition'
+
+	import { alertIcons } from './alertIcons.js'
+
+	let {
+		type = 'info',
+		title = '',
+		children,
+		visible = $bindable(true),
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: AlertProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
+</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>
+	```
+
+	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
+		class="alert alert--{type}"
+		role="alert"
+		aria-live={ariaLive}
+		aria-atomic="true"
+		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 Alert">
+				<X size={24} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>.alert {
+  position: relative;
+  display: flex;
+  gap: var(--_alert-gap, 0.75rem);
+  width: 100%;
+  border-radius: var(--_alert-border-radius, 6px);
+  padding: var(--_alert-padding, 1.5rem);
+  background-color: var(--_alert-bg, rgba(255, 255, 255, 0.02));
+}
+.alert__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  flex-shrink: 0;
+}
+.alert__content {
+  display: grid;
+  gap: var(--_alert-content-gap, 0.5rem);
+}
+.alert__title {
+  font-weight: var(--_alert-title-font-weight, var(--font-weight-semibold));
+  margin: 0;
+  line-height: 1;
+  color: var(--_alert-title-colour, rgb(255, 255, 255));
+}
+.alert__title:empty {
+  display: none;
+}
+.alert__text {
+  margin: 0;
+  line-height: var(--_alert-text-line-height, 1.4);
+  color: var(--_alert-text-colour, rgba(255, 255, 255, 0.5));
+}
+.alert__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);
+}
+.alert :global(svg) {
+  min-width: 1.4rem;
+  min-height: 1.4rem;
+}</style>

package/dist/components/notifications/Alert.svelte.d.ts

@@ -0,0 +1,44 @@
+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;
+};
+/**
+ * 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>
+ * ```
+ *
+ * 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)
+ */
+declare const Alert: import("svelte").Component<AlertProps, {}, "visible">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

package/dist/components/notifications/Alert.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Alert.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAiEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,KAAK,uDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/components/notifications/Notice.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" module>
+import type { Icon as IconType } from '@lucide/svelte';
+
+export type NoticeType = 'info' | 'warning' | 'success' | 'error';
+
+export type NoticeProps = {
+	type?: NoticeType;
+	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 = $bindable(true),
+		dismiss = false,
+		icon: customIcon,
+		...restProps
+	}: NoticeProps = $props()
+
+	const iconDetail = $derived(alertIcons[type])
+	const Icon = $derived(customIcon || iconDetail.icon)
+	const hide = () => (visible = false)
+	const ariaLive = $derived(type === 'error' ? 'assertive' : 'polite')
+</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} />
+	```
+
+	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
+		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">
+			<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 Notice">
+				<X size={20} color={iconDetail.colour} />
+			</button>
+		{/if}
+	</div>
+{/if}
+
+<style>.notice {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  gap: var(--_notice-gap, 0.75rem);
+  padding: var(--_notice-padding, 0.8rem 0.75rem);
+  border-radius: var(--_notice-border-radius, 6px);
+  background-color: var(--_notice-bg, rgba(255, 255, 255, 0.025));
+  align-items: center;
+}
+.notice__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  flex-shrink: 0;
+}
+.notice__title {
+  margin: 0;
+  font-size: var(--_notice-font-size, 1rem);
+  font-weight: var(--font-weight-medium);
+  color: var(--_notice-title-colour, rgb(255, 255, 255));
+  line-height: 1;
+}
+.notice__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);
+}
+.notice :global(svg) {
+  min-width: 1.4rem;
+  min-height: 1.4rem;
+}</style>

package/dist/components/notifications/Notice.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Icon as IconType } from '@lucide/svelte';
+export type NoticeType = 'info' | 'warning' | 'success' | 'error';
+export type NoticeProps = {
+    type?: NoticeType;
+    title: string;
+    visible?: boolean;
+    dismiss?: boolean;
+    icon?: typeof IconType;
+};
+/**
+ * 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} />
+ * ```
+ *
+ * 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)
+ */
+declare const Notice: import("svelte").Component<NoticeProps, {}, "visible">;
+type Notice = ReturnType<typeof Notice>;
+export default Notice;
+//# sourceMappingURL=Notice.svelte.d.ts.map

package/dist/components/notifications/Notice.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/Notice.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC;AAuDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/notifications/alertIcons.d.ts

@@ -0,0 +1,18 @@
+import { type Icon as IconType } from '@lucide/svelte';
+/**
+ * Notification type variants
+ */
+type NotificationType = 'info' | 'warning' | 'success' | 'error';
+/**
+ * Icon configuration for notification types
+ */
+type IconDetail = {
+    icon: typeof IconType;
+    colour: string;
+};
+/**
+ * Icon mapping for notification types
+ */
+export declare const alertIcons: Record<NotificationType, IconDetail>;
+export {};
+//# sourceMappingURL=alertIcons.d.ts.map

package/dist/components/notifications/alertIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertIcons.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/alertIcons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,IAAI,IAAI,QAAQ,EAAuB,MAAM,gBAAgB,CAAC;AAElG;;GAEG;AACH,KAAK,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjE;;GAEG;AACH,KAAK,UAAU,GAAG;IACjB,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,gBAAgB,EAAE,UAAU,CAK3D,CAAC"}

package/dist/components/notifications/alertIcons.js

@@ -0,0 +1,10 @@
+import { CircleCheck, CircleX, Info, TriangleAlert } from '@lucide/svelte';
+/**
+ * Icon mapping for notification types
+ */
+export const alertIcons = {
+    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)' },
+};

package/dist/components/notifications/index.d.ts

@@ -0,0 +1,5 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/notifications/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/notifications/index.js

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export { default as Notice } from './Notice.svelte';

package/dist/components/payload/PayloadForm.svelte

@@ -198,14 +198,14 @@ async function handleSubmit(event: SubmitEvent) {
 .payload-form__label {
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--form-input-text, #111827);
+  color: var(--form-input-colour, #111827);
 }
 .payload-form__label--checkbox {
   font-weight: 400;
   cursor: pointer;
 }
 .payload-form__required {
-  color: var(--form-error-color, #ef4444);
+  color: var(--form-error-colour, #ef4444);
   margin-left: 0.25rem;
 }
 .payload-form__input, .payload-form__textarea {
@@ -213,7 +213,7 @@ async function handleSubmit(event: SubmitEvent) {
   border: var(--form-input-border, 1px solid #d1d5db);
   border-radius: var(--form-input-border-radius, 0.375rem);
   background: var(--form-input-bg, #ffffff);
-  color: var(--form-input-text, #111827);
+  color: var(--form-input-colour, #111827);
   font-size: 1rem;
   font-family: inherit;
 }
@@ -222,7 +222,7 @@ async function handleSubmit(event: SubmitEvent) {
   outline-offset: 2px;
 }
 .payload-form__input--error, .payload-form__textarea--error {
-  border-color: var(--form-error-color, #ef4444);
+  border-color: var(--form-error-colour, #ef4444);
 }
 .payload-form__textarea {
   resize: vertical;
@@ -241,26 +241,26 @@ async function handleSubmit(event: SubmitEvent) {
 }
 .payload-form__error {
   font-size: 0.875rem;
-  color: var(--form-error-color, #ef4444);
+  color: var(--form-error-colour, #ef4444);
 }
 .payload-form__success {
   padding: 1rem;
   background-color: var(--form-success-bg, #d1fae5);
-  color: var(--form-success-color, #10b981);
+  color: var(--form-success-colour, #10b981);
   border-radius: var(--form-input-border-radius, 0.375rem);
   font-weight: 500;
 }
 .payload-form__alert {
   padding: 1rem;
   background-color: var(--form-error-bg, #fee2e2);
-  color: var(--form-error-color, #ef4444);
+  color: var(--form-error-colour, #ef4444);
   border-radius: var(--form-input-border-radius, 0.375rem);
   font-weight: 500;
 }
 .payload-form__submit {
   padding: var(--form-input-padding, 0.75rem) 1.5rem;
   background-color: var(--form-button-bg, #3b82f6);
-  color: var(--form-button-text, #ffffff);
+  color: var(--form-button-colour, #ffffff);
   border: none;
   border-radius: var(--form-input-border-radius, 0.375rem);
   font-size: 1rem;

package/dist/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,
+);

package/dist/scss/_breakpoints.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$breakpoints: (
+	'small': 320,
+	'mobile': 568,
+	'tablet': 768,
+	'desktop': 1024,
+	'wide': 1280,
+	'ultrawide': 1920,
+);

package/dist/scss/_functions.scss

@@ -0,0 +1,6 @@
+@use 'sass:math';
+
+@function px-to-rem($value) {
+	$remValue: math.div($value, 16) + rem;
+	@return $remValue;
+}

package/dist/scss/_index.scss

@@ -0,0 +1,5 @@
+@forward 'breakpoints';
+@forward 'border-radius';
+@forward 'functions';
+@forward 'sizes';
+@forward 'mixins';

package/dist/scss/_mixins.scss

@@ -0,0 +1,155 @@
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:map';
+@use 'breakpoints';
+
+// Media Queries
+// ==========================================================================
+
+@mixin mq($size) {
+	@if map.has-key(breakpoints.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$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.$breakpoints, $size) {
+		$breakpoint: map.get(breakpoints.$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;
+}

package/dist/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,
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainsleydev/sveltekit-helper",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "SvelteKit utilities, components and helpers for ainsley.dev builds",
   "license": "MIT",
   "type": "module",
@@ -44,6 +44,11 @@
       "svelte": "./dist/components/payload/index.js",
       "default": "./dist/components/payload/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",
       "import": "./dist/utils/forms/index.js"
@@ -73,7 +78,8 @@
     }
   },
   "dependencies": {
-    "svelte-hamburgers": "^5.0.0"
+    "svelte-hamburgers": "^5.0.0",
+    "@lucide/svelte": "^0.562.0"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.0.0",