Ability to use hidden="until-found" on x-collapse

[Roye7777777]

This might be an addition to #4099

I noticed x-collapse uses the hidden attribute to toggle content. Perhaps it would be an idea to introduce an optional property to be able to use hidden="until-found", in such a way that when a user CMD/CTRL+F's for hidden content, the removal of hidden="until-found" by the browser should trigger a visibility toggle when using x-collapse, which relies on x-show.

When a toggle would take place during a search in the browser, I would expect the content to be visible immediately, so no animation in contrary to a toggle by conventional click/keypress/etc.

Without using x-collapse this behavior is possible when one does not use x-show but instead toggles the hidden attribute together with @beforematch:

<div x-data="{ expanded: false }">
    <button @click="expanded = ! expanded" 
          x-bind:style="'background-color: ' + (expanded ? 'dodgerblue' : 'tomato')">
          Toggle Content
    </button> 
    <p x-bind:hidden="expanded ? null : 'until-found'" 
          @beforematch="expanded = true">
          Hidden content!
    </p>
</div>

I do notice Safari does not support until-found yet, though this is a progressive enhancement. hidden works regardless of the attribute used and hidden="until-found" does pass the w3validator.

[ekwoka]

🤔 This is interesting to solve.

I think the big issue that right now x-collapse relies on x-show, which would already make hidden="until-found" not matter anyway... under normal circumstance since the display is set to none...