fluentui-svelte 0.1.2 → 0.2.1

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

@@ -24,10 +24,14 @@ Disables the hyperlink and prevents navigation.
 
 ## Component Props
 
-| Name               | Type                | Description                                                             |
-| ------------------ | ------------------- | ----------------------------------------------------------------------- |
-| `href`             | `string`            | The URL to navigate to when the link is clicked.                        |
-| `disabled`         | `boolean`           | Disables the hyperlink and prevents navigation.                         |
-| `children`         | `Snippet`           | The content of the hyperlink.                                           |
-| `ref`              | `HTMLAnchorElement` | A bindable reference to the underlying anchor element.                  |
-| Element Attributes |                     | You can use any valid HTML anchor attributes (e.g., target, rel, etc.). |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:HyperlinkProps -->
+
+| Name                     | Type                | Default | Description                              |
+| ------------------------ | ------------------- | ------- | ---------------------------------------- |
+| `href`                   | `string`            | `'#'`   | The URL the hyperlink points to.         |
+| `disabled`               | `boolean`           |         | Disables the user interaction.           |
+| `ref` _bindable_         | `HTMLAnchorElement` |         | The DOM reference of the anchor element. |
+| Element Attributes (`a`) |                     |         |                                          |
+
+<!-- /props:HyperlinkProps -->

package/dist/components/info-bar/docs/llms.md

@@ -70,12 +70,18 @@ The hideCloseButton prop allows you to hide the close button in the InfoBar.
 
 ## Component Props
 
-| Name              | Type                   | Description                                                                                               |
-| ----------------- | ---------------------- | --------------------------------------------------------------------------------------------------------- |
-| `status`          | `string`               | The status of the InfoBar. Possible values: 'information', 'attention', 'warning', 'critical', 'success'. |
-| `style`           | `string`               | The style of the InfoBar. Possible values: 'inline', 'multiline'.                                         |
-| `title`           | `string`               | The title of the InfoBar.                                                                                 |
-| `icon`            | `Snippet \| Component` | The icon to display in the InfoBar.                                                                       |
-| `iconSize`        | `number`               | The size of the icon in pixels. Default: 20.                                                              |
-| `hideCloseButton` | `boolean`              | Whether to hide the close button. Default: false.                                                         |
-| `children`        | `Snippet`              | The child elements to render inside the InfoBar.                                                          |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:InfoBarProps -->
+
+| Name                       | Type                                                                                           | Default         | Description                                                                  |
+| -------------------------- | ---------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------- |
+| `status`                   | `'information'` &#124; `'attention'` &#124; `'warning'` &#124; `'critical'` &#124; `'success'` | `'information'` | The severity of the message, which picks the icon and the colors.            |
+| `style`                    | `'inline'` &#124; `'multiline'`                                                                | `'inline'`      | Lays the message out on a single line, or stacked below the title.           |
+| `title`                    | `string`                                                                                       |                 | The title of the InfoBar.                                                    |
+| `icon`                     | `Snippet` &#124; `Component`                                                                   |                 | Custom icon, rendered instead of the one the `status` would pick on its own. |
+| `iconSize`                 | `number`                                                                                       | `20`            | The size of the icon in pixels.                                              |
+| `hideCloseButton`          | `boolean`                                                                                      |                 | Removes the button that dismisses the InfoBar.                               |
+| `children`                 | `Snippet`                                                                                      |                 | The message of the InfoBar.                                                  |
+| Element Attributes (`div`) |                                                                                                |                 |                                                                              |
+
+<!-- /props:InfoBarProps -->

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

@@ -54,14 +54,18 @@ Pass a `required` object to mark the label as required and render a required ind
 
 ## Component Props
 
-| Name            | Type                                        | Description                                                                     |
-| --------------- | ------------------------------------------- | ------------------------------------------------------------------------------- |
-| `label`         | `string`                                    | The text content of the label. Default: `'Label Element'`.                      |
-| `size`          | `'small' \| 'medium' \| 'large'`            | The size of the label text. Default: `'medium'`.                                |
-| `weight`        | `'regular' \| 'semibold'`                   | The font weight of the label. Default: `'regular'`.                             |
-| `labelPosition` | `'before' \| 'after' \| 'above' \| 'below'` | Position of the label text relative to the wrapped content. Default: `'after'`. |
-| `required`      | `{ message?: string; abbr?: string }`       | Marks the label as required and renders a required indicator (default `*`).     |
-| `disabled`      | `boolean`                                   | Renders the label in a disabled style and disables pointer events.              |
-| `class`         | `string`                                    | Additional classes applied to the label element.                                |
-| `ref`           | bindable `HTMLLabelElement`                 | The DOM reference of the label element.                                         |
-| `children`      | `Snippet`                                   | The content wrapped by the label (typically a form control).                    |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:LabelProps -->
+
+| Name                         | Type                                                          | Default           | Description                                                               |
+| ---------------------------- | ------------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------- |
+| `label`                      | `string`                                                      | `'Label Element'` | The text of the label. Falls back to the rendered children.               |
+| `size`                       | `'small'` &#124; `'medium'` &#124; `'large'`                  | `'medium'`        | The size of the label text.                                               |
+| `weight`                     | `'regular'` &#124; `'semibold'`                               | `'regular'`       | The weight of the label text.                                             |
+| `labelPosition`              | `'before'` &#124; `'after'` &#124; `'above'` &#124; `'below'` | `'after'`         | Where the label sits relative to the field it describes.                  |
+| `required`                   | `{ abbr?: string; message: string; }`                         |                   | Marks the field as required, and describes why through the given message. |
+| `disabled`                   | `boolean`                                                     |                   | Renders the label as disabled, to match the field it describes.           |
+| `ref` _bindable_             | `HTMLLabelElement`                                            |                   | The DOM reference of the label element.                                   |
+| Element Attributes (`label`) |                                                               |                   |                                                                           |
+
+<!-- /props:LabelProps -->

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

@@ -81,30 +81,40 @@ Add and configure a checkbox for the element. You can use the same props for the
 
 ## ListView Props
 
-| Name                | Type                        | Description                                                                                   |
-| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------- |
-| `as`                | `string`                    | The HTML tag to use for the list container. Possible values: ul, ol, div.                     |
-| `selectionMode`     | `string`                    | Selection mode for the list. Possible values: single, multiselect, extended.                  |
-| `navigationMode`    | `string`                    | Navigation mode for keyboard navigation. Possible values: items, composite.                   |
-| `selectedItems`     | `string[]`                  | The currently selected item values.                                                           |
-| `shape`             | `string`                    | The shape of the list items. Possible values: rounded, circular, square.                      |
-| `onSelectionChange` | `(Event, string[]) => void` | Callback fired when the selection changes.                                                    |
-| `element`           | Dynamic                     | Reference to the list DOM element. Depends on the selected as value.                          |
-| `children`          | Only `ListViewItem`         | The ListViewItem children of the list.                                                        |
-| Element Attributes  | Dynamic                     | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |
+<!-- 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            |                                                                       |             |                                                                               |
+
+<!-- /props:ListViewProps -->
 
 ## ListViewItem Props
 
-| Name               | Type                           | Description                                                                                   |
-| ------------------ | ------------------------------ | --------------------------------------------------------------------------------------------- |
-| `as`               | `string`                       | The HTML tag to use for the item container. Possible values: li, a, div.                      |
-| `active`           | `boolean`                      | Whether the item is currently active or selected.                                             |
-| `shape`            | `string`                       | The shape of the item. Possible values: rounded, circular, square.                            |
-| `value`            | `string`                       | The value of the item used for selection.                                                     |
-| `onAction`         | `(MouseEvent, string) => void` | Callback fired when the item is activated.                                                    |
-| `onFocus`          | `(Event, string) => void`      | Callback fired when the item receives focus.                                                  |
-| `role`             | `string`                       | ARIA role for the item. Possible values: treeitem, menuitem, option, row.                     |
-| `disabled`         | `boolean`                      | Whether the item is disabled.                                                                 |
-| `checkmark`        | `object`                       | Props for the checkmark or checkbox.                                                          |
-| `children`         | `Snippet`                      | The content of the item.                                                                      |
-| Element Attributes | Dynamic                        | Based on the chosen as value, you will have autocomplete for all HTML attributes of that tag. |
+<!-- 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  |                                                                    |         |                                                                                            |
+
+<!-- /props:ListViewItemProps -->

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

