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
- Windows 98, most styles are from 98.css
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
Check out Installation.
seele relies on the following modern web standards:
| feature | baseline | Chromium | Firefox | Safari |
|---|---|---|---|---|
ElementInternals |
2023 | - | - | - |
:dir() |
2023 | 120 | - | - |
| Constructable Stylesheets | 2024 | - | 126 | - |
:state() |
2024 | 125 | 126 | - |
@starting-style |
2024 | - | - | 17.5 |
aria*Element and similar |
2025 | 135 | 136 | 16.4 |
| Popover API | 2025 | - | - | 17 |
CSSNumericValue |
not yet | - | Nightly | - |
* CSSNumericValue is worked around currently so it does not raise the minimum
version of Firefox
All of the above result in the following minimum requirements:
- Chromium: >= 135
- Firefox: >= 136
- Safari: >= 17.5
It is 2026 now, so you don't really need to worry about this. However, in the future, the following web features might be used and require higher browser versions:
| feature | benefits | baseline | Chromium | Firefox | Safari |
|---|---|---|---|---|---|
anchor() |
remove the dependency floating-dom |
2026 | - | 147 | 26 |
alpha() |
replace oklch() |
2026 | 151 | 155 | 27 |
| focusgroup | replace roving focus code | not yet | 150 | not yet | not yet |
* omitting a specific browser version means using that standard does not raise the minimum required version of seele