fluentui-svelte 0.5.0 → 0.7.0

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

@@ -0,0 +1,21 @@
+import type { TagPickerProps } from './types.ts';
+/**
+ * A text field and a dropdown that give people a way to choose several options from a list, or to enter their own choice. Every choice is shown as a dismissible Tag in the control.
+ *
+ * - Usage:
+ * ```tsx
+ * <script>
+ *   import { TagPicker, TagPickerOption } from 'fluentui-svelte';
+ *
+ *   let selectedOptions = $state([]);
+ * </script>
+ *
+ * <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" | "wrapperRef" | "selectedOptions" | "inputRef">;
+type TagPicker = ReturnType<typeof TagPicker>;
+export default TagPicker;

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

@@ -0,0 +1,142 @@
+import type { Component, Snippet } from 'svelte';
+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';
+/** @propsmith TagPickerProps */
+export type TagPickerProps = {
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    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
+     */
+    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
+     */
+    selectedOptions?: string[];
+    /** The text typed in the input. It filters the options, and is cleared when one is chosen.
+     * @default ''
+     * @bindable
+     */
+    value?: string;
+    /** Controls the open state of the option list.
+     * @default false
+     * @bindable
+     */
+    open?: boolean;
+    /** Limits the picker to one tag: choosing an option replaces the current one and closes the list. */
+    single?: boolean;
+    /** Disables the user interaction: the input, the tags and the list. */
+    disabled?: boolean;
+    /** The size of the control. It also picks the size of the tags.
+     * @default 'medium'
+     */
+    size?: TagPickerSizes;
+    /** The placeholder text of the input. */
+    placeholder?: string;
+    /** The message shown in place of the list when there is no option left to choose.
+     * @default 'No options available'
+     */
+    notFoundText?: string;
+    /** The dropdown arrow. Pass `null` to remove it.
+     * @default ChevronDownRegular
+     * @type Snippet | Component | null
+     */
+    expandIcon?: Snippet<[SVGAttributes<SVGElement>]> | Component<SVGAttributes<SVGElement>> | null;
+    /** 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`.
+     * @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, `'Selected options'` by default.
+     * @type TagGroupProps
+     */
+    tagGroupProps?: Omit<TagGroupProps, 'children' | 'size' | 'appearance' | 'disabled' | 'dismissible' | 'selectedValues' | 'onTagSelect' | 'onDismiss'>;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    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
+     * where a free-form tag is added.
+     */
+    querySubmitted?: (e: KeyboardEvent, query: string) => void;
+    /** The options. Leave it out to get a picker without a list. */
+    children?: Snippet;
+} & 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, {
+    /** 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;
+}>;
+/** @propsmith TagPickerOptionProps */
+export type TagPickerOptionProps = {
+    /** The value added to `selectedOptions` when the option is chosen. */
+    value: string;
+    /** The text the option is filtered by, and the text of its tag. Falls back to `value`. */
+    text?: string;
+    /** The id of the option element, referenced by the input through `aria-activedescendant`.
+     * Falls back to a generated id.
+     */
+    id?: string;
+    /** The DOM reference of the option element.
+     * @bindable
+     */
+    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'>;
+/** @propsmith TagPickerOptionGroupProps */
+export type TagPickerOptionGroupProps = {
+    /** The label of the group. */
+    label: string;
+    /** The DOM reference of the group element.
+     * @bindable
+     */
+    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/tag-picker/types.js

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

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">;

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

@@ -1,33 +1,37 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
 	import SearchFilled from 'fluentui-icons-svelte/SearchFilled.svelte';
 	import EyeShowFilled from 'fluentui-icons-svelte/EyeShowFilled.svelte';
 	import EyeHideFilled from 'fluentui-icons-svelte/EyeHideFilled.svelte';
 	import { TextBoxButton } from '../../index.js';
-	import { RenderSoC } from '../../internal/index.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
 	import type { TextBoxProps } from './types.js';
 
 	const FALLBACK_ID = $props.id();
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		id = 'input-' + FALLBACK_ID,
+		id = labelContext?.fieldId ?? 'input-' + FALLBACK_ID,
 		readonly,
 		name = id,
 		hideActionButtons,
 		type = 'text',
-		class: classes,
 		wrapperAttributes,
-		wrapperRef = $bindable(),
-		value = $bindable(),
-		ref = $bindable(),
+		wrapperRef = $bindable(null),
+		value = $bindable(null),
+		ref = $bindable(null),
 		placeholder = 'Fluent TextBox',
 		size = 'medium',
 		contentBefore,
 		contentAfter,
 		querySubmitted,
 		textChanged,
-		onkeydown,
+		onkeyup,
 		onClear,
+		onchange,
+		oninput,
 		children,
 		...attributes
 	}: TextBoxProps = $props();
@@ -57,12 +61,11 @@
 		}
 	};
 
