fluentui-svelte 0.6.0 → 0.7.0

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

@@ -9,7 +9,7 @@ A toggle switch represents a physical switch that allows someone to choose betwe
 	import { ToggleSwitch } from 'fluentui-svelte';
 </script>
 
-<ToggleSwitch />
+<ToggleSwitch aria-label="Notifications" />
 <ToggleSwitch label="Toggle me" />
 <ToggleSwitch label="I'm disabled" disabled />
 ```
@@ -26,18 +26,20 @@ A toggle switch can be labeled, checked, or disabled.
 <ToggleSwitch label="Disabled" disabled />
 ```
 
+HTML attributes, including class, id and ARIA attributes, apply to the control element. Bind ref to access that control. Use wrapperAttributes and wrapperRef for the outer container.
+
 ## Component Props
 
 <!-- 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']` |                       |         |                                                            |
+| Name                         | Type                             | Default | Description                                                                         |
+| ---------------------------- | -------------------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `checked` _bindable_         | `boolean` &#124; `null`          |         | Whether the switch is on.                                                           |
+| `ref` _bindable_             | `HTMLInputElement` &#124; `null` |         | The DOM reference of the input element.                                             |
+| `label`                      | `string`                         |         | The label displayed next to the input element. Inside a `Label`, it is not rendered |
+| `wrapperAttributes`          | `HTMLAttributes`                 |         | The attributes to spread on the wrapper element.                                    |
+| `wrapperRef` _bindable_      | `HTMLDivElement` &#124; `null`   |         | The DOM reference of the wrapper element.                                           |
+| Element Attributes (`input`) |                                  |         |                                                                                     |
 
 <!-- /props:ToggleSwitchProps -->

package/dist/components/toggle-switch/toggle-switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { claimLabel } from '../label/label-context.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import type { ToggleSwitchProps } from './types.js';
 
@@ -6,14 +7,16 @@
 	const COMPONENT_NAME = 'toggle-switch';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
+	const labelContext = claimLabel(() => id);
+
 	let {
-		ref = $bindable(),
-		checked = $bindable(),
-		id = ID,
+		ref = $bindable(null),
+		checked = $bindable(null),
+		id = labelContext?.fieldId ?? ID,
 		name = id,
 		label,
-		labelAttributes,
-		labelElement,
+		wrapperAttributes,
+		wrapperRef = $bindable(null),
 		...attributes
 	}: ToggleSwitchProps = $props();
 </script>
@@ -33,17 +36,18 @@
   <ToggleSwitch label="Toggle Switch" />
   ```
 -->
-<label class="fs-toggle-switch" {...labelAttributes} bind:this={labelElement}>
-	<input type="checkbox" role="switch" {id} {name} bind:checked bind:this={ref} {...attributes} />
-	{#if label}
-		<span>
+<div {...wrapperAttributes} class={['fs-toggle-switch', wrapperAttributes?.class]} bind:this={wrapperRef}>
+	<input {...attributes} type="checkbox" role="switch" {id} {name} bind:checked bind:this={ref} />
+	<!-- Inside a Label, the Label names the field instead. -->
+	{#if label && !labelContext}
+		<label for={id}>
 			{label}
-		</span>
+		</label>
 	{/if}
-</label>
+</div>
 
 <style>
-	label {
+	.fs-toggle-switch {
 		display: flex;
 		align-items: center;
 		border-radius: 1.125rem;
@@ -53,7 +57,7 @@
 		&:has(input:focus-visible) {
 			outline: 0.125rem var(--fs-focus-stroke-outer) solid;
 			outline-offset: 0.125rem;
-			&:has(span) {
+			&:has(> label) {
 				border-radius: 0.063rem;
 				outline-offset: 0.313rem;
 			}
@@ -130,6 +134,9 @@
 			&:active::after {
 				width: 1rem;
 			}
+			&:is(:user-invalid, [aria-invalid='true']) {
+				border-color: var(--fs-system-critical);
+			}
 			&:checked {
 				background-color: var(--fs-accent-fill-default);
 				border-color: var(--fs-accent-fill-default);
@@ -142,7 +149,9 @@
 				}
 			}
 		}
-		& span {
+		& > label {
+			flex-grow: 1;
+			cursor: pointer;
 			font-size: inherit;
 			color: inherit;
 			padding-inline: 0.8rem;

package/dist/components/toggle-switch/toggle-switch.svelte.d.ts

@@ -12,6 +12,6 @@ import type { ToggleSwitchProps } from './types.ts';
  * <ToggleSwitch label="Toggle Switch" />
  * ```
  */
