fluentui-svelte 0.6.0 → 0.7.0

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

@@ -20,7 +20,14 @@ The ListView is a component for rendering a set of vertically stacked items. The
 
 ## ListView API
 
-> **Best practices:** Please check the Fluent UI React List best practices for guidance.
+### Best practices
+
+- Keep lists that only display text out of the Tab sequence. Configure `navigationMode` on the outer ListView: use `items` for native link navigation and `composite` for selectable cards with secondary controls. Let the component manage item and control tabindex unless you opt out with `disableTabspot`.
+- With the default grid roles in selectable composite lists, the component wraps each row's content in one `gridcell` and manages navigation to its controls. No manual `gridcell` wrappers are needed.
+- Use `onAction` for an item's primary action and native buttons or links with `onclick` for secondary actions. Enter and Space both activate non-native actionable items; links retain native keyboard behavior. In composite selection rows, the checkmark changes selection independently, and secondary buttons and links do not trigger the row's action or selection.
+- Keep the default roles for flat selection widgets; they depend on both `selectionMode` and `navigationMode`. Match the HTML tags: `ul`/`ol` with `li` items, or `as="div"` on both a card list and its items.
+- Use ListViewItemBranch for expandable sublists. Branches are never selectable and manage their disclosure attributes and focus. Each nested list owns its selection. Set `role="list"` on each selectable list containing branches to preserve native list semantics.
+- Give selectable ListView widgets an accessible name with `aria-label` or `aria-labelledby`. Give navigation a named `nav` landmark and mark the current link with `aria-current="page"`. Use meaningful visible text or `aria-label` for controls, a descriptive branch `label`, and stable item `value` strings when using selection.
 
 ### As
 
@@ -32,10 +39,50 @@ Instead of setting this on every ListViewItem, you can set it here and every ite
 
 ### Navigation Mode
 
-This option allows you to set keyboard navigation based on your needs. For view-only data, you do not need to set this unless the items perform some action. If your items have multiple actionable elements within the ListViewItem, like buttons or menus, you can set this to composite.
+`items` keeps each item in the Tab order; `composite` gives the entire list one tab stop and lets Right enter an item's secondary controls. Selection uses listbox/option roles in items mode, or grid/row/gridcell roles in composite mode. Set `role="list"` on each selectable navigation list with sublists to preserve native list semantics; use `aria-current` on links to announce the current page.
+
+### Keyboard navigation
+
+Up/Down move between siblings and Home/End reach the ends of the current level. Right opens a collapsed branch; Right on an expanded branch enters its sublist. Left closes an expanded branch; Left on a collapsed branch or child returns to its parent. Escape closes the nearest branch and restores focus to its button. Right also enters a composite item's controls; Left/Right move between them, and Left from the first control returns to the row. Enter activates links; Enter and Space activate buttons and selectable items. `disableTabspot` opts out of arrow-key focus management. Each nested ListView owns its selection state, so selecting a child does not select its parent.
 
 ## Examples
 
+### Simple navigation
+
+Use native anchors inside a named navigation landmark. Under `ul` or `ol`, ListViewItem wraps anchors and buttons in `li` elements.
+
+```svelte
+<nav aria-label="Main navigation">
+	<ListView>
+		<ListViewItem as="a" href="/">Home</ListViewItem>
+		<ListViewItem as="a" href="/docs">Documentation</ListViewItem>
+		<ListViewItem as="a" href="/docs/components/list-view" aria-current="page">ListView</ListViewItem>
+	</ListView>
+</nav>
+```
+
+### Navigation with sublists
+
+Nest a ListView inside ListViewItemBranch. Branches are focusable disclosure buttons and never participate in selection. The component manages expanded state, aria-expanded, aria-controls, hidden content and focus restoration. Nested lists remain mounted when collapsed, preserving their selection. Hierarchy, indentation and keyboard groups are detected automatically; every nested list owns its selection. Use native list semantics: when selection is enabled, set `role="list"` on lists containing branches. Branches cannot be placed in listbox or grid lists. See the [WAI-ARIA disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+```svelte
+<script lang="ts">
+	import { ListView, ListViewItem, ListViewItemBranch } from 'fluentui-svelte';
+</script>
+
+<nav aria-label="Component navigation">
+	<ListView>
+		<ListViewItem as="a" href="/">Home</ListViewItem>
+		<ListViewItemBranch label="Components" expanded>
+			<ListView>
+				<ListViewItem as="a" href="/docs/components/button">Button</ListViewItem>
+				<ListViewItem as="a" href="/docs/components/checkbox">Checkbox</ListViewItem>
+			</ListView>
+		</ListViewItemBranch>
+	</ListView>
+</nav>
+```
+
 ### Value
 
 Sets the value of the current item. You must set this when using the ListView selection system or if items change dynamically.
@@ -49,7 +96,7 @@ This event is triggered when clicking or tapping the element. It executes the pr
 Use `selectionMode` (`single`, `multiselect`, or `extended`) to control how items are selected.
 
 ```svelte
-<ListView selectionMode="multiselect" selectedItems={['Apple']}>
+<ListView aria-label="Fruits" selectionMode="multiselect" selectedItems={['Apple']}>
 	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
 		<ListViewItem value={item}>{item}</ListViewItem>
 	{/each}
@@ -61,7 +108,7 @@ Use `selectionMode` (`single`, `multiselect`, or `extended`) to control how item
 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>
+<ListView aria-label="Fruits" selectionMode="multiselect" toggleOnClick>
 	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
 		<ListViewItem value={item}>{item}</ListViewItem>
 	{/each}
@@ -77,7 +124,7 @@ Add and configure a checkbox for the element. You can use the same props for the
 	let selected = $state(['Apple']);
 </script>
 
-<ListView selectionMode="multiselect" bind:selectedItems={selected}>
+<ListView aria-label="Fruits" selectionMode="multiselect" bind:selectedItems={selected}>
 	{#each ['Apple', 'Banana', 'Cherry'] as item (item)}
 		<ListViewItem value={item} checkmark={{}}>{item}</ListViewItem>
 	{/each}
@@ -88,7 +135,7 @@ Add and configure a checkbox for the element. You can use the same props for the
 
 ### 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().
+With `navigationMode` set to `composite` and a `selectionMode`, every item is a row. Use `as="div"` for both the list and its card items to keep the HTML structure valid. Clicking a row 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. Secondary controls run their own actions without selecting the item or triggering its primary action.
 
 ```svelte
 <script>
@@ -106,13 +153,13 @@ With `navigationMode` set to `composite` and a `selectionMode`, every item is a
 	{#each cards as card (card.name)}
 		{#snippet install()}
 			<Button
-				onclick={(e) => {
-					e.stopPropagation();
+				onclick={() => {
 					lastAction = 'Installed ' + card.name;
 				}}>Install</Button
 			>
 		{/snippet}
 		<ListViewItem
+			as="div"
 			value={card.name}
 			checkmark={{ wrapperAttributes: { style: 'position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;' } }}
 			style="padding: 0"
@@ -135,18 +182,20 @@ With `navigationMode` set to `composite` and a `selectionMode`, every item is a
 <!-- 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.                                                                                          |
-| `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            |                                                                       |             |                                                                                                                                 |
+| Name                       | Type                                                                  | Default     | Description                                                                                                                                   |
+| -------------------------- | --------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `role`                     | `AriaRole`                                                            |             | Overrides the list role and the roles derived for its items. Use `list` for nested navigation with independent selection.                     |
+| `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.                                                                 |
+| `manageSpecialKeys`        | `boolean` &#124; `TabspotRootOptions['manageSpecialKeys']`            | `true`      | Which special keys Tabspot handles at the root. Set individual keys to leave Escape to an enclosing panel. Omitted keys in an object are off. |
+| `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 -->
 
@@ -155,18 +204,39 @@ With `navigationMode` set to `composite` and a `selectionMode`, every item is a
 <!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
 <!-- props:ListViewItemProps -->
 
-| Name             | Type                                                               | Default | Description                                                                                |
-| ---------------- | ------------------------------------------------------------------ | ------- | ------------------------------------------------------------------------------------------ |
-| `as`             | `'li'` &#124; `'a'` &#124; `'div'`                                 | `'li'`  | The HTML element to render the item as.                                                    |
-| `shape`          | `'circular'` &#124; `'rounded'` &#124; `'square'`                  |         | The item can have a circular, rounded or square shape. Inherited from the list by default. |
-| `value`          | `string`                                                           |         | The value reported to the list when the item is selected. Falls back to a generated id.    |
-| `active`         | `boolean`                                                          |         | Renders the item in its pressed state.                                                     |
-| `role`           | `'treeitem'` &#124; `'menuitem'` &#124; `'option'` &#124; `'row'`  |         | The ARIA role of the item. Derived from the list by default.                               |
-| `disabled`       | `boolean`                                                          |         | Disables the user interaction.                                                             |
-| `checkmark`      | `CheckboxProps`                                                    |         | The props to spread on the checkbox rendered when the list is multiselect.                 |
-| `onAction`       | `(e: MouseEvent, value: string) => void`                           |         | Called when the item is clicked or activated with the keyboard.                            |
-| `onfocus`        | `(e: Event, value: string) => void`                                |         | Called when the item receives the focus.                                                   |
-| `ref` _bindable_ | `HTMLLIElement` &#124; `HTMLAnchorElement` &#124; `HTMLDivElement` |         | The DOM reference of the item element.                                                     |
-| HTML Attributes  |                                                                    |         |                                                                                            |
+| Name             | Type                                                                                          | Default | Description                                                                                                                                                                                                                                             |
+| ---------------- | --------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `as`             | `'li'` &#124; `'a'` &#124; `'button'` &#124; `'div'`                                          | `'li'`  | The HTML element to render the item as. Links and buttons are wrapped in a list item when the list renders as `ul` or `ol`. Use `li` or `div` for nested lists and content with multiple controls. Buttons cannot contain checkmarks or composite rows. |
+| `shape`          | `'circular'` &#124; `'rounded'` &#124; `'square'`                                             |         | The item can have a circular, rounded or square shape. Inherited from the list by default.                                                                                                                                                              |
+| `value`          | `string`                                                                                      |         | The value reported to the list when the item is selected. Falls back to a generated id.                                                                                                                                                                 |
+| `active`         | `boolean`                                                                                     |         | Renders the item in its pressed state.                                                                                                                                                                                                                  |
+| `role`           | `'treeitem'` &#124; `'menuitem'` &#124; `'option'` &#124; `'row'`                             |         | The ARIA role of the item. Derived from the list by default.                                                                                                                                                                                            |
+| `disabled`       | `boolean`                                                                                     |         | Disables the user interaction.                                                                                                                                                                                                                          |
+| `checkmark`      | `CheckboxProps`                                                                               |         | The props to spread on the checkbox rendered when the list is multiselect.                                                                                                                                                                              |
+| `onAction`       | `(e: MouseEvent, value: string) => void`                                                      |         | Called when the item is clicked or activated with the keyboard.                                                                                                                                                                                         |
+| `onfocus`        | `(e: Event, value: string) => void`                                                           |         | Called when the item receives the focus.                                                                                                                                                                                                                |
+| `ref` _bindable_ | `HTMLLIElement` &#124; `HTMLAnchorElement` &#124; `HTMLButtonElement` &#124; `HTMLDivElement` |         | The DOM reference of the item element.                                                                                                                                                                                                                  |
+| HTML Attributes  |                                                                                               |         |                                                                                                                                                                                                                                                         |
 
 <!-- /props:ListViewItemProps -->
+
+## ListViewItemBranch Props
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:ListViewItemBranchProps -->
+
+| Name                                                                                                 | Type                                              | Default | Description                                                                                                                     |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `label`                                                                                              | `string`                                          |         | The accessible label rendered in the disclosure button.                                                                         |
+| `icon`                                                                                               | `Snippet` &#124; `Component`                      |         | The decorative icon before the label.                                                                                           |
+| `expanded` _bindable_                                                                                | `boolean`                                         | `false` | Whether the nested content is visible. Branches only expand or collapse and are never selectable.                               |
+| `onExpandedChange`                                                                                   | `(e: Event, expanded: boolean) => void`           |         | Called when a user expands or collapses the branch.                                                                             |
+| `disabled`                                                                                           | `boolean`                                         | `false` | Disables the disclosure button.                                                                                                 |
+| `shape`                                                                                              | `'circular'` &#124; `'rounded'` &#124; `'square'` |         | The disclosure button shape. Inherited from the list by default.                                                                |
+| `ref` _bindable_                                                                                     | `HTMLButtonElement`                               |         | The DOM reference of the native disclosure button. Additional HTML attributes, including class and id, also target this button. |
+| `wrapperRef` _bindable_                                                                              | `HTMLLIElement` &#124; `HTMLDivElement`           |         | The DOM reference of the wrapper element, the list item that holds the button and the nested list.                              |
+| `wrapperAttributes`                                                                                  | `HTMLAttributes`                                  |         | The attributes to spread on the wrapper element.                                                                                |
+| `children`                                                                                           | `Snippet`                                         |         | Nested ListView content, kept mounted while collapsed to preserve its selection.                                                |
+| `HTMLButtonAttributes` without `children`, `role`, `type`, `value`, `aria-expanded`, `aria-controls` |                                                   |         |                                                                                                                                 |
+
+<!-- /props:ListViewItemBranchProps -->

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

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import ChevronDownRegular from 'fluentui-icons-svelte/ChevronDownRegular.svelte';
+	import { getTabspotAttributes, type TabspotNavigationEvent, type TabspotNodeOptions } from 'tabspot';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
+	import {
+		attachTabspot,
+		getListViewContext,
+		getListViewItemContext,
+		LIST_VIEW_SKIP,
+		setListViewItemContext
+	} from './utils.js';
+	import type { ListViewItemBranchProps } from './types.js';
+
+	const ID = $props.id();
+	const REGION_ID = `fs-list-view-branch-${ID}`;
+	const parent = getListViewContext();
+	const owner = getListViewItemContext();
+	const globalContext = getGlobalFSContext();
+	if (!parent) throw new Error('ListViewItemBranch must be used within a ListView');
+	const context = parent;
+
+	let {
+		label,
+		icon,
+		expanded = $bindable(false),
+		disabled = false,
+		shape,
+		ref = $bindable(null),
+		wrapperRef = $bindable(null),
+		wrapperAttributes,
+		class: classes,
+		onclick,
+		onkeydown,
+		onExpandedChange,
+		children,
+		...attributes
+	}: ListViewItemBranchProps = $props();
+
+	let regionRef: HTMLDivElement | undefined;
+
+	const wrapperTag = $derived.by(() => {
+		if (context.config.role !== undefined && context.config.role !== 'list') {
+			throw new Error('ListViewItemBranch requires a native list. Set role="list" on selectable navigation lists.');
+		}
+		if (owner?.as === 'a' || owner?.as === 'button') {
+			throw new Error('ListViewItemBranch must be outside links and buttons.');
+		}
+		return context.config.as === 'div' ? 'div' : 'li';
+	});
+
+	setListViewItemContext({
+		get as() {
+			return wrapperTag;
+		}
+	});
+
+	const tabspotConfig: TabspotNodeOptions | undefined = $derived(
+		context.config.disableTabspot
+			? undefined
+			: {
+					mover: {
+						axis: 'vertical',
+						items: '.fs-list-view-item-branch-trigger',
+						visibilityAware: 'Visible',
+						skip: LIST_VIEW_SKIP,
+						ignoreKeys: expanded ? ['ArrowLeft'] : ['ArrowRight']
+					}
+				}
+	);
+
+	const tabspotAttributes = $derived(tabspotConfig && getTabspotAttributes(tabspotConfig));
+
+	const canceledKeys = new WeakSet<KeyboardEvent>();
+
+	function changeExpanded(event: Event, next: boolean) {
+		if (disabled || expanded === next) return;
+		expanded = next;
+		onExpandedChange?.(event, expanded);
+	}
+
+	// Tabspot prevents Escape before native handlers. Record further cancellation by the consumer.
+	function trackCancellation(event: KeyboardEvent, run: () => void) {
+		const preventDefault = event.preventDefault;
+		event.preventDefault = () => {
+			canceledKeys.add(event);
+			preventDefault.call(event);
+		};
+		try {
+			run();
+		} finally {
+			event.preventDefault = preventDefault;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (onkeydown) trackCancellation(event, () => invokeHandlers(event, disabled, [onkeydown]));
+		if (event.defaultPrevented || disabled) return;
+		if (context.config.disableTabspot && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) return;
+		if ((event.key === 'ArrowRight' && !expanded) || (event.key === 'ArrowLeft' && expanded)) {
+			event.preventDefault();
+			changeExpanded(event, !expanded);
+		}
+	}
+
+	function handleEscape(event: KeyboardEvent) {
+		if (
+			!expanded ||
+			event.key !== 'Escape' ||
+			(event.target as Element).closest('.fs-list-view-item-branch') !== wrapperRef
+		)
+			return;
+		if (disabled || canceledKeys.has(event) || (context.config.disableTabspot && event.defaultPrevented)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		changeExpanded(event, false);
+		ref?.focus();
+	}
+
+	function guardEscape(event: TabspotNavigationEvent) {
+		if (expanded && event.direction === 'escape' && event.from?.closest('.fs-list-view-item-branch') === wrapperRef)
+			event.preventDefault();
+	}
+
+	function restoreFocusBeforeCollapse() {
+		if (!expanded && regionRef?.contains(document.activeElement)) ref?.focus();
+	}
+
+	$effect.pre(restoreFocusBeforeCollapse);
+</script>
+
+<svelte:element
+	this={wrapperTag}
+	role={wrapperTag === 'div' ? 'listitem' : undefined}
+	{...wrapperAttributes}
+	bind:this={wrapperRef}
+	class={['fs-list-view-item-branch', wrapperAttributes?.class]}
+	onkeydown={(event: KeyboardEvent) => {
+		const wrapperKeydown = wrapperAttributes?.onkeydown;
+		if (typeof wrapperKeydown === 'function')
+			trackCancellation(event, () => invokeHandlers(event, [], [wrapperKeydown]));
+		handleEscape(event);
+	}}
+	{...tabspotAttributes}
+	{@attach attachTabspot(tabspotConfig, guardEscape, globalContext?.state.tabspotInstance)}
+>
+	<button
+		{...attributes}
+		class={['fs-list-view-item-branch-trigger', shape ?? context.config.shape, classes]}
+		{@attach (element) => {
+			ref = element;
+			return () => {
+				ref = null;
+			};
+		}}
+		type="button"
+		role={undefined}
+		{disabled}
+		aria-expanded={expanded}
+		aria-controls={REGION_ID}
+		onclick={(event) => {
+			invokeHandlers(event, disabled, [onclick]);
+			if (!event.defaultPrevented) changeExpanded(event, !expanded);
+		}}
+		onkeydown={handleKeydown}
+	>
+		{#if icon}
+			<span class="branch-icon" aria-hidden="true">
+				<RenderSoC SoC={icon} />
+			</span>
+		{/if}
+		<span class="fs-list-view-branch-label">{label}</span>
+		<ChevronDownRegular aria-hidden="true" width="1rem" height="1rem" class={['branch-chevron', { expanded }]} />
+	</button>
+	<div
+		id={REGION_ID}
+		{@attach (element) => {
+			regionRef = element;
+			return () => {
+				regionRef = undefined;
+			};
+		}}
+		class="fs-list-view-item-branch-region"
+		hidden={!expanded}
+	>
+		{@render children?.()}
+	</div>
+</svelte:element>
+
+<style>
+	.fs-list-view-item-branch {
+		list-style: none;
+	}
+	.fs-list-view-item-branch-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin: 0.3rem 0;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0.275rem 0.713rem 0.4rem;
+		border: none;
+		border-radius: var(--fs-control-border-radius);
+		font: inherit;
+		font-size: var(--fs-body2-font-size);
+		text-align: start;
+		color: var(--fs-text-primary);
+		background: var(--fs-subtle-fill-transparent);
+		cursor: pointer;
+		&:hover:not(:disabled) {
+			background: var(--fs-subtle-fill-secondary);
+		}
+		&:active:not(:disabled) {
+			background: var(--fs-subtle-fill-tertiary);
+		}
+		&:focus-visible {
+			outline: 0.125rem solid var(--fs-focus-stroke-outer);
+			outline-offset: 0.063rem;
+		}
+		&:disabled {
+			color: var(--fs-text-disabled);
+			cursor: not-allowed;
+		}
+		&.square {
+			border-radius: 0;
+		}
+		&.circular {
+			border-radius: 50vw;
+		}
+		& :global(.branch-chevron) {
+			flex-shrink: 0;
+			margin-inline-start: auto;
+			font-size: 1rem;
+		}
+		& :global(.branch-chevron.expanded) {
+			rotate: 180deg;
+		}
+	}
+	.branch-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: none;
+		inline-size: 1rem;
+		/* As tall as a line of text, so a branch is as tall with its label as without it. */
+		block-size: 1lh;
+		& :global(svg) {
+			inline-size: 1rem;
+			block-size: 1rem;
+		}
+	}
+	.fs-list-view-item-branch-region > :global(.fs-list-view) {
+		padding-inline-start: 1rem;
+		box-sizing: border-box;
+	}
+</style>

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

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