-	const handleKeyDown = (e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
+	const handleKeyUp = (e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
 		if (e.key === 'Escape') {
 			e.preventDefault();
 			(e.target as HTMLInputElement).blur();
 		}
-		onkeydown?.(e);
 	};
 </script>
 
@@ -80,7 +83,11 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
   <TextBox type="text" placeholder="Enter your name" />
   ```
 -->
-<div class={['fs-textbox', id, `text-box-size-${size}`, classes]} {...wrapperAttributes} bind:this={wrapperRef}>
+<div
+	{...wrapperAttributes}
+	class={['fs-textbox', `text-box-size-${size}`, wrapperAttributes?.class]}
+	bind:this={wrapperRef}
+>
 	{#if contentBefore}
 		<span class="content-before">
 			{#if typeof contentBefore === 'string'}
@@ -91,6 +98,7 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 		</span>
 	{/if}
 	<input
+		{...attributes}
 		{type}
 		{id}
 		{name}
@@ -98,10 +106,9 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 		{readonly}
 		bind:value
 		bind:this={ref}
-		onkeyup={handleKeyDown}
-		oninput={(e) => textChanged?.(e as any, value)}
-		onchange={(e) => textChanged?.(e as any, value)}
-		{...attributes}
+		onkeyup={(e) => invokeHandlers(e, [], [handleKeyUp, onkeyup])}
+		oninput={(e) => invokeHandlers(e, [], [(_e) => textChanged?.(_e, value), oninput])}
+		onchange={(e) => invokeHandlers(e, [], [(_e) => textChanged?.(_e, value), onchange])}
 	/>
 	{#if contentAfter}
 		<span class="content-after">
@@ -221,6 +228,11 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			left: -0.063rem;
 			background-color: var(--fs-accent-fill-default);
 		}
+		&:has(input:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background-color: var(--fs-system-critical);
+		}
 		&:has(input:focus) {
 			background: var(--fs-control-fill-input-active);
 			& input::placeholder {
@@ -271,12 +283,14 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			visibility: hidden;
 		}
 		&.text-box-size-small {
+			--text-box-edge-padding: 0.5rem;
 			& :is(input, .content-after, .content-before) {
 				font-size: var(--fs-body2-font-size);
 				padding: 0.25rem;
 			}
 		}
 		&.text-box-size-medium {
+			--text-box-edge-padding: 0.6875rem;
 			font-size: var(--fs-body-font-size);
 			& :is(input, .content-after, .content-before) {
 				padding: 0.375rem;
@@ -284,6 +298,7 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 			}
 		}
 		&.text-box-size-large {
+			--text-box-edge-padding: 0.9375rem;
 			& :is(input, .content-after, .content-before) {
 				padding: 0.625rem 0.625rem;
 				font-size: var(--fs-subtitle2-font-size);
@@ -295,5 +310,17 @@ This is a implementation of Fluent UI TextBox component. The TextBox component i
 				margin-right: 0.3125rem;
 			}
 		}
+		/* The outer horizontal edges of the control use the per-size edge padding. */
+		&:is(.text-box-size-small, .text-box-size-medium, .text-box-size-large) {
+			& input:not(.content-before + input) {
+				padding-left: var(--text-box-edge-padding);
+			}
+			& :is(input, .content-after):last-child {
+				padding-right: var(--text-box-edge-padding);
+			}
+			& .content-before {
+				padding-left: var(--text-box-edge-padding);
+			}
+		}
 	}
 </style>

package/dist/components/text-box/types.d.ts

@@ -12,15 +12,15 @@ export type TextBoxProps = {
      * @type string | number
      * @bindable
      */
-    value?: string | number;
+    value?: string | number | null;
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
     /** The DOM reference of the input element.
      * @bindable
      */
-    ref?: HTMLInputElement;
+    ref?: HTMLInputElement | null;
     /** The placeholder text for the input.
      * @default 'Fluent TextBox'
      */
@@ -42,7 +42,7 @@ export type TextBoxProps = {
      */
     size?: Sizes;
     /** Occurs when content changes in the text box. */
-    textChanged?: (e: InputEvent, text: string) => void;
+    textChanged?: (e: Event & unknown, text: 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.
@@ -53,7 +53,7 @@ export type TextBoxProps = {
     onClear?: (e: MouseEvent) => void;
     /** The children elements to render inside the input. */
     children?: Snippet;
-    /** The attributes to apply to the wrapper element.
+    /** The attributes to spread on the wrapper element.
      * @type HTMLAttributes
      */
     wrapperAttributes?: HTMLAttributes<HTMLDivElement>;

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

@@ -44,6 +44,8 @@ The `onChange` event is triggered whenever the content of the textarea changes.
 <TextArea onChange={(e) => console.log(e)} placeholder="Type..." />
 ```
 
+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) -->
@@ -52,13 +54,12 @@ The `onChange` event is triggered whenever the content of the textarea changes.
 | Name                             | Type                                                               | Default      | Description                                      |
 | -------------------------------- | ------------------------------------------------------------------ | ------------ | ------------------------------------------------ |
 | `value` _bindable_               | `string`                                                           | `''`         | The current value of the textarea.               |
