Overlay Service

OverlayService

OverlayResult

OverlayReference

OverlayParameters

OverlayOptions

Sizing overlays (3.6.0)

OverlayOptions.Size is a single, unified knob that sizes both Dialogs and Sheets — no Class override needed. To make a service-opened Dialog larger, just pass a Size:

// A wide dialog — Lg → max-w-2xl, Xl → max-w-4xl, Full → near-viewport
await Overlay.ShowDialogAsync<MyForm>(
    title: "Edit user",
    options: new OverlayOptions { Size = OverlaySize.Lg });

The same Size drives Sheets (width on Left/Right, height on Top/Bottom). The old Sheet-only SheetSize property still works as a 1:1 alias but is deprecated — prefer Size.

Responsive sheets (2.1.3)

A single ShowSheetAsync call can switch between a side panel on desktop and a fullscreen bottom sheet on mobile, including SwipeToClose behaviour. OverlayProvider subscribes to IResponsiveService.ViewportChanged and re-renders the effective Side/Size/SwipeToClose when the viewport crosses MobileBreakpoint — works mid-flight (user rotates a tablet, sheet flips correctly).

// In any component:
@inject OverlayService Overlay

private async Task ShowResponsive()
{
    await Overlay.ShowSheetAsync<MyForm>(
        title: "Edit user",
        side: Lumeo.Side.Right,                      // desktop default
        size: SheetSize.Default,
        options: new OverlayOptions
        {
            // Below 768px, switch to a fullscreen bottom sheet with swipe-down dismiss
            MobileSheetSide    = Lumeo.Side.Bottom,
            MobileSize         = OverlaySize.Full,   // unified Size — drives Dialog & Sheet
            MobileSwipeToClose = true,
            // MobileBreakpoint defaults to 768 (md) — set to null to disable
        });
}

If you need finer-grained mobile detection (e.g. to change the rendered content, not just overlay sizing), inject IResponsiveService directly. See the IResponsiveService API below.

IResponsiveService (2.1.3)

Reactive viewport/breakpoint service. One JS resize listener per circuit (debounced 100ms), Tailwind-v4-aligned Breakpoint enum, plus IsMobile/IsTablet/IsDesktop convenience flags and a ViewportChanged event for components that need to react to the live viewport.

@inject IResponsiveService Responsive
@implements IAsyncDisposable

@if (Responsive.IsMobile)
{
    <BottomNav />
}
else
{
    <Sidebar />
}

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Responsive.EnsureInitialisedAsync();
            Responsive.ViewportChanged += OnVp;
        }
    }

    private void OnVp(ViewportInfo vp) => InvokeAsync(StateHasChanged);

    public ValueTask DisposeAsync()
    {
        Responsive.ViewportChanged -= OnVp;
        return ValueTask.CompletedTask;
    }
}

AlertDialogOptions