dropdown-menu/dropdown-menu-content.svelte

Accessible dropdown menu content component with Tailwind styling and animations.

<!--
  Source: https://github.com/itswadesh/svelte-commerce | License: MIT | Copyright 2025 Misiki & contributors
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script lang="ts">
	import { cn } from '$lib/core/utils'
	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui'

	let { ref = $bindable(null), class: className, sideOffset = 4, ...restProps }: DropdownMenuPrimitive.ContentProps = $props()
</script>

<DropdownMenuPrimitive.Content
	bind:ref
	{sideOffset}
	class={cn(
		'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
		'outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-

... (truncated -- full source via MCP)