noph-ui 0.17.0 → 0.17.2

package/dist/select/Select.svelte

@@ -29,12 +29,15 @@
 		autofocus,
 		onchange,
 		oninput,
+		reportValidity = $bindable(),
+		checkValidity = $bindable(),
 		multiple,
 		clampMenuWidth = false,
 		...attributes
 	}: SelectProps = $props()
 
 	const uid = $props.id()
+	let doValidity = $state(false)
 	if (value === undefined) {
 		if (multiple) {
 			value = options.filter((option) => option.selected).map((option) => option.value)
@@ -74,6 +77,26 @@
 		}
 		return options.find((option) => option.value === value)?.label || ''
 	})
+
+	reportValidity = () => {
+		if (selectElement) {
+			const valid = selectElement.reportValidity()
+			if (valid) {
+				errorRaw = error
+				errorTextRaw = errorText
+			}
+			return valid
+		}
+		return false
+	}
+
+	checkValidity = () => {
+		if (selectElement) {
+			return selectElement.checkValidity()
+		}
+		return false
+	}
+
 	$effect(() => {
 		errorRaw = error
 		errorTextRaw = errorText
@@ -107,6 +130,10 @@
 		}
 		event.preventDefault()
 		tick().then(() => {
+			if (doValidity && checkValidity()) {
+				errorRaw = error
+				errorTextRaw = errorText
+			}
 			selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
 		})
 	}
@@ -222,12 +249,12 @@
 									event.preventDefault()
 									const { currentTarget } = event
 									errorRaw = true
+									doValidity = true
 									if (errorText === '') {
 										errorTextRaw = currentTarget.validationMessage
 									}
 									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
 										field?.focus()
-										menuElement?.showPopover()
 									}
 								}}
 								bind:value
@@ -251,12 +278,12 @@
 									event.preventDefault()
 									const { currentTarget } = event
 									errorRaw = true
+									doValidity = true
 									if (errorText === '') {
 										errorTextRaw = currentTarget.validationMessage
 									}
 									if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
 										field?.focus()
-										menuElement?.showPopover()
 									}
 								}}
 								bind:value

package/dist/select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProps } from './types.ts';
-declare const Select: import("svelte").Component<SelectProps, {}, "element" | "value">;
+declare const Select: import("svelte").Component<SelectProps, {}, "element" | "value" | "reportValidity" | "checkValidity">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/select/types.d.ts

@@ -18,4 +18,6 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autoco
     element?: HTMLSpanElement;
     options: SelectOption[];
     clampMenuWidth?: boolean;
+    reportValidity?: () => boolean;
+    checkValidity?: () => boolean;
 }

package/dist/text-field/TextField.svelte

@@ -109,12 +109,6 @@
 	onfocus={() => {
 		inputElement?.focus()
 	}}
-	onkeydown={(event) => {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault()
-			inputElement?.focus()
-		}
-	}}
 >
 	<div
 		class="field"

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "inputElement" | "reportValidity" | "checkValidity">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "reportValidity" | "checkValidity" | "inputElement">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {