This PR fixes an issue where the--button-width and--input-width CSS variables weren't always up to date.

We compute these values initially when the component mounts based on thegetBoundingClientRect of the button and input elements.

To ensure we catch changes in size, we setup aResizeObserver that watches for changes to the button and input elements.

Unfortunately,ResizeObserver doesn't fire when the size changes due to CSS properties such astransform orscale. As far as I can tell, there isn't a single event or Observer we can use to catch all possible changes.

One solution to this problem would be to delay the computation of the sizes until after all transitions have completed and then we could even introduce a small delay to ensure everything is in its final state.

However, you could literally usehover:scale-110 on the Listbox button which would mean that the size changes whenever you hover over the button.

To fix this in a more generic way, we setup arequestAnimationFrame loop that checks the size of the button and input elements on each frame. If the size has changed, we update the CSS variables.

Note: we will only re-render if the size has actually changed, so this shouldn't cause unnecessary re-renders.

The internal hook we use (useElementSize) also now receives anenabled option such that we only run thisrequestAnimationFrame loop when the component is enabled.

For components such as theCombobox,Listbox andMenu that means that we only start measuring when the corresponding dropdown is in an open state.

Hopefully we can fix this kind of issue with an Observer in the future (e.g.:PerformanceObserver withLayoutShift (https://developer.mozilla.org/en-US/docs/Web/API/LayoutShift)) but this is still experimental today.

Fixes:#3612
Fixes:#3598