{{-- One tab's panel, inside `<x-tabs>`, which draws the bar from its own `tabs` list. Shown while
     its `name` is the chosen one; every panel is rendered, so switching never waits on the server.
     `class` lands on the panel (it has `pt-6` above its content by default). --}}

@props([
    'name',
])

<div
    x-show="selected === @js($name)"
    role="tabpanel"
    x-bind:id="tabsId + '-' + @js($name) + '-panel'"
    x-bind:aria-labelledby="tabsId + '-' + @js($name)"
    tabindex="0"
    {{ $attributes->class(['pt-6 outline-none']) }}
>
    {{ $slot }}
</div>