fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/breadcrumb/breadcrumb-divider.svelte

@@ -2,7 +2,7 @@
 	import ChevronRightRegular from 'fluentui-icons-svelte/ChevronRightRegular.svelte';
 	import type { BreadcrumbDividerProps } from './types.js';
 
-	let { ref = $bindable(), class: classes, children, ...attributes }: BreadcrumbDividerProps = $props();
+	let { ref = $bindable(null), class: classes, children, ...attributes }: BreadcrumbDividerProps = $props();
 </script>
 
 <!--
@@ -16,7 +16,7 @@
 	<BreadcrumbDivider />
 	```
 -->
-<li bind:this={ref} aria-hidden="true" class={['fs-breadcrumb-divider', classes]} {...attributes}>
+<li {...attributes} bind:this={ref} aria-hidden="true" class={['fs-breadcrumb-divider', classes]}>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/components/breadcrumb/breadcrumb-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { BreadcrumbItemProps } from './types.js';
 
-	let { ref = $bindable(), class: classes, children, ...attributes }: BreadcrumbItemProps = $props();
+	let { ref = $bindable(null), class: classes, children, ...attributes }: BreadcrumbItemProps = $props();
 </script>
 
 <!--
@@ -17,7 +17,7 @@
 	</BreadcrumbItem>
 	```
 -->
-<li bind:this={ref} class={['fs-breadcrumb-item', classes]} {...attributes}>
+<li {...attributes} bind:this={ref} class={['fs-breadcrumb-item', classes]}>
 	{@render children?.()}
 </li>
 

package/dist/components/breadcrumb/breadcrumb.svelte

