{{-- An M3 rich tooltip: a few lines of context for a control, with an optional subhead and actions.

         <x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest allowed.">
             <x-button icon="help" aria-label="About expiry" />
             <x-slot:actions><x-button label="Learn more" link="/help/expiry" /></x-slot:actions>
         </x-rich-tooltip>

     It wraps its trigger. By default it shows on hover and keyboard focus like a plain tooltip;
     `persistent` makes it open on press instead and stay until a press elsewhere or Escape — the
     form M3 asks for when it has actions. The bubble is a popover in surface-container with a
     medium corner and elevation 2, 312px at most, placed by anchor positioning on `side`.

     The bubble's id and anchor name are new with every render; its `wire:key` (see `<x-menu>`)
     lets a Livewire morph patch it in place, so an open bubble stays open — through its own
     action's `wire:click` too — and resources/js/rich-tooltip.js keeps showing and hiding the
     element on the page rather than one the morph took away.

     resources/js/rich-tooltip.js points the trigger at the bubble with `aria-describedby`, and a
     `persistent` one also carries `aria-haspopup="dialog"` and `aria-expanded` (ACT-22): the
     explanation is the whole point of a rich tooltip, and without the association a screen reader
     reads only the trigger's own label. The trigger arrives in a slot, so only script can find the
     element in it that takes the focus. It stands for 1.5s after the pointer or focus leaves,
     M3's transient tooltip timing (ACT-25), unless `persistent` keeps it open until dismissed.

     RichTooltipTokens (androidx Compose Material 3, Apache-2.0): title-small subhead and body-medium
     text in on-surface-variant, label-large actions in primary. Drawn by
     resources/css/components/rich-tooltip.css from `data-md-rich-tooltip` and `data-md-side`. --}}

@props([
    'title' => null,
    'text' => null,
    'side' => 'bottom',
    'persistent' => false,
])

@php
    $side = in_array($side, ['top', 'bottom', 'left', 'right'], true) ? $side : 'bottom';
    $key = \Illuminate\Support\Str::lower(\Illuminate\Support\Str::random(10));
    $anchor = "--material-rich-tooltip-{$key}";
@endphp

<span
    data-md-rich-tooltip
    {{ $attributes }}
    style="anchor-name: {{ $anchor }}"
    x-data="materialRichTooltip({{ $persistent ? 'true' : 'false' }})"
>
    {{ $trigger ?? $slot }}

    <span
        x-ref="bubble"
        {{ new \Illuminate\View\ComponentAttributeBag(['wire:key' => 'material-rich-tooltip']) }}
        id="material-rich-tooltip-{{ $key }}"
        popover="{{ $persistent ? 'auto' : 'manual' }}"
        role="{{ $persistent ? 'dialog' : 'tooltip' }}"
        @if ($title) aria-label="{{ $title }}" @endif
        data-md-rich-tooltip-bubble
        data-md-popover-exit
        data-md-side="{{ $side }}"
        style="position-anchor: {{ $anchor }}"
    >
        @if ($title)
            <span data-md-rich-tooltip-title>{{ $title }}</span>
        @endif

        <span data-md-rich-tooltip-text>{{ $text }}</span>

        @isset($actions)
            <span data-md-rich-tooltip-actions>{{ $actions }}</span>
        @endisset
    </span>
</span>