@props([
    'id' => null
])


@php
    $attributes = $attributes
        ->merge([
            'x-data' => "{ 
                tab: 'page-content',
                setFirst(tabs) {
                    const nav = tabs.querySelector(':scope > .tabs__nav');
                    if (!nav) return null;
                    const navItem = nav.firstElementChild;
                    this.tab = navItem.getAttribute('aria-controls');
                }
            }",
            'x-init' => 'setFirst($el)',
            'x-ref' => 'tabs'
        ])
        ->class([
            'tabs'
        ]);
@endphp


<div {{ $attributes }}>
    {{ $slot }}
</div>