@websline/system-components 1.3.0 → 1.3.1

package/dist/components/atoms/checkbox/Checkbox.svelte

@@ -6,10 +6,11 @@
 	 * @typedef {Object} Props
 	 * @property {boolean} [checked=false] Wether this radio is checked or not, bound to the component
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the radio is disabled
-	 * @property {string} [id=""] The ID of the radio element
+	 * @property {boolean} [disabled] Whether the radio is disabled
+	 * @property {boolean} [error] Whether the radio has an error state
+	 * @property {string} [id] The ID of the radio element
 	 * @property {string} [name] The name of the radio, used for form submission
-	 * @property {boolean} [required=false] Whether the radio is required
+	 * @property {boolean} [required] Whether the radio is required
 	 * @property {string} [value=""] The value of the radio
 	 */
 
@@ -17,27 +18,25 @@
 	let {
 		checked = $bindable(),
 		class: className = "",
-		disabled = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
-		required = false,
+		required,
 		value = "",
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 </script>
@@ -47,6 +46,7 @@
 	class={checkboxVariants({
 		class: className,
 		disabled: localValues.disabled,
+		error: localValues.error,
 	})}
 	disabled={localValues.disabled}
 	id={localValues.id}

package/dist/components/atoms/checkbox/Checkbox.svelte.d.ts

@@ -16,6 +16,10 @@ declare const Checkbox: import("svelte").Component<{
      * Whether the radio is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the radio has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the radio element
      */
@@ -46,6 +50,10 @@ type Props = {
      * Whether the radio is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the radio has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the radio element
      */

package/dist/components/atoms/checkbox/checkbox.variants.d.ts

@@ -2,12 +2,21 @@ export const checkboxVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", {
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white", unknown, unknown, undefined>>;

package/dist/components/atoms/checkbox/checkbox.variants.js

@@ -6,6 +6,9 @@ const checkboxVariants = tv({
 		disabled: {
 			true: "cursor-not-allowed",
 		},
+		error: {
+			true: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+		},
 	},
 });
 

package/dist/components/atoms/input/Input.svelte

@@ -8,13 +8,13 @@
 	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentEnd=""] Content to display at the end of the input (e.g., icon or text)
 	 * @property {import("svelte").SvelteComponent} [children] Additional content to render inside the input component
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the input is disabled
-	 * @property {boolean} [error=false] Whether the input has an error state
-	 * @property {string} [id=""] The ID of the input element
+	 * @property {boolean} [disabled] Whether the input is disabled
+	 * @property {boolean} [error] Whether the input has an error state
+	 * @property {string} [id] The ID of the input element
 	 * @property {string} [name] The name of the input, used for form submission
 	 * @property {string} [placeholder=""] Placeholder text for the input
 	 * @property {boolean} [readonly=false] Whether the input is read-only
-	 * @property {boolean} [required=false] Whether the input is required
+	 * @property {boolean} [required] Whether the input is required
 	 * @property {string} [type="text"] The type of the input, e.g. "text", "password", "email"
 	 * @property {string} [value=""] The value of the input, bound to the component
 	 */
@@ -25,32 +25,28 @@
 		adornmentEnd = "",
 		children,
 		class: className = "",
-		disabled = false,
-		error = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
 		placeholder = "",
 		readonly = false,
-		required = false,
+		required,
 		type = "text",
 		value = $bindable(),
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			error,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 

package/dist/components/atoms/radio/Radio.svelte

@@ -6,10 +6,11 @@
 	 * @typedef {Object} Props
 	 * @property {boolean} [checked=false] Wether this radio is checked or not, bound to the component
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the radio is disabled
-	 * @property {string} [id=""] The ID of the radio element
+	 * @property {boolean} [disabled] Whether the radio is disabled
+	 * @property {boolean} [error] Whether the radio has an error state
+	 * @property {string} [id] The ID of the radio element
 	 * @property {string} [name] The name of the radio, used for form submission
-	 * @property {boolean} [required=false] Whether the radio is required
+	 * @property {boolean} [required] Whether the radio is required
 	 * @property {string} [value=""] The value of the radio
 	 */
 
@@ -17,27 +18,25 @@
 	let {
 		checked = $bindable(),
 		class: className = "",
-		disabled = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
-		required = false,
+		required,
 		value = "",
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 </script>
@@ -49,6 +48,7 @@
 		checked,
 		class: className,
 		disabled: localValues.disabled,
+		error: localValues.error,
 	})}
 	disabled={localValues.disabled}
 	id={localValues.id}