-| `ref` _bindable_                 | `HTMLElement`                                                      |              | The DOM reference of the textarea element.       |
+| `ref` _bindable_                 | `HTMLTextAreaElement` &#124; `null`                                |              | The DOM reference of the textarea element.       |
 | `placeholder`                    | `string`                                                           |              | The placeholder text for the textarea.           |
 | `resize`                         | `'none'` &#124; `'both'` &#124; `'horizontal'` &#124; `'vertical'` | `'vertical'` | Configures the resize behavior of the textarea.  |
-| `onChange`                       | `(e: Event) => void`                                               |              | Callback function for the change event.          |
 | `disabled`                       | `boolean`                                                          | `false`      | Disables the user interaction.                   |
 | `wrapperAttributes`              | `HTMLAttributes`                                                   |              | The attributes to spread on the wrapper element. |
-| `wrapperRef` _bindable_          | `HTMLDivElement`                                                   |              | The DOM reference of the wrapper element.        |
+| `wrapperRef` _bindable_          | `HTMLDivElement` &#124; `null`                                     |              | The DOM reference of the wrapper element.        |
 | `SvelteHTMLElements['textarea']` |                                                                    |              |                                                  |
 
 <!-- /props:TextAreaProps -->

package/dist/components/textarea/textarea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import { invokeHandlers } from '../../internal/index.js';
 	import type { TextAreaProps } from './types.js';
@@ -7,17 +8,19 @@
 	const COMPONENT_NAME = 'textarea';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		id = ID,
+		id = labelContext?.fieldId ?? ID,
 		name = id,
 		value = $bindable(''),
-		ref = $bindable(),
+		ref = $bindable(null),
 		resize = 'vertical',
 		style,
 		wrapperAttributes,
 		onchange,
 		disabled = false,
-		wrapperRef = $bindable(),
+		wrapperRef = $bindable(null),
 		...attributes
 	}: TextAreaProps = $props();
 </script>
@@ -36,16 +39,16 @@
 	<TextArea resize="none" disabled />
 	```
 -->
-<div class="fs-textarea" {...wrapperAttributes} bind:this={wrapperRef}>
+<div {...wrapperAttributes} class={['fs-textarea', wrapperAttributes?.class]} bind:this={wrapperRef}>
 	<textarea
+		{...attributes}
 		{name}
 		{id}
 		{disabled}
 		onchange={(e) => invokeHandlers(e, [disabled], [onchange])}
 		style="resize: {resize}; {style}"
 		bind:this={ref}
-		bind:value
-		{...attributes}></textarea>
+		bind:value></textarea>
 </div>
 
 <style>
@@ -128,6 +131,11 @@
 			left: -0.063rem;
 			background: var(--fs-accent-fill-default);
 		}
+		&:has(textarea:is(:user-invalid, [aria-invalid='true'])):after {
+			width: calc(100% + 0.125rem);
+			left: -0.063rem;
+			background: var(--fs-system-critical);
+		}
 		&:has(textarea:focus) {
 			background: var(--fs-control-fill-input-active);
 			& textarea::placeholder {

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

@@ -9,15 +9,13 @@ export type TextAreaProps = {
     /** The DOM reference of the textarea element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLTextAreaElement | null;
     /** The placeholder text for the textarea. */
     placeholder?: string;
     /** Configures the resize behavior of the textarea.
      * @default 'vertical'
      */
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-    /** Callback function for the change event. */
-    onChange?: (e: Event) => void;
     /** Disables the user interaction.
      * @default false
      */
@@ -29,5 +27,5 @@ export type TextAreaProps = {
     /** The DOM reference of the wrapper element.
      * @bindable
      */
-    wrapperRef?: HTMLDivElement;
+    wrapperRef?: HTMLDivElement | null;
 } & SvelteHTMLElements['textarea'];

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

@@ -33,25 +33,28 @@ Use `hideHours`, `hideMinutes`, or `hideSeconds` to hide individual columns. By
 <TimePicker format={24} hideSeconds />
 ```
 
