fluentui-svelte 0.3.0 → 0.5.0

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

@@ -0,0 +1,193 @@
+# Breadcrumb
+
+A breadcrumb shows where a page sits in the hierarchy above it, and gives the reader a way back up. It renders a `nav` landmark around an ordered list, so a screen reader can jump straight to it.
+
+The landmark names itself `Breadcrumb`, the trail is an `ol` so its order is part of the markup rather than of the styling, the last step carries `aria-current="page"`, and the dividers are held out of the accessibility tree — a trail of three steps reads as three, not as five. Every one of those can be overridden: pass your own `aria-label`, or an `aria-labelledby`, and the default steps aside.
+
+To create a breadcrumb, you will need to use the following components:
+
+- `Breadcrumb`: The landmark and the list. It creates the context the rest read.
+- `BreadcrumbItem`: One step of the trail — the list item the step lives in. It takes anything, not only a step.
+- `BreadcrumbButton`: A step that can be activated: an anchor when it goes somewhere, a button when it does something.
+- `BreadcrumbDivider`: The mark between two steps. It is decoration, and is hidden from assistive technology.
+
+## Usage
+
+A breadcrumb is a list of steps with a divider between them. The last step is the page the reader is already on, so it is marked `current` rather than linked away.
+
+```svelte
+<script>
+	import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
+</script>
+
+<Breadcrumb>
+	<BreadcrumbItem>
+		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+	<BreadcrumbItem>
+		<BreadcrumbButton as="a" href="/files">Files</BreadcrumbButton>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+	<BreadcrumbItem>
+		<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
+	</BreadcrumbItem>
+</Breadcrumb>
+```
+
+## Examples
+
+### Size
+
+`size` sets the type, the height and the divider of every step at once.
+
+```svelte
+<Breadcrumb size="small">...</Breadcrumb>
+<Breadcrumb size="medium">...</Breadcrumb>
+<Breadcrumb size="large">...</Breadcrumb>
+```
+
+### Icon
+
+`icon` takes a snippet or a component and renders it beside the label, on the side `iconPosition` asks for.
+
+```svelte
+<BreadcrumbItem>
+	<BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
+</BreadcrumbItem>
+```
+
+### Current Step
+
+`current` marks the step as the page the trail ends at. It announces `aria-current="page"` and reads as text rather than as a way out, so the last step does not offer to take the reader where they already are.
+
+```svelte
+<BreadcrumbItem>
+	<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
+</BreadcrumbItem>
+```
+
+### Overflow Menu
+
+A step takes whatever you put in it, so a long trail folds its middle into a menu by making that menu a step of its own. Which steps fold is your call — slice the list wherever the layout needs it.
+
+```svelte
+<script>
+	// Keep the root and the last two steps; everything between them goes into the menu.
+	const head = trail.slice(0, 1);
+	const folded = trail.slice(1, -2);
+	const tail = trail.slice(-2);
+</script>
+
+<Breadcrumb>
+	{#each head as item (item.name)}
+		<BreadcrumbItem>
+			<BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
+		</BreadcrumbItem>
+		<BreadcrumbDivider />
+	{/each}
+
+	<BreadcrumbItem>
+		<Menu>
+			<MenuTrigger>
+				{#snippet children({ state, menuTriggerProps })}
+					<Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label="More steps">
+						<MoreHorizontalRegular />
+					</Button>
+				{/snippet}
+			</MenuTrigger>
+			<MenuPopover>
+				<MenuList>
+					<!-- A step that goes somewhere is a link, in the menu as much as in the trail. -->
+					{#each folded as item (item.name)}
+						<MenuItem href={item.href}>{item.name}</MenuItem>
+					{/each}
+				</MenuList>
+			</MenuPopover>
+		</Menu>
+	</BreadcrumbItem>
+	<BreadcrumbDivider />
+
+	{#each tail as item (item.name)}
+		<BreadcrumbItem>
+			<BreadcrumbButton current>{item.name}</BreadcrumbButton>
+		</BreadcrumbItem>
+	{/each}
+</Breadcrumb>
+```
+
+The label on the menu button is yours to write, and it is worth writing: a trigger with only an icon says nothing to a screen reader. Note also that what lives inside a `MenuPopover` is not rendered until the menu opens, so the folded steps are not in the HTML a crawler reads.
+
+### Focus Mode
+
+`focusMode` decides how the focus walks the trail. `tab`, the default, leaves every step its own tab stop, which is what a reader expects of a row of links. `arrow` gives the whole trail a single tab stop and moves between steps with the arrow keys, with `Home` and `End` for the ends.
+
+```svelte
+<Breadcrumb focusMode="arrow">...</Breadcrumb>
+```
+
+## Component Props (Breadcrumb)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbProps -->
+
+| Name                 | Type                                         | Default    | Description                                                                                                                                                |
+| -------------------- | -------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_     | `HTMLElement`                                |            | The DOM reference of the `nav`.                                                                                                                            |
+| `listRef` _bindable_ | `HTMLOListElement`                           |            | The DOM reference of the list.                                                                                                                             |
+| `listProps`          | `HTMLOlAttributes`                           |            | The props to spread on the list element.                                                                                                                   |
+| `size`               | `'small'` &#124; `'medium'` &#124; `'large'` | `'medium'` | The size of every step and divider of the trail.                                                                                                           |
+| `focusMode`          | `'tab'` &#124; `'arrow'`                     | `'tab'`    | How the focus walks the trail: `tab` leaves every step its own tab stop, `arrow` gives the trail a single one and moves between steps with the arrow keys. |
+| Element Attributes   |                                              |            |                                                                                                                                                            |
+
+<!-- /props:BreadcrumbProps -->
+
+## Component Props (BreadcrumbItem)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbItemProps -->
+
+| Name                      | Type            | Default | Description                    |
+| ------------------------- | --------------- | ------- | ------------------------------ |
+| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the item. |
+| Element Attributes (`li`) |                 |         |                                |
+
+<!-- /props:BreadcrumbItemProps -->
+
+## Component Props (BreadcrumbButton)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbButtonProps -->
+
+| Name                | Type                              | Default    | Description                                                                                            |
+| ------------------- | --------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
+| `ref` _bindable_    | `BreadcrumbItemElementDOMType[T]` |            | The DOM reference of the step.                                                                         |
+| `as`                | `'button'` &#124; `'a'`           | `'button'` | The DOM element to render. A step that goes somewhere is an anchor and takes `href`.                   |
+| `icon`              | `Snippet` &#124; `Component`      |            | The icon to display beside the label.                                                                  |
+| `iconPosition`      | `'before'` &#124; `'after'`       | `'before'` | Which side of the label the icon sits on.                                                              |
+| `current`           | `boolean`                         | `false`    | Marks the step as the page the trail ends at, which is what `aria-current` announces.                  |
+| `disabled`          | `boolean`                         |            | Disables the user interaction.                                                                         |
+| `disabledFocusable` | `boolean`                         | `false`    | Keeps a disabled step focusable, so the tab order stays the same for a keyboard or screen reader user. |
+| HTML Attributes     |                                   |            |                                                                                                        |
+
+<!-- /props:BreadcrumbButtonProps -->
+
+## Component Props (BreadcrumbDivider)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:BreadcrumbDividerProps -->
+
+| Name                      | Type            | Default | Description                       |
+| ------------------------- | --------------- | ------- | --------------------------------- |
+| `ref` _bindable_          | `HTMLLIElement` |         | The DOM reference of the divider. |
+| Element Attributes (`li`) |                 |         |                                   |
+
+<!-- /props:BreadcrumbDividerProps -->
+
+## Accessibility
+
+The landmark is named `Breadcrumb` by default, which is what a screen reader announces when jumping to it. Give it your own `aria-label` when a page carries more than one trail, so each is distinguishable, or an `aria-labelledby` pointing at a heading you already render — the default steps aside for both.
+
+The dividers are decoration and are hidden, so the list reads as the number of steps it has. The last step carries `aria-current="page"`. A step with an icon and no label needs an `aria-label` of its own.
+
+Structured data is left to you. A breadcrumb is one of the few components a search engine reads directly, through `BreadcrumbList` from schema.org, but the text of a step lives in your markup and the URLs live in your routing — so the trail you publish is yours to build, in whichever shape your site already uses.

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

