noph-ui 0.18.2 → 0.18.4

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/chip/ChipSet.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
-	import type { ChipSetProps } from './types.ts'
+	import { setContext } from 'svelte'
+	import type { ChipSetContext, ChipSetProps } from './types.ts'
 
 	let { children, ...attributes }: ChipSetProps = $props()
+	let chipSet: ChipSetContext = $state({
+		chips: [],
+	})
+	setContext('chipSet', chipSet)
 </script>
 
 {#if children}
-	<div class={['np-chip-set', attributes.class]} style={attributes.style} role="toolbar">
+	<div
+		class={['np-chip-set', chipSet.chips.length > 0 && 'np-chip-set-has-chips', attributes.class]}
+		style={attributes.style}
+		role="toolbar"
+	>
 		{@render children()}
 	</div>
 {/if}
 
 <style>
+	.np-chip-set-has-chips {
+		margin-right: 0.5rem;
+		padding-block: 2px;
+		padding-right: 2px;
+	}
 	.np-chip-set {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.5rem;
+		overflow: auto;
 		align-items: center;
 		min-width: 0;
 	}

package/dist/chip/FilterChip.svelte

@@ -3,7 +3,8 @@
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FilterChipProps } from './types.ts'
+	import { getContext, onMount } from 'svelte'
+	import type { ChipSetContext, FilterChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -23,6 +24,17 @@
 	}: FilterChipProps = $props()
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
+	let chipSet: ChipSetContext = getContext('chipSet')
+
+	onMount(() => {
+		chipSet.chips.push({ label: label, name: name, value: value })
+		return () => {
+			const index = chipSet.chips.findIndex((chip) => chip.value === value)
+			if (index !== -1) {
+				chipSet.chips.splice(index, 1)
+			}
+		}
+	})
 
 	$effect(() => {
 		if (group && value) {

package/dist/chip/InputChip.svelte

@@ -2,8 +2,8 @@
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
-	import type { InputChipProps } from './types.ts'
+	import { getContext, onMount } from 'svelte'
+	import type { ChipSetContext, InputChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -20,6 +20,7 @@
 
 	let chipLabel: HTMLDivElement | undefined = $state()
 	let visible = $state(false)
+	let chipSet: ChipSetContext = getContext('chipSet')
 
 	onMount(() => {
 		const observer = new IntersectionObserver((entries) => {
@@ -34,8 +35,15 @@
 		if (element) {
 			observer.observe(element)
 		}
+		chipSet.chips.push({ label: label, name: name, value: value })
 
-		return () => observer.disconnect()
+		return () => {
+			observer.disconnect()
+			const index = chipSet.chips.findIndex((chip) => chip.value === value)
+			if (index !== -1) {
+				chipSet.chips.splice(index, 1)
+			}
+		}
 	})
 </script>
 

package/dist/chip/types.d.ts

@@ -46,4 +46,11 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
         currentTarget: EventTarget & HTMLButtonElement;
     }) => void;
 }
+export interface ChipSetContext {
+    chips: {
+        label: string;
+        name: string | undefined;
+        value: string | number | undefined;
+    }[];
+}
 export {};

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isFirstInvalidControlInForm } from './report-validity.js'
-	import type { FocusEventHandler } from 'svelte/elements'
+	import type { FocusEventHandler, EventHandler } from 'svelte/elements'
 	import type { TextFieldProps } from './types.ts'
 
 	let {
@@ -22,6 +22,8 @@
 		reportValidity = $bindable(),
 		checkValidity = $bindable(),
 		children,
+		oninput,
+		oninvalid,
 		onfocus,
 		onblur,
 		focused = $bindable(false),
@@ -60,39 +62,72 @@
 		inputElement?.setCustomValidity(error ? errorText : '')
 	})
 
+	const onReset = () => {
+		errorRaw = error
+		value = ''
+	}
+
+	const onInputEvent = (
+		event: Event & {
+			currentTarget: (EventTarget & HTMLInputElement) | HTMLTextAreaElement
+		},
+	) => {
+		doValidity = true
+		;(oninput as EventHandler)?.(event)
+	}
+
+	const onInvalidEvent = (
+		event: Event & {
+			currentTarget: HTMLInputElement | HTMLTextAreaElement
+		},
+	) => {
+		event.preventDefault()
+		const { currentTarget } = event
+		errorRaw = true
+		if (errorText === '') {
+			errorTextRaw = currentTarget.validationMessage
+		}
+		if (focusOnInvalid && isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+			currentTarget.focus()
+		}
+		;(oninvalid as EventHandler)?.(event)
+	}
+
+	const onFocusEvent = (
+		event: FocusEvent & {
+			currentTarget: EventTarget & (HTMLInputElement | HTMLTextAreaElement)
+		},
+	) => {
+		focused = true
+		;(onfocus as FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>)?.(event)
+	}
+
+	const onBlurEvent = (
+		event: FocusEvent & {
+			currentTarget: EventTarget & (HTMLInputElement | HTMLTextAreaElement)
+		},
+	) => {
+		focused = false
+		if (doValidity) {
+			focusOnInvalid = false
+			if (checkValidity()) {
+				errorRaw = error
+				errorTextRaw = errorText
+			}
+		} else {
+			focusOnInvalid = true
+		}
+		;(onblur as FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>)?.(event)
+	}
+
 	$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)
+		}
+		return () => {
+			if (inputElement) {
+				inputElement.form?.removeEventListener('reset', onReset)
+			}
 		}
 	})
 </script>
@@ -175,14 +210,10 @@
 							<textarea
 								aria-label={label}
 								{...attributes}
-								onfocus={(event) => {
-									focused = true
-									;(onfocus as FocusEventHandler<HTMLTextAreaElement>)?.(event)
-								}}
-								onblur={(event) => {
-									focused = false
-									;(onblur as FocusEventHandler<HTMLTextAreaElement>)?.(event)
-								}}
+								oninput={onInputEvent}
+								oninvalid={onInvalidEvent}
+								onfocus={onFocusEvent}
+								onblur={onBlurEvent}
 								bind:value
 								bind:this={inputElement}
 								class="input"
@@ -201,14 +232,10 @@
 									{...attributes}
 									bind:value
 									bind:this={inputElement}
-									onfocus={(event) => {
-										focused = true
-										;(onfocus as FocusEventHandler<HTMLInputElement>)?.(event)
-									}}
-									onblur={(event) => {
-										focused = false
-										;(onblur as FocusEventHandler<HTMLInputElement>)?.(event)
-									}}
+									oninput={onInputEvent}
+									oninvalid={onInvalidEvent}
+									onfocus={onFocusEvent}
+									onblur={onBlurEvent}
 									class="input"
 									aria-invalid={errorRaw}
 								/>
@@ -497,7 +524,6 @@
 	}
 	:global(.content .input-wrapper .np-chip-set) {
 		margin-top: calc(var(--top-space, 1.5rem) - 4px);
-		margin-right: 0.5rem;
 	}
 
 	.prefix {

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.2",
+  "version": "0.18.4",
   "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",