fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/text-box/text-box.svelte

@@ -1,33 +1,37 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
 	import SearchFilled from 'fluentui-icons-svelte/SearchFilled.svelte';
 	import EyeShowFilled from 'fluentui-icons-svelte/EyeShowFilled.svelte';
 	import EyeHideFilled from 'fluentui-icons-svelte/EyeHideFilled.svelte';
 	import { TextBoxButton } from '../../index.js';
-	import { RenderSoC } from '../../internal/index.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
 	import type { TextBoxProps } from './types.js';
 
 	const FALLBACK_ID = $props.id();
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		id = 'input-' + FALLBACK_ID,
+		id = labelContext?.fieldId ?? 'input-' + FALLBACK_ID,
 		readonly,
 		name = id,
 		hideActionButtons,
 		type = 'text',
-		class: classes,
 		wrapperAttributes,
-		wrapperRef = $bindable(),
-		value = $bindable(),
-		ref = $bindable(),
+		wrapperRef = $bindable(null),
+		value = $bindable(null),
+		ref = $bindable(null),
 		placeholder = 'Fluent TextBox',
 		size = 'medium',
 		contentBefore,
 		contentAfter,
 		querySubmitted,
 		textChanged,
-		onkeydown,
+		onkeyup,
 		onClear,
+		onchange,
+		oninput,
 		children,
 		...attributes
 	}: TextBoxProps = $props();
@@ -57,12 +61,11 @@
 		}
 	};
 
-	const handleKeyDown = (e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
+	const handleKeyUp = (e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			(e.target as HTMLInputElement).blur();
 		}
-		onkeydown?.(e);
 	};
 </script>
 
@@ -80,7 +83,11 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
   <TextBox type="text" placeholder="Enter your name" />
   ```
 -->
-<div class={['fs-textbox', id, `text-box-size-${size}`, classes]} {...wrapperAttributes} bind:this={wrapperRef}>
+<div
+	{...wrapperAttributes}
+	class={['fs-textbox', `text-box-size-${size}`, wrapperAttributes?.class]}
+	bind:this={wrapperRef}
+>
 	{#if contentBefore}
 		<span class="content-before">
 			{#if typeof contentBefore === 'string'}
@@ -91,6 +98,7 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 		</span>
 	{/if}
 	<input
+		{...attributes}
 		{type}
 		{id}
 		{name}
@@ -98,10 +106,9 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 		{readonly}
 		bind:value
 		bind:this={ref}
-		onkeyup={handleKeyDown}
-		oninput={(e) => textChanged?.(e as any, value)}
-		onchange={(e) => textChanged?.(e as any, value)}
-		{...attributes}
+		onkeyup={(e) => invokeHandlers(e, [], [handleKeyUp, onkeyup])}
+		oninput={(e) => invokeHandlers(e, [], [(_e) => textChanged?.(_e, value), oninput])}
+		onchange={(e) => invokeHandlers(e, [], [(_e) => textChanged?.(_e, value), onchange])}
 	/>
 	{#if contentAfter}
 		<span class="content-after">
@@ -221,6 +228,11 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			left: -0.063rem;
 			background-color: var(--fs-accent-fill-default);
 		}
+		&:has(input:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background-color: var(--fs-system-critical);
+		}
 		&:has(input:focus) {
 			background: var(--fs-control-fill-input-active);
 			& input::placeholder {
@@ -271,12 +283,14 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			visibility: hidden;
 		}
 		&.text-box-size-small {
+			--text-box-edge-padding: 0.5rem;
 			& :is(input, .content-after, .content-before) {
 				font-size: var(--fs-body2-font-size);
 				padding: 0.25rem;
 			}
 		}
 		&.text-box-size-medium {
+			--text-box-edge-padding: 0.6875rem;
 			font-size: var(--fs-body-font-size);
 			& :is(input, .content-after, .content-before) {
 				padding: 0.375rem;
@@ -284,6 +298,7 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			}
 		}
 		&.text-box-size-large {
+			--text-box-edge-padding: 0.9375rem;
 			& :is(input, .content-after, .content-before) {
 				padding: 0.625rem 0.625rem;
 				font-size: var(--fs-subtitle2-font-size);
@@ -295,5 +310,17 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 				margin-right: 0.3125rem;
 			}
 		}
+		/* The outer horizontal edges of the control use the per-size edge padding. */
+		&:is(.text-box-size-small, .text-box-size-medium, .text-box-size-large) {
+			& input:not(.content-before + input) {
+				padding-left: var(--text-box-edge-padding);
+			}
+			& :is(input, .content-after):last-child {
+				padding-right: var(--text-box-edge-padding);
+			}
+			& .content-before {
+				padding-left: var(--text-box-edge-padding);
+			}
+		}
 	}
 </style>

package/dist/components/text-box/types.d.ts

@@ -12,15 +12,15 @@ export type TextBoxProps = {
      * @type string | number
      * @bindable
      */
-    value?: string | number;
+    value?: string | number | null;
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The DOM reference of the input element.
      * @bindable
      */
-    ref?: HTMLInputElement;
+    ref?: HTMLInputElement | null;
     /** The placeholder text for the input.
      * @default 'Fluent TextBox'
      */
@@ -42,7 +42,7 @@ export type TextBoxProps = {
      */
     size?: Sizes;
     /** Occurs when content changes in the text box. */
-    textChanged?: (e: InputEvent, text: string) => void;
+    textChanged?: (e: Event & unknown, text: string) => void;
     /** The QuerySubmitted event occurs when:
      * 1. The input type is 'search'.
      * 2. While the focus is in the text box, press Enter or click the query icon.
@@ -53,7 +53,7 @@ export type TextBoxProps = {
     onClear?: (e: MouseEvent) => void;
     /** The children elements to render inside the input. */
     children?: Snippet;
-    /** The attributes to apply to the wrapper element.
+    /** The attributes to spread on the wrapper element.
      * @type HTMLAttributes
      */
     wrapperAttributes?: HTMLAttributes<HTMLDivElement>;

package/dist/components/textarea/docs/llms.md

@@ -44,6 +44,8 @@ The `onChange` event is triggered whenever the content of the textarea changes.
 <TextArea onChange={(e) => console.log(e)} placeholder="Type..." />
 ```
 
