@softwareone/spi-sv5-library 1.3.2 → 1.5.0

package/dist/Form/FormController/Form.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { ActionResult } from '@sveltejs/kit';
+	import { onDestroy, untrack, type Snippet } from 'svelte';
+
+	import { zod4Client } from 'sveltekit-superforms/adapters';
+	import {
+		superForm,
+		type TaintedFields,
+		type ValidationErrors
+	} from 'sveltekit-superforms/client';
+	import { z } from 'zod';
+
+	import { addToast, Spinner } from '../../index.js';
+	import { getFormContext } from './context.js';
+	import type { FormError } from './types.js';
+	import { isEqual } from './helper.js';
+
+	type Schema = z.infer<typeof schema>;
+
+	interface Props {
+		initialData: Schema;
+		action: string;
+		schema: z.ZodObject;
+		extraData?: Record<string, string | number>;
+		onsuccess: (data?: Record<string, unknown>) => void;
+		onfailure?: (status: number | undefined, error: unknown) => void;
+		children: Snippet;
+	}
+
+	let {
+		initialData,
+		action,
+		schema,
+		extraData,
+		onsuccess,
+		onfailure = undefined,
+		children
+	}: Props = $props();
+
+	let actionResult: ActionResult;
+	let isLoading = $state(false);
+
+	const { form, errors, isFormValid } = getFormContext<Schema>();
+
+	$form = structuredClone($state.snapshot(initialData));
+
+	const onUpdated = () => {
+		isLoading = false;
+
+		const data = actionResult && 'data' in actionResult ? actionResult.data : undefined;
+		const success = actionResult?.type === 'success';
+
+		addToast({ message: data?.message, type: success ? 'success' : 'warning' });
+		if (success) {
+			onsuccess(data);
+		}
+	};
+
+	const onError = ({ result }: { result: ActionResult }) => {
+		if (result.type === 'error') {
+			addToast({ message: 'There was an unexpected error.', type: 'danger' });
+			onfailure?.(result.status, result.error);
+		}
+	};
+
+	const {
+		form: superFormData,
+		enhance,
+		validateForm,
+		errors: superFormErrors,
+		tainted: superFormTained
+	} = superForm(initialData, {
+		applyAction: false,
+		autoFocusOnError: true,
+		dataType: 'json',
+		resetForm: false,
+		scrollToError: 'smooth',
+		validationMethod: 'oninput',
+		validators: zod4Client(schema),
+		warnings: { duplicateId: false },
+		onSubmit: ({ formData }) => {
+			isLoading = true;
+			return appendExtraData(formData);
+		},
+		onResult: ({ result }) => (actionResult = result),
+		onUpdated,
+		onError
+	});
+
+	const getErrors = (
+		errors: ValidationErrors<Record<string, unknown>>,
+		tained: TaintedFields<Record<string, unknown>>
+	) => {
+		const errorEntries = Object.entries(errors)
+			.filter(([field]) => Object.hasOwn(tained, field))
+			.map(([field, error]) => [field, error && '_errors' in error ? error._errors : error]);
+
+		return Object.fromEntries(errorEntries) as FormError<Schema>;
+	};
+
+	const appendExtraData = (formData: FormData) => {
+		if (extraData) {
+			Object.entries(extraData).forEach(([key, value]) => {
+				formData.set(key, String(value));
+			});
+		}
+
+		return formData;
+	};
+
+	$effect(() => {
+		if (
+			!isEqual(
+				$form,
+				untrack(() => $superFormData)
+			)
+		) {
+			$superFormData = structuredClone($form);
+			validateForm().then((result) => ($isFormValid = result.valid));
+		}
+	});
+
+	$effect(() => {
+		if (
+			!isEqual(
+				$superFormErrors,
+				untrack(() => $errors)
+			)
+		) {
+			$errors = getErrors(
+				$superFormErrors,
+				untrack(() => $superFormTained!)
+			);
+		}
+	});
+
+	onDestroy(() => {
+		$form = {};
+		$errors = {};
+		$isFormValid = false;
+	});
+</script>
+
+<Spinner show={isLoading} />
+
+<form
+	class="w-full"
+	id="form"
+	method="POST"
+	action="?/{action}"
+	use:enhance
+	onsubmit={(event) => event.preventDefault()}
+>
+	{@render children()}
+</form>

