@softwareone/spi-sv5-library 1.11.3 → 1.11.5

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

@@ -59,7 +59,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 +78,7 @@
 		gap: 16px;
 		width: 100%;
 	}
-	
+
 	p {
 		margin: 0;
 		user-select: none;

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

@@ -12,7 +12,23 @@
 
 {#snippet processingContent()}
 	<div class="processing-header">
-		<span class="material-icons-outlined processing-icon">autorenew</span>
+		<svg
+			class="processing-icon"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="url(#processingGradient)"
+			stroke-width="2"
+		>
+			<defs>
+				<linearGradient id="processingGradient" x1="1.5%" y1="38%" x2="98.5%" y2="62%">
+					<stop offset="0%" stop-color="#472aff" />
+					<stop offset="65.86%" stop-color="#392d9c" />
+					<stop offset="100%" stop-color="#000000" />
+				</linearGradient>
+			</defs>
+			<path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
+		</svg>
 		<div class="processing-content">
 			<h2 class="processing-title">{title}</h2>
 			{#if text}
@@ -61,11 +77,8 @@
 	}
 
 	.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;
+		width: 32px;
+		height: 32px;
 		animation: rotate 2s linear infinite;
 	}
 

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

@@ -34,7 +34,17 @@
 
 <div class="search-container" class:disabled>
 	<div class="search-wrapper">
-		<span class="material-icons-outlined search-icon" aria-hidden="true">search</span>
+		<svg
+			class="search-icon"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 -960 960 960"
+			fill="currentColor"
+			aria-hidden="true"
+		>
+			<path
+				d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
+			/>
+		</svg>
 		<input
 			type="search"
 			class="search-input"
@@ -110,12 +120,13 @@
 		top: 50%;
 		transform: translateY(-50%);
 		color: #6b7180;
-		font-size: 18px;
 	}
 
 	.search-icon {
 		left: 12px;
 		pointer-events: none;
+		width: 18px;
+		height: 18px;
 	}
 
 	.clear-button {
@@ -142,7 +153,6 @@
 	.clear-button span {
 		font-size: 16px;
 	}
-
 	.disabled .search-wrapper {
 		border-color: #d1d5db;
 		background-color: #f3f4f6;

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

@@ -266,8 +266,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.3",
+	"version": "1.11.5",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",