@namespace Connected.Components
@inherits UIComponent

<div @ref="_root" @attributes="UserAttributes" class="@Classname" style="@Style" @onkeydown="OnRootKeyDown" @onkeyup="OnRootKeyUp" @onfocus="OnRootFocusAsync" tabindex="-1">

    <div class="fixed pointer-events-none"
         tabindex="@TrapTabIndex"
         @onfocus="OnTopFocusAsync">
    </div>

    <div @ref="_firstBumper"
         class="fixed pointer-events-none"
         tabindex="@TrapTabIndex"
         @onfocus="OnBumperFocusAsync">
    </div>

    <div @ref="_fallback"
         class="fixed pointer-events-none"
         tabindex="-1">
    </div>

    @ChildContent

    <div @ref="_lastBumper"
         class="fixed pointer-events-none"
         tabindex="@TrapTabIndex"
         @onfocus="OnBumperFocusAsync">
    </div>

    <div sclass="fixed pointer-events-none"
         tabindex="@TrapTabIndex"
         @onfocus="OnBottomFocusAsync">
    </div>

</div>

@code {
    string TrapTabIndex => (Disabled? "-1" : "0");
}