@vollowx/seele 0.12.5 → 0.12.7
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 +27 -11
- package/custom-elements.json +3563 -1
- package/package.json +11 -17
- package/src/base/tab-group.js +3 -0
- package/src/base/tab-panel.js +0 -0
- package/src/base/tab.js +0 -0
- package/src/m3/checkbox/checkbox.js +1 -12
- package/src/m3/system/base.css +3 -0
- package/src/m3/system/defaults.css +15 -0
- package/src/m3/system/elevation.css +18 -0
- package/src/m3/system/motion.css +30 -0
- package/src/m3/system/typography.css +34 -0
- package/src/m3/tooltip/tooltip.js +2 -2
- package/src/core/shared.d.ts +0 -1
package/README.md
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
1
|
# Standard Extensible Elements
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@vollowx/seele)
|
|
4
|
+
[](https://builds.sr.ht/~lucaz/seele?)
|
|
5
|
+
|
|
6
|
+
Seele (**S**tandard **E**xtensible **Ele**ments) is a extensible
|
|
4
7
|
[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
|
|
5
8
|
library with a focus on accessibility and keyboard-control.
|
|
6
9
|
|
|
7
10
|
It also provides styled components in the following design guideline(s):
|
|
11
|
+
|
|
8
12
|
- [Material You Expressive](https://m3.material.io/)
|
|
9
13
|
|
|
10
14
|
Documentations and demos are at [seele.projects.v9.nz](https://seele.projects.v9.nz/).
|
|
11
15
|
|
|
12
16
|
## Installation
|
|
13
17
|
|
|
14
|
-
|
|
18
|
+
Seele is published on [npm](https://www.npmjs.com/package/@vollowx/seele),
|
|
15
19
|
install with your preferred package manager:
|
|
16
20
|
|
|
17
21
|
```sh
|
|
18
|
-
npm install @vollowx/seele
|
|
19
|
-
|
|
20
|
-
yarn add @vollowx/seele
|
|
21
|
-
|
|
22
22
|
bun add @vollowx/seele
|
|
23
|
+
yarn add @vollowx/seele
|
|
24
|
+
npm install @vollowx/seele
|
|
23
25
|
```
|
|
24
26
|
|
|
25
27
|
## Quickstart
|
|
@@ -54,7 +56,7 @@ Once imported, the components can be used just like standard HTML elements.
|
|
|
54
56
|
|
|
55
57
|
### Theming
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
Seele components use CSS variables for styling. To include the systems, add
|
|
58
60
|
this to your style files.
|
|
59
61
|
|
|
60
62
|
```css
|
|
@@ -73,11 +75,25 @@ this to your style files.
|
|
|
73
75
|
|
|
74
76
|
## Browser Support
|
|
75
77
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
+
Seele relies on the folling modern web standards:
|
|
79
|
+
|
|
80
|
+
- [`ElementInternals`](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals), Baseline 2023
|
|
81
|
+
- [Constructable Stylesheets](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet), Baseline 2024, C[^1] 90, F 126
|
|
82
|
+
- [`:dir()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:dir), Baseline 2023, C 120, F 49
|
|
83
|
+
- [`:state()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:state), Baseline 2024, C 125, F 126
|
|
84
|
+
|
|
85
|
+
And all that result in:
|
|
86
|
+
|
|
87
|
+
- Chromium: >= 125
|
|
88
|
+
- Firefox: >= 126
|
|
89
|
+
|
|
90
|
+
It is 2026 now, you don't really need to worry about this. But in the future,
|
|
91
|
+
these following web features might be used and require higher browser versions:
|
|
92
|
+
|
|
93
|
+
- [anchor()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/anchor), Baseline 2026, C 125, F 147, will remove the dependency `floating-dom`
|
|
94
|
+
- [`::view-*`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::view-transition), Baseline 2025, C 111, F 144, will optimize some animations for menu, dialog, etc
|
|
78
95
|
|
|
79
|
-
|
|
80
|
-
- Firefox-based ones: >= 126.0
|
|
96
|
+
[^1]: C = Chromium, F = Firefox.
|
|
81
97
|
|
|
82
98
|
## Other Information
|
|
83
99
|
|