Text inside `flux:separator` not animated using `wire:transition`

[ghabriel25]

Flux version

v2.13

Livewire version

v4.2

Tailwind version

v4.1

Browser and Operating System

Chrome on Windows

What is the problem?

When using wire:transition attribute on flux:separator, the text inside separator doesnt get animated (only the line). This breaks the smooth transition behavior such on validation error login form

Code snippets to replicate the problem

<form class="space-y-4" wire:submit="login">
    <flux:input icon="envelope"
                label="Email"
                placeholder="Enter your e-mail address"
                type="email"
                wire:model="email" />

    <flux:button class="w-full"
                color="green"
                data-test="signin"
                type="submit"
                variant="primary"
                wire:transition>Sign In</flux:button>

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

    <flux:button class="w-full"
                href="{{ route('google.redirect', absolute: false) }}"
                icon="google"
                wire:transition>
        Sign In with Google
    </flux:button>
</form>

Screenshots/ screen recordings of the problem

bandicam.2026-04-14.10-26-47-055.mp4

How do you expect it to work?

The reason behind this because attribute bag not applied at the container element, it only applied on before and next sibling of the text wrapper. It should be applies on the container as well for case like wire:text, wire:show etc.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ghabriel25]

Although its different component, this is also affect how input forwarded its attribute. For example

<flux:input wire:transition />

wire:transition only applies on the input itself eventhough its rendered with field container which cause only the input being animated.

This behavior force user to use <flux:field> as a wrapper of the input so its being animated as expected and I think this doesnt align with flux principle of simplicify (https://fluxui.dev/docs/principles)

[joshhanley]

@ghabriel25 thanks for reporting! I see you have submitted a PR #2556 to fix this.

Re flux:input, while seemingly related, I believe it is a separate issue. The attributes in the input forward to the flux:field too, so this should work <flux:input label="name" wire:transition />. If it doesn't, can you please open up a separate issue with details and screenshots, so we can see what is happening and what you are trying to achieve? Thanks!

[ghabriel25]

@joshhanley Thanks. Because error message and the input are siblings, it doesnt animate the error (it just pop up).

I''ll open new issue related to it.