Modal

<button class="btn btn--warn btn--solid" type="button"
        onclick="document.getElementById('takeover').showModal()">
    <i class="ri-user-shared-line"></i> <span>Take over this order</span>
</button>

<dialog class="modal" id="takeover" aria-labelledby="takeover-title">
    <form method="dialog">
        <div class="modal-header">
            <h3 id="takeover-title">Take over this order?</h3>
            <button class="modal-close" value="cancel" aria-label="Close"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body">
            <p>Automation stops handling <strong>ORD-4209</strong> and you become the owner. Any pending reservation on it expires.</p>
            <p class="form-hint">A note is written to the order's work log in your name.</p>
        </div>
        <div class="modal-footer">
            <button class="btn" value="cancel">Cancel</button>
            <button class="btn btn--warn btn--solid" value="accept"><i class="ri-user-shared-line"></i> <span>Accept &amp; take over</span></button>
        </div>
    </form>
</dialog>

@inject ISednaUi Ui

<div class="sedna-row-wrap sedna-gap-3" style="align-items:center">
    <button class="btn btn--brand btn--solid" type="button" @onclick="Open">New API key</button>

    @if (_result is null)
    {
        <span class="form-hint">No key created yet.</span>
    }
    else
    {
        <span class="badge @(_result.Saved ? "badge--go" : "")">
            <i class="@(_result.Saved ? "ri-key-2-line" : "ri-close-circle-line")"></i>
            @_result.Label
        </span>
        <span class="form-hint">
            <code>returnValue</code> was <code>@_result.ReturnValue</code>
        </span>
    }
</div>

<dialog id="new-api-key" class="modal">
    <form @onsubmit="Save">
        <div class="modal-header">
            <h3>New API key</h3>
            <button class="modal-close" type="button" aria-label="Close" @onclick="Cancel">
                <i class="ri-close-line"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="form-field">
                <label class="form-label" for="key-name">Name</label>
                <input class="form-input" id="key-name" @bind="_name" />
            </div>
            <div class="form-field">
                <label class="form-label" for="key-expiry">Expires</label>
                <input class="form-input" id="key-expiry" type="date" @bind="_expires" />
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" type="button" @onclick="Cancel">Cancel</button>
            <button class="btn btn--brand btn--solid" type="submit">Create</button>
        </div>
    </form>
</dialog>

@code {
    private const string Id = "new-api-key";

    private string _name = "ci-publisher";
    private DateOnly _expires = new(2027, 3, 31);
    private Outcome? _result;

    private sealed record Outcome(bool Saved, string Label, string ReturnValue);

    // Completes when the dialog closes, with its returnValue: "save" or "cancel" from the
    // two buttons below, and null for Escape.
    private async Task Open()
    {
        _result = null;
        var returnValue = await Ui.ShowModalAsync(Id);

        _result = returnValue == "save"
            ? new Outcome(true, $"{_name} · expires {_expires:yyyy-MM-dd}", "save")
            : new Outcome(false, "Cancelled", returnValue ?? "null");
    }

    // Both routes out close the dialog through CloseModalAsync, and the form is a
    // plain <form> rather than <form method="dialog">.
    //
    // The platform's own dialog-method submit does not survive a Blazor handler:
    // closing the dialog and setting returnValue is the DEFAULT ACTION of the submit
    // event, and Blazor's event delegator preventDefaults every submit that has an
    // @onsubmit handler, so that the form does not navigate. So Create would run its
    // handler and the dialog would stay open, with nothing logged.
    //
    // Handling it in C# is also the honest shape for a dialog holding a form: the
    // work can fail, and a dialog that has already closed cannot show why.
    private Task Save() => Ui.CloseModalAsync(Id, "save");

    private Task Cancel() => Ui.CloseModalAsync(Id, "cancel");
}

@inject ISednaUi Ui

<div class="sedna-row-wrap sedna-gap-3" style="align-items:center">
    <button class="btn btn--danger" type="button" @onclick="Discard">
        <i class="ri-delete-bin-line"></i> <span>Discard the reservation</span>
    </button>
    <span class="badge">@_outcome</span>
</div>

@* The confirmation is ordinary markup: its words, its buttons and their order are the
   app's. Each button's value becomes the dialog's returnValue, and the safe choice comes
   first in source order, which is the one showModal() focuses. *@
