fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/tag-picker/tag-picker.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { tick } from 'svelte';
-	import { SvelteMap } from 'svelte/reactivity';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { onClickOutside } from 'runed';
 	import ChevronDownRegular from 'fluentui-icons-svelte/ChevronDownRegular.svelte';
 	import { PREFIX } from '../../internal/constants.js';
-	import { RenderSoC } from '../../internal/index.js';
+	import { dispatchFieldEvents, invokeHandlers, NativeField, RenderSoC } from '../../internal/index.js';
 	import { setTagPickerContext } from './tag-picker.js';
 	import { Flyout, ListView, ListViewItem, Tag, TagGroup } from '../../index.js';
 	import {
@@ -16,7 +17,7 @@
 	} from 'tabspot';
 	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
 	import type { TagSize } from '../tag/types.js';
-	import type { OptionType, TagPickerContext, TagPickerProps, TagPickerSizes } from './types.js';
+	import type { OptionLabel, OptionType, TagPickerContext, TagPickerProps, TagPickerSizes } from './types.js';
 
 	const FALLBACK_ID = $props.id();
 	const ID = `${PREFIX}-tagpicker-${FALLBACK_ID}`;
@@ -25,9 +26,16 @@
 	/** The tag is one step smaller than the control around it. */
 	const TAG_SIZES: Record<TagPickerSizes, TagSize> = { medium: 'extra-small', large: 'small', 'extra-large': 'medium' };
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		ref = $bindable(),
-		inputRef = $bindable(),
+		wrapperRef = $bindable(null),
+		id = labelContext?.fieldId,
+		name = id,
+		class: classes,
+		ref = $bindable(null),
+		inputRef = $bindable(null),
+		inputAttributes,
 		selectedOptions = $bindable([]),
 		value = $bindable(''),
 		open = $bindable(false),
@@ -40,15 +48,28 @@
 		secondaryAction,
 		tag,
 		tagGroupProps,
-		inputProps,
+		wrapperAttributes,
+		onfocus,
+		onblur,
 		onSelectionChange,
 		querySubmitted,
-		class: classes,
 		children,
 		...attributes
 	}: TagPickerProps = $props();
 
-	const INPUT_ID = $derived(inputProps?.id ?? `${ID}-input`);
+	const INPUT_ID = $derived(inputAttributes?.id ?? `${ID}-input`);
+	const INPUT_NAME = $derived(inputAttributes?.name ?? INPUT_ID);
+
+	const native = new NativeField(
+		() => ref,
+		() => inputRef,
+		labelContext
+	);
+
+	const aria = $derived(native.aria(attributes, inputAttributes));
+
+	/** A `fieldset` disables the picker without its `disabled` prop, and only the native field knows. */
+	const blocked = () => _picker.disabled || !!ref?.matches(':disabled');
 
 	/**
 	 * The props the invariants rule over. The markup and the context read them through here, so
@@ -66,10 +87,11 @@
 	/** The options on screen, by id. */
 	const options = new SvelteMap<string, OptionType>();
 
-	/** What the tag of each value says. It outlives its option, which leaves the screen when filtered or chosen. */
-	const labels = new SvelteMap<string, string>();
+	/** What the tag of each value says. The list stays in the page while closed, so every option is here, read live. */
+	const optionLabels = new SvelteSet<OptionLabel>();
+	const labels = $derived(new Map([...optionLabels].map((option) => [option.value, option.text])));
 
-	let listViewRef = $state<HTMLUListElement>();
+	let listViewRef = $state<HTMLUListElement | null>(null);
 
 	let roundClass = $state('bottom');
 
