noph-ui 0.51.2 → 0.53.0

package/dist/select/Select.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import '../internal/field.css'
 	import { formReset } from '../form-reset.js'
 	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import Item from '../list/Item.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import Check from './Check.svelte'
 	import VirtualList from './VirtualList.svelte'
+	import { typeaheadBuffer, typeaheadMatch } from '../keyboard-nav.js'
 	import { tick } from 'svelte'
 	import type { SelectOption, SelectProps } from './types.js'
 
@@ -40,25 +42,24 @@
 
 	const uid = $props.id()
 	const supportingTextId = `supporting-text-${uid}`
+	const labelId = `label-${uid}`
 	const ids = (...values: (string | undefined | null | false)[]) =>
 		values.filter(Boolean).join(' ') || undefined
+	const defaultValue = () =>
+		multiple
+			? options.filter((option) => option.selected).map((option) => option.value)
+			: options.find((option) => option.selected)?.value
+
 	$effect(() => {
-		if (value === undefined) {
-			if (multiple) {
-				value = options.filter((option) => option.selected).map((option) => option.value)
-			} else {
-				value = options.find((option) => option.selected)?.value
-			}
-		}
+		if (value === undefined) value = defaultValue()
 	})
 
 	let valueArray = $derived<unknown[]>(
 		Array.isArray(value) ? value : value === undefined || value === null ? [] : [value],
 	)
 	let selectedSet = $derived.by<Set<unknown>>(() => new Set(valueArray))
-	let selectedOption: SelectOption[] = $derived(
-		options.filter((o) => selectedSet.has(o.value)).map((o) => ({ ...o, selected: true })),
-	)
+	let selectedOption = $derived(options.filter((o) => selectedSet.has(o.value)))
+	let populated = $derived(selectedOption.some((o) => o.value !== ''))
 
 	let useVirtualList = $derived(options.length > virtualThreshold)
 
@@ -74,85 +75,34 @@
 	let menuElement = $state<HTMLDivElement>()
 	let anchorElement = $state<HTMLDivElement>()
 
-	const restoreDefault = () =>
-		queueMicrotask(() => {
-			value = multiple
-				? options.filter((option) => option.selected).map((option) => option.value)
-				: options.find((option) => option.selected)?.value
-		})
+	const restoreDefault = () => queueMicrotask(() => (value = defaultValue()))
 
 	let field = $state<HTMLDivElement>()
 	let menuOpen = $state(false)
+	// Focus stays in the field. The active option is its aria-activedescendant, and shows as focused
+	// once the keys have moved to it.
 	let focusIndex = $state(-1)
-	let pendingFocus = false
-	let typeBuffer = ''
-	let lastTypeTime = 0
+	let keyboardActive = $state(false)
+	const collectTypeahead = typeaheadBuffer()
 
+	let selectedIndex = $derived(options.findIndex((o) => selectedSet.has(o.value)))
 	let activeDescendantId = $derived.by<string | undefined>(() => {
 		if (!menuOpen) return undefined
 		if (focusIndex >= 0 && focusIndex < options.length) return `${uid}-opt-${focusIndex}`
-		const fallbackIdx = multiple
-			? Array.isArray(value) && value.length
-				? options.findIndex((o) => o.value === value[0])
-				: -1
-			: options.findIndex((o) => o.value === value)
-		return fallbackIdx >= 0 ? `${uid}-opt-${fallbackIdx}` : undefined
-	})
-	let selectedLabel = $derived.by<string>(() => {
-		if (multiple) {
-			if (value && Array.isArray(value)) {
-				return value
-					.map((v) => options.find((option) => option.value === v)?.label || '')
-					.filter((o) => o)
-					.join(', ')
-			}
-			return ''
-		}
-		return options.find((option) => option.value === value)?.label || ''
+		return selectedIndex >= 0 ? `${uid}-opt-${selectedIndex}` : undefined
 	})
+	let selectedLabel = $derived(
+		valueArray
+			.map((v) => options.find((option) => option.value === v)?.label)
+			.filter(Boolean)
+			.join(', '),
+	)
 
