noph-ui 0.26.13 → 0.27.0

package/dist/autocomplete/AutoComplete.svelte

@@ -11,15 +11,13 @@
 		variant = 'outlined',
 		element = $bindable(),
 		populated,
-		reportValidity = $bindable(),
-		checkValidity = $bindable(),
 		clampMenuWidth = false,
 		children,
 		optionsFilter,
-		onoptionselect = (option: AutoCompleteOption) => {
+		onoptionselect = (option, menuElement) => {
 			value = option.label
 			finalPopulated = populated
-			menuElement?.hidePopover()
+			menuElement.hidePopover()
 		},
 		onkeydown,
 		onclick,
@@ -67,7 +65,9 @@
 	}
 
 	const selectOption = (option: AutoCompleteOption) => {
-		onoptionselect(option)
+		if (menuElement) {
+			onoptionselect(option, menuElement)
+		}
 	}
 
 	$effect(() => {
@@ -195,8 +195,6 @@
 		}
 		onkeydown?.(event)
 	}}
-	bind:reportValidity
-	bind:checkValidity
 	bind:element
 	>{@render children?.()}
 </TextField>

package/dist/autocomplete/AutoComplete.svelte.d.ts

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

package/dist/autocomplete/types.d.ts

@@ -6,7 +6,7 @@ export interface AutoCompleteOption {
 export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
     options: AutoCompleteOption[];
     optionsFilter?: (option: AutoCompleteOption) => boolean;
-    onoptionselect?: (option: AutoCompleteOption) => void;
+    onoptionselect?: (option: AutoCompleteOption, menuElement: HTMLDivElement) => void;
     clampMenuWidth?: boolean;
     showPopover?: () => void;
     hidePopover?: () => void;

package/dist/select/NativeSelect.svelte

@@ -4,16 +4,18 @@
 		label?: string
 		noAsterisk?: boolean
 		supportingText?: string
-		error?: boolean
-		errorText?: string
+		issues?:
+			| {
+					message: string
+			  }[]
+			| undefined
 		variant?: 'outlined' | 'filled'
 		element?: HTMLSpanElement
 	}
 	let {
 		id,
 		supportingText,
-		error,
-		errorText,
+		issues,
 		variant = 'outlined',
 		value = $bindable(),
 		label,
@@ -21,30 +23,26 @@
 		required,
 		noAsterisk,
 		children,
-		onchange,
-		oninvalid,
+		oninput,
 		...attributes
 	}: SelectProps = $props()
 	const uid = $props.id()
 	const selectId = id ?? `select-${uid}`
 
 	let animateLabel = $state(false)
-	let errorTextRaw = $derived(errorText)
-	let errorRaw = $derived(error)
+	let errorText = $derived(issues?.map((issue) => issue.message).join(', '))
 </script>
 
 <div
 	class={[
 		'np-select-container',
 		variant,
-		errorRaw && 'error',
 		disabled && 'disabled',
 		required && !noAsterisk && 'asterisk',
 		(value === null || value === undefined || value === '') && 'is-empty',
 		animateLabel && 'animate-label',
 		attributes.class,
 	]}
-	aria-disabled={disabled}
 >
 	{#if variant === 'outlined'}
 		<div class="np-select-outline">
@@ -77,34 +75,22 @@
 			) {
 				animateLabel = true
 			}
-			onchange?.(event)
-		}}
-		oninvalid={(event) => {
-			event.preventDefault()
-			const { currentTarget } = event
-			errorRaw = true
-			if (errorText === undefined) {
-				errorTextRaw = currentTarget.validationMessage
-			}
-			oninvalid?.(event)
+			oninput?.(event)
 		}}
 		{disabled}
 		{required}
 		id={selectId}
-		aria-invalid={error}
-		aria-errormessage={errorTextRaw && errorRaw ? `supporting-text-${uid}` : undefined}
-		aria-describedby={supportingText && (!errorTextRaw || !errorRaw)
-			? `supporting-text-${uid}`
-			: undefined}
+		aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
+		aria-describedby={supportingText && !errorText ? `supporting-text-${uid}` : undefined}
 		bind:value
 		{...attributes}
 		class="np-select"
 	>
 		{@render children?.()}
 	</select>
-	{#if supportingText || (errorTextRaw && errorRaw)}
-		<div id="supporting-text-{uid}" class="supporting-text" role={errorRaw ? 'alert' : undefined}>
-			{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
+	{#if supportingText || errorText}
+		<div id="supporting-text-{uid}" class="supporting-text" role={errorText ? 'alert' : undefined}>
+			{errorText ?? supportingText}
 		</div>
 	{/if}
 </div>
@@ -392,27 +378,31 @@
 		padding: 0.25rem 1rem 0;
 	}
 
-	.error .supporting-text,
-	.error label,
-	.error .arrow,
-	.error:focus-within label {
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])) .supporting-text,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])) label,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])) .arrow,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):focus-within label {
 		color: var(--np-color-error);
 	}
 
-	.error:hover label,
-	.error:hover .arrow {
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):hover label,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):hover .arrow {
 		color: var(--np-color-on-error-container);
 	}
 
-	.error .np-select-outline,
-	.error:focus-within .np-select-outline,
-	.error .np-select-filled,
-	.error:focus-within .np-select-filled {
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])) .np-select-outline,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):focus-within
+		.np-select-outline,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])) .np-select-filled,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):focus-within
+		.np-select-filled {
 		border-color: var(--np-color-error);
 	}
 
-	.error:hover .np-select-outline,
-	.error:hover .np-select-filled {
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):hover
+		.np-select-outline,
+	.np-select-container:has(.np-select:is(:user-invalid, [aria-invalid='true'])):hover
+		.np-select-filled {
 		border-color: var(--np-color-on-error-container);
 	}
 

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

@@ -3,8 +3,9 @@ interface SelectProps extends HTMLSelectAttributes {
     label?: string;
     noAsterisk?: boolean;
     supportingText?: string;
-    error?: boolean;
-    errorText?: string;
+    issues?: {
+        message: string;
+    }[] | undefined;
     variant?: 'outlined' | 'filled';
     element?: HTMLSpanElement;
 }

package/dist/select/Select.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Menu from '../menu/Menu.svelte'
-	import { isFirstInvalidControlInForm } from '../text-field/report-validity.js'
 	import type { SelectOption, SelectProps } from './types.ts'
 	import Item from '../list/Item.svelte'
 	import { tick } from 'svelte'
@@ -10,8 +9,7 @@
 	let {
 		options = [],
 		value = $bindable(),
-		error = false,
-		errorText = '',
+		issues,
 		supportingText = '',
 		tabindex = 0,
 		start,
@@ -29,8 +27,6 @@
 		autofocus,
 		onchange,
 		oninput,
-		reportValidity = $bindable(),
-		checkValidity = $bindable(),
 		multiple,
 		virtualThreshold = 300,
 		clampMenuWidth = false,
@@ -38,7 +34,6 @@
 	}: 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)
@@ -59,8 +54,7 @@
 
 	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
 
-	let errorTextRaw: string = $state(errorText)
-	let errorRaw = $state(error)
+	let errorText = $derived(issues?.map((i) => i.message).join(', '))
 	let selectElement = $state<HTMLSelectElement>()
 	let menuElement = $state<HTMLDivElement>()
 	let anchorElement = $state<HTMLDivElement>()
@@ -94,44 +88,6 @@
 		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
-		selectElement?.setCustomValidity(error ? errorText : '')
-	})
-	const onReset = () => {
-		errorRaw = error
-	}
-	$effect(() => {
-		if (selectElement) {
-			selectElement.form?.addEventListener('reset', onReset)
-		}
-		return () => {
-			if (selectElement) {
-				selectElement.form?.removeEventListener('reset', onReset)
-			}
-		}
-	})
-
 	let cachedRowHeight = 0
 	const ensureRowHeight = () => {
 		if (!cachedRowHeight && menuElement) {
@@ -158,14 +114,6 @@
 		else if (bottom > scrollTop + clientHeight) viewport.scrollTop = bottom - clientHeight
 	}
 
-	const finalizeSelection = async () => {
-		await tick()
-		if (doValidity && checkValidity()) {
-			errorRaw = error
-			errorTextRaw = errorText
-		}
-		selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
-	}
 	const toggleValue = (option: SelectOption) => {
 		if (multiple) {
 			let arr = Array.isArray(value) ? [...value] : []
@@ -185,7 +133,8 @@
 		toggleValue(option)
 		if (!multiple) menuElement?.hidePopover()
 		event.preventDefault()
-		await finalizeSelection()
+		await tick()
+		selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
 	}
 
 	const openMenuAndFocus = async (index: number) => {
@@ -262,23 +211,6 @@
 			performTypeahead('')
 		}
 	}
-
-	const handleInvalid = (
-		event: Event & {
-			currentTarget: EventTarget & HTMLSelectElement
-		},
-	) => {
-		event.preventDefault()
-		const { currentTarget } = event
-		errorRaw = true
-		doValidity = true
-		if (errorText === '') {
-			errorTextRaw = currentTarget.validationMessage
-		}
-		if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
-			field?.focus()
-		}
-	}
 </script>
 
 {#snippet arrows()}
@@ -301,7 +233,6 @@
 	<div
 		{id}
 		class="field"
-		class:error={errorRaw}
 		class:no-label={!label?.length}
 		class:with-start={start}
 		class:menu-open={menuOpen}
@@ -416,7 +347,7 @@
 						{#if multiple}
 							<select
 								tabindex="-1"
-								aria-invalid={errorRaw}
+								aria-invalid={attributes['aria-invalid']}
 								{disabled}
 								{required}
 								{name}
@@ -424,7 +355,6 @@
 								multiple
 								{onchange}
 								{oninput}
-								oninvalid={handleInvalid}
 								bind:value
 								bind:this={selectElement}
 							>
@@ -437,13 +367,13 @@
 						{:else}
 							<select
 								tabindex="-1"
+								aria-invalid={attributes['aria-invalid']}
 								{disabled}
 								{required}
 								{name}
 								{form}
 								{onchange}
 								{oninput}
-								oninvalid={handleInvalid}
 								bind:value
 								bind:this={selectElement}
 							>
@@ -470,10 +400,10 @@
 				</div>
 			</div>
 		</div>
-		{#if supportingText || (errorTextRaw && errorRaw)}
-			<div class="supporting-text" role={errorRaw ? 'alert' : undefined}>
+		{#if supportingText || errorText}
+			<div class="supporting-text" role={errorText ? 'alert' : undefined}>
 				<span>
-					{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
+					{errorText ?? supportingText}
 				</span>
 			</div>
 		{/if}
@@ -651,10 +581,10 @@
 		border-bottom-color: var(--np-color-primary);
 		border-bottom-width: 3px;
 	}
-	.error .active-indicator::before {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .active-indicator::before {
 		border-bottom-color: var(--np-color-error);
 	}
-	.error .active-indicator::after {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .active-indicator::after {
 		border-bottom-color: var(--np-color-error);
 	}
 	.disabled .active-indicator::before {
@@ -752,7 +682,7 @@
 		justify-content: space-between;
 		padding: 0.25rem 1rem 0;
 	}
-	.error .supporting-text {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .supporting-text {
 		color: var(--np-color-error);
 	}
 	.disabled .supporting-text {
@@ -840,8 +770,8 @@
 		opacity: 1;
 	}
 
-	.field:not(.error).menu-open .down,
-	.field:not(.error):focus .down {
+	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .down,
+	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .down {
 		color: var(--np-color-primary);
 	}
 	.icon .down {
@@ -886,8 +816,8 @@
 		margin-inline-start: 1rem;
 		margin-inline-end: 0.75rem;
 	}
-	.error .start,
-	.error .end {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .start,
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .end {
 		color: var(--np-color-error);
 	}
 	.disabled .start,
@@ -1006,9 +936,9 @@
 	.field:focus .label {
 		color: var(--np-color-primary);
 	}
-	.error .label,
-	.error.menu-open .label,
-	.error:focus .label {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .label,
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])).menu-open .label,
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])):focus .label {
 		color: var(--np-color-error);
 	}
 	.disabled .label {
@@ -1162,9 +1092,9 @@
 		border-color: var(--np-color-primary);
 		color: var(--np-color-primary);
 	}
-	.error .np-outline,
-	.error.menu-open .np-outline,
-	.error:focus .np-outline {
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])) .np-outline,
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])).menu-open .np-outline,
+	.field:has(select:is(:user-invalid, [aria-invalid='true'])):focus .np-outline {
 		border-color: var(--np-color-error);
 	}
 	.disabled .np-outline {

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" | "reportValidity" | "checkValidity">;
+declare const Select: import("svelte").Component<SelectProps, {}, "element" | "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/select/types.d.ts

@@ -9,8 +9,9 @@ export interface SelectOption {
 export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autocomplete'> {
     label?: string;
     supportingText?: string;
-    error?: boolean;
-    errorText?: string;
+    issues?: {
+        message: string;
+    }[];
     variant?: 'outlined' | 'filled';
     start?: Snippet;
     end?: Snippet;
@@ -18,7 +19,5 @@ export interface SelectProps extends Omit<HTMLSelectAttributes, 'size' | 'autoco
     element?: HTMLSpanElement;
     options: SelectOption[];
     clampMenuWidth?: boolean;
-    reportValidity?: () => boolean;
-    checkValidity?: () => boolean;
     virtualThreshold?: number;
 }

package/dist/text-field/TextField.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-	import { isFirstInvalidControlInForm } from './report-validity.js'
-	import type { FocusEventHandler, EventHandler } from 'svelte/elements'
 	import type { TextFieldProps } from './types.ts'
 
 	let {
 		value = $bindable(),
-		error = false,
-		errorText = '',
+		issues,
 		prefixText = '',
 		suffixText = '',
 		supportingText = '',
@@ -19,13 +16,8 @@
 		element = $bindable(),
 		populated = false,
 		inputElement = $bindable(),
-		reportValidity = $bindable(),
-		checkValidity = $bindable(),
+		placeholder = ' ',
 		children,
-		oninput,
-		oninvalid,
-		onfocus,
-		onblur,
 		focused = $bindable(false),
 		clientWidth = $bindable(),
 		clientHeight = $bindable(),
@@ -33,106 +25,7 @@
 	}: TextFieldProps = $props()
 
 	const uid = $props.id()
-
-	let errorRaw: boolean = $state(error)
-	let errorTextRaw: string = $state(errorText)
-	let focusOnInvalid = $state(true)
-	let doValidity = $state(false)
-
-	reportValidity = () => {
-		if (inputElement) {
-			const valid = inputElement.reportValidity()
-			if (valid) {
-				errorRaw = error
-				errorTextRaw = errorText
-			}
-			return valid
-		}
-		return false
-	}
-
-	checkValidity = () => {
-		if (inputElement) {
-			return inputElement.checkValidity()
-		}
-		return false
-	}
-
-	$effect(() => {
-		errorRaw = error
-		errorTextRaw = errorText
-		inputElement?.setCustomValidity(error ? errorText : '')
-	})
-
-	const onReset = () => {
-		errorRaw = error
-	}
-
-	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
-			}
-		} else {
-			focusOnInvalid = true
-		}
-		;(onblur as FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>)?.(event)
-	}
-
-	$effect(() => {
-		if (inputElement) {
-			inputElement.form?.addEventListener('reset', onReset)
-		}
-		return () => {
-			if (inputElement) {
-				inputElement.form?.removeEventListener('reset', onReset)
-			}
-		}
-	})
+	let errorText = $derived(issues?.map((issue) => issue.message).join(', '))
 </script>
 
 <label
