fluentui-svelte 0.2.0 → 0.2.1

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

@@ -46,10 +46,19 @@ The `onChange` event is triggered whenever the content of the textarea changes.
 
 ## Component Props
 
-| Name               | Type       | Description                                                                                                        |
-| ------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------ |
-| `placeholder`      | `string`   | The placeholder text for the textarea.                                                                             |
-| `resize`           | `string`   | Controls the resizing behavior of the textarea. Possible values: `'none'`, `'both'`, `'horizontal'`, `'vertical'`. |
-| `onChange`         | `function` | Event handler for when the content of the textarea changes.                                                        |
-| `element`          |            | The DOM reference of the textarea element.                                                                         |
-| Element Attributes |            | All other attributes that can be applied to the textarea element.                                                  |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TextAreaProps -->
+
+| Name                             | Type                                                               | Default      | Description                                      |
+| -------------------------------- | ------------------------------------------------------------------ | ------------ | ------------------------------------------------ |
+| `value` _bindable_               | `string`                                                           | `''`         | The current value of the textarea.               |
+| `ref` _bindable_                 | `HTMLElement`                                                      |              | The DOM reference of the textarea element.       |
+| `placeholder`                    | `string`                                                           |              | The placeholder text for the textarea.           |
+| `resize`                         | `'none'` &#124; `'both'` &#124; `'horizontal'` &#124; `'vertical'` | `'vertical'` | Configures the resize behavior of the textarea.  |
+| `onChange`                       | `(e: Event) => void`                                               |              | Callback function for the change event.          |
+| `disabled`                       | `boolean`                                                          | `false`      | Disables the user interaction.                   |
+| `wrapperAttributes`              | `HTMLAttributes`                                                   |              | The attributes to spread on the wrapper element. |
+| `wrapperRef` _bindable_          | `HTMLDivElement`                                                   |              | The DOM reference of the wrapper element.        |
+| `SvelteHTMLElements['textarea']` |                                                                    |              |                                                  |
+
+<!-- /props:TextAreaProps -->

package/dist/components/time-picker/docs/llms.md

@@ -35,13 +35,23 @@ Use `hideHours`, `hideMinutes`, or `hideSeconds` to hide individual columns. By
 
 ## Component Props
 
-| Name           | Type                        | Description                                                                     |
-| -------------- | --------------------------- | ------------------------------------------------------------------------------- |
-| `value`        | bindable `string`           | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).     |
-| `format`       | `12 \| 24`                  | Clock format: `24` (00–23) or `12` (01–12 with an AM/PM column). Default: `24`. |
-| `open`         | bindable `boolean`          | Whether the picker flyout is open.                                              |
-| `hideHours`    | `boolean`                   | Hide the hours column.                                                          |
-| `hideMinutes`  | `boolean`                   | Hide the minutes column.                                                        |
-| `hideSeconds`  | `boolean`                   | Hide the seconds column.                                                        |
-| `element`      | bindable `HTMLElement`      | The DOM reference of the time picker root element.                              |
-| `inputElement` | bindable `HTMLInputElement` | The DOM reference of the underlying input element.                              |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TimePickerProps -->
+
+| Name                          | Type                  | Default           | Description                                                                                         |
+| ----------------------------- | --------------------- | ----------------- | --------------------------------------------------------------------------------------------------- |
+| `value` _bindable_            | `string`              | `''`              | Selected time as 24h `HH:mm` or `HH:mm:ss` (matches `<input type="time">`).                         |
+| `format`                      | `12` &#124; `24`      | `24`              | Clock format: `24` (00-23) or `12` (01-12 with an AM/PM column).                                    |
+| `open` _bindable_             | `boolean`             | `false`           | Controls the open state of the picker.                                                              |
+| `hideHours`                   | `boolean`             | `false`           | Removes the hour column.                                                                            |
+| `hideMinutes`                 | `boolean`             | `false`           | Removes the minute column.                                                                          |
+| `hideSeconds`                 | `boolean`             | `false`           | Removes the second column.                                                                          |
+| `element` _bindable_          | `HTMLButtonElement`   |                   | The DOM reference of the trigger button.                                                            |
+| `wrapperRef` _bindable_       | `HTMLDivElement`      |                   | The DOM reference of the element wrapping the trigger and its input.                                |
+| `wrapperAttributes`           | `HTMLAttributes`      |                   | The attributes to spread on the wrapper element.                                                    |
+| `inputElement` _bindable_     | `HTMLInputElement`    |                   | The DOM reference of the underlying input element.                                                  |
+| `inputProps`                  | `HTMLInputAttributes` |                   | HTML attributes for the underlying input element. Give it a `name` to submit the value with a form. |
+| `popupLabel`                  | `string`              | `'Choose a time'` | The accessible name of the popup, which is announced as a dialog.                                   |
+| Element Attributes (`button`) |                       |                   |                                                                                                     |
+
+<!-- /props:TimePickerProps -->

