@if (label()) {
	<label hlmLabel [for]="labelId" class="mb-1.5 block">{{ label() }}</label>
}
@if (!multiple()) {
	<hlm-select
		[value]="value()"
		(valueChange)="onSingleChange($event)"
		[disabled]="disabled()"
		[itemToString]="itemToString"
	>
		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
			<hlm-select-value [placeholder]="placeholder()" />
		</hlm-select-trigger>
		<hlm-select-content *hlmSelectPortal>
			@for (option of options(); track option.value) {
				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
			}
		</hlm-select-content>
	</hlm-select>
} @else {
	<hlm-select-multiple
		[value]="$any(values())"
		(valueChange)="onMultiChange($event)"
		[disabled]="disabled()"
		[itemToString]="itemToString"
	>
		<hlm-select-trigger [buttonId]="labelId" [size]="size()" [class]="triggerClasses()">
			<hlm-select-value [placeholder]="placeholder()" />
		</hlm-select-trigger>
		<hlm-select-content *hlmSelectPortal>
			@for (option of options(); track option.value) {
				<hlm-select-item [value]="option.value">{{ option.label }}</hlm-select-item>
			}
		</hlm-select-content>
	</hlm-select-multiple>
}