fluentui-svelte 0.4.0 → 0.5.0

package/README.md

@@ -169,7 +169,7 @@ after changing a prop's JSDoc rather than editing the generated tables by hand.
 >
 > This app demonstrates all of the Windows UI 3 library controls and styles available to make a WinUI 3 app with the Windows App SDK.
 
-> ### Documentation: [Microsoft's Fluent UI](https://learn.microsoft.com/en-us/windows/apps/design/)
+> ### Documentation: [Microsoft's Fluent UI](https://developer.microsoft.com/en-us/fluentui/)
 >
 > Design guidelines and UI code examples for creating Windows app experiences.
 

package/dist/components/auto-suggest-box/docs/llms.md

@@ -18,44 +18,105 @@ The AutoSuggestBox component provides an input field with dynamic suggestions as
 
 ## Examples
 
-### Virtualized Suggestions
+### Open on focus
 
-Long lists can be windowed. Pass a `virtualizer` describing the _whole_ list — `size` is the
-total number of suggestions, not the number rendered — and the box drives your list component
-when the cursor walks past what is on screen. Options keep their real `index`, which is what
-ties a rendered row back to the data.
+Use `openOnFocus` to show suggestions as soon as the text box receives focus, before anything is typed.
+
+```svelte
+<AutoSuggestBox openOnFocus placeholder="Choose a fruit...">
+	{#each fruits as fruit, index (fruit.id)}
+		<AutoSuggestBoxOption {index} id={fruit.id} value={fruit.name}>
+			{fruit.name}
+		</AutoSuggestBoxOption>
+	{/each}
+</AutoSuggestBox>
+```
+
+### Virtualization
+
+Window large suggestion sets by connecting AutoSuggestBox to a virtual list through the `virtualizer` prop. Its `size` is the total number of suggestions, while each option keeps its real `index`.
+
+```svelte
+<script>
+	import SvelteVirtualList from '@humanspeak/svelte-virtual-list';
+
+	let listRef;
+</script>
+
+<AutoSuggestBox
+	placeholder="Type a name..."
+	virtualizer={{
+		size: people.length,
+		scrollToTop: () => listRef.scroll({ index: 0, align: 'top', smoothScroll: false }),
+		scrollToBottom: () => listRef.scroll({ index: people.length - 1, align: 'bottom', smoothScroll: false }),
+		scrollToIndex: (index) => listRef.scroll({ index, align: 'auto', smoothScroll: false })
+	}}
+>
+	<SvelteVirtualList items={people} bind:this={listRef} defaultEstimatedItemHeight={30}>
+		{#snippet renderItem(person, index)}
+			<AutoSuggestBoxOption {index} id={person.id} value={person.name}>
+				{person.name}
+			</AutoSuggestBoxOption>
+		{/snippet}
+	</SvelteVirtualList>
+</AutoSuggestBox>
+```
+
+### Multiselect
+
+Allow people to choose several suggestions and optionally show the selected values in the text box.
+
+```svelte
+<script>
+	let selectedOptions = $state([]);
+</script>
+
+<AutoSuggestBox multiselect showTextualMultiselect bind:selectedOptions placeholder="Choose fruits...">
+	{#each fruits as fruit, index (fruit.id)}
+		<AutoSuggestBoxOption {index} id={fruit.id} value={fruit.name}>
+			{fruit.name}
+		</AutoSuggestBoxOption>
+	{/each}
+</AutoSuggestBox>
+```
+
+### Virtualization with filtering
+
+A virtualized list must filter its source data itself and report the filtered length through `virtualizer.size`.
 
 ```svelte
 <script>
 	import SvelteVirtualList from '@humanspeak/svelte-virtual-list';
 
-	let items = $state(fruits);
+	let items = $state(people);
 	let listRef;
 </script>
 
 <AutoSuggestBox
-	placeholder="Type a fruit..."
+	placeholder="Type a name..."
 	virtualizer={{
 		size: items.length,
 		scrollToTop: () => listRef.scroll({ index: 0, align: 'top', smoothScroll: false }),
-		scrollToBottom: () => listRef.scroll({ index: items.length - 1, align: 'bottom', smoothScroll: false }),
+		scrollToBottom: () => {
+			if (items.length) listRef.scroll({ index: items.length - 1, align: 'bottom', smoothScroll: false });
+		},
 		scrollToIndex: (index) => listRef.scroll({ index, align: 'auto', smoothScroll: false })
 	}}
-	textChanged={(e, val) => (items = fruits.filter((item) => item.name.toLowerCase().includes(val.toLowerCase())))}
+	textChanged={(_, value) => {
+		const query = value.trim().toLowerCase();
+		items = people.filter(({ name }) => name.toLowerCase().includes(query));
+	}}
 >
 	<SvelteVirtualList {items} bind:this={listRef} defaultEstimatedItemHeight={30}>
-		{#snippet renderItem(item, index)}
-			<AutoSuggestBoxOption {index} id={item.id} value={item.name} text={item.name}>
-				{item.name}
+		{#snippet renderItem(person, index)}
+			<AutoSuggestBoxOption {index} id={person.id} value={person.name}>
+				{person.name}
 			</AutoSuggestBoxOption>
 		{/snippet}
 	</SvelteVirtualList>
 </AutoSuggestBox>
 ```
 
