@vollowx/seele 0.12.2 → 0.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -23
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,38 +1,29 @@
|
|
|
1
1
|
# Standard Extensible Elements
|
|
2
2
|
|
|
3
|
-
**SEELE** is a modern, lightweight
|
|
3
|
+
**SEELE** is a modern, lightweight and accessible
|
|
4
|
+
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
5
|
+
library. It provides a set of highly customizable UI components that follow the
|
|
6
|
+
[Material Design 3](https://m3.material.io/) guidelines out of the box, while
|
|
7
|
+
being designed for easy extension and restyling.
|
|
4
8
|
|
|
5
9
|
Visit the [website of SEELE](https://seele.v9.nz/) for documentation and demos.
|
|
6
10
|
|
|
7
|
-
## Features
|
|
8
|
-
|
|
9
|
-
- **Material Design 3**: Ready-to-use components following the latest Material guidelines.
|
|
10
|
-
- **Web Components**: Framework-agnostic. Works with vanilla HTML or any framework.
|
|
11
|
-
- **Extensible**: Built to be extended. Create your own design system on top of SEELE's logic.
|
|
12
|
-
- **Lightweight**: Built on [Lit](https://lit.dev/) and [floating-ui](https://floating-ui.com/) only, ensuring fast performance and small bundle sizes.
|
|
13
|
-
- **Accessible**: Designed with accessibility in mind (using `ElementInternals` and standard ARIA patterns).
|
|
14
|
-
|
|
15
11
|
## Installation
|
|
16
12
|
|
|
17
|
-
|
|
13
|
+
SEELE is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
|
|
14
|
+
install with your preferred package manager:
|
|
18
15
|
|
|
19
16
|
```bash
|
|
20
|
-
# npm
|
|
21
17
|
npm install @vollowx/seele
|
|
22
18
|
|
|
23
|
-
# pnpm
|
|
24
|
-
pnpm add @vollowx/seele
|
|
25
|
-
|
|
26
|
-
# yarn
|
|
27
19
|
yarn add @vollowx/seele
|
|
28
20
|
|
|
29
|
-
# bun
|
|
30
21
|
bun add @vollowx/seele
|
|
31
22
|
```
|
|
32
23
|
|
|
33
24
|
## Usage
|
|
34
25
|
|
|
35
|
-
### Importing
|
|
26
|
+
### Importing
|
|
36
27
|
|
|
37
28
|
You can import the entire library or individual components to keep your bundle size small.
|
|
38
29
|
|
|
@@ -40,14 +31,15 @@ You can import the entire library or individual components to keep your bundle s
|
|
|
40
31
|
// Import all components
|
|
41
32
|
import '@vollowx/seele';
|
|
42
33
|
|
|
43
|
-
//
|
|
34
|
+
// Or import specific components (recommended)
|
|
35
|
+
// They all follow such path :@/catagory/group/component.js
|
|
44
36
|
import '@vollowx/seele/m3/button/common-button.js';
|
|
45
37
|
import '@vollowx/seele/m3/checkbox/checkbox.js';
|
|
46
38
|
```
|
|
47
39
|
|
|
48
|
-
### Using
|
|
40
|
+
### Using
|
|
49
41
|
|
|
50
|
-
Once imported,
|
|
42
|
+
Once imported, the components can be used just like standard HTML elements.
|
|
51
43
|
|
|
52
44
|
```html
|
|
53
45
|
<md-button variant="filled">Filled Button</md-button>
|
|
@@ -61,9 +53,15 @@ Once imported, use the components just like standard HTML tags.
|
|
|
61
53
|
|
|
62
54
|
### Theming
|
|
63
55
|
|
|
64
|
-
SEELE components use CSS variables for styling.
|
|
56
|
+
SEELE components use CSS variables for styling.
|
|
57
|
+
|
|
58
|
+
Currently, Material Design 3 token variables are not yet included in the source
|
|
59
|
+
code.
|
|
65
60
|
|
|
66
|
-
To style the components correctly, you need to define the necessary CSS
|
|
61
|
+
To style the components correctly, you need to define the necessary CSS
|
|
62
|
+
variables in your project. You can find reference implementations in
|
|
63
|
+
[vollowx/seele-docs](https://github.com/vollowx/seele-docs/) or the `dev` folder
|
|
64
|
+
of this repository.
|
|
67
65
|
|
|
68
66
|
## Browser Supporty
|
|
69
67
|
|
|
@@ -75,5 +73,5 @@ SEELE relies on modern web standards like `ElementInternals`.
|
|
|
75
73
|
## Resources
|
|
76
74
|
|
|
77
75
|
- [Roadmap](./ROADMAP.md)
|
|
78
|
-
- [Contributing
|
|
76
|
+
- [Contributing](./CONTRIBUTING.md)
|
|
79
77
|
- [License](./LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vollowx/seele",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.3",
|
|
4
4
|
"description": "Standard Extensible Elements. A web components library that can be styled and extended freely, pre-providing components in Material Design 3.",
|
|
5
5
|
"author": "vollowx",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
"module": "./src/all.js",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./src/all.js",
|
|
12
|
-
"./
|
|
13
|
-
"./
|
|
12
|
+
"./base/*": "./src/base/*",
|
|
13
|
+
"./m3/*": "./src/m3/*"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
16
|
"src/**/*.js",
|