seele

seele (Standard Extensible Elements) is an extensible Web Components library that prioritizes accessibility and keyboard control, offering components styled with Material Design 3 and Windows 98 aesthetics.

What is seele?

seele is an open-source Web Components library published as the npm package @vollowx/seele. It provides base component classes, styled component sets, and mix-ins as input abstractions; developers consume these to produce reusable custom HTML elements for their web applications. The project is maintained under the vollowx organization on GitHub and SourceHut, documented at tideover.cc/seele, and licensed under Apache-2.0.

Key Features

• Accessible and keyboard-accessible — All components implement the WAI-ARIA APG patterns, so they support screen readers and full keyboard navigation.
• Flexible component architecture — seele ships styled, ready-to-use components alongside unstyled base components and mix-ins that developers can combine to build their own elements.
• Material You Expressive theme — A styled set follows Material Design 3 guidelines from m3.material.io, giving a modern Material appearance without custom CSS.
• Windows 98 theme — A second styled set takes visual cues from the 98.css project (jdan.github.io/98.css), recreating the retro Windows 98 interface.
• Modern web standards — The library is built on ElementInternals, Constructable Stylesheets, :state(), and related baseline features from 2023–2025, keeping bundle size comparatively small.

Who is it for?

• Web component developers — Use the base classes and mix-ins to create custom elements that already handle accessibility and keyboard semantics.
• Design system teams — Start from the APG-pattern-based components and theme them to enforce consistent, accessible interactions across a product.
• Rapid UI prototyping — Assemble Material Design 3 or Windows 98 style interfaces by mixing the pre-styled web components into static or framework-based pages.

What can you do with seele?

• Build a retro Windows 98 dashboard — Combine the Windows 98-styled buttons, forms, and window components into a themed interface with a nostalgic look.
• Create a Material Design 3 app shell — Lay out navigation, dialog, and input elements from the Material You Expressive set to match modern design language.
• Extend components with custom behavior — Leverage the provided mix-ins to add new functionality while preserving the built-in accessibility and keyboard control.

Browser compatibility

seele intentionally relies on recent web platform features to keep its code small, which sets the minimum browsers at Chromium 135+, Firefox 136+, and Safari 16.4+. Features like ElementInternals, :state(), and aria*Element are baseline from 2023 onward. Future adoption of the Popover API and CSS anchor() may raise these minimums.