-Filtering is yours to do in `textChanged`: a windowed list renders from your data, so the
-built-in filter that a plain option list applies is skipped.
-
 ## Component Props
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->

package/dist/components/card/card-header.svelte

@@ -42,7 +42,7 @@
 			{#if typeof title === 'string'}
 				<h4 class="body" id={`${id}-title`}>{title}</h4>
 			{:else if title}
-				<RenderSoC SoC={title} id={`${id}-title`} />
+				<RenderSoC SoC={title} args={{ id: `${id}-title` }} />
 			{/if}
 			{#if typeof description === 'string'}
 				<p class="caption">{description}</p>
@@ -53,7 +53,7 @@
 	{:else if typeof title === 'string'}
 		<h4 class="body" id={`${id}-title`}>{title}</h4>
 	{:else if title}
-		<RenderSoC SoC={title} id={`${id}-title`} />
+		<RenderSoC SoC={title} args={{ id: `${id}-title` }} />
 	{/if}
 	{#if _action}
 		<RenderSoC SoC={_action} />

package/dist/components/dropdown/dropdown.svelte

@@ -195,6 +195,7 @@
 					}
 				}
 				selectionMode={multiple ? 'multiselect' : 'single'}
+				toggleOnClick={multiple}
 				onSelectionChange={() => {
 					if (!multiple) closeDropdown();
 				}}

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

@@ -56,27 +56,78 @@ Use `selectionMode` (`single`, `multiselect`, or `extended`) to control how item
 </ListView>
 ```
 
+### Toggle on click
+
+In a multiselect list, a plain click selects only that item and Ctrl/Cmd + click toggles it. Set `toggleOnClick` to make a plain click toggle the item directly.
+
+```svelte
+<ListView selectionMode="multiselect" toggleOnClick>
+	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
+		<ListViewItem value={item}>{item}</ListViewItem>
+	{/each}
+</ListView>
+```
+
 ### Checkmark
 
-Add and configure a checkbox for the element. You can use the same props for the Checkbox component. Note: every actionable element inside this ListViewItem must call e.stopPropagation().
+Add and configure a checkbox for the element. You can use the same props for the Checkbox component. The checkbox toggles the selection of its item without triggering `onAction`. Bind `selectedItems` to read or control the selection.
 
 ```svelte
-<ListViewItem
-	value="card"
-	role="row"
-	checkmark={{ style: 'position: absolute; top: 10px; left: 10px; z-index: 10;' }}
-	onAction={(e, d) => alert('Triggered Primary Action')}
->
-	<div style="...">
-		Card Content Inside ListItem
-		<Button
-			onclick={(e) => {
-				e.stopPropagation();
-				alert('Installing');
-			}}>Install</Button
+<script>
+	let selected = $state(['Apple']);
+</script>
+
+<ListView selectionMode="multiselect" bind:selectedItems={selected}>
+	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
+		<ListViewItem value={item} checkmark={{}}>{item}</ListViewItem>
+	{/each}
+</ListView>
+
+<p>Selected: {selected.join(', ')}</p>
+```
+
+### Cards with a primary action
+
+With `navigationMode` set to `composite` and a `selectionMode`, every item is a row. Clicking it runs its primary action (`onAction`), the checkbox toggles its selection, and any button inside is a secondary action. Use `checkmark.wrapperAttributes.style` to place the checkbox where you need it, like the top-right corner of the card. Note: every actionable element inside this ListViewItem, except the checkbox, must call e.stopPropagation().
+
+```svelte
+<script>
+	const cards = [
+		{ name: 'Fluent', description: 'Design system' },
+		{ name: 'Svelte', description: 'UI framework' },
+		{ name: 'Vite', description: 'Build tool' }
+	];
+
+	let selected = $state([]);
+	let lastAction = $state('');
+</script>
+
+<ListView as="div" navigationMode="composite" selectionMode="multiselect" bind:selectedItems={selected}>
+	{#each cards as card (card.name)}
+		{#snippet install()}
+			<Button
+				onclick={(e) => {
+					e.stopPropagation();
+					lastAction = 'Installed ' + card.name;
+				}}>Install</Button
+			>
+		{/snippet}
+		<ListViewItem
+			value={card.name}
+			checkmark={{ wrapperAttributes: { style: 'position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;' } }}
+			style="padding: 0"
+			onAction={() => (lastAction = 'Opened ' + card.name)}
 		>
-	</div>
-</ListViewItem>
+			<Card orientation="vertical" style="width: 100%;">
+				<CardHeader title={card.name} description={card.description} />
+				<CardFooter action={install} />
+			</Card>
+		</ListViewItem>
+	{/each}
+</ListView>
+
+<p>Selected: {selected.join(', ')}</p>
+<p>Last action: {lastAction}</p>
 ```
 
 ## ListView Props
@@ -84,17 +135,18 @@ Add and configure a checkbox for the element. You can use the same props for the
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:ListViewProps -->
 
-| Name                       | Type                                                                  | Default     | Description                                                                   |
-| -------------------------- | --------------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------- |
-| `selectionMode`            | `'none'` &#124; `'single'` &#124; `'multiselect'` &#124; `'extended'` | `'none'`    | How many items can be selected, and how the selection is made.                |
-| `navigationMode`           | `'items'` &#124; `'composite'`                                        | `'items'`   | Whether the list itself takes a single tab stop, or every item takes its own. |
-| `selectedItems` _bindable_ | `string[]`                                                            |             | The values of the selected items.                                             |
-| `shape`                    | `'circular'` &#124; `'rounded'` &#124; `'square'`                     | `'rounded'` | The items can have a circular, rounded or square shape.                       |
-| `onSelectionChange`        | `(e: Event, selectedItems: string[]` &#124; `[]) => void`             |             | Called whenever the selection changes.                                        |
-| `as`                       | `'ul'` &#124; `'ol'` &#124; `'div'`                                   | `'ul'`      | The HTML element to render the list as.                                       |
-| `ref` _bindable_           | `HTMLUListElement` &#124; `HTMLOListElement` &#124; `HTMLDivElement`  |             | The DOM reference of the list element.                                        |
-| `disableTabspot`           | `boolean`                                                             | `false`     | Opts the list out of the tabspot focus management, to wire your own.          |
-| HTML Attributes            |                                                                       |             |                                                                               |
+| Name                       | Type                                                                  | Default     | Description                                                                                                                     |
+| -------------------------- | --------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `selectionMode`            | `'none'` &#124; `'single'` &#124; `'multiselect'` &#124; `'extended'` | `'none'`    | How many items can be selected, and how the selection is made.                                                                  |
+| `navigationMode`           | `'items'` &#124; `'composite'`                                        | `'items'`   | Whether the list itself takes a single tab stop, or every item takes its own.                                                   |
+| `selectedItems` _bindable_ | `string[]`                                                            |             | The values of the selected items.                                                                                               |
+| `shape`                    | `'circular'` &#124; `'rounded'` &#124; `'square'`                     | `'rounded'` | The items can have a circular, rounded or square shape.                                                                         |
+| `onSelectionChange`        | `(e: Event, selectedItems: string[]` &#124; `[]) => void`             |             | Called whenever the selection changes.                                                                                          |
+| `toggleOnClick`            | `boolean`                                                             | `false`     | When `selectionMode` is `'multiselect'`, clicking an item toggles its selection directly instead of requiring Ctrl/Cmd + click. |
+| `as`                       | `'ul'` &#124; `'ol'` &#124; `'div'`                                   | `'ul'`      | The HTML element to render the list as.                                                                                         |
+| `ref` _bindable_           | `HTMLUListElement` &#124; `HTMLOListElement` &#124; `HTMLDivElement`  |             | The DOM reference of the list element.                                                                                          |
+| `disableTabspot`           | `boolean`                                                             | `false`     | Opts the list out of the tabspot focus management, to wire your own.                                                            |
+| HTML Attributes            |                                                                       |             |                                                                                                                                 |
 
 <!-- /props:ListViewProps -->
 

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

@@ -43,6 +43,7 @@
 	const role = $derived(_role || getChildrenRole(as));
 
 	let active = $derived(_state.selectedItems.includes(value));
+	let checkmarkRef = $state<HTMLDivElement>();
 
 	// A row is a level of its own: right enters the cells, left comes back out. Anything
 	// that is not a row navigates as a plain item of the list above it.
@@ -82,21 +83,23 @@
 	{...tabspotAttrs}
 	onfocus={(e: FocusEvent) => invokeHandlers(e, disabled, [(event: FocusEvent) => onfocus?.(event, value || '')])}
 	onclick={(e: MouseEvent) => {
-		invokeHandlers(
-			e,
-			disabled,
-			role !== 'row'
-				? [
-						(event: MouseEvent) => handleSelection?.(event, value),
-						(event: MouseEvent) => onAction?.(event, value || '')
-					]
-				: [(event: MouseEvent) => onAction?.(event, value || '')]
-		);
+		// The checkmark only toggles the selection, even on a row. The primary action is for the rest of the item.
+		const fromCheckmark = !!checkmarkRef?.contains(e.target as Node);
+		invokeHandlers(e, disabled, [
+			(role !== 'row' || fromCheckmark) && ((event: MouseEvent) => handleSelection?.(event, value, fromCheckmark)),
+			!fromCheckmark && ((event: MouseEvent) => onAction?.(event, value || ''))
+		]);
 	}}
 	{...attributes}
 >
 	{#if checkmark}
-		<Checkbox {disabled} bind:checked={active} tabindex={-1} {...!isObjectEmpty(checkmark) ? checkmark : {}} />
+		<Checkbox
+			{disabled}
+			bind:checked={active}
+			bind:wrapperRef={checkmarkRef}
+			tabindex={-1}
+			{...!isObjectEmpty(checkmark) ? checkmark : {}}
+		/>
 	{/if}
 	{@render children?.()}
 </svelte:element>

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

@@ -12,6 +12,7 @@
 		selectedItems = $bindable([]),
 		onSelectionChange,
 		disableTabspot = false,
+		toggleOnClick = false,
 		children,
 		...attributes
 	}: ListViewProps<Tag> = $props();
@@ -72,7 +73,7 @@
 		},
 		events: null,
 		methods: {
-			handleSelection: (e: MouseEvent, value: string) => {
+			handleSelection: (e: MouseEvent, value: string, toggle = false) => {
 				if (selectionMode === 'none') return;
 
 				const itemIndex = items.findIndex((item) => item.value === value);
@@ -89,7 +90,7 @@
 						.filter((i) => !i.disabled)
 						.map((i) => i.value);
 					selectedItems = Array.from(new Set([...selectedItems, ...rangeValues]));
-				} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
+				} else if (MULTISELECTABLE && (toggle || e.ctrlKey || e.metaKey || toggleOnClick)) {
 					selectedItems = selectedItems.includes(value)
 						? selectedItems.filter((v) => v !== value)
 						: [...selectedItems, value];

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

@@ -23,6 +23,10 @@ export type ListViewProps<T extends 'ul' | 'ol' | 'div'> = {
     shape?: Shapes;
     /** Called whenever the selection changes. */
     onSelectionChange?: (e: Event, selectedItems: string[] | []) => void;
+    /** When `selectionMode` is `'multiselect'`, clicking an item toggles its selection directly instead of requiring Ctrl/Cmd + click.
+     * @default false
+     */
+    toggleOnClick?: boolean;
     /** The HTML element to render the list as.
      * @type 'ul' | 'ol' | 'div'
      * @default 'ul'
@@ -87,7 +91,7 @@ export type ListViewContextState = {
     anchorIndex: number | null;
 };
 export type ListViewContextMethods = {
-    handleSelection: (e: MouseEvent, value: string) => void;
+    handleSelection: (e: MouseEvent, value: string, toggle?: boolean) => void;
     getChildrenRole: (tag: 'li' | 'a' | 'div') => 'listitem' | 'option' | 'row' | undefined;
     registerItem: (id: string, value: string, disabled: boolean) => void;
     unregisterItem: (id: string) => void;

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

@@ -140,6 +140,22 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 
 <!-- /props:MenuProps -->
 
+## Component Props (MenuPopover)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuPopoverProps -->
+
+| Name              | Type                                 | Default | Description                                              |
+| ----------------- | ------------------------------------ | ------- | -------------------------------------------------------- |
+| `ref`             | `HTMLElement`                        |         | The element used to position the popover.                |
+| `open` _bindable_ | `boolean`                            |         | Controls the open state of the popover.                  |
+| `keepMounted`     | `boolean`                            | `false` | Keeps the popover mounted in the DOM while it is closed. |
+| `placement`       | `ComputePositionConfig['placement']` |         | Where the popover is positioned relative to its trigger. |
+| `positionConfig`  | `ComputePositionConfig`              |         | The position configuration handed over to floating-ui.   |
+| `children`        | `Snippet`                            |         | The content of the popover.                              |
+
+<!-- /props:MenuPopoverProps -->
+
 ## Component Props (MenuTrigger)
 
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->

package/dist/components/menu/menu-popover.svelte

@@ -6,12 +6,12 @@
 	import { useDebounce } from 'runed';
 	import { floating, flyToOffset, getCSSDuration, reactiveBoundingRect } from '../../internal/index.js';
 	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
-	import type { Snippet } from 'svelte';
-	import type { ComputePositionConfig } from '@floating-ui/dom';
+	import type { MenuPopoverProps } from './types.js';
 
 	let {
 		ref: _ref,
 		open: _open = $bindable(),
+		keepMounted = false,
 		placement,
 		positionConfig: floatingPosition = {
 			placement,
@@ -19,13 +19,7 @@
 			strategy: 'fixed'
 		},
 		children
-	}: {
-		ref?: HTMLElement;
-		open?: boolean;
-		placement?: ComputePositionConfig['placement'];
-		positionConfig?: Partial<ComputePositionConfig>;
-		children: Snippet;
-	} = $props();
+	}: MenuPopoverProps = $props();
 
 	const context = getMenuContext();
 
@@ -90,16 +84,17 @@
 	});
 </script>
 
-{#if opened && ref}
+{#if keepMounted || (opened && ref)}
 	{@const isRefAnElement = ref instanceof HTMLElement}
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		bind:this={element}
 		class="fs-menu-popover"
+		hidden={!opened}
 		onmouseleave={openOnHover ? (e: MouseEvent) => debounced(e) : undefined}
-		{@attach ref ? floating(ref, config) : undefined}
+		{@attach opened && ref ? floating(ref, config) : undefined}
 		style={`--position=${isSubMenu ? 'absolute' : 'fixed'} --min-width=${isRefAnElement && !isSubMenu ? `${boundingElement.rect.width}px` : 'max-content'}`}
-		in:flyToOffset={isRefAnElement
+		in:flyToOffset={opened && isRefAnElement
 			? {
 					...getIntroTransition({ config, anchor: boundingElement.rect, element, ref, isSubMenu }),
 					duration: duration,

package/dist/components/menu/menu-popover.svelte.d.ts

@@ -1,12 +1,4 @@
-import type { Snippet } from 'svelte';
-import type { ComputePositionConfig } from '@floating-ui/dom';
-type $$ComponentProps = {
-    ref?: HTMLElement;
-    open?: boolean;
-    placement?: ComputePositionConfig['placement'];
-    positionConfig?: Partial<ComputePositionConfig>;
-    children: Snippet;
-};
-declare const MenuPopover: import("svelte").Component<$$ComponentProps, {}, "open">;
+import type { MenuPopoverProps } from './types.ts';
+declare const MenuPopover: import("svelte").Component<MenuPopoverProps, {}, "open">;
 type MenuPopover = ReturnType<typeof MenuPopover>;
 export default MenuPopover;

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

@@ -59,6 +59,27 @@ export type MenuProps = {
     /** The parts of the menu: a trigger and a popover. */
     children?: Snippet;
 };
+/** @propsmith MenuPopoverProps */
+export type MenuPopoverProps = {
+    /** The element used to position the popover. */
+    ref?: HTMLElement;
+    /** Controls the open state of the popover.
+     * @bindable
+     */
+    open?: boolean;
+    /** Keeps the popover mounted in the DOM while it is closed.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** Where the popover is positioned relative to its trigger. */
+    placement?: ComputePositionConfig['placement'];
+    /** The position configuration handed over to floating-ui.
+     * @type ComputePositionConfig
+     */
+    positionConfig?: Partial<ComputePositionConfig>;
+    /** The content of the popover. */
+    children: Snippet;
+};
 /** @propsmith MenuTriggerProps */
 export type MenuTriggerProps = {
     /** Disables the user interaction. */

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

@@ -35,7 +35,7 @@ Nesting a TreeView inside a TreeViewItem of type='branch' creates a subtree. Use
 
 ### Checkable Items
 
-Set `selectionMode="multiple"` to render checkboxes on selectable items.
+Set `selectionMode` to `"multiple" | "single"` to render checkboxes on selectable items.
 
 ```svelte
 <TreeView selectionMode="multiple">
@@ -50,6 +50,132 @@ Set `selectionMode="multiple"` to render checkboxes on selectable items.
 </TreeView>
 ```
 
+### Single selection
+
+Set `selectionMode` to `single` so checking an item unchecks the previous one, and branches no longer cascade to their children.
+
+```svelte
+<script>
+	let checked = $state([]);
+</script>
+
+<TreeView selectionMode="single" bind:checkedItems={checked}>
+	<TreeViewItem id="fruits" type="branch" open>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="banana">
+				<TreeViewItemContent>Banana</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+	<TreeViewItem id="vegetables">
+		<TreeViewItemContent>Vegetables</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+
+<p>Checked: {checked.join(', ')}</p>
+```
+
+### Icons
+
+Use `iconBefore` and `iconAfter` to render icons around the label. Every item reserves the space of the expand chevron, so checkboxes and icons stay aligned between branches and leaves.
+
+```svelte
+<script>
+	import { TreeView, TreeViewItem, TreeViewItemContent } from 'fluentui-svelte';
+	import FolderRegular from 'fluentui-icons-svelte/FolderRegular.svelte';
+	import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
+	import ImageRegular from 'fluentui-icons-svelte/ImageRegular.svelte';
+	import StarRegular from 'fluentui-icons-svelte/StarRegular.svelte';
+	import LockClosedRegular from 'fluentui-icons-svelte/LockClosedRegular.svelte';
+</script>
+
+{#snippet folder()}<FolderRegular width="1.25rem" />{/snippet}
+{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
+{#snippet image()}<ImageRegular width="1.25rem" />{/snippet}
+{#snippet star()}<StarRegular width="1rem" />{/snippet}
+{#snippet lock()}<LockClosedRegular width="1rem" />{/snippet}
+
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="documents" type="branch" open>
+		<TreeViewItemContent iconBefore={folder}>Documents</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="report">
+				<TreeViewItemContent iconBefore={document} iconAfter={star}>Report</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="photo">
+				<TreeViewItemContent iconBefore={image}>Photo</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+	<TreeViewItem id="notes">
+		<TreeViewItemContent iconBefore={document} iconAfter={lock}>Notes</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+```
+
+### Aside and actions
+
+`aside` is pinned to the end of the row. `actions` comes after it and is revealed when the row is hovered or focused.
+
+```svelte
+<script>
+	import { TreeView, TreeViewItem, TreeViewItemContent, Button } from 'fluentui-svelte';
+	import DocumentRegular from 'fluentui-icons-svelte/DocumentRegular.svelte';
+	import MoreHorizontalRegular from 'fluentui-icons-svelte/MoreHorizontalRegular.svelte';
+</script>
+
+{#snippet document()}<DocumentRegular width="1.25rem" />{/snippet}
+{#snippet fileSize()}<span>2 KB</span>{/snippet}
+{#snippet more()}
+	<Button appearance="subtle" onclick={(e) => e.stopPropagation()} aria-label="More actions"
+		><MoreHorizontalRegular width="1rem" /></Button
+	>
+{/snippet}
+
+<TreeView>
+	<TreeViewItem id="report">
+		<TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Report</TreeViewItemContent>
+	</TreeViewItem>
+	<TreeViewItem id="annual-summary">
+		<TreeViewItemContent iconBefore={document} aside={fileSize} actions={more}>Annual summary</TreeViewItemContent>
+	</TreeViewItem>
+</TreeView>
+```
+
+### Sizes
+
+Set `size` to `small`, `medium` or `large` on the root `TreeView`.
+
+```svelte
+<TreeView size="small">...</TreeView>
+<TreeView size="medium">...</TreeView>
+<TreeView size="large">...</TreeView>
+```
+
+### Disabled items
+
+A disabled item can't be opened or checked, and it is skipped when its parent checks its children, which leaves the parent in its mixed state.
+
+```svelte
+<TreeView selectionMode="multiple">
+	<TreeViewItem id="fruits" type="branch" open>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem id="apple">
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+			<TreeViewItem id="banana" disabled>
+				<TreeViewItemContent>Banana</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.
@@ -70,6 +196,45 @@ Use the bindable `openItems` and `checkedItems` props on the root `TreeView` to
 		</TreeView>
 	</TreeViewItem>
 </TreeView>
+
+<p>Open: {openItems.join(', ')}</p>
+<p>Checked: {checkedItems.join(', ')}</p>
+```
+
+### Events
+
+`onCheckedChange` and `onOpenChange` on the TreeView receive the resulting ids. The same props on a TreeViewItem receive the item and its new state, including the children a branch cascades to.
+
+```svelte
+<script>
+	let treeEvent = $state('');
+	let itemEvent = $state('');
+</script>
+
+<TreeView
+	selectionMode="multiple"
+	onCheckedChange={(e, checkedItems) => (treeEvent = 'Checked: ' + checkedItems.join(', '))}
+	onOpenChange={(e, openItems) => (treeEvent = 'Open: ' + openItems.join(', '))}
+>
+	<TreeViewItem
+		id="fruits"
+		type="branch"
+		onOpenChange={(e, { id, open }) => (itemEvent = id + (open ? ' opened' : ' closed'))}
+	>
+		<TreeViewItemContent>Fruits</TreeViewItemContent>
+		<TreeView>
+			<TreeViewItem
+				id="apple"
+				onCheckedChange={(e, { id, checked }) => (itemEvent = id + (checked ? ' checked' : ' unchecked'))}
+			>
+				<TreeViewItemContent>Apple</TreeViewItemContent>
+			</TreeViewItem>
+		</TreeView>
+	</TreeViewItem>
+</TreeView>
+
+<p>Tree: {treeEvent}</p>
+<p>Item: {itemEvent}</p>
 ```
 
 ## Component Props (TreeView)

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

@@ -47,10 +47,8 @@
 		wrapperAttributes={{
 			onclick: (e) => {
 				e.stopPropagation();
-				if (ITEM_CONTEXT.disabled) {
-					e.preventDefault();
-					return;
-				}
+				e.preventDefault();
+				if (ITEM_CONTEXT.disabled) return;
 				handleCheck(e, ITEM_CONTEXT.id, !ITEM_CONTEXT.checked);
 			}
 		}}
@@ -87,9 +85,12 @@
 
 <style>
 	.fs-tree-view-item-content {
+		--chevron-width: 1.2rem;
+		--gap: 0.75rem;
+		box-sizing: border-box;
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: var(--gap);
 		position: relative;
 		border-radius: var(--fs-control-border-radius);
 		font-size: var(--fs-body-font-size);
@@ -100,20 +101,26 @@
 		width: 100%;
 		text-align: left;
 		user-select: none;
+		&:not(:has(:global(.branch-indicator))) {
+			--leaf-offset: calc(var(--chevron-width) + var(--gap) + 0rem);
+		}
 		&.size-small {
 			font-size: var(--fs-body2-font-size);
 			padding: 0.125rem 0.5rem;
-			padding-left: calc(0.5rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.5rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 1.75rem;
 		}
 		&.size-medium {
 			font-size: var(--fs-body-font-size);
 			padding: 0.25rem 0.625rem;
-			padding-left: calc(0.625rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.625rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 2rem;
 		}
 		&.size-large {
 			font-size: var(--fs-subtitle2-font-size);
 			padding: 0.375rem 0.75rem;
-			padding-left: calc(0.75rem + 1.5rem * var(--depth, 0));
+			padding-left: calc(0.75rem + 2rem * var(--depth, 0) + var(--leaf-offset, 0rem));
+			min-height: 2.25rem;
 		}
 
 		&::after {
@@ -155,4 +162,30 @@
 			fill: currentColor;
 		}
 	}
+	.fs-tree-view-item-icon-before,
+	.fs-tree-view-item-icon-after,
+	.fs-tree-view-item-aside,
+	.fs-tree-view-item-actions {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+	.fs-tree-view-item-aside,
+	.fs-tree-view-item-actions {
+		margin-left: auto;
+	}
+	.fs-tree-view-item-aside + .fs-tree-view-item-actions {
+		margin-left: 0;
+	}
+	.fs-tree-view-item-actions {
+		opacity: 0;
+		@media (hover: none) {
+			opacity: 1;
+		}
+	}
+	.fs-tree-view-item-content:hover .fs-tree-view-item-actions,
+	.fs-tree-view-item-content:focus-within .fs-tree-view-item-actions,
+	:global(.fs-tree-view-item:focus-visible) > .fs-tree-view-item-content .fs-tree-view-item-actions {
+		opacity: 1;
+	}
 </style>

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

@@ -32,6 +32,8 @@
 		type = 'item',
 		open = (openItems instanceof Set ? openItems.has(id) : openItems.includes(id)) || undefined,
 		checked = (checkedItems instanceof Set ? checkedItems.has(id) : checkedItems.includes(id)) || undefined,
+		onCheckedChange,
+		onOpenChange,
 		children,
 		...attributes
 	}: TreeViewItemProps = $props();
@@ -61,6 +63,12 @@
 		get parentId() {
 			return itemContext?.id;
 		},
+		get onCheckedChange() {
+			return onCheckedChange;
+		},
+		get onOpenChange() {
+			return onOpenChange;
+		},
 		get open() {
 			return open;
 		},
@@ -190,7 +198,8 @@
 			outline: 2px solid var(--fs-focus-stroke-outer);
 			outline-offset: 2px;
 		}
-		&.open :global(.branch-indicator) {
+		/* Only the chevron of this item's own row, not the ones of the branches nested inside it. */
+		&.open > :global(.fs-tree-view-item-content .branch-indicator) {
 			rotate: 90deg;
 		}
 	}

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

@@ -89,12 +89,21 @@
 					await tick();
 				}
 
+				const wasChecked = new Map(state.TREE_NODES.entries().map(([nodeId, node]) => [nodeId, !!node.checked]));
+
 				if (selectionMode === 'single') {
 					traversalSyncSingleSelection(id, state.TREE_NODES, checkedItems);
-					return;
+				} else {
+					traversalSync(id, state.TREE_NODES, checkedItems, checked);
 				}
 
-				traversalSync(id, state.TREE_NODES, checkedItems, checked);
+				// Every item the click reached reports its own change, the tree reports the resulting set.
+				for (const node of state.TREE_NODES.values()) {
+					if (!!node.checked !== wasChecked.get(node.id)) {
+						node.onCheckedChange?.(e as Event, { id: node.id, checked: !!node.checked });
+					}
+				}
+				treeViewContext.events.onCheckedChange(e as Event, Array.from(checkedItems));
 			},
 			openItem: (e, id) => {
 				if (openItems instanceof SvelteSet) {
@@ -105,6 +114,9 @@
 				const node = treeViewContext.state.TREE_NODES.get(id)!;
 
 				node.open = true;
+
+				node.onOpenChange?.(e as Event, { id, open: true });
+				treeViewContext.events.onOpenChange(e as Event, Array.from(openItems));
 			},
 			closeItem: (e, id) => {
 				const { state } = treeViewContext;
@@ -122,6 +134,9 @@
 				if (virtualizer && state.forceVirtualRender) {
 					state.forceVirtualRender = false;
 				}
+
+				node.onOpenChange?.(e as Event, { id, open: false });
+				treeViewContext.events.onOpenChange(e as Event, Array.from(openItems));
 			},
 			registerItem: (node) => {
 				treeViewContext.state.TREE_NODES.set(node.id, node);

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

@@ -102,10 +102,12 @@ export function traversalSyncSingleSelection(itemId, state, iterable) {
     node.indeterminate = false;
     if (iterable instanceof Set) {
         iterable.clear();
-        iterable.add(node.id);
+        if (node.checked)
+            iterable.add(node.id);
     }
     else if (Array.isArray(iterable)) {
         iterable.length = 0;
-        iterable.push(node.id);
+        if (node.checked)
+            iterable.push(node.id);
     }
 }

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

@@ -14,6 +14,8 @@ export type TreeViewNode = {
     checked?: boolean;
     indeterminate?: boolean;
     open?: boolean;
+    onCheckedChange?: TreeViewItemProps['onCheckedChange'];
+    onOpenChange?: TreeViewItemProps['onOpenChange'];
 };
 export type TreeViewEvent<T extends Record<string, unknown> | Iterable<unknown>> = (e: Event, data: T) => void;
 /**
@@ -179,6 +181,8 @@ export type TreeViewItemContext = {
     readonly id: string;
     readonly type: TreeViewItemType;
     readonly parentId?: string;
+    readonly onCheckedChange?: TreeViewItemProps['onCheckedChange'];
+    readonly onOpenChange?: TreeViewItemProps['onOpenChange'];
     open?: boolean;
     checked?: boolean;
     indeterminate?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-svelte",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Modern Fluent UI 2 Components for Svelte 5",
   "author": {
     "name": "Jorge Acosta",
@@ -83,6 +83,7 @@
     "@humanspeak/svelte-virtual-list": "^0.5.14",
     "@inlang/paraglide-js": "^2.24.1",
     "@inlang/paraglide-js-svelte": "^1.0.4",
+    "@jlacostaec/paraglide-markup-svelte": "0.1.0",
     "@jlacostaec/propsmith": "^0.2.0",
     "@playwright/test": "^1.62.1",
     "@sveltejs/adapter-auto": "^7.0.1",