seele - Standard Extensible Elements

https://tideover.cc/seele/ docs/

seele (Standard Extensible Elements) is a extensible Web Components library with a focus on accessibility and keyboard-control.

It also provides styled components in the following design guideline(s):

• Material You Expressive

Features

What’s the differences comparing to other projects?

• Accessible and keyboard-accessible - all components are based on the APG Patterns
• Flexible - seele provides not only the styled components, but also the base ones and the mix-ins that compose them, allowing you to write your components easily
• Up-to-date - seele uses new Web features as much as possible, (see the README), meaning that its size is relatively small and the compatibility is not the best

Documentations

Documentations and demos.

Download

• npm package
• The source at SourceHut
• The source at GitHub

Browser Support

seele relies on the folling modern web standards:

• ElementInternals, Baseline 2023
• Constructable Stylesheets, Baseline 2024, C¹ 90, F 126
• :dir(), Baseline 2023, C 120, F 49
• :state(), Baseline 2024, C 125, F 126

And all that result in:

• Chromium: >= 125
• Firefox: >= 126

It is 2026 now, you don’t really need to worry about this. But in the future, these following web features might be used and require higher browser versions:

• anchor(), Baseline 2026, C 125, F 147, will remove the dependency floating-dom
• ::view-*, Baseline 2025, C 111, F 144, will optimize some animations for menu, dialog, etc

Similar Projects

• Material Web - similar to seele, this project uses Lit but is dedicated to Material Design instead of a generic library and developed by Google developers
• M3E - also built on Lit and has a rather complete component collection
• MUI (Material UI) - tried-and-tested React component library, supporting only Material Design 2
• Vuetify - tried-and-tested Vue component library, supporting only Material Design 2
• MDUI - Lit, Material Design 3, not much accessible but definitely complete