@softwareone/spi-sv5-library 1.11.4 → 1.11.6

package/dist/Accordion/Accordion.svelte

@@ -24,6 +24,7 @@
 	<div class="accordion-content">
 		<section class="header" class:is-open={isOpen}>
 			<button
+				type="button"
 				class="button"
 				onclick={toggleAccordion}
 				aria-label={isOpen ? 'Collapse accordion' : 'Expand accordion'}

package/dist/Controls/AttachFile/AttachFile.svelte

@@ -199,7 +199,7 @@
 
 <style>
 	.container {
-		--color-red: #b30825;
+		--color-red: #dc2626;
 		--color-gray-outer: #434952;
 		--color-gray-auro: #6b7180;
 		--color-gray: #e0e5e8;
@@ -238,9 +238,7 @@
 
 	.text-error {
 		color: var(--color-red);
-		margin: 4px;
 		font-size: 12px;
-		line-height: 16px;
 	}
 
 	.drop-area {

package/dist/DeleteConfirmation/DeleteConfirmation.svelte

@@ -7,7 +7,7 @@
 		showModal?: boolean;
 		ondelete: () => Promise<boolean> | boolean;
 		onclose?: VoidFunction;
-		ondeleteSuccess?: VoidFunction;
+		ondeleteSuccess?: () => Promise<void> | void;
 	}
 
 	let {
@@ -28,15 +28,17 @@
 
 	const handleDelete = async () => {
 		isLoading = true;
+
 		const isSuccessful = await ondelete();
-		isLoading = false;
 
 		if (isSuccessful) {
+			await ondeleteSuccess?.();
 			showModal = false;
-			ondeleteSuccess?.();
 		} else {
 			addToast({ message: 'There was an unexpected error.', type: 'danger' });
 		}
+
+		isLoading = false;
 	};
 </script>
 
@@ -59,7 +61,13 @@
 	</div>
 
 	{#snippet footer()}
-		<Button variant="primary" variantColor="danger" disabled={!enableButton} onclick={handleDelete}>
+		<Button
+			type="button"
+			variant="primary"
+			variantColor="danger"
+			disabled={!enableButton}
+			onclick={handleDelete}
+		>
 			Delete
 		</Button>
 	{/snippet}
@@ -72,7 +80,7 @@
 		gap: 16px;
 		width: 100%;
 	}
-	
+
 	p {
 		margin: 0;
 		user-select: none;

package/dist/DeleteConfirmation/DeleteConfirmation.svelte.d.ts

@@ -4,7 +4,7 @@ interface DeleteConfirmationProps {
     showModal?: boolean;
     ondelete: () => Promise<boolean> | boolean;
     onclose?: VoidFunction;
-    ondeleteSuccess?: VoidFunction;
+    ondeleteSuccess?: () => Promise<void> | void;
 }
 declare const DeleteConfirmation: import("svelte").Component<DeleteConfirmationProps, {}, "showModal">;
 type DeleteConfirmation = ReturnType<typeof DeleteConfirmation>;

package/dist/ErrorPage/ErrorPage.svelte

@@ -39,8 +39,8 @@
 	</p>
 
 	<div class="feedback-footer">
-		<Button variant="outline" onclick={() => window.history.back()}>Back</Button>
-		<Button variant="primary" onclick={() => goto(page.url.origin)}>Go home</Button>
+		<Button type="button" variant="outline" onclick={() => window.history.back()}>Back</Button>
+		<Button type="button" variant="primary" onclick={() => goto(page.url.origin)}>Go home</Button>
 	</div>
 </section>
 

package/dist/Form/Form.svelte

@@ -27,6 +27,7 @@
 		enctype?: FormEncodingType;
 		invalidateAll?: boolean;
 		spinnerFixed?: boolean;
+		contextName?: string;
 		onsuccess: (data?: Record<string, unknown>) => void;
 		onfailure?: (status: number | undefined, error: unknown) => void;
 		children?: Snippet;
@@ -41,6 +42,7 @@
 		enctype = 'application/x-www-form-urlencoded',
 		invalidateAll = true,
 		spinnerFixed = false,
+		contextName,
 		onsuccess,
 		onfailure = undefined,
 		children
@@ -49,8 +51,7 @@
 	let actionResult: ActionResult;
 	let isLoading = $state(false);
 
-	const { form, errors, isFormValid } = getFormContext<Schema>();
-
+	const { form, errors, isFormValid } = getFormContext<Schema>(contextName);
 	$form = structuredClone($state.snapshot(initialData));
 
 	const onUpdated = () => {

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

@@ -9,6 +9,7 @@ declare const Form: import("svelte").Component<{
     enctype?: "application/x-www-form-urlencoded" | "multipart/form-data";
     invalidateAll?: boolean;
     spinnerFixed?: boolean;
+    contextName?: string;
     onsuccess: (data?: Record<string, unknown>) => void;
     onfailure?: (status: number | undefined, error: unknown) => void;
     children?: Snippet;

package/dist/Form/context.d.ts

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

package/dist/Form/context.js

@@ -1,15 +1,23 @@
 import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
-const formContextKey = Symbol('formContext');
-export const setFormContext = () => {
+const symbolCache = new Map();
+const getFormContextKey = (name) => {
+    const DEFAULT_KEY = 'formContext';
+    const key = name ? `${DEFAULT_KEY}-${name}` : DEFAULT_KEY;
+    if (!symbolCache.has(key)) {
+        symbolCache.set(key, Symbol(key));
+    }
+    return symbolCache.get(key);
+};
+export const setFormContext = (name) => {
     const formContext = {
         form: writable({}),
         errors: writable({}),
         isFormValid: writable(false)
     };
-    setContext(formContextKey, formContext);
+    setContext(getFormContextKey(name), formContext);
     return formContext;
 };
-export const getFormContext = () => {
-    return getContext(formContextKey);
+export const getFormContext = (name) => {
+    return getContext(getFormContextKey(name));
 };

package/dist/Menu/Sidebar.svelte

@@ -41,7 +41,7 @@
 						</div>
 					</div>
 					<div class="category-items">
-						<button class="button" onclick={toggleSidebar}>
+						<button type="button" class="button" onclick={toggleSidebar}>
 							<span class="material-icons-outlined icon-span">
 								{isCollapsed ? 'menu' : 'menu_open'}
 							</span>

package/dist/Modal/ModalFooter.svelte

@@ -7,7 +7,7 @@
 
 {#if footer}
 	<footer class="modal-footer">
-		<Button variant="outline-none" onclick={onclose}>Cancel</Button>
+		<Button type="button" variant="outline-none" onclick={onclose}>Cancel</Button>
 		<div class="button-section">
 			{@render footer()}
 		</div>

package/dist/ProgressPage/ProgressPage.svelte

@@ -38,7 +38,7 @@
 	</div>
 
 	{#if onclick}
-		<Button {onclick}>{buttonText}</Button>
+		<Button type="button" {onclick}>{buttonText}</Button>
 	{/if}
 </article>
 

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -114,19 +114,20 @@
 		</article>
 	</section>
 	<section class="progress-wizard-footer">
-		<Button variant="outline-none" onclick={oncancel}>Cancel</Button>
+		<Button type="button" variant="outline-none" onclick={oncancel}>Cancel</Button>
 
 		<div class="actions">
 			{#if !allStepsDisabled}
 				{#if !readonly}
 					<Button
+						type="button"
 						variant="secondary"
 						disabled={currentStep === firstActiveStep}
 						onclick={onclickBack}>Back</Button
 					>
 
 					{#if currentStep < lastActiveStep}
-						<Button variant="primary" onclick={onclickNext}>Next</Button>
+						<Button type="button" variant="primary" onclick={onclickNext}>Next</Button>
 					{/if}
 				{/if}
 

package/dist/Table/AdvancedFilter.svelte

@@ -177,6 +177,7 @@
 			{#if editingFilters.length}
 				<div class="filter-footer">
 					<Button
+						type="button"
 						onclick={applyFilters}
 						disabled={editingFilters.every((filter) => !filter.column || !filter.value.trim())}
 					>

package/dist/Table/Table.svelte

@@ -87,11 +87,23 @@
 	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
 	const hasData = $derived(data.length > 0);
 
+	const tableColumns = $derived.by(() => {
+		if (!enableChecked) return columns;
+
+		const checkedColumnExists = columns.some((column) => column.id === 'checked');
+		if (checkedColumnExists) return columns;
+
+		const checkedColumn = createCheckedColumn<T>();
+		return [checkedColumn, ...columns];
+	});
+
 	const table = createSvelteTable({
 		get data() {
 			return tableData;
 		},
-		columns,
+		get columns() {
+			return tableColumns;
+		},
 		state: {
 			get sorting() {
 				return sorting;
@@ -222,16 +234,6 @@
 			$tableManualPagination = { ...pagination };
 		}
 	});
-
-	$effect.pre(() => {
-		if (enableChecked && columns.length) {
-			const checkedColumnExists = columns.some((column) => column.id === 'checked');
-			if (!checkedColumnExists) {
-				const checkedColumn = createCheckedColumn<T>();
-				columns.unshift(checkedColumn);
-			}
-		}
-	});
 </script>
 
 <section class="table-container">
@@ -266,8 +268,10 @@
 						/>
 					{/if}
 					{#if enableExportExcel}
-						<Button variant="secondary" onclick={() => exportExcel(table, excelSetting)}
-							>Export</Button
+						<Button
+							type="button"
+							variant="secondary"
+							onclick={() => exportExcel(table, excelSetting)}>Export</Button
 						>
 					{/if}
 					{@render header?.()}

package/dist/Waffle/WaffleItems.svelte

@@ -8,7 +8,7 @@
 	let { title, icon, onclickwaffleitems }: Props = $props();
 </script>
 
-<button onclick={onclickwaffleitems} class="waffle-item-button">
+<button type="button" onclick={onclickwaffleitems} class="waffle-item-button">
 	<figure class="waffle-icon-container" aria-hidden="true">
 		{@html icon}
 	</figure>
@@ -39,7 +39,8 @@
 		background: #f4f6f8;
 	}
 
-	.waffle-item-button:focus, .waffle-item-button:focus-visible {
+	.waffle-item-button:focus,
+	.waffle-item-button:focus-visible {
 		background: #eaecff;
 	}
 

package/package.json

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