data-aether-autofocus

<!-- Trigger -->
<button
    class="px-4 py-2 cursor-pointer bg-primary border border-primary rounded-lg text-primary hover:text-primary-interactive hover:border-primary-interactive transition-colors flex items-center gap-2"
    data-aether-trigger="ui-control"
    data-aether-target="demo-modal"
    data-aether-sync-url>
    Open
</button>

<!-- Wrapper -->
<div
    id="demo-modal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
    data-aether-scroll-lock
    data-aether-focus-trap>

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-primary/80 backdrop-blur-sm"
        data-aether-trigger="ui-control"
        data-aether-target="demo-modal"
        data-aether-action="close"></div>

    <!-- Content -->
    <div class="relative bg-secondary border border-primary w-full max-w-md p-6 rounded-2xl shadow-2xl scale-100 transition-all">
        <h3 class="text-xl text-center font-bold text-primary mb-2">Hello World</h3>
        <p class="text-secondary text-center mb-6">This modal initially focuses on the email input field.</p>

        <div class="space-y-4">

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="text"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="Test">
            </div>

            <div>
                <input type="email"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="example@aether.com"
                    data-aether-autofocus>
            </div>

            <div>
                <input type="password"
                    class="w-full px-3 py-2 bg-primary border border-primary rounded-lg text-primary focus:outline-none focus:border-accent transition-colors"
                    placeholder="password">
            </div>

            <div class="flex items-center justify-between text-sm">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" class="rounded border-primary bg-primary text-accent focus:ring-accent">
                    <span class="text-tertiary">Remember me</span>
                </label>
                <a href="#" class="text-accent hover:underline">Forgot Password</a>
            </div>

            <button class="w-full cursor-pointer py-2.5 bg-tertiary hover:bg-tertiary-interactive text-secondary hover:text-secondary-interactive rounded-lg font-bold transition-colors mt-2"
                data-aether-trigger="ui-control"
                data-aether-target="demo-modal"
                data-aether-action="close">
                Login
            </button>
        </div>
    </div>

</div>