<dialog id="discard-reservation" class="modal modal--sm" aria-labelledby="discard-reservation-title">
    <form method="dialog">
        <div class="modal-header">
            <h3 id="discard-reservation-title">Discard the reservation?</h3>
        </div>
        <div class="modal-body">
            <p>The five lines on ORD-4209 go back into stock. This cannot be undone.</p>
        </div>
        <div class="modal-footer">
            <button class="btn" value="keep">Keep it</button>
            <button class="btn btn--danger" value="discard"><i class="ri-delete-bin-line"></i> <span>Discard</span></button>
        </div>
    </form>
</dialog>

@code {
    private string _outcome = "nothing yet";

    // Completes when the dialog closes, however it closed. Escape comes back as null,
    // so anything but the one value that means yes is a no.
    private async Task Discard()
    {
        var answer = await Ui.ShowModalAsync("discard-reservation");
        _outcome = answer == "discard" ? "discarded" : "kept";
    }
}

<div class="sedna-col">
    <div class="modal modal--sm">
        <div class="modal-body"><p>Release the lock on ORD-4199?</p></div>
        <div class="modal-footer">
            <button class="btn" type="button">Cancel</button>
            <button class="btn btn--brand btn--solid" type="button">Release</button>
        </div>
    </div>
    <div class="modal modal--lg">
        <div class="modal-header">
            <h3>Order detail</h3>
            <button class="modal-close" type="button" aria-label="Close"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body"><p>A wider panel, for content that would wrap badly at 480px.</p></div>
    </div>
    <div class="modal modal--xl">
        <div class="modal-header">
            <h3>Compare revisions</h3>
            <button class="modal-close" type="button" aria-label="Close"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body"><p>Two columns side by side: a diff, a wide table, a form beside its preview.</p></div>
    </div>
    <div class="modal modal--full">
        <div class="modal-header">
            <h3>Sequence editor</h3>
            <button class="modal-close" type="button" aria-label="Close"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body"><p>As wide as the window allows, with a margin at each side.</p></div>
    </div>
</div>

<div class="modal deck">
    <div class="modal-header">
        <h3>Welcome to the dispatch console</h3>
        <button class="modal-close" type="button" aria-label="Close"><i class="ri-close-line"></i></button>
    </div>

    <!-- One slide is rendered at a time. In Blazor this element carries a key
         bound to the step number, so the framework replaces it rather than
         patching it — which is what makes the entrance animation run again. -->
    <div class="deck-body">
        <div class="deck-step">
            <h4 style="margin:0 0 8px">Two lanes, and they never meet</h4>
            <p style="margin:0">
                Everything the agent could decide on its own is already gone. What is left is
                the work that asked for a person — and the work nobody has claimed yet.
            </p>
        </div>
    </div>

    <div class="deck-footer">
        <!-- Each dot jumps to its step, so a reader who has understood slide one can go
             back to it without pressing Back three times. aria-current marks the one
             showing; the group's label carries the position in words, which a row of
             circles cannot. -->
        <div class="deck-dots" role="group" aria-label="Step 2 of 4">
            <button class="deck-dot" type="button" aria-label="Go to step 1"></button>
            <button class="deck-dot" type="button" aria-label="Go to step 2" aria-current="step"></button>
            <button class="deck-dot" type="button" aria-label="Go to step 3"></button>
            <button class="deck-dot" type="button" aria-label="Go to step 4"></button>
        </div>
        <div class="btn-group">
            <button class="btn" type="button">Back</button>
            <button class="btn btn--brand btn--solid" type="button">Next</button>
        </div>
    </div>
</div>

<!-- Only when the panel cannot be a <dialog> — you are already inside a form and
     cannot nest another, or the panel has to stay in the page's own stacking
     context. Everything showModal() gives you has to be written by hand here:
     Escape, the focus trap, inert content behind, and returning focus on close. -->
<div class="modal-backdrop">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="lock-title">
        <div class="modal-header">
            <h3 id="lock-title">Release the lock?</h3>
            <button class="modal-close" type="button" aria-label="Close"><i class="ri-close-line"></i></button>
        </div>
        <div class="modal-body">
            <p>ORD-4199 goes back to the queue.</p>
        </div>
        <div class="modal-footer">
            <button class="btn" type="button">Cancel</button>
            <button class="btn btn--brand btn--solid" type="button">Release</button>
        </div>
    </div>
</div>