fluentui-svelte 0.5.0 → 0.6.0

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(),
+		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
+	class={['dialog-actions', `justify-${position}`, { fluid }, classes]}
+	bind:this={ref}
+	{...tabspotAttributes}
+	{...attributes}
+>
 	{@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(), class: classes, children, ...attributes }: DialogContentProps = $props();
 </script>
 
-<div class="dialog-content">
+<div class={['dialog-content', classes]} bind:this={ref} {...attributes}>
 	{@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(), class: classes, oncancel, children, ...attributes }: DialogSurfaceProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -17,22 +18,50 @@
 
 	const { closeDialog } = methods;
 
+	// 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
+	open={_state.open}
+	class={['fs-dialog', classes]}
+	aria-labelledby={_state.titleId}
+	bind:this={ref}
+	oncancel={handleCancel}
+	{...attributes}
+>
 	<div class="dialog-wrapper">
 		{#if config.type === 'non-modal'}
 			<Button class="close-icon" appearance="subtle" onclick={() => methods.closeDialog()} aria-label="Close dialog">

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(),
+		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} {id} class={['dialog-title', classes]} bind:this={ref} {...attributes}>
 	{@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(), 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
+	bind:ref
+	class={['dialog-trigger', classes]}
+	onclick={(e: MouseEvent) => invokeHandlers(e, [], [onclick, methods.openDialog])}
+	{...attributes}
+>
 	{#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/docs/llms.md

@@ -99,7 +99,7 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 | Name                    | Type                | Default | Description                               |
 | ----------------------- | ------------------- | ------- | ----------------------------------------- |
-| `ref`                   | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
+| `ref` _bindable_        | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
 | `ButtonProps<'button'>` |                     |         |                                           |
 
 <!-- /props:DialogTriggerProps -->
@@ -136,7 +136,7 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 | Name                       | Type             | Default | Description                               |
 | -------------------------- | ---------------- | ------- | ----------------------------------------- |
-| `ref`                      | `HTMLDivElement` |         | The DOM reference of the content element. |
+| `ref` _bindable_           | `HTMLDivElement` |         | The DOM reference of the content element. |
 | Element Attributes (`div`) |                  |         |                                           |
 
 <!-- /props:DialogContentProps -->

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

@@ -35,12 +35,16 @@ export type DialogSurfaceProps = {
 } & HTMLAttributes<HTMLDialogElement>;
 /** @propsmith DialogTriggerProps */
 export type DialogTriggerProps = {
-    /** The DOM reference of the trigger element. */
+    /** The DOM reference of the trigger element.
+     * @bindable
+     */
     ref?: HTMLButtonElement;
 } & ButtonProps<'button'>;
 /** @propsmith DialogContentProps */
 export type DialogContentProps = {
-    /** The DOM reference of the content element. */
+    /** The DOM reference of the content element.
+     * @bindable
+     */
     ref?: HTMLDivElement;
 } & HTMLAttributes<HTMLDivElement>;
 /** @propsmith DialogActionsProps */

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

@@ -0,0 +1,2 @@
+import type { DialogTitleTag } from './types.ts';
+export declare const TITLE_TAG: DialogTitleTag[];

package/dist/components/dialog/utils.js

@@ -0,0 +1 @@
+export const TITLE_TAG = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

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

@@ -0,0 +1,110 @@
+# Rating
+
+A rating lets users give a value to an item by selecting one of a row of stars. It supports half-filled stars, four sizes and a custom number of items.
+
+## Usage
+
+```svelte
+<script>
+	import { Rating } from 'fluentui-svelte';
+
+	let value = $state(3);
+</script>
+
+<Rating bind:value />
+```
+
+## Component API
+
+A rating lets users give a value to an item, using a row of symbols such as stars. It supports half-filled items and four sizes.
+
+## Examples
+
+### Bind the value
+
+Use `bind:value` to read the rating the user picks.
+
+```svelte
+<script>
+	let value = $state(3);
+</script>
+
+<Rating bind:value />
+```
+
+### Half stars
+
+Set `step={0.5}` to let users pick half-filled stars.
+
+```svelte
+<Rating value={2.5} step={0.5} />
+```
+
+### Quarter stars
+
+Until the user rates, a fractional `value` is drawn in quarters, which is handy to show an average. Once the user picks a star, the rating snaps to the `step`.
+
+```svelte
+<Rating value={3.75} />
+```
+
+### Size
+
+Use `size` to choose between `small`, `medium`, `large` and `extra-large`.
+
+```svelte
+<Rating value={3} size="small" />
+<Rating value={3} size="medium" />
+<Rating value={3} size="large" />
+<Rating value={3} size="extra-large" />
+```
+
+### Shape
+
+Use `iconFilled` and `iconOutline` to replace the stars with any other icon component. Both fall back to the star when omitted, and partially filled items are clipped, so custom shapes also work with `step={0.5}`.
+
+```svelte
+<script>
+	import { HeartFilled, HeartRegular } from 'fluentui-icons-svelte';
+</script>
+
+<Rating value={3} iconFilled={HeartFilled} iconOutline={HeartRegular} />
+```
+
+### Max
+
+Use `max` to change the number of stars.
+
+```svelte
+<Rating value={4} max={10} />
+```
+
+### Item label
+
+Use `itemLabel` to customize the accessible label of each radio input.
+
+```svelte
+<Rating value={3} itemLabel={(rating) => `${rating} out of 5 stars`} />
+```
+
+## Component Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:RatingProps -->
+
+| Name                                                | Type                                                                | Default                       | Description                                                                                                                   |
+| --------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `value` _bindable_                                  | `number`                                                            | `0`                           | The current rating. Fractions are drawn in quarters until the user rates.                                                     |
+| `max`                                               | `number`                                                            | `5`                           | The number of items displayed. Must be a whole number greater than 1.                                                         |
+| `step`                                              | `1` &#124; `0.5`                                                    | `1`                           | The precision of the rating. `0.5` allows half-filled items.                                                                  |
+| `size`                                              | `'small'` &#124; `'medium'` &#124; `'large'` &#124; `'extra-large'` | `'extra-large'`               | The size of the rating items.                                                                                                 |
+| `iconFilled`                                        | `Component`                                                         |                               | The icon of a filled item. Falls back to a filled star. Partially filled items are clipped, so it also works with half steps. |
+| `iconOutline`                                       | `Component`                                                         |                               | The icon of an empty item. Falls back to an outlined star.                                                                    |
+| `name`                                              | `string`                                                            |                               | The name of the radio inputs. Generated when not provided.                                                                    |
+| `itemLabel`                                         | `(rating: number) => string`                                        | `` (rating) => `${rating}` `` | Generates the accessible label of the radio input for a rating value.                                                         |
+| `onChange`                                          | `(value: number) => void`                                           |                               | Called when the user changes the rating.                                                                                      |
+| `class`                                             | `string`                                                            |                               | The class to apply to the rating.                                                                                             |
+| `ref` _bindable_                                    | `HTMLElement`                                                       |                               | The DOM reference of the rating element.                                                                                      |
+| `HTMLAttributes<HTMLDivElement>` without `onchange` |                                                                     |                               |                                                                                                                               |
+
+<!-- /props:RatingProps -->

package/dist/components/rating/rating.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+	import { PREFIX } from '../../internal/constants.js';
+	import StarFilled from 'fluentui-icons-svelte/StarFilled.svelte';
+	import StarHalfFilled from 'fluentui-icons-svelte/StarHalfFilled.svelte';
+	import StarOneQuarterFilled from 'fluentui-icons-svelte/StarOneQuarterFilled.svelte';
+	import StarRegular from 'fluentui-icons-svelte/StarRegular.svelte';
+	import StarThreeQuarterFilled from 'fluentui-icons-svelte/StarThreeQuarterFilled.svelte';
+	import type { RatingProps } from './types.js';
+
+	const FALLBACK_ID = $props.id();
+	const COMPONENT_NAME = 'rating';
+	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
+	const VALUE_ID = `${ID}-value`;
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		step = 1,
+		size = 'extra-large',
+		iconFilled,
+		iconOutline,
+		name = ID,
+		itemLabel = (rating) => `${rating}`,
+		onChange,
+		class: classes,
+		ref = $bindable(),
+		role = 'radiogroup',
+		...attributes
+	}: RatingProps = $props();
+
+	/** Until the user rates, the value is only displayed, so it is drawn with the precision of a quarter. */
+	let rated = $state(false);
+	let hovered = $state<number>();
+
+	const _max = $derived.by(() => {
+		if (!Number.isInteger(max) || max <= 1) throw new Error('Max must be a whole number greater than 1');
+		return max;
+	});
+	const items = $derived(Array.from({ length: _max }, (_, index) => index + 1));
+	const shown = $derived(hovered ?? value);
+	const checkedValue = $derived(value === 0 ? 0 : Math.min(_max, Math.max(step, Math.round(value / step) * step)));
+
+	const custom = $derived(!!(iconFilled || iconOutline));
+
+	/** How much of the item is filled, snapped to the precision it is shown with. */
+	function fillFor(item: number) {
+		const fill = Math.min(Math.max(shown - (item - 1), 0), 1);
+		const precision = hovered !== undefined || rated ? step / 2 : 0.25;
+		return Math.round(fill / precision) * precision;
+	}
+
+	function iconFor(snapped: number) {
+		if (snapped >= 1) return StarFilled;
+		if (snapped >= 0.75) return StarThreeQuarterFilled;
+		if (snapped >= 0.5) return StarHalfFilled;
+		if (snapped >= 0.25) return StarOneQuarterFilled;
+		return StarRegular;
+	}
+
+	function select(next: number) {
+		rated = true;
+		value = next;
+		onChange?.(next);
+	}
+</script>
+
+<!-- 
+	@component
+	A rating lets users give a value to an item, using a row of symbols such as stars. It supports half-filled items and four sizes.
+
+	- Usage:
+	```tsx
+	<script>
+		import { Rating } from 'fluentui-svelte';
+
+		let value = $state(3);
+	</script>
+
+	<Rating bind:value />
+	<Rating bind:value step={0.5} size="medium" />
+	```
+-->
+<div
+	class={['fs-rating', `size-${size}`, classes]}
+	bind:this={ref}
+	{role}
+	onpointerleave={() => (hovered = undefined)}
+	{...attributes}
+	aria-label={attributes['aria-label'] ?? (attributes['aria-labelledby'] ? undefined : 'Rating')}
+	aria-describedby={[attributes['aria-describedby'], VALUE_ID].filter(Boolean).join(' ')}
+>
+	<span id={VALUE_ID} hidden>Current rating: {value} out of {_max}.</span>
+	{#each items as item (item)}
+		{@const fill = fillFor(item)}
+		<span class="rating-item">
+			{#if custom}
+				{@const Outline = iconOutline ?? StarRegular}
+				{@const Filled = iconFilled ?? StarFilled}
+				<span class="rating-icon custom" class:selected={fill > 0} style="--rating-fill: {fill * 100}%">
+					<Outline aria-hidden="true" />
+					<span class="filled"><Filled aria-hidden="true" /></span>
+				</span>
+			{:else}
+				{@const Icon = iconFor(fill)}
+				<span class="rating-icon" class:selected={fill > 0}><Icon aria-hidden="true" /></span>
+			{/if}
+			{#if step === 0.5}
+				<input
+					class="half-value"
+					type="radio"
+					{name}
+					value={item - 0.5}
+					checked={checkedValue === item - 0.5}
+					aria-label={itemLabel(item - 0.5)}
+					onclick={() => value !== item - 0.5 && select(item - 0.5)}
+					onpointerenter={() => (hovered = item - 0.5)}
+				/>
+			{/if}
+			<input
+				class="full-value"
+				type="radio"
+				{name}
+				value={item}
+				checked={checkedValue === item}
+				aria-label={itemLabel(item)}
+				onclick={() => value !== item && select(item)}
+				onpointerenter={() => (hovered = item)}
+			/>
+		</span>
+	{/each}
+</div>
+
+<style>
+	.fs-rating {
+		--rating-size: 24px;
+		display: inline-flex;
+		align-items: center;
+		color: var(--fs-accent-fill-default);
+
+		&.size-small {
+			--rating-size: 12px;
+		}
+
+		&.size-medium {
+			--rating-size: 16px;
+		}
+
+		&.size-large {
+			--rating-size: 20px;
+		}
+	}
+
+	.rating-item {
+		display: inline-flex;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		padding: 2px;
+
+		&:has(input:focus-visible) {
+			box-shadow: var(--fs-focus-stroke-outer);
+		}
+
+		& input {
+			appearance: none;
+			position: absolute;
+			inset-block: 0;
+			inset-inline-start: 0;
+			margin: 0;
+			outline: none;
+			cursor: pointer;
+			inline-size: 100%;
+			block-size: 100%;
+		}
+
+		& .half-value {
+			z-index: 1;
+			inline-size: 50%;
+		}
+	}
+
+	.rating-icon {
+		display: inline-flex;
+		color: var(--fs-text-secondary);
+
+		&.selected {
+			color: var(--fs-accent-fill-default);
+		}
+
+		& :global(svg) {
+			inline-size: var(--rating-size);
+			block-size: var(--rating-size);
+		}
+
+		&.custom {
+			position: relative;
+
+			& .filled {
+				display: inline-flex;
+				position: absolute;
+				inset: 0;
+				color: var(--fs-accent-fill-default);
+				clip-path: inset(0 calc(100% - var(--rating-fill)) 0 0);
+
+				&:dir(rtl) {
+					clip-path: inset(0 0 0 calc(100% - var(--rating-fill)));
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { RatingProps } from './types.ts';
+/**
+ * A rating lets users give a value to an item, using a row of symbols such as stars. It supports half-filled items and four sizes.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ * 	import { Rating } from 'fluentui-svelte';
+ *
+ * 	let value = $state(3);
+ * </script>
+ *
+ * <Rating bind:value />
+ * <Rating bind:value step={0.5} size="medium" />
+ * ```
+ */
+declare const Rating: import("svelte").Component<RatingProps, {}, "ref" | "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

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

@@ -0,0 +1,44 @@
+import type { Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** @propsmith RatingProps */
+export type RatingProps = {
+    /** The current rating. Fractions are drawn in quarters until the user rates.
+     * @default 0
+     * @bindable
+     */
+    value?: number;
+    /** The number of items displayed. Must be a whole number greater than 1.
+     * @default 5
+     */
+    max?: number;
+    /** The precision of the rating. `0.5` allows half-filled items.
+     * @default 1
+     */
+    step?: 1 | 0.5;
+    /** The size of the rating items.
+     * @default 'extra-large'
+     */
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    /** The icon of a filled item. Falls back to a filled star. Partially filled items are clipped, so it also works with half steps.
+     * @type Component
+     */
+    iconFilled?: Component;
+    /** The icon of an empty item. Falls back to an outlined star.
+     * @type Component
+     */
+    iconOutline?: Component;
+    /** The name of the radio inputs. Generated when not provided. */
+    name?: string;
+    /** Generates the accessible label of the radio input for a rating value.
+     * @default (rating) => `${rating}`
+     */
+    itemLabel?: (rating: number) => string;
+    /** Called when the user changes the rating. */
+    onChange?: (value: number) => void;
+    /** The class to apply to the rating. */
+    class?: string;
+    /** The DOM reference of the rating element.
+     * @bindable
+     */
+    ref?: HTMLElement;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>;

package/dist/components/rating/types.js

@@ -0,0 +1 @@
+export {};