BulkBar

<script lang="ts">
	import BulkBar from '@tcpsystems/ui/foundation/BulkBar';
	import Button from '@tcpsystems/ui/foundation/Button';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
	import Stack from '@tcpsystems/ui/foundation/Stack';
</script>

<Stack data-gap="lg">
	<BulkBar count="12 items selected">
		<Cluster>
			<Button variant="ghost" icon="download" aria-label="Export" />
			<Button variant="ghost" icon="archive" aria-label="Archive" />
			<Button variant="danger" icon="trash" aria-label="Delete" />
		</Cluster>
	</BulkBar>

	<BulkBar count="1 deployment pending">
		<Cluster>
			<Button variant="primary">Approve</Button>
			<Button variant="ghost">Review</Button>
		</Cluster>
	</BulkBar>
</Stack>

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

<Stack data-gap="lg">
	<BulkBar count="8 invoices selected">
		<Cluster>
			<Select id={uid} aria-label="Bulk action">
				<option value="">Choose action…</option>
				<option value="send">Send reminders</option>
				<option value="mark-paid">Mark as paid</option>
				<option value="export">Export PDF</option>
				<option value="delete" class="tcp-select__option--danger">Delete</option>
			</Select>
			<Button variant="primary">Apply</Button>
			<Button variant="ghost" onclick={() => alert('Cleared selection')}>Clear selection</Button>
		</Cluster>
	</BulkBar>
</Stack>