ColorInput

<script lang="ts">
	import '@tcpsystems/ui/foundation/elements/color';
	import ColorInput from '@tcpsystems/ui/foundation/ColorInput';
	let value = $state('#336699');
</script>

<ColorInput label="Project accent" bind:value />

<script lang="ts">
	import ColorInput from '@tcpsystems/ui/foundation/ColorInput';
	import '@tcpsystems/ui/foundation/elements/color';
	let value = $state('#336699');
</script>

<ColorInput label="Workspace colour" bind:value swatches={['#336699', '#cc8800', '#228855']} />

<script lang="ts">
	import '@tcpsystems/ui/foundation/elements/color';
	import ColorInput from '@tcpsystems/ui/foundation/ColorInput';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let value = $state('blue');
</script>

<Stack>
	<ColorInput label="Managed brand colour" value="#336699" disabled />
	<ColorInput label="Custom accent" bind:value invalid={!/^#[\da-f]{6}$/i.test(value)} describedby={uid} />
	<p id={uid}>Use a six-digit hex colour, such as #336699.</p>
</Stack>