Apply attributes to the root element of text separators

[calebporzio]

Fixes #2555

When a separator has text, the attribute bag was forwarded to the two inner line <div>s instead of the component's root element. So wire:transition landed on the lines — each line got its own view-transition snapshot and faded, while the container and the text span rode along with the root (whose fade Livewire intentionally disables) and popped in instantly.

This applies the attribute bag to the root container instead, and leaves the line divs as internal decoration. Now the whole separator — lines and text — animates as one group:

<flux:separator text="or" wire:transition />

renders as:

<div data-orientation="horizontal" role="none" class="flex items-center w-full" wire:transition data-flux-separator>
    <div class="... h-px w-full grow"></div>
    <span class="...">or</span>
    <div class="... h-px w-full grow"></div>
</div>

This also puts id, data-*, and other passthrough attributes where you'd expect them. Note the one behavior change: custom classes on a text separator now merge onto the root container rather than the two line divs — consistent with how every other component applies its attribute bag to the root element (the plain and vertical variants are untouched).

Verified in a real Livewire v4 app with Playwright: before, mid-transition the buttons and lines were half-faded while the "or" text was at full opacity; after, the separator (text included) receives the view-transition-name and fades with everything else.

🤖 Generated with Claude Code

[dfa-yn]

Thanks 👍🏻

[ghabriel25]

Hi @calebporzio @joshhanley — I think this may have been missed from the release. Was that intentional?