-declare const ToggleSwitch: import("svelte").Component<ToggleSwitchProps, {}, "ref" | "checked">;
+declare const ToggleSwitch: import("svelte").Component<ToggleSwitchProps, {}, "ref" | "checked" | "wrapperRef">;
 type ToggleSwitch = ReturnType<typeof ToggleSwitch>;
 export default ToggleSwitch;

package/dist/components/toggle-switch/types.d.ts

@@ -1,20 +1,22 @@
-import type { HTMLLabelAttributes, SvelteHTMLElements } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 /** @propsmith ToggleSwitchProps */
 export type ToggleSwitchProps = {
     /** Whether the switch is on.
      * @bindable
      */
-    checked?: boolean;
+    checked?: boolean | null;
     /** The DOM reference of the input element.
      * @bindable
      */
-    ref?: HTMLInputElement;
-    /** The label displayed next to the input element. */
+    ref?: HTMLInputElement | null;
+    /** The label displayed next to the input element. Inside a `Label`, it is not rendered */
     label?: string;
-    /** The attributes to spread on the label wrapping the switch.
-     * @type HTMLLabelAttributes
+    /** The attributes to spread on the wrapper element.
+     * @type HTMLAttributes
      */
-    labelAttributes?: HTMLLabelAttributes;
-    /** The DOM reference of the label element. */
-    labelElement?: HTMLLabelElement;
-} & SvelteHTMLElements['input'];
+    wrapperAttributes?: HTMLAttributes<HTMLDivElement>;
+    /** The DOM reference of the wrapper element.
+     * @bindable
+     */
+    wrapperRef?: HTMLDivElement | null;
+} & HTMLInputAttributes;

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

@@ -69,7 +69,7 @@ The relationship prop allows you to specify the relationship between the tooltip
 | --------------------------------------------------- | -------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------- |
 | `content`                                           | `string` | `Snippet` | `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.                                                                |
+| `ref` _bindable_                                    | `HTMLElement` | `null`                              |                    | 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.                                                 |

package/dist/components/tooltip/tooltip.svelte

@@ -13,7 +13,7 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		content = 'I am a tooltip',
 		placement,
 		target,
@@ -75,7 +75,7 @@
 		placement: placement ?? _config?.placement ?? 'top',
 		strategy: 'fixed' as const,
 		middleware: [
-			...(_config?.middleware ?? [offset(8), flip(), shift({ padding: 8 }), hide()]),
+			...(_config?.middleware ?? [offset(8), flip({ padding: 100 }), shift({ padding: 100 }), hide()]),
 			...(withArrow && arrowElement ? [arrow({ element: arrowElement })] : [])
 		]
 	});
@@ -174,11 +174,11 @@
     ``` 
 -->
 <Flyout
+	{...attributes}
 	{id}
 	class={['fs-tooltip', !open && 'tooltip-hidden', classes]}
 	role="tooltip"
 	bind:ref
