fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/tag/tag.svelte

@@ -25,10 +25,10 @@
 		onDismiss,
 		onclick,
 		onkeydown,
-		primaryProps,
-		dismissProps,
+		primaryButtonAttributes,
+		dismissButtonAttributes,
 		class: classes,
-		ref = $bindable(),
+		ref = $bindable(null),
 		children,
 		...attributes
 	}: TagProps = $props();
@@ -44,8 +44,8 @@
 	/** A plain tag is the dismiss button itself when it is dismissible. An interactive one holds its own buttons. */
 	const tag = $derived(interactive ? 'div' : _dismissible ? 'button' : 'span');
 
-	const primaryId = $derived(primaryProps?.id ?? `${FALLBACK_ID}-primary`);
-	const dismissId = $derived(dismissProps?.id ?? `${FALLBACK_ID}-dismiss`);
+	const primaryId = $derived(primaryButtonAttributes?.id ?? `${FALLBACK_ID}-primary`);
+	const dismissId = $derived(dismissButtonAttributes?.id ?? `${FALLBACK_ID}-dismiss`);
 
 	/** The dismiss icon names the button, unless the consumer named the tag itself. */
 	const named = $derived(!!(attributes['aria-label'] || attributes['aria-labelledby']));
@@ -109,6 +109,7 @@
 
 <svelte:element
 	this={tag}
+	{...attributes}
 	bind:this={ref}
 	class={[
 		'fs-tag',
@@ -125,31 +126,31 @@
 	]}
 	type={tag === 'button' ? 'button' : undefined}
 	disabled={tag === 'button' ? _disabled : undefined}
-	{...attributes}
 	onclick={rootClick}
 	onkeydown={handleKeydown}
 >
 	{#if interactive}
 		<button
+			{...primaryButtonAttributes}
 			type="button"
-			class="fs-tag-primary"
+			class={['fs-tag-primary', primaryButtonAttributes?.class]}
 			id={primaryId}
 			disabled={_disabled}
 			aria-pressed={group ? _selected : undefined}
-			{...primaryProps}
 			onclick={handlePrimaryClick}
 		>
 			{@render content()}
 		</button>
 		{#if _dismissible}
 			<button
+				{...dismissButtonAttributes}
 				type="button"
-				class="fs-tag-dismiss"
+				class={['fs-tag-dismiss', dismissButtonAttributes?.class]}
 				id={dismissId}
 				disabled={_disabled}
-				aria-label={dismissLabel}
-				aria-labelledby="{primaryId} {dismissId}"
-				{...dismissProps}
+				aria-label={dismissButtonAttributes?.['aria-label'] ?? dismissLabel}
+				aria-labelledby={dismissButtonAttributes?.['aria-labelledby'] ??
+					(dismissButtonAttributes?.['aria-label'] ? undefined : `${primaryId} ${dismissId}`)}
 				onclick={dismiss}
 			>
 				<RenderSoC SoC={dismissIcon} />

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

@@ -68,18 +68,20 @@ export type TagProps = {
     onkeydown?: (e: KeyboardEvent) => void;
     /** Attributes for the primary button of an interactive tag, for example `aria-haspopup`. If you give it
      * a custom `id`, the dismiss button is named after it.
+     * @type HTMLButtonAttributes
      */
-    primaryProps?: Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
+    primaryButtonAttributes?: Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
     /** Attributes for the dismiss button of an interactive tag. Use `aria-label` together with
      * `aria-labelledby: undefined` to give the button a name that stands on its own.
+     * @type HTMLButtonAttributes
      */
-    dismissProps?: Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
+    dismissButtonAttributes?: Omit<HTMLButtonAttributes, 'children' | 'onclick'>;
     /** The primary text of the tag. */
     children?: Snippet;
     /** The DOM reference of the tag element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
 } & Omit<PolymorphicProps<'span'>, 'children' | 'onclick' | 'onkeydown'>;
 /** @propsmith TagGroupProps */
 export type TagGroupProps = {
@@ -118,7 +120,7 @@ export type TagGroupProps = {
     /** The DOM reference of the group element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
 } & Omit<PolymorphicProps<'div'>, 'children' | 'role'>;
 export type TagGroupContext = FSContext<{
     readonly size?: TagSize;

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

@@ -15,7 +15,7 @@ A TagPicker combines a text field and a dropdown, giving people a way to choose
 
 <TagPicker
 	bind:selectedOptions
-	inputProps={{ 'aria-label': 'Select Employees' }}
+	inputAttributes={{ 'aria-label': 'Select Employees' }}
 	tagGroupProps={{ 'aria-label': 'Selected Employees' }}
 >
 	{#each options as option (option)}
@@ -30,7 +30,7 @@ A TagPicker combines a text field and a dropdown, giving people a way to choose
 - Selecting an option adds a tag and clears the text. The option is not offered again until its tag is removed.
 - The options are filtered by what is typed in the input: a case-insensitive substring of the `text` of the option (its `value` when there is no `text`). The first match is highlighted.
 - A multiple picker keeps the list open after each choice. With `single` a new choice replaces the tag and closes the list.
-- Give the input an accessible name with `inputProps={{ 'aria-label': '...' }}`, and the group of tags one with `tagGroupProps`.
+- Give the input an accessible name with `aria-label="..."`, and the group of tags one with `tagGroupProps`.
 - Pressing Backspace in an empty input removes the last tag. Tell your users about it.
 - A tag shows the `text` of its option, and keeps it once the option leaves the screen. This holds for a tag preselected through `selectedOptions` too, as long as the options are children of the TagPicker. A value that no option has is shown as it is, and so is every value during server-side rendering. To control what a tag says, render the tags yourself with the `tag` snippet.
 - Do not use an interactive `Tag` inside a TagPicker.
@@ -40,7 +40,7 @@ A TagPicker combines a text field and a dropdown, giving people a way to choose
 
 ### Default
 
-The `tag` snippet renders the tag of a chosen option, here with an `Avatar` as its media. Render a `Tag` with the given `value` and `role="listitem"`.
+The `tag` snippet renders the tag of a chosen option, here with an `Avatar` as its media. Render a `Tag` with the given `value`.
 
 ```svelte
 <script>
@@ -51,13 +51,13 @@ The `tag` snippet renders the tag of a chosen option, here with an `Avatar` as i
 	{#snippet media()}
 		<Avatar aria-hidden="true" name={text} size={16} color="colorful" />
 	{/snippet}
-	<Tag role="listitem" {value} {media} title={text}>{text}</Tag>
+	<Tag {value} {media} title={text}>{text}</Tag>
 {/snippet}
 
 <TagPicker
 	bind:selectedOptions
 	{tag}
-	inputProps={{ 'aria-label': 'Select Employees' }}
+	inputAttributes={{ 'aria-label': 'Select Employees' }}
 	tagGroupProps={{ 'aria-label': 'Selected Employees' }}
 >
 	{#each options as option (option)}
@@ -71,13 +71,13 @@ The `tag` snippet renders the tag of a chosen option, here with an `Avatar` as i
 
 ### Button
 
-Make the input read only with `inputProps={{ readonly: true }}` to use the TagPicker as a button that opens the list.
+Make the input read only with `inputAttributes={{ readonly: true }}` to use the TagPicker as a button that opens the list.
 
 ```svelte
 <TagPicker
 	bind:selectedOptions
 	placeholder="Select employees"
-	inputProps={{ 'aria-label': 'Select Employees', readonly: true }}
+	inputAttributes={{ 'aria-label': 'Select Employees', readonly: true }}
 >
 	{#each options as option (option)}
 		<TagPickerOption value={option}>{option}</TagPickerOption>
@@ -90,7 +90,7 @@ Make the input read only with `inputProps={{ readonly: true }}` to use the TagPi
 A disabled TagPicker cannot be opened, typed in or changed, and its tags cannot be dismissed.
 
 ```svelte
-<TagPicker disabled selectedOptions={[options[0]]} inputProps={{ 'aria-label': 'Select Employees' }}>
+<TagPicker disabled selectedOptions={[options[0]]} inputAttributes={{ 'aria-label': 'Select Employees' }}>
 	{#each options as option (option)}
 		<TagPickerOption value={option}>{option}</TagPickerOption>
 	{/each}
@@ -107,12 +107,12 @@ Replace the dropdown arrow with `expandIcon`, a component or a snippet, or remov
 </script>
 
 <!-- A custom icon -->
-<TagPicker bind:selectedOptions expandIcon={ArrowDownFilled} inputProps={{ 'aria-label': 'Select Employees' }}>
-	...
-</TagPicker>
+<TagPicker bind:selectedOptions expandIcon={ArrowDownFilled} inputAttributes={{ 'aria-label': 'Select Employees' }}
+	>...</TagPicker
+>
 
 <!-- No icon -->
-<TagPicker bind:selectedOptions expandIcon={null} inputProps={{ 'aria-label': 'Select Employees' }}>...</TagPicker>
+<TagPicker bind:selectedOptions expandIcon={null} inputAttributes={{ 'aria-label': 'Select Employees' }}>...</TagPicker>
 ```
 
 ### Filtering
@@ -123,7 +123,7 @@ The options are filtered as the user types, and the first match is highlighted s
 <TagPicker
 	bind:selectedOptions
 	notFoundText="We couldn't find any matches"
-	inputProps={{ 'aria-label': 'Select Employees' }}
+	inputAttributes={{ 'aria-label': 'Select Employees' }}
 >
 	{#each options as option (option)}
 		<TagPickerOption value={option}>{option}</TagPickerOption>
@@ -136,7 +136,7 @@ The options are filtered as the user types, and the first match is highlighted s
 Group options with `TagPickerOptionGroup`. A group with no option left on screen hides itself.
 
 ```svelte
-<TagPicker bind:selectedOptions inputProps={{ 'aria-label': 'Select Employees' }}>
+<TagPicker bind:selectedOptions inputAttributes={{ 'aria-label': 'Select Employees' }}>
 	<TagPickerOptionGroup label="Managers">
 		{#each managers as option (option)}
 			<TagPickerOption value={option}>{option}</TagPickerOption>
@@ -164,7 +164,7 @@ Leave out the options to get a TagPicker without a list, to let users enter thei
 	bind:selectedOptions
 	bind:value
 	placeholder="Type and press Enter"
-	inputProps={{ 'aria-label': 'Add Employees' }}
+	inputAttributes={{ 'aria-label': 'Add Employees' }}
 	querySubmitted={(e, query) => {
 		if (!selectedOptions.includes(query)) selectedOptions = [...selectedOptions, query];
 		value = '';
@@ -181,7 +181,7 @@ Add a button next to the dropdown arrow with the `secondaryAction` snippet.
 	<Button appearance="subtle" onclick={() => (selectedOptions = [])}>All Clear</Button>
 {/snippet}
 
-<TagPicker bind:selectedOptions secondaryAction={allClear} inputProps={{ 'aria-label': 'Select Employees' }}>
+<TagPicker bind:selectedOptions secondaryAction={allClear} inputAttributes={{ 'aria-label': 'Select Employees' }}>
 	{#each options as option (option)}
 		<TagPickerOption value={option}>{option}</TagPickerOption>
 	{/each}
@@ -193,7 +193,7 @@ Add a button next to the dropdown arrow with the `secondaryAction` snippet.
 With `single` a new choice replaces the current tag and closes the list.
 
 ```svelte
-<TagPicker single bind:selectedOptions inputProps={{ 'aria-label': 'Select Employee' }}>
+<TagPicker single bind:selectedOptions inputAttributes={{ 'aria-label': 'Select Employee' }}>
 	{#each options as option (option)}
 		<TagPickerOption value={option}>{option}</TagPickerOption>
 	{/each}
@@ -206,7 +206,7 @@ A TagPicker is `medium` by default, or `large` or `extra-large`. The size of the
 
 ```svelte
 {#each ['medium', 'large', 'extra-large'] as size}
-	<TagPicker {size} selectedOptions={[options[0]]} inputProps={{ 'aria-label': size }}>
+	<TagPicker {size} selectedOptions={[options[0]]} inputAttributes={{ 'aria-label': size }}>
 		{#each options as option (option)}
 			<TagPickerOption value={option}>{option}</TagPickerOption>
 		{/each}
@@ -220,10 +220,10 @@ A tag that is wider than the control, or than its own `max-width`, shortens its
 
 ```svelte
 {#snippet tag({ value, text })}
-	<Tag role="listitem" {value} title={text} style="max-width: 100px;">{text}</Tag>
+	<Tag {value} title={text} style="max-width: 100px;">{text}</Tag>
 {/snippet}
 
-<TagPicker bind:selectedOptions {tag} inputProps={{ 'aria-label': 'Select Employees' }}>
+<TagPicker bind:selectedOptions {tag} inputAttributes={{ 'aria-label': 'Select Employees' }}>
 	{#each [...longOptions, ...options] as option (option)}
 		<TagPickerOption value={option}>
 			<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">{option}</span>
@@ -232,32 +232,36 @@ A tag that is wider than the control, or than its own `max-width`, shortens its
 </TagPicker>
 ```
 
+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 (TagPicker)
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TagPickerProps -->
 
-| Name                                                | Type                                               | Default                  | Description                                                                                                                                                   |
-| --------------------------------------------------- | -------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_                                    | `HTMLDivElement`                                   |                          | The DOM reference of the wrapper element.                                                                                                                     |
-| `inputRef` _bindable_                               | `HTMLInputElement`                                 |                          | The DOM reference of the input element.                                                                                                                       |
-| `selectedOptions` _bindable_                        | `string[]`                                         | `[]`                     | The values of the chosen options, shown as tags in the control. A value no option has is shown as it is.                                                      |
-| `value` _bindable_                                  | `string`                                           | `''`                     | The text typed in the input. It filters the options, and is cleared when one is chosen.                                                                       |
-| `open` _bindable_                                   | `boolean`                                          | `false`                  | Controls the open state of the option list.                                                                                                                   |
-| `single`                                            | `boolean`                                          |                          | Limits the picker to one tag: choosing an option replaces the current one and closes the list.                                                                |
-| `disabled`                                          | `boolean`                                          |                          | Disables the user interaction: the input, the tags and the list.                                                                                              |
-| `size`                                              | `'medium'` &#124; `'large'` &#124; `'extra-large'` | `'medium'`               | The size of the control. It also picks the size of the tags.                                                                                                  |
-| `placeholder`                                       | `string`                                           |                          | The placeholder text of the input.                                                                                                                            |
-| `notFoundText`                                      | `string`                                           | `'No options available'` | The message shown in place of the list when there is no option left to choose.                                                                                |
-| `expandIcon`                                        | `Snippet` &#124; `Component` &#124; `null`         | `ChevronDownRegular`     | The dropdown arrow. Pass `null` to remove it.                                                                                                                 |
-| `secondaryAction`                                   | `Snippet`                                          |                          | A button-like element rendered at the end of the control, before the dropdown arrow.                                                                          |
-| `tag`                                               | `Snippet<[{ value: string; text: string }]>`       |                          | 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"`. |
-| `tagGroupProps`                                     | `TagGroupProps`                                    |                          | The props to spread on the group holding the tags. This is where its `aria-label` goes.                                                                       |
-| `inputProps`                                        | `HTMLInputAttributes`                              |                          | 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.                |
-| `onSelectionChange`                                 | `(e: Event, selectedOptions: string[]) => void`    |                          | Called when an option is chosen, or a tag is removed.                                                                                                         |
-| `querySubmitted`                                    | `(e: KeyboardEvent, query: 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.                                   |
-| `children`                                          | `Snippet`                                          |                          | The options. Leave it out to get a picker without a list.                                                                                                     |
-| `HTMLAttributes<HTMLDivElement>` without `children` |                                                    |                          |                                                                                                                                                               |
+| Name                                                                                                                                     | Type                                               | Default                  | Description                                                                                                                            |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `wrapperRef` _bindable_                                                                                                                  | `HTMLDivElement` &#124; `null`                     |                          | The DOM reference of the wrapper element.                                                                                              |
+| `ref` _bindable_                                                                                                                         | `HTMLSelectElement` &#124; `null`                  |                          | The DOM reference of the native multiple select that holds the selected options. The other attributes of the picker are applied to it. |
+| `inputRef` _bindable_                                                                                                                    | `HTMLInputElement` &#124; `null`                   |                          | The DOM reference of the text input.                                                                                                   |
+| `inputAttributes`                                                                                                                        | `HTMLInputAttributes`                              |                          | The attributes to spread on the text input.                                                                                            |
+| `selectedOptions` _bindable_                                                                                                             | `string[]`                                         | `[]`                     | The values of the chosen options, shown as tags in the control. A value no option has is shown as it is.                               |
+| `value` _bindable_                                                                                                                       | `string`                                           | `''`                     | The text typed in the input. It filters the options, and is cleared when one is chosen.                                                |
+| `open` _bindable_                                                                                                                        | `boolean`                                          | `false`                  | Controls the open state of the option list.                                                                                            |
+| `single`                                                                                                                                 | `boolean`                                          |                          | Limits the picker to one tag: choosing an option replaces the current one and closes the list.                                         |
+| `disabled`                                                                                                                               | `boolean`                                          |                          | Disables the user interaction: the input, the tags and the list.                                                                       |
+| `size`                                                                                                                                   | `'medium'` &#124; `'large'` &#124; `'extra-large'` | `'medium'`               | The size of the control. It also picks the size of the tags.                                                                           |
+| `placeholder`                                                                                                                            | `string`                                           |                          | The placeholder text of the input.                                                                                                     |
+| `notFoundText`                                                                                                                           | `string`                                           | `'No options available'` | The message shown in place of the list when there is no option left to choose.                                                         |
+| `expandIcon`                                                                                                                             | `Snippet` &#124; `Component` &#124; `null`         | `ChevronDownRegular`     | The dropdown arrow. Pass `null` to remove it.                                                                                          |
+| `secondaryAction`                                                                                                                        | `Snippet`                                          |                          | A button-like element rendered at the end of the control, before the dropdown arrow.                                                   |
+| `tag`                                                                                                                                    | `Snippet<[{ value: string; text: string }]>`       |                          | 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`. |
+| `tagGroupProps`                                                                                                                          | `TagGroupProps`                                    |                          | The props to spread on the group holding the tags. This is where its `aria-label` goes, `'Selected options'` by default.               |
+| `wrapperAttributes`                                                                                                                      | `HTMLAttributes`                                   |                          | The attributes to spread on the wrapper element.                                                                                       |
+| `onSelectionChange`                                                                                                                      | `(e: Event, selectedOptions: string[]) => void`    |                          | Called when an option is chosen, or a tag is removed.                                                                                  |
+| `querySubmitted`                                                                                                                         | `(e: KeyboardEvent, query: 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.            |
+| `children`                                                                                                                               | `Snippet`                                          |                          | The options. Leave it out to get a picker without a list.                                                                              |
+| `NativeFieldAttributes<Omit<HTMLSelectAttributes, 'value'` &#124; `'multiple'` &#124; `'size'` &#124; `'disabled'` &#124; `'children'>>` |                                                    |                          |                                                                                                                                        |
 
 <!-- /props:TagPickerProps -->
 
@@ -266,14 +270,14 @@ A tag that is wider than the control, or than its own `max-width`, shortens its
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TagPickerOptionProps -->
 
-| Name                                                                     | Type            | Default | Description                                                                                                          |
-| ------------------------------------------------------------------------ | --------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
-| `value`                                                                  | `string`        |         | The value added to `selectedOptions` when the option is chosen.                                                      |
-| `text`                                                                   | `string`        |         | The text the option is filtered by, and the text of its tag. Falls back to `value`.                                  |
-| `id`                                                                     | `string`        |         | The id of the option element, referenced by the input through `aria-activedescendant`. Falls back to a generated id. |
-| `ref` _bindable_                                                         | `HTMLLIElement` |         | The DOM reference of the option element.                                                                             |
-| `disabled`                                                               | `boolean`       |         | Takes the option out of reach: it is shown, but the cursor steps over it.                                            |
-| `ListViewItemProps<'li'>` without `as`, `value`, `onAction`, `checkmark` |                 |         |                                                                                                                      |
+| Name                                                                     | Type                          | Default | Description                                                                                                          |
+| ------------------------------------------------------------------------ | ----------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| `value`                                                                  | `string`                      |         | The value added to `selectedOptions` when the option is chosen.                                                      |
+| `text`                                                                   | `string`                      |         | The text the option is filtered by, and the text of its tag. Falls back to `value`.                                  |
+| `id`                                                                     | `string`                      |         | The id of the option element, referenced by the input 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 option out of reach: it is shown, but the cursor steps over it.                                            |
+| `ListViewItemProps<'li'>` without `as`, `value`, `onAction`, `checkmark` |                               |         |                                                                                                                      |
 
 <!-- /props:TagPickerOptionProps -->
 
@@ -282,11 +286,13 @@ A tag that is wider than the control, or than its own `max-width`, shortens its
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TagPickerOptionGroupProps -->
 
-| Name                                                  | Type               | Default | Description                             |
-| ----------------------------------------------------- | ------------------ | ------- | --------------------------------------- |
-| `label`                                               | `string`           |         | The label of the group.                 |
-| `ref` _bindable_                                      | `HTMLUListElement` |         | The DOM reference of the group element. |
-| `children`                                            | `Snippet`          |         | The options of the group.               |
-| `HTMLAttributes<HTMLUListElement>` without `children` |                    |         |                                         |
+| Name                                                  | Type                             | Default | Description                                      |
+| ----------------------------------------------------- | -------------------------------- | ------- | ------------------------------------------------ |
+| `label`                                               | `string`                         |         | The label of the group.                          |
+| `ref` _bindable_                                      | `HTMLUListElement` &#124; `null` |         | The DOM reference of the group element.          |
+| `children`                                            | `Snippet`                        |         | The options of the group.                        |
+| `wrapperAttributes`                                   | `HTMLAttributes`                 |         | The attributes to spread on the wrapper element. |
+| `wrapperRef` _bindable_                               | `HTMLLIElement` &#124; `null`    |         | The DOM reference of the wrapper element.        |
+| `HTMLAttributes<HTMLUListElement>` without `children` |                                  |         |                                                  |
 
 <!-- /props:TagPickerOptionGroupProps -->

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

@@ -5,12 +5,25 @@
 	const FALLBACK_ID = $props.id();
 	const LABEL_ID = `${PREFIX}-tagpicker-group-${FALLBACK_ID}-label`;
 
-	let { label, ref = $bindable(), class: classes, children, ...attributes }: TagPickerOptionGroupProps = $props();
+	let {
+		label,
+		ref = $bindable(null),
+		class: classes,
+		children,
+		wrapperAttributes,
+		wrapperRef = $bindable(null),
+		...attributes
+	}: TagPickerOptionGroupProps = $props();
 </script>
 
-<li class="fs-tagpicker-group" role="presentation">
+<li
+	{...wrapperAttributes}
+	class={['fs-tagpicker-group', wrapperAttributes?.class]}
+	role="presentation"
+	bind:this={wrapperRef}
+>
 	<span class="fs-tagpicker-group-label" id={LABEL_ID}>{label}</span>
-	<ul bind:this={ref} class={classes} role="group" aria-labelledby={LABEL_ID} {...attributes}>
+	<ul {...attributes} class={classes} role="group" aria-labelledby={LABEL_ID} bind:this={ref}>
 		{@render children?.()}
 	</ul>
 </li>
@@ -18,7 +31,7 @@
 <style>
 	.fs-tagpicker-group {
 		list-style: none;
-		/* A group left without an option on screen hides itself. */
+		/* A group left without an option on screen hides itself. F*/
 		&:not(:has(:global(.fs-tagpicker-option))) {
 			display: none;
 		}

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

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

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { PREFIX } from '../../internal/constants.js';
 	import ListViewItem from '../list-view/list-view-item.svelte';
 	import { getTagPickerContext } from './tag-picker.js';
@@ -9,7 +10,7 @@
 
 	let {
 		disabled,
-		ref = $bindable(),
+		ref = $bindable(null),
 		id = ID,
 		value,
 		text,
@@ -37,8 +38,18 @@
 		if (!disabled) methods.chooseOption(e, id);
 	}
 
-	// The tag of the option keeps its text even when the option itself is not on screen.
-	$effect(() => methods.setLabel(value, label));
+	// The tag of the option keeps its text even when the option itself is not on screen. It is
+	// reported as the option is created, ahead of the tags, so the server writes it too.
+	const withdraw = methods.registerLabel({
+		get value() {
+			return value;
+		},
+		get text() {
+			return label;
+		}
+	});
+
+	onMount(() => withdraw);
 
 	// An option counts only while it is on screen: that is what makes the empty list detectable
 	// and keeps keyboard navigation off options nobody can see.
@@ -56,6 +67,7 @@
 
 {#if isVisible}
 	<ListViewItem
+		{...attributes}
 		{id}
 		role="option"
 		{value}
@@ -63,7 +75,6 @@
 		class={['fs-tagpicker-option', classes]}
 		bind:ref
 		{disabled}
-		{...attributes}
 		onclick={handleClick}
 	>
 		{@render children?.()}