Native select

<!--
	A native <select> drawn as the same shape as a text field: a visible label with an optional
	Required or Optional marker, an optional hint, the select with a chevron in a reserved end
	gutter, and a consumer-supplied error. The browser still owns the picker, so it opens as the
	platform list or sheet, searches by typing and submits with its form before any script runs.
-->
<script lang="ts" module>
	export type NativeSelectSize = 'sm' | 'md' | 'lg';
	export type NativeSelectRequiredIndicator = 'required' | 'optional' | 'none';

	/** One choice. The label is what the closed select and the picker show. */
	export interface NativeSelectOption {
		value: string;
		label: string;
		disabled?: boolean;
	}

	/** A labelled group of choices, rendered as an <optgroup>. */
	export interface NativeSelectGroup {
		group: string;
		options: NativeSelectOption[];
		disabled?: boolean;
	}

	export type NativeSelectItem = NativeSelectOption | NativeSelectGroup;
</script>

<script lang="ts">
	import { untrack } from 'svelte';
	import type { HTMLSelectAttributes } from 'svelte/elements';

	type Passthrough = Omit<
		HTMLSelectAttributes,
		| 'value'
		| 'id'
		| 'name'
		| 'size'
		| 'required'
		| 'disabled'
		| 'multiple'
		| 'class'
		| 'children'
		| 'aria-invalid'
		| 'dir'
		| 'defaultValue'
	>;

	interface Props extends Passthrough {
		/** Visible label. Always shown; the placeholder never stands in for it. */
		label: string;
		/** Choices and groups of choices, in display order. */
		options: NativeSelectItem[];
		/** Bindable value: the chosen option's value, or '' while the placeholder shows. */
		value?: string;
		/** Form field name for native submission. */
		name?: string;
		/** First option, shown until a choice is made and never submitted, e.g. 'Choose a country'. */
		placeholder?: string;
		/** Native required attribute. Shows the Required marker unless requiredIndicator says otherwise. */
		required?: boolean;
		/** Help text under the label, linked with aria-describedby. */
		hint?: string;
		/** Validation message from the consumer. Sets aria-invalid; the component never validates. */
		error?: string | null;
		/** sm 32 px, md 36 px, lg 40 px tall, matching action buttons; 44 px on touch screens. */
		size?: NativeSelectSize;
		/** Native disabled attribute: out of the tab order and not submitted. */
		disabled?: boolean;
		/** Which marker follows the label. Defaults to 'required' for required fields, otherwise 'none'. */
		requiredIndicator?: NativeSelectRequiredIndicator;
		/** Marker text for required fields, for other languages. */
		requiredLabel?: string;
		/** Marker text for optional fields, for other languages. */
		optionalLabel?: string;
		/** Read before the error by screen readers only, for other languages. */
		errorPrefix?: string;
		/** Hold one line (or this many lines) under the field for the error, so setting it moves nothing below. */
		reserveError?: boolean | number;
		/** Select id. Defaults to one generated per instance. */
		id?: string;
		/** Text direction for the whole field, so the label, value and chevron all follow it. */
		dir?: HTMLSelectAttributes['dir'];
		/** Extra classes on the outer wrapper, for placement. */
		class?: string;
	}

	let {
		label,
		options,
		value = $bindable(),
		name,
		placeholder,
		required = false,
		hint,
		error = null,
		size = 'md',
		disabled = false,
		requiredIndicator,
		requiredLabel = 'Required',
		optionalLabel = 'Optional',
		errorPrefix = 'Error:',
		reserveError = false,
		id,
		dir,
		class: className,
		...rest
	}: Props = $props();

	const uid = $props.id();
	const selectId = $derived(id ?? `${uid}-select`);
	/* Hint and error ids come from the instance, so a supplied select id can never collide with them. */
	const hintId = `${uid}-hint`;
	const errorId = `${uid}-error`;

	const invalid = $derived(!!error);
	/* Lines held for the error, so a message that fits them moves nothing below the field. */
	const reserveLines = $derived(reserveError === true ? 1 : Math.max(0, Math.floor(+reserveError)));
	const marker = $derived(requiredIndicator ?? (required ? 'required' : 'none'));
	/* Hint first, then the error, then anything the consumer attached. */
	const describedBy = $derived(
		[
			...new Set(
				[
					hint && hintId,
					invalid && errorId,
					...(rest['aria-describedby'] ?? '').split(/\s+/)
				].filter(Boolean)
			)
		].join(' ') || undefined
	);
	/*
	 * The value the field starts with marks its option as the default, so the choice renders before
	 * hydration and a form reset returns to it (the placeholder, when nothing was chosen).
	 */
	const defaultValue = untrack(() => (value === undefined && placeholder ? '' : value));

	const isGroup = (item: NativeSelectItem): item is NativeSelectGroup => 'group' in item;
