@softwareone/spi-sv5-library 1.2.0 → 1.3.1

package/dist/Card/Card.svelte

@@ -2,31 +2,29 @@
 	import type { Snippet } from 'svelte';
 
 	interface CardProps {
-		type?: 'layout' | 'highlight';
 		children?: Snippet;
+		disablePadding?: boolean;
 	}
 
-	let { type = 'layout', children }: CardProps = $props();
+	let { children, disablePadding = false }: CardProps = $props();
 </script>
 
-<div class="card card-{type}">
+<div class="card" class:padding={!disablePadding}>
 	{@render children?.()}
 </div>
 
 <style>
 	.card {
 		width: 100%;
-		min-height: var(--card-min-height, auto);
 		background: #fff;
 		margin-bottom: 24px;
-		padding: 24px;
 		border-radius: 16px;
 		box-shadow:
 			0px 1px 16px rgba(107, 113, 128, 0.1),
 			0px 1px 3px rgba(107, 113, 128, 0.2);
 	}
 
-	.card-layout {
-		--card-min-height: 100vh;
+	.padding {
+		padding: 24px;
 	}
 </style>

package/dist/Card/Card.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 interface CardProps {
-    type?: 'layout' | 'highlight';
     children?: Snippet;
+    disablePadding?: boolean;
 }
 declare const Card: import("svelte").Component<CardProps, {}, "">;
 type Card = ReturnType<typeof Card>;

package/dist/Form/Input/Input.svelte

@@ -14,6 +14,7 @@
 		description?: string;
 		currency?: string;
 		disableValidationColor?: boolean;
+		infoTooltip?: string;
 	}
 
 	let {
@@ -30,6 +31,7 @@
 		readonly,
 		oninput,
 		disableValidationColor = false,
+		infoTooltip,
 		...props
 	}: InputProps = $props();
 
@@ -51,7 +53,7 @@
 </script>
 
 <div class="form-container">
