@shortfuse/materialdesignweb 0.9.3 → 0.10.0
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 +51 -37
- package/api/README.md +5 -0
- package/api/css.css-data.json +23 -0
- package/api/custom-elements.json +116343 -0
- package/api/html.html-data.json +2994 -0
- package/bin/mdw-css.js +8 -8
- package/components/BottomSheet.js +2 -2
- package/components/Box.js +2 -2
- package/components/NavItem.js +4 -1
- package/components/Page.js +3 -0
- package/components/Pane.js +0 -2
- package/components/SideSheet.js +2 -2
- package/components/Surface.js +2 -2
- package/core/Composition.js +57 -16
- package/core/CompositionAdapter.js +55 -12
- package/core/CustomElement.js +177 -34
- package/core/customTypes.js +66 -0
- package/core/jsonMergePatch.js +203 -20
- package/core/observe.js +256 -10
- package/dist/CustomElement.min.js +1 -1
- package/dist/CustomElement.min.js.map +3 -3
- package/dist/index.min.js +171 -158
- package/dist/index.min.js.map +4 -4
- package/dist/meta.json +1 -1
- package/loaders/theme.js +4 -1
- package/mixins/{FlexableMixin.js → FlexboxMixin.js} +5 -3
- package/package.json +32 -10
- package/services/theme.js +115 -97
- package/types/components/NavBarItem.d.ts +1 -0
- package/types/components/NavDrawerItem.d.ts +1 -0
- package/types/components/NavItem.d.ts +1 -0
- package/types/components/NavItem.d.ts.map +1 -1
- package/types/components/NavRailItem.d.ts +1 -0
- package/types/components/Page.d.ts.map +1 -1
- package/types/core/Composition.d.ts +5 -1
- package/types/core/Composition.d.ts.map +1 -1
- package/types/core/CompositionAdapter.d.ts +0 -25
- package/types/core/CompositionAdapter.d.ts.map +1 -1
- package/types/core/CustomElement.d.ts +122 -19
- package/types/core/CustomElement.d.ts.map +1 -1
- package/types/core/customTypes.d.ts +8 -0
- package/types/core/customTypes.d.ts.map +1 -1
- package/types/core/jsonMergePatch.d.ts +58 -4
- package/types/core/jsonMergePatch.d.ts.map +1 -1
- package/types/core/observe.d.ts +21 -2
- package/types/core/observe.d.ts.map +1 -1
- package/types/index.d.ts +1 -1
- package/types/mixins/FlexboxMixin.d.ts +14 -0
- package/types/mixins/FlexboxMixin.d.ts.map +1 -0
- package/types/services/theme.d.ts +6 -0
- package/types/services/theme.d.ts.map +1 -1
- package/types/mixins/FlexableMixin.d.ts +0 -14
- package/types/mixins/FlexableMixin.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,60 +1,74 @@
|
|
|
1
1
|
# materialdesignweb
|
|
2
|
-
Material Design
|
|
3
|
-
|
|
4
|
-
*A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
|
|
2
|
+
Material Design 3 (Material You) Web Components — standards‑focused and zero‑dependency.
|
|
5
3
|
|
|
6
4
|
   