package/dist/Form/FormController/Form.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from 'svelte';
+import { z } from 'zod';
+declare const Form: import("svelte").Component<{
+    initialData: Record<string, unknown>;
+    action: string;
+    schema: z.ZodObject;
+    extraData?: Record<string, string | number>;
+    onsuccess: (data?: Record<string, unknown>) => void;
+    onfailure?: (status: number | undefined, error: unknown) => void;
+    children: Snippet;
+}, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/Form/FormController/context.d.ts

@@ -0,0 +1,3 @@
+import type { FormContext } from './types.js';
+export declare const setFormContext: <T>() => FormContext<T>;
+export declare const getFormContext: <T>() => FormContext<T>;

package/dist/Form/FormController/context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const formContextKey = Symbol('formContext');
+export const setFormContext = () => {
+    const formContext = {
+        form: writable({}),
+        errors: writable({}),
+        isFormValid: writable(false)
+    };
+    setContext(formContextKey, formContext);
+    return formContext;
+};
+export const getFormContext = () => {
+    return getContext(formContextKey);
+};

package/dist/Form/FormController/helper.d.ts

@@ -0,0 +1,3 @@
+import type z from 'zod';
+export declare const validateSchema: (schema: z.ZodObject, data: z.infer<typeof schema>) => boolean;
+export declare const isEqual: (source: unknown, target: unknown) => boolean;

package/dist/Form/FormController/helper.js

@@ -0,0 +1,24 @@
+export const validateSchema = (schema, data) => {
+    const result = schema.safeParse(data);
+    return result.success;
+};
+export const isEqual = (source, target) => {
+    if (arePrimitivesEqual(source, target))
+        return true;
+    if (Array.isArray(source) && Array.isArray(target))
+        return areArraysEqual(source, target);
+    if (isObject(source) && isObject(target))
+        return areObjectsEqual(source, target);
+    return false;
+};
+const arePrimitivesEqual = (source, target) => source === target;
+const isObject = (object) => object !== null && typeof object === 'object' && !Array.isArray(object);
+const areArraysEqual = (sourceArray, targetArray) => sourceArray.length === targetArray.length &&
+    sourceArray.every((value, index) => isEqual(value, targetArray[index]));
+const areObjectsEqual = (sourceObject, targetObject) => {
+    const keys1 = Object.keys(sourceObject);
+    const keys2 = Object.keys(targetObject);
+    if (keys1.length !== keys2.length)
+        return false;
+    return keys1.every((key) => isEqual(sourceObject[key], targetObject[key]));
+};

package/dist/Form/FormController/types.d.ts

@@ -0,0 +1,7 @@
+import type { Writable } from 'svelte/store';
+export type FormError<T> = Record<keyof T, string[] | undefined>;
+export interface FormContext<T> {
+    form: Writable<T>;
+    errors: Writable<FormError<T>>;
+    isFormValid: Writable<boolean>;
+}

package/dist/Form/FormController/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Form/FormController/zod-validations.d.ts

@@ -0,0 +1,19 @@
+import { type ZodString } from 'zod';
+type Range = {
+    from: number;
+    to: number;
+};
+declare class ZodValidationBuilder {
+    private validator;
+    constructor();
+    range(regex: RegExp, range: Range): this;
+    required(): this;
+    noWhitespace(): this;
+    uuid(): this;
+    min(length: number): this;
+    max(length: number): this;
+    regex(pattern: RegExp, message: string): this;
+    build(): ZodString;
+}
+export declare const createZodString: () => ZodValidationBuilder;
+export {};

package/dist/Form/FormController/zod-validations.js

@@ -0,0 +1,40 @@
+import { z } from 'zod';
+const REGEX_NO_WHITESPACE = /^\S*$/;
+class ZodValidationBuilder {
+    validator;
+    constructor() {
+        this.validator = z.string().trim();
+    }
+    range(regex, range) {
+        this.validator = this.validator.regex(regex, `Must be between ${range.from} and ${range.to}`);
+        return this;
+    }
+    required() {
+        this.validator = this.validator.min(1, 'Required');
+        return this;
+    }
+    noWhitespace() {
+        this.validator = this.validator.regex(REGEX_NO_WHITESPACE, 'Whitespace not allowed');
+        return this;
+    }
+    uuid() {
+        this.validator = this.validator.uuid('Invalid UUID format');
+        return this;
+    }
+    min(length) {
+        this.validator = this.validator.min(length, `Min ${length} characters required`);
+        return this;
+    }
+    max(length) {
+        this.validator = this.validator.max(length, `Max ${length} characters allowed`);
+        return this;
+    }
+    regex(pattern, message) {
+        this.validator = this.validator.regex(pattern, message);
+        return this;
+    }
+    build() {
+        return this.validator;
+    }
+}
+export const createZodString = () => new ZodValidationBuilder();

