Popover

<script lang="ts">
	import Popover from '@tcpsystems/ui/foundation/Popover';
	const uid = $props.id();
</script>

<Popover id={uid} label="What is a model pool?" heading="Model pools">
	<p>A model pool is a group of model capacity. Requests are routed to the first healthy pool in your plan.</p>
</Popover>

<script lang="ts">
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	import Popover from '@tcpsystems/ui/foundation/Popover';
	const uid = $props.id();
</script>

<Cluster>
	<Popover id="{uid}-a" label="Secondary" heading="Secondary"><p>Default trigger for most panels.</p></Popover>
	<Popover id="{uid}-b" label="Ghost" variant="ghost" heading="Ghost"><p>Low emphasis for toolbars.</p></Popover>
	<Popover id="{uid}-c" label="Primary" variant="primary" heading="Primary"><p>Use for the main action on a page.</p></Popover>
</Cluster>

<script lang="ts">
	import Popover from '@tcpsystems/ui/foundation/Popover';
	const uid = $props.id();
</script>

<Popover id={uid} label="Keyboard shortcuts">
	<p>Press / to search, g then d for the dashboard, ? to show this list.</p>
</Popover>

<script lang="ts">
	import Button from '@tcpsystems/ui/foundation/Button';
	import Popover from '@tcpsystems/ui/foundation/Popover';
	const uid = $props.id();
	let count = $state(3);
</script>

<Popover id={uid} label="Notifications ({count})" heading="Unread alerts">
	<p>{count === 0 ? 'You are all caught up.' : `${count} alerts need your attention.`}</p>
	<Button size="sm" disabled={count === 0} onclick={() => (count = 0)}>Mark all read</Button>
</Popover>