Use tailwind v4 @theme block so we can use bg-layer-0 instead of bg-[--layer-0] for theme colors.
26 lines
521 B
Svelte
26 lines
521 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
options?: string[];
|
|
value?: number;
|
|
id?: string;
|
|
}
|
|
|
|
let { options = [], value = $bindable(0), id = '' }: Props = $props();
|
|
</script>
|
|
|
|
<select {id} bind:value class="bg-layer-2 text-text">
|
|
{#each options as label, i (label)}
|
|
<option value={i}>{label}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<style>
|
|
select {
|
|
font-family: var(--font-family);
|
|
outline: solid 1px var(--color-outline);
|
|
padding: 0.8em 1em;
|
|
border-radius: 5px;
|
|
border: none;
|
|
}
|
|
</style>
|