fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/auto-suggest-box/auto-suggest-box.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { onMount, tick } from 'svelte';
 	import { SvelteMap } from 'svelte/reactivity';
 	import { on } from 'svelte/events';
 	import { onClickOutside } from 'runed';
+	import { invokeHandlers } from '../../internal/index.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import { setAutoSuggestBoxContext } from './auto-suggest-box.js';
 	import { Flyout, TextBox, ListView, ListViewItem } from '../../index.js';
@@ -19,23 +21,29 @@
 
 	const FALLBACK_ID = $props.id();
 	const ID = `${PREFIX}autosuggestbox-${FALLBACK_ID}`;
-	const INPUT_ID = `${ID}-input`;
+
+	const labelContext = claimLabel(() => id);
 
 	let {
+		id = labelContext?.fieldId ?? `${ID}-input`,
+		name = id,
+		wrapperAttributes,
+		onfocus,
+		onClear,
 		placeholder,
 		hideActionButtons,
 		type = 'search',
 		open = $bindable(false),
 		multiselect,
-		ref = $bindable(),
+		wrapperRef = $bindable(null),
 		value = $bindable(''),
-		inputRef = $bindable(),
+		ref = $bindable(null),
 		selectOnFocus,
 		openOnFocus = false,
 		virtualizer,
-		flyoutRef = $bindable(),
+		flyoutRef = $bindable(null),
 		flyoutProps,
-		listViewRef = $bindable(),
+		listViewRef = $bindable(null),
 		selectedOptions = $bindable([]),
 		listViewProps,
 		showTextualMultiselect,
@@ -44,7 +52,8 @@
 		textChanged,
 		querySubmitted,
 		suggestionChosen,
-		children
+		children,
+		...attributes
 	}: AutoSuggestBoxProps = $props();
 
 	/**
@@ -69,7 +78,7 @@
 
 	const OPTIONS = '.fs-autosuggest-option';
 
-	const NAVIGATION: TabspotNodeOptions = {
+	const NAVIGATION: TabspotNodeOptions = $derived({
 		root: {},
 		mover: {
 			axis: 'vertical',
@@ -77,11 +86,11 @@
 			skip: "[aria-disabled='true']",
 			activation: {
 				mode: 'activedescendant',
-				controller: `#${INPUT_ID}`,
+				controller: `#${CSS.escape(id ?? ID)}`,
 				mark: { attribute: 'data-active' }
 			}
 		}
-	};
+	});
 
 	const context: AutoSuggestBoxContext = $state({
 		config: {
@@ -106,7 +115,7 @@
 				open = v;
 			},
 			get textBoxRef() {
-				return inputRef;
+				return ref;
 			},
 			get activeOption() {
 				return activeOption;
@@ -220,7 +229,7 @@
 
 	/** The two keys that are the box's own business rather than the list's. */
 	function handleKeyDown(e: KeyboardEvent) {
-		if (e.target !== inputRef) return;
+		if (e.target !== ref) return;
 
 		if (e.key === 'Escape') {
 			e.preventDefault();
@@ -230,12 +239,13 @@
 
 		if (e.key !== 'Enter') return;
 
-		e.preventDefault();
-
 		if (activeOption) {
+			// Enter chooses the suggestion under the cursor rather than submitting the form.
+			e.preventDefault();
 			context.methods.toggleSelection(e, activeOption.id);
 			open = false;
 		} else {
+			// The free text is the value: the form submits it, unless `querySubmitted` prevents it.
 			querySubmitted?.(e, value);
 		}
 	}
@@ -260,14 +270,14 @@
 		// end of the list: a second arrow pressed while this one is still in flight is
 		// a second move, and two cursor sets onto the same option would be one.
 		// Untrusted, so it passes straight through to Tabspot this time.
-		inputRef?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+		ref?.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
 	}
 
 	function handleFocus() {
 		if (openOnFocus) open = true;
 	}
 
