@shortfuse/materialdesignweb 0.7.1-8 → 0.7.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 (3) hide show
  1. package/README.md +55 -6
  2. package/bin/{generate-css.js → mdw-css.js} +2 -0
  3. package/package.json +7 -4
package/README.md CHANGED
@@ -1,9 +1,9 @@
1
1
  # materialdesignweb
2
2
  Material Design for Web
3
3
 
4
- # About
4
+ *A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*
5
5
 
6
- A standards-focused, zero-dependency implemention of Material Design 3 (Material You).
6
+ https://badgen.net/npm/v/@shortfuse/materialdesignweb
7
7
 
8
8
  # Current status
9
9
 
@@ -20,17 +20,66 @@ https://clshortfuse.github.io/materialdesignweb/
20
20
 
21
21
  # Getting started
22
22
 
23
+ # Web Ready
23
24
  ````html
24
- <script type="module" src="https://unpkg.com/@shortfuse/materialdesignweb@0.7.0/theming/loader.js?color=6750A4&custom=yellow,orange:orange,green:0f0,alias:aqua&lightness=auto"></script>
25
- <script type="module" src="https://unpkg.com/@shortfuse/materialdesignweb@0.7.0/components/Button.js"></script>
25
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4&custom=yellow,orange:orange,green:0f0,alias:aqua&lightness=auto"></script>
26
26
 
27
27
  <mdw-button>Hello World!</mdw-button>
28
28
  ````
29
29
 
30
+ Includes all components and supports theming over URL params.
31
+
32
+ ## Development
33
+
34
+ ### Static Theme Generation:
35
+
36
+ `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto > theme.css`
37
+
38
+ ### Dynamic Theme Generation:
39
+
40
+ See [loader.js]('./theming/loader.js') for an example.
41
+
42
+ ### Component Loading
43
+
44
+ ````js
45
+ import { Button } from '@shortfuse/materialdesignweb';
46
+ // OR
47
+ import Button from '@shortfuse/materialdesignweb/components/Button.js';
48
+ // OR
49
+ import Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';
50
+ // OR
51
+ import { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4&custom=yellow,orange:orange,green:0f0,alias:aqua&lightness=auto';
52
+
53
+ // Components will auto register after one microtask (right before next event loop)
54
+ // We can bypass this by registering it manually:
55
+
56
+ Button.register();
57
+ const button = new Button();
58
+ button.textContent = 'Hello World!';
59
+ document.body.append(button);
60
+
61
+ ````
62
+
30
63
  # Support
31
64
 
32
- * Unbundled: Chrome >=94
33
- * Bundled: >1% browsers *(polyfills not included)*
65
+
66
+ | Feature | Chrome | Edge | Firefox | Safari |
67
+ | ----------------------------------------------------------------------------------------------------- | -----: | ---: | ------: | -----: |
68
+ | [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |
69
+ | [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |
70
+ | [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |
71
+ | [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |
72
+ | [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |
73
+ | | | | | |
74
+ | Supported | 84 | 84 | 93 | 16.4 |
75
+
76
+ *Optional
77
+
78
+ †Can be polyfilled
79
+
80
+ Notes:
81
+
82
+ * Compatibility may be extended via polyfills (not included)
34
83
 
35
84
  # Legend
36
85
 
package/bin/{generate-css.js → mdw-css.js} RENAMED
@@ -1,3 +1,5 @@
1
+ #!/usr/bin/env node
2
+
1
3
  import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
2
4
  import { getSearchParams } from '../utils/cli.js';
3
5
 
package/package.json CHANGED
@@ -1,12 +1,15 @@
1
1
  {
2
2
  "name": "@shortfuse/materialdesignweb",
3
- "version": "0.7.1-8",
3
+ "version": "0.7.1",
4
4
  "description": "Material Design for Web",
5
5
  "type": "module",
6
+ "bin": {
7
+ "mdw-css": "./bin/mdw-css.js"
8
+ },
6
9
  "scripts": {
7
- "prepare": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production",
8
- "predocs": "node bin/generate-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
9
- "predocs-alt": "node bin/generate-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
10
+ "prepublishOnly": "node build/esbuild.js index.js --outdir=dist --minify --metafile --production",
11
+ "predocs": "node bin/mdw-css.js --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/theme.css",
12
+ "predocs-alt": "node bin/mdw-css.js --color=a46750 --custom=yellow,orange:orange,green:0f0,alias:aqua | npx esbuild --minify --loader=css > docs/alt-theme.css",
10
13
  "docs": "node build/esbuild.js docs/demo.js --outdir=docs --minify --metafile",
11
14
  "watch": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile",
12
15
  "serve": "node build/esbuild.js docs/demo.js --outdir=docs --watch --metafile --serve --live",