-	<Label {label} {id} {optional} {required} />
+	<Label {label} {id} {optional} {required} {infoTooltip} />
 	<div
 		class={[
 			'form-input-wrapper',

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

@@ -9,6 +9,7 @@ interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     description?: string;
     currency?: string;
     disableValidationColor?: boolean;
+    infoTooltip?: string;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Form/Label.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { Tooltip } from '../index.js';
+
 	interface LabelProps {
 		label?: string;
 		id?: string | null;
 		required?: boolean | null;
 		optional?: boolean;
+		infoTooltip?: string;
 	}
 
-	let { label, id, required, optional }: LabelProps = $props();
+	let { label, id, required, optional, infoTooltip }: LabelProps = $props();
 </script>
 
 {#if label}
@@ -17,6 +20,13 @@
 		{:else if optional}
 			<span class="form-label-optional">Optional</span>
 		{/if}
+		{#if infoTooltip}
+			<Tooltip content={infoTooltip} width="sm">
+				{#snippet children()}
+					<span class="material-icons-outlined">info</span>
+				{/snippet}
+			</Tooltip>
+		{/if}
 	</div>
 {/if}
 
@@ -34,4 +44,9 @@
 	.form-label-required {
 		color: #dc2626;
 	}
+
+	.material-icons-outlined {
+		font-size: 14px;
+		vertical-align: middle;
+	}
 </style>

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

@@ -3,6 +3,7 @@ interface LabelProps {
     id?: string | null;
     required?: boolean | null;
     optional?: boolean;
+    infoTooltip?: string;
 }
 declare const Label: import("svelte").Component<LabelProps, {}, "">;
 type Label = ReturnType<typeof Label>;

package/dist/Form/Select/Select.svelte

@@ -9,68 +9,86 @@
 		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]>;
+		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
+		customOption,
+		onclear,
+		onchange
 	}: SelectProps = $props();
 
+	let searchText = $state('');
+	let showInTopPosition = $state(false);
+	let showListOptions = $state(false);
+	let selectedOptions = $state<SelectOption[]>([]);
+	let selectedOption = $state<SelectOption | undefined>();
+
 	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;
+	const filterOptions = (): SelectOption[] => {
+		const text = searchText.toLowerCase();
 
-	let searchText = $state('');
-	let showInTopPosition = $state(false);
-	let showListOptions = $state(false);
-	let filteredOptions = $state(originalOptions);
-	let selectedOptions = $state<SelectOption[]>([]);
-	let selectedOption = $state<SelectOption | undefined>();
+		return text
+			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
+			: originalOptions;
+	};
+
+	const checkNoOptionsAvailable = (): boolean => {
+		if (!options.length) return true;
+		return multiple && originalOptions.every((option) => valueSet.has(option.value));
+	};
 
-	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 originalOptions = $derived<SelectOption[]>(
+		isStringArray(options) ? options.map((value) => ({ label: value, value })) : options
 	);
+	const valueSet = $derived<Set<string>>(new Set(value));
+	const isInvalid = $derived<boolean>(!!error && !disableValidationColor);
+	const isValid = $derived<boolean>(!isInvalid && (!!value || optional) && !disableValidationColor);
+	const filteredOptions = $derived<SelectOption[]>(filterOptions());
+	const noOptionsAvailable = $derived<boolean>(checkNoOptionsAvailable());
 
 	const generateSelectOption = (value: string): SelectOption => ({ label: value, value });
+
 	const generateMultiselectValue = (option: SelectOption): string => option.value;
 
 	const canBeVisible = (option: SelectOption): boolean =>
 		!selectedOptions.some((selectedOption) => selectedOption.value === option.value);
 
-	const onCloseAfterSelect = () => {
-		if (closeAfterSelect && showListOptions) {
+	const closeAfterSelect = () => {
+		if (!keepOpen && showListOptions) {
 			showListOptions = false;
 		}
 	};
@@ -83,7 +101,9 @@
 			selectedOption = option;
 			value = option.value;
 		}
-		onCloseAfterSelect();
+
+		closeAfterSelect();
+		onchange?.(option);
 	};
 
 	const onClearAll = () => {
@@ -95,7 +115,7 @@
 			value = '';
 		}
 
-		onCloseAfterSelect();
+		onclear?.();
 	};
 
 	const onRemoveSelectedOption = (index: number) => {
@@ -105,16 +125,8 @@
 		value = selectedOptions.map(generateMultiselectValue);
 	};
 
-	const onInputSearch = () => {
-		const text = searchText.toLowerCase();
-
-		filteredOptions = text
-			? originalOptions.filter((option) => option.label.toLowerCase().includes(text))
-			: originalOptions;
-	};
-
 	const onClearSearch = () => {
-		filteredOptions = originalOptions;
+		searchText = '';
 	};
 
 	const onHandleClickOutside = (event: MouseEvent) => {
@@ -156,11 +168,11 @@
 
 <div class="form-container">
 	{#if label}
-		<Label {label} {required} {optional} />
+		<Label {label} {required} {optional} {infoTooltip} />
 	{/if}
 
 	<div
-		class={['dropdown', readonly ? 'readonly' : [isInvalid && 'invalid', isValid && 'valid']]}
+		class={['dropdown', disabled ? 'disabled' : [isInvalid && 'invalid', isValid && 'valid']]}
 		bind:this={dropdownElement}
 	>
 		<section
@@ -191,24 +203,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}
@@ -288,7 +301,7 @@
 		--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;
@@ -312,7 +325,7 @@
 			box-shadow 0.2s ease-in-out;
 	}
 
-	.dropdown.readonly {
+	.dropdown.disabled {
 		cursor: not-allowed;
 
 		> .dropdown-container {
@@ -321,11 +334,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);
 	}

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

@@ -4,18 +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]>;
+    onclear?: () => void;
+    onchange?: (option: SelectOption) => void;
 }
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/Form/TextArea/TextArea.svelte

@@ -10,6 +10,7 @@
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
+		infoTooltip?: string;
 	}
 
 	let {
@@ -22,6 +23,7 @@
 		maximumCharactersAllowed,
 		resize = false,
 		id,
+		infoTooltip,
 		...props
 	}: TextAreaProps = $props();
 
@@ -38,7 +40,7 @@
 </script>
 
 <div class="form-container">
-	<Label {label} {id} {optional} {required} />
+	<Label {label} {id} {optional} {required} {infoTooltip} />
 
 	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
 		<textarea
@@ -87,7 +89,6 @@
 		line-height: 20px;
 	}
 
-
 	.form-message {
 		font-size: 12px;
 	}

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

@@ -7,6 +7,7 @@ interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;
+    infoTooltip?: string;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -65,6 +65,10 @@
 		line-height: 20px;
 	}
 
+	h2 {
+		font-weight: bold;
+	}
+
 	.text-description {
 		color: #6b7180;
 	}