+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) -->
@@ -52,13 +54,12 @@ The `onChange` event is triggered whenever the content of the textarea changes.
 | Name                             | Type                                                               | Default      | Description                                      |
 | -------------------------------- | ------------------------------------------------------------------ | ------------ | ------------------------------------------------ |
 | `value` _bindable_               | `string`                                                           | `''`         | The current value of the textarea.               |
-| `ref` _bindable_                 | `HTMLElement`                                                      |              | The DOM reference of the textarea element.       |
+| `ref` _bindable_                 | `HTMLTextAreaElement` &#124; `null`                                |              | The DOM reference of the textarea element.       |
 | `placeholder`                    | `string`                                                           |              | The placeholder text for the textarea.           |
 | `resize`                         | `'none'` &#124; `'both'` &#124; `'horizontal'` &#124; `'vertical'` | `'vertical'` | Configures the resize behavior of the textarea.  |
-| `onChange`                       | `(e: Event) => void`                                               |              | Callback function for the change event.          |
 | `disabled`                       | `boolean`                                                          | `false`      | Disables the user interaction.                   |
 | `wrapperAttributes`              | `HTMLAttributes`                                                   |              | The attributes to spread on the wrapper element. |
-| `wrapperRef` _bindable_          | `HTMLDivElement`                                                   |              | The DOM reference of the wrapper element.        |
+| `wrapperRef` _bindable_          | `HTMLDivElement` &#124; `null`                                     |              | The DOM reference of the wrapper element.        |
 | `SvelteHTMLElements['textarea']` |                                                                    |              |                                                  |
 
 <!-- /props:TextAreaProps -->

package/dist/components/textarea/textarea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import { invokeHandlers } from '../../internal/index.js';
 	import type { TextAreaProps } from './types.js';
@@ -7,17 +8,19 @@
 	const COMPONENT_NAME = 'textarea';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		id = ID,
+		id = labelContext?.fieldId ?? ID,
 		name = id,
 		value = $bindable(''),