@@ -149,14 +42,12 @@
 >
 	<div
 		class="field"
-		class:error={errorRaw}
 		class:resizable={attributes.type === 'textarea'}
 		class:no-label={!label?.length}
 		class:with-start={start}
 		class:with-end={end}
 		class:disabled={attributes.disabled}
-		class:populated={(value !== '' && value !== undefined && value !== null) || populated}
-		class:focused
+		class:populated
 		class:outlined={variant === 'outlined'}
 	>
 		<div class="container-overflow">
@@ -206,16 +97,13 @@
 					<div class="content">
 						{#if attributes.type === 'textarea'}
 							<textarea
-								aria-errormessage={errorTextRaw && errorRaw ? `supporting-text-${uid}` : undefined}
-								aria-describedby={supportingText && (!errorTextRaw || !errorRaw)
+								aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
+								aria-describedby={supportingText && !errorText
 									? `supporting-text-${uid}`
 									: undefined}
 								{...attributes}
-								aria-invalid={errorRaw}
-								oninput={onInputEvent}
-								oninvalid={onInvalidEvent}
-								onfocus={onFocusEvent}
-								onblur={onBlurEvent}
+								{placeholder}
+								bind:focused
 								bind:value
 								bind:this={inputElement}
 								class="input"
@@ -229,20 +117,14 @@
 									</span>
 								{/if}
 								<input
-									aria-errormessage={errorTextRaw && errorRaw
-										? `supporting-text-${uid}`
-										: undefined}
-									aria-describedby={supportingText && (!errorTextRaw || !errorRaw)
+									aria-errormessage={errorText ? `supporting-text-${uid}` : undefined}
+									aria-describedby={supportingText && !errorText
 										? `supporting-text-${uid}`
 										: undefined}
 									{...attributes}
+									{placeholder}
 									bind:value
 									bind:this={inputElement}
-									aria-invalid={errorRaw}
-									oninput={onInputEvent}
-									oninvalid={onInvalidEvent}
-									onfocus={onFocusEvent}
-									onblur={onBlurEvent}
 									class="input"
 								/>
 								{@render children?.()}
@@ -262,10 +144,10 @@
 				{/if}
 			</div>
 		</div>
-		{#if supportingText || (errorTextRaw && errorRaw) || attributes.maxlength}
-			<div class="supporting-text" role={errorRaw ? 'alert' : undefined}>
+		{#if supportingText || errorText || attributes.maxlength}
+			<div class="supporting-text" role={errorText ? 'alert' : undefined}>
 				<span id="supporting-text-{uid}">
-					{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
+					{errorText ?? supportingText}
 				</span>
 				{#if attributes.maxlength}
 					<span>{value?.length || 0}/{attributes.maxlength}</span>
@@ -306,13 +188,16 @@
 		);
 		border-bottom-width: 3px;
 	}
-	.error .active-indicator::before {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .active-indicator::before,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .active-indicator::before {
 		border-bottom-color: var(--np-color-error);
 	}
-	.error .active-indicator::after {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .active-indicator::after,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .active-indicator::after {
 		border-bottom-color: var(--np-color-error);
 	}
-	.error:hover .active-indicator::after {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])):hover .active-indicator::after,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])):hover .active-indicator::after {
 		border-bottom-color: var(--np-color-on-error-container);
 	}
 	.disabled .active-indicator::before {
@@ -412,7 +297,8 @@
 		justify-content: space-between;
 		padding: 0.25rem 1rem 0;
 	}
-	.error .supporting-text {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .supporting-text,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .supporting-text {
 		color: var(--np-color-error);
 	}
 	.disabled .supporting-text {
@@ -494,7 +380,10 @@
 	.no-label .content,
 	.field:has(input:focus-visible) .content,
 	.field:has(textarea:focus-visible) .content,
-	.field.populated .content {
+	.field:has(input:-webkit-autofill) .content,
+	.field.populated .content,
+	.field:has(input:not(:placeholder-shown)) .content,
+	.field:has(textarea:not(:placeholder-shown)) .content {
 		opacity: 1;
 	}
 
@@ -564,11 +453,13 @@
 		margin-inline-start: 1rem;
 		margin-inline-end: 0.75rem;
 	}
-	.error .end {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .end,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .end {
 		color: var(--np-color-error);
 	}
 
-	.error:hover .end {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])):hover .end,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])):hover .end {
 		color: var(--np-color-on-error-container);
 	}
 	.disabled .start,
@@ -620,11 +511,21 @@
 	.with-end .np-outline .label-wrapper {
 		margin-inline-end: 3.25rem;
 	}
+	.with-start:has(input:-webkit-autofill) .with-start:has(input:focus-visible) .label-wrapper,
+	.with-start:has(input:not(:placeholder-shown))
+		.with-start:has(input:focus-visible)
+		.label-wrapper,
+	.with-start:has(textarea:not(:placeholder-shown))
+		.with-start:has(input:focus-visible)
+		.label-wrapper,
 	.with-start.populated .with-start:has(input:focus-visible) .label-wrapper,
 	.with-start:has(textarea:focus-visible) .label-wrapper {
 		inset-inline-end: -2.25rem;
 	}
 
+	.with-end:has(input:-webkit-autofill) .with-end:has(input:focus-visible) .label-wrapper,
+	.with-end:has(input:not(:placeholder-shown)) .with-end:has(input:focus-visible) .label-wrapper,
+	.with-end:has(textarea:not(:placeholder-shown)) .with-end:has(input:focus-visible) .label-wrapper,
 	.with-end.populated .with-end:has(input:focus-visible) .label-wrapper,
 	.with-end:has(textarea:focus-visible) .label-wrapper {
 		margin-inline-end: 1rem;
@@ -650,7 +551,10 @@
 		top: 1rem;
 		inset-inline-start: 0rem;
 	}
+	.field:has(input:-webkit-autofill) .label,
 	.field.populated .label,
+	.field:has(input:not(:placeholder-shown)) .label,
+	.field:has(textarea:not(:placeholder-shown)) .label,
 	.field:has(input:focus-visible) .label,
 	.field:has(textarea:focus-visible) .label {
 		font-size: 0.75rem;
@@ -659,7 +563,10 @@
 		position: absolute;
 		top: var(--floating-label-top, 0.5rem);
 	}
+	.with-start:has(input:-webkit-autofill) .label,
 	.with-start.populated .label,
+	.with-start:has(input:not(:placeholder-shown)) .label,
+	.with-start:has(textarea:not(:placeholder-shown)) .label,
 	.with-start:has(input:focus-visible) .label,
 	.with-start:has(textarea:focus-visible) .label {
 		inset-inline-start: var(--floating-label-inline-start, 0);
@@ -688,14 +595,16 @@
 	.field:has(textarea:focus-visible) .label {
 		color: var(--_label-text-color, var(--np-color-primary));
 	}
-	.error .label,
-	.error:has(input:focus-visible) .label,
-	.error:has(textarea:focus-visible) .label {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .label,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .label,
+	.field:has(input:is(:user-invalid, [aria-invalid='true']):focus-visible) .label,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true']):focus-visible) .label {
 		color: var(--np-color-error);
 	}
-	.error:hover .label,
-	.error:has(input:focus-visible):hover .label,
-	.error:has(textarea:focus-visible):hover .label {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])):hover .label,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])):hover .label,
+	.field:has(input:is(:user-invalid, [aria-invalid='true']):focus-visible):hover .label,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true']):focus-visible):hover .label {
 		color: var(--np-color-on-error-container);
 	}
 
@@ -710,6 +619,9 @@
 		overflow: hidden;
 	}
 	.disabled.no-label .content,
+	.disabled:has(input:-webkit-autofill) .content,
+	.disabled:has(input:not(:placeholder-shown)) .content,
+	.disabled:has(textarea:not(:placeholder-shown)) .content,
 	.disabled.populated .content {
 		opacity: 0.38;
 	}
@@ -786,6 +698,9 @@
 	}
 	.field:has(input:focus-visible) .outline-notch::before,
 	.field:has(textarea:focus-visible) .outline-notch::before,
+	.field:has(input:-webkit-autofill) .outline-notch::before,
+	.field:has(input:not(:placeholder-shown)) .outline-notch::before,
+	.field:has(textarea:not(:placeholder-shown)) .outline-notch::before,
 	.field.populated .outline-notch::before {
 		border-top-style: none;
 	}
@@ -854,9 +769,10 @@
 		color: var(--np-color-on-surface);
 	}
 
-	.error .np-outline,
-	.error:has(input:focus-visible) .np-outline,
-	.error:has(textarea:focus-visible) .np-outline {
+	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .np-outline,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .np-outline,
+	.field:has(input:is(:user-invalid, [aria-invalid='true']):focus-visible) .np-outline,
+	.field:has(textarea:is(:user-invalid, [aria-invalid='true']):focus-visible) .np-outline {
 		border-color: var(--np-color-error);
 	}
 
@@ -875,9 +791,4 @@
 	.disabled .outline-notch {
 		opacity: 0.12;
 	}
-
-	input:-webkit-autofill {
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: var(--np-color-on-surface);
-	}
 </style>

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" | "reportValidity" | "checkValidity" | "inputElement" | "clientWidth" | "clientHeight" | "focused">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "inputElement" | "clientWidth" | "clientHeight" | "focused">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -3,8 +3,9 @@ import type { HTMLInputAttributes, HTMLTextareaAttributes } from 'svelte/element
 interface FieldProps {
     label?: string;
     supportingText?: string;
-    error?: boolean;
-    errorText?: string;
+    issues?: {
+        message: string;
+    }[];
     prefixText?: string;
     suffixText?: string;
     variant?: 'outlined' | 'filled';
@@ -14,8 +15,6 @@ interface FieldProps {
     element?: HTMLSpanElement;
     inputElement?: HTMLInputElement | HTMLTextAreaElement;
     populated?: boolean;
-    reportValidity?: () => boolean;
-    checkValidity?: () => boolean;
     clientWidth?: number;
     clientHeight?: number;
     focused?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.26.13",
+  "version": "0.27.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -54,15 +54,15 @@
     "svelte": "^5.32.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.36.0",
+    "@eslint/js": "^9.37.0",
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.55.1",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.43.7",
+    "@sveltejs/kit": "^2.44.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.36.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.4",
     "globals": "^16.4.0",
@@ -73,7 +73,7 @@
     "svelte-check": "^4.3.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.8",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4"
   },
   "svelte": "./dist/index.js",

package/dist/text-field/report-validity.d.ts

@@ -1 +0,0 @@
-export declare const isFirstInvalidControlInForm: (form: HTMLFormElement | null, control: HTMLElement) => boolean;

package/dist/text-field/report-validity.js

@@ -1,6 +0,0 @@
-export const isFirstInvalidControlInForm = (form, control) => {
-    if (!form) {
-        return true;
-    }
-    return form.querySelector(':invalid') === control;
-};