fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/slider/slider.svelte

@@ -2,13 +2,16 @@
 </script>
 
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { untrack } from 'svelte';
 	import { watch } from 'runed';
 	import { Tooltip } from '../../index.js';
-	import { preventDefault } from '../../internal/index.js';
+	import { dispatchFieldEvents, invokeHandlers } from '../../internal/index.js';
 	import type { Attachment } from 'svelte/attachments';
 	import type { MouseOrTouchEvent, SliderProps } from './types.js';
 
+	const labelContext = claimLabel(() => id);
+
 	let {
 		value = $bindable(0),
 		min = 0,
@@ -27,15 +30,17 @@
 		tooltipPlacement = 'top',
 		tooltipContent,
 		onChange,
-		class: classes,
-		ref = $bindable(),
-		inputRef = $bindable(),
-		thumbRef = $bindable(),
-		tooltipRef = $bindable(),
-		railRef = $bindable(),
-		trackRef = $bindable(),
-		tickBarRef = $bindable(),
-		'aria-label': ariaLabel = 'Slider',
+		id = labelContext?.fieldId,
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
+		thumbRef = $bindable(null),
+		tooltipRef = $bindable(null),
+		railRef = $bindable(null),
+		trackRef = $bindable(null),
+		tickBarRef = $bindable(null),
+		defaultValue = min,
+		onkeydown,
 		...attributes
 	}: SliderProps = $props();
 
@@ -63,15 +68,23 @@
 		}
 	);
 
+	/** A slider that nothing else names falls back to a generic name. */
+	const named = $derived(
+		!!(attributes['aria-label'] || attributes['aria-labelledby'] || ref?.labels?.length || labelContext)
+	);
+
+	/** A `fieldset` disables the slider without its `disabled` prop, and only the native input knows. */
+	const inert = () => disabled || !!ref?.matches(':disabled');
+
 	let dragging = $state(false);
 	let holding = $state(false);
+	/** Whether the pointer moved the value since it was pressed, which the release reports as a `change`. */
+	let moved = false;
 	let thumbClientWidth = $state(20);
 	let percentage = $derived(valueToPercentage(value));
 	let directionAwareReverse = $derived(
-		ref && window
-			? window.getComputedStyle(ref)?.direction === 'ltr' && orientation === 'horizontal'
-				? reverse
-				: !reverse
+		wrapperRef && orientation === 'horizontal' && window.getComputedStyle(wrapperRef).direction === 'rtl'
+			? !reverse
 			: reverse
 	);
 
@@ -80,6 +93,8 @@
 	}
 
 	function cancelMove() {
+		if (moved) dispatchFieldEvents(ref, ['change']);
+		moved = false;
 		holding = false;
 		dragging = false;
 	}
@@ -92,7 +107,7 @@
 	}
 
 	function calculateValue(event: MouseOrTouchEvent) {
-		if (disabled || !railRef) return;
+		if (inert() || !railRef) return;
 		const { top, bottom, left, right, width, height } = railRef.getBoundingClientRect();
 		const percentageX = (event as TouchEvent).touches
 			? (event as TouchEvent).touches[0].clientX
@@ -105,6 +120,8 @@
 		const startingPos =
 			orientation === 'horizontal' ? (directionAwareReverse ? right : left) : directionAwareReverse ? top : bottom;
 		const length = orientation === 'horizontal' ? width : height;
+		// A rail without length (e.g. a vertical slider in a parent with no height) has no scale to read the pointer on.
+		if (!length) return;
 
 		let nextStep =
 			min +
@@ -117,26 +134,31 @@
 			) *
 				step;
 
+		nextStep = Math.min(Math.max(nextStep, min), max);
+		if (nextStep === value) return;
+
 		value = nextStep;
+		moved = true;
+		dispatchFieldEvents(ref, ['input']);
 	}
 
+	/** The arrows follow the direction the slider is drawn in, so they replace the stepping of the native input. */
 	function handleArrowKeys(event: KeyboardEvent) {
 		const { key } = event;
+		const increase = key === 'ArrowRight' || key === 'ArrowUp';
 
-		if (key === 'ArrowDown' || key === 'ArrowUp') event.preventDefault();
-		if (key === 'ArrowLeft' || (key === 'ArrowDown' && !disabled)) {
-			if (reverse) {
-				stepUp();
-			} else {
-				stepDown();
-			}
-		} else if (key === 'ArrowRight' || (key === 'ArrowUp' && !disabled)) {
-			if (reverse) {
-				stepDown();
-			} else {
-				stepUp();
-			}
+		if (!increase && key !== 'ArrowLeft' && key !== 'ArrowDown') return;
+
+		event.preventDefault();
+		const previous = value;
+
+		if (increase !== reverse) {
+			stepUp();
+		} else {
+			stepDown();
 		}
+
+		if (value !== previous) dispatchFieldEvents(ref);
 	}
 
 	function handleTouchStart(event: TouchEvent) {
@@ -179,7 +201,7 @@
 	});
 </script>
 
