fluentui-svelte 0.1.0

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

@@ -0,0 +1,117 @@
+# Tree View
+
+The Tree View displays hierarchical data in a nested list where each item can be expanded, checked or selected. Items are composed with the TreeViewItem and TreeViewItemContent components — the tree does not accept a data prop.
+
+> **Early access:** The API, features, and behavior of the component are subject to significant changes. We strongly advise against using this component in production environments at this time.
+
+## Usage
+
+```svelte
+<script>
+	import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
+</script>
+
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="fruits" type="branch">
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="banana" disabled>
+				<TreeViewItemContent>Banana</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+	<TreeViewItem id="vegetables">
+		<TreeViewItemContent>Vegetables</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+```
+
+Nesting a TreeView inside a TreeViewItem of type='branch' creates a subtree. Use openItems / checkedItems on the root TreeView (bindable) to control open and checked state programmatically.
+
+## Examples
+
+### Checkable Items
+
+Set `selectionMode="multiple"` to render checkboxes on selectable items.
+
+```svelte
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="fruits" type="branch">
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+</TreeView>
+```
+
+### Controlling Open and Checked State
+
+Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to control state programmatically.
+
+```svelte
+<script>
+	let openItems = $state(['fruits']);
+	let checkedItems = $state([]);
+</script>
+
+<TreeView bind:openItems bind:checkedItems selectionMode="multiple">
+	<TreeViewItem id="fruits" type="branch">
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+</TreeView>
+```
+
+## Component Props (TreeView)
+
+| Name              | Type                                         | Description                                                                                                     |
+| ----------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `ref`             | `HTMLUListElement`                           | Bindable DOM reference of the root ul element.                                                                  |
+| `size`            | `'small' \| 'medium' \| 'large'`             | Visual size of the tree. Default is 'medium'.                                                                   |
+| `navigationMode`  | `'tree' \| 'treegrid'`                       | Keyboard navigation mode. Default is 'tree'.                                                                    |
+| `selectionMode`   | `'single' \| 'multiple'`                     | Selection mode for checkable items. Default is 'multiple'.                                                      |
+| `openItems`       | `string[] \| SvelteSet<string>`              | Bindable list or set of open item ids. Uses SvelteSet when a virtualizer is provided.                           |
+| `checkedItems`    | `string[] \| SvelteSet<string>`              | Bindable list or set of checked item ids. Uses SvelteSet when a virtualizer is provided.                        |
+| `onOpenChange`    | `(e: Event, openItems: string[]) => void`    | Callback fired when an item is expanded or collapsed.                                                           |
+| `onCheckedChange` | `(e: Event, checkedItems: string[]) => void` | Callback fired when an item is checked or unchecked.                                                            |
+| `virtualizer`     | `TreeViewVirtualizer`                        | Optional adapter for windowing or virtual list libraries. When provided, only the rendered slice is in the DOM. |
+| `children`        | `Snippet`                                    | The TreeViewItem children of the tree.                                                                          |
+
+## Component Props (TreeViewItem)
+
+| Name              | Type                                                         | Description                                                                         |
+| ----------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------- |
+| `id`              | `string`                                                     | Unique identifier of the item. Required for open and checked state tracking.        |
+| `type`            | `'item' \| 'branch'`                                         | Whether the item is a leaf ('item') or a branch that can contain a nested TreeView. |
+| `ref`             | `HTMLLIElement`                                              | Bindable DOM reference of the li element.                                           |
+| `value`           | `string \| number`                                           | Optional value associated with the item.                                            |
+| `text`            | `string`                                                     | Optional accessible text label used by the tree.                                    |
+| `open`            | `boolean`                                                    | Bindable open state for type='branch' items.                                        |
+| `checked`         | `boolean`                                                    | Bindable checked state for selectable items.                                        |
+| `indeterminate`   | `boolean`                                                    | Whether the item is in an indeterminate check state.                                |
+| `disabled`        | `boolean`                                                    | Disables the item.                                                                  |
+| `index`           | `number`                                                     | Explicit index — used with a virtualizer to keep keyboard navigation in sync.       |
+| `onOpenChange`    | `(e: Event, data: { id: string; open: boolean }) => void`    | Callback fired when this item is expanded or collapsed.                             |
+| `onCheckedChange` | `(e: Event, data: { id: string; checked: boolean }) => void` | Callback fired when this item is checked or unchecked.                              |
+
+## Component Props (TreeViewItemContent)
+
+| Name         | Type                   | Description                                                 |
+| ------------ | ---------------------- | ----------------------------------------------------------- |
+| `ref`        | `HTMLDivElement`       | Bindable DOM reference of the layout element.               |
+| `expandIcon` | `Snippet \| Component` | Custom icon rendered for the expand or collapse affordance. |
+| `iconBefore` | `Snippet \| Component` | Icon rendered before the item text.                         |
+| `iconAfter`  | `Snippet \| Component` | Icon rendered after the item text.                          |
+| `aside`      | `Snippet \| Component` | Content rendered on the trailing side of the row.           |
+| `actions`    | `Snippet \| Component` | Interactive actions rendered on hover or focus.             |
+| `children`   | `Snippet`              | The item label content.                                     |

