@softwareone/spi-sv5-library 1.3.0 → 1.3.2

package/dist/Form/Label.svelte

@@ -22,9 +22,7 @@
 		{/if}
 		{#if infoTooltip}
 			<Tooltip content={infoTooltip} width="sm">
-				{#snippet children()}
-					<span class="material-icons-outlined">info</span>
-				{/snippet}
+				<span class="material-icons-outlined">info</span>
 			</Tooltip>
 		{/if}
 	</div>

package/dist/Form/Select/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, type Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import type { Action } from 'svelte/action';
 
 	import { Search, type SelectOption } from '../../index.js';
@@ -9,133 +9,110 @@
 		options: string[] | SelectOption[];
 		label?: string;
 		placeholder?: string;
+		infoTooltip?: string;
 		required?: boolean;
 		optional?: boolean;
 		searchable?: boolean;
-		clearable?: boolean;
+		hideClearButton?: boolean;
 		multiple?: boolean;
-		closeAfterSelect?: boolean;
-		readonly?: boolean;
+		keepOpen?: boolean;
+		disabled?: boolean;
 		disableValidationColor?: boolean;
 		value?: string | string[] | null;
 		error?: string | string[];
 		customSelection?: Snippet<[option: SelectOption]>;
 		customOption?: Snippet<[option: SelectOption]>;
-		infoTooltip?: string;
+		onclear?: () => void;
+		onchange?: (option: SelectOption) => void;
 	}
 
 	let {
 		options,
 		label,
-		placeholder,
+		placeholder = 'Please select',
+		infoTooltip,
 		required = false,
 		optional = false,
 		searchable = false,
-		clearable = false,
+		hideClearButton = false,
 		multiple = false,
-		closeAfterSelect = false,
-		readonly = false,
+		keepOpen = false,
+		disabled = false,
 		disableValidationColor = false,
 		value = $bindable(),
 		error,
 		customSelection,
 		customOption,
-		infoTooltip
+		onclear,
+		onchange
 	}: SelectProps = $props();
 
-	let dropdownElement: HTMLElement;
-
-	const isStringArray = (items: string[] | SelectOption[]): items is string[] =>
-		typeof items[0] === 'string';
-
-	const originalOptions: SelectOption[] = isStringArray(options)
-		? options.map((value) => ({ label: value, value }))
-		: options;
-
 	let searchText = $state('');
 	let showInTopPosition = $state(false);
 	let showListOptions = $state(false);
-	let filteredOptions = $state(originalOptions);
-	let selectedOptions = $state<SelectOption[]>([]);
-	let selectedOption = $state<SelectOption | undefined>();
-
-	const isInvalid: boolean = $derived(!!error && !disableValidationColor);
-	const isValid: boolean = $derived(!isInvalid && (!!value || optional) && !disableValidationColor);
-	const noOptionsAvailable: boolean = $derived(
-		options.length === 0 || (multiple && selectedOptions?.length === options.length)
-	);
 
-	const generateSelectOption = (value: string): SelectOption => ({ label: value, value });
-	const generateMultiselectValue = (option: SelectOption): string => option.value;
+	let dropdown: HTMLElement;
+	let dropdownContainer: HTMLElement;
 
-	const canBeVisible = (option: SelectOption): boolean =>
-		!selectedOptions.some((selectedOption) => selectedOption.value === option.value);
+	const isStringArray = (items: string[] | SelectOption[]): items is string[] =>
+		typeof items[0] === 'string';
 
-	const onCloseAfterSelect = () => {
-		if (closeAfterSelect && showListOptions) {
-			showListOptions = false;
-		}
-	};
+	const generateSelectOption = (text: string, options: SelectOption[]): SelectOption =>
+		options.find((option) => option.value === text) ?? {
+			label: text,
+			value: text
+		};
 
-	const onSelectOption = (option: SelectOption) => {
-		if (multiple) {
-			selectedOptions = [...selectedOptions, option];
-			value = selectedOptions.map(generateMultiselectValue);
-		} else {
-			selectedOption = option;
-			value = option.value;
-		}
-		onCloseAfterSelect();
-	};
+	const valueSet = $derived<Set<string>>(new Set(Array.isArray(value) ? value : []));
 
-	const onClearAll = () => {
-		if (multiple) {
-			selectedOptions = [];
-			value = [];
-		} else {
-			selectedOption = undefined;
-			value = '';
-		}
+	const isInvalid = $derived<boolean>(!!error && !disableValidationColor);
 
-		onCloseAfterSelect();
-	};
+	const isValid = $derived<boolean>(
+		!isInvalid &&
+			!disableValidationColor &&
+			(Array.isArray(value) ? value.length > 0 : !!value || optional)
+	);
 
-	const onRemoveSelectedOption = (index: number) => {
-		const newSelectedOptions = [...selectedOptions];
-		newSelectedOptions.splice(index, 1);
-		selectedOptions = newSelectedOptions;
-		value = selectedOptions.map(generateMultiselectValue);
-	};
+	const originalOptions = $derived<SelectOption[]>(
+		isStringArray(options) ? options.map((option) => ({ label: option, value: option })) : options
+	);
 
-	const onInputSearch = () => {
-		const text = searchText.toLowerCase();
+	const selectedOptions = $derived<SelectOption[]>(
+		multiple && Array.isArray(value) && value.length
+			? value.map((text) => generateSelectOption(text, originalOptions))
+			: []
+	);
 
-		filteredOptions = text
-			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
-			: originalOptions;
-	};
+	const selectedOption = $derived<SelectOption | undefined>(
+		!multiple && typeof value === 'string' && value
+			? generateSelectOption(value, originalOptions)
+			: undefined
+	);
 
-	const onClearSearch = () => {
-		filteredOptions = originalOptions;
-	};
+	const noOptionsAvailable = $derived<boolean>(
+		!options.length
+			? true
+			: multiple && originalOptions.every((option) => valueSet.has(option.value))
+	);
 
-	const onHandleClickOutside = (event: MouseEvent) => {
-		if (showListOptions && dropdownElement && !dropdownElement.contains(event.target as Node)) {
-			showListOptions = false;
-		}
-	};
+	const filteredOptions = $derived.by<SelectOption[]>(() => {
+		const text = searchText.toLowerCase();
+		return !text
+			? originalOptions
+			: originalOptions.filter((option) => option.label.toLowerCase().includes(text));
+	});
 
 	const activeOptionScroll: Action<HTMLElement, boolean> = (node, isActive) => {
 		$effect(() => {
 			if (isActive) {
-				node.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+				node.scrollIntoView({ behavior: 'instant', block: 'nearest' });
 			}
 		});
 	};
 
 	const autoDirection: Action = () => {
 		$effect(() => {
-			const rect = dropdownElement.getBoundingClientRect();
+			const rect = dropdown.getBoundingClientRect();
 			const viewportHeight = window.innerHeight;
 			const footer = 300;
 
@@ -143,34 +120,71 @@
 		});
 	};
 
-	onMount(() => {
-		if (!value) return;
+	const canBeVisible = (option: SelectOption): boolean =>
+		!selectedOptions.some((selectedOption) => selectedOption.value === option.value);
 
-		if (multiple && Array.isArray(value)) {
-			selectedOptions = value.map(generateSelectOption);
-		} else if (!multiple && typeof value === 'string') {
-			selectedOption = generateSelectOption(value);
+	const closeAfterSelect = () => {
+		if (!keepOpen && showListOptions) {
+			showListOptions = false;
 		}
-	});
+	};
+
+	const onSelectOption = (option: SelectOption) => {
+		value = multiple ? [...(value ?? []), option.value] : option.value;
+		closeAfterSelect();
+		onchange?.(option);
+	};
+
+	const onRemoveSelectedOption = (index: number) => {
+		const newSelectedOptions = [...selectedOptions];
+		newSelectedOptions.splice(index, 1);
+		value = newSelectedOptions.map((option) => option.value);
+	};
+
+	const onClearAll = () => {
+		value = multiple ? [] : '';
+		onclear?.();
+	};
+
+	const onClearSearch = () => (searchText = '');
+
+	const onFocusDropdownContainer = () => dropdownContainer && dropdownContainer.focus();
+
+	const onToggleListOptions = () => (showListOptions = !showListOptions);
+
+	const onHandleClickOutside = (event: MouseEvent) => {
+		if (showListOptions && dropdown && !dropdown.contains(event.target as Node)) {
+			showListOptions = false;
+		}
+	};
 </script>
 
-<svelte:window on:click={onHandleClickOutside} />
+<svelte:window onclick={onHandleClickOutside} />
 
-<div class="form-container">
+<div class="form-control">
 	{#if label}
-		<Label {label} {required} {optional} {infoTooltip} />
+		<div
+			role="button"
+			aria-disabled="true"
+			class="label-wrapper"
+			onclick={onFocusDropdownContainer}
+			onkeypress={onFocusDropdownContainer}
+		>
+			<Label {label} {required} {optional} {infoTooltip} />
+		</div>
 	{/if}
 
 	<div
-		class={['dropdown', readonly ? 'readonly' : [isInvalid && 'invalid', isValid && 'valid']]}
-		bind:this={dropdownElement}
+		class={['dropdown', disabled ? 'disabled' : [isInvalid && 'invalid', isValid && 'valid']]}
+		bind:this={dropdown}
 	>
 		<section
-			class="dropdown-container"
 			role="button"
 			tabindex="0"
-			onclick={() => (showListOptions = !showListOptions)}
-			onkeypress={() => {}}
+			class="dropdown-container"
+			onclick={onToggleListOptions}
+			onkeypress={onToggleListOptions}
+			bind:this={dropdownContainer}
 		>
 			<div class="dropdown-container-selected-options">
 				{#if selectedOption || selectedOptions.length}
@@ -193,24 +207,25 @@
 				{/if}
 			</div>
 
-			{#if clearable && (selectedOption || selectedOptions.length)}
+			{#if !hideClearButton && (selectedOption || selectedOptions.length)}
 				{@render removeButton(onClearAll)}
 			{/if}
 		</section>
 
 		{#if showListOptions}
 			<section class="dropdown-list" class:upwards={showInTopPosition} use:autoDirection>
-				{#if noOptionsAvailable}
+				{#if searchable && !noOptionsAvailable}
+					<Search
+						placeholder="Search"
+						bind:value={searchText}
+						onclear={onClearSearch}
+						autocomplete="off"
+					/>
+				{/if}
+
+				{#if noOptionsAvailable || !filteredOptions.length}
 					<p class="dropdown-list-no-options-message">No options</p>
 				{:else}
-					{#if searchable}
-						<Search
-							placeholder="Search"
-							bind:value={searchText}
-							oninput={onInputSearch}
-							onclear={onClearSearch}
-						/>
-					{/if}
 					<ul class="dropdown-list-options-container">
 						{#each filteredOptions as filteredOption}
 							{@const isVisible = multiple ? canBeVisible(filteredOption) : true}
@@ -279,7 +294,7 @@
 {/snippet}
 
 <style>
-	.form-container {
+	.form-control {
 		--primary-color: #472aff;
 		--white: #fff;
 		--black: #000;
@@ -290,18 +305,24 @@
 		--gray-2: #e0e5e8;
 		--gray-3: #aeb1b9;
 		--gray-4: #6b7180;
-		--border: 1px solid var(--gray-3);
+		--border: 1px solid var(--gray-4);
 
 		display: flex;
 		flex-direction: column;
 		width: 100%;
 		gap: 8px;
 		font-size: 14px;
-	}
 
-	.form-container > .form-message-error {
-		font-size: 12px;
-		color: var(--error);
+		> .label-wrapper {
+			width: fit-content;
+			word-break: break-word;
+			cursor: default;
+		}
+
+		> .form-message-error {
+			font-size: 12px;
+			color: var(--error);
+		}
 	}
 
 	.dropdown {
@@ -314,7 +335,7 @@
 			box-shadow 0.2s ease-in-out;
 	}
 
-	.dropdown.readonly {
+	.dropdown.disabled {
 		cursor: not-allowed;
 
 		> .dropdown-container {
@@ -323,11 +344,11 @@
 		}
 	}
 
-	.dropdown:not(.readonly, .invalid, .valid):hover {
+	.dropdown:not(.disabled, .invalid, .valid):hover {
 		border: 1px solid var(--primary-color);
 	}
 
-	.dropdown:not(.readonly, .invalid, .valid):focus-within {
+	.dropdown:not(.disabled, .invalid, .valid):focus-within {
 		border: 1px solid var(--primary-color);
 		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
 	}
@@ -341,7 +362,7 @@
 	}
 
 	.dropdown.invalid {
-		border-color: var(--error);
+		border: 1px solid var(--error);
 	}
 
 	.dropdown.invalid:focus-within {
@@ -351,11 +372,12 @@
 	.dropdown > .dropdown-container {
 		display: grid;
 		grid-template-columns: 1fr auto;
-		min-height: 42px;
-		padding: 8px;
+		min-height: 36px;
+		padding: 8px 16px;
 		gap: 8px;
 		align-items: center;
 		cursor: pointer;
+		outline: none;
 		border: none;
 		border-radius: 8px;
 		background: var(--white);
@@ -375,13 +397,13 @@
 		}
 
 		> .dropdown-container-selected-option {
-			display: grid;
-			grid-template-columns: auto auto;
-			padding: 8px;
-			gap: 8px;
+			display: flex;
+			padding: 0px 5px;
+			gap: 4px;
 			align-items: center;
 			cursor: default;
-			border-radius: 8px;
+			border-radius: 4px;
+			border: 1px solid var(--gray-2);
 			background: var(--gray-1);
 		}
 	}
@@ -431,11 +453,13 @@
 				min-height: 40px;
 				padding: 0px 8px;
 				cursor: pointer;
+				outline: none;
 				border: none;
 				background: transparent;
 			}
 		}
 
+		.dropdown-list-option:not(.active) > button:focus-visible,
 		.dropdown-list-option:not(.active) > button:hover {
 			background: var(--gray-1);
 		}
@@ -446,12 +470,14 @@
 	}
 
 	.clear-button {
+		outline: none;
 		border: none;
 		color: var(--gray-4);
 		background: transparent;
 		transition: color 0.2s ease-in-out;
 	}
 
+	.clear-button:focus-visible,
 	.clear-button:hover {
 		cursor: pointer;
 		color: var(--black);

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

@@ -4,19 +4,21 @@ interface SelectProps {
     options: string[] | SelectOption[];
     label?: string;
     placeholder?: string;
+    infoTooltip?: string;
     required?: boolean;
     optional?: boolean;
     searchable?: boolean;
-    clearable?: boolean;
+    hideClearButton?: boolean;
     multiple?: boolean;
-    closeAfterSelect?: boolean;
-    readonly?: boolean;
+    keepOpen?: boolean;
+    disabled?: boolean;
     disableValidationColor?: boolean;
     value?: string | string[] | null;
     error?: string | string[];
     customSelection?: Snippet<[option: SelectOption]>;
     customOption?: Snippet<[option: SelectOption]>;
-    infoTooltip?: string;
+    onclear?: () => void;
+    onchange?: (option: SelectOption) => void;
 }
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/Form/Toggle/Toggle.svelte

@@ -1,36 +1,71 @@
 <script lang="ts">
+	import Label from '../Label.svelte';
+
 	interface ToggleProps {
 		id?: string;
 		checked?: boolean;
 		disabled?: boolean;
+		label?: string;
+		infoTooltip?: string;
+		vertical?: boolean;
 		onchange?: (event: Event) => void;
 	}
 
-	let { id = '', checked = $bindable(false), disabled = false, onchange }: ToggleProps = $props();
+	let {
+		id = '',
+		checked = $bindable(false),
+		disabled = false,
+		label,
+		infoTooltip,
+		vertical,
+		onchange
+	}: ToggleProps = $props();
 </script>
 
-<label class="toggle-container">
-	<input
-		type="checkbox"
-		class="toggle-input"
-		bind:checked
-		{disabled}
-		{id}
-		{onchange}
-		role="switch"
-	/>
-	<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
-		<span class="material-icons-outlined toggle-icon">
-			{#if checked}
-				done
-			{:else}
-				close
-			{/if}
-		</span>
-	</div>
-</label>
+<div class="container" class:vertical>
+	<label class="toggle-container">
+		<input
+			type="checkbox"
+			class="toggle-input"
+			bind:checked
+			{disabled}
+			{id}
+			{onchange}
+			role="switch"
+		/>
+		<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
+			<span class="material-icons-outlined toggle-icon">
+				{#if checked}
+					done
+				{:else}
+					close
+				{/if}
+			</span>
+		</div>
+	</label>
+	<Label {label} {infoTooltip} />
+</div>
 
 <style>
+	.container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.container.vertical {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.container.vertical .toggle-container {
+		order: 2;
+	}
+
+	.container.vertical label {
+		order: 1;
+	}
 	.toggle-container {
 		position: relative;
 	}

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

@@ -2,6 +2,9 @@ interface ToggleProps {
     id?: string;
     checked?: boolean;
     disabled?: boolean;
+    label?: string;
+    infoTooltip?: string;
+    vertical?: boolean;
     onchange?: (event: Event) => void;
 }
 declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;

package/dist/Header/Header.svelte

@@ -9,27 +9,29 @@
 		title?: string;
 		homeUrl?: string;
 		hideAccount?: boolean;
-		hideHelp?: boolean;
-		hideNotification?: boolean;
 		accountName?: string;
 		userName?: string;
 		profileUrl?: string;
 		hideLoader?: boolean;
-		menu?: Snippet;
+		menu?: Snippet<[showMenu: boolean]>;
 	}
 
 	let {
-		title = 'Default Title',
+		title = '',
 		homeUrl = '/',
 		hideAccount,
-		hideHelp,
-		hideNotification,
-		accountName = 'Company Name',
-		userName = 'User Name',
+		accountName = '',
+		userName = '',
 		profileUrl = '/profile',
 		hideLoader,
 		menu
 	}: HeaderProps = $props();
+
+	let showMenu = $state(false);
+
+	const toggleMenu = () => {
+		showMenu = !showMenu;
+	};
 </script>
 
 <div class="header-container">
@@ -37,7 +39,13 @@
 		{#if !hideLoader}
 			<HeaderLoader />
 		{/if}
-		{@render menu?.()}
+
+		{#if menu}
+			<button type="button" class="header-button" onclick={toggleMenu} aria-label="menu button">
+				<span class="material-icons icon-span">menu</span>
+			</button>
+			{@render menu(showMenu)}
+		{/if}
 		<a href={homeUrl} title="Home">
 			<HeaderLogo />
 		</a>
@@ -47,16 +55,6 @@
 	</nav>
 
 	<nav class="header-section">
-		{#if !hideHelp}
-			<button class="header-btn material-icons-outlined" aria-labelledby="help-button">
-				help_outline
-			</button>
-		{/if}
-		{#if !hideNotification}
-			<button class="header-btn material-icons-outlined" aria-labelledby="notifications-button">
-				notifications
-			</button>
-		{/if}
 		{#if !hideAccount}
 			<a href={profileUrl} title="Profile">
 				<HeaderAccount {accountName} {userName} />
@@ -66,6 +64,28 @@
 </div>
 
 <style>
+	.header-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-radius: 50%;
+		background: white;
+		z-index: 40;
+		cursor: pointer;
+		border: none;
+		width: 40px;
+		height: 40px;
+	}
+
+	.header-button:hover {
+		background: #e0e5e8;
+	}
+
+	.icon-span {
+		font-size: 32px;
+		color: #6b7180;
+	}
+
 	.header-container {
 		display: flex;
 		gap: 24px;
@@ -88,10 +108,4 @@
 		font-size: 24px;
 		font-weight: 600;
 	}
-
-	.header-btn {
-		border: none;
-		background: transparent;
-		color: #6b7180;
-	}
 </style>

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

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

package/dist/Menu/Menu.svelte

@@ -6,15 +6,14 @@
 	import type { MenuItem } from './SidebarState.svelte';
 
 	interface MenuProps {
-		disableMenuButton?: boolean;
 		menuItems: MenuItem[];
+		showMenu: boolean;
 	}
 
-	let showMenu: boolean = $state(false);
 	let isMainMenu: boolean = $state(true);
 	let activeItem: string = $state('');
 
-	const { disableMenuButton = false, menuItems }: MenuProps = $props();
+	let { menuItems, showMenu }: MenuProps = $props();
 
 	$effect(() => {
 		if (showMenu) {
@@ -46,17 +45,6 @@
 	};
 </script>
 
-<button
-	type="button"
-	class="menu-button"
-	class:disabled-menu={disableMenuButton}
-	onclick={onHandleMenu}
-	disabled={disableMenuButton}
-	aria-label="menu button"
->
-	<span class="material-icons icon-span">menu</span>
-</button>
-
 {#if showMenu}
 	<button
 		class="menu-principal"
@@ -81,28 +69,6 @@
 {/if}
 
 <style>
-	.menu-button {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		border-radius: 50%;
-		background: white;
-		z-index: 40;
-		cursor: pointer;
-		border: none;
-		width: 40px;
-		height: 40px;
-	}
-
-	.menu-button:hover {
-		background: #e0e5e8;
-	}
-
-	.icon-span {
-		font-size: 32px;
-		color: #6b7180;
-	}
-
 	.menu-principal {
 		position: fixed;
 		inset: 0;
@@ -138,11 +104,6 @@
 		overflow-x: hidden;
 	}
 
-	.disabled-menu {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
 	@media (min-width: 768px) {
 		.menu-list {
 			min-width: 220px;

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

@@ -1,7 +1,7 @@
 import type { MenuItem } from './SidebarState.svelte';
 interface MenuProps {
-    disableMenuButton?: boolean;
     menuItems: MenuItem[];
+    showMenu: boolean;
 }
 declare const Menu: import("svelte").Component<MenuProps, {}, "">;
 type Menu = ReturnType<typeof Menu>;

package/dist/Modal/Modal.svelte

@@ -13,7 +13,8 @@
 		errorIcon,
 		onclose = () => {},
 		children,
-		footer
+		footer,
+		disablePadding
 	}: ModalProps = $props();
 
 	const onHandleClose = () => {
@@ -22,34 +23,37 @@
 	};
 </script>
 
-<div class="modal-container">
-	<div
-		onclose={onHandleClose}
-		class="modal {width}"
-		transition:scale={{
-			duration: 150,
-			start: 0.95
-		}}
-	>
-		<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
-		<ModalContent content={children} />
-		<ModalFooter {footer} onclose={onHandleClose} />
+<div class="modal-backdrop">
+	<div class="modal-container {width}">
+		<div
+			onclose={onHandleClose}
+			class="modal"
+			transition:scale={{
+				duration: 150,
+				start: 0.95
+			}}
+		>
+			<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
+			<ModalContent content={children} {disablePadding} />
+			<ModalFooter {footer} onclose={onHandleClose} />
+		</div>
 	</div>
 </div>
 
 <style>
-	.modal-container {
+	.modal-backdrop {
 		display: flex;
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: 1000;
+		justify-content: center;
 		width: 100%;
 		height: 100%;
 		background-color: #e0e5e880;
 	}
 
-	.modal {
+	.modal-container {
 		width: var(--modal-width);
 		max-height: 90%;
 		border-radius: 16px;
@@ -62,36 +66,40 @@
 			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
 	}
 
-	.modal.xs {
+	.modal {
+		position: relative;
+	}
+
+	.modal-container.xs {
 		--modal-width: 500px;
 	}
 
-	.modal.md {
+	.modal-container.md {
 		--modal-width: 600px;
 	}
 
-	.modal.lg {
+	.modal-container.lg {
 		--modal-width: 800px;
 	}
 
-	.modal.xl {
+	.modal-container.xl {
 		--modal-width: 1000px;
 	}
 
-	.modal::-webkit-scrollbar {
+	.modal-container::-webkit-scrollbar {
 		width: 10px;
 	}
 
-	.modal::-webkit-scrollbar-thumb {
+	.modal-container::-webkit-scrollbar-thumb {
 		background: #888;
 		border-radius: 10px;
 	}
 
-	.modal::-webkit-scrollbar-thumb:hover {
+	.modal-container::-webkit-scrollbar-thumb:hover {
 		background: #555;
 	}
 
-	:global(html:has(.modal-container)) {
+	:global(html:has(.modal-backdrop)) {
 		overflow: hidden;
 	}
 </style>

package/dist/Modal/ModalContent.svelte

@@ -3,19 +3,19 @@
 
 	interface ModalContentProps {
 		content?: Snippet;
+		disablePadding?: boolean;
 	}
 
-	let { content }: ModalContentProps = $props();
+	let { content, disablePadding = false }: ModalContentProps = $props();
 </script>
 
-<div class="modal-content">
+<div class="modal-content" class:padding={!disablePadding}>
 	{@render content?.()}
 </div>
 
 <style>
 	.modal-content {
 		display: flex;
-		padding: 24px;
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 24px;
@@ -23,4 +23,8 @@
 		background: #fff;
 		border-top: 1px solid #aeb1b9;
 	}
+
+	.padding {
+		padding: 24px;
+	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 interface ModalContentProps {
     content?: Snippet;
+    disablePadding?: boolean;
 }
 declare const ModalContent: import("svelte").Component<ModalContentProps, {}, "">;
 type ModalContent = ReturnType<typeof ModalContent>;

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

@@ -4,6 +4,7 @@ export interface ModalProps extends ModalHeaderProps, ModalFooterProps {
     width?: WidthModal;
     children?: Snippet;
     onclose?: VoidFunction;
+    disablePadding?: boolean;
 }
 export interface ModalHeaderProps {
     title?: string;

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -7,9 +7,8 @@
 		steps: ProgressWizardStep[];
 		readonly?: boolean;
 		currentStep: number;
-		lastActiveStep: number;
 		content: Snippet;
-		additionalButtons: Snippet;
+		additionalButtons: Snippet<[lastActiveStep: number]>;
 		oncancel: VoidFunction;
 	}
 
@@ -17,7 +16,6 @@
 		steps,
 		readonly = false,
 		currentStep = $bindable(0),
-		lastActiveStep = $bindable(0),
 		content,
 		additionalButtons,
 		oncancel
@@ -25,6 +23,7 @@
 
 	const allStepsDisabled: boolean = steps.every((step) => step.disabled);
 	const firstActiveStep: number = steps.findIndex((step) => !step.disabled) + 1;
+	const lastActiveStep: number = steps.findLastIndex((step) => !step.disabled) + 1;
 
 	const onclickNext = () => {
 		const nextStepIndex = steps.slice(currentStep).findIndex((step) => !step.disabled);
@@ -47,7 +46,6 @@
 	};
 
 	currentStep = stepToStart();
-	lastActiveStep = steps.findLastIndex((step) => !step.disabled) + 1;
 
 	$effect(() => {
 		if (!readonly) {
@@ -132,7 +130,7 @@
 					{/if}
 				{/if}
 
-				{@render additionalButtons()}
+				{@render additionalButtons(lastActiveStep)}
 			{/if}
 		</div>
 	</section>
@@ -154,7 +152,6 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		height: 100vh;
 	}
 
 	.progress-wizard-container {

package/dist/ProgressWizard/ProgressWizard.svelte.d.ts

@@ -4,11 +4,10 @@ interface ProgressWizardProps {
     steps: ProgressWizardStep[];
     readonly?: boolean;
     currentStep: number;
-    lastActiveStep: number;
     content: Snippet;
-    additionalButtons: Snippet;
+    additionalButtons: Snippet<[lastActiveStep: number]>;
     oncancel: VoidFunction;
 }
-declare const ProgressWizard: import("svelte").Component<ProgressWizardProps, {}, "currentStep" | "lastActiveStep">;
+declare const ProgressWizard: import("svelte").Component<ProgressWizardProps, {}, "currentStep">;
 type ProgressWizard = ReturnType<typeof ProgressWizard>;
 export default ProgressWizard;

package/dist/ProgressWizard/context.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+import type { ProgressWizardStep } from './progressWizardState.svelte.js';
+export declare const setProgressWizardStepsContext: (steps: ProgressWizardStep[]) => Writable<ProgressWizardStep[]>;
+export declare const getProgressWizardContext: () => Writable<ProgressWizardStep[]>;

package/dist/ProgressWizard/context.js

@@ -0,0 +1,11 @@
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+const stepsKey = Symbol('steps');
+export const setProgressWizardStepsContext = (steps) => {
+    const stepsContext = writable(steps);
+    setContext(stepsKey, stepsContext);
+    return stepsContext;
+};
+export const getProgressWizardContext = () => {
+    return getContext(stepsKey);
+};

package/dist/ProgressWizard/progressWizardState.svelte.d.ts

@@ -4,3 +4,4 @@ export type ProgressWizardStep = {
     isValid: boolean;
     disabled: boolean;
 };
+export declare const setStepValidity: (steps: ProgressWizardStep[], title: string, isValid: boolean) => void;

package/dist/ProgressWizard/progressWizardState.svelte.js

@@ -1 +1,6 @@
-export {};
+export const setStepValidity = (steps, title, isValid) => {
+    const index = steps.findIndex((step) => step.title === title);
+    if (index !== -1) {
+        steps[index].isValid = isValid;
+    }
+};

package/dist/Spinner/Spinner.svelte

@@ -41,6 +41,7 @@
 		top: 0;
 		left: 0;
 		background-color: rgba(255, 255, 255, 0.8);
+		z-index: 99;
 	}
 
 	.spinner {

package/dist/index.d.ts

@@ -28,8 +28,9 @@ import Modal from './Modal/Modal.svelte';
 import type { ModalProps } from './Modal/modalState.svelte.js';
 import Notification from './Notification/Notification.svelte';
 import ProgressPage from './ProgressPage/ProgressPage.svelte';
+import { setProgressWizardStepsContext, getProgressWizardContext } from './ProgressWizard/context.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
-import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import { setStepValidity, type ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
 import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
@@ -37,4 +38,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, 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 };
+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 };

package/dist/index.js

@@ -24,11 +24,13 @@ import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
 import Notification from './Notification/Notification.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 Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",