fluentui-svelte 0.6.0 → 0.7.0

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

@@ -135,7 +135,7 @@ Other components that can be used within the table include:
 		<TableRow>
 			<TableSelectionCell
 				checked={allSelected ? true : someSelected ? 'mixed' : false}
-				checkboxIndicator={{ 'aria-label': 'Select all rows' }}
+				checkboxProps={{ 'aria-label': 'Select all rows' }}
 				onclick={() => (selected = allSelected ? [] : items.map((item) => item.file))}
 			/>
 			<TableHeaderCell>File</TableHeaderCell>
@@ -149,7 +149,7 @@ Other components that can be used within the table include:
 				appearance={isSelected ? 'brand' : 'none'}
 				onclick={() => toggleRow(item.file)}
 			>
-				<TableSelectionCell checked={isSelected} checkboxIndicator={{ 'aria-label': 'Select row' }} />
+				<TableSelectionCell checked={isSelected} checkboxProps={{ 'aria-label': 'Select row' }} />
 				<TableCell>{item.file}</TableCell>
 			</TableRow>
 		{/each}
@@ -177,11 +177,7 @@ Set `type="radio"` on the selection cell when only one row can be selected at a
 		{#each items as item (item.file)}
 			{@const isPicked = picked === item.file}
 			<TableRow aria-selected={isPicked} appearance={isPicked ? 'brand' : 'none'} onclick={() => (picked = item.file)}>
-				<TableSelectionCell
-					type="radio"
-					checked={isPicked}
-					radioIndicator={{ name: 'file', 'aria-label': 'Select row' }}
-				/>
+				<TableSelectionCell type="radio" checked={isPicked} radioProps={{ name: 'file', 'aria-label': 'Select row' }} />
 				<TableCell>{item.file}</TableCell>
 			</TableRow>
 		{/each}
@@ -195,7 +191,7 @@ Set `type="radio"` on the selection cell when only one row can be selected at a
 
 ```svelte
 <TableRow aria-selected={isSelected} appearance={isSelected ? 'brand' : 'none'} onclick={() => toggleSubtle(item.file)}>
-	<TableSelectionCell subtle checked={isSelected} checkboxIndicator={{ 'aria-label': 'Select row' }} />
+	<TableSelectionCell subtle checked={isSelected} checkboxProps={{ 'aria-label': 'Select row' }} />
 	<TableCell>{item.file}</TableCell>
 </TableRow>
 ```
@@ -356,6 +352,15 @@ The table renders whatever you put inside it, so any virtualization library work
 	import SvelteVirtualList from '@humanspeak/svelte-virtual-list';
 
 	const rows = Array.from({ length: 2000 }, (_, i) => ({ id: i, file: `Document ${i + 1}` }));
+
+	// The virtualizer names its viewport a region, which a rowgroup cannot hold between itself and its rows.
+	const presentational = (node) => {
+		const region = node.querySelector('[role="region"]');
+		region?.setAttribute('role', 'none');
+		// A name or a tab stop would keep the role. The rows are reached with the arrow keys of the table.
+		region?.removeAttribute('aria-label');
+		region?.removeAttribute('tabindex');
+	};
 </script>
 
 <Table noNativeElements style="min-width: 520px;" aria-label="Virtualized table" aria-rowcount={rows.length + 1}>
@@ -364,7 +369,7 @@ The table renders whatever you put inside it, so any virtualization library work
 			<TableHeaderCell>File</TableHeaderCell>
 		</TableRow>
 	</TableHeader>
-	<TableBody style="height: 320px;">
+	<TableBody style="height: 320px;" {@attach presentational}>
 		<SvelteVirtualList items={rows} defaultEstimatedItemHeight={44}>
 			{#snippet renderItem(row, index)}
 				<TableRow aria-rowindex={index + 2}>
@@ -487,17 +492,17 @@ The table renders whatever you put inside it, so any virtualization library work
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TableSelectionCellProps -->
 
-| Name                | Type                                           | Default      | Description                                                                    |
-| ------------------- | ---------------------------------------------- | ------------ | ------------------------------------------------------------------------------ |
-| `as`                | `'td'` &#124; `'div'`                          | `'td'`       | The HTML element to render the cell as. Inherited from the table by default.   |
-| `ref` _bindable_    | `HTMLTableCellElement` &#124; `HTMLDivElement` |              | The DOM reference of the cell element.                                         |
-| `type`              | `'checkbox'` &#124; `'radio'`                  | `'checkbox'` | A table can have two kinds of selection modes.                                 |
-| `checked`           | `boolean` &#124; `'mixed'`                     | `false`      | Whether the row is selected. `'mixed'` renders the indeterminate state.        |
-| `subtle`            | `boolean`                                      | `false`      | Only shows the indicator when it is checked, or the row is hovered or focused. |
-| `invisible`         | `boolean`                                      | `false`      | Hides the indicator while it keeps taking up the same space.                   |
-| `checkboxIndicator` | `CheckboxProps`                                |              | The props to spread on the checkbox rendered when `type` is `'checkbox'`.      |
-| `radioIndicator`    | `RadioButtonProps`                             |              | The props to spread on the radio button rendered when `type` is `'radio'`.     |
-| HTML Attributes     |                                                |              |                                                                                |
+| Name             | Type                                           | Default      | Description                                                                    |
+| ---------------- | ---------------------------------------------- | ------------ | ------------------------------------------------------------------------------ |
+| `as`             | `'td'` &#124; `'div'`                          | `'td'`       | The HTML element to render the cell as. Inherited from the table by default.   |
+| `ref` _bindable_ | `HTMLTableCellElement` &#124; `HTMLDivElement` |              | The DOM reference of the cell element.                                         |
+| `type`           | `'checkbox'` &#124; `'radio'`                  | `'checkbox'` | A table can have two kinds of selection modes.                                 |
+| `checked`        | `boolean` &#124; `'mixed'`                     | `false`      | Whether the row is selected. `'mixed'` renders the indeterminate state.        |
+| `subtle`         | `boolean`                                      | `false`      | Only shows the indicator when it is checked, or the row is hovered or focused. |
+| `invisible`      | `boolean`                                      | `false`      | Hides the indicator while it keeps taking up the same space.                   |
+| `checkboxProps`  | `CheckboxProps`                                |              | The props to spread on the checkbox rendered when `type` is `'checkbox'`.      |
+| `radioProps`     | `RadioButtonProps`                             |              | The props to spread on the radio button rendered when `type` is `'radio'`.     |
+| HTML Attributes  |                                                |              |                                                                                |
 
 <!-- /props:TableSelectionCellProps -->
 
@@ -506,14 +511,14 @@ The table renders whatever you put inside it, so any virtualization library work
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TableCellLayoutProps -->
 
-| Name             | Type                         | Default | Description                                                                    |
-| ---------------- | ---------------------------- | ------- | ------------------------------------------------------------------------------ |
-| `ref` _bindable_ | `HTMLDivElement`             |         | The DOM reference of the layout element.                                       |
-| `media`          | `Snippet` &#124; `Component` |         | An icon, an avatar or any other visual element placed before the main content. |
-| `description`    | `string`                     |         | A second line of text that describes or complements the main content.          |
-| `appearance`     | `'primary'`                  |         | Emphasizes the cell by enlarging the media and bolding the main content.       |
-| `truncate`       | `boolean`                    |         | Clips the content with an ellipsis instead of letting it wrap.                 |
-| HTML Attributes  |                              |         |                                                                                |
+| Name             | Type                           | Default | Description                                                                    |
+| ---------------- | ------------------------------ | ------- | ------------------------------------------------------------------------------ |
+| `ref` _bindable_ | `HTMLDivElement` &#124; `null` |         | The DOM reference of the layout element.                                       |
+| `media`          | `Snippet` &#124; `Component`   |         | An icon, an avatar or any other visual element placed before the main content. |
+| `description`    | `string`                       |         | A second line of text that describes or complements the main content.          |
+| `appearance`     | `'primary'`                    |         | Emphasizes the cell by enlarging the media and bolding the main content.       |
+| `truncate`       | `boolean`                      |         | Clips the content with an ellipsis instead of letting it wrap.                 |
+| HTML Attributes  |                                |         |                                                                                |
 
 <!-- /props:TableCellLayoutProps -->
 
@@ -522,10 +527,10 @@ The table renders whatever you put inside it, so any virtualization library work
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TableCellActionsProps -->
 
-| Name             | Type             | Default | Description                                                                          |
-| ---------------- | ---------------- | ------- | ------------------------------------------------------------------------------------ |
-| `ref` _bindable_ | `HTMLDivElement` |         | The DOM reference of the actions element.                                            |
-| `visible`        | `boolean`        |         | Keeps the actions on screen instead of waiting for the row to be hovered or focused. |
-| HTML Attributes  |                  |         |                                                                                      |
+| Name             | Type                           | Default | Description                                                                          |
+| ---------------- | ------------------------------ | ------- | ------------------------------------------------------------------------------------ |
+| `ref` _bindable_ | `HTMLDivElement` &#124; `null` |         | The DOM reference of the actions element.                                            |
+| `visible`        | `boolean`                      |         | Keeps the actions on screen instead of waiting for the row to be hovered or focused. |
+| HTML Attributes  |                                |         |                                                                                      |
 
 <!-- /props:TableCellActionsProps -->

package/dist/components/table/table-body.svelte

@@ -2,7 +2,7 @@
 	import { getTag, requireTableContext } from './table.svelte.js';
 	import type { TableBodyProps, TableDOM } from './types.js';
 
-	let { as, ref = $bindable(), class: classes, children, ...attributes }: TableBodyProps<Tag> = $props();
+	let { as, ref = $bindable(null), class: classes, children, ...attributes }: TableBodyProps<Tag> = $props();
 
 	const context = requireTableContext();
 
@@ -13,10 +13,10 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={_as === 'div' ? 'rowgroup' : undefined}
 	class={['fs-table-body', { flex: _as === 'div' }, classes]}
-	{...attributes}
 >
 	{@render children?.()}
 </svelte:element>

package/dist/components/table/table-cell-actions.svelte

@@ -2,7 +2,13 @@
 	import { requireTableContext } from './table.svelte.js';
 	import type { TableCellActionsProps } from './types.js';
 
-	let { ref = $bindable(), visible = false, class: classes, children, ...attributes }: TableCellActionsProps = $props();
+	let {
+		ref = $bindable(null),
+		visible = false,
+		class: classes,
+		children,
+		...attributes
+	}: TableCellActionsProps = $props();
 
 	requireTableContext();
 </script>
@@ -21,7 +27,7 @@
 	</TableCell>
 	```
 -->
-<div bind:this={ref} class={['fs-table-cell-actions', { visible }, classes]} {...attributes}>
+<div {...attributes} bind:this={ref} class={['fs-table-cell-actions', { visible }, classes]}>
 	{@render children?.()}
 </div>
 

package/dist/components/table/table-cell-layout.svelte

@@ -3,7 +3,7 @@
 	import type { TableCellLayoutProps } from './types.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		media: Media,
 		description,
 		appearance,
@@ -25,7 +25,7 @@
 	</TableCell>
 	```
 -->
-<div bind:this={ref} class={['fs-table-cell-layout', appearance, { truncate }, classes]} {...attributes}>
+<div {...attributes} bind:this={ref} class={['fs-table-cell-layout', appearance, { truncate }, classes]}>
 	{#if Media}
 		<span class="media">
 			<RenderSoC SoC={Media} args={{ class: 'fs-table-cell-media' }} />

package/dist/components/table/table-cell.svelte

@@ -4,7 +4,7 @@
 
 	let {
 		as,
-		ref = $bindable(),
+		ref = $bindable(null),
 		focusMode = 'cell',
 		class: classes,
 		children,
@@ -36,6 +36,7 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={enableTabspot ? 'gridcell' : _as === 'div' ? 'cell' : undefined}
 	data-fs-focus-mode={enableTabspot ? focusMode : undefined}
@@ -43,7 +44,6 @@
 	style:width={width === undefined ? undefined : `${width}px`}
 	{@attach enableTabspot || resizableColumns ? colIndex((i) => (index = i)) : undefined}
 	{@attach enableTabspot && focusMode === 'group' ? focusGroup : undefined}
-	{...attributes}
 >
 	{@render children?.()}
 </svelte:element>

package/dist/components/table/table-header-cell.svelte

@@ -7,7 +7,7 @@
 
 	let {
 		as,
-		ref = $bindable(),
+		ref = $bindable(null),
 		sortable,
 		sortDirection,
 		sortIcon,
@@ -87,6 +87,7 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={_as === 'div' ? 'columnheader' : undefined}
 	scope={_as === 'th' ? 'col' : undefined}
@@ -96,7 +97,6 @@
 	style:width={width === undefined ? undefined : `${width}px`}
 	{@attach enableTabspot || _resizable ? colIndex((i) => (index = i)) : undefined}
 	{@attach enableTabspot && _focusMode === 'group' ? focusGroup : undefined}
-	{...attributes}
 >
 	<span class="inner">
 		{#if _sortable}

package/dist/components/table/table-header.svelte

@@ -2,7 +2,7 @@
 	import { getTag, requireTableContext } from './table.svelte.js';
 	import type { TableDOM, TableHeaderProps } from './types.js';
 
-	let { as, ref = $bindable(), class: classes, children, ...attributes }: TableHeaderProps<Tag> = $props();
+	let { as, ref = $bindable(null), class: classes, children, ...attributes }: TableHeaderProps<Tag> = $props();
 
 	const context = requireTableContext();
 
@@ -13,10 +13,10 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={_as === 'div' ? 'rowgroup' : undefined}
 	class={['fs-table-header', classes]}
-	{...attributes}
 >
 	{@render children?.()}
 </svelte:element>

package/dist/components/table/table-row.svelte

@@ -4,7 +4,7 @@
 
 	let {
 		as,
-		ref = $bindable(),
+		ref = $bindable(null),
 		appearance = 'none',
 		class: classes,
 		onclick,
@@ -21,12 +21,12 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={_as === 'div' ? 'row' : undefined}
 	class={['fs-table-row', appearance, { flex: _as === 'div' }, classes]}
 	{@attach onclick ? selectOnSpace : undefined}
 	{onclick}
-	{...attributes}
 >
 	{@render children?.()}
 </svelte:element>

package/dist/components/table/table-selection-cell.svelte

@@ -6,13 +6,13 @@
 
 	let {
 		as,
-		ref = $bindable(),
+		ref = $bindable(null),
 		type = 'checkbox',
 		checked = false,
 		subtle = false,
 		invisible = false,
-		checkboxIndicator,
-		radioIndicator,
+		checkboxProps,
+		radioProps,
 		class: classes,
 		onclick,
 		...attributes
@@ -30,22 +30,22 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={enableTabspot ? 'gridcell' : _as === 'div' ? 'cell' : undefined}
 	class={['fs-table-selection-cell', { flex: _as === 'div', subtle, invisible, checked: !!checked }, classes]}
 	{@attach enableTabspot ? colIndex() : undefined}
 	{@attach onclick ? selectOnSpace : undefined}
 	{onclick}
-	{...attributes}
 >
 	<!--
 		The indicator answers the pointer itself, and the click still reaches the row underneath, so
 		hitting it selects the row rather than only ticking a box the consumer never hears about.
 	-->
 	{#if type === 'radio'}
-		<RadioButton checked={checked === true} {...radioIndicator} />
+		<RadioButton {...radioProps} checked={checked === true} />
 	{:else}
-		<Checkbox wrapperAs="div" checked={checked === true} indeterminate={checked === 'mixed'} {...checkboxIndicator} />
+		<Checkbox {...checkboxProps} checked={checked === true} indeterminate={checked === 'mixed'} />
 	{/if}
 </svelte:element>
 

package/dist/components/table/table.svelte

@@ -6,7 +6,7 @@
 
 	let {
 		as,
-		ref = $bindable(),
+		ref = $bindable(null),
 		size = 'medium',
 		noNativeElements = false,
 		sortable = false,
@@ -131,6 +131,7 @@
 -->
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TableDOM[Tag]}
 	role={enableTabspot ? 'grid' : _as === 'div' ? 'table' : undefined}
 	class={[
@@ -140,7 +141,6 @@
 		classes
 	]}
 	{...tabspotAttributes}
-	{...attributes}
 >
 	{@render children?.()}
 </svelte:element>

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

@@ -28,7 +28,7 @@ export type TableProps<Tag extends 'table' | 'div' = 'table'> = {
      * @type HTMLTableElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
     /** Affects the sizes of all table subcomponents.
      * @default 'medium'
      */
@@ -102,7 +102,7 @@ export type TableHeaderProps<Tag extends 'thead' | 'div' = 'thead'> = {
      * @type HTMLTableSectionElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
 } & PolymorphicProps<Tag>;
 /** @propsmith TableHeaderCellProps */
 export type TableHeaderCellProps<Tag extends 'th' | 'div' = 'th'> = {
@@ -115,7 +115,7 @@ export type TableHeaderCellProps<Tag extends 'th' | 'div' = 'th'> = {
      * @type HTMLTableCellElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
     /** Whether the column is sortable. Inherited from the table by default. */
     sortable?: boolean;
     /** The direction the column is currently sorted in. Also sets `aria-sort`. */
@@ -162,7 +162,7 @@ export type TableBodyProps<Tag extends 'tbody' | 'div' = 'tbody'> = {
      * @type HTMLTableSectionElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
 } & PolymorphicProps<Tag>;
 /** @propsmith TableRowProps */
 export type TableRowProps<Tag extends 'tr' | 'div' = 'tr'> = {
@@ -175,7 +175,7 @@ export type TableRowProps<Tag extends 'tr' | 'div' = 'tr'> = {
      * @type HTMLTableRowElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
     /** How the row is filled. Intended to mark a selected row.
      * @default 'none'
      */
@@ -192,7 +192,7 @@ export type TableCellProps<Tag extends 'td' | 'div' = 'td'> = {
      * @type HTMLTableCellElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
     /** How the arrow keys treat the cell. `'group'` holds the focusable content of the cell out of
      * the tab order until `Enter` steps in, and `Escape` steps back out. `'none'` skips the cell
      * altogether. Only read when the table sets `enableTabspot`.
@@ -211,7 +211,7 @@ export type TableSelectionCellProps<Tag extends 'td' | 'div' = 'td'> = {
      * @type HTMLTableCellElement | HTMLDivElement
      * @bindable
      */
-    ref?: TableDOM[Tag] | HTMLDivElement;
+    ref?: TableDOM[Tag] | HTMLDivElement | null;
     /** A table can have two kinds of selection modes.
      * @default 'checkbox'
      */
@@ -232,18 +232,18 @@ export type TableSelectionCellProps<Tag extends 'td' | 'div' = 'td'> = {
     /** The props to spread on the checkbox rendered when `type` is `'checkbox'`.
      * @type CheckboxProps
      */
-    checkboxIndicator?: Omit<CheckboxProps<'div'>, 'wrapperAs' | 'checked' | 'indeterminate' | 'children'>;
+    checkboxProps?: Omit<CheckboxProps, 'checked' | 'indeterminate' | 'children'>;
     /** The props to spread on the radio button rendered when `type` is `'radio'`.
      * @type RadioButtonProps
      */
-    radioIndicator?: Omit<RadioButtonProps, 'checked' | 'group'>;
+    radioProps?: Omit<RadioButtonProps, 'checked' | 'group'>;
 } & PolymorphicProps<Tag>;
 /** @propsmith TableCellLayoutProps */
 export type TableCellLayoutProps = {
     /** The DOM reference of the layout element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** An icon, an avatar or any other visual element placed before the main content.
      * @type Snippet | Component
      */
@@ -264,7 +264,7 @@ export type TableCellActionsProps = {
     /** The DOM reference of the actions element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** Keeps the actions on screen instead of waiting for the row to be hovered or focused. */
     visible?: boolean;
 } & PolymorphicProps<'div'>;

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

@@ -79,7 +79,7 @@ Tell screen readers about the dismiss action. Either let the dismiss icon name t
 
 ### Interactive (primary action)
 
-An interactive tag has a primary action (`onclick`) and, when it is dismissible, a secondary one that dismisses it. The dismiss button is named after both buttons, "Primary text Dismiss", through `aria-labelledby`. Use `primaryProps` and `dismissProps` to reach the buttons: a custom `id` on the primary button is followed by the dismiss button, and `aria-label` together with `aria-labelledby: undefined` gives the dismiss button a name that stands on its own.
+An interactive tag has a primary action (`onclick`) and, when it is dismissible, a secondary one that dismisses it. The dismiss button is named after both buttons, "Primary text Dismiss", through `aria-labelledby`. Use `primaryButtonAttributes` and `dismissButtonAttributes` to reach the buttons: a custom `id` on the primary button is followed by the dismiss button, and `aria-label` together with `aria-labelledby: undefined` gives the dismiss button a name that stands on its own.
 
 ```svelte
 <script>
@@ -88,7 +88,7 @@ An interactive tag has a primary action (`onclick`) and, when it is dismissible,
 
 <Tag interactive dismissible onclick={() => clicks++}>Clicked {clicks} times</Tag>
 <Tag interactive>Without dismiss</Tag>
-<Tag interactive dismissible dismissProps={{ 'aria-label': 'Remove Tag', 'aria-labelledby': undefined }}>
+<Tag interactive dismissible dismissButtonAttributes={{ 'aria-label': 'Remove Tag', 'aria-labelledby': undefined }}>
 	Own accessible name
 </Tag>
 <Button disabled={clicks === 0} onclick={() => (clicks = 0)}>Reset the example</Button>
@@ -185,29 +185,29 @@ A tag supports `medium`, `small` and `extra-small` sizes. The default is `medium
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:TagProps -->
 
-| Name             | Type                                                            | Default          | Description                                                                                                                                                                                                                                |
-| ---------------- | --------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `appearance`     | `'filled'` &#124; `'outline'` &#124; `'brand'`                  | `'filled'`       | The tag can have a filled, outlined or brand appearance. Falls back to the `appearance` of the `TagGroup` it is in.                                                                                                                        |
-| `size`           | `'extra-small'` &#124; `'small'` &#124; `'medium'`              | `'medium'`       | The tag comes in three sizes. Falls back to the `size` of the `TagGroup` it is in.                                                                                                                                                         |
-| `shape`          | `'circular'` &#124; `'rounded'` &#124; `'square'`               | `'circular'`     | The tag can have a circular, rounded or square shape.                                                                                                                                                                                      |
-| `disabled`       | `boolean`                                                       | `false`          | Shows that the tag cannot be interacted with. A tag inside a disabled `TagGroup` is disabled too.                                                                                                                                          |
-| `selected`       | `boolean`                                                       | `false`          | Paints the tag as selected. Inside a `TagGroup` an interactive tag takes its selected state from the `selectedValues` of the group instead.                                                                                                |
-| `dismissible`    | `boolean`                                                       | `false`          | Shows a dismiss icon and lets the tag be dismissed. Falls back to the `dismissible` of the `TagGroup` it is in. A tag that is not interactive becomes a single button: activating it, or pressing Delete or Backspace on it, dismisses it. |
-| `interactive`    | `boolean`                                                       | `false`          | Renders the tag as an interaction tag: a primary button that carries the action, followed, when the tag is dismissible, by a separate dismiss button. Use it for a tag that has a primary action, and a plain tag for one that does not.   |
-| `value`          | `string`                                                        |                  | Identifies the tag inside a `TagGroup`. It is what `onDismiss` and `onTagSelect` report. Falls back to a generated id.                                                                                                                     |
-| `icon`           | `Snippet` &#124; `Component`                                    |                  | An icon rendered before the text. Do not use it together with `media`.                                                                                                                                                                     |
-| `media`          | `Snippet` &#124; `Component`                                    |                  | A visual element rendered before the text, usually an `Avatar`. Do not use it together with `icon`.                                                                                                                                        |
-| `secondaryText`  | `string` &#124; `Snippet`                                       |                  | A second line of text that describes or complements the main text.                                                                                                                                                                         |
-| `dismissIcon`    | `Snippet` &#124; `Component`                                    | `DismissRegular` | The icon of the dismiss control.                                                                                                                                                                                                           |
-| `dismissLabel`   | `string`                                                        | `'Dismiss'`      | The accessible name of the dismiss control. When the tag is named through `aria-label` or `aria-labelledby` instead, the dismiss icon is hidden from assistive technologies.                                                               |
-| `onDismiss`      | `(e: MouseEvent` &#124; `KeyboardEvent, value: string) => void` |                  | Called when the tag is dismissed. The consumer owns the data: the tag does not remove itself.                                                                                                                                              |
-| `onclick`        | `(e: MouseEvent) => void`                                       |                  | Called when the tag is activated. On an interactive tag it is the click of the primary button.                                                                                                                                             |
-| `onkeydown`      | `(e: KeyboardEvent) => void`                                    |                  | Called when a key is pressed on the tag.                                                                                                                                                                                                   |
-| `primaryProps`   | `Omit<HTMLButtonAttributes, 'children'` &#124; `'onclick'>`     |                  | 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.                                                                                  |
-| `dismissProps`   | `Omit<HTMLButtonAttributes, 'children'` &#124; `'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.                                                                     |
-| `children`       | `Snippet`                                                       |                  | The primary text of the tag.                                                                                                                                                                                                               |
-| `ref` _bindable_ | `HTMLElement`                                                   |                  | The DOM reference of the tag element.                                                                                                                                                                                                      |
-| HTML Attributes  |                                                                 |                  |                                                                                                                                                                                                                                            |
+| Name                      | Type                                                            | Default          | Description                                                                                                                                                                                                                                |
+| ------------------------- | --------------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `appearance`              | `'filled'` &#124; `'outline'` &#124; `'brand'`                  | `'filled'`       | The tag can have a filled, outlined or brand appearance. Falls back to the `appearance` of the `TagGroup` it is in.                                                                                                                        |
+| `size`                    | `'extra-small'` &#124; `'small'` &#124; `'medium'`              | `'medium'`       | The tag comes in three sizes. Falls back to the `size` of the `TagGroup` it is in.                                                                                                                                                         |
+| `shape`                   | `'circular'` &#124; `'rounded'` &#124; `'square'`               | `'circular'`     | The tag can have a circular, rounded or square shape.                                                                                                                                                                                      |
+| `disabled`                | `boolean`                                                       | `false`          | Shows that the tag cannot be interacted with. A tag inside a disabled `TagGroup` is disabled too.                                                                                                                                          |
+| `selected`                | `boolean`                                                       | `false`          | Paints the tag as selected. Inside a `TagGroup` an interactive tag takes its selected state from the `selectedValues` of the group instead.                                                                                                |
+| `dismissible`             | `boolean`                                                       | `false`          | Shows a dismiss icon and lets the tag be dismissed. Falls back to the `dismissible` of the `TagGroup` it is in. A tag that is not interactive becomes a single button: activating it, or pressing Delete or Backspace on it, dismisses it. |
+| `interactive`             | `boolean`                                                       | `false`          | Renders the tag as an interaction tag: a primary button that carries the action, followed, when the tag is dismissible, by a separate dismiss button. Use it for a tag that has a primary action, and a plain tag for one that does not.   |
+| `value`                   | `string`                                                        |                  | Identifies the tag inside a `TagGroup`. It is what `onDismiss` and `onTagSelect` report. Falls back to a generated id.                                                                                                                     |
+| `icon`                    | `Snippet` &#124; `Component`                                    |                  | An icon rendered before the text. Do not use it together with `media`.                                                                                                                                                                     |
+| `media`                   | `Snippet` &#124; `Component`                                    |                  | A visual element rendered before the text, usually an `Avatar`. Do not use it together with `icon`.                                                                                                                                        |
+| `secondaryText`           | `string` &#124; `Snippet`                                       |                  | A second line of text that describes or complements the main text.                                                                                                                                                                         |
+| `dismissIcon`             | `Snippet` &#124; `Component`                                    | `DismissRegular` | The icon of the dismiss control.                                                                                                                                                                                                           |
+| `dismissLabel`            | `string`                                                        | `'Dismiss'`      | The accessible name of the dismiss control. When the tag is named through `aria-label` or `aria-labelledby` instead, the dismiss icon is hidden from assistive technologies.                                                               |
+| `onDismiss`               | `(e: MouseEvent` &#124; `KeyboardEvent, value: string) => void` |                  | Called when the tag is dismissed. The consumer owns the data: the tag does not remove itself.                                                                                                                                              |
+| `onclick`                 | `(e: MouseEvent) => void`                                       |                  | Called when the tag is activated. On an interactive tag it is the click of the primary button.                                                                                                                                             |
+| `onkeydown`               | `(e: KeyboardEvent) => void`                                    |                  | Called when a key is pressed on the tag.                                                                                                                                                                                                   |
+| `primaryButtonAttributes` | `HTMLButtonAttributes`                                          |                  | 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.                                                                                  |
+| `dismissButtonAttributes` | `HTMLButtonAttributes`                                          |                  | 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.                                                                     |
+| `children`                | `Snippet`                                                       |                  | The primary text of the tag.                                                                                                                                                                                                               |
+| `ref` _bindable_          | `HTMLElement` &#124; `null`                                     |                  | The DOM reference of the tag element.                                                                                                                                                                                                      |
+| HTML Attributes           |                                                                 |                  |                                                                                                                                                                                                                                            |
 
 <!-- /props:TagProps -->
 
@@ -377,7 +377,7 @@ A group can set the default size of all its tags. It supports `medium`, `small`
 | `onDismiss`                 | `(e: MouseEvent` &#124; `KeyboardEvent, data: { value: string }) => void` |             | Called when a tag of the group is dismissed. The consumer owns the data: the group does not remove the tag.    |
 | `role`                      | `HTMLAttributes<HTMLDivElement>['role']`                                  | `'toolbar'` | The role of the group. Use `list` together with `role="listitem"` on each tag when none of them is actionable. |
 | `children`                  | `Snippet`                                                                 |             | The tags of the group.                                                                                         |
-| `ref` _bindable_            | `HTMLDivElement`                                                          |             | The DOM reference of the group element.                                                                        |
+| `ref` _bindable_            | `HTMLDivElement` &#124; `null`                                            |             | The DOM reference of the group element.                                                                        |
 | HTML Attributes             |                                                                           |             |                                                                                                                |
 
 <!-- /props:TagGroupProps -->

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

@@ -15,7 +15,7 @@
 		onDismiss,
 		role = 'toolbar',
 		class: classes,
-		ref = $bindable(),
+		ref = $bindable(null),
 		children,
 		...attributes
 	}: TagGroupProps = $props();
@@ -97,7 +97,7 @@
 		</TagGroup>
 		```
 -->
-<div bind:this={ref} class={['fs-tag-group', size ?? 'medium', classes]} {role} {...tabspotAttrs} {...attributes}>
+<div {...attributes} bind:this={ref} class={['fs-tag-group', size ?? 'medium', classes]} {role} {...tabspotAttrs}>
 	{@render children?.()}
 </div>