-		ref = $bindable(),
+		ref = $bindable(null),
 		resize = 'vertical',
 		style,
 		wrapperAttributes,
 		onchange,
 		disabled = false,
-		wrapperRef = $bindable(),
+		wrapperRef = $bindable(null),
 		...attributes
 	}: TextAreaProps = $props();
 </script>
@@ -36,16 +39,16 @@
 	<TextArea resize="none" disabled />
 	```
 -->
-<div class="fs-textarea" {...wrapperAttributes} bind:this={wrapperRef}>
+<div {...wrapperAttributes} class={['fs-textarea', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<textarea
+		{...attributes}
 		{name}
 		{id}
 		{disabled}
 		onchange={(e) => invokeHandlers(e, [disabled], [onchange])}
 		style="resize: {resize}; {style}"
 		bind:this={ref}
-		bind:value
-		{...attributes}></textarea>
+		bind:value></textarea>
 </div>
 
 <style>
@@ -128,6 +131,11 @@
 			left: -0.063rem;
 			background: var(--fs-accent-fill-default);
 		}
+		&:has(textarea:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background: var(--fs-system-critical);
+		}
 		&:has(textarea:focus) {
 			background: var(--fs-control-fill-input-active);
 			& textarea::placeholder {

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

@@ -9,15 +9,13 @@ export type TextAreaProps = {
     /** The DOM reference of the textarea element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLTextAreaElement | null;
     /** The placeholder text for the textarea. */
     placeholder?: string;
     /** Configures the resize behavior of the textarea.
      * @default 'vertical'
      */
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-    /** Callback function for the change event. */
-    onChange?: (e: Event) => void;
     /** Disables the user interaction.
      * @default false
      */
@@ -29,5 +27,5 @@ export type TextAreaProps = {
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
 } & SvelteHTMLElements['textarea'];

package/dist/components/time-picker/docs/llms.md

@@ -33,25 +33,28 @@ Use `hideHours`, `hideMinutes`, or `hideSeconds` to hide individual columns. By
 <TimePicker format={24} hideSeconds />
 ```
 
+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:TimePickerProps -->
 
