fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/dropdown/dropdown.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
+	import { dispatchFieldEvents, invokeHandlers, NativeField } from '../../internal/index.js';
 	import { onClickOutside } from 'runed';
 	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
 	import { Flyout, ListView, ListViewItem } from '../../index.js';
-	import type { DropdownContext, DropdownProps } from './types.js';
+	import type { DropdownContext, DropdownOptionLabel, DropdownProps } from './types.js';
 	import { tick } from 'svelte';
-	import { SvelteMap } from 'svelte/reactivity';
-	import { setTabspotAttributes, unsetTabspotSection } from 'tabspot';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { clearTabspotActive, setTabspotActive, setTabspotAttributes, unsetTabspotSection } from 'tabspot';
 	import { PREFIX } from '../../internal/constants.js';
 	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
 	import { setDropdownContext } from './dropdown-context.js';
@@ -13,26 +15,39 @@
 	const FALLBACK_ID = $props.id();
 	const ID = `${PREFIX}-dropdown-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		id = ID,
-		name = id,
+		id = labelContext?.fieldId ?? ID,
+		name,
 		placeholder = 'Select an option',
 		multiple,
 		value = $bindable(multiple ? [] : ''),
 		disabled,
 		flyoutMaxHeight,
-		ref = $bindable(),
-		wrapperProps,
-		buttonRef = $bindable(),
-		buttonProps,
-		flyoutRef = $bindable(),
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
+		ref = $bindable(null),
+		buttonRef = $bindable(null),
+		buttonAttributes,
+		flyoutRef = $bindable(null),
 		flyoutProps,
-		listboxRef = $bindable(),
+		listboxRef = $bindable(null),
 		listboxProps,
-		onclick,
-		children
+		onfocus,
+		onblur,
+		children,
+		...attributes
 	}: DropdownProps = $props();
 
+	const BUTTON_ID = $derived(buttonAttributes?.id ?? `${id}-button`);
+
+	const native = new NativeField(
+		() => ref,
+		() => buttonRef,
+		labelContext
+	);
+
 	let open = $state(false);
 
 	let roundClass = $state('bottom');
@@ -41,16 +56,19 @@
 
 	const OPEN_KEYS = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Enter', ' '];
 
-	// Options only mount while the flyout is open, so we cache the last-known text
-	// for every value here to keep rendering the selection once the list is closed.
-	const optionLabels = new SvelteMap<string, string>();
+	// The list stays in the page while closed, so every option is here from the start, and is read live.
+	const options = new SvelteSet<DropdownOptionLabel>();
+	const optionLabels = $derived(new Map([...options].map((option) => [option.value, option.text])));
 
 	const context: DropdownContext = $state({
 		config: null,
 		state: null,
 		events: null,
 		methods: {
-			registerOption: (optionValue: string, text: string) => optionLabels.set(optionValue, text)
+			registerOption: (option) => {
+				options.add(option);
+				return () => options.delete(option);
+			}
 		}
 	});
 
@@ -65,8 +83,11 @@
 	);
 
 	onClickOutside(
-		() => ref,
-		() => closeDropdown()
+		() => wrapperRef,
+		(event) => {
+			if (event.target instanceof Element && event.target.closest('label')?.control === ref) return;
+			closeDropdown();
+		}
 	);
 
 	function handlePlacementChange(newPlacement: string) {
@@ -77,7 +98,12 @@
 		if (disabled || open) return;
 		open = true;
 		await tick();
-		globalFSContext?.state?.tabspotInstance?.rebuild(ref);
+		globalFSContext?.state?.tabspotInstance?.rebuild(wrapperRef ?? undefined);
+		// The cursor starts on the selection, or on the first option, so it is announced on open.
+		const start =
+			listboxRef?.querySelector<HTMLElement>('.fs-list-view-item[aria-selected="true"]:not([aria-disabled="true"])') ??
+			listboxRef?.querySelector<HTMLElement>('.fs-list-view-item:not([aria-disabled="true"])');
+		if (start) setTabspotActive(start, { nearest: true });
 	}
 
 	function closeDropdown() {
@@ -91,6 +117,13 @@
 
 		const { key } = e;
 
+		if (open && (key === 'Enter' || key === ' ')) {
+			e.preventDefault();
+			// Focus stays on the button, so the option under the cursor never sees the key: click it here.
+			listboxRef?.querySelector<HTMLElement>('[data-active="true"]')?.click();
+			return;
+		}
+
 		if (OPEN_KEYS.includes(key)) {
 			e.preventDefault();
 			await openDropdown();
@@ -103,18 +136,32 @@
 		}
 	}
 
-	async function handleClick(e: MouseEvent) {
+	async function handleClick() {
 		if (open) closeDropdown();
 		else await openDropdown();
-		onclick?.(e);
+	}
+
+	/** A label activates the native select it belongs to, which hands the activation to the button. */
+	async function openFromField() {
+		buttonRef?.focus();
+		await openDropdown();
+	}
+
+	function select(items: string[] | undefined) {
+		const next = multiple ? (items ?? []) : (items?.[0] ?? '');
+		if (!multiple && next === value) return;
+		value = next;
+		dispatchFieldEvents(ref);
 	}
 
 	// Force rebuild of tabspot handling tree
 	$effect(() => {
-		if (!ref) return;
+		if (!wrapperRef) return;
 
 		if (!open) {
-			unsetTabspotSection(ref, 'root');
+			// The list stays in the page once closed: nothing in it reads as chosen.
+			clearTabspotActive(wrapperRef);
+			unsetTabspotSection(wrapperRef, 'root');
 			return;
 		}
 
@@ -127,7 +174,7 @@
 					axis: 'vertical',
 					items: '.fs-list-view-item',
 					activation: {
-						controller: `#${id}-button`,
+						controller: `#${CSS.escape(BUTTON_ID)}`,
 						mode: 'activedescendant',
 						mark: {
 							attribute: 'data-active'
@@ -135,83 +182,119 @@
 					}
 				}
 			},
