fluentui-svelte 0.4.0 → 0.6.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/dialog/dialog-actions.svelte

@@ -2,7 +2,14 @@
 	import { getTabspotAttributes } from 'tabspot';
 	import type { DialogActionsProps } from './types.js';
 
-	let { ref = $bindable(), position = 'end', fluid, children }: DialogActionsProps = $props();
+	let {
+		ref = $bindable(),
+		position = 'end',
+		fluid,
+		class: classes,
+		children,
+		...attributes
+	}: DialogActionsProps = $props();
 
 	// The bar is one tab stop holding a row of buttons: without the mover the root would
 	// take the tab stop and then offer no way to reach the rest of the buttons.
@@ -12,7 +19,12 @@
 	});
 </script>
 
-<div class={['dialog-actions', `justify-${position}`, { fluid }]} bind:this={ref} {...tabspotAttributes}>
+<div
+	class={['dialog-actions', `justify-${position}`, { fluid }, classes]}
+	bind:this={ref}
+	{...tabspotAttributes}
+	{...attributes}
+>
 	{@render children?.()}
 </div>
 
@@ -33,5 +45,8 @@
 		&.justify-end {
 			justify-content: flex-end;
 		}
+		&.fluid > :global(*) {
+			flex: 1 1 0;
+		}
 	}
 </style>

package/dist/components/dialog/dialog-content.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { DialogContentProps } from './types.js';
 
-	let { children }: DialogContentProps = $props();
+	let { ref = $bindable(), class: classes, children, ...attributes }: DialogContentProps = $props();
 </script>
 
-<div class="dialog-content">
+<div class={['dialog-content', classes]} bind:this={ref} {...attributes}>
 	{@render children?.()}
 </div>
 

package/dist/components/dialog/dialog-content.svelte.d.ts

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

package/dist/components/dialog/dialog-surface.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { onClickOutside } from 'runed';
+	import { on } from 'svelte/events';
 	import type { DialogSurfaceProps } from './types.js';
 	import { getDialogContext } from './dialog.svelte.js';
 	import { Button } from '../../index.js';
 	import DismissFilled from 'fluentui-icons-svelte/DismissFilled.svelte';
 
-	let { ref = $bindable(), children, ...attributes }: DialogSurfaceProps = $props();
+	let { ref = $bindable(), class: classes, oncancel, children, ...attributes }: DialogSurfaceProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -17,22 +18,50 @@
 
 	const { closeDialog } = methods;
 
+	// runed reports an outside press 10ms after the pointer goes down. By then the press that opens the
+	// dialog has already opened it, and a press while it is closed has nothing to dismiss, so remember
+	// whether the dialog was open at the moment the pointer went down.
+	let openOnPointerDown = false;
+
+	$effect(() => {
+		const doc = ref?.ownerDocument;
+		if (!doc) return;
+		return on(doc, 'pointerdown', () => (openOnPointerDown = !!ref?.open), { capture: true });
+	});
+
 	// Registered unconditionally and guarded from inside, so switching `type` after mount is honored.
 	onClickOutside(
 		() => ref,
 		() => {
-			if (config.type === 'alert') return;
+			if (config.type === 'alert' || !openOnPointerDown) return;
 			closeDialog();
 		}
 	);
 
+	// Escape cancels a modal dialog natively. An alert has to be answered with one of its actions, and any
+	// other modal closes through `closeDialog` so `onOpenChange` hears about it. A consumer's `oncancel`
+	// can still veto it with `preventDefault`.
+	function handleCancel(e: Event & { currentTarget: EventTarget & HTMLDialogElement }) {
+		oncancel?.(e);
+		if (e.defaultPrevented) return;
+		e.preventDefault();
+		if (config.type !== 'alert') closeDialog();
+	}
+
 	$effect(() => {
 		if (!ref) return;
 		_state.dialogRef = ref;
 	});
 </script>
 