</script>

<div
	class={['native-select grid min-w-0 gap-2', className]}
	{dir}
	data-size={size}
	data-invalid={invalid ? '' : undefined}
>
	<div class="min-w-0">
		<label
			for={selectId}
			class={[
				'block leading-5 font-medium text-pretty break-words text-(--_ink)',
				size === 'sm' ? 'text-[13px]' : 'text-sm'
			]}
		>
			{label}{#if marker === 'required'}
				<!-- The native required attribute already says so to assistive technology. The en
				     space is a break point, so a marker that wraps starts on the label's edge. -->
				<span class="text-[13px] font-normal text-(--_muted)" aria-hidden="true"
					>&ensp;{requiredLabel}</span
				>{:else if marker === 'optional'}
				<span class="text-[13px] font-normal text-(--_muted)">&ensp;{optionalLabel}</span>{/if}
		</label>
		{#if hint}
			<p id={hintId} class="mt-1 text-[13px] leading-5 text-pretty break-words text-(--_muted)">
				{hint}
			</p>
		{/if}
	</div>

	<div class="min-w-0">
		<div class="relative">
			<select
				{...rest}
				bind:value
				{defaultValue}
				{name}
				{required}
				{disabled}
				id={selectId}
				aria-describedby={describedBy}
				aria-invalid={invalid ? 'true' : undefined}
				class={[
					'native-select__input peer block h-(--_h) w-full min-w-0 appearance-none truncate border ps-3 pe-9',
					'border-(--_edge) bg-(--_surface) text-(--_ink) outline-none pointer-coarse:text-base',
					'transition-[color,border-color,box-shadow,background-color] duration-150 ease-(--_ease) motion-reduce:transition-none',
					/* Hover only where a press opens the picker: one step darker edge. */
					'enabled:hover:border-(--_edge-hover)',
					/* Focus: a two-pixel edge (one border plus one ring) with a soft halo outside. */
					'focus-visible:border-(--_ring) focus-visible:shadow-(--_focus-ring)',
					/* Disabled: a raised fill, a quieter edge and the value in the muted tone, rather than
					   fading the whole control, so it never reads as a placeholder. */
					'disabled:cursor-not-allowed disabled:border-(--_edge-disabled) disabled:bg-(--_fill-raised) disabled:text-(--_muted)',
					/* Autofill (autocomplete="country"): tint the fill from the accent. */
					'autofill:bg-(--_fill-autofill)',
					/* Forced colours drop shadows, so focus becomes a system-colour outline. */
					'forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2 forced-colors:focus-visible:outline-[Highlight]',
					size === 'sm' && 'rounded-md text-[13px] leading-5',
					size === 'md' && 'rounded-lg text-sm leading-5',
					size === 'lg' && 'rounded-lg text-base leading-6'
				]}
			>
				{#if placeholder}
					<!-- Disabled so a required select cannot submit it, hidden so the picker lists only
					     real choices. As the first option with an empty value, it is what makes an
					     untouched required select fail native validation. -->
					<option class="native-select__placeholder" value="" disabled hidden>{placeholder}</option>
				{/if}
				{#each options as item (item)}
					{#if isGroup(item)}
						<optgroup label={item.group} disabled={item.disabled}>
							{#each item.options as option (option)}
								<option value={option.value} disabled={option.disabled}>{option.label}</option>
							{/each}
						</optgroup>
					{:else}
						<option value={item.value} disabled={item.disabled}>{item.label}</option>
					{/if}
				{/each}
			</select>
			<!-- The chevron sits in the select's reserved end gutter and lets every press through to it.
			     It is at the inline end, so it moves to the left in right-to-left text. -->
			<span
				class="native-select__chevron pointer-events-none absolute inset-y-0 end-3 grid place-items-center text-(--_muted) peer-disabled:text-(--_chevron-disabled) forced-colors:text-[CanvasText]"
				aria-hidden="true"
			>
				<svg class="size-4" viewBox="0 0 16 16" fill="none">
					<path
						d="M4.5 6.25 8 9.75l3.5-3.5"
						stroke="currentColor"
						stroke-width="1.75"
						stroke-linecap="round"
						stroke-linejoin="round"
					/>
				</svg>
			</span>
		</div>

		{#if invalid}
			<p
				id={errorId}
				class="mt-1 flex min-h-(--_reserve) items-start gap-1 text-[13px] leading-5 text-(--_danger)"
				style:--_reserve={reserveLines ? `${reserveLines * 1.25}rem` : undefined}
			>
				<span class="grid h-lh shrink-0 place-items-center" aria-hidden="true">
					<svg class="size-3.5" viewBox="0 0 16 16" fill="none">
						<circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.75" />
						<path
							d="M8 4.75v3.5"
							stroke="currentColor"
							stroke-width="1.75"
							stroke-linecap="round"
						/>
						<circle cx="8" cy="11" r="1" fill="currentColor" />
					</svg>
				</span>
				<!-- No text-pretty: on a one-line message it pulls words down to balance a second line. -->
				<span class="min-w-0 break-words"
					><span class="sr-only">{`${errorPrefix} `}</span>{error}</span
				>
			</p>
		{:else if reserveLines}
			<div
				class="mt-1 h-(--_reserve)"
				style:--_reserve={`${reserveLines * 1.25}rem`}
				aria-hidden="true"
			></div>
		{/if}
	</div>
</div>

<style>
	/* Public tokens: set --native-select-* on the field or any ancestor to retone it. */
	.native-select {
		--_accent: var(--native-select-accent, #18181b);
		--_danger: var(--native-select-danger, #b91c1c);
		--_ink: var(--native-select-ink, #18181b);
		--_muted: var(--native-select-muted, #52525b);
		--_placeholder: var(--native-select-placeholder, #71717a);
		/* 3:1 against white: the edge is the only thing marking the control (WCAG 1.4.11). */
		--_hairline: var(--native-select-hairline, rgb(0 0 0 / 0.44));
		--_surface: var(--native-select-surface, #ffffff);
		/* The browser paints the open picker; on a dark retone set this to dark so it follows. */
		--_scheme: var(--native-select-scheme, light);

		/* Formulas the state utilities read, mixed from the tokens so they follow any retone. */
		--_h: 2.25rem;
		--_ease: cubic-bezier(0.2, 0, 0, 1);
		--_edge: var(--_hairline);
		--_edge-hover: color-mix(in oklab, var(--_hairline), var(--_ink) 25%);
		--_edge-disabled: color-mix(in oklab, var(--_hairline) 55%, transparent);
		--_ring: var(--_accent);
		--_focus-ring:
			0 0 0 1px var(--_ring), 0 0 0 4px color-mix(in oklab, var(--_ring) 14%, transparent);
		--_fill-raised: color-mix(in oklab, var(--_surface), var(--_ink) 4%);
		--_fill-autofill: color-mix(in oklab, var(--_surface), var(--_accent) 6%);
		--_chevron-disabled: color-mix(in oklab, var(--_muted) 60%, transparent);
	}
	.native-select[data-size='sm'] {
		--_h: 2rem;
	}
	.native-select[data-size='lg'] {
		--_h: 2.5rem;
	}
	@media (pointer: coarse) {
		.native-select[data-size] {
			--_h: 2.75rem;
		}
	}

	/* Invalid: the edge, its hover and the focus ring all carry the error colour. */
	.native-select[data-invalid] {
		--_edge: var(--_danger);
		--_edge-hover: var(--_danger);
		--_ring: var(--_danger);
	}

	/* The browser's open picker follows the surface; there is no utility for color-scheme. */
	.native-select__input {
		color-scheme: var(--_scheme);
	}
	/* Blink and WebKit paint their own autofill text colour; there is no utility for it. */
	.native-select__input:autofill {
		-webkit-text-fill-color: var(--_ink);
	}

	/*
	 * A relation: while the placeholder is the chosen option, the closed select reads in the
	 * placeholder tone, and turns to ink once a choice is made. A disabled select keeps its muted
	 * value instead.
	 */
	.native-select__input:enabled:has(> .native-select__placeholder:checked) {
		color: var(--_placeholder);
	}

	/*
	 * Options the select renders, for the pickers that honour option styles (Windows, Linux): ink
	 * on the surface, and unavailable choices, including those in a disabled group, in the
	 * placeholder tone so they still read as unavailable.
	 */
	.native-select__input :global(option),
	.native-select__input :global(optgroup) {
		color: var(--_ink);
		background-color: var(--_surface);
	}
	.native-select__input :global(option:disabled) {
		color: var(--_placeholder);
	}
</style>

<!--
	A native <select> drawn as the same shape as a text field: a visible label with an optional
	Required or Optional marker, an optional hint, the select with a chevron in a reserved end
	gutter, and a consumer-supplied error. The browser still owns the picker, so it opens as the
	platform list or sheet, searches by typing and submits with its form before any script runs.
-->
<script lang="ts" module>
	export type NativeSelectSize = 'sm' | 'md' | 'lg';
	export type NativeSelectRequiredIndicator = 'required' | 'optional' | 'none';

	/** One choice. The label is what the closed select and the picker show. */
	export interface NativeSelectOption {
		value: string;
		label: string;
		disabled?: boolean;
	}

	/** A labelled group of choices, rendered as an <optgroup>. */
	export interface NativeSelectGroup {
		group: string;
		options: NativeSelectOption[];
		disabled?: boolean;
	}

	export type NativeSelectItem = NativeSelectOption | NativeSelectGroup;
</script>

<script lang="ts">
	import { untrack } from 'svelte';
	import type { HTMLSelectAttributes } from 'svelte/elements';

	type Passthrough = Omit<
		HTMLSelectAttributes,
		| 'value'
		| 'id'
		| 'name'
		| 'size'
		| 'required'
		| 'disabled'
		| 'multiple'
		| 'class'
		| 'children'
		| 'aria-invalid'
		| 'dir'
		| 'defaultValue'
	>;

	interface Props extends Passthrough {
		/** Visible label. Always shown; the placeholder never stands in for it. */
		label: string;
		/** Choices and groups of choices, in display order. */
		options: NativeSelectItem[];
		/** Bindable value: the chosen option's value, or '' while the placeholder shows. */
		value?: string;
		/** Form field name for native submission. */
		name?: string;
		/** First option, shown until a choice is made and never submitted, e.g. 'Choose a country'. */
		placeholder?: string;
		/** Native required attribute. Shows the Required marker unless requiredIndicator says otherwise. */
		required?: boolean;
		/** Help text under the label, linked with aria-describedby. */
		hint?: string;
		/** Validation message from the consumer. Sets aria-invalid; the component never validates. */
		error?: string | null;
		/** sm 32 px, md 36 px, lg 40 px tall, matching action buttons; 44 px on touch screens. */
		size?: NativeSelectSize;
		/** Native disabled attribute: out of the tab order and not submitted. */
		disabled?: boolean;
		/** Which marker follows the label. Defaults to 'required' for required fields, otherwise 'none'. */
		requiredIndicator?: NativeSelectRequiredIndicator;
		/** Marker text for required fields, for other languages. */
		requiredLabel?: string;
		/** Marker text for optional fields, for other languages. */
		optionalLabel?: string;
		/** Read before the error by screen readers only, for other languages. */
		errorPrefix?: string;
		/** Hold one line (or this many lines) under the field for the error, so setting it moves nothing below. */
		reserveError?: boolean | number;
		/** Select id. Defaults to one generated per instance. */
		id?: string;
		/** Text direction for the whole field, so the label, value and chevron all follow it. */
		dir?: HTMLSelectAttributes['dir'];
		/** Extra classes on the outer wrapper, for placement. */
		class?: string;
	}

	let {
		label,
		options,
		value = $bindable(),
		name,
		placeholder,
		required = false,
		hint,
		error = null,
		size = 'md',
		disabled = false,
		requiredIndicator,
		requiredLabel = 'Required',
		optionalLabel = 'Optional',
		errorPrefix = 'Error:',
		reserveError = false,
		id,
		dir,
		class: className,
		...rest
	}: Props = $props();

	const uid = $props.id();
	const selectId = $derived(id ?? `${uid}-select`);
	/* Hint and error ids come from the instance, so a supplied select id can never collide with them. */
	const hintId = `${uid}-hint`;
	const errorId = `${uid}-error`;

	const invalid = $derived(!!error);
	/* Lines held for the error, so a message that fits them moves nothing below the field. */
	const reserveLines = $derived(reserveError === true ? 1 : Math.max(0, Math.floor(+reserveError)));
	const marker = $derived(requiredIndicator ?? (required ? 'required' : 'none'));
	/* Hint first, then the error, then anything the consumer attached. */
	const describedBy = $derived(
		[
			...new Set(
				[
					hint && hintId,
					invalid && errorId,
					...(rest['aria-describedby'] ?? '').split(/\s+/)
				].filter(Boolean)
			)
		].join(' ') || undefined
	);
	/*
	 * The value the field starts with marks its option as the default, so the choice renders before
	 * hydration and a form reset returns to it (the placeholder, when nothing was chosen).
	 */
	const defaultValue = untrack(() => (value === undefined && placeholder ? '' : value));

	const isGroup = (item: NativeSelectItem): item is NativeSelectGroup => 'group' in item;
</script>

<div
	class={['native-select grid min-w-0 gap-2', className]}
	{dir}
	data-size={size}
	data-invalid={invalid ? '' : undefined}
>
	<div class="min-w-0">
		<label
			for={selectId}
			class={[
				'block leading-5 font-medium text-pretty break-words text-(--_ink)',
				size === 'sm' ? 'text-[13px]' : 'text-sm'
			]}
		>
			{label}{#if marker === 'required'}
				<!-- The native required attribute already says so to assistive technology. The en
				     space is a break point, so a marker that wraps starts on the label's edge. -->
				<span class="text-[13px] font-normal text-(--_muted)" aria-hidden="true"
					>&ensp;{requiredLabel}</span
				>{:else if marker === 'optional'}
				<span class="text-[13px] font-normal text-(--_muted)">&ensp;{optionalLabel}</span>{/if}
		</label>
		{#if hint}
			<p id={hintId} class="mt-1 text-[13px] leading-5 text-pretty break-words text-(--_muted)">
				{hint}
			</p>
		{/if}
	</div>

	<div class="min-w-0">
		<div class="relative">
			<select
				{...rest}
				bind:value
				{defaultValue}
				{name}
				{required}
				{disabled}
				id={selectId}
				aria-describedby={describedBy}
				aria-invalid={invalid ? 'true' : undefined}
				class={[
					'native-select__input peer block h-(--_h) w-full min-w-0 appearance-none truncate border ps-3 pe-9',
					'border-(--_edge) bg-(--_surface) text-(--_ink) outline-none pointer-coarse:text-base',
					'transition-[color,border-color,box-shadow,background-color] duration-150 ease-(--_ease) motion-reduce:transition-none',
					/* Hover only where a press opens the picker: one step darker edge. */
					'enabled:hover:border-(--_edge-hover)',
					/* Focus: a two-pixel edge (one border plus one ring) with a soft halo outside. */
					'focus-visible:border-(--_ring) focus-visible:shadow-(--_focus-ring)',
					/* Disabled: a raised fill, a quieter edge and the value in the muted tone, rather than
					   fading the whole control, so it never reads as a placeholder. */
					'disabled:cursor-not-allowed disabled:border-(--_edge-disabled) disabled:bg-(--_fill-raised) disabled:text-(--_muted)',
					/* Autofill (autocomplete="country"): tint the fill from the accent. */
					'autofill:bg-(--_fill-autofill)',
					/* Forced colours drop shadows, so focus becomes a system-colour outline. */
					'forced-colors:focus-visible:outline-2 forced-colors:focus-visible:outline-offset-2 forced-colors:focus-visible:outline-[Highlight]',
					size === 'sm' && 'rounded-md text-[13px] leading-5',
					size === 'md' && 'rounded-lg text-sm leading-5',
					size === 'lg' && 'rounded-lg text-base leading-6'
				]}
			>
				{#if placeholder}
					<!-- Disabled so a required select cannot submit it, hidden so the picker lists only
					     real choices. As the first option with an empty value, it is what makes an
					     untouched required select fail native validation. -->
					<option class="native-select__placeholder" value="" disabled hidden>{placeholder}</option>
				{/if}
				{#each options as item (item)}
					{#if isGroup(item)}
						<optgroup label={item.group} disabled={item.disabled}>
							{#each item.options as option (option)}
								<option value={option.value} disabled={option.disabled}>{option.label}</option>
							{/each}
						</optgroup>
					{:else}
						<option value={item.value} disabled={item.disabled}>{item.label}</option>
					{/if}
				{/each}
			</select>
			<!-- The chevron sits in the select's reserved end gutter and lets every press through to it.
			     It is at the inline end, so it moves to the left in right-to-left text. -->
			<span
				class="native-select__chevron pointer-events-none absolute inset-y-0 end-3 grid place-items-center text-(--_muted) peer-disabled:text-(--_chevron-disabled) forced-colors:text-[CanvasText]"
				aria-hidden="true"
			>
				<svg class="size-4" viewBox="0 0 16 16" fill="none">
					<path
						d="M4.5 6.25 8 9.75l3.5-3.5"
						stroke="currentColor"
						stroke-width="1.75"
						stroke-linecap="round"
						stroke-linejoin="round"
					/>
				</svg>
			</span>
		</div>

		{#if invalid}
			<p
				id={errorId}
				class="mt-1 flex min-h-(--_reserve) items-start gap-1 text-[13px] leading-5 text-(--_danger)"
				style:--_reserve={reserveLines ? `${reserveLines * 1.25}rem` : undefined}
			>
				<span class="grid h-lh shrink-0 place-items-center" aria-hidden="true">
					<svg class="size-3.5" viewBox="0 0 16 16" fill="none">
						<circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.75" />
						<path
							d="M8 4.75v3.5"
							stroke="currentColor"
							stroke-width="1.75"
							stroke-linecap="round"
						/>
						<circle cx="8" cy="11" r="1" fill="currentColor" />
					</svg>
				</span>
				<!-- No text-pretty: on a one-line message it pulls words down to balance a second line. -->
				<span class="min-w-0 break-words"
					><span class="sr-only">{`${errorPrefix} `}</span>{error}</span
				>
			</p>
		{:else if reserveLines}
			<div
				class="mt-1 h-(--_reserve)"
				style:--_reserve={`${reserveLines * 1.25}rem`}
				aria-hidden="true"
			></div>
		{/if}
	</div>
</div>

<style>
	/* Public tokens: set --native-select-* on the field or any ancestor to retone it. */
	.native-select {
		--_accent: var(--native-select-accent, #18181b);
		--_danger: var(--native-select-danger, #b91c1c);
		--_ink: var(--native-select-ink, #18181b);
		--_muted: var(--native-select-muted, #52525b);
		--_placeholder: var(--native-select-placeholder, #71717a);
		/* 3:1 against white: the edge is the only thing marking the control (WCAG 1.4.11). */
		--_hairline: var(--native-select-hairline, rgb(0 0 0 / 0.44));
		--_surface: var(--native-select-surface, #ffffff);
		/* The browser paints the open picker; on a dark retone set this to dark so it follows. */
		--_scheme: var(--native-select-scheme, light);

		/* Formulas the state utilities read, mixed from the tokens so they follow any retone. */
		--_h: 2.25rem;
		--_ease: cubic-bezier(0.2, 0, 0, 1);
		--_edge: var(--_hairline);
		--_edge-hover: color-mix(in oklab, var(--_hairline), var(--_ink) 25%);
		--_edge-disabled: color-mix(in oklab, var(--_hairline) 55%, transparent);
		--_ring: var(--_accent);
		--_focus-ring:
			0 0 0 1px var(--_ring), 0 0 0 4px color-mix(in oklab, var(--_ring) 14%, transparent);
		--_fill-raised: color-mix(in oklab, var(--_surface), var(--_ink) 4%);
		--_fill-autofill: color-mix(in oklab, var(--_surface), var(--_accent) 6%);
		--_chevron-disabled: color-mix(in oklab, var(--_muted) 60%, transparent);
	}
	.native-select[data-size='sm'] {
		--_h: 2rem;
	}
	.native-select[data-size='lg'] {
		--_h: 2.5rem;
	}
	@media (pointer: coarse) {
		.native-select[data-size] {
			--_h: 2.75rem;
		}
	}

	/* Invalid: the edge, its hover and the focus ring all carry the error colour. */
	.native-select[data-invalid] {
		--_edge: var(--_danger);
		--_edge-hover: var(--_danger);
		--_ring: var(--_danger);
	}

	/* The browser's open picker follows the surface; there is no utility for color-scheme. */
	.native-select__input {
		color-scheme: var(--_scheme);
	}
	/* Blink and WebKit paint their own autofill text colour; there is no utility for it. */
	.native-select__input:autofill {
		-webkit-text-fill-color: var(--_ink);
	}

	/*
	 * A relation: while the placeholder is the chosen option, the closed select reads in the
	 * placeholder tone, and turns to ink once a choice is made. A disabled select keeps its muted
	 * value instead.
	 */
	.native-select__input:enabled:has(> .native-select__placeholder:checked) {
		color: var(--_placeholder);
	}

	/*
	 * Options the select renders, for the pickers that honour option styles (Windows, Linux): ink
	 * on the surface, and unavailable choices, including those in a disabled group, in the
	 * placeholder tone so they still read as unavailable.
	 */
	.native-select__input :global(option),
	.native-select__input :global(optgroup) {
		color: var(--_ink);
		background-color: var(--_surface);
	}
	.native-select__input :global(option:disabled) {
		color: var(--_placeholder);
	}
</style>