-	let cachedRowHeight = 0
-	const ensureRowHeight = () => {
-		if (!cachedRowHeight && menuElement) {
-			const viewport = menuElement.querySelector(
-				'svelte-virtual-list-viewport',
-			) as HTMLElement | null
-			if (viewport) {
-				const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
-				cachedRowHeight = firstRow?.offsetHeight || 48
-			}
-		}
-		if (!cachedRowHeight) cachedRowHeight = 48
-		return cachedRowHeight
-	}
+	let virtualList = $state<VirtualList<SelectOption>>()
 	const scrollOptionIntoView = (index: number) => {
-		if (index < 0 || !menuElement) return
-		if (!useVirtualList) {
-			document.getElementById(`${uid}-opt-${index}`)?.scrollIntoView({ block: 'nearest' })
-			return
-		}
-		const viewport = menuElement.querySelector('svelte-virtual-list-viewport') as HTMLElement | null
-		if (!viewport) return
-		const rowHeight = ensureRowHeight()
-		const top = index * rowHeight
-		const bottom = top + rowHeight
-		const { scrollTop, clientHeight } = viewport
-		if (top < scrollTop) viewport.scrollTop = top
-		else if (bottom > scrollTop + clientHeight) viewport.scrollTop = bottom - clientHeight
-	}
-
-	const defaultActiveIndex = () => {
-		let idx = -1
-		if (multiple) {
-			if (Array.isArray(value) && value.length) {
-				idx = options.findIndex((o) => value.includes(o.value) && !o.disabled)
-			}
-		} else {
-			idx = options.findIndex((o) => o.value === value && !o.disabled)
-		}
-		if (idx < 0) idx = options.findIndex((o) => !o.disabled)
-		if (idx < 0) idx = 0
-		return idx
+		if (index < 0) return
+		if (useVirtualList) virtualList?.scrollToIndex(index)
+		else document.getElementById(`${uid}-opt-${index}`)?.scrollIntoView({ block: 'nearest' })
 	}
 
 	const toggleValue = (option: SelectOption) => {
@@ -175,114 +125,58 @@
 		if (!multiple) menuElement?.hidePopover()
 		event.preventDefault()
 		await tick()
+		selectElement?.dispatchEvent(new Event('input', { bubbles: true }))
 		selectElement?.dispatchEvent(new Event('change', { bubbles: true }))
 	}
 