package/dist/components/toggle-switch/docs/llms.md

@@ -28,12 +28,16 @@ A toggle switch can be labeled, checked, or disabled.
 
 ## Component Props
 
-| Name               | Type                  | Description                                                  |
-| ------------------ | --------------------- | ------------------------------------------------------------ |
-| `ref`              | `HTMLInputElement`    | Get the DOM reference of the input element.                  |
-| `label`            | `string`              | The label for the toggle switch.                             |
-| `labelAttributes`  | `HTMLLabelAttributes` | Attributes to be spread on the label wrapper element.        |
-| `labelElement`     | `HTMLLabelElement`    | Get the DOM reference of the label element.                  |
-| `disabled`         | `boolean`             | Whether the toggle switch is disabled.                       |
-| `checked`          | `boolean`             | Whether the toggle switch is checked (on).                   |
-| Element Attributes | `object`              | Additional attributes to apply to the toggle switch element. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ToggleSwitchProps -->
+
+| Name                          | Type                  | Default | Description                                                |
+| ----------------------------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `checked` _bindable_          | `boolean`             |         | Whether the switch is on.                                  |
+| `ref` _bindable_              | `HTMLInputElement`    |         | The DOM reference of the input element.                    |
+| `label`                       | `string`              |         | The label displayed next to the input element.             |
+| `labelAttributes`             | `HTMLLabelAttributes` |         | The attributes to spread on the label wrapping the switch. |
+| `labelElement`                | `HTMLLabelElement`    |         | The DOM reference of the label element.                    |
+| `SvelteHTMLElements['input']` |                       |         |                                                            |
+
+<!-- /props:ToggleSwitchProps -->

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

@@ -62,13 +62,27 @@ The relationship prop allows you to specify the relationship between the tooltip
 
 ## Component Props
 
-| Name               | Type                             | Description                                                                                                     |
-| ------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `content`          | `string \| Snippet \| Component` | The content to be displayed in the tooltip. This can be a string, a Svelte component, or a Snippet.             |
-| `positionConfig`   | `Partial<ComputePositionConfig>` | The position configuration of the tooltip. This allows you to define custom offsets, middleware, and more.      |
-| `withArrow`        | `boolean`                        | Whether the tooltip should display an arrow pointing towards the target element.                                |
-| `openDelay`        | `number`                         | The delay, in milliseconds, before the tooltip is shown after the user hovers over the target element.          |
-| `hideDelay`        | `number`                         | The delay, in milliseconds, before the tooltip is hidden after the user stops hovering over the target element. |
-| `onVisibleChange`  | `(visible: boolean) => void`     | A callback function that is called whenever the visibility of the tooltip changes.                              |
-| `element`          | `HTMLElement`                    | The DOM reference of the tooltip element.                                                                       |
-| Element Attributes |                                  | All other attributes that can be applied to the tooltip element.                                                |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TooltipProps -->
+
+| Name                                                | Type                                                     | Default            | Description                                                                                              |
+| --------------------------------------------------- | -------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------- |
+| `content`                                           | `string` &#124; `Snippet` &#124; `Component`             | `'I am a tooltip'` | The content to display in the tooltip.                                                                   |
+| `class`                                             | `string`                                                 |                    | The class to apply to the tooltip.                                                                       |
+| `ref` _bindable_                                    | `HTMLElement`                                            |                    | The DOM reference of the tooltip element.                                                                |
+| `target`                                            | `HTMLElement`                                            |                    | The element the tooltip is anchored to. Falls back to the rendered children.                             |
+| `open` _bindable_                                   | `boolean`                                                | `false`            | Controls the open state of the tooltip.                                                                  |
+| `withArrow`                                         | `boolean`                                                | `false`            | Whether the tooltip has an arrow pointing at its target.                                                 |
+| `positionConfig`                                    | `ComputePositionConfig`                                  |                    | The position configuration handed over to floating-ui.                                                   |
+| `openDelay`                                         | `number`                                                 | `100`              | The delay in milliseconds before the tooltip is shown.                                                   |
+| `hideDelay`                                         | `number`                                                 | `300`              | The delay in milliseconds before the tooltip is hidden.                                                  |
+| `onVisibleChange`                                   | `(visible: boolean) => void`                             |                    | Callback function that is called when the visibility of the tooltip changes.                             |
+| `relationship`                                      | `'label'` &#124; `'description'` &#124; `'inaccessible'` | `'label'`          | The relationship of the tooltip to its target, which decides how it is announced.                        |
+| `placement`                                         | `Placement`                                              |                    | Where the tooltip is placed relative to its target.                                                      |
+| `id`                                                | `string`                                                 |                    | The id of the tooltip element, referenced by the target. Falls back to a generated id.                   |
+| `preventClose` _bindable_                           | `boolean`                                                | `false`            | Keeps the tooltip open until it is closed by hand.                                                       |
+| `animationFrame`                                    | `boolean`                                                | `false`            | Repositions the tooltip on every animation frame, for a target that keeps moving.                        |
+| `children`                                          | `Snippet`                                                |                    | The target of the tooltip. It receives the ARIA attributes and the attachment to spread on your element. |
+| `HTMLAttributes<HTMLDivElement>` without `children` |                                                          |                    |                                                                                                          |
+
+<!-- /props:TooltipProps -->

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