-			element: ref,
+			element: wrapperRef,
 			merge: true
 		});
 	});
 </script>
 
-<div class={['fs-dropdown', `square-${roundClass}`, { open, disabled }]} bind:this={ref} {...wrapperProps}>
+<div
+	{...wrapperAttributes}
+	class={['fs-dropdown', `square-${roundClass}`, { open, disabled }, wrapperAttributes?.class]}
+	bind:this={wrapperRef}
+>
+	<!-- Hidden while closed, not gone: each option reports its text as it is created, and comes before
+	     the button, so the button shows it before the list ever opens, on the server too. -->
+	<Flyout
+		{...flyoutProps}
+		hidden={!open}
+		style="{flyoutProps?.style ?? ''}; {flyoutMaxHeight ? `max-height: ${flyoutMaxHeight};` : ''}"
+		offset={0}
+		bind:ref={flyoutRef}
+		floating
+		roundCorners="bottom"
+		reference={wrapperRef ?? undefined}
+		id={`${id}-flyout`}
+		onPlacementChange={(place) => {
+			handlePlacementChange(place);
+			flyoutProps?.onPlacementChange?.(place);
+		}}
+		placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
+		class="fs-dropdown-flyout {roundClass === 'top' ? 'top-shadow' : ''} {flyoutProps?.class}"
+	>
+		<ListView
+			{...listboxProps}
+			bind:ref={listboxRef}
+			bind:selectedItems={() => selectedValues, select}
+			selectionMode={multiple ? 'multiselect' : 'single'}
+			toggleOnClick={multiple}
+			onSelectionChange={(event, selected) => {
+				if (!multiple) closeDropdown();
+				listboxProps?.onSelectionChange?.(event, selected);
+			}}
+			navigationMode="items"
+			id={`${id}-listbox`}
+			role="listbox"
+			disableTabspot
+		>
+			{#if !children}
+				<ListViewItem disabled>No options available</ListViewItem>
+			{:else}
+				{@render children?.()}
+			{/if}
+		</ListView>
+	</Flyout>
 	<ChevronDownFilled class="indicator" />
 	<button
+		{...buttonAttributes}
+		{...native.aria(attributes, buttonAttributes)}
 		bind:this={buttonRef}
 		type="button"
 		role="combobox"
-		onclick={handleClick}
-		onkeydown={handleKeyDown}
-		aria-controls={`${id}-listbox`}
+		onclick={(e) => invokeHandlers(e, [disabled], [handleClick, buttonAttributes?.onclick])}
+		onkeydown={(e) => invokeHandlers(e, [disabled], [handleKeyDown, buttonAttributes?.onkeydown])}
+		onfocus={(e) => invokeHandlers(e, [], [onfocus, buttonAttributes?.onfocus])}
+		onblur={(e) => invokeHandlers(e, [], [onblur, buttonAttributes?.onblur])}
+		aria-controls={open ? `${id}-listbox` : undefined}
 		aria-expanded={open}
-		id={`${id}-button`}
+		id={BUTTON_ID}
 		aria-haspopup="listbox"
 		{disabled}
-		class={['fs-dropdown-button', hasValue && 'has-value']}
-		{...buttonProps}
+		class={['fs-dropdown-button', hasValue && 'has-value', buttonAttributes?.class]}
 	>
 		{displayLabel}
 	</button>
 
-	<input type="hidden" {name} {value} {id} {disabled} />
-
-	{#if open}
-		<Flyout
-			style={flyoutMaxHeight ? `max-height: ${flyoutMaxHeight};` : ''}
-			offset={0}
-			bind:ref={flyoutRef}
-			{...flyoutProps}
-			floating
-			roundCorners="bottom"
-			reference={ref}
-			id={`${id}-flyout`}
-			onPlacementChange={(place) => handlePlacementChange(place)}
-			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
-			class="fs-dropdown-flyout {roundClass === 'top' ? 'top-shadow' : ''} {flyoutProps?.class}"
+	<!-- The field of the form: submitted, validated and reset like any select input,
+	     behind the button and out of the tab order, since the button is what people use. See `NativeField`. -->
+	<!-- Svelte needs a static `multiple` to bind a select, hence the two branches. This is the native form -->
+	{#if multiple}
+		<select
+			{...attributes}
+			class="native-field"
+			aria-hidden={native.reported ? undefined : 'true'}
+			multiple
+			tabindex={-1}
+			{id}
+			{name}
+			{disabled}
+			bind:value
+			bind:this={ref}
+			onclick={openFromField}
 		>
-			<ListView
-				bind:ref={listboxRef}
-				bind:selectedItems={
-					() => {
-						if (multiple) {
-							return (value as string[]) || [];
-						} else {
-							return value ? [value as string] : [];
-						}
-					},
-					(v) => {
-						if (multiple) {
-							value = v || [];
-						} else {
-							value = v?.[0] || '';
-						}
-					}
-				}
-				selectionMode={multiple ? 'multiselect' : 'single'}
-				toggleOnClick={multiple}
-				onSelectionChange={() => {
-					if (!multiple) closeDropdown();
-				}}
-				navigationMode="items"
-				id={`${id}-listbox`}
-				role="listbox"
-				disableTabspot
-				{...listboxProps}
-			>
-				{#if !children}
-					<ListViewItem disabled>No options available</ListViewItem>
-				{:else}
-					{@render children?.()}
-				{/if}
-			</ListView>
-		</Flyout>
+			{#each selectedValues as option (option)}
+				<option value={option}>{optionLabels.get(option) ?? option}</option>
+			{/each}
+		</select>
+	{:else}
+		<select
+			{...attributes}
+			class="native-field"
+			aria-hidden={native.reported ? undefined : 'true'}
+			tabindex={-1}
+			{id}
+			{name}
+			{disabled}
+			bind:value
+			bind:this={ref}
+			onclick={openFromField}
+		>
+			<!-- The placeholder makes an empty value missing for `required`, and is what a reset returns to. -->
+			<option value="" hidden></option>
+			{#if hasValue}
+				<option {value}>{displayLabel}</option>
+			{/if}
+		</select>
 	{/if}
 </div>
 
@@ -300,6 +383,21 @@
 			left: -0.063rem;
 			background-color: var(--fs-accent-fill-default);
 		}
+		&:has(> .native-field:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background-color: var(--fs-system-critical);
+		}
+		& .native-field {
+			position: absolute;
+			inset: 0;
+			inline-size: 100%;
+			block-size: 100%;
+			margin: 0;
+			box-sizing: border-box;
+			opacity: 0;
+			pointer-events: none;
+		}
 		& :global(> .indicator) {
 			width: 1rem;
 			position: absolute;

package/dist/components/dropdown/dropdown.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DropdownProps } from './types.ts';
-declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref" | "value" | "flyoutRef" | "buttonRef" | "listboxRef">;
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "ref" | "value" | "wrapperRef" | "flyoutRef" | "buttonRef" | "listboxRef">;
 type Dropdown = ReturnType<typeof Dropdown>;
 export default Dropdown;

package/dist/components/dropdown/types.d.ts

@@ -1,7 +1,8 @@
-import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLSelectAttributes } from 'svelte/elements';
 import type { ListViewProps, ListViewItemProps } from '../list-view/types.ts';
 import type { FlyoutProps } from '../flyout/types.ts';
-import type { FSContext } from '../../internal/index.js';
+import type { FSContext, NativeFieldAttributes } from '../../internal/index.js';
 /** The value shape of a dropdown that allows more than one selection. */
 export type DropdownMultipleValue = {
     multiple: true;
@@ -28,34 +29,32 @@ export type DropdownProps = {
     placeholder?: string;
     /** Disables the user interaction. */
     disabled?: boolean;
-    /** The name submitted with the form. Falls back to the id of the dropdown.
-     * @default id
-     */
+    /** The name the value is submitted under. Without one, the form leaves the value out, as with any field. */
     name?: string | null;
-    /** The DOM reference of the dropdown element.
+    /** The DOM reference of the wrapper element.
      * @bindable
      */
-    ref?: HTMLDivElement;
-    /** Called when the dropdown is clicked. */
-    onclick?: (e: MouseEvent) => void;
+    wrapperRef?: HTMLDivElement | null;
     /** The attributes to spread on the wrapper element.
      * @type HTMLAttributes
      */
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the native select that holds the value. The other attributes of the dropdown are applied to it.
+     * @bindable
+     */
+    ref?: HTMLSelectElement | null;
     /** The DOM reference of the button that opens the dropdown.
      * @bindable
      */
-    buttonRef?: HTMLButtonElement;
+    buttonRef?: HTMLButtonElement | null;
     /** The attributes to spread on the button that opens the dropdown.
      * @type HTMLButtonAttributes
      */
-    buttonProps?: HTMLButtonAttributes;
-    /** The DOM reference of the hidden input holding the value. */
-    inputRef?: HTMLInputElement;
+    buttonAttributes?: Omit<HTMLButtonAttributes, 'type' | 'role' | 'value'>;
     /** The DOM reference of the flyout element.
      * @bindable
      */
-    flyoutRef?: HTMLDivElement;
+    flyoutRef?: HTMLDivElement | null;
     /** The props to spread on the flyout.
      * @type FlyoutProps
      */
@@ -65,18 +64,25 @@ export type DropdownProps = {
     /** The DOM reference of the listbox element.
      * @bindable
      */
-    listboxRef?: HTMLUListElement;
+    listboxRef?: HTMLUListElement | null;
     /** The props to spread on the listbox rendered inside the flyout.
      * @type ListViewProps
      */
     listboxProps?: Omit<ListViewProps<'ul'>, 'ref' | 'children' | 'selectedItems' | 'selectionMode'>;
-} & (DropdownMultipleValue | DropdownSingleValue) & Omit<HTMLInputAttributes, 'value' | 'onclick'>;
+    /** The `DropdownOption` elements of the list. */
+    children?: Snippet;
+} & (DropdownMultipleValue | DropdownSingleValue) & NativeFieldAttributes<HTMLSelectAttributes>;
 /** @propsmith DropdownOptionProps */
 export type DropdownOptionProps = {
-    /** The text shown by the dropdown once the option is selected. Falls back to the rendered children. */
+    /** The text shown by the dropdown once the option is selected. Falls back to the rendered children, which the server cannot read: pass it when rendering on the server. */
     text?: string;
 } & ListViewItemProps<'li'>;
+/** What an option tells the trigger, read live. */
+export type DropdownOptionLabel = {
+    readonly value?: string;
+    readonly text?: string;
+};
 export type DropdownContext = FSContext<null, null, null, {
-    /** Options report their display text so the trigger can show a label instead of the raw value. */
-    registerOption: (value: string, text: string) => void;
+    /** Options report their display text so the trigger can show a label instead of the raw value. Returns the call that withdraws the option. */
+    registerOption: (option: DropdownOptionLabel) => () => void;
 }>;

package/dist/components/dropdown-select/docs/llms.md

@@ -11,7 +11,7 @@ The Dropdown Select is a dropdown built on the native `<select>` element. It let
 	import { DropdownSelect, DropdownSelectOption } from 'fluentui-svelte';
 </script>
 
-<DropdownSelect>
+<DropdownSelect aria-label="Choose an option">
 	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
 	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
@@ -25,13 +25,13 @@ The Dropdown Select is a dropdown built on the native `<select>` element. It let
 Options can render rich content such as a `Persona`. Provide a `text` prop for the plain-text selection label.
 
 ```svelte
-<DropdownSelect>
+<DropdownSelect aria-label="Choose an option">
 	<DropdownSelectOption value="John Doe" text="John Doe">
 		<Persona
 			name="John Doe"
 			primaryText="Software Engineer"
 			presence={{ status: 'available' }}
-			avatar={{ color: 'colorful', idForColor: '' }}
+			avatarProps={{ color: 'colorful', idForColor: '' }}
 		/>
 	</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
@@ -44,28 +44,30 @@ Options can render rich content such as a `Persona`. Provide a `text` prop for t
 Set the `multiple` prop to allow selecting more than one option.
 
 ```svelte
-<DropdownSelect multiple>
+<DropdownSelect multiple aria-label="Choose options">
 	<DropdownSelectOption value="A">Option A</DropdownSelectOption>
 	<DropdownSelectOption value="B">Option B</DropdownSelectOption>
 	<DropdownSelectOption value="C">Option C</DropdownSelectOption>
 </DropdownSelect>
 ```
 
+HTML attributes, including class, id and ARIA attributes, apply to the control element. Bind ref to access that control. Use wrapperAttributes and wrapperRef for the outer container.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DropdownSelectProps -->
 
-| Name                          | Type                       | Default                    | Description                                                            |
-| ----------------------------- | -------------------------- | -------------------------- | ---------------------------------------------------------------------- |
-| `value` _bindable_            | `string` &#124; `string[]` | `multiple ? [] : ''`       | The selected value. An array of values when `multiple` is set.         |
-| `multiple`                    | `boolean`                  |                            | Allows more than one option to be selected at a time.                  |
-| `placeholder`                 | `string`                   | `'Native Select Dropdown'` | The text shown while no option is selected.                            |
-| `hidePlaceholder`             | `boolean`                  |                            | Keeps the placeholder out of the option list once a value is selected. |
-| `ref` _bindable_              | `HTMLSelectElement`        |                            | The DOM reference of the select element.                               |
-| `wrapperRef` _bindable_       | `HTMLDivElement`           |                            | The DOM reference of the wrapper element.                              |
-| `wrapperProps`                | `HTMLAttributes`           |                            | The attributes to spread on the wrapper element.                       |
-| Element Attributes (`select`) |                            |                            |                                                                        |
+| Name                          | Type                              | Default                    | Description                                                            |
+| ----------------------------- | --------------------------------- | -------------------------- | ---------------------------------------------------------------------- |
+| `value` _bindable_            | `string` &#124; `string[]`        | `multiple ? [] : ''`       | The selected value. An array of values when `multiple` is set.         |
+| `multiple`                    | `boolean`                         |                            | Allows more than one option to be selected at a time.                  |
+| `placeholder`                 | `string`                          | `'Native Select Dropdown'` | The text shown while no option is selected.                            |
+| `hidePlaceholder`             | `boolean`                         |                            | Keeps the placeholder out of the option list once a value is selected. |
+| `ref` _bindable_              | `HTMLSelectElement` &#124; `null` |                            | The DOM reference of the select element.                               |
+| `wrapperRef` _bindable_       | `HTMLDivElement` &#124; `null`    |                            | The DOM reference of the wrapper element.                              |
+| `wrapperAttributes`           | `HTMLAttributes`                  |                            | The attributes to spread on the wrapper element.                       |
+| Element Attributes (`select`) |                                   |                            |                                                                        |
 
 <!-- /props:DropdownSelectProps -->
 
@@ -74,13 +76,13 @@ Set the `multiple` prop to allow selecting more than one option.
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DropdownSelectOptionProps -->
 
-| Name                          | Type          | Default | Description                                                   |
-| ----------------------------- | ------------- | ------- | ------------------------------------------------------------- |
-| `value`                       | `string`      |         | The value reported to the select when the option is picked.   |
-| `text`                        | `string`      |         | The label of the option. Falls back to the rendered children. |
-| `disabled`                    | `boolean`     |         | Disables the user interaction.                                |
-| `ref` _bindable_              | `HTMLElement` |         | The DOM reference of the option element.                      |
-| `children`                    | `Snippet`     |         | The content of the option, used when no `text` is given.      |
-| Element Attributes (`option`) |               |         |                                                               |
+| Name                          | Type                        | Default | Description                                                   |
+| ----------------------------- | --------------------------- | ------- | ------------------------------------------------------------- |
+| `value`                       | `string`                    |         | The value reported to the select when the option is picked.   |
+| `text`                        | `string`                    |         | The label of the option. Falls back to the rendered children. |
+| `disabled`                    | `boolean`                   |         | Disables the user interaction.                                |
+| `ref` _bindable_              | `HTMLElement` &#124; `null` |         | The DOM reference of the option element.                      |
+| `children`                    | `Snippet`                   |         | The content of the option, used when no `text` is given.      |
+| Element Attributes (`option`) |                             |         |                                                               |
 
 <!-- /props:DropdownSelectOptionProps -->

package/dist/components/dropdown-select/dropdown-select-option.svelte

@@ -6,14 +6,14 @@
 		value,
 		text,
 		disabled,
-		ref = $bindable(),
+		ref = $bindable(null),
 		class: classes,
 		children,
 		...attributes
 	}: DropdownSelectOptionProps = $props();
 </script>
 
-<option class="fs-dropdown-select-option {classes}" {value} {disabled} bind:this={ref} {...attributes}>
+<option {...attributes} class="fs-dropdown-select-option {classes}" {value} {disabled} bind:this={ref}>
 	<span class="option-content">
 		<CheckmarkFilled class="checkmark" width="16" height="16" />
 		{#if text}

package/dist/components/dropdown-select/dropdown-select.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
+	import { flushSync } from 'svelte';
 	import ChevronDownFilled from 'fluentui-icons-svelte/ChevronDownFilled.svelte';
 	import { selectDirection } from './dropdown-select.svelte.js';
 	import type { DropdownSelectProps } from './types.js';
 
+	const labelContext = claimLabel(() => id);
+
 	let {
 		hidePlaceholder,
 		placeholder = 'Native Select Dropdown',
-		ref = $bindable(),
+		ref = $bindable(null),
 		children,
-		wrapperRef = $bindable(),
-		wrapperProps,
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
 		multiple,
+		class: classes,
 		value = $bindable(multiple ? [] : ''),
+		id = labelContext?.fieldId,
+		name = id,
 		...attributes
 	}: DropdownSelectProps = $props();
 </script>
 
-<div class="fs-dropdown" bind:this={wrapperRef} {...wrapperProps}>
+<div {...wrapperAttributes} class={['fs-dropdown', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	{#if !multiple}
 		<ChevronDownFilled class="indicator" />
 	{/if}
@@ -25,17 +32,40 @@
 		We need to use a if block with the same structure 
 	-->
 	{#if multiple}
-		<select class="fs-dropdown-select" {@attach selectDirection()} multiple bind:value bind:this={ref} {...attributes}>
+		<select
+			{...attributes}
+			{id}
+			{name}
+			class={['fs-dropdown-select', classes]}
+			{@attach selectDirection()}
+			multiple
+			bind:value
+			bind:this={ref}
+		>
 			<button>
 				<selectedcontent></selectedcontent>
 			</button>
 			{#if !hidePlaceholder}
-				<option class="fs-dropdown-placeholder" disabled selected hidden value="">{placeholder}</option>
+				<option class="fs-dropdown-placeholder" disabled selected={!value?.length} hidden value="">{placeholder}</option
+				>
 			{/if}
 			{@render children?.()}
 		</select>
 	{:else}
-		<select class="fs-dropdown-select" {@attach selectDirection()} bind:value bind:this={ref} {...attributes}>
+		<select
+			{...attributes}
+			{id}
+			{name}
+			class={['fs-dropdown-select', classes]}
+			{@attach selectDirection()}
+			bind:value
+			bind:this={ref}
+			oninputcapture={(event) => {
+				// selectedcontent mutates before change; sync the binding before its observer restores the old value.
+				flushSync(() => (value = event.currentTarget.value));
+				attributes.oninputcapture?.(event);
+			}}
+		>
 			<button>
 				<selectedcontent></selectedcontent>
 			</button>
@@ -94,6 +124,11 @@
 			left: 0;
 			background-color: var(--fs-accent-fill-default);
 		}
+		&:has(select:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100%);
+			left: 0;
+			background-color: var(--fs-system-critical);
+		}
 		& .fs-dropdown-select {
 			border-radius: 0;
 			background: unset;