fluentui-svelte 0.5.0 → 0.7.0

package/dist/components/tab-view/tab-view-tab.svelte

@@ -7,7 +7,7 @@
 	const ID = $props.id();
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		value = `${COMPONENT_NAME}-${ID}`,
 		icon,
 		closable,
@@ -37,9 +37,9 @@
 	 * That costs the keys a button would have answered on its own, so they are handled here:
 	 * `Enter`/`Space` select, and `Delete` closes — the tabs pattern reserves it for exactly that.
 	 *
-	 * The close button is held out of the tab order, so the strip stays a single tab stop. `Delete`
-	 * is what reaches it from the keyboard, which is why the key is bound even while the pointer
-	 * has a button of its own.
+	 * The close button is for the pointer only: a tab cannot hold a control of its own, so it is
+	 * hidden from assistive technology and out of the tab order. `Delete` is what closes the tab
+	 * from the keyboard, and `aria-keyshortcuts` announces it.
 	 */
 	const onTabKeydown = (event: KeyboardEvent) => {
 		// A key spent inside the close button is already answered; only the tab itself speaks here.
@@ -73,16 +73,17 @@
 	```
 -->
 <div
+	{...attributes}
 	bind:this={ref}
 	role="tab"
 	tabindex={disabled ? -1 : 0}
 	data-value={value}
 	aria-selected={active}
 	aria-disabled={disabled || undefined}
+	aria-keyshortcuts={_closable ? 'Delete' : undefined}
 	class={['fs-tab-view-tab', context.config.tabWidthMode, { active, disabled }, classes]}
 	onclick={(e: MouseEvent) => invokeHandlers(e, disabled, [() => context.methods.setActiveTab(e, value), onclick])}
 	onkeydown={(e: KeyboardEvent) => invokeHandlers(e, disabled, [onTabKeydown, onkeydown])}
-	{...attributes}
 >
 	{#if icon}
 		<span class="fs-tab-view-tab-icon">
@@ -91,20 +92,17 @@
 	{/if}
 	<span class="fs-tab-view-tab-label">{@render children?.()}</span>
 	{#if _closable}
-		<button
-			type="button"
+		<span
 			class="fs-tab-view-tab-close"
-			aria-label="Close tab"
-			tabindex={-1}
-			{disabled}
+			aria-hidden="true"
 			onclick={(e: MouseEvent) => {
 				// The tab underneath would otherwise read the click as "select me".
 				e.stopPropagation();
-				close(e);
+				if (!disabled) close(e);
 			}}
 		>
 			<DismissRegular />
-		</button>
+		</span>
 	{/if}
 	{#if active}
 		<!--
@@ -223,6 +221,10 @@
 			}
 			& .fs-tab-view-tab-close {
 				cursor: not-allowed;
+				&:hover,
+				&:active {
+					background: transparent;
+				}
 			}
 		}
 		/* Share the strip evenly, within the width a document tab is worth. */
@@ -274,10 +276,10 @@
 			background: transparent;
 			color: inherit;
 			cursor: pointer;
-			&:hover:not(:disabled) {
+			&:hover {
 				background: var(--fs-subtle-fill-secondary);
 			}
-			&:active:not(:disabled) {
+			&:active {
 				background: var(--fs-subtle-fill-tertiary);
 			}
 			& :global(svg) {

package/dist/components/tab-view/tab-view.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
+	import { invokeHandlers } from '../../internal/index.js';
 	import { getTabspotAttributes } from 'tabspot';
 	import AddRegular from 'fluentui-icons-svelte/AddRegular.svelte';
 	import { setTabViewContext, TABSPOT_ITEMS, TABSPOT_SKIP } from './tab-view.svelte.js';
 	import type { TabViewContext, TabViewProps } from './types.js';
 
 	let {
-		ref = $bindable(),
-		listRef = $bindable(),
-		listProps,
+		ref = $bindable(null),
+		listRef = $bindable(null),
+		listAttributes,
 		activeTab = $bindable(''),
 		onTabChange,
 		closable = false,
 		onTabClose,
 		showNewTabButton = false,
 		onNewTab,
-		newTabButtonProps,
+		newTabButtonAttributes,
 		tabWidthMode = 'equal',
 		disableTabspot = false,
 		class: classes,
@@ -90,17 +91,23 @@
 	{/if}
 	```
 -->
-<div bind:this={ref} class={['fs-tab-view', classes]} {...attributes}>
-	<div bind:this={listRef} role="tablist" class="fs-tab-view-list" {...tabspotAttributes} {...listProps}>
+<div {...attributes} bind:this={ref} class={['fs-tab-view', classes]}>
+	<div
+		{...listAttributes}
+		bind:this={listRef}
+		role="tablist"
+		class={['fs-tab-view-list', listAttributes?.class]}
+		{...tabspotAttributes}
+	>
 		{@render children?.()}
 	</div>
 	{#if showNewTabButton}
 		<button
+			{...newTabButtonAttributes}
 			type="button"
-			class="fs-tab-view-new-tab"
+			class={['fs-tab-view-new-tab', newTabButtonAttributes?.class]}
 			aria-label="Add new tab"
-			onclick={(e: MouseEvent) => onNewTab?.(e)}
-			{...newTabButtonProps}
+			onclick={(e: MouseEvent) => invokeHandlers(e, [], [onNewTab, newTabButtonAttributes?.onclick])}
 		>
 			<AddRegular />
 		</button>

package/dist/components/tab-view/types.d.ts

@@ -17,15 +17,15 @@ export type TabViewProps = {
     /** The DOM reference of the element wrapping the strip.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The DOM reference of the tab list.
      * @bindable
      */
-    listRef?: HTMLDivElement;
-    /** The props to spread on the tab list element, where the `tablist` role and its label belong.
+    listRef?: HTMLDivElement | null;
+    /** The Attributes to spread on the tab list element, where the `tablist` role and its label belong.
      * @type HTMLAttributes
      */
-    listProps?: HTMLAttributes<HTMLDivElement>;
+    listAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The value of the selected tab.
      * @bindable
      */
@@ -47,7 +47,7 @@ export type TabViewProps = {
     /** The props to spread on the new tab button.
      * @type HTMLButtonAttributes
      */
-    newTabButtonProps?: HTMLButtonAttributes;
+    newTabButtonAttributes?: HTMLButtonAttributes;
     /** How the tabs take their width: sharing the strip evenly, sizing to their own content, or
      * shrinking to the icon of every tab but the selected one.
      * @default 'equal'
@@ -63,7 +63,7 @@ export type TabViewTabProps = {
     /** The DOM reference of the tab element.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The value that identifies the tab. Defaults to a generated id. */
     value?: string;
     /** The icon to display before the label.

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