FAB menu

<script lang="ts">
	import { Menu } from '@ark-ui/svelte';
	import PlusIcon from '@lucide/svelte/icons/plus';
	import ImageIcon from '@lucide/svelte/icons/image';
	import LinkIcon from '@lucide/svelte/icons/link';
</script>

<!-- Ark's Menu without a Portal. A portal escapes a stacking context, and a FAB
     menu is anchored to the page scaffold that already is one — portalling it
     would break the "this menu belongs to this pane" relationship. Rendering
     inline keeps Escape, focus return and roving focus.

     `top-end` is explicit: Ark defaults to `bottom-start`, which would open the
     list downward, off the bottom of a screen-anchored FAB. -->
<Menu.Root positioning={{ placement: 'top-end', gutter: 8 }}>
	<div class="fab-menu-root">
		<Menu.Positioner>
			<Menu.Content class="fab-menu-list">
				{#each [{ label: 'Photo', icon: ImageIcon }, { label: 'Link', icon: LinkIcon }] as action (action.label)}
					<Menu.Item value={action.label} class="fab-menu-item">
						<action.icon class="fab-menu-item-icon" aria-hidden="true" />
						{action.label}
					</Menu.Item>
				{/each}
			</Menu.Content>
		</Menu.Positioner>
		<Menu.Trigger class="fab-root" aria-label="Create">
			<PlusIcon class="fab-icon" aria-hidden="true" />
		</Menu.Trigger>
	</div>
</Menu.Root>