noph-ui 0.18.1 → 0.18.3

package/dist/autocomplete/AutoComplete.svelte

@@ -30,7 +30,7 @@
 
 	const uid = $props.id()
 	let defaultOptionsFilter = (option: AutoCompleteOption) => {
-		return !value || option.label.includes(value)
+		return !value || option.label.toLocaleLowerCase().includes(value.toLocaleLowerCase())
 	}
 	let displayOptions = $derived(options.filter(optionsFilter || defaultOptionsFilter))
 	let useVirtualList = $derived(displayOptions.length > 4000)

package/dist/menu/Menu.svelte

@@ -78,6 +78,10 @@
 		return window
 	}
 
+	const onScroll = () => {
+		refreshValues()
+	}
+
 	$effect(() => {
 		if (anchor && element) {
 			if (style) {
@@ -89,13 +93,7 @@
 					element?.style.setProperty(key, value)
 				})
 			}
-			getScrollableParent(element).addEventListener(
-				'scroll',
-				() => {
-					refreshValues()
-				},
-				{ passive: true },
-			)
+			getScrollableParent(element).addEventListener('scroll', onScroll, { passive: true })
 			if (
 				'anchorName' in document.documentElement.style &&
 				!anchor.style.getPropertyValue('anchor-name')
@@ -105,6 +103,11 @@
 				anchor.style.setProperty('anchor-name', generatedId)
 			}
 		}
+		return () => {
+			if (element) {
+				getScrollableParent(element).removeEventListener('scroll', onScroll)
+			}
+		}
 	})
 </script>
 

package/dist/ripple/Ripple.svelte

@@ -258,7 +258,7 @@
 		endPressAnimation()
 	}
 
-	const addEvents = (el: HTMLElement) => {
+	const removeEvents = (el: HTMLElement) => {
 		el.removeEventListener('click', handleClick)
 		el.removeEventListener('contextmenu', handleContextmenu)
 		el.removeEventListener('pointercancel', handlePointercancel)
@@ -266,6 +266,10 @@
 		el.removeEventListener('pointerenter', handlePointerenter)
 		el.removeEventListener('pointerleave', handlePointerleave)
 		el.removeEventListener('pointerup', handlePointerup)
+	}
+
+	const addEvents = (el: HTMLElement) => {
+		removeEvents(el)
 
 		el.addEventListener('click', handleClick)
 		el.addEventListener('contextmenu', handleContextmenu)
@@ -285,6 +289,14 @@
 				addEvents(element)
 			}
 		}
+		return () => {
+			if (forElement) {
+				removeEvents(forElement)
+			}
+			if (element) {
+				removeEvents(element)
+			}
+		}
 	})
 </script>
 

package/dist/select/Select.svelte

@@ -102,11 +102,17 @@
 		errorTextRaw = errorText
 		selectElement?.setCustomValidity(error ? errorText : '')
 	})
+	const onReset = () => {
+		errorRaw = error
+	}
 	$effect(() => {
 		if (selectElement) {
-			selectElement.form?.addEventListener('reset', () => {
-				errorRaw = error
-			})
+			selectElement.form?.addEventListener('reset', onReset)
+		}
+		return () => {
+			if (selectElement) {
+				selectElement.form?.removeEventListener('reset', onReset)
+			}
 		}
 	})
 	const handleOptionSelect = (event: Event, option: SelectOption) => {

package/dist/text-field/TextField.svelte

@@ -60,39 +60,56 @@
 		inputElement?.setCustomValidity(error ? errorText : '')
 	})
 
+	const onReset = () => {
+		errorRaw = error
+		value = ''
+	}
+
+	const onInput = () => {
+		doValidity = true
+	}
+
+	const onInvalid = (event: Event) => {
+		event.preventDefault()
+		const { currentTarget } = event as Event & {
+			currentTarget: HTMLInputElement | HTMLTextAreaElement
+		}
+		errorRaw = true
+		if (errorText === '') {
+			errorTextRaw = currentTarget.validationMessage
+		}
+		if (focusOnInvalid && isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+			currentTarget.focus()
+		}
+	}
+
+	const onBlur = () => {
+		queueMicrotask(() => {
+			if (doValidity && inputElement) {
+				focusOnInvalid = false
+				if (checkValidity()) {
+					errorRaw = error
+					errorTextRaw = errorText
+				}
+				focusOnInvalid = true
+			}
+		})
+	}
+
 	$effect(() => {
 		if (inputElement) {
-			inputElement.form?.addEventListener('reset', () => {
-				errorRaw = error
-				value = ''
-			})
-			inputElement.addEventListener('input', () => {
-				doValidity = true
-			})
-			inputElement.addEventListener('invalid', (event) => {
-				event.preventDefault()
-				const { currentTarget } = event as Event & {
-					currentTarget: HTMLInputElement | HTMLTextAreaElement
-				}
-				errorRaw = true
-				if (errorText === '') {
-					errorTextRaw = currentTarget.validationMessage
-				}
-				if (focusOnInvalid && isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-					currentTarget.focus()
-				}
-			})
-
-			inputElement.addEventListener('blur', () => {
-				if (doValidity) {
-					focusOnInvalid = false
-					if (checkValidity()) {
-						errorRaw = error
-						errorTextRaw = errorText
-					}
-					focusOnInvalid = true
-				}
-			})
+			inputElement.form?.addEventListener('reset', onReset)
+			inputElement.addEventListener('input', onInput)
+			inputElement.addEventListener('invalid', onInvalid)
+			inputElement.addEventListener('blur', onBlur)
+		}
+		return () => {
+			if (inputElement) {
+				inputElement.removeEventListener('reset', onReset)
+				inputElement.removeEventListener('input', onInput)
+				inputElement.removeEventListener('invalid', onInvalid)
+				inputElement.removeEventListener('blur', onBlur)
+			}
 		}
 	})
 </script>
@@ -110,7 +127,7 @@
 	bind:clientWidth
 	bind:clientHeight
 	role="button"
-	tabindex="0"
+	tabindex="-1"
 	onfocus={() => {
 		inputElement?.focus()
 	}}

package/dist/tooltip/Tooltip.svelte

@@ -41,6 +41,24 @@
 		return event.pointerType === 'touch'
 	}
 
+	const onPointerenter = (event: PointerEvent) => {
+		if (!isTouch(event)) {
+			element?.showPopover()
+		}
+	}
+
+	const onPointerleave = (event: PointerEvent) => {
+		if (!isTouch(event)) {
+			element?.hidePopover()
+		}
+	}
+
+	const onPointerup = (event: PointerEvent) => {
+		if (!isTouch(event)) {
+			element?.hidePopover()
+		}
+	}
+
 	$effect(() => {
 		if (anchor && element) {
 			if ('anchorName' in document.documentElement.style) {
@@ -51,22 +69,17 @@
 					anchor.style.setProperty('anchor-name', generatedId)
 				}
 			}
-			anchor.addEventListener('pointerenter', (event: PointerEvent) => {
-				if (!isTouch(event)) {
-					element?.showPopover()
-				}
-			})
-			anchor.addEventListener('pointerleave', (event: PointerEvent) => {
-				if (!isTouch(event)) {
-					element?.hidePopover()
-				}
-			})
+			anchor.addEventListener('pointerenter', onPointerenter)
+			anchor.addEventListener('pointerleave', onPointerleave)
 			if (!keepTooltipOnClick) {
-				anchor.addEventListener('pointerup', (event: PointerEvent) => {
-					if (!isTouch(event)) {
-						element?.hidePopover()
-					}
-				})
+				anchor.addEventListener('pointerup', onPointerup)
+			}
+		}
+		return () => {
+			if (anchor) {
+				anchor.removeEventListener('pointerenter', onPointerenter)
+				anchor.removeEventListener('pointerleave', onPointerleave)
+				anchor.removeEventListener('pointerup', onPointerup)
 			}
 		}
 	})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -55,25 +55,25 @@
   "devDependencies": {
     "@eslint/js": "^9.29.0",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.53.0",
+    "@playwright/test": "^1.53.1",
     "@sveltejs/adapter-vercel": "^5.7.2",
-    "@sveltejs/kit": "^2.21.5",
+    "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.2",
+    "eslint-plugin-svelte": "^3.9.3",
     "globals": "^16.2.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.0",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.34.3",
-    "svelte-check": "^4.2.1",
+    "svelte": "^5.34.7",
+    "svelte-check": "^4.2.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.1",
+    "typescript-eslint": "^8.35.0",
     "vite": "^6.3.5",
-    "vitest": "^3.2.3"
+    "vitest": "^3.2.4"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",