|
|
7
5
|
|
|
8
6
|
[](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) [](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml)
|
|
9
7
|
|
|
10
8
|
Live demo: https://clshortfuse.github.io/materialdesignweb/
|
|
9
|
+
Samples: https://clshortfuse.github.io/materialdesignweb/samples/
|
|
11
10
|
|
|
12
|
-
Quick
|
|
13
|
-
|
|
14
|
-
**Getting Started**
|
|
15
|
-
- [Getting started](docs/GETTING_STARTED.md)
|
|
16
|
-
- [Theming](docs/THEMING.md)
|
|
17
|
-
- [Component index](docs/COMPONENTS.md)
|
|
11
|
+
## Quick start (CDN)
|
|
18
12
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
|
|
23
|
-
- [State management (MVP pattern)](docs/STATE-MVP.md)
|
|
24
|
-
|
|
25
|
-
**Advanced**
|
|
26
|
-
- [Component manifest (CEM)](docs/custom-elements.json) — see [custom-elements-manifest](https://github.com/webcomponents/custom-elements-manifest)
|
|
27
|
-
- [Custom elements manifest spec](docs/CUSTOM-ELEMENTS-MANIFEST.md)
|
|
28
|
-
- [Contributing](docs/CONTRIBUTING.md)
|
|
13
|
+
```html
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
|
|
15
|
+
<mdw-button>Hello World</mdw-button>
|
|
16
|
+
```
|
|
29
17
|
|
|
18
|
+
CDN theming params: `color`, `custom`, `lightness`, `resetCSS`.
|
|
30
19
|
|
|
31
|
-
Install
|
|
20
|
+
## Install (ESM)
|
|
32
21
|
|
|
33
22
|
```bash
|
|
34
23
|
npm install @shortfuse/materialdesignweb
|
|
35
24
|
```
|
|
36
25
|
|
|
37
|
-
|
|
26
|
+
Full bundle:
|
|
38
27
|
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
<mdw-button>Hello World</mdw-button>
|
|
28
|
+
```js
|
|
29
|
+
import '@shortfuse/materialdesignweb';
|
|
42
30
|
```
|
|
43
31
|
|
|
44
|
-
|
|
32
|
+
Single component:
|
|
45
33
|
|
|
46
34
|
```js
|
|
47
|
-
import '@shortfuse/materialdesignweb';
|
|
48
|
-
// or
|
|
49
|
-
import Button from '@shortfuse/materialdesignweb/components/Button.js'; // single component
|
|
35
|
+
import Button from '@shortfuse/materialdesignweb/components/Button.js';
|
|
50
36
|
```
|
|
51
37
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
38
|
+
## Documentation
|
|
39
|
+
|
|
40
|
+
Material Design Web (MDW) is components-first. If you just want to build UI, start with the component docs and use HTML only — no JavaScript required.
|
|
41
|
+
|
|
42
|
+
### 1) Use the components
|
|
43
|
+
- [Getting started](docs/components/getting-started.md)
|
|
44
|
+
- [Component library overview](docs/components/README.md)
|
|
45
|
+
- [Layout](docs/components/layout.md)
|
|
46
|
+
- [Typography](docs/components/typography.md)
|
|
47
|
+
- [Controls & inputs](docs/components/controls.md)
|
|
48
|
+
- [Navigation](docs/components/navigation.md)
|
|
49
|
+
- [Feedback & overlays](docs/components/feedback.md)
|
|
50
|
+
- [Content & surfaces](docs/components/content.md)
|
|
51
|
+
- [Component list](docs/components/README.md)
|
|
52
|
+
|
|
53
|
+
### 2) Theming
|
|
54
|
+
- [Theming overview](docs/theming/README.md)
|
|
55
|
+
|
|
56
|
+
### 3) Samples
|
|
57
|
+
- [Samples index](docs/samples/index.md)
|
|
58
|
+
|
|
59
|
+
### 4) Advanced: extend the core system (JavaScript)
|
|
60
|
+
Use these only if you need custom behavior, state models, or new components.
|
|
61
|
+
- [Core overview](docs/core/README.md)
|
|
62
|
+
- [Custom elements](docs/core/creating-custom-elements.md)
|
|
63
|
+
- [CustomElement API](docs/core/custom-element.md)
|
|
64
|
+
- [Observable properties](docs/core/observable-properties.md)
|
|
65
|
+
- [State patterns](docs/core/state.md)
|
|
66
|
+
- [Mixins](docs/core/mixins.md)
|
|
67
|
+
- [Core modules](docs/core/modules.md)
|
|
68
|
+
|
|
69
|
+
### 5) Reference
|
|
70
|
+
- [API reference](docs/api/README.md)
|
|
71
|
+
- Generated artifacts (API + types) are published to npm on release.
|
|
72
|
+
|
|
73
|
+
### 6) Contributing
|
|
74
|
+
- [Contributing](docs/CONTRIBUTING.md)
|
package/api/README.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://raw.githubusercontent.com/microsoft/vscode-css-languageservice/main/docs/customData.schema.json",
|
|
3
|
+
"version": 1.1,
|
|
4
|
+
"properties": [],
|
|
5
|
+
"pseudoElements": [
|
|
6
|
+
{ "name": "::part(control)" },
|
|
7
|
+
{ "name": "::part(control)" },
|
|
8
|
+
{ "name": "::part(control)" },
|
|
9
|
+
{ "name": "::part(control)" },
|
|
10
|
+
{ "name": "::part(control)" },
|
|
11
|
+
{ "name": "::part(control)" },
|
|
12
|
+
{ "name": "::part(control)" },
|
|
13
|
+
{ "name": "::part(badge)" },
|
|
14
|
+
{ "name": "::part(badge)" },
|
|
15
|
+
{ "name": "::part(badge)" },
|
|
16
|
+
{ "name": "::part(control)" },
|
|
17
|
+
{ "name": "::part(control)" },
|
|
18
|
+
{ "name": "::part(control)" },
|
|
19
|
+
{ "name": "::part(control)" },
|
|
20
|
+
{ "name": "::part(control)" },
|
|
21
|
+
{ "name": "::part(control)" }
|
|
22
|
+
]
|
|
23
|
+
}
|