Standard Extensible Elements

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

Documentations and demos are at tideover.cc/seele/.

Installation

Seele is published on npm, install with your preferred package manager:

bun add @vollowx/seele
yarn add @vollowx/seele
npm install @vollowx/seele

Quickstart

Importing

You can import the entire library or import as needed.

// Import all components
import '@vollowx/seele';

// Or import specific components (recommended)
// They all follow such path: @/catagory/group/component.js
import '@vollowx/seele/m3/button/common-button.js';
import '@vollowx/seele/m3/checkbox/checkbox.js';

Using

Once imported, the components can be used just like standard HTML elements.

<md-button variant="filled">Filled Button</md-button>
<md-button variant="outlined">Outlined Button</md-button>

<label>
  <md-checkbox checked></md-checkbox>
  Labelled Checkbox
</label>

Theming

Seele components use CSS variables for styling. To include the systems, add this to your style files.

@import '@vollowx/seele/m3/systems/base.css';
/* This includes basic system variables like motion system and typography system */
@import '@vollowx/seele/m3/systems/defaults.css';
/* (Optional) This includes basic styling for body, selection and links */

/*
 * Note that there is no default color system since the way you implement theme
 * switching and color changing varies.
 *
 * You can still find some references in dev/shared.css
 */

Browser Support

Seele relies on the folling modern web standards:

• ElementInternals, Baseline 2023
• Constructable Stylesheets, Baseline 2024, C[^1] 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

[^1]: C = Chromium, F = Firefox.

Other Information

• Roadmap
• Contributing
• License (Apache-2.0)