data-aether-sync-url

<!-- 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 font-bold text-primary mb-2">Hello World</h3>
        <p class="text-secondary mb-6">This modal updates the URL hash automatically.</p>

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

</div>