fluentui-svelte 0.6.0 → 0.7.0

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

@@ -33,30 +33,33 @@ Use `hideDays`, `hideMonths`, or `hideYears` to hide individual selector columns
 <DatePicker hideDays />
 ```
 
+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:DatePickerProps -->
 
-| Name                          | Type                                 | Default           | Description                                                                                         |
-| ----------------------------- | ------------------------------------ | ----------------- | --------------------------------------------------------------------------------------------------- |
-| `value` _bindable_            | `string`                             | `''`              | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).                       |
-| `format`                      | `'MM/dd/yyyy'` &#124; `'dd/MM/yyyy'` | `'dd/MM/yyyy'`    | The order the three columns are laid out in.                                                        |
-| `open` _bindable_             | `boolean`                            | `false`           | Controls the open state of the picker.                                                              |
-| `hideYears`                   | `boolean`                            | `false`           | Removes the year column.                                                                            |
-| `hideMonths`                  | `boolean`                            | `false`           | Removes the month column.                                                                           |
-| `hideDays`                    | `boolean`                            | `false`           | Removes the day column.                                                                             |
-| `minYear`                     | `number`                             | `Current - 100`   | The first year offered by the year column.                                                          |
-| `maxYear`                     | `number`                             | `Current + 100`   | The last year offered by the year column.                                                           |
-| `disabledDates`               | `Date[]`                             | `[]`              | Specific days (year-month-day) that cannot be selected.                                             |
-| `disabledMonths`              | `Date[]`                             | `[]`              | Specific months (by month + year) that cannot be selected.                                          |
-| `disabledYears`               | `Date[]`                             | `[]`              | Specific years (by year) that cannot be selected.                                                   |
-| `ref` _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 date'` | The accessible name of the popup, which is announced as a dialog.                                   |
-| Element Attributes (`button`) |                                      |                   |                                                                                                     |
+| Name                                         | Type                                              | Default                                        | Description                                                                                                                     |
+| -------------------------------------------- | ------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `value` _bindable_                           | `string`                                          | `''`                                           | Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).                                                   |
+| `format`                                     | `'MM/dd/yyyy'` &#124; `'dd/MM/yyyy'`              | `'dd/MM/yyyy'`                                 | The order the three columns are laid out in.                                                                                    |
+| `open` _bindable_                            | `boolean`                                         | `false`                                        | Controls the open state of the picker.                                                                                          |
+| `hideYears`                                  | `boolean`                                         | `false`                                        | Removes the year column.                                                                                                        |
+| `hideMonths`                                 | `boolean`                                         | `false`                                        | Removes the month column.                                                                                                       |
+| `hideDays`                                   | `boolean`                                         | `false`                                        | Removes the day column.                                                                                                         |
+| `minYear`                                    | `number`                                          | `Current - 100`                                | The first year offered by the year column. Unless `min` is given, the native input accepts no earlier date.                     |
+| `maxYear`                                    | `number`                                          | `Current + 100`                                | The last year offered by the year column. Unless `max` is given, the native input accepts no later date.                        |
+| `disabledDates`                              | `Date[]`                                          | `[]`                                           | Specific days (year-month-day) that cannot be selected.                                                                         |
+| `disabledMonths`                             | `Date[]`                                          | `[]`                                           | Specific months (by month + year) that cannot be selected.                                                                      |
+| `disabledYears`                              | `Date[]`                                          | `[]`                                           | Specific years (by year) that cannot be selected.                                                                               |
+| `ref` _bindable_                             | `HTMLInputElement` &#124; `null`                  |                                                | The DOM reference of the native date 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 date'`                              | The accessible name of the popup, which is announced as a dialog.                                                               |
+| `columnLabels`                               | `{ month?: string; day?: string; year?: string }` | `{ month: 'Month', day: 'Day', year: 'Year' }` | The names of the month, day and year columns: shown on the trigger while there is no date, and given to the lists of the popup. |
+| `NativeFieldAttributes<HTMLInputAttributes>` |                                                   |                                                |                                                                                                                                 |
 
 <!-- /props:DatePickerProps -->

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

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { NativeFieldAttributes } from '../../internal/index.js';
 /** @propsmith DatePickerProps */
 export type DatePickerProps = {
     /** Selected date as `YYYY-MM-DD` (matches the underlying `<input type="date">`).
@@ -27,11 +28,11 @@ export type DatePickerProps = {
      * @default false
      */
     hideDays?: boolean;
-    /** The first year offered by the year column.
+    /** The first year offered by the year column. Unless `min` is given, the native input accepts no earlier date.
      * @default Current - 100
      */
     minYear?: number;
-    /** The last year offered by the year column.
+    /** The last year offered by the year column. Unless `max` is given, the native input accepts no later date.
      * @default Current + 100
      */
     maxYear?: number;
@@ -47,28 +48,36 @@ export type DatePickerProps = {
      * @default []
      */
     disabledYears?: Date[];
-    /** The DOM reference of the trigger button.
+    /** The DOM reference of the native date input that holds the value. The other attributes of the picker are applied to it.
      * @bindable
      */
-    ref?: HTMLButtonElement;
-    /** The DOM reference of the element wrapping the trigger and its input.
+    ref?: HTMLInputElement | null;
+    /** The DOM reference of the button that opens the picker.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
-    /** The attributes to spread on the wrapper element.
-     * @type HTMLAttributes
+    buttonRef?: HTMLButtonElement | null;
+    /** The attributes to spread on the button that opens the picker.
+     * @type HTMLButtonAttributes
      */
-    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
-    /** The DOM reference of the underlying input element.
+    buttonAttributes?: HTMLButtonAttributes;
+    /** The DOM reference of the element wrapping the button and the native input.
      * @bindable
      */
-    inputElement?: HTMLInputElement;
-    /** HTML attributes for the underlying input element. Give it a `name` to submit the
-     * value with a form.
+    wrapperRef?: HTMLDivElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    inputProps?: HTMLInputAttributes;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The accessible name of the popup, which is announced as a dialog.
      * @default 'Choose a date'
      */
     popupLabel?: string;
-} & HTMLButtonAttributes;
+    /** The names of the month, day and year columns: shown on the trigger while there is no date, and given to the lists of the popup.
+     * @default { month: 'Month', day: 'Day', year: 'Year' }
+     */
+    columnLabels?: {
+        month?: string;
+        day?: string;
+        year?: string;
+    };
+} & NativeFieldAttributes<HTMLInputAttributes>;

package/dist/components/dialog/dialog-actions.svelte

@@ -3,7 +3,7 @@
 	import type { DialogActionsProps } from './types.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		position = 'end',
 		fluid,
 		class: classes,
@@ -20,10 +20,10 @@
 </script>
 
 <div
+	{...attributes}
 	class={['dialog-actions', `justify-${position}`, { fluid }, classes]}
 	bind:this={ref}
 	{...tabspotAttributes}
-	{...attributes}
 >
 	{@render children?.()}
 </div>

package/dist/components/dialog/dialog-content.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { DialogContentProps } from './types.js';
 
-	let { ref = $bindable(), class: classes, children, ...attributes }: DialogContentProps = $props();
+	let { ref = $bindable(null), class: classes, children, ...attributes }: DialogContentProps = $props();
 </script>
 
-<div class={['dialog-content', classes]} bind:this={ref} {...attributes}>
+<div {...attributes} class={['dialog-content', classes]} bind:this={ref}>
 	{@render children?.()}
 </div>
 

package/dist/components/dialog/dialog-surface.svelte

@@ -6,7 +6,7 @@
 	import { Button } from '../../index.js';
 	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
 
-	let { ref = $bindable(), class: classes, oncancel, children, ...attributes }: DialogSurfaceProps = $props();
+	let { ref = $bindable(null), class: classes, oncancel, children, ...attributes }: DialogSurfaceProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -18,6 +18,12 @@
 
 	const { closeDialog } = methods;
 
+	const duration = $derived(
+		typeof config.duration === 'number'
+			? `${Number.isFinite(config.duration) ? Math.max(0, config.duration) : 0}ms`
+			: `var(${config.duration.startsWith('--') ? config.duration : `--fs-${config.duration}-duration`}, 333ms)`
+	);
+
 	// runed reports an outside press 10ms after the pointer goes down. By then the press that opens the
 	// dialog has already opened it, and a press while it is closed has nothing to dismiss, so remember
 	// whether the dialog was open at the moment the pointer went down.
@@ -55,12 +61,13 @@
 </script>
 
 <dialog
+	{...attributes}
 	open={_state.open}
-	class={['fs-dialog', classes]}
-	aria-labelledby={_state.titleId}
+	class={['fs-dialog', `position-${config.position}`, `animation-${config.animation}`, classes]}
+	style:--fs-dialog-duration={duration}
+	aria-labelledby={_state.titleId ?? attributes['aria-labelledby']}
 	bind:this={ref}
 	oncancel={handleCancel}
-	{...attributes}
 >
 	<div class="dialog-wrapper">
 		{#if config.type === 'non-modal'}
@@ -74,21 +81,93 @@
 
 <style>
 	.fs-dialog {
+		--fs-dialog-effective-duration: var(--fs-dialog-duration);
+		--fs-dialog-enter-easing: var(--fs-fast-dismiss, cubic-bezier(0, 0, 0, 1));
+		--fs-dialog-exit-easing: var(--fs-soft-dismiss, cubic-bezier(1, 0, 1, 1));
+		--fs-dialog-hidden-transform: none;
+		opacity: 0;
+		transform: var(--fs-dialog-hidden-transform);
+		transition:
+			opacity var(--fs-dialog-effective-duration) var(--fs-dialog-exit-easing),
+			transform var(--fs-dialog-effective-duration) var(--fs-dialog-exit-easing),
+			display var(--fs-dialog-effective-duration) allow-discrete,
+			overlay var(--fs-dialog-effective-duration) allow-discrete;
+		&[open] {
+			opacity: 1;
+			transform: none;
+			transition-timing-function: var(--fs-dialog-enter-easing);
+		}
+		&.animation-zoom {
+			--fs-dialog-hidden-transform: scale(0.9);
+			--fs-dialog-enter-transform: scale(0.88);
+		}
+		&.animation-slide {
+			--fs-dialog-hidden-transform: translateY(16px);
+			&.position-top-start,
+			&.position-top-center,
+			&.position-top-end {
+				--fs-dialog-hidden-transform: translateY(-16px);
+			}
+		}
+		&.animation-bounce {
+			--fs-dialog-hidden-transform: scale(0.96);
+			--fs-dialog-enter-easing: var(--fs-strong-invoke, cubic-bezier(0.13, 1.62, 0, 0.92));
+			/* Reverse of Fluent's strong-invoke curve: a small anticipation before dismissal. */
+			--fs-dialog-exit-easing: cubic-bezier(1, 0.08, 0.87, -0.62);
+		}
+		@starting-style {
+			&[open] {
+				opacity: 0;
+				transform: var(--fs-dialog-enter-transform, var(--fs-dialog-hidden-transform));
+			}
+		}
 		position: fixed;
-		top: 50%;
-		left: 50%;
+		inset: 1rem;
+		margin: auto;
 		padding: 0;
-		transform: translate(-50%, -50%);
+		box-sizing: border-box;
 		border: unset;
 		z-index: 1100;
 		width: 35vw;
-		min-width: 20rem;
+		min-width: min(20rem, calc(100vw - 2rem));
+		max-width: calc(100vw - 2rem);
+		height: fit-content;
+		max-height: calc(100dvh - 2rem);
 		overflow: visible;
 		background: var(--fs-solid-background-base);
 		border-radius: var(--fs-control-overlay-border-radius);
+		&.position-top-start,
+		&.position-top-center,
+		&.position-top-end {
+			margin-block-start: 0;
+		}
+		&.position-bottom-start,
+		&.position-bottom-center,
+		&.position-bottom-end {
+			margin-block-end: 0;
+		}
+		&.position-top-start,
+		&.position-middle-start,
+		&.position-bottom-start {
+			margin-inline-start: 0;
+		}
+		&.position-top-end,
+		&.position-middle-end,
+		&.position-bottom-end {
+			margin-inline-end: 0;
+		}
 		&::backdrop {
+			opacity: 0;
 			background-color: var(--fs-smoke-background-default);
 			backdrop-filter: blur(0.25rem);
+			transition:
+				opacity var(--fs-dialog-effective-duration) var(--fs-soft-dismiss, cubic-bezier(1, 0, 1, 1)),
+				display var(--fs-dialog-effective-duration) allow-discrete,
+				overlay var(--fs-dialog-effective-duration) allow-discrete;
+		}
+		&[open]::backdrop {
+			opacity: 1;
+			transition-timing-function: var(--fs-fast-dismiss, cubic-bezier(0, 0, 0, 1));
 		}
 		& .dialog-wrapper {
 			position: relative;
@@ -98,7 +177,7 @@
 			display: grid;
 			grid-template-rows: auto 1fr;
 			width: 100%;
-			max-height: 95vh;
+			max-height: calc(100dvh - 2rem);
 			overflow: hidden;
 			background: var(--fs-layer-alt);
 			&::before {
@@ -121,4 +200,18 @@
 			}
 		}
 	}
+	/* Pseudo-elements need a separate starting-style rule rather than nested &. */
+	@starting-style {
+		.fs-dialog[open]::backdrop {
+			opacity: 0;
+		}
+	}
+	:global(:root[data-fs-reduced-motion='true']) .fs-dialog {
+		--fs-dialog-effective-duration: 0ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global(:root:not([data-fs-reduced-motion='false'])) .fs-dialog {
+			--fs-dialog-effective-duration: 0ms;
+		}
+	}
 </style>

package/dist/components/dialog/dialog-title.svelte

@@ -9,7 +9,7 @@
 
 	let {
 		as = 'h3' as T,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = FALLBACK_ID,
 		class: classes,
 		children,
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<svelte:element this={_as} {id} class={['dialog-title', classes]} bind:this={ref} {...attributes}>
+<svelte:element this={_as} {...attributes} {id} class={['dialog-title', classes]} bind:this={ref}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/components/dialog/dialog-trigger.svelte

@@ -4,7 +4,7 @@
 	import { getDialogContext } from './dialog.svelte.js';
 	import type { DialogTriggerProps } from './types.js';
 
-	let { ref = $bindable(), class: classes, onclick, children, ...attributes }: DialogTriggerProps = $props();
+	let { ref = $bindable(null), class: classes, onclick, children, ...attributes }: DialogTriggerProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -16,10 +16,10 @@
 </script>
 
 <Button
+	{...attributes}
 	bind:ref
 	class={['dialog-trigger', classes]}
 	onclick={(e: MouseEvent) => invokeHandlers(e, [], [onclick, methods.openDialog])}
-	{...attributes}
 >
 	{#if children}
 		{@render children()}

package/dist/components/dialog/dialog.svelte

@@ -2,7 +2,15 @@
 	import { setDialogContext } from './dialog.svelte.js';
 	import type { DialogContext, DialogProps } from './types.js';
 
-	let { type = 'modal', open = $bindable(), onOpenChange, children }: DialogProps = $props();
+	let {
+		type = 'modal',
+		position = 'middle-center',
+		animation = 'zoom',
+		duration = 'normal',
+		open = $bindable(null),
+		onOpenChange,
+		children
+	}: DialogProps = $props();
 
 	let dialogRef: HTMLDialogElement | undefined = $state();
 
@@ -12,6 +20,15 @@
 		config: {
 			get type() {
 				return type;
+			},
+			get position() {
+				return position;
+			},
+			get animation() {
+				return animation;
+			},
+			get duration() {
+				return duration;
 			}
 		},
 		state: {
@@ -34,19 +51,13 @@
 		events: null,
 		methods: {
 			openDialog: () => {
-				if (type !== 'non-modal') {
-					dialogRef?.showModal();
-				} else {
-					open = true;
-				}
+				if (type !== 'non-modal') dialogRef?.showModal();
+				open = true;
 				onOpenChange?.(true);
 			},
 			closeDialog: () => {
-				if (type !== 'non-modal') {
-					dialogRef?.close();
-				} else {
-					open = false;
-				}
+				if (type !== 'non-modal') dialogRef?.close();
+				open = false;
 				onOpenChange?.(false);
 			}
 		}

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

@@ -45,6 +45,40 @@ The Dialog is composed of several components that work together through a shared
 
 ## Examples
 
+### Position
+
+Set `position` on `Dialog` to combine `top`, `middle`, or `bottom` with `start`, `center`, or `end`, for example `top-end` or `bottom-start`. The default is `middle-center`.
+
+Start and end follow the text direction, so `top-start` sits on the right in RTL. All positions keep a 1rem gap from viewport edges and work with modal, non-modal, and alert dialogs. Changing `position` moves an open dialog without closing it.
+
+```svelte
+<Dialog position="top-end">
+	<DialogTrigger>Open Dialog</DialogTrigger>
+	<DialogSurface>
+		<DialogTitle>Dialog Title</DialogTitle>
+		<DialogContent>Dialog body content.</DialogContent>
+	</DialogSurface>
+</Dialog>
+```
+
+### Entrance and Exit Motion
+
+`animation` selects `fade`, `zoom`, `slide`, or `bounce` for both directions. The default is `zoom`. Zoom enters from 88% scale and exits to 90%; slide travels 16px, from above for top positions and below otherwise. Bounce uses a small scale overshoot with Fluent's strong-invoke curve.
+
+`duration` defaults to `normal`. Theme names are `fast`, `normal`, `slow`, `slower`, `very-slow`, and `extra-slow`, matching `--fs-<name>-duration`. A CSS custom property name such as `--fs-fast-duration` is also accepted. Numbers are milliseconds; `0` disables motion.
+
+```svelte
+<Dialog animation="slide" duration={200} position="bottom-end">
+	<DialogTrigger>Open Dialog</DialogTrigger>
+	<DialogSurface>
+		<DialogTitle>Dialog Title</DialogTitle>
+		<DialogContent>Dialog body content.</DialogContent>
+	</DialogSurface>
+</Dialog>
+```
+
+Motion is implemented with CSS `@starting-style` and discrete `display`/`overlay` transitions. Calling `closeDialog()` updates `open` and releases native modal focus immediately; CSS keeps the surface and backdrop painted until the exit ends. Browsers without these CSS features open and close immediately. The OS reduced-motion preference and FluentUISvelte's app preference disable motion, including numeric durations; an explicit app preference takes priority over the OS.
+
 ### With Actions
 
 Add a `DialogActions` region to render action buttons in the dialog footer. Use `bind:this` on the `Dialog` to call `closeDialog()` programmatically.
@@ -83,12 +117,15 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DialogProps -->
 
-| Name              | Type                                            | Default   | Description                                       |
-| ----------------- | ----------------------------------------------- | --------- | ------------------------------------------------- |
-| `type`            | `'modal'` &#124; `'non-modal'` &#124; `'alert'` | `'modal'` | How the dialog behaves once open.                 |
-| `open` _bindable_ | `boolean`                                       |           | Controls the open state of the dialog.            |
-| `onOpenChange`    | `(open: boolean) => void`                       |           | Called whenever the dialog opens or closes.       |
-| `children`        | `Snippet`                                       |           | The parts of the dialog: a trigger and a surface. |
+| Name              | Type                                                                       | Default           | Description                                                                                          |
+| ----------------- | -------------------------------------------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
+| `type`            | `'modal'` &#124; `'non-modal'` &#124; `'alert'`                            | `'modal'`         | How the dialog behaves once open.                                                                    |
+| `position`        | [`DialogPosition`](https://fluentui-svelte.dev/docs/types/#dialogposition) | `'middle-center'` | Where the dialog sits in the viewport. Start and end follow the text direction.                      |
+| `animation`       | `'fade'` &#124; `'zoom'` &#124; `'slide'` &#124; `'bounce'`                | `'zoom'`          | The entrance and exit animation. Bounce uses a subtle overshoot.                                     |
+| `duration`        | [`DialogDuration`](https://fluentui-svelte.dev/docs/types/#dialogduration) | `'normal'`        | Duration in milliseconds, a theme duration name, or a CSS custom property name. Use 0 for no motion. |
+| `open` _bindable_ | `boolean` &#124; `null`                                                    |                   | Controls the open state of the dialog.                                                               |
+| `onOpenChange`    | `(open: boolean) => void`                                                  |                   | Called whenever the dialog opens or closes.                                                          |
+| `children`        | `Snippet`                                                                  |                   | The parts of the dialog: a trigger and a surface.                                                    |
 
 <!-- /props:DialogProps -->
 
@@ -97,10 +134,10 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DialogTriggerProps -->
 
-| Name                    | Type                | Default | Description                               |
-| ----------------------- | ------------------- | ------- | ----------------------------------------- |
-| `ref` _bindable_        | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
-| `ButtonProps<'button'>` |                     |         |                                           |
+| Name                    | Type                              | Default | Description                               |
+| ----------------------- | --------------------------------- | ------- | ----------------------------------------- |
+| `ref` _bindable_        | `HTMLButtonElement` &#124; `null` |         | The DOM reference of the trigger element. |
+| `ButtonProps<'button'>` |                                   |         |                                           |
 
 <!-- /props:DialogTriggerProps -->
 
@@ -109,10 +146,10 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DialogSurfaceProps -->
 
-| Name                          | Type                | Default | Description                              |
-| ----------------------------- | ------------------- | ------- | ---------------------------------------- |
-| `ref` _bindable_              | `HTMLDialogElement` |         | The DOM reference of the dialog element. |
-| Element Attributes (`dialog`) |                     |         |                                          |
+| Name                          | Type                              | Default | Description                              |
+| ----------------------------- | --------------------------------- | ------- | ---------------------------------------- |
+| `ref` _bindable_              | `HTMLDialogElement` &#124; `null` |         | The DOM reference of the dialog element. |
+| Element Attributes (`dialog`) |                                   |         |                                          |
 
 <!-- /props:DialogSurfaceProps -->
 
@@ -134,10 +171,10 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:DialogContentProps -->
 
-| Name                       | Type             | Default | Description                               |
-| -------------------------- | ---------------- | ------- | ----------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement` |         | The DOM reference of the content element. |
-| Element Attributes (`div`) |                  |         |                                           |
+| Name                       | Type                           | Default | Description                               |
+| -------------------------- | ------------------------------ | ------- | ----------------------------------------- |
+| `ref` _bindable_           | `HTMLDivElement` &#124; `null` |         | The DOM reference of the content element. |
+| Element Attributes (`div`) |                                |         |                                           |
 
 <!-- /props:DialogContentProps -->
 
@@ -148,7 +185,7 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 | Name                       | Type                                       | Default | Description                                                 |
 | -------------------------- | ------------------------------------------ | ------- | ----------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement`                           |         | The DOM reference of the actions element.                   |
+| `ref` _bindable_           | `HTMLDivElement` &#124; `null`             |         | The DOM reference of the actions element.                   |
 | `fluid`                    | `boolean`                                  |         | Stretches every action to share the available width evenly. |
 | `position`                 | `'start'` &#124; `'center'` &#124; `'end'` | `'end'` | Where the actions sit along the main axis.                  |
 | Element Attributes (`div`) |                                            |         |                                                             |

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

@@ -4,6 +4,9 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { ButtonProps } from '../button/types.ts';
 import type { PolymorphicProps, XDirection } from '../../types/index.js';
 export type DialogType = 'modal' | 'non-modal' | 'alert';
+export type DialogAnimation = 'fade' | 'zoom' | 'slide' | 'bounce';
+export type DialogDuration = number | 'fast' | 'normal' | 'slow' | 'slower' | 'very-slow' | 'extra-slow' | `--${string}`;
+export type DialogPosition = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
 export type DialogTitleTag = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 /** @propsmith DialogProps */
 export type DialogProps = {
@@ -17,10 +20,22 @@ export type DialogProps = {
      * @default 'modal'
      */
     type?: DialogType;
+    /** Where the dialog sits in the viewport. Start and end follow the text direction.
+     * @default 'middle-center'
+     */
+    position?: DialogPosition;
+    /** The entrance and exit animation. Bounce uses a subtle overshoot.
+     * @default 'zoom'
+     */
+    animation?: DialogAnimation;
+    /** Duration in milliseconds, a theme duration name, or a CSS custom property name. Use 0 for no motion.
+     * @default 'normal'
+     */
+    duration?: DialogDuration;
     /** Controls the open state of the dialog.
      * @bindable
      */
-    open?: boolean;
+    open?: boolean | null;
     /** Called whenever the dialog opens or closes. */
     onOpenChange?: (open: boolean) => void;
     /** The parts of the dialog: a trigger and a surface. */
@@ -31,28 +46,28 @@ export type DialogSurfaceProps = {
     /** The DOM reference of the dialog element.
      * @bindable
      */
-    ref?: HTMLDialogElement;
+    ref?: HTMLDialogElement | null;
 } & HTMLAttributes<HTMLDialogElement>;
 /** @propsmith DialogTriggerProps */
 export type DialogTriggerProps = {
     /** The DOM reference of the trigger element.
      * @bindable
      */
-    ref?: HTMLButtonElement;
+    ref?: HTMLButtonElement | null;
 } & ButtonProps<'button'>;
 /** @propsmith DialogContentProps */
 export type DialogContentProps = {
     /** The DOM reference of the content element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
 } & HTMLAttributes<HTMLDivElement>;
 /** @propsmith DialogActionsProps */
 export type DialogActionsProps = {
     /** The DOM reference of the actions element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** Stretches every action to share the available width evenly. */
     fluid?: boolean;
     /** Where the actions sit along the main axis.
@@ -75,7 +90,7 @@ export type DialogTitleProps<T extends DialogTitleTag> = {
      * @type HTMLDivElement | HTMLHeadingElement
      * @bindable
      */
-    ref?: DialogTitleRefType[T];
+    ref?: DialogTitleRefType[T] | null;
     /** The HTML element to render the title as.
      * @type DialogTitleTag
      * @default 'h3'
@@ -84,9 +99,12 @@ export type DialogTitleProps<T extends DialogTitleTag> = {
 } & PolymorphicProps<T>;
 export type DialogContext = FSContext<{
     type: DialogType;
+    position: DialogPosition;
+    animation: DialogAnimation;
+    duration: DialogDuration;
 }, {
     dialogRef: HTMLDialogElement | undefined;
-    readonly open: boolean | undefined;
+    readonly open: boolean | null | undefined;
     /** Set by `DialogTitle`, to allow the surface pointing `aria-labelledby` at it. */
     titleId: string | undefined;
 }, null, {