@@ -6,9 +6,9 @@
 	const TABSPOT_ITEMS = '.fs-breadcrumb-button';
 
 	let {
-		ref = $bindable(),
-		listRef = $bindable(),
-		listProps,
+		ref = $bindable(null),
+		listRef = $bindable(null),
+		listAttributes,
 		size = 'medium',
 		focusMode = 'tab',
 		'aria-label': ariaLabel,
@@ -50,13 +50,18 @@
 	```
 -->
 <nav
+	{...attributes}
 	bind:this={ref}
 	aria-label={ariaLabelledby ? undefined : (ariaLabel ?? 'Breadcrumb')}
 	aria-labelledby={ariaLabelledby}
 	class={['fs-breadcrumb', size, classes]}
-	{...attributes}
 >
-	<ol bind:this={listRef} class="fs-breadcrumb-list" {...tabspotAttributes} {...listProps}>
+	<ol
+		{...listAttributes}
+		bind:this={listRef}
+		class={['fs-breadcrumb-list', listAttributes?.class]}
+		{...tabspotAttributes}
+	>
 		{@render children?.()}
 	</ol>
 </nav>

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

@@ -133,9 +133,9 @@ The label on the menu button is yours to write, and it is worth writing: a trigg
 
 | Name                 | Type                                         | Default    | Description                                                                                                                                                |
 | -------------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_     | `HTMLElement`                                |            | The DOM reference of the `nav`.                                                                                                                            |
-| `listRef` _bindable_ | `HTMLOListElement`                           |            | The DOM reference of the list.                                                                                                                             |
-| `listProps`          | `HTMLOlAttributes`                           |            | The props to spread on the list element.                                                                                                                   |
+| `ref` _bindable_     | `HTMLElement` | `null`                  |            | The DOM reference of the `nav`.                                                                                                                            |
+| `listRef` _bindable_ | `HTMLOListElement` | `null`             |            | The DOM reference of the list.                                                                                                                             |
+| `listAttributes`     | `HTMLOlAttributes`                           |            | The attributes to spread on the list element.                                                                                                              |
 | `size`               | `'small'` | `'medium'` | `'large'` | `'medium'` | The size of every step and divider of the trail.                                                                                                           |
 | `focusMode`          | `'tab'` | `'arrow'`                     | `'tab'`    | How the focus walks the trail: `tab` leaves every step its own tab stop, `arrow` gives the trail a single one and moves between steps with the arrow keys. |
 | Element Attributes   |                                              |            |                                                                                                                                                            |
@@ -147,10 +147,10 @@ The label on the menu button is yours to write, and it is worth writing: a trigg
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:BreadcrumbItemProps -->
 
-| Name                      | Type            | Default | Description                    |
-| ------------------------- | --------------- | ------- | ------------------------------ |
-| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the item. |
-| Element Attributes (`li`) |                 |         |                                |
+| Name                      | Type                          | Default | Description                    |
+| ------------------------- | ----------------------------- | ------- | ------------------------------ |
+| `ref` _bindable_          | `HTMLLIElement` &#124; `null` |         | The DOM reference of the item. |
+| Element Attributes (`li`) |                               |         |                                |
 
 <!-- /props:BreadcrumbItemProps -->
 
@@ -177,10 +177,10 @@ The label on the menu button is yours to write, and it is worth writing: a trigg
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:BreadcrumbDividerProps -->
 
-| Name                      | Type            | Default | Description                       |
-| ------------------------- | --------------- | ------- | --------------------------------- |
-| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the divider. |
-| Element Attributes (`li`) |                 |         |                                   |
+| Name                      | Type                          | Default | Description                       |
+| ------------------------- | ----------------------------- | ------- | --------------------------------- |
+| `ref` _bindable_          | `HTMLLIElement` &#124; `null` |         | The DOM reference of the divider. |
+| Element Attributes (`li`) |                               |         |                                   |
 
 <!-- /props:BreadcrumbDividerProps -->
 

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

@@ -13,15 +13,15 @@ export type BreadcrumbProps = {
     /** The DOM reference of the `nav`.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
     /** The DOM reference of the list.
      * @bindable
      */
-    listRef?: HTMLOListElement;
-    /** The props to spread on the list element.
+    listRef?: HTMLOListElement | null;
+    /** The attributes to spread on the list element.
      * @type HTMLOlAttributes
      */
-    listProps?: HTMLOlAttributes;
+    listAttributes?: HTMLOlAttributes;
     /** The size of every step and divider of the trail.
      * @default 'medium'
      */
@@ -37,7 +37,7 @@ export type BreadcrumbItemProps = {
     /** The DOM reference of the item.
      * @bindable
      */
-    ref?: HTMLLIElement;
+    ref?: HTMLLIElement | null;
 } & HTMLAttributes<HTMLLIElement>;
 /** @propsmith BreadcrumbButtonProps */
 export type BreadcrumbButtonProps<T extends BreadcrumbItemGenerics = 'button'> = {
@@ -45,7 +45,7 @@ export type BreadcrumbButtonProps<T extends BreadcrumbItemGenerics = 'button'> =
      * @type BreadcrumbItemElementDOMType[T]
      * @bindable
      */
-    ref?: BreadcrumbItemElementDOMType[T];
+    ref?: BreadcrumbItemElementDOMType[T] | null;
     /** The DOM element to render. A step that goes somewhere is an anchor and takes `href`.
      * @type 'button' | 'a'
      * @default 'button'
@@ -76,5 +76,5 @@ export type BreadcrumbDividerProps = {
     /** The DOM reference of the divider.
      * @bindable
      */
-    ref?: HTMLLIElement;
+    ref?: HTMLLIElement | null;
 } & HTMLAttributes<HTMLLIElement>;

package/dist/components/button/button.svelte

@@ -9,7 +9,7 @@
 		class: classes,
 		shape = 'rounded',
 		disabled,
-		ref = $bindable(),
+		ref = $bindable(null),
 		onclick,
 		onkeydown,
 		isMenuButton,
@@ -49,6 +49,7 @@
  -->
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref}
 	disabled={disabled && as !== 'div' ? true : undefined}
 	aria-disabled={disabled && as !== 'div' ? true : undefined}
@@ -56,7 +57,6 @@
 	tabindex={_tabIndex ?? (as !== 'div' && (disabledFocusable || disabled) ? -1 : undefined)}
 	onclick={(e: MouseEvent) => invokeHandlers(e, [as === 'div', disabled], [onclick])}
 	onkeydown={(e: KeyboardEvent) => invokeHandlers(e, [as === 'div', disabled], [onkeydown])}
-	{...attributes}
 >
 	{#if isMenuButton && indicatorPosition === 'before'}
 		{#if indicatorIcon}

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

@@ -79,12 +79,12 @@ A split button is a special type of button that combines a standard button with
 	import { SplitButton } from 'fluentui-svelte';
 </script>
 
-<SplitButton />
-<SplitButton appearance="standard" />
-<SplitButton appearance="subtle" />
-<SplitButton shape="circular" />
-<SplitButton shape="circular" appearance="standard" />
-<SplitButton shape="circular" appearance="subtle" />
+<SplitButton menuTriggerProps={{ 'aria-label': 'More options' }} />
+<SplitButton appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
+<SplitButton appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />
+<SplitButton shape="circular" menuTriggerProps={{ 'aria-label': 'More options' }} />
+<SplitButton shape="circular" appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
+<SplitButton shape="circular" appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />
 ```
 
 ### Adding a Menu
@@ -96,16 +96,16 @@ To add a menu to the split button, please refer to the Menu documentation for de
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:SplitButtonProps -->
 
-| Name                          | Type                                              | Default     | Description                                                                                  |
-| ----------------------------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
-| `appearance`                  | `'accent'` &#124; `'standard'` &#124; `'subtle'`  | `'accent'`  | Both buttons can have their content and borders styled for greater emphasis or to be subtle. |
-| `shape`                       | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | Both buttons can be rounded, circular, or square.                                            |
-| `disabled`                    | `boolean`                                         | `false`     | Disables the user interaction on both buttons.                                               |
-| `primaryButtonProps`          | `ButtonProps`                                     |             | The props to spread on the primary button.                                                   |
-| `menuTriggerProps`            | `ButtonProps`                                     |             | The props to spread on the button that opens the menu.                                       |
-| `wrapperRef` _bindable_       | `HTMLDivElement`                                  |             | The DOM reference of the element wrapping both buttons.                                      |
-| `primaryButtonRef` _bindable_ | `HTMLButtonElement`                               |             | The DOM reference of the primary button.                                                     |
-| `menuTriggerRef` _bindable_   | `HTMLButtonElement`                               |             | The DOM reference of the button that opens the menu.                                         |
-| HTML Attributes               |                                                   |             |                                                                                              |
+| Name                          | Type                                              | Default     | Description                                                                                                |
+| ----------------------------- | ------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------- |
+| `appearance`                  | `'accent'` &#124; `'standard'` &#124; `'subtle'`  | `'accent'`  | Both buttons can have their content and borders styled for greater emphasis or to be subtle.               |
+| `shape`                       | `'circular'` &#124; `'rounded'` &#124; `'square'` | `'rounded'` | Both buttons can be rounded, circular, or square.                                                          |
+| `disabled`                    | `boolean`                                         | `false`     | Disables the user interaction on both buttons.                                                             |
+| `primaryButtonProps`          | `ButtonProps`                                     |             | The props to spread on the primary button.                                                                 |
+| `menuTriggerProps`            | `ButtonProps`                                     |             | The props to spread on the button that opens the menu. It shows only an arrow, so give it an `aria-label`. |
+| `wrapperRef` _bindable_       | `HTMLDivElement` &#124; `null`                    |             | The DOM reference of the element wrapping both buttons.                                                    |
+| `primaryButtonRef` _bindable_ | `HTMLButtonElement` &#124; `null`                 |             | The DOM reference of the primary button.                                                                   |
+| `menuTriggerRef` _bindable_   | `HTMLButtonElement` &#124; `null`                 |             | The DOM reference of the button that opens the menu.                                                       |
+| HTML Attributes               |                                                   |             |                                                                                                            |
 
 <!-- /props:SplitButtonProps -->

package/dist/components/button/split-button.svelte

@@ -8,18 +8,18 @@
 		appearance = 'accent',
 		shape = 'rounded',
 		disabled = false,
-		wrapperRef = $bindable(),
+		wrapperRef = $bindable(null),
 		primaryButtonProps,
 		menuTriggerProps,
-		primaryButtonRef = $bindable(),
-		menuTriggerRef = $bindable(),
+		primaryButtonRef = $bindable(null),
+		menuTriggerRef = $bindable(null),
 		children,
 		...attributes
 	}: SplitButtonProps = $props();
 </script>
 
-<div class={['fs-split-button', classes]} role="group" bind:this={wrapperRef} {...attributes}>
-	<Button as="button" {appearance} {shape} {disabled} bind:ref={primaryButtonRef} {...primaryButtonProps}>
+<div {...attributes} class={['fs-split-button', classes]} role="group" bind:this={wrapperRef}>
+	<Button {...primaryButtonProps} as="button" {appearance} {shape} {disabled} bind:ref={primaryButtonRef}>
 		{#if children}
 			{@render children()}
 		{:else}
@@ -27,13 +27,13 @@
 		{/if}
 	</Button>
 	<Button
+		{...menuTriggerProps}
 		as="button"
-		class="menu-button"
+		class={['menu-button', menuTriggerProps?.class]}
 		{appearance}
 		{shape}
 		{disabled}
 		bind:ref={menuTriggerRef}
-		{...menuTriggerProps}
 	>
 		<ChevronDownFilled class="indicator" />
 	</Button>

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

@@ -7,7 +7,7 @@ export type ButtonProps<T extends ButtonGenerics = 'button'> = {
      * @type ButtonElementDOMType[T]
      * @bindable
      */
-    ref?: ButtonElementDOMType[T];
+    ref?: ButtonElementDOMType[T] | null;
     /** The DOM element to render.
      * @type 'button' | 'a' | 'div'
      * @default 'button'
@@ -69,20 +69,20 @@ export type SplitButtonProps = {
      * @type ButtonProps
      */
     primaryButtonProps: ButtonProps<'button'>;
-    /** The props to spread on the button that opens the menu.
+    /** The props to spread on the button that opens the menu. It shows only an arrow, so give it an `aria-label`.
      * @type ButtonProps
      */
     menuTriggerProps: ButtonProps<'button'>;
     /** The DOM reference of the element wrapping both buttons.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The DOM reference of the primary button.
      * @bindable
      */
-    primaryButtonRef?: HTMLButtonElement;
+    primaryButtonRef?: HTMLButtonElement | null;
     /** The DOM reference of the button that opens the menu.
      * @bindable
      */
-    menuTriggerRef?: HTMLButtonElement;
+    menuTriggerRef?: HTMLButtonElement | null;
 } & PolymorphicProps<'div'>;

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

@@ -1,13 +1,23 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { Button, CalendarView } from '../../index.js';
 	import { CalendarLtrRegular } from 'fluentui-icons-svelte';
 	import type { CalendarDatePickerProps } from './types.js';
 	import { onMount, tick } from 'svelte';
 	import { on } from 'svelte/events';
+	import { dispatchFieldEvents, invokeHandlers, NativeField } from '../../internal/index.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import { flip, hide, offset, shift } from '@floating-ui/dom';
 
+	/** The Label the field is inside, when the label is for it. */
+	const labelContext = claimLabel(() => id);
+
 	let {
+		wrapperAttributes,
+		disabled,
+		readonly,
+		onfocus,
+		onblur,
 		value = $bindable(null),
 		locale = 'en-US',
 		format = {
@@ -17,14 +27,19 @@
 		},
 		calendarPosition: _positionConfig,
 		blackoutDates,
-		ref = $bindable(),
+		wrapperRef = $bindable(null),
 		headers,
 		maxDate,
 		minDate,
+		today,
 		weekStart,
 		onChange,
-		triggerRef = $bindable(),
-		popupRef = $bindable(),
+		id = labelContext?.fieldId,
+		name = id,
+		ref = $bindable(null),
+		buttonRef = $bindable(null),
+		buttonProps,
+		popupRef = $bindable(null),
 		popupLabel = 'Choose a date',
 		...attributes
 	}: CalendarDatePickerProps = $props();
@@ -34,10 +49,34 @@
 
 	let open = $state(false);
 
+	const native = new NativeField(
+		() => ref,
+		() => buttonRef,
+		labelContext
+	);
+
 	/** Closing always hands the focus back to the trigger button. */
 	function closePopup() {
 		open = false;
-		triggerRef?.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;
+	}
+
+	const pad = (n: number, length = 2) => String(n).padStart(length, '0');
+
+	/** The native input holds the calendar day as `YYYY-MM-DD`, read in local time... no UTC offset shifts it. */
+	function toFieldValue(date: Date | null | undefined) {
+		return date ? `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` : '';
+	}
+
+	function fromFieldValue(text: string) {
+		const [year, month, day] = text.split('-').map(Number);
+		return text ? new Date(year, month - 1, day) : null;
 	}
 
 	let positionConfig = $derived({
@@ -48,7 +87,7 @@
 
 	onMount(() => {
 		const off = on(document, 'click', (event: MouseEvent) => {
-			if (ref && !ref.contains(event.target as Node)) {
+			if (wrapperRef && !wrapperRef.contains(event.target as Node)) {
 				open = false;
 			}
 		});
@@ -76,14 +115,21 @@
 	});
 </script>
 
-<div class="fs-calendar-date-picker" bind:this={ref} {...attributes}>
+<div {...wrapperAttributes} class={['fs-calendar-date-picker', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<Button
+		{...buttonProps}
+		{...native.aria(attributes, buttonProps, 'button')}
 		appearance="standard"
+		type="button"
+		class={['fs-calendar-date-picker-button', buttonProps?.class]}
+		disabled={disabled ?? false}
 		aria-haspopup="dialog"
 		aria-expanded={open}
 		aria-controls={open ? POPUP_ID : undefined}
-		bind:ref={triggerRef}
-		onclick={() => (open = !open)}
+		bind:ref={buttonRef}
+		onclick={(e) => invokeHandlers(e, [], [() => (open = !readonly && !open), buttonProps?.onclick])}
+		onfocus={(e) => invokeHandlers(e, [], [onfocus, buttonProps?.onfocus])}
+		onblur={(e) => invokeHandlers(e, [], [onblur, buttonProps?.onblur])}
 	>
 		{#if value}
 			{value.toLocaleDateString(locale, format)}
@@ -92,6 +138,27 @@
 		{/if}
 		<CalendarLtrRegular width="1rem" />
 	</Button>
+	<!-- 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}
+		{id}
+		{name}
+		class="native-field"
+		aria-hidden={native.reported ? undefined : 'true'}
+		type="date"
+		tabindex={-1}
+		{disabled}
+		{readonly}
+		bind:value={
+			() => toFieldValue(value),
+			(text) => {
+				if (text !== toFieldValue(value)) value = fromFieldValue(text);
+			}
+		}
+		bind:this={ref}
+		onclick={openFromField}
+	/>
 	{#if open}
 		<CalendarView
 			bind:value
@@ -101,12 +168,16 @@
 			aria-modal="true"
 			aria-label={popupLabel}
 			tabindex={-1}
-			floating={{ ref, positionConfig }}
-			onChange={onChange as any}
+			floating={{ ref: wrapperRef, positionConfig }}
+			onChange={(event, date) => {
+				onChange?.(event, date as Date | null);
+				dispatchFieldEvents(ref);
+			}}
 			{blackoutDates}
 			{headers}
 			{maxDate}
 			{minDate}
+			{today}
 			{weekStart}
 		/>
 	{/if}
@@ -115,5 +186,22 @@
 <style>
 	.fs-calendar-date-picker {
 		position: relative;
+		inline-size: fit-content;
+		& .native-field {
+			position: absolute;
+			inset: 0;
+			inline-size: 100%;
+			block-size: 100%;
+			margin: 0;
+			box-sizing: border-box;
+			opacity: 0;
+			pointer-events: none;
+		}
+		&:has(> .native-field:is(:user-invalid, [aria-invalid='true'])) :global(.fs-calendar-date-picker-button) {
+			color: var(--fs-system-critical);
+			&::after {
+				background: var(--fs-system-critical);
+			}
+		}
 	}
 </style>

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

@@ -1,4 +1,4 @@
 import type { CalendarDatePickerProps } from './types.js';
-declare const CalendarDatePicker: import("svelte").Component<CalendarDatePickerProps, {}, "ref" | "value" | "triggerRef" | "popupRef">;
+declare const CalendarDatePicker: import("svelte").Component<CalendarDatePickerProps, {}, "ref" | "value" | "wrapperRef" | "buttonRef" | "popupRef">;
 type CalendarDatePicker = ReturnType<typeof CalendarDatePicker>;
 export default CalendarDatePicker;

package/dist/components/calendar-date-picker/docs/llms.md

@@ -18,26 +18,31 @@ A button trigger paired with a CalendarView popup for selecting a single date.
 
 The `CalendarDatePicker` combines a button trigger with a `CalendarView` popup. Clicking the trigger opens the calendar, and selecting a day updates the bound `value` and closes the popup. Because it builds on `CalendarView`, calendar props such as `blackoutDates`, `minDate`, `maxDate`, `weekStart` and `headers` are forwarded straight to the popup calendar.
 
+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:CalendarDatePickerProps -->
 
-| Name                                                                                             | Type                                                | Default                                                 | Description                                                                                   |
-| ------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                                                                 | `HTMLDivElement`                                    |                                                         | The DOM reference of the picker element.                                                      |
-| `value` _bindable_                                                                               | `Date` &#124; `null`                                | `null`                                                  | The selected date.                                                                            |
-| `format`                                                                                         | `Intl.DateTimeFormatOptions`                        | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date rendered on the trigger.                                  |
-| `calendarPosition`                                                                               | `Partial<ComputePositionConfig>`                    |                                                         | The floating UI configuration object of the calendar popup. Keys left out keep their default. |
-| `onChange`                                                                                       | `(event: Event, value: Date` &#124; `null) => void` |                                                         | Called whenever the selected date changes.                                                    |
-| `popupLabel`                                                                                     | `string`                                            | `'Choose a date'`                                       | The accessible name of the calendar popup, which is announced as a dialog.                    |
-| `triggerRef` _bindable_                                                                          | `HTMLButtonElement`                                 |                                                         | The DOM reference of the trigger button.                                                      |
-| `popupRef` _bindable_                                                                            | `HTMLDivElement`                                    |                                                         | The DOM reference of the calendar popup.                                                      |
-| `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate`, `weekStart` from `CalendarViewProps` |                                                     |                                                         |                                                                                               |
-| Element Attributes (`div`)                                                                       |                                                     |                                                         |                                                                                               |
+| Name                                                                                                      | Type                                                | Default                                                 | Description                                                                                                                                                                                                                                  |
+| --------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `wrapperRef` _bindable_                                                                                   | `HTMLDivElement` &#124; `null`                      |                                                         | The DOM reference of the wrapper element.                                                                                                                                                                                                    |
+| `value` _bindable_                                                                                        | `Date` &#124; `null`                                | `null`                                                  | The selected date.                                                                                                                                                                                                                           |
+| `format`                                                                                                  | `Intl.DateTimeFormatOptions`                        | `{ year: 'numeric', month: 'numeric', day: 'numeric' }` | The options used to format the date rendered on the trigger. When rendering on the server, give it the `timeZone` of the visitor: the calendar picks dates at the visitor's midnight, and the server would format them in its own time zone. |
+| `calendarPosition`                                                                                        | `Partial<ComputePositionConfig>`                    |                                                         | The floating UI configuration object of the calendar popup. Keys left out keep their default.                                                                                                                                                |
+| `onChange`                                                                                                | `(event: Event, value: Date` &#124; `null) => void` |                                                         | Called whenever the selected date changes.                                                                                                                                                                                                   |
+| `popupLabel`                                                                                              | `string`                                            | `'Choose a date'`                                       | The accessible name of the calendar popup, which is announced as a dialog.                                                                                                                                                                   |
+| `ref` _bindable_                                                                                          | `HTMLInputElement` &#124; `null`                    |                                                         | The DOM reference of the native date input that holds the value, as `YYYY-MM-DD`. The other attributes of the picker are applied to it.                                                                                                      |
+| `buttonRef` _bindable_                                                                                    | `HTMLButtonElement` &#124; `null`                   |                                                         | The DOM reference of the button that opens the calendar.                                                                                                                                                                                     |
+| `buttonProps`                                                                                             | `ButtonProps`                                       |                                                         | The props to spread on the `Button` that opens the calendar.                                                                                                                                                                                 |
+| `wrapperAttributes`                                                                                       | `HTMLAttributes`                                    |                                                         | The attributes to spread on the wrapper element.                                                                                                                                                                                             |
+| `popupRef` _bindable_                                                                                     | `HTMLDivElement` &#124; `null`                      |                                                         | The DOM reference of the calendar popup.                                                                                                                                                                                                     |
+| `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate`, `today`, `weekStart` from `CalendarViewProps` |                                                     |                                                         |                                                                                                                                                                                                                                              |
+| `NativeFieldAttributes<HTMLInputAttributes>`                                                              |                                                     |                                                         |                                                                                                                                                                                                                                              |
 
 <!-- /props:CalendarDatePickerProps -->
 
 `locale`, `blackoutDates`, `headers`, `minDate`, `maxDate` and `weekStart` are forwarded
-straight to the underlying `CalendarView`. All `div` HTML attributes are forwarded to the
-root element.
+straight to the underlying `CalendarView`. Button HTML attributes, including `id`, `class` and ARIA attributes, are forwarded to the
+trigger. Use `wrapperAttributes` and `wrapperRef` for the root element.

package/dist/components/calendar-date-picker/types.d.ts

@@ -1,18 +1,20 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { ComputePositionConfig } from '@floating-ui/dom';
 import type { CalendarViewProps } from '../calendar-view/types.js';
+import type { ButtonProps } from '../button/types.js';
+import type { NativeFieldAttributes } from '../../internal/index.js';
 /** @propsmith CalendarDatePickerProps */
 export type CalendarDatePickerProps = {
-    /** The DOM reference of the picker element.
+    /** The DOM reference of the wrapper element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The selected date.
      * @default null
      * @bindable
      */
     value?: Date | null;
-    /** The options used to format the date rendered on the trigger.
+    /** The options used to format the date rendered on the trigger. When rendering on the server, give it the `timeZone` of the visitor: the calendar picks dates at the visitor's midnight, and the server would format them in its own time zone.
      * @default { year: 'numeric', month: 'numeric', day: 'numeric' }
      */
     format?: Intl.DateTimeFormatOptions;
@@ -25,12 +27,24 @@ export type CalendarDatePickerProps = {
      * @default 'Choose a date'
      */
     popupLabel?: string;
-    /** The DOM reference of the trigger button.
+    /** The DOM reference of the native date input that holds the value, as `YYYY-MM-DD`. The other attributes of the picker are applied to it.
      * @bindable
      */
-    triggerRef?: HTMLButtonElement;
+    ref?: HTMLInputElement | null;
+    /** The DOM reference of the button that opens the calendar.
+     * @bindable
+     */
+    buttonRef?: HTMLButtonElement | null;
+    /** The props to spread on the `Button` that opens the calendar.
+     * @type ButtonProps
+     */
+    buttonProps?: Omit<ButtonProps<'button'>, 'as' | 'ref' | 'children'>;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The DOM reference of the calendar popup.
      * @bindable
      */
-    popupRef?: HTMLDivElement;
-} & Pick<CalendarViewProps, 'locale' | 'blackoutDates' | 'headers' | 'minDate' | 'maxDate' | 'weekStart'> & HTMLAttributes<HTMLDivElement>;
+    popupRef?: HTMLDivElement | null;
+} & Pick<CalendarViewProps, 'locale' | 'blackoutDates' | 'headers' | 'minDate' | 'maxDate' | 'today' | 'weekStart'> & NativeFieldAttributes<HTMLInputAttributes>;

package/dist/components/calendar-view/calendar-view-days.svelte

@@ -3,6 +3,7 @@
 	import { circOut } from 'svelte/easing';
 	import {
 		compareDates,
+		dateKey,
 		getCalendarDays,
 		getCalendarViewContext,
 		getMonthLocale,
@@ -172,13 +173,13 @@
 						{selected}
 						rangePosition={bandRange ? rangePositionOf(day, bandRange) : undefined}
 						outOfRange={!inMonth}
-						current={compareDates(day, new Date(), 'day')}
+						current={compareDates(day, CalendarContext.config.today, 'day')}
 						disabled={isDisabled(day)}
 						blackout={isBlackout(day)}
 						buttonAttributes={{
 							tabindex: inMonth ? 0 : -1,
 							'aria-label': dayLabel(day),
-							'data-date': day.getTime(),
+							'data-date': dateKey(day),
 							onclick: (e: MouseEvent) => {
 								selectDay(e, day);
 							}