+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:TimePickerProps -->
 
-| Name                          | Type                  | Default           | Description                                                                                         |
-| ----------------------------- | --------------------- | ----------------- | --------------------------------------------------------------------------------------------------- |
-| `value` _bindable_            | `string`              | `''`              | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).                         |
-| `format`                      | `12` &#124; `24`      | `24`              | Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).                                    |
-| `open` _bindable_             | `boolean`             | `false`           | Controls the open state of the picker.                                                              |
-| `hideHours`                   | `boolean`             | `false`           | Removes the hour column.                                                                            |
-| `hideMinutes`                 | `boolean`             | `false`           | Removes the minute column.                                                                          |
-| `hideSeconds`                 | `boolean`             | `false`           | Removes the second column.                                                                          |
-| `element` _bindable_          | `HTMLButtonElement`   |                   | The DOM reference of the trigger button.                                                            |
-| `wrapperRef` _bindable_       | `HTMLDivElement`      |                   | The DOM reference of the element wrapping the trigger and its input.                                |
-| `wrapperAttributes`           | `HTMLAttributes`      |                   | The attributes to spread on the wrapper element.                                                    |
-| `inputElement` _bindable_     | `HTMLInputElement`    |                   | The DOM reference of the underlying input element.                                                  |
-| `inputProps`                  | `HTMLInputAttributes` |                   | HTML attributes for the underlying input element. Give it a `name` to submit the value with a form. |
-| `popupLabel`                  | `string`              | `'Choose a time'` | The accessible name of the popup, which is announced as a dialog.                                   |
-| Element Attributes (`button`) |                       |                   |                                                                                                     |
+| Name                                         | Type                                   | Default                                                                   | Description                                                                                                                                |
+| -------------------------------------------- | -------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value` _bindable_                           | `string`                               | `''`                                                                      | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).                                                                |
+| `format`                                     | `12` &#124; `24`                       | `24`                                                                      | Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).                                                                           |
+| `open` _bindable_                            | `boolean`                              | `false`                                                                   | Controls the open state of the picker.                                                                                                     |
+| `hideHours`                                  | `boolean`                              | `false`                                                                   | Removes the hour column.                                                                                                                   |
+| `hideMinutes`                                | `boolean`                              | `false`                                                                   | Removes the minute column.                                                                                                                 |
+| `hideSeconds`                                | `boolean`                              | `false`                                                                   | Removes the second column.                                                                                                                 |
+| `ref` _bindable_                             | `HTMLInputElement` &#124; `null`       |                                                                           | The DOM reference of the native time input that holds the value. The other attributes of the picker are applied to it.                     |
+| `buttonRef` _bindable_                       | `HTMLButtonElement` &#124; `null`      |                                                                           | The DOM reference of the button that opens the picker.                                                                                     |
+| `buttonAttributes`                           | `HTMLButtonAttributes`                 |                                                                           | The attributes to spread on the button that opens the picker.                                                                              |
+| `wrapperRef` _bindable_                      | `HTMLDivElement` &#124; `null`         |                                                                           | The DOM reference of the element wrapping the button and the native input.                                                                 |
+| `wrapperAttributes`                          | `HTMLAttributes`                       |                                                                           | The attributes to spread on the wrapper element.                                                                                           |
+| `popupLabel`                                 | `string`                               | `'Choose a time'`                                                         | The accessible name of the popup, which is announced as a dialog.                                                                          |
+| `columnLabels`                               | `{ hour, minute, second, … (4 keys) }` | `{ hour: 'Hour', minute: 'Minute', second: 'Second', meridiem: 'AM/PM' }` | The names of the hour, minute, second and AM/PM columns: shown on the trigger while there is no time, and given to the lists of the popup. |
+| `NativeFieldAttributes<HTMLInputAttributes>` |                                        |                                                                           |                                                                                                                                            |
 
 <!-- /props:TimePickerProps -->