<TelerikDialog @bind-Visible="@DialogVisible"
               Width="500px"
               Height="300px"
               Class="focusable-content">
    <DialogTitle>
        <div tabindex="0" class="dialog-wrapper">
            Focusable Title
        </div>
    </DialogTitle>
    <DialogContent>
        <div tabindex="0" class="dialog-wrapper">
            <p>Click anywhere in this content area, then press ESC to close the dialog.</p>
        </div>
    </DialogContent>
    <DialogButtons>
        <TelerikButton OnClick="@CloseDialog" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Close</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<TelerikButton OnClick="@OpenDialog">Open Dialog</TelerikButton>

<style>
    /* Remove default Dialog content padding to let wrapper handle it */
    .focusable-content .k-dialog-content {
        padding: 0;
    }

    .focusable-content .k-dialog-titlebar {
        padding: 0;
    }

    .focusable-content .k-dialog-titlebar-actions {
        padding-block: var(--kendo-spacing-3, 0.75rem);
        padding-inline: var(--kendo-spacing-4, 1rem);
    }

    /* Focusable wrapper that fills the entire Dialog content area */
    .focusable-content .dialog-wrapper {
        padding: 1rem;
        outline: none;
        height: 100%;
        box-sizing: border-box;
        transition: background-color 0.2s ease;
    }

        /* Optional visual indication when the wrapper is focused */
        /* .focusable-content .dialog-wrapper:focus-within {
            background-color: rgba(0, 123, 255, 0.05);
        } */
</style>

@code {
    private bool DialogVisible { get; set; } = true;
    private string SampleText { get; set; } = string.Empty;

    private void OpenDialog()
    {
        DialogVisible = true;
    }

    private void CloseDialog()
    {
        DialogVisible = false;
    }
}