react-spectrum VS lion

Adobe - React ARIA

As no one metioned it, here goes Adobe spectrum react

This was an intentional choice. Repositioning when an outer element scrolls is pretty janky in some cases because scroll events don’t fire at 60fps. Also it’s not possible at all in other cases, like if the trigger goes completely out of view. We used to close the popover in this case but this caused usability problems. The new behavior of preventing scroll actually matches native platforms like macOS and helps with these issues. I get that it’s a little opinionated but it was thoroughly considered, not just done out of laziness. More details in this answer: https://github.com/adobe/react-spectrum/discussions/3802#dis...

It’s not perfect though. The only reason I’m not using preact is that my front-end library of choice, react-aria, does not work 100% with preact, though it sounds like it might now be close (unsure).

https://react-spectrum.adobe.com/react-aria/index.html

https://github.com/adobe/react-spectrum/issues/781

Their repos are public: - https://github.com/adobe/spectrum-web-components - https://github.com/adobe/react-spectrum

You wanna have look at lion

Like this? https://github.com/ing-bank/lion/

I've been maintaining a web component library with Lit for a while. Web components overall don't feel ready for primetime. Just making a custom input field and have it work with a is chore.

Just look here at how much overall code is needed to do it right: https://github.com/ing-bank/lion/blob/master/packages/input/...

After you get through all the inheritance and mixins it's thousands of lines

Essentially every element that doesn’t already exist in html is now able to be created as a custom element. Or to better utilise modern features of JavaScript existing elements are augmented. For example the white labelled Lion Elements by ING or Shoelace. These would make an excellent start to the web / web application section of a fully developed design system.

Lion (ING)

42. Lion Web Components