-| Name                          | Type                  | Default           | Description                                                                                         |
-| ----------------------------- | --------------------- | ----------------- | --------------------------------------------------------------------------------------------------- |
-| `value` _bindable_            | `string`              | `''`              | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).                         |
-| `format`                      | `12` &#124; `24`      | `24`              | Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).                                    |
-| `open` _bindable_             | `boolean`             | `false`           | Controls the open state of the picker.                                                              |
-| `hideHours`                   | `boolean`             | `false`           | Removes the hour column.                                                                            |
-| `hideMinutes`                 | `boolean`             | `false`           | Removes the minute column.                                                                          |
-| `hideSeconds`                 | `boolean`             | `false`           | Removes the second column.                                                                          |
-| `element` _bindable_          | `HTMLButtonElement`   |                   | The DOM reference of the trigger button.                                                            |
-| `wrapperRef` _bindable_       | `HTMLDivElement`      |                   | The DOM reference of the element wrapping the trigger and its input.                                |
-| `wrapperAttributes`           | `HTMLAttributes`      |                   | The attributes to spread on the wrapper element.                                                    |
-| `inputElement` _bindable_     | `HTMLInputElement`    |                   | The DOM reference of the underlying input element.                                                  |
-| `inputProps`                  | `HTMLInputAttributes` |                   | HTML attributes for the underlying input element. Give it a `name` to submit the value with a form. |
-| `popupLabel`                  | `string`              | `'Choose a time'` | The accessible name of the popup, which is announced as a dialog.                                   |
-| Element Attributes (`button`) |                       |                   |                                                                                                     |
+| Name                                         | Type                                   | Default                                                                   | Description                                                                                                                                |
+| -------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value` _bindable_                           | `string`                               | `''`                                                                      | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).                                                                |
+| `format`                                     | `12` &#124; `24`                       | `24`                                                                      | Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).                                                                           |
+| `open` _bindable_                            | `boolean`                              | `false`                                                                   | Controls the open state of the picker.                                                                                                     |
+| `hideHours`                                  | `boolean`                              | `false`                                                                   | Removes the hour column.                                                                                                                   |
+| `hideMinutes`                                | `boolean`                              | `false`                                                                   | Removes the minute column.                                                                                                                 |
+| `hideSeconds`                                | `boolean`                              | `false`                                                                   | Removes the second column.                                                                                                                 |
+| `ref` _bindable_                             | `HTMLInputElement` &#124; `null`       |                                                                           | The DOM reference of the native time input that holds the value. The other attributes of the picker are applied to it.                     |
+| `buttonRef` _bindable_                       | `HTMLButtonElement` &#124; `null`      |                                                                           | The DOM reference of the button that opens the picker.                                                                                     |
+| `buttonAttributes`                           | `HTMLButtonAttributes`                 |                                                                           | The attributes to spread on the button that opens the picker.                                                                              |
+| `wrapperRef` _bindable_                      | `HTMLDivElement` &#124; `null`         |                                                                           | The DOM reference of the element wrapping the button and the native input.                                                                 |
+| `wrapperAttributes`                          | `HTMLAttributes`                       |                                                                           | The attributes to spread on the wrapper element.                                                                                           |
+| `popupLabel`                                 | `string`                               | `'Choose a time'`                                                         | The accessible name of the popup, which is announced as a dialog.                                                                          |
+| `columnLabels`                               | `{ hour, minute, second, … (4 keys) }` | `{ hour: 'Hour', minute: 'Minute', second: 'Second', meridiem: 'AM/PM' }` | The names of the hour, minute, second and AM/PM columns: shown on the trigger while there is no time, and given to the lists of the popup. |
+| `NativeFieldAttributes<HTMLInputAttributes>` |                                        |                                                                           |                                                                                                                                            |
 
 <!-- /props:TimePickerProps -->

package/dist/components/time-picker/time-picker.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import type { TimePickerProps } from './types.js';
 	import { Flyout, Button, Divider } from '../../index.js';
 	import { on } from 'svelte/events';
 	import { tick } from 'svelte';
 	import { PREFIX } from '../../internal/constants.js';
-	import { floating } from '../../internal/index.js';
+	import { dispatchFieldEvents, floating, invokeHandlers, NativeField } from '../../internal/index.js';
 	import { flip, hide, offset, shift } from '@floating-ui/dom';
 	import DynamicCarousel from '../../internal/components/dynamic-carousel/dynamic-carousel.svelte';
 	import { CheckmarkRegular, DismissRegular } from 'fluentui-icons-svelte';
 
+	const labelContext = claimLabel(() => id);
+
 	let {
 		format = 24,
 		value = $bindable(''),
@@ -16,24 +19,44 @@
 		hideHours = false,
 		hideMinutes = false,
 		hideSeconds = false,
-		element = $bindable(),
-		wrapperRef = $bindable(),
+		id = labelContext?.fieldId,
+		name = id,
+		ref = $bindable(null),
+		buttonRef = $bindable(null),
+		buttonAttributes,
+		wrapperRef = $bindable(null),
 		wrapperAttributes,
-		inputElement = $bindable(),
-		inputProps,
+		disabled,
+		readonly,
+		step,
+		onfocus,
+		onblur,
 		popupLabel = 'Choose a time',
+		columnLabels,
 		...attributes
 	}: TimePickerProps = $props();
 
 	const FALLBACK_ID = $props.id();
 	const POPUP_ID = `${PREFIX}timepicker-${FALLBACK_ID}-popup`;
 
-	let popupRef: HTMLElement | undefined = $state();
+	let popupRef: HTMLElement | null = $state(null);
+
+	const native = new NativeField(
+		() => ref,
+		() => buttonRef,
+		labelContext
+	);
 
 	/** Closing always hands the focus back, so the keyboard never lands nowhere. */
 	function closePopup() {
 		open = false;
-		element?.focus();
+		buttonRef?.focus();
+	}
+
+	/** A label activates the native input it belongs to, which hands the activation to the button. */
+	function openFromField() {
+		buttonRef?.focus();
+		open = !readonly;
 	}
 
 	// Escape has to work from inside the popup too, and the popup is not a descendant
@@ -64,19 +87,23 @@
 	const HOURS_12 = Array.from({ length: 12 }, (_, i) => pad(i === 0 ? 12 : i)); // 12, 01 … 11
 	const SIXTY = Array.from({ length: 60 }, (_, i) => pad(i));
 	const MERIDIEM = ['AM', 'PM'];
-	const LABELS: Record<Column, string> = {
+	// Name the columns on the trigger while there is no time, and the listboxes of the popup.
+	const labels: Record<Column, string> = $derived({
 		hour: 'Hour',
 		minute: 'Minute',
 		second: 'Second',
-		meridiem: 'AM/PM'
-	};
+		meridiem: 'AM/PM',
+		...columnLabels
+	});
 
 	const hour12 = $derived(format === 12);
 
 	// Working selection — canonical 24h values, synced with `value` while the popup is closed.
-	let hour = $state(new Date().getHours()); // 0-23
-	let minute = $state(new Date().getMinutes()); // 0-59
-	let second = $state(new Date().getSeconds()); // 0-59
+	// It starts from `value`, so a popup rendered open on the server shows it too.
+	const initial = parseValue(value);
+	let hour = $state(initial.h); // 0-23
+	let minute = $state(initial.mi); // 0-59
+	let second = $state(initial.s); // 0-59
 
 	const isPM = $derived(hour >= 12);
 	// 12h wheel index: hour % 12 (0 → "12", 1 → "01", …, 11 → "11").
@@ -94,6 +121,9 @@
 
 	const hasValue = $derived(/^\d{2}:\d{2}(:\d{2})?$/.test(value ?? ''));
 
+	// Parsed committed value: the closed trigger reads it, since the working selection only catches up in an effect.
+	const committed = $derived(parseValue(value));
+
 	function parseValue(v: string) {
 		const m = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(v ?? '');
 		const t = new Date();
@@ -127,7 +157,11 @@
 	}
 
 	function confirm() {
-		value = `${pad(hour)}:${pad(minute)}${hideSeconds ? '' : `:${pad(second)}`}`;
+		const next = `${pad(hour)}:${pad(minute)}${hideSeconds ? '' : `:${pad(second)}`}`;
+		if (next !== value) {
+			value = next;
+			dispatchFieldEvents(ref);
+		}
 		closePopup();
 	}
 
@@ -138,24 +172,29 @@
 	// Trigger label per column: the live selection while open, the committed value once set,
 	// otherwise the placeholder column name.
 	function display(col: Column): string {
-		if (!open && !hasValue) return LABELS[col];
-		if (col === 'hour') return hour12 ? HOURS_12[hour12Index] : pad(hour);
-		if (col === 'minute') return pad(minute);
-		if (col === 'second') return pad(second);
-		return isPM ? 'PM' : 'AM';
+		if (!open && !hasValue) return labels[col];
+		const { h, mi, s } = open ? { h: hour, mi: minute, s: second } : committed;
+		if (col === 'hour') return hour12 ? HOURS_12[h % 12] : pad(h);
+		if (col === 'minute') return pad(mi);
+		if (col === 'second') return pad(s);
+		return h >= 12 ? 'PM' : 'AM';
 	}
 </script>
 
-<div class="fs-time-picker-wrapper" bind:this={wrapperRef} {...wrapperAttributes}>
+<div {...wrapperAttributes} class={['fs-time-picker-wrapper', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<button
+		{...buttonAttributes}
+		{...native.aria(attributes, buttonAttributes, 'button')}
 		type="button"
-		class="fs-time-picker"
+		class={['fs-time-picker', buttonAttributes?.class]}
+		{disabled}
 		aria-haspopup="dialog"
 		aria-expanded={open}
 		aria-controls={open ? POPUP_ID : undefined}
-		onclick={() => (open = !open)}
-		bind:this={element}
-		{...attributes}
+		onclick={(e) => invokeHandlers(e, [], [() => (open = !readonly && !open), buttonAttributes?.onclick])}
+		onfocus={(e) => invokeHandlers(e, [], [onfocus, buttonAttributes?.onfocus])}
+		onblur={(e) => invokeHandlers(e, [], [onblur, buttonAttributes?.onblur])}
+		bind:this={buttonRef}
 	>
 		{#each columns as col, idx (col)}
 			{#if idx > 0}
@@ -165,13 +204,29 @@
 		{/each}
 	</button>
 
-	<!-- Carries the value into a form. -->
-	<input type="time" hidden step={hideSeconds ? undefined : 1} {value} bind:this={inputElement} {...inputProps} />
+	<!-- The field of the form: submitted, validated and reset like any time input,
+	     behind the button and out of the tab order, since the button is what people use. See `NativeField`.
+	     Seconds need a step of one to be a valid value. -->
+	<input
+		{...attributes}
+		{id}
+		{name}
+		class="native-field"
+		aria-hidden={native.reported ? undefined : 'true'}
+		type="time"
+		tabindex={-1}
+		step={step ?? (hideSeconds ? undefined : 1)}
+		{disabled}
+		{readonly}
+		bind:value
+		bind:this={ref}
+		onclick={openFromField}
+	/>
 </div>
 
 {#if open}
 	<Flyout
-		{@attach floating(element, {
+		{@attach floating(buttonRef, {
 			placement: 'bottom',
 			middleware: [
 				offset(({ rects }) => {
@@ -183,7 +238,7 @@
 			],
 			strategy: 'fixed'
 		})}
-		reference={element}
+		reference={buttonRef}
 		id={POPUP_ID}
 		role="dialog"
 		aria-modal="true"
@@ -198,16 +253,37 @@
 				<div class="carousel-col col-{col}">
 					{#if col === 'hour'}
 						{#if hour12}
-							<DynamicCarousel values={HOURS_12} selectedIndex={hour12Index} onSelected={(_, i) => setHour12(i)} />
+							<DynamicCarousel
+								label={labels.hour}
+								values={HOURS_12}
+								selectedIndex={hour12Index}
+								onSelected={(_, i) => setHour12(i)}
+							/>
 						{:else}
-							<DynamicCarousel values={HOURS_24} selectedIndex={hour} onSelected={(_, i) => (hour = i)} />
+							<DynamicCarousel
+								label={labels.hour}
+								values={HOURS_24}
+								selectedIndex={hour}
+								onSelected={(_, i) => (hour = i)}
+							/>
 						{/if}
 					{:else if col === 'minute'}
-						<DynamicCarousel values={SIXTY} selectedIndex={minute} onSelected={(_, i) => (minute = i)} />
+						<DynamicCarousel
+							label={labels.minute}
+							values={SIXTY}
+							selectedIndex={minute}
+							onSelected={(_, i) => (minute = i)}
+						/>
 					{:else if col === 'second'}
-						<DynamicCarousel values={SIXTY} selectedIndex={second} onSelected={(_, i) => (second = i)} />
+						<DynamicCarousel
+							label={labels.second}
+							values={SIXTY}
+							selectedIndex={second}
+							onSelected={(_, i) => (second = i)}
+						/>
 					{:else}
 						<DynamicCarousel
+							label={labels.meridiem}
 							values={MERIDIEM}
 							selectedIndex={isPM ? 1 : 0}
 							infinite={false}
@@ -230,11 +306,34 @@
 {/if}
 
 <style>
+	/* The box of the button, which the native field covers so its validation message points at the button. */
 	.fs-time-picker-wrapper {
-		display: contents;
+		display: flex;
+		position: relative;
+		inline-size: fit-content;
+	}
+	.fs-time-picker-wrapper:has(> .native-field:is(:user-invalid, [aria-invalid='true'])) {
+		& .picker-content {
+			color: var(--fs-system-critical);
+		}
+		& .fs-time-picker::after,
+		& :global(.fs-divider) {
+			background: 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;
 	}
 	.fs-time-picker {
 		display: flex;
+		flex: 1 1 auto;
 		position: relative;
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body-font-size);
@@ -291,6 +390,7 @@
 		position: fixed !important;
 		top: 0;
 		left: 0;
+		z-index: 110;
 		max-width: min-content;
 		padding: 0 !important;
 		& .wrapper {

package/dist/components/time-picker/time-picker.svelte.d.ts

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