package/dist/components/tree-view/tree-view-item-content.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { Checkbox } from '../../index.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import ChevronRightRegular from 'fluentui-icons-svelte/ChevronRightRegular.svelte';
+	import { getTreeViewContext, getTreeViewItemContext } from './tree-view.svelte.js';
+	import type { TreeViewItemLayoutProps } from './types.js';
+
+	let { actions, aside, expandIcon, iconBefore, iconAfter, ref, children, ...attributes }: TreeViewItemLayoutProps =
+		$props();
+
+	const TREE_VIEW_CONTEXT = getTreeViewContext();
+	const ITEM_CONTEXT = getTreeViewItemContext();
+
+	if (!TREE_VIEW_CONTEXT) throw new Error('TreeViewItemLayout must be used within a TreeView');
+	if (!ITEM_CONTEXT) throw new Error('TreeViewItemContent must be used within a TreeViewItem');
+
+	const { config, methods } = TREE_VIEW_CONTEXT;
+
+	const { size } = config;
+
+	const { handleCheck } = methods;
+</script>
+
+<!-- Presentational row. The interactive element is the parent treeitem (`<li>`); this
+	div is plain markup so it is not exposed as a separate control. -->
+<div
+	class={['fs-tree-view-item-content', `size-${size}`, ITEM_CONTEXT.disabled && 'disabled']}
+	style="--depth: {ITEM_CONTEXT.depth}"
+	bind:this={ref}
+	{...attributes}
+>
+	{#if expandIcon}
+		<span class="fs-tree-view-item-expand-icon">
+			<RenderSoC SoC={expandIcon} />
+		</span>
+	{/if}
+
+	{#if ITEM_CONTEXT.type === 'branch'}
+		<ChevronRightRegular width="1.2rem" class="branch-indicator" />
+	{/if}
+
+	<Checkbox
+		hidden
+		checked={ITEM_CONTEXT.checked}
+		indeterminate={ITEM_CONTEXT.indeterminate}
+		disabled={ITEM_CONTEXT.disabled}
+		wrapperAttributes={{
+			onclick: (e) => {
+				e.stopPropagation();
+				if (ITEM_CONTEXT.disabled) {
+					e.preventDefault();
+					return;
+				}
+				handleCheck(e, ITEM_CONTEXT.id, !ITEM_CONTEXT.checked);
+			}
+		}}
+	/>
+
+	{#if iconBefore}
+		<span class="fs-tree-view-item-icon-before">
+			<RenderSoC SoC={iconBefore} />
+		</span>
+	{/if}
+
+	<span class="fs-tree-view-item-label" id="{ITEM_CONTEXT.id}-label">
+		{@render children?.()}
+	</span>
+
+	{#if iconAfter}
+		<span class="fs-tree-view-item-icon-after">
+			<RenderSoC SoC={iconAfter} />
+		</span>
+	{/if}
+
+	{#if aside}
+		<span class="fs-tree-view-item-aside">
+			<RenderSoC SoC={aside} />
+		</span>
+	{/if}
+
+	{#if actions}
+		<span class="fs-tree-view-item-actions">
+			<RenderSoC SoC={actions} />
+		</span>
+	{/if}
+</div>
+
+<style>
+	.fs-tree-view-item-content {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		position: relative;
+		border-radius: var(--fs-control-border-radius);
+		font-size: var(--fs-body-font-size);
+		cursor: pointer;
+		outline: none;
+		background: none;
+		border: none;
+		width: 100%;
+		text-align: left;
+		user-select: none;
+		&.size-small {
+			font-size: var(--fs-body2-font-size);
+			padding: 0.125rem 0.5rem;
+			padding-left: calc(0.5rem + 1.5rem * var(--depth, 0));
+		}
+		&.size-medium {
+			font-size: var(--fs-body-font-size);
+			padding: 0.25rem 0.625rem;
+			padding-left: calc(0.625rem + 1.5rem * var(--depth, 0));
+		}
+		&.size-large {
+			font-size: var(--fs-subtitle2-font-size);
+			padding: 0.375rem 0.75rem;
+			padding-left: calc(0.75rem + 1.5rem * var(--depth, 0));
+		}
+
+		&::after {
+			content: '';
+			display: block;
+			width: 0.188rem;
+			height: 0;
+			background-color: var(--fs-accent-fill-default);
+			position: absolute;
+			left: 0;
+			top: 50%;
+			transform: translateY(-50%);
+			border-radius: 1rem;
+			transition: height 0.2s ease-in-out;
+		}
+
+		&:hover {
+			background-color: var(--fs-subtle-fill-secondary);
+		}
+
+		&.selected {
+			background-color: var(--fs-subtle-fill-secondary);
+
+			&::after {
+				height: 50%;
+			}
+		}
+
+		&.disabled {
+			opacity: 0.4;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+
+		:global(.tree-view-item-icon) {
+			width: 1.25rem;
+			height: 1.25rem;
+			flex-shrink: 0;
+			fill: currentColor;
+		}
+	}
+</style>

package/dist/components/tree-view/tree-view-item-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TreeViewItemLayoutProps } from './types.ts';
+declare const TreeViewItemContent: import("svelte").Component<TreeViewItemLayoutProps, {}, "">;
+type TreeViewItemContent = ReturnType<typeof TreeViewItemContent>;
+export default TreeViewItemContent;

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

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { PREFIX } from '../../internal/constants.js';
+	import {
+		getTreeViewDepth,
+		getTreeViewContext,
+		setTreeViewItemContext,
+		getTreeViewItemContext
+	} from './tree-view.svelte.js';
+	import type { TreeViewItemContext, TreeViewItemProps } from './types.js';
+
+	const COMPONENT_NAME = 'TreeViewItem';
+	const FALLBACK_ID = $props.id();
+	const ID = `${PREFIX}-${COMPONENT_NAME}-${FALLBACK_ID}`;
+
+	const context = getTreeViewContext();
+
+	const itemContext = getTreeViewItemContext();
+
+	if (!context) throw new Error('TreeViewItem must be used within a TreeView');
+
+	// Honor the `checked` and `open` props if provided, otherwise derive them from the parent tree's state.
+	const { checkedItems, openItems } = context.state;
+
+	let {
+		ref,
+		index,
+		id = ID,
+		disabled,
+		value = id,
+		indeterminate,
+		type = 'item',
+		open = (openItems instanceof Set ? openItems.has(id) : openItems.includes(id)) || undefined,
+		checked = (checkedItems instanceof Set ? checkedItems.has(id) : checkedItems.includes(id)) || undefined,
+		children,
+		...attributes
+	}: TreeViewItemProps = $props();
+
+	const depth = getTreeViewDepth() ?? 0;
+
+	const { config, methods } = context;
+
+	const { size } = config;
+
+	const itemState: TreeViewItemContext = {
+		get disabled() {
+			return itemContext?.disabled ?? disabled;
+		},
+		get depth() {
+			return depth;
+		},
+		get value() {
+			return value;
+		},
+		get id() {
+			return id;
+		},
+		get type() {
+			return type;
+		},
+		get parentId() {
+			return itemContext?.id;
+		},
+		get open() {
+			return open;
+		},
+		set open(v) {
+			open = v;
+		},
+		get checked() {
+			return checked;
+		},
+		set checked(v) {
+			checked = v;
+		},
+		get indeterminate() {
+			return indeterminate;
+		},
+		set indeterminate(v) {
+			indeterminate = v;
+		}
+	};
+
+	setTreeViewItemContext(itemState);
+
+	// Virtualized tree: the windowing library mounts/unmounts (and may reuse) rows as it
+	// scrolls, so register via an effect that re-runs when the identity changes and cleans
+	// up the previous id.
+	if (config.virtualized && !itemContext) {
+		$effect(() => {
+			const _id: string = id;
+
+			methods.registerItem(itemState);
+			return () => methods.unregisterItem(_id);
+		});
+	} else {
+		// Static tree: register this node once so a branch's tri-state can be derived from its
+		// descendants.
+		onMount(() => {
+			methods.registerItem(itemState);
+			return () => methods.unregisterItem(id);
+		});
+	}
+
+	const isBranch = $derived(type === 'branch');
+	const isVirtualRoot = $derived(config.virtualized && !itemContext);
+
+	const handleClick = (e: MouseEvent) => {
+		if (itemState.disabled) return;
+		// Ignore clicks bubbling up from a descendant treeitem's own row.
+		if ((e.target as HTMLElement).closest('.fs-tree-view-item') !== e.currentTarget) return;
+		if (isBranch) {
+			if (open) methods.closeItem(e, id);
+			else methods.openItem(e, id);
+		} else {
+			methods.handleCheck(e, id, !checked);
+		}
+	};
+
+	const handleKeydown = async (e: KeyboardEvent) => {
+		if (e.target !== e.currentTarget || itemState.disabled) return;
+
+		switch (e.key) {
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				methods.handleCheck(e, id, !checked);
+				break;
+			case 'ArrowRight':
+				if (isBranch && !open) {
+					methods.openItem(e, id);
+
+					// NOTE: This apparently works, maybe the problem is that TabSpot is losing the order of the items...
+					// TODO: investigate further.
+					if (config.virtualized) {
+						await tick();
+
+						const firstChildElement = ref?.querySelector(
+							`:scope .fs-tree-view-item:not([aria-disabled="true"])[aria-level="${depth + 2}"]`
+						) as HTMLElement;
+
+						firstChildElement?.focus();
+						return;
+					}
+				}
+				break;
+			case 'ArrowLeft':
+				if (itemContext?.id) {
+					methods.closeItem(e, itemContext?.id);
+				}
+				break;
+		}
+	};
+</script>
+
+<li
+	{id}
+	class={['fs-tree-view-item', `fs-tree-item-size-${size}`, { open }]}
+	style="--depth: {depth}"
+	role="treeitem"
+	aria-expanded={type === 'branch' ? open : undefined}
+	aria-checked={indeterminate ? 'mixed' : checked}
+	aria-level={depth + 1}
+	aria-labelledby="{id}-label"
+	data-index={isVirtualRoot ? index : undefined}
+	data-value={value}
+	aria-disabled={itemState.disabled ? 'true' : undefined}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	bind:this={ref}
+	{...attributes}
+>
+	{@render children?.()}
+</li>
+
+<style>
+	.fs-tree-view-item {
+		list-style: none;
+		display: flex;
+		flex-direction: column;
+		/* The treeitem itself is the focus target; suppress its outline and show the
+		   focus ring on its row instead. */
+		outline: none;
+		&:not(.open) :global(.fs-tree-view) {
+			height: 0;
+			overflow: hidden;
+			opacity: 0;
+		}
+		&:focus-visible > :global(.fs-tree-view-item-content) {
+			outline: 2px solid var(--fs-focus-stroke-outer);
+			outline-offset: 2px;
+		}
+		&.open :global(.branch-indicator) {
+			rotate: 90deg;
+		}
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { TreeViewItemProps } from './types.ts';
+declare const TreeViewItem: import("svelte").Component<TreeViewItemProps, {}, "">;
+type TreeViewItem = ReturnType<typeof TreeViewItem>;
+export default TreeViewItem;

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

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+	import { getTabspotAttributes, tabspotVirtual } from 'tabspot';
+	import {
+		getTreeViewContext,
+		getTreeViewDepth,
+		setTreeViewContext,
+		setTreeViewDepth,
+		getTreeViewItemContext,
+		traversalSync,
+		traversalSyncSingleSelection
+	} from './tree-view.svelte.js';
+	import type { TreeViewProps, TreeViewContext, TreeViewNode } from './types.js';
+
+	const CONTEXT = getTreeViewContext();
+	const TREE_NODES = new SvelteMap<string, TreeViewNode>();
+	const DEPTH = getTreeViewDepth() || 0;
+	const ITEM_CONTEXT = getTreeViewItemContext();
+	const IS_SUB_TREE = $derived(!!CONTEXT);
+
+	if (CONTEXT) setTreeViewDepth(DEPTH + 1);
+
+	let {
+		virtualizer,
+		navigationMode = CONTEXT?.config.navigationMode ?? 'tree',
+		checkedItems = $bindable(CONTEXT?.state.checkedItems ?? (virtualizer !== undefined ? new SvelteSet<string>() : [])),
+		openItems = $bindable(CONTEXT?.state.openItems ?? (virtualizer !== undefined ? new SvelteSet<string>() : [])),
+		ref = $bindable(),
+		onOpenChange,
+		onCheckedChange,
+		selectionMode = CONTEXT?.state.selectionMode ?? 'multiple',
+		size = 'medium',
+		children,
+		...attributes
+	}: TreeViewProps = $props();
+
+	const config: TreeViewContext['config'] = $derived({
+		navigationMode: CONTEXT?.config.navigationMode || navigationMode,
+		size: CONTEXT?.config.size || size,
+		virtualized: CONTEXT?.config.virtualized ?? !!virtualizer,
+		virtualCount: CONTEXT?.config.virtualCount ?? virtualizer?.size
+	});
+
+	let forceVirtualRender = $state(false);
+
+	const _state: TreeViewContext['state'] = {
+		get openItems() {
+			return openItems;
+		},
+		get checkedItems() {
+			return checkedItems;
+		},
+		get selectionMode() {
+			return selectionMode;
+		},
+		get TREE_NODES() {
+			return CONTEXT?.state.TREE_NODES ?? TREE_NODES;
+		},
+		get forceVirtualRender() {
+			return CONTEXT?.state.forceVirtualRender ?? forceVirtualRender;
+		},
+		set forceVirtualRender(v) {
+			if (CONTEXT?.state.forceVirtualRender) {
+				CONTEXT.state.forceVirtualRender = v;
+			} else {
+				forceVirtualRender = v;
+			}
+		}
+	};
+
+	const events: TreeViewContext['events'] = $derived({
+		onCheckedChange: CONTEXT?.events.onCheckedChange ?? ((e, data) => onCheckedChange?.(e, data)),
+		onOpenChange: CONTEXT?.events.onOpenChange ?? ((e, data) => onOpenChange?.(e, data))
+	});
+
+	const methods: TreeViewContext['methods'] = {
+		handleCheck: async (e, id, checked) => {
+			if (virtualizer) {
+				_state.forceVirtualRender = true;
+				await tick();
+			}
+
+			if (_state.selectionMode === 'single') {
+				traversalSyncSingleSelection(id, _state.TREE_NODES, checkedItems);
+				return;
+			}
+
+			traversalSync(id, _state.TREE_NODES, checkedItems, checked);
+		},
+		openItem: (e, id) => {
+			if (openItems instanceof SvelteSet) {
+				openItems.add(id);
+			} else {
+				openItems = [...openItems, id];
+			}
+			const node = _state.TREE_NODES.get(id)!;
+
+			node.open = true;
+		},
+		closeItem: (e, id) => {
+			if (openItems instanceof SvelteSet) {
+				openItems.delete(id);
+			} else {
+				openItems = openItems.filter((itemId) => itemId !== id);
+			}
+			const node = _state.TREE_NODES.get(id)!;
+
+			node.open = false;
+
+			// If
+			if (virtualizer && _state.forceVirtualRender) {
+				_state.forceVirtualRender = false;
+			}
+		},
+		registerItem: (node) => {
+			_state.TREE_NODES.set(node.id, node);
+		},
+		unregisterItem: (id) => {
+			_state.TREE_NODES.delete(id);
+		}
+	};
+
+	const treeViewContext: TreeViewContext = {
+		get config() {
+			return config;
+		},
+		get state() {
+			return _state;
+		},
+		get events() {
+			return events;
+		},
+		get methods() {
+			return methods;
+		}
+	};
+
+	setTreeViewContext(treeViewContext);
+
+	const tabspotAttributes = $derived(
+		!IS_SUB_TREE
+			? getTabspotAttributes({
+					root: {
+						manageSpecialKeys: true
+					},
+					mover: { axis: 'vertical', items: '.fs-tree-view-item', skip: '[aria-disabled="true"]' }
+				})
+			: getTabspotAttributes({
+					mover: { axis: 'vertical', items: '.fs-tree-view-item', skip: '[aria-disabled="true"]' },
+					grouper: { enterDirection: 'right', exitDirection: 'left' }
+				})
+	);
+
+	let typeBuffer = $state('');
+	let typeTimer: ReturnType<typeof setTimeout> | undefined = $state();
+
+	// APG type-ahead: typing printable characters moves focus to the next visible
+	// treeitem whose label starts with the typed string. Only the root tree listens;
+	// nav/activation keys are handled by tabspot and the treeitems themselves.
+	const handleTypeahead = (e: KeyboardEvent) => {
+		if (IS_SUB_TREE || !ref) return;
+		if (e.key.length !== 1 || e.key === ' ' || e.altKey || e.ctrlKey || e.metaKey) return;
+
+		typeBuffer += e.key.toLowerCase();
+		clearTimeout(typeTimer);
+		typeTimer = setTimeout(() => {
+			typeBuffer = '';
+		}, 500);
+
+		const items = Array.from(ref.querySelectorAll<HTMLElement>('.fs-tree-view-item')).filter((el) =>
+			el.checkVisibility ? el.checkVisibility() : el.offsetParent !== null
+		);
+		const start = items.indexOf(document.activeElement as HTMLElement);
+
+		for (let i = 1; i <= items.length; i++) {
+			const item = items[(start + i) % items.length];
+			const label = item.querySelector('.fs-tree-view-item-label')?.textContent?.trim().toLowerCase();
+			if (label?.startsWith(typeBuffer)) {
+				item.focus();
+				break;
+			}
+		}
+	};
+
+	// Add tabspot virtualizer for correct focus management
+	onMount(() => {
+		if (!IS_SUB_TREE || !ref || !virtualizer) return;
+		return tabspotVirtual(ref, {
+			scrollToIndex: (index) => virtualizer.scrollToIndex?.(index),
+			count: () => virtualizer.size
+		});
+	});
+</script>
+
+<!-- Render only when necessary (virtualizer perf) -->
+{#if _state.forceVirtualRender || (config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !config.virtualized}
+	<ul
+		class="fs-tree-view"
+		role={IS_SUB_TREE ? 'group' : 'tree'}
+		aria-multiselectable={selectionMode !== 'single'}
+		onkeydown={!IS_SUB_TREE ? handleTypeahead : undefined}
+		bind:this={ref}
+		{...tabspotAttributes}
+		{...attributes}
+	>
+		{@render children?.()}
+	</ul>
+{/if}
+
+<style>
+	.fs-tree-view {
+		display: flex;
+		flex-direction: column;
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		gap: 0.125rem;
+	}
+</style>