@softwareone/spi-sv5-library 1.12.3 → 1.12.4

package/README.md

@@ -65,16 +65,16 @@ import {
 - ErrorPage
 - Footer
 - Form
-  - Input
-  - TextArea
-  - Toggle
+    - Input
+    - TextArea
+    - Toggle
 - Header (including a loader)
-  - HeaderAccount
-  - HeaderLoader
-  - HeaderLogo
+    - HeaderAccount
+    - HeaderLoader
+    - HeaderLogo
 - HighlightPanel
 - Menu
-  - Sidebar
+    - Sidebar
 - Modal
 - ProgressWizard
 - Spinner
@@ -85,18 +85,18 @@ import {
 # List of types per component
 
 - Breadcrumbs
-  - BreadcrumbsNameMap
+    - BreadcrumbsNameMap
 - Chips
-  - ChipType
+    - ChipType
 - HighlightPanel
-  - ColumnType
-  - HighlightPanelColumn
-  - ImageType
+    - ColumnType
+    - HighlightPanelColumn
+    - ImageType
 - Menu
-  - MenuItem
+    - MenuItem
 - Modal
-  - ModalProps
+    - ModalProps
 - ProgressWizard
-  - ProgressWizardStep
+    - ProgressWizardStep
 - Tab
 - Toast

package/dist/Announcement/Announcement.svelte

@@ -38,14 +38,15 @@
 
 			{#if announcementItems.length}
 				<div class="announcements-list">
-					{#each announcementItems as announcement}
+					{#each announcementItems as announcement, index (index)}
 						<article class={['announcement-item', !announcement.isRead && 'unread']}>
 							<div class="item-header">
 								<div class="icon-container">
 									{#if !announcement.isRead}
 										<div class="unread-indicator"></div>
 									{/if}
-									<span class="material-icons-outlined announcement-icon">notifications_active</span
+									<span class="material-icons-outlined announcement-icon"
+										>notifications_active</span
 									>
 								</div>
 								<div class="item-info">
@@ -60,7 +61,8 @@
 				</div>
 			{:else}
 				<div class="empty-state">
-					<span class="material-icons-outlined empty-icon icon-gradient">hide_source</span>
+					<span class="material-icons-outlined empty-icon icon-gradient">hide_source</span
+					>
 					<div class="empty-content">
 						<p class="empty-title">No announcements yet</p>
 						<p class="empty-description">Check back later for updates</p>

package/dist/Breadcrumbs/Breadcrumbs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import { getBreadcrumbsNameMap, formatString } from './breadcrumbsState.svelte';
+
+	import { formatString, getBreadcrumbsNameMap } from './breadcrumbsState.svelte';
 
 	// Mapping for human-readable names
 	const map = getBreadcrumbsNameMap();
@@ -18,7 +19,7 @@
 <nav aria-label="Breadcrumb">
 	<ul class="breadcrumb">
 		<li><a href="/">Home</a></li>
-		{#each getBreadcrumbs() as { name, path }, i}
+		{#each getBreadcrumbs() as { name, path }, i (i)}
 			<li>
 				{#if i === getBreadcrumbs().length - 1}
 					<span class="breadcrumbActive">{name}</span>

package/dist/Breadcrumbs/breadcrumbsState.svelte.js

@@ -1,5 +1,5 @@
 const breadcrumbsState = $state({
-    names: {},
+    names: {}
 });
 export function getBreadcrumbsNameMap() {
     return breadcrumbsState;
@@ -8,13 +8,13 @@ export function addBreadcrumbsNameMap(breadcrumbs) {
     breadcrumbsState.names = breadcrumbs;
 }
 export function formatString(input) {
-    return input
+    return (input
         // Replace hyphens and underscores with spaces
         .replace(/[-_]/g, ' ')
         // Insert spaces before uppercase letters (preserving the first letter)
         .replace(/([a-z])([A-Z])/g, '$1 $2')
         // Capitalize each word
-        .replace(/\b\w/g, char => char.toUpperCase());
+        .replace(/\b\w/g, (char) => char.toUpperCase()));
 }
 // const nameMap: Record<string, string> = {
 //     "dashboard": "Dashboard",

package/dist/Controls/AttachFile/AttachFile.svelte

@@ -153,7 +153,7 @@
 	<Notification type="info">
 		{#snippet content()}
 			<ul class="message">
-				{#each reviewMessages as message}
+				{#each reviewMessages as message, index (index)}
 					<li>{message}</li>
 				{/each}
 			</ul>

package/dist/Controls/AttachFile/FileManager.svelte

@@ -7,7 +7,9 @@
 
 	let { files, fileSizeLimitMB, updateFiles }: Props = $props();
 
-	let totalSize = $derived(files ? Array.from(files).reduce((sum, file) => sum + file.size, 0) : 0);
+	let totalSize = $derived(
+		files ? Array.from(files).reduce((sum, file) => sum + file.size, 0) : 0
+	);
 	const MB_IN_BYTES = 1048576;
 
 	const removeFile = (index: number) => {
@@ -26,7 +28,7 @@
 
 	<ul class="container">
 		{#if files?.length}
-			{#each Array.from(files) as file, index}
+			{#each Array.from(files) as file, index (index)}
 				<li class="list-detail">
 					<span class="material-icons-outlined">description</span>
 

package/dist/Controls/AttachFile/Warnings.svelte

@@ -13,7 +13,7 @@
 
 	<section class="detail-section">
 		<ul class="list-inside">
-			{#each validationMessages as message}
+			{#each validationMessages as message, index (index)}
 				<li class="item">
 					{message}
 				</li>

package/dist/Controls/Input/Input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
@@ -28,7 +28,6 @@
 		id,
 		disabled,
 		readonly,
-		oninput,
 		disableValidationColor = false,
 		infoTooltip,
 		...props
@@ -89,7 +88,10 @@
 				]}
 			>
 				{#if !disableValidationColor && hasStatus}
-					<InputIcon type={isInvalid ? 'error' : 'success'} isDateInput={showDatePicker} />
+					<InputIcon
+						type={isInvalid ? 'error' : 'success'}
+						isDateInput={showDatePicker}
+					/>
 				{/if}
 
 				{#if type === 'password'}
@@ -310,7 +312,9 @@
 	}
 
 	.form-input-wrapper.error,
-	.form-input-wrapper.error:hover:not(:has(.form-input:disabled)):not(:has(.form-input:read-only)),
+	.form-input-wrapper.error:hover:not(:has(.form-input:disabled)):not(
+			:has(.form-input:read-only)
+		),
 	.form-input-wrapper.error:focus-within {
 		border-color: #dc2626;
 	}

package/dist/Controls/Input/InputIcon.svelte

@@ -30,8 +30,8 @@
 	{:else}
 		<span
 			class="material-icons-outlined form-input-icon form-input-icon--{type}"
-			class:form-input-icon--date-status={isDateInput && (type === 'error' || type === 'success')}
-			>{icons[type]}</span
+			class:form-input-icon--date-status={isDateInput &&
+				(type === 'error' || type === 'success')}>{icons[type]}</span
 		>
 	{/if}
 </div>

package/dist/Controls/Select/Select.svelte

@@ -4,8 +4,8 @@
 	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
+	import type { LabelProps } from '../Label/labelState.svelte.js';
 
 	interface SelectProps extends LabelProps {
 		options: string[] | SelectOption[];
@@ -75,7 +75,9 @@
 	);
 
 	const originalOptions = $derived<SelectOption[]>(
-		isStringArray(options) ? options.map((option) => ({ label: option, value: option })) : options
+		isStringArray(options)
+			? options.map((option) => ({ label: option, value: option }))
+			: options
 	);
 
 	const selectedOptions = $derived<SelectOption[]>(
@@ -128,7 +130,11 @@
 			}
 		};
 
-		const setDropdownStyles = (element: HTMLElement, rect: DOMRect, showInTopPosition: boolean) => {
+		const setDropdownStyles = (
+			element: HTMLElement,
+			rect: DOMRect,
+			showInTopPosition: boolean
+		) => {
 			element.style.setProperty('--dropdown-width', `${rect.width}px`);
 			element.style.setProperty('--dropdown-left', `${rect.left}px`);
 
@@ -234,7 +240,7 @@
 			<div class="dropdown-container-selected-options">
 				{#if selectedOption || selectedOptions.length}
 					{#if multiple}
-						{#each selectedOptions as selectedOption, index}
+						{#each selectedOptions as selectedOption, index (index)}
 							{@render selectedOptionTemplate(selectedOption, index)}
 						{/each}
 					{:else if customSelection}
@@ -279,9 +285,10 @@
 					<p class="dropdown-list-no-options-message">No options</p>
 				{:else}
 					<ul class="dropdown-list-options-container">
-						{#each filteredOptions as filteredOption}
+						{#each filteredOptions as filteredOption, index (index)}
 							{@const isVisible = multiple ? canBeVisible(filteredOption) : true}
-							{@const isActive = !multiple && filteredOption.value === selectedOption?.value}
+							{@const isActive =
+								!multiple && filteredOption.value === selectedOption?.value}
 
 							{#if isVisible}
 								<li

package/dist/Controls/TextArea/TextArea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
-	
+
 	import type { LabelProps } from '../Label/labelState.svelte.js';
 	import Label from '../Label/Label.svelte';
 
@@ -207,7 +207,6 @@
 		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
 	}
 
-
 	.form-textarea-wrapper.success,
 	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(
 			:has(.form-textarea:read-only)

package/dist/ErrorPage/ErrorPage.svelte

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

package/dist/Footer/Footer.svelte

@@ -17,7 +17,9 @@
 	</a>
 	<ul class="links">
 		<li>
-			<a href="mailto:servicedesk@softwareone.com" title="servicedesk@softwareone.com">Support</a>
+			<a href="mailto:servicedesk@softwareone.com" title="servicedesk@softwareone.com"
+				>Support</a
+			>
 		</li>
 		<li>
 			<a

package/dist/Header/Header.svelte

@@ -13,6 +13,7 @@
 		homeUrl?: string;
 		hideAccount?: boolean;
 		accountName?: string;
+		accountDescription?: string;
 		userName?: string;
 		hideLoader?: boolean;
 		hideAnnouncement?: boolean;
@@ -28,6 +29,7 @@
 		homeUrl = '/',
 		hideAccount,
 		accountName = '',
+		accountDescription,
 		userName = '',
 		hideLoader,
 		hideAnnouncement,
@@ -135,7 +137,7 @@
 		{/if}
 		{#if !hideAccount}
 			<nav class="header-section">
-				<HeaderAccount {accountName} {userName} {profileMenuItems} />
+				<HeaderAccount {accountName} {accountDescription} {userName} {profileMenuItems} />
 			</nav>
 		{/if}
 	</div>

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

@@ -5,6 +5,7 @@ interface HeaderProps {
     homeUrl?: string;
     hideAccount?: boolean;
     accountName?: string;
+    accountDescription?: string;
     userName?: string;
     hideLoader?: boolean;
     hideAnnouncement?: boolean;

package/dist/Header/HeaderAccount.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
 	import { goto } from '$app/navigation';
 	import { Avatar, type MenuItem } from '../index.js';
+	import { fade } from 'svelte/transition';
 
 	interface Props {
-		accountName: string;
 		userName: string;
+		accountName?: string;
+		accountDescription?: string;
 		profileMenuItems?: MenuItem[];
 	}
 
-	let { accountName, userName, profileMenuItems }: Props = $props();
+	let { userName, accountName, accountDescription, profileMenuItems }: Props = $props();
 
 	let showProfileItems = $state(false);
 
@@ -35,7 +36,7 @@
 	<Avatar text={userName} />
 	<div class="account-info">
 		<p class="account-name">{accountName}</p>
-		<p class="account-more-name">Operations | {userName}</p>
+		<p class="account-more-name">{accountDescription}</p>
 	</div>
 {/snippet}
 
@@ -66,7 +67,7 @@
 			aria-label="Close profile menu"
 		></div>
 		<menu class="account-dropdown" transition:fade={{ delay: 50, duration: 250 }}>
-			{#each profileMenuItems as item}
+			{#each profileMenuItems as item, index (index)}
 				<li>
 					<button
 						class="account-menu-item"

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

@@ -1,7 +1,8 @@
 import { type MenuItem } from '../index.js';
 interface Props {
-    accountName: string;
     userName: string;
+    accountName?: string;
+    accountDescription?: string;
     profileMenuItems?: MenuItem[];
 }
 declare const HeaderAccount: import("svelte").Component<Props, {}, "">;

package/dist/Header/HeaderLoader.svelte

@@ -2,7 +2,6 @@
 	import { navigating } from '$app/state';
 	import { expoOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
-
 </script>
 
 {#if navigating.to}
@@ -16,8 +15,7 @@
 	<div
 		class="navigation-loader"
 		in:slide={{ delay: 100, duration: 12000, axis: 'x', easing: expoOut }}
-	>
-</div>
+	></div>
 {/if}
 
 <style>
@@ -28,6 +26,6 @@
 		left: 0px;
 		height: 3px;
 		z-index: 9999;
-		background: linear-gradient(90deg, #392D9C, #472AFF, #00c9cd);
+		background: linear-gradient(90deg, #392d9c, #472aff, #00c9cd);
 	}
 </style>

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -14,7 +14,7 @@
 
 <div class="highlight-panel">
 	<section class="panel-section-{distributionType}">
-		{#each columns as column}
+		{#each columns as column, index (index)}
 			<div class="panel-element">
 				{#if column.type === ColumnType.Text}
 					<h2>{column.label}</h2>

package/dist/Home/Home.svelte

@@ -14,7 +14,7 @@
 </h1>
 
 <section class="home-container grid">
-	{#each homeItems as homeItem}
+	{#each homeItems as homeItem, index (index)}
 		<a href={homeItem.url} class="home-item">
 			<img src={homeItem.homeIcon} alt={homeItem.text} />
 			<div>

package/dist/Menu/Menu.svelte

@@ -15,7 +15,8 @@
 	let activeItem = $state('');
 
 	const setActiveMenuItem = () => {
-		activeItem = menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
+		activeItem =
+			menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
 	};
 
 	const isActiveMenuItem = (url: string) => {
@@ -53,7 +54,7 @@
 
 	<nav class="menu-nav" transition:fade={{ duration: 250 }}>
 		<menu class="menu-list">
-			{#each menuItems as menuItem}
+			{#each menuItems as menuItem, index (index)}
 				<MainMenuItem
 					item={menuItem}
 					isCollapsed={false}

package/dist/Menu/MenuItem.svelte

@@ -23,7 +23,6 @@
 			]}
 			onclick={() => onClick?.(item)}
 		>
-			
 			<span class="material-icons-outlined icon-span">{item.icon}</span>
 			<h2 class="item-name-span" class:hidden={isCollapsed}>{item.text}</h2>
 		</a>

package/dist/Menu/Sidebar.svelte

@@ -18,7 +18,8 @@
 			.flatMap((item) => item.menuItems)
 			.find(
 				(menuItem) =>
-					page.url.pathname === menuItem.url || page.url.pathname.startsWith(menuItem.url + '/')
+					page.url.pathname === menuItem.url ||
+					page.url.pathname.startsWith(menuItem.url + '/')
 			)
 	);
 
@@ -51,12 +52,14 @@
 			</header>
 
 			<section class="content">
-				{#each subMenuItems as subMenuItem}
+				{#each subMenuItems as subMenuItem, index (index)}
 					<section class="category-content">
-						<h2 class="category-span" class:hidden={isCollapsed}>{subMenuItem.category}</h2>
+						<h2 class="category-span" class:hidden={isCollapsed}>
+							{subMenuItem.category}
+						</h2>
 						<menu class="category-items-details">
 							{#if subMenuItem.menuItems}
-								{#each subMenuItem.menuItems as menuItem}
+								{#each subMenuItem.menuItems as menuItem, index (index)}
 									<SidebarMenuItem
 										item={menuItem}
 										{isCollapsed}

package/dist/Modal/Modal.svelte

@@ -7,6 +7,7 @@
 	import type { ModalProps } from './modalState.svelte.js';
 
 	let {
+		// eslint-disable-next-line no-useless-assignment
 		showModal = $bindable(false),
 		title,
 		width = 'xs',

package/dist/Modal/ModalHeader.svelte

@@ -17,7 +17,8 @@
 			{/if}
 			<h2>{title}</h2>
 		</div>
-		<button type="button" class="close-button material-icons-outlined" onclick={onclose}>close</button
+		<button type="button" class="close-button material-icons-outlined" onclick={onclose}
+			>close</button
 		>
 	</header>
 {/if}

package/dist/Processing/Processing.svelte

@@ -27,7 +27,9 @@
 					<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" />
+			<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>

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -65,7 +65,7 @@
 <div class="progress-wizard">
 	<section class="progress-wizard-container">
 		<ol class={['progress-wizard-steps', readonly ? 'readonly' : 'editing-mode']}>
-			{#each steps as step, index}
+			{#each steps as step, index (index)}
 				{@const stepIndex = index + 1}
 				{@const isActive = stepIndex === currentStep}
 				{@const isPreviousStep = currentStep > stepIndex}

package/dist/ProgressWizard/context.js

@@ -2,7 +2,7 @@ import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 const stepsKey = Symbol('steps');
 export const setProgressWizardStepsContext = (steps) => {
-    const stepsContext = writable(steps.map(step => ({ ...step })));
+    const stepsContext = writable(steps.map((step) => ({ ...step })));
     setContext(stepsKey, stepsContext);
     return stepsContext;
 };

package/dist/Search/Search.svelte

@@ -56,7 +56,12 @@
 		/>
 
 		{#if hasValue && !disabled}
-			<button type="button" class="clear-button" onclick={handleClear} aria-label="Clear search">
+			<button
+				type="button"
+				class="clear-button"
+				onclick={handleClear}
+				aria-label="Clear search"
+			>
 				<span class="material-icons-outlined" aria-hidden="true">close</span>
 			</button>
 		{/if}

package/dist/Switcher/Switcher.svelte

@@ -12,12 +12,14 @@
 		typeof items[0] === 'string';
 
 	const originalOptions = $derived<SwitcherOption[]>(
-		isStringArray(options) ? options.map((option) => ({ label: option, value: option })) : options
+		isStringArray(options)
+			? options.map((option) => ({ label: option, value: option }))
+			: options
 	);
 </script>
 
 <div class="switcher-container">
-	{#each originalOptions as option}
+	{#each originalOptions as option, index (index)}
 		<button
 			type="button"
 			class={['switcher-option', option.value === value && 'active']}

package/dist/Table/ActionsColumn.svelte

@@ -32,7 +32,9 @@
 			const showAbove = rect.bottom + element.offsetHeight > window.innerHeight;
 
 			const left = rect.left + rect.width / 2 - element.offsetWidth / 2;
-			const top = showAbove ? rect.top - element.offsetHeight + MENU_GAP : rect.bottom + MENU_GAP;
+			const top = showAbove
+				? rect.top - element.offsetHeight + MENU_GAP
+				: rect.bottom + MENU_GAP;
 
 			element.style.setProperty('--menu-left', `${Math.max(0, left)}px`);
 			element.style.setProperty('--menu-top', `${top}px`);
@@ -77,15 +79,20 @@
 		>
 			<span class="actions-trigger">...</span>
 			{#if isOpen}
-				<div class="actions-menu" {@attach autoPosition} transition:fade={{ duration: 100 }}>
+				<div
+					class="actions-menu"
+					{@attach autoPosition}
+					transition:fade={{ duration: 100 }}
+				>
 					<ul class="actions-list">
-						{#each actions as action, index}
+						{#each actions as action, index (index)}
 							<li>
 								<button
 									type="button"
 									onclick={action.onClick}
 									class="action-button"
-									class:action-button--delete={action.isDelete && action.isEnabled}
+									class:action-button--delete={action.isDelete &&
+										action.isEnabled}
 									disabled={!action.isEnabled}
 								>
 									<span>{action.name}</span>

package/dist/Table/AdvancedFilter.svelte

@@ -58,7 +58,11 @@
 
 	const toggleModal = () => {
 		isOpen = !isOpen;
-		isOpen ? initializeEditingFilters() : clearFilters();
+		if (isOpen) {
+			initializeEditingFilters();
+		} else {
+			clearFilters();
+		}
 	};
 
 	const initializeEditingFilters = () => {
@@ -112,7 +116,12 @@
 		>
 			<div class="filter-header">
 				<h2 id="filter-dialog-title" class="filter-title">Filters</h2>
-				<button type="button" onclick={toggleModal} class="filter-close-button" aria-label="Close">
+				<button
+					type="button"
+					onclick={toggleModal}
+					class="filter-close-button"
+					aria-label="Close"
+				>
 					<span class="material-icons">close</span>
 				</button>
 			</div>
@@ -165,7 +174,9 @@
 				{/each}
 
 				<div class="filter-actions">
-					<Button variant="outline-none" type="button" onclick={addFilterRow}>Add condition</Button>
+					<Button variant="outline-none" type="button" onclick={addFilterRow}
+						>Add condition</Button
+					>
 					{#if editingFilters.length}
 						<Button variant="outline-none" type="button" onclick={clearAllFilters}>
 							Reset filters
@@ -179,7 +190,9 @@
 					<Button
 						type="button"
 						onclick={applyFilters}
-						disabled={editingFilters.every((filter) => !filter.column || !filter.value.trim())}
+						disabled={editingFilters.every(
+							(filter) => !filter.column || !filter.value.trim()
+						)}
 					>
 						Apply Filters
 					</Button>

package/dist/Table/Body.svelte

@@ -31,7 +31,7 @@
 			]}
 			onclick={enableChecked ? (event) => handleRowClick(row, event.target) : undefined}
 		>
-			{#each row.getVisibleCells() as cell}
+			{#each row.getVisibleCells() as cell (cell.id)}
 				{@const alignColumn = cell.column.columnDef.meta?.alignColumn}
 				{@const columnWidth = cell.column.columnDef.meta?.columnWidth}
 				{@const columnStyle = cell.column.columnDef.meta?.style}

package/dist/Table/ColumnVisibilityDropdown.svelte

@@ -30,9 +30,10 @@
 			</div>
 
 			<div class="column-visibility-list">
-				{#each columns as column}
+				{#each columns as column (column.id)}
 					{@const columnDef = column.columnDef}
-					{@const header = typeof columnDef.header === 'string' ? columnDef.header : column.id}
+					{@const header =
+						typeof columnDef.header === 'string' ? columnDef.header : column.id}
 
 					<label class="column-visibility-item">
 						<input

package/dist/Table/Header.svelte

@@ -28,7 +28,7 @@
 <thead class="container">
 	{#each headerGroups as headerGroup (headerGroup.id)}
 		<tr class="table-header-row">
-			{#each headerGroup.headers as header}
+			{#each headerGroup.headers as header (header.id)}
 				{@const alignColumn = header.column.columnDef.meta?.alignColumn}
 				{@const className = header.column.columnDef.meta?.className}
 				{@const columnWidth = header.column.columnDef.meta?.columnWidth}
@@ -40,7 +40,11 @@
 				{@const isActive = isSorted || isFiltered}
 				<th
 					colSpan={header.colSpan}
-					class={['table-header-cell', className, isActive && 'table-header-cell--active']}
+					class={[
+						'table-header-cell',
+						className,
+						isActive && 'table-header-cell--active'
+					]}
 					style:width={columnWidth}
 					style={columnStyle}
 				>
@@ -58,7 +62,10 @@
 							style:justify-content={justifyContent}
 							onclick={header.column.getToggleSortingHandler()}
 						>
-							<span class="table-header-label" class:table-header-label--sortable={canSort}>
+							<span
+								class="table-header-label"
+								class:table-header-label--sortable={canSort}
+							>
 								<FlexRender
 									content={header.column.columnDef.header}
 									context={header.getContext()}
@@ -83,7 +90,8 @@
 						{#if enableColumnSearch && !hideColumnFilter}
 							<div class="table-header-search" style:justify-content={justifyContent}>
 								<Search
-									oninput={({ currentTarget }) => header.column.setFilterValue(currentTarget.value)}
+									oninput={({ currentTarget }) =>
+										header.column.setFilterValue(currentTarget.value)}
 									onclear={() => header.column.setFilterValue('')}
 									disabled={!header.column.getCanFilter()}
 								/>

package/dist/Table/PageSize.svelte

@@ -42,7 +42,7 @@
 					table.setPageSize(Number(e.currentTarget.value));
 				}}
 			>
-				{#each DEFAULT_ITEMS_PER_PAGE_OPTIONS as itemPerPage}
+				{#each DEFAULT_ITEMS_PER_PAGE_OPTIONS as itemPerPage (itemPerPage)}
 					<option class="page-size-option" value={itemPerPage}>{itemPerPage}</option>
 				{/each}
 			</select>

package/dist/Table/Skeleton.svelte

@@ -11,7 +11,7 @@
 	<table class="table-skeleton-table">
 		<thead>
 			<tr>
-				{#each Array(columns) as _}
+				{#each Array(columns).keys() as index (index)}
 					<th class="table-skeleton-header">
 						<div class="table-skeleton-header-placeholder"></div>
 					</th>
@@ -19,9 +19,9 @@
 			</tr>
 		</thead>
 		<tbody>
-			{#each Array(rows) as _}
+			{#each Array(rows).keys() as index (index)}
 				<tr>
-					{#each Array(columns) as _}
+					{#each Array(columns).keys() as index (index)}
 						<td class="table-skeleton-cell">
 							<div class="table-skeleton-cell-placeholder"></div>
 						</td>
@@ -33,7 +33,6 @@
 </section>
 
 <style>
-
 	.table-skeleton {
 		--color-black: #000;
 		--color-gray-300: #d1d5db;

package/dist/Table/Table.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="T extends object">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { type Snippet } from 'svelte';
@@ -159,7 +159,7 @@
 		getFilteredRowModel: getFilteredRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getExpandedRowModel: getExpandedRowModel(),
-		getSubRows: (row) => (row as any)?.children,
+		getSubRows: (row) => ('children' in row ? (row.children as T[]) : undefined),
 		manualPagination,
 		paginateExpandedRows: false,
 		enableColumnFilters: true,
@@ -259,7 +259,9 @@
 					</div>
 					{#if enableAdvancedFilter}
 						<AdvancedFilter
-							columns={table.getAllLeafColumns().filter((column) => column.getCanHide())}
+							columns={table
+								.getAllLeafColumns()
+								.filter((column) => column.getCanHide())}
 							onfilterschange={changeFilters}
 						/>
 					{/if}
@@ -270,7 +272,9 @@
 				<div class="table-actions">
 					{#if enableColumnVisibility}
 						<ColumnVisibilityDropdown
-							columns={table.getAllLeafColumns().filter((column) => column.getCanHide())}
+							columns={table
+								.getAllLeafColumns()
+								.filter((column) => column.getCanHide())}
 						/>
 					{/if}
 					{#if enableExportExcel}

package/dist/Table/Table.svelte.d.ts

@@ -2,7 +2,7 @@ import { type Snippet } from 'svelte';
 import { type ColumnDef } from './adapter/index.js';
 import type { ExcelSetting } from './excel-setting.js';
 import { type Pagination } from './types.js';
-declare function $$render<T>(): {
+declare function $$render<T extends object>(): {
     props: {
         columns: ColumnDef<T, any>[];
         isLoading?: boolean;
@@ -28,7 +28,7 @@ declare function $$render<T>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<T extends object> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -36,12 +36,12 @@ declare class __sveltets_Render<T> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Table: $$IsomorphicComponent;
-type Table<T> = InstanceType<typeof Table<T>>;
+type Table<T extends object> = InstanceType<typeof Table<T>>;
 export default Table;

package/dist/Table/adapter/flex-render.svelte

@@ -1,40 +1,33 @@
 <script
-  lang="ts"
-  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
 >
-  import type {
-    CellContext,
-    ColumnDefTemplate,
-    HeaderContext,
-  } from "@tanstack/table-core";
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from "./render-component.js";
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+	import { RenderComponentConfig, RenderSnippetConfig } from './render-component.js';
 
-  type Props = {
-    content?: TContext extends HeaderContext<TData, TValue>
-      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
-      : TContext extends CellContext<TData, TValue>
-        ? ColumnDefTemplate<CellContext<TData, TValue>>
-        : never;
-    context: TContext;
-  };
+	type Props = {
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		context: TContext;
+	};
 
-  let { content, context }: Props = $props();
+	let { content, context }: Props = $props();
 </script>
 
-{#if typeof content === "string"}
-  {content}
+{#if typeof content === 'string'}
+	{content}
 {:else if content instanceof Function}
-  {@const result = content(context as any)}
-  {#if result instanceof RenderComponentConfig}
-    {@const { component: Component, props } = result}
-    <Component {...props} />
-  {:else if result instanceof RenderSnippetConfig}
-    {@const { snippet, params } = result}
-    {@render snippet(params)}
-  {:else}
-    {result}
-  {/if}
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet(params)}
+	{:else}
+		{result}
+	{/if}
 {/if}

package/dist/Table/adapter/flex-render.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
 declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
     props: {
         content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;

package/dist/Table/adapter/render-component.d.ts

@@ -1,4 +1,4 @@
-import type { Component, ComponentProps, Snippet } from "svelte";
+import type { Component, ComponentProps, Snippet } from 'svelte';
 export declare class RenderComponentConfig<TComponent extends Component> {
     component: TComponent;
     props: ComponentProps<TComponent> | Record<string, never>;

package/dist/Table/adapter/table.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type RowData, type Table, type TableOptions } from "@tanstack/table-core";
+import { type RowData, type Table, type TableOptions } from '@tanstack/table-core';
 export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): Table<TData>;
 export declare function mergeObjects<T>(source: T): T;
 export declare function mergeObjects<T, U>(source: T, source1: U): T & U;

package/dist/Table/adapter/table.svelte.js

@@ -1,4 +1,4 @@
-import { createTable, } from "@tanstack/table-core";
+import { createTable } from '@tanstack/table-core';
 export function createSvelteTable(options) {
     const resolvedOptions = mergeObjects(createDefaultOptions(), options);
     const table = createTable(resolvedOptions);
@@ -15,7 +15,7 @@ export function createSvelteTable(options) {
                         state = mergeObjects(state, updater);
                     }
                     options.onStateChange?.(updater);
-                },
+                }
             });
         });
     }
@@ -32,14 +32,14 @@ function createDefaultOptions() {
         renderFallbackValue: null,
         mergeOptions: (defaultOptions, options) => {
             return mergeObjects(defaultOptions, options);
-        },
+        }
     };
 }
 export function mergeObjects(...sources) {
     const target = {};
     for (let i = 0; i < sources.length; i++) {
         let source = sources[i];
-        if (typeof source === "function")
+        if (typeof source === 'function')
             source = source();
         if (source) {
             const descriptors = Object.getOwnPropertyDescriptors(source);
@@ -51,13 +51,13 @@ export function mergeObjects(...sources) {
                     get() {
                         for (let i = sources.length - 1; i >= 0; i--) {
                             let s = sources[i];
-                            if (typeof s === "function")
+                            if (typeof s === 'function')
                                 s = s();
                             const v = (s || {})[key];
                             if (v !== undefined)
                                 return v;
                         }
-                    },
+                    }
                 });
             }
         }

package/dist/Table/consts.d.ts

@@ -10,5 +10,5 @@ export declare const Operation: {
 export declare const Operator: {
     readonly Eq: "eq";
 };
-export type Operation = typeof Operation[keyof typeof Operation];
-export type Operator = typeof Operator[keyof typeof Operator];
+export type Operation = (typeof Operation)[keyof typeof Operation];
+export type Operator = (typeof Operator)[keyof typeof Operator];

package/dist/Table/excel-setting.d.ts

@@ -6,4 +6,4 @@ export interface ExcelSetting {
 export declare const ColumnFormat: {
     readonly NUMBER: "#,##0.00";
 };
-export type ColumnFormat = typeof ColumnFormat[keyof typeof ColumnFormat];
+export type ColumnFormat = (typeof ColumnFormat)[keyof typeof ColumnFormat];

package/dist/Table/excel.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./tanstack-types.d.ts" />
 import ExcelJS from 'exceljs';
 import saveAs from 'file-saver';

package/dist/Table/tanstack-types.d.ts

@@ -1,9 +1,10 @@
 import '@tanstack/table-core';
-import { RowData } from "@tanstack/table-core";
+import { RowData } from '@tanstack/table-core';
 
 import { ColumnFormat } from './excel-setting.ts';
 
 declare module '@tanstack/table-core' {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	interface ColumnMeta<TData extends RowData, TValue> {
 		alignColumn?: 'left' | 'right' | 'center';
 		className?: string;

package/dist/Table/types.d.ts

@@ -1,4 +1,4 @@
-import { Operation } from "./consts.js";
+import { Operation } from './consts.js';
 export interface Action {
     name: string;
     isEnabled: boolean;

package/dist/Table/types.js

@@ -1 +1 @@
-import { Operation } from "./consts.js";
+import { Operation } from './consts.js';

package/dist/Tabs/Tabs.svelte

@@ -20,7 +20,7 @@
 
 <div class="tabs-container">
 	<div class="tabs-list" role="tablist" aria-label="tabs">
-		{#each tabs as tab}
+		{#each tabs as tab (tab.index)}
 			{#if !tab.hidden}
 				{@const isActiveTab = activeTab === tab.index}
 				<button
@@ -39,7 +39,7 @@
 		{/each}
 	</div>
 
-	{#each tabs as tab}
+	{#each tabs as tab, index (index)}
 		{#if activeTab === tab.index}
 			<div
 				class={['tabs-content', !tab.disablePadding && 'padding']}

package/dist/Toast/Toast.svelte

@@ -24,14 +24,16 @@
 
 {#if toastNotifications.toasts.length > 0}
 	<div class="toast-container" in:fly={transitionConfig} out:fly={transitionConfig}>
-		{#each toastNotifications.toasts as toast}
+		{#each toastNotifications.toasts as toast (toast.id)}
 			<div class="toast" in:fly={transitionConfig} out:fly={transitionConfig}>
 				<span class="status-indicator {toast.type}"></span>
 				<div class="toast-content-container">
 					<div class="toast-content">
 						<span>{toast.message}</span>
 						{#if toast.link}
-							<a class="toast-content-link" href={toast.link} title="View details">View details</a>
+							<a class="toast-content-link" href={toast.link} title="View details"
+								>View details</a
+							>
 						{/if}
 					</div>
 				</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.12.3",
+	"version": "1.12.4",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -21,7 +21,7 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check ."
+		"lint": "prettier --check . && eslint ."
 	},
 	"files": [
 		"dist",
@@ -74,6 +74,8 @@
 		}
 	},
 	"devDependencies": {
+		"@eslint/compat": "^2.0.3",
+		"@eslint/js": "^10.0.1",
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/adapter-node": "^5.5.4",
 		"@sveltejs/kit": "^2.55.0",
@@ -81,6 +83,9 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tanstack/table-core": "^8.21.3",
 		"@types/file-saver": "^2.0.7",
+		"eslint": "^10.1.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.16.0",
 		"exceljs": "^4.4.0",
 		"file-saver": "^2.0.5",
 		"prettier": "^3.8.1",
@@ -90,6 +95,7 @@
 		"svelte-check": "^4.4.5",
 		"sveltekit-superforms": "^2.30.0",
 		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.57.2",
 		"vite": "^7.3.1",
 		"zod": "^4.3.6"
 	},