fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/checkbox/checkbox.svelte

@@ -1,28 +1,29 @@
-<script lang="ts" generics="T extends 'div' | 'label' = 'label'">
+<script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
 	import SubtractFilled from 'fluentui-icons-svelte/SubtractFilled.svelte';
 	import { PREFIX } from '../../internal/constants.js';
 	import type { CheckboxProps } from './types.js';
-	import type { PolymorphicProps } from '../../types/index.js';
 
 	const FALLBACK_ID = $props.id();
 	const COMPONENT_NAME = 'checkbox';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		ref = $bindable(),
-		wrapperRef = $bindable(),
-		checked = $bindable(),
-		indeterminate = $bindable(),
-		id = ID,
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		checked = $bindable(null),
+		indeterminate = $bindable(null),
+		id = labelContext?.fieldId ?? ID,
 		name = id,
 		'aria-hidden': ariaHidden,
 		disabled,
-		wrapperAs = 'label' as T,
 		wrapperAttributes,
 		children,
 		...attributes
-	}: CheckboxProps<T> = $props();
+	}: CheckboxProps = $props();
 </script>
 
 <!-- 
@@ -38,17 +39,13 @@
     import { Checkbox } from 'fluentui-svelte';
   </script>
 
-  <Checkbox label="Checkbox label" />
+  <Checkbox>Checkbox label</Checkbox>
   ```
  -->
 
-<svelte:element
-	this={wrapperAs}
-	bind:this={wrapperRef}
-	{...wrapperAttributes as PolymorphicProps<T>}
-	class={['fs-checkbox', wrapperAttributes?.class, wrapperAs === 'label' && 'label-wrapper']}
->
+<div {...wrapperAttributes} class={['fs-checkbox', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<input
+		{...attributes}
 		{id}
 		{name}
 		{disabled}
@@ -56,15 +53,18 @@
 		aria-hidden={ariaHidden}
 		bind:checked
 		bind:this={ref}
-		{indeterminate}
-		{...attributes}
+		bind:indeterminate
+		data-indeterminate={indeterminate || undefined}
 	/>
 	<div style="pointer-events: none;" aria-hidden="true">
 		<SubtractFilled class="indeterminate" />
 		<CheckmarkFilled class="checked" />
 	</div>
-	{@render children?.()}
-</svelte:element>
+	<!-- Inside a Label, the Label names the field instead. -->
+	{#if children && !labelContext}
+		<label for={id}>{@render children()}</label>
+	{/if}
+</div>
 
 <style>
 	.fs-checkbox {
@@ -74,11 +74,10 @@
 		outline: none;
 		cursor: pointer;
 		position: relative;
-		gap: 0.75rem;
 		&:has(input:focus-visible) {
 			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
 			outline-offset: 0.125rem;
-			&.label-wrapper {
+			&:has(> label) {
 				border-radius: 0.063rem;
 				outline-offset: 0.313rem;
 			}
@@ -90,21 +89,27 @@
 			background-color: var(--fs-control-alt-fill-quaternary);
 			border-color: var(--fs-control-strong-disabled);
 		}
+		& > label {
+			padding-inline-start: 0.75rem;
+			cursor: inherit;
+		}
 		& input {
 			position: absolute;
 			inset: 0;
+			width: 1.25rem;
+			margin: 0;
 			border: unset;
 			outline: 0 !important;
 			opacity: 0;
 			appearance: none;
 			-webkit-appearance: none;
 			-moz-appearance: none;
-			&:indeterminate + div :global(svg.indeterminate),
+			&:is(:indeterminate, [data-indeterminate]) + div :global(svg.indeterminate),
 			&:checked + div :global(svg.checked) {
 				mask-size: 100% 100%;
 				transition: var(--fs-slower-duration, 1s) cubic-bezier(0.55, 0, 0, 1) mask-size;
 			}
-			&:is(:checked, :indeterminate) {
+			&:is(:checked, :indeterminate, [data-indeterminate]) {
 				& + div {
 					background-color: var(--fs-accent-fill-default);
 					border-color: var(--fs-accent-fill-default);
@@ -130,7 +135,21 @@
 			&:checked + div :global(svg.checked) {
 				width: 1rem;
 			}
-			&:indeterminate + div :global(svg.indeterminate) {
+			&:is(:user-invalid, [aria-invalid='true']) {
+				& + div {
+					border-color: var(--fs-system-critical);
+					color: var(--fs-system-critical) !important;
+					& + label {
+						color: var(--fs-system-critical);
+					}
+				}
+				&:hover {
+					& + div {
+						border-color: var(--fs-system-critical);
+					}
+				}
+			}
+			&:is(:indeterminate, [data-indeterminate]) + div :global(svg.indeterminate) {
 				width: 0.8rem;
 			}
 		}
@@ -146,11 +165,13 @@
 			justify-content: center;
 			& :global(svg) {
 				width: 0;
-				fill: var(--fs-text-on-accent-primary);
 				transform-origin: 80% 20%;
 				mask-image: linear-gradient(black, black);
 				mask-repeat: no-repeat;
 				mask-size: 0% 100%;
+				& :global(path) {
+					fill: var(--fs-text-on-accent-primary);
+				}
 			}
 		}
 		&:has(input:disabled) {

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

@@ -1,25 +1,4 @@
 import type { CheckboxProps } from './types.ts';
-declare function $$render<T extends 'div' | 'label' = 'label'>(): {
-    props: CheckboxProps<T>;
-    exports: {};
-    bindings: "ref" | "checked" | "indeterminate" | "wrapperRef";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<T extends 'div' | 'label' = 'label'> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "ref" | "checked" | "indeterminate" | "wrapperRef";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends 'div' | 'label' = 'label'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends 'div' | 'label' = 'label'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
 /**
  * The Fluent UI Checkbox is a customizable input element that allows users to select one or more options from a set.
  *  It is designed to be consistent with the Fluent Design System.
@@ -32,9 +11,9 @@ interface $$IsomorphicComponent {
  *    import { Checkbox } from 'fluentui-svelte';
  *  </script>
  *
- *  <Checkbox label="Checkbox label" />
+ *  <Checkbox>Checkbox label</Checkbox>
  *  ```
  */
-declare const Checkbox: $$IsomorphicComponent;
-type Checkbox<T extends 'div' | 'label' = 'label'> = InstanceType<typeof Checkbox<T>>;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "ref" | "checked" | "indeterminate" | "wrapperRef">;
+type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

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

@@ -9,7 +9,7 @@ Represents a control that a user can select (check) or clear (uncheck). A CheckB
 	import { Checkbox } from 'fluentui-svelte';
 </script>
 
-<Checkbox wrapperAs="label">Default</Checkbox>
+<Checkbox>Default</Checkbox>
 ```
 
 ## Component API
@@ -20,12 +20,12 @@ A brief explanation of the props that really need explaining. You can see the re
 
 ### Label
 
-To display a visible label, set `wrapperAs="label"` and pass the label text as children. The wrapper then renders as a `<label>` element that wraps the input.
+Pass the label text as children. The root is a `<div>` and the text renders in a separate `<label>` associated with the checkbox through `for` and `id`. Inside a `Label`, it is not rendered: the Label names the checkbox.
 
 ```svelte
 <Checkbox />
-<Checkbox wrapperAs="label">FluentUI Checkbox</Checkbox>
-<Checkbox wrapperAs="label">Another Checkbox</Checkbox>
+<Checkbox>FluentUI Checkbox</Checkbox>
+<Checkbox>Another Checkbox</Checkbox>
 ```
 
 ### Checked
@@ -33,8 +33,8 @@ To display a visible label, set `wrapperAs="label"` and pass the label text as c
 The `checked` prop determines whether the checkbox is checked or not. It accepts a boolean value.
 
 ```svelte
-<Checkbox wrapperAs="label">Unchecked</Checkbox>
-<Checkbox wrapperAs="label" checked>Checked</Checkbox>
+<Checkbox>Unchecked</Checkbox>
+<Checkbox checked>Checked</Checkbox>
 ```
 
 ### Indeterminate
@@ -42,7 +42,7 @@ The `checked` prop determines whether the checkbox is checked or not. It accepts
 The `indeterminate` prop sets the checkbox to an indeterminate state, which is useful for representing a mixed selection.
 
 ```svelte
-<Checkbox wrapperAs="label" indeterminate>Indeterminate</Checkbox>
+<Checkbox indeterminate>Indeterminate</Checkbox>
 ```
 
 ### Disabled
@@ -50,8 +50,8 @@ The `indeterminate` prop sets the checkbox to an indeterminate state, which is u
 The `disabled` prop disables the checkbox, preventing user interaction. It accepts a boolean value.
 
 ```svelte
-<Checkbox wrapperAs="label" disabled>Disabled</Checkbox>
-<Checkbox wrapperAs="label" checked disabled>Checked & Disabled</Checkbox>
+<Checkbox disabled>Disabled</Checkbox>
+<Checkbox checked disabled>Checked & Disabled</Checkbox>
 ```
 
 ### Value
@@ -59,26 +59,27 @@ The `disabled` prop disables the checkbox, preventing user interaction. It accep
 The `value` prop sets the value of the checkbox input. It is useful when the checkbox is part of a form submission.
 
 ```svelte
-<Checkbox wrapperAs="label" value="checkbox-value">Checkbox with Value</Checkbox>
+<Checkbox value="checkbox-value">Checkbox with Value</Checkbox>
 ```
 
+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.
+
 ## Checkbox Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:CheckboxProps -->
 
-| Name                                            | Type                                       | Default   | Description                                                                                                                                                     |
-| ----------------------------------------------- | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                | `HTMLInputElement`                         |           | The DOM reference of the checkbox element.                                                                                                                      |
-| `wrapperAs`                                     | `'div'` &#124; `'label'`                   | `'label'` | The DOM element used to wrap the checkbox. `label` associates the children with the input; switch to `div` when the field is wrapped in a `<Label>` of its own. |
-| `wrapperRef` _bindable_                         | `HTMLDivElement` &#124; `HTMLLabelElement` |           | The DOM reference of the checkbox wrapper element.                                                                                                              |
-| `wrapperAttributes`                             | `PolymorphicProps`                         |           | The attributes to spread on the wrapper element.                                                                                                                |
-| `indeterminate` _bindable_                      | `boolean`                                  |           | Renders the checkbox in its mixed state, neither checked nor unchecked.                                                                                         |
-| `name`                                          | `string` &#124; `null`                     | `id`      | The name submitted with the form. Falls back to the id of the checkbox.                                                                                         |
-| `group`                                         | `string` &#124; `null`                     |           | The value of the group of checkboxes this input belongs to.                                                                                                     |
-| `checked` _bindable_                            | `boolean`                                  |           | Whether the checkbox is checked.                                                                                                                                |
-| `disabled`                                      | `boolean`                                  |           | Disables the user interaction.                                                                                                                                  |
-| `children`                                      | `Snippet`                                  |           | The content of the label. Only rendered when wrapperAs is set to label.                                                                                         |
-| `HTMLInputAttributes` without `on:`, `children` |                                            |           |                                                                                                                                                                 |
+| Name                                            | Type                             | Default | Description                                                                                 |
+| ----------------------------------------------- | -------------------------------- | ------- | ------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                | `HTMLInputElement` &#124; `null` |         | The DOM reference of the checkbox element.                                                  |
+| `wrapperRef` _bindable_                         | `HTMLDivElement` &#124; `null`   |         | The DOM reference of the checkbox wrapper element.                                          |
+| `wrapperAttributes`                             | `HTMLAttributes`                 |         | The attributes to spread on the wrapper element.                                            |
+| `indeterminate` _bindable_                      | `boolean` &#124; `null`          |         | Renders the checkbox in its mixed state, neither checked nor unchecked.                     |
+| `name`                                          | `string` &#124; `null`           | `id`    | The name submitted with the form. Falls back to the id of the checkbox.                     |
+| `group`                                         | `string` &#124; `null`           |         | The value of the group of checkboxes this input belongs to.                                 |
+| `checked` _bindable_                            | `boolean` &#124; `null`          |         | Whether the checkbox is checked.                                                            |
+| `disabled`                                      | `boolean`                        |         | Disables the user interaction.                                                              |
+| `children`                                      | `Snippet`                        |         | The content of the label associated with the checkbox. Inside a `Label`, it is not rendered |
+| `HTMLInputAttributes` without `on:`, `children` |                                  |         |                                                                                             |
 
 <!-- /props:CheckboxProps -->

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

@@ -1,32 +1,23 @@
-import type { HTMLInputAttributes } from 'svelte/elements';
-import type { PolymorphicProps } from '../../types/index.js';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 /** @propsmith CheckboxProps */
-export type CheckboxProps<T extends 'div' | 'label' = 'div'> = {
+export type CheckboxProps = {
     /** The DOM reference of the checkbox element.
      * @bindable
      */
-    ref?: HTMLInputElement;
-    /** The DOM element used to wrap the checkbox. `label` associates the children with the
-     * input; switch to `div` when the field is wrapped in a `<Label>` of its own.
-     * @default 'label'
-     * @type 'div' | 'label'
-     * @default 'div'
-     */
-    wrapperAs?: T;
+    ref?: HTMLInputElement | null;
     /** The DOM reference of the checkbox wrapper element.
-     * @type HTMLDivElement | HTMLLabelElement
      * @bindable
      */
-    wrapperRef?: WrapperRef[T];
+    wrapperRef?: HTMLDivElement | null;
     /** The attributes to spread on the wrapper element.
-     * @type PolymorphicProps
+     * @type HTMLAttributes
      */
-    wrapperAttributes?: PolymorphicProps<T>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** Renders the checkbox in its mixed state, neither checked nor unchecked.
      * @bindable
      */
-    indeterminate?: boolean;
+    indeterminate?: boolean | null;
     /** The name submitted with the form. Falls back to the id of the checkbox.
      * @default id
      */
@@ -36,15 +27,11 @@ export type CheckboxProps<T extends 'div' | 'label' = 'div'> = {
     /** Whether the checkbox is checked.
      * @bindable
      */
-    checked?: boolean;
+    checked?: boolean | null;
     /** Disables the user interaction. */
     disabled?: boolean;
-    /** The content of the label. Only rendered when wrapperAs is set to label.
+    /** The content of the label associated with the checkbox. Inside a `Label`, it is not rendered
      * @type Snippet
      */
-    children?: T extends 'label' ? Snippet : never;
+    children?: Snippet;
 } & Omit<HTMLInputAttributes, 'on:' | 'children'>;
-export type WrapperRef = {
-    label: HTMLLabelElement;
-    div: HTMLDivElement;
-};

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

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import type { DatePickerProps } 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 = 'dd/MM/yyyy',
 		value = $bindable(''),
@@ -21,24 +24,43 @@
 		disabledDates = [],
 		disabledMonths = [],
 		disabledYears = [],
-		ref = $bindable(),
-		wrapperRef = $bindable(),
+		id = labelContext?.fieldId,
+		name = id,
+		ref = $bindable(null),
+		buttonRef = $bindable(null),
+		buttonAttributes,
+		wrapperRef = $bindable(null),
 		wrapperAttributes,
-		inputElement = $bindable(),
-		inputProps,
+		disabled,
+		readonly,
+		onfocus,
+		onblur,
 		popupLabel = 'Choose a date',
+		columnLabels,
 		...attributes
 	}: DatePickerProps = $props();
 
 	const FALLBACK_ID = $props.id();
 	const POPUP_ID = `${PREFIX}datepicker-${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;
-		ref?.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
@@ -78,13 +100,16 @@
 		'November',
 		'December'
 	];
