v3 Input Group buttons are not affected by Presets

[endigo9740]

Current Behavior

When creating an input group, the button styles do not display the Preset classes applied. Note that this is working on the Astro docs, but not in a real world SvelteKit project. Which might imply there's a precedence issue that only occurs during the final build process.

<form class="mx-auto w-full max-w-md space-y-8">
    <div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
        <div class="input-group-cell">S</div>
        <input type="search" placeholder="Search..." />
        <button class="btn preset-filled">Submit</button>
    </div>
</form>

Expected Behavior

You should be free to style the buttons however you wish.

Steps To Reproduce

1. Create a new v3 SvelteKit project
2. Copy/paste the examples from our docs
3. Note the button styles do not match how they are show in the docs

Link to Reproduction / Stackblitz

No response

More Information

Docs: https://next.skeleton.dev/docs/tailwind/forms#groups

[phamduylong]

Ran through this a bit, it seems like some of the properties for the preset and .input-group in forms.css are overlapping, and this "race condition" is resolved differently in Astro docs and a real world project.

[endigo9740]

@phamduylong that was my guess as well. I'm still not entirely happy with how the input groups are handled so leave this one to me. I'll try to revise before launch. Otherwise we might delay this feature to ensure I have proper time to implement breaking changes.