@@ -0,0 +1,80 @@
+import type { BeforeOrAfter, PolymorphicProps, Sizes } from '../../types/index.js';
+import type { Snippet, Component } from 'svelte';
+import type { HTMLAttributes, HTMLOlAttributes } from 'svelte/elements';
+/** How the focus walks the trail. */
+export type BreadcrumbFocusMode = 'tab' | 'arrow';
+export type BreadcrumbItemGenerics = 'button' | 'a';
+export type BreadcrumbItemElementDOMType = {
+    button: HTMLButtonElement;
+    a: HTMLAnchorElement;
+};
+/** @propsmith BreadcrumbProps */
+export type BreadcrumbProps = {
+    /** The DOM reference of the `nav`.
+     * @bindable
+     */
+    ref?: HTMLElement;
+    /** The DOM reference of the list.
+     * @bindable
+     */
+    listRef?: HTMLOListElement;
+    /** The props to spread on the list element.
+     * @type HTMLOlAttributes
+     */
+    listProps?: HTMLOlAttributes;
+    /** The size of every step and divider of the trail.
+     * @default 'medium'
+     */
+    size?: Sizes;
+    /** How the focus walks the trail: `tab` leaves every step its own tab stop, `arrow` gives the
+     * trail a single one and moves between steps with the arrow keys.
+     * @default 'tab'
+     */
+    focusMode?: BreadcrumbFocusMode;
+} & HTMLAttributes<HTMLElement>;
+/** @propsmith BreadcrumbItemProps */
+export type BreadcrumbItemProps = {
+    /** The DOM reference of the item.
+     * @bindable
+     */
+    ref?: HTMLLIElement;
+} & HTMLAttributes<HTMLLIElement>;
+/** @propsmith BreadcrumbButtonProps */
+export type BreadcrumbButtonProps<T extends BreadcrumbItemGenerics = 'button'> = {
+    /** The DOM reference of the step.
+     * @type BreadcrumbItemElementDOMType[T]
+     * @bindable
+     */
+    ref?: BreadcrumbItemElementDOMType[T];
+    /** The DOM element to render. A step that goes somewhere is an anchor and takes `href`.
+     * @type 'button' | 'a'
+     * @default 'button'
+     */
+    as?: T;
+    /** The icon to display beside the label.
+     * @type Snippet | Component
+     */
+    icon?: Snippet | Component;
+    /** Which side of the label the icon sits on.
+     * @default 'before'
+     */
+    iconPosition?: BeforeOrAfter;
+    /** Marks the step as the page the trail ends at, which is what `aria-current` announces.
+     * @default false
+     */
+    current?: boolean;
+    /** Disables the user interaction. */
+    disabled?: boolean;
+    /** Keeps a disabled step focusable, so the tab order stays the same for a keyboard or screen
+     * reader user.
+     * @default false
+     */
+    disabledFocusable?: boolean;
+} & PolymorphicProps<T>;
+/** @propsmith BreadcrumbDividerProps */
+export type BreadcrumbDividerProps = {
+    /** The DOM reference of the divider.
+     * @bindable
+     */
+    ref?: HTMLLIElement;
+} & HTMLAttributes<HTMLLIElement>;

package/dist/components/breadcrumb/types.js

@@ -0,0 +1 @@
+export {};

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. */