Extra <div> in card title

[AtmoFX]

I am trying to put 2 divs side by side in a card title and see some extra <div> are inserted for the title tag.
That behavior is different when compared to the figure slot and I could not figure out a benefit for this difference.

Here is an example to compare the figure and the title slots:

<x-card shadow class="border border-gray-400/20">
    <x-slot:figure class="m-0 flex !justify-between w-full mark-the-figure">
        <div>ABC</div>
        <div>DEF</div>
    </x-slot:figure>
    <x-slot:title class="flex !justify-between w-full mark-the-title">
        <div>GHI</div>
        <div>JKL</div>
    </x-slot:title>
    Card text
</x-card>

The mark-the-figure and mark-the-title classes do nothing other than help track where each item is rendered in the DOM.

This results in only the figure between correctly applied the !justify-between class (or to be more precise, this is what it looks like; the actual explanation is written below):

The reason can be found in the generated DOM:

<div class="card bg-base-100 rounded-lg p-5 shadow-xs border border-gray-400/20" wire:key="mary5dc6f36fcd268db20f5fce81cad760c2">
    <figure class="mb-5 -m-5 m-0 flex !justify-between w-full mark-the-figure">
        <div>ABC</div>
        <div>DEF</div>
    </figure>
    <div class="pb-5">
        <div class="flex justify-between items-center"> <!-- This div ... -->
            <div> <!-- ... and this one -->
                <div class="text-xl font-bold flex !justify-between w-full mark-the-title">
                    <div>GHI</div>
                    <div>JKL</div>
                </div>
            </div>
        </div>
    </div>
    <div>
        Card text
    </div>
</div>

As a result, there is no way to make the title take all the available width (hence the reason why it looks like !justify-between has no effect).

Had the generated HTML been like below (without the 2 commented <div>), the title would have spanned across the whole card width:

<div class="card bg-base-100 rounded-lg p-5 shadow-xs border border-gray-400/20" wire:key="mary5dc6f36fcd268db20f5fce81cad760c2">
    <figure class="mb-5 -m-5 m-0 flex !justify-between w-full">
        <div>ABC</div>
        <div>DEF</div>
    </figure>
    <div class="pb-5">
        <div class="text-xl font-bold flex !justify-between w-full">
            <div>GHI</div>
            <div>JKL</div>
        </div>
    </div>
    <div>
        Card text
    </div>
</div>

Would it be possible you simplify the DOM so that the title behaves like the figure?

[AtmoFX]

Actually, I tested a bit more and the actions slot cannot be easily tweaked either (it seems CSS classes are ignored).
Do you have rules as to how CSS classes are supposed to work for components and their slots, throughout Mary?

[robsontenorio]

I think this is a hard one to reconcile, because these divs exist to ensure that the menu slot works properly.

If you find a better solution, please feel free to send a PR.

If you think it’s not worth it, as a workaround you can skip the “title” attribute and just use the card body, where you can place your own title content. Or just hack the CSS.

<x-card class="my-card" />

// Custom css for that card
.my-card ... {

}

[AtmoFX]

@robsontenorio, don't be so quick to close the issue.

I had missed the purpose of that for the menu slot. Now that I know, I can think of a solution.
How about adding the classes w-full to <!-- This div --> (comment from my question above) and grow-1 to <!-- ... and this one -->. Think it would do the trick?

Regarding actions, I still do not know if you had anything in mind when you decided not let it get the classes specified in client code. Could you please elaborate?

[robsontenorio]

In the past some component had not ability to allow class through slots. Maybe Card component miss this ability.

Are you able to provide a PR with an working solution, that does not break the current behavior ?