fluentui-svelte 0.6.0 → 0.7.0

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

@@ -21,6 +21,8 @@ Other components that can be used within the menu include:
 - `MenuItemCheckbox`: A menu item that can be checked or unchecked.
 - `MenuItemSwitch`: A menu item that can be toggled on or off.
 - `MenuItemRadio`: A menu item that can be selected as part of a group of radio items.
+- `MenuCommandBar`: A row of icon-only commands placed at the top or at the bottom of the menu, with an optional overflow submenu.
+- `MenuCommandBarItem`: A square, icon-only command of a MenuCommandBar, with a label that names it and shows as its tooltip.
 
 ## Usage
 
@@ -87,7 +89,7 @@ To correctly attach events to the trigger element, you should wrap the element w
 		{#snippet children({ state, menuTriggerProps, primaryButtonProps })}
 			<SplitButton
 				bind:menuTriggerRef={state.ref}
-				{menuTriggerProps}
+				menuTriggerProps={{ ...menuTriggerProps, 'aria-label': 'More options' }}
 				primaryButtonProps={{ onclick: () => alert('Primary action'), ...primaryButtonProps }}
 			>
 				Primary Action
@@ -103,6 +105,51 @@ To correctly attach events to the trigger element, you should wrap the element w
 </Menu>
 ```
 
+### Menu with a command bar
+
+A command bar flyout pairs a row of square, icon-only primary commands with the items of the menu. Place a `MenuCommandBar` at the top or at the bottom of the `MenuList` and set its `position` to match. Fill it with `MenuCommandBarItem`, each with an `icon` and a `label` that names it and shows as its tooltip. The `overflow` snippet adds a "more" button at the end of the row that opens the secondary commands in a submenu.
+
+Left and Right move along the bar. Up and Down move between the bar and the items of the menu.
+
+```svelte
+<Menu>
+	<MenuTrigger>
+		{#snippet children({ state, menuTriggerProps })}
+			<Button bind:ref={state.ref} {...menuTriggerProps}>Commands on top</Button>
+		{/snippet}
+	</MenuTrigger>
+	<MenuPopover>
+		<MenuList>
+			<!-- position="bottom" when the bar comes after the items -->
+			<MenuCommandBar>
+				<MenuCommandBarItem icon={CutRegular} label="Cut" />
+				<MenuCommandBarItem icon={CopyRegular} label="Copy" />
+				<MenuCommandBarItem icon={ClipboardPasteRegular} label="Paste" />
+				{#snippet overflow()}
+					<MenuItem>Select all</MenuItem>
+					<MenuItem>Rename</MenuItem>
+				{/snippet}
+			</MenuCommandBar>
+			<MenuItem>Open</MenuItem>
+			<MenuItem>Open with</MenuItem>
+			<MenuItem>Properties</MenuItem>
+		</MenuList>
+	</MenuPopover>
+</Menu>
+```
+
+By default every command is a square that shows only its icon. `showLabels` shows the label of every command below its icon, and `showDividers` draws a divider between every two commands; with either of them the commands share the width of the bar evenly.
+
+```svelte
+<MenuCommandBar showLabels showDividers>
+	<MenuCommandBarItem icon={CutRegular} label="Cut" />
+	<MenuCommandBarItem icon={CopyRegular} label="Copy" />
+	<MenuCommandBarItem icon={EditRegular} label="Rename" />
+	<MenuCommandBarItem icon={ShareRegular} label="Share" />
+	<MenuCommandBarItem icon={DeleteRegular} label="Delete" />
+</MenuCommandBar>
+```
+
 ## Context Menu
 
 This variant of the `MenuTrigger` component allows you to create context menus that open on right-click. You can specify the element to which the context menu should be attached using the `ref` prop. If no element is provided, it will attach to the `document.body` by default.
@@ -147,8 +194,8 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 
 | Name              | Type                                 | Default | Description                                              |
 | ----------------- | ------------------------------------ | ------- | -------------------------------------------------------- |
-| `ref`             | `HTMLElement`                        |         | The element used to position the popover.                |
-| `open` _bindable_ | `boolean`                            |         | Controls the open state of the popover.                  |
+| `ref`             | `HTMLElement` &#124; `null`          |         | The element used to position the popover.                |
+| `open` _bindable_ | `boolean` &#124; `null`              |         | 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.   |
@@ -190,13 +237,13 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 <!-- 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'>>` |           |         |                                                                                            |
+| Name                           | Type                    | Default | Description                                                                                |
+| ------------------------------ | ----------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| `checked` _bindable_           | `boolean` &#124; `null` |         | 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` |                         |         |                                                                                            |
+| `ButtonProps<'button'>`        |                         |         |                                                                                            |
 
 <!-- /props:MenuItemActionableProps -->
 
@@ -205,10 +252,46 @@ This variant of the `MenuTrigger` component allows you to create context menus t
 <!-- 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.                 |
+| Name             | Type                           | Default | Description                             |
+| ---------------- | ------------------------------ | ------- | --------------------------------------- |
+| `ref` _bindable_ | `HTMLDivElement` &#124; `null` |         | The DOM reference of the group element. |
+| `header`         | `string`                       |         | The label of the group.                 |
+| `children`       | `Snippet`                      |         | The items of the group.                 |
 
 <!-- /props:MenuGroupProps -->
+
+## Component Props (MenuCommandBar)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuCommandBarProps -->
+
+| Name                                                        | Type                           | Default          | Description                                                                                                    |
+| ----------------------------------------------------------- | ------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                            | `HTMLDivElement` &#124; `null` |                  | The DOM reference of the command bar element.                                                                  |
+| `position`                                                  | `'top'` &#124; `'bottom'`      | `'top'`          | Where the bar sits in the menu. A bar at the top has its divider below it, and one at the bottom has it above. |
+| `label`                                                     | `string`                       | `'Commands'`     | The accessible name of the group of commands.                                                                  |
+| `overflowLabel`                                             | `string`                       | `'More options'` | The accessible name of the button that opens the overflow.                                                     |
+| `overflow`                                                  | `Snippet`                      |                  | The secondary commands. When present, a "more" button at the end of the bar opens them in a submenu.           |
+| `showLabels`                                                | `boolean`                      | `false`          | Shows the label of every command below its icon. Without labels, every command is a square.                    |
+| `showDividers`                                              | `boolean`                      | `false`          | Draws a divider between every two commands.                                                                    |
+| `children`                                                  | `Snippet`                      |                  | The primary commands, as `MenuCommandBarItem`s.                                                                |
+| `HTMLAttributes<HTMLDivElement>` without `children`, `role` |                                |                  |                                                                                                                |
+
+<!-- /props:MenuCommandBarProps -->
+
+## Component Props (MenuCommandBarItem)
+
+<!-- DO NOT EDIT THIS SECTION (propsmith generated) -->
+<!-- props:MenuCommandBarItemProps -->
+
+| Name                                                                        | Type                              | Default | Description                                                                                                                                          |
+| --------------------------------------------------------------------------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ref` _bindable_                                                            | `HTMLButtonElement` &#124; `null` |         | The DOM reference of the button element.                                                                                                             |
+| `icon`                                                                      | `Snippet` &#124; `Component`      |         | The icon of the command.                                                                                                                             |
+| `label`                                                                     | `string`                          |         | The name of the command. Without visible labels it is the accessible name of the button and shows as its tooltip; with them it shows below the icon. |
+| `disabled`                                                                  | `boolean`                         |         | Disables the user interaction.                                                                                                                       |
+| `onclick`                                                                   | `(e: MouseEvent) => void`         |         | Called when the command is activated. The menu closes afterwards, unless it persists on item activation.                                             |
+| `AriaAttributes` without `aria-label`                                       |                                   |         |                                                                                                                                                      |
+| `id`, `class`, `onkeydown`, `onfocus`, `onblur` from `HTMLButtonAttributes` |                                   |         |                                                                                                                                                      |
+
+<!-- /props:MenuCommandBarItemProps -->

package/dist/components/menu/menu-command-bar-item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Button } from '../../index.js';
+	import { RenderSoC } from '../../internal/index.js';
+	import { getMenuCommandBarContext, getMenuContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import type { MenuCommandBarItemProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		icon,
+		label,
+		disabled,
+		onclick,
+		class: classes,
+		...attributes
+	}: MenuCommandBarItemProps = $props();
+
+	const context = getMenuContext();
+
+	if (!context) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const { toggle } = context.methods;
+
+	const commandBarContext = getMenuCommandBarContext();
+
+	// A visible label names the button itself, a hidden one names it and shows as its tooltip.
+	const showLabel = $derived(!!commandBarContext?.showLabels);
+</script>
+
+<!--
+@component
+
+A command of a `MenuCommandBar`: a square icon whose label names it and shows as its tooltip, or the icon with the label below it when the bar shows labels.
+
+- Usage:
+  ```tsx
+    <MenuCommandBar>
+      <MenuCommandBarItem icon={CutRegular} label="Cut" onclick={cut} />
+    </MenuCommandBar>
+  ```
+-->
+<Button
+	{...attributes}
+	bind:ref
+	{disabled}
+	role="menuitem"
+	appearance="subtle"
+	aria-label={showLabel ? undefined : label}
+	title={showLabel ? undefined : label}
+	class={['fs-menu-command-bar-item', classes]}
+	onclick={(e: MouseEvent) => {
+		if (disabled) return;
+		onclick?.(e);
+		if (!context.config.persistOnItemActivation) toggle(e);
+	}}
+>
+	<RenderSoC SoC={icon} args={{ class: 'fs-menu-command-bar-item-icon' }} />
+	{#if showLabel}
+		<span class="fs-menu-command-bar-item-label">{label}</span>
+	{/if}
+</Button>
+<!-- The layout is drawn by MenuCommandBar, which styles the overflow button the same way. -->

package/dist/components/menu/menu-command-bar-item.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { MenuCommandBarItemProps } from './types.ts';
+/**
+ * A command of a `MenuCommandBar`: a square icon whose label names it and shows as its tooltip, or the icon with the label below it when the bar shows labels.
+ *
+ * - Usage:
+ * ```tsx
+ *   <MenuCommandBar>
+ *     <MenuCommandBarItem icon={CutRegular} label="Cut" onclick={cut} />
+ *   </MenuCommandBar>
+ * ```
+ */
+declare const MenuCommandBarItem: import("svelte").Component<MenuCommandBarItemProps, {}, "ref">;
+type MenuCommandBarItem = ReturnType<typeof MenuCommandBarItem>;
+export default MenuCommandBarItem;

package/dist/components/menu/menu-command-bar.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { getTabspotAttributes } from 'tabspot';
+	import MoreHorizontalRegular from 'fluentui-icons-svelte/MoreHorizontalRegular.svelte';
+	import { Button, Menu, MenuList, MenuPopover, MenuTrigger } from '../../index.js';
+	import { getGlobalFSContext } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import { getMenuContext, setMenuCommandBarContext, COMPONENT_NAME as MENU_COMPONENT_NAME } from './menu.svelte.js';
+	import type { MenuCommandBarProps } from './types.js';
+
+	let {
+		ref = $bindable(null),
+		position = 'top',
+		label = 'Commands',
+		overflowLabel = 'More options',
+		overflow,
+		showLabels = false,
+		showDividers = false,
+		children: commands,
+		class: classes,
+		onkeydown: userOnkeydown,
+		...attributes
+	}: MenuCommandBarProps = $props();
+
+	if (!getMenuContext()) throw new Error(`No MenuContext found for ${MENU_COMPONENT_NAME}.`);
+
+	const globalFSContext = getGlobalFSContext();
+
+	setMenuCommandBarContext({
+		get showLabels() {
+			return showLabels;
+		}
+	});
+
+	// Left and Right move along the bar. Up and Down are left to the bar, which hands the focus over
+	// to the items of the menu, and the menu hands it back when its items run out towards the bar.
+	const tabspotAttributes = getTabspotAttributes({
+		mover: { axis: 'horizontal', ignoreKeys: ['ArrowUp', 'ArrowDown'] },
+		grouper: {}
+	});
+
+	const isFocusable = (element: HTMLElement) =>
+		!element.matches(':disabled, [aria-disabled="true"]') && element.checkVisibility();
+
+	/** The items of the menu the bar sits in, without the bar and without any submenu. */
+	const getMenuItems = (list: HTMLElement) =>
+		Array.from(list.querySelectorAll<HTMLElement>('[role^="menuitem"]')).filter(
+			(item) => item.closest('.fs-menu-list') === list && !ref?.contains(item) && isFocusable(item)
+		);
+
+	const focusBar = () =>
+		Array.from(ref?.children ?? [])
+			.find((child): child is HTMLElement => child instanceof HTMLElement && isFocusable(child))
+			?.focus();
+
+	const onkeydown = (e: KeyboardEvent) => {
+		// The overflow submenu owns its own keys.
+		if (e.target instanceof HTMLElement && e.target.parentElement !== ref) return;
+
+		const list = ref?.closest<HTMLElement>('.fs-menu-list');
+		const toItems = position === 'top' ? e.key === 'ArrowDown' : e.key === 'ArrowUp';
+		if (!list || !toItems) return;
+
+		const items = getMenuItems(list);
+		const item = position === 'top' ? items.at(0) : items.at(-1);
+		if (!item) return;
+
+		e.preventDefault();
+		item.focus();
+	};
+
+	$effect(() => {
+		const list = ref?.closest<HTMLElement>('.fs-menu-list');
+		const instance = globalFSContext?.state.tabspotInstance;
+		if (!list || !instance) return;
+
+		return instance.subscribe(list, (event) => {
+			const towardsBar = position === 'top' ? event.direction === 'up' : event.direction === 'down';
+			if (!event.atEdge || !towardsBar || ref?.contains(event.from)) return;
+
+			event.preventDefault();
+			focusBar();
+		});
+	});
+</script>
+
+<!--
+@component
+
+A row of square, icon-only `MenuCommandBarItem`s, the primary commands of a command bar flyout. It goes at the top or at the bottom of a `MenuList`, and sets itself apart from the items with a divider. An `overflow` snippet adds a "more" button that opens the secondary commands in a submenu.
+
+- Usage:
+  ```tsx
+    <MenuList>
+      <MenuCommandBar>
+        <MenuCommandBarItem icon={CutRegular} label="Cut" />
+        <MenuCommandBarItem icon={CopyRegular} label="Copy" />
+        {#snippet overflow()}
+          <MenuItem>Select all</MenuItem>
+        {/snippet}
+      </MenuCommandBar>
+      <MenuItem>Paste</MenuItem>
+    </MenuList>
+  ```
+-->
+<div
+	{...attributes}
+	{...tabspotAttributes}
+	bind:this={ref}
+	role="group"
+	aria-label={label}
+	class={['fs-menu-command-bar', position, { labels: showLabels, dividers: showDividers }, classes]}
+	onkeydown={(e) => {
+		userOnkeydown?.(e);
+		onkeydown(e);
+	}}
+>
+	{@render commands?.()}
+	{#if overflow}
+		<Menu>
+			<MenuTrigger>
+				{#snippet children({ state, menuTriggerProps })}
+					<Button
+						bind:ref={() => state.ref as HTMLButtonElement | null, (v) => (state.ref = v)}
+						{...menuTriggerProps}
+						class="{menuTriggerProps.class} fs-menu-command-bar-item"
+						appearance="subtle"
+						isMenuButton={false}
+						indicatorIcon={undefined}
+						aria-label={overflowLabel}
+						title={overflowLabel}
+					>
+						<MoreHorizontalRegular aria-hidden="true" />
+					</Button>
+				{/snippet}
+			</MenuTrigger>
+			<MenuPopover>
+				<MenuList>{@render overflow()}</MenuList>
+			</MenuPopover>
+		</Menu>
+	{/if}
+</div>
+
+<style>
+	.fs-menu-command-bar {
+		display: flex;
+		align-items: center;
+		/* The squares spread over the width of the menu, the overflow button closing the row. */
+		justify-content: space-between;
+		/* The commands never squeeze into the width of the menu: the menu grows to fit them all,
+		   with this much room between any two. */
+		--fs-menu-command-bar-gap: 0.5rem;
+		gap: var(--fs-menu-command-bar-gap);
+		flex: none;
+		padding: 0.25rem;
+		/* The divider runs from edge to edge of the menu, like a MenuDivider. */
+		margin-inline: -0.25rem;
+		&.top {
+			border-bottom: 1px solid var(--fs-control-stroke-default);
+			margin-block: -0.25rem 0.25rem;
+		}
+		&.bottom {
+			border-top: 1px solid var(--fs-control-stroke-default);
+			margin-block: 0.25rem -0.25rem;
+		}
+		/* Every command is a square of at least 40px, the overflow button included. */
+		& > :global(.fs-button.fs-menu-command-bar-item) {
+			flex: none;
+			/* The overflow button is a submenu trigger, which otherwise spans the whole menu. */
+			inline-size: 2.5rem;
+			min-inline-size: 2.5rem;
+			min-block-size: 2.5rem;
+			aspect-ratio: 1;
+			padding: 0;
+			justify-content: center;
+			border-radius: var(--fs-control-inner-border-radius);
+		}
+		& > :global(.fs-menu-command-bar-item svg) {
+			flex: none;
+			inline-size: 1.25rem;
+			block-size: 1.25rem;
+			fill: currentColor;
+		}
+		/* With labels, or with dividers, the commands share the width of the bar evenly, so a divider
+		   always falls halfway between two of them. The icon-only overflow button stays a square. */
+		&.labels,
+		&.dividers {
+			align-items: stretch;
+			& > :global(.fs-button.fs-menu-command-bar-item:not(.fs-submenu-trigger)) {
+				flex: 1 0 0;
+				inline-size: auto;
+				min-inline-size: max-content;
+				aspect-ratio: auto;
+			}
+			& > :global(.fs-button.fs-submenu-trigger) {
+				aspect-ratio: auto;
+			}
+		}
+		&.labels > :global(.fs-button.fs-menu-command-bar-item:not(.fs-submenu-trigger)) {
+			flex-direction: column;
+			gap: 0.25rem;
+			padding: 0.375rem 0.75rem;
+			font-size: var(--fs-caption-font-size);
+			line-height: var(--fs-caption-line-height);
+		}
+		&.dividers > :global(.fs-button.fs-menu-command-bar-item + .fs-button.fs-menu-command-bar-item::before) {
+			content: '';
+			position: absolute;
+			/* Centered in the gap between the two commands. */
+			inset-inline-start: calc(var(--fs-menu-command-bar-gap) / -2 - 0.5px);
+			inset-block: 25%;
+			inline-size: 1px;
+			background: var(--fs-divider-stroke-default);
+			pointer-events: none;
+		}
+	}
+	:global(.fs-menu-command-bar-item-label) {
+		white-space: nowrap;
+	}
+</style>

package/dist/components/menu/menu-command-bar.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { MenuCommandBarProps } from './types.ts';
+/**
+ * A row of square, icon-only `MenuCommandBarItem`s, the primary commands of a command bar flyout. It goes at the top or at the bottom of a `MenuList`, and sets itself apart from the items with a divider. An `overflow` snippet adds a "more" button that opens the secondary commands in a submenu.
+ *
+ * - Usage:
+ * ```tsx
+ *   <MenuList>
+ *     <MenuCommandBar>
+ *       <MenuCommandBarItem icon={CutRegular} label="Cut" />
+ *       <MenuCommandBarItem icon={CopyRegular} label="Copy" />
+ *       {#snippet overflow()}
+ *         <MenuItem>Select all</MenuItem>
+ *       {/snippet}
+ *     </MenuCommandBar>
+ *     <MenuItem>Paste</MenuItem>
+ *   </MenuList>
+ * ```
+ */
+declare const MenuCommandBar: import("svelte").Component<MenuCommandBarProps, {}, "ref">;
+type MenuCommandBar = ReturnType<typeof MenuCommandBar>;
+export default MenuCommandBar;

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

@@ -6,11 +6,14 @@
 	const COMPONENT_NAME = 'menu-group';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
-	let { ref = $bindable(), header, children }: MenuGroupProps = $props();
+	let { ref = $bindable(null), header, children }: MenuGroupProps = $props();
 </script>
 
-<div class="fs-menu-group" role="group" aria-labelledby="group-name-{ID}" bind:this={ref}>
-	<h3 id="group-name-{ID}" class="group-name">{header || ID}</h3>
+<div class="fs-menu-group" role="group" aria-labelledby={header ? `group-name-${ID}` : undefined} bind:this={ref}>
+	{#if header}
+		<!-- A menu holds only items, groups and separators, so the label is plain text that names the group. -->
+		<div id="group-name-{ID}" class="group-name" role="presentation">{header}</div>
+	{/if}
 	{@render children()}
 </div>
 

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

@@ -12,11 +12,11 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		class: classes,
 		id = ID,
@@ -24,6 +24,7 @@
 		value = id as string,
 		subText,
 		onclick,
+		onkeydown,
 		...attributes
 	}: MenuItemActionableProps = $props();
 
@@ -61,6 +62,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	as="button"
 	{disabled}
 	appearance="subtle"
@@ -69,11 +71,10 @@
 		invokeHandlers(e, [e.key !== 'Enter', !!disabled], [onkeydown, () => toggleCheckbox(e, value, name)])}
 	aria-checked={checked}
 	role="menuitemcheckbox"
-	style={`--margin-left: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {hasIcons && !Icon ? 1.5 : 0}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-checkbox {hasIcons || hasCheckmarks ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />

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

@@ -12,17 +12,18 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		class: classes,
 		id = ID,
 		name = id as string,
 		value = id as string,
 		onclick,
+		onkeydown,
 		subText,
 		...attributes
 	}: MenuItemActionableProps = $props();
@@ -61,6 +62,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{disabled}
 	appearance="subtle"
 	onclick={(e: MouseEvent) =>
@@ -73,11 +75,10 @@
 		)}
 	aria-checked={checked}
 	role="menuitemradio"
-	style={`--margin-left: ${hasIcons && !Icon ? 1.5 : 0}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {hasIcons && !Icon ? 1.5 : 0}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-radio {hasIcons ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		<CheckmarkFilled class="indicator" />

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

@@ -11,11 +11,11 @@
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
-		checked = $bindable(),
+		checked = $bindable(null),
 		disabled,
 		id = ID,
 		class: classes,
@@ -23,6 +23,7 @@
 		value = id as string,
 		subText,
 		onclick,
+		onkeydown,
 		...attributes
 	}: MenuItemActionableProps = $props();
 
@@ -62,6 +63,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{disabled}
 	{id}
 	appearance="subtle"
@@ -70,11 +72,10 @@
 		invokeHandlers(e, [e.key !== 'Enter', !!disabled], [onkeydown, () => toggleCheckbox(e, value, name)])}
 	aria-checked={checked}
 	role="menuitemcheckbox"
-	style={`--margin-left: ${marginLeft}rem;}`}
+	style="{attributes.style ?? ''}; --margin-left: {marginLeft}rem;"
 	aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}
 	class="fs-menu-item-switch {hasIcons || hasCheckmarks ? 'align' : ''} {checked ? 'checked' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label="{secondaryContent}, Use {secondaryContent}">
 		{#if Icon}

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

@@ -4,14 +4,14 @@
 	import { PREFIX } from '../../internal/constants.js';
 	import { invokeHandlers, RenderSoC } from '../../internal/index.js';
 	import type { MenuItemProps } from './types.js';
-	import type { ComponentProps } from 'svelte';
+	import type { ButtonProps } from '../button/types.js';
 
 	const FALLBACK_ID = $props.id();
 	const COMPONENT_NAME = 'menu-item';
 	const ID = `${PREFIX}${COMPONENT_NAME}-${FALLBACK_ID}`;
 
 	let {
-		ref = $bindable(),
+		ref = $bindable(null),
 		icon: Icon,
 		secondaryContent,
 		children,
@@ -23,7 +23,7 @@
 		onkeydown,
 		subText,
 		...attributes
-	}: MenuItemProps & ComponentProps<typeof Button> = $props();
+	}: MenuItemProps & ButtonProps<'a' | 'button'> = $props();
 
 	const context = getMenuContext();
 
@@ -54,6 +54,7 @@
     ```
 -->
 <Button
+	{...attributes}
 	{href}
 	{disabled}
 	{id}
@@ -63,10 +64,9 @@
 	onkeydown={(e: KeyboardEvent) =>
 		invokeHandlers(e, [e.key !== 'Enter', persistOnItemActivation, disabled], [onkeydown, toggle])}
 	as={href ? 'a' : 'button'}
-	style={`--margin-left: ${marginLeft}rem;`}
+	style="{attributes.style ?? ''}; --margin-left: {marginLeft}rem;"
 	class="fs-menu-item {hasIcons || hasCheckmarks ? 'align' : ''} {classes}"
 	bind:ref
-	{...attributes}
 >
 	<span class="label" aria-label={secondaryContent ? `${secondaryContent}, Use ${secondaryContent}` : undefined}>
 		{#if Icon}