@websline/system-components 1.2.9 → 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/icon/components/ArrowDown.svelte

@@ -0,0 +1,22 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg 
+  {width} 
+  {height} 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg"
+  {...rest}>
+  <path d="M12,20V4 M12,20l6-5.3 M12,20l-6-5.3" stroke={color} stroke-width={strokeWidth} stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/atoms/icon/components/ArrowDown.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ArrowDown;
+type ArrowDown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ArrowDown: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/ArrowUp.svelte

@@ -0,0 +1,22 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg 
+  {width} 
+  {height} 
+  viewBox="0 0 24 24" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg"
+  {...rest}>
+  <path d="M12,4v16 M12,4L6,9.3 M12,4l6,5.3" stroke={color} stroke-width={strokeWidth} stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/atoms/icon/components/ArrowUp.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ArrowUp;
+type ArrowUp = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ArrowUp: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/index.d.ts

@@ -53,6 +53,42 @@ export const registry: {
          */
         width?: number;
     }, {}, "">;
+    arrowDown: import("svelte").Component<{
+        /**
+         * Icon color
+         */
+        color?: string;
+        /**
+         * Icon height
+         */
+        height?: number;
+        /**
+         * Icon StrokeWidth
+         */
+        strokeWidth?: number;
+        /**
+         * Icon width
+         */
+        width?: number;
+    }, {}, "">;
+    arrowUp: import("svelte").Component<{
+        /**
+         * Icon color
+         */
+        color?: string;
+        /**
+         * Icon height
+         */
+        height?: number;
+        /**
+         * Icon StrokeWidth
+         */
+        strokeWidth?: number;
+        /**
+         * Icon width
+         */
+        width?: number;
+    }, {}, "">;
     attach: import("svelte").Component<{
         /**
          * Icon color

package/dist/components/atoms/icon/index.js

@@ -1,6 +1,8 @@
 import Academy from "./components/Academy.svelte";
 import Add from "./components/Add.svelte";
 import Ai from "./components/Ai.svelte";
+import ArrowDown from "./components/ArrowDown.svelte";
+import ArrowUp from "./components/ArrowUp.svelte";
 import Attach from "./components/Attach.svelte";
 import Block from "./components/Block.svelte";
 import Bold from "./components/Bold.svelte";
@@ -43,6 +45,8 @@ export const registry = {
 	academy: Academy,
 	add: Add,
 	ai: Ai,
+	arrowDown: ArrowDown,
+	arrowUp: ArrowUp,
 	attach: Attach,
 	block: Block,
 	bold: Bold,

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/input/input.variants.d.ts

@@ -1,27 +1,7 @@
 export const inputVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            adornmentStart?: import("tailwind-variants").ClassValue;
-            adornmentEnd?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
     disabled: {
-        true: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            adornmentStart?: import("tailwind-variants").ClassValue;
-            adornmentEnd?: import("tailwind-variants").ClassValue;
-        };
-    };
-    error: {
-        true: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
-            adornmentStart?: import("tailwind-variants").ClassValue;
-            adornmentEnd?: import("tailwind-variants").ClassValue;
+        true: {
+            input: string;
         };
     };
 }, {

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

@@ -11,6 +11,11 @@ const inputVariants = tv({
 		input:
 			"h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
 	},
+	variants: {
+		disabled: {
+			true: { input: "cursor-not-allowed" },
+		},
+	},
 });
 
 export { inputVariants };

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

@@ -8,7 +8,7 @@ const comboBoxVariants = tv({
 		searchInput:
 			"h-7.5 w-full appearance-none border-0 bg-transparent py-0 body-small placeholder-neutral-500 focus:ring-0",
 		dropdown:
-			"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
+			"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
 		dropdownCheckmark: "ml-auto shrink-0",
 		dropdownItem: [
 			"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",
@@ -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/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -35,7 +35,15 @@
 		...rest
 	} = $props();
 
-	let inputProps = $derived({ disabled, id, name, required, value });
+	let inputProps = $derived({
+		disabled,
+		id,
+		name,
+		required,
+		value,
+		// prevent input click from colliding with card clicks
+		onclick: (e) => e.stopPropagation(),
+	});
 	let styles = $derived(selectorCardVariants({ checked, disabled, error, type }));
 
 	let localHelperText = $derived.by(() => {
@@ -47,17 +55,15 @@
 	});
 
 	let handleClick = () => {
-		if (disabled) return;
 		if (type === "radio" && checked) return;
-
 		checked = !checked;
 	};
 </script>
 
 <div
-	aria-disabled={disabled}
 	class={styles.base({ class: className })}
 	onclick={handleClick}
+	inert={disabled}
 	{...rest}>
 	{#if type === "radio"}
 		<Radio bind:checked class={styles.input()} {...inputProps} />

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

@@ -10,7 +10,7 @@ const tagSelectorVariants = tv({
 		searchInput:
 			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-8 ui-tag-badge placeholder-current focus:ring-0",
 		dropdown:
-			"absolute w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
+			"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
 		dropdownCheckmark: "ml-auto shrink-0",
 		dropdownItem: [
 			"flex w-full grow items-center gap-2 rounded-sm p-2 ui-select-label",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.2.9",
+  "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"