@shortfuse/materialdesignweb 0.9.4 → 0.10.1

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.
Files changed (46) hide show
  1. package/README.md +55 -37
  2. package/api/README.md +5 -0
  3. package/api/css.css-data.json +23 -0
  4. package/api/custom-elements.json +116343 -0
  5. package/api/html.html-data.json +2994 -0
  6. package/bin/mdw-css.js +8 -8
  7. package/components/BottomSheet.js +2 -2
  8. package/components/Box.js +2 -2
  9. package/components/Page.js +3 -0
  10. package/components/SideSheet.js +2 -2
  11. package/components/Surface.js +2 -2
  12. package/core/Composition.js +57 -16
  13. package/core/CompositionAdapter.js +55 -12
  14. package/core/CustomElement.js +177 -34
  15. package/core/customTypes.js +66 -0
  16. package/core/jsonMergePatch.js +203 -20
  17. package/core/observe.js +252 -8
  18. package/dist/CustomElement.min.js +1 -1
  19. package/dist/CustomElement.min.js.map +3 -3
  20. package/dist/index.min.js +167 -157
  21. package/dist/index.min.js.map +4 -4
  22. package/dist/meta.json +1 -1
  23. package/loaders/theme.js +4 -1
  24. package/mixins/{FlexableMixin.js → FlexboxMixin.js} +5 -3
  25. package/package.json +51 -18
  26. package/services/theme.js +115 -97
  27. package/types/components/Page.d.ts.map +1 -1
  28. package/types/core/Composition.d.ts +5 -1
  29. package/types/core/Composition.d.ts.map +1 -1
  30. package/types/core/CompositionAdapter.d.ts +0 -25
  31. package/types/core/CompositionAdapter.d.ts.map +1 -1
  32. package/types/core/CustomElement.d.ts +122 -19
  33. package/types/core/CustomElement.d.ts.map +1 -1
  34. package/types/core/customTypes.d.ts +8 -0
  35. package/types/core/customTypes.d.ts.map +1 -1
  36. package/types/core/jsonMergePatch.d.ts +58 -4
  37. package/types/core/jsonMergePatch.d.ts.map +1 -1
  38. package/types/core/observe.d.ts +21 -2
  39. package/types/core/observe.d.ts.map +1 -1
  40. package/types/index.d.ts +1 -1
  41. package/types/mixins/FlexboxMixin.d.ts +14 -0
  42. package/types/mixins/FlexboxMixin.d.ts.map +1 -0
  43. package/types/services/theme.d.ts +6 -0
  44. package/types/services/theme.d.ts.map +1 -1
  45. package/types/mixins/FlexableMixin.d.ts +0 -14
  46. package/types/mixins/FlexableMixin.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,62 +1,80 @@
1
1
  # materialdesignweb
2
- Material Design for Web
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
  ![Version](https://badgen.net/npm/v/@shortfuse/materialdesignweb) ![License](https://badgen.net/npm/license/@shortfuse/materialdesignweb) ![MinZip](https://badgen.net/bundlephobia/minzip/@shortfuse/materialdesignweb) ![Dependents](https://badgen.net/npm/dependents/@shortfuse/materialdesignweb)
7
5
 
8
6
  [![Chromium](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) [![Firefox](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) [![Webkit](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml/badge.svg)](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 links
11
+ ## Use the CDN (zero-install)
13
12
 
14
- **Getting Started**
15
- - [Getting started](docs/GETTING_STARTED.md)
16
- - [Theming](docs/THEMING.md)
17
- - [Component index](docs/COMPONENTS.md)
13
+ ```html
14
+ <script src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
15
+ <mdw-button>Hello World</mdw-button>
16
+ ```
18
17
 
19
- **Building Components**
20
- - [Creating custom elements](docs/CREATING_CUSTOM_ELEMENTS.md)
21
- - [Observable properties reference](docs/OBSERVABLE_PROPERTIES.md)
22
- - [State management (element-local)](docs/STATE.md)
23
- - [State management (MVP pattern)](docs/STATE-MVP.md)
18
+ CDN theming params: `color`, `custom`, `lightness`, `resetCSS`.
24
19
 
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)
20
+ Access exports via `globalThis['@shortfuse/materialdesignweb']`:
29
21
 
22
+ ```js
23
+ const { CustomElement } = globalThis['@shortfuse/materialdesignweb'];
24
+ ```
30
25
 
31
- Install via npm:
26
+ ## Import what you need (ESM)
32
27
 
33
28
  ```bash
34
29
  npm install @shortfuse/materialdesignweb
35
30
  ```
36
31
 
37
- Use the CDN (zero-install):
32
+ Full bundle:
38
33
 
39
- ```html
40
- <script src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
41
- <mdw-button>Hello World</mdw-button>
34
+ ```js
35
+ import '@shortfuse/materialdesignweb';
42
36
  ```
43
37
 
44
- Access exports via : `const { CustomElement } = globalThis['@shortfuse/materialdesignweb'];`
45
-
46
- Import what you need (ESM):
38
+ Single component:
47
39
 
48
40
  ```js
49
- import '@shortfuse/materialdesignweb'; // full bundle
50
- // or
51
- import Button from '@shortfuse/materialdesignweb/components/Button.js'; // single component
41
+ import Button from '@shortfuse/materialdesignweb/components/Button.js';
52
42
  ```
53
43
 
54
- See theming options: [docs/THEMING.md](docs/THEMING.md)
55
-
56
- Theming
57
-
58
- - Use the CDN `?color=` param for quick prototyping, or see [docs/THEMING.md](docs/THEMING.md) for runtime/build options.
59
-
60
- Archive
61
-
62
- The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.
44
+ ## Documentation
45
+
46
+ 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.
47
+
48
+ ### 1) Use the components
49
+ - [Getting started](docs/components/getting-started.md)
50
+ - [Component library overview](docs/components/README.md)
51
+ - [Layout](docs/components/layout.md)
52
+ - [Typography](docs/components/typography.md)
53
+ - [Controls & inputs](docs/components/controls.md)
54
+ - [Navigation](docs/components/navigation.md)
55
+ - [Feedback & overlays](docs/components/feedback.md)
56
+ - [Content & surfaces](docs/components/content.md)
57
+ - [Component list](docs/components/README.md)
58
+
59
+ ### 2) Theming
60
+ - [Theming overview](docs/theming/README.md)
61
+
62
+ ### 3) Samples
63
+ - [Samples index](docs/samples/index.md)
64
+
65
+ ### 4) Advanced: extend the core system (JavaScript)
66
+ Use these only if you need custom behavior, state models, or new components.
67
+ - [Core overview](docs/core/README.md)
68
+ - [Custom elements](docs/core/creating-custom-elements.md)
69
+ - [CustomElement API](docs/core/custom-element.md)
70
+ - [Observable properties](docs/core/observable-properties.md)
71
+ - [State patterns](docs/core/state.md)
72
+ - [Mixins](docs/core/mixins.md)
73
+ - [Core modules](docs/core/modules.md)
74
+
75
+ ### 5) Reference
76
+ - [API reference](docs/api/README.md)
77
+ - Generated artifacts (API + types) are published to npm on release.
78
+
79
+ ### 6) Contributing
80
+ - [Contributing](docs/CONTRIBUTING.md)
package/api/README.md ADDED
@@ -0,0 +1,5 @@
1
+ # Generated on release
2
+
3
+ This folder is populated during release builds and published to npm, but the
4
+ generated files are not stored in the repository. The only tracked file here is
5
+ this README to document the behavior.
@@ -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
+ }