-	async function handleTextChanged(e: InputEvent, val: string) {
+	async function handleTextChanged(e: Event, val: string) {
 		if (val.length > 0 && !open) open = true;
 		lastTypedValue = val;
 		textChanged?.(e, val);
@@ -290,15 +300,15 @@
 	}
 
 	onClickOutside(
-		() => ref,
+		() => wrapperRef,
 		() => (open = false)
 	);
 
 	onMount(() => {
-		if (!inputRef) return;
+		if (!ref) return;
 
 		const off = [
-			on(inputRef, 'keydown', handleKeyDown),
+			on(ref, 'keydown', handleKeyDown),
 			// Tabspot listens on `document` in the capture phase,
 			// `window` comes first on the capture path, to note the
 			// key that caused a move,and to hold a move back until
@@ -307,7 +317,7 @@
 				window,
 				'keydown',
 				(event) => {
-					if (event.target !== inputRef || !event.isTrusted) return;
+					if (event.target !== ref || !event.isTrusted) return;
 
 					const key = event.key;
 
@@ -366,48 +376,54 @@
 </script>
 
 <div
-	class={['fs-autosuggestbox', { open, multiselect: _box.multiselect }]}
-	style="--max-items: {maxItemsInView}; --current-items: {items.size};"
-	bind:this={ref}
+	{...wrapperAttributes}
+	class={['fs-autosuggestbox', { open, multiselect: _box.multiselect }, wrapperAttributes?.class]}
+	style="--max-items: {maxItemsInView}; --current-items: {items.size}; {wrapperAttributes?.style ?? ''}"
+	bind:this={wrapperRef}
 >
 	<TextBox
+		{...attributes}
 		{type}
 		{placeholder}
 		{hideActionButtons}
-		id={INPUT_ID}
+		{id}
+		{name}
 		bind:value
-		bind:ref={inputRef}
+		bind:ref
 		querySubmitted={(e) => querySubmitted?.(e, value)}
 		textChanged={(e) => handleTextChanged(e, value)}
-		onClear={handleClear}
-		onfocus={handleFocus}
+		onClear={(e) => invokeHandlers(e, [], [handleClear, onClear])}
+		onfocus={(e) => invokeHandlers(e, [], [handleFocus, onfocus])}
 		role="combobox"
 		aria-expanded={open}
 		aria-autocomplete="list"
 		aria-controls={open ? `${ID}-list` : undefined}
 		aria-haspopup="listbox"
-		class="square-{roundClass}"
+		wrapperAttributes={{ class: `square-${roundClass}` }}
 	/>
 	{#if open}
 		<Flyout
+			{...flyoutProps}
 			floating
 			offset={0}
-			reference={ref}
+			reference={wrapperRef}
 			bind:ref={flyoutRef}
 			roundCorners="bottom"
 			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
-			onPlacementChange={(place) => handlePlacementChange(place)}
+			onPlacementChange={(place) => {
+				handlePlacementChange(place);
+				flyoutProps?.onPlacementChange?.(place);
+			}}
 			class={['fs-autosuggestbox-flyout', roundClass === 'top' && 'top-shadow', flyoutProps?.class]}
-			{...flyoutProps}
 		>
 			<ListView
+				{...listViewProps as any}
 				role="listbox"
 				navigationMode="items"
 				disableTabspot
 				id="{ID}-list"
 				selectedItems={Array.from(selectedOptions.values()).map((opt) => opt.value)}
 				bind:ref={listViewRef}
-				{...listViewProps as any}
 			>
 				{#if items.size === 0}
 					<ListViewItem disabled>{notFoundText}</ListViewItem>

package/dist/components/auto-suggest-box/auto-suggest-box.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AutoSuggestBoxProps } from './types.ts';
-declare const AutoSuggestBox: import("svelte").Component<AutoSuggestBoxProps, {}, "ref" | "value" | "open" | "inputRef" | "flyoutRef" | "listViewRef" | "selectedOptions">;
+import type { AutoSuggestBoxProps } from './types.js';
+declare const AutoSuggestBox: import("svelte").Component<AutoSuggestBoxProps, {}, "ref" | "value" | "open" | "wrapperRef" | "flyoutRef" | "listViewRef" | "selectedOptions">;
 type AutoSuggestBox = ReturnType<typeof AutoSuggestBox>;
 export default AutoSuggestBox;

package/dist/components/auto-suggest-box/docs/llms.md

@@ -117,35 +117,36 @@ A virtualized list must filter its source data itself and report the filtered le
 </AutoSuggestBox>
 ```
 
+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:AutoSuggestBoxProps -->
 
-| Name                                                                          | Type                                                            | Default              | Description                                                                                                                                                                        |
-| ----------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                                              | `HTMLElement`                                                   |                      | The DOM reference of the wrapper element.                                                                                                                                          |
-| `inputRef` _bindable_                                                         | `HTMLInputElement`                                              |                      | The DOM reference of the text box element.                                                                                                                                         |
-| `value` _bindable_                                                            | `string`                                                        | `''`                 | The current text of the box.                                                                                                                                                       |
-| `open` _bindable_                                                             | `boolean`                                                       | `false`              | Controls the open state of the suggestion list.                                                                                                                                    |
-| `multiselect`                                                                 | `boolean`                                                       |                      | Lets more than one suggestion be chosen, and keeps the list open after each one.                                                                                                   |
-| `selectOnFocus`                                                               | `boolean`                                                       |                      | Mirrors the suggestion under the cursor into the text box as it is walked over. Not supported together with `multiselect`.                                                         |
-| `openOnFocus`                                                                 | `boolean`                                                       | `false`              | Opens the suggestion list as soon as the text box takes focus, instead of waiting for the first keystroke. Useful on touch devices, which have no arrow key to open the list with. |
-| `showTextualMultiselect`                                                      | `boolean`                                                       |                      | Lists every chosen suggestion in the text box, comma separated. Multiselect only.                                                                                                  |
-| `notFoundText`                                                                | `string`                                                        | `'No results found'` | The message shown in place of the list when nothing matches.                                                                                                                       |
-| `selectedOptions` _bindable_                                                  | `{ id: string; value: string }[]`                               | `[]`                 | The suggestions currently chosen.                                                                                                                                                  |
-| `suggestionChosen`                                                            | `(e: Event, selection: string) => void`                         |                      | Called when a suggestion is chosen: by clicking it, by pressing Enter on it, or by walking onto it while `selectOnFocus` is set.                                                   |
-| `querySubmitted`                                                              | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void` |                      | Called when Enter is pressed with no suggestion under the cursor, or when the search button is clicked. This is where a fresh set of suggestions is fetched.                       |
-| `virtualizer`                                                                 | `AutoSuggestVirtualizer`                                        |                      | Bridge to a windowed list, for suggestion sets too long to render whole.                                                                                                           |
-| `maxItemsInView`                                                              | `number`                                                        | `6`                  | How many suggestions are visible before the list scrolls.                                                                                                                          |
-| `textBoxRef` _bindable_                                                       | `HTMLInputElement`                                              |                      | The DOM reference of the underlying text box input.                                                                                                                                |
-| `textBoxProps`                                                                | `TextBoxProps`                                                  |                      | The props to spread on the text box.                                                                                                                                               |
-| `flyoutRef` _bindable_                                                        | `HTMLElement`                                                   |                      | The DOM reference of the flyout holding the suggestion list.                                                                                                                       |
-| `flyoutProps`                                                                 | `FlyoutProps`                                                   |                      | The props to spread on the flyout.                                                                                                                                                 |
-| `listViewRef` _bindable_                                                      | `HTMLUListElement`                                              |                      | The DOM reference of the suggestion list.                                                                                                                                          |
-| `listViewProps`                                                               | `ListViewItemProps`                                             |                      | The props to spread on the suggestion list.                                                                                                                                        |
-| `type`, `placeholder`, `hideActionButtons`, `textChanged` from `TextBoxProps` |                                                                 |                      |                                                                                                                                                                                    |
-| Element Attributes (`div`)                                                    |                                                                 |                      |                                                                                                                                                                                    |
+| Name                                                                                     | Type                                                            | Default              | Description                                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `wrapperRef` _bindable_                                                                  | `HTMLDivElement` &#124; `null`                                  |                      | The DOM reference of the wrapper element.                                                                                                                                                                                                         |
+| `ref` _bindable_                                                                         | `HTMLInputElement` &#124; `null`                                |                      | The DOM reference of the text box element.                                                                                                                                                                                                        |
+| `value` _bindable_                                                                       | `string`                                                        | `''`                 | The current text of the box.                                                                                                                                                                                                                      |
+| `open` _bindable_                                                                        | `boolean`                                                       | `false`              | Controls the open state of the suggestion list.                                                                                                                                                                                                   |
+| `multiselect`                                                                            | `boolean`                                                       |                      | Lets more than one suggestion be chosen, and keeps the list open after each one.                                                                                                                                                                  |
+| `selectOnFocus`                                                                          | `boolean`                                                       |                      | Mirrors the suggestion under the cursor into the text box as it is walked over. Not supported together with `multiselect`.                                                                                                                        |
+| `openOnFocus`                                                                            | `boolean`                                                       | `false`              | Opens the suggestion list as soon as the text box takes focus, instead of waiting for the first keystroke. Useful on touch devices, which have no arrow key to open the list with.                                                                |
+| `showTextualMultiselect`                                                                 | `boolean`                                                       |                      | Lists every chosen suggestion in the text box, comma separated. Multiselect only.                                                                                                                                                                 |
+| `notFoundText`                                                                           | `string`                                                        | `'No results found'` | The message shown in place of the list when nothing matches.                                                                                                                                                                                      |
+| `selectedOptions` _bindable_                                                             | `{ id: string; value: string }[]`                               | `[]`                 | The suggestions currently chosen.                                                                                                                                                                                                                 |
+| `suggestionChosen`                                                                       | `(e: Event, selection: string) => void`                         |                      | Called when a suggestion is chosen: by clicking it, by pressing Enter on it, or by walking onto it while `selectOnFocus` is set.                                                                                                                  |
+| `querySubmitted`                                                                         | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void` |                      | Called when Enter is pressed with no suggestion under the cursor, or when the search button is clicked. This is where a fresh set of suggestions is fetched. Enter then also submits the form with the typed text, unless the event is prevented. |
+| `virtualizer`                                                                            | `AutoSuggestVirtualizer`                                        |                      | Bridge to a windowed list, for suggestion sets too long to render whole.                                                                                                                                                                          |
+| `maxItemsInView`                                                                         | `number`                                                        | `6`                  | How many suggestions are visible before the list scrolls.                                                                                                                                                                                         |
+| `wrapperAttributes`                                                                      | `HTMLAttributes`                                                |                      | The attributes to spread on the wrapper element.                                                                                                                                                                                                  |
+| `flyoutRef` _bindable_                                                                   | `HTMLElement` &#124; `null`                                     |                      | The DOM reference of the flyout holding the suggestion list.                                                                                                                                                                                      |
+| `flyoutProps`                                                                            | `FlyoutProps`                                                   |                      | The props to spread on the flyout.                                                                                                                                                                                                                |
+| `listViewRef` _bindable_                                                                 | `HTMLUListElement` &#124; `null`                                |                      | The DOM reference of the suggestion list.                                                                                                                                                                                                         |
+| `listViewProps`                                                                          | `ListViewItemProps`                                             |                      | The props to spread on the suggestion list.                                                                                                                                                                                                       |
+| `type`, `placeholder`, `hideActionButtons`, `textChanged`, `onClear` from `TextBoxProps` |                                                                 |                      |                                                                                                                                                                                                                                                   |
+| `HTMLInputAttributes` without `value`, `type`, `role`, `size`, `placeholder`             |                                                                 |                      |                                                                                                                                                                                                                                                   |
 
 <!-- /props:AutoSuggestBoxProps -->
 
@@ -154,14 +155,14 @@ A virtualized list must filter its source data itself and report the filtered le
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:AutoSuggestOptionProps -->
 
-| Name                                            | Type            | Default | Description                                                                                                                   |
-| ----------------------------------------------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `value`                                         | `string`        |         | The value reported to the box when the suggestion is chosen. Falls back to the id.                                            |
-| `text`                                          | `string`        |         | The text shown in the box once the suggestion is chosen. Falls back to `value`.                                               |
-| `id`                                            | `string`        |         | The id of the option element, referenced by the box through `aria-activedescendant`. Falls back to a generated id.            |
-| `ref` _bindable_                                | `HTMLLIElement` |         | The DOM reference of the option element.                                                                                      |
-| `disabled`                                      | `boolean`       |         | Takes the suggestion out of reach: it is shown, but the cursor steps over it.                                                 |
-| `index`                                         | `number`        |         | Where the suggestion sits in the whole set. A windowed list needs the real index, not the position within the rendered slice. |
-| `ListViewItemProps<'li'>` without `as`, `value` |                 |         |                                                                                                                               |
+| Name                                            | Type                          | Default | Description                                                                                                                   |
+| ----------------------------------------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| `value`                                         | `string`                      |         | The value reported to the box when the suggestion is chosen. Falls back to the id.                                            |
+| `text`                                          | `string`                      |         | The text shown in the box once the suggestion is chosen. Falls back to `value`.                                               |
+| `id`                                            | `string`                      |         | The id of the option element, referenced by the box through `aria-activedescendant`. Falls back to a generated id.            |
+| `ref` _bindable_                                | `HTMLLIElement` &#124; `null` |         | The DOM reference of the option element.                                                                                      |
+| `disabled`                                      | `boolean`                     |         | Takes the suggestion out of reach: it is shown, but the cursor steps over it.                                                 |
+| `index`                                         | `number`                      |         | Where the suggestion sits in the whole set. A windowed list needs the real index, not the position within the rendered slice. |
+| `ListViewItemProps<'li'>` without `as`, `value` |                               |         |                                                                                                                               |
 
 <!-- /props:AutoSuggestOptionProps -->

package/dist/components/auto-suggest-box/option.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { invokeHandlers } from '../../internal/index.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import ListViewItem from '../list-view/list-view-item.svelte';
 	import { getAutoSuggestBoxContext } from './auto-suggest-box.js';
@@ -9,12 +10,13 @@
 
 	let {
 		disabled,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = ID,
 		value = id!,
 		text,
 		index,
 		children,
+		onclick,
 		...attributes
 	}: AutoSuggestOptionProps = $props();
 
@@ -58,16 +60,16 @@
 
 {#if isVisible || virtualized}
 	<ListViewItem
+		{...attributes}
 		{id}
 		role="option"
 		{value}
 		tabindex={-1}
 		data-index={index}
-		class={['fs-autosuggest-option', selectOnFocus && 'no-outline']}
-		onclick={handleClick}
+		class={['fs-autosuggest-option', selectOnFocus && 'no-outline', attributes?.class]}
+		onclick={(e) => invokeHandlers(e, disabled, [handleClick, onclick])}
 		bind:ref
 		{disabled}
-		{...attributes}
 	>
 		{@render children?.()}
 	</ListViewItem>

package/dist/components/auto-suggest-box/types.d.ts

@@ -2,17 +2,17 @@ import type { FSContext } from '../../internal/index.js';
 import type { TextBoxProps } from '../text-box/types.ts';
 import type { ListViewItemProps } from '../list-view/types.ts';
 import type { FlyoutProps } from '../flyout/types.ts';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 /** @propsmith AutoSuggestBoxProps */
 export type AutoSuggestBoxProps = {
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    ref?: HTMLElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The DOM reference of the text box element.
      * @bindable
      */
-    inputRef?: HTMLInputElement;
+    ref?: HTMLInputElement | null;
     /** The current text of the box.
      * @default ''
      * @bindable
@@ -53,7 +53,8 @@ export type AutoSuggestBoxProps = {
      */
     suggestionChosen?: (e: Event, selection: string) => void;
     /** Called when Enter is pressed with no suggestion under the cursor, or when the search
-     * button is clicked. This is where a fresh set of suggestions is fetched.
+     * button is clicked. This is where a fresh set of suggestions is fetched. Enter then also
+     * submits the form with the typed text, unless the event is prevented.
      */
     querySubmitted?: (e: MouseEvent | KeyboardEvent, query: string) => void;
     /** Bridge to a windowed list, for suggestion sets too long to render whole.
@@ -64,18 +65,14 @@ export type AutoSuggestBoxProps = {
      * @default 6
      */
     maxItemsInView?: number;
-    /** The DOM reference of the underlying text box input.
-     * @bindable
-     */
-    textBoxRef?: HTMLInputElement;
-    /** The props to spread on the text box.
-     * @type TextBoxProps
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    textBoxProps?: Omit<TextBoxProps, 'type' | 'ref' | 'placeholder' | 'hideActionButtons' | 'textChanged'>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The DOM reference of the flyout holding the suggestion list.
      * @bindable
      */
-    flyoutRef?: HTMLElement;
+    flyoutRef?: HTMLElement | null;
     /** The props to spread on the flyout.
      * @type FlyoutProps
      */
@@ -83,12 +80,12 @@ export type AutoSuggestBoxProps = {
     /** The DOM reference of the suggestion list.
      * @bindable
      */
-    listViewRef?: HTMLUListElement;
+    listViewRef?: HTMLUListElement | null;
     /** The props to spread on the suggestion list.
      * @type ListViewItemProps
      */
     listViewProps?: Omit<ListViewItemProps, 'as' | 'role' | 'ref' | 'navigationMode' | 'selectedItems'>;
-} & Pick<TextBoxProps, 'type' | 'placeholder' | 'hideActionButtons' | 'textChanged'> & HTMLAttributes<HTMLDivElement>;
+} & Pick<TextBoxProps, 'type' | 'placeholder' | 'hideActionButtons' | 'textChanged' | 'onClear'> & Omit<HTMLInputAttributes, 'value' | 'type' | 'role' | 'size' | 'placeholder'>;
 /**
  * Bridge to a windowed list. `size` is the total number of suggestions, not the
  * number currently rendered — it is how the box knows where the list really ends
@@ -106,7 +103,7 @@ export type AutoSuggestBoxContext = FSContext<{
     multiselect?: boolean;
 }, {
     readonly searchValue?: string;
-    readonly textBoxRef?: HTMLInputElement;
+    readonly textBoxRef?: HTMLInputElement | null;
     readonly lastTypedValue?: string;
     open?: boolean;
     activeOption?: OptionType | null;
@@ -135,7 +132,7 @@ export type AutoSuggestOptionProps = {
     /** The DOM reference of the option element.
      * @bindable
      */
-    ref?: HTMLLIElement;
+    ref?: HTMLLIElement | null;
     /** Takes the suggestion out of reach: it is shown, but the cursor steps over it. */
     disabled?: boolean;
     /** Where the suggestion sits in the whole set. A windowed list needs the real index,

package/dist/components/avatar/avatar.svelte

@@ -15,7 +15,7 @@
 		color = 'attention',
 		style,
 		activeAppearance = 'ring',
-		ref = $bindable(),
+		ref = $bindable(null),
 		idForColor,
 		badge,
 		...attributes
@@ -49,6 +49,7 @@
   ```
 -->
 <div
+	{...attributes}
 	role="img"
 	aria-label={name}
 	bind:this={ref}
@@ -60,9 +61,9 @@
 		active,
 		shape,
 		hideBg && 'hide-bg',
-		(badge?.status || badge?.icon) && 'mask'
+		(badge?.status || badge?.icon) && 'mask',
+		attributes?.class
 	]}
-	{...attributes}
 >
 	<span class="content">
 		{#if image}

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

@@ -83,7 +83,7 @@ An avatar can have its color automatically picked based on the name prop, or idF
 | ------------------ | ------------------------------------------------------------------------------ | ------------- | --------------------------------------------------------------------------------------------------------------- |
 | `name`             | `string`                                                                       | `'Avatar'`    | The name of the person or entity represented by this Avatar. This should always be provided if it is available. |
 | `image`            | `{ src: string; }`                                                             |               | The Avatar's image                                                                                              |
-| `ref` _bindable_   | `HTMLDivElement`                                                               |               | The DOM reference of the avatar element.                                                                        |
+| `ref` _bindable_   | `HTMLDivElement` | `null`                                                 |               | The DOM reference of the avatar element.                                                                        |
 | `size`             | `number`                                                                       | `48`          | Size of the avatar in pixels.                                                                                   |
 | `shape`            | `'circular'` | `'rounded'` | `'square'`                              | `'circular'`  | The avatar can have a circular, rounded or square shape.                                                        |
 | `color`            | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors) | `'colorful'` | `'attention'` | The color when displaying either an icon or initials. For now it only supports system colors (plus colorful).   |

package/dist/components/avatar/type.d.ts

@@ -17,7 +17,7 @@ export type AvatarProps = {
     /** The DOM reference of the avatar element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** Size of the avatar in pixels.
      * @default 48
      */

package/dist/components/badge/badge-icon.svelte

@@ -11,7 +11,7 @@
 		class: classes,
 		color,
 		style,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...attributes
 	}: BadgeIconProps = $props();
 
@@ -41,12 +41,12 @@
   ```
  -->
 <span
+	{...attributes}
 	bind:this={ref}
 	aria-label={arialabel}
 	role="img"
 	class={['fs-badge-icon', color || colors[status], classes]}
 	style="--badge-size: {pxToRem(size)}; {style}"
-	{...attributes}
 >
 	{#if Icon}
 		<RenderSoC SoC={Icon} args={{ 'aria-hidden': true, width: `${size}px`, height: `${size}px` }} />

package/dist/components/badge/badge.svelte

@@ -13,7 +13,7 @@
 		children,
 		class: classes,
 		style,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...attributes
 	}: BadgeProps = $props();
 </script>
@@ -36,10 +36,10 @@
   ```
  -->
 <span
+	{...attributes}
 	bind:this={ref}
 	class={['fs-badge', shape, appearance, color, classes]}
 	style="--badge-shapes: {shapes[shape]}; --badge-size: {pxToRem(size)}; {style}"
-	{...attributes}
 >
 	{#if iconPosition === 'after'}
 		{@render children?.()}

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

@@ -90,7 +90,7 @@ Use the icon prop to render an icon inside the badge. You can pass the icon as a
 | `iconPosition`   | `'before'` | `'after'`                                    | `'before'`      | The position of the icon relative to the badge content.                                   |
 | `color`          | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors)     | `'information'` | The color of the badge. For now it only supports system colors.                           |
 | `icon`           | `Snippet` | `Component`                                   |                 | Icon to render inside the badge.                                                          |
-| `ref` _bindable_ | `HTMLSpanElement`                                              |                 | The DOM reference of the badge element.                                                   |
+| `ref` _bindable_ | `HTMLSpanElement` | `null`                                |                 | The DOM reference of the badge element.                                                   |
 | HTML Attributes  |                                                                |                 |                                                                                           |
 
 <!-- /props:BadgeProps -->
@@ -140,7 +140,7 @@ By default, Avatar uses an instance of BadgeIcon. As you can see, the first exam
 | `size`           | `number`                                                       | `20`          | The size of the badge in pixels.                                                   |
 | `color`          | [`Colors`](https://fluentui-svelte.dev/docs/types/#colors)     |               | Overrides the color the status would pick on its own.                              |
 | `icon`           | `Snippet` &#124; `Component`                                   |               | Custom icon, rendered instead of the one the status would pick on its own.         |
-| `ref` _bindable_ | `HTMLSpanElement`                                              |               | The DOM reference of the badge element.                                            |
+| `ref` _bindable_ | `HTMLSpanElement` &#124; `null`                                |               | The DOM reference of the badge element.                                            |
 | HTML Attributes  |                                                                |               |                                                                                    |
 
 <!-- /props:BadgeIconProps -->

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

@@ -30,7 +30,7 @@ export type BadgeProps = {
     /** The DOM reference of the badge element.
      * @bindable
      */
-    ref?: HTMLSpanElement;
+    ref?: HTMLSpanElement | null;
 } & PolymorphicProps<'span'>;
 /** The presence of a person, rendered by BadgeIcon on its own or by an Avatar through its badge prop. */
 export type BadgePresence = {
@@ -66,5 +66,5 @@ export type BadgeIconProps = {
     /** The DOM reference of the badge element.
      * @bindable
      */
-    ref?: HTMLSpanElement;
+    ref?: HTMLSpanElement | null;
 } & Omit<PolymorphicProps<'span'>, 'children'>;

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

@@ -4,7 +4,7 @@
 
 	let {
 		as = 'button' as T,
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon,
 		iconPosition = 'before',
 		current = false,
@@ -37,6 +37,7 @@
 -->
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as BreadcrumbItemElementDOMType[T]}
 	type={_as === 'button' ? 'button' : undefined}
 	disabled={nativelyDisabled || undefined}
@@ -44,7 +45,6 @@
 	aria-current={current ? 'page' : undefined}
 	class={['fs-breadcrumb-button', { current, disabled }, classes]}
 	onclick={(e: MouseEvent) => invokeHandlers(e, disabled, [onclick])}
-	{...attributes}
 >
 	{#if icon && iconPosition === 'before'}
 		<span class="fs-breadcrumb-button-icon">