-	const focusActiveOption = () => {
-		const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-		if (el) {
-			el.focus()
-			pendingFocus = false
-		} else {
-			scrollOptionIntoView(focusIndex)
-		}
-	}
-
-	const openMenuAndFocus = async (index: number) => {
+	const showOption = async (index: number) => {
+		if (!options.length) return
 		if (!menuOpen) menuElement?.showPopover()
 		focusIndex = Math.min(Math.max(index, 0), options.length - 1)
-		pendingFocus = true
+		keyboardActive = true
 		await tick()
-		focusActiveOption()
-	}
-
-	const moveFocus = (delta: number) => {
-		if (!options.length) return
-		let next = focusIndex
-		if (next < 0) {
-			const selIdx = Array.isArray(value)
-				? options.findIndex((o) => value.includes(o.value) && !o.disabled)
-				: options.findIndex((o) => o.value === value && !o.disabled)
-			next = selIdx >= 0 ? selIdx : 0
-		}
-		let attempts = 0
-		while (attempts < options.length) {
-			next = (next + delta + options.length) % options.length
-			if (!options[next].disabled) {
-				openMenuAndFocus(next)
-				return
-			}
-			attempts++
-		}
-	}
-
-	const focusEdge = (start: boolean) => {
-		if (!options.length) {
-			return
-		}
-		if (start) {
-			for (let i = 0; i < options.length; i++) {
-				if (!options[i].disabled) {
-					openMenuAndFocus(i)
-					return
-				}
-			}
-		} else {
-			for (let i = options.length - 1; i >= 0; i--) {
-				if (!options[i].disabled) {
-					openMenuAndFocus(i)
-					return
-				}
-			}
-		}
-	}
-
-	const optionKeydown = (event: KeyboardEvent, option: SelectOption) => {
+		scrollOptionIntoView(focusIndex)
+	}
+
+	// The first arrow press shows the active option, the next ones move from it. Disabled options
+	// take focus like any other, they just cannot be picked.
+	const moveFocus = (delta: number) =>
+		showOption(
+			keyboardActive
+				? (focusIndex + delta + options.length) % options.length
+				: focusIndex >= 0
+					? focusIndex
+					: Math.max(selectedIndex, 0),
+		)
+
+	const typeahead = (event: KeyboardEvent) => {
+		const query = collectTypeahead(event)
+		if (!query) return
+		const match = typeaheadMatch(
+			options.map((o) => o.label ?? ''),
+			focusIndex,
+			query,
+		)
+		if (match >= 0) showOption(match)
+	}
+
+	const handleKeydown = (event: KeyboardEvent) => {
 		const key = event.key
-		if (key === 'ArrowDown') {
-			event.preventDefault()
-			moveFocus(1)
-		} else if (key === 'ArrowUp') {
-			event.preventDefault()
-			moveFocus(-1)
-		} else if (key === 'Home') {
+		if (key === 'Tab') {
+			menuElement?.hidePopover()
+		} else if (key === 'ArrowDown' || key === 'ArrowUp') {
 			event.preventDefault()
-			focusEdge(true)
-		} else if (key === 'End') {
+			moveFocus(key === 'ArrowDown' ? 1 : -1)
+		} else if (key === 'Home' || key === 'End') {
 			event.preventDefault()
-			focusEdge(false)
+			showOption(key === 'Home' ? 0 : options.length - 1)
 		} else if (key === 'Enter' || key === ' ') {
 			event.preventDefault()
-			handleOptionSelect(event, option)
-		} else if (key === 'Tab') {
-			menuElement?.hidePopover()
-		} else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-			performTypeahead(key)
-		}
-	}
-
-	const performTypeahead = (char: string) => {
-		const now = performance.now()
-		if (now - lastTypeTime > 700) typeBuffer = ''
-		lastTypeTime = now
-		typeBuffer += char.toLowerCase()
-		if (!options.length) {
-			return
-		}
-		const startIdx = focusIndex >= 0 ? (focusIndex + 1) % options.length : 0
-		for (let i = 0; i < options.length; i++) {
-			const idx = (startIdx + i) % options.length
-			const label = options[idx].label?.toLowerCase?.() || ''
-			if (label.startsWith(typeBuffer) && !options[idx].disabled) {
-				openMenuAndFocus(idx)
-				return
-			}
-		}
-
-		if (typeBuffer.length > 1) {
-			const last = typeBuffer[typeBuffer.length - 1]
-			typeBuffer = last
-			performTypeahead('')
+			const option = options[focusIndex]
+			if (!menuOpen) moveFocus(0)
+			else if (option) handleOptionSelect(event, option)
+		} else {
+			typeahead(event)
 		}
 	}
 </script>
@@ -293,31 +187,28 @@
 	</span>
 {/snippet}
 
-<div
-	style={(variant === 'outlined'
-		? '--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
-		: !label?.length
-			? '--top-space:1rem;--bottom-space:1rem;'
-			: '') + style}
-	class={['np-text-field', attributes.class]}
-	bind:this={element}
->
+<div style={style ?? undefined} class={['np-text-field', attributes.class]} bind:this={element}>
 	<!-- svelte-ignore a11y_autofocus -->
 	<div
 		{id}
-		class="field"
-		class:no-label={!label?.length}
-		class:with-start={start}
-		class:menu-open={menuOpen}
-		class:with-end={true}
-		class:disabled
-		class:outlined={variant === 'outlined'}
+		class={[
+			'np-field',
+			variant === 'outlined' && 'np-field-outlined',
+			!label?.length && 'np-field-no-label',
+			start && 'np-field-with-start',
+			'np-field-with-end',
+			disabled && 'np-field-disabled',
+			populated && 'np-field-populated',
+			menuOpen && 'np-field-open',
+		]}
 		role="combobox"
 		aria-haspopup="listbox"
 		tabindex={disabled ? -1 : tabindex}
 		aria-controls="listbox-{uid}"
 		aria-expanded={menuOpen}
-		aria-label={attributes['aria-label'] || label}
+		aria-label={attributes['aria-label']}
+		aria-labelledby={attributes['aria-label'] || !label?.length ? undefined : labelId}
+		aria-required={required || undefined}
 		aria-disabled={disabled}
 		aria-activedescendant={activeDescendantId}
 		{...ariaProps}
@@ -332,138 +223,63 @@
 				menuElement?.showPopover()
 			}
 		}}
-		onkeydown={(event) => {
-			const key = event.key
-			if (key === 'Tab') {
-				menuElement?.hidePopover()
-				return
-			}
-			if (key === 'Escape') {
-				menuElement?.hidePopover()
-				return
-			}
-			if (key === 'ArrowDown') {
-				event.preventDefault()
-				moveFocus(1)
-				return
-			}
-			if (key === 'ArrowUp') {
-				event.preventDefault()
-				moveFocus(-1)
-				return
-			}
-			if (key === 'Home') {
-				event.preventDefault()
-				focusEdge(true)
-				return
-			}
-			if (key === 'End') {
-				event.preventDefault()
-				focusEdge(false)
-				return
-			}
-			if (key === 'Enter' || key === ' ') {
-				event.preventDefault()
-				if (!menuOpen) {
-					openMenuAndFocus(focusIndex >= 0 ? focusIndex : 0)
-				} else if (focusIndex >= 0) {
-					const opt = options[focusIndex]
-					if (opt && !opt.disabled) {
-						handleOptionSelect(event, opt)
-					}
-				}
-				return
-			}
-			if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-				performTypeahead(key)
-				return
-			}
-		}}
+		onkeydown={handleKeydown}
 	>
