<Docs title="Default ">
	<Modal id="modal" client:load>
		This is a modal
	</Modal>
</Docs>

<Docs title="Default Long Content">
	<Modal id="modal-2" client:load>
		<div style=" display: flex; flex-direction: column; justify-content: space-between;height: 300vh">
			<div>Top of modal, scroll down</div>
			<div>Bottom of modal</div>
		</div>
	</Modal>
</Docs>

<Docs title="Fullscreen">
	<Modal id="modal-3" theme="fullscreen" client:load>
		This is a modal
	</Modal>
</Docs>

<Docs title="Custom Trigger Button">
	<Modal id="modal-4" client:load>
		<p slot="button">Click me!</p>
		This is a modal
	</Modal>
</Docs>