fluentui-svelte 0.5.0 → 0.7.0

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

@@ -66,7 +66,7 @@ The `as` prop lets you choose the HTML tag used to render the skeleton. Possible
 | `animation`      | `'wave'` | `'pulse'`                         | `'wave'`    | The animation played while the content is loading.            |
 | `shape`          | `'circular'` | `'rounded'` | `'square'` | `'rounded'` | The skeleton can have a circular, rounded or square shape.    |
 | `justify`        | `boolean`                                         |             | The skeleton is justified to the full width of the container. |
-| `ref` _bindable_ | `HTMLElement`                                     |             | The DOM reference of the skeleton element.                    |
+| `ref` _bindable_ | `HTMLElement` | `null`                       |             | The DOM reference of the skeleton element.                    |
 | HTML Attributes  |                                                   |             |                                                               |
 
 <!-- /props:SkeletonProps -->

package/dist/components/skeleton/skeleton.svelte

@@ -8,7 +8,7 @@
 		shape = 'rounded',
 		justify,
 		class: classes,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...attributes
 	}: SkeletonProps<Tag> = $props();
 
@@ -36,10 +36,10 @@
  -->
 <svelte:element
 	this={as}
+	{...attributes}
 	bind:this={ref}
 	aria-hidden="true"
 	class={['fs-skeleton', animation, shape, classes, { justify }]}
-	{...attributes}
 ></svelte:element>
 
 <style>

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

@@ -20,5 +20,5 @@ export type SkeletonProps<Tag extends SkeletonTags = 'div'> = {
     /** The DOM reference of the skeleton element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
 } & PolymorphicProps<Tag>;

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

@@ -50,38 +50,41 @@ Set the `disabled` prop to prevent interaction with the slider.
 <Slider value={30} disabled />
 ```
 
+The root is the control element. HTML attributes, class and ref apply to that element. There is no separate wrapper API.
+
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:SliderProps -->
 
-| Name                       | Type                                          | Default        | Description                                                                              |
-| -------------------------- | --------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------- |
-| `value` _bindable_         | `number`                                      | `0`            | The current value of the slider.                                                         |
-| `min`                      | `number`                                      | `0`            | The minimum value of the slider.                                                         |
-| `max`                      | `number`                                      | `100`          | The maximum value of the slider.                                                         |
-| `step`                     | `number`                                      | `1`            | How much the value moves on every step.                                                  |
-| `ticks`                    | `number[]`                                    | `[]`           | The values the tick marks are drawn at.                                                  |
-| `tickPlacement`            | `'around'` &#124; `'before'` &#124; `'after'` | `'around'`     | Where the tick marks sit relative to the rail.                                           |
-| `prefix`                   | `string`                                      | `''`           | Text prepended to the value in the tooltip.                                              |
-| `suffix`                   | `string`                                      | `''`           | Text appended to the value in the tooltip.                                               |
-| `track`                    | `boolean`                                     | `true`         | Whether to fill the rail up to the current value.                                        |
-| `orientation`              | `'horizontal'` &#124; `'vertical'`            | `'horizontal'` | The direction the slider runs in.                                                        |
-| `reverse`                  | `boolean`                                     | `false`        | Runs the slider from the maximum to the minimum instead.                                 |
-| `disabled`                 | `boolean`                                     | `false`        | Disables the user interaction.                                                           |
-| `sync`                     | `boolean`                                     |                | Snaps the thumb to the pointer as soon as it is pressed, instead of stepping towards it. |
-| `tooltip`                  | `boolean`                                     | `true`         | Whether to show the value in a tooltip while dragging.                                   |
-| `tooltipPlacement`         | `Placement`                                   | `'top'`        | Where the tooltip is placed relative to the thumb.                                       |
-| `tooltipContent`           | `string` &#124; `Snippet` &#124; `Component`  |                | Custom content for the tooltip, replacing the plain value.                               |
-| `onChange`                 | `(value: number) => void`                     |                | Called whenever the value changes.                                                       |
-| `class`                    | `string`                                      |                | The class to apply to the slider.                                                        |
-| `ref` _bindable_           | `HTMLElement`                                 |                | The DOM reference of the slider element.                                                 |
-| `inputRef` _bindable_      | `HTMLInputElement`                            |                | The DOM reference of the underlying input element.                                       |
-| `thumbRef` _bindable_      | `HTMLElement`                                 |                | The DOM reference of the thumb element.                                                  |
-| `tooltipRef` _bindable_    | `HTMLElement`                                 |                | The DOM reference of the tooltip element.                                                |
-| `railRef` _bindable_       | `HTMLElement`                                 |                | The DOM reference of the rail element.                                                   |
-| `trackRef` _bindable_      | `HTMLElement`                                 |                | The DOM reference of the track element.                                                  |
-| `tickBarRef` _bindable_    | `HTMLElement`                                 |                | The DOM reference of the tick bar element.                                               |
-| Element Attributes (`div`) |                                               |                |                                                                                          |
+| Name                                         | Type                                          | Default        | Description                                                                                                                                                                                                        |
+| -------------------------------------------- | --------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `value` _bindable_                           | `number`                                      | `0`            | The current value of the slider.                                                                                                                                                                                   |
+| `defaultValue`                               | `number`                                      | `min`          | The value a form reset returns the slider to. A range input without one would fall back to an empty value.                                                                                                         |
+| `min`                                        | `number`                                      | `0`            | The minimum value of the slider.                                                                                                                                                                                   |
+| `max`                                        | `number`                                      | `100`          | The maximum value of the slider.                                                                                                                                                                                   |
+| `step`                                       | `number`                                      | `1`            | How much the value moves on every step.                                                                                                                                                                            |
+| `ticks`                                      | `number[]`                                    | `[]`           | The values the tick marks are drawn at.                                                                                                                                                                            |
+| `tickPlacement`                              | `'around'` &#124; `'before'` &#124; `'after'` | `'around'`     | Where the tick marks sit relative to the rail.                                                                                                                                                                     |
+| `prefix`                                     | `string`                                      | `''`           | Text prepended to the value in the tooltip.                                                                                                                                                                        |
+| `suffix`                                     | `string`                                      | `''`           | Text appended to the value in the tooltip.                                                                                                                                                                         |
+| `track`                                      | `boolean`                                     | `true`         | Whether to fill the rail up to the current value.                                                                                                                                                                  |
+| `orientation`                                | `'horizontal'` &#124; `'vertical'`            | `'horizontal'` | The direction the slider runs in.                                                                                                                                                                                  |
+| `reverse`                                    | `boolean`                                     | `false`        | Runs the slider from the maximum to the minimum instead.                                                                                                                                                           |
+| `disabled`                                   | `boolean`                                     | `false`        | Disables the user interaction.                                                                                                                                                                                     |
+| `sync`                                       | `boolean`                                     |                | 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. |
+| `tooltip`                                    | `boolean`                                     | `true`         | Whether to show the value in a tooltip while dragging.                                                                                                                                                             |
+| `tooltipPlacement`                           | `Placement`                                   | `'top'`        | Where the tooltip is placed relative to the thumb.                                                                                                                                                                 |
+| `tooltipContent`                             | `string` &#124; `Snippet` &#124; `Component`  |                | Custom content for the tooltip, replacing the plain value.                                                                                                                                                         |
+| `onChange`                                   | `(value: number) => void`                     |                | Called whenever the value changes.                                                                                                                                                                                 |
+| `ref` _bindable_                             | `HTMLInputElement` &#124; `null`              |                | 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.                                                               |
+| `wrapperRef` _bindable_                      | `HTMLDivElement` &#124; `null`                |                | The DOM reference of the element that draws the slider.                                                                                                                                                            |
+| `wrapperAttributes`                          | `HTMLAttributes`                              |                | The attributes to spread on the element that draws the slider.                                                                                                                                                     |
+| `thumbRef` _bindable_                        | `HTMLElement` &#124; `null`                   |                | The DOM reference of the thumb element.                                                                                                                                                                            |
+| `tooltipRef` _bindable_                      | `HTMLElement` &#124; `null`                   |                | The DOM reference of the tooltip element.                                                                                                                                                                          |
+| `railRef` _bindable_                         | `HTMLElement` &#124; `null`                   |                | The DOM reference of the rail element.                                                                                                                                                                             |
+| `trackRef` _bindable_                        | `HTMLElement` &#124; `null`                   |                | The DOM reference of the track element.                                                                                                                                                                            |
+| `tickBarRef` _bindable_                      | `HTMLElement` &#124; `null`                   |                | The DOM reference of the tick bar element.                                                                                                                                                                         |
+| `HiddenInputAttributes<HTMLInputAttributes>` |                                               |                |                                                                                                                                                                                                                    |
 
 <!-- /props:SliderProps -->

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.