select/select-trigger.svelte

A styled trigger component for a select menu that displays the current value and a chevron icon to allow users to open selection menus.

<!--
  Source: https://github.com/pocketpaw/pocketpaw | License: MIT | Copyright 2026 PocketPaw Team
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script lang="ts">
	import { Select as SelectPrimitive } from "bits-ui";
	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
	import { cn, type WithoutChild } from "$lib/utils.js";

	let {
		ref = $bindable(null),
		class: className,
		children,
		size = "default",
		...restProps
	}: WithoutChild<SelectPrimitive.TriggerProps> & {
		size?: "sm" | "default";
	} = $props();
</script>

<SelectPrimitive.Trigger
	bind:ref
	data-slot="select-trigger"
	data-size={size}
	class={cn(
		"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focu

... (truncated -- full source via MCP)