-<!-- 
+<!--
 	@component
 	A slider allows users to select a value from a continuous or discrete range by moving a thumb along a track. It supports horizontal and vertical orientations, ticks, tooltips, and reverse direction.
 
@@ -192,8 +214,6 @@
 	<Slider value={50} min={0} max={100} />
 	<Slider orientation="vertical" step={10} ticks={[0, 25, 50, 75, 100]} />
 	```
-
-	@status WIP
 -->
 <svelte:window
 	onmousemove={handleMove}
@@ -203,27 +223,34 @@
 	ontouchcancel={cancelMove}
 />
 
+<!-- The pointer works on the drawing; the keyboard, assistive technologies and forms work on the native input inside the thumb. -->
 <div
-	class={['fs-slider', `orientation-${orientation}`, classes, { disabled }, directionAwareReverse && 'reverse']}
-	bind:this={ref}
-	tabindex={disabled ? -1 : 0}
-	role="slider"
-	aria-label={ariaLabel}
-	aria-orientation={orientation}
-	aria-valuemin={_range.min}
-	aria-valuemax={_range.max}
-	aria-valuenow={value}
-	aria-valuetext={prefix || suffix ? `${prefix}${value}${suffix}` : undefined}
-	aria-disabled={disabled || undefined}
-	ontouchstart={handleTouchStart}
-	onkeydown={handleArrowKeys}
-	onmousedown={preventDefault(() => {
-		holding = true;
-		dragging = true;
-	})}
+	{...wrapperAttributes}
+	class={[
+		'fs-slider',
+		`orientation-${orientation}`,
+		{ disabled },
+		directionAwareReverse && 'reverse',
+		wrapperAttributes?.class
+	]}
+	bind:this={wrapperRef}
+	ontouchstart={(e) => invokeHandlers(e, [inert()], [handleTouchStart, wrapperAttributes?.ontouchstart])}
+	onmousedown={(e) =>
+		invokeHandlers(
+			e,
+			[inert()],
+			[
+				() => {
+					e.preventDefault();
+					ref?.focus();
+					holding = true;
+					dragging = true;
+				},
+				wrapperAttributes?.onmousedown
+			]
+		)}
 	style="--slider-percentage: {percentage}%; --slider-thumb-offset: {thumbClientWidth / 2 -
-		linearScale([0, 50], [6, thumbClientWidth / 2])(percentage)}px;"
-	{...attributes}
+		linearScale([0, 50], [6, thumbClientWidth / 2])(percentage)}px; {wrapperAttributes?.style ?? ''}"
 >
 	{#if tooltip && !disabled}
 		<Tooltip
@@ -236,8 +263,8 @@
 			class="slider-tooltip"
 			animationFrame
 		>
-			{#snippet children(args, ref)}
-				{@render sliderThumb(args, ref)}
+			{#snippet children(args, attach)}
+				{@render sliderThumb(args, attach)}
 			{/snippet}
 		</Tooltip>
 	{:else}
@@ -257,17 +284,38 @@
 			{/each}
 		</div>
 	{/if}
-	<input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputRef} />
 </div>
 
-{#snippet sliderThumb(attrs: Record<string, unknown> | undefined = undefined, ref: Attachment | undefined = undefined)}
+{#snippet sliderThumb(
+	attrs: Record<string, unknown> | undefined = undefined,
+	attach: Attachment | undefined = undefined
+)}
 	<div
-		class="slider-thumb"
 		{...attrs}
-		{@attach ref ? ref : undefined}
+		class={['slider-thumb', attrs?.class]}
+		{@attach attach}
 		bind:this={thumbRef}
 		bind:clientWidth={thumbClientWidth}
-	></div>
+	>
+		<!-- The field: where the thumb is, so its focus and validation message are too. -->
+		<input
+			{...attributes}
+			{id}
+			class="native-field"
+			type="range"
+			min={_range.min}
+			max={_range.max}
+			step={_range.step}
+			{disabled}
+			aria-label={named ? attributes['aria-label'] : 'Slider'}
+			aria-orientation={orientation}
+			aria-valuetext={prefix || suffix ? `${prefix}${value}${suffix}` : attributes['aria-valuetext']}
+			{defaultValue}
+			bind:value
+			bind:this={ref}
+			onkeydown={(e) => invokeHandlers(e, [disabled], [handleArrowKeys, onkeydown])}
+		/>
+	</div>
 {/snippet}
 
 <style>
@@ -280,9 +328,16 @@
 		min-inline-size: 32px;
 		min-block-size: 32px;
 
-		& :focus-visible {
-			outline: none;
-			box-shadow: var(--fs-focus-stroke-outer);
+		& .slider-thumb:has(> .native-field:focus-visible) {
+			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
+			outline-offset: 0.125rem;
+		}
+
+		&:has(.native-field:is(:user-invalid, [aria-invalid='true'])) {
+			& .slider-track,
+			& .slider-thumb::before {
+				background-color: var(--fs-system-critical);
+			}
 		}
 
 		&.orientation-horizontal {
@@ -387,7 +442,7 @@
 			}
 		}
 
-		&.disabled {
+		&:is(.disabled, :has(.native-field:disabled)) {
 			& .slider-rail {
 				background-color: var(--fs-accent-fill-disabled);
 			}
@@ -450,6 +505,16 @@
 		}
 	}
 
+	.native-field {
+		position: absolute;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
 	.slider-thumb {
 		display: flex;
 		justify-content: center;

package/dist/components/slider/slider.svelte.d.ts

@@ -11,9 +11,7 @@ import type { SliderProps } from './types.ts';
  * <Slider value={50} min={0} max={100} />
  * <Slider orientation="vertical" step={10} ticks={[0, 25, 50, 75, 100]} />
  * ```