-	const LABELS: Record<Column, string> = { month: 'Month', day: 'Day', year: 'Year' };
+	// Name the columns on the trigger while there is no date, and the listboxes of the popup.
+	const labels: Record<Column, string> = $derived({ month: 'Month', day: 'Day', year: 'Year', ...columnLabels });
 
 	// Working selection (actual values). Kept in sync with `value` while the popup is closed,
 	// so each open starts from the committed value and Cancel/dismiss discards edits.
-	let month = $state(new Date().getMonth()); // 0-11
-	let day = $state(new Date().getDate()); // 1-31 (raw intent; clamped for display via effectiveDay)
-	let year = $state(new Date().getFullYear());
+	// It starts from `value`, so a popup rendered open on the server shows it too.
+	const initial = parseValue(value);
+	let month = $state(initial.mo); // 0-11
+	let day = $state(initial.d); // 1-31 (raw intent; clamped for display via effectiveDay)
+	let year = $state(initial.y);
 
 	// Descending list of selectable years within [minYear, maxYear].
 	const yearsList = $derived(Array.from({ length: Math.max(0, maxYear - minYear) + 1 }, (_, i) => maxYear - i));
@@ -156,7 +181,11 @@
 	});
 
 	function confirm() {
-		value = `${year}-${pad(month + 1)}-${pad(effectiveDay)}`;
+		const next = `${year}-${pad(month + 1)}-${pad(effectiveDay)}`;
+		if (next !== value) {
+			value = next;
+			dispatchFieldEvents(ref);
+		}
 		closePopup();
 	}
 
@@ -166,25 +195,27 @@
 
 	// Trigger label per column
 	function display(col: Column): string {
-		if (!hasValue) return LABELS[col];
+		if (!hasValue) return labels[col];
 		if (col === 'month') return MONTH_NAMES[committed.mo];
 		if (col === 'day') return pad(committed.d);
 		return String(committed.y);
 	}
 </script>
 
-<div class="fs-date-picker-wrapper" bind:this={wrapperRef} {...wrapperAttributes}>
-	<!-- A real button: Enter and Space, the disabled state and High Contrast styling all
-	     come for free, and the hidden input cannot live inside it. -->
+<div {...wrapperAttributes} class={['fs-date-picker-wrapper', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<button
+		{...buttonAttributes}
+		{...native.aria(attributes, buttonAttributes, 'button')}
 		type="button"
-		class="fs-date-picker"
+		class={['fs-date-picker', buttonAttributes?.class]}
+		{disabled}
 		aria-haspopup="dialog"
 		aria-expanded={open}
 		aria-controls={open ? POPUP_ID : undefined}
-		onclick={() => (open = !open)}
-		bind:this={ref}
-		{...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}
@@ -194,17 +225,33 @@
 		{/each}
 	</button>
 
-	<!-- Carries the value into a form. `hidden` keeps it out of the tab order and out of
-	     the accessibility tree, and a hidden control is still submitted. -->
-	<input type="date" hidden {value} bind:this={inputElement} {...inputProps} />
+	<!-- The field of the form: submitted, validated and reset like any date input,
+	     behind the button and out of the tab order, since the button is what people use. See `NativeField`. -->
+	<input
+		{...attributes}
+		{name}
+		{id}
+		min={attributes.min ?? `${String(minYear).padStart(4, '0')}-01-01`}
+		max={attributes.max ?? `${String(maxYear).padStart(4, '0')}-12-31`}
+		class="native-field"
+		aria-hidden={native.reported ? undefined : 'true'}
+		type="date"
+		tabindex={-1}
+		{disabled}
+		{readonly}
+		bind:value
+		bind:this={ref}
+		onclick={openFromField}
+	/>
 </div>
 
 {#if open}
 	<Flyout
-		{@attach floating(ref, {
+		{@attach floating(buttonRef, {
 			placement: 'bottom',
 			middleware: [
 				offset(({ rects }) => {
+					// Place over the reference element
 					return -rects.reference.height / 2 - rects.floating.height / 2;
 				}),
 				flip(),
@@ -213,7 +260,6 @@
 			],
 			strategy: 'fixed'
 		})}
-		reference={ref}
 		id={POPUP_ID}
 		role="dialog"
 		aria-modal="true"
@@ -228,6 +274,7 @@
 				<div class="carousel-col col-{col}">
 					{#if col === 'month'}
 						<DynamicCarousel
+							label={labels.month}
 							values={MONTH_NAMES}
 							selectedIndex={month}
 							disabledIndices={disabledMonthIdx}
@@ -236,6 +283,7 @@
 					{:else if col === 'day'}
 						{#key `${year}-${month}`}
 							<DynamicCarousel
+								label={labels.day}
 								values={dayList}
 								selectedIndex={effectiveDay - 1}
 								disabledIndices={disabledDayIdx}
@@ -244,6 +292,7 @@
 						{/key}
 					{:else}
 						<DynamicCarousel
+							label={labels.year}
 							values={yearStrings}
 							selectedIndex={yearIdx}
 							disabledIndices={disabledYearIdx}
@@ -265,12 +314,34 @@
 {/if}
 
 <style>
-	/* Layout-neutral: the button keeps the box the wrapper used to have. */
+	/* The box of the button, which the native field covers so its validation message points at the button. */
 	.fs-date-picker-wrapper {
-		display: contents;
+		display: flex;
+		position: relative;
+		inline-size: fit-content;
+	}
+	.fs-date-picker-wrapper:has(> .native-field:is(:user-invalid, [aria-invalid='true'])) {
+		& .picker-content {
+			color: var(--fs-system-critical);
+		}
+		& .fs-date-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-date-picker {
 		display: flex;
+		flex: 1 1 auto;
 		position: relative;
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body-font-size);

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

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