SearchTrigger

<script lang="ts">
	import SearchTrigger from '@tcpsystems/ui/foundation/SearchTrigger';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Field from '@tcpsystems/ui/foundation/Field';
	import Input from '@tcpsystems/ui/foundation/Input';
	let searching = $state(false);
	let query = $state('');
</script>

<Stack>
	<SearchTrigger label="Search deployments" onclick={() => searching = !searching} aria-expanded={searching} />
	{#if searching}
		<Field label="Deployment name">
			{#snippet control(attrs)}<Input {...attrs} type="search" bind:value={query} />{/snippet}
		</Field>
		<p role="status">{query ? `Searching deployments for “${query}”` : 'Enter a deployment name'}</p>
	{/if}
</Stack>

<script lang="ts">
	import SearchTrigger from '@tcpsystems/ui/foundation/SearchTrigger';
	let searching = $state(false);
</script>

<SearchTrigger label="Search invoices" shortcut="⌘ K" onclick={() => searching = !searching} aria-expanded={searching} />
{#if searching}<p role="status">Invoice search opened</p>{/if}

<script lang="ts">
	import SearchTrigger from '@tcpsystems/ui/foundation/SearchTrigger';
</script>

<SearchTrigger label="Search" />

<script lang="ts">
	import SearchTrigger from '@tcpsystems/ui/foundation/SearchTrigger';
</script>

<SearchTrigger label="Search unavailable during reindexing" disabled />

<script lang="ts">
	import SearchTrigger from '@tcpsystems/ui/foundation/SearchTrigger';
</script>

<SearchTrigger label="Search" variant="secondary" shortcut="Cmd P" />