@props(['on'])

<div x-data="{ shown: false, timeout: null }" x-init="@this.on('{{ $on }}', () => {
        clearTimeout(timeout);
        shown = true;
        timeout = setTimeout(() => {
            shown = false
            }, 2000);
        })" x-show.transition.out.opacity.duration.2500ms="shown" x-transition:leave.opacity.duration.2500ms
    style="display: none;" {{ $attributes->merge(['class' => 'text-md uppercase text-o4-800 dark:text-o4-500']) }}>
    {{ $slot->isEmpty() ? 'Rolled' : $slot }}
</div>