@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.
Files changed (53) hide show
  1. package/README.md +51 -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/NavItem.js +4 -1
  10. package/components/Page.js +3 -0
  11. package/components/Pane.js +0 -2
  12. package/components/SideSheet.js +2 -2
  13. package/components/Surface.js +2 -2
  14. package/core/Composition.js +57 -16
  15. package/core/CompositionAdapter.js +55 -12
  16. package/core/CustomElement.js +177 -34
  17. package/core/customTypes.js +66 -0
  18. package/core/jsonMergePatch.js +203 -20
  19. package/core/observe.js +256 -10
  20. package/dist/CustomElement.min.js +1 -1
  21. package/dist/CustomElement.min.js.map +3 -3
  22. package/dist/index.min.js +171 -158
  23. package/dist/index.min.js.map +4 -4
  24. package/dist/meta.json +1 -1
  25. package/loaders/theme.js +4 -1
  26. package/mixins/{FlexableMixin.js → FlexboxMixin.js} +5 -3
  27. package/package.json +32 -10
  28. package/services/theme.js +115 -97
  29. package/types/components/NavBarItem.d.ts +1 -0
  30. package/types/components/NavDrawerItem.d.ts +1 -0
  31. package/types/components/NavItem.d.ts +1 -0
  32. package/types/components/NavItem.d.ts.map +1 -1
  33. package/types/components/NavRailItem.d.ts +1 -0
  34. package/types/components/Page.d.ts.map +1 -1
  35. package/types/core/Composition.d.ts +5 -1
  36. package/types/core/Composition.d.ts.map +1 -1
  37. package/types/core/CompositionAdapter.d.ts +0 -25
  38. package/types/core/CompositionAdapter.d.ts.map +1 -1
  39. package/types/core/CustomElement.d.ts +122 -19
  40. package/types/core/CustomElement.d.ts.map +1 -1
  41. package/types/core/customTypes.d.ts +8 -0
  42. package/types/core/customTypes.d.ts.map +1 -1
  43. package/types/core/jsonMergePatch.d.ts +58 -4
  44. package/types/core/jsonMergePatch.d.ts.map +1 -1
  45. package/types/core/observe.d.ts +21 -2
  46. package/types/core/observe.d.ts.map +1 -1
  47. package/types/index.d.ts +1 -1
  48. package/types/mixins/FlexboxMixin.d.ts +14 -0
  49. package/types/mixins/FlexboxMixin.d.ts.map +1 -0
  50. package/types/services/theme.d.ts +6 -0
  51. package/types/services/theme.d.ts.map +1 -1
  52. package/types/mixins/FlexableMixin.d.ts +0 -14
  53. package/types/mixins/FlexableMixin.d.ts.map +0 -1
package/README.md CHANGED
@@ -1,60 +1,74 @@
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
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
- **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)
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 via npm:
20
+ ## Install (ESM)
32
21
 
33
22
  ```bash
34
23
  npm install @shortfuse/materialdesignweb
35
24
  ```
36
25
 
37
- Use the CDN (zero-install):
26
+ Full bundle:
38
27
 
39
- ```html
40
- <script type="module" src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4"></script>
41
- <mdw-button>Hello World</mdw-button>
28
+ ```js
29
+ import '@shortfuse/materialdesignweb';
42
30
  ```
43
31
 
44
- Import what you need (ESM):
32
+ Single component:
45
33
 
46
34
  ```js
47
- import '@shortfuse/materialdesignweb'; // full bundle
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
- See theming options: [docs/THEMING.md](docs/THEMING.md)
53
-
54
- Theming
55
-
56
- - Use the CDN `?color=` param for quick prototyping, or see [docs/THEMING.md](docs/THEMING.md) for runtime/build options.
57
-
58
- Archive
59
-
60
- The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.
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,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
+ }