package/dist/Home/Home.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { HomeItem } from '../index.js';
+
+	interface HomeProps {
+		title: string;
+		homeItems: HomeItem[];
+	}
+
+	let { title, homeItems }: HomeProps = $props();
+
+	const hasSingleItem: boolean = homeItems.length === 1;
+	const hasManyItems: boolean = homeItems.length > 1;
+</script>
+
+<h1 class={['home-title', hasSingleItem && 'centered']}>
+	{title}
+</h1>
+
+<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>
+			<div>
+				<h2>{homeItem.text}</h2>
+				<p>{homeItem.detail}</p>
+			</div>
+		</a>
+	{/each}
+</section>
+
+<style>
+	.home-title {
+		padding-bottom: 16px;
+		font-size: 18px;
+		line-height: 1.55;
+		font-weight: 600;
+	}
+
+	.home-title.centered {
+		display: flex;
+		justify-content: center;
+	}
+
+	.home-container {
+		--black-1: #434952;
+		--black-2: #273444;
+		--white: #fff;
+	}
+
+	.home-container.centered {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.home-container.grid {
+		display: grid;
+		gap: 24px;
+
+		@media (width >= 640px) {
+			grid-template-columns: repeat(1, minmax(0, 1fr));
+		}
+
+		@media (width >= 1024px) {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		@media (width >= 1536px) {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	.home-container > .home-item {
+		display: flex;
+		max-height: 150px;
+		max-width: 770px;
+		gap: 16px;
+		padding: 12px;
+		border-radius: 16px;
+		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%);
+			}
+		}
+
+		> div {
+			color: var(--white);
+
+			> h2 {
+				padding-bottom: 8px;
+				font-size: 16px;
+				line-height: 1.5;
+				font-weight: 600;
+			}
+
+			> p {
+				font-size: 14px;
+				line-height: 1.42;
+			}
+		}
+	}
+
+	.home-container > .home-item:hover {
+		background: var(--black-2);
+	}
+</style>

package/dist/Home/Home.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HomeItem } from '../index.js';
+interface HomeProps {
+    title: string;
+    homeItems: HomeItem[];
+}
+declare const Home: import("svelte").Component<HomeProps, {}, "">;
+type Home = ReturnType<typeof Home>;
+export default Home;

package/dist/Home/homeState.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type MenuItem } from '../index.js';
+export type HomeItem = Omit<MenuItem, 'children'> & {
+    detail?: string;
+};

package/dist/Home/homeState.svelte.js

@@ -0,0 +1 @@
+import {} from '../index.js';

package/dist/Modal/Modal.svelte

@@ -16,70 +16,52 @@
 		footer
 	}: ModalProps = $props();
 
-	let dialog = $state<HTMLDialogElement>();
-
-	$effect(() => {
-		showModal ? dialog?.showModal() : dialog?.close();
-	});
-
 	const onHandleClose = () => {
 		showModal = false;
 		onclose();
 	};
 </script>
 
-<dialog
-	bind:this={dialog}
-	onclose={onHandleClose}
-	class="modal {width}"
-	transition:scale={{
-		duration: 150,
-		start: 0.95
-	}}
->
-	<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
-	<ModalContent content={children} />
-	<ModalFooter {footer} onclose={onHandleClose} />
-</dialog>
+<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>
+</div>
 
 <style>
-	dialog {
-		align-self: center;
+	.modal-container {
+		display: flex;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		width: 100%;
+		height: 100%;
+		background-color: #e0e5e880;
+	}
+
+	.modal {
+		width: var(--modal-width);
+		max-height: 90%;
 		border-radius: 16px;
 		background-color: #ffffff;
-		border: none;
 		margin: auto;
+		overflow-y: auto;
 		box-shadow:
 			0px 1px 10px 0px rgba(51, 56, 64, 0.12),
 			0px 2px 4px -1px rgba(51, 56, 64, 0.2),
 			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
 	}
 
-	dialog:focus-visible {
-		outline: none;
-	}
-
-	dialog::backdrop {
-		background: #e0e5e880;
-	}
-
-	dialog::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	dialog::-webkit-scrollbar-thumb {
-		background: #888;
-		border-radius: 10px;
-	}
-
-	dialog::-webkit-scrollbar-thumb:hover {
-		background: #555;
-	}
-
-	.modal {
-		width: var(--modal-width);
-	}
-
 	.modal.xs {
 		--modal-width: 500px;
 	}
@@ -96,7 +78,20 @@
 		--modal-width: 1000px;
 	}
 
-	:global(html:has(dialog.modal[open])) {
+	.modal::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	.modal::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 10px;
+	}
+
+	.modal::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+
+	:global(html:has(.modal-container)) {
 		overflow: hidden;
 	}
 </style>

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>

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/Tabs/Tabs.svelte

@@ -59,6 +59,7 @@
 		display: flex;
 		gap: 16px;
 		border-bottom: 1px solid #e0e5e8;
+		padding: 0 24px;
 	}
 
 	.tabs-list button {
@@ -68,6 +69,7 @@
 		position: relative;
 		border: none;
 		font-size: 16px;
+		font-weight: 500;
 	}
 
 	.tabs-list button:hover {
@@ -77,6 +79,7 @@
 
 	.tabs-list button.active {
 		color: #472aff;
+		font-weight: 600;
 	}
 
 	.tabs-list button::after {

package/dist/index.d.ts

@@ -19,6 +19,8 @@ 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 Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import type { MenuItem } from './Menu/SidebarState.svelte';
@@ -26,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';
@@ -35,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, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, 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

@@ -18,16 +18,19 @@ 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 Menu from './Menu/Menu.svelte';
 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, 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.2.0",
+	"version": "1.3.1",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",