package/dist/components/atoms/radio/Radio.svelte.d.ts

@@ -16,6 +16,10 @@ declare const Radio: import("svelte").Component<{
      * Whether the radio is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the radio has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the radio element
      */
@@ -46,6 +50,10 @@ type Props = {
      * Whether the radio is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the radio has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the radio element
      */

package/dist/components/atoms/radio/radio.variants.d.ts

@@ -2,6 +2,9 @@ export const radioVariants: import("tailwind-variants").TVReturnType<{
     checked: {
         true: string;
     };
+    error: {
+        true: string;
+    };
     disabled: {
         true: string;
     };
@@ -9,6 +12,9 @@ export const radioVariants: import("tailwind-variants").TVReturnType<{
     checked: {
         true: string;
     };
+    error: {
+        true: string;
+    };
     disabled: {
         true: string;
     };
@@ -16,6 +22,9 @@ export const radioVariants: import("tailwind-variants").TVReturnType<{
     checked: {
         true: string;
     };
+    error: {
+        true: string;
+    };
     disabled: {
         true: string;
     };

package/dist/components/atoms/radio/radio.variants.js

@@ -6,6 +6,9 @@ const radioVariants = tv({
 		checked: {
 			true: "inset-ring-4 inset-ring-neutral-900 dark:inset-ring-neutral-600",
 		},
+		error: {
+			true: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+		},
 		disabled: {
 			true: "cursor-not-allowed",
 		},

package/dist/components/atoms/select/Select.svelte

@@ -7,12 +7,12 @@
 	 * @property {"default" | "raised"} [buttonAppearance="default"] Appearance of the button variant
 	 * @property {"small" | "medium" | "large"} [buttonSize="medium"] Size of the button variant
 	 * @property {string} [class=""] Additional CSS classes for the select
-	 * @property {boolean} [disabled=false] Whether the select field is disabled
-	 * @property {boolean} [error=false] Whether the select field has an error
-	 * @property {string} [id=""] The id attr of the select field
+	 * @property {boolean} [disabled] Whether the select field is disabled
+	 * @property {boolean} [error] Whether the select field has an error
+	 * @property {string} [id] The id attr of the select field
 	 * @property {{ disabled?: boolean, label: string, value: string }[]} [options=[]] required array of option objects for the select
 	 * @property {string} [placeholder=""] The placeholder text that shows when no option is preselected
-	 * @property {boolean} [required=false] Whether the select field is required
+	 * @property {boolean} [required] Whether the select field is required
 	 * @property {string} [value=""] The value of the input, bound to the component
 	 * @property {"default" | "button"} [variant="default"] The variant of the component
 	 */
@@ -22,31 +22,27 @@
 		buttonAppearance = "default",
 		buttonSize = "medium",
 		class: className = "",
-		disabled = false,
-		error = false,
+		disabled,
+		error,
 		id,
 		options = [],
 		placeholder = "",
-		required = false,
+		required,
 		value = $bindable(),
 		variant = "default",
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			error,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 

package/dist/components/atoms/switch/Switch.svelte

@@ -6,10 +6,11 @@
 	 * @typedef {Object} Props
 	 * @property {boolean} [checked=false] Wether this switch is checked or not, bound to the component
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the switch is disabled
-	 * @property {string} [id=""] The ID of the switch element
+	 * @property {boolean} [disabled] Whether the switch is disabled
+	 * @property {boolean} [error] Whether the switch has an error state
+	 * @property {string} [id] The ID of the switch element
 	 * @property {string} [name] The name of the switch, used for form submission
-	 * @property {boolean} [required=false] Whether the switch is required
+	 * @property {boolean} [required] Whether the switch is required
 	 * @property {string} [value=""] The value of the switch
 	 */
 
@@ -17,27 +18,25 @@
 	let {
 		checked = $bindable(),
 		class: className = "",
-		disabled = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
-		required = false,
+		required,
 		value = "",
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 </script>
@@ -48,6 +47,7 @@
 		checked,
 		class: className,
 		disabled: localValues.disabled,
+		error: localValues.error,
 	})}
 	disabled={localValues.disabled}
 	id={localValues.id}

package/dist/components/atoms/switch/Switch.svelte.d.ts

@@ -16,6 +16,10 @@ declare const Switch: import("svelte").Component<{
      * Whether the switch is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the switch has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the switch element
      */
@@ -46,6 +50,10 @@ type Props = {
      * Whether the switch is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the switch has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the switch element
      */

package/dist/components/atoms/switch/switch.variants.d.ts

@@ -5,6 +5,9 @@ export const switchVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300", {
     checked: {
         true: string;
@@ -12,6 +15,9 @@ export const switchVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     checked: {
         true: string;
@@ -19,4 +25,7 @@ export const switchVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
+    error: {
+        true: string;
+    };
 }, undefined, "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300", unknown, unknown, undefined>>;

package/dist/components/atoms/switch/switch.variants.js

@@ -9,6 +9,9 @@ const switchVariants = tv({
 		disabled: {
 			true: "cursor-not-allowed bg-neutral-300",
 		},
+		error: {
+			true: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+		},
 	},
 });
 

package/dist/components/atoms/textarea/Textarea.svelte

@@ -5,13 +5,13 @@
 	/**
 	 * @typedef {Object} Props
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the textarea is disabled
-	 * @property {boolean} [error=false] Whether the textarea has an error state
-	 * @property {string} [id=""] The ID of the textarea element
+	 * @property {boolean} [disabled] Whether the textarea is disabled
+	 * @property {boolean} [error] Whether the textarea has an error state
+	 * @property {string} [id] The ID of the textarea element
 	 * @property {string} [name] The name of the textarea, used for form submission
 	 * @property {string} [placeholder=""] Placeholder text for the textarea
 	 * @property {boolean} [readonly=false] Whether the textarea is read-only
-	 * @property {boolean} [required=false] Whether the textarea is required
+	 * @property {boolean} [required] Whether the textarea is required
 	 * @property {"small" | "medium" | "large"} [size="medium"] Textarea size
 	 * @property {string} [value=""] The value of the textarea, bound to the component
 	 */
@@ -19,32 +19,28 @@
 	/** @type {Props} */
 	let {
 		class: className = "",
-		disabled = false,
-		error = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
 		placeholder = "",
 		readonly = false,
-		required = false,
+		required,
 		size = "medium",
 		value = $bindable(),
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) {
-			return {
-				...store(),
-			};
-		}
+		const storeValues = typeof store === "function" ? store() : {};
 
 		return {
-			disabled,
-			error,
-			id,
-			required,
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
 		};
 	});
 </script>

package/dist/components/molecules/comboBox/ComboBox.svelte

@@ -8,11 +8,13 @@
 	 * @typedef {Object} Props
 	 * @property {boolean} [autofocus=false] Whether the input should be autofocused on mount
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the component is disabled
-	 * @property {string} [id=""] The ID of the input element
+	 * @property {boolean} [disabled] Whether the component is disabled
+	 * @property {boolean} [error] Whether the component has an error state
+	 * @property {string} [id] The ID of the input element
 	 * @property {string} [name] The name of the input, used for form submission
 	 * @property {Array<{id: string | number, label: string}>} [options=[]] The available tag options
 	 * @property {string} [placeholder=""] The placeholder text for the input
+	 * @property {boolean} [required] Whether the component is required
 	 * @property {Array<string | number>} [value=[]] The currently selected tags, bound to the component
 	 */
 
@@ -20,20 +22,28 @@
 	let {
 		autofocus = false,
 		class: className = "",
-		disabled = false,
-		id = "",
+		disabled,
+		error,
+		id,
 		name,
 		options = [],
 		placeholder = "",
+		required,
 		value = $bindable(""),
 		...rest
 	} = $props();
 
-	let store = getContext("form-field-store");
+	let store = getContext("form-field-store") ?? null;
 
 	let localValues = $derived.by(() => {
-		if (store) return { ...store() };
-		return { disabled, id };
+		const storeValues = typeof store === "function" ? store() : {};
+
+		return {
+			disabled: disabled ?? storeValues.disabled ?? false,
+			error: error ?? storeValues.error ?? false,
+			id: id ?? storeValues.id ?? "",
+			required: required ?? storeValues.required ?? false,
+		};
 	});
 
 	let open = $state(false);
@@ -160,7 +170,9 @@
 		}
 	};
 
-	let styles = $derived(comboBoxVariants({ disabled: localValues.disabled }));
+	let styles = $derived(
+		comboBoxVariants({ disabled: localValues.disabled, error: localValues.error }),
+	);
 </script>
 
 <div

package/dist/components/molecules/comboBox/ComboBox.svelte.d.ts

@@ -16,6 +16,10 @@ declare const ComboBox: import("svelte").Component<{
      * Whether the component is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the component has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the input element
      */
@@ -35,6 +39,10 @@ declare const ComboBox: import("svelte").Component<{
      * The placeholder text for the input
      */
     placeholder?: string;
+    /**
+     * Whether the component is required
+     */
+    required?: boolean;
     /**
      * The currently selected tags, bound to the component
      */
@@ -53,6 +61,10 @@ type Props = {
      * Whether the component is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the component has an error state
+     */
+    error?: boolean;
     /**
      * The ID of the input element
      */
@@ -72,6 +84,10 @@ type Props = {
      * The placeholder text for the input
      */
     placeholder?: string;
+    /**
+     * Whether the component is required
+     */
+    required?: boolean;
     /**
      * The currently selected tags, bound to the component
      */

package/dist/components/molecules/comboBox/Value.svelte

@@ -29,6 +29,7 @@
 		bind:value
 		autocomplete="off"
 		class={styles.searchInput()}
+		id={localValues.id}
 		{name}
 		onfocus={handleOpenDropdown}
 		onbeforeinput={handleOpenDropdown}

package/dist/components/molecules/comboBox/comboBox.variants.d.ts

@@ -4,6 +4,11 @@ export const comboBoxVariants: import("tailwind-variants").TVReturnType<{
             value: string;
         };
     };
+    error: {
+        true: {
+            searchInput: string;
+        };
+    };
     dropdownPosition: {
         bottom: {
             dropdown: string;

package/dist/components/molecules/comboBox/comboBox.variants.js

@@ -24,6 +24,12 @@ const comboBoxVariants = tv({
 				value: "pointer-events-none",
 			},
 		},
+		error: {
+			true: {
+				searchInput:
+					"border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+			},
+		},
 		dropdownPosition: {
 			bottom: {
 				dropdown: "top-full mt-1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,14 +26,14 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.15.3",
-    "@tiptap/extension-color": "^3.15.3",
-    "@tiptap/extension-highlight": "^3.15.3",
-    "@tiptap/extension-placeholder": "^3.15.3",
-    "@tiptap/extension-text-align": "^3.15.3",
-    "@tiptap/extension-text-style": "^3.15.3",
-    "@tiptap/pm": "^3.15.3",
-    "@tiptap/starter-kit": "^3.15.3",
+    "@tiptap/core": "^3.17.1",
+    "@tiptap/extension-color": "^3.17.1",
+    "@tiptap/extension-highlight": "^3.17.1",
+    "@tiptap/extension-placeholder": "^3.17.1",
+    "@tiptap/extension-text-align": "^3.17.1",
+    "@tiptap/extension-text-style": "^3.17.1",
+    "@tiptap/pm": "^3.17.1",
+    "@tiptap/starter-kit": "^3.17.1",
     "bits-ui": "^2.15.4",
     "dompurify": "^3.3.1",
     "tailwind-variants": "^3.2.2",
@@ -43,39 +43,39 @@
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.0",
+    "@eslint/compat": "^2.0.1",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-a11y": "^10.2.0",
+    "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/sveltekit": "^10.1.11",
+    "@storybook/sveltekit": "^10.2.0",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.49.4",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.3",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.3",
-    "@vitest/browser": "^4.0.16",
+    "@types/node": "^25.0.10",
+    "@vitest/browser": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.1.11",
+    "eslint-plugin-storybook": "^10.2.0",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.0.0",
-    "playwright": "^1.57.0",
+    "globals": "^17.1.0",
+    "playwright": "^1.58.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "publint": "^0.3.16",
-    "storybook": "^10.1.11",
-    "svelte": "^5.46.1",
+    "publint": "^0.3.17",
+    "storybook": "^10.2.0",
+    "svelte": "^5.48.3",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vitest": "^4.0.16",
-    "vitest-browser-svelte": "^2.0.1"
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2"
   },
   "keywords": [
     "svelte"