@@ -106,8 +128,9 @@
 		},
 		events: null,
 		methods: {
-			setLabel: (v, text) => {
-				labels.set(v, text);
+			registerLabel: (option) => {
+				optionLabels.add(option);
+				return () => optionLabels.delete(option);
 			},
 			setOption: (option) => {
 				options.set(option.id, option);
@@ -118,11 +141,12 @@
 			chooseOption: async (e, id) => {
 				const option = options.get(id);
 
-				if (!option || option.disabled || selectedOptions.includes(option.value)) return;
+				if (!option || option.disabled || blocked() || selectedOptions.includes(option.value)) return;
 
 				selectedOptions = _picker.single ? [option.value] : [...selectedOptions, option.value];
 				value = '';
 				activeOption = null;
+				dispatchFieldEvents(ref);
 				onSelectionChange?.(e, selectedOptions);
 
 				if (_picker.single) open = false;
@@ -218,6 +242,7 @@
 				if (_picker.disabled || value !== '' || selectedOptions.length === 0) return;
 
 				selectedOptions = selectedOptions.slice(0, -1);
+				dispatchFieldEvents(ref);
 				onSelectionChange?.(e, selectedOptions);
 				break;
 		}
@@ -236,13 +261,14 @@
 
 	function handleDismiss(e: MouseEvent | KeyboardEvent, data: { value: string }) {
 		selectedOptions = selectedOptions.filter((v) => v !== data.value);
+		dispatchFieldEvents(ref);
 		onSelectionChange?.(e, selectedOptions);
 		inputRef?.focus();
 	}
 
 	function handleControlClick(e: MouseEvent) {
 		// Tags and the aside have a job of their own.
-		if (_picker.disabled || (e.target as Element).closest('.fs-tag, .fs-tagpicker-aside')) return;
+		if (blocked() || (e.target as Element).closest('.fs-tag, .fs-tagpicker-aside')) return;
 
 		inputRef?.focus();
 
@@ -250,7 +276,7 @@
 	}
 
 	function handleChevronClick() {
-		if (_picker.disabled) return;
+		if (blocked()) return;
 
 		inputRef?.focus();
 
@@ -272,7 +298,7 @@
 	}
 
 	onClickOutside(
-		() => ref,
+		() => wrapperRef,
 		() => (open = false)
 	);
 
@@ -286,16 +312,24 @@
 	$effect(() => {
 		if (!_picker.open || !listViewRef) return;
 
-		setTabspotAttributes({ element: listViewRef, config: NAVIGATION });
+		const list = listViewRef;
 
-		return globalContext?.state.tabspotInstance?.subscribe(listViewRef, navigate);
+		setTabspotAttributes({ element: list, config: NAVIGATION });
+
+		const unsubscribe = globalContext?.state.tabspotInstance?.subscribe(list, navigate);
+
+		// The list stays in the page once closed: nothing in it reads as chosen.
+		return () => {
+			clearTabspotActive(list);
+			unsubscribe?.();
+		};
 	});
 
 	// Tabspot does not notice an option that left the list, so it learns the options that are left.
 	$effect(() => {
 		void [...options.keys()];
 
-		if (listViewRef) globalContext?.state.tabspotInstance?.rebuild(listViewRef);
+		if (_picker.open && listViewRef) globalContext?.state.tabspotInstance?.rebuild(listViewRef);
 	});
 </script>
 
@@ -311,55 +345,91 @@ A text field and a dropdown that give people a way to choose several options fro
     let selectedOptions = $state([]);
   </script>
 
-  <TagPicker bind:selectedOptions inputProps={{ 'aria-label': 'Fruits' }}>
+  <TagPicker bind:selectedOptions name="fruits" inputAttributes={{ 'aria-label': 'Fruits' }}>
     <TagPickerOption value="Apple">Apple</TagPickerOption>
     <TagPickerOption value="Banana">Banana</TagPickerOption>
   </TagPicker>
   ```
 -->
 <div
-	class={['fs-tagpicker', `size-${size}`, { disabled: _picker.disabled, open: _picker.open }, classes]}
-	bind:this={ref}
-	{...attributes}
+	{...wrapperAttributes}
+	class={['fs-tagpicker', `size-${size}`, { disabled: _picker.disabled, open: _picker.open }, wrapperAttributes?.class]}
+	bind:this={wrapperRef}
 >
+	{#if _picker.hasList}
+		<!-- Hidden while closed, not gone: each option still tells its tag what to say, and comes before
+		     the tags, so the server writes them too. It shows once it has the wrapper to be placed against. -->
+		<Flyout
+			floating
+			hidden={!_picker.open || !wrapperRef}
+			offset={0}
+			reference={wrapperRef ?? undefined}
+			roundCorners="bottom"
+			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
+			onPlacementChange={(place) => handlePlacementChange(place)}
+			class={['fs-tagpicker-flyout', roundClass === 'top' && 'top-shadow']}
+		>
+			<ListView
+				role="listbox"
+				selectionMode={_picker.single ? 'single' : 'multiselect'}
+				navigationMode="items"
+				disableTabspot
+				id={LIST_ID}
+				aria-multiselectable={_picker.single ? undefined : 'true'}
+				aria-label={aria['aria-label']}
+				aria-labelledby={aria['aria-labelledby']}
+				bind:ref={listViewRef}
+				onmousedown={(e: MouseEvent) => e.preventDefault()}
+			>
+				{#if options.size === 0}
+					<ListViewItem role="option" disabled>{notFoundText}</ListViewItem>
+				{/if}
+				{@render children?.()}
+			</ListView>
+		</Flyout>
+	{/if}
 	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
 	<div class={['control', _picker.open && `square-${roundClass}`]} onclick={handleControlClick} onmousedown={keepFocus}>
 		<div class="content">
 			{#if selectedOptions.length > 0}
 				<TagGroup
-					role="list"
+					aria-label="Selected options"
+					{...tagGroupProps}
 					size={tagSize}
 					disabled={_picker.disabled}
 					dismissible
 					onDismiss={handleDismiss}
-					{...tagGroupProps}
 				>
 					{#each selectedOptions as v (v)}
 						{@const text = labels.get(v) ?? v}
 						{#if tag}
 							{@render tag({ value: v, text })}
 						{:else}
-							<Tag role="listitem" value={v} title={text}>{text}</Tag>
+							<Tag value={v} title={text}>{text}</Tag>
 						{/if}
 					{/each}
 				</TagGroup>
 			{/if}
 			<input
+				{...inputAttributes}
+				{...aria}
+				autocomplete="off"
 				bind:this={inputRef}
 				type="text"
-				autocomplete="off"
 				{placeholder}
 				id={INPUT_ID}
+				name={INPUT_NAME}
 				disabled={_picker.disabled}
 				role={_picker.hasList ? 'combobox' : undefined}
 				aria-expanded={_picker.hasList ? _picker.open : undefined}
 				aria-haspopup={_picker.hasList ? 'listbox' : undefined}
 				aria-autocomplete={_picker.hasList ? 'list' : undefined}
 				aria-controls={_picker.open ? LIST_ID : undefined}
-				{...inputProps}
 				bind:value
-				oninput={handleInput}
-				onkeydown={handleKeyDown}
+				oninput={(e) => invokeHandlers(e, [disabled], [handleInput, inputAttributes?.oninput])}
+				onkeydown={(e) => invokeHandlers(e, [disabled], [handleKeyDown, inputAttributes?.onkeydown])}
+				onfocus={(e) => invokeHandlers(e, [], [onfocus, inputAttributes?.onfocus])}
+				onblur={(e) => invokeHandlers(e, [], [onblur, inputAttributes?.onblur])}
 			/>
 		</div>
 		{#if secondaryAction || (expandIcon && _picker.hasList)}
@@ -375,39 +445,26 @@ A text field and a dropdown that give people a way to choose several options fro
 			</span>
 		{/if}
 	</div>
-	{#if _picker.open && ref}
-		<Flyout
-			floating
-			offset={0}
-			reference={ref}
-			roundCorners="bottom"
-			placementConfig={{ allowedPlacements: ['bottom', 'top'] }}
-			onPlacementChange={(place) => handlePlacementChange(place)}
-			class={['fs-tagpicker-flyout', roundClass === 'top' && 'top-shadow']}
-		>
-			<ListView
-				role="listbox"
-				navigationMode="items"
-				disableTabspot
-				id={LIST_ID}
-				aria-multiselectable={_picker.single ? undefined : 'true'}
-				aria-label={inputProps?.['aria-label']}
-				aria-labelledby={inputProps?.['aria-labelledby']}
-				bind:ref={listViewRef}
-				onmousedown={(e: MouseEvent) => e.preventDefault()}
-			>
-				{#if options.size === 0}
-					<ListViewItem role="option" disabled>{notFoundText}</ListViewItem>
-				{/if}
-				{@render children?.()}
-			</ListView>
-		</Flyout>
-	{:else if children}
-		<!-- Nobody sees the options, but each one still tells its tag what to say. -->
-		<ListView hidden>
-			{@render children()}
-		</ListView>
-	{/if}
+	<!-- The field of the form: it holds the chosen options, never the typed text, so it is
+	     submitted, validated and reset like any multiple select, behind the control and out of
+	     the tab order. See `NativeField`. -->
+	<select
+		{...attributes}
+		{id}
+		{name}
+		class={['native-field', classes]}
+		aria-hidden={native.reported ? undefined : 'true'}
+		multiple
+		tabindex={-1}
+		disabled={_picker.disabled}
+		bind:value={selectedOptions}
+		bind:this={ref}
+		onclick={() => inputRef?.focus()}
+	>
+		{#each selectedOptions as option (option)}
+			<option value={option}>{labels.get(option) ?? option}</option>
+		{/each}
+	</select>
 </div>
 
 <style>
@@ -522,6 +579,21 @@ A text field and a dropdown that give people a way to choose several options fro
 			color: var(--fs-text-tertiary);
 		}
 	}
+	.fs-tagpicker > .native-field {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		box-sizing: border-box;
+		opacity: 0;
+		pointer-events: none;
+	}
+	.fs-tagpicker:has(> .native-field:is(:user-invalid, [aria-invalid='true'])) .control::after {
+		inline-size: calc(100% + 0.125rem);
+		inset-inline-start: -0.063rem;
+		background-color: var(--fs-system-critical);
+	}
 
 	.content {
 		display: flex;
@@ -605,7 +677,7 @@ A text field and a dropdown that give people a way to choose several options fro
 		}
 	}
 
-	.disabled .control {
+	.fs-tagpicker:is(.disabled, :has(> .native-field:disabled)) .control {
 		cursor: not-allowed;
 		background: var(--fs-control-fill-disabled);
 		&::before {

package/dist/components/tag-picker/tag-picker.svelte.d.ts

@@ -10,12 +10,12 @@ import type { TagPickerProps } from './types.ts';
  *   let selectedOptions = $state([]);
  * </script>
  *
- * <TagPicker bind:selectedOptions inputProps={{ 'aria-label': 'Fruits' }}>
+ * <TagPicker bind:selectedOptions name="fruits" inputAttributes={{ 'aria-label': 'Fruits' }}>
  *   <TagPickerOption value="Apple">Apple</TagPickerOption>
  *   <TagPickerOption value="Banana">Banana</TagPickerOption>
  * </TagPicker>
  * ```
  */
-declare const TagPicker: import("svelte").Component<TagPickerProps, {}, "ref" | "value" | "open" | "inputRef" | "selectedOptions">;
+declare const TagPicker: import("svelte").Component<TagPickerProps, {}, "ref" | "value" | "open" | "wrapperRef" | "selectedOptions" | "inputRef">;
 type TagPicker = ReturnType<typeof TagPicker>;
 export default TagPicker;

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

@@ -1,6 +1,6 @@
 import type { Component, Snippet } from 'svelte';
-import type { HTMLAttributes, HTMLInputAttributes, SVGAttributes } from 'svelte/elements';
-import type { FSContext } from '../../internal/index.js';
+import type { HTMLAttributes, HTMLInputAttributes, HTMLSelectAttributes, SVGAttributes } from 'svelte/elements';
+import type { FSContext, NativeFieldAttributes } from '../../internal/index.js';
 import type { ListViewItemProps } from '../list-view/types.ts';
 import type { TagGroupProps } from '../tag/types.ts';
 export type TagPickerSizes = 'medium' | 'large' | 'extra-large';
@@ -9,11 +9,19 @@ export type TagPickerProps = {
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    ref?: HTMLDivElement;
-    /** The DOM reference of the input element.
+    wrapperRef?: HTMLDivElement | null;
+    /** The DOM reference of the native multiple select that holds the selected options. The other attributes of the picker are applied to it.
      * @bindable
      */
-    inputRef?: HTMLInputElement;
+    ref?: HTMLSelectElement | null;
+    /** The DOM reference of the text input.
+     * @bindable
+     */
+    inputRef?: HTMLInputElement | null;
+    /** The attributes to spread on the text input.
+     * @type HTMLInputAttributes
+     */
+    inputAttributes?: Omit<HTMLInputAttributes, 'value' | 'type' | 'role' | 'size' | 'disabled' | 'placeholder' | 'children'>;
     /** The values of the chosen options, shown as tags in the control. A value no option has is shown as it is.
      * @default []
      * @bindable
@@ -51,22 +59,21 @@ export type TagPickerProps = {
     /** A button-like element rendered at the end of the control, before the dropdown arrow. */
     secondaryAction?: Snippet;
     /** Renders the tag of a chosen option, to give it media or custom text. Falls back to a plain tag.
-     * Render a `Tag` with the given `value`, and `role="listitem"`.
+     * Render a `Tag` with the given `value`.
      * @type Snippet<[{ value: string; text: string }]>
      */
     tag?: Snippet<[{
         value: string;
         text: string;
     }]>;
-    /** The props to spread on the group holding the tags. This is where its `aria-label` goes.
+    /** The props to spread on the group holding the tags. This is where its `aria-label` goes, `'Selected options'` by default.
      * @type TagGroupProps
      */
     tagGroupProps?: Omit<TagGroupProps, 'children' | 'size' | 'appearance' | 'disabled' | 'dismissible' | 'selectedValues' | 'onTagSelect' | 'onDismiss'>;
-    /** The props to spread on the input. This is where its accessible name (`aria-label`) and
-     * `readonly` (to turn the input into a plain trigger) go.
-     * @type HTMLInputAttributes
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    inputProps?: Omit<HTMLInputAttributes, 'value' | 'type' | 'role' | 'disabled' | 'oninput' | 'onkeydown'>;
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** Called when an option is chosen, or a tag is removed. */
     onSelectionChange?: (e: Event, selectedOptions: string[]) => void;
     /** Called when Enter is pressed with text in the input and no option under the cursor. This is
@@ -75,19 +82,24 @@ export type TagPickerProps = {
     querySubmitted?: (e: KeyboardEvent, query: string) => void;
     /** The options. Leave it out to get a picker without a list. */
     children?: Snippet;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & NativeFieldAttributes<Omit<HTMLSelectAttributes, 'value' | 'multiple' | 'size' | 'disabled' | 'children'>>;
 export type OptionType = {
     id: string;
     value: string;
     disabled?: boolean;
 };
+/** What an option tells its tag, read live. */
+export type OptionLabel = {
+    readonly value: string;
+    readonly text: string;
+};
 export type TagPickerContext = FSContext<null, {
     readonly query: string;
     readonly selectedOptions: string[];
     readonly open: boolean;
 }, null, {
-    /** Remembers what the tag of `value` says. Every option calls it, on screen or not. */
-    setLabel: (value: string, text: string) => void;
+    /** Tells the tag of an option what to say. Every option calls it, on screen or not. Returns the call that withdraws the option. */
+    registerLabel: (option: OptionLabel) => () => void;
     setOption: (option: OptionType) => void;
     deleteOption: (id: string) => void;
     chooseOption: (e: Event, id: string) => void;
@@ -105,7 +117,7 @@ export type TagPickerOptionProps = {
     /** The DOM reference of the option element.
      * @bindable
      */
-    ref?: HTMLLIElement;
+    ref?: HTMLLIElement | null;
     /** Takes the option out of reach: it is shown, but the cursor steps over it. */
     disabled?: boolean;
 } & Omit<ListViewItemProps<'li'>, 'as' | 'value' | 'onAction' | 'checkmark'>;
@@ -116,7 +128,15 @@ export type TagPickerOptionGroupProps = {
     /** The DOM reference of the group element.
      * @bindable
      */
-    ref?: HTMLUListElement;
+    ref?: HTMLUListElement | null;
     /** The options of the group. */
     children?: Snippet;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLLIElement>;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLLIElement | null;
 } & Omit<HTMLAttributes<HTMLUListElement>, 'children'>;

package/dist/components/text-box/docs/llms.md

@@ -29,6 +29,31 @@ The `type` prop specifies the type of input element. It can be set to various ty
 <TextBox type="number" placeholder="Number" />
 ```
 
+### Size
+
+The `size` prop sets the height, the font size and the horizontal padding of the input. It can be set to `small`, `medium` or `large`. The default is `medium`.
+
+```svelte
+<TextBox size="small" placeholder="Small" />
+<TextBox size="medium" placeholder="Medium" />
+<TextBox size="large" placeholder="Large" />
+```
+
+### Content Before and After
+
+`contentBefore` and `contentAfter` render content inside the wrapper, before and after the input. They accept a string, a snippet or a component such as an icon.
+
+```svelte
+<script>
+	import { MailRegular } from 'fluentui-icons-svelte';
+</script>
+
+<TextBox contentBefore="https://" placeholder="Website" />
+<TextBox contentAfter=".com" placeholder="Domain" />
+<TextBox contentBefore="$" contentAfter=".00" type="number" placeholder="Price" />
+<TextBox contentBefore={MailRegular} placeholder="Email" />
+```
+
 ### Input Element
 
 The `ref` prop allows you to bind a reference to the underlying HTML input element (`bind:ref`). This can be useful for direct DOM manipulations or accessing native input properties. The wrapper element can be bound via `wrapperRef`.
@@ -65,6 +90,8 @@ The `textChanged` event is triggered whenever the content of the text box change
 
 The `onClear` event is triggered when the input is cleared, allowing you to handle any necessary actions when the user removes the input value.
 
+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) -->
@@ -74,19 +101,19 @@ The `onClear` event is triggered when the input is cleared, allowing you to hand
 | ------------------------------------ | ---------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `type`                               | [`TextBoxTypes`](https://fluentui-svelte.dev/docs/types/#textboxtypes) | `'text'`           | The type of the input element.                                                                                                                   |
 | `value` _bindable_                   | `string` &#124; `number`                                               |                    | The current value of the input.                                                                                                                  |
-| `wrapperRef` _bindable_              | `HTMLDivElement`                                                       |                    | The DOM reference of the wrapper element.                                                                                                        |
-| `ref` _bindable_                     | `HTMLInputElement`                                                     |                    | The DOM reference of the input element.                                                                                                          |
+| `wrapperRef` _bindable_              | `HTMLDivElement` &#124; `null`                                         |                    | The DOM reference of the wrapper element.                                                                                                        |
+| `ref` _bindable_                     | `HTMLInputElement` &#124; `null`                                       |                    | The DOM reference of the input element.                                                                                                          |
 | `placeholder`                        | `string`                                                               | `'Fluent TextBox'` | The placeholder text for the input.                                                                                                              |
 | `hideActionButtons`                  | `boolean`                                                              |                    | Whether to hide the extra action buttons in the input.                                                                                           |
 | `justify`                            | `boolean`                                                              |                    | Make the input fill the full width of the container.                                                                                             |
 | `contentBefore`                      | `string` &#124; `Snippet` &#124; `Component`                           |                    | Content rendered before the input, inside the wrapper.                                                                                           |
 | `contentAfter`                       | `string` &#124; `Snippet` &#124; `Component`                           |                    | Content rendered after the input, inside the wrapper.                                                                                            |
 | `size`                               | `'small'` &#124; `'medium'` &#124; `'large'`                           | `'medium'`         | The size of the input element.                                                                                                                   |
-| `textChanged`                        | `(e: InputEvent, text: string) => void`                                |                    | Occurs when content changes in the text box.                                                                                                     |
+| `textChanged`                        | `(e: Event & unknown, text: string) => void`                           |                    | Occurs when content changes in the text box.                                                                                                     |
 | `querySubmitted`                     | `(e: MouseEvent` &#124; `KeyboardEvent, query: string) => void`        |                    | The QuerySubmitted event occurs when: 1. The input type is 'search'. 2. While the focus is in the text box, press Enter or click the query icon. |
 | `onClear`                            | `(e: MouseEvent) => void`                                              |                    | Occurs when the clear button is clicked.                                                                                                         |
 | `children`                           | `Snippet`                                                              |                    | The children elements to render inside the input.                                                                                                |
-| `wrapperAttributes`                  | `HTMLAttributes`                                                       |                    | The attributes to apply to the wrapper element.                                                                                                  |
+| `wrapperAttributes`                  | `HTMLAttributes`                                                       |                    | The attributes to spread on the wrapper element.                                                                                                 |
 | `HTMLInputAttributes` without `size` |                                                                        |                    |                                                                                                                                                  |
 
 <!-- /props:TextBoxProps -->

package/dist/components/text-box/text-box-button.svelte

@@ -3,14 +3,14 @@
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	let {
-		element = $bindable(),
+		element = $bindable(null),
 		type = 'button',
 		children,
 		...attributes
-	}: { element?: HTMLButtonElement; children: Snippet } & HTMLButtonAttributes = $props();
+	}: { element?: HTMLButtonElement | null; children: Snippet } & HTMLButtonAttributes = $props();
 </script>
 
-<button {type} bind:this={element} {...attributes}>
+<button {...attributes} {type} bind:this={element}>
 	{@render children?.()}
 </button>
 

package/dist/components/text-box/text-box-button.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type $$ComponentProps = {
-    element?: HTMLButtonElement;
+    element?: HTMLButtonElement | null;
     children: Snippet;
 } & HTMLButtonAttributes;
 declare const TextBoxButton: import("svelte").Component<$$ComponentProps, {}, "element">;