-		<div class="container-overflow">
+		{#snippet labelText()}
+			<span id={labelId} class={['np-field-label', !noAsterisk && required && 'np-field-required']}
+				>{label}</span
+			>
+		{/snippet}
+		<div class="np-field-box">
 			{#if variant === 'filled'}
-				<div class="background"></div>
-				<div class="state-layer"></div>
-				<div class="active-indicator"></div>
-			{/if}
-			{#if variant === 'outlined'}
-				<div class="np-outline">
-					<div class="outline-start"></div>
-					{#if label?.length}
-						<div class="label-wrapper">
-							<span class={['label', !noAsterisk && required && 'required']}>{label}</span>
-						</div>
-						<div class="outline-notch">
-							<span class="notch" aria-hidden="true"
-								>{label}{noAsterisk || !required ? '' : '*'}</span
-							>
-						</div>
-					{/if}
-					<div class="outline-end"></div>
-				</div>
+				<div class="np-field-background"></div>
+				<div class="np-field-state-layer"></div>
+				<div class="np-field-indicator"></div>
+			{:else}
+				<fieldset class="np-field-outline" aria-hidden="true">
+					<legend>
+						{#if label?.length}
+							<span>{label}{noAsterisk || !required ? '' : '*'}</span>
+						{/if}
+					</legend>
+				</fieldset>
+				{#if label?.length}
+					<div class="np-field-label-wrapper">{@render labelText()}</div>
+				{/if}
 			{/if}
-			<div class="np-container" bind:this={anchorElement} style="anchor-name:--{uid};">
+			<div class="np-field-row" bind:this={anchorElement} style="anchor-name:--{uid};">
 				{#if start}
-					<div class="start">
-						<span class="icon">{@render start()}</span>
+					<div class="np-field-start">
+						<span class="np-field-icon">{@render start()}</span>
 					</div>
 				{/if}
-				<div class="middle">
-					{#if variant === 'filled'}
-						<div class="label-wrapper">
-							{#if label?.length}
-								<span class={['label', !noAsterisk && required && 'required']}>{label}</span>
-							{/if}
-						</div>
+				<div class="np-field-middle">
+					{#if variant === 'filled' && label?.length}
+						<div class="np-field-label-wrapper">{@render labelText()}</div>
 					{/if}
-					<div class="content">
-						{#if multiple}
-							<select
-								tabindex="-1"
-								{disabled}
-								{required}
-								{name}
-								{form}
-								multiple
-								{onchange}
-								{oninput}
-								bind:value
-								bind:this={selectElement}
-								{@attach formReset(restoreDefault)}
-							>
-								{#each selectedOption as option, index (index)}
-									<option class="np-option" value={option.value} selected={option.selected}
-										>{option.label}</option
-									>
-								{/each}
-							</select>
-						{:else}
-							<select
-								tabindex="-1"
-								{disabled}
-								{required}
-								{name}
-								{form}
-								{onchange}
-								{oninput}
-								bind:value
-								bind:this={selectElement}
-								{@attach formReset(restoreDefault)}
-							>
-								{#each selectedOption as option, index (index)}
-									<option value={option.value} selected={option.selected}>{option.label}</option>
-								{/each}
-							</select>
-						{/if}
-						<div class="input">
-							{#if selectedLabel}
-								{selectedLabel}
-							{/if}
-						</div>
+					<div class="np-field-content">
+						<select
+							class="np-field-value"
+							tabindex="-1"
+							{disabled}
+							{required}
+							{name}
+							{form}
+							{multiple}
+							{onchange}
+							{oninput}
+							bind:this={selectElement}
+							{@attach formReset(restoreDefault)}
+						>
+							{#each selectedOption as option, index (index)}
+								<option value={option.value} selected>{option.label}</option>
+							{/each}
+						</select>
+						<div class="np-select-text">{selectedLabel}</div>
 					</div>
 				</div>
-				<div class="end">
-					<span class="icon trailing">
+				<div class="np-field-end">
+					<span class="np-field-icon">
 						{#if end}
 							{@render end()}
 						{:else}
@@ -474,7 +290,11 @@
 			</div>
 		</div>
 		{#if supportingText || errorText}
-			<div id={supportingTextId} class="supporting-text" role={errorText ? 'alert' : undefined}>
+			<div
+				id={supportingTextId}
+				class="np-field-supporting-text"
+				role={errorText ? 'alert' : undefined}
+			>
 				<span>
 					{errorText ?? supportingText}
 				</span>
@@ -490,18 +310,18 @@
 	{/snippet}
 	<Item
 		id="{uid}-opt-{index}"
+		onpointerdown={(event) => event.preventDefault()}
 		onclick={(event) => {
+			focusIndex = index
 			handleOptionSelect(event, option)
-			field?.focus()
 		}}
 		tabindex={-1}
 		disabled={option.disabled}
 		aria-disabled={option.disabled}
 		role="option"
-		onkeydown={(event) => optionKeydown(event, option)}
 		selected={isSelected}
 		aria-selected={isSelected}
-		class={option.class}
+		class={[option.class, keyboardActive && index === focusIndex && 'np-focus-ring-shown']}
 		style={option.style}
 		start={multiple ? check : option.start}
 		end={option.end}
@@ -526,31 +346,18 @@
 	bind:open={menuOpen}
 	ontoggle={async ({ newState }) => {
 		if (newState === 'open') {
-			if (focusIndex < 0) focusIndex = defaultActiveIndex()
+			if (focusIndex < 0) focusIndex = Math.max(selectedIndex, 0)
 			await tick()
 			scrollOptionIntoView(focusIndex)
 		} else {
 			focusIndex = -1
-			pendingFocus = false
+			keyboardActive = false
 		}
 	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
-		<VirtualList
-			height="250px"
-			itemHeight={48}
-			items={options}
-			rendered={({ start, end }) => {
-				if (pendingFocus && focusIndex >= start && focusIndex < end) {
-					const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-					if (el) {
-						el.focus()
-						pendingFocus = false
-					}
-				}
-			}}
-		>
+		<VirtualList bind:this={virtualList} height="250px" items={options}>
 			{#snippet row(option, index)}
 				{@render item(option, index)}
 			{/snippet}
@@ -563,158 +370,34 @@
 </Menu>
 
 <style>
-	.active-indicator {
-		inset: auto 0 0 0;
-		pointer-events: none;
-		position: absolute;
-		width: 100%;
-		z-index: 1;
-	}
-	.field.menu-open .active-indicator::after,
-	.field:focus .active-indicator::after {
-		opacity: 1;
-	}
-	.active-indicator::after {
-		opacity: 0;
-		transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-	}
-	.active-indicator::before,
-	.active-indicator::after {
-		border-bottom: 1px solid var(--np-color-on-surface-variant);
-		inset: auto 0 0 0;
-		content: '';
-		position: absolute;
-		width: 100%;
-	}
-	.active-indicator::after {
-		border-bottom-color: var(--np-color-primary);
-		border-bottom-width: 3px;
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .active-indicator::before {
-		border-bottom-color: var(--np-color-error);
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .active-indicator::after {
-		border-bottom-color: var(--np-color-error);
-	}
-	.disabled .active-indicator::before {
-		border-bottom-color: var(--np-color-on-surface);
-		border-bottom-width: 1px;
-		opacity: 0.38;
-	}
-	.background {
-		background: var(
-			--np-filled-select-text-field-container-color,
-			var(--np-color-surface-container-highest)
-		);
-	}
-	.disabled .background {
-		background: var(--np-color-on-surface);
-		opacity: 0.04;
-	}
-	.background,
-	.state-layer {
-		border-radius: inherit;
-		inset: 0;
-		pointer-events: none;
-		position: absolute;
-	}
-	.np-container {
-		align-items: center;
-		border-radius: inherit;
-		display: flex;
-		flex: 1;
-		max-height: 100%;
-		min-height: 100%;
-		min-width: 0;
-		position: relative;
-		user-select: none;
-	}
-	.outlined .container-overflow {
-		border-start-start-radius: var(
-			--np-outlined-select-text-field-container-shape,
-			var(--np-shape-corner-extra-small)
-		);
-		border-start-end-radius: var(
-			--np-outlined-select-text-field-container-shape,
-			var(--np-shape-corner-extra-small)
-		);
-		border-end-end-radius: var(
-			--np-outlined-select-text-field-container-shape,
-			var(--np-shape-corner-extra-small)
-		);
-		border-end-start-radius: var(
-			--np-outlined-select-text-field-container-shape,
-			var(--np-shape-corner-extra-small)
-		);
+	.np-text-field {
+		display: inline-flex;
+		text-align: start;
 	}
-	.container-overflow {
-		border-start-start-radius: var(
+	.np-field {
+		--_field-shape: var(
 			--np-filled-select-text-field-container-shape,
 			var(--np-shape-corner-extra-small)
 		);
-		border-start-end-radius: var(
-			--np-filled-select-text-field-container-shape,
-			var(--np-shape-corner-extra-small)
+		--_field-container-color: var(
+			--np-filled-select-text-field-container-color,
+			var(--np-color-surface-container-highest)
 		);
-		border-end-end-radius: var(--np-shape-corner-none);
-		border-end-start-radius: var(--np-shape-corner-none);
-		display: flex;
-		height: 100%;
-		position: relative;
-	}
-	.np-text-field {
-		display: inline-flex;
-		resize: both;
-		text-align: start;
-	}
-
-	.field.disabled {
-		cursor: default;
-	}
-
-	.field {
-		display: flex;
-		flex: 1;
-		flex-direction: column;
-		writing-mode: horizontal-tb;
-		max-width: var(--np-select-max-width, 100%);
 		min-width: var(--np-select-min-width, 210px);
+		max-width: var(--np-select-max-width, 100%);
 		outline: none;
 	}
-
-	.supporting-text {
-		display: flex;
-		gap: 1rem;
-		font-size: 0.75rem;
-		line-height: 1rem;
-		color: var(--np-color-on-surface-variant);
-		justify-content: space-between;
-		padding: 0.25rem 1rem 0;
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .supporting-text {
-		color: var(--np-color-error);
-	}
-	.disabled .supporting-text {
-		color: var(--np-color-on-surface);
-		opacity: 0.38;
+	.np-field-outlined {
+		--_field-shape: var(
+			--np-outlined-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
 	}
-
-	.field:not(.disabled):hover .state-layer {
-		visibility: visible;
+	.np-field-row {
+		user-select: none;
 	}
 
-	.disabled {
-		pointer-events: none;
-	}
-	.field:not(.disabled):hover .state-layer {
-		background: var(--np-color-on-surface);
-		opacity: 0.08;
-	}
-	.resizable .np-container > * {
-		top: var(--_focus-outline-width, 3px);
-		inset-inline-start: var(--_focus-outline-width, 0);
-	}
-	.content * {
+	.np-field-content * {
 		all: unset;
 		color: currentColor;
 		font-size: 1rem;
@@ -723,410 +406,39 @@
 		white-space: revert;
 	}
 
-	.content select {
+	/* Holds the value for the form and its validation, never shown. */
+	.np-field-value {
 		position: absolute;
 		width: 0;
 		height: 0;
 		visibility: hidden;
 	}
 
-	.middle {
-		align-items: stretch;
-		align-self: baseline;
+	.np-select-text {
 		flex: 1;
 		min-width: 0;
-	}
-
-	.input {
-		caret-color: var(--np-color-primary);
+		height: 1.5rem;
+		padding-top: var(--top-space);
+		padding-bottom: var(--bottom-space);
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		text-align: inherit;
-		flex: 1;
-		min-width: 0;
-		height: 1.5rem;
-
-		&::placeholder {
-			color: currentColor;
-			opacity: 1;
-		}
-
-		&::-webkit-calendar-picker-indicator {
-			display: none;
-		}
-
-		&::-webkit-search-decoration,
-		&::-webkit-search-cancel-button {
-			display: none;
-		}
-
-		@media (forced-colors: active) {
-			background: none;
-		}
-	}
-
-	.np-option {
-		width: 0;
-		height: 0;
-		display: block;
 	}
-
-	.no-label .content,
-	.field.menu-open .content,
-	.field:focus .content,
-	.field:has(select option:checked:not([value=''])) .content {
-		opacity: 1;
+	.np-field:not(.np-field-with-start) .np-select-text {
+		padding-inline-start: 1rem;
 	}
 
-	.icon .arrow {
+	.arrow {
 		display: flex;
 	}
-	.field.menu-open .icon .arrow {
+	.np-field-open .arrow {
 		rotate: 180deg;
 	}
 
-	.content {
-		color: var(--np-color-on-surface);
-		display: flex;
-		flex: 1 1 0%;
-		opacity: 1;
-		min-width: 0;
-		transition: opacity 83ms cubic-bezier(0.2, 0, 0, 1);
-	}
-	.disabled .content {
-		color: var(--np-color-on-surface);
-	}
-	.field:not(.with-end) .content .input {
-		padding-inline-end: 16px;
-	}
-	.outline-start,
-	.field:not(.with-start) .content .input {
-		padding-inline-start: 16px;
-	}
-
-	.content .input {
-		padding-top: var(--top-space, 1.5rem);
-		padding-bottom: var(--bottom-space, 0.5rem);
-	}
-
-	.start {
-		color: var(--np-color-on-surface-variant);
-		margin-inline-start: 0.75rem;
-		margin-inline-end: 1rem;
-	}
-	.end {
-		color: var(--np-color-on-surface-variant);
-		margin-inline-start: 1rem;
-		margin-inline-end: 0.75rem;
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .end {
-		color: var(--np-color-error);
-	}
-	.disabled .start,
-	.disabled .end {
-		color: var(--np-color-on-surface);
-		opacity: 0.38;
-	}
-	.start,
-	.middle,
-	.end {
-		display: flex;
-		box-sizing: border-box;
-		height: 100%;
-		position: relative;
-	}
-	.start,
-	.end {
-		align-items: center;
-		justify-content: center;
-	}
-	.icon {
-		display: flex;
-		color: currentColor;
-		align-items: center;
-		justify-content: center;
-		fill: currentColor;
-		position: relative;
-	}
-	:global(.icon svg) {
-		fill: currentColor;
-	}
-
-	.label-wrapper {
-		user-select: none;
-		pointer-events: none;
-		inset: 0;
-		position: absolute;
-		text-align: initial;
-	}
-	.field:not(.with-end) .label-wrapper {
-		margin-inline-end: 1rem;
-	}
-	.field:not(.with-start) .label-wrapper {
-		margin-inline-start: 1rem;
-	}
-	.with-start .np-outline .label-wrapper {
-		inset-inline-start: 3.25rem;
-	}
-	.with-end .np-outline .label-wrapper {
-		margin-inline-end: 3.25rem;
-	}
-
-	.with-start.menu-open .label-wrapper,
-	.with-start:has(select:focus-visible option:checked:not([value=''])) .label-wrapper,
-	.with-start:has(select option:checked:not([value=''])) .label-wrapper,
-	.with-start:has(select:focus-visible) .label-wrapper {
-		inset-inline-end: -2.25rem;
-	}
-
-	.with-end.menu-open .label-wrapper,
-	.with-end:focus:has(select option:checked:not([value=''])) .label-wrapper,
-	.with-end:focus .label-wrapper {
-		margin-inline-end: 1rem;
-	}
-	.notch {
-		font-size: 0.75rem;
-		line-height: 1rem;
-		opacity: 0;
-	}
-
-	.label.required::after {
-		content: '*';
-	}
-
-	.field:not(.menu-open):not(:focus) .label {
-		position: absolute;
-		top: 1rem;
-		inset-inline-start: 0rem;
-	}
-
-	.field.menu-open .label,
-	.field:focus:has(select option:checked:not([value=''])) .label,
-	.field:has(select option:checked:not([value=''])) .label,
-	.field:focus .label {
-		font-size: 0.75rem;
-		line-height: 1rem;
-		transform-origin: top left;
-		position: absolute;
-		top: var(--floating-label-top, 0.5rem);
-	}
-
-	.with-start.menu-open .label,
-	.with-start:focus .label,
-	.with-start:has(select:focus-visible option:checked:not([value=''])) .label,
-	.with-start:has(select option:checked:not([value=''])) .label,
-	.with-start:has(select:focus-visible) .label {
-		inset-inline-start: var(--floating-label-left, 0);
-	}
-	.label {
-		transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-		box-sizing: border-box;
-		color: var(--np-color-on-surface-variant);
-		overflow: hidden;
-		max-width: 100%;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		z-index: 1;
-		font-size: 1rem;
-		line-height: 1.5rem;
-		width: min-content;
-	}
-
-	.field.menu-open .label,
-	.field:focus .label {
-		color: var(--np-color-primary);
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .label,
-	.field:is([aria-invalid='true'], :has(select:user-invalid)).menu-open .label,
-	.field:is([aria-invalid='true'], :has(select:user-invalid)):focus .label {
-		color: var(--np-color-error);
-	}
-	.disabled .label {
-		color: var(--np-color-on-surface);
-		opacity: 0.38;
-	}
-	.resizable:not(.disabled) .np-container {
-		resize: inherit;
-		overflow: hidden;
-	}
-	.disabled.no-label .content,
-	.disabled:has(select option:checked:not([value=''])) .content {
-		opacity: 0.38;
-	}
-	.field,
-	.container-overflow {
-		resize: inherit;
-	}
-	.resizable .np-container {
-		bottom: 3px;
-		inset-inline-end: var(--_focus-outline-width, 0);
-		clip-path: inset(3px 0 0 var(--_focus-outline-width));
-	}
-	.outline-start,
-	.outline-end {
-		border: inherit;
-		border-radius: inherit;
-		box-sizing: border-box;
-		position: relative;
-	}
-	.outline-start::before,
-	.outline-start::after,
-	.outline-end::before,
-	.outline-end::after {
-		border: inherit;
-		content: '';
-		inset: 0;
-		position: absolute;
-	}
-	.outline-start::before,
-	.outline-start::after {
-		border-inline-start-style: solid;
-		border-inline-end-style: none;
-		border-start-start-radius: inherit;
-		border-start-end-radius: 0;
-		border-end-start-radius: inherit;
-		border-end-end-radius: 0;
-		margin-inline-end: 0.25rem;
-	}
-	.outline-end::before,
-	.outline-end::after {
-		border-inline-start-style: none;
-		border-inline-end-style: solid;
-		border-start-start-radius: 0;
-		border-start-end-radius: inherit;
-		border-end-start-radius: 0;
-		border-end-end-radius: inherit;
-	}
-	.outline-notch::before,
-	.outline-notch::after {
-		border: inherit;
-		content: '';
-		inset: 0;
-		position: absolute;
-	}
-	.outline-start::before,
-	.outline-end::before,
-	.outline-notch::before {
-		border-width: 1px;
-	}
-	.outline-start::before,
-	.outline-start::after,
-	.outline-end::before,
-	.outline-end::after {
-		border-bottom-style: solid;
-		border-top-style: solid;
-	}
-	.outline-notch::after {
-		border-bottom-style: solid;
-		border-top-style: none;
-	}
-	.outline-notch::before {
-		border-bottom-style: solid;
-		border-top-style: solid;
-	}
-
-	.field.menu-open .outline-notch::before,
-	.field:focus .outline-notch::before,
-	.field:has(select option:checked:not([value=''])) .outline-notch::before {
-		border-top-style: none;
-	}
-
-	.outline-notch::before,
-	.outline-notch::after {
-		border-inline-start-style: none;
-		border-inline-end-style: none;
-		border-start-start-radius: 0;
-		border-start-end-radius: 0;
-		border-end-start-radius: 0;
-		border-end-end-radius: 0;
-	}
-	.outline-notch {
-		align-items: flex-start;
-		border: inherit;
-		display: flex;
-		margin-inline-start: -0.25rem;
-		margin-inline-end: 0.25rem;
-		max-width: calc(100% - 2rem);
-		padding: 0 0.25rem;
-		position: relative;
-	}
-	.outline-end {
-		flex-grow: 1;
-		margin-inline-start: calc(-1 * 4px);
-	}
-	.outline-start::after,
-	.outline-end::after,
-	.outline-notch::after {
-		border-width: 3px;
-	}
-	.outline-start::after,
-	.outline-end::after,
-	.outline-notch::after {
-		opacity: 0;
-		transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
-	}
-
-	.field.menu-open .outline-start::after,
-	.field.menu-open .outline-end::after,
-	.field.menu-open .outline-notch::after,
-	.field:focus .outline-start::after,
-	.field:focus .outline-end::after,
-	.field:focus .outline-notch::after {
-		opacity: 1;
-	}
-	.np-outline {
-		border-color: var(--np-color-outline);
-		border-radius: inherit;
-		display: flex;
-		pointer-events: none;
-		height: 100%;
-		position: absolute;
-		width: 100%;
-		z-index: 1;
-	}
-
-	.field:not(.disabled, .menu-open, :focus):hover .np-outline {
-		border-color: var(--np-color-on-surface);
-		color: var(--np-color-on-surface);
-	}
-	.field.menu-open .np-outline,
-	.field:focus .np-outline {
-		border-color: var(--np-color-primary);
-		color: var(--np-color-primary);
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)) .np-outline,
-	.field:is([aria-invalid='true'], :has(select:user-invalid)).menu-open .np-outline,
-	.field:is([aria-invalid='true'], :has(select:user-invalid)):focus .np-outline {
-		border-color: var(--np-color-error);
-	}
-	.field:is([aria-invalid='true'], :has(select:user-invalid)):not(
-			.disabled,
-			.menu-open,
-			:focus
-		):hover
-		.np-outline {
-		border-color: var(--np-color-on-error-container);
-	}
-	.disabled .np-outline {
-		border-color: var(--np-color-on-surface);
-		color: var(--np-color-on-surface);
-	}
-	.disabled .outline-start,
-	.disabled .outline-end,
-	.disabled .outline-notch {
-		opacity: 0.12;
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
-		.icon .arrow {
+		.arrow {
 			transition: rotate 150ms cubic-bezier(0.2, 0, 0, 1);
 		}
-
-		.label {
-			transition-property: all;
-			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-			transition-duration: 150ms;
-		}
 	}
 </style>