Skip to main contents

seele

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

Playground Demo app - Timor

* As per experience from the Eleventy website, yes, this is probably necessary.

* And yes, this button requires Firefox 147 and Safari 26.2 to be a working link.

To try seele without installing it, you can use importmap like below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vollowx/seele/src/m3/styles/base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vollowx/seele/src/m3/styles/motion-expressive.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vollowx/seele/src/m3/styles/defaults.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vollowx/seele/src/m3/styles/color-default-light.css" media="screen and (prefers-color-scheme: light)" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vollowx/seele/src/m3/styles/color-default-dark.css" media="screen and (prefers-color-scheme: dark)" />

<script type="importmap">
  {
    "imports": {
      "@vollowx/seele/": "https://esm.run/@vollowx/seele/"
    }
  }
</script>
<script type="module">
  import '@vollowx/seele/all.js';
</script>

<md-button>Filled button</md-button>
<md-switch checked aria-label="draggable switch"></md-switch>
<md-loading contained aria-label="loading nothing"></md-loading>

Design systems

seele has component behaviors in base and visuals in design systems that extend it. Most users only need to pick one design system below and import from it, base and core are lower-level parts the design systems rely on.

overview page path prefix origin
Material You Expressive m3 Google's Material Design 3
Windows 98 win98 Windows 98 look

Each design system contains not only components, but also assets like styles and helper utils. See 00-Overview.md for each design system for its full component list.

Foundations

Installation

seele is published on npm at @vollowx/seele, so you can install it with:

npm i @vollowx/seele

To start using seele, you will need a bundler and dev server that can resolve Node package paths, for example web-dev-server and esbuild. You can take a look at seele-example, which contains a minimal setup for using seele (or actually any other Web Components library).

Usage

// Import all components (not recommended)
import '@vollowx/seele';

// Or import specific components
// They all follow such path: @/catagory/group/component.js

import '@vollowx/seele/m3/button/common-button.js';
import '@vollowx/seele/m3/checkbox/checkbox.js';

import '@vollowx/seele/win98/button/button.js';

The <category> is one of core, base, m3 or win98 (see Design systems above). The <component> does not necessarily match the name of the component. Such relationship is documented on the page of each component.

To see all components you can import directly, see all.ts.

Compatibility

In short, Chromium: >= 135, Firefox: >= 136 and Safari: >= 17.5.

See Compatibility.

Roadmap

See Roadmap.

Notes

  1. If a component gets some properties or parts by extending or mixing, the properties and parts are only shown at the super class or mixins.

  2. The order you import components matters for now, for example <md-menu> looks for <md-menu-item>s in its slot at connectedCallback(), and if they are not registered at that moment, they will miss the chance of getting the events added. Such case happens for autocomplete and tabs, and is solved for dialog, menu and radio.

    The easiest solution is to do things like loading menu items before menu, and such cases will be handled more flexibly in the future.

This documentation is also available at: