Offline Detection in Livewire v4

<!-- Show warning banner when offline -->
<div wire:offline class="bg-yellow-100 p-4 rounded">
    <span class="text-yellow-800">
        ⚠️ You are currently offline. Changes will sync when connected.
    </span>
</div>

<!-- Add class when offline -->
<div wire:offline.class="opacity-50 pointer-events-none">
    <form wire:submit="save">
        <input wire:model="name">
        <button>Save</button>
    </form>
</div>

<!-- Remove class when offline -->
<div wire:offline.class.remove="bg-green-500">
    Status indicator
</div>

<!-- Disable buttons when offline -->
<button 
    wire:click="save" 
    wire:offline.attr="disabled"
    class="disabled:opacity-50 disabled:cursor-not-allowed"
>
    Save Changes
</button>

<!-- Complete offline-aware form -->
<form wire:submit="save">
    <div wire:offline class="mb-4 p-3 bg-red-100 text-red-700 rounded">
        You're offline. Form will submit when connection is restored.
    </div>
    
    <input wire:model="email" wire:offline.attr="readonly">
    <button wire:offline.attr="disabled">Submit</button>
</form>