-	{...attributes}
 	{@attach triggerElement && open
 		? floating(triggerElement, positionConfig, {
 				onComputed: withArrow ? arrowComputeCallback : undefined,
@@ -207,7 +207,8 @@
 		position: fixed !important;
 		top: 0;
 		left: 0;
-		z-index: 50;
+		z-index: 110;
+		padding: 0.5rem !important;
 		& .fs-tooltip-arrow {
 			position: absolute;
 			width: 16px;

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

@@ -14,7 +14,7 @@ export type TooltipProps = {
     /** The DOM reference of the tooltip element.
      * @bindable
      */
-    ref?: HTMLElement;
+    ref?: HTMLElement | null;
     /** The element the tooltip is anchored to. Falls back to the rendered children. */
     target?: HTMLElement;
     /** Controls the open state of the tooltip.

package/dist/components/top-nav/docs/llms.md

@@ -137,7 +137,7 @@ A selected item sets its label in semibold, which is wider than the same label a
 
 | Name                       | Type                                                                           | Default         | Description                                                                                                                                                                         |
 | -------------------------- | ------------------------------------------------------------------------------ | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `ref` _bindable_           | `HTMLDivElement`                                                               |                 | The DOM reference of the strip.                                                                                                                                                     |
+| `ref` _bindable_           | `HTMLDivElement` | `null`                                                 |                 | The DOM reference of the strip.                                                                                                                                                     |
 | `selectedValue` _bindable_ | `string`                                                                       |                 | The value of the selected item.                                                                                                                                                     |
 | `onTabSelect`              | `(event: Event, value: string) => void`                                        |                 | Fired when an item is selected.                                                                                                                                                     |
 | `appearance`               | [`TopNavAppearance`](https://fluentui-svelte.dev/docs/types/#topnavappearance) | `'transparent'` | How the strip is painted: `transparent` has no background of its own, `subtle` fills an item while it is engaged, and the two circular appearances trade the moving bar for a pill. |

package/dist/components/top-nav/top-nav-item.svelte

@@ -7,7 +7,7 @@
 
 	let {
 		as = 'button' as T,
-		ref = $bindable(),
+		ref = $bindable(null),
 		value = `${COMPONENT_NAME}-${ID}`,
 		icon,
 		disabled,
@@ -54,6 +54,7 @@
 -->
 <svelte:element
 	this={_as}
+	{...attributes}
 	bind:this={ref as TopNavItemElementDOMType[T]}
 	type={_as === 'button' ? 'button' : undefined}
 	role="tab"
@@ -73,7 +74,6 @@
 			() => context.config.selectTabOnFocus && context.methods.selectTab(e, value),
 			onfocus
 		])}
-	{...attributes}
 >
 	{#if icon}
 		<span class="fs-top-nav-item-icon">

package/dist/components/top-nav/top-nav.svelte

@@ -4,7 +4,7 @@
 	import type { TopNavContext, TopNavProps } from './types.js';
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		selectedValue = $bindable(''),
 		onTabSelect,
 		appearance = 'transparent',
@@ -172,12 +172,12 @@
 	```
 -->
 <div
+	{...attributes}
 	bind:this={ref}
 	role="tablist"
 	aria-orientation={vertical ? 'vertical' : undefined}
 	class={['fs-top-nav', appearance, size, { vertical }, classes]}
 	{...tabspotAttributes}
-	{...attributes}
 >
 	{@render children?.()}
 	{#if hasIndicator && measured}

package/dist/components/top-nav/types.d.ts

@@ -27,7 +27,7 @@ export type TopNavProps = {
     /** The DOM reference of the strip.
      * @bindable
      */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** The value of the selected item.
      * @bindable
      */
@@ -71,7 +71,7 @@ export type TopNavItemProps<T extends TopNavItemGenerics = 'button'> = {
      * @type TopNavItemElementDOMType[T]
      * @bindable
      */
-    ref?: TopNavItemElementDOMType[T];
+    ref?: TopNavItemElementDOMType[T] | null;
     /** The DOM element to render. An anchor takes the attributes of one, `href` among them, and is
      * what an item that navigates should be.
      * @type 'button' | 'a'

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

@@ -244,7 +244,7 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 
 | Name                                                | Type                                         | Default      | Description                                                                          |
 | --------------------------------------------------- | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
-| `ref` _bindable_                                    | `HTMLUListElement`                           |              | The DOM reference of the tree element.                                               |
+| `ref` _bindable_                                    | `HTMLUListElement` | `null`             |              | The DOM reference of the tree element.                                               |
 | `size`                                              | `'small'` | `'medium'` | `'large'` | `'medium'`   | The size of every item in the tree.                                                  |
 | `navigationMode`                                    | `'tree'` | `'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.                                            |
@@ -268,7 +268,7 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 | ------------------------- | ------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------- |
 | `id`                      | `string`                                                     |          | The id of the item, used by the tree to track its state. Falls back to a generated id. |
 | `type`                    | `'item'` | `'branch'`                                   | `'item'` | Whether the item holds children, and can therefore be opened.                          |
-| `ref`                     | `HTMLLIElement`                                              |          | The DOM reference of the item element.                                                 |
+| `ref`                     | `HTMLLIElement` | `null`                                |          | The DOM reference of the item element.                                                 |
 | `value`                   | `string` | `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.                                                            |
@@ -287,14 +287,14 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 <!-- 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`) |                              |         |                                                                       |
+| Name                       | Type                           | Default | Description                                                           |
+| -------------------------- | ------------------------------ | ------- | --------------------------------------------------------------------- |
+| `ref`                      | `HTMLDivElement` &#124; `null` |         | 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

@@ -24,10 +24,10 @@
 <!-- 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}
+	class={['fs-tree-view-item-content', `size-${size}`, ITEM_CONTEXT.disabled && 'disabled', attributes?.class]}
+	style="{attributes?.style ?? ''}; --depth: {ITEM_CONTEXT.depth}"
+	bind:this={ref}
 >
 	{#if expandIcon}
 		<span class="fs-tree-view-item-expand-icon">

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
+	import { invokeHandlers } from '../../internal/index.js';
 	import { PREFIX } from '../../internal/constants.js';
 	import {
 		getTreeViewDepth,
@@ -35,6 +36,8 @@
 		onCheckedChange,
 		onOpenChange,
 		children,
+		onclick,
+		onkeydown,
 		...attributes
 	}: TreeViewItemProps = $props();
 
@@ -110,6 +113,10 @@
 		});
 	}
 
+	// Tabspot sets the tab stop of the tree on mount; until then the server HTML gives it to the first
+	// enabled item, as Tabspot will, so the tree can be reached with Tab.
+	const holdsTabStop = $derived(!itemState.disabled && (context.state.tabStop.id ??= id) === id);
+
 	const isBranch = $derived(type === 'branch');
 	const isVirtualRoot = $derived(config.virtualized && !itemContext);
 
@@ -162,10 +169,12 @@
 </script>
 
 <li
+	{...attributes}
 	{id}
-	class={['fs-tree-view-item', `fs-tree-item-size-${size}`, { open }]}
-	style="--depth: {depth}"
+	class={['fs-tree-view-item', `fs-tree-item-size-${size}`, { open }, attributes?.class]}
+	style="{attributes?.style ?? ''}; --depth: {depth}"
 	role="treeitem"
+	tabindex={holdsTabStop ? 0 : undefined}
 	aria-expanded={type === 'branch' ? open : undefined}
 	aria-checked={indeterminate ? 'mixed' : checked}
 	aria-level={depth + 1}
@@ -173,10 +182,9 @@
 	data-index={isVirtualRoot ? index : undefined}
 	data-value={value}
 	aria-disabled={itemState.disabled ? 'true' : undefined}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
+	onclick={(event) => invokeHandlers(event, itemState.disabled, [handleClick, onclick])}
+	onkeydown={(event) => invokeHandlers(event, itemState.disabled, [handleKeydown, onkeydown])}
 	bind:this={ref}
-	{...attributes}
 >
 	{@render children?.()}
 </li>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
+	import { invokeHandlers } from '../../internal/index.js';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { getTabspotAttributes, tabspotVirtual } from 'tabspot';
 	import {
@@ -8,6 +9,7 @@
 		setTreeViewContext,
 		setTreeViewDepth,
 		getTreeViewItemContext,
+		syncBranchStates,
 		traversalSync,
 		traversalSyncSingleSelection
 	} from './tree-view.svelte.js';
@@ -15,6 +17,7 @@
 
 	const CONTEXT = getTreeViewContext();
 	const TREE_NODES = new SvelteMap<string, TreeViewNode>();
+	const TAB_STOP: { id: string | null } = { id: null };
 	const DEPTH = getTreeViewDepth() || 0;
 	const ITEM_CONTEXT = getTreeViewItemContext();
 	const IS_SUB_TREE = $derived(!!CONTEXT);
@@ -26,12 +29,13 @@
 		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(),
+		ref = $bindable(null),
 		onOpenChange,
 		onCheckedChange,
 		selectionMode = CONTEXT?.state.selectionMode ?? 'multiple',
 		size = 'medium',
 		children,
+		onkeydown,
 		...attributes
 	}: TreeViewProps = $props();
 
@@ -65,6 +69,9 @@
 			get TREE_NODES() {
 				return CONTEXT?.state.TREE_NODES ?? TREE_NODES;
 			},
+			get tabStop() {
+				return CONTEXT?.state.tabStop ?? TAB_STOP;
+			},
 			get forceVirtualRender() {
 				return CONTEXT?.state.forceVirtualRender ?? forceVirtualRender;
 			},
@@ -195,6 +202,14 @@
 	};
 
 	// Add tabspot virtualizer for correct focus management
+	// Once every item is registered, the branches show what their checked descendants imply. A
+	// virtualized tree registers only the rows on screen, so it would judge a branch on a part of it.
+	onMount(async () => {
+		if (IS_SUB_TREE || virtualizer || selectionMode === 'single') return;
+		await tick();
+		syncBranchStates(TREE_NODES, checkedItems);
+	});
+
 	onMount(() => {
 		if (!IS_SUB_TREE || !ref || !virtualizer) return;
 		return tabspotVirtual(ref, {
@@ -207,13 +222,13 @@
 <!-- Render only when necessary (virtualizer perf) -->
 {#if treeViewContext.state.forceVirtualRender || (treeViewContext.config.virtualized && (!IS_SUB_TREE || ITEM_CONTEXT?.open)) || !treeViewContext.config.virtualized}
 	<ul
-		class="fs-tree-view"
+		{...attributes}
+		class={['fs-tree-view', attributes?.class]}
 		role={IS_SUB_TREE ? 'group' : 'tree'}
-		aria-multiselectable={selectionMode !== 'single'}
-		onkeydown={!IS_SUB_TREE ? handleTypeahead : undefined}
+		aria-multiselectable={IS_SUB_TREE ? undefined : selectionMode !== 'single'}
+		onkeydown={(event) => invokeHandlers(event, [], [!IS_SUB_TREE && handleTypeahead, onkeydown])}
 		bind:this={ref}
 		{...tabspotAttributes}
-		{...attributes}
 	>
 		{@render children?.()}
 	</ul>

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

@@ -1,4 +1,4 @@
 import type { TreeViewProps } from './types.js';
-declare const TreeView: import("svelte").Component<TreeViewProps, {}, "ref" | "openItems" | "checkedItems">;
+declare const TreeView: import("svelte").Component<TreeViewProps, {}, "ref" | "checkedItems" | "openItems">;
 type TreeView = ReturnType<typeof TreeView>;
 export default TreeView;

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

@@ -1,4 +1,5 @@
 import { createFSContext } from '../../internal/index.js';
+import { SvelteSet } from 'svelte/reactivity';
 export const [getTreeViewContext, setTreeViewContext] = createFSContext();
 export const [getTreeViewDepth, setTreeViewDepth] = createFSContext();
 export const [getTreeViewItemContext, setTreeViewItemContext] = createFSContext();
@@ -74,17 +75,44 @@ export function traversalSync(itemId, state, iterable, checked) {
     if (node.parentId) {
         bubbleCheck(node.id, state, checked, isIndeterminate);
     }
-    const checkedItems = Array.from(state.values()).filter((n) => n.checked);
+    syncCheckedItems(state, iterable);
+}
+/** Writes the ids of the checked nodes into the set or array of the tree. */
+function syncCheckedItems(state, iterable) {
+    writeItems(iterable, Array.from(state.values())
+        .filter((n) => n.checked)
+        .map(({ id }) => id));
+}
+/** Replaces the ids in the set or array of the tree. */
+function writeItems(iterable, ids) {
     if (iterable instanceof Set) {
         iterable.clear();
-        for (const { id } of checkedItems) {
+        for (const id of ids) {
             iterable.add(id);
         }
     }
     else if (Array.isArray(iterable)) {
         iterable.length = 0;
-        iterable.push(...checkedItems.map(({ id }) => id));
+        iterable.push(...ids);
+    }
+}
+/**
+ * Gives each branch the state its checked descendants imply, as a click would: a tree can start
+ * with only some of the items of a branch checked. The set or array is written only if it changes,
+ * and keeps the ids of items that are not in the tree yet.
+ */
+export function syncBranchStates(state, iterable) {
+    for (const node of Array.from(state.values())) {
+        if (node.checked && node.parentId)
+            bubbleCheck(node.id, state, true);
     }
+    const before = Array.from(iterable);
+    const kept = before.filter((id) => state.get(id)?.checked ?? true);
+    const added = Array.from(state.values())
+        .filter((n) => n.checked && !kept.includes(n.id))
+        .map(({ id }) => id);
+    if (added.length || kept.length !== before.length)
+        writeItems(iterable, [...kept, ...added]);
 }
 export function traversalSyncSingleSelection(itemId, state, iterable) {
     const node = state.get(itemId);

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

@@ -49,7 +49,7 @@ export type TreeViewProps = {
     /** The DOM reference of the tree element.
      * @bindable
      */
-    ref?: HTMLUListElement;
+    ref?: HTMLUListElement | null;
     /** The size of every item in the tree.
      * @default 'medium'
      */
@@ -96,7 +96,7 @@ export type TreeViewItemProps = {
      */
     type?: TreeViewItemType;
     /** The DOM reference of the item element. */
-    ref?: HTMLLIElement;
+    ref?: HTMLLIElement | null;
     /** The value reported by the tree events. Falls back to the id of the item.
      * @default id
      */
@@ -131,7 +131,7 @@ export type TreeViewItemProps = {
 /** @propsmith TreeViewItemLayoutProps */
 export type TreeViewItemLayoutProps = {
     /** The DOM reference of the layout element. */
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
     /** Custom icon for the control that opens a branch.
      * @type Snippet | Component
      */
@@ -163,6 +163,10 @@ export type TreeViewContext = FSContext<{
     readonly openItems: NonNullable<TreeViewProps['openItems']>;
     readonly checkedItems: NonNullable<TreeViewProps['checkedItems']>;
     readonly TREE_NODES: SvelteMap<string, TreeViewNode>;
+    /** The item that holds the tab stop in the server HTML, before Tabspot runs. */
+    readonly tabStop: {
+        id: string | null;
+    };
     forceVirtualRender: boolean;
 }, {
     onOpenChange: TreeViewEvent<string[]>;