@@ -74,44 +74,62 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 
 ## 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.                                                                          |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TreeViewProps -->
+
+| Name                                                | Type                                         | Default      | Description                                                                          |
+| --------------------------------------------------- | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
+| `ref` _bindable_                                    | `HTMLUListElement`                           |              | The DOM reference of the tree element.                                               |
+| `size`                                              | `'small'` &#124; `'medium'` &#124; `'large'` | `'medium'`   | The size of every item in the tree.                                                  |
+| `navigationMode`                                    | `'tree'` &#124; `'treegrid'`                 | `'tree'`     | Whether the tree takes a single tab stop, or every row is reachable on its own.      |
+| `onOpenChange`                                      | `(e: Event, openItems: string[]) => void`    |              | Called whenever a branch opens or closes.                                            |
+| `selectionMode`                                     | `'single'` &#124; `'multiple'`               | `'multiple'` | How many items can be checked at a time.                                             |
+| `onCheckedChange`                                   | `(e: Event, checkedItems: string[]) => void` |              | Called whenever an item is checked or unchecked.                                     |
+| `virtualizer`                                       | `TreeViewVirtualizer`                        |              | Bridge to a windowing library. Only the rendered slice of items lives in the DOM.    |
+| `openItems` _bindable_                              | `string[]` &#124; `SvelteSet<string>`        |              | The ids of the open branches. A `SvelteSet` is required when a `virtualizer` is set. |
+| `checkedItems` _bindable_                           | `string[]` &#124; `SvelteSet<string>`        |              | The ids of the checked items. A `SvelteSet` is required when a `virtualizer` is set. |
+| `children`                                          | `Snippet`                                    |              | The items of the tree.                                                               |
+| `TreeViewVirtualProps` &#124; `TreeViewStaticProps` |                                              |              |                                                                                      |
+| Element Attributes (`ul`)                           |                                              |              |                                                                                      |
+
+<!-- /props:TreeViewProps -->
 
 ## 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.                              |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TreeViewItemProps -->
+
+| Name                      | Type                                                         | Default  | Description                                                                            |
+| ------------------------- | ------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
+| `id`                      | `string`                                                     |          | The id of the item, used by the tree to track its state. Falls back to a generated id. |
+| `type`                    | `'item'` &#124; `'branch'`                                   | `'item'` | Whether the item holds children, and can therefore be opened.                          |
+| `ref`                     | `HTMLLIElement`                                              |          | The DOM reference of the item element.                                                 |
+| `value`                   | `string` &#124; `number`                                     | `id`     | The value reported by the tree events. Falls back to the id of the item.               |
+| `text`                    | `string`                                                     |          | The label of the item, used by the type-ahead navigation.                              |
+| `open`                    | `boolean`                                                    |          | Whether the branch is open.                                                            |
+| `checked`                 | `boolean`                                                    |          | Whether the item is checked.                                                           |
+| `indeterminate`           | `boolean`                                                    |          | Renders the checkbox in its mixed state, when only some children are checked.          |
+| `disabled`                | `boolean`                                                    |          | Disables the user interaction.                                                         |
+| `index`                   | `number`                                                     |          | The real index of the item in the data set. Required when the tree is virtualized.     |
+| `onOpenChange`            | `(e: Event, data: { id: string; open: boolean }) => void`    |          | Called when this branch opens or closes.                                               |
+| `onCheckedChange`         | `(e: Event, data: { id: string; checked: boolean }) => void` |          | Called when this item is checked or unchecked.                                         |
+| Element Attributes (`li`) |                                                              |          |                                                                                        |
+
+<!-- /props:TreeViewItemProps -->
 
 ## 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.                                     |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:TreeViewItemLayoutProps -->
+
+| Name                       | Type                         | Default | Description                                                           |
+| -------------------------- | ---------------------------- | ------- | --------------------------------------------------------------------- |
+| `ref`                      | `HTMLDivElement`             |         | The DOM reference of the layout element.                              |
+| `expandIcon`               | `Snippet` &#124; `Component` |         | Custom icon for the control that opens a branch.                      |
+| `iconBefore`               | `Snippet` &#124; `Component` |         | Content rendered before the label.                                    |
+| `iconAfter`                | `Snippet` &#124; `Component` |         | Content rendered after the label.                                     |
+| `aside`                    | `Snippet` &#124; `Component` |         | Content pinned to the end of the row.                                 |
+| `actions`                  | `Snippet` &#124; `Component` |         | Content pinned to the end of the row, revealed on hover and on focus. |
+| Element Attributes (`div`) |                              |         |                                                                       |
+
+<!-- /props:TreeViewItemLayoutProps -->

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

