Skip to main contents

seele

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

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 it without installing it, you can use importmap like below, note that styles required to properly show the components are not included.

<script type="importmap">
  {
    "imports": {
      "@vollowx/seele/": "https://esm.run/@vollowx/seele/"
    }
  }
</script>
<script type="module">
  import '@vollowx/seele/m3/button/common-button.js';
</script>
<md-button variant="outlined">Button</md-button>

Installation

seele is published on npm at @vollowx/seele, therefore:

npm i @vollowx/seele

To start using seele, you will need a bundlers and dev servers that resolves paths to Node packages, 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 <catagory> can be core, base and design systems (see the next section). The <component> does not necessarily match the name of the component, for example <md-loading> is imported from @vollowx/seele/m3/loading-indicator/loading-indicator.js. Such relationship is documented on the page of each component.

Next

The following design systems or styles are implemented, you can read the corresponding documentations for their components.

Each design system contains not only conponents, but also assets like styles and helper utils. To check them out, see 00_Overview for each design system.

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

Compatibility

See Compatibility.

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, menu and tabs, and is solved for dialog and radio.

    The easist 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: