fluentui-svelte 0.6.0 → 0.7.0

package/dist/components/list-view/list-view-item.svelte

@@ -1,16 +1,23 @@
-<script lang="ts" generics="T extends 'li' | 'a' | 'div' = 'li'">
+<script lang="ts" generics="T extends 'li' | 'a' | 'button' | 'div' = 'li'">
 	import { onMount } from 'svelte';
-	import { COMPONENT_NAME, getListViewContext, ITEM_TAG } from './utils.js';
+	import {
+		attachTabspot,
+		COMPONENT_NAME,
+		getListViewContext,
+		ITEM_TAG,
+		LIST_VIEW_SKIP,
+		setListViewItemContext
+	} from './utils.js';
 	import Checkbox from '../checkbox/checkbox.svelte';
 	import { invokeHandlers, isObjectEmpty } from '../../internal/index.js';
 	import type { ListViewItemProps, ListViewItemDOM } from './types.js';
-	import { getTabspotAttributes } from 'tabspot';
+	import { getTabspotAttributes, type TabspotNodeOptions } from 'tabspot';
 
 	const ID = $props.id();
 
 	let {
 		as = 'li' as T,
-		ref = $bindable(),
+		ref = $bindable(null),
 		shape,
 		disabled,
 		active: _active,
@@ -20,6 +27,8 @@
 		class: classes,
 		onAction,
 		onfocus,
+		onclick,
+		onkeydown,
 		children,
 		...attributes
 	}: ListViewItemProps<T> = $props();
@@ -30,6 +39,9 @@
 	 */
 	const _as = $derived.by(() => {
 		if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
+		if (as === 'button' && (checkmark || role === 'row')) {
+			throw new Error('ListViewItem buttons cannot contain checkmarks or composite row controls. Use li or div.');
+		}
 		return as;
 	});
 
@@ -41,75 +53,176 @@
 	const { state: _state } = CONTEXT;
 	const { handleSelection, registerItem, unregisterItem, getChildrenRole } = CONTEXT.methods;
 	const role = $derived(_role || getChildrenRole(as));
+	const wrapped = $derived((as === 'a' || as === 'button') && CONTEXT.config.as !== 'div');
+	const nativeAction = $derived(as === 'a' || as === 'button');
+	const interactive = $derived(
+		nativeAction || !!_role || CONTEXT.config.selectionMode !== 'none' || !!onAction || !!onclick
+	);
+	const tabspotDisabled = $derived(CONTEXT.config.disableTabspot);
+	setListViewItemContext({
+		get as() {
+			return as;
+		}
+	});
 
 	let active = $derived(_state.selectedItems.includes(value));
-	let checkmarkRef = $state<HTMLDivElement>();
+	let checkmarkRef = $state<HTMLDivElement | null>(null);
 
-	// A row is a level of its own: right enters the cells, left comes back out. Anything
-	// that is not a row navigates as a plain item of the list above it.
-	const tabspotAttrs = $derived(
-		(role === 'row'
-			? getTabspotAttributes({
+	// A grid cell contains the secondary controls, independently of the primary row action.
+	const cellConfig: TabspotNodeOptions | undefined = $derived(
+		role === 'row' && !tabspotDisabled
+			? {
+					// Checkbox inputs are transparent while their visible wrappers supply the focus ring.
 					mover: {
-						axis: 'vertical'
+						axis: 'horizontal',
+						skip: LIST_VIEW_SKIP
 					},
 					grouper: { enterDirection: 'right', exitDirection: 'left' }
-				})
-			: null) ?? {}
+				}
+			: undefined
+	);
+	const cellAttrs = $derived(cellConfig && getTabspotAttributes(cellConfig));
+	// A roving list has one tab stop. Tabspot sets it on mount, so the server HTML gives it to the first item, as Tabspot will.
+	// svelte-ignore state_referenced_locally
+	const holdsTabStop = !CONTEXT.config.roving || (interactive && !disabled && CONTEXT.methods.claimTabStop(ID));
+	const focusAttributes = $derived(
+		nativeAction
+			? disabled && as === 'a'
+				? { tabindex: -1 }
+				: {}
+			: interactive && !tabspotDisabled
+				? { tabindex: disabled || !holdsTabStop ? -1 : 0 }
+				: {}
 	);
 
+	function handleClick(e: MouseEvent) {
+		const target = e.target instanceof Element ? e.target : null;
+		if (target?.closest('.fs-list-view-item') !== e.currentTarget) return;
+		const fromCheckmark = !!checkmarkRef?.contains(target);
+		const control = target?.closest(
+			'a, button, input, select, textarea, [contenteditable="true"], [role="button"], [role="link"]'
+		);
+		if (!fromCheckmark && control && control !== e.currentTarget) return;
+		invokeHandlers(e, disabled, [
+			onclick,
+			(role !== 'row' || fromCheckmark) && ((event: MouseEvent) => handleSelection(event, value, fromCheckmark)),
+			!fromCheckmark && ((event: MouseEvent) => onAction?.(event, value))
+		]);
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		invokeHandlers(e, disabled, [onkeydown]);
+		if (e.defaultPrevented || nativeAction || e.target !== e.currentTarget || !['Enter', ' '].includes(e.key)) return;
+		e.preventDefault();
+		(e.currentTarget as HTMLElement).dispatchEvent(
+			new MouseEvent('click', {
+				bubbles: true,
+				ctrlKey: e.ctrlKey,
+				metaKey: e.metaKey,
+				shiftKey: e.shiftKey
+			})
+		);
+	}
+
 	onMount(() => {
-		registerItem?.(ID, value as string, !!disabled);
-		return () => unregisterItem?.(ID);
+		registerItem(ID, () => ({ value, disabled: !!disabled, element: ref ?? null }));
+		return () => unregisterItem(ID);
 	});
 </script>
 
-<svelte:element
-	this={_as}
-	{role}
-	data-value={value}
-	aria-selected={role === 'option' ? active : undefined}
-	aria-disabled={disabled || undefined}
-	bind:this={ref as ListViewItemDOM[T]}
-	class={[
-		'fs-list-view-item',
-		shape ? shape : _shape,
-		classes,
-		{ disabled },
-		role !== 'row' && 'indicator',
-		(_active || active) && 'active',
-		!disabled && role && 'interactive'
-	]}
-	{...tabspotAttrs}
-	onfocus={(e: FocusEvent) => invokeHandlers(e, disabled, [(event: FocusEvent) => onfocus?.(event, value || '')])}
-	onclick={(e: MouseEvent) => {
-		// The checkmark only toggles the selection, even on a row. The primary action is for the rest of the item.
-		const fromCheckmark = !!checkmarkRef?.contains(e.target as Node);
-		invokeHandlers(e, disabled, [
-			(role !== 'row' || fromCheckmark) && ((event: MouseEvent) => handleSelection?.(event, value, fromCheckmark)),
-			!fromCheckmark && ((event: MouseEvent) => onAction?.(event, value || ''))
-		]);
-	}}
-	{...attributes}
->
+{#snippet content()}
 	{#if checkmark}
 		<Checkbox
+			{...!isObjectEmpty(checkmark) ? checkmark : {}}
 			{disabled}
 			bind:checked={active}
 			bind:wrapperRef={checkmarkRef}
-			tabindex={-1}
-			{...!isObjectEmpty(checkmark) ? checkmark : {}}
+			tabindex={tabspotDisabled ? undefined : -1}
+			aria-label={checkmark?.['aria-label'] ?? attributes['aria-label'] ?? value}
+			inert={role === 'option' || undefined}
 		/>
 	{/if}
 	{@render children?.()}
-</svelte:element>
+{/snippet}
+
+{#snippet item()}
+	<svelte:element
+		this={_as}
+		{...attributes}
+		role={wrapped || (nativeAction && role === 'listitem') ? undefined : role}
+		type={as === 'button' ? 'button' : undefined}
+		disabled={as === 'button' ? disabled : undefined}
+		data-value={value}
+		data-list-view-interactive={interactive || undefined}
+		aria-selected={!wrapped && (role === 'option' || role === 'row') ? active : undefined}
+		aria-current={role !== 'option' && role !== 'row' && (_active || active) ? 'true' : undefined}
+		aria-disabled={disabled || undefined}
+		bind:this={ref as ListViewItemDOM[T]}
+		class={[
+			'fs-list-view-item',
+			shape ? shape : _shape,
+			classes,
+			{ disabled },
+			role !== 'row' && 'indicator',
+			(_active || active) && 'active',
+			!disabled && interactive && 'interactive'
+		]}
+		{...focusAttributes}
+		onfocus={(e: FocusEvent) => {
+			if (e.target === e.currentTarget) invokeHandlers(e, disabled, [() => onfocus?.(e, value)]);
+		}}
+		onclick={handleClick}
+		onkeydown={handleKeydown}
+	>
+		{#if role === 'row'}
+			<div role="gridcell" {...cellAttrs} {@attach attachTabspot(cellConfig)}>
+				{@render content()}
+			</div>
+		{:else}
+			{@render content()}
+		{/if}
+	</svelte:element>
+{/snippet}
+
+{#if wrapped}
+	<li {role} aria-selected={role === 'option' || role === 'row' ? active : undefined} class="fs-list-view-item-wrapper">
+		{@render item()}
+	</li>
+{:else}
+	{@render item()}
+{/if}
 
 <style>
+	.fs-list-view-item-wrapper {
+		list-style: none;
+		& > :global(.fs-list-view-item) {
+			width: 100%;
+			box-sizing: border-box;
+			text-align: start;
+		}
+	}
+	.fs-list-view-item-wrapper,
+	.fs-list-view-item:has(> :global(.fs-list-view)) {
+		& > :global(.fs-list-view) {
+			padding-inline-start: 1rem;
+			box-sizing: border-box;
+		}
+	}
+	.fs-list-view-item:has(> :global(.fs-list-view)) {
+		display: block;
+	}
+	[role='gridcell'] {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		width: 100%;
+	}
 	.fs-list-view-item {
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body2-font-size);
 		color: var(--fs-text-primary);
 		border: none;
+		background: var(--fs-subtle-fill-transparent);
 		padding: 0.275rem 0.713rem 0.4rem 0.713rem;
 		position: relative;
 		outline: none;
@@ -174,4 +287,9 @@
 			border-radius: 50vw;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.fs-list-view-item.interactive.indicator.active::after {
+			transition: none;
+		}
+	}
 </style>

package/dist/components/list-view/list-view-item.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { ListViewItemProps } from './types.ts';
-declare function $$render<T extends 'li' | 'a' | 'div' = 'li'>(): {
+declare function $$render<T extends 'li' | 'a' | 'button' | 'div' = 'li'>(): {
     props: ListViewItemProps<T>;
     exports: {};
     bindings: "ref";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends 'li' | 'a' | 'div' = 'li'> {
+declare class __sveltets_Render<T extends 'li' | 'a' | 'button' | 'div' = 'li'> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
@@ -14,12 +14,12 @@ declare class __sveltets_Render<T extends 'li' | 'a' | 'div' = 'li'> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends 'li' | 'a' | 'div' = 'li'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+    new <T extends 'li' | 'a' | 'button' | 'div' = 'li'>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
     } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends 'li' | 'a' | 'div' = 'li'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends 'li' | 'a' | 'button' | 'div' = 'li'>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListViewItem: $$IsomorphicComponent;
-type ListViewItem<T extends 'li' | 'a' | 'div' = 'li'> = InstanceType<typeof ListViewItem<T>>;
+type ListViewItem<T extends 'li' | 'a' | 'button' | 'div' = 'li'> = InstanceType<typeof ListViewItem<T>>;
 export default ListViewItem;

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

@@ -1,19 +1,29 @@
 <script lang="ts" generics="Tag extends 'ul' | 'ol' | 'div' = 'ul'">
 	import type { ListViewContext, ListViewProps, ListViewDOM } from './types.js';
-	import { getRole, TAG, setListViewContext } from './utils.js';
-	import { getTabspotAttributes } from 'tabspot';
+	import {
+		attachTabspot,
+		getListViewContext,
+		getListViewItemContext,
+		getRole,
+		LIST_VIEW_SKIP,
+		TAG,
+		setListViewContext
+	} from './utils.js';
+	import { getTabspotAttributes, type TabspotNodeOptions } from 'tabspot';
 
 	let {
 		as = 'ul' as Tag,
-		ref = $bindable(),
+		ref = $bindable(null),
 		selectionMode = 'none',
 		navigationMode = 'items',
+		manageSpecialKeys = true,
 		shape = 'rounded',
 		selectedItems = $bindable([]),
 		onSelectionChange,
 		disableTabspot = false,
 		toggleOnClick = false,
 		children,
+		class: classes,
 		...attributes
 	}: ListViewProps<Tag> = $props();
 
@@ -21,40 +31,69 @@
 	 * The tag the invariant rules over. The markup renders it through here, so it is checked
 	 * during SSR and on every prop update rather than only once on mount.
 	 */
+	const itemContext = getListViewItemContext();
 	const _as = $derived.by(() => {
 		if (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+		if (itemContext?.as === 'a' || itemContext?.as === 'button') {
+			throw new Error('Nested ListView must be inside a li or div ListViewItem, outside links and buttons.');
+		}
 		return as;
 	});
 
-	const ROLE = $derived(getRole(as, selectionMode, navigationMode));
+	const parent = getListViewContext();
+	const tabspotDisabled = $derived(disableTabspot || !!parent?.config.disableTabspot);
+	const ROLE = $derived(attributes.role ?? getRole(as, selectionMode, navigationMode));
 
 	const MULTISELECTABLE = $derived(selectionMode === 'multiselect' || selectionMode === 'extended');
 
-	const tabspotAttrs = $derived(
-		!disableTabspot &&
-			getTabspotAttributes({
-				root: {
-					manageSpecialKeys: true
-				},
-				mover: {
-					axis: 'vertical',
-					items: '.fs-list-view-item'
+	const tabspotConfig: TabspotNodeOptions | undefined = $derived(
+		tabspotDisabled
+			? undefined
+			: {
+					...(parent
+						? { grouper: { enterDirection: 'right', exitDirection: 'left' } }
+						: { root: { manageSpecialKeys } }),
+					mover: {
+						axis: 'vertical',
+						items:
+							'.fs-list-view-item[data-list-view-interactive], .fs-list-view-item:not([data-list-view-interactive]) :is(a[href], button), .fs-list-view-item-branch-trigger',
+						visibilityAware: 'Visible',
+						skip: LIST_VIEW_SKIP,
+						...(!parent && { activation: { mode: 'focus', roving: navigationMode === 'composite' } })
+					}
 				}
-			})
 	);
+	const tabspotAttrs = $derived(tabspotConfig && getTabspotAttributes(tabspotConfig));
 
 	let anchorIndex: number | null = $state(null);
 
 	let items: {
 		id: string;
-		value: string;
-		disabled: boolean;
+		getItem: () => { value: string; disabled: boolean; element: HTMLElement | null };
 	}[] = $state([]);
 
+	// The item that holds the tab stop in the server HTML, before Tabspot runs. Plain, since only the first render reads it.
+	let tabStopId: string | null = null;
+
 	const CONTEXT: ListViewContext = $state({
 		config: {
 			get shape() {
 				return shape;
+			},
+			get as() {
+				return as;
+			},
+			get selectionMode() {
+				return selectionMode;
+			},
+			get role() {
+				return ROLE;
+			},
+			get disableTabspot() {
+				return tabspotDisabled;
+			},
+			get roving() {
+				return !parent && navigationMode === 'composite';
 			}
 		},
 		state: {
@@ -73,19 +112,27 @@
 		},
 		events: null,
 		methods: {
+			claimTabStop: (id) => (tabStopId ??= id) === id,
 			handleSelection: (e: MouseEvent, value: string, toggle = false) => {
 				if (selectionMode === 'none') return;
 
-				const itemIndex = items.findIndex((item) => item.value === value);
+				// Registration order can differ from the DOM after keyed items are reordered.
+				const orderedItems = items
+					.map((item) => item.getItem())
+					.sort((a, b) => {
+						if (!a.element || !b.element) return 0;
+						return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+					});
+				const itemIndex = orderedItems.findIndex((item) => item.value === value);
 				if (itemIndex === -1) return;
 
-				const item = items[itemIndex];
+				const item = orderedItems[itemIndex];
 				if (item.disabled) return;
 
 				if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
 					const start = Math.min(anchorIndex, itemIndex);
 					const end = Math.max(anchorIndex, itemIndex);
-					const rangeValues = items
+					const rangeValues = orderedItems
 						.slice(start, end + 1)
 						.filter((i) => !i.disabled)
 						.map((i) => i.value);
@@ -101,13 +148,13 @@
 				}
 				onSelectionChange?.(e, selectedItems);
 			},
-			registerItem: (id: string, value: string, disabled: boolean) => {
-				items.push({ id, value, disabled });
+			registerItem: (id, getItem) => {
+				items.push({ id, getItem });
 			},
 			unregisterItem: (id: string) => {
 				items = items.filter((item) => item.id !== id);
 			},
-			getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
+			getChildrenRole: (_tag: 'li' | 'a' | 'button' | 'div') => {
 				if (ROLE === 'grid') return 'row';
 				if (ROLE === 'listbox') return 'option';
 				return _tag !== 'li' ? 'listitem' : undefined;
@@ -120,12 +167,13 @@
 
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as ListViewDOM[Tag]}
-	class="fs-list-view"
+	class={['fs-list-view', classes]}
 	role={ROLE}
-	aria-multiselectable={MULTISELECTABLE || undefined}
+	aria-multiselectable={((ROLE === 'grid' || ROLE === 'listbox') && MULTISELECTABLE) || undefined}
 	{...tabspotAttrs}
-	{...attributes}
+	{@attach attachTabspot(tabspotConfig)}
 >
 	{@render children?.()}
 </svelte:element>

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

@@ -1,10 +1,15 @@
 import type { CheckboxProps } from '../checkbox/types.ts';
 import type { FSContext } from '../../internal/index.js';
 import type { PolymorphicProps, Shapes } from '../../types/index.js';
+import type { AriaRole, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import type { Component, Snippet } from 'svelte';
+import type { TabspotRootOptions } from 'tabspot';
 export type SelectionMode = 'none' | 'single' | 'multiselect' | 'extended';
 export type NavigationMode = 'items' | 'composite';
 /** @propsmith ListViewProps */
 export type ListViewProps<T extends 'ul' | 'ol' | 'div'> = {
+    /** Overrides the list role and the roles derived for its items. Use `list` for nested navigation with independent selection. */
+    role?: AriaRole;
     /** How many items can be selected, and how the selection is made.
      * @default 'none'
      */
@@ -13,6 +18,11 @@ export type ListViewProps<T extends 'ul' | 'ol' | 'div'> = {
      * @default 'items'
      */
     navigationMode?: NavigationMode;
+    /** Which special keys Tabspot handles at the root. Set individual keys to leave Escape to an enclosing panel. Omitted keys in an object are off.
+     * @type boolean | TabspotRootOptions['manageSpecialKeys']
+     * @default true
+     */
+    manageSpecialKeys?: TabspotRootOptions['manageSpecialKeys'];
     /** The values of the selected items.
      * @bindable
      */
@@ -36,7 +46,7 @@ export type ListViewProps<T extends 'ul' | 'ol' | 'div'> = {
      * @type HTMLUListElement | HTMLOListElement | HTMLDivElement
      * @bindable
      */
-    ref?: ListViewDOM[T];
+    ref?: ListViewDOM[T] | null;
     /** Opts the list out of the tabspot focus management, to wire your own.
      * @default false
      */
@@ -48,12 +58,14 @@ export type ListViewDOM = {
     div: HTMLDivElement;
 };
 /** @propsmith ListViewItemProps */
-export type ListViewItemProps<T extends 'li' | 'a' | 'div' = 'li'> = {
+export type ListViewItemProps<T extends 'li' | 'a' | 'button' | 'div' = 'li'> = {
     /** The HTML element to render the item as.
-     * @type 'li' | 'a' | 'div'
+     * Links and buttons are wrapped in a list item when the list renders as `ul` or `ol`.
+     * Use `li` or `div` for nested lists and content with multiple controls. Buttons cannot contain checkmarks or composite rows.
+     * @type 'li' | 'a' | 'button' | 'div'
      * @default 'li'
      */
-    as?: T | 'a' | 'div';
+    as?: T | 'a' | 'button' | 'div';
     /** The item can have a circular, rounded or square shape. Inherited from the list by default. */
     shape?: Shapes;
     /** The value reported to the list when the item is selected. Falls back to a generated id. */
@@ -73,18 +85,63 @@ export type ListViewItemProps<T extends 'li' | 'a' | 'div' = 'li'> = {
     /** Called when the item receives the focus. */
     onfocus?: (e: Event, value: string) => void;
     /** The DOM reference of the item element.
-     * @type HTMLLIElement | HTMLAnchorElement | HTMLDivElement
+     * @type HTMLLIElement | HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
      * @bindable
      */
     ref?: ListViewItemDOM[T] | null;
-} & PolymorphicProps<T>;
+} & PolymorphicProps<T, 'onfocus'>;
 export type ListViewItemDOM = {
     li: HTMLLIElement;
     a: HTMLAnchorElement;
+    button: HTMLButtonElement;
     div: HTMLDivElement;
 };
+/** @propsmith ListViewItemBranchProps */
+export type ListViewItemBranchProps = {
+    /** The accessible label rendered in the disclosure button. */
+    label: string;
+    /** The decorative icon before the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Whether the nested content is visible. Branches only expand or collapse and are never selectable.
+     * @default false
+     * @bindable
+     */
+    expanded?: boolean;
+    /** Called when a user expands or collapses the branch. */
+    onExpandedChange?: (e: Event, expanded: boolean) => void;
+    /** Disables the disclosure button.
+     * @default false
+     */
+    disabled?: boolean;
+    /** The disclosure button shape. Inherited from the list by default. */
+    shape?: Shapes;
+    /** The DOM reference of the native disclosure button. Additional HTML attributes, including class and id, also target this button.
+     * @type HTMLButtonElement
+     * @bindable
+     */
+    ref?: HTMLButtonElement | null;
+    /** The DOM reference of the wrapper element, the list item that holds the button and the nested list.
+     * @type HTMLLIElement | HTMLDivElement
+     * @bindable
+     */
+    wrapperRef?: HTMLLIElement | HTMLDivElement | null;
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
+     */
+    wrapperAttributes?: HTMLAttributes<HTMLLIElement | HTMLDivElement>;
+    /** Nested ListView content, kept mounted while collapsed to preserve its selection. */
+    children?: Snippet;
+} & Omit<HTMLButtonAttributes, 'children' | 'role' | 'type' | 'value' | 'aria-expanded' | 'aria-controls'>;
 export type ListViewContextConfig = {
     shape: Shapes;
+    as: 'ul' | 'ol' | 'div';
+    selectionMode: SelectionMode;
+    role: AriaRole | undefined;
+    disableTabspot: boolean;
+    /** Whether the list keeps a single tab stop that the arrow keys move. */
+    roving: boolean;
 };
 export type ListViewContextState = {
     selectedItems: string[];
@@ -92,8 +149,14 @@ export type ListViewContextState = {
 };
 export type ListViewContextMethods = {
     handleSelection: (e: MouseEvent, value: string, toggle?: boolean) => void;
-    getChildrenRole: (tag: 'li' | 'a' | 'div') => 'listitem' | 'option' | 'row' | undefined;
-    registerItem: (id: string, value: string, disabled: boolean) => void;
+    getChildrenRole: (tag: 'li' | 'a' | 'button' | 'div') => 'listitem' | 'option' | 'row' | undefined;
+    registerItem: (id: string, getItem: () => {
+        value: string;
+        disabled: boolean;
+        element: HTMLElement | null;
+    }) => void;
     unregisterItem: (id: string) => void;
+    /** True for the first item to ask: it holds the tab stop until Tabspot takes the stop over on mount. */
+    claimTabStop: (id: string) => boolean;
 };
 export type ListViewContext = FSContext<ListViewContextConfig, ListViewContextState, null, ListViewContextMethods>;

package/dist/components/list-view/utils.d.ts

@@ -1,6 +1,16 @@
 import type { ListViewContext, NavigationMode, SelectionMode } from './types.ts';
+import type { Attachment } from 'svelte/attachments';
+import { type TabspotNodeOptions, type TabspotEventListener, type TabspotInstance } from 'tabspot';
 export declare const COMPONENT_NAME = "fslist-view-";
 export declare const TAG: string[];
 export declare const ITEM_TAG: string[];
+export declare const LIST_VIEW_SKIP = "[disabled], [aria-disabled=\"true\"], [hidden], [hidden] *, [inert], [inert] *, [aria-hidden=\"true\"], [aria-hidden=\"true\"] *";
+export declare const getListViewItemContext: () => {
+    readonly as: "li" | "a" | "button" | "div";
+} | null, setListViewItemContext: (context: {
+    readonly as: "li" | "a" | "button" | "div";
+}) => void;
+/** Register roots mounted after the provider starts, and release managed focus on updates/unmount. */
+export declare function attachTabspot(config: TabspotNodeOptions | undefined, onNavigate?: TabspotEventListener, instance?: TabspotInstance): Attachment<HTMLElement>;
 export declare function getRole(tag: 'ul' | 'ol' | 'div', selectionMode: SelectionMode, navigationMode: NavigationMode): 'grid' | 'listbox' | 'list' | undefined;
 export declare const getListViewContext: () => ListViewContext | null, setListViewContext: (context: ListViewContext) => void;

package/dist/components/list-view/utils.js

@@ -1,8 +1,24 @@
 import { PREFIX } from '../../internal/constants.js';
 import { createFSContext } from '../../internal/index.js';
+import { setTabspotAttributes } from 'tabspot';
 export const COMPONENT_NAME = `${PREFIX}list-view-`;
 export const TAG = ['ul', 'ol', 'div'];
-export const ITEM_TAG = ['li', 'a', 'div'];
+export const ITEM_TAG = ['li', 'a', 'button', 'div'];
+export const LIST_VIEW_SKIP = '[disabled], [aria-disabled="true"], [hidden], [hidden] *, [inert], [inert] *, [aria-hidden="true"], [aria-hidden="true"] *';
+export const [getListViewItemContext, setListViewItemContext] = createFSContext();
+/** Register roots mounted after the provider starts, and release managed focus on updates/unmount. */
+export function attachTabspot(config, onNavigate, instance) {
+    return (element) => {
+        if (!config)
+            return;
+        const result = setTabspotAttributes({ element, config });
+        const detach = onNavigate && (result.ok ? (result.instance ?? instance) : undefined)?.subscribe(onNavigate);
+        return () => {
+            detach?.();
+            setTabspotAttributes({ element, config: {} });
+        };
+    };
+}
 export function getRole(tag, selectionMode, navigationMode) {
     if (selectionMode !== 'none') {
         return navigationMode === 'composite' ? 'grid' : 'listbox';