@@ -24,14 +24,20 @@
 		...attributes
 	}: ListViewItemProps<T> = $props();
 
-	// svelte-ignore state_referenced_locally
-	if (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
+	/**
+	 * 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 (!ITEM_TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${ITEM_TAG.join(', ')}`);
+		return as;
+	});
 
 	const CONTEXT = getListViewContext();
 
 	if (!CONTEXT) throw new Error('ListViewItem must be used within a ListView');
 
-	const { shape: _shape } = CONTEXT.config;
+	const _shape = $derived(CONTEXT.config.shape);
 	const { state: _state } = CONTEXT;
 	const { handleSelection, registerItem, unregisterItem, getChildrenRole } = CONTEXT.methods;
 	const role = $derived(_role || getChildrenRole(as));
@@ -58,7 +64,7 @@
 </script>
 
 <svelte:element
-	this={as}
+	this={_as}
 	{role}
 	data-value={value}
 	aria-selected={role === 'option' ? active : undefined}

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

@@ -16,8 +16,14 @@
 		...attributes
 	}: ListViewProps<Tag> = $props();
 
-	// svelte-ignore state_referenced_locally
-	if (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+	/**
+	 * 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 (!TAG.includes(as)) throw new Error(`Invalid tag: ${as}. Must be one of ${TAG.join(', ')}`);
+		return as;
+	});
 
 	const ROLE = $derived(getRole(as, selectionMode, navigationMode));
 
@@ -44,76 +50,75 @@
 		disabled: boolean;
 	}[] = $state([]);
 
-	const config: ListViewContext['config'] = $derived({
-		shape
-	});
-
-	const _state: ListViewContext['state'] = {
-		get selectedItems() {
-			return selectedItems;
-		},
-		set selectedItems(v) {
-			selectedItems = v;
-		},
-		get anchorIndex() {
-			return anchorIndex;
-		},
-		set anchorIndex(v) {
-			anchorIndex = v;
-		}
-	};
-
-	let methods: ListViewContext['methods'] = {
-		handleSelection: (e: MouseEvent, value: string) => {
-			if (selectionMode === 'none') return;
-
-			const itemIndex = items.findIndex((item) => item.value === value);
-			if (itemIndex === -1) return;
-
-			const item = items[itemIndex];
-			if (item.disabled) return;
-
-			if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
-				const start = Math.min(anchorIndex, itemIndex);
-				const end = Math.max(anchorIndex, itemIndex);
-				const rangeValues = items
-					.slice(start, end + 1)
-					.filter((i) => !i.disabled)
-					.map((i) => i.value);
-				const newSelectedItems = Array.from(new Set([..._state.selectedItems, ...rangeValues]));
-				_state.selectedItems = newSelectedItems;
-			} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
-				_state.selectedItems = _state.selectedItems.includes(value)
-					? _state.selectedItems.filter((v) => v !== value)
-					: [..._state.selectedItems, value];
-				_state.anchorIndex = itemIndex;
-			} else {
-				_state.selectedItems = [value];
-				_state.anchorIndex = itemIndex;
+	const CONTEXT: ListViewContext = $state({
+		config: {
+			get shape() {
+				return shape;
 			}
-			onSelectionChange?.(e, _state.selectedItems);
 		},
-		registerItem: (id: string, value: string, disabled: boolean) => {
-			items.push({ id, value, disabled });
-		},
-		unregisterItem: (id: string) => {
-			items = items.filter((item) => item.id !== id);
+		state: {
+			get selectedItems() {
+				return selectedItems;
+			},
+			set selectedItems(v) {
+				selectedItems = v;
+			},
+			get anchorIndex() {
+				return anchorIndex;
+			},
+			set anchorIndex(v) {
+				anchorIndex = v;
+			}
 		},
-		getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
-			if (ROLE === 'grid') return 'row';
-			if (ROLE === 'listbox') return 'option';
-			return _tag !== 'li' ? 'listitem' : undefined;
+		events: null,
+		methods: {
+			handleSelection: (e: MouseEvent, value: string) => {
+				if (selectionMode === 'none') return;
+
+				const itemIndex = items.findIndex((item) => item.value === value);
+				if (itemIndex === -1) return;
+
+				const item = items[itemIndex];
+				if (item.disabled) return;
+
+				if (selectionMode === 'extended' && e.shiftKey && anchorIndex !== null) {
+					const start = Math.min(anchorIndex, itemIndex);
+					const end = Math.max(anchorIndex, itemIndex);
+					const rangeValues = items
+						.slice(start, end + 1)
+						.filter((i) => !i.disabled)
+						.map((i) => i.value);
+					selectedItems = Array.from(new Set([...selectedItems, ...rangeValues]));
+				} else if (MULTISELECTABLE && (e.ctrlKey || e.metaKey)) {
+					selectedItems = selectedItems.includes(value)
+						? selectedItems.filter((v) => v !== value)
+						: [...selectedItems, value];
+					anchorIndex = itemIndex;
+				} else {
+					selectedItems = [value];
+					anchorIndex = itemIndex;
+				}
+				onSelectionChange?.(e, selectedItems);
+			},
+			registerItem: (id: string, value: string, disabled: boolean) => {
+				items.push({ id, value, disabled });
+			},
+			unregisterItem: (id: string) => {
+				items = items.filter((item) => item.id !== id);
+			},
+			getChildrenRole: (_tag: 'li' | 'a' | 'div') => {
+				if (ROLE === 'grid') return 'row';
+				if (ROLE === 'listbox') return 'option';
+				return _tag !== 'li' ? 'listitem' : undefined;
+			}
 		}
-	};
-
-	// svelte-ignore state_referenced_locally
-	const CONTEXT: ListViewContext = { config, state: _state, events: null, methods };
+	});
 
 	setListViewContext(CONTEXT);
 </script>
 
 <svelte:element
-	this={as}
+	this={_as}
 	bind:this={ref as ListViewDOM[Tag]}
 	class="fs-list-view"
 	role={ROLE}

package/dist/components/menu/context-menu-trigger.svelte

@@ -24,52 +24,57 @@
 
 	const { toggle, close } = context.methods;
 
-	const { id, openingDelay } = context.config;
+	const id = $derived(context.config.id);
 
-	let offClick: (() => void) | null = $state(null);
-
-	const debounced = useDebounce(async (e: MouseEvent) => {
-		if (disabled) return;
-
-		const { clientX, clientY } = e;
-
-		_state.ref = {
-			getBoundingClientRect() {
-				return {
-					width: 0,
-					height: 0,
-					x: clientX,
-					y: clientY,
-					top: clientY,
-					right: clientX,
-					bottom: clientY,
-					left: clientX
-				};
-			}
-		};
-
-		// Add event to check if user click outside the menu to close it
-		offClick ??= on(document, 'click', (e) => {
-			const clickTarget = e.target as HTMLElement;
+	const openingDelay = $derived(context.config.openingDelay);
 
-			if (!clickTarget.closest(`#fs-menu-popover-${id}`)) {
-				_state.locked = false;
-				close(e);
-				offClick?.();
-				offClick = null;
-			}
-		});
+	let offClick: (() => void) | null = $state(null);
 
-		_state.locked = !_state.locked;
-		toggle(e);
+	const debounced = useDebounce(
+		async (e: MouseEvent) => {
+			if (disabled) return;
+
+			const { clientX, clientY } = e;
+
+			_state.ref = {
+				getBoundingClientRect() {
+					return {
+						width: 0,
+						height: 0,
+						x: clientX,
+						y: clientY,
+						top: clientY,
+						right: clientX,
+						bottom: clientY,
+						left: clientX
+					};
+				}
+			};
+
+			// Add event to check if user click outside the menu to close it
+			offClick ??= on(document, 'click', (e) => {
+				const clickTarget = e.target as HTMLElement;
+
+				if (!clickTarget.closest(`#fs-menu-popover-${id}`)) {
+					_state.locked = false;
+					close(e);
+					offClick?.();
+					offClick = null;
+				}
+			});
 
-		// When requesting to open the context menu when is already open, we need to wait for the toggle to finish before allowing it to be toggled again
-		if (!_state.open) {
-			await tick();
 			_state.locked = !_state.locked;
 			toggle(e);
-		}
-	}, openingDelay || 0);
+
+			// When requesting to open the context menu when is already open, we need to wait for the toggle to finish before allowing it to be toggled again
+			if (!_state.open) {
+				await tick();
+				_state.locked = !_state.locked;
+				toggle(e);
+			}
+		},
+		() => openingDelay || 0
+	);
 
 	onMount(() => {
 		_state.ref ??= VIRTUAL_ELEMENT;

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

@@ -121,49 +121,78 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 
 ## Component Props (Menu)
 
-| Name                      | Type                                                          | Description                                                                               |
-| ------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `checkedValues`           | `Record<string, string[]>`                                    | Map-like object of checked values, keyed by group name.                                   |
-| `onCheckedValueChange`    | `(e: Event, checkedValues: Record<string, string[]>) => void` | Callback fired when checked values change.                                                |
-| `hasCheckmarks`           | `boolean`                                                     | States that menu items can contain selectable items and reserve slots for item alignment. |
-| `hasIcons`                | `boolean`                                                     | States that menu items can contain icons and reserve slots for item alignment.            |
-| `openingDelay`            | `number`                                                      | The delay in milliseconds before opening a submenu on hover. Default is 0.                |
-| `open`                    | `boolean`                                                     | Controls the open state of the menu.                                                      |
-| `onOpenChange`            | `(e: Event, open: boolean) => void`                           | Callback fired when the open state of the menu changes.                                   |
-| `openOnHover`             | `boolean`                                                     | If true, the menu will open when the trigger is hovered.                                  |
-| `persistOnItemActivation` | `boolean`                                                     | If true, the menu will not close when a menu item is activated.                           |
-| `positionConfig`          | `Partial<ComputePositionConfig>`                              | Configuration for the Floating UI positioning. It will be passed down to MenuPopover.     |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuProps -->
+
+| Name                      | Type                                                          | Default | Description                                                                |
+| ------------------------- | ------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
+| `positionConfig`          | `ComputePositionConfig`                                       |         | The position configuration handed over to floating-ui.                     |
+| `hasIcons`                | `boolean`                                                     |         | Reserves the room every item needs for an icon, so the labels line up.     |
+| `hasCheckmarks`           | `boolean`                                                     |         | Reserves the room every item needs for a checkmark, so the labels line up. |
+| `open`                    | `boolean`                                                     |         | Controls the open state of the menu.                                       |
+| `onOpenChange`            | `(e: Event, open: boolean) => void`                           |         | Called whenever the menu opens or closes.                                  |
+| `checkedValues`           | `Record<string, string[]>`                                    | `{}`    | The checked values of the menu, grouped by the `name` of each item.        |
+| `onCheckedValueChange`    | `(e: Event, checkedValues: Record<string, string[]>) => void` |         | Called whenever a checkbox or radio item changes.                          |
+| `openOnHover`             | `boolean`                                                     | `false` | Opens the menu on hover instead of on click.                               |
+| `openingDelay`            | `number`                                                      | `0`     | How long to wait, in milliseconds, before opening the menu.                |
+| `persistOnItemActivation` | `boolean`                                                     | `false` | Keeps the menu open after an item is activated.                            |
+| `children`                | `Snippet`                                                     |         | The parts of the menu: a trigger and a popover.                            |
+
+<!-- /props:MenuProps -->
 
 ## Component Props (MenuTrigger)
 
-| Name       | Type                            | Description                                             |
-| ---------- | ------------------------------- | ------------------------------------------------------- |
-| `shape`    | `rounded \| circular \| square` | The shape of the trigger element. Default is 'rounded'. |
-| `icon`     | `Snippet \| Component`          | An optional icon to display in the trigger element.     |
-| `disabled` | `boolean`                       | If true, the trigger element will be disabled.          |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuTriggerProps -->
+
+| Name       | Type                                              | Default | Description                                                                               |
+| ---------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------- |
+| `disabled` | `boolean`                                         |         | Disables the user interaction.                                                            |
+| `shape`    | `'circular'` &#124; `'rounded'` &#124; `'square'` |         | The trigger can be rounded, circular, or square.                                          |
+| `icon`     | `Snippet` &#124; `Component`                      |         | An optional icon for the trigger.                                                         |
+| `children` | `Snippet`                                         |         | A custom trigger. It receives the menu state and the props to spread on your own buttons. |
+
+<!-- /props:MenuTriggerProps -->
 
 ## Component Props (MenuItem)
 
-| Name               | Type                   | Description                                                          |
-| ------------------ | ---------------------- | -------------------------------------------------------------------- |
-| `icon`             | `Snippet \| Component` | An optional icon to display in the menu item.                        |
-| `subText`          | `string`               | Optional subtext to display below the main content of the menu item. |
-| `secondaryContent` | `string`               | Optional secondary content to display like a hint text.              |
-| `href`             | `string`               | If provided, the menu item will render as an anchor element.         |
-| `disabled`         | `boolean`              | If true, the menu item will be disabled.                             |
-| `onClick`          | `(e: Event) => void`   | Callback fired when the menu item is clicked.                        |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuItemProps -->
+
+| Name               | Type                         | Default | Description                                      |
+| ------------------ | ---------------------------- | ------- | ------------------------------------------------ |
+| `icon`             | `Snippet` &#124; `Component` |         | The icon to display before the label.            |
+| `secondaryContent` | `string`                     |         | Right aligned text, usually a keyboard shortcut. |
+| `disabled`         | `boolean`                    |         | Disables the user interaction.                   |
+| `subText`          | `string`                     |         | A second line of text below the label.           |
+| `href`             | `string`                     |         | Renders the item as a link pointing to this URL. |
+
+<!-- /props:MenuItemProps -->
 
 ## Component Props (MenuItemCheckbox/Switch/Radio)
 
-| Name                 | Type      | Description                                                                    |
-| -------------------- | --------- | ------------------------------------------------------------------------------ |
-| All `MenuItem` props |           | All props from the MenuItem component are compatible.                          |
-| `value`              | `string`  | The value of the checkbox item. This is required for the item to be checkable. |
-| `checked`            | `boolean` | Controls the checked state of the checkbox item. (Bindable)                    |
-| `name`               | `string`  | The name of the checkbox item, used for grouping related checkboxes.           |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuItemActionableProps -->
+
+| Name                                   | Type      | Default | Description                                                                                |
+| -------------------------------------- | --------- | ------- | ------------------------------------------------------------------------------------------ |
+| `checked` _bindable_                   | `boolean` |         | Whether the item is checked.                                                               |
+| `value`                                | `string`  | `id`    | The value reported to the menu when the item is checked. Falls back to the id of the item. |
+| `name`                                 | `string`  | `id`    | The group of items this one belongs to. Falls back to the id of the item.                  |
+| `MenuItemProps` without `href`         |           |         |                                                                                            |
+| `ComponentProps<typeof Button<'div'>>` |           |         |                                                                                            |
+
+<!-- /props:MenuItemActionableProps -->
 
 ## Component Props (MenuGroup)
 
-| Name     | Type     | Description                                      |
-| -------- | -------- | ------------------------------------------------ |
-| `header` | `string` | Optional header text to display above the group. |
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuGroupProps -->
+
+| Name             | Type             | Default | Description                             |
+| ---------------- | ---------------- | ------- | --------------------------------------- |
+| `ref` _bindable_ | `HTMLDivElement` |         | The DOM reference of the group element. |
+| `header`         | `string`         |         | The label of the group.                 |
+| `children`       | `Snippet`        |         | The items of the group.                 |
+
+<!-- /props:MenuGroupProps -->

package/dist/components/menu/menu-item-checkbox.svelte

@@ -31,7 +31,9 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, hasCheckmarks } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const hasCheckmarks = $derived(context.config.hasCheckmarks);
 
 	const { toggleCheckbox } = context.methods;
 
@@ -76,7 +78,7 @@
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />
 		{#if Icon}
-			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">

package/dist/components/menu/menu-item-radio.svelte

@@ -31,7 +31,9 @@
 
 	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
 
-	const { hasIcons, persistOnItemActivation } = context.config;
+	const hasIcons = $derived(context.config.hasIcons);
+
+	const persistOnItemActivation = $derived(context.config.persistOnItemActivation);
 
 	const { toggleRadio, toggle } = context.methods;
 
@@ -80,7 +82,7 @@
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />
 		{#if Icon}
-			<RenderSoC SoC={Icon} class="menu-item-icon" args={[{ class: 'menu-item-icon' }]} />
+			<RenderSoC SoC={Icon} args={{ class: 'menu-item-icon' }} />
 		{/if}
 		{#if subText}
 			<span class="sub-text">