merge(['class' => 'flex items-center justify-between px-2 sm:gap-2 sm:px-4']) }}
x-data="{
showLeft: true,
showRight: true,
update() {
this.showLeft = this.$refs.region.scrollLeft > 0;
this.showRight = this.$refs.region.scrollLeft + this.$refs.region.offsetWidth < this.$refs.region.scrollWidth - 8;
}
}" x-init="const selected = $refs.region?.querySelector('[data-selecionado=true]');
if (selected && $refs.region) {
const region = $refs.region;
const selectedRect = selected.getBoundingClientRect();
const regionRect = region.getBoundingClientRect();
if (selectedRect.left < regionRect.left || selectedRect.right > regionRect.right) {
region.scrollLeft += selectedRect.left - regionRect.left - (regionRect.width / 2) + (selectedRect.width / 2);
}
}">
{{ $slot }}