package/dist/Header/Header.svelte

@@ -9,11 +9,14 @@
 		title?: string;
 		homeUrl?: string;
 		hideAccount?: boolean;
+		hideHelp?: boolean;
+		hideNotification?: boolean;
 		accountName?: string;
 		userName?: string;
 		profileUrl?: string;
 		hideLoader?: boolean;
 		menu?: Snippet<[showMenu: boolean]>;
+		waffle?: Snippet<[showWaffle: boolean]>;
 	}
 
 	let {
@@ -24,25 +27,53 @@
 		userName = '',
 		profileUrl = '/profile',
 		hideLoader,
-		menu
+		menu,
+		waffle
 	}: HeaderProps = $props();
 
+	let showWaffle = $state(false);
 	let showMenu = $state(false);
 
+	const toggleWaffle = () => {
+		showWaffle = !showWaffle;
+		showMenu = false;
+	};
+
 	const toggleMenu = () => {
 		showMenu = !showMenu;
+		showWaffle = false;
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && (showWaffle || showMenu)) {
+			showWaffle = false;
+			showMenu = false;
+		}
 	};
 </script>
 
+<svelte:window onkeydown={handleKeydown} />
+
 <div class="header-container">
 	<nav class="header-section">
 		{#if !hideLoader}
 			<HeaderLoader />
 		{/if}
-
+		{#if waffle}
+			<button
+				type="button"
+				class={[showWaffle && 'active', 'header-button']}
+				onclick={toggleWaffle}
+				aria-label="Waffle Component"
+				aria-expanded={showWaffle}
+			>
+				<span class="material-icons icon-span">apps</span>
+			</button>
+			{@render waffle(showWaffle)}
+		{/if}
 		{#if menu}
 			<button type="button" class="header-button" onclick={toggleMenu} aria-label="menu button">
-				<span class="material-icons icon-span">menu</span>
+				<span class="material-icons icon-span menu-icon">menu</span>
 			</button>
 			{@render menu(showMenu)}
 		{/if}
@@ -69,20 +100,30 @@
 		justify-content: center;
 		align-items: center;
 		border-radius: 50%;
-		background: white;
+		background: transparent;
 		z-index: 40;
 		cursor: pointer;
 		border: none;
 		width: 40px;
 		height: 40px;
+		transition: background-color 0.2s ease-in-out;
 	}
 
 	.header-button:hover {
 		background: #e0e5e8;
 	}
 
+	.header-button.active {
+		background: #fff;
+		color: #374151;
+	}
+
+	.header-button .menu-icon {
+		transform: scale(1.26);
+	}
+
 	.icon-span {
-		font-size: 32px;
+		font-size: 24px;
 		color: #6b7180;
 	}
 
@@ -95,6 +136,8 @@
 		background: #fff;
 		height: 80px;
 		border-bottom: 3px solid #aeb1b9;
+		position: relative;
+		z-index: 50;
 	}
 
 	.header-section {

package/dist/Header/Header.svelte.d.ts

@@ -3,11 +3,14 @@ interface HeaderProps {
     title?: string;
     homeUrl?: string;
     hideAccount?: boolean;
+    hideHelp?: boolean;
+    hideNotification?: boolean;
     accountName?: string;
     userName?: string;
     profileUrl?: string;
     hideLoader?: boolean;
     menu?: Snippet<[showMenu: boolean]>;
+    waffle?: Snippet<[showWaffle: boolean]>;
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/Home/Home.svelte

@@ -19,9 +19,7 @@
 <section class={['home-container', hasSingleItem && 'centered', hasManyItems && 'grid']}>
 	{#each homeItems as homeItem}
 		<a href={homeItem.url} class="home-item">
-			<span>
-				<img src={homeItem.icon} alt={homeItem.text} />
-			</span>
+			<img src={homeItem.icon} alt={homeItem.text} />
 			<div>
 				<h2>{homeItem.text}</h2>
 				<p>{homeItem.detail}</p>
@@ -82,15 +80,11 @@
 		background: var(--black-1);
 		transition: background 0.2s ease-in-out;
 
-		> span {
-			display: flex;
-			align-items: center;
-
-			> img {
-				width: 40px;
-				height: 40px;
-				filter: invert(100%);
-			}
+		> img {
+			width: 36px;
+			height: 36px;
+			margin: auto 0;
+			filter: invert(100%);
 		}
 
 		> div {

package/dist/Link/Link.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAnchorAttributes {
+		name?: string;
+		children?: Snippet;
+	}
+
+	let { name, children, ...props }: Props = $props();
+</script>
+
+<a class="link" {...props}>
+	{#if children}
+		{@render children()}
+	{:else}
+		{name}
+	{/if}
+</a>
+
+<style>
+	.link {
+		color: var(--primary-color, #472aff);
+		text-decoration: none;
+	}
+
+	.link:hover,
+	.link:focus-visible {
+		text-decoration: underline;
+	}
+</style>

package/dist/Link/Link.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends HTMLAnchorAttributes {
+    name?: string;
+    children?: Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Menu/Menu.svelte

@@ -10,16 +10,9 @@
 		showMenu: boolean;
 	}
 
-	let isMainMenu: boolean = $state(true);
-	let activeItem: string = $state('');
-
 	let { menuItems, showMenu }: MenuProps = $props();
 
-	$effect(() => {
-		if (showMenu) {
-			setActiveMenuItem();
-		}
-	});
+	let activeItem = $state('');
 
 	const setActiveMenuItem = () => {
 		activeItem = menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
@@ -43,6 +36,12 @@
 	const onHandleMenu = () => {
 		showMenu = !showMenu;
 	};
+
+	$effect(() => {
+		if (showMenu) {
+			setActiveMenuItem();
+		}
+	});
 </script>
 
 {#if showMenu}
@@ -60,7 +59,6 @@
 					item={menuItem}
 					isCollapsed={false}
 					activeItem={activeItem === menuItem.text}
-					{isMainMenu}
 					onClick={onClickMenuItem}
 				/>
 			{/each}

package/dist/Menu/MenuItem.svelte

@@ -7,10 +7,9 @@
 		isCollapsed: boolean;
 		onClick?: (item: MenuItem) => void;
 		activeItem: boolean;
-		isMainMenu?: boolean;
 	}
 
-	let { item, isCollapsed = false, onClick, activeItem, isMainMenu }: MenuItemProps = $props();
+	let { item, isCollapsed = false, onClick, activeItem }: MenuItemProps = $props();
 </script>
 
 <li>
@@ -20,8 +19,7 @@
 			class={[
 				'item',
 				isCollapsed ? 'collapsed' : 'expanded',
-				activeItem && `active-${isCollapsed ? 'collapsed' : 'expanded'}`,
-				isMainMenu && 'main-menu'
+				activeItem && `active-${isCollapsed ? 'collapsed' : 'expanded'}`
 			]}
 			onclick={() => onClick?.(item)}
 		>
@@ -108,16 +106,6 @@
 		color: #472aff;
 	}
 
-	.main-menu.expanded:hover:not(.active-expanded),
-	.main-menu.collapsed:hover:not(.active-collapsed) {
-		background-color: #eaecff;
-	}
-
-	.main-menu:hover .item-name-span,
-	.main-menu:hover .icon-span {
-		color: #472aff;
-	}
-
 	.item.collapsed:focus,
 	.item.collapsed:focus-visible {
 		outline: none;

package/dist/Menu/MenuItem.svelte.d.ts

@@ -4,7 +4,6 @@ interface MenuItemProps {
     isCollapsed: boolean;
     onClick?: (item: MenuItem) => void;
     activeItem: boolean;
-    isMainMenu?: boolean;
 }
 declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "">;
 type MenuItem = ReturnType<typeof MenuItem>;

package/dist/Modal/Modal.svelte

@@ -11,6 +11,7 @@
 		title,
 		width = 'xs',
 		errorIcon,
+		hideHeader,
 		onclose = () => {},
 		children,
 		footer,
@@ -33,7 +34,7 @@
 				start: 0.95
 			}}
 		>
-			<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
+			<ModalHeader {title} {errorIcon} {hideHeader} onclose={onHandleClose} />
 			<ModalContent content={children} {disablePadding} />
 			<ModalFooter {footer} onclose={onHandleClose} />
 		</div>

package/dist/Modal/ModalContent.svelte

@@ -21,7 +21,6 @@
 		gap: 24px;
 		align-self: stretch;
 		background: #fff;
-		border-top: 1px solid #aeb1b9;
 	}
 
 	.padding {

package/dist/Modal/ModalHeader.svelte

@@ -4,20 +4,23 @@
 	let {
 		title = '',
 		errorIcon = false,
+		hideHeader = false,
 		onclose
 	}: ModalHeaderProps & { onclose: VoidFunction } = $props();
 </script>
 
-<header class="modal-header">
-	<div class="modal-header-title">
-		{#if errorIcon}
-			<span class="icon error material-icons-outlined">report</span>
-		{/if}
-		<h2>{title}</h2>
-	</div>
-	<button type="button" class="close-button material-icons-outlined" onclick={onclose}>close</button
-	>
-</header>
+{#if !hideHeader}
+	<header class="modal-header">
+		<div class="modal-header-title">
+			{#if errorIcon}
+				<span class="icon error material-icons-outlined">report</span>
+			{/if}
+			<h2>{title}</h2>
+		</div>
+		<button type="button" class="close-button material-icons-outlined" onclick={onclose}>close</button
+		>
+	</header>
+{/if}
 
 <style>
 	.modal-header,
@@ -29,6 +32,7 @@
 	.modal-header {
 		padding: 24px;
 		align-self: stretch;
+		border-bottom: 1px solid #aeb1b9;
 	}
 
 	.modal-header-title > .icon {

package/dist/Modal/modalState.svelte.d.ts

@@ -9,6 +9,7 @@ export interface ModalProps extends ModalHeaderProps, ModalFooterProps {
 export interface ModalHeaderProps {
     title?: string;
     errorIcon?: boolean;
+    hideHeader?: boolean;
 }
 export interface ModalFooterProps {
     footer?: Snippet;

package/dist/Processing/Processing.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Modal from '../Modal/Modal.svelte';
+	import type { ProcessingProps } from './processingState.svelte.js';
+
+	let {
+		title = 'Processing your request',
+		text = '',
+		show = $bindable(true),
+		asModal = false
+	}: ProcessingProps = $props();
+</script>
+
+{#snippet processingContent()}
+	<div class="processing-header">
+		<span class="material-icons-outlined processing-icon">autorenew</span>
+		<div class="processing-content">
+			<h2 class="processing-title">{title}</h2>
+			{#if text}
+				<p class="processing-text">{text}</p>
+			{/if}
+		</div>
+	</div>
+{/snippet}
+
+{#if show}
+	{#if asModal}
+		<Modal bind:showModal={show} width="xs" hideHeader>
+			<div class="modal-processing-content">
+				{@render processingContent()}
+			</div>
+		</Modal>
+	{:else}
+		{@render processingContent()}
+	{/if}
+{/if}
+
+<style>
+	.processing-header {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 24px;
+	}
+
+	.processing-content {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.processing-title {
+		font-size: 18px;
+		font-weight: 700;
+	}
+
+	.processing-text {
+		font-size: 16px;
+		white-space: pre-line;
+		line-height: 1.5;
+	}
+
+	.processing-icon {
+		background: linear-gradient(256deg, #00c9cd -2.41%, #472aff 31.72%, #392d9c 65.86%, #000 100%);
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		font-size: 32px;
+		animation: rotate 2s linear infinite;
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.modal-processing-content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: 200px;
+		width: 100%;
+	}
+</style>

package/dist/Processing/Processing.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ProcessingProps } from './processingState.svelte.js';
+declare const Processing: import("svelte").Component<ProcessingProps, {}, "show">;
+type Processing = ReturnType<typeof Processing>;
+export default Processing;

package/dist/Processing/processingState.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface ProcessingProps {
+    title?: string;
+    text?: string;
+    show?: boolean;
+    asModal?: boolean;
+}

package/dist/Processing/processingState.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/Switcher/Switcher.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { type SwitcherOption } from '../index.js';
+
+	interface SwitcherProps {
+		options: string[] | SwitcherOption[];
+		value?: string | null;
+	}
+
+	let { options, value = $bindable() }: SwitcherProps = $props();
+
+	const isStringArray = (items: string[] | SwitcherOption[]): items is string[] =>
+		typeof items[0] === 'string';
+
+	const originalOptions = $derived<SwitcherOption[]>(
+		isStringArray(options) ? options.map((option) => ({ label: option, value: option })) : options
+	);
+</script>
+
+<div class="switcher-container">
+	{#each originalOptions as option}
+		<button
+			type="button"
+			class={['switcher-option', option.value === value && 'active']}
+			onclick={() => (value = option.value)}
+		>
+			{option.label}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.switcher-container {
+		--primary-color: #472aff;
+		--white: #fff;
+		--info-1: #eaecff;
+		--gray-1: #f4f6f8;
+		--gray-3: #aeb1b9;
+		--gray-4: #6b7180;
+
+		display: flex;
+		flex-wrap: wrap;
+		width: fit-content;
+		padding: 4px;
+		gap: 12px;
+		border: 1px solid var(--gray-3);
+		border-radius: 8px;
+	}
+
+	.switcher-container > .switcher-option {
+		cursor: pointer;
+		border: none;
+		padding: 4px 20px;
+		font-size: 14px;
+		color: var(--gray-4);
+		font-weight: 500;
+		border-radius: 8px;
+		background: none;
+	}
+
+	.switcher-container > .switcher-option:hover {
+		background: var(--gray-1);
+	}
+
+	.switcher-container > .switcher-option:focus-visible {
+		box-shadow: 0px 0px 0px 3px #959bff;
+		outline: none;
+	}
+
+	.switcher-container > .switcher-option.active {
+		color: var(--white);
+		background: var(--primary-color);
+		transition: background 0.2s ease-in-out;
+	}
+
+	.switcher-container > .switcher-option.active:hover {
+		background: #3520bf;
+	}
+</style>

package/dist/Switcher/Switcher.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type SwitcherOption } from '../index.js';
+interface SwitcherProps {
+    options: string[] | SwitcherOption[];
+    value?: string | null;
+}
+declare const Switcher: import("svelte").Component<SwitcherProps, {}, "value">;
+type Switcher = ReturnType<typeof Switcher>;
+export default Switcher;

package/dist/Switcher/switcherState.svelte.d.ts

@@ -0,0 +1,4 @@
+export interface SwitcherOption {
+    value: string;
+    label: string;
+}

package/dist/Switcher/switcherState.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/Waffle/Waffle.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import type { WaffleItem } from './waffleState.svelte.js';
+	import WaffleItems from './WaffleItems.svelte';
+
+	interface Props {
+		items?: WaffleItem[];
+		showWaffle?: boolean;
+	}
+
+	let { items = [], showWaffle = false }: Props = $props();
+
+	const handleTileClick = (item: WaffleItem) => {
+		onHandleWaffle();
+		window.open(item.url, '_blank', 'noopener,noreferrer');
+	};
+
+	const onHandleWaffle = () => {
+		showWaffle = !showWaffle;
+	};
+</script>
+
+{#if showWaffle}
+	<div
+		class="waffle-backdrop"
+		onclick={onHandleWaffle}
+		onkeydown={onHandleWaffle}
+		transition:fade={{ duration: 200 }}
+		role="button"
+		tabindex="0"
+		aria-label="Close waffle menu"
+	></div>
+
+	<div
+		class="waffle-dropdown"
+		transition:fade={{ duration: 250 }}
+		role="dialog"
+		aria-labelledby="waffle-title"
+		aria-modal="true"
+	>
+		<h2 class="waffle-title">SoftwareOne Cloud</h2>
+
+		<div class="waffle-content">
+			<ul class="waffle-grid" role="list">
+				{#each items as item (item.title)}
+					<li role="listitem">
+						<WaffleItems {...item} onclickwaffleitems={() => handleTileClick(item)} />
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.waffle-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(243, 244, 246, 0.5);
+		cursor: pointer;
+		z-index: 30;
+	}
+
+	.waffle-dropdown {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		border-radius: 8px;
+		background: #fff;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		top: 80px;
+		left: 0;
+		z-index: 40;
+		width: 600px;
+	}
+
+	.waffle-content {
+		padding: 20px 24px 24px 24px;
+	}
+
+	.waffle-title {
+		padding: 24px 24px 0 24px;
+		font-size: 14px;
+		font-weight: 600;
+		text-align: center;
+	}
+
+	.waffle-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 16px;
+	}
+</style>

package/dist/Waffle/Waffle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WaffleItem } from './waffleState.svelte.js';
+interface Props {
+    items?: WaffleItem[];
+    showWaffle?: boolean;
+}
+declare const Waffle: import("svelte").Component<Props, {}, "">;
+type Waffle = ReturnType<typeof Waffle>;
+export default Waffle;

package/dist/Waffle/WaffleItems.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	interface Props {
+		title: string;
+		icon: string;
+		isNew?: boolean;
+		onclickwaffleitems: VoidFunction;
+	}
+
+	let { title, icon, isNew = false, onclickwaffleitems }: Props = $props();
+</script>
+
+<button onclick={onclickwaffleitems} class="waffle-item-button">
+	{#if isNew}
+		<span class="waffle-new-badge" aria-label="New application">New</span>
+	{/if}
+
+	<figure class="waffle-icon-container" aria-hidden="true">
+		{@html icon}
+	</figure>
+
+	<h3 class="waffle-title">
+		{title}
+	</h3>
+</button>
+
+<style>
+	.waffle-item-button {
+		position: relative;
+		width: 150px;
+		height: 110px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border-radius: 8px;
+		text-align: center;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.waffle-item-button:hover {
+		background: #f4f6f8;
+	}
+
+	.waffle-item-button:focus, .waffle-item-button:focus-visible {
+		background: #eaecff;
+	}
+
+	.waffle-new-badge {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: #e6f9f2;
+		color: #29764d;
+		font-size: 14px;
+		font-weight: 500;
+		padding: 2px 6px;
+		border-radius: 4px;
+	}
+
+	.waffle-icon-container {
+		width: 40px;
+		height: 40px;
+		margin-bottom: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.waffle-title {
+		color: #000;
+		font-weight: 500;
+		font-size: inherit;
+		word-break: break-words;
+		line-height: 1.25;
+		text-align: center;
+		padding: 0 4px;
+		margin: 0;
+	}
+</style>

package/dist/Waffle/WaffleItems.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    title: string;
+    icon: string;
+    isNew?: boolean;
+    onclickwaffleitems: VoidFunction;
+}
+declare const WaffleItems: import("svelte").Component<Props, {}, "">;
+type WaffleItems = ReturnType<typeof WaffleItems>;
+export default WaffleItems;

package/dist/Waffle/waffleState.svelte.d.ts

@@ -0,0 +1,6 @@
+export interface WaffleItem {
+    title: string;
+    url: string;
+    icon: string;
+    isNew?: boolean;
+}

package/dist/Waffle/waffleState.svelte.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -1,41 +1,56 @@
 import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
-import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
 import Chips from './Chips/Chips.svelte';
-import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
-import Input from './Form/Input/Input.svelte';
-import Select from './Form/Select/Select.svelte';
-import type { SelectOption } from './Form/Select/selectState.svelte.js';
-import TextArea from './Form/TextArea/TextArea.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
+import Form from './Form/FormController/Form.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
 import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
-import { ColumnType, ImageType, type HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
 import Home from './Home/Home.svelte';
-import type { HomeItem } from './Home/homeState.svelte.js';
+import Input from './Form/Input/Input.svelte';
+import Link from './Link/Link.svelte';
 import Menu from './Menu/Menu.svelte';
-import Sidebar from './Menu/Sidebar.svelte';
-import type { MenuItem } from './Menu/SidebarState.svelte';
 import Modal from './Modal/Modal.svelte';
-import type { ModalProps } from './Modal/modalState.svelte.js';
 import Notification from './Notification/Notification.svelte';
+import Processing from './Processing/Processing.svelte';
 import ProgressPage from './ProgressPage/ProgressPage.svelte';
-import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
-import { setStepValidity, type ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
+import Select from './Form/Select/Select.svelte';
+import Sidebar from './Menu/Sidebar.svelte';
 import Spinner from './Spinner/Spinner.svelte';
+import Switcher from './Switcher/Switcher.svelte';
 import Tabs from './Tabs/Tabs.svelte';
-import type { Tab } from './Tabs/tabsState.svelte.js';
+import TextArea from './Form/TextArea/TextArea.svelte';
 import Toaster from './Toast/Toast.svelte';
-import { addToast, type Toast } from './Toast/toastState.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, getProgressWizardContext, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, setStepValidity, setProgressWizardStepsContext, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };
+import Waffle from './Waffle/Waffle.svelte';
+import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
+import { ChipType } from './Chips/chipsState.svelte.js';
+import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
+import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
+import { setStepValidity } from './ProgressWizard/progressWizardState.svelte.js';
+import { addToast } from './Toast/toastState.svelte';
+import { setFormContext, getFormContext } from './Form/FormController/context.js';
+import { validateSchema } from './Form/FormController/helper.js';
+import { createZodString } from './Form/FormController/zod-validations.js';
+import type { BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
+import type { FormError, FormContext } from './Form/FormController/types.js';
+import type { HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
+import type { HomeItem } from './Home/homeState.svelte.js';
+import type { MenuItem } from './Menu/SidebarState.svelte';
+import type { ModalProps } from './Modal/modalState.svelte.js';
+import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import type { SwitcherOption } from './Switcher/switcherState.svelte.js';
+import type { SelectOption } from './Form/Select/selectState.svelte.js';
+import type { Tab } from './Tabs/tabsState.svelte.js';
+import type { Toast } from './Toast/toastState.svelte';
+import type { WaffleItem } from './Waffle/waffleState.svelte.js';
+export { Accordion, Avatar, Breadcrumbs, Button, Card, Chips, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type FormError, type FormContext };

package/dist/index.js

@@ -1,36 +1,52 @@
+// Components
 import Accordion from './Accordion/Accordion.svelte';
 import Avatar from './Avatar/Avatar.svelte';
 import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
-import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import Button from './Button/Button.svelte';
 import Card from './Card/Card.svelte';
 import Chips from './Chips/Chips.svelte';
-import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
-import Input from './Form/Input/Input.svelte';
-import Select from './Form/Select/Select.svelte';
-import TextArea from './Form/TextArea/TextArea.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
+import Form from './Form/FormController/Form.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
 import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
-import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
 import Home from './Home/Home.svelte';
+import Input from './Form/Input/Input.svelte';
+import Link from './Link/Link.svelte';
 import Menu from './Menu/Menu.svelte';
-import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
 import Notification from './Notification/Notification.svelte';
+import Processing from './Processing/Processing.svelte';
 import ProgressPage from './ProgressPage/ProgressPage.svelte';
-import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
-import { setStepValidity } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
+import Select from './Form/Select/Select.svelte';
+import Sidebar from './Menu/Sidebar.svelte';
 import Spinner from './Spinner/Spinner.svelte';
+import Switcher from './Switcher/Switcher.svelte';
 import Tabs from './Tabs/Tabs.svelte';
+import TextArea from './Form/TextArea/TextArea.svelte';
 import Toaster from './Toast/Toast.svelte';
-import { addToast } from './Toast/toastState.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, getProgressWizardContext, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, setStepValidity, setProgressWizardStepsContext, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };
+import Waffle from './Waffle/Waffle.svelte';
+// State, enums, and helpers
+import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
+import { ChipType } from './Chips/chipsState.svelte.js';
+import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
+import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
+import { setStepValidity } from './ProgressWizard/progressWizardState.svelte.js';
+import { addToast } from './Toast/toastState.svelte';
+import { setFormContext, getFormContext } from './Form/FormController/context.js';
+import { validateSchema } from './Form/FormController/helper.js';
+import { createZodString } from './Form/FormController/zod-validations.js';
+export { 
+// Components
+Accordion, Avatar, Breadcrumbs, Button, Card, Chips, ErrorPage, Footer, Form, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, 
+// Functions and helpers
+addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, setFormContext, getFormContext, validateSchema, createZodString, 
+// Enums
+ChipType, ColumnType, ImageType };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.3.2",
+	"version": "1.5.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -41,24 +41,35 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"sveltekit-superforms": "^2.0.0",
+		"zod": "^4.0.0"
+	},
+	"peerDependenciesMeta": {
+		"sveltekit-superforms": {
+			"optional": true
+		},
+		"zod": {
+			"optional": true
+		}
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0",
-		"zod": "^3.25.76"
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-node": "^5.4.0",
+		"@sveltejs/kit": "^2.48.4",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.3.15",
+		"svelte": "^5.43.5",
+		"svelte-check": "^4.3.3",
+		"typescript": "^5.9.3",
+		"vite": "^6.3.0",
+		"zod": "^4.1.12",
+		"sveltekit-superforms": "^2.28.1"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.16.0"
+		"@sveltejs/kit": "^2.48.4"
 	}
 }