Someone is attempting to deploy a commit to the tcaweb Team on Vercel.

A member of the Team first needs to authorize it.

Hi @boka-inuits, thanks for your contribution.

I'll review it soon. 🙂

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vue3-select-component	Ready	Preview	Comment	Oct 23, 2025 7:08pm

Also fixes #180

Deployed in v0.13.0

I everyone, I just tried updating the library from 0.12.3 to 0.13.0 and while the new positioning feature is working fine in theory, I feel like it's lacking a way of changing styles depending on the menu position (top / bottom)
Below are some examples with custom styling that are broken by the update in the new position :

The easiest way that I can see to fix that issue would be to apply a class to the menu, that would be toggled depending on its positioning, allowing users to set styles that differ depending on the position. This way, the class would allow my example to look fine in both cases, changing the border-radius accordingly.

But I don't know if that's something that can be easily done using Floating UI @TotomInc

I see what you mean @thiervoj, I'll consider adding something along data-state-position="top|bottom". I believe the top/bottom state can be retrieved from floating-ui.

Then, you'll be able to use the data-state-position attribute for custom styling.

What do you think?

I see what you mean @thiervoj, I'll consider adding something along data-state-position="top|bottom". I believe the top/bottom state can be retrieved from floating-ui.

Then, you'll be able to use the data-state-position attribute for custom styling.

What do you think?

yes, it's possible to get a position from floating ui. Something like that

      apply({ elements, rects, placement }) {
        // top, bottom, left, right
        const direction = placement?.split("-")[0];
        // `elements.floating` is the html element, so you can add attributes/classes, whatever you want to it according to its direction

        Object.assign(elements.floating.style, {
          width: `${Math.max(0, rects.reference.width)}px`,
        });
      },

Looks perfect to me, thanks @TotomInc !