- *
- * @status WIP
  */
-declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value" | "inputRef" | "thumbRef" | "tooltipRef" | "railRef" | "trackRef" | "tickBarRef">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value" | "wrapperRef" | "thumbRef" | "tooltipRef" | "railRef" | "trackRef" | "tickBarRef">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

@@ -1,6 +1,7 @@
 import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { HiddenInputAttributes } from '../../internal/index.js';
 /** @propsmith SliderProps */
 export type SliderProps = {
     /** The current value of the slider.
@@ -8,6 +9,10 @@ export type SliderProps = {
      * @bindable
      */
     value?: number;
+    /** The value a form reset returns the slider to. A range input without one would fall back to an empty value.
+     * @default min
+     */
+    defaultValue?: number;
     /** The minimum value of the slider.
      * @default 0
      */
@@ -52,7 +57,7 @@ export type SliderProps = {
      * @default false
      */
     disabled?: boolean;
-    /** Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. */
+    /** Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. Without it, a value between two steps is drawn as it is, while the native input, and so the form, holds the nearest step. */
     sync?: boolean;
     /** Whether to show the value in a tooltip while dragging.
      * @default true
@@ -68,35 +73,37 @@ export type SliderProps = {
     tooltipContent?: string | Snippet | Component;
     /** Called whenever the value changes. */
     onChange?: (value: number) => void;
-    /** The class to apply to the slider. */
-    class?: string;
-    /** The DOM reference of the slider element.
+    /** The DOM reference of the native range input that holds the value and takes the keyboard focus. The other attributes of the slider are applied to it.
      * @bindable
      */
-    ref?: HTMLElement;
-    /** The DOM reference of the underlying input element.
+    ref?: HTMLInputElement | null;
+    /** The DOM reference of the element that draws the slider.
      * @bindable
      */
-    inputRef?: HTMLInputElement;
+    wrapperRef?: HTMLDivElement | null;
+    /** The attributes to spread on the element that draws the slider.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
     /** The DOM reference of the thumb element.
      * @bindable
      */
-    thumbRef?: HTMLElement;
+    thumbRef?: HTMLElement | null;
     /** The DOM reference of the tooltip element.
      * @bindable
      */
-    tooltipRef?: HTMLElement;
+    tooltipRef?: HTMLElement | null;
     /** The DOM reference of the rail element.
      * @bindable
      */
-    railRef?: HTMLElement;
+    railRef?: HTMLElement | null;
     /** The DOM reference of the track element.
      * @bindable
      */
-    trackRef?: HTMLElement;
+    trackRef?: HTMLElement | null;
     /** The DOM reference of the tick bar element.
      * @bindable
      */
-    tickBarRef?: HTMLElement;
-} & HTMLAttributes<HTMLDivElement>;
+    tickBarRef?: HTMLElement | null;
+} & HiddenInputAttributes<HTMLInputAttributes>;
 export type MouseOrTouchEvent = MouseEvent | TouchEvent;

package/dist/components/tab-view/docs/llms.md

@@ -20,7 +20,7 @@ A tab strip expects a `value` on every tab and an `activeTab` to match it agains
 	let activeTab = $state('document');
 </script>
 
-<TabView bind:activeTab listProps={{ 'aria-label': 'Workspaces' }}>
+<TabView bind:activeTab listAttributes={{ 'aria-label': 'Workspaces' }}>
 	<TabViewTab id="tab-document" value="document">Document</TabViewTab>
 	<TabViewTab id="tab-mail" value="mail">Mail</TabViewTab>
 </TabView>
@@ -104,16 +104,16 @@ A disabled tab cannot be selected, and the arrow keys pass over it rather than l
 
 | Name                       | Type                                                    | Default   | Description                                                                                                                                       |
 | -------------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement`                                        |           | The DOM reference of the element wrapping the strip.                                                                                              |
-| `listRef` _bindable_       | `HTMLDivElement`                                        |           | The DOM reference of the tab list.                                                                                                                |
-| `listProps`                | `HTMLAttributes`                                        |           | The props to spread on the tab list element, where the `tablist` role and its label belong.                                                       |
+| `ref` _bindable_           | `HTMLDivElement` &#124; `null`                          |           | The DOM reference of the element wrapping the strip.                                                                                              |
+| `listRef` _bindable_       | `HTMLDivElement` &#124; `null`                          |           | The DOM reference of the tab list.                                                                                                                |
+| `listAttributes`           | `HTMLAttributes`                                        |           | The Attributes to spread on the tab list element, where the `tablist` role and its label belong.                                                  |
 | `activeTab` _bindable_     | `string`                                                |           | The value of the selected tab.                                                                                                                    |
 | `onTabChange`              | `(event: Event, value: string) => void`                 |           | Fired when the selected tab changes.                                                                                                              |
 | `closable`                 | `boolean`                                               | `false`   | Every tab shows a close button, unless the tab opts out of it.                                                                                    |
 | `onTabClose`               | `(event: Event, value: string) => void`                 |           | Fired when a tab asks to be closed. Removing the tab is left to the consumer.                                                                     |
 | `showNewTabButton`         | `boolean`                                               | `false`   | Shows the button that adds a new tab at the end of the strip.                                                                                     |
 | `onNewTab`                 | `(event: MouseEvent) => void`                           |           | Fired when the new tab button is activated.                                                                                                       |
-| `newTabButtonProps`        | `HTMLButtonAttributes`                                  |           | The props to spread on the new tab button.                                                                                                        |
+| `newTabButtonAttributes`   | `HTMLButtonAttributes`                                  |           | The props to spread on the new tab button.                                                                                                        |
 | `tabWidthMode`             | `'equal'` &#124; `'size-to-content'` &#124; `'compact'` | `'equal'` | 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. |
 | `disableTabspot`           | `boolean`                                               | `false`   | Opts the strip out of the tabspot focus management, to wire your own.                                                                             |
 | Element Attributes (`div`) |                                                         |           |                                                                                                                                                   |
@@ -127,7 +127,7 @@ A disabled tab cannot be selected, and the arrow keys pass over it rather than l
 
 | Name                       | Type                                    | Default | Description                                                                             |
 | -------------------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement`                        |         | The DOM reference of the tab element.                                                   |
+| `ref` _bindable_           | `HTMLDivElement` &#124; `null`          |         | The DOM reference of the tab element.                                                   |
 | `value`                    | `string`                                |         | The value that identifies the tab. Defaults to a generated id.                          |
 | `icon`                     | `Snippet` &#124; `Component`            |         | The icon to display before the label.                                                   |
 | `closable`                 | `boolean`                               |         | Shows the close button of the tab. Falls back to the `closable` of the strip.           |
@@ -143,4 +143,4 @@ The strip is a single tab stop. `ArrowLeft` and `ArrowRight` walk the tabs, `Hom
 
 ## Accessibility
 
-The strip renders a `tablist` and every tab a `tab`, so give the list a name through the `aria-label` you pass in `listProps`. Since you render what a tab opens, give that element a `tabpanel` role and point its `aria-labelledby` at the `id` of its tab.
+The strip renders a `tablist` and every tab a `tab`, so give the list a name through the `aria-label` you pass in `listAttributes`. Since you render what a tab opens, give that element a `tabpanel` role and point its `aria-labelledby` at the `id` of its tab.

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.