noph-ui 0.17.1 → 0.17.3

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,19 +249,21 @@
 									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
 								bind:this={selectElement}
 							>
 								{#each selectedOption as option, index (index)}
-									<option value={option.value} selected={option.selected}>{option.label}</option>
+									<option class="np-option" value={option.value} selected={option.selected}
+										>{option.label}</option
+									>
 								{/each}
 							</select>
 						{:else}
@@ -251,12 +280,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
@@ -568,6 +597,12 @@
 		}
 	}
 
+	.np-option {
+		width: 0;
+		height: 0;
+		display: block;
+	}
+
 	.no-label .content,
 	.field.menu-open .content,
 	.field:focus .content,

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.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.1",
+  "version": "0.17.3",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {