fluentui-svelte 0.5.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

@@ -2,7 +2,14 @@
 	import { getTabspotAttributes } from 'tabspot';
 	import type { DialogActionsProps } from './types.js';
 
-	let { ref = $bindable(), position = 'end', fluid, children }: DialogActionsProps = $props();
+	let {
+		ref = $bindable(null),
+		position = 'end',
+		fluid,
+		class: classes,
+		children,
+		...attributes
+	}: DialogActionsProps = $props();
 
 	// The bar is one tab stop holding a row of buttons: without the mover the root would
 	// take the tab stop and then offer no way to reach the rest of the buttons.
@@ -12,7 +19,12 @@
 	});
 </script>
 
-<div class={['dialog-actions', `justify-${position}`, { fluid }]} bind:this={ref} {...tabspotAttributes}>
+<div
+	{...attributes}
+	class={['dialog-actions', `justify-${position}`, { fluid }, classes]}
+	bind:this={ref}
+	{...tabspotAttributes}
+>
 	{@render children?.()}
 </div>
 
@@ -33,5 +45,8 @@
 		&.justify-end {
 			justify-content: flex-end;
 		}
+		&.fluid > :global(*) {
+			flex: 1 1 0;
+		}
 	}
 </style>

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

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

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

@@ -1,4 +1,4 @@
 import type { DialogContentProps } from './types.ts';
-declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "">;
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;
 export default DialogContent;

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

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { onClickOutside } from 'runed';
+	import { on } from 'svelte/events';
 	import type { DialogSurfaceProps } from './types.js';
 	import { getDialogContext } from './dialog.svelte.js';
 	import { Button } from '../../index.js';
 	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
 
-	let { ref = $bindable(), children, ...attributes }: DialogSurfaceProps = $props();
+	let { ref = $bindable(null), class: classes, oncancel, children, ...attributes }: DialogSurfaceProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -17,22 +18,57 @@
 
 	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.
+	let openOnPointerDown = false;
+
+	$effect(() => {
+		const doc = ref?.ownerDocument;
+		if (!doc) return;
+		return on(doc, 'pointerdown', () => (openOnPointerDown = !!ref?.open), { capture: true });
+	});
+
 	// Registered unconditionally and guarded from inside, so switching `type` after mount is honored.
 	onClickOutside(
 		() => ref,
 		() => {
-			if (config.type === 'alert') return;
+			if (config.type === 'alert' || !openOnPointerDown) return;
 			closeDialog();
 		}
 	);
 
+	// Escape cancels a modal dialog natively. An alert has to be answered with one of its actions, and any
+	// other modal closes through `closeDialog` so `onOpenChange` hears about it. A consumer's `oncancel`
+	// can still veto it with `preventDefault`.
+	function handleCancel(e: Event & { currentTarget: EventTarget & HTMLDialogElement }) {
+		oncancel?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		if (config.type !== 'alert') closeDialog();
+	}
+
 	$effect(() => {
 		if (!ref) return;
 		_state.dialogRef = ref;
 	});
 </script>
 
-<dialog open={_state.open} class="fs-dialog" aria-labelledby={_state.titleId} bind:this={ref} {...attributes}>
+<dialog
+	{...attributes}
+	open={_state.open}
+	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}
+>
 	<div class="dialog-wrapper">
 		{#if config.type === 'non-modal'}
 			<Button class="close-icon" appearance="subtle" onclick={() => methods.closeDialog()} aria-label="Close dialog">
@@ -45,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;
@@ -69,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 {
@@ -92,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

@@ -1,19 +1,36 @@
 <script lang="ts" generics="T extends DialogTitleTag">
 	import { PREFIX } from '../../internal/constants.js';
 	import { getDialogContext } from './dialog.svelte.js';
+	import { TITLE_TAG } from './utils.js';
 	import type { DialogTitleProps, DialogTitleTag } from './types.js';
 
-	let { as = 'h3' as T, ref = $bindable(), children }: DialogTitleProps<T> = $props();
-
-	const FALLBACK_ID = $props.id();
-	const ID = `${PREFIX}dialog-title-${FALLBACK_ID}`;
+	const _ID = $props.id();
+	const FALLBACK_ID = `${PREFIX}dialog-title-${_ID}`;
+
+	let {
+		as = 'h3' as T,
+		ref = $bindable(null),
+		id = FALLBACK_ID,
+		class: classes,
+		children,
+		...attributes
+	}: DialogTitleProps<T> = $props();
+
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked
+	 * during SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived.by(() => {
+		if (!TITLE_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TITLE_TAG.join(', ')}`);
+		return as;
+	});
 
 	const context = getDialogContext();
 
 	$effect.pre(() => {
 		if (!context) return;
 
-		context.state.titleId = ID;
+		context.state.titleId = id ?? undefined;
 
 		return () => {
 			context.state.titleId = undefined;
@@ -21,7 +38,7 @@
 	});
 </script>
 
-<svelte:element this={as} id={ID} class="dialog-title" bind:this={ref}>
+<svelte:element this={_as} {...attributes} {id} class={['dialog-title', classes]} bind:this={ref}>
 	{@render children?.()}
 </svelte:element>
 

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

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

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

@@ -1,4 +1,4 @@
 import type { DialogTriggerProps } from './types.ts';
-declare const DialogTrigger: import("svelte").Component<DialogTriggerProps, {}, "">;
+declare const DialogTrigger: import("svelte").Component<DialogTriggerProps, {}, "ref">;
 type DialogTrigger = ReturnType<typeof DialogTrigger>;
 export default DialogTrigger;

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);
 			}
 		}