@lavalogic/scoria 0.9.2 → 0.9.4

package/dist/Components/Table/Body/QuickSearchCell.svelte

@@ -28,7 +28,8 @@
 	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import { dev } from '$app/environment';
-	import { QuerySelect } from '../../../index.js';
+	import { CheckboxDef, QuerySelect, Ternary } from '../../../index.js';
+	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
 
 	export interface QuickSearchCellProps<T extends object> {
 		column: Column<T>;
@@ -79,8 +80,6 @@
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
 	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
 
-	let inputRef: HTMLInputElement | undefined = $state();
-
 	const selectSymbol = Symbol();
 
 	const openedSelect = getContext<{ value: symbol | null } | null | undefined>(
@@ -347,7 +346,7 @@
 				{/if}
 			{:else if isSelect}
 				{#if hasQuery}
-					{#if customFilter!.valueAsObject == false}
+					{#if customFilter!.valueAsObject !== true}
 						{@const label =
 							customFilter?.id ??
 							customFilter?.label ??
@@ -408,6 +407,48 @@
 						/>
 					{/await}
 				{/if}
+			{:else if def instanceof CheckboxDef}
+				{@const value = (() => {
+					switch (tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value) {
+						case true: {
+							return Ternary.True;
+						}
+						case false: {
+							return Ternary.False;
+						}
+
+						case null:
+						case undefined: {
+							return Ternary.Neutral;
+						}
+					}
+				})()}
+				<div class="centered">
+					<ThreeStateRadio
+						{value}
+						yesLabel="Selected"
+						noLabel="Not Selected"
+						neutralLabel="Any"
+						neutralIcon={{ name: 'circle-minus' }}
+						onchange={(v) => {
+							switch (v) {
+								case Ternary.False: {
+									tableContext.paginationRepo?.filterBy(def.id, false);
+									return;
+								}
+								case Ternary.True: {
+									tableContext.paginationRepo?.filterBy(def.id, true);
+									return;
+								}
+								case Ternary.Neutral:
+								default: {
+									tableContext.paginationRepo?.filterBy(def.id, null);
+									return;
+								}
+							}
+						}}
+					/>
+				</div>
 			{:else if isNumeric}
 				{#if selectedNumberFilterType.value === NumberDateFilterMode.Between}
 					<div class="input-wrapper left">
@@ -438,39 +479,66 @@
 					</div>
 				{:else if value == null || typeof value == 'string'}
 					<div class="input-wrapper right">
+						{#if selectedNumberFilterType?.value == NumberDateFilterMode.null}
+							<TextInput
+								data-type="quicksearch"
+								id={inputId}
+								value="is Null"
+								disabled
+								variant={InputVariant.Table}
+							/>
+						{:else}
+							<TextInput
+								data-type="quicksearch"
+								id={inputId}
+								bind:value
+								placeholder="Filter&hellip;"
+								variant={InputVariant.Table}
+								oninput={() => {
+									tableContext.paginationRepo?.filterBy(def.id, [value]);
+								}}
+								onkeydown={closeOnCtrlF}
+							/>
+						{/if}
+					</div>
+				{/if}
+			{:else if value == null || typeof value == 'string'}
+				<div class="input-wrapper right">
+					{#if selectedStringFilterType?.value == StringFilterMode.null}
 						<TextInput
 							data-type="quicksearch"
 							id={inputId}
-							bind:value
-							placeholder="Filter&hellip;"
+							value="is Null"
+							disabled
 							variant={InputVariant.Table}
+						/>
+					{:else if selectedStringFilterType?.value == StringFilterMode.Empty}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
+							value="is Empty"
+							disabled
+							variant={InputVariant.Table}
+						/>
+					{:else}
+						<TextInput
+							data-type="quicksearch"
+							id={inputId}
 							oninput={() => {
-								tableContext.paginationRepo?.filterBy(def.id, [value]);
+								tableContext.paginationRepo?.filterBy(def.id, value);
 							}}
-							onkeydown={closeOnCtrlF}
+							variant={InputVariant.Table}
+							bind:value
+							placeholder="Filter&hellip;"
 						/>
-					</div>
-				{/if}
-			{:else if value == null || typeof value == 'string'}
-				<div class="input-wrapper right">
-					<TextInput
-						data-type="quicksearch"
-						id={inputId}
-						oninput={() => {
-							tableContext.paginationRepo?.filterBy(def.id, value);
-						}}
-						variant={InputVariant.Table}
-						bind:value
-						bind:inputRef
-						placeholder="Filter&hellip;"
-					/>
+					{/if}
 				</div>
 			{/if}
 
 			<!-- TODO button for date, checkbox or select for checkbox -->
 		</div>
 
-		{#if !isSelect && !isDate}
+		{#if !isSelect && !isDate && !(def instanceof CheckboxDef)}
 			<div class="stick-right">
 				<Action
 					data-type="quicksearch"
@@ -666,4 +734,16 @@ td {
 }
 td .input-wrapper-parent {
   width: 100%;
+}
+
+.centered {
+  display: flex;
+  width: fit-content;
+  flex-flow: column nowrap;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  height: 60px;
+  --input-height: 60px;
+  background-color: #ffffff;
 }</style>

package/dist/Components/Table/Body/TableBody.svelte

@@ -84,4 +84,6 @@ tbody {
 
 tr.sticky {
   transition: line-height 0.2s ease, height 0.2s ease;
+  height: 61px;
+  --height: 61px;
 }</style>

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -242,7 +242,7 @@
 				typeof filteringStateValue == 'number'
 			) {
 				value = filteringStateValue;
-			} else {
+			} else if (typeof filteringStateValue !== 'boolean') {
 				console.warn('unknown value type:', $state.snapshot(filteringStateValue));
 				value = filteringStateValue as string; // HACK attempt to keep production running
 			}
@@ -266,8 +266,8 @@
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
 					value = gotValue;
-				} else {
-					console.warn('unknown value type:', gotValue);
+				} else if (typeof filteringStateValue !== 'boolean') {
+					console.warn('unknown value type:', $state.snapshot(gotValue));
 					value = gotValue as string; // HACK attempt to keep production running
 				}
 			}
@@ -400,7 +400,7 @@
 			<div class="contents">
 				{#await options then options}
 					{#if hasQuery}
-						{#if customFilter!.valueAsObject == false}
+						{#if customFilter!.valueAsObject !== true}
 							{@const label =
 								customFilter?.id ??
 								customFilter?.label ??

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -4,7 +4,7 @@ import { ToolbarPosition } from '../Toolbar/ToolbarPosition.js';
 import { RowSelectionDef } from '../Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
 import { tick } from 'svelte';
 import { PaginationType } from '../Pagination/PaginationType.js';
-import { asyncAll, asyncFilter, asyncFilterIndices, asyncSleep, asyncSome, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncFilterIndices, asyncSleep, getCanvasContext, getErrorMessage } from '../../../../Helpers/Helpers.svelte.js';
 import { AccessorDef } from '../Columns/Definitions/Accessors/AccessorDef.svelte.js';
 import { NumberInputDef } from '../Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 import { SelectDef } from '../Columns/Definitions/Accessors/SelectDef.svelte.js';
@@ -14,8 +14,8 @@ import { DateInputDef } from '../Columns/Definitions/Accessors/DateInputDef.svel
 import { ProgressBarDef } from '../Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { DisplayDef } from '../Columns/Definitions/Display/DisplayDef.svelte.js';
 import { browser, dev } from '$app/environment';
-import { ActionsDef } from '../Columns/Definitions/Actions/ActionsDef.svelte.js';
 import { BubbleDef } from '../Columns/Definitions/Display/BubbleDef.svelte.js';
+import { allowedEmptyFilterModes } from '../DataRepository/LocalTableDataRepository.svelte.js';
 const SORTING_ICON_WIDTH = 24;
 const InternalSymbol = Symbol();
 const uncopyableColumns = new Set([
@@ -153,8 +153,29 @@ export class TableContext {
                 const abortController = new AbortController();
                 try {
                     if (this.paginationRepo?.paginationType == PaginationType.Local) {
-                        const filterState = this.dataRepo?.filtering ?? [];
+                        const checkedIds = new Set();
+                        const filterState = this.dataRepo?.filtering?.filter((filter) => {
+                            const snapshot = $state.snapshot(filter.value);
+                            checkedIds.add(filter.id);
+                            const x = this.dataRepo.filterModes.get(filter.id);
+                            return (allowedEmptyFilterModes.has(x) ||
+                                (snapshot !== '' && (!Array.isArray(snapshot) || snapshot[0] !== '')));
+                        }) ?? [];
                         const data = this.dataRepo?.data ?? [];
+                        // HACK add filter state for filters that don't require a value to function
+                        // this.dataRepo?.filterModes?.entries().forEach(([key, value]) => {
+                        // 	if (!checkedIds.has(key)) {
+                        // 		checkedIds.add(key);
+                        // 		if (allowedEmptyFilterModes.has(value)) {
+                        // 			filterState.push({
+                        // 				id: key,
+                        // 				value: ''
+                        // 			});
+                        // 		}
+                        // 	} else {
+                        // 		console.warn(`key ${key} was already checked, new value:`, value);
+                        // 	}
+                        // });
                         if (!filterState.length) {
                             this.filteredIndices = data.map((_, index) => index) ?? [];
                         }

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.d.ts

@@ -1,12 +1,16 @@
 import type { RefWrapper } from '../../../../Types/Internal/RefWrapper.js';
+import { SvelteSet } from 'svelte/reactivity';
 import type { Row } from '../Context/Row.js';
 import type { ColumnFiltersState } from '../Filtering/ColumnFiltersState.js';
 import type { BoolFilterValueType, NumberFilterValueType, SelectFilterValueType, StringFilterValueType } from '../Filtering/FilterFn.js';
 import type { FilterMode } from '../Filtering/FilterMode.js';
+import { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
+import { StringFilterMode } from '../Filtering/StringFilterMode.js';
 import type { OnChangeFn } from '../OnChangeFn.js';
 import type { ILocalDataRepository } from './ILocalDataRepository.js';
 import type { SortingState } from './SortingState.js';
 import { TableDataRepository } from './TableDataRepository.svelte.js';
+export declare const allowedEmptyFilterModes: SvelteSet<StringFilterMode | NumberDateFilterMode>;
 export declare class LocalTableDataRepository<T extends object> extends TableDataRepository<T> implements ILocalDataRepository<T> {
     addEmptyRow?: (() => void) | undefined;
     readonly filterType: "Real";
@@ -48,5 +52,5 @@ export declare class LocalTableDataRepository<T extends object> extends TableDat
     readonly boolFilter: (row: Row<T>, columnId: string, // & keyof T,
     filterValue: BoolFilterValueType) => Promise<boolean>;
     readonly stringFilter: (row: Row<T>, columnId: string, // & keyof T,
-    filterValue: StringFilterValueType) => Promise<any>;
+    filterValue: StringFilterValueType) => Promise<boolean>;
 }

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.js

@@ -1,9 +1,15 @@
 import { Delay } from '../../../../Delay/Delay.js';
+import { SvelteSet } from 'svelte/reactivity';
 import { FilterType } from '../Filtering/FilterType.js';
 import { NumberDateFilterMode } from '../Filtering/NumberDateFilterMode.js';
 import { StringFilterMode } from '../Filtering/StringFilterMode.js';
 import { PaginationType } from '../Pagination/PaginationType.js';
 import { TableDataRepository } from './TableDataRepository.svelte.js';
+export const allowedEmptyFilterModes = new SvelteSet([
+    StringFilterMode.Empty,
+    StringFilterMode.null,
+    NumberDateFilterMode.null
+]);
 export class LocalTableDataRepository extends TableDataRepository {
     addEmptyRow;
     filterType = FilterType.Real;
@@ -60,6 +66,10 @@ export class LocalTableDataRepository extends TableDataRepository {
     setFilterMode = (id, mode) => {
         if (mode != undefined) {
             this.filterModes.set(id, mode);
+            //add stub filtering in empty cases
+            if (allowedEmptyFilterModes.has(mode) && !this.filtering.some((it) => it.id === id)) {
+                this.filterBy(id, '');
+            }
         }
         else {
             this.filterModes.delete(id);
@@ -69,16 +79,18 @@ export class LocalTableDataRepository extends TableDataRepository {
         if (typeof value === 'string') {
             value = value.trim();
         }
+        // add stub filter value here if filter mode is empty, not empty, null, or not null
         const oldIndex = this.filtering.findIndex((it) => it.id === id);
         const newFiltering = this.filtering.concat();
         if (oldIndex === -1 || newFiltering[oldIndex].value != value) {
             if (oldIndex > -1) {
                 newFiltering.splice(oldIndex, 1);
             }
-            const hasNoValue = value == null ||
-                (typeof value === 'object' && Array.isArray(value) && value.length === 0) ||
-                (typeof value === 'string' && value.length === 0);
-            if (!hasNoValue) {
+            const hasValue = allowedEmptyFilterModes.has(this.filterModes.get(id)) ||
+                !(value == null ||
+                    (typeof value === 'object' && Array.isArray(value) && value.length === 0) ||
+                    (typeof value === 'string' && value.length === 0));
+            if (hasValue) {
                 newFiltering.push({ id, value });
             }
         }
@@ -162,10 +174,13 @@ export class LocalTableDataRepository extends TableDataRepository {
     numberFilter = async (row, columnId, // & keyof T,
     values) => {
         const columnValue = await row.getValue(columnId);
+        const filterType = this.filterModes.get(columnId) ?? NumberDateFilterMode.In;
+        if (filterType == NumberDateFilterMode.null) {
+            return columnValue == null || isNaN(columnValue);
+        }
         if (!columnValue) {
             return false;
         }
-        const filterType = this.filterModes.get(columnId) ?? NumberDateFilterMode.In;
         switch (filterType) {
             case NumberDateFilterMode.Equals: {
                 const [min] = TableDataRepository.getMinMax(values);
@@ -224,10 +239,6 @@ export class LocalTableDataRepository extends TableDataRepository {
                 }
                 return !valueSet.has(columnValue);
             }
-            case NumberDateFilterMode.null: {
-                // TODO yes or no setting here
-                return columnValue == null || isNaN(columnValue);
-            }
             case StringFilterMode.ImplicitEquals:
             case StringFilterMode.Equals:
             case StringFilterMode.NotEquals:
@@ -271,15 +282,27 @@ export class LocalTableDataRepository extends TableDataRepository {
     };
     stringFilter = async (row, columnId, // & keyof T,
     filterValue) => {
+        const filterType = this.filterModes.get(columnId) ?? StringFilterMode.Contains;
+        if (filterType == StringFilterMode.Empty) {
+            const columnValue = (await row.getValue(columnId))?.toString();
+            return !columnValue;
+        }
+        if (filterType == StringFilterMode.null) {
+            const columnValue = await row.getValue(columnId);
+            return columnValue == null;
+        }
         if (!filterValue) {
+            console.log('empty search value');
             return true;
         }
         filterValue = filterValue.trim().toLocaleLowerCase();
-        const columnValue = (await row.getValue(columnId))?.toString().trim().toLocaleLowerCase();
+        const columnValue = (await row.getValue(columnId))
+            ?.toString()
+            .trim()
+            .toLocaleLowerCase();
         if (!columnValue) {
             return true;
         }
-        const filterType = this.filterModes.get(columnId) ?? StringFilterMode.Contains;
         if (filterType === StringFilterMode.EndsWith) {
             return columnValue.endsWith(filterValue);
         }
@@ -292,10 +315,24 @@ export class LocalTableDataRepository extends TableDataRepository {
         if (filterType === StringFilterMode.NotEquals) {
             return columnValue !== filterValue;
         }
-        //last ditch effort and fallback
-        if (filterType !== StringFilterMode.Contains) {
-            console.warn(`unhandled filter type value ${filterType}`);
+        if (filterType == StringFilterMode.NotEndsWith) {
+            return !columnValue.endsWith(filterValue);
+        }
+        if (filterType == StringFilterMode.Contains) {
+            return columnValue.includes(filterValue);
+        }
+        if (filterType == StringFilterMode.NotContains) {
+            return !columnValue.includes(filterValue);
         }
-        return columnValue.includes(filterValue);
+        if (filterType == StringFilterMode.In) {
+            const filterValues = filterValue.split(',');
+            return filterValues.some((v) => columnValue === v);
+        }
+        if (filterType == StringFilterMode.NotIn) {
+            const filterValues = filterValue.split(',');
+            return !filterValues.some((v) => columnValue === v);
+        }
+        console.warn(`unhandled filter type value ${filterType}`);
+        return true;
     };
 }

package/dist/Components/Table/Types/Filtering/CustomFilter.d.ts

@@ -8,6 +8,6 @@ export interface CustomFilter {
     multiSelect?: boolean;
     objectName?: string;
     label?: string;
-    valueAsObject: boolean;
+    valueAsObject?: boolean;
     query?: (value: unknown) => Promise<Array<SelectOption<number>>>;
 }

package/dist/Components/ThreeStateRadio.svelte

@@ -7,22 +7,29 @@
 	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
 	import { Colour, ColourSet } from '../scss/colours.js';
 	import { Ternary } from '../Types/Internal/Ternary.js';
+	import type { PartialIconProps } from './Icon.svelte';
 	export interface ThreeStateRadioProps {
-		label: string;
-		value: Ternary;
-		onchange?: ChangeEventHandler<HTMLInputElement>;
+		label?: string;
+		value?: Ternary;
+		onchange?: (value: Ternary) => void;
 		id?: string;
 		disabled?: boolean;
 		isValid?: boolean;
 		noDisabled?: boolean;
 		yesDisabled?: boolean;
 		neutralDisabled?: boolean;
+		noLabel?: string;
+		yesLabel?: string;
+		neutralLabel?: string;
+		noIcon?: PartialIconProps;
+		yesIcon?: PartialIconProps;
+		neutralIcon?: PartialIconProps;
 	}
 </script>
 
 <script lang="ts">
 	let {
-		value = $bindable(),
+		value = $bindable(Ternary.Neutral),
 		id = generateShortUUID(),
 		label,
 		disabled,
@@ -30,11 +37,15 @@
 		onchange,
 		noDisabled = false,
 		yesDisabled = false,
-		neutralDisabled = false
+		neutralDisabled = false,
+		noLabel,
+		yesLabel,
+		neutralLabel,
+		noIcon,
+		yesIcon,
+		neutralIcon
 	}: ThreeStateRadioProps = $props();
 
-	let ref: HTMLInputElement | undefined = $state();
-
 	let textValue = $state('');
 
 	$effect(() => {
@@ -55,17 +66,22 @@
 		untrack(() => {
 			if (textValue === '0' && value !== Ternary.False) {
 				value = Ternary.False;
+				onchange?.(Ternary.False);
 			} else if (textValue === '-1' && value !== Ternary.Neutral) {
 				value = Ternary.Neutral;
+				onchange?.(Ternary.Neutral);
 			} else if (textValue === '1' && value !== Ternary.True) {
 				value = Ternary.True;
+				onchange?.(Ternary.True);
 			}
 		});
 	});
 </script>
 
 <div class="text-label" class:invalid={isValid === false}>
-	<span>{label}</span>
+	{#if label != undefined}
+		<span>{label}</span>
+	{/if}
 
 	<div class="radios">
 		<label>
@@ -74,9 +90,10 @@
 				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
 				icon={{
 					name: 'circle-cross',
+					...noIcon,
 					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
 				}}
-				label="No"
+				label={noLabel ?? 'No'}
 				onclick={() => {
 					textValue = '0';
 				}}
@@ -89,9 +106,10 @@
 				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
 				icon={{
 					name: 'database',
+					...neutralIcon,
 					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
 				}}
-				label="Allow system to decide"
+				label={neutralLabel ?? 'Allow system to decide'}
 				onclick={() => {
 					textValue = '-1';
 				}}
@@ -109,9 +127,10 @@
 				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
 				icon={{
 					name: 'circle-tick',
+					...yesIcon,
 					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
 				}}
-				label="Yes"
+				label={yesLabel ?? 'Yes'}
 				onclick={() => {
 					textValue = '1';
 				}}
@@ -122,6 +141,7 @@
 </div>
 
 <style>.text-label {
+  box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
   width: var(--input-width, 100%);
   color: #3a4952;
@@ -139,6 +159,7 @@
   transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
 }
 .text-label .radios {
+  overflow: hidden;
   display: flex;
   flex-flow: row nowrap;
   height: 100%;

package/dist/Components/ThreeStateRadio.svelte.d.ts

@@ -1,15 +1,21 @@
-import type { ChangeEventHandler } from 'svelte/elements';
 import { Ternary } from '../Types/Internal/Ternary.js';
+import type { PartialIconProps } from './Icon.svelte';
 export interface ThreeStateRadioProps {
-    label: string;
-    value: Ternary;
-    onchange?: ChangeEventHandler<HTMLInputElement>;
+    label?: string;
+    value?: Ternary;
+    onchange?: (value: Ternary) => void;
     id?: string;
     disabled?: boolean;
     isValid?: boolean;
     noDisabled?: boolean;
     yesDisabled?: boolean;
     neutralDisabled?: boolean;
+    noLabel?: string;
+    yesLabel?: string;
+    neutralLabel?: string;
+    noIcon?: PartialIconProps;
+    yesIcon?: PartialIconProps;
+    neutralIcon?: PartialIconProps;
 }
 declare const ThreeStateRadio: import("svelte").Component<ThreeStateRadioProps, {}, "value">;
 type ThreeStateRadio = ReturnType<typeof ThreeStateRadio>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "publishConfig": {
     "access": "restricted"
   },
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
-    "@eslint/compat": "^2.0.0",
+    "@eslint/compat": "^2.0.1",
     "@eslint/js": "^9.39.2",
     "@playwright/test": "^1.57.0",
     "@storybook/addon-a11y": "^10.1.11",
@@ -38,20 +38,20 @@
     "@storybook/addon-svelte-csf": "^5.0.10",
     "@storybook/addon-vitest": "^10.1.11",
     "@storybook/sveltekit": "^10.1.11",
-    "@sveltejs/adapter-node": "^5.4.0",
-    "@sveltejs/kit": "^2.49.3",
+    "@sveltejs/adapter-node": "^5.5.0",
+    "@sveltejs/kit": "^2.49.4",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.3",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^24.10.4",
-    "@typescript-eslint/eslint-plugin": "^8.52.0",
-    "@typescript-eslint/parser": "^8.52.0",
-    "@vitest/browser": "^4.0.16",
+    "@types/node": "^25.0.7",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@vitest/browser": "^4.0.17",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "10.1.4",
+    "eslint-plugin-storybook": "^10.1.11",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^16.5.0",
+    "globals": "^17.0.0",
     "mdsvex": "^0.12.6",
     "playwright": "^1.57.0",
     "prettier": "^3.7.4",
@@ -59,14 +59,14 @@
     "publint": "^0.3.16",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "svelte": "^5.46.1",
+    "svelte": "^5.46.3",
     "svelte-check": "^4.3.5",
     "svelte-render-scan": "^1.1.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.52.0",
+    "typescript-eslint": "^8.53.0",
     "vite": "^7.3.1",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.0.16",
+    "vitest": "^4.0.17",
     "vitest-browser-svelte": "^2.0.1"
   },
   "keywords": [