-<dialog open={_state.open} class="fs-dialog" aria-labelledby={_state.titleId} bind:this={ref} {...attributes}>
+<dialog
+	open={_state.open}
+	class={['fs-dialog', classes]}
+	aria-labelledby={_state.titleId}
+	bind:this={ref}
+	oncancel={handleCancel}
+	{...attributes}
+>
 	<div class="dialog-wrapper">
 		{#if config.type === 'non-modal'}
 			<Button class="close-icon" appearance="subtle" onclick={() => methods.closeDialog()} aria-label="Close dialog">

package/dist/components/dialog/dialog-title.svelte

@@ -1,19 +1,36 @@
 <script lang="ts" generics="T extends DialogTitleTag">
 	import { PREFIX } from '../../internal/constants.js';
 	import { getDialogContext } from './dialog.svelte.js';
+	import { TITLE_TAG } from './utils.js';
 	import type { DialogTitleProps, DialogTitleTag } from './types.js';
 
-	let { as = 'h3' as T, ref = $bindable(), children }: DialogTitleProps<T> = $props();
-
-	const FALLBACK_ID = $props.id();
-	const ID = `${PREFIX}dialog-title-${FALLBACK_ID}`;
+	const _ID = $props.id();
+	const FALLBACK_ID = `${PREFIX}dialog-title-${_ID}`;
+
+	let {
+		as = 'h3' as T,
+		ref = $bindable(),
+		id = FALLBACK_ID,
+		class: classes,
+		children,
+		...attributes
+	}: DialogTitleProps<T> = $props();
+
+	/**
+	 * The tag the invariant rules over. The markup renders it through here, so it is checked
+	 * during SSR and on every prop update rather than only once on mount.
+	 */
+	const _as = $derived.by(() => {
+		if (!TITLE_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TITLE_TAG.join(', ')}`);
+		return as;
+	});
 
 	const context = getDialogContext();
 
 	$effect.pre(() => {
 		if (!context) return;
 
-		context.state.titleId = ID;
+		context.state.titleId = id ?? undefined;
 
 		return () => {
 			context.state.titleId = undefined;
@@ -21,7 +38,7 @@
 	});
 </script>
 
-<svelte:element this={as} id={ID} class="dialog-title" bind:this={ref}>
+<svelte:element this={_as} {id} class={['dialog-title', classes]} bind:this={ref} {...attributes}>
 	{@render children?.()}
 </svelte:element>
 

package/dist/components/dialog/dialog-trigger.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { Button } from '../../index.js';
+	import { invokeHandlers } from '../../internal/index.js';
 	import { getDialogContext } from './dialog.svelte.js';
 	import type { DialogTriggerProps } from './types.js';
 
-	let { children }: DialogTriggerProps = $props();
+	let { ref = $bindable(), class: classes, onclick, children, ...attributes }: DialogTriggerProps = $props();
 
 	const CONTEXT = getDialogContext();
 
@@ -14,7 +15,12 @@
 	const { methods } = CONTEXT;
 </script>
 
-<Button class="dialog-trigger" onclick={methods.openDialog}>
+<Button
+	bind:ref
+	class={['dialog-trigger', classes]}
+	onclick={(e: MouseEvent) => invokeHandlers(e, [], [onclick, methods.openDialog])}
+	{...attributes}
+>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/components/dialog/dialog-trigger.svelte.d.ts

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

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

@@ -99,7 +99,7 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 | Name                    | Type                | Default | Description                               |
 | ----------------------- | ------------------- | ------- | ----------------------------------------- |
-| `ref`                   | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
+| `ref` _bindable_        | `HTMLButtonElement` |         | The DOM reference of the trigger element. |
 | `ButtonProps<'button'>` |                     |         |                                           |
 
 <!-- /props:DialogTriggerProps -->
@@ -136,7 +136,7 @@ Add a `DialogActions` region to render action buttons in the dialog footer. Use
 
 | Name                       | Type             | Default | Description                               |
 | -------------------------- | ---------------- | ------- | ----------------------------------------- |
-| `ref`                      | `HTMLDivElement` |         | The DOM reference of the content element. |
+| `ref` _bindable_           | `HTMLDivElement` |         | The DOM reference of the content element. |
 | Element Attributes (`div`) |                  |         |                                           |
 
 <!-- /props:DialogContentProps -->

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

@@ -35,12 +35,16 @@ export type DialogSurfaceProps = {
 } & HTMLAttributes<HTMLDialogElement>;
 /** @propsmith DialogTriggerProps */
 export type DialogTriggerProps = {
-    /** The DOM reference of the trigger element. */
+    /** The DOM reference of the trigger element.
+     * @bindable
+     */
     ref?: HTMLButtonElement;
 } & ButtonProps<'button'>;
 /** @propsmith DialogContentProps */
 export type DialogContentProps = {
-    /** The DOM reference of the content element. */
+    /** The DOM reference of the content element.
+     * @bindable
+     */
     ref?: HTMLDivElement;
 } & HTMLAttributes<HTMLDivElement>;
 /** @propsmith DialogActionsProps */

package/dist/components/dialog/utils.d.ts

@@ -0,0 +1,2 @@
+import type { DialogTitleTag } from './types.ts';
+export declare const TITLE_TAG: DialogTitleTag[];

package/dist/components/dialog/utils.js

@@ -0,0 +1 @@
+export const TITLE_TAG = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

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;