Overlay

<form wire:submit="save" class="space-y-2">
    <brok:overlay
        wire:model="value"
        :aria-invalid="$errors->has('value') ? 'true' : 'false'"
        aria-describedby="value-error"
    />

    @error('value')
        <p id="value-error" role="alert">{{ $message }}</p>
    @enderror

    <brok:button type="submit" wire:loading.attr="disabled">
        <span wire:loading.remove>Save</span>
        <span wire:loading>Saving…</span>
    </brok:button>
</form>

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
@endphp

{{--
    Overlay — the panel surface the shared anatomy sits on. Dialog, alert
    dialog, sheet and drawer render their own panels (with open state, focus
    trap and teleport); use this root for a custom or static surface that
    should match them, then compose <x-ui.overlay.header>, .title,
    .description, .footer and .close inside it.
--}}
<div
    data-slot="overlay"
    {{ $attributes->merge(['class' => $styles['overlay']['panel']]) }}
>
    {{ $slot }}
</div>

@props([
    // Pin the header to the top of a scrollable overlay body.
    'sticky' => false,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    // dialog/alert-dialog/sheet/drawer each pass their own name so the anatomy
    // selector stays `dialog-header`, `sheet-header`, … The browser keeps only
    // the first of two identical attributes, so read the override out of the
    // bag and print exactly one.
    $slotName = (string) ($attributes->get('data-slot') ?: 'overlay-header');
    $classes = $styles['overlay']['header'].($sticky ? ' '.$styles['overlay']['headerSticky'] : '');
@endphp

<div
    data-slot="{{ $slotName }}"
    {{ $attributes->except('data-slot')->merge(['class' => $classes]) }}
>
    {{ $slot }}
</div>

@props([
    // The Alpine `$id()` scope name the panel's aria-labelledby points at.
    'scope' => 'overlay-title',
    // Report the title to the overlay root (`hasTitle`) so the panel can label
    // itself only when a title is actually present. alert-dialog labels its
    // panel unconditionally and has no such flag, so it opts out.
    'track' => true,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $slotName = (string) ($attributes->get('data-slot') ?: 'overlay-title');
@endphp

<h2
    data-slot="{{ $slotName }}"
    x-bind:id="$id('{{ $scope }}')"
    @if ($track) x-init="hasTitle = true" @endif
    {{ $attributes->except('data-slot')->merge(['class' => $styles['overlay']['title']]) }}
>
    {{ $slot }}
</h2>

@props([
    // The Alpine `$id()` scope name the panel's aria-describedby points at.
    'scope' => 'overlay-description',
    // Report the description to the overlay root (`hasDescription`). See
    // title.blade.php — alert-dialog opts out.
    'track' => true,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $slotName = (string) ($attributes->get('data-slot') ?: 'overlay-description');
@endphp

<p
    data-slot="{{ $slotName }}"
    x-bind:id="$id('{{ $scope }}')"
    @if ($track) x-init="hasDescription = true" @endif
    {{ $attributes->except('data-slot')->merge(['class' => $styles['overlay']['description']]) }}
>
    {{ $slot }}
</p>

@props([
    // Pin the footer to the bottom of a scrollable overlay body.
    'sticky' => false,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $slotName = (string) ($attributes->get('data-slot') ?: 'overlay-footer');
    $classes = $styles['overlay']['footer'].($sticky ? ' '.$styles['overlay']['footerSticky'] : '');
@endphp

<div
    data-slot="{{ $slotName }}"
    {{ $attributes->except('data-slot')->merge(['class' => $classes]) }}
>
    {{ $slot }}
</div>

@props([
    // In a scrollable overlay, float the close button so it stays pinned to the
    // panel's top-right while the body scrolls (sticky instead of absolute).
    'sticky' => false,
])

@php
    $styles = require base_path(config('ui.component_path', 'resources/views/components/ui').'/_styles.php');
    $slotName = (string) ($attributes->get('data-slot') ?: 'overlay-close');
    $classes = ($sticky ? $styles['overlay']['closeSticky'] : $styles['overlay']['closeAnchored']).' '.$styles['overlay']['close'];
@endphp

<button
    type="button"
    data-slot="{{ $slotName }}"
    @click="hide()"
    {{ $attributes->except('data-slot')->merge(['class' => $classes]) }}
>
    <span class="sr-only">{{ __('Close') }}</span>
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
        <path d="M18 6 6 18M6 6l12 12" />
    </svg>
</button>