@@ -16,7 +16,7 @@
 
 	const { config, methods } = TREE_VIEW_CONTEXT;
 
-	const { size } = config;
+	const size = $derived(config.size);
 
 	const { handleCheck } = methods;
 </script>

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

@@ -40,9 +40,9 @@
 
 	const { config, methods } = context;
 
-	const { size } = config;
+	const size = $derived(config.size);
 
-	const itemState: TreeViewItemContext = {
+	const itemState: TreeViewItemContext = $state({
 		get disabled() {
 			return itemContext?.disabled ?? disabled;
 		},
@@ -79,7 +79,7 @@
 		set indeterminate(v) {
 			indeterminate = v;
 		}
-	};
+	});
 
 	setTreeViewItemContext(itemState);
 

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

@@ -35,106 +35,102 @@
 		...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;
+	const treeViewContext: TreeViewContext = $state({
+		config: {
+			get navigationMode() {
+				return CONTEXT?.config.navigationMode || navigationMode;
+			},
+			get size() {
+				return CONTEXT?.config.size || size;
+			},
+			get virtualized() {
+				return CONTEXT?.config.virtualized ?? !!virtualizer;
+			},
+			get virtualCount() {
+				return CONTEXT?.config.virtualCount ?? virtualizer?.size;
 			}
-
-			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;
+		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) {
+					CONTEXT.state.forceVirtualRender = v;
+				} else {
+					forceVirtualRender = v;
+				}
 			}
 		},
-		registerItem: (node) => {
-			_state.TREE_NODES.set(node.id, node);
+		events: {
+			onCheckedChange: CONTEXT?.events.onCheckedChange ?? ((e, data) => onCheckedChange?.(e, data)),
+			onOpenChange: CONTEXT?.events.onOpenChange ?? ((e, data) => onOpenChange?.(e, data))
 		},
-		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;
+		methods: {
+			handleCheck: async (e, id, checked) => {
+				const { state } = treeViewContext;
+
+				if (virtualizer) {
+					state.forceVirtualRender = true;
+					await tick();
+				}
+
+				if (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 = treeViewContext.state.TREE_NODES.get(id)!;
+
+				node.open = true;
+			},
+			closeItem: (e, id) => {
+				const { state } = treeViewContext;
+
+				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) => {
+				treeViewContext.state.TREE_NODES.set(node.id, node);
+			},
+			unregisterItem: (id) => {
+				treeViewContext.state.TREE_NODES.delete(id);
+			}
 		}
-	};
+	});
 
 	setTreeViewContext(treeViewContext);
 
@@ -194,7 +190,7 @@
 </script>
 
 <!-- Render only when necessary (virtualizer perf) -->
-{#if _state.forceVirtualRender || (config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !config.virtualized}
+{#if treeViewContext.state.forceVirtualRender || (treeViewContext.config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !treeViewContext.config.virtualized}
 	<ul
 		class="fs-tree-view"
 		role={IS_SUB_TREE ? 'group' : 'tree'}

package/dist/providers/fluentui-svelte/fluentui-svelte.svelte

@@ -20,21 +20,19 @@
 	// Syncing
 	let reducedMotion = $derived(userReducedMotion.current ?? prefersReducedMotion.current);
 
-	const _state: FSProviderContext['state'] = {
-		get tabspotInstance() {
-			return tabspotInstance;
-		},
-		get reducedMotion() {
-			return reducedMotion;
-		},
-		get theme() {
-			return mode.current;
-		}
-	};
-
-	setGlobalFSContext({
+	const context: FSProviderContext = $state({
 		config: null,
-		state: _state,
+		state: {
+			get tabspotInstance() {
+				return tabspotInstance;
+			},
+			get reducedMotion() {
+				return reducedMotion;
+			},
+			get theme() {
+				return mode.current;
+			}
+		},
 		events: null,
 		methods: {
 			setReducedMotion: (value) => {
@@ -46,6 +44,8 @@
 		}
 	});
 
+	setGlobalFSContext(context);
+
 	onMount(() => {
 		tabspotInstance ??= tabspot();
 
@@ -57,7 +57,7 @@
 	$effect(() => {
 		const root = document.documentElement;
 
-		root.dataset.fsReducedMotion = String(_state.reducedMotion);
+		root.dataset.fsReducedMotion = String(context.state.reducedMotion);
 
 		return () => {
 			delete root.dataset.fsReducedMotion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",