Closing a Modal component with html buttons

[dhndmn]

The modal documentation states that "Any button element put in the modal will close it on click." In my experience this is true when using the Flowbite Button component but not when using an html button element. I must be missing something.

This example component is a color picker that generates a grid of buttons. Clicking on any of the buttons should close the modal. Currently this is not happening for me. Clicking on the Flowbite Button component at the end does close the modal.

<script>
	import { plateModal } from '$lib/stores/plates';
	import { Button } from 'flowbite-svelte';
	let colors = [
		// 'slate',
		'gray',
		// 'zinc',
		// 'neutral',
		// 'stone',
		'red',
		'orange',
		// 'amber',
		'yellow',
		// 'lime',
		'green',
		// 'emerald',
		'teal',
		'cyan',
		// 'sky',
		'blue',
		// 'indigo',
		// 'violet',
		'purple',
		// 'fuchsia',
		'pink'
		// 'rose'
	];
	let variants = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
	$: color = $plateModal.color;
	$: variant = $plateModal.variant;

	let iconColor = 'text-white';
	let open = true;

	function initColor() {
		color = 'black';
		setIconWhite();
	}

	function setIconWhite() {
		iconColor = 'text-white';
	}

	function setIconBlack() {
		iconColor = 'text-black';
	}

	function selectColor(color, variant) {
		// currentColor = color + '-' + variant;
		if (variant < 500) {
			setIconBlack();
		} else {
			setIconWhite();
		}
		$plateModal.color = color;
		$plateModal.variant = variant;
	}

	function handleClick(color, variant) {
		dispatchEvent(new CustomEvent('click')); // dispatch a 'click' event
		$plateModal.color = color;
		$plateModal.variant = variant;
	}

	// initColor();
</script>

<div class="grid grid-flow-col grid-cols-[{colors.length}] grid-rows-[{colors.length}]">
	{#each colors as color}
		<div>
			{#each variants as variant}
				<button on:click={() => handleClick(color, variant)}>
					<span class="bg-{color}-{variant} block w-6 h-6 rounded-full border m-1" />
				</button>
			{/each}
		</div>
	{/each}
</div>

<Button color="blue">Close</Button>

[dhndmn]

OK, I determined that this can be done by binding the modal to the open variable and updating the open variable to false upon a button click.

So
function handleClick(color, variant) { dispatchEvent(new CustomEvent('click')); // dispatch a 'click' event $plateModal.